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

Added Timeline Brackets

Browse Source
This commit is contained in:
James Dinh 2022-06-09 22:02:33 -07:00
parent b0ccaa1408
commit fd0a0c0ad3
5 changed files with 391 additions and 279 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
css/general.css
View File

@ -105,7 +105,6 @@ nav li a:focus::after{
margin-right: 20px; margin-right: 20px;
cursor: pointer; cursor: pointer;
display: none; display: none;
} }
#check { #check {
@ -153,14 +152,17 @@ nav li a:focus::after{
@keyframes dropdown{ @keyframes dropdown{
0% { 0% {
opacity: 0; opacity: 0;
}
30% {
transform: translateY(-30px); transform: translateY(-30px);
opacity: 0; }
40% {
transform: translateY(0px);
opacity: 1;
}
60% {
transform: translateY(-7px);
} }
100% { 100% {
transform: translateY(0px); transform: translateY(0px);
opacity: 1;
} }
} }
@ -186,7 +188,7 @@ nav li a:focus::after{
} }
#check:checked ~ul { #check:checked ~ul {
visibility: visible; visibility: visible;
animation: dropdown 1s ease; animation: dropdown 0.5s ease;
} }
.checkbtn { .checkbtn {
display: inline-block; display: inline-block;
@ -211,9 +213,6 @@ nav li a:focus::after{
} }
} }
@media (max-width: 470px) { @media (max-width: 470px) {
/* .checkbtn {
display: none;
} */
#nav-logo { #nav-logo {
content: url(/img/Gilroy-Hacks-Logo-icon-tp.ico); content: url(/img/Gilroy-Hacks-Logo-icon-tp.ico);
height: 50px; height: 50px;
@ -227,10 +226,22 @@ nav li a:focus::after{
transform: scale(0.9); transform: scale(0.9);
} }
} }
@media (max-height: 700px) { @media (max-height: 500px) {
#logo { #logo {
height: 300px; height: 200px !important;
width: 300px; width: 200px !important;
}
#header-subtitle-date {
height: 25px;
font-size: 15px;
}
#header-subtitle-spots {
height: 25px;
font-size: 15px;
padding: 3px !important;
}
#entrance-arrow {
visibility: hidden;
} }
} }
@ -244,13 +255,13 @@ nav li a:focus::after{
transform: scale(1); transform: scale(1);
animation: pulse-black 2s infinite; animation: pulse-black 2s infinite;
position: relative; position: relative;
} }
.blob.green { .blob.green {
background: rgba(51, 217, 178, 1); background: rgba(51, 217, 178, 1);
box-shadow: 0 0 0 0 rgba(51, 217, 178, 1); box-shadow: 0 0 0 0 rgba(51, 217, 178, 1);
animation: pulse-green 2s infinite; animation: pulse-green 2s infinite;
} }
@keyframes pulse-green { @keyframes pulse-green {
0% { 0% {
@ -265,7 +276,7 @@ nav li a:focus::after{
transform: scale(0.95); transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(51, 217, 178, 0); box-shadow: 0 0 0 0 rgba(51, 217, 178, 0);
} }
} }
/* Header */ /* Header */
#header-background { #header-background {
@ -290,10 +301,20 @@ nav li a:focus::after{
background-image: linear-gradient(#0d111733 50%, #0d11175e 60%, #0d1117 100%); background-image: linear-gradient(#0d111733 50%, #0d11175e 60%, #0d1117 100%);
} }
#logo {
height: 400px;
width: 400px;
animation: fadeInAnimation ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#header-subtitle-date { #header-subtitle-date {
padding: 5px; padding: 5px;
margin-top: 5px; margin-top: 5px;
border-radius: 10px; border-radius: 10px;
display: flex;
place-items: center;
border: 1px solid rgb(73, 73, 73); border: 1px solid rgb(73, 73, 73);
background-color: rgb(22, 22, 22); background-color: rgb(22, 22, 22);
animation: slidein ease 1.5s; animation: slidein ease 1.5s;
@ -340,14 +361,6 @@ nav li a:focus::after{
} }
} }
#logo {
min-height: 300px;
min-width: 300px;
animation: fadeInAnimation ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes fadeInAnimation { @keyframes fadeInAnimation {
0% { 0% {
opacity: 0; opacity: 0;
@ -679,6 +692,79 @@ section {
cursor: pointer; cursor: pointer;
} }
/* Bracket */
.bracket {
display: inline-flex;
width: 105%;
margin-left: -20px;
}
.bracket>div {
width: 50%;
height: 1px;
background: rgb(255, 255, 255);
margin: 0px 30px 20px;
position: relative;
}
#bracket-1 > .left {
width: 2%;
}
#bracket-1 > .right {
width: 98%;
}
#bracket-2 > .left {
width: 24%;
}
#bracket-2 > .right {
width: 76%;
}
#bracket-3 > .left {
width: 46%;
}
#bracket-3 > .right {
width: 54%;
}
#bracket-4 > .left {
width: 68%;
}
#bracket-4 > .right {
width: 32%;
}
#bracket-5 > .left {
width: 89%;
}
#bracket-5 > .right {
width: 11%;
}
.bracket>div:before,
.bracket>div:after {
content: '';
position: absolute;
width: 30px;
height: 30px;
border-top-left-radius: 200px;
border: 1px solid rgb(255, 255, 255);
border-right: none;
border-bottom: none;
}
.bracket>div:after {
right: -30px;
}
.left:after {
transform: rotate(-180deg);
top: -30px;
}
.right:before {
transform: rotate(-90deg);
top: -30px;
left: -30px;
}
.right:after {
transform: rotate(90deg);
}
.left:before {
left: -30px;
}
#timeline-descriptions-wrapper { #timeline-descriptions-wrapper {
width: 100%; width: 100%;
margin-top: 70px; margin-top: 70px;
@ -686,7 +772,7 @@ section {
font-weight: 400; font-weight: 400;
text-align: left; text-align: left;
} }
#timeline-descriptions-wrapper div { .timeline-desc {
margin-top: 0; margin-top: 0;
display: none; display: none;
} }

BIN
font/GlacialIndifference-Bold.otf
View File

Binary file not shown.

BIN
font/GlacialIndifference-Italic.otf
View File

Binary file not shown.

61
index.html
View File

@ -15,12 +15,13 @@
<link href="css/general.css" rel="stylesheet" type="text/css" media="all"> <link href="css/general.css" rel="stylesheet" type="text/css" media="all">
<link href="css/scroll_nav.css" rel="stylesheet" type="text/css" media="all"> <link href="css/scroll_nav.css" rel="stylesheet" type="text/css" media="all">
<link rel="stylesheet" href="css/leaflet.css"/> <link rel="stylesheet" href="css/leaflet.css"/>
<script src="js/leaflet.js"></script>
<link rel="icon" href="img/Gilroy-Hacks-Logo-icon-tp.ico"> <link rel="icon" href="img/Gilroy-Hacks-Logo-icon-tp.ico">
<meta name="author" content="Gilroy Hacks"> <meta name="author" content="Gilroy Hacks">
<meta name="copyright" content="This site and its pages are Copyright (c) 2022 Gilroy Hacks All Rights Reserved."> <meta name="copyright" content="This site and its pages are Copyright (c) 2022 Gilroy Hacks All Rights Reserved.">
<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="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"> <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>
<style> <style>
@font-face { @font-face {
font-family: "Glacial Indifference"; font-family: "Glacial Indifference";
@ -50,10 +51,10 @@
</label> </label>
<a target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7"><div id="sign-up">SIGN UP</div></a> <a target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7"><div id="sign-up">SIGN UP</div></a>
<ul> <ul>
<li><a href="#event">Event</a></li> <li><a onclick="uncheck('check')" href="#event">Event</a></li>
<li><a href="#rules">Rules</a></li> <li><a onclick="uncheck('check')" href="#rules">Rules</a></li>
<li><a href="#prizes">Prizes</a></li> <li><a onclick="uncheck('check')" href="#prizes">Prizes</a></li>
<li><a href="#team">Team</a></li> <li><a onclick="uncheck('check')" href="#team">Team</a></li>
</ul> </ul>
</div> </div>
<!-- <div id="notification">hi</div> --> <!-- <div id="notification">hi</div> -->
@ -78,7 +79,7 @@
</div> </div>
</div> </div>
</header> </header>
<!--Main--> <!--Main-->
<main> <main>
<section id="event"> <section id="event">
<h2 class="topic">Hackathon Event</h2> <h2 class="topic">Hackathon Event</h2>
@ -96,7 +97,6 @@
<li><span class="emphasis-text">Aug 12-14</span> -> Summer 2022 Hackathon</li> <li><span class="emphasis-text">Aug 12-14</span> -> Summer 2022 Hackathon</li>
</ul> </ul>
</li> </li>
</ul> </ul>
</div> </div>
<!-- Timeline src: https://codepen.io/cjl750/pen/MXvYmg --> <!-- Timeline src: https://codepen.io/cjl750/pen/MXvYmg -->
@ -133,7 +133,11 @@
</div> </div>
<div id="timeline-right-arrow"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg></div> <div id="timeline-right-arrow"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg></div>
<div id="timeline-descriptions-wrapper"> <div id="timeline-descriptions-wrapper">
<div data-description="1"> <div class="timeline-desc" data-description="1">
<div class="bracket" id="bracket-1">
<div class="left"></div>
<div class="right"></div>
</div>
<h3>Opening Ceremony</h3> <h3>Opening Ceremony</h3>
<h4 class="timeline-description-subtitle">8/12 | 4:00pm - 5:00pm</h4> <h4 class="timeline-description-subtitle">8/12 | 4:00pm - 5:00pm</h4>
<!-- <div class="t-flex-container"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="10" r="3"/><path d="M12 21.7C17.3 17 20 13 20 10a8 8 0 1 0-16 0c0 3 2.7 6.9 8 11.7z"/></svg><h5>Community Room</h5></div> --> <!-- <div class="t-flex-container"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="10" r="3"/><path d="M12 21.7C17.3 17 20 13 20 10a8 8 0 1 0-16 0c0 3 2.7 6.9 8 11.7z"/></svg><h5>Community Room</h5></div> -->
@ -146,7 +150,11 @@
</ul> </ul>
</p> </p>
</div> </div>
<div data-description="2"> <div class="timeline-desc" data-description="2">
<div class="bracket" id="bracket-2">
<div class="left"></div>
<div class="right"></div>
</div>
<h3>Hacking Begins</h3> <h3>Hacking Begins</h3>
<h4 class="timeline-description-subtitle">8/12 | 5:00pm</h4><br> <h4 class="timeline-description-subtitle">8/12 | 5:00pm</h4><br>
<p class="timeline-description"> <p class="timeline-description">
@ -157,7 +165,11 @@
</ul> </ul>
</p> </p>
</div> </div>
<div data-description="3"> <div class="timeline-desc" data-description="3">
<div class="bracket" id="bracket-3">
<div class="left"></div>
<div class="right"></div>
</div>
<h3>Hacking Ends</h3> <h3>Hacking Ends</h3>
<h4 class="timeline-description-subtitle">8/14 | 2:00pm</h4><br> <h4 class="timeline-description-subtitle">8/14 | 2:00pm</h4><br>
<p class="timeline-description">STOP coding! Your 44 hours of intense stress and turmoil are finally up! We hope you learned some valuable skills and made some new friends along the way.<br> <p class="timeline-description">STOP coding! Your 44 hours of intense stress and turmoil are finally up! We hope you learned some valuable skills and made some new friends along the way.<br>
@ -168,7 +180,11 @@
</ul> </ul>
</p> </p>
</div> </div>
<div data-description="4"> <div class="timeline-desc" data-description="4">
<div class="bracket" id="bracket-4">
<div class="left"></div>
<div class="right"></div>
</div>
<h3>Project Presentations</h3> <h3>Project Presentations</h3>
<h4 class="timeline-description-subtitle">8/14 | 2:30pm - 3:30pm</h4><br> <h4 class="timeline-description-subtitle">8/14 | 2:30pm - 3:30pm</h4><br>
<p class="timeline-description">This is where your team will present your product to our honored judges.<br> <p class="timeline-description">This is where your team will present your product to our honored judges.<br>
@ -181,7 +197,11 @@
</ul> </ul>
</p> </p>
</div> </div>
<div data-description="5"> <div class="timeline-desc" data-description="5">
<div class="bracket" id="bracket-5">
<div class="left"></div>
<div class="right"></div>
</div>
<h3>Awards Ceremony</h3> <h3>Awards Ceremony</h3>
<h4 class="timeline-description-subtitle">8/14 | 3:30pm - 4:00pm</h4><br> <h4 class="timeline-description-subtitle">8/14 | 3:30pm - 4:00pm</h4><br>
<p class="timeline-description">Congratuations! Judge scores are tallied and here's where we announce the 1st, 2nd, and 3rd place teams along with positive feedback for each.<br> <p class="timeline-description">Congratuations! Judge scores are tallied and here's where we announce the 1st, 2nd, and 3rd place teams along with positive feedback for each.<br>
@ -496,11 +516,13 @@
<div id="photo-release-container"> <div id="photo-release-container">
<h2>Photo Release Waiver</h2> <h2>Photo Release Waiver</h2>
<div id=photo-description> <div id=photo-description>
By participating in this hackathon, you hereby grant us permission to use your likeness and projects in photographs, videos, or other digital media in any and all of its publications, including, but not limited to, social media and web-based publications. Any and all photos taken during the hackathon duration will become the sole property of Gilroy Hacks. By participating in this hackathon, you hereby grant us permission to use your likeness and project content in photographs, videos, or other digital media in any and all of its publications, including, but not limited to, social media and web-based publications. Any and all photos taken during the hackathon duration will become property of Gilroy Hacks.
<br><br> <br><br>
Upon agreeing to these terms, you authorize Gilroy Hacks to edit, copy, or distribute these photos for any lawful or advertising purpose. Additionally, you waive the right to royalties or compensation as a cause for using these photos. Upon agreeing to these terms, you authorize Gilroy Hacks to edit, copy, or distribute these photos for any lawful or advertising purpose. Additionally, you waive the right to royalties or compensation for using these photos.
<br><br> <br><br>
However, we take your privacy very seriously; if you have a disagreement with any of the terms stated above, please contact an event organizer or email <a class="link" target="_blank" href="mailto:tech@gilroyhacks.com" title="Email">tech@gilroyhacks.com</a> However, Gilroy Hacks will use these photos for promoting purposes ONLY. We will never share your personal or private information to anyone outside of community outreach.
<br><br>
If you have a disagreement with any of the terms stated above, please contact an event organizer or email <a class="link" target="_blank" href="mailto:tech@gilroyhacks.com" title="Email">tech@gilroyhacks.com</a>
</div> </div>
</div> </div>
</section> </section>
@ -573,6 +595,14 @@
<h5 class="person-contact"><span class="discord-text">Discord</span>: Fesh<span class="discord-tag">#5995</span><br><a class="link" target="_blank" href="mailto:ihwang125@gmail.com" title="Email">ihwang125@gmail.com</a></h5> <h5 class="person-contact"><span class="discord-text">Discord</span>: Fesh<span class="discord-tag">#5995</span><br><a class="link" target="_blank" href="mailto:ihwang125@gmail.com" title="Email">ihwang125@gmail.com</a></h5>
</div> </div>
</div> </div>
<div class="team-entry">
<div class="team-picture"><img src="img/Gilroy Hacks Logo [icon-tp-podium].png" loading="lazy" alt="profile picture"></div>
<div class="team-description">
<h4 class="person-name">Jonathan Tessman</h4>
<h5 class="person-subtitle">Finance Manager</h5>
<h5 class="person-contact"><span class="discord-text">Discord</span>: Alsace<span class="discord-tag">#5031</span></h5>
</div>
</div>
</article> </article>
<article id="outreach"> <article id="outreach">
<h3 class="team-title">Outreach</h3> <h3 class="team-title">Outreach</h3>
@ -637,6 +667,7 @@
© 2022 Gilroy Hacks <br> © 2022 Gilroy Hacks <br>
All Rights Reserved All Rights Reserved
</footer> </footer>
<!-- JavaScript Refs -->
<script src="js/scroll_nav.js"></script> <script src="js/scroll_nav.js"></script>
<script src="js/scroll_element.js"></script> <script src="js/scroll_element.js"></script>
<script src="js/data_checkbox.js"></script> <script src="js/data_checkbox.js"></script>

19
js/data_checkbox.js
View File

@ -1,5 +1,6 @@
var i; var i;
var checkboxes = document.querySelectorAll('#signup-container input[type=checkbox]'); var checkboxes = document.querySelectorAll('#signup-container input[type=checkbox]');
var verify = true;
function save() { function save() {
for (i = 0; i < checkboxes.length; i++) { for (i = 0; i < checkboxes.length; i++) {
localStorage.setItem(checkboxes[i].value, checkboxes[i].checked); localStorage.setItem(checkboxes[i].value, checkboxes[i].checked);
@ -16,16 +17,10 @@ function load() {
function check(id) { function check(id) {
document.getElementById(id).checked = true; document.getElementById(id).checked = true;
} }
function notifitcation_popup() { function uncheck(id) {
var verify = true; document.getElementById(id).checked = false;
for (i = 0; i < checkbox.length; i++) }
{ function notifitcation_popup(id) {
if (localStorage.getItem(checkboxes[i].value) != true) { if (localStorage.getItem(checkboxes[id].value) != true) { verify = false; }
verify = false; if (verify) { document.getElementById('notification').style.visibility = visible; }
break;
}
}
if (verify) {
document.getElementById('notification').style.visibility = visible;
}
} }