Added styles

This commit is contained in:
James Dinh 2022-12-17 01:49:14 -08:00
parent 230ee5711c
commit dc1f17eb2f
8 changed files with 258 additions and 200 deletions

BIN
.DS_Store vendored Normal file

Binary file not shown.

BIN
assets/.DS_Store vendored Normal file

Binary file not shown.

BIN
css/.DS_Store vendored Normal file

Binary file not shown.

View File

@ -1387,6 +1387,64 @@ section {
transition: opacity .2s ease; transition: opacity .2s ease;
} }
.timeline-description {
font-size: 16px;
font-weight: normal;
}
.timeline-description-list li {
margin: 10px 40px;
font-size: 16px;
}
.important-text {
color: rgb(255, 126, 126);
}
.timeline-links {
display: flex;
flex-flow: row wrap;
justify-content: center;
text-align: center;
text-decoration: none !important;
margin-top: 15px;
}
.timeline-icon {
height: 23px;
width: 75px;
float: left;
}
.timeline-button {
color: rgb(233, 203, 104);
text-decoration: none;
border-radius: 5px;
font-size: 18px;
border: 1px solid rgb(192, 168, 88);
padding: 5px;
display: inline-block;
margin: 0 10px;
}
.zoom-link {
border: 1px solid rgb(45, 140, 255);
}
.timeline-button.zoom-link:hover {
background-color: rgb(45, 140, 255);
}
.timeline-button.zoom-link:hover > .timeline-icon{
filter:hue-rotate(60deg);
}
.timeline-button:hover {
color: white;
background-color: rgb(192, 168, 88);
transition: 0.5s;
}
/** /**
* Time * Time
*/ */

BIN
img/.DS_Store vendored Normal file

Binary file not shown.

BIN
js/.DS_Store vendored Normal file

Binary file not shown.

View File

@ -371,117 +371,117 @@ document.addEventListener(
false false
); );
var slider = document.getElementById('slider'), // var slider = document.getElementById('slider'),
sliderItems = document.getElementById('items'), // sliderItems = document.getElementById('items'),
prev = document.getElementById('prev'), // prev = document.getElementById('prev'),
next = document.getElementById('next'); // next = document.getElementById('next');
slide(slider, sliderItems, prev, next); // slide(slider, sliderItems, prev, next);
function slide(wrapper, items, prev, next) { // function slide(wrapper, items, prev, next) {
var posX1 = 0, // var posX1 = 0,
posX2 = 0, // posX2 = 0,
posInitial, // posInitial,
posFinal, // posFinal,
threshold = 100, // threshold = 100,
slides = items.getElementsByClassName('slide'), // slides = items.getElementsByClassName('slide'),
slidesLength = slides.length, // slidesLength = slides.length,
slideSize = items.getElementsByClassName('slide')[0].offsetWidth, // slideSize = items.getElementsByClassName('slide')[0].offsetWidth,
firstSlide = slides[0], // firstSlide = slides[0],
lastSlide = slides[slidesLength - 1], // lastSlide = slides[slidesLength - 1],
cloneFirst = firstSlide.cloneNode(true), // cloneFirst = firstSlide.cloneNode(true),
cloneLast = lastSlide.cloneNode(true), // cloneLast = lastSlide.cloneNode(true),
index = 0, // index = 0,
allowShift = true; // allowShift = true;
// Clone first and last slide // // Clone first and last slide
items.appendChild(cloneFirst); // items.appendChild(cloneFirst);
items.insertBefore(cloneLast, firstSlide); // items.insertBefore(cloneLast, firstSlide);
wrapper.classList.add('loaded'); // wrapper.classList.add('loaded');
// Mouse and Touch events // // Mouse and Touch events
items.onmousedown = dragStart; // items.onmousedown = dragStart;
// Touch events // // Touch events
items.addEventListener('touchstart', dragStart); // items.addEventListener('touchstart', dragStart);
items.addEventListener('touchend', dragEnd); // items.addEventListener('touchend', dragEnd);
items.addEventListener('touchmove', dragAction); // items.addEventListener('touchmove', dragAction);
// Click events // // Click events
prev.addEventListener('click', function () { shiftSlide(-1) }); // prev.addEventListener('click', function () { shiftSlide(-1) });
next.addEventListener('click', function () { shiftSlide(1) }); // next.addEventListener('click', function () { shiftSlide(1) });
// Transition events // // Transition events
items.addEventListener('transitionend', checkIndex); // items.addEventListener('transitionend', checkIndex);
function dragStart (e) { // function dragStart (e) {
e = e || window.event; // e = e || window.event;
e.preventDefault(); // e.preventDefault();
posInitial = items.offsetLeft; // posInitial = items.offsetLeft;
if (e.type == 'touchstart') { // if (e.type == 'touchstart') {
posX1 = e.touches[0].clientX; // posX1 = e.touches[0].clientX;
} else { // } else {
posX1 = e.clientX; // posX1 = e.clientX;
document.onmouseup = dragEnd; // document.onmouseup = dragEnd;
document.onmousemove = dragAction; // document.onmousemove = dragAction;
} // }
} // }
function dragAction (e) { // function dragAction (e) {
e = e || window.event; // e = e || window.event;
if (e.type == 'touchmove') { // if (e.type == 'touchmove') {
posX2 = posX1 - e.touches[0].clientX; // posX2 = posX1 - e.touches[0].clientX;
posX1 = e.touches[0].clientX; // posX1 = e.touches[0].clientX;
} else { // } else {
posX2 = posX1 - e.clientX; // posX2 = posX1 - e.clientX;
posX1 = e.clientX; // posX1 = e.clientX;
} // }
items.style.left = (items.offsetLeft - posX2) + "px"; // items.style.left = (items.offsetLeft - posX2) + "px";
} // }
function dragEnd (e) { // function dragEnd (e) {
posFinal = items.offsetLeft; // posFinal = items.offsetLeft;
if (posFinal - posInitial < -threshold) { // if (posFinal - posInitial < -threshold) {
shiftSlide(1, 'drag'); // shiftSlide(1, 'drag');
} else if (posFinal - posInitial > threshold) { // } else if (posFinal - posInitial > threshold) {
shiftSlide(-1, 'drag'); // shiftSlide(-1, 'drag');
} else { // } else {
items.style.left = (posInitial) + "px"; // items.style.left = (posInitial) + "px";
} // }
document.onmouseup = null; // document.onmouseup = null;
document.onmousemove = null; // document.onmousemove = null;
} // }
function shiftSlide(dir, action) { // function shiftSlide(dir, action) {
items.classList.add('shifting'); // items.classList.add('shifting');
if (allowShift) { // if (allowShift) {
if (!action) { posInitial = items.offsetLeft; } // if (!action) { posInitial = items.offsetLeft; }
if (dir == 1) { // if (dir == 1) {
items.style.left = (posInitial - slideSize) + "px"; // items.style.left = (posInitial - slideSize) + "px";
index++; // index++;
} else if (dir == -1) { // } else if (dir == -1) {
items.style.left = (posInitial + slideSize) + "px"; // items.style.left = (posInitial + slideSize) + "px";
index--; // index--;
} // }
}; // };
allowShift = false; // allowShift = false;
} // }
function checkIndex (){ // function checkIndex (){
items.classList.remove('shifting'); // items.classList.remove('shifting');
if (index == -1) { // if (index == -1) {
items.style.left = -(slidesLength * slideSize) + "px"; // items.style.left = -(slidesLength * slideSize) + "px";
index = slidesLength - 1; // index = slidesLength - 1;
} // }
if (index == slidesLength) { // if (index == slidesLength) {
items.style.left = -(1 * slideSize) + "px"; // items.style.left = -(1 * slideSize) + "px";
index = 0; // index = 0;
} // }
allowShift = true; // allowShift = true;
} // }
} // }
var options = { var options = {
series: [{ series: [{
@ -561,4 +561,4 @@ var options = {
}; };
var chart = new ApexCharts(document.querySelector("#chart"), options); var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.re chart.render();

View File

@ -1,103 +1,103 @@
// Scroll Nav // Scroll Nav
// Gilroy Hacks Website Source Code -> JS (https://gilroyhacks.com) // Gilroy Hacks Website Source Code -> JS (https://gilroyhacks.com)
// Toggle the .pa-fixed-header class when the user // Toggle the .pa-fixed-header class when the user
// scroll 100px // scroll 100px
window.onscroll = () => {scrollNavbar()}; window.onscroll = () => {scrollNavbar()};
var scrollNavbar = () => { var scrollNavbar = () => {
// Target elements // Target elements
const navBar = document.getElementById("navBar"); const navBar = document.getElementById("navBar");
const links = document.querySelectorAll("#navBar a"); const links = document.querySelectorAll("#navBar a");
if (document.documentElement.scrollTop > 20) { if (document.documentElement.scrollTop > 20) {
navBar.classList.add("pa-fixed-header"); navBar.classList.add("pa-fixed-header");
// Change the color of links on scroll // Change the color of links on scroll
for (let i = 0; i < links.length; i++) { for (let i = 0; i < links.length; i++) {
const element = links[i]; const element = links[i];
element.classList.add('text-black'); element.classList.add('text-black');
} }
} else { } else {
navBar.classList.remove("pa-fixed-header"); navBar.classList.remove("pa-fixed-header");
// Change the color of links back to default // Change the color of links back to default
for (let i = 0; i < links.length; i++) { for (let i = 0; i < links.length; i++) {
const element = links[i]; const element = links[i];
element.classList.remove('text-black'); element.classList.remove('text-black');
} }
} }
} }
// Email Replace // Email Replace
function setAttributes(elem, attrs) { function setAttributes(elem, attrs) {
for(var key in attrs) { for(var key in attrs) {
elem.setAttribute(key, attrs[key]); elem.setAttribute(key, attrs[key]);
} }
} }
const tech_emails = document.querySelectorAll('.email-replace-tech'); const tech_emails = document.querySelectorAll('.email-replace-tech');
tech_emails.forEach(entry => { tech_emails.forEach(entry => {
setAttributes(entry, {"href": "mailto:tech" + "@" + "gilroyhacks.com?subject=Gilroy Hacks", "target": "_blank"}); setAttributes(entry, {"href": "mailto:tech" + "@" + "gilroyhacks.com?subject=Gilroy Hacks", "target": "_blank"});
entry.innerHTML = "tech" + "@" + "gilroyhacks.com"; entry.innerHTML = "tech" + "@" + "gilroyhacks.com";
}); });
// Timer // Timer
// SRC: W3Schools https://www.w3schools.com/howto/howto_js_countdown.asp // SRC: W3Schools https://www.w3schools.com/howto/howto_js_countdown.asp
// Set the date we're counting down to // Set the date we're counting down to
const events = { const events = {
"Opening Ceremony": "Apr 15, 2023 10:00:00", "Opening Ceremony": "Apr 15, 2023 10:00:00",
"Lunch": "Apr 15, 2023 12:00:00", "Lunch": "Apr 15, 2023 12:00:00",
"Web Dev Workshop": "Apr 15, 2023 13:00:00", "Web Dev Workshop": "Apr 15, 2023 13:00:00",
"[REDACTED] Workshop": "Apr 15, 2023 15:00:00", "[REDACTED] Workshop": "Apr 15, 2023 15:00:00",
"Kahoot": "Apr 15, 2023 17:00:00", "Kahoot": "Apr 15, 2023 17:00:00",
"Hacking Ends": "Apr 16, 2023 14:00:00", "Hacking Ends": "Apr 16, 2023 14:00:00",
"Project Presentations": "Apr 16, 2023 14:30:00", "Project Presentations": "Apr 16, 2023 14:30:00",
"Awards Ceremony" : "Apr 16, 2023 16:30:00" "Awards Ceremony" : "Apr 16, 2023 16:30:00"
} }
var countDownDate = 0; var countDownDate = 0;
// Get today's date and time // Get today's date and time
var now = new Date().getTime(); var now = new Date().getTime();
// Test for the current event // Test for the current event
for (const event in events) { for (const event in events) {
var testDate = new Date(events[event]).getTime(); var testDate = new Date(events[event]).getTime();
if (testDate > countDownDate && now < testDate) { if (testDate > countDownDate && now < testDate) {
countDownDate = testDate; countDownDate = testDate;
document.getElementById("event-name").innerHTML = event; document.getElementById("event-name").innerHTML = event;
document.styleSheets[0].addRule('#timer:after','content: "'+ events[event] +'";'); document.styleSheets[0].addRule('#timer:after','content: "'+ events[event] +'";');
break; break;
} }
} }
// Update the count down every 1 second // Update the count down every 1 second
var x = setInterval(function() { var x = setInterval(function() {
// Find the distance between now and the count down date // Find the distance between now and the count down date
var distance = countDownDate - now; var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds // Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
// var seconds = Math.floor((distance % (1000 * 60)) / 1000); // var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// If the count down is finished, write some text // If the count down is finished, write some text
if (distance < 0) { if (distance < 0) {
clearInterval(x); clearInterval(x);
document.getElementById("timer").innerHTML = "---"; document.getElementById("timer").innerHTML = "---";
document.getElementById("event-name").innerHTML = "Event Ended"; document.getElementById("event-name").innerHTML = "Event Ended";
} }
// Display the result in the element with id="timer" // Display the result in the element with id="timer"
else if (days != 0) { else if (days != 0) {
document.getElementById("timer").innerHTML = days + "d " + hours + "h"; document.getElementById("timer").innerHTML = days + "d " + hours + "h";
} }
else if (hours != 0) { else if (hours != 0) {
document.getElementById("timer").innerHTML = hours + "h " + minutes + "m"; document.getElementById("timer").innerHTML = hours + "h " + minutes + "m";
} }
else { else {
document.getElementById("timer").innerHTML = minutes + "m"; document.getElementById("timer").innerHTML = minutes + "m";
} }
}, 1000); }, 1000);