2HoursProject/game-timer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

clean up

Browse Source
This commit is contained in:
cpu
2025-03-28 22:36:08 +01:00
parent 08632ee711
commit 5763407edc
33 changed files with 664 additions and 491 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
public/index.html Normal file
View File

@@ -0,0 +1,130 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#2c3e50">
<title>Game Timer</title>
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="app-container">
<header class="header">
<div class="game-controls">
<button id="gameButton" class="game-button">Start Game</button>
</div>
<div class="header-buttons">
<button id="resetButton" class="header-button" title="Reset All Data">
<i class="fas fa-redo-alt"></i>
</button>
<button id="addPlayerButton" class="header-button" title="Add New Player">
<i class="fas fa-user-plus"></i>
</button>
<button id="setupButton" class="header-button" title="Setup Current Player">
<i class="fas fa-cog"></i>
</button>
</div>
</header>
<div class="carousel-container">
<div id="carousel" class="carousel">
<!-- Player cards will be dynamically inserted here -->
</div>
</div>
</div>
<!-- Player Edit Modal -->
<div id="playerModal" class="modal">
<div class="modal-content">
<h2 id="modalTitle">Edit Player</h2>
<form id="playerForm">
<div class="form-group">
<label for="playerName">Name</label>
<input type="text" id="playerName" required>
</div>
<div class="form-group">
<label for="playerImage">Image</label>
<div class="image-input-container">
<input type="file" id="playerImage" accept="image/*">
<button type="button" id="cameraButton" class="camera-button">
<i class="fas fa-camera"></i> Take Photo
</button>
</div>
<div id="imagePreview" class="player-image" style="margin-top: 0.5rem;">
<i class="fas fa-user"></i>
</div>
</div>
<div id="playerTimeContainer" class="form-group">
<label for="playerTime">Time (minutes)</label>
<input type="number" id="playerTime" min="1" max="180" value="5" required>
</div>
<div id="remainingTimeContainer" class="form-group" style="display: none;">
<label for="playerRemainingTime">Remaining Time (MM:SS)</label>
<input type="text" id="playerRemainingTime" pattern="[0-9]{2}:[0-9]{2}" placeholder="05:00">
<small>Format: Minutes:Seconds (e.g., 05:30)</small>
</div>
<div class="form-buttons">
<button type="button" id="cancelButton" class="cancel-button">Cancel</button>
<button type="submit" class="save-button">Save</button>
</div>
<div class="form-buttons delete-button-container">
<button type="button" id="deletePlayerButton" class="delete-button">Delete Player</button>
</div>
</form>
</div>
</div>
<!-- Reset Confirmation Modal -->
<div id="resetModal" class="modal">
<div class="modal-content">
<h2>Reset All Data</h2>
<p>Are you sure you want to reset all players and timers? This action cannot be undone.</p>
<div class="form-buttons">
<button type="button" id="resetCancelButton" class="cancel-button">Cancel</button>
<button type="button" id="resetConfirmButton" class="save-button">Reset</button>
</div>
</div>
</div>
<!-- Camera Capture UI -->
<div id="cameraContainer" class="camera-container">
<div class="camera-view">
<video id="cameraView" autoplay playsinline></video>
<canvas id="cameraCanvas" style="display: none;"></canvas>
</div>
<div class="camera-controls">
<button id="cameraCancelButton" class="camera-button-cancel">Cancel</button>
<button id="cameraCaptureButton" class="camera-button-large"></button>
</div>
</div>
<!-- Main application script -->
<script type="module" src="../src/js/app.js"></script>
<script>
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("sw.js")
.then(() => console.log("Service Worker Registered"))
.catch((err) => console.log("Service Worker Failed", err));
}
</script>
<script>
// Request notification permission on page load
document.addEventListener('DOMContentLoaded', () => {
if ('Notification' in window) {
Notification.requestPermission().then(permission => {
console.log('Notification permission:', permission);
});
}
});
</script>
<footer class="app-footer">
<div class="author-info">
<p>Vibe coded by Martin</p>
<p>Version 0.0.1</p>
</div>
</footer>
</body>
</html>