-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
125 lines (80 loc) · 5.95 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Weather App</title>
</head>
<body>
<div class="container">
<main class="app">
<div class="location__searchbox">
<span class="location__icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path
d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z" />
</svg>
</span>
<input class="searchbox__input" type="text" placeholder="Enter your location">
<button class="searchbox__button" id="search-button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path
d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
</svg>
</button>
</div>
<div class="location__notfound">
<span class="notfound__icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path
d="M5.84301215,4.55890685 C9.24342264,1.15849636 14.7565774,1.15849636 18.1569879,4.55890685 C21.4893901,7.89130914 21.5560382,13.252791 18.356932,16.6663564 L18.1569879,16.8728826 C17.2419979,17.7878725 15.7116094,19.2826735 13.5641649,21.3589636 C12.6919186,22.2023085 11.3080914,22.2022001 10.4359799,21.3587188 L6.5863078,17.6101042 C6.30208268,17.3299283 6.0543257,17.0841961 5.84301215,16.8728826 C2.44260165,13.4724721 2.44260165,7.95931735 5.84301215,4.55890685 Z M17.0963277,5.61956702 C14.2817036,2.80494297 9.71829638,2.80494297 6.90367232,5.61956702 C4.08904826,8.43419108 4.08904826,12.9975983 6.90367232,15.8122224 L8.59986042,17.4841867 C9.38268933,18.2492508 10.3424212,19.181446 11.478793,20.2805069 C11.7694967,20.5616672 12.2307719,20.5617033 12.5215209,20.2805882 L15.4959128,17.3910853 C16.1544227,16.746944 16.6879447,16.2206054 17.0963277,15.8122224 C19.9109517,12.9975983 19.9109517,8.43419108 17.0963277,5.61956702 Z M14.9462117,7.61294647 L15.0303301,7.68556462 C15.2965966,7.95183118 15.3208027,8.36849486 15.1029482,8.66210636 L15.0303301,8.74622479 L13.061,10.7158947 L15.0303301,12.6855646 C15.2965966,12.9518312 15.3208027,13.3684949 15.1029482,13.6621064 L15.0303301,13.7462248 C14.7640635,14.0124914 14.3473998,14.0366974 14.0537883,13.8188429 L13.9696699,13.7462248 L12,11.7768947 L10.0303301,13.7462248 C9.76406352,14.0124914 9.34739984,14.0366974 9.05378835,13.8188429 L8.96966991,13.7462248 C8.70340335,13.4799582 8.6791973,13.0632945 8.89705176,12.7696831 L8.96966991,12.6855646 L10.939,10.7158947 L8.96966991,8.74622479 C8.70340335,8.47995823 8.6791973,8.06329455 8.89705176,7.76968305 L8.96966991,7.68556462 C9.23593648,7.41929806 9.65260016,7.395092 9.94621165,7.61294647 L10.0303301,7.68556462 L12,9.6548947 L13.9696699,7.68556462 C14.2359365,7.41929806 14.6526002,7.395092 14.9462117,7.61294647 Z" />
</svg>
</span>
<p class="notfound__text">Location not found</p>
</div>
<div class="location__weather">
<span class="forecast__image">
<object type="image/svg+xml"></object>
</span>
<div class="forecast__metrics">
<span class="forecast__temperature">
<p>0</p>
<p>°C</p>
</span>
<p class="forecast__description">Lorem Ipsum</p>
</div>
<div class="forecast__detail">
<div class="weather__item">
<span class="weather__icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<title>ondas</title>
<path
d="M20,12H22V14H20C18.62,14 17.26,13.65 16,13C13.5,14.3 10.5,14.3 8,13C6.74,13.65 5.37,14 4,14H2V12H4C5.39,12 6.78,11.53 8,10.67C10.44,12.38 13.56,12.38 16,10.67C17.22,11.53 18.61,12 20,12M20,6H22V8H20C18.62,8 17.26,7.65 16,7C13.5,8.3 10.5,8.3 8,7C6.74,7.65 5.37,8 4,8H2V6H4C5.39,6 6.78,5.53 8,4.67C10.44,6.38 13.56,6.38 16,4.67C17.22,5.53 18.61,6 20,6M20,18H22V20H20C18.62,20 17.26,19.65 16,19C13.5,20.3 10.5,20.3 8,19C6.74,19.65 5.37,20 4,20H2V18H4C5.39,18 6.78,17.53 8,16.67C10.44,18.38 13.56,18.38 16,16.67C17.22,17.53 18.61,18 20,18Z" />
</svg>
</span>
<div class="weather__text">
<p>0%</p>
<p>Humidity</p>
</div>
</div>
<div class="weather__item">
<span class="weather__icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<title>weather-windy</title>
<path
d="M4,10A1,1 0 0,1 3,9A1,1 0 0,1 4,8H12A2,2 0 0,0 14,6A2,2 0 0,0 12,4C11.45,4 10.95,4.22 10.59,4.59C10.2,5 9.56,5 9.17,4.59C8.78,4.2 8.78,3.56 9.17,3.17C9.9,2.45 10.9,2 12,2A4,4 0 0,1 16,6A4,4 0 0,1 12,10H4M19,12A1,1 0 0,0 20,11A1,1 0 0,0 19,10C18.72,10 18.47,10.11 18.29,10.29C17.9,10.68 17.27,10.68 16.88,10.29C16.5,9.9 16.5,9.27 16.88,8.88C17.42,8.34 18.17,8 19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14H5A1,1 0 0,1 4,13A1,1 0 0,1 5,12H19M18,18H4A1,1 0 0,1 3,17A1,1 0 0,1 4,16H18A3,3 0 0,1 21,19A3,3 0 0,1 18,22C17.17,22 16.42,21.66 15.88,21.12C15.5,20.73 15.5,20.1 15.88,19.71C16.27,19.32 16.9,19.32 17.29,19.71C17.47,19.89 17.72,20 18,20A1,1 0 0,0 19,19A1,1 0 0,0 18,18Z" />
</svg>
</span>
<div class="weather__text">
<p>0Km/h</p>
<p>Windspeed</p>
</div>
</div>
</div>
</div>
</main>
</div>
<script type="module" src="src/assets/js/main.js"></script>
</body>
</html>