From 403bf697b550ae1b8f266b5934261232d5289801 Mon Sep 17 00:00:00 2001
From: James Dinh <jamesdinh77@gmail.com>
Date: Thu, 23 Jun 2022 10:15:05 -1000
Subject: [PATCH] Added Licenses files

---
 css/general.css                 |  14 -
 css/licenses.css                | 576 ++++++++++++++++++++++++++++++++
 liscenses.html => licenses.html |  47 ++-
 3 files changed, 613 insertions(+), 24 deletions(-)
 create mode 100644 css/licenses.css
 rename liscenses.html => licenses.html (61%)

diff --git a/css/general.css b/css/general.css
index bafdf90..3bc4d98 100644
--- a/css/general.css
+++ b/css/general.css
@@ -165,8 +165,6 @@ nav ul li {
 
 #banner-text {
   text-align: center;
-  /* animation: headline 20s infinite;
-  animation-timing-function: linear; */
 }
 
 #timer {
@@ -187,18 +185,6 @@ nav ul li {
   cursor: pointer;
   background: unset;
 }
-/* 
-@keyframes flash {
-  0% {
-    background-color: #0d1117;
-  }
-  70% {
-    background-color: #2d2d2d;
-  }
-  100% {
-    background-color: #0d1117;
-  }
-} */
 
 .link:hover {
   color:rgba(252, 188, 93, 0.719);
diff --git a/css/licenses.css b/css/licenses.css
new file mode 100644
index 0000000..e435ade
--- /dev/null
+++ b/css/licenses.css
@@ -0,0 +1,576 @@
+/*
+  Gilroy Hacks Website Source Code -> CSS (https://gilroyhacks.com)
+  File: licenses.css
+
+  Web-Designed by James Dinh ᓚᘏᗢ from scratch using pure HTML, CSS, and JS
+  For more info, contact jamesdinh77 (at) protonmail (dot) com
+
+  Copyright Disclaimer: This Source Code is Copyright (c) 2022 Gilroy Hacks All Rights Reserved.
+*/
+
+html {
+    scroll-behavior: smooth;
+  }
+  
+  /* Nav */
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+  
+  nav {
+    height: 59px;
+    width: 100%;
+    overflow: hidden;
+    top: 0;
+    left: 0;
+    position: fixed;
+    flex-wrap: nowrap;
+    z-index: 100;
+  }
+  
+  nav * {
+    padding: 0;
+    margin: 0px 5px;
+    list-style: none;
+    box-sizing: border-box;
+    z-index: 100;
+    text-decoration: none;
+  }
+  
+  #nav-logo {
+    margin-top: 5px;
+    height: 50px;
+    width: 258px;
+  }
+  
+  #nav-logo:hover {
+    transform: scale(1.03);
+    transition: 0.5s;
+  }
+  
+  #nav-logo-div {
+    height: 50px;
+    width: 258px;
+    margin: none;
+    display: inline block;
+    position: fixed;
+  }
+  
+  #nav-logo-a {
+    position: relative;
+  }
+  
+  nav ul {
+    float: right;
+    margin-right: 20px;
+  }
+  
+  nav ul li {
+    display: inline-block;
+    line-height: 30px;
+    margin: 10px 7px;
+    padding: 3px 5px;
+    cursor: pointer;
+  }
+  
+  .navlink {
+    color:rgb(233, 203, 104);
+    font-size: 18px;
+    text-decoration: none;
+    position: relative;
+  }
+  
+  .navlink.active,a:hover {
+    color: rgba(233, 203, 104, 0.774);
+    transition: .5s;
+  }
+  
+  .navlink::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 0.1em;
+    background-color: hotpink;
+    opacity: 1;
+    transition: opacity 300ms, transform 300ms;
+    transform: scale(0);
+    transform-origin: center;
+    }
+  
+  .navlink:hover::after,
+  .navlink:focus::after{
+    transform: scale(1);
+  }
+  
+  .checkbtn {
+    font-size: 23px;
+    color: white;
+    float: right;
+    line-height: 59px;
+    margin-right: 20px;
+    cursor: pointer;
+    display: none;
+  }
+  
+  #check {
+    display: none;
+  }
+  
+  #nav-links-container {
+    display: flex;
+    width: auto;
+    margin: 0;
+    padding: 0;
+    height: 59px;
+    float: right;
+    flex-wrap: nowrap;
+    flex-direction: row-reverse;
+    align-content: stretch;
+  }
+  
+  #sign-up {
+    padding: 6px 7px;
+    margin: 14px 15px 14px 4px;
+  
+    border-radius: 5px;
+    font-size: 16px;
+    background-color: rgb(140, 42, 165);
+    color: bisque;
+    display: flex;
+    place-items: center;
+  }
+  
+  #sign-up:hover {
+    transform: scale(1.05);
+    background-color: blueviolet;
+    cursor: pointer;
+    transition: 0.5s;
+  }
+  
+  #banner {
+    height: 100%;
+    /* width: 50%; */
+    width: 380px;
+    margin: auto;
+    font-size: 20px;
+    display: inline-flex;
+    position: relative;
+    justify-content: left;
+    overflow: hidden;
+    align-items: center;
+  }
+  
+  #banner-text {
+    text-align: center;
+  }
+  
+  #timer {
+    color: rgb(184, 184, 184);
+    animation: blinking 3s infinite;
+    background-color: rgb(57, 57, 57);
+    border-radius: 5px;
+    padding: 2px 5px;
+  }
+  
+  .tooltip-nav {
+    text-decoration: none;
+  }
+  
+  #timer-link {
+    color:rgb(252, 188, 93);
+    text-decoration: none;
+    cursor: pointer;
+    background: unset;
+  }
+
+
+  .link:hover {
+    color:rgba(252, 188, 93, 0.719);
+  }
+  
+  @keyframes blinking {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.8;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  /* @keyframes headline {
+    0% {
+      transform: translateX(600px);
+    }
+    50% {
+      transform: translateX(-600px);
+    }
+    100% {
+      transform: translateX(-600px);
+    }
+  } */
+  
+  /* .notification {
+    position: absolute;
+    text-align: center;
+    margin: auto;
+    z-index: 100;
+    visibility: hidden;
+  } */
+  
+  @keyframes dropdown{
+    0% {
+      opacity: 0;
+      transform: translateY(-30px);
+    }
+    20% {
+      transform: translateY(0px);
+      opacity: 1;
+    }
+    40% {
+      transform: translateY(-7px);
+    }
+    100% {
+      transform: translateY(0px);
+    }
+  }
+  
+  /* Responsive Functions */
+  @media (max-width: 1150px) {
+    #banner {
+      display: none;
+    }
+  }
+  @media (max-width: 800px) {
+    .checkbtn {
+      display: inline-block;
+    }
+    nav ul {
+      position: fixed;
+      width: 100%;
+      height: 250px;
+      margin-top: 58px;
+      margin-right: 0;
+      background: rgb(24, 24, 24);
+      visibility: hidden;
+      text-align: center;
+    }
+    nav ul li {
+      display: block;
+      margin: 20px 0;
+      line-height: 30px;
+    }
+    #check:checked ~ul {
+      visibility: visible;
+      animation: dropdown 0.5s ease;
+    }
+    .checkbtn {
+      display: inline-block;
+    }
+    #prize-logo, .podium-label {
+      transform: scale(0.9);
+      font-size: 16px !important;
+    }
+    #podium-label-1 {
+      margin-right: 1px !important;
+    }
+    #podium-label-2 {
+      margin-left: 1px !important;
+    }
+    #header-background {
+      background-position: unset !important;
+      background-size: unset !important;
+    }
+    #logo {
+      height: 300px !important;
+      width: 300px !important;
+    }
+    #banner {
+      display: inline-flex;
+      width: 300px;
+    }
+  }
+  @media (max-width: 750px) {
+    #banner {
+      display: none;
+    }
+  }
+  @media (max-width: 500px) {
+    #event, #rules, #prizes, #team {
+      transform: scale(0.9);
+    }
+    section {
+      padding-top: 0 !important;
+    }
+  }
+  @media (max-width: 470px) {
+    #nav-logo {
+        content: url(/img/Gilroy-Hacks-Logo-icon-tp.ico);
+        height: 50px;
+        width: 50px;
+    }
+    #logo {
+        height: 300px;
+        width: 300px;
+    }
+    #prizes-container {
+      transform: scale(0.9);
+    }
+  }
+  @media (max-height: 550px) {
+    #logo {
+      transform: scale(0.8);
+    }
+    #header-subtitle-date {
+      transform: translateY(-30px);
+    }
+    #spots-container {
+      transform: translateY(-30px);
+    }
+    #line-header {
+      transform: translateY(-30px);
+    }
+    #entrance-arrow {
+      visibility: hidden;
+    }
+  }
+  @media (max-height: 400px) {
+    #header {
+      transform: scale(0.7);
+    }
+  }
+  
+  .blob {
+    background: black;
+    border-radius: 50%;
+    box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
+    margin: 10px 4px;
+    height: 10px;
+    width: 10px;
+    transform: scale(1);
+    animation: pulse-black 2s infinite;
+    position: relative;
+  }
+  
+  .blob.green {
+    background: rgba(51, 217, 178, 1);
+    box-shadow: 0 0 0 0 rgba(51, 217, 178, 1);
+    animation: pulse-green 2s infinite;
+  }
+  
+  @keyframes pulse-green {
+    0% {
+      transform: scale(0.95);
+      box-shadow: 0 0 0 0 rgba(51, 217, 178, 0.7);
+    }
+    70% {
+      transform: scale(1);
+      box-shadow: 0 0 0 10px rgba(51, 217, 178, 0);
+    }
+    100% {
+      transform: scale(0.95);
+      box-shadow: 0 0 0 0 rgba(51, 217, 178, 0);
+    }
+  }
+  
+  /* Header */
+  #header-background {
+    background-image: url(/img/mountains-1.jpg);
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    height: 20%;
+  }
+  
+  #header {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+    align-items: center;
+  
+    text-align: center;
+    position: relative;
+    /* background-image: linear-gradient(#0d111733 50%, #0d11175e 60%, #0d1117 100%); */
+  }
+  
+  #logo {
+    height: 100px;
+    width: 100px;
+    animation: fadeInAnimation ease 3s;
+    animation-iteration-count: 1;
+    animation-fill-mode: forwards;
+  }
+  
+  #header-subtitle-date {
+    padding: 5px;
+    margin-top: 5px;
+    border-radius: 10px;
+    display: flex;
+    place-items: center;
+    border: 1px solid rgb(73, 73, 73);
+    background-color: rgb(22, 22, 22);
+    animation: slidein ease 1.5s;
+  }
+  
+  #spots-container {
+    display: flex;
+    place-items: center;
+    border-radius: 10px;
+    margin-top: 5px;
+    padding: 0 7px;
+    border: 1px solid rgb(73, 73, 73);
+    background-color: rgb(22, 22, 22);
+    animation: slidein-2 ease 3s;
+  }
+  
+  #header-subtitle-spots {
+    padding: 5px;
+  }
+  
+  #spots-container:hover, #header-subtitle-date:hover {
+    transform: translateY(-2px);
+    transition: 0.5s;
+  }
+  
+  #entrance-arrow {
+    width: 50px;
+    height: 50px;
+    position: absolute;
+    bottom: 10px;
+    float: bottom;
+    animation: bounce 3s infinite;
+  }
+  
+  #entrance-arrow:hover {
+    font-size: 17px;
+    transition: 0.1s;
+  }
+  
+  #header-gradient {
+    width: 100%;
+    height: 100%;
+    background-image: linear-gradient(#0d111733 50%, #0d11175e 60%, #0d1117 100%);
+  }
+  
+  @keyframes bounce {
+    0%, 20%, 50%, 80%, 100% {
+      transform: translateY(0);
+    }
+    40% {
+      transform: translateY(-5px);
+    }
+    60% {
+      transform: translateY(-3px);
+    }
+  }
+
+  @keyframes fadeInAnimation {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+     }
+  }
+
+  /* Utilities */
+#line-header {
+    width: 200px;
+    margin: 0 auto 5px;
+    animation: grow-wide ease 2s;
+}
+
+@keyframes grow-wide {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.tooltip {
+  text-decoration: underline dotted;
+  cursor: help;
+}
+
+.emphasis-text {
+    color:rgb(51, 235, 189);
+}
+
+.discord-text {
+  color: rgb(110, 112, 247);
+}
+
+.discord-tag {
+  color: rgb(150, 150, 150);
+}
+
+.line {
+  width: 100px;
+  margin: 10px auto;
+}
+
+#footer-line {
+  width: 100px;
+  margin: 10px auto;
+}
+
+#arrow-link {
+  color:rgb(252, 188, 93);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.link {
+  color:rgb(252, 188, 93);
+  text-decoration: none;
+  cursor: pointer;
+  background: 
+  linear-gradient(to right, rgba(100, 200, 200, 1), rgba(100, 200, 200, 1)),
+  linear-gradient(to right, rgba(255, 0, 0, 1), rgba(255, 0, 180, 1), rgba(0, 100, 200, 1));
+  background-size: 100% 0.1em, 0 0.1em;
+  background-position: 100% 100%, 0 100%;
+  background-repeat: no-repeat;
+  transition: background-size 400ms;
+}
+
+.link:hover {
+  color:rgba(252, 188, 93, 0.719);
+  background-size: 0 0.1em, 100% 0.1em;
+}
+
+footer {
+  width: auto;
+  height: 100px;
+  background-color: rgb(24, 24, 24);
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 10px 20px 20px 20px;
+  flex-flow: row wrap;
+}
+
+footer ul {
+  float: top;
+}
+
+footer li {
+  display: inline-block;
+  margin: 0 7px;
+}
+
+footer a {
+  color:rgb(108, 176, 231);
+  font-size: 16px;
+}
\ No newline at end of file
diff --git a/liscenses.html b/licenses.html
similarity index 61%
rename from liscenses.html
rename to licenses.html
index d0731a3..d797c8e 100644
--- a/liscenses.html
+++ b/licenses.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <!--
     Gilroy Hacks Website Source Code -> HTML (https://gilroyhacks.com)
+    File: licenses.html
 
     Web-Designed by James Dinh ᓚᘏᗢ from scratch using pure HTML, CSS, and JS
     For more info, contact jamesdinh77 (at) protonmail (dot) com
@@ -13,10 +14,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     
-    <title>Gilroy Hacks</title>
-    <link href="css/general.css" rel="stylesheet" type="text/css" media="all">
+    <title>Gilroy Hacks Liscences</title>
+    <link href="css/licenses.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="icon" href="img/Gilroy-Hacks-Logo-icon-tp.ico">
     <link rel="apple-touch-icon" href="img/Gilroy Hacks Logo (app).png">
 
@@ -50,22 +50,42 @@
             <img id="nav-logo" src="img/Gilroy Hacks Logo [Summer-wide-2].png" alt="logo"/>
         </a>
         <div id="nav-links-container">
-            <input type="checkbox" id="check">
+            <input onclick="btnToggle()" type="checkbox" id="check">
             <label for="check" class="checkbtn">
                 <img src="img/bars.png" loading="lazy" height="17" width="25" alt="Bars"/>
             </label>
             <a onclick="check('01'); save();" target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7"><div id="sign-up">SIGN UP</div></a>
-            <ul>
-                <li><a onclick="uncheck('check')" href="#event">Event</a></li>
-                <li><a onclick="uncheck('check')" href="#rules">Rules</a></li>
-                <li><a onclick="uncheck('check')" href="#prizes">Prizes</a></li>
-                <li><a onclick="uncheck('check')" href="#team">Team</a></li>
+            <ul id="navList">
+                <li><a class="navlink" onclick="uncheck('check')" href="#event">Event</a></li>
+                <li><a class="navlink" onclick="uncheck('check')" href="#rules">Rules</a></li>
+                <li><a class="navlink" onclick="uncheck('check')" href="#prizes">Prizes</a></li>
+                <li><a class="navlink" onclick="uncheck('check')" href="#team">Team</a></li>
             </ul>
             <div id="banner">
-                <p id="banner-text">Next event:<br>Opening Ceremony <abbr class="tooltip-nav" title="Aug 12, 4pm"><span id="timer"></span></abbr></p>
+                <p id="banner-text"><a class="navlink" id="timer-link" href="#timeline" title="Click for more info">Opening Ceremony</a> in<abbr class="tooltip-nav" title="Aug 12, 4pm"><span id="timer"></span></abbr></p>
             </div>
         </div>
     </nav>
+    <header>
+        <div id="header-background">
+            <div id="header-gradient">
+                <div id="header">
+                    <img id="logo" src="img/Gilroy Hacks Logo [Summer].png" height="100" width="100" alt="logo"/>
+                    <hr id="line-header">
+                    <h2 id="header-subtitle-date">Aug 12 - 14</h2>
+                    <div id="spots-container">
+                        <div class="blob green" aria-hidden="true"></div>
+                        <h2 id="header-subtitle-spots">35 spots remaining</h2>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+    <main>
+        <section>
+            hi
+        </section>
+    </main>
     <!--Footer-->
     <footer>
         <ul>
@@ -77,5 +97,12 @@
         © 2022 Gilroy Hacks <br>
         All Rights Reserved
     </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>
\ No newline at end of file