130 lines
6.9 KiB
HTML
130 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>CuteBoard Controller</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
* { -webkit-user-select: none; user-select: none; }
|
|
body { background: #0a0a0f; color: #e2e8f0; font-family: system-ui, sans-serif; }
|
|
.team-name { font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; }
|
|
.score { font-weight: 900; font-size: 1.75rem; }
|
|
.card { background: #13131f; border: 1px solid #1e1e30; border-radius: 1rem; transition: border-color 0.3s; }
|
|
.card.online { border-color: #2d2d50; }
|
|
.card.offline { opacity: 0.5; }
|
|
.badge-online { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: #22c55e; }
|
|
.badge-offline { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: #ef4444; }
|
|
.btn { padding: 0.4rem 0.8rem; border-radius: 0.5rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; border: none; transition: filter 0.15s; }
|
|
.btn:hover { filter: brightness(1.2); }
|
|
.btn:active { filter: brightness(0.9); }
|
|
.btn-inc { background: #1e40af; color: white; }
|
|
.btn-dec { background: #1e40af; color: white; }
|
|
.btn-reset { background: #7f1d1d; color: white; }
|
|
.btn-edit { background: #713f12; color: white; }
|
|
.btn-scan { background: #14532d; color: white; font-size: 1rem; padding: 0.6rem 1.5rem; }
|
|
.btn-all-reset { background: #3b0764; color: white; }
|
|
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 100; justify-content: center; align-items: center; }
|
|
.modal-overlay.open { display: flex; }
|
|
.modal { background: #13131f; border: 1px solid #2d2d50; border-radius: 1rem; padding: 2rem; width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; }
|
|
.modal h2 { font-size: 1.5rem; margin-bottom: 1.5rem; }
|
|
.modal label { display: block; font-size: 0.8rem; color: #94a3b8; margin-bottom: 0.3rem; margin-top: 1rem; text-transform: uppercase; letter-spacing: 0.1em; }
|
|
.modal input, .modal select { width: 100%; padding: 0.5rem 0.75rem; border-radius: 0.5rem; background: #1e1e30; border: 1px solid #2d2d50; color: white; font-size: 0.95rem; outline: none; }
|
|
.modal input:focus { border-color: #6366f1; }
|
|
.modal .btn-save { background: #22c55e; color: white; padding: 0.6rem 2rem; font-size: 1rem; margin-top: 1.5rem; }
|
|
input[type="color"] { height: 2.5rem; padding: 0.25rem; cursor: pointer; }
|
|
.tech-details { border-top: 1px solid #1e1e30; padding-top: 0.25rem; }
|
|
.tech-details summary { outline: none; }
|
|
.tech-details summary::-webkit-details-marker { color: #94a3b8; }
|
|
.tech-details[open] { padding-bottom: 0.5rem; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container mx-auto px-4 py-6">
|
|
<div class="flex items-center justify-between mb-8">
|
|
<div>
|
|
<h1 class="text-2xl font-bold tracking-wider">CuteBoard Controller</h1>
|
|
<p class="text-sm text-slate-500 mt-1">Discovered boards are updated automatically</p>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<button class="btn btn-scan" onclick="scanNetwork()">⟳ Scan Network</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="board-grid" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
|
|
<div class="col-span-full text-center text-slate-600 py-16" id="empty-msg">
|
|
Waiting for boards to appear...<br>
|
|
<span class="text-sm">Make sure CuteBoard is running on your Pis</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit Config Modal -->
|
|
<div class="modal-overlay" id="config-modal">
|
|
<div class="modal">
|
|
<h2 id="modal-title">Edit Config</h2>
|
|
<form id="config-form">
|
|
<label>Header Text</label>
|
|
<input type="text" id="edit-header" placeholder="Leave blank to hide">
|
|
|
|
<div class="grid grid-cols-2 gap-4" style="margin-top: 1rem;">
|
|
<div>
|
|
<label>Left Team Name</label>
|
|
<input type="text" id="edit-left-name">
|
|
<label>Left Subtitle</label>
|
|
<input type="text" id="edit-left-subtitle">
|
|
<label>Left Color</label>
|
|
<input type="color" id="edit-left-color">
|
|
</div>
|
|
<div>
|
|
<label>Right Team Name</label>
|
|
<input type="text" id="edit-right-name">
|
|
<label>Right Subtitle</label>
|
|
<input type="text" id="edit-right-subtitle">
|
|
<label>Right Color</label>
|
|
<input type="color" id="edit-right-color">
|
|
</div>
|
|
</div>
|
|
|
|
<details class="tech-details" style="margin-top: 1.5rem;">
|
|
<summary style="cursor:pointer;font-size:0.8rem;color:#94a3b8;text-transform:uppercase;letter-spacing:0.1em;padding:0.5rem 0;user-select:none;">Technical Settings</summary>
|
|
<label>Display Name</label>
|
|
<input type="text" id="edit-display-name" placeholder="e.g. Main Scoreboard">
|
|
<label>Header Font Size (rem)</label>
|
|
<input type="number" id="edit-header-font-size" min="0" step="0.25" placeholder="0 = auto-fit">
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label>Left Name Font Size (rem)</label>
|
|
<input type="number" id="edit-left-font-size" min="0" step="0.25" placeholder="0 = auto-fit">
|
|
<label>Left Subtitle Font Size (rem)</label>
|
|
<input type="number" id="edit-left-subtitle-font-size" min="0" step="0.25" placeholder="0 = relative">
|
|
<label>Left Score Font Size (rem)</label>
|
|
<input type="number" id="edit-left-score-font-size" min="0" step="0.25" placeholder="0 = auto-fit">
|
|
</div>
|
|
<div>
|
|
<label>Right Name Font Size (rem)</label>
|
|
<input type="number" id="edit-right-font-size" min="0" step="0.25" placeholder="0 = auto-fit">
|
|
<label>Right Subtitle Font Size (rem)</label>
|
|
<input type="number" id="edit-right-subtitle-font-size" min="0" step="0.25" placeholder="0 = relative">
|
|
<label>Right Score Font Size (rem)</label>
|
|
<input type="number" id="edit-right-score-font-size" min="0" step="0.25" placeholder="0 = auto-fit">
|
|
</div>
|
|
</div>
|
|
<label>Content Padding Top (rem)</label>
|
|
<input type="number" id="edit-content-padding-top" min="0" step="0.25" placeholder="0 = none">
|
|
<label>Content Gap (rem)</label>
|
|
<input type="number" id="edit-content-gap" min="0" step="0.25" placeholder="1 = default">
|
|
</details>
|
|
|
|
<div class="flex gap-3 justify-end mt-6">
|
|
<button type="button" class="btn" style="background:#374151;color:white;padding:0.6rem 1.5rem;" onclick="closeModal()">Cancel</button>
|
|
<button type="submit" class="btn btn-save" style="margin-top:0">Save Config</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
|
|
</body>
|
|
</html>
|