diff --git a/gallery/index.html b/gallery/index.html index e9875d7..69b66d9 100644 --- a/gallery/index.html +++ b/gallery/index.html @@ -74,40 +74,45 @@
- +
-

Classic Balloon Décor

-
+

Classic Balloon Décor

+ +
- +
-

Centerpieces

-
+

Centerpieces

+
+ +
diff --git a/index.html b/index.html index 303a924..12dc985 100644 --- a/index.html +++ b/index.html @@ -104,6 +104,7 @@

Shop Hours

+

Tuesday - Friday: 10:00 - 5:00

Saturday: 9:00 - 3:00

Sunday - Monday: Closed

diff --git a/script.js b/script.js index 78d4d71..b6491f1 100644 --- a/script.js +++ b/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 -} \ No newline at end of file +} + + +//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(); \ No newline at end of file diff --git a/style.css b/style.css index c0d2ab5..58c63ec 100644 --- a/style.css +++ b/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; +}; +