-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
133 lines (132 loc) · 4.87 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
<!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" />
<title>Weather Application</title>
<link rel="icon" href="./assets/favicon.ico" />
<link rel="stylesheet" href="css/styles.css" />
<script src="js/main.js" type="module" defer></script>
</head>
<body class="overflow-auto bg-gray-100">
<div class="wallpaper">
<div
class="border-x-1 border-gray-300 py-5 px-4 min-h-screen max-w-[900px] mx-auto"
>
<form data-search class="query flex items-center">
<div
class="search | flex items-center w-full gap-1 rounded-xl border-2 border-gray-300 bg-gray-100 px-2 py-1 mx-auto"
>
<img src="./assets/search.svg" alt="search icon" />
<input
type="search"
name=""
placeholder="City Name"
id=""
class="bg-gray-100 text-xl w-full focus:outline-none focus:border-none md:py-2"
/>
</div>
<button
class="ml-2 bg-blue-400 px-4 rounded-xl h-full py-[.35rem] md:py-[.9rem] hover:bg-blue-500 text-xl"
>
Search
</button>
</form>
<div class="min-h-screen mt-4">
<div
class="content | relative md:rounded-xl md:h-[20rem] grid md:grid-cols-2 items-center gap-3 md:grid-rows-1 md:pl-4"
>
<div
data-loader
class="loader-container | transition-opacity rounded-xl absolute inset-0 flex items-center justify-center text-3xl bg-gray-900 z-10"
>
<div class="loader">
Loading
<span></span>
</div>
</div>
<div
class="mini-content md:bg-none pb-4 px-4 md:pb-0 md:px-0 rounded-xl"
>
<header
class="flex justify-between items-center mt-4 md:mt-0 md:text-2xl sm:text-xl"
>
<div class="flex gap-0 items-center">
<img
data-locationIcon
class="w-6 md:w-8 flex gap-1"
src="./assets/location.png"
alt=""
/>
<h1 data-cityName class="font-bold"></h1>
</div>
<p data-time></p>
</header>
<p data-temperature class="text-center text-7xl mt-[3rem]">
<sup class=""></sup>
</p>
<p class="flex justify-center text-center mt-4 text-2xl md:mt-6">
<img
data-weatherIcon
src=""
alt=""
class="hidden weather-icon w-8 h-10 self-center"
/><span data-weather></span>
</p>
<div class="flex justify-between mt-4 md:mt-8">
<div class="flex gap-1 md:text-2xl">
<img
data-windPressureIcon
class="w-6"
src="./assets/wind-pressure.png"
alt=""
/><span data-windPressure></span>
</div>
<div class="flex gap-1 md:text-2xl">
<img
data-humidityIcon
class="w-6"
src="./assets/humidity.png"
alt=""
/><span data-humidity></span>
</div>
<div class="flex gap-1 md:text-2xl">
<img
data-windSpeedIcon
class="w-6 h-auto"
src="./assets/wind-speed.png"
alt=""
/><span data-windSpeed></span>
</div>
</div>
<div></div>
<div></div>
</div>
<div class="flex justify-center h-[15rem] w-full md:h-full md:p-4">
<img
data-gif
class="w-full rounded-xl h-full border-1 border-black md:max-w-[20rem]"
src="./assets/clear.jpg"
alt=""
/>
</div>
</div>
<div class="hidden grid-cols-2 gap-4 h-[20rem] md:h-[22rem] mt-4">
<div class="bg-gray-300 py-2 px-4 rounded-xl">lorem</div>
<div class="bg-gray-300 py-2 px-4 rounded-xl">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis,
quidem.
</div>
<div class="bg-gray-300 py-2 px-4 rounded-xl">
Lorem ipsum dolor sit amet.
</div>
<div class="bg-gray-300 py-2 px-4 rounded-xl">
ipsum asperiores vel debitis ratione quis.
</div>
</div>
</div>
</div>
</div>
</body>
</html>