| <!DOCTYPE html> |
| <html lang="en"> |
|
|
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Proxy Rotation Service</title> |
| <style> |
| :root { |
| --bg-color: #0f172a; |
| --card-bg: #1e293b; |
| --text-primary: #f1f5f9; |
| --text-secondary: #94a3b8; |
| --accent: #3b82f6; |
| --success: #22c55e; |
| --error: #ef4444; |
| } |
| |
| body { |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| background-color: var(--bg-color); |
| color: var(--text-primary); |
| margin: 0; |
| padding: 2rem; |
| line-height: 1.6; |
| } |
| |
| .container { |
| max-width: 1200px; |
| margin: 0 auto; |
| } |
| |
| header { |
| margin-bottom: 2rem; |
| border-bottom: 1px solid #334155; |
| padding-bottom: 1rem; |
| } |
| |
| h1 { |
| font-weight: 300; |
| font-size: 2.5rem; |
| margin: 0; |
| } |
| |
| .status-card { |
| background-color: var(--card-bg); |
| border-radius: 12px; |
| padding: 2rem; |
| margin-bottom: 2rem; |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
| |
| .status-item { |
| text-align: center; |
| } |
| |
| .status-label { |
| color: var(--text-secondary); |
| font-size: 0.9rem; |
| margin-bottom: 0.5rem; |
| } |
| |
| .status-value { |
| font-size: 1.5rem; |
| font-weight: bold; |
| } |
| |
| .status-value.highlight { |
| color: var(--accent); |
| } |
| |
| .proxy-list { |
| background-color: var(--card-bg); |
| border-radius: 12px; |
| overflow: hidden; |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); |
| } |
| |
| table { |
| width: 100%; |
| border-collapse: collapse; |
| } |
| |
| th, |
| td { |
| padding: 1rem; |
| text-align: left; |
| border-bottom: 1px solid #334155; |
| } |
| |
| th { |
| background-color: #334155; |
| color: var(--text-primary); |
| font-weight: 600; |
| } |
| |
| tr:hover { |
| background-color: #273548; |
| } |
| |
| .latency-good { |
| color: var(--success); |
| } |
| |
| .latency-bad { |
| color: var(--error); |
| } |
| |
| .loading { |
| text-align: center; |
| padding: 2rem; |
| color: var(--text-secondary); |
| } |
| </style> |
| </head> |
|
|
| <body> |
| <div class="container"> |
| <header> |
| <div style="display: flex; justify-content: space-between; align-items: center;"> |
| <h1>Proxy Rotation Service</h1> |
| <div style="font-size: 0.8rem; color: var(--text-secondary);">Auto-refreshing every 2s</div> |
| </div> |
| </header> |
|
|
| |
| <div class="status-card"> |
| <div class="status-item"> |
| <div class="status-label">Current Best Proxy</div> |
| <div class="status-value highlight" id="best-proxy-url">Searching...</div> |
| </div> |
| <div class="status-item"> |
| <div class="status-label">Protocol</div> |
| <div class="status-value" id="best-proxy-protocol">-</div> |
| </div> |
| <div class="status-item"> |
| <div class="status-label">Latency</div> |
| <div class="status-value" id="best-proxy-latency">-</div> |
| </div> |
| <div class="status-item"> |
| <div class="status-label">Total Active Proxies</div> |
| <div class="status-value" id="total-proxies">0</div> |
| </div> |
| </div> |
|
|
| |
| <div class="proxy-list"> |
| <table> |
| <thead> |
| <tr> |
| <th>Proxy URL</th> |
| <th>Protocol</th> |
| <th>IP</th> |
| <th>Port</th> |
| <th>Latency (ms)</th> |
| </tr> |
| </thead> |
| <tbody id="proxy-table-body"> |
| |
| </tbody> |
| </table> |
| <div id="loading-msg" class="loading">Waiting for results...</div> |
| </div> |
| </div> |
|
|
| <script> |
| async def updateDashboard() { |
| try { |
| |
| const statusRes = await fetch('/api/status'); |
| const statusData = await statusRes.json(); |
| |
| const best = statusData.best_proxy; |
| document.getElementById('total-proxies').innerText = statusData.total_available; |
| |
| if (best) { |
| document.getElementById('best-proxy-url').innerText = best.url; |
| document.getElementById('best-proxy-protocol').innerText = best.protocol.toUpperCase(); |
| |
| const latency = best.latency.toFixed(2); |
| const latEl = document.getElementById('best-proxy-latency'); |
| latEl.innerText = latency + ' ms'; |
| latEl.className = 'status-value ' + (best.latency < 200 ? 'latency-good' : 'latency-bad'); |
| } else { |
| document.getElementById('best-proxy-url').innerText = "Searching..."; |
| document.getElementById('best-proxy-protocol').innerText = "-"; |
| document.getElementById('best-proxy-latency').innerText = "-"; |
| } |
| |
| |
| const listRes = await fetch('/api/proxies'); |
| const listData = await listRes.json(); |
| |
| const tbody = document.getElementById('proxy-table-body'); |
| tbody.innerHTML = ''; |
| |
| if (listData.proxies.length > 0) { |
| document.getElementById('loading-msg').style.display = 'none'; |
| listData.proxies.forEach(p => { |
| const tr = document.createElement('tr'); |
| const latClass = p.latency < 200 ? 'latency-good' : 'latency-bad'; |
| tr.innerHTML = ` |
| <td>${p.url}</td> |
| <td>${p.protocol}</td> |
| <td>${p.ip}</td> |
| <td>${p.port}</td> |
| <td class="${latClass}">${p.latency.toFixed(2)}</td> |
| `; |
| tbody.appendChild(tr); |
| }); |
| } |
| |
| } catch (e) { |
| console.error("Error updating dashboard:", e); |
| } |
| } |
| |
| |
| updateDashboard(); |
| |
| |
| setInterval(updateDashboard, 2000); |
| </script> |
| </body> |
|
|
| </html> |
