Patrick.Sy/spring-petclinic
1
0
Fork 0
mirror of https://github.com/spring-projects/spring-petclinic.git synced 2025-07-17 21:35:50 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add discover pet owners page

Browse source
This commit is contained in:
Andrew Abogado 2015-01-21 15:37:13 +08:00
parent 98bce5bd13
commit e31c48d36f
3 changed files with 296 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

264
assets/petclinic/app/discover.html Normal file
View file

@ -0,0 +1,264 @@
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>Pet Clinic - Discover Pet Owners on your Neigborhood</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="/favicon.ico">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body>
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Pet Clinic</a>
</div>
<div id="navbar" class="navbar-collapse collapse pull-right">
<ul class="nav navbar-nav">
<li><a href="discover.html" class="active">Discover</a></li>
<li><a href="#vet">Veterinarians</a></li>
<li><a href="#about">About</a></li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron jumbotron-tertiary">
<div class="container">
<div class="jumbotron-headline">
<div class="jumbotron-headline-cell">
<h1>Discover Pet Owners</h1>
<p>Helping you discover pet owners near you and connect.</p>
<div class="row">
<div class="col-md-6 col-md-offset-2">
<input type="text" class="form-control input-lg" placeholder=".col-md-8">
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-primary btn-lg btn-block">Discover</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Featured veterinarians -->
<section id="veterianarians" class="sections">
<div class="container">
<div class="nav-tabs-filter">
<a href="#add_owner" role="button" class="btn btn-primary pull-right">Register Now - It's Free!</a>
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Newest</a></li>
<li role="presentation"><a href="#">Popular</a></li>
<li role="presentation" class="dropdown open">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">McFarland</a></li>
<li><a href="#">Sun Prairie</a></li>
<li><a href="#">Madison</a></li>
<li><a href="#">New York</a></li>
<li><a href="#">Madison</a></li>
</ul>
</li>
</ul>
</div>
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/600x600" alt="Generic placeholder image">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/600x600" alt="Generic placeholder image">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/600x600" alt="Generic placeholder image">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/600x600" alt="Generic placeholder image">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/600x600" alt="Generic placeholder image">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/600x600" alt="Generic placeholder image">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/600x600" alt="Generic placeholder image">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/600x600" alt="Generic placeholder image">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<p><a class="btn btn-primary btn-lg btn-block" href="#">Show More »</a></p>
</div>
</div>
</div>
</section>
<!-- Make an appointment call to action -->
<section id="appointment" class="jumbotron jumbotron-secondary">
<div class="container">
<div class="jumbotron-headline">
<div class="jumbotron-headline-cell">
<h2>Over 40,000 pet owners trust us. Register now. It's <strong>Free</strong> forever!</h2>
<p>Use it as a starting point to create something more unique.</p>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="clientName">Your Name</label>
<input type="text" class="form-control input-lg" id="clientName" placeholder="Your name">
</div><div class="form-group">
<label class="sr-only" for="emailAddress">Email Address</label>
<input type="email" class="form-control input-lg" id="emailAddress" placeholder="Your email">
</div>
<div class="form-group">
<label class="sr-only" for="clientNumber">Contact Number</label>
<input type="text" class="form-control input-lg" id="clientNumber" placeholder="Your contact number">
</div>
<button type="submit" class="btn btn-primary btn-lg">Get Started - It's Free!</button>
</form>
</div>
</div>
</div>
</section>
<!-- Contact details -->
<section id="add_owner" class="sections sections-narrow">
<div class="container">
<!-- Three columns of text below the carousel -->
<div class="row">
<div class="col-lg-4">
<h3>Business Hours</h3>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<h3>Our Location</h3>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<h3>Subscribe to our stories</h3>
<form class="form-inline">
<div class="form-group">
<label class="sr-only">Email</label>
<input type="email" class="form-control" id="inputPassword2" placeholder="Enter your email">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<p><small>By clicking "Submit" I agree to Pet Clinic's Terms of Service.</small></p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<p class="pull-right">Follow us at <a href="#">Facebook</a> & <a href="#">Twitter</a></p>
<p>© 2015 Pet Clinic, A Spring Framework Demonstration</p>
</div>
</footer>
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/affix.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/alert.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/button.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/carousel.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/collapse.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/dropdown.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/tab.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/transition.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/scrollspy.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/modal.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/tooltip.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/popover.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');
</script>
<!-- build:js({app,.tmp}) scripts/main.js -->
<script src="scripts/main.js"></script>
<!-- endbuild -->
</body>
</html>

19
assets/petclinic/app/index.html
View file

@ -2,7 +2,7 @@
<html class="no-js">
<head>
<meta charset="utf-8">
<title>Pet Clinic</title>
<title>Pet Clinic - Home</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="/favicon.ico">
@ -29,14 +29,12 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Pet Clinic</a>
<a class="navbar-brand" href="/">Pet Clinic</a>
</div>
<div id="navbar" class="navbar-collapse collapse pull-right">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="discover.html">Discover</a></li>
<li><a href="#vet">Veterinarians</a></li>
<li><a href="#owners">Owners</a></li>
<li><a href="#about">About</a></li>
</ul>
</div><!--/.navbar-collapse -->
@ -50,7 +48,7 @@
<div class="jumbotron-headline-cell">
<h1>Pet Clinic <br> A Spring Framework Demonstration</h1>
<p>A place to see your neighborhood pet owners</p>
<p><a class="btn btn-primary btn-lg" href="#contact_details" role="button">Get started - It's Free!</a></p>
<p><a class="btn btn-primary btn-lg" href="#add_owner" role="button">Get started - It's Free!</a></p>
</div>
</div>
</div>
@ -128,7 +126,7 @@
</div>
<!-- /row -->
<div class="row">
<div class="col-md-4 col-xs-offset-4">
<div class="col-md-4 col-md-offset-4">
<p><a class="btn btn-primary btn-lg btn-block" href="/veterinarians">View More »</a></p>
</div>
</div>
@ -265,7 +263,8 @@
<div class="form-group">
<label class="sr-only" for="clientName">Your Name</label>
<input type="text" class="form-control input-lg" id="clientName" placeholder="Your name">
</div><div class="form-group">
</div>
<div class="form-group">
<label class="sr-only" for="emailAddress">Email Address</label>
<input type="email" class="form-control input-lg" id="emailAddress" placeholder="Your email">
</div>
@ -280,8 +279,8 @@
</div>
</section>
<!-- Contact details -->
<section id="contact_details" class="sections sections-narrow">
<!-- Add Owner / Register -->
<section id="add_owner" class="sections sections-narrow">
<div class="container">
<!-- Three columns of text below the carousel -->
<div class="row">

42
assets/petclinic/app/styles/main.scss
View file

@ -53,7 +53,7 @@ body {
/* Main marketing message and sign up button */
.jumbotron {
height: 620px;
margin-bottom: 30px;
margin-bottom: 0;
text-align: center;
border-bottom: 1px solid #e5e5e5;
@ -70,15 +70,19 @@ body {
margin-bottom: 25px;
}
.btn {
font-size: 21px;
padding: 14px 24px;
.form-inline {
font-size: 0;
}
.form-group {
margin-right: 5px;
}
}
.jumbotron-headline {
display: table;
height: 100%;
width: 100%;
}
.jumbotron-headline-cell {
@ -89,7 +93,6 @@ body {
/* Secondary marketing message and call to action */
.jumbotron-secondary {
height: 500px;
margin-bottom: 0;
h2 {
font-size: 36px;
@ -99,17 +102,14 @@ body {
fotn-weight: 600;
}
}
.form-inline {
font-size: 0;
}
.form-group {
margin-right: 5px;
}
/* Tertiary marketing message and call to action. */
.jumbotron-tertiary {
height: 400px;
.form-control {
height: 58px;
h1, .h1 {
margin-top: 0;
}
}
@ -121,11 +121,6 @@ body {
.thumbnail {
margin-bottom: 25px;
}
.btn-primary {
font-size: 21px;
padding: 14px 24px;
}
}
.sections-narrow {
@ -141,6 +136,13 @@ body {
margin-bottom: 25px;
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
.nav-tabs-filter {
margin-bottom: 30px;
}
/* Responsive: Portrait tablets and up */
@media (max-width: 768px) {
.jumbotron {
height: auto;
}
}