Skip to content

Commit ba39669

Browse files
dtmhdev89dtmhdev89
committed
third commit
1 parent f792806 commit ba39669

File tree

2 files changed

+494
-3
lines changed

2 files changed

+494
-3
lines changed

‎index.html‎

Lines changed: 125 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,136 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<meta http-equiv="u-xa-compatible" content="ie=edge">
7+
<meta name="theme-color" content="#4285f4"> <!-- hien thi tren chrome firefox opera for android phone -->
8+
<meta name="msapplication-navbutton-color" content="#4285f4"> <!--for windows phone-->
9+
<meta name="apple-mobie-web-app-status-bar-style" content="#4285f4"> <!--For safari in iPhone-->
10+
<meta name="description" content="Weather Application">
11+
<meta name="keywords" content="Weather Application, Weather">
12+
<meta name="author" content="Georgian Stan Tutorial">
13+
<!-- <meta http-equiv="refresh" content="10"> refresh document every 10 seconds-->
714
<title>Weather Application</title>
815

16+
<!-- google font -->
17+
<link href="https://fonts.googleapis.com/css?family=Lato:400,900" rel="stylesheet">
18+
19+
<!-- other css -->
20+
<link rel="stylesheet" type="text/css" href="style/reset-css.css">
21+
<link rel="stylesheet" type="text/css" href="style/loader.css">
22+
<link rel="stylesheet" type="text/css" href="style/ripple.css">
23+
924
<!-- my css -->
10-
<link rel="stylesheet" href="./style/index.css">
11-
25+
<link rel="stylesheet" type="text/css" href="style/index.css">
26+
27+
<!-- favicon -->
28+
<link rel="icon" type="image/x-icon" href="assets/images/icons/favicon96x96.ico">
29+
1230
</head>
1331
<body>
32+
<div class="lds-dual-ring center display-none"></div>
33+
<main>
34+
<button id="open-menu-btn" class="riple">
35+
<img class="icon-sm-28" src="assets/images/icons/menu.png" alt="menu">
36+
</button>
37+
38+
<!-- currently weather section -->
39+
<section id="current-day-weather-container">
40+
<h1 class="location-label">Brasov</h1>
41+
<div id="temperature-summary-container" class="flex-container">
42+
<div>
43+
<img src="assets/images/summary-icons/clear-day-white.png" alt="">
44+
</div>
45+
46+
<div>
47+
<h1 id="degrees-label">20&#176</h1>
48+
<p id="summary-label">Clear Day</p>
49+
</div>
50+
</div>
51+
52+
<div id="humidity-wind-container" class="flex-container">
53+
<div>
54+
<img class="icon-sm-30" src="assets/images/icons/humidity.png" alt="humidity icon">
55+
<span>20%</span>
56+
</div>
57+
58+
<div>
59+
<img class="icon-sm-30" src="assets/images/icons/wind-speed-flag.png" alt="humidity icon">
60+
<span>3 m/h</span>
61+
</div>
62+
</div>
63+
</section>
64+
65+
<!-- lower panel-->
66+
<section class="lower-panel">
67+
<button id="toggle-hourly-weather" class="ripple center_x">
68+
<img src="assets/images/icons/up-arrow.png" alt="up arrow icon">
69+
</button>
70+
71+
<!-- daily weather -->
72+
<div id="daily-weather-wrapper" class="lower-panel-body">
73+
<div class="flex-container weather-box current-day-of-the-week">
74+
<div>
75+
<h1>Sunday</h1>
76+
</div>
77+
<div class="flex-container">
78+
<div>
79+
<p>18&#176</p>
80+
</div>
81+
<div>
82+
<img class="icon-sm-30" src="assets/images/summary-icons/clear-day-white.png" alt="clear day white">
83+
</div>
84+
</div>
85+
</div>
86+
</div>
87+
88+
<!--hourly weather-->
89+
<div id="hourly-weather-wrapper" class="lower-panel-body">
90+
<div class="flex-container weather-box current-day-of-the-week">
91+
<div>
92+
<h1>14:00</h1>
93+
</div>
94+
<div class="flex-container">
95+
<div>
96+
<p>18&#176</p>
97+
</div>
98+
<div>
99+
<img class="icon-sm-30" src="assets/images/summary-icons/clear-day-grey.png" alt="clear day white">
100+
</div>
101+
</div>
102+
</div>
103+
</div>
104+
</section>
105+
106+
<!-- menu container -->
107+
<section id="menu-container">
108+
<button id="close-menu-btn" class="ripple">
109+
&#10006;
110+
</button>
111+
112+
<!-- container -->
113+
<div>
114+
<!--location wrapper-->
115+
<div id="add-location-wrapper">
116+
<input type="text" placeholder="Location" id="location-input">
117+
<br>
118+
<button class="ripple disabled" id="add-city-btn" disabled>Add City</button>
119+
<h1 class="location-label">Brasov</h1>
120+
</div>
121+
122+
<!-- saved cities -->
123+
<div id="saved-cities-wrapper">
124+
<div class="flex-container saved-city-box">
125+
<div class="ripple">
126+
<h1>Brasov</h1>
127+
</div>
128+
<div>
129+
<button class="ripple remove-saved-cities"></button>
130+
</div>
131+
</div>
132+
</div>
14133

15-
<script type="text/javascript" src="./script/index.js"></script>
134+
</div>
135+
</section>
136+
</main>
137+
<script type="text/javascript" src="script/index.js"></script>
16138
</body>
17139
</html>

0 commit comments

Comments
 (0)