|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Grand Opening Curtain Raiser</title> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
background-color: #000; |
|
|
overflow: hidden; |
|
|
font-family: 'Arial', sans-serif; |
|
|
height: 100vh; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
|
|
|
.curtains { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
z-index: 10; |
|
|
display: flex; |
|
|
transition: transform 2s ease-in-out; |
|
|
} |
|
|
|
|
|
.curtain { |
|
|
height: 100%; |
|
|
width: 50%; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
box-shadow: 0 0 100px rgba(0, 0, 0, 0.8) inset; |
|
|
} |
|
|
|
|
|
.curtain::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient( |
|
|
to bottom, |
|
|
rgba(122, 14, 18, 1) 0%, |
|
|
rgba(158, 28, 35, 1) 50%, |
|
|
rgba(122, 14, 18, 1) 100% |
|
|
); |
|
|
box-shadow: 0 0 30px rgba(0, 0, 0, 0.7); |
|
|
} |
|
|
|
|
|
.left-curtain { |
|
|
transform-origin: left center; |
|
|
animation: swayLeft 5s infinite ease-in-out; |
|
|
} |
|
|
|
|
|
.right-curtain { |
|
|
transform-origin: right center; |
|
|
animation: swayRight 5s infinite ease-in-out; |
|
|
} |
|
|
|
|
|
.curtain-fringe { |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
width: 100%; |
|
|
height: 150px; |
|
|
background: repeating-linear-gradient( |
|
|
0deg, |
|
|
#8a1b1b, |
|
|
#8a1b1b 5px, |
|
|
#5a0f0f 5px, |
|
|
#5a0f0f 10px |
|
|
); |
|
|
z-index: 2; |
|
|
} |
|
|
|
|
|
@keyframes swayLeft { |
|
|
0%, 100% { transform: rotate(-1deg); } |
|
|
50% { transform: rotate(1deg); } |
|
|
} |
|
|
|
|
|
@keyframes swayRight { |
|
|
0%, 100% { transform: rotate(1deg); } |
|
|
50% { transform: rotate(-1deg); } |
|
|
} |
|
|
|
|
|
|
|
|
.curtains.open { |
|
|
transform: translateY(-100%); |
|
|
} |
|
|
|
|
|
|
|
|
.spotlight { |
|
|
position: absolute; |
|
|
width: 300px; |
|
|
height: 300px; |
|
|
border-radius: 50%; |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
box-shadow: 0 0 200px 150px rgba(255, 255, 255, 0.1); |
|
|
z-index: 1; |
|
|
opacity: 0.8; |
|
|
} |
|
|
|
|
|
|
|
|
.stage { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
z-index: 5; |
|
|
opacity: 0; |
|
|
transition: opacity 1.5s ease-in-out; |
|
|
transition-delay: 1s; |
|
|
} |
|
|
|
|
|
.stage.show { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.logo { |
|
|
max-width: 500px; |
|
|
max-height: 300px; |
|
|
object-fit: contain; |
|
|
filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8)); |
|
|
transform: scale(0.8); |
|
|
animation: pulse 2s infinite alternate; |
|
|
z-index: 6; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { transform: scale(0.8); } |
|
|
100% { transform: scale(0.85); } |
|
|
} |
|
|
|
|
|
|
|
|
.confetti { |
|
|
position: absolute; |
|
|
width: 15px; |
|
|
height: 15px; |
|
|
background-color: #f00; |
|
|
opacity: 0; |
|
|
z-index: 8; |
|
|
} |
|
|
|
|
|
.ribbon { |
|
|
position: absolute; |
|
|
height: 100px; |
|
|
width: 20px; |
|
|
background: linear-gradient(to bottom, #f00, #ff0, #0f0, #00f, #f0f); |
|
|
transform-origin: top center; |
|
|
z-index: 7; |
|
|
opacity: 0; |
|
|
} |
|
|
|
|
|
|
|
|
.controls { |
|
|
position: absolute; |
|
|
bottom: 30px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
z-index: 20; |
|
|
} |
|
|
|
|
|
.open-btn { |
|
|
background: linear-gradient(to bottom, #a83232, #6b1c1c); |
|
|
color: white; |
|
|
border: none; |
|
|
padding: 15px 30px; |
|
|
font-size: 18px; |
|
|
border-radius: 50px; |
|
|
cursor: pointer; |
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); |
|
|
transition: all 0.3s ease; |
|
|
font-weight: bold; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 1px; |
|
|
} |
|
|
|
|
|
.open-btn:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); |
|
|
} |
|
|
|
|
|
.open-btn:active { |
|
|
transform: translateY(1px); |
|
|
} |
|
|
|
|
|
.open-btn i { |
|
|
margin-right: 10px; |
|
|
} |
|
|
|
|
|
|
|
|
.settings { |
|
|
position: absolute; |
|
|
bottom: 30px; |
|
|
right: 30px; |
|
|
z-index: 20; |
|
|
cursor: pointer; |
|
|
color: #fff; |
|
|
font-size: 24px; |
|
|
opacity: 0.7; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.settings:hover { |
|
|
opacity: 1; |
|
|
transform: rotate(30deg); |
|
|
} |
|
|
|
|
|
.settings-panel { |
|
|
position: absolute; |
|
|
bottom: 70px; |
|
|
right: 30px; |
|
|
background: rgba(0, 0, 0, 0.8); |
|
|
padding: 20px; |
|
|
border-radius: 10px; |
|
|
z-index: 21; |
|
|
display: none; |
|
|
width: 300px; |
|
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); |
|
|
border: 1px solid #333; |
|
|
color: #fff; |
|
|
} |
|
|
|
|
|
.settings-panel h3 { |
|
|
margin-bottom: 15px; |
|
|
color: #fff; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.settings-panel label { |
|
|
display: block; |
|
|
margin-bottom: 8px; |
|
|
} |
|
|
|
|
|
.settings-panel input { |
|
|
width: 100%; |
|
|
margin-bottom: 15px; |
|
|
padding: 8px; |
|
|
border-radius: 5px; |
|
|
border: 1px solid #444; |
|
|
background: #333; |
|
|
color: #fff; |
|
|
} |
|
|
|
|
|
.save-btn { |
|
|
background: #4CAF50; |
|
|
color: white; |
|
|
border: none; |
|
|
padding: 10px 15px; |
|
|
border-radius: 5px; |
|
|
cursor: pointer; |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.save-btn:hover { |
|
|
background: #45a049; |
|
|
} |
|
|
|
|
|
|
|
|
.sound-indicator { |
|
|
position: absolute; |
|
|
bottom: 70px; |
|
|
left: 30px; |
|
|
color: white; |
|
|
font-size: 24px; |
|
|
z-index: 20; |
|
|
opacity: 0.7; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
|
|
|
.stage-lights { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100px; |
|
|
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), transparent); |
|
|
z-index: 4; |
|
|
opacity: 0; |
|
|
transition: opacity 1s ease; |
|
|
} |
|
|
|
|
|
.stage-lights.show { |
|
|
opacity: 0.3; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div class="spotlight" id="spotlight1"></div> |
|
|
<div class="spotlight" id="spotlight2"></div> |
|
|
<div class="spotlight" id="spotlight3"></div> |
|
|
|
|
|
|
|
|
<div class="stage-lights"></div> |
|
|
|
|
|
|
|
|
<div class="curtains"> |
|
|
<div class="curtain left-curtain"> |
|
|
<div class="curtain-fringe"></div> |
|
|
</div> |
|
|
<div class="curtain right-curtain"> |
|
|
<div class="curtain-fringe"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="stage"> |
|
|
<img src="https://via.placeholder.com/500x300?text=Your+Logo" alt="Logo" class="logo" id="main-logo"> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="controls"> |
|
|
<button class="open-btn" id="openBtn"><i class="fas fa-play"></i> Start Show</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="settings" id="settingsBtn"> |
|
|
<i class="fas fa-cog"></i> |
|
|
</div> |
|
|
|
|
|
<div class="settings-panel" id="settingsPanel"> |
|
|
<h3>Settings</h3> |
|
|
<label for="logoUrl">Logo URL:</label> |
|
|
<input type="text" id="logoUrl" placeholder="Enter new logo URL"> |
|
|
<button class="save-btn" id="saveBtn">Save Changes</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="sound-indicator" id="soundBtn"> |
|
|
<i class="fas fa-volume-up"></i> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const curtains = document.querySelector('.curtains'); |
|
|
const stage = document.querySelector('.stage'); |
|
|
const stageLights = document.querySelector('.stage-lights'); |
|
|
const openBtn = document.getElementById('openBtn'); |
|
|
const settingsBtn = document.getElementById('settingsBtn'); |
|
|
const settingsPanel = document.getElementById('settingsPanel'); |
|
|
const saveBtn = document.getElementById('saveBtn'); |
|
|
const logoUrlInput = document.getElementById('logoUrl'); |
|
|
const mainLogo = document.getElementById('main-logo'); |
|
|
const soundBtn = document.getElementById('soundBtn'); |
|
|
let soundEnabled = true; |
|
|
|
|
|
|
|
|
function moveSpotlights() { |
|
|
const spotlights = [ |
|
|
document.getElementById('spotlight1'), |
|
|
document.getElementById('spotlight2'), |
|
|
document.getElementById('spotlight3') |
|
|
]; |
|
|
|
|
|
spotlights.forEach((spotlight, index) => { |
|
|
function randomPosition() { |
|
|
const x = Math.random() * window.innerWidth; |
|
|
const y = Math.random() * window.innerHeight; |
|
|
spotlight.style.left = `${x}px`; |
|
|
spotlight.style.top = `${y}px`; |
|
|
|
|
|
|
|
|
const hue = Math.random() * 360; |
|
|
spotlight.style.background = `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, 0.1)`; |
|
|
spotlight.style.boxShadow = `0 0 200px 150px hsla(${hue}, 100%, 50%, 0.1)`; |
|
|
} |
|
|
|
|
|
randomPosition(); |
|
|
|
|
|
setInterval(randomPosition, 2000 + (index * 1000)); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function openCurtains() { |
|
|
curtains.classList.add('open'); |
|
|
stage.classList.add('show'); |
|
|
stageLights.classList.add('show'); |
|
|
|
|
|
if (soundEnabled) { |
|
|
|
|
|
const audio = new Audio('https://assets.mixkit.co/active_storage/sfx/173/173-preview.mp3'); |
|
|
audio.play(); |
|
|
} |
|
|
|
|
|
|
|
|
createConfetti(); |
|
|
createRibbons(); |
|
|
|
|
|
|
|
|
openBtn.disabled = true; |
|
|
openBtn.innerHTML = '<i class="fas fa-check"></i> Show Started'; |
|
|
openBtn.style.background = 'linear-gradient(to bottom, #32a852, #1c6b2c)'; |
|
|
} |
|
|
|
|
|
|
|
|
function createConfetti() { |
|
|
const colors = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722']; |
|
|
|
|
|
for (let i = 0; i < 200; i++) { |
|
|
setTimeout(() => { |
|
|
const confetti = document.createElement('div'); |
|
|
confetti.className = 'confetti'; |
|
|
confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; |
|
|
confetti.style.left = `${Math.random() * window.innerWidth}px`; |
|
|
confetti.style.top = `-10px`; |
|
|
confetti.style.transform = `rotate(${Math.random() * 360}deg)`; |
|
|
confetti.style.opacity = '1'; |
|
|
|
|
|
|
|
|
if (Math.random() > 0.5) { |
|
|
confetti.style.borderRadius = '50%'; |
|
|
} |
|
|
|
|
|
document.body.appendChild(confetti); |
|
|
|
|
|
|
|
|
const duration = Math.random() * 3000 + 2000; |
|
|
confetti.style.transition = `all ${duration}ms ease-out`; |
|
|
|
|
|
setTimeout(() => { |
|
|
confetti.style.top = `${window.innerHeight + 10}px`; |
|
|
confetti.style.transform = `rotate(${Math.random() * 360}deg) translateX(${Math.random() * 200 - 100}px)`; |
|
|
confetti.style.opacity = '0.5'; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
confetti.remove(); |
|
|
}, duration); |
|
|
}, 10); |
|
|
}, i * 20); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function createRibbons() { |
|
|
for (let i = 0; i < 30; i++) { |
|
|
setTimeout(() => { |
|
|
const ribbon = document.createElement('div'); |
|
|
ribbon.className = 'ribbon'; |
|
|
ribbon.style.left = `${Math.random() * window.innerWidth}px`; |
|
|
ribbon.style.top = `-100px`; |
|
|
ribbon.style.opacity = '1'; |
|
|
|
|
|
document.body.appendChild(ribbon); |
|
|
|
|
|
|
|
|
const duration = Math.random() * 2000 + 2000; |
|
|
ribbon.style.transition = `all ${duration}ms ease-out`; |
|
|
|
|
|
setTimeout(() => { |
|
|
ribbon.style.top = `${window.innerHeight + 100}px`; |
|
|
ribbon.style.transform = `rotate(${Math.random() * 60 - 30}deg)`; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
ribbon.remove(); |
|
|
}, duration); |
|
|
}, 10); |
|
|
}, i * 100); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
openBtn.addEventListener('click', openCurtains); |
|
|
|
|
|
|
|
|
document.addEventListener('keydown', (e) => { |
|
|
if (e.key === 'ArrowRight' && !curtains.classList.contains('open')) { |
|
|
openCurtains(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
settingsBtn.addEventListener('click', () => { |
|
|
settingsPanel.style.display = settingsPanel.style.display === 'block' ? 'none' : 'block'; |
|
|
}); |
|
|
|
|
|
saveBtn.addEventListener('click', () => { |
|
|
const logoUrl = logoUrlInput.value.trim(); |
|
|
if (logoUrl) { |
|
|
mainLogo.src = logoUrl; |
|
|
settingsPanel.style.display = 'none'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
soundBtn.addEventListener('click', () => { |
|
|
soundEnabled = !soundEnabled; |
|
|
soundBtn.innerHTML = soundEnabled ? '<i class="fas fa-volume-up"></i>' : '<i class="fas fa-volume-mute"></i>'; |
|
|
}); |
|
|
|
|
|
|
|
|
moveSpotlights(); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> |
|
|
</html> |
