-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
105 lines (99 loc) · 7.23 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Check the current weather and daily weather predictions for any city.">
<title>What's up with the weather?</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka:[email protected]&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles.css">
<script src="script.js" type="module" defer></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js" defer></script>
</head>
<body>
<header id="header">
<a href="./index.html">
<img id="logo" src="./assets/weather-logo.png" alt="What's the weather like? Logo with a sun" loading="lazy">
</a>
<div class="quick-search">
<label for="quick-search-input" class="search-text">Quick search - Enter city name</label>
<form class="lookup-city search-bar">
<input id="quick-search-input" type="text" class="place-input" placeholder="Honolulu" autocomplete="on">
<button type="submit" class="search-button" aria-label="Search">
<img class="magnifying-glass" src="./assets/magnifying-glass.png" alt="magnifying glass" loading="lazy">
</button>
</form>
</div>
</header>
<main>
<div class="filter-panel collapsible-container">
<button type="button" class="collapsible-title" aria-expanded="false">Advanced Search ➡️</button>
<form id="filter-list" class="filter-lists collapsible-content">
<!-- City Search -->
<div class="detailed-search">
<label for="detailed-city-name" class="search-text">Enter city name</label>
<input id="detailed-city-name" type="text" class="place-input" placeholder="Honolulu" autocomplete="on" required>
</div>
<div class="select-all-toggle">
<label for="select-all"><input type="checkbox" id="select-all">Select All</label>
</div>
<div class="checkbox-container">
<!-- Current Weather Filters -->
<fieldset class="current-filters">
<legend>Current Weather</legend>
<div class="filters">
<label><input type="checkbox" name="current_weather" value="temperature_2m"> Temperature</label>
<label><input type="checkbox" name="current_weather" value="relative_humidity_2m"> Relative Humidity</label>
<label><input type="checkbox" name="current_weather" value="apparent_temperature"> Apparent Temperature</label>
<label><input type="checkbox" name="current_weather" value="precipitation"> Precipitation</label>
<label><input type="checkbox" name="current_weather" value="rain"> Rain</label>
<label><input type="checkbox" name="current_weather" value="showers"> Showers</label>
<label><input type="checkbox" name="current_weather" value="snowfall"> Snowfall</label>
<label><input type="checkbox" name="current_weather" value="weather_code"> Weather Description</label>
<label><input type="checkbox" name="current_weather" value="cloud_cover"> Cloud Cover Total</label>
<label><input type="checkbox" name="current_weather" value="wind_speed_10m"> Wind Speed</label>
<label><input type="checkbox" name="current_weather" value="wind_direction_10m"> Wind Direction</label>
<label><input type="checkbox" name="current_weather" value="wind_gusts_10m"> Wind Gusts</label>
</div>
</fieldset>
<!-- Daily Weather Predictions Filters -->
<fieldset class="daily-filters">
<legend>Daily Weather Predictions</legend>
<div class="filters">
<label><input type="checkbox" name="daily_weather" value="weather_code"> Weather Description</label>
<label><input type="checkbox" name="daily_weather" value="temperature_2m_max"> Max Temperature</label>
<label><input type="checkbox" name="daily_weather" value="temperature_2m_min"> Min Temperature</label>
<label><input type="checkbox" name="daily_weather" value="apparent_temperature_max"> Max Apparent Temp.</label>
<label><input type="checkbox" name="daily_weather" value="apparent_temperature_min"> Min Apparent Temp.</label>
<label><input type="checkbox" name="daily_weather" value="sunrise"> Sunrise</label>
<label><input type="checkbox" name="daily_weather" value="sunset"> Sunset</label>
<label><input type="checkbox" name="daily_weather" value="daylight_duration"> Daylight Duration</label>
<label><input type="checkbox" name="daily_weather" value="uv_index_max"> UV Index</label>
<label><input type="checkbox" name="daily_weather" value="uv_index_clear_sky_max"> UV Index Clear Sky</label>
<label><input type="checkbox" name="daily_weather" value="precipitation_sum"> Precipitation Sum</label>
<label><input type="checkbox" name="daily_weather" value="rain_sum"> Rain Sum</label>
<label><input type="checkbox" name="daily_weather" value="showers_sum"> Showers Sum</label>
<label><input type="checkbox" name="daily_weather" value="snowfall_sum"> Snowfall Sum</label>
<label><input type="checkbox" name="daily_weather" value="precipitation_hours"> Precipitation Hours</label>
<label><input type="checkbox" name="daily_weather" value="precipitation_probability_max"> Precipitation Prob Max</label>
<label><input type="checkbox" name="daily_weather" value="wind_speed_10m_max"> Maximum Wind Speed</label>
<label><input type="checkbox" name="daily_weather" value="wind_gusts_10m_max"> Maximum Wind Gusts</label>
<label><input type="checkbox" name="daily_weather" value="wind_direction_10m_dominant"> Dominant Wind Direction</label>
</div>
</fieldset>
</div>
<input id="detailed-search-btn" type="submit" value="Submit" aria-label="Submit">
</form>
</div>
<div class="capitals"></div>
</main>
<footer>
<img id="footer-logo" src="./assets/weather-logo.png" alt="What's up with the weather? logo" loading="lazy">
<h5>© 2024 All rights reserved.</h5>
<h5>What's up with the Weather?</h5>
<h6>by Zodoig</h6>
</footer>
</body>
</html>