87 lines
4.0 KiB
HTML
87 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-T">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
||
<title>Nexus Timer</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
<link rel="manifest" href="manifest.json">
|
||
<meta name="theme-color" content="#2A2A3E">
|
||
</head>
|
||
<body>
|
||
<div id="app-container">
|
||
<div id="current-player-area" class="player-area">
|
||
<div class="player-photo-container">
|
||
<img src="assets/default-avatar.svg" alt="Current Player Photo" id="current-player-photo" class="player-photo">
|
||
</div>
|
||
<div class="player-info">
|
||
<h2 id="current-player-name">Current Player</h2>
|
||
<div id="current-player-timer" class="timer-display">00:00</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="next-player-area" class="player-area">
|
||
<div class="player-info">
|
||
<h3 id="next-player-name">Next Player</h3>
|
||
<div id="next-player-timer" class="timer-display small-timer">00:00</div>
|
||
</div>
|
||
<div class="player-photo-container">
|
||
<img src="assets/default-avatar.svg" alt="Next Player Photo" id="next-player-photo" class="player-photo">
|
||
</div>
|
||
</div>
|
||
|
||
<div id="controls">
|
||
<button id="manage-players-btn" class="control-button">Manage Players</button>
|
||
<button id="game-mode-btn" class="control-button">All Timers Mode</button>
|
||
<button id="reset-game-btn" class="control-button">Reset Game</button>
|
||
<button id="mute-btn" class="control-button">🔇 Mute</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="manage-players-modal" class="modal" style="display: none;">
|
||
<div class="modal-content">
|
||
<span class="close-modal-btn">×</span>
|
||
<h2>Manage Players (2-10)</h2>
|
||
<div id="player-list-editor">
|
||
<!-- Player entries will be dynamically added here -->
|
||
</div>
|
||
<div id="all-timers-player-list"></div>
|
||
<div class="player-form-buttons">
|
||
<button id="add-player-form-btn">Add New Player</button>
|
||
<button id="shuffle-players-btn">Shuffle Order</button>
|
||
<button id="reverse-players-btn">Reverse Order</button>
|
||
</div>
|
||
|
||
<div id="add-edit-player-form" style="display: none;">
|
||
<h3 id="player-form-title">Add Player</h3>
|
||
<input type="hidden" id="edit-player-id">
|
||
<label for="player-name-input">Name:</label>
|
||
<input type="text" id="player-name-input" placeholder="Player Name" required>
|
||
|
||
<label for="player-time-input">Initial Time (MM:SS):</label>
|
||
<input type="text" id="player-time-input" placeholder="60:00" value="60:00" pattern="\d{1,2}:\d{2}">
|
||
|
||
<label for="player-photo-capture-input">Player Photo (Tap to use camera):</label>
|
||
<input type="file" id="player-photo-capture-input" accept="image/*" capture="user">
|
||
<img id="player-photo-preview" src="assets/default-avatar.svg" alt="Photo Preview" class="photo-preview-modal">
|
||
<button id="remove-photo-btn" type="button" style="display:none;">Remove Photo</button>
|
||
|
||
|
||
<label for="player-hotkey-input">"Pass/My Pause" Hotkey (single char):</label>
|
||
<input type="text" id="player-hotkey-input" placeholder="e.g., a" maxlength="1">
|
||
|
||
<label>
|
||
<input type="checkbox" id="player-admin-input"> Game Admin (for global hotkeys)
|
||
</label>
|
||
<div class="player-form-actions">
|
||
<button id="save-player-btn">Save Player</button>
|
||
<button id="cancel-edit-player-btn" type="button">Cancel</button>
|
||
</div>
|
||
</div>
|
||
<button id="save-player-management-btn" class="modal-main-action">Done</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html> |