Add signup link

stogacs · Feb 2, 2024 · 7e289ed · 7e289ed
1 parent d3f6af4
commit 7e289ed
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 9 deletions.
diff --git a/hackstoga/index.html b/hackstoga/index.html
@@ -67,9 +67,20 @@ <h1 id="title">hack<span style="color: var(--garnet)">Stoga</span></h1>
         <div class="pure-u-1-12"><!-- formatting div PRE--></div>
         <div class="pure-u-5-6 pure-g">
             <h1>Sign Up</h1>
-            <p>
-                <i>Sign-ups will be available soon. Check back closer to the event date.</i>
-            </p>
+            <button class="animated-button ">Sign up now!</button>
+            <script>
+                const signupStart = new Date("2024-02-05T09:00:00-05:00");
+                if (Date.now() > signupStart) {
+                    document.querySelector("button").addEventListener("click", () => {
+                        window.location.href = "signup";
+                    });
+                } else {
+                    document.querySelector("button").innerHTML = "Signups open Monday.";
+                    document.querySelector("button").style.backgroundColor = "var(--garnet)";
+                    document.querySelector("button").style.cursor = "not-allowed";
+                    document.querySelector("a[href='signup']").href = "#";
+                }
+            </script>
             <div class="formatting-separator"></div>
             <h1>What is a Hackathon?</h1>
             <p>

diff --git a/hackstoga/signup/index.html b/hackstoga/signup/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<head>
+  <title>Redirecting...</title>
+</head>
+<html>
+  <body>
+    <p
+      >Redirecting to
+      <a href="https://forms.gle/3cbh3s2VLeZSG6ee8">https://forms.gle/3cbh3s2VLeZSG6ee8</a></p
+    >
+  </body>
+  <script>
+    window.location.href = 'https://forms.gle/3cbh3s2VLeZSG6ee8';
+  </script>
+</html>
diff --git a/style/theme.css b/style/theme.css
@@ -112,7 +112,7 @@ a:hover {
   position: relative;
   overflow: hidden;
   cursor: pointer;
-  transition: background-color 0.2s;
+  transition: background-color 0.2s, transform 0.2s;
 }
 
 .animated-button:before,
@@ -127,31 +127,32 @@ a:hover {
     135deg,
     rgba(255, 227, 104, 0) 0%,
     rgba(255, 227, 104, 0) 48%,
-    rgba(255, 227, 104, 0.5) 50%,
+    rgba(255, 227, 104, 0.65) 50%,
     rgba(255, 227, 104, 0) 52%,
     rgba(255, 227, 104, 0) 100%
   );
-  animation: gold-lines 4s linear infinite;
+  animation: gold-lines 6s linear infinite;
 }
 
 .animated-button:after {
-  animation-delay: 4s;
+  animation-delay: -2s;
 }
 
 .animated-button:hover {
   background-color: var(--anchor-hover);
+  transform: scale(1.05);
 }
 
 .animated-button:hover:before,
 .animated-button:hover:after {
-  animation-duration: 2s;
+  animation-duration: 3s;
+  animation-delay: 0;
 }
 
 @keyframes gold-lines {
   0% {
     transform: translateX(-100%);
   }
-
   100% {
     transform: translateX(100%);
   }