Add static file resources to be used and link to the app later.

This commit is contained in:
Andrew Abogado 2015-02-04 09:26:44 +08:00
parent e16ff5e8c4
commit ccc17b9e81
29 changed files with 2466 additions and 0 deletions

View file

@ -0,0 +1,3 @@
{
"directory": "bower_components"
}

View file

@ -0,0 +1,21 @@
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org
root = true
[*]
# Change these settings to your own preference
indent_style = space
indent_size = 2
# We recommend you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false

1
src/main/webapp/static/.gitattributes vendored Normal file
View file

@ -0,0 +1 @@
* text=auto

5
src/main/webapp/static/.gitignore vendored Normal file
View file

@ -0,0 +1,5 @@
node_modules
.DS_Store
.tmp
.sass-cache
bower_components

View file

@ -0,0 +1,21 @@
{
"node": true,
"browser": true,
"esnext": true,
"bitwise": true,
"camelcase": true,
"curly": true,
"eqeqeq": true,
"immed": true,
"indent": 2,
"latedef": true,
"newcap": true,
"noarg": true,
"quotmark": "single",
"undef": true,
"unused": true,
"strict": true,
"trailing": true,
"smarttabs": true,
"jquery": true
}

View file

@ -0,0 +1,3 @@
{
"generator-mocha": {}
}

View file

@ -0,0 +1,453 @@
// Generated on 2015-01-19 using
// generator-webapp 0.5.1
'use strict';
// # Globbing
// for performance reasons we're only matching one level down:
// 'test/spec/{,*/}*.js'
// If you want to recursively match all subfolders, use:
// 'test/spec/**/*.js'
module.exports = function(grunt) {
// Time how long tasks take. Can help when optimizing build times
require('time-grunt')(grunt);
// Load grunt tasks automatically
require('load-grunt-tasks')(grunt);
// Configurable paths
var config = {
app: 'app',
dist: 'dist'
};
// Define the configuration for all the tasks
grunt.initConfig({
// Project settings
config: config,
// Watches files for changes and runs tasks based on the changed files
watch: {
bower: {
files: ['bower.json'],
tasks: ['wiredep']
},
js: {
files: ['<%= config.app %>/scripts/{,*/}*.js'],
tasks: ['jshint'],
options: {
livereload: true
}
},
jstest: {
files: ['test/spec/{,*/}*.js'],
tasks: ['test:watch']
},
gruntfile: {
files: ['Gruntfile.js']
},
sass: {
files: ['<%= config.app %>/styles/{,*/}*.{scss,sass}'],
tasks: ['sass:server', 'autoprefixer']
},
styles: {
files: ['<%= config.app %>/styles/{,*/}*.css'],
tasks: ['newer:copy:styles', 'autoprefixer']
},
livereload: {
options: {
livereload: '<%= connect.options.livereload %>'
},
files: [
'<%= config.app %>/{,*/}*.html',
'.tmp/styles/{,*/}*.css',
'<%= config.app %>/images/{,*/}*'
]
}
},
// The actual grunt server settings
connect: {
options: {
port: 9000,
open: true,
livereload: 35729,
// Change this to '0.0.0.0' to access the server from outside
hostname: '0.0.0.0'
},
livereload: {
options: {
middleware: function(connect) {
return [
connect.static('.tmp'),
connect().use('/bower_components', connect.static(
'./bower_components')),
connect.static(config.app)
];
}
}
},
test: {
options: {
open: false,
port: 9001,
middleware: function(connect) {
return [
connect.static('.tmp'),
connect.static('test'),
connect().use('/bower_components', connect.static(
'./bower_components')),
connect.static(config.app)
];
}
}
},
dist: {
options: {
base: '<%= config.dist %>',
livereload: false
}
}
},
// Empties folders to start fresh
clean: {
dist: {
files: [{
dot: true,
src: [
'.tmp',
'<%= config.dist %>/*',
'!<%= config.dist %>/.git*'
]
}]
},
server: '.tmp'
},
// Make sure code styles are up to par and there are no obvious mistakes
jshint: {
options: {
jshintrc: '.jshintrc',
reporter: require('jshint-stylish')
},
all: [
'Gruntfile.js',
'<%= config.app %>/scripts/{,*/}*.js',
'!<%= config.app %>/scripts/vendor/*',
'test/spec/{,*/}*.js'
]
},
// Mocha testing framework configuration options
mocha: {
all: {
options: {
run: true,
urls: [
'http://<%= connect.test.options.hostname %>:<%= connect.test.options.port %>/index.html'
]
}
}
},
// Compiles Sass to CSS and generates necessary files if requested
sass: {
options: {
sourceMap: true,
includePaths: ['bower_components']
},
dist: {
files: [{
expand: true,
cwd: '<%= config.app %>/styles',
src: ['*.{scss,sass}'],
dest: '.tmp/styles',
ext: '.css'
}]
},
server: {
files: [{
expand: true,
cwd: '<%= config.app %>/styles',
src: ['*.{scss,sass}'],
dest: '.tmp/styles',
ext: '.css'
}]
}
},
// Add vendor prefixed styles
autoprefixer: {
options: {
browsers: ['> 1%', 'last 2 versions', 'Firefox ESR', 'Opera 12.1']
},
dist: {
files: [{
expand: true,
cwd: '.tmp/styles/',
src: '{,*/}*.css',
dest: '.tmp/styles/'
}]
}
},
// Automatically inject Bower components into the HTML file
wiredep: {
app: {
ignorePath: /^\/|\.\.\//,
src: ['<%= config.app %>/index.html'],
exclude: [
'bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js'
]
},
sass: {
src: ['<%= config.app %>/styles/{,*/}*.{scss,sass}'],
ignorePath: /(\.\.\/){1,2}bower_components\//
}
},
// Renames files for browser caching purposes
rev: {
dist: {
files: {
src: [
'<%= config.dist %>/scripts/{,*/}*.js',
'<%= config.dist %>/styles/{,*/}*.css',
'<%= config.dist %>/images/{,*/}*.*',
'<%= config.dist %>/styles/fonts/{,*/}*.*',
'<%= config.dist %>/*.{ico,png}'
]
}
}
},
// Reads HTML for usemin blocks to enable smart builds that automatically
// concat, minify and revision files. Creates configurations in memory so
// additional tasks can operate on them
// For Production
useminPrepare: {
options: {
dest: '<%= config.dist %>'
},
html: '<%= config.app %>/index.html'
},
// For Development
// useminPrepare: {
// options: {
// dest: '<%= config.dist %>',
// flow: {
// steps: {
// js: ['concat'],
// css: ['concat']
// },
// post: {}
// }
// },
// html: '<%= config.app %>/index.html',
// },
// Performs rewrites based on rev and the useminPrepare configuration
usemin: {
options: {
assetsDirs: [
'<%= config.dist %>',
'<%= config.dist %>/images',
'<%= config.dist %>/styles'
]
},
html: ['<%= config.dist %>/{,*/}*.html'],
css: ['<%= config.dist %>/styles/{,*/}*.css']
},
// The following *-min tasks produce minified files in the dist folder
imagemin: {
dist: {
files: [{
expand: true,
cwd: '<%= config.app %>/images',
src: '{,*/}*.{gif,jpeg,jpg,png}',
dest: '<%= config.dist %>/images'
}]
}
},
svgmin: {
dist: {
files: [{
expand: true,
cwd: '<%= config.app %>/images',
src: '{,*/}*.svg',
dest: '<%= config.dist %>/images'
}]
}
},
htmlmin: {
dist: {
options: {
collapseBooleanAttributes: true,
collapseWhitespace: true,
conservativeCollapse: true,
removeAttributeQuotes: true,
removeCommentsFromCDATA: true,
removeEmptyAttributes: true,
removeOptionalTags: true,
removeRedundantAttributes: true,
useShortDoctype: true
},
files: [{
expand: true,
cwd: '<%= config.dist %>',
src: '{,*/}*.html',
dest: '<%= config.dist %>'
}]
}
},
// By default, your `index.html`'s <!-- Usemin block --> will take care
// of minification. These next options are pre-configured if you do not
// wish to use the Usemin blocks.
// cssmin: {
// dist: {
// files: {
// '<%= config.dist %>/styles/main.css': [
// '.tmp/styles/{,*/}*.css',
// '<%= config.app %>/styles/{,*/}*.css'
// ]
// }
// }
// },
// uglify: {
// dist: {
// files: {
// '<%= config.dist %>/scripts/scripts.js': [
// '<%= config.dist %>/scripts/scripts.js'
// ]
// }
// }
// },
// concat: {
// dist: {}
// },
// Copies remaining files to places other tasks can use
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= config.app %>',
dest: '<%= config.dist %>',
src: [
'*.{ico,png,txt}',
'images/{,*/}*.webp',
'{,*/}*.html',
'styles/fonts/{,*/}*.*'
]
}, {
src: 'node_modules/apache-server-configs/dist/.htaccess',
dest: '<%= config.dist %>/.htaccess'
}, {
expand: true,
dot: true,
cwd: '.',
src: 'bower_components/bootstrap-sass-official/assets/fonts/bootstrap/*',
dest: '<%= config.dist %>'
}]
},
styles: {
expand: true,
dot: true,
cwd: '<%= config.app %>/styles',
dest: '.tmp/styles/',
src: '{,*/}*.css'
}
},
// Run some tasks in parallel to speed up build process
concurrent: {
server: [
'sass:server',
'copy:styles'
],
test: [
'copy:styles'
],
dist: [
'sass',
'copy:styles',
'imagemin',
'svgmin'
]
}
});
grunt.registerTask('serve',
'start the server and preview your app, --allow-remote for remote access',
function(target) {
if (grunt.option('allow-remote')) {
grunt.config.set('connect.options.hostname', '0.0.0.0');
}
if (target === 'dist') {
return grunt.task.run(['build', 'connect:dist:keepalive']);
}
grunt.task.run([
'clean:server',
'wiredep',
'concurrent:server',
'autoprefixer',
'connect:livereload',
'watch'
]);
});
grunt.registerTask('server', function(target) {
grunt.log.warn(
'The `server` task has been deprecated. Use `grunt serve` to start a server.'
);
grunt.task.run([target ? ('serve:' + target) : 'serve']);
});
grunt.registerTask('test', function(target) {
if (target !== 'watch') {
grunt.task.run([
'clean:server',
'concurrent:test',
'autoprefixer'
]);
}
grunt.task.run([
'connect:test',
'mocha'
]);
});
grunt.registerTask('build', [
'clean:dist',
'wiredep',
'useminPrepare',
'concurrent:dist',
'autoprefixer',
'concat',
// For Development - Prevent minification
'cssmin',
'uglify',
'copy:dist',
// 'rev',
'usemin',
// For Development - Prevent minification
'htmlmin'
]);
grunt.registerTask('default', [
'newer:jshint',
'test',
'build'
]);
};

View file

@ -0,0 +1,41 @@
Pet Clinic Front-end
====================
Pet Clinic Front-end is the static file for [Spring Pet Clinic repo](https://github.com/singularity-sg/spring-petclinic) client-side code. It is generated by using [Yoeman](http://yeoman.io/), The web's scaffolding tool for modern webapps.
### Start here:
1. Download and install [NodeJS](http://nodejs.org/) if you haven't installed it yet.
2. Be sure you are at the root directory of the **spring-petclinic** repo.
3. Change directory by issuing this command, `cd assets/petclinic/`
4. Run `npm install -g yo bower grunt-cli`. This will install [Yoeman](http://yeoman.io/), [Bower](http://bower.io/), and [Grunt](http://gruntjs.com/).
5. On the same folder, run `bower install && npm install`
Assuming all went well, after which, all we have to run are `grunt` commands to start the server and review the app you have generated, run the unit tests, and build an optimized, production-ready version of your app.
## Preview an app you have generated (with Livereload)
Run `grunt serve`. This will open up the app on your browser in http://localhost:9000/ url
## Run the unit tests
Run `grunt test`. This is how you'll run unit test. Though we haven't done any test for this app, so you skip this.
## Build an optimized, production-ready version of your app
Run `grunt build`
Running `grunt build` takes your `app/` source code files and turns them into a distributable application, which ends up in `dist/` directory
### Install Grunt
> **Note**
>
> If an error occurred when running any grunt commands relating to PhantomJS timing out, do the following to fix the issue.
1. Make sure you're in `assets/petclinic/` directory. Run `cd test`
2. Run `bower install`
3. Go back to the petclinic folder, run `cd ..`
4. Try to run `grunt`. See if no errors appeared.

View file

@ -0,0 +1,327 @@
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>Pet Clinic - Dashboard</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-default navbar-static-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="/">
<img alt="Pet Clinic Brand" height="27" width="auto" src="images/logo.png">
</a>
<button class="navbar-toggle navbar-toggle-left collapsed" type="button" data-toggle="collapse" data-target="#nav-menu">
<span class="sr-only">Toggle navigation</span>
<span class="glyphicon glyphicon-triangle-bottom"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="nav-menu" class="navbar-collapse navbar-left collapse">
<ul class="nav navbar-nav navbar-menu">
<li><a href="owners.html">Owners</a></li>
<li><a href="pets.html">Pets</a></li>
<li><a href="vets.html">Vets</a></li>
</ul>
</div><!-- /.navbar-collapse -->
<ul class="nav navbar-profile">
<li class="hidden">
<button class="btn btn-default btn-primary btn-new navbar-btn" data-toggle="dropdown">Create New</button>
</li>
<li><a href="#"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle img-profile" data-toggle="dropdown" role="button" aria-expanded="false">
<img class="img-circle" src="../images/avatar.jpg" width="30" height="30">
</a>
<ul class="dropdown-menu navbar-dropdown-menu">
<li><a href="#">View Profile</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Sign Out</a></li>
<li class="divider"></li>
<li><a href="#">Help</a></li>
</ul>
</li>
</ul>
</div>
</div><!-- /.container-fluid -->
</nav>
<!-- Welcome -->
<header class="sections sections-narrow sections-light">
<div class="container">
<div class="media media-welcome">
<div class="media-left">
<img src="../images/avatar.jpg" class="img-circle media-object" width="90" height="90">
</div>
<div class="media-body">
<h4 class="h3">Welcome, John Doe</h4>
<p>When youre ready, you may start adding a new <a href="#">pet owner</a> or <a href="#">continue browsing</a>.</p>
</div>
</div>
</div>
</header>
<!-- Owners -->
<section id="owners" class="sections sections-narrow">
<div class="container">
<h2 class="sub-header">Browse Owners</h2>
<div class="row thumbnail-wrapper">
<div class="col-md-3">
<div class="thumbnail">
<img src="../images/owner-default.png" class="img-circle" alt="Generic placeholder image">
<div class="caption">
<h3 class="caption-heading">Eduardo Rodriguez</h3>
<p class="caption-meta">2693 Commerce St., McFarland</p>
<p class="caption-meta"><span class="glyphicon glyphicon-phone-alt"></span> +6085558763</p>
</div>
<div class="action-bar">
<ul>
<li>
<a href="#"><img src="../images/pet-small.png" class="img-circle" alt="Generic placeholder image" height="30" width="30"></a>
</li>
<li>
<a href="#" class="btn-add-pet"><span class="glyphicon glyphicon-plus"></span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="../images/owner-default.png" class="img-circle" alt="Generic placeholder image">
<div class="caption">
<h3 class="caption-heading">Eduardo Rodriguez</h3>
<p class="caption-meta">2693 Commerce St., McFarland</p>
<p class="caption-meta"><span class="glyphicon glyphicon-phone-alt"></span> +6085558763</p>
</div>
<div class="action-bar">
<ul>
<li>
<a href="#"><img src="../images/pet-small.png" class="img-circle" alt="Generic placeholder image" height="30" width="30"></a>
</li>
<li>
<a href="#" class="btn-add-pet"><span class="glyphicon glyphicon-plus"></span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="../images/owner-default.png" class="img-circle" alt="Generic placeholder image">
<div class="caption">
<h3 class="caption-heading">Eduardo Rodriguez</h3>
<p class="caption-meta">2693 Commerce St., McFarland</p>
<p class="caption-meta"><span class="glyphicon glyphicon-phone-alt"></span> +6085558763</p>
</div>
<div class="action-bar">
<ul>
<li>
<a href="#"><img src="../images/pet-small.png" class="img-circle" alt="Generic placeholder image" height="30" width="30"></a>
</li>
<li>
<a href="#" class="btn-add-pet"><span class="glyphicon glyphicon-plus"></span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="../images/owner-default.png" class="img-circle" alt="Generic placeholder image">
<div class="caption">
<h3 class="caption-heading">Eduardo Rodriguez</h3>
<p class="caption-meta">2693 Commerce St., McFarland</p>
<p class="caption-meta"><span class="glyphicon glyphicon-phone-alt"></span> +6085558763</p>
</div>
<div class="action-bar">
<ul>
<li>
<a href="#"><img src="../images/pet-small.png" class="img-circle" alt="Generic placeholder image" height="30" width="30"></a>
</li>
<li>
<a href="#" class="btn-add-pet"><span class="glyphicon glyphicon-plus"></span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /row -->
<div class="row">
<div class="col-md-4 col-md-offset-4">
<p><a class="btn btn-default btn-block" href="/owners">See All Owners</a></p>
</div>
</div>
</div>
</section>
<!-- Pets -->
<section id="pets" class="sections sections-narrow">
<div class="container">
<h2 class="sub-header">Pets</h2>
<div class="row thumbnail-wrapper">
<div class="col-md-3">
<div class="thumbnail">
<img src="../images/pet-default.png" class="img-circle" alt="Generic placeholder image">
<div class="caption">
<h3 class="caption-heading">Basil</h3>
<p class="caption-meta">08 August 2012</p>
<p class="caption-meta"><span class="caption-label">Hamster</span></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="../images/pet-default.png" class="img-circle" alt="Generic placeholder image">
<div class="caption">
<h3 class="caption-heading">Basil</h3>
<p class="caption-meta">08 August 2012</p>
<p class="caption-meta"><span class="caption-label">Hamster</span></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="../images/pet-default.png" class="img-circle" alt="Generic placeholder image">
<div class="caption">
<h3 class="caption-heading">Basil</h3>
<p class="caption-meta">08 August 2012</p>
<p class="caption-meta"><span class="caption-label">Hamster</span></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="../images/pet-default.png" class="img-circle" alt="Generic placeholder image">
<div class="caption">
<h3 class="caption-heading">Basil</h3>
<p class="caption-meta">08 August 2012</p>
<p class="caption-meta"><span class="caption-label">Hamster</span></p>
</div>
</div>
</div>
</div>
<!-- /row -->
<div class="row">
<div class="col-md-4 col-md-offset-4">
<p><a class="btn btn-default btn-block" href="/pets">See All Pets</a></p>
</div>
</div>
</div>
</section>
<!-- Vets -->
<section id="owners" class="sections">
<div class="container">
<h2 class="sub-header">Veterinarians</h2>
<div class="row thumbnail-wrapper">
<div class="col-md-3">
<div class="thumbnail">
<img src="../images/veterinarian-default.jpg" class="img-circle" alt="Generic placeholder image">
<div class="caption">
<h3 class="caption-heading">Helen Leary</h3>
<p class="caption-meta"><span class="glyphicon glyphicon-phone-alt"></span> +6085558763</p>
<p class="caption-meta"><span class="caption-label">Surgery</span></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="../images/veterinarian-default.jpg" class="img-circle" alt="Generic placeholder image">
<div class="caption">
<h3 class="caption-heading">Helen Leary</h3>
<p class="caption-meta"><span class="glyphicon glyphicon-phone-alt"></span> +6085558763</p>
<p class="caption-meta"><span class="caption-label">Surgery</span></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="../images/veterinarian-default.jpg" class="img-circle" alt="Generic placeholder image">
<div class="caption">
<h3 class="caption-heading">Helen Leary</h3>
<p class="caption-meta"><span class="glyphicon glyphicon-phone-alt"></span> +6085558763</p>
<p class="caption-meta"><span class="caption-label">Surgery</span></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="../images/veterinarian-default.jpg" class="img-circle" alt="Generic placeholder image">
<div class="caption">
<h3 class="caption-heading">Helen Leary</h3>
<p class="caption-meta"><span class="glyphicon glyphicon-phone-alt"></span> +6085558763</p>
<p class="caption-meta"><span class="caption-label">Surgery</span></p>
</div>
</div>
</div>
</div>
<!-- /row -->
<div class="row">
<div class="col-md-4 col-md-offset-4">
<p><a class="btn btn-default btn-block" href="/vets">See All Veterinarians</a></p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<p class="pull-right">Tell your friends: <a href="#">Facebook</a>, <a href="#">Twitter</a>, <a href="#">Google+</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>

View file

@ -0,0 +1,260 @@
<!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">
<a href="show.html"><a href="show.html"><img src="http://placehold.it/600x600" alt="Generic placeholder image"></a></a>
<div class="caption">
<a href="show.html"><a href="show.html"><h3>Thumbnail label</h3></a></a>
<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">
<a href="show.html"><a href="show.html"><img src="http://placehold.it/600x600" alt="Generic placeholder image"></a></a>
<div class="caption">
<a href="show.html"><a href="show.html"><h3>Thumbnail label</h3></a></a>
<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">
<a href="show.html"><img src="http://placehold.it/600x600" alt="Generic placeholder image"></a>
<div class="caption">
<a href="show.html"><h3>Thumbnail label</h3></a>
<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">
<a href="show.html"><img src="http://placehold.it/600x600" alt="Generic placeholder image"></a>
<div class="caption">
<a href="show.html"><h3>Thumbnail label</h3></a>
<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">
<a href="show.html"><img src="http://placehold.it/600x600" alt="Generic placeholder image"></a>
<div class="caption">
<a href="show.html"><h3>Thumbnail label</h3></a>
<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">
<a href="show.html"><img src="http://placehold.it/600x600" alt="Generic placeholder image"></a>
<div class="caption">
<a href="show.html"><h3>Thumbnail label</h3></a>
<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">
<a href="show.html"><img src="http://placehold.it/600x600" alt="Generic placeholder image"></a>
<div class="caption">
<a href="show.html"><h3>Thumbnail label</h3></a>
<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">
<a href="show.html"><img src="http://placehold.it/600x600" alt="Generic placeholder image"></a>
<div class="caption">
<a href="show.html"><h3>Thumbnail label</h3></a>
<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>Questions or comments</h3>
<p>Cras mattis consectetur purus sit amet fermentum. </p>
<p>
<a href="mailto:youremail@yourdomain.com" type="submit" class="btn btn-default">Drop us a line</a>
</p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<p class="pull-right">Tell your friends: <a href="#">Facebook</a>, <a href="#">Twitter</a>, <a href="#">Google+</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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5 KiB

View file

@ -0,0 +1,336 @@
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>Pet Clinic</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-default navbar-static-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header pull-left">
<a class="navbar-brand" href="/dashboard.html">
<img alt="Pet Clinic Brand" height="27" width="auto" src="images/logo.png">
</a>
</div>
<ul class="nav navbar-links pull-right">
<li>
<a href="#appointment" class="js-scroll-nav">Get started</a>
</li>
<li>
<a href="#">Login</a>
</li>
</ul>
</div>
</div><!-- /.container-fluid -->
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<div class="jumbotron-headline">
<div class="jumbotron-headline-cell">
<h1>Pet care for the People who love them</h1>
<p>PetClinic is here to enhance people's relationships with their pets</p>
<p><a class="btn btn-primary btn-lg js-scroll-nav" href="#veterianarians" role="button">Learn more</a></p>
</div>
</div>
</div>
<video loop="loop" preload="auto" class="jumbotron-video" autoplay muted>
<source src="videos/hero-bird.mp4" type="video/mp4">
</video>
</div>
<!-- Featured veterinarians -->
<section class="sections">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="text-center">
<h3 id="veterianarians" class="section-heading">Our Veterinarians</h3>
<p class="section-desc">A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="thumbnail">
<img src="images/600x345.gif" alt="Generic placeholder image">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. </p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="images/600x600.gif" 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="images/600x600.gif" 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>
<!-- /row -->
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="images/600x600.gif" 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="images/600x600.gif" 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-6">
<div class="thumbnail">
<img src="images/600x345.gif" alt="Generic placeholder image">
<div class="caption">
<h3>Thumbnail label</h3>
<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli.</p>
</div>
</div>
</div>
</div>
<!-- /row -->
<div class="row">
<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>
</div>
</section>
<!-- Services 1 section -->
<section id="services" class="sections">
<div class="container">
<div class="row">
<div class="col-md-6">
<img class="img-thumbnail" src="images/560x250.gif" alt="Generic placeholder image">
</div>
<div class="col-md-6">
<h3 class="section-heading">Services One</h3>
<p class="section-desc">A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
<p>
<a class="btn btn-primary" href="/business">Learn more »</a>
</p>
</div>
</div>
</div>
</section>
<!-- Services 2 section -->
<section id="services2" class="sections">
<div class="container">
<div class="row">
<div class="col-md-6">
<h3 class="section-heading">Services Two</h3>
<p class="section-desc">A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
<p>
<a class="btn btn-primary" href="/business">Learn more »</a>
</p>
</div>
<div class="col-md-6">
<img class="img-thumbnail" src="images/560x250.gif" alt="Generic placeholder image">
</div>
</div>
</div>
</section>
<!-- Services 3 section -->
<section id="services3" class="sections">
<div class="container">
<div class="row">
<div class="col-md-6">
<img class="img-thumbnail" src="images/560x250.gif" alt="Generic placeholder image">
</div>
<div class="col-md-6">
<h3 class="section-heading">Services Three</h3>
<p class="section-desc">A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
<p>
<a class="btn btn-primary" href="/business">Learn more »</a>
</p>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section id="testimonials" class="sections">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="text-center">
<h3 class="section-heading">What our customers are saying.</h3>
<p class="section-desc">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 decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 text-center">
<img class="img-circle" src="images/140x140.gif" alt="Generic placeholder image">
<h4>Client One</h4>
<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 text-center">
<img class="img-circle" src="images/140x140.gif" alt="Generic placeholder image">
<h4>Client Two</h4>
<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 text-center">
<img class="img-circle" src="images/140x140.gif" alt="Generic placeholder image">
<h4>Client Three</h4>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div><!-- /.col-lg-4 -->
</div>
</div>
</section>
<!-- Client logos -->
<section id="companies" class="sections sections-narrow">
<div class="container text-center">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="text-center">
<h3 class="h4">Trusted by some of the world's smartest companies</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-2">
<img src="images/100x40.gif" alt="Companies placeholder image">
</div>
<div class="col-lg-2">
<img src="images/100x40.gif" alt="Companies placeholder image">
</div>
<div class="col-lg-2">
<img src="images/100x40.gif" alt="Companies placeholder image">
</div>
<div class="col-lg-2">
<img src="images/100x40.gif" alt="Companies placeholder image">
</div>
<div class="col-lg-2">
<img src="images/100x40.gif" alt="Companies placeholder image">
</div>
<div class="col-lg-2">
<img src="images/100x40.gif" alt="Companies placeholder image">
</div>
</div>
</div>
</section>
<!-- Make an appointment call to action -->
<section id="appointment" class="jumbotron jumbotron-secondary jumbotron-pattern jumbotron-appointment">
<div class="container">
<div class="jumbotron-headline">
<div class="jumbotron-headline-cell">
<h2>Over 40,000 pet owners trust us.</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 an Appointment</button>
</form>
</div>
</div>
</div>
</section>
<!-- Add Owner / Register -->
<!-- <section id="add_owner" class="sections sections-narrow"> -->
<!-- Footer -->
<footer class="footer">
<div class="container">
<!-- Three columns of text below the carousel -->
<div class="row">
<div class="col-lg-4">
<h3 class="h4">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 class="h4">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 class="h4">Questions or comments</h3>
<p>Cras mattis consectetur purus sit amet fermentum. </p>
<p>
<a href="mailto:youremail@yourdomain.com" type="submit" class="btn btn-primary">Drop us a line</a>
</p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
</div>
<div class="colophon container">
<p class="pull-right">Tell your friends: <a href="#">Facebook</a>, <a href="#">Twitter</a>, <a href="#">Google+</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>
<!-- 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>

View file

@ -0,0 +1,3 @@
# robotstxt.org/
User-agent: *

View file

@ -0,0 +1,19 @@
'use strict';
// Scroll Nav
function scrollNav() {
$('.js-scroll-nav').click(function() {
//Animate
$('html, body').stop().animate({
scrollTop: $($(this).attr('href')).offset().top - 20
}, 1000);
return false;
});
}
// On Dom Ready
$(function() {
scrollNav();
});

View file

@ -0,0 +1,229 @@
<!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>
<!-- Owner Summary -->
<div id="content" class="show-hero">
<div class="container">
<div class="row">
<div class="col-md-10">
<h1>John Doe</h1>
<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 class="col-md-2">
<a href="discover.html" class="btn btn-link btn-md pull-right">
<span class="glyphicon glyphicon-chevron-left"></span> Back
</a>
</div>
</div>
</div>
</div>
<!-- Owner Information / Update -->
<section id="owner_info" class="sections sections-narrow">
<div class="container">
<div class="row">
<div class="col-md-7">
<form>
<fieldset>
<!-- Form Name -->
<legend>Owner Information</legend>
<div class="row">
<div class="col-md-6">
<!-- Text input-->
<div class="form-group">
<label class="form-label" for="fldFirstName">First Name</label>
<input id="fldFirstName" name="fldFirstName" type="text" placeholder="Your name" class="form-control input-lg" required="">
</div>
</div>
<div class="col-md-6">
<!-- Text input-->
<div class="form-group">
<label class="form-label" for="fldLastName">Last Name</label>
<div class="controls">
<input id="fldLastName" name="fldLastName" type="text" placeholder="Your last name" class="form-control input-lg">
</div>
</div>
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="form-label" for="fldAddress">Your Address</label>
<div class="controls">
<textarea id="fldAddress" name="fldAddress" class="form-control" rows="3">Your address</textarea>
</div>
</div>
<div class="row">
<div class="col-md-6">
<!-- Text input-->
<div class="form-group">
<label class="form-label" for="fldCity">City</label>
<div class="controls">
<input id="fldCity" name="fldCity" type="text" placeholder="Your city" class="form-control input-lg">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="form-label" for="fldPhone">Phone</label>
<div class="controls">
<input id="fldPhone" name="fldPhone" type="text" placeholder="Your phone number" class="form-control input-lg">
</div>
</div>
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="form-label" for="fldDesc">Description</label>
<div class="controls">
<textarea id="fldDesc" name="fldDesc" class="form-control" rows="4">Write something about yourself.</textarea>
</div>
</div>
<!-- Button (Double) -->
<div class="form-group form-control-group">
<div class="controls">
<button id="buttonDelete" name="buttonDelete" class="btn btn-link btn-lg btn-danger pull-right">Delete Owner</button>
<button id="buttonUpdate" name="buttonUpdate" class="btn btn-lg btn-success">Update Owner</button>
</div>
</div>
</fieldset>
</form>
</div>
<div class="col-md-4 offset-md-1">
</div>
</div>
</div>
</section>
<!-- Browser page -->
<section class="sections sections-browse">
<div class="container">
<div class="row">
<div class="col-md-10">
<div class="btn btn-group">
<a href="show-prev.html" class="btn btn-link btn-md">
<span class="glyphicon glyphicon-chevron-left"></span> Previous
</a>
<a href="show-next.html" class="btn btn-link btn-md">
Next <span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<div class="col-md-2">
<a href="discover.html" class="btn btn-link btn-md pull-right">
<span class="glyphicon glyphicon-chevron-left"></span> Back
</a>
</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>Questions or comments</h3>
<p>Cras mattis consectetur purus sit amet fermentum. </p>
<p>
<a href="mailto:youremail@yourdomain.com" type="submit" class="btn btn-default">Drop us a line</a>
</p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<p class="pull-right">Tell your friends: <a href="#">Facebook</a>, <a href="#">Twitter</a>, <a href="#">Google+</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>

View file

@ -0,0 +1,654 @@
$icon-font-path: "../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/";
$brand-primary: #6cb947;
$text-color: #747c83;
$text-color-inverse: #fff;
$headings-color: #555f64;
$sections-bg: #f0f2f5;
$sections-border: #e7e9eb;
$jumbotron-bg: #42494d;
$navbar-default-bg: #2d4f61;
$navbar-default-border: #2d4f61;
$navbar-default-link-color: #749aa4;
$navbar-default-link-hover-color: #d9e9ed;
$navbar-default-link-active-color: #e6f2f5;
$thumbnail-border: #e6e9ed;
$btn-default-color: #495256;
$btn-default-border: #D4D5D7;
%font-smoothing {
-webkit-font-smoothing: antialiased;
}
// bower:scss
@import "bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
// endbower
.browsehappy {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* Space out content a bit */
body {
@extend %font-smoothing;
}
/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
padding-left: 15px;
padding-right: 15px;
}
/* Custom page header */
.header {
border-bottom: 1px solid #e5e5e5;
/* Make the masthead heading the same height as the navigation */
h3 {
margin-top: 0;
margin-bottom: 0;
line-height: 40px;
padding-bottom: 19px;
}
}
/* Header */
.sub-header {
font-size: 26px;
font-weight: 500;
margin-top: 10px;
padding-bottom: 10px;
}
.container-narrow > hr {
margin: 30px 0;
}
/* Main marketing message and sign up button */
.jumbotron {
background-color: $jumbotron-bg;
height: 580px;
margin-bottom: 0;
text-align: center;
border-bottom: 1px solid #e5e5e5;
position: relative;
overflow: hidden;
.container {
height: 100%;
position: relative;
z-index: 3;
}
}
.jumbotron-auto {
height: auto;
}
.jumbotron-headline {
display: table;
height: 100%;
width: 100%;
h1, .h1 {
color: $text-color-inverse;
font-size: 48px;
font-weight: 500;
margin-bottom: 15px;
}
p {
color: $text-color-inverse;
font-size: 23px;
font-weight: 500;
margin-bottom: 30px;
}
}
.jumbotron-headline-cell {
display: table-cell;
vertical-align: middle;
}
/* Secondary marketing message and call to action */
.jumbotron-secondary {
height: 500px;
h2 {
color: $text-color-inverse;
font-size: 36px;
font-weight: 600;
margin-bottom: 15px;
strong {
font-weight: 600;
}
}
@media (max-width: $screen-md-min) {
height: auto;
}
}
.jumbotron-appointment {
.form-inline {
font-size: 0;
}
.form-group {
margin-right: 8px;
}
.form-control {
height: 54px;
}
.btn-primary {
padding: 15px 25px;
}
@media (max-width: $grid-float-breakpoint) {
.form-group {
margin-right: 0;
}
.btn-primary {
display: block;
margin-bottom: 20px;
width: 100%;
}
}
}
/* Tertiary marketing message and call to action. */
.jumbotron-tertiary {
height: 400px;
h1, .h1 {
margin-top: 0;
}
}
.jumbotron-video {
position: absolute;
opacity: .85;
left: 0;
top: 0px;
z-index: 1;
height: auto;
width: 100%;
}
.jumbotron-welcome {
background-color: $text-color-inverse;
}
@media (max-width: $screen-md-min) {
.jumbotron-video {
width: auto;
height: 100%;
}
}
/* Sections */
.sections {
background-color: $sections-bg;
border-bottom: 1px solid $sections-border;
padding: 100px 0;
.thumbnail {
margin-bottom: 25px;
}
}
.sections-narrow {
padding: 40px 0;
}
.sections-browse {
background-color: $jumbotron-bg;
padding: 20px 0;
}
.sections-light {
background-color: $text-color-inverse;
}
.section-heading {
font-size: 40px;
}
.section-heading-alt {
font-size:
}
.section-desc {
font-size: 18px;
margin-bottom: 25px;
}
.navbar {
height: 60px;
}
.navbar-static-top {
margin-bottom: 0;
}
.navbar-brand {
padding: 15px;
height: 60px;
line-height: normal;
}
.navbar-nav {
> li {
> a {
padding-top: 20px;
padding-bottom: 20px;
}
}
}
.navbar-form {
.form-group {
margin-bottom: 0;
}
}
.nav-tabs-filter {
margin-bottom: 30px;
}
.navbar-default {
.navbar-menu {
> li {
padding: 0 6px;
@media (min-width: $grid-float-breakpoint) {
> a {
font-weight: 500;
padding: 20px 15px;
}
}
&:hover {
> a {
background-color: transparent;
}
}
&.active {
> a {
background-color: transparent;
font-weight: bold;
&:hover {
background-color: transparent;
}
}
}
}
}
@media (max-width: $grid-float-breakpoint) {
.navbar-menu {
background-color: darken($navbar-default-bg,10%);
> li {
padding: 0;
> a {
padding-top: 12px;
padding-bottom: 12px;
}
&:hover {
> a {
background-color: transparent;
color: $navbar-default-link-hover-color;
}
}
}
}
}
}
.navbar-profile {
@extend .pull-right;
> li {
float:left;
margin-left: 15px;
margin-top: 15px;
> a {
color: $navbar-default-link-color;
line-height: 30px;
height: 30px;
padding: 0;
text-align: center;
width: 30px;
&:hover,
&:focus,
&:active {
background-color: transparent;
}
&.img-profile {
background-color: transparent;
border: 0;
line-height: 0;
}
}
.glyphicon-plus {
color: $navbar-default-link-color;
margin-left: 1px;
}
}
.open {
> a,
> a:focus {
background-color: transparent;
}
}
@media (max-width: $grid-float-breakpoint) {
position: absolute;
top: 0;
right: 0;
> li {
&:last-child {
margin-right: 15px;
}
}
}
}
.navbar-dropdown-menu {
right: 0;
left: auto;
&:after {
border-bottom: 10px solid;
border-right: 10px solid rgba($gray-darker, 0);
border-left: 10px solid rgba($gray-darker, 0);
color: darken($navbar-default-bg,10%);
content: '';
display: block;
height: 0;
margin-left: 2px;
position: absolute;
top: -10px;
right: 10px;
vertical-align: middle;
width: 0;
}
> li {
> a {
color: $navbar-default-link-color;
padding: 12px 15px;
&:hover {
color: $navbar-default-link-hover-color;
background-color: rgba($gray-darker, 0);
}
}
}
.divider {
background-color: rgba($navbar-default-link-color, .15);
margin: 0;
}
}
.open > .navbar-dropdown-menu {
background-color: darken($navbar-default-bg,10%);
display: block;
width: 200px;
border: 0;
border-radius: 0;
box-shadow: none;
padding: 0;
top: 43px;
right: -5px;
@media (max-width: $grid-float-breakpoint) {
position: fixed;
width: 100%;
left: 0;
top: 58px;
&:after {
right: 20px;
}
}
}
.navbar-collapse {
border-top: 0;
}
.navbar-links {
> li {
display: inline-block;
> a {
color: #303030;
font-weight: bold;
padding: 19px 15px;
&:hover {
background-color: transparent;
color: $brand-primary;
}
}
}
}
/* Show page */
.show-hero {
background-color: $jumbotron-bg;
padding-top: 60px;
padding-bottom: 60px;
font-size: 24px;
text-align: left;
h1 {
margin-top: 0;
}
}
.form-control {
border: 1px solid $text-color-inverse;
border-radius: 3px;
box-shadow: none;
}
.form-control-group {
padding-top: $padding-large-vertical;
}
.btn {
border-color: transparent;
border-radius: 3px;
font-weight: 500;
transition: .3s ease-in-out;
&:hover {
border-color: transparent;
}
&:active,
&:focus {
border-color: rgba($gray-darker, 0.3);
outline: none 0;
box-shadow: inset 0 0 200px rgba($gray-darker, 0.3);
}
}
.btn-default {
border-color: $btn-default-border;
&:hover {
background-color: $btn-default-bg;
border-color: darken($btn-default-border,15%);
color: darken($btn-default-color,15%);
}
}
.btn-lg {
font-weight: 500;
}
/* Responsive: Portrait tablets and up */
@media (max-width: 768px) {
.navbar-brand {
padding-right: 0;
}
.navbar-nav {
margin-bottom: 0;
margin-top: 0;
> li {
> a {
padding-top: 10px;
padding-bottom: 10px;
}
}
}
.navbar-form {
margin-top: 0;
margin-bottom: 0;
border-top: 0;
border-bottom: 0;
}
// Default navbar
.navbar-default {
.navbar-toggle-left {
color: $navbar-default-link-color;
border: 0;
float: left;
margin: 15px 0 0 5px;
padding: 5px 8px 5px 8px;
&:hover,
&:focus,
&:active {
color: $navbar-default-link-hover-color;
background-color: transparent;
}
}
}
}
/* Media Object */
.media-welcome {
.media-left {
padding-right: 20px;
}
}
/* Mixin and adjust the regular image class */
.thumbnail {
background-color: $thumbnail-bg;
border: 1px solid $thumbnail-border;
box-shadow: 0 1px 1px rgba($gray-base, 0.03);
padding: 0;
> img {
margin-top: 40px;
}
.caption {
padding: 20px;
text-align: center;
}
.caption-heading {
color: darken($headings-color,5%);
font-size: 18px;
margin-bottom: 15px;
}
.caption-meta {
color: #98a4b0;
font-size: 13px;
margin-bottom: 5px;
}
.caption-label {
@extend .label;
@extend .label-default;
background-color: #98a4b0;
}
.action-bar {
border-top: 1px solid $sections-border;
padding: 20px;
@extend .clearfix;
ul {
list-style-type: none;
margin-bottom: 0;
margin-left: -10px;
padding-left: 0;
li {
float: left;
margin-left: 10px;
}
}
}
.action-add {
border: 1px dotted
}
.btn-add-pet {
display: inline-block;
height: 30px;
width: 30px;
border: 1px dashed #AAA;
border-radius: 100%;
position: relative;
.glyphicon {
color: #C3C6CA;
margin: 5px 0 0 8px;
}
}
}
.thumbnail-wrapper {
margin-bottom: 20px;
}
/* Custom page footer */
.footer {
font-size: 13px;
padding: 30px 0;
}
.colophon {
border-top: 1px solid $sections-border;
margin-top: 30px;
padding-top: 30px;
}

Binary file not shown.

View file

@ -0,0 +1,7 @@
{
"name": "petclinic",
"private": true,
"dependencies": {
"bootstrap-sass-official": "~3.3.3"
}
}

View file

@ -0,0 +1,32 @@
{
"name": "petclinic",
"devDependencies": {
"apache-server-configs": "^2.7.1",
"grunt": "^0.4.5",
"grunt-autoprefixer": "^1.0.0",
"grunt-concurrent": "^0.5.0",
"grunt-contrib-clean": "^0.6.0",
"grunt-contrib-concat": "^0.5.0",
"grunt-contrib-connect": "^0.8.0",
"grunt-contrib-copy": "^0.5.0",
"grunt-contrib-cssmin": "^0.10.0",
"grunt-contrib-htmlmin": "^0.3.0",
"grunt-contrib-imagemin": "^0.8.0",
"grunt-contrib-jshint": "^0.10.0",
"grunt-contrib-uglify": "^0.7.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-mocha": "^0.4.10",
"grunt-newer": "^0.7.0",
"grunt-rev": "^0.1.0",
"grunt-sass": "^0.14.0",
"grunt-svgmin": "^0.4.0",
"grunt-usemin": "^2.3.0",
"grunt-wiredep": "^1.7.0",
"jshint-stylish": "^0.4.0",
"load-grunt-tasks": "^0.4.0",
"time-grunt": "^0.4.0"
},
"engines": {
"node": ">=0.10.0"
}
}

View file

@ -0,0 +1,3 @@
{
"directory": "bower_components"
}

View file

@ -0,0 +1,9 @@
{
"name": "petclinic",
"private": true,
"dependencies": {
"chai": "~1.8.0",
"mocha": "~1.14.0"
},
"devDependencies": {}
}

View file

@ -0,0 +1,26 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mocha Spec Runner</title>
<link rel="stylesheet" href="bower_components/mocha/mocha.css">
</head>
<body>
<div id="mocha"></div>
<script src="bower_components/mocha/mocha.js"></script>
<script>mocha.setup('bdd')</script>
<script src="bower_components/chai/chai.js"></script>
<script>
var assert = chai.assert;
var expect = chai.expect;
var should = chai.should();
</script>
<!-- include source files here... -->
<!-- include spec files here... -->
<script src="spec/test.js"></script>
<script>mocha.run()</script>
</body>
</html>

View file

@ -0,0 +1,13 @@
/* global describe, it */
(function () {
'use strict';
describe('Give it some context', function () {
describe('maybe a bit more context here', function () {
it('should run here few assertions', function () {
});
});
});
})();