From ab4145932a907720c9b1fd87201530620e3ed6e8 Mon Sep 17 00:00:00 2001
From: Ishan1522 <iacharyagangopadhyay@students.chccs.k12.nc.us>
Date: Tue, 11 Jun 2024 21:18:16 -0400
Subject: [PATCH] interest form

---
 index.html          |  8 ++++++++
 scripts/x_button.js |  6 ++++++
 styles/header.css   | 46 +++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 60 insertions(+)
 create mode 100644 scripts/x_button.js
diff --git a/index.html b/index.html
index eba0853..8fe42d8 100644
--- a/index.html
+++ b/index.html
@@ -17,6 +17,13 @@
 <body>
 
 <header>
+  <div id="header-interest-form">
+    <p>If interested in summer workshops, complete the form:</p>
+    <a class="header-button"
+       href="https://docs.google.com/forms/d/e/1FAIpQLScZroxdy3WQmwxDN6p1T9dN80Uwpewk7a3u133SZAjkAeQEkQ/viewform?usp=sf_link"
+       target="_blank">Sign Up Form</a>
+  </div>
+  <button id="x-button" onclick="closeSignupPopup()">✖</button>
   <input id="main-nav-toggle" type="checkbox"/>
   <label class="main-nav-button-container" for="main-nav-toggle">
     <div class="main-nav-button" id="top-nav-button"></div>
@@ -153,6 +160,7 @@ <h2>FRC Challenge Videos</h2>
 
 <script src="scripts/iframes.js"></script>
 <script src="scripts/easteregg.js"></script>
+<script src="scripts/x_button.js"></script>
 
 </body>
 </html>
diff --git a/scripts/x_button.js b/scripts/x_button.js
new file mode 100644
index 0000000..40b3dc1
--- /dev/null
+++ b/scripts/x_button.js
@@ -0,0 +1,6 @@
+function closeSignupPopup() {
+    let popup = document.getElementById("header-interest-form");
+    popup.style.display = "none";
+    let x_button = document.getElementById("x-button");
+    x_button.style.display = "none";
+}
\ No newline at end of file
diff --git a/styles/header.css b/styles/header.css
index c126dde..da01c1e 100644
--- a/styles/header.css
+++ b/styles/header.css
@@ -5,6 +5,52 @@ header {
   background: var(--secondaryColor);
 }
 
+#header-interest-form {
+  width: 100%;
+  padding: .5% 25%;
+  display: flex;
+  flex-direction: row;
+  gap: 3%;
+  background-color: var(--themeColor);
+}
+
+#header-interest-form p {
+  margin: 0;
+  padding: 1% 0;
+  font-size: 1.3vw;
+}
+
+#header-interest-form a {
+  margin: 0;
+  font-size: 1.3vw;
+  color: var(--mainTextColor);
+  border: 1px solid var(--mainTextColor);
+  border-radius: 5px;
+  padding: .9% 1% 1%;
+  text-decoration: none;
+}
+
+#header-interest-form a:hover {
+  backdrop-filter: brightness(1.15);
+}
+
+#x-button {
+  color: var(--mainTextColor);
+  background: transparent;
+  border: none;
+  font-size: 1.3vw;
+  position: absolute;
+  top: 8%;
+  right: 1%;
+  cursor: pointer;
+  font-family: Arial, serif;
+}
+
+#x-button:hover {
+  transform: rotate(180deg);
+}
+
+
 #header-inner {
   padding: 1.8% 20% 1.5%;
 }
