wellfedbison/gilroyhacks.com
wellfedbison/gilroyhacks.com
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added modals to schedule

Browse Source
This commit is contained in:
James Dinh 2022-12-16 19:13:03 -08:00
parent 6360b55d74
commit 20b93e1aef
3 changed files with 312 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
css/general.css
View File

@ -694,25 +694,37 @@ nav ul li {
} }
} }
@keyframes modal-fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
.slide-animation { .slide-animation {
animation: slidein-side ease 1s; animation: slidein-side ease 1s;
} }
}
@media (prefers-reduced-motion: no-preference) {
.slide-animation-prize-2 { .slide-animation-prize-2 {
animation: slidein-prize-2 ease 3s; animation: slidein-prize-2 ease 3s;
} }
}
@media (prefers-reduced-motion: no-preference) {
.slide-animation-prize-1 { .slide-animation-prize-1 {
animation: slidein-prize-1 ease 2s; animation: slidein-prize-1 ease 2s;
} }
}
@media (prefers-reduced-motion: no-preference) {
.slide-animation-prize-3 { .slide-animation-prize-3 {
animation: slidein-prize-3 ease 3s; 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 */ /* 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"; 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 * Time
*/ */
@ -1810,19 +1873,19 @@ section {
font-size: 16px; font-size: 16px;
} }
.event.logistics { .logistics {
background-color: rgb(147, 29, 141); background-color: rgb(147, 29, 141);
} }
.event.hacking { .hacking {
background-color: rgb(53, 53, 199); background-color: rgb(53, 53, 199);
} }
.event.food { .food {
background-color: #03833b; background-color: #03833b;
} }
.event.workshop { .workshop {
background-color: rgb(109, 40, 194); background-color: rgb(109, 40, 194);
} }
.event.game { .game {
background-color: rgb(105, 94, 139); background-color: rgb(105, 94, 139);
} }
@ -2536,16 +2599,6 @@ section {
transform: translateX(0px); 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 { .team-entry:hover {
transform: scale(1.01); transform: scale(1.01);

168
index.html
View File

@ -26,8 +26,8 @@
<meta name="keywords" content="Gilroy Hacks, GilroyHacks, Gilroy, hackathon, Bay Area, GECA, Dr. TJ Owens Gilroy Early College Academy"> <meta name="keywords" content="Gilroy Hacks, GilroyHacks, Gilroy, hackathon, Bay Area, GECA, Dr. TJ Owens Gilroy Early College Academy">
<!-- JavaScript Refs --> <!-- JavaScript Refs -->
<script defer src="js/leaflet.js"></script> <!-- <script defer src="js/leaflet.js"></script>
<script defer src="js/map.js"></script> <script defer src="js/map.js"></script> -->
<script defer src="js/general.js"></script> <script defer src="js/general.js"></script>
<script src="js/apexcharts.js"></script> <script src="js/apexcharts.js"></script>
<script src="js/jquery-3.6.0.min.js"></script> <script src="js/jquery-3.6.0.min.js"></script>
@ -413,16 +413,16 @@
<!-- EVENTS --> <!-- EVENTS -->
<div class="event start-800 end-800 length-4 empty"></div> <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 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-1" onclick="showModal('check-in')">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 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">Hacking starts<span>Start 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 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 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">Web Dev Workshop<span>1 - 2pm</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 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 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-1800 end-1800 length-4 empty"></div>
<div class="event start-1900 end-1900 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> <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-1100 end-1100 length-4 empty"></div>
<div class="event start-1200 end-1200 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 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 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">Project Presentations<span>2:30 - 4pm</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">Judging<span>4 - 4:30pm</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">Awards Ceremony<span>4:30 - 5pm</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-1700 end-1700 length-4 empty"></div>
<div class="event start-1800 end-1800 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> <div class="event start-1900 end-1900 length-4 empty"></div>
@ -467,6 +467,148 @@
</div> </div>
</div> </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"> <!-- <div id="map-article">
<article id="map-div"> <article id="map-div">
<h2 class="map-title">Location</h2> <h2 class="map-title">Location</h2>

83
js/general.js
View File

@ -291,6 +291,89 @@ function notification(id) {
if (verify) { document.getElementById('notification').style.visibility = visible; } 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 = { var options = {
series: [{ series: [{
name: 'Idea', name: 'Idea',