348 lines
23 KiB
PHP
348 lines
23 KiB
PHP
<?php
|
|
// PHP Header for Dynamic Meta Tags
|
|
$projectName = $_SERVER['PROJECT_NAME'] ?? 'Interactive Timer';
|
|
$projectDesc = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Modern, professional timing website for all your needs.';
|
|
$projectImage = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title><?php echo htmlspecialchars($projectName); ?></title>
|
|
<meta name="description" content="<?php echo htmlspecialchars($projectDesc); ?>">
|
|
|
|
<!-- Open Graph / Twitter -->
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:title" content="<?php echo htmlspecialchars($projectName); ?>">
|
|
<meta property="og:description" content="<?php echo htmlspecialchars($projectDesc); ?>">
|
|
<?php if ($projectImage): ?>
|
|
<meta property="og:image" content="<?php echo htmlspecialchars($projectImage); ?>">
|
|
<meta name="twitter:image" content="<?php echo htmlspecialchars($projectImage); ?>">
|
|
<?php endif; ?>
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
|
|
<!-- CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@700&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="navbar navbar-light border-bottom py-3">
|
|
<div class="container d-flex justify-content-between align-items-center">
|
|
<a class="navbar-brand fw-bold text-uppercase fs-6 tracking-wider" href="#" id="brand-link">
|
|
<span class="text-primary">•</span> <?php echo htmlspecialchars($projectName); ?>
|
|
</a>
|
|
<div id="nav-actions" class="d-flex align-items-center gap-3">
|
|
<!-- Dark Mode Toggle -->
|
|
<button class="dark-mode-toggle" id="dark-mode-toggle" title="Toggle Dark Mode">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16" id="moon-icon">
|
|
<path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
|
|
</svg>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16" id="sun-icon" class="d-none">
|
|
<path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="container py-5">
|
|
|
|
<!-- VIEW: LANDING -->
|
|
<section id="view-landing" class="view-section active text-center">
|
|
<div class="mb-5">
|
|
<p class="text-muted text-uppercase tracking-widest fs-small mb-2">Current Local Time</p>
|
|
<h1 class="hero-clock font-tabular mb-4" id="landing-clock">00:00:00</h1>
|
|
<p class="lead text-secondary mx-auto" style="max-width: 600px;">
|
|
Select a timer mode below to begin. Modern, precise timing for any activity.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="row g-4 justify-content-center">
|
|
<div class="col-md-4 col-lg-3">
|
|
<div class="card card-precise p-4 h-100 cursor-pointer" onclick="app.setMode('time-watch')">
|
|
<h3 class="fs-5 mb-2 fw-bold">Time-watch</h3>
|
|
<p class="text-muted small">The basic timer model. Start, pause, or stop at any moment.</p>
|
|
<button class="btn btn-outline-primary btn-precise mt-auto">Select</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 col-lg-3">
|
|
<div class="card card-precise p-4 h-100 cursor-pointer" onclick="app.setMode('countdown')">
|
|
<h3 class="fs-5 mb-2 fw-bold">Countdown</h3>
|
|
<p class="text-muted small">Enter a duration and watch it count down to zero.</p>
|
|
<button class="btn btn-outline-primary btn-precise mt-auto">Select</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 col-lg-3">
|
|
<div class="card card-precise p-4 h-100 cursor-pointer" onclick="app.setMode('stopwatch')">
|
|
<h3 class="fs-5 mb-2 fw-bold">Stopwatch</h3>
|
|
<p class="text-muted small">Precision timing without pause functionality.</p>
|
|
<button class="btn btn-outline-primary btn-precise mt-auto">Select</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 col-lg-3">
|
|
<div class="card card-precise p-4 h-100 cursor-pointer" onclick="app.setMode('lap')">
|
|
<h3 class="fs-5 mb-2 fw-bold">Lap Timer</h3>
|
|
<p class="text-muted small">Log splits and find your best lap performance.</p>
|
|
<button class="btn btn-outline-primary btn-precise mt-auto">Select</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 col-lg-3">
|
|
<div class="card card-precise p-4 h-100 cursor-pointer" onclick="app.setMode('relay')">
|
|
<h3 class="fs-5 mb-2 fw-bold">Relay Timer</h3>
|
|
<p class="text-muted small">Participant split tracking for multi-stage timing.</p>
|
|
<button class="btn btn-outline-primary btn-precise mt-auto">Select</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 col-lg-3">
|
|
<div class="card card-precise p-4 h-100 cursor-pointer" onclick="app.setMode('custom')">
|
|
<h3 class="fs-5 mb-2 fw-bold">Custom Timer</h3>
|
|
<p class="text-muted small">Create multiple chained activities.</p>
|
|
<button class="btn btn-outline-primary btn-precise mt-auto">Select</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- VIEW: TIMER WORKSPACE -->
|
|
<section id="view-timer" class="view-section">
|
|
|
|
<!-- Workspace Header - SPANS BOTH COLUMNS -->
|
|
<div class="d-flex justify-content-between align-items-center mb-4 mx-auto" style="max-width: 1080px;">
|
|
<div class="text-start">
|
|
<h2 id="timer-title" class="text-uppercase tracking-widest fs-5 fw-bold text-muted mb-0">Timer</h2>
|
|
</div>
|
|
<div class="text-end d-flex flex-column align-items-end gap-2">
|
|
<!-- Options Dropdown -->
|
|
<div class="dropdown">
|
|
<button class="btn btn-outline-secondary btn-sm btn-precise dropdown-toggle" type="button" id="optionsDropdown" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
|
|
Options
|
|
</button>
|
|
<div class="dropdown-menu dropdown-menu-end p-4 card-precise" aria-labelledby="optionsDropdown" style="width: 320px;">
|
|
<h6 class="dropdown-header px-0 text-uppercase tracking-widest mb-3 border-bottom pb-2">Global Settings</h6>
|
|
|
|
<div class="mb-4">
|
|
<label class="small text-muted mb-1 d-block text-uppercase tracking-wider fs-tiny">Display Format</label>
|
|
<select id="format-select" class="form-select form-control-precise w-100">
|
|
<option value="hh:mm:ss.ms">HH:MM:SS.ms</option>
|
|
<option value="hh:mm:ss">HH:MM:SS</option>
|
|
<option value="hours">Hours Only</option>
|
|
<option value="minutes">Minutes Only</option>
|
|
<option value="seconds">Seconds Only</option>
|
|
<option value="seconds.ms">Seconds.ms Only</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div id="opt-countdown-container" class="mb-4 d-none">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="setting-is-countdown">
|
|
<label class="form-check-label fw-bold small" for="setting-is-countdown">Countdown Mode</label>
|
|
</div>
|
|
<p class="text-muted fs-tiny mt-1 mb-0">Toggle between counting up or down.</p>
|
|
</div>
|
|
|
|
<!-- Custom Mode Specific Options -->
|
|
<div id="custom-options" class="mb-4 d-none">
|
|
<label class="d-block small text-muted text-uppercase tracking-wider mb-2 border-bottom pb-1">Rest Settings</label>
|
|
<div class="mb-2">
|
|
<label class="small fw-bold d-block mb-1 fs-tiny">Default Rest Duration (sec)</label>
|
|
<input type="number" id="setting-rest-duration" class="form-control form-control-precise form-control-sm" value="5" min="1">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="alert-settings-box">
|
|
<label class="d-block small text-muted text-uppercase tracking-wider mb-2 border-bottom pb-1">Sound Alerts</label>
|
|
|
|
<div id="pre-start-section" class="mb-3">
|
|
<div class="form-check form-switch mb-1">
|
|
<input class="form-check-input" type="checkbox" id="alert-pre-start">
|
|
<label class="form-check-label fw-bold small" for="alert-pre-start">Pre-start</label>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-2 ps-4">
|
|
<input type="number" id="alert-pre-start-seconds" class="form-control form-control-precise form-control-sm" value="3" min="0" style="width: 60px;">
|
|
<span class="fs-tiny text-muted">seconds</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="pre-finish-section" class="mb-3">
|
|
<div class="form-check form-switch mb-1">
|
|
<input class="form-check-input" type="checkbox" id="alert-pre-end" checked>
|
|
<label class="form-check-label fw-bold small" for="alert-pre-end">Pre-finish</label>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-2 ps-4">
|
|
<input type="number" id="alert-pre-end-seconds" class="form-control form-control-precise form-control-sm" value="3" min="0" style="width: 60px;">
|
|
<span class="fs-tiny text-muted">seconds</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="rest-alert-container" class="mb-3 d-none">
|
|
<div class="form-check form-switch mb-1">
|
|
<input class="form-check-input" type="checkbox" id="alert-rest-pre-end" checked>
|
|
<label class="form-check-label fw-bold small" for="alert-rest-pre-end">Rest Pre-finish</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="completion-section" class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="alert-completion" checked>
|
|
<label class="form-check-label fw-bold small" for="alert-completion">Completion Sound</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timer-workspace-container">
|
|
|
|
<!-- Side Column (History / Builder / Relay Config) - LEFT -->
|
|
<div id="timer-side-column" class="timer-side-column d-none">
|
|
<div class="card card-precise p-4 h-100">
|
|
|
|
<!-- History Section -->
|
|
<div id="history-section">
|
|
<div class="d-flex justify-content-between align-items-center border-bottom pb-2 mb-3">
|
|
<h4 id="list-title" class="fs-6 fw-bold text-uppercase tracking-widest m-0">Activities Completed</h4>
|
|
<select id="lap-sort" class="form-select form-select-sm d-none" style="width: 140px;">
|
|
<option value="recorded">Recorded</option>
|
|
<option value="best">Best to Worst</option>
|
|
<option value="worse">Worse to Best</option>
|
|
</select>
|
|
</div>
|
|
<div class="table-responsive" id="history-table-container">
|
|
<table class="table table-precise align-middle">
|
|
<thead id="list-head">
|
|
<tr>
|
|
<th>Activity</th>
|
|
<th>Duration</th>
|
|
<th class="text-end">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="list-body">
|
|
<!-- Data injected here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Custom Timer Builder Section -->
|
|
<div id="custom-builder" class="d-none text-start">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<h4 class="fs-6 fw-bold text-uppercase tracking-widest m-0">Activities</h4>
|
|
<span id="custom-total-duration" class="fs-tiny text-primary fw-bold"></span>
|
|
</div>
|
|
<div class="d-flex gap-1">
|
|
<button id="btn-save-session-builder" class="btn btn-outline-success btn-sm btn-precise">Save</button>
|
|
<button id="btn-reset-builder" class="btn btn-outline-dark btn-sm btn-precise">Reset</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="activity-list" class="d-flex flex-column gap-2 mb-3">
|
|
<!-- Activity inputs will be injected here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Relay Configuration Section -->
|
|
<div id="relay-config" class="d-none text-start">
|
|
<h4 class="fs-6 fw-bold text-uppercase tracking-widest mb-3 border-bottom pb-2">Participants</h4>
|
|
<div id="relay-participant-count-box" class="mb-3">
|
|
<label class="small text-muted mb-1 d-block">Participant Count (Max 12)</label>
|
|
<input type="number" id="participant-count" class="form-control form-control-precise" value="4" min="1" max="12" style="width: 80px;">
|
|
</div>
|
|
<div id="participant-names-container" class="d-flex flex-column gap-2">
|
|
<!-- Name inputs injected here -->
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Timer Column -->
|
|
<div class="timer-main-column text-center">
|
|
|
|
<!-- Session Title & Active Activity - CENTERED -->
|
|
<div class="mb-5 text-center mx-auto" style="max-width: 500px;">
|
|
<label class="small text-muted mb-1 d-block text-uppercase tracking-wider">Session Name / Title</label>
|
|
<input type="text" id="session-title" class="form-control form-control-precise fs-4 fw-bold mb-2 text-center" placeholder="Enter title to begin...">
|
|
|
|
<div id="countdown-inputs" class="d-none text-center mt-3">
|
|
<label class="small text-muted mb-1 d-block">Duration</label>
|
|
<div class="d-flex justify-content-center gap-1 align-items-center">
|
|
<input type="number" id="input-h" class="form-control form-control-precise" placeholder="H" style="width: 70px;">
|
|
<span>:</span>
|
|
<input type="number" id="input-m" class="form-control form-control-precise" placeholder="M" style="width: 70px;">
|
|
<span>:</span>
|
|
<input type="number" id="input-s" class="form-control form-control-precise" placeholder="S" style="width: 70px;">
|
|
</div>
|
|
</div>
|
|
|
|
<div id="active-activity-name" class="text-primary d-none text-center mt-2">Activity Name</div>
|
|
|
|
<!-- Relay Active Participant Container -->
|
|
<div id="relay-active-participant-container" class="d-none mt-3 p-3 border rounded bg-light">
|
|
<div class="d-flex align-items-center justify-content-center gap-3">
|
|
<span id="relay-active-name" class="fw-bold fs-5">Participant Name</span>
|
|
<button id="btn-relay-split" class="btn btn-primary btn-sm btn-precise">Split</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timer-display font-tabular mb-2" id="main-timer">00:00:00</div>
|
|
<div class="timer-relay-participant font-tabular mb-4 d-none" id="relay-participant-timer" style="font-size: 2.5rem; opacity: 0.8;">00:00:00.00</div>
|
|
<div class="timer-sub-display font-tabular mb-4 d-none" id="sub-timer">00:00:00</div>
|
|
|
|
<!-- Controls -->
|
|
<!-- Toggle Display Mode -->
|
|
<div id="display-mode-container" class="form-check form-switch d-flex justify-content-center mb-3 d-none">
|
|
<input class="form-check-input me-2" type="checkbox" id="toggle-display-mode">
|
|
<label class="form-check-label small text-muted text-uppercase tracking-wider" for="toggle-display-mode">Activity Progress</label>
|
|
</div>
|
|
<div class="d-flex justify-content-center flex-wrap gap-2 mb-5">
|
|
<button id="btn-start" class="btn btn-primary btn-precise px-4">Start</button>
|
|
<button id="btn-reset" class="btn btn-outline-dark btn-precise px-4">Reset</button>
|
|
<button id="btn-pause" class="btn btn-outline-secondary btn-precise px-4">Pause</button>
|
|
<button id="btn-stop" class="btn btn-danger btn-precise px-4">Stop</button>
|
|
<button id="btn-save-main" class="btn btn-outline-success btn-precise px-4 d-none">Save</button>
|
|
<button id="btn-lap" class="btn btn-outline-primary btn-precise px-4 d-none">Lap</button>
|
|
<button id="btn-next" class="btn btn-outline-primary btn-precise px-4 d-none">Next</button>
|
|
</div>
|
|
|
|
<!-- Lap Results Container (placed under timer when stopped) -->
|
|
<div id="lap-results-container" class="d-none mt-5 text-start mx-auto" style="max-width: 600px;">
|
|
</div>
|
|
|
|
<!-- Saved Sessions Section (Dropdown) -->
|
|
<div id="saved-timers-container" class="mt-4 pt-4 border-top d-none mx-auto" style="max-width: 500px;">
|
|
<h4 class="fs-6 fw-bold text-uppercase tracking-widest mb-3">Saved Sessions</h4>
|
|
<div class="d-flex gap-2">
|
|
<select id="saved-timers-dropdown" class="form-select form-control-precise">
|
|
<option value="">Select a saved session...</option>
|
|
</select>
|
|
<button id="btn-delete-saved" class="btn btn-outline-danger btn-precise">Delete</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="border-top py-4 mt-5">
|
|
<div class="container text-center">
|
|
<p class="small text-muted mb-0">© <?php echo date('Y'); ?> <?php echo htmlspecialchars($projectName); ?>. Precise & Professional Timing.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Scripts -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
|
</body>
|
|
</html>
|