Compare commits
2 Commits
361e31b2bb
...
99f7c5d393
Author | SHA1 | Date | |
---|---|---|---|
|
99f7c5d393 | ||
|
0668f582be |
@ -19,7 +19,10 @@
|
||||
<link href="css/scroll_nav.css" rel="stylesheet" type="text/css" media="all">
|
||||
<link rel="icon" href="img/Gilroy-Hacks-Logo-icon-tp.ico">
|
||||
|
||||
<!-- JavaScript Refs -->
|
||||
<script src="js/jquery-3.6.0.min.js"></script>
|
||||
<script defer src="js/licenses.js"></script>
|
||||
<script defer src="js/contact.js"></script>
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: "Glacial Indifference";
|
||||
@ -179,10 +182,5 @@
|
||||
</article>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- JavaScript Refs -->
|
||||
<script src="js/scroll_nav.js"></script>
|
||||
<script src="js/scroll_element.js"></script>
|
||||
<script src="js/timer.js"></script>
|
||||
<script src="js/form.js"></script>
|
||||
</body>
|
||||
</html>
|
@ -675,6 +675,10 @@ section {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.desc-title {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.list {
|
||||
padding-left: 20px;
|
||||
}
|
||||
@ -1299,13 +1303,14 @@ section {
|
||||
}
|
||||
|
||||
#gavilan-college-logo {
|
||||
height: auto;
|
||||
height: 102px;
|
||||
width: 352px;
|
||||
}
|
||||
|
||||
#gear-club-logo {
|
||||
height: auto;
|
||||
height: 60px;
|
||||
width: 352px;
|
||||
margin-top: 50px !important;
|
||||
}
|
||||
|
||||
#map-article {
|
||||
@ -1586,7 +1591,7 @@ section {
|
||||
display: grid;
|
||||
margin: 50px auto 0;
|
||||
width: 80%;
|
||||
height: 280px;
|
||||
height: auto;
|
||||
justify-content: center;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
@ -1632,8 +1637,9 @@ section {
|
||||
position: absolute;
|
||||
color: rgb(167, 146, 234);
|
||||
font-size: 25px;
|
||||
margin-bottom: 67px;
|
||||
margin-bottom: 177px;
|
||||
line-height: 25px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.prize-title {
|
||||
@ -1644,10 +1650,12 @@ section {
|
||||
.prize-content {
|
||||
color:rgb(129, 218, 126);
|
||||
font-size: 20px;
|
||||
transform: rotate3d(0, 1, 0, 360deg);
|
||||
transition: ease 0.5s;
|
||||
}
|
||||
|
||||
.prize-subtitle {
|
||||
margin-bottom: 10px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
#prize-column {
|
||||
@ -1707,6 +1715,10 @@ section {
|
||||
color: #ffde59;
|
||||
}
|
||||
|
||||
.prize-img {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#prize-box {
|
||||
border-radius: 10px;
|
||||
border: 1px solid white;
|
||||
@ -1860,7 +1872,7 @@ section {
|
||||
}
|
||||
|
||||
.emphasis-text {
|
||||
color:rgb(51, 235, 189);
|
||||
color:rgb(51, 235, 189);
|
||||
}
|
||||
|
||||
.discord-text {
|
||||
@ -1882,6 +1894,10 @@ section {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bottom-text {
|
||||
margin: 10px 5px;
|
||||
}
|
||||
|
||||
.link {
|
||||
color:rgb(252, 188, 93);
|
||||
text-decoration: none;
|
||||
|
@ -400,7 +400,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
||||
/* Default icon URLs */
|
||||
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
|
||||
background-image: url(images/marker-icon.png);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* attribution and scale controls */
|
||||
|
BIN
img/Kunodi_speaker.png
Normal file
BIN
img/Kunodi_speaker.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 123 KiB |
BIN
img/NEHEME_drone.png
Normal file
BIN
img/NEHEME_drone.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 97 KiB |
Binary file not shown.
Before Width: | Height: | Size: 275 KiB After Width: | Height: | Size: 64 KiB |
BIN
img/pixoo_sling_bag.png
Normal file
BIN
img/pixoo_sling_bag.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 367 KiB |
44
index.html
44
index.html
@ -25,7 +25,10 @@
|
||||
<meta name="description" content="The official website for the Gilroy Hacks Hackathon. Strengthen your skills and collaborate with others to create something useful.">
|
||||
<meta name="keywords" content="Gilroy Hacks, GilroyHacks, Gilroy, hackathon, Bay Area, GECA, Dr. TJ Owens Gilroy Early College Academy">
|
||||
|
||||
<script src="js/leaflet.js"></script>
|
||||
<!-- JavaScript Refs -->
|
||||
<script defer src="js/leaflet.js"></script>
|
||||
<script defer src="js/map.js"></script>
|
||||
<script defer src="js/general.js"></script>
|
||||
<script defer data-domain="gilroyhacks.com" src="https://plausible.gilroyhacks.com/js/plausible.js"></script>
|
||||
<style>
|
||||
@font-face {
|
||||
@ -117,17 +120,25 @@
|
||||
<hr class="line">
|
||||
<div id="event-container">
|
||||
<article id="event-description">
|
||||
<h2 id="description-heading">Our Mission Statement</h2>
|
||||
<h2 id="description-heading">Our Mission & Important Info</h2>
|
||||
<div id="event-main-box">
|
||||
<div id="description-content">Gilroy Hacks is a student-led organization focused on promoting community engagement and improving STEM exposure for local middle/high school students.</div>
|
||||
<hr class="line">
|
||||
<ul class="list">
|
||||
<li>Even if you're not an expert at coding, this hackathon offers an opportunity for you to strengthen your skills and collaborate with others to create something useful. Below are important dates to keep in mind:
|
||||
<li>Even if you're not an expert at coding, this hackathon offers an opportunity for you to strengthen your skills and collaborate with others to create something useful.</li>
|
||||
<h3 class="desc-title">Main Events</h3>
|
||||
<ul style="margin-left: 25px">
|
||||
<li><span class="emphasis-text">Aug 11</span> -> Signup Period Ends</li>
|
||||
<li><span class="emphasis-text">Aug 12-14</span> -> Summer 2022 Hackathon</li>
|
||||
<li><span class="emphasis-text">Aug 12</span> -> Opening Ceremony</li>
|
||||
<li><span class="emphasis-text">Aug 13</span> -> Web Dev + Python Workshops</li>
|
||||
<li><span class="emphasis-text">Aug 14</span> -> Project Presentations</li>
|
||||
</ul>
|
||||
</li>
|
||||
<h3 class="desc-title">Details</h3>
|
||||
<ul style="margin-left: 25px">
|
||||
<li>Signups are limited to <u>middle and high school students only</u></li>
|
||||
<li>Workshops are <u>fully open to the public</u> (as space allows)</li>
|
||||
<li>All events will be held <u>in-person</u> at the Gilroy Library</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Timeline src: https://codepen.io/cjl750/pen/MXvYmg -->
|
||||
@ -338,9 +349,9 @@
|
||||
<a href="https://www.gavilan.edu/" target="_blank">
|
||||
<img id="gavilan-college-logo" src="img/gavilan_college.png" alt="Gavilan College logo">
|
||||
</a>
|
||||
<!-- <a href="https://www.gavengineering.club/" target="_blank">
|
||||
<a href="https://www.gavengineering.club/" target="_blank">
|
||||
<img id="gear-club-logo" src="img/gear_logo.png" alt="GEAR Club logo">
|
||||
</a> -->
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
@ -446,6 +457,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="bottom-text">*All events will be held in-person at the Gilroy Library</p>
|
||||
</article>
|
||||
<article id="map-div">
|
||||
<h2 class="map-title">Location</h2>
|
||||
@ -575,10 +587,11 @@
|
||||
<div class="podium-description">
|
||||
<div class="prize-desc" id="second-place">
|
||||
<div class="prize-text">
|
||||
<span class="prize-title">2nd</span><br>
|
||||
<span class="prize-content">$213</span>
|
||||
<span class="prize-title">2nd</span>
|
||||
<div class="prize-content">$213</div>
|
||||
</div>
|
||||
<img class="prize-laurel" src="img/silver-laurel.png" loading="lazy" alt="silver laurel">
|
||||
<img class="prize-img" src="img/NEHEME_drone.png" loading="lazy" alt="NEHEME Drone">
|
||||
<div class="prize-subtitle">NEHEME NH525 Foldable Drone (x4)</div>
|
||||
</div>
|
||||
<div class="podium-edge"></div>
|
||||
@ -593,6 +606,7 @@
|
||||
<span class="prize-content">$362</span>
|
||||
</div>
|
||||
<img class="prize-laurel" src="img/gold-laurel.png" loading="lazy" alt="gold laurel">
|
||||
<img class="prize-img" src="img/pixoo_sling_bag.png" loading="lazy" alt="NEHEME Drone">
|
||||
<div class="prize-subtitle">Divoom LED Display Sling Bag (x4)</div>
|
||||
</div>
|
||||
<div class="podium-edge"></div>
|
||||
@ -611,6 +625,7 @@
|
||||
<span class="prize-content">$100</span>
|
||||
</div>
|
||||
<img class="prize-laurel" src="img/bronze-laurel.png" loading="lazy" alt="bronze laurel">
|
||||
<img class="prize-img" src="img/Kunodi_speaker.png" loading="lazy" alt="NEHEME Drone">
|
||||
<div class="prize-subtitle">Kunodi Bluetooth 5.0 Portable Speaker (x4)</div>
|
||||
</div>
|
||||
<div class="podium-edge"></div>
|
||||
@ -623,7 +638,7 @@
|
||||
<ul id="prize-list">
|
||||
<li><span class="emphasis-text">1st Place</span>: Divoom LED Display Sling Bag (x4)</li>
|
||||
<li><span class="emphasis-text">2nd Place</span>: NEHEME NH525 Foldable Drone (x4)</li>
|
||||
<li><span class="emphasis-text">3rd Place</span>: Kunodi Bluetooth 5.0 Wireless Portable Speaker (x4)</li>
|
||||
<li><span class="emphasis-text">3rd Place</span>: Kunodi Bluetooth 5.0 Portable Speaker (x4)</li>
|
||||
</ul>
|
||||
<br>
|
||||
<h4><u>Terms & Conditions</u></h4>
|
||||
@ -685,7 +700,7 @@
|
||||
<div class="team-description">
|
||||
<h4 class="person-name">James Dinh</h4>
|
||||
<h5 class="person-subtitle">Lead Website Designer</h5>
|
||||
<h5 class="person-contact"><span class="discord-text">Discord</span>: wellfedbison<span class="discord-tag">#0607</span><br><a class="link" target="_blank" href="mailto:jamesdinh77@protonmail.com" title="Email">jamesdinh77@protonmail.com</a></h5>
|
||||
<h5 class="person-contact"><span class="discord-text">Discord</span>: wellfedbison<span class="discord-tag">#0607</span><br><a class="link email-replace" target="_blank" href="mailto:jamesdinh77@protonmail.com" title="Email">jamesdinh77@protonmail.com</a></h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-entry">
|
||||
@ -754,12 +769,5 @@
|
||||
</article>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- JavaScript Refs -->
|
||||
<script src="js/jquery-3.6.0.min.js"></script>
|
||||
<script src="js/scroll_nav.js"></script>
|
||||
<script src="js/scroll_element.js"></script>
|
||||
<script src="js/timer.js"></script>
|
||||
<script src="js/data_checkbox.js"></script>
|
||||
<script src="js/map.js"></script>
|
||||
</body>
|
||||
</html>
|
@ -1,54 +0,0 @@
|
||||
// Gilroy Hacks Website Source Code -> JS (https://gilroyhacks.com)
|
||||
|
||||
var i;
|
||||
var checkboxes = document.querySelectorAll('#signup-container input[type=checkbox]');
|
||||
var verify = true;
|
||||
function save() {
|
||||
for (i = 0; i < checkboxes.length; i++) {
|
||||
localStorage.setItem(checkboxes[i].value, checkboxes[i].checked);
|
||||
}
|
||||
}
|
||||
window.onload = function() {
|
||||
load();
|
||||
};
|
||||
function load() {
|
||||
for (i = 0; i < checkboxes.length; i++) {
|
||||
checkboxes[i].checked = localStorage.getItem(checkboxes[i].value) === 'true' ? true:false;
|
||||
}
|
||||
}
|
||||
function check(id) {
|
||||
document.getElementById(id).checked = true;
|
||||
}
|
||||
function uncheck(id) {
|
||||
document.getElementById(id).checked = false;
|
||||
}
|
||||
function notification(id) {
|
||||
if (localStorage.getItem(checkboxes[id].value) != true) { verify = false; }
|
||||
if (verify) { document.getElementById('notification').style.visibility = visible; }
|
||||
}
|
||||
|
||||
// function btnToggle() {
|
||||
// if (document.getElementById('#check').checked) {
|
||||
// document.getElementById('#check').checked = false;
|
||||
// }
|
||||
// else {
|
||||
// document.getElementById('#check').checked = true;
|
||||
// }
|
||||
// }
|
||||
// document.getElementById('#check').addEventListener('click', function (event) {
|
||||
// if (!document.getElementById('check').checked) {
|
||||
// event.stopPropagation();
|
||||
// }
|
||||
// });
|
||||
// window.onclick = function(event) {
|
||||
// if (!event.target.matches('check')) {
|
||||
// if (document.getElementById('check').checked) {
|
||||
// document.getElementById('check').checked = false;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// document.getElementById("navList").addEventListener('click', function (event) {
|
||||
// if (document.getElementById('check').checked) {
|
||||
// event.stopPropagation();
|
||||
// }});
|
225
js/general.js
Normal file
225
js/general.js
Normal file
@ -0,0 +1,225 @@
|
||||
// Gilroy Hacks Website Source Code -> JS (https://gilroyhacks.com)
|
||||
"use strict";
|
||||
|
||||
// document is loaded and DOM is ready
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.querySelectorAll('a.email-replace').forEach(elem => {
|
||||
elem.href = "mailto:jamesdinh77" + "@" + "protonmail.com";
|
||||
elem.target = "_blank";
|
||||
});
|
||||
|
||||
// Checkbox Local Storage
|
||||
var i;
|
||||
var checkboxes = document.querySelectorAll('#signup-container input[type=checkbox]');
|
||||
var verify = true;
|
||||
function save() {
|
||||
for (i = 0; i < checkboxes.length; i++) {
|
||||
localStorage.setItem(checkboxes[i].value, checkboxes[i].checked);
|
||||
}
|
||||
}
|
||||
window.onload = function() {
|
||||
load();
|
||||
};
|
||||
function load() {
|
||||
for (i = 0; i < checkboxes.length; i++) {
|
||||
checkboxes[i].checked = localStorage.getItem(checkboxes[i].value) === 'true' ? true:false;
|
||||
}
|
||||
}
|
||||
function check(id) {
|
||||
document.getElementById(id).checked = true;
|
||||
}
|
||||
function uncheck(id) {
|
||||
document.getElementById(id).checked = false;
|
||||
}
|
||||
function notification(id) {
|
||||
if (localStorage.getItem(checkboxes[id].value) != true) { verify = false; }
|
||||
if (verify) { document.getElementById('notification').style.visibility = visible; }
|
||||
}
|
||||
|
||||
// function btnToggle() {
|
||||
// if (document.getElementById('#check').checked) {
|
||||
// document.getElementById('#check').checked = false;
|
||||
// }
|
||||
// else {
|
||||
// document.getElementById('#check').checked = true;
|
||||
// }
|
||||
// }
|
||||
// document.getElementById('#check').addEventListener('click', function (event) {
|
||||
// if (!document.getElementById('check').checked) {
|
||||
// event.stopPropagation();
|
||||
// }
|
||||
// });
|
||||
// window.onclick = function(event) {
|
||||
// if (!event.target.matches('check')) {
|
||||
// if (document.getElementById('check').checked) {
|
||||
// document.getElementById('check').checked = false;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// document.getElementById("navList").addEventListener('click', function (event) {
|
||||
// if (document.getElementById('check').checked) {
|
||||
// event.stopPropagation();
|
||||
// }});
|
||||
|
||||
// Scroll Element
|
||||
// Creating an observer when the user views that element
|
||||
const observer = new IntersectionObserver(entries => {
|
||||
// Loop over the entries
|
||||
entries.forEach(entry => {
|
||||
// If the element is visible
|
||||
if (entry.isIntersecting) {
|
||||
// Add the animation class
|
||||
entry.target.classList.add('slide-animation');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const observer_prize_2 = new IntersectionObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('slide-animation-prize-2');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const observer_prize_1 = new IntersectionObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('slide-animation-prize-1');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const observer_prize_3 = new IntersectionObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('slide-animation-prize-3');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const observer_team_img = new IntersectionObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('slide-animation-card-img');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const observer_team_desc = new IntersectionObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('slide-animation-card-desc');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const entries = document.querySelectorAll('.team-picture');
|
||||
entries.forEach(entry => {
|
||||
observer_team_img.observe(entry);
|
||||
});
|
||||
|
||||
const entries_desc = document.querySelectorAll('.team-description');
|
||||
entries_desc.forEach(entry => {
|
||||
observer_team_desc.observe(entry);
|
||||
});
|
||||
|
||||
const prize_entries = document.querySelectorAll('.prize-column');
|
||||
prize_entries.forEach(entry => {
|
||||
observer.observe(entry);
|
||||
});
|
||||
|
||||
const prize_entries_edge = document.querySelectorAll('.podium-edge');
|
||||
prize_entries_edge.forEach(entry => {
|
||||
observer.observe(entry);
|
||||
});
|
||||
|
||||
// Adding the class animations to these elements
|
||||
let elements_id = ['#description-heading', '#event-main-box', '#timeline', '#signup-title', '#steps-card', '#sponsor-title', '#sponsor-container', '#map-article', '#rules-description', '#guidelines', '#code-of-conduct', '#photo-release-container', '#second-podium', '#first-podium', '#third-podium', '#prize-box', '#administration', '#logistics', '#outreach', '#tech', '#marketing'];
|
||||
elements_id.forEach(entry => {
|
||||
var thing = document.querySelector(entry)
|
||||
observer.observe(document.querySelector(entry));
|
||||
});
|
||||
|
||||
observer_prize_2.observe(document.querySelector('#second-place'));
|
||||
observer_prize_1.observe(document.querySelector('#first-place'));
|
||||
observer_prize_3.observe(document.querySelector('#third-place'));
|
||||
|
||||
// Scroll Nav
|
||||
// Gilroy Hacks Website Source Code -> JS (https://gilroyhacks.com)
|
||||
|
||||
// Toggle the .pa-fixed-header class when the user
|
||||
// scroll 100px
|
||||
|
||||
window.onscroll = () => {scrollNavbar()};
|
||||
|
||||
var scrollNavbar = () => {
|
||||
// Target elements
|
||||
const navBar = document.getElementById("navBar");
|
||||
const links = document.querySelectorAll("#navBar a");
|
||||
|
||||
if (document.documentElement.scrollTop > 50) {
|
||||
navBar.classList.add("pa-fixed-header");
|
||||
|
||||
// Change the color of links on scroll
|
||||
for (let i = 0; i < links.length; i++) {
|
||||
const element = links[i];
|
||||
element.classList.add('text-black');
|
||||
}
|
||||
|
||||
} else {
|
||||
navBar.classList.remove("pa-fixed-header");
|
||||
|
||||
// Change the color of links back to default
|
||||
for (let i = 0; i < links.length; i++) {
|
||||
const element = links[i];
|
||||
element.classList.remove('text-black');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Timer
|
||||
// SRC: W3Schools https://www.w3schools.com/howto/howto_js_countdown.asp
|
||||
// Set the date we're counting down to
|
||||
var countDownDate = new Date("Aug 12, 2022 16:00:00").getTime();
|
||||
|
||||
// Update the count down every 1 second
|
||||
var x = setInterval(function() {
|
||||
|
||||
// Get today's date and time
|
||||
var now = new Date().getTime();
|
||||
|
||||
// Find the distance between now and the count down date
|
||||
var distance = countDownDate - now;
|
||||
|
||||
// Time calculations for days, hours, minutes and seconds
|
||||
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
|
||||
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
|
||||
// var seconds = Math.floor((distance % (1000 * 60)) / 1000);
|
||||
|
||||
// If the count down is finished, write some text
|
||||
if (distance < 0) {
|
||||
clearInterval(x);
|
||||
document.getElementById("timer").innerHTML = "LIVE";
|
||||
}
|
||||
// Display the result in the element with id="timer"
|
||||
if (days != 0) {
|
||||
document.getElementById("timer").innerHTML = days + "d " + hours + "h";
|
||||
}
|
||||
else if (hours != 0) {
|
||||
document.getElementById("timer").innerHTML = hours + "h" + minutes + "m";
|
||||
}
|
||||
else {
|
||||
document.getElementById("timer").innerHTML = minutes + "m";
|
||||
}
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
// page is fully loaded, including all frames, objects and images
|
||||
window.addEventListener("load", function() {
|
||||
|
||||
});
|
||||
|
||||
// General functions
|
69
js/licenses.js
Normal file
69
js/licenses.js
Normal file
@ -0,0 +1,69 @@
|
||||
// Scroll Nav
|
||||
// Gilroy Hacks Website Source Code -> JS (https://gilroyhacks.com)
|
||||
|
||||
// Toggle the .pa-fixed-header class when the user
|
||||
// scroll 100px
|
||||
|
||||
window.onscroll = () => {scrollNavbar()};
|
||||
|
||||
var scrollNavbar = () => {
|
||||
// Target elements
|
||||
const navBar = document.getElementById("navBar");
|
||||
const links = document.querySelectorAll("#navBar a");
|
||||
|
||||
if (document.documentElement.scrollTop > 50) {
|
||||
navBar.classList.add("pa-fixed-header");
|
||||
|
||||
// Change the color of links on scroll
|
||||
for (let i = 0; i < links.length; i++) {
|
||||
const element = links[i];
|
||||
element.classList.add('text-black');
|
||||
}
|
||||
|
||||
} else {
|
||||
navBar.classList.remove("pa-fixed-header");
|
||||
|
||||
// Change the color of links back to default
|
||||
for (let i = 0; i < links.length; i++) {
|
||||
const element = links[i];
|
||||
element.classList.remove('text-black');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Timer
|
||||
// SRC: W3Schools https://www.w3schools.com/howto/howto_js_countdown.asp
|
||||
// Set the date we're counting down to
|
||||
var countDownDate = new Date("Aug 12, 2022 16:00:00").getTime();
|
||||
|
||||
// Update the count down every 1 second
|
||||
var x = setInterval(function() {
|
||||
|
||||
// Get today's date and time
|
||||
var now = new Date().getTime();
|
||||
|
||||
// Find the distance between now and the count down date
|
||||
var distance = countDownDate - now;
|
||||
|
||||
// Time calculations for days, hours, minutes and seconds
|
||||
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
|
||||
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
|
||||
// var seconds = Math.floor((distance % (1000 * 60)) / 1000);
|
||||
|
||||
// If the count down is finished, write some text
|
||||
if (distance < 0) {
|
||||
clearInterval(x);
|
||||
document.getElementById("timer").innerHTML = "LIVE";
|
||||
}
|
||||
// Display the result in the element with id="timer"
|
||||
if (days != 0) {
|
||||
document.getElementById("timer").innerHTML = days + "d " + hours + "h";
|
||||
}
|
||||
else if (hours != 0) {
|
||||
document.getElementById("timer").innerHTML = hours + "h" + minutes + "m";
|
||||
}
|
||||
else {
|
||||
document.getElementById("timer").innerHTML = minutes + "m";
|
||||
}
|
||||
}, 1000);
|
@ -1,74 +0,0 @@
|
||||
// Gilroy Hacks Website Source Code -> JS (https://gilroyhacks.com)
|
||||
|
||||
// Creating an observer when the user views that element
|
||||
const observer = new IntersectionObserver(entries => {
|
||||
// Loop over the entries
|
||||
entries.forEach(entry => {
|
||||
// If the element is visible
|
||||
if (entry.isIntersecting) {
|
||||
// Add the animation class
|
||||
entry.target.classList.add('slide-animation');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const observer_prize_2 = new IntersectionObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('slide-animation-prize-2');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const observer_prize_1 = new IntersectionObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('slide-animation-prize-1');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const observer_prize_3 = new IntersectionObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('slide-animation-prize-3');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const observer_team_img = new IntersectionObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('slide-animation-card-img');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const observer_team_desc = new IntersectionObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('slide-animation-card-desc');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const entries = document.querySelectorAll('.team-picture');
|
||||
entries.forEach(entry => {
|
||||
observer_team_img.observe(entry);
|
||||
});
|
||||
|
||||
const entries_desc = document.querySelectorAll('.team-description');
|
||||
entries_desc.forEach(entry => {
|
||||
observer_team_desc.observe(entry);
|
||||
});
|
||||
|
||||
|
||||
// Adding the class animations to these elements
|
||||
let elements_id = ['#description-heading', '#event-main-box', '#timeline', '#signup-title', '#steps-card', '#sponsor-title', '#sponsor-container', '#map-article', '#rules-description', '#guidelines', '#code-of-conduct', '#photo-release-container', '#second-column', '#first-column', '#third-column', '#prize-box', '#administration', '#logistics', '#outreach', '#tech', '#marketing'];
|
||||
elements_id.forEach(entry => {
|
||||
observer.observe(document.querySelector(entry));
|
||||
});
|
||||
|
||||
observer_prize_2.observe(document.querySelector('#second-place'));
|
||||
observer_prize_1.observe(document.querySelector('#first-place'));
|
||||
observer_prize_3.observe(document.querySelector('#third-place'));
|
@ -1,31 +0,0 @@
|
||||
// Gilroy Hacks Website Source Code -> JS (https://gilroyhacks.com)
|
||||
|
||||
// Toggle the .pa-fixed-header class when the user
|
||||
// scroll 100px
|
||||
|
||||
window.onscroll = () => {scrollNavbar()};
|
||||
|
||||
scrollNavbar = () => {
|
||||
// Target elements
|
||||
const navBar = document.getElementById("navBar");
|
||||
const links = document.querySelectorAll("#navBar a");
|
||||
|
||||
if (document.documentElement.scrollTop > 50) {
|
||||
navBar.classList.add("pa-fixed-header");
|
||||
|
||||
// Change the color of links on scroll
|
||||
for (let i = 0; i < links.length; i++) {
|
||||
const element = links[i];
|
||||
element.classList.add('text-black');
|
||||
}
|
||||
|
||||
} else {
|
||||
navBar.classList.remove("pa-fixed-header");
|
||||
|
||||
// Change the color of links back to default
|
||||
for (let i = 0; i < links.length; i++) {
|
||||
const element = links[i];
|
||||
element.classList.remove('text-black');
|
||||
}
|
||||
}
|
||||
}
|
35
js/timer.js
35
js/timer.js
@ -1,35 +0,0 @@
|
||||
// SRC: W3Schools https://www.w3schools.com/howto/howto_js_countdown.asp
|
||||
// Set the date we're counting down to
|
||||
var countDownDate = new Date("Aug 12, 2022 16:00:00").getTime();
|
||||
|
||||
// Update the count down every 1 second
|
||||
var x = setInterval(function() {
|
||||
|
||||
// Get today's date and time
|
||||
var now = new Date().getTime();
|
||||
|
||||
// Find the distance between now and the count down date
|
||||
var distance = countDownDate - now;
|
||||
|
||||
// Time calculations for days, hours, minutes and seconds
|
||||
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
|
||||
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
|
||||
// var seconds = Math.floor((distance % (1000 * 60)) / 1000);
|
||||
|
||||
// If the count down is finished, write some text
|
||||
if (distance < 0) {
|
||||
clearInterval(x);
|
||||
document.getElementById("timer").innerHTML = "LIVE";
|
||||
}
|
||||
// Display the result in the element with id="timer"
|
||||
if (days != 0) {
|
||||
document.getElementById("timer").innerHTML = days + "d " + hours + "h";
|
||||
}
|
||||
else if (hours != 0) {
|
||||
document.getElementById("timer").innerHTML = hours + "h" + minutes + "m";
|
||||
}
|
||||
else {
|
||||
document.getElementById("timer").innerHTML = minutes + "m";
|
||||
}
|
||||
}, 1000);
|
@ -19,6 +19,8 @@
|
||||
<link href="css/scroll_nav.css" rel="stylesheet" type="text/css" media="all">
|
||||
<link rel="icon" href="img/Gilroy-Hacks-Logo-icon-tp.ico">
|
||||
|
||||
<!-- JavaScript Refs -->
|
||||
<script defer src="js/licenses.js"></script>
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: "Glacial Indifference";
|
||||
@ -294,10 +296,5 @@
|
||||
</article>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- JavaScript Refs -->
|
||||
<script src="js/scroll_nav.js"></script>
|
||||
<script src="js/scroll_element.js"></script>
|
||||
<script src="js/timer.js"></script>
|
||||
<script src="js/data_checkbox.js"></script>
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in New Issue
Block a user