-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
120 lines (117 loc) · 6.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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>What's Da Weather</title>
<link rel="shortcut icon" type="image/jpg" href="./images/icons/stars.png" />
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link rel="stylesheet" href="/src/style.css">
<script src="https://use.fontawesome.com/96ba741ff3.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;800&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
<!--Main Container -->
<div class="container">
<!--Card -->
<div class="row card-row justify-content-center">
<div class="col-12 card-column">
<div id="card" class="card card-main-body shadow">
<!--Card Top -->
<div class="card-top">
<div class="row">
<!--Search bar start -->
<div class="col-12 input-col">
<form class="input-group" id="search-form">
<div class="input-group-prepend">
<span class="input-group-text" id="current-location-addon">
<img class="current-location" src="/images/icons/current-location.svg"
alt="">
</span>
</div>
<input id="search-input" type="text" class="form-control" placeholder="enter city"
aria-label="enter city" autocomplete="off" autofocus="on">
<!--Search bar button start -->
<div class="input-group-append">
<input class="btn button search-button" type="submit" value="Search">
</div>
<!--Search bar button end -->
</form>
</div>
<!--Search bar end -->
</div>
</div>
<!--Card Top End -->
<!--Card Middle Body Start -->
<!--City not found message start -->
<div class="row">
<div class="col-12 city-error">
<span class="city-not-found"></span>
</div>
</div>
<!--City not found message end -->
<div class="row card-middle-body">
<!--Card Middle Text Start -->
<div class="col-6 text-wrapper">
<img class="primary-weather-icon" id="primary-icon" src="./images/icons/nothing.png"
alt="weather-icon">
<h2 class="city-name" id="current-city">London</h2>
<p id="current-time"></p>
<p class="temperature" id="current-temperature"></p>
<span class="temperature-unit measure" id="temperature-meassure">
<a id="degreesCelsius" class="active" href="">°C</a>
|
<a id="degreesFahr" class="inactive" href="">°F</a>
</span>
<p id="weather-description"></p>
<div class="row">
<div class="col-12 additional-weather-wrapper">
<div class="row additional-weather-info">
<div class="col-6 col-smaller">
<img class="weather-icon-small" src="images/icons/winds.svg" alt="winds">
<span class="wind" id="wind-speed"></span>
</div>
<div class="col-6 col-smaller">
<img class="weather-icon-small" src="./images/icons/raindrops.svg"
alt="raindrops">
<span class="chance-of-rain" id="humidity"></span>
</div>
</div>
</div>
</div>
</div>
<!--Card Middle Text End -->
<!--Illustration Start -->
<div class="col-6 illustration-col">
<div class="illustration">
<img id="main-illustration" src="./images/illustrations/Spinner-0.4s-8px.svg"
alt="windy">
</div>
<!--Illustration End -->
</div>
</div>
<!--Card Middle Body End -->
<!--Card Bottom start -->
<div class="card-bottom card-text">
<p class="check-additonal-hours">
Check the weather for next few hours
</p>
<div class="row" id="forecast"></div>
</div>
<!--Card Bottom End -->
</div>
<span class="open-source">
<a class="open" target="_blank" href="https://github.com/sintija/weather-app-shecodes"> Open
Source</a>
by Sintija
</span>
</div>
</div>
<!--Card End -->
</div>
<!--Main Container End -->
<script src="/src/index.js"></script>
</body>
</html>