294 lines
19 KiB
PHP
294 lines
19 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">
|
|
|
|
<div class="timer-workspace-container">
|
|
|
|
<!-- Side Column (History) - MOVED TO LEFT -->
|
|
<div id="timer-side-column" class="timer-side-column d-none">
|
|
<div class="card card-precise p-4 h-100">
|
|
<h4 id="list-title" class="fs-6 fw-bold text-uppercase tracking-widest border-bottom pb-2 mb-3">Activities Completed</h4>
|
|
<div class="table-responsive">
|
|
<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>
|
|
</div>
|
|
|
|
<!-- Main Timer Column -->
|
|
<div class="timer-main-column text-center">
|
|
|
|
<!-- Workspace Header -->
|
|
<div class="d-flex justify-content-between align-items-start mb-4">
|
|
<div class="text-start">
|
|
<h2 id="timer-title" class="text-uppercase tracking-widest fs-small 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="30" 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 class="mb-3">
|
|
<div class="form-check form-switch mb-1">
|
|
<input class="form-check-input" type="checkbox" id="alert-pre-start" checked>
|
|
<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 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 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>
|
|
|
|
<!-- 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="active-activity-name" class="text-primary d-none text-center">Activity Name</div>
|
|
</div>
|
|
|
|
<div class="timer-display font-tabular mb-2" id="main-timer">00:00:00.000</div>
|
|
<div class="timer-sub-display font-tabular mb-4" id="sub-timer">00:00:00</div>
|
|
|
|
<!-- Controls -->
|
|
<div class="d-flex justify-content-center gap-2 mb-5">
|
|
<button id="btn-start" class="btn btn-primary btn-precise px-4">Start</button>
|
|
<button id="btn-pause" class="btn btn-outline-secondary btn-precise px-4">Pause</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>
|
|
<button id="btn-stop" class="btn btn-danger btn-precise px-4">Stop</button>
|
|
<button id="btn-reset" class="btn btn-outline-dark btn-precise px-4">Reset</button>
|
|
</div>
|
|
|
|
<!-- Mode Specific Inputs -->
|
|
<div class="d-flex justify-content-center flex-wrap gap-3 mb-5">
|
|
<div id="countdown-inputs" class="d-none text-start">
|
|
<label class="small text-muted mb-1 d-block">Duration</label>
|
|
<div class="d-flex 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="relay-config" class="d-none text-start">
|
|
<label class="small text-muted mb-1 d-block">Participant Count</label>
|
|
<input type="number" id="participant-count" class="form-control form-control-precise" value="4" min="1" style="width: 100px;">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Custom Timer Builder -->
|
|
<div id="custom-builder" class="d-none mb-5 text-start">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h4 class="fs-6 fw-bold text-uppercase tracking-widest m-0">Activities Chain</h4>
|
|
<button id="btn-add-activity" class="btn btn-outline-primary btn-sm btn-precise">+ Add Activity</button>
|
|
</div>
|
|
<div id="activity-list" class="d-flex flex-column gap-3 mb-3">
|
|
<!-- Activity inputs will be injected here -->
|
|
</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>
|