Weather/index.html at main · agungkrishna-code/Weather · GitHub

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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Weather Web</title>
    <link rel="icon" type="image/png" href="/img/cloud.png" sizes="32x32">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <!-- Header -->
    <div class="header">
      <img src="/img/sun.png" class="sun" alt="">
      <h1>Wettervorhersage App</h1>
      <div>
        <div class="input-group mb-3">
          <input type="text" id="input" placeholder="Search..." class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
          <button class="btn btn-dark" id="search"><i class="fas fa-search"></i></button>
          <button class="btn btn-secondary" id="geolocation"><i class="fas fa-map-marker-alt"></i></button>
          <button class="btn btn-primary" id="toggleSidenav"><i class="fas fa-bars"></i></button>
        </div>
      </div>
    </div>
    <!-- Header End -->

    <!-- About Us Modal -->
    <div class="modal fade" id="aboutUsModal" tabindex="-1" aria-labelledby="aboutUsModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="aboutUsModalLabel">About Us <i class="fas fa-info-circle"></i></h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <p>Welcome to Wettervorhersage App!</p>
            <p>We are Group PRG012.</p>
            <p>Our Weather Web application is built using the following technologies:</p>
            <ul>
              <li><strong>Bootstrap:</strong> We use Bootstrap to create a responsive and visually appealing user interface. It helps us make our application look great on various devices, from mobile phones to desktops. <a href="https://getbootstrap.com/" target="_blank" style=" color: blue;">Click Here</a></li>
              <li><strong>Font Awesome:</strong> Font Awesome icons add a touch of elegance to our app. We use them to enhance the user experience and make it easier for users to understand different elements of the interface. <a href="https://fontawesome.com/" target="_blank" style=" color: blue;">Click Here</a></li>
              <li><strong>OpenWeatherMap API:</strong> Our application fetches real-time weather data from the OpenWeatherMap API. This allows us to provide accurate weather forecasts, current conditions, and more to our users. <a href="https://openweathermap.org/api" target="_blank" style=" color: blue;">Click Here</a></li>
            </ul>
            <p>We are constantly working to improve our Weather Web app and add new features to make it more useful and enjoyable for our users. Your feedback and suggestions are always welcome!</p>
            <p>Thank you for using Wettervorhersage App!</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
    <!-- About Us Modal End -->

    <!-- Sidenav -->
    <div class="sidenav" id="mySidenav">
      <br>
      <nav>
        <ul>
          <li><a href="#" data-bs-toggle="modal" data-bs-target="#aboutUsModal"><i class="fas fa-info-circle"></i><b>&nbsp;&nbsp;About Us</b></a></li>
          <li><a href="https://github.com/agungkrishna-code/Weather" target="_blank"><i class="fab fa-github"></i><b>&nbsp;&nbsp;GitHub</b></a></li>
          <li><a href="https://github.com/agungkrishna-code/Weather/graphs/contributors" target="_blank"><i class="fab fa-contributors"></i><b>&nbsp;&nbsp;Contributors</b></a></li>
        </ul>
      </nav>
    </div>
    <!-- Sidenav End -->

    <main>
      <div class="weather">
        <h2 id="city">Jakarta, ID</h2>
        <div class="temp-box">
          <img src="/img/sunny-cloudy.png" alt="" id="img">
          <p id="temperature">32&#176</p>
        </div>
        <span id="clouds">Broken Cloud</span>
      </div>
      <div class="divider1"></div>
      <div class="forecastH">
        <p class="cast-header">Upcoming Forecast</p>
        <div class="templist">
          <div class="next">
            <div>
              <p class="time">8:30 PM</p>
              <p>32&#176 / 30&#176</p>
            </div>
            <p class="desc">Light Rain</p>
          </div>
          <div class="next">
            <div>
              <p class="time">8:30 PM</p>
              <p>32&#176 / 30&#176</p>
            </div>
            <p class="desc">Light Rain</p>
          </div>
          <div class="next">
            <div>
              <p class="time">8:30 PM</p>
              <p>32&#176 / 30&#176</p>
            </div>
            <p class="desc">Light Rain</p>
          </div>
          <div class="next">
            <div>
              <p class="time">8:30 PM</p>
              <p>32&#176 / 30&#176</p>
            </div>
            <p class="desc">Light Rain</p>
          </div>
          <div class="next">
            <div>
              <p class="time">8:30 PM</p>
              <p>32&#176 / 30&#176</p>
            </div>
            <p class="desc">Light Rain</p>
          </div>
        </div>
      </div>
    </main>

    <div class="forecstD">
      <div class="divider2"></div>
      <p class="cast-header-2">Days Forecast</p>
      <div class="weekF">
        <div class="dayF">
          <p class="date">Wed Jul 17 2023</p>
          <p>32&#176 / 30&#176</p>
          <p class="desc">Light Rain</p>
        </div>
        <div class="dayF">
          <p class="date">Wed Jul 17 2023</p>
          <p>32&#176 / 30&#176</p>
          <p class="desc">Light Rain</p>
        </div>
        <div class="dayF">
          <p class="date">Wed Jul 17 2023</p>
          <p>32&#176 / 30&#176</p>
          <p class="desc">Light Rain</p>
        </div>
        <div class="dayF">
          <p class="date">Wed Jul 17 2023</p>
          <p>32&#176 / 30&#176</p>
          <p class="desc">Light Rain</p>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
    <script src="main.js" type="module"></script>
  </body>
</html>