Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DEFRAG.APP // OS</title> | |
| <meta name="apple-mobile-web-app-capable" content="yes"> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> | |
| <meta name="apple-mobile-web-app-title" content="DEFRAG.APP"> | |
| <link rel="manifest" href="/manifest.json"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html, body { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; | |
| background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%); | |
| color: #e0e0e0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 20px; | |
| overflow: hidden; | |
| } | |
| .app { | |
| width: 100%; | |
| max-width: 800px; | |
| height: 100%; | |
| max-height: 900px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| width: 100%; | |
| padding: 20px; | |
| color: #00d9ff; | |
| font-size: 14px; | |
| letter-spacing: 3px; | |
| font-weight: 300; | |
| text-transform: uppercase; | |
| } | |
| .status { | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(0, 217, 255, 0.3); | |
| padding: 8px 16px; | |
| border-radius: 20px; | |
| font-size: 11px; | |
| letter-spacing: 2px; | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| color: #00d9ff; | |
| } | |
| .center { | |
| flex: 1; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| position: relative; | |
| width: 100%; | |
| } | |
| .glow { | |
| position: absolute; | |
| width: 350px; | |
| height: 350px; | |
| border: 1px solid rgba(0, 217, 255, 0.2); | |
| border-radius: 50%; | |
| animation: pulse 4s ease-in-out infinite; | |
| box-shadow: 0 0 30px rgba(0, 217, 255, 0.1); | |
| } | |
| .glow2 { | |
| position: absolute; | |
| width: 300px; | |
| height: 300px; | |
| border: 1px solid rgba(0, 217, 255, 0.15); | |
| border-radius: 50%; | |
| animation: pulse 4s ease-in-out infinite 0.5s; | |
| opacity: 0.7; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| box-shadow: 0 0 20px rgba(0, 217, 255, 0.1); | |
| } | |
| 50% { | |
| box-shadow: 0 0 40px rgba(0, 217, 255, 0.2); | |
| } | |
| } | |
| .sphere { | |
| width: 200px; | |
| height: 200px; | |
| border-radius: 50%; | |
| background: radial-gradient(circle at 30% 30%, rgba(0, 217, 255, 0.4), rgba(0, 217, 255, 0.1)); | |
| box-shadow: 0 0 40px rgba(0, 217, 255, 0.3), inset -20px -20px 40px rgba(0, 0, 0, 0.3); | |
| animation: float 3s ease-in-out infinite; | |
| z-index: 10; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| } | |
| .bottom { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 30px; | |
| padding: 30px 20px 40px 20px; | |
| width: 100%; | |
| } | |
| .message { | |
| text-align: center; | |
| font-size: 18px; | |
| color: #e0e0e0; | |
| font-weight: 300; | |
| letter-spacing: 0.5px; | |
| } | |
| .controls { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 15px; | |
| } | |
| .button { | |
| width: 120px; | |
| height: 120px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, rgba(0, 217, 255, 0.2), rgba(100, 150, 255, 0.2)); | |
| border: 2px solid rgba(0, 217, 255, 0.4); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| box-shadow: 0 8px 32px rgba(0, 217, 255, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.1); | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: #00d9ff; | |
| font-size: 50px; | |
| } | |
| .button:hover { | |
| background: linear-gradient(135deg, rgba(0, 217, 255, 0.3), rgba(100, 150, 255, 0.3)); | |
| border-color: rgba(0, 217, 255, 0.6); | |
| box-shadow: 0 12px 40px rgba(0, 217, 255, 0.25); | |
| } | |
| .button:active { | |
| transform: scale(0.95); | |
| } | |
| .button.recording { | |
| background: linear-gradient(135deg, rgba(255, 0, 100, 0.3), rgba(200, 100, 255, 0.3)); | |
| border-color: rgba(255, 0, 100, 0.6); | |
| color: #ff0064; | |
| animation: recording 0.6s ease-in-out infinite; | |
| } | |
| @keyframes recording { | |
| 0%, 100% { box-shadow: 0 12px 40px rgba(255, 0, 100, 0.25); } | |
| 50% { box-shadow: 0 12px 50px rgba(255, 0, 100, 0.4); } | |
| } | |
| .status-text { | |
| font-size: 13px; | |
| color: #888; | |
| letter-spacing: 1px; | |
| text-transform: uppercase; | |
| } | |
| @media (max-width: 480px) { | |
| .button { | |
| width: 100px; | |
| height: 100px; | |
| font-size: 40px; | |
| } | |
| .sphere { | |
| width: 150px; | |
| height: 150px; | |
| } | |
| .glow { | |
| width: 250px; | |
| height: 250px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="app"> | |
| <div class="header"> | |
| <div>● DEFRAG.APP // OS</div> | |
| <div class="status">SYSTEM IDLE</div> | |
| </div> | |
| <div class="center"> | |
| <div class="glow"></div> | |
| <div class="glow2"></div> | |
| <div class="sphere"></div> | |
| </div> | |
| <div class="bottom"> | |
| <div class="message" id="message">Initialize the Pioneer to begin analysis.</div> | |
| <div class="controls"> | |
| <button class="button" id="mic-btn" title="Start voice input">🎤</button> | |
| <div class="status-text" id="status">Ready to listen</div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| const micBtn = document.getElementById('mic-btn'); | |
| const messageEl = document.getElementById('message'); | |
| const statusEl = document.getElementById('status'); | |
| let isRecording = false; | |
| micBtn.addEventListener('click', async () => { | |
| if (!isRecording) { | |
| try { | |
| const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); | |
| isRecording = true; | |
| micBtn.classList.add('recording'); | |
| statusEl.textContent = 'Listening...'; | |
| messageEl.textContent = 'Analyzing your input...'; | |
| setTimeout(() => stopRecording(), 30000); | |
| } catch (e) { | |
| statusEl.textContent = 'Mic access denied'; | |
| } | |
| } else { | |
| stopRecording(); | |
| } | |
| }); | |
| function stopRecording() { | |
| isRecording = false; | |
| micBtn.classList.remove('recording'); | |
| statusEl.textContent = 'Processing...'; | |
| messageEl.textContent = 'Generating response...'; | |
| setTimeout(() => { | |
| statusEl.textContent = 'Ready to listen'; | |
| messageEl.textContent = 'Analysis complete. Ready for next input.'; | |
| }, 2000); | |
| } | |
| </script> | |
| </body> | |
| </html> |