Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Word Grid Solver - Dashboard</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg: #0a0a0c; | |
| --accent: #6c5ce7; | |
| --accent-glow: rgba(108, 92, 231, 0.3); | |
| --card-bg: rgba(255, 255, 255, 0.03); | |
| --text: #ffffff; | |
| --secondary-text: #a0a0a8; | |
| } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| font-family: 'Outfit', sans-serif; | |
| background-color: var(--bg); | |
| color: var(--text); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 100vh; | |
| overflow: hidden; | |
| } | |
| .background-blob { | |
| position: absolute; | |
| width: 600px; | |
| height: 600px; | |
| background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%); | |
| z-index: -1; | |
| filter: blur(50px); | |
| animation: move 20s infinite alternate linear; | |
| } | |
| @keyframes move { | |
| from { | |
| transform: translate(-20%, -20%); | |
| } | |
| to { | |
| transform: translate(20%, 20%); | |
| } | |
| } | |
| .container { | |
| width: 90%; | |
| max-width: 600px; | |
| text-align: center; | |
| backdrop-filter: blur(10px); | |
| padding: 40px; | |
| border-radius: 30px; | |
| background: var(--card-bg); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); | |
| animation: fadeIn 1s ease-out; | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| h1 { | |
| font-size: 2.5rem; | |
| font-weight: 800; | |
| margin-bottom: 10px; | |
| background: linear-gradient(135deg, #fff 0%, var(--accent) 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .bot-username { | |
| font-size: 1.2rem; | |
| color: var(--accent); | |
| font-weight: 600; | |
| margin-bottom: 30px; | |
| display: inline-block; | |
| background: var(--accent-glow); | |
| padding: 5px 15px; | |
| border-radius: 100px; | |
| border: 1px solid var(--accent); | |
| } | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 20px; | |
| margin-top: 20px; | |
| } | |
| .stat-card { | |
| background: rgba(255, 255, 255, 0.03); | |
| padding: 20px; | |
| border-radius: 20px; | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| transition: transform 0.3s ease; | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-5px); | |
| background: rgba(255, 255, 255, 0.05); | |
| } | |
| .stat-value { | |
| font-size: 1.8rem; | |
| font-weight: 600; | |
| display: block; | |
| margin-bottom: 5px; | |
| } | |
| .stat-label { | |
| font-size: 0.8rem; | |
| color: var(--secondary-text); | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .footer { | |
| margin-top: 50px; | |
| color: var(--secondary-text); | |
| font-size: 0.9rem; | |
| } | |
| .credits { | |
| font-weight: 600; | |
| color: #fff; | |
| letter-spacing: 0.5px; | |
| } | |
| .status-dot { | |
| width: 10px; | |
| height: 10px; | |
| background-color: #00ff88; | |
| border-radius: 50%; | |
| display: inline-block; | |
| margin-right: 8px; | |
| box-shadow: 0 0 10px #00ff88; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| } | |
| 100% { | |
| opacity: 1; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="background-blob"></div> | |
| <div class="container"> | |
| <div style="margin-bottom: 20px;"> | |
| <span class="status-dot"></span> <b>Bot Active</b> | |
| </div> | |
| <h1>Word Grid Solver</h1> | |
| <div class="bot-username" id="bot-handle">@loading...</div> | |
| <div class="stats-grid"> | |
| <div class="stat-card"> | |
| <span class="stat-value" id="stats-images">0</span> | |
| <span class="stat-label">Scanned</span> | |
| </div> | |
| <div class="stat-card"> | |
| <span class="stat-value" id="stats-words">0</span> | |
| <span class="stat-label">Words</span> | |
| </div> | |
| <div class="stat-card"> | |
| <span class="stat-value" id="stats-uptime">0s</span> | |
| <span class="stat-label">Uptime</span> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| wordsgrid solver by <span class="credits">alexainc</span> | |
| </div> | |
| </div> | |
| <script> | |
| function updateStats() { | |
| fetch('/api/stats') | |
| .then(r => r.json()) | |
| .then(data => { | |
| document.getElementById('bot-handle').innerText = 't.me/' + data.botUsername; | |
| document.getElementById('stats-images').innerText = data.imagesProcessed; | |
| document.getElementById('stats-words').innerText = data.wordsFound; | |
| const uptime = data.uptime; | |
| let uptimeStr = uptime + 's'; | |
| if (uptime > 3600) uptimeStr = Math.floor(uptime / 3600) + 'h'; | |
| else if (uptime > 60) uptimeStr = Math.floor(uptime / 60) + 'm'; | |
| document.getElementById('stats-uptime').innerText = uptimeStr; | |
| }); | |
| } | |
| setInterval(updateStats, 2000); | |
| updateStats(); | |
| </script> | |
| </body> | |
| </html> |