-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
142 lines (138 loc) · 8.35 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Plenty of Dogs</title>
<meta property="og:title" content="Plenty of Dogs" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://plenty-of-dogs.site" />
<meta property="og:image" content="img/pod-meta-image.PNG" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles/vendor/normalize.css">
<link rel="stylesheet" href="styles/vendor/reset.css">
<link rel="stylesheet" href="styles/icons.css">
<link rel="stylesheet" href="styles/base.css">
<link rel="stylesheet" href="styles/layout.css">
<link rel="stylesheet" href="styles/modules.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fontdiner+Swanky">
<script id="matches-view-template" type="text/x-handlebars-template">
<article class="match">
<img class="carousel" src="{{image}}">
<h2>{{name}}</h2>
<p>{{noImage}}</p>
<ul>
<li>{{breed}}</li>
<li>{{age}}</li>
<li>{{sex}}</li>
<li>{{size}}</li>
</ul>
<div class="details-view">
<h3>About</h3>
<p>{{description}}</p>
<h3>Contact Info</h3>
<ul class="{{shelterId}}">
<li>{{shelterName}}</li>
<li>{{address}}</li>
<li>{{city}}</li>
<li>{{state}}</li>
<li>{{zip}}</li>
<li>{{phone}}</li>
<li>{{email}}</li>
</ul>
</div>
</article>
</script>
</head>
<body>
<header>
<a href="/"><h1>Plenty of D<span class="icon-paw"></span>gs</h1></a>
<a href="https://www.petfinder.com/dog/ziggy-41247577/wa/seattle/washington-german-shepherd-rescue-wa214/"><img class="logo" src="img/puppy.png" alt="Plenty of Dogs logo" title="Plenty of Dogs logo"></a>
<a href="https://www.petfinder.com/"><img class="petfinder" alt="To Petfinder.com" title="To Petfinder.com"src="img/petfinder-logo.PNG"></a>
<a href="https://dog.ceo/"><img class="logo" src="img/dog-ceo-logo.PNG"></a>
<nav class="main-nav" >
<div class="icon-menu" onclick="void(0)" ></div>
<ul class="nav-list">
<li><a class="icon-home2" href="/"> Home</a></li>
<li><a class="icon-checkbox-checked" href="/breed-selector"> Breed Selector</a></li>
<li ><a class="icon-paw" href="/about"> About Us</a></li>
<li><a href="/user">Login</a></li>
<li><a class="icon-heart user" href="/matches"> Matches</a></li>
</ul>
</nav>
</header>
<main>
<section id="home-view" class="container">
<div class="intro-page">
<p>Plenty of Dogs wants to help you find the pawfect pet match for your future BFF. Our simple quiz will help you narrow down what breed family of dog you’d prefer. Once you’ve made your selections, your top three list will fetch available (and adorable) adoptable dogs in the area. Click on Breed Selector to get started.</p>
<a href="/breed-selector"><button id="selector-view-button" type="button">Breed Selector</button></a>
</div>
</section>
<section id="load-view" class="container">
<h2>Loading Best Friends...</h2>
<iframe src="https://giphy.com/embed/B2vBunhgt9Pc4" width="480" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/dogs-think-turtles-B2vBunhgt9Pc4">via GIPHY</a></p>
</section>
<section id="selector-view" class="container">
<h2>Breed Selector</h2>
<p class="clicks"></p>
<ul id="images-wrapper">
<li><img class="dog-left" src=""></li>
<li><img class="dog-right" src=""></li>
</ul>
</section>
<section id="results-view" class="container">
<p>Your top 3 selected breeds are...</p>
<ul>
<li><h2 class="result-dog-breed-0"></h2><img class="result-dog-0" src=""></li>
<li><h2 class="result-dog-breed-1"></h2><img class="result-dog-1" src=""></li>
<li><h2 class="result-dog-breed-2"></h2><img class="result-dog-2" src=""></li>
</ul>
<a href="/matches"><button id="matches-button" type="button">Find Matches</button></a>
</section>
<section id="matches-view" class="container"></section>
<section id="user-view" class="container">
<form id="log-in-form">
<input type="text" id="username" placeholder="username">
<input type="password" id="passphrase" placeholder="password">
<button type="submit" class="login-button">Login</button>
</form>
<form id="create-user-form">
<input type="text" id="create-username" placeholder="username">
<input type="password" id="create-passphrase" placeholder="password">
<button type="submit" class="create-user-button">Create Account</button>
</form>
</section>
<section id="about-view" class="container">
<div id="about-container">
<h2 id="hover-message">(meet the team)</h2>
<img id="demi" src="img/plenty-of-dogs-demi.jpg" alt="Team Doggo hanging with Demi the Border Collie" title="Team Doggo with Demi the Border Collie.">
<p id="caraSelector"></p>
<p id="cara" class="team-doggo-bios">Cara Ottmar hails from The Ozark Mountains which ironically, aren't mountains at all. When not hiking actual mountains in the PNW, you can find her traveling, watching The Amazing Race cuddled with her 3 and 4 legged rescue dogs, playing board games, or a mean game of team trivia.</p>
<p id="danielSelector"></p>
<p id="daniel" class="team-doggo-bios">Daniel Shelton: After 6 years working on the business side of the medical field, he decided to change things up a bit by pursuing a new career in software development. Some of his most prominent strengths would be his leadership and collaboration skills which he acquired from work experience as a lead coder for a mid-sized medical practice. When he isn't currently programming he is either spending time with his wonderful daughter or out disc-golfing when the weather permits. His primary focus in software development is in the emerging market of mixed reality and VR technologies.</p>
<p id="jimmySelector"></p>
<p id="jimmy" class="team-doggo-bios">My name is Jimmy Chang and I learned how to code at Code Fellows. I enjoy playing games whether they be sports, board games, or video games (I won't say that I'm good at everything though). This is a big reason behind I want to become a software game designer.</p>
<p id="mikeSelector"></p>
<p id="mike" class="team-doggo-bios">Mike Castor: Prior to launching a career as a software engineer, he spent 15 years as a technical recruiter specializing in finding software engineers for Fortune 500 companies like Facebook Inc. and Northrop Grumman. Most recently, he spent five years at Facebook's Seattle engineering site where he built a university recruiting program and managed a team of recruiters. He's primarily interested in building exciting front end user experiences and telling stories with data.</p>
<a id="demi-dog" href="http://demi.dog" alt="link to demi.dog"></a>
</div>
</section>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/visionmedia/page.js/master/page.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.19/marked.min.js"></script>
<script src="scripts/models/breed.js"></script>
<script src="scripts/models/user.js"></script>
<script src="scripts/views/home-view.js"></script>
<script src="scripts/views/load-view.js"></script>
<script src="scripts/views/selector-view.js"></script>
<script src="scripts/views/about-view.js"></script>
<script src="scripts/views/user-view.js"></script>
<script src="scripts/views/results-view.js"></script>
<script src="scripts/models/matches.js"></script>
<script src="scripts/views/matches-view.js"></script>
<script src="scripts/controllers/routes.js"></script>
</body>
</html>