gallery img is link, add open/closed sign

gallery/index.html

@@ -74,40 +74,45 @@
 <div class="columns is-desktop">
   <div class="column">
     <div class="image-container">
-      <img class="image is-16by9" src="../assets/pics/classic/classic-cover.webp" alt="">
+      <a href="classic/index.html"><img class="image is-16by9" src="../assets/pics/classic/classic-cover.webp" alt="">
       <div class="overlay">
-        <a href="classic/index.html"><p class="has-text-white has-text-weight-bold is-size-2-desktop">Classic Balloon Décor</p>
+        <p class="has-text-white has-text-weight-bold is-size-2-desktop">Classic Balloon Décor</p>
-</a>
       </div>
+</a>
+      
     </div>
   </div>
   <div class="column">
     <div class="image-container">
-      <img class="image is-16by9" src="../assets/pics/organic/organic-cover.webp" alt="">
+      <a href="organic/index.html"><img class="image is-16by9" src="../assets/pics/organic/organic-cover.webp" alt="">
-      <div class="overlay">
+           <div class="overlay">
-        <a href="organic/index.html"><p class="has-text-white has-text-weight-bold is-size-2-desktop">Organic Balloon Décor</p>
+        <p class="has-text-white has-text-weight-bold is-size-2-desktop">Organic Balloon Décor</p>
-</a>
       </div>
+</a>
+ 
     </div>
   </div>
 </div>
 <div class="columns is-desktop">
   <div class="column">
     <div class="image-container">
-      <img class="image is-16by9" src="../assets/pics/centerpiece/centerpiece-cover.webp" alt="">
+<a href="centerpiece/index.html"><img class="image is-16by9" src="../assets/pics/centerpiece/centerpiece-cover.webp" alt="">
       <div class="overlay">
-        <a href="centerpiece/index.html"><p class="has-text-white has-text-weight-bold is-size-2-desktop">Centerpieces</p>
+        <p class="has-text-white has-text-weight-bold is-size-2-desktop">Centerpieces</p>
-</a>
+
       </div>
+</a>
+      
     </div>
   </div>
   <div class="column">
     <div class="image-container">
-      <img class="image is-16by9" src="../assets/pics/sculptures/sculpture-cover.webp" alt="">
+      <a href="sculpture/index.html"><img class="image is-16by9" src="../assets/pics/sculptures/sculpture-cover.webp" alt="">
-      <div class="overlay">
+ <div class="overlay">
-        <a href="sculpture/index.html"><p class="has-text-white has-text-weight-bold is-size-2-desktop">Sculptures & Themes</p>
+        <p class="has-text-white has-text-weight-bold is-size-2-desktop">Sculptures & Themes</p>
-</a>
       </div>
+</a>
+     
     </div>
   </div>
 </div>

index.html

@@ -104,6 +104,7 @@
 </div>
 
 <p class="has-text-centered is-size-1">Shop Hours</p>
+<p id="status" class="has-text-centered"></p>
 <p class="has-text-centered">Tuesday - Friday: 10:00 - 5:00</p>
 <p class="has-text-centered">Saturday:         9:00 - 3:00</p>
 <p class="has-text-centered">Sunday - Monday:  Closed</p>

script.js

@@ -172,4 +172,34 @@ function scrollFunction() {
 function topFunction() {
   document.body.scrollTop = 0; // For Safari
   document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
-} 
+} 
+
+
+//open/closed sign
+
+function updateBusinessHours() {
+    const now = new Date();
+    const nowUtc = new Date(now.getTime() + now.getTimezoneOffset() * 60000); // Convert to UTC
+    const newYorkTime = new Date(nowUtc.getTime() + 5 * 60 * 60 * 1000); // Convert to New York time
+
+    const today = newYorkTime.getDay(); // Get day of the week (0 = Sunday, ..., 6 = Saturday)
+    const currentHour = newYorkTime.getHours(); // Get hour in 24-hour format
+
+    if (today >= 1 && today <= 5) { // Monday to Friday
+        if (currentHour >= 10 && currentHour < 17) {
+            // document.getElementById('neon').classList.remove('neonTextClosed');
+            // document.getElementById('neon').classList.add('neonTextOpen');
+            document.getElementById('status').textContent = 'We are currently OPEN.';
+        } else {
+            // document.getElementById('neon').classList.remove('neonTextOpen');
+            // document.getElementById('neon').classList.add('neonTextClosed');
+            document.getElementById('status').textContent = 'We are currently CLOSED.';
+        }
+    } else { // Saturday or Sunday
+        // document.getElementById('neon').classList.remove('neonTextOpen');
+        // document.getElementById('neon').classList.add('neonTextClosed');
+        document.getElementById('status').textContent = 'We are currently CLOSED.';
+    }
+}
+
+updateBusinessHours();

style.css

@@ -124,3 +124,112 @@ form{
   background-color: #aedad3; /* Add a dark-grey background on hover */
 }
 
+#status{
+  color: rgb(221, 74, 214);
+  margin-bottom: 1rem;;
+}
+
+.neonTextOpen {
+  color: #fff;
+  text-shadow:
+    0 0 7px #fff,
+    0 0 10px #fff,
+    0 0 21px #fff,
+    0 0 42px #bc13fe,
+    0 0 82px #bc13fe,
+    0 0 92px #bc13fe,
+    0 0 102px #bc13fe,
+    0 0 151px #bc13fe;
+  animation: pulsateOpen 1.5s infinite alternate;  
+  max-width: fit-content;
+  margin: auto;
+  border: 0.1rem solid #fff;
+  border-radius: 2rem;
+  padding: 0.4em;
+  margin-bottom: 1rem;
+  box-shadow:
+    0 0 0.2rem #fff,
+    0 0 0.2rem #fff,
+    0 0 2rem #bc13fe,
+    0 0 0.8rem #bc13fe,
+    inset 0 0 1.3rem #bc13fe;
+}
+
+.neonTextClosed {
+  color: #fff;
+  text-shadow:
+    0 0 7px #fff,
+    0 0 10px #fff,
+    0 0 21px #fff,
+    0 0 42px #11c9f7,
+    0 0 82px #11c9f7,
+    0 0 92px #11c9f7,
+    0 0 102px #11c9f7,
+    0 0 151px #11c9f7;
+  animation: pulsateClosed 1.5s infinite alternate;  
+  max-width: fit-content;
+  margin: auto;
+  border: 0.1rem solid #fff;
+  border-radius: 2rem;
+  padding: 0.4em;
+  margin-bottom: 1rem;
+  box-shadow:
+    0 0 0.2rem #fff,
+    0 0 0.2rem #fff,
+    0 0 2rem #11c9f7,
+    0 0 0.8rem #11c9f7,
+    inset 0 0 1.3rem #11c9f7;
+}
+
+@keyframes pulsateOpen {
+  
+  100% {
+    text-shadow:
+    0 0 4px #fff,
+    0 0 11px #fff,
+    0 0 19px #fff,
+    0 0 40px #bc13fe,
+    0 0 80px #bc13fe,
+    0 0 90px #bc13fe,
+    0 0 100px #bc13fe,
+    0 0 150px #bc13fe;
+}
+  
+  0% {
+    text-shadow:
+    0 0 2px #fff,
+    0 0 4px #fff,
+    0 0 6px #fff,
+    0 0 10px #bc13fe,
+    0 0 45px #bc13fe,
+    0 0 55px #bc13fe,
+    0 0 70px #bc13fe,
+    0 0 80px #bc13fe;
+};
+  
+@keyframes pulsateClosed {
+    
+  100% {
+    text-shadow:
+    0 0 4px #fff,
+    0 0 11px #fff,
+    0 0 19px #fff,
+    0 0 40px #11c9f7,
+    0 0 80px #11c9f7,
+    0 0 90px #11c9f7,
+    0 0 100px #11c9f7,
+    0 0 150px #11c9f7;
+}
+  
+  0% {
+    text-shadow:
+    0 0 2px #fff,
+    0 0 4px #fff,
+    0 0 6px #fff,
+    0 0 10px #11c9f7,
+    0 0 45px #11c9f7,
+    0 0 55px #11c9f7,
+    0 0 70px #11c9f7,
+    0 0 80px #11c9f7;
+};
+