forked from ArefEhsani/WeatherApp
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
183 lines (178 loc) · 8.4 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
<html>
<head>
<title>هواشناسی</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://kit.fontawesome.com/d7e75480ae.js" crossorigin="anonymous"></script>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/dark.css">
</head>
<body>
<div class="container">
<div>
<!-- pic info status -->
<div class="main-info">
<!-- status image -->
<div class="status-image">
<img src="img/Sunny Cloudy.png" alt="وضعیت هوا" width="150px" id="current-weather-icon">
</div>
<!-- status date -->
<div class="date" id="DateShower1"><span>یکشنبه</span>، <span>21</span> <span>آذر</span></div>
<!-- status temperature -->
<div class="temperature"><span id="current-temp">29</span><sup>°</sup></div>
<!-- status name -->
<div class="status-name"><span>آقتابی و ابری</span></div>
<!-- status weather -->
<div class="Wind-humidity">
<div class="wind">
<label><i class="fas fa-wind"></i> <span>باد</span></label>
<label><span id="current-wind">19</span> km/h</label>
</div>
<div class="humidity">
<label><i class="fas fa-tint"></i> <span>رطوبت</span></label>
<label><span id="current-humidity">22</span> RH</label>
</div>
</div>
</div>
<!-- Event -->
<div class="Event orange">
<h3>رویداد ها</h3><br>
<div>
<span></span>
</div>
</div><br>
</div>
<div><br>
<!-- header time---date----dark mode -->
<div class="header">
<!-- time and date -->
<div class="header-time-date">
<div class="header-time" id="TimeShower"><span>08:42</span></div>
<div class="date" id="DateShower"><span>یکشنبه</span>، <span>21</span> <span>آذر</span>
</div>
</div>
<!-- dark node -->
<div class="header-dark-mode">
<div> <span><i class="far fa-sun"></i></span></div>
<div><span> <i class="far fa-moon"></i></span></div>
</div>
</div>
<!-- status week -->
<div class="Week">
<!-- status day 1-->
<div class="day">
<!-- status image -->
<div><img src="img/Cloudy.png" alt="" width="60px" id="today-icon"></div>
<!-- status day name -->
<div>
<label id="today-name">شنبه</label>
</div>
<!-- status deg -->
<div><label id="today-temp"><span>26</span></label><sup>°</sup></div>
</div>
<!-- status day2-->
<div class="day">
<!-- status image -->
<div><img src="img/Cloudy.png" alt="" width="60px" id="tommorrow-icon"></div>
<!-- status day name -->
<div>
<label id="tommorrow-name">یکشنبه</label>
</div>
<!-- status deg -->
<div><label id="tommorrow-temp">26</label><sup>°</sup></div>
</div>
<!-- status day 3-->
<div class="day">
<!-- status image -->
<div><img src="img/Cloudy.png" alt="" width="60px" id="tommorrow-after-that-icon"></div>
<!-- status day name -->
<div>
<label id="tommorrow-after-that-name">دوشنبه</label>
</div>
<!-- status deg -->
<div><label id="tommorrow-after-that-temp">26</label><sup>°</sup></div>
</div>
</div>
<div class="Buttom">
<!-- Different dates -->
<div class="Different-dates">
<div>
<div>
<i class="fas fa-calendar-alt"></i>
<span id="persian-date">شمسی</span>
</div>
<span id="persian-date-mini">1400/10/7</span>
</div>
<div>
<div>
<i class="fas fa-calendar-alt"></i>
<span id="arabic-date">میلادی</span>
</div>
<span id="gergorian-date-mini">1400/10/7</span>
</div>
<div>
<div>
<i class="fas fa-calendar-alt"></i>
<span id="gergorian-date">قمری</span>
</div>
<span id="arabic-date-mini">1400/10/7</span>
</div>
</div>
<div class="gride">
<!-- info yers -->
<div class="info-year">
<!-- year animal -->
<img src="img/dragon.png" id="year-animal-img">
<br><br>
<div class="i-y-top"><label>سال : <span id="year-animal">سگ</span></label>
</div>
<!-- year day -->
<div class="i-y-main"><label>روز های گذشته از سال : <span id="passed-days">100</span></label>
</div>
<!-- year day -->
<div class="i-y-foother"><label>روز های مانده از سال : <span id="left-days">100</span></label>
</div>
</div>
<!-- Sunrise and sunset -->
<div class="Sunrise-sunset">
<!-- title -->
<div class="sunrise-top"><label>طلوع و غروب آفتاب</label></div>
<!-- box city info for Sunrise and sunset -->
<div class="city-Sunrise-sunset">
<!-- select city for Sunrise and sunset -->
<h3 class="gray">تهران</h3>
<!-- -->
<div class="info-Sunrise-sunset">
<!-- box Sunrise sunset -->
<div class="Sunrise-sunset-box">
<!-- icon Sunrise-->
<div>
<span class="icon-Sunrise-sunset"><i class="far fa-sun"></i></span>
</div>
<!-- Sunrise -->
<div>
<div class="name"><span>طلوع</span></div>
<div class="c-time"><label id="sunrise-time">13:35</label></div>
</div>
</div>
<!-- box Sunrise sunset -->
<div class="Sunrise-sunset-box">
<!-- icon sunset-->
<div>
<span class="icon-Sunrise-sunset"><i class="far fa-moon"></i></span>
</div>
<!-- sunset -->
<div>
<div class="name"><span>غروب</span></div>
<div class="c-time"><label id="sunset-time">13:35</label></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>