From 4b77949983aaef4c576d50aeeaa9ef2dbaf6d4e8 Mon Sep 17 00:00:00 2001
From: James Dinh <jamesdinh77@gmail.com>
Date: Tue, 7 Jun 2022 01:40:29 -0700
Subject: [PATCH] Added responsiveness

---
 css/general.css     | 64 +++++++++++++++++++++++++++------------------
 index.html          | 54 ++++++++++++++++++++++----------------
 js/data_checkbox.js |  9 +++++++
 3 files changed, 80 insertions(+), 47 deletions(-)

diff --git a/css/general.css b/css/general.css
index 915996b..f66006a 100644
--- a/css/general.css
+++ b/css/general.css
@@ -527,6 +527,11 @@ section {
   z-index: 0;
 }
 
+#timeline-left-arrow {
+  position: absolute;
+  float: left;
+}
+
 .timeline-input {
   width: 22px;
   height: 22px;
@@ -536,9 +541,22 @@ section {
   display: block;
   appearance: none;
   cursor: pointer;
+  box-shadow: 0 0 0 0 rgba(51, 217, 178, 1);
+  animation: pulse-gray 2s infinite;
+}
+@keyframes pulse-gray {
+  0% {
+    box-shadow: 0 0 0 0 rgba(110, 110, 110, 0.7);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(51, 217, 178, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(51, 217, 178, 0);
+  }
 }
 .timeline-input:focus {
-  outline: none;
+  animation: pulse-gray 0s;
 }
 .timeline-input::before, .timeline-input::after {
   content: "";
@@ -548,14 +566,20 @@ section {
   top: 50%;
   transform: translateY(-50%);
   background-color: #2C3E50;
-  width: 80px;
+  width: 64px;
   height: 5px;
 }
 .timeline-input::before {
-  right: calc(2vw);
+  left: -64px;
 }
+/* #t1::before {
+  content: "<";
+  color: white;
+  font-size: 30px;
+} */
+
 .timeline-input::after {
-  left: calc(1vw);
+  right: -64px;
 }
 .timeline-input:checked {
   background-color: #2C3E50;
@@ -582,7 +606,7 @@ section {
   visibility: hidden;
   position: relative;
   z-index: -1;
-  left: calc((((80vw - 25px) / 20) * -1) - 1px);
+  right: 48px;
 }
 .dot-info span {
   visibility: visible;
@@ -592,6 +616,7 @@ section {
 .dot-info span.year {
   bottom: -30px;
   right: -0.2vw;
+  cursor: pointer;
 }
 .dot-info span.label {
   top: -56px;
@@ -599,6 +624,7 @@ section {
   transform: rotateZ(-45deg);
   width: 70px;
   text-indent: -10px;
+  cursor: pointer;
 }
 
 #timeline-descriptions-wrapper {
@@ -651,23 +677,6 @@ section {
 .timeline-input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-description="5"] {
   display: block;
 }
-  
-@media (max-width: 2250px) {
-  .timeline-input::before {
-      left: -37.5px;
-    }
-    .timeline-input::after {
-      right: -37.5px;
-    }
-
-    .dot-info {
-      left: calc((((1000px - 25px) / 20) * -1) - 1px);
-    }
-
-    #timeline-descriptions-wrapper {
-      margin-left: -37.5px;
-    }
-}
 @media (max-width: 630px) {
   .flex-parent {
     justify-content: initial;
@@ -794,6 +803,11 @@ section {
   font-size: 16px;
 }
 
+.step-desc {
+  color: gray;
+  width: 298px;
+}
+
 /* Steps dot  */
 .title::before {
   content: "";
@@ -840,7 +854,6 @@ section {
   height: 2px;
   width: 8px;
   left: -35px;
-  background: var(--check);
   border-radius: 2px;
 }
 #checklist label:after {
@@ -1065,7 +1078,7 @@ section {
 }
 
 .cal-subtitle {
-  color: #8d8d8d;
+  color: rgb(150, 150, 150);
 }
 
 .cal-title {
@@ -1091,7 +1104,7 @@ section {
 
 .event-time {
   margin-right: 20px;
-  color: #8d8d8d;
+  color: gray;
 }
 
 #map-title {
@@ -1111,6 +1124,7 @@ section {
   width: 100%;
 
   border-radius: 10px;
+  z-index: 0;
 }
 
 #map-iframe {
diff --git a/index.html b/index.html
index c74f952..03ea062 100644
--- a/index.html
+++ b/index.html
@@ -62,7 +62,7 @@
             <div id="header">
                 <img id="logo" src="img/Gilroy Hacks Logo [Summer].png" height="400" width="400" alt="logo"/>
                 <hr id="line-header">
-                <h2 id="header-subtitle-date">Aug 12 - 14</h2>
+                <h2 id="header-subtitle-date">Aug 12 - 141</h2>
                 <div id="spots-container">
                     <div class="blob green" aria-hidden="true"></div>
                     <h2 id="header-subtitle-spots">40 spots remaining</h2>
@@ -103,28 +103,28 @@
                         <span class="caption">Click on each dot for more info</span>
                         <div class="flex-parent">
                             <div class="input-flex-container">
-                                <input class="timeline-input" type="radio" name="timeline-dot" data-description="1" checked>
-                                <div class="dot-info" data-description="1">
+                                <input id="t1" class="timeline-input" type="radio" name="timeline-dot" data-description="1" checked>
+                                <div onclick="checkt('t1')" class="dot-info" data-description="1">
                                     <span class="year">8/12 4:00pm</span>
                                     <span class="label">Opening Ceremony</span>
                                 </div>
-                                <input class="timeline-input" type="radio" name="timeline-dot" data-description="2">
-                                <div class="dot-info" data-description="2">
+                                <input id="t2" class="timeline-input" type="radio" name="timeline-dot" data-description="2">
+                                <div onclick="checkt('t2')" class="dot-info" data-description="2">
                                     <span class="year">8/12 5:00pm</span>
                                     <span class="label">Hacking Begins</span>
                                 </div>
-                                <input class="timeline-input" type="radio" name="timeline-dot" data-description="3">
-                                <div class="dot-info" data-description="3">
+                                <input id="t3" class="timeline-input" type="radio" name="timeline-dot" data-description="3">
+                                <div onclick="checkt('t3')" class="dot-info" data-description="3">
                                     <span class="year">8/14 12:00pm</span>
                                     <span class="label">Hacking Ends</span>
                                 </div>
-                                <input class="timeline-input" type="radio" name="timeline-dot" data-description="4">
-                                <div class="dot-info" data-description="4">
+                                <input id="t4" class="timeline-input" type="radio" name="timeline-dot" data-description="4">
+                                <div onclick="checkt('t4')" class="dot-info" data-description="4">
                                     <span class="year">8/14 2:00pm</span>
                                     <span class="label">Project Presentations</span>
                                 </div>
-                                <input class="timeline-input" type="radio" name="timeline-dot" data-description="5">
-                                <div class="dot-info" data-description="5">
+                                <input id="t5" class="timeline-input" type="radio" name="timeline-dot" data-description="5">
+                                <div onclick="checkt('t5')" class="dot-info" data-description="5">
                                     <span class="year">8/14 3:30pm</span>
                                     <span class="label">Awards Ceremony</span>
                                 </div>
@@ -204,10 +204,12 @@
                                     <div id="checklist">
                                         <input id="01" onclick="save()" type="checkbox" name="r" value="1">
                                         <label for="01">
-                                            <p class="title">1. Sign up w/ this <a class="link" target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7" title="Signup Form">form</a></p>
+                                            <p class="title">1. Sign up w/ this <a onclick="check01()" class="link" target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7" title="Signup Form">form</a></p>
+                                        </label>
+                                        <label for="01">
+                                            <p class="step-desc">- These questions are used to gauge your experience and skills so we can pair you with others</p>
                                         </label>
                                     </div>
-                                    <p>- These questions are used to gauge your experience and skills so we can pair you with others</p>
                                 </div>
                               </div>
                               <div class="card">
@@ -215,10 +217,12 @@
                                     <div id="checklist">
                                         <input id="02" onclick="save()" type="checkbox" name="r" value="2">
                                         <label for="02">
-                                            <p class="title">2. Join the <a class="link" target="_blank" href="https://discord.gg/nkTDKMcYbr" title="Discord Invite Link">Discord</a></p>
+                                            <p class="title">2. Join the <a onclick="check02()" class="link" target="_blank" href="https://discord.gg/nkTDKMcYbr" title="Discord Invite Link">Discord</a></p>
+                                        </label>
+                                        <label for="02">
+                                            <p class="step-desc">- Please change your nickname to your First and Last name</p>
                                         </label>
                                     </div>
-                                  <p>- Please change your nickname to your First and Last name</p>
                                 </div>
                               </div>
                               <div class="card">
@@ -228,8 +232,10 @@
                                         <label for="03">
                                             <p class="title">3. Create/join a team</p>
                                         </label>
+                                        <label for="03">
+                                            <p class="step-desc">- Join teams in the Discord Server!</p>
+                                        </label>
                                     </div>
-                                  <p>- Join teams in the Discord Server!</p>
                                 </div>
                               </div>
                               <div class="card">
@@ -239,12 +245,14 @@
                                         <label for="04">
                                             <p class="title">4. Start discussing ideas for a project</p>
                                         </label>
+                                        <label for="04">
+                                            <p class="step-desc">
+                                                - Between now and the start of the hackathon is a great time to come up with project ideas & download any software you may need
+                                                <br>
+                                                - However, you can't start working on the project until the hackathon begins
+                                            </p>                                        
+                                        </label>
                                     </div>
-                                  <p>
-                                      - Between now and the start of the hackathon is a great time to come up with project ideas & download any software you may need
-                                      <br>
-                                      - However, you can't start working on the project until the hackathon begins
-                                  </p>
                                 </div>
                               </div>
                               <div class="card">
@@ -254,8 +262,10 @@
                                         <label for="05">
                                             <p class="title">5. Wait for the hackathon to start!</p>
                                         </label>
+                                        <label for="05">
+                                            <p class="step-desc">- Mark your calendars, Aug 12 - 14</p>
+                                        </label>
                                     </div>
-                                  <p>- Mark your calendars, Aug 12 - 14</p>
                                 </div>
                               </div>
                             </div>
diff --git a/js/data_checkbox.js b/js/data_checkbox.js
index e8414ed..a436251 100644
--- a/js/data_checkbox.js
+++ b/js/data_checkbox.js
@@ -12,4 +12,13 @@ function load() {
     for (i = 0; i < checkboxes.length; i++) {
         checkboxes[i].checked = localStorage.getItem(checkboxes[i].value) === 'true' ? true:false;
     }
+}
+function check01() {
+    document.getElementById('01').checked = true;
+}
+function check02() {
+    document.getElementById('02').checked = true;
+}
+function checkt(id) {
+    document.getElementById(id).checked = true;
 }
\ No newline at end of file