-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
183 lines (173 loc) · 6.46 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
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="./assets/styling/style.css" />
<title>🦠Covid and Cats🐈</title>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<!-- Nav/Home -->
<body id="home">
<div class="navbar-fixed">
<nav class="black">
<div class="container">
<div class="nav-wrapper">
<a href="#" class="brand-logo">🦠Covid & Cats🐈</a>
<a href="#" data-target="mobile-nav" class="sidenav-trigger">
<i class="material-icons btn-floating white center-align pulse black-text ">menu</i>
</a>
<ul class="right hide-on-med-and-down">
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#search">Search</a>
</li>
<li>
<a href="#stats">Stats</a>
</li>
<li>
<a href="#relax">Relax</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- Side bar for nav when smaller -->
<ul class="sidenav" id="mobile-nav">
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#search">Search</a>
</li>
<li>
<a href="#stats">Stats</a>
</li>
<li>
<a href="#relax">Relax</a>
</li>
</ul>
<!-- modified slider section pulled from materialize.com as a basic slider template-->
<section class="slider" class="scrollspy">
<ul class="slides">
<li>
<img src="./assets/images/banner1.png" alt="placeholder">
<!--image -->
<div class="caption left-align">
<h3>The spread of covid continues</h3>
<h5 class="light grey-text text-lighten-3">Collect data from the entire USA with a few clicks</h5>
</div>
</li>
<li>
<img src="./assets/images/banner4.gif" alt="placeholder">
<!-- image -->
</li>
<li>
<img src="./assets/images/banner3.jpg" alt="placeholder">
<!-- image -->
<div class="caption right-align">
<h3>Why our site over others?</h3>
<h5 class="light grey-text text-lighten-3">Covid and Cats will keep you comforted and informed at the same
</div>
</li>
<li>
<img src="./assets/images/banner5.webp"
alt="placeholder">
<!--image -->
</li>
</ul>
</section>
<!--Search-->
<section id="search" class="section section-search black darken-1 white-text center scrollspy">
<div class="container">
<div class="row"></div>
<div class="col s12">
<h3>Search State Covid Data</h3>
<div class="input-field">
<input type="text" class="stateInput white black-text autocomplete" id="autocomplete-input"
placeholder="North Carolina, Virginia ect...">
<button id="searchBtn" class="btn waves-effect waves-bright pulse red" type="submit" name="action">Search
<i class="material-icons right">send</i>
</button>
<p class="flow-text" id="searchHistory">Recently Searched:</p>
</div>
</div>
</div>
</div>
</section>
<!-- Data Cards -->
<section id="stats" class="section section-icons black center center-align">
<div class="container center">
<div class="row">
<div class="col s12 m6">
<div class="card-panel black white-text">
<i class="material-icons large red-text">insert_chart</i>
<h4>United States Data</h4>
<p class="usaTotal">Total:</p>
<p class="usaActive">Active:</p>
<p class="usaRecovered">Recovered:</p>
<p class="usaDeaths">Deaths:</p>
</div>
</div>
<div class="col s12 m6">
<div class="card-panel black white-text">
<i class="material-icons large red-text">insert_chart</i>
<h4 class="stateTitle">Searched Data</h4>
<p class="stateTotal">Total:</p>
<p class="stateActive">Active:</p>
<p class="stateRecovered">Recovered:</p>
<p class="stateDeaths">Deaths:</p>
</div>
</div>
</div>
</div>
</section>
<!-- relax section -->
<section id="relax" class="section section-follow orange darken-2 white-text center flow-text">
<div class="container">
<div class="row">
<div">
<h4>Relax Zone</h4>
<p>After looking at all that stressful data come down here to relax...</p>
<button id="catBtn" class="btn waves-effect teal pulse" type="submit" name="action">Click for adorable cats
</button>
</div>
</div>
</div>
</section>
<!-- cat gifs fetched from giphy api go here -->
<section class="orange darken-2">
<div class="carousel" id="catContainer">
<a class="carousel-item" href="#one!"><img src="" id="gif1"></a>
<a class="carousel-item" href="#two!"><img src="" id="gif2"></a>
<a class="carousel-item" href="#three!"><img src="" id="gif3"></a>
<a class="carousel-item" href="#four!"><img src="" id="gif4"></a>
<a class="carousel-item" href="#five!"><img src="" id="gif5"></a>
<a class="carousel-item" href="#six!"><img src="" id="gif6"></a>
<a class="carousel-item" href="#seven!"><img src="" id="gif7"></a>
<a class="carousel-item" href="#eight!"><img src="" id="gif8"></a>
</div>
</section>
<!-- placeholder until cat gifs are fetched -->
<div class="center backround-color teal" id="placeholderImg">
<img src="./assets/images/banner2.gif" alt="placeholder">
</div>
<!-- footer -->
<footer class="section teal darken-2 white-text center-align">
<p class="flow-text">🦠Covid & Cats🐈 © 2021</p>
<p>Made with materializeCSS</p>
<a class="link" href="https://github.com/Jdogcrane/covid-and-cats">GitHub</a>
</footer>
<!--JavaScript at end of body for optimized loading-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="./assets/javascript/script.js"></script>
</body>
</html>
<!-- I need this for 200 lines... -->