Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Fall Into The Depths of Hell</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| user-select: none; | |
| } | |
| body { | |
| background: linear-gradient(135deg, #0A0A0A, #111111); | |
| color: #E0E0E0; | |
| font-family: 'Courier New', monospace; | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| overflow: hidden; | |
| transition: background-color 0.3s ease; | |
| } | |
| .container { | |
| text-align: center; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| h1 { | |
| font-size: 2rem; | |
| margin-bottom: 2rem; | |
| letter-spacing: 3px; | |
| color: #C0C0C0; | |
| text-transform: uppercase; | |
| } | |
| .flash-btn { | |
| width: 300px; | |
| height: 300px; | |
| border-radius: 50%; | |
| background: radial-gradient(circle, #4B0082, #8B0000); | |
| border: none; | |
| color: #E0E0E0; | |
| font-size: 2.5rem; | |
| font-weight: bold; | |
| cursor: pointer; | |
| position: relative; | |
| overflow: hidden; | |
| box-shadow: 0 0 30px rgba(139, 0, 0, 0.3); | |
| transition: transform 0.2s, box-shadow 0.2s; | |
| text-transform: uppercase; | |
| letter-spacing: 5px; | |
| animation: pulse 3s infinite; | |
| } | |
| .flash-btn:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 0 40px rgba(139, 0, 0, 0.5); | |
| } | |
| .flash-btn:active { | |
| transform: scale(0.98); | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 20px rgba(139, 0, 0, 0.3); } | |
| 50% { box-shadow: 0 0 50px rgba(139, 0, 0, 0.7); } | |
| 100% { box-shadow: 0 0 20px rgba(139, 0, 0, 0.3); } | |
| } | |
| .counter { | |
| position: fixed; | |
| top: 20px; | |
| right: 20px; | |
| font-size: 1.5rem; | |
| color: #C0C0C0; | |
| } | |
| .hidden-message { | |
| position: fixed; | |
| bottom: 60px; | |
| opacity: 0; | |
| transition: opacity 1s; | |
| font-size: 1.2rem; | |
| color: #8B0000; | |
| } | |
| .hidden-message.show { | |
| opacity: 1; | |
| } | |
| footer { | |
| position: fixed; | |
| bottom: 20px; | |
| font-size: 0.9rem; | |
| color: #606060; | |
| } | |
| .flash-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: white; | |
| opacity: 0; | |
| pointer-events: none; | |
| z-index: 999; | |
| transition: opacity 0.5s; | |
| } | |
| .flash-active { | |
| opacity: 1; | |
| transition: opacity 0.1s; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="counter">Visits: <span id="count">0</span></div> | |
| <div class="container"> | |
| <h1>Fall Into The Depths of Hell</h1> | |
| <button class="flash-btn" id="flashBtn">FLASH!</button> | |
| </div> | |
| <div class="hidden-message" id="hiddenMessage">How deep will you go?</div> | |
| <div class="flash-overlay" id="flashOverlay"></div> | |
| <footer>Hell is empty, the devils are here</footer> | |
| <script> | |
| const flashBtn = document.getElementById('flashBtn'); | |
| const flashOverlay = document.getElementById('flashOverlay'); | |
| const counter = document.getElementById('count'); | |
| const hiddenMessage = document.getElementById('hiddenMessage'); | |
| let count = 0; | |
| let beep; | |
| // Create audio context for the beep sound | |
| try { | |
| const AudioContext = window.AudioContext || window.webkitAudioContext; | |
| const audioCtx = new AudioContext(); | |
| function playBeep() { | |
| beep = audioCtx.createOscillator(); | |
| const gainNode = audioCtx.createGain(); | |
| beep.type = 'sine'; | |
| beep.frequency.value = 2000; // High frequency | |
| beep.connect(gainNode); | |
| gainNode.connect(audioCtx.destination); | |
| gainNode.gain.value = 0.05; // Quiet sound | |
| beep.start(); | |
| setTimeout(() => { | |
| beep.stop(); | |
| }, 100); | |
| } | |
| } catch (e) { | |
| console.log('Web Audio API not supported'); | |
| } | |
| flashBtn.addEventListener('click', () => { | |
| count++; | |
| counter.textContent = count; | |
| // Flash effect | |
| flashOverlay.classList.add('flash-active'); | |
| if (typeof playBeep === 'function') playBeep(); | |
| setTimeout(() => { | |
| flashOverlay.classList.remove('flash-active'); | |
| }, 200); | |
| // Show hidden message after 5 clicks | |
| if (count === 5) { | |
| hiddenMessage.classList.add('show'); | |
| } | |
| // Change button appearance based on count | |
| if (count > 10) { | |
| flashBtn.style.background = 'radial-gradient(circle, #8B0000, #4B0082)'; | |
| } | |
| if (count > 20) { | |
| document.body.style.background = 'linear-gradient(135deg, #111111, #222222)'; | |
| } | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <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> |