gallery img is link, add open/closed sign
This commit is contained in:
parent
0ce88f7961
commit
3e895307d9
@ -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>
|
||||
</a>
|
||||
<p class="has-text-white has-text-weight-bold is-size-2-desktop">Classic Balloon Décor</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="image-container">
|
||||
<img class="image is-16by9" src="../assets/pics/organic/organic-cover.webp" alt="">
|
||||
<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>
|
||||
</a>
|
||||
<a href="organic/index.html"><img class="image is-16by9" src="../assets/pics/organic/organic-cover.webp" alt="">
|
||||
<div class="overlay">
|
||||
<p class="has-text-white has-text-weight-bold is-size-2-desktop">Organic Balloon Décor</p>
|
||||
</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>
|
||||
</a>
|
||||
<p class="has-text-white has-text-weight-bold is-size-2-desktop">Centerpieces</p>
|
||||
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="image-container">
|
||||
<img class="image is-16by9" src="../assets/pics/sculptures/sculpture-cover.webp" alt="">
|
||||
<div class="overlay">
|
||||
<a href="sculpture/index.html"><p class="has-text-white has-text-weight-bold is-size-2-desktop">Sculptures & Themes</p>
|
||||
</a>
|
||||
<a href="sculpture/index.html"><img class="image is-16by9" src="../assets/pics/sculptures/sculpture-cover.webp" alt="">
|
||||
<div class="overlay">
|
||||
<p class="has-text-white has-text-weight-bold is-size-2-desktop">Sculptures & Themes</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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>
|
||||
|
||||
32
script.js
32
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();
|
||||
109
style.css
109
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;
|
||||
};
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user