-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathindex.html
208 lines (192 loc) · 7.6 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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
property="og:title"
content="Cat Match -find your perfect cat breed"
/>
<meta
property="og:description"
content="Find a perfect cat breed for yourself and your family by entering a few descriptive details into a simple form."
/>
<meta
name="author"
content="Junior Developer Group"
/>
<meta
name="description"
content="Find a perfect cat breed for yourself and your family by entering a few descriptive details into a simple form."
/>
<title>Cat-Match</title>
<link
rel="shortcut icon"
href="./assets/images/cat-solid.svg"
type="image/svg+xml"
/>
<link rel="stylesheet" href="assets/styles/styles.css" />
</head>
<body>
<div id="top"></div>
<!--Hero Section-->
<section class="hero-section">
<h1 class="hero-heading">Cat Match</h1>
<p class="hero-sub-heading">Find your perfect cat breed</p>
<div class="hero-svg-section">
<img src="./assets/images/person_cat_couch.svg" class="hero-svg" alt="person and cat sitting on a couch">
<button class="hero-button" onclick="window.open('#intro', '_self')">Get started</button>
</div>
</section>
<section class="intro" id="intro">
<h2>Welcome to Cat Match!</h2>
<p>
Our Cat Match app will help you find the perfect cat breed for your home
and lifestyle. Use the search form below, and Cat Match will suggest
compatible breeds for you based on the Cat API.
</p>
</section>
<!-- Modal is the first child of body to allow keyboard-only users to use Shift + Tab to access other parts of their browser -->
<div id="modal">
<h1>Thank you to:</h1>
<div class="modal-content">
<p>
<a href="https://fontawesome.com/license/free">Fontawesome</a> - Cat
icon, CC by 4.0
</p>
<p>
<a href="https://undraw.co/license">unDraw</a> - "Chilling" image,
Copyright 2021 Katerina Limpitsouni
</p>
<p>
<a href="https://commons.wikimedia.org/wiki/File:BrownVarientAsianCat.JPG">Wikimedia</a> - Malayan cat image, by
Scotia CC BY 3.0 <https://creativecommons.org/licenses/by/3.0>, via Wikimedia Commons
</p>
<p>
<a href="https://en.wikipedia.org/wiki/Burmese_cat#/media/File:British_burmese_-_Andel_Alois_at_Cat_show.JPG">Wikimedia</a> - European Burmese cat image by Heikkisiltala, CC BY 3.0 <https://creativecommons.org/licenses/by/3.0>, via Wikimedia Commons
<p>
<a href="https://unsplash.com/photos/3iL2rXnLjWU?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink">Persian Cat</a> - Persian Cat Image by Petra Bouchalova on Unsplash
</p>
<button class="toggle-modal" aria-label="close">Close</button>
</div>
</div>
<form id="form" method="POST" action="">
<h2>Find your perfect feline friend.</h2>
<p class="hero-p">
Select the options that best match your lifestyle, for example if you have a small living space you might choose energy level to be "Lazy" and show cats that dont need as much excercise, or grooming to be "Very little" if you dont want to be brushing your cats fur daily.
</p>
<p class="formInstructions">
Choose your options based on your needs: </p>
<fieldset>
<legend>Show all cats</legend>
<div>
<label for="all"> Show me all the cat breeds</label>
<input type="checkbox" id="all" name="all" onchange="toggleDisabledClasses()"/>
</div>
</fieldset>
<fieldset>
<legend>Fitting into your family</legend>
<div>
<label for="dogFriendly">Dog-friendly</label>
<select id="dogFriendly" name="dogFriendly">
<option value="0">select</option>
<option value="1">Not very friendly</option>
<option value="2">Not friendly</option>
<option value="3">Neutral</option>
<option value="4">Friendly</option>
<option value="5">Friendliest</option>
</select>
</div>
<div>
<label for="hypoallergenic"> Hypoallergenic</label>
<input type="checkbox" id="hypoallergenic" name="hypoallergenic" />
</div>
</fieldset>
<fieldset>
<legend>Fitting into your lifestyle</legend>
<div>
<label for="grooming">Grooming</label>
<select id="grooming" name="grooming">
<option value="0">select</option>
<option value="1">Very Little</option>
<option value="2">A Bit</option>
<option value="3">weekly</option>
<option value="5">Every Day</option>
</select>
</div>
<div>
<label for="active">Energetic</label>
<select id="active" name="active">
<option value="0">select</option>
<option value="1">Too lazy</option>
<option value="2">Lazy</option>
<option value="3">Normal</option>
<option value="4">High</option>
<option value="5">Hyper</option>
</select>
</div>
<div>
<label for="friendly">Friendliness</label>
<select id="friendly" name="friendly">
<option value="0">select</option>
<option value="1">Rudest</option>
<option value="2">Rude</option>
<option value="3">Neutral</option>
<option value="4">Friendly</option>
<option value="5">Friendliest</option>
</select>
</div>
<div>
<label for="intelligence">Intelligence</label>
<select id="intelligence" name="intelligence">
<option value="0">select</option>
<option value="1">Not very intelligent</option>
<option value="2">Not intelligent</option>
<option value="3">Neutral</option>
<option value="4">Intelligent</option>
<option value="5">Highly intelligent</option>
</select>
</div>
</fieldset>
<fieldset>
<legend>Other options</legend>
<div>
<label for="rare"> Rare</label>
<input type="checkbox" id="rare" name="rare" />
</div>
</fieldset>
<div class="submitButton">
<button type="submit" id="submit">Search</button>
</div>
<img
class="loader"
src="assets/images/cat-loader.gif"
aria-expanded="false"
/>
</form>
<div id="cardContainer">
</div>
<p class="no-cat-paragraph" id="catParagraph"> No cats were found. Try searching again.</p>
<footer>
<button class="toggle-modal">Thank you</button>
<span class="footer-link">
Made with <span class="heart-icon"> ♥ </span> by
<a
class="site-link"
href="https://junior-developer-group.com/"
target="_blank"
>Junior Developer Group</a
>
</span>
<small class="copyright">© Junior Developer Group, 2022</small>
</footer>
<div class="scroll-top-wrapper">
<a href="#submit" class="scroll-top"> <span class="arrow-up"></span> <span> Back to top </span> </a>
</div>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- <script src="assets/scripts/cat-api.js"></script> -->
<script src="assets/scripts/index.js"></script>
<script src="assets/scripts/modal.js"></script>
</html>