From 20b93e1aef2f54ff21a6347fc03bfa514e8cebe1 Mon Sep 17 00:00:00 2001
From: James Dinh <jamesdinh77@gmail.com>
Date: Fri, 16 Dec 2022 19:13:03 -0800
Subject: [PATCH] Added modals to schedule

---
 css/general.css |  95 +++++++++++++++++++++------
 index.html      | 168 ++++++++++++++++++++++++++++++++++++++++++++----
 js/general.js   |  83 ++++++++++++++++++++++++
 3 files changed, 312 insertions(+), 34 deletions(-)

diff --git a/css/general.css b/css/general.css
index 2a492ba..f7f5732 100644
--- a/css/general.css
+++ b/css/general.css
@@ -694,25 +694,37 @@ nav ul li {
   }
 }
 
+@keyframes modal-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 @media (prefers-reduced-motion: no-preference) {
   .slide-animation {
     animation: slidein-side ease 1s;
   }
-}
-@media (prefers-reduced-motion: no-preference) {
   .slide-animation-prize-2 {
     animation: slidein-prize-2 ease 3s;
   }
-}
-@media (prefers-reduced-motion: no-preference) {
   .slide-animation-prize-1 {
     animation: slidein-prize-1 ease 2s;
   }
-}
-@media (prefers-reduced-motion: no-preference) {
   .slide-animation-prize-3 {
     animation: slidein-prize-3 ease 3s;
   }
+  .slide-animation-card-img {
+    animation: card-img-pullout ease 2s;
+  }
+  .slide-animation-card-desc {
+    animation: card-desc-pullout ease 2s;
+  }
+  .modal-animation {
+    animation: modal-fade-in ease 0.5s;
+  }
 }
 
 /* Main Section */
@@ -1629,6 +1641,57 @@ section {
   grid-template-areas: "time800 stage stage stage stage" "time900 stage stage stage stage" "time1000 stage stage stage stage" "time1100 stage stage stage stage" "time1200 stage stage stage stage" "time1300 stage stage stage stage" "time1400 stage stage stage stage" "time1500 stage stage stage stage" "time1600 stage stage stage stage" "time1700 stage stage stage stage" "time1800 stage stage stage stage" "time1900 stage stage stage stage" "time2000 stage stage stage stage" "time2100 stage stage stage stage";
 }
 
+.modal {
+	border: 1px solid #eee;
+  background-color: #23262a;
+	width: 500px;
+	position: fixed;
+  margin: auto;
+	top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+	max-width: 100%;
+  display: none;
+  text-align: left;
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+.modal-header {
+  background-color: rgb(147, 29, 141);
+  padding: 5px 10px;
+}
+
+.modal-desc {
+  padding: 8px 10px 15px;
+}
+
+.button-close-modal {
+	display: block;
+  float: right;
+  color: white;
+  background-color: unset;
+  border: none;
+  cursor: pointer;
+  margin: 5px 10px 0 0;
+}
+
+#modal-overlay {
+  width: 100%;
+  height: 100%;
+  display: none;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, .5);
+  opacity: 0;
+  transition: opacity .2s ease;
+}
+
 /**
  * Time
  */
@@ -1810,19 +1873,19 @@ section {
   font-size: 16px;
 }
 
-.event.logistics {
+.logistics {
   background-color: rgb(147, 29, 141);
 }
-.event.hacking {
+.hacking {
   background-color: rgb(53, 53, 199);
 }
-.event.food {
+.food {
   background-color: #03833b;
 }
-.event.workshop {
+.workshop {
   background-color: rgb(109, 40, 194);
 }
-.event.game {
+.game {
   background-color: rgb(105, 94, 139);
 }
 
@@ -2536,16 +2599,6 @@ section {
     transform: translateX(0px);
   }
 }
-@media (prefers-reduced-motion: no-preference) {
-  .slide-animation-card-img {
-    animation: card-img-pullout ease 2s;
-  }
-}
-@media (prefers-reduced-motion: no-preference) {
-  .slide-animation-card-desc {
-    animation: card-desc-pullout ease 2s;
-  }
-}
 
 .team-entry:hover {
   transform: scale(1.01);
diff --git a/index.html b/index.html
index c3c75d9..eb8e578 100644
--- a/index.html
+++ b/index.html
@@ -26,8 +26,8 @@
     <meta name="keywords" content="Gilroy Hacks, GilroyHacks, Gilroy, hackathon, Bay Area, GECA, Dr. TJ Owens Gilroy Early College Academy">
     
     <!-- JavaScript Refs -->
-    <script defer src="js/leaflet.js"></script>
-    <script defer src="js/map.js"></script>
+    <!-- <script defer src="js/leaflet.js"></script>
+    <script defer src="js/map.js"></script> -->
     <script defer src="js/general.js"></script>
     <script src="js/apexcharts.js"></script>
     <script src="js/jquery-3.6.0.min.js"></script>
@@ -413,16 +413,16 @@
                         <!-- EVENTS -->
                         <div class="event start-800 end-800 length-4 empty"></div>
                         <div class="event start-900 end-900 length-4 empty"></div>
-                        <div class="event logistics start-1000 end-1000 length-1">Check In<span>10 - 10:15am</span></div>
-                        <div class="event logistics start-1000 end-1000 length-2">Opening Ceremony<span>10:15 - 11am</span></div>
-                        <div class="event hacking start-1000 end-1000 length-1 small">Hacking starts<span>Start 11am</span></div>
+                        <div class="event logistics start-1000 end-1000 length-1" onclick="showModal('check-in')">Check In<span>10 - 10:15am</span></div>
+                        <div class="event logistics start-1000 end-1000 length-2" onclick="showModal('opening-ceremony')">Opening Ceremony<span>10:15 - 11am</span></div>
+                        <div class="event hacking start-1000 end-1000 length-1 small" onclick="showModal('hacking-starts')">Hacking starts<span>Start 11am</span></div>
                         <div class="event start-1100 end-1100 length-4 empty"></div>
-                        <div class="event food start-1200 end-1200 length-4">Lunch<span>12 - 1pm</span></div>
-                        <div class="event workshop start-1300 end-1300 length-4">Web Dev Workshop<span>1 - 2pm</span></div>
+                        <div class="event food start-1200 end-1200 length-4" onclick="showModal('lunch')">Lunch<span>12 - 1pm</span></div>
+                        <div class="event workshop start-1300 end-1300 length-4" onclick="showModal('workshop1')">Web Dev Workshop<span>1 - 2pm</span></div>
                         <div class="event start-1400 end-1400 length-4 empty"></div>
-                        <div class="event workshop start-1500 end-1500 length-4">[REDACTED] Workshop<span>3 - 4pm</span></div>
+                        <div class="event workshop start-1500 end-1500 length-4" onclick="showModal('workshop2')">[REDACTED] Workshop<span>3 - 4pm</span></div>
                         <div class="event start-1600 end-1600 length-4 empty"></div>
-                        <div class="event game start-1700 end-1700 length-4">Kahoot (win a cool prize!)<span>Start 5pm</span></div>
+                        <div class="event game start-1700 end-1700 length-4" onclick="showModal('activity1')">Kahoot (win a cool prize!)<span>Start 5pm</span></div>
                         <div class="event start-1800 end-1800 length-4 empty"></div>
                         <div class="event start-1900 end-1900 length-4 empty"></div>
                         <div class="event start-2000 end-2000 length-4 empty"></div>
@@ -455,10 +455,10 @@
                         <div class="event start-1100 end-1100 length-4 empty"></div>
                         <div class="event start-1200 end-1200 length-4 empty"></div>
                         <div class="event start-1300 end-1300 length-4 empty"></div>
-                        <div class="event hacking start-1400 end-1400 length-1 small">Hacking ends<span>Deadline: 2pm</span></div>
-                        <div class="event logistics start-1400 end-1500 length-3">Project Presentations<span>2:30 - 4pm</span></div>
-                        <div class="event start-1600 end-1600 length-2">Judging<span>4 - 4:30pm</span></div>
-                        <div class="event start-1600 end-1600 length-2">Awards Ceremony<span>4:30 - 5pm</span></div>
+                        <div class="event hacking start-1400 end-1400 length-1 small" onclick="showModal('hacking-ends')">Hacking ends<span>Deadline: 2pm</span></div>
+                        <div class="event logistics start-1400 end-1500 length-3" onclick="showModal('project-presentations')">Project Presentations<span>2:30 - 4pm</span></div>
+                        <div class="event start-1600 end-1600 length-2" onclick="showModal('judging')">Judging<span>4 - 4:30pm</span></div>
+                        <div class="event start-1600 end-1600 length-2" onclick="showModal('awards-ceremony')">Awards Ceremony<span>4:30 - 5pm</span></div>
                         <div class="event start-1700 end-1700 length-4 empty"></div>
                         <div class="event start-1800 end-1800 length-4 empty"></div>
                         <div class="event start-1900 end-1900 length-4 empty"></div>
@@ -467,6 +467,148 @@
                     </div>
                 </div>
             </div>
+            <div id="modal-overlay">
+                <div class="modal" id="check-in">
+                    <button class="button-close-modal">x</button>
+                    <div class="modal-header logistics">
+                        <h2>Check In</h2>
+                    </div>
+                    <div class="modal-desc">
+                        <h3><span class="emphasis-text">Time</span>: 10 - 10:15am</h3>
+                        <h3><span class="emphasis-text">Location</span>: Community Room (2nd Floor)</h3><br>
+                        <p>Try to arrive by 10:15am so we can get you your lanyard, merch, and table!</p>
+                    </div>
+                </div>
+                <div class="modal" id="opening-ceremony">
+                    <button class="button-close-modal">x</button>
+                    <div class="modal-header logistics">
+                        <h2>Opening Ceremony</h2>
+                    </div>
+                    <div class="modal-desc">
+                        <h3><span class="emphasis-text">Time</span>: 10:15 - 11am</h3>
+                        <h3><span class="emphasis-text">Location</span>: Community Room (2nd Floor)</h3><br>
+                        <p class="timeline-description">The official start of the hackathon where we deliver the opening presentation along with the finalized teams, prompts, rules, and timeline.</p>
+                        <ul class="timeline-description-list">
+                            <li>Fully in-person event held in the <u>Community Room</u> at the Gilroy Library</li>
+                            <li><span class="important-text">=IMPORTANT=</span> DO NOT START CODING during this period</li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="modal" id="hacking-starts">
+                    <button class="button-close-modal">x</button>
+                    <div class="modal-header hacking">
+                        <h2>Hacking starts</h2>
+                    </div>
+                    <div class="modal-desc">
+                        <h3><span class="emphasis-text">Time</span>: Starts at 11am</h3><br>
+                        <p class="timeline-description">Now's your time to shine! Start working with your team to build your project. No strings attached!</p>
+                            <ul class="timeline-description-list">
+                                <li><span class="important-text">=IMPORTANT=</span> Your project must follow one of the given prompts; otherwise, your team may lose a lot of points for unrelated topic deductions</li>
+                                <li><u>In-person</u> - coding shall be done IN-PERSON (though, you may work on your projects at home as well)</li>
+                                <li>Remember, you only have 28 hours to complete your project... Use your time wisely</li>
+                            </ul>
+                            <div class="timeline-links">
+                                <a target="_blank" href="https://docs.google.com/document/d/1g0NyLcNGcteaXelcNRLpGSzd0l6Mky78ohbBQgQTDQY/edit?usp=sharing"><div class="timeline-button">View the Rubric</div></a>
+                                <a target="_blank" href="https://docs.google.com/document/d/1orakhyHzQOzGaL6r1CCQzZAWt8U1GTdaC9wcrvCiu5w/edit"><div class="timeline-button">Prompts</div></a>
+                            </div>
+                    </div>
+                </div>
+                <div class="modal" id="lunch">
+                    <button class="button-close-modal">x</button>
+                    <div class="modal-header food">
+                        <h2>Lunch</h2>
+                    </div>
+                    <div class="modal-desc">
+                        <h3><span class="emphasis-text">Time</span>: 12 - 1pm</h3>
+                        <h3><span class="emphasis-text">Location</span>: Community Room (2nd Floor)</h3><br>
+                        <p class="timeline-description">Food options TBA!</p>
+                    </div>
+                </div>
+                <div class="modal" id="workshop1">
+                    <button class="button-close-modal">x</button>
+                    <div class="modal-header workshop">
+                        <h2>Web Dev Workshop</h2>
+                    </div>
+                    <div class="modal-desc">
+                        <h3><span class="emphasis-text">Time</span>: 1 - 2pm</h3>
+                        <h3><span class="emphasis-text">Location</span>: Community Room (2nd Floor)</h3><br>
+                        <p class="timeline-description">More details coming!</p>
+                    </div>
+                </div>
+                <div class="modal" id="workshop2">
+                    <button class="button-close-modal">x</button>
+                    <div class="modal-header workshop">
+                        <h2>[REDACTED] Workshop</h2>
+                    </div>
+                    <div class="modal-desc">
+                        <h3><span class="emphasis-text">Time</span>: 3 - 4pm</h3>
+                        <h3><span class="emphasis-text">Location</span>: Community Room (2nd Floor)</h3><br>
+                        <p class="timeline-description">Hmm what's this? A secret workshop?</p>
+                    </div>
+                </div>
+                <div class="modal" id="activity1">
+                    <button class="button-close-modal">x</button>
+                    <div class="modal-header game">
+                        <h2>Kahoot</h2>
+                    </div>
+                    <div class="modal-desc">
+                        <h3><span class="emphasis-text">Time</span>: Starts at 5pm</h3>
+                        <h3><span class="emphasis-text">Location</span>: Community Room (2nd Floor)</h3><br>
+                        <p class="timeline-description">More details coming!</p>
+                    </div>
+                </div>
+                <div class="modal" id="hacking-ends">
+                    <button class="button-close-modal">x</button>
+                    <div class="modal-header hacking">
+                        <h2>Hacking ends</h2>
+                    </div>
+                    <div class="modal-desc">
+                        <h3><span class="emphasis-text">Time</span>: DEADLINE is at <u>2pm</u></h3><br>
+                        <p class="timeline-description">STOP coding! Your 28 hours of intense stress and turmoil are finally up! We hope you learned some valuable skills and made some new friends along the way.</p>
+                            <ul class="timeline-description-list">
+                                <li><span class="important-text">=IMPORTANT=</span> Make sure you turn in your project BEFORE the deadline at 2:00pm. You can find the submission form on the Discord server or <a class="link tooltip" id="submit-tooltip" href="https://forms.gle/bpoXvyjP2TcsrELX8" target="_blank">Submit Here</a></li>
+                                <li>From now until Project Presentations (2:30pm), your team will have around 30 mins to prepare for your presentation. Get back to work!</li>
+                            </ul>
+                            <div class="timeline-links">
+                                <a target="_blank" href="https://docs.google.com/document/d/1g0NyLcNGcteaXelcNRLpGSzd0l6Mky78ohbBQgQTDQY/edit?usp=sharing"><div class="timeline-button">View the Rubric</div></a>
+                                <a target="_blank" href="https://docs.google.com/document/d/1orakhyHzQOzGaL6r1CCQzZAWt8U1GTdaC9wcrvCiu5w/edit"><div class="timeline-button">Prompts</div></a>
+                            </div>
+                    </div>
+                </div>
+                <div class="modal" id="project-presentations">
+                    <button class="button-close-modal">x</button>
+                    <div class="modal-header logistics">
+                        <h2>Project Presentations</h2>
+                    </div>
+                    <div class="modal-desc">
+                        <h3><span class="emphasis-text">Time</span>: 2:30 - 4pm</h3>
+                        <h3><span class="emphasis-text">Location</span>: Community Room (2nd Floor)</h3><br>
+                        <p>More details coming!</p>
+                    </div>
+                </div>
+                <div class="modal" id="judging">
+                    <button class="button-close-modal">x</button>
+                    <div class="modal-header logistics">
+                        <h2>Judging</h2>
+                    </div>
+                    <div class="modal-desc">
+                        <h3><span class="emphasis-text">Time</span>: 4 - 4:30pm</h3>
+                        <h3><span class="emphasis-text">Location</span>: Community Room (2nd Floor)</h3><br>
+                        <p>More details coming!</p>
+                    </div>
+                </div>
+                <div class="modal" id="awards-ceremony">
+                    <button class="button-close-modal">x</button>
+                    <div class="modal-header logistics">
+                        <h2>Awards Ceremony</h2>
+                    </div>
+                    <div class="modal-desc">
+                        <h3><span class="emphasis-text">Time</span>: 4:30 - 5pm</h3>
+                        <h3><span class="emphasis-text">Location</span>: Community Room (2nd Floor)</h3><br>
+                        <p>More details coming!</p>
+                    </div>
+                </div>
+            </div>
             <!-- <div id="map-article">
                     <article id="map-div">
                         <h2 class="map-title">Location</h2>
diff --git a/js/general.js b/js/general.js
index 00cd955..230d362 100644
--- a/js/general.js
+++ b/js/general.js
@@ -291,6 +291,89 @@ function notification(id) {
     if (verify) { document.getElementById('notification').style.visibility = visible; }
 }
 
+// Disable Scroll (temporarily)
+// left: 37, up: 38, right: 39, down: 40,
+// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
+var keys = {37: 1, 38: 1, 39: 1, 40: 1};
+
+function preventDefault(e) {
+  e.preventDefault();
+}
+
+function preventDefaultForScrollKeys(e) {
+  if (keys[e.keyCode]) {
+    preventDefault(e);
+    return false;
+  }
+}
+
+// modern Chrome requires { passive: false } when adding event
+var supportsPassive = false;
+try {
+  window.addEventListener("test", null, Object.defineProperty({}, 'passive', {
+    get: function () { supportsPassive = true; } 
+  }));
+} catch(e) {}
+
+var wheelOpt = supportsPassive ? { passive: false } : false;
+var wheelEvent = 'onwheel' in document.createElement('div') ? 'wheel' : 'mousewheel';
+
+// call this to Disable
+function disableScroll() {
+  window.addEventListener('DOMMouseScroll', preventDefault, false); // older FF
+  window.addEventListener(wheelEvent, preventDefault, wheelOpt); // modern desktop
+  window.addEventListener('touchmove', preventDefault, wheelOpt); // mobile
+  window.addEventListener('keydown', preventDefaultForScrollKeys, false);
+}
+
+// call this to Enable
+function enableScroll() {
+  window.removeEventListener('DOMMouseScroll', preventDefault, false);
+  window.removeEventListener(wheelEvent, preventDefault, wheelOpt); 
+  window.removeEventListener('touchmove', preventDefault, wheelOpt);
+  window.removeEventListener('keydown', preventDefaultForScrollKeys, false);
+}
+
+var openClick = false;
+var openModal = false;
+var currentModal;
+
+function closeModal(id) {
+	document.getElementById(id).style.display = "none";
+  document.getElementById("modal-overlay").style.display = "none";
+  enableScroll();
+  openModal = false;
+}
+
+function showModal(id) {
+	document.getElementById(id).style.display = "block";
+  document.getElementById("modal-overlay").style.display = "block";
+  document.getElementById("modal-overlay").style.opacity = 1;
+  document.getElementById("modal-overlay").classList.add("modal-animation");
+  disableScroll();
+  openClick = true;
+  openModal = true;
+  currentModal = id;
+}
+
+
+document.addEventListener(
+  "click",
+  function (event) {
+    // If user either clicks X button OR clicks outside the modal window, then close modal by calling closeModal()
+    if (!openClick && openModal == true) {
+      if (
+        event.target.matches(".button-close-modal") ||
+        !event.target.closest(currentModal)
+      ) {
+        closeModal(currentModal);
+      }
+    }
+    openClick = false;
+  },
+  false
+); 
+
 var options = {
   series: [{
     name: 'Idea',