marketing popup

The-Mu-Foundation · Sep 23, 2024 · 303f144 · 303f144
1 parent 5388856
commit 303f144
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 22 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -55,7 +55,7 @@
     "postcss": "^8.4.26",
     "postcss-cli": "^10.1.0",
     "tailwind": "^4.0.0",
-    "tailwindcss": "^3.3.3"
+    "tailwindcss": "^3.4.12"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.4",

diff --git a/views/public/indexV2.ejs b/views/public/indexV2.ejs
@@ -1,3 +1,6 @@
+<head>
+  <link href="../../dist/tailwind.css" rel="stylesheet">
+</head>
 <%- contentFor('head') %>
 
 <script src="https://cdn.jsdelivr.net/npm/[email protected]" defer></script>
@@ -30,9 +33,67 @@
   }
 </style>
 
+<style>
+  .announcement_modal {
+      display: none;
+      position: fixed;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      background-color: white;
+      border: 1px solid #ccc;
+      padding: 20px;
+      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+      z-index: 1000;
+  }
+
+  .popup-overlay {
+      display: none; /* Hidden by default */
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.5);
+      z-index: 999;
+  }
+</style>
+
+<div class="popup-overlay" id="popupOverlay"></div>
+<div id="announcementPopup" class="announcement_modal">
+  <div class="modal-body">
+      <h2>Mutorials is hiring!</h2>
+      <p>We're looking for passionate individuals to fill our Marketing Director and Subject Lead Roles!</p>
+      <a class="btn btn-primary rounded-md" href="https://docs.google.com/forms/d/e/1FAIpQLSdApNSVCwUQSarhzrp9MboT0S_bCO5pwbL4xUGQm-0DXWaRpg/viewform?usp=sharing">Apply Now!</a>
+      <button class="btn btn-outline rounded-md" id="closePopupBtn">Close</button>
+  </div>
+</div>
+
+<script>
+  const popup = document.getElementById('announcementPopup');
+  const close = document.getElementById('closePopupBtn');
+
+  function showPopup() {
+    popup.style.display = 'block';
+    overlay.style.display = 'block';
+  }
+
+  function closePopup() {
+    popup.style.display = 'none';
+    overlay.style.display = 'none';
+  }
+
+  window.onload = function() {
+    showPopup();
+  };
+
+  closePopupBtn.addEventListener('click', closePopup);
+
+</script>
+
 <%- contentFor('main') %>
 <%# Hero %>
-<div class="flex items-center w-full max-w-4xl min-h-screen m-0 px-6 py-10 sm:-mt-20">
+<div class="flex items-center w-full max-w-4xl min-h-screen m-0 px-6 py-10 sm:-mt-20 popup-overlay">
   <div class="flex justify-between w-full">
     <div class="flex flex-col items-start w-full sm:w-7/12 mr-6">
       <h1 class="mb-4 text-4xl sm:text-5xl whitespace-nowrap">

diff --git a/views/usabo/homepage.ejs b/views/usabo/homepage.ejs
@@ -118,16 +118,18 @@
 
 </script>
 
-<div class="container mt-5 mb-1">
-    <a class="btn btn-primary btn-lg w-100 my-2" href="/homepage">Return to Homepage</a>
-</div>
 
 <div class="container mt-5 mb-1">
     <div class="mb-2">
         <%- include("../partials/flashes") -%>
     </div>
     <h1 class="text-center display-3">Welcome to USABO Practice!</h1>
 
+
+    <div class="container mt-5 mb-1">
+        <a class="btn btn-primary btn-lg w-100 my-2" href="/homepage">Return to Homepage</a>
+    </div>
+
     <% if (admin) { %>
       <a class="btn btn-primary btn-lg w-100 my-2" href="/admin/usaboAdminHomepage">USABO Admin Dashboard</a>
     <% } %>