kickoff poster

layouts/_default/baseof.html

@@ -38,6 +38,9 @@
 
   {{ partial "navbar.html" . }}
 
+  <!-- Poster overlay -->
+  {{ partial "poster.html" . }}
+
   <div class="overflow-x-hidden md:overflow-visible">
     <div class="container px-4 max-w-4xl mx-auto ">
       {{ block "main" . }}{{ end }}

layouts/index.html

@@ -1,12 +1,16 @@
 {{ define "main" }}
+
+
 <article class="pb-12">
 
   <!-- This is the big banner section -->
   <div class="relative min-h-[500pt]">
     <div class="relative scale-110 md:scale-125">
       <!-- Background Image -->
-      <img src="/images/big/rover_hero.jpg" style="" class="hidden md:block w-full h-[400pt] md:pr-0 md:h-auto object-cover" alt="">
-      <img src="/images/big/rover_hero_mobile.jpg" style="" class="block md:hidden w-full h-[400pt] md:pr-0 md:h-auto object-cover" alt="">
+      <img src="/images/big/rover_hero.jpg" style=""
+        class="hidden md:block w-full h-[400pt] md:pr-0 md:h-auto object-cover" alt="">
+      <img src="/images/big/rover_hero_mobile.jpg" style=""
+        class="block md:hidden w-full h-[400pt] md:pr-0 md:h-auto object-cover" alt="">
       <!-- Radial Gradient -->
       <div class="hidden md:block absolute w-full h-full top-0" style="background: rgb(23,23,23);
         background: radial-gradient(circle, rgba(23,23,23,0.2) 30%, rgba(23,23,23,1) 82%);"></div>
@@ -37,7 +41,8 @@
     <div class="col-span-3 md:col-span-2">
       <h3 class="text-h3 font-display font-semibold mb-3">Welcome to the DAM Robotics Club!</h3>
       <p class="text-white/80">
-        The DAM Robotics Club at OSU is one of the largest student-run clubs at Oregon State University! Each year, the club
+        The DAM Robotics Club at OSU is one of the largest student-run clubs at Oregon State University! Each year, the
+        club
         runs multiple project teams such as Combat, Drone Racing, Mars Rover, Underwater, and VEX U to help our members
         become better engineers through practical real-world experiences. Additionally, the Robotics Club provides a
         stocked workspace in Merryfield Hall (Room 103), complete with computer workstations, soldering stations,

layouts/partials/alert.html

@@ -1,6 +1,5 @@
-<a
-        href="/teams/rover"
-            class="text-sm px-4 py-2 rounded-lg whitespace-nowrap min-w-0 overflow-hidden overflow-ellipsis bg-primary text-black font-medium shadow-xl">
-            <b>Just In</b>
-            <span>– Rover Takes First at CIRC 2024&nbsp;&nbsp;🎉</span>
-    </a>
+<a href="#" poster_open
+        class="text-sm px-4 py-2 rounded-lg whitespace-nowrap min-w-0 overflow-hidden overflow-ellipsis bg-primary text-black font-medium shadow-xl">
+        <b>2024 Kickoff</b>
+        <span>– Oct. 1st 6:30 PM&nbsp;&nbsp;↗</span>
+</a>

layouts/partials/poster.html

@@ -0,0 +1,36 @@
+<!-- Poster display -->
+<section id="poster_popup"
+        class="fixed flex items-center justify-center inset-0 w-full h-full bg-black/80 z-40">
+        <div class="w-80 sm:w-96 aspect-[calc(461/619)] relative rounded-md bg-neutral-600">
+                <img src="/images/posters/kickoff2024.png" class="w-full h-auto rounded-md pointer-events-auto" alt="">
+                <div class="flex absolute items-center justify-between -top-9 right-0 left-0 w-full">
+                        <div class="uppercase font-display font-semibold text-[19px]">dam robotics</div>
+                        <button poster_close id="close_poster_popup" class="underline hover:opacity-70">
+                                close
+                        </button>
+                </div>
+
+        </div>
+</section>
+
+<script>
+        const close_poster = () => {
+                console.log('close_poster')
+                document.getElementById('poster_popup').style.display = "none"
+                sessionStorage.setItem('hide_popup', true)
+        }
+        const open_poster = () => {
+                document.getElementById('poster_popup').style.display = "flex"
+        }
+
+        // Close poster if already dismissed once
+        if (sessionStorage.getItem('hide_popup'))
+                close_poster()
+
+        // Close poster on click
+        document.getElementById('close_poster_popup').addEventListener('click', close_poster)
+        // document.querySelectorAll('[poster_close]').forEach((el) => el.addEventListener('click', close_poster))
+
+        // Open poster on click
+        document.querySelectorAll('[poster_open]').forEach((el) => el.addEventListener('click', open_poster))
+</script>