Something went wrong. Try again.
A fork of https://github.com/crosspoint-reader/crosspoint-reader
Something went wrong. Try again.
4.5 kB · 162 lines
HTML
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>CrossPoint Reader</title> <style> :root { --font-color: #333; --bg: #f5f5f5; --title-color: #2c3e50; --card-bg: #FFF; --label-color: #7f8c8d; --border-color: #eee; --accent-color: rgb(110, 154, 130); --accent-hover-color: #5a8c73; } @media (prefers-color-scheme: dark) { :root { --font-color: #f5f5f5; --bg: #333; --title-color: #ecf0f1; --card-bg: #444; --label-color: #bdc3c7; --border-color: #555; color-scheme: dark; } } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; background-color: var(--bg); color: var(--font-color); } h1 { color: var(--title-color); border-bottom: 2px solid var(--accent-color); padding-bottom: 10px; } h2 { color: var(--title-color); margin-top: 0; } .card { background: var(--card-bg); border-radius: 8px; padding: 20px; margin: 15px 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .info-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-color); } .info-row:last-child { border-bottom: none; } .label { font-weight: 600; color: var(--label-color); } .value { color: var(--title-color); } .status { display: inline-block; padding: 4px 12px; border-radius: 12px; background-color: #27ae60; color: white; font-size: 0.9em; } .nav-links { margin: 20px 0; display: flex; gap: 10px; } .nav-links a { padding: 10px 20px; color: var(--font-color); text-decoration: none; border-radius: 4px; } .nav-links a.active { background-color: var(--accent-color); color: white; } .nav-links a:not(.active):hover { background-color: var(--accent-hover-color); color: white; } </style> </head> <body> <h1>📚 CrossPoint Reader</h1>
<div class="nav-links"> <a href="/" class="active">Home</a> <a href="/files">File Manager</a> <a href="/settings">Settings</a> <a href="/fonts">Fonts</a> </div>
<div class="card"> <h2>Device Status</h2> <div class="info-row"> <span class="label">Serial #</span> <span class="value" id="serial"></span> </div> <div class="info-row"> <span class="label">Version</span> <span class="value" id="version"></span> </div> <div class="info-row"> <span class="label">WiFi Status</span> <span class="status">Connected</span> </div> <div class="info-row"> <span class="label">IP Address</span> <span class="value" id="ip-address"></span> </div> <div class="info-row"> <span class="label">Free Memory</span> <span class="value" id="free-heap"></span> </div> </div>
<div class="card"> <p style="text-align: center; color: #95a5a6; margin: 0"> CrossPoint E-Reader • Open Source </p> </div> <script> async function fetchStatus() { try { const response = await fetch('/api/status'); if (!response.ok) { throw new Error('Failed to fetch status: ' + response.status + ' ' + response.statusText); } const data = await response.json(); document.getElementById('version').textContent = data.version || 'N/A'; document.getElementById('serial').textContent = data.serial; document.getElementById('ip-address').textContent = data.ip || 'N/A'; document.getElementById('free-heap').textContent = data.freeHeap ? data.freeHeap.toLocaleString() + ' bytes' : 'N/A'; } catch (error) { console.error('Error fetching status:', error); } }
// Fetch status on page load window.onload = fetchStatus; </script> </body></html>