| <!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> |
