More text and style edits

elizabethengelman · Nov 22, 2022 · 20f1707 · 20f1707
1 parent 37c013f
commit 20f1707
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 5 deletions.
diff --git a/public/index.html b/public/index.html
@@ -29,7 +29,7 @@
 
       <!-- left nav -->
       <div class="flex flex-col justify-between w-1/4 m-3 rounded-md bg-black bg-opacity-20 text-gray-50">
-        <div class="text-4xl p-3 ">A Day at the Beach</div>
+        <div id="title" class="text-4xl p-3">A Day at the Beach</div>
 
         <div id="message-1" class="p-3 bg-gradient-to-r from-sky-600 cursor-pointer">
           <p class="text-xl">Click to continue</p>
@@ -116,8 +116,9 @@
         </div>
 
         <div id="message-15" class="hidden flex-col p-3 bg-gradient-to-r from-sky-600 cursor-pointer">
-          <p class="text-2xl">At some point in history having light skin because desirable, and now in addition to protection one's skin from the damage of the sun, there was interest in preventing the skin from becoming darker as well.</p>
-          </p>
+          <p class="text-2xl">At some point in history having light skin became desirable.</p>
+          <br>
+          <p class="text-2xl">Now in addition to protecting one's skin from the damage of the sun, there was interest in preventing the skin from becoming darker as well.</p>
           <div>
             <p class="text-xs pt-3">A video will load to the right. Move your mouse around your face to protect yourself from the sun.</p>
           </div>
@@ -128,15 +129,64 @@
         </div>
 
         <div id="message-16" class="hidden flex-col p-3 bg-gradient-to-r from-sky-600 cursor-pointer">
-          <p class="text-2xl">But colonialsm's effect on sun protection didn't stop there.</p>
-          </p>
+          <p class="text-2xl">Perhaps this was an effect of colonialism.</p>
           <br>
           <div>
             <p class="text-xs pt-3">Click to continue</p>
           </div>
         </div>
 
 
+        <div id="message-17" class="hidden flex-col p-3 bg-gradient-to-r from-sky-600 cursor-pointer">
+          <p class="text-2xl">But colonialism didn't stop there.</p>
+          <br>
+          <div>
+            <p class="text-xs pt-3">Click to continue</p>
+          </div>
+        </div>
+
+        <div id="message-18" class="hidden flex-col p-3 bg-gradient-to-r from-sky-600 cursor-pointer">
+          <p class="text-2xl">Some people still report using sunscreen to prevent their skin from darkening.</p>
+
+          <br>
+          <p class="text-2xl">Worried about consequences of colorism.</p>
+          <div>
+            <p class="text-xs pt-3">Click to continue</p>
+          </div>
+        </div>
+
+        <div id="message-19" class="hidden flex-col p-3 bg-gradient-to-r from-sky-600 cursor-pointer">
+          <p class="text-2xl">Just in the past decade have sunscreens specifically developed for people of color been more widely available.</p>
+          <br>
+          <div>
+            <p class="text-xs pt-3">Click to continue</p>
+          </div>
+        </div>
+
+        <div id="message-20" class="hidden flex-col p-3 bg-gradient-to-r from-sky-600 cursor-pointer">
+          <p class="text-2xl">
+            Skin of color is less represented in sunscreen research.
+          </p>
+          <br>
+          <p class="text-2xl">
+            Some darker skin tones are not represented in the research at all.
+          </p>
+
+          <br>
+          <div>
+            <p class="text-xs pt-3">Click to continue</p>
+          </div>
+        </div>
+
+        <div id="message-21" class="hidden flex-col p-3 bg-gradient-to-r from-sky-600 cursor-pointer">
+          <p class="text-2xl">
+            Maybe this isn't a day at the beach afterall.
+          </p>
+          <br>
+          <div>
+            <p class="text-xs pt-3">Click to continue</p>
+          </div>
+        </div>
 
         <div class="for-spacing h-1/4"></div>
 

diff --git a/public/navigation.js b/public/navigation.js
@@ -23,6 +23,11 @@ const addNavigation = () => {
   const message14 = document.getElementById("message-14");
   const message15 = document.getElementById("message-15");
   const message16 = document.getElementById("message-16");
+  const message17 = document.getElementById("message-17");
+  const message18 = document.getElementById("message-18");
+  const message19 = document.getElementById("message-19");
+  const message20 = document.getElementById("message-20");
+  const message21 = document.getElementById("message-21");
   const backgroundVideo = document.getElementById("background-video");
   const backgroundAudio = document.getElementById("background-audio");
 
@@ -120,4 +125,37 @@ const addNavigation = () => {
     message15.style.display = "none";
     message16.style.display = "flex";
   });
+
+  message16.addEventListener("click", () => {
+    message16.style.display = "none";
+    message17.style.display = "flex";
+  });
+
+  message17.addEventListener("click", () => {
+    message17.style.display = "none";
+    message18.style.display = "flex";
+  });
+
+  message18.addEventListener("click", () => {
+    message18.style.display = "none";
+    message19.style.display = "flex";
+  });
+
+  message19.addEventListener("click", () => {
+    message19.style.display = "none";
+    message20.style.display = "flex";
+  });
+
+  message20.addEventListener("click", () => {
+    message20.style.display = "none";
+    message21.style.display = "flex";
+  });
+
+  message21.addEventListener("click", () => {
+    let title = document.getElementById("title");
+
+    document.querySelector("main").classList.add("bg-black");
+    backgroundAudio.pause();
+    backgroundVideo.pause();
+  });
 };