From 53ab455f456831559cb304ac70e7a574d6e233d2 Mon Sep 17 00:00:00 2001
From: James Dinh <jamesdinh77@gmail.com>
Date: Fri, 3 Jun 2022 15:09:59 -0700
Subject: [PATCH] Added checklist animation

---
 .DS_Store            | Bin 6148 -> 0 bytes
 css/general.css      | 373 +++++++++++++++++++++++++++----------------
 img/.DS_Store        | Bin 6148 -> 0 bytes
 index.html           |  50 ++++--
 js/scroll_element.js |   1 +
 5 files changed, 273 insertions(+), 151 deletions(-)
 delete mode 100644 .DS_Store
 delete mode 100644 img/.DS_Store

diff --git a/.DS_Store b/.DS_Store
deleted file mode 100644
index 02a0be4a91bfa3e37b8c2701a9a72f8c600ce055..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6148
zcmeHKL2uJA6n<_4OE)2U0I>^FB(Brw7$6Xr(2WCEg5UtCBui<-QhRDr%2ZX#b?{?2
z@=y3LoZx%5hnAM9H-t7n$^M?7-{<IkO6-`3M0b+z5VeWOM`QHX(f!4Ep4*Z&Y=n7&
z*H8yZt`dxRIcH7*r@;TN0DrqpI-r7z=lR+1SNz1x_AhO^2#-FHB1vUEkDi{FmrRQz
zyB~Z{j`FN1JDne*(e$odUGvxc4gXy<RMV)8%Sq9V$8UJ_QmH&S_2cAK)}Qv;H};e)
z<4pF)nvkV^q`ZBd$y80dY9iA@b0ah1xBOPGeQP$`eY6$a-+3_K3TBV*b>QzloX=bS
z%{zCWyyzX~BdJbwVI;75X}f0e6u!XuQ}(B5EOR9Xh;jaP8c;?#jUmc04Jn3*hmdg_
zsAyCdsllwXVy<9c4Cz)Bxgcm0a*k+F7mmIy2)B+bNh$T|Go&6;2~J+;h}#RC27O$5
zyT2~vV0h`wzV`mcrK{W(>=bYctWtpYhX9Q+v{)I`TL(IQ1ps;oYlE+U{(%7pfT6|8
zAR;hfs6ay%_KG3w-9Z>S=0lrb88mbf`pH<wK3Uisim+D?5$JRhp+VO>1)KtP1)65q
z=JWsA`S<@i$&H)>PJs)hfbjOC{VqzfXX{dNeAWhN@6p&euQI49=<IQ<9X^UT(X?SM
YU<VjltPCOob3X!F2G=<S{;2}L0eI=x!T<mO

diff --git a/css/general.css b/css/general.css
index 5fb3824..bc20fda 100644
--- a/css/general.css
+++ b/css/general.css
@@ -469,7 +469,7 @@ section {
   z-index: 0;
 }
 
-input {
+.timeline-input {
   width: 22px;
   height: 22px;
   background-color: #2C3E50;
@@ -479,10 +479,10 @@ input {
   appearance: none;
   cursor: pointer;
 }
-input:focus {
+.timeline-input:focus {
   outline: none;
 }
-input::before, input::after {
+.timeline-input::before, .timeline-input::after {
   content: "";
   display: block;
   position: absolute;
@@ -494,25 +494,25 @@ input::before, input::after {
   /* width: 6vw; */
   height: 5px;
 }
-input::before {
+.timeline-input::before {
   right: calc(2vw);
 }
-input::after {
+.timeline-input::after {
   left: calc(1vw);
 }
-input:checked {
+.timeline-input:checked {
   background-color: #2C3E50;
 }
-input:checked::before {
+.timeline-input:checked::before {
   background-color: #2C3E50;
 }
-input:checked::after {
+.timeline-input:checked::after {
   background-color: #AEB6BF;
 }
-input:checked ~ input, input:checked ~ input::before, input:checked ~ input::after {
+.timeline-input:checked ~ .timeline-input, .timeline-input:checked ~ .timeline-input::before, .timeline-input:checked ~ .timeline-input::after {
   background-color: #AEB6BF;
 }
-input:checked + .dot-info span {
+.timeline-input:checked + .dot-info span {
   font-size: 13px;
   color: rgb(243, 174, 252);
   font-weight: bold;
@@ -577,31 +577,31 @@ input:checked + .dot-info span {
   color: rgb(255, 126, 126);
 }
 
-input[data-description="1"]:checked ~ #timeline-descriptions-wrapper div[data-description="1"] {
+.timeline-input[data-description="1"]:checked ~ #timeline-descriptions-wrapper div[data-description="1"] {
   display: block;
 }
 
-input[data-description="2"]:checked ~ #timeline-descriptions-wrapper div[data-description="2"] {
+.timeline-input[data-description="2"]:checked ~ #timeline-descriptions-wrapper div[data-description="2"] {
   display: block;
 }
 
-input[data-description="3"]:checked ~ #timeline-descriptions-wrapper div[data-description="3"] {
+.timeline-input[data-description="3"]:checked ~ #timeline-descriptions-wrapper div[data-description="3"] {
   display: block;
 }
 
-input[data-description="4"]:checked ~ #timeline-descriptions-wrapper div[data-description="4"] {
+.timeline-input[data-description="4"]:checked ~ #timeline-descriptions-wrapper div[data-description="4"] {
   display: block;
 }
 
-input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-description="5"] {
+.timeline-input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-description="5"] {
   display: block;
 }
   
 @media (max-width: 2250px) {
-    input::before {
+  .timeline-input::before {
       left: -37.5px;
     }
-    input::after {
+    .timeline-input::after {
       right: -37.5px;
     }
 
@@ -627,7 +627,7 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
     margin-left: 0;
   }
 
-  input, .dot-info {
+  .timeline-input, .dot-info {
     width: 60px;
     height: 60px;
     margin: 0 10px 50px;
@@ -637,16 +637,16 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
     background-color: transparent !important;
     z-index: 1;
   }
-  input::before, input::after {
+  .timeline-input::before, .timeline-input::after {
     content: none;
   }
-  input:checked + .dot-info {
+  .timeline-input:checked + .dot-info {
     background-color: #2C3E50;
   }
-  input:checked + .dot-info span.year {
+  .timeline-input:checked + .dot-info span.year {
     font-size: 14px;
   }
-  input:checked + .dot-info span.label {
+  .timeline-input:checked + .dot-info span.label {
     font-size: 12px;
   }
 
@@ -710,50 +710,223 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
   text-align: left;
 }
 
-  /* Outer Layer with the steps border */
-  .outer {
-    border-left: 2px solid #333;
-  }
-  
-  /* Card container */
-  .card {
-    position: relative;
-    margin: 0 0 20px 20px;
-    padding: 10px;
-    background: rgb(49, 48, 48);
-    color: gray;
-    border-radius: 8px;
-    max-width: 400px;
-  }
+/* Outer Layer with the steps border */
+.outer {
+  border-left: 2px solid #333;
+}
 
-  .card:hover {
-    filter: brightness(120%);
-    transition: 0.5s;
-  }
-  
-  #signup-header {
-    padding-top: 10px;
-  }
+/* Card container */
+.card {
+  position: relative;
+  margin: 0 0 20px 20px;
+  padding: 10px;
+  background: rgb(49, 48, 48);
+  color: gray;
+  border-radius: 8px;
+  max-width: 400px;
+}
 
-  /* Title of the card */
-  .title {
-    color: rgb(255, 255, 255);
-    position: relative;
-    font-size: 16px;
+.card:hover {
+  filter: brightness(120%);
+  transition: 0.5s;
+}
+
+#signup-header {
+  padding-top: 10px;
+}
+
+/* Title of the card */
+.title {
+  color: rgb(255, 255, 255);
+  position: relative;
+  font-size: 16px;
+}
+
+/* Steps dot  */
+.title::before {
+  content: "";
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: rgb(49, 48, 48);
+  border-radius: 50%;
+  margin-top: 3px;
+  left: -38px;
+  border: 2px solid rgb(255, 255, 255);
+}
+
+.caption {
+  float: middle;
+}
+
+/* Signup Checklist */
+#checklist {
+  --text: #414856;
+  --check: #00ff37;
+  --disabled: #C3C8DE;
+  --border-radius: 10px;
+  background: var(--background);
+  position: relative;
+  display: grid;
+  grid-template-columns: 0px auto;
+  align-items: center;
+}
+#checklist label {
+  color: var(--text);
+  position: relative;
+  cursor: pointer;
+  display: grid;
+  align-items: center;
+  width: fit-content;
+  transition: color 0.3s ease;
+}
+#checklist label::before, #checklist label::after {
+  content: "";
+  position: absolute;
+}
+#checklist label::before {
+  height: 2px;
+  width: 8px;
+  left: -35px;
+  background: var(--check);
+  border-radius: 2px;
+}
+#checklist label:after {
+  height: 4px;
+  width: 4px;
+  top: 8px;
+  left: -35px;
+  border-radius: 50%;
+}
+#checklist input[type=checkbox] {
+  appearance: none;
+  position: relative;
+  height: 15px;
+  width: 15px;
+  outline: none;
+  border: 0;
+  margin: 0 15px 0 0;
+  cursor: pointer;
+  background: var(--background);
+  display: grid;
+  align-items: center;
+}
+#checklist input[type=checkbox]::before, #checklist input[type=checkbox]::after {
+  content: "";
+  position: absolute;
+  height: 2px;
+  top: auto;
+  background: var(--check);
+  border-radius: 2px;
+}
+#checklist input[type=checkbox]::before {
+  width: 0px;
+  transform-origin: right bottom;
+  z-index: 2;
+}
+#checklist input[type=checkbox]::after {
+  width: 0px;
+  transform-origin: left bottom;
+  z-index: 2;
+}
+#checklist input[type=checkbox]:checked::before {
+  animation: check-01 0.4s ease forwards;
+  left: -36px;
+}
+#checklist input[type=checkbox]:checked::after {
+  animation: check-02 0.4s ease forwards;
+  left: -30px;
+}
+#checklist input[type=checkbox]:checked + label {
+  color: var(--disabled);
+    animation: move 0.3s ease 0.1s forwards;
+}
+#checklist input[type=checkbox]:checked + label::before {
+  background: var(--disabled);
+    animation: slice 0.4s ease forwards;
+}
+#checklist input[type=checkbox]:checked + label::after {
+  animation: firework 0.5s ease forwards 0.1s;
+  left: -33px;
+}
+
+@keyframes move {
+  50% {
+    padding-left: 8px;
+    padding-right: 0px;
   }
-  
-  /* Steps dot  */
-  .card::before {
-    content: "";
-    position: absolute;
+  100% {
+    padding-right: 4px;
+  }
+}
+@keyframes slice {
+  60% {
+    width: 100%;
+    left: 4px;
+  }
+  100% {
+    width: 100%;
+    left: -2px;
+    padding-left: 0;
+  }
+}
+@keyframes check-01 {
+  0% {
+    width: 4px;
+    top: auto;
+    transform: rotate(0);
+  }
+  50% {
+    width: 0px;
+    top: auto;
+    transform: rotate(0);
+  }
+  51% {
+    width: 0px;
+    top: 8px;
+    transform: rotate(45deg);
+  }
+  100% {
+    width: 5px;
+    top: 8px;
+    transform: rotate(45deg);
+  }
+}
+@keyframes check-02 {
+  0% {
+    width: 4px;
+    top: auto;
+    transform: rotate(0);
+  }
+  50% {
+    width: 0px;
+    top: auto;
+    transform: rotate(0);
+  }
+  51% {
+    width: 0px;
+    top: 8px;
+    transform: rotate(-45deg);
+  }
+  100% {
     width: 10px;
-    height: 10px;
-    background: rgb(56, 105, 56);
-    border-radius: 50%;
-    left: -28px;
-    cursor: pointer;
-    border: 2px solid rgb(255, 255, 255);
+    top: 8px;
+    transform: rotate(-45deg);
   }
+}
+@keyframes firework {
+  0% {
+    opacity: 1;
+    box-shadow: 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0;
+  }
+  30% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    box-shadow: 0 -15px 0 0px #4f29f0, 14px -8px 0 0px #4f29f0, 14px 8px 0 0px #4f29f0, 0 15px 0 0px #4f29f0, -14px 8px 0 0px #4f29f0, -14px -8px 0 0px #4f29f0;
+  }
+}
 
 #rules-description {
   margin: 10px 20px;
@@ -1141,82 +1314,4 @@ footer li {
 footer a {
     color:rgb(108, 176, 231);
     font-size: 16px;
-}
-
-@keyframes move {
-  50% {
-    padding-left: 8px;
-    padding-right: 0px;
-  }
-  100% {
-    padding-right: 4px;
-  }
-}
-@keyframes slice {
-  60% {
-    width: 100%;
-    left: 4px;
-  }
-  100% {
-    width: 100%;
-    left: -2px;
-    padding-left: 0;
-  }
-}
-@keyframes check-01 {
-  0% {
-    width: 4px;
-    top: auto;
-    transform: rotate(0);
-  }
-  50% {
-    width: 0px;
-    top: auto;
-    transform: rotate(0);
-  }
-  51% {
-    width: 0px;
-    top: 8px;
-    transform: rotate(45deg);
-  }
-  100% {
-    width: 5px;
-    top: 8px;
-    transform: rotate(45deg);
-  }
-}
-@keyframes check-02 {
-  0% {
-    width: 4px;
-    top: auto;
-    transform: rotate(0);
-  }
-  50% {
-    width: 0px;
-    top: auto;
-    transform: rotate(0);
-  }
-  51% {
-    width: 0px;
-    top: 8px;
-    transform: rotate(-45deg);
-  }
-  100% {
-    width: 10px;
-    top: 8px;
-    transform: rotate(-45deg);
-  }
-}
-@keyframes firework {
-  0% {
-    opacity: 1;
-    box-shadow: 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0;
-  }
-  30% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-    box-shadow: 0 -15px 0 0px #4f29f0, 14px -8px 0 0px #4f29f0, 14px 8px 0 0px #4f29f0, 0 15px 0 0px #4f29f0, -14px 8px 0 0px #4f29f0, -14px -8px 0 0px #4f29f0;
-  }
 }
\ No newline at end of file
diff --git a/img/.DS_Store b/img/.DS_Store
deleted file mode 100644
index 908f667f67631777c84740cb9cd7ffc641d8a249..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6148
zcmeHKJxc>Y5Phpx1Z`4Uh-_&k_z#W{zd*1^VIhL~A_Pw(CPD1(pX-~QDU30&7KTJ-
zj@h@F-TBye+-?>?Xw3(wKodZNDp>5X`9Wk{bV+v1B7-5tIKc~^F}kWI{iWG%a0Z-#
zO=Cbm?jE{$#S~w@-(EH8vDoIvH=*qi7Z{_W#{}<)xTJR<kMxhYrfo!xxWhT^6`%Xe
zxG^*C4Kt6KWz4-sGUUcT%8cLPE+!ecll?*LIiC0onIX6C<IK9>So469BW8@=W&KmG
zMBeO>{aJRt-1mEH`Eu8h%fG~xdVj;wrhQl2P*2bz8~fW(tk>uaI0I{CK=y}76)X*F
z#k6&>Nml@3L30xJ<t`yU(XceE6*)o)>Pl4CU{{Qw?zBgnR~pue>W*NSk6@XD-B3cx
z&iFA+M<^A&bq1V)MFw{DXH(Aqv(@+iMJNB|3^)V-ih)qHJM9*iWM}Kr;^eH2)Ca1F
n%&QfX3mZF*Q%8>C18NeEMd=Vr!&;FRivJNvG<f3-td)UJ&}sS)

diff --git a/index.html b/index.html
index 46da85a..cede14c 100644
--- a/index.html
+++ b/index.html
@@ -99,27 +99,27 @@
                         <h2 id="timeline-heading">Timeline</h2>
                         <div class="flex-parent">
                             <div class="input-flex-container">
-                                <input type="radio" name="timeline-dot" data-description="1" checked>
+                                <input class="timeline-input" type="radio" name="timeline-dot" data-description="1" checked>
                                 <div class="dot-info" data-description="1">
                                     <span class="year">8/12 6:00pm</span>
                                     <span class="label">Opening Ceremony</span>
                                 </div>
-                                <input type="radio" name="timeline-dot" data-description="2">
+                                <input class="timeline-input" type="radio" name="timeline-dot" data-description="2">
                                 <div class="dot-info" data-description="2">
                                     <span class="year">8/12 6:30pm</span>
                                     <span class="label">Hacking Begins</span>
                                 </div>
-                                <input type="radio" name="timeline-dot" data-description="3">
+                                <input class="timeline-input" type="radio" name="timeline-dot" data-description="3">
                                 <div class="dot-info" data-description="3">
                                     <span class="year">8/14 12:00pm</span>
                                     <span class="label">Hacking Ends</span>
                                 </div>
-                                <input type="radio" name="timeline-dot" data-description="4">
+                                <input class="timeline-input" type="radio" name="timeline-dot" data-description="4">
                                 <div class="dot-info" data-description="4">
                                     <span class="year">8/14 2:00pm</span>
                                     <span class="label">Project Presentations</span>
                                 </div>
-                                <input type="radio" name="timeline-dot" data-description="5">
+                                <input class="timeline-input" type="radio" name="timeline-dot" data-description="5">
                                 <div class="dot-info" data-description="5">
                                     <span class="year">8/14 3:30pm</span>
                                     <span class="label">Awards Ceremony</span>
@@ -186,31 +186,51 @@
                     </div>
                 </article>
                 <article id="signup-article">
-                    <h2 id="signup-header">Signup Instructions</h2>
+                    <h2 id="signup-header">Signup Checklist</h2>
                     <div id="steps-card">
                         <div id="signup-container">
                             <div class="outer">
                               <div class="card">
                                 <div class="info">
-                                  <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>- These questions are used to gauge your experience and skills so we can pair you with others</p>
+                                    <div id="checklist">
+                                        <input id="01" 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>
+                                        </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">
                                 <div class="info">
-                                  <p class="title">2. Join the <a class="link" target="_blank" href="https://discord.gg/nkTDKMcYbr" title="Discord Invite Link">Discord</a></p>
+                                    <div id="checklist">
+                                        <input id="02" 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>
+                                        </label>
+                                    </div>
                                   <p>- Please change your nickname to your First and Last name</p>
                                 </div>
                               </div>
                               <div class="card">
                                 <div class="info">
-                                  <p class="title">3. Create/join a team</p>
+                                    <div id="checklist">
+                                        <input id="03" type="checkbox" name="r" value="3">
+                                        <label for="03">
+                                            <p class="title">3. Create/join a team</p>
+                                        </label>
+                                    </div>
                                   <p>- Join teams in the Discord Server!</p>
                                 </div>
                               </div>
                               <div class="card">
                                 <div class="info">
-                                  <p class="title">4. Start discussing ideas for a project</p>
+                                    <div id="checklist">
+                                        <input id="04" type="checkbox" name="r" value="4">
+                                        <label for="04">
+                                            <p class="title">4. Start discussing ideas for a project</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>
@@ -220,13 +240,19 @@
                               </div>
                               <div class="card">
                                 <div class="info">
-                                  <p class="title">5. Wait for the hackathon to start!</p>
+                                    <div id="checklist">
+                                        <input id="05" type="checkbox" name="r" value="5">
+                                        <label for="05">
+                                            <p class="title">5. Wait for the hackathon to start!</p>
+                                        </label>
+                                    </div>
                                   <p>- Mark your calendars, Aug 12 - 14</p>
                                 </div>
                               </div>
                             </div>
                         </div>
                     </div>
+                    <span class="caption">*click each circle to cross out that step</span>
                 </article>
             </div>
         </section>
diff --git a/js/scroll_element.js b/js/scroll_element.js
index a1e8a0d..96392eb 100644
--- a/js/scroll_element.js
+++ b/js/scroll_element.js
@@ -9,6 +9,7 @@ const observer = new IntersectionObserver(entries => {
     });
   });
   
+  observer.observe(document.querySelector('#description-heading'));
   observer.observe(document.querySelector('#event-main-box'));
   observer.observe(document.querySelector('#timeline'));
   observer.observe(document.querySelector('#signup-article'));