Added checklist animation

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 Layer with the steps border */
-  .outer {
+.outer {
-    border-left: 2px solid #333;
+  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;
-  }
 
-  .card:hover {
+/* Card container */
-    filter: brightness(120%);
+.card {
-    transition: 0.5s;
+  position: relative;
-  }
+  margin: 0 0 20px 20px;
-  
+  padding: 10px;
-  #signup-header {
+  background: rgb(49, 48, 48);
-    padding-top: 10px;
+  color: gray;
-  }
+  border-radius: 8px;
+  max-width: 400px;
+}
 
-  /* Title of the card */
+.card:hover {
-  .title {
+  filter: brightness(120%);
-    color: rgb(255, 255, 255);
+  transition: 0.5s;
-    position: relative;
+}
-    font-size: 16px;
+
+#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;
   }
-  
+  100% {
-  /* Steps dot  */
+    padding-right: 4px;
-  .card::before {
+  }
-    content: "";
+}
-    position: absolute;
+@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;
+    top: 8px;
-    background: rgb(56, 105, 56);
+    transform: rotate(-45deg);
-    border-radius: 50%;
-    left: -28px;
-    cursor: pointer;
-    border: 2px solid rgb(255, 255, 255);
   }
+}
+@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;
-  }
 }

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>
+                                    <div id="checklist">
-                                  <p>- These questions are used to gauge your experience and skills so we can pair you with others</p>
+                                        <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>

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'));