Spaces:
Running
Running
| <html><head><base href="https://websim.ai/c/lottery"><title>Lucky Draw</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: Arial, sans-serif; | |
| background: linear-gradient(135deg, #83a4d4, #b6fbff); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| color: #333; | |
| } | |
| .container { | |
| background: rgba(255, 255, 255, 0.9); | |
| border-radius: 10px; | |
| padding: 30px; | |
| box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37); | |
| text-align: center; | |
| } | |
| h2 { | |
| margin-bottom: 20px; | |
| color: #4a4a4a; | |
| } | |
| #list { | |
| display: block; | |
| margin: 20px 0; | |
| font-size: 24px; | |
| font-weight: bold; | |
| color: #e74c3c; | |
| height: 40px; | |
| line-height: 40px; | |
| } | |
| button { | |
| background: #3498db; | |
| border: none; | |
| color: white; | |
| padding: 10px 20px; | |
| text-align: center; | |
| text-decoration: none; | |
| display: inline-block; | |
| font-size: 16px; | |
| margin: 4px 2px; | |
| cursor: pointer; | |
| border-radius: 5px; | |
| transition: background 0.3s ease; | |
| } | |
| button:hover { | |
| background: #2980b9; | |
| } | |
| button:disabled { | |
| background: #95a5a6; | |
| cursor: not-allowed; | |
| } | |
| .decription { | |
| margin-top: 30px; | |
| font-style: italic; | |
| color: #7f8c8d; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h2>WebSim Lucky Draw</h2> | |
| <div id="list">Ready to Start</div> | |
| <button id="start">Start</button> | |
| <button id="stop" disabled>Stop</button> | |
| <div class="decription"> | |
| <p>Press Start or hit Enter to begin. Press Stop or hit Enter again to end the draw.</p> | |
| </div> | |
| </div> | |
| <script> | |
| const list = document.getElementById('list'); | |
| const start = document.getElementById('start'); | |
| const stop = document.getElementById('stop'); | |
| const prizes = [ | |
| "WebSim Pro Account", | |
| "Virtual Reality Headset", | |
| "AI Assistant Bot", | |
| "Quantum Computer Access", | |
| "Holographic Display", | |
| "Neural Interface", | |
| "Time Machine Demo", | |
| "Space Tourism Ticket", | |
| "Nanomedicine Treatment", | |
| "Better luck next time!" | |
| ]; | |
| let timer = null; | |
| start.addEventListener('click', startDraw); | |
| stop.addEventListener('click', stopDraw); | |
| document.addEventListener('keyup', handleKeyPress); | |
| function startDraw() { | |
| clearInterval(timer); | |
| timer = setInterval(() => { | |
| const randomPrize = prizes[Math.floor(Math.random() * prizes.length)]; | |
| list.textContent = randomPrize; | |
| }, 50); | |
| start.disabled = true; | |
| stop.disabled = false; | |
| } | |
| function stopDraw() { | |
| clearInterval(timer); | |
| start.disabled = false; | |
| stop.disabled = true; | |
| } | |
| function handleKeyPress(e) { | |
| if (e.key === 'Enter') { | |
| if (start.disabled) { | |
| stopDraw(); | |
| } else { | |
| startDraw(); | |
| } | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |