Team-12-LightPollution/index.html at main · himansig7/Team-12-LightPollution · 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
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
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Light Pollution</title> <!-- the content here will only show in the tab and in the metadata about the page -->
  <link rel="icon" href="img/lightbulb-icon.png">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="reset.css" rel="stylesheet" type="text/css" />
  <link href="styles.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="styles.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap"
    rel="stylesheet">
</head>

<body>
  <!-- navbar
      Purpose:
      - Navigation bar that allows users to jump to different sections of the webpage
      - Also holds buttons for user settings (dark mode, reduce motion)
      -->

  <nav class="navbar">
    <div class="navbar-container">
      <div class="navbar-toggle" id="mobile-menu">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </div>
    </div>
    <ul class="navbar-menu">
      <li><a href="#about">About</a></li>
      <li><a href="#impact">Impact</a></li>
      <li><a href="#learn-more">Learn More</a></li>
      <li><a href="https://darksky.org/ways-to-give/" class="donate"
        target="_blank" rel="noopener noreferrer">Donate!</a>
      </li>
    </ul>
  </nav>

  <body>
    <!--- Headings --->
    <div class="header-container">
      <img src="img/night-sky-banner.jpg" alt="Beautiful night sky with stars" class="header-image" />
      <div class="header-blur"></div>
    </div>

    <div class="content-container">
      <div class="hero">
        <div class="hero-text">
          <h1 class="hero-title">A Starless Sky</h1>
          <p class="hero-p">
            Learn more about light pollution and its impacts on the environment,
            our health, and more.
          </p>
          <p class="hero-p" id="catch-phrase">
            Remember: Dim the lights, save the night!
          </p>
        </div>
        <div class="light-pollution-box">
          <label class="switch">
            <input type="checkbox" id="toggle-switch">
            <span class="slider"></span>
          </label>
          <img src="img/sky1.png" class="light-pollution-img" alt="">
        </div>
      </div>

      <!--- About --->
      <div class='about revealable'>
        <h2 id="about">What is Light Pollution?</h2>
        <p>Light pollution is the overuse of artificial light hat brightens the night
          sky, reducing our ability to see stars and disrupting natural ecosystems.
          It affects wildlife by interfering with migration patterns, sleep cycles,
          and predator-prey relationships, especially for nocturnal animals.
        </p>
        <p>Humans
          also experience negative effects, such as disrupted sleep due to exposure
          to artificial light at night, which can impact overall health. By using
          shielded lighting, reducing unnecessary brightness, and promoting awareness,
          we can help restore the natural beauty of the night sky while protecting
          both wildlife and human well-being.
        </p>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/0FXJUP6_O1w?si=G-TqgPuAMr0BkMbt"
          title="YouTube video player" frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
        </iframe>
      </div>

      <div class="causes revealable">
        <h2>Causes of light pollution:</h2>
        <div class="causes-grid">
          <div class="cause-card">
            <h5>Glare</h5>
            <p>Uncomfortably bright lights that directly shine into the eye</p>
          </div>
          <div class="cause-card">
            <h5>Light Trespass</h5>
            <p>Unintended light that spills into other people's spaces</p>
          </div>
          <div class="cause-card">
            <h5>Skyglow</h5>
            <p>Light scattered into the atmosphere that brightens the night sky</p>
          </div>
          <div class="cause-card">
            <h5>Light Clutter</h5>
            <p>Excessive or confusing groupings of light sources</p>
          </div>
        </div>
      </div>

      <div class="facts revealable">
        <h3>Let's look at the facts...</h3>
        <div class="slideshow-container">
          <button id="prev" class="nav-button">&#10094;</button>
          <div class="slide fade">
            <img src="img/map-progression.jpg" alt="map of light pollution in US overtime" />
            <p>Levels of light pollution in the U.S. have increased rapidly over the years</p>
          </div>
          <div class="slide fade">
            <img src="img/light-pollution-figure.jpeg" alt="levels of light pollution" />
            <p>Starlight is greatly diminished, even in rural and suburban areas, impacting both people and wildlife</p>
          </div>
          <div class="slide fade">
            <img src="img/pie-chart.jpeg" alt="percentage of world impacted by light pollution" />
            <p>Light pollution is a global problem that requires a global solution</p>
          </div>
          <div class="slide fade">
            <img src="img/light-polluted-sky1.jpg" alt="Light polluted sky" />
            <p>LA's night sky is a prime example of light pollution</p>
          </div>
          <button id="next" class="nav-button">&#10095;</button>
        </div>
      </div>

      <style>
        .slideshow-container {
          position: relative;
          max-width: 400px;
          margin: auto;
          text-align: center;
        }

        .slide {
          display: none;
        }

        img {
          width: 100%;
          border-radius: 8px;
        }

        .nav-button {
          position: absolute;
          top: 50%;
          transform: translateY(-10%);
          background-color: transparent;
          color: white;
          border: none;
          padding: 10px;
          cursor: pointer;
          font-size: 18px;
        }

        #prev {
          left: 0;
        }

        #next {
          right: 0;
        }
      </style>

      <script>
        let currentIndex = 0;
        const slides = document.querySelectorAll(".slide");
        const totalSlides = slides.length;

        document.getElementById("prev").addEventListener("click", () => changeSlide(-1));
        document.getElementById("next").addEventListener("click", () => changeSlide(1));

        function changeSlide(direction) {
          slides[currentIndex].style.display = "none";
          currentIndex = (currentIndex + direction + totalSlides) % totalSlides;
          slides[currentIndex].style.display = "block";
        }

        // Initialize first slide
        slides[currentIndex].style.display = "block";
      </script>


      <!--- Impact --->
      <section class="impact revealable" id="impact">
        <h2>Impact!</h2>

        <details>
          <summary>Lasting Effects of Light Pollution on Wildlife</summary>


          <h3>Disrupted Sleep and Circadian Rhythms</h3>
          <ul>
            <li>Artificial light can disrupt the natural day-night cycle, which
              affects when animals sleep, wake, migrate, and reproduce.</li>
            <li>Birds that use moonlight to migrate may get lost and die.</li>
          </ul>

          <h3>Disorientation and Poor Navigation</h3>
          <ul>
            <li>Light pollution can confuse animals' navigation, making it harder
              for them to find food, shelter, and mates.</li>
            <li>Sea turtle hatchlings may be drawn to bright lights from roads
              and houses instead of the ocean, where they need to go to survive.</li>
          </ul>

          <h3>Attraction to Artificial Lights</h3>
          <ul>
            <li>Many insects are attracted to artificial light, which can lead to them being
              killed by light sources or becoming prey for predators.</li>
            <li>Billions of moths and other nocturnal insects are killed each year by artificial light.</li>
          </ul>

          <h3>Reduced Survival and Reproduction</h3>
          <ul>
            <li>Light pollution can lead to reduced survival and reproduction in many species.</li>
            <li>By affecting the behavior of predators and prey, light pollution can alter food webs.</li>
          </ul>

          <img src="img/effects-on-wildlife.webp" alt="Bird surrounded by light pollution" />
        </details>

        <details>
          <summary>Lasting Effects of Light Pollution on Ecosystems</summary>
          <h3>Impacts on Predation & Reproduction</h3>
          <ul>
            <li>Light pollution can attract prey species to areas with artificial light,
              making them more vulnerable to predators.</li>
            <li>Disrupted circadian rhythms can negatively affect reproductive success
              by altering hormone cycles and timing of breeding activities.</li>
          </ul>

          <h3>Impacts on Plant Life</h3>
          <ul>
            <li>Artificial light at night can trick plants into thinking it's daytime, causing
              them to bud and flower earlier in the spring, potentially leading to issues with
              <br>frost damage and impacting the timing of pollination.
            </li>
            <li>Many nocturnal pollinators like moths and bats are disoriented by artificial light,
              leading to decreased pollination of night-blooming flowers and <br> decreased seed dispersal.</li>
            <li>Continuous exposure to artificial light can cause stress on plant systems, impacting their
              photosynthetic efficiency and overall growth.</li>
          </ul>

          <h3>Impacts on Habitat Loss</h3>
          <ul>
            <li>Some animals actively avoid illuminated areas, effectively excluding them from potential habitat.</li>
            <li>Nocturnal rodents such as some species of mice and shrews may avoid
              brightly lit areas, reducing their access to food and shelter.</li>
            <li>When animals avoid lit areas, it can effectively create barriers within their natural
              range, dividing their habitat into smaller, less viable sections.</li>
          </ul>

          <img src="img/effects-on-ecosystems.jpg" alt="Ecosystem affected by light pollution" />
        </details>

        <details>
          <summary>Lasting Effects of Light Pollution on Humans</summary>
          <h3>Melatonin Disruption & Sleep Problems</h3>
          <ul>
            <li>Exposure to artificial light at night, especially in the blue light spectrum,
              inhibits the body's natural production of melatonin, a hormone <br>crucial for sleep regulation.</li>
            <li>Reduced melatonin levels due to light pollution can lead to difficulty falling asleep,
              disrupted sleep patterns, and reduced sleep quality.</li>
          </ul>

          <h3>Circadian Rhythm Disruption</h3>
          <ul>
            <li>Light pollution disrupts the body's natural circadian rhythm, which is synchronized
              with day and night cycles, potentially impacting various <br>bodily functions beyond sleep.</li>
            <li>A disrupted circadian rhythm can impact hormone regulation— increasing
              the risk of diseases— as well as mental health and metabolism,<br> potentially leading to obesity.</li>
          </ul>

          <h3>Potential Health Concerns</h3>
          <ul>
            <li>Studies have linked chronic light pollution exposure to potential health issues like
              increased risk of depression, obesity, diabetes, cardiovascular <br>disease, reproductive problems
              and cancers.</li>
            <li>Moreover, numerous studies have linked working the night shift and exposure to light at night to
              increased risks for breast and prostate cancers<br> and other health problems.</li>
          </ul>

          <img src="img/effects-on-humans.jpg" alt="Person affected by light pollution" />
        </details>
      </section>

      <!--- News --->
      <div class="news revealable">
        <h2>Recent News</h2>

        <a class="" href="https://education.nationalgeographic.org/resource/light-pollution/">
          <article>
            <h3 class="news-title">Light Pollution - National Geographic</h3>
            <p>
              Explore the dangerous effects of light pollution, from impacting
              wildlife to harming human health, and learn how we can make a
              difference.
            </p>
          </article>

        </a>
        <a class=""
          href="https://thinklandscape.globallandscapesforum.org/68200/light-pollution-is-it-too-late-to-switch-off-the-lights/?gad_source=1&gclid=CjwKCAiA5Ka9BhB5EiwA1ZVtvDDc5L4QqlDe5FjuCbgtsLvbLRndnR5H_oEka6djNRf3LOm-6gjPphoC7vsQAvD_BwE">
          <article>
            <h3>Is it too late to switch off the lights? - Think Landscape</h3>
            <p>
              Dive deeper into the factors that contribute to light pollution, and
              learn what better lighting can look like.
            </p>
          </article>
        </a>

        <a class="" href="https://www.sandiegobirdalliance.org/what-we-do/lights-out-san-diego-english.html">
          <article>
            <h3>Lights Out, San Diego!</h3>
            <p>
              Join the campaign to build awareness about how light pollution impacts
              migrating birds and other wildlife.
            </p>
          </article>
        </a>
      </div>

      <!-- CONNECT WITH US FORM -->
      <div id="connect" class="revealable">
        <h2 id="learn-more">Learn More!</h2>
        <div class="connect-container">
          <div class="connect-para">
            <p>Want to learn more about reducing light pollution and protect our night skies?
              Fill out the form below! By taking action, you can help preserve natural darkness,
              support wildlife,and improve human health. Every small change, from using shielded
              lighting to advocating for better policies, makes a difference. Together, we can
              restore the beauty of the night sky for future generations. </p>
          </div>
          <div class="connect-participants">
            <p>✨ Lisa from Arizona wants to learn more!</p>
            <p>✨ Jerry from Rhode Island wants to learn more!</p>
            <p>✨ Mariam from Michigan wants to learn more!</p>
            <p id="connect-count">🌆 3 people have joined!</p>
          </div>

        </div>


        <!-- Connect Form -->
        <div class="form-container">
          <form id="connect-form" title="connect-form" action="https://formspree.io/f/meoaqrnd" method="POST">


            <!-- Name Input -->
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" placeholder="Your Name" required>


            <!-- Email Input -->
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" placeholder="Your Email" required>

            <!-- Home State Input -->
            <label for="email">Home State:</label>
            <input type="text" id="home-state" name="home-state" placeholder="Your Home State" required>

            <!-- Submit button -->
            <button id="connect-button" type="submit">Submit</button>
          </form>
        </div>
      </div>
  </body>

  <script src="script.js"></script>

</body>

</html>