alpha_base
This commit is contained in:
Flatlogic Bot
parent
f34b93fa26
commit
9b97fdeae8
@ -1,302 +1,179 @@
|
|||||||
|
:root {
|
||||||
|
--bg-color: #ffffff;
|
||||||
|
--surface-color: #f9fafb;
|
||||||
|
--text-primary: #111827;
|
||||||
|
--text-secondary: #6b7280;
|
||||||
|
--border-color: #e5e7eb;
|
||||||
|
--accent-color: #3b82f6;
|
||||||
|
--accent-hover: #2563eb;
|
||||||
|
--danger-color: #ef4444;
|
||||||
|
--success-color: #10b981;
|
||||||
|
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
|
background-color: var(--bg-color);
|
||||||
background-size: 400% 400%;
|
color: var(--text-primary);
|
||||||
animation: gradient 15s ease infinite;
|
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||||
color: #212529;
|
-webkit-font-smoothing: antialiased;
|
||||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
||||||
font-size: 14px;
|
|
||||||
margin: 0;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-wrapper {
|
.font-tabular {
|
||||||
display: flex;
|
font-variant-numeric: tabular-nums;
|
||||||
align-items: center;
|
font-family: var(--font-mono);
|
||||||
justify-content: center;
|
|
||||||
min-height: 100vh;
|
|
||||||
width: 100%;
|
|
||||||
padding: 20px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes gradient {
|
/* Landing Clock */
|
||||||
0% {
|
.hero-clock {
|
||||||
background-position: 0% 50%;
|
font-size: clamp(4rem, 15vw, 10rem);
|
||||||
}
|
|
||||||
50% {
|
|
||||||
background-position: 100% 50%;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
background-position: 0% 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-container {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 600px;
|
|
||||||
background: rgba(255, 255, 255, 0.85);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
||||||
border-radius: 20px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 85vh;
|
|
||||||
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
|
|
||||||
backdrop-filter: blur(15px);
|
|
||||||
-webkit-backdrop-filter: blur(15px);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-header {
|
|
||||||
padding: 1.5rem;
|
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
|
||||||
background: rgba(255, 255, 255, 0.5);
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-messages {
|
|
||||||
flex: 1;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding: 1.5rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Custom Scrollbar */
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background: rgba(255, 255, 255, 0.3);
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.message {
|
|
||||||
max-width: 85%;
|
|
||||||
padding: 0.85rem 1.1rem;
|
|
||||||
border-radius: 16px;
|
|
||||||
line-height: 1.5;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
|
|
||||||
animation: fadeIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from { opacity: 0; transform: translateY(20px) scale(0.95); }
|
|
||||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.message.visitor {
|
|
||||||
align-self: flex-end;
|
|
||||||
background: linear-gradient(135deg, #212529 0%, #343a40 100%);
|
|
||||||
color: #fff;
|
|
||||||
border-bottom-right-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message.bot {
|
|
||||||
align-self: flex-start;
|
|
||||||
background: #ffffff;
|
|
||||||
color: #212529;
|
|
||||||
border-bottom-left-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-input-area {
|
|
||||||
padding: 1.25rem;
|
|
||||||
background: rgba(255, 255, 255, 0.5);
|
|
||||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-input-area form {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-input-area input {
|
|
||||||
flex: 1;
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 0.75rem 1rem;
|
|
||||||
outline: none;
|
|
||||||
background: rgba(255, 255, 255, 0.9);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-input-area input:focus {
|
|
||||||
border-color: #23a6d5;
|
|
||||||
box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-input-area button {
|
|
||||||
background: #212529;
|
|
||||||
color: #fff;
|
|
||||||
border: none;
|
|
||||||
padding: 0.75rem 1.5rem;
|
|
||||||
border-radius: 12px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-weight: 600;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-input-area button:hover {
|
|
||||||
background: #000;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Background Animations */
|
|
||||||
.bg-animations {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
z-index: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blob {
|
|
||||||
position: absolute;
|
|
||||||
width: 500px;
|
|
||||||
height: 500px;
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
border-radius: 50%;
|
|
||||||
filter: blur(80px);
|
|
||||||
animation: move 20s infinite alternate cubic-bezier(0.45, 0, 0.55, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.blob-1 {
|
|
||||||
top: -10%;
|
|
||||||
left: -10%;
|
|
||||||
background: rgba(238, 119, 82, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.blob-2 {
|
|
||||||
bottom: -10%;
|
|
||||||
right: -10%;
|
|
||||||
background: rgba(35, 166, 213, 0.4);
|
|
||||||
animation-delay: -7s;
|
|
||||||
width: 600px;
|
|
||||||
height: 600px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blob-3 {
|
|
||||||
top: 40%;
|
|
||||||
left: 30%;
|
|
||||||
background: rgba(231, 60, 126, 0.3);
|
|
||||||
animation-delay: -14s;
|
|
||||||
width: 450px;
|
|
||||||
height: 450px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes move {
|
|
||||||
0% { transform: translate(0, 0) rotate(0deg) scale(1); }
|
|
||||||
33% { transform: translate(150px, 100px) rotate(120deg) scale(1.1); }
|
|
||||||
66% { transform: translate(-50px, 200px) rotate(240deg) scale(0.9); }
|
|
||||||
100% { transform: translate(0, 0) rotate(360deg) scale(1); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.admin-link {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #fff;
|
|
||||||
text-decoration: none;
|
|
||||||
background: rgba(0, 0, 0, 0.2);
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.admin-link:hover {
|
|
||||||
background: rgba(0, 0, 0, 0.4);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Admin Styles */
|
|
||||||
.admin-container {
|
|
||||||
max-width: 900px;
|
|
||||||
margin: 3rem auto;
|
|
||||||
padding: 2.5rem;
|
|
||||||
background: rgba(255, 255, 255, 0.85);
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
-webkit-backdrop-filter: blur(20px);
|
|
||||||
border-radius: 24px;
|
|
||||||
box-shadow: 0 20px 50px rgba(0,0,0,0.15);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.4);
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.admin-container h1 {
|
|
||||||
margin-top: 0;
|
|
||||||
color: #212529;
|
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
|
letter-spacing: -0.05em;
|
||||||
|
line-height: 1;
|
||||||
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.table {
|
/* Cards & Containers */
|
||||||
width: 100%;
|
.card-precise {
|
||||||
border-collapse: separate;
|
background: var(--surface-color);
|
||||||
border-spacing: 0 8px;
|
border: 1px solid var(--border-color);
|
||||||
margin-top: 1.5rem;
|
border-radius: 4px;
|
||||||
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table th {
|
.card-precise:hover {
|
||||||
background: transparent;
|
border-color: var(--accent-color);
|
||||||
border: none;
|
background: #fff;
|
||||||
padding: 1rem;
|
box-shadow: 0 4px 12px rgba(0,0,0,0.03);
|
||||||
color: #6c757d;
|
}
|
||||||
font-weight: 600;
|
|
||||||
|
.btn-precise {
|
||||||
|
border-radius: 4px;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
transition: all 0.1s ease;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 0.05em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table td {
|
/* Timer Display */
|
||||||
background: #fff;
|
.timer-display {
|
||||||
padding: 1rem;
|
font-size: clamp(3rem, 10vw, 6rem);
|
||||||
border: none;
|
font-weight: 700;
|
||||||
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.table tr td:first-child { border-radius: 12px 0 0 12px; }
|
.timer-sub-display {
|
||||||
.table tr td:last-child { border-radius: 0 12px 12px 0; }
|
font-size: 1.5rem;
|
||||||
|
color: var(--text-secondary);
|
||||||
.form-group {
|
|
||||||
margin-bottom: 1.25rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group label {
|
/* Table */
|
||||||
display: block;
|
.table-precise {
|
||||||
margin-bottom: 0.5rem;
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-precise th {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 0.9rem;
|
color: var(--text-secondary);
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
border-bottom: 2px solid var(--border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-control {
|
.badge-best {
|
||||||
width: 100%;
|
background-color: var(--success-color);
|
||||||
padding: 0.75rem 1rem;
|
color: white;
|
||||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
font-size: 0.65rem;
|
||||||
border-radius: 12px;
|
padding: 2px 6px;
|
||||||
background: #fff;
|
border-radius: 2px;
|
||||||
transition: all 0.3s ease;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-control:focus {
|
/* SPA Transitions */
|
||||||
outline: none;
|
.view-section {
|
||||||
border-color: #23a6d5;
|
display: none;
|
||||||
box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.1);
|
}
|
||||||
|
|
||||||
|
.view-section.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Forms */
|
||||||
|
.form-control-precise {
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
padding: 0.4rem 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control-precise:focus {
|
||||||
|
border-color: var(--accent-color);
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#session-title {
|
||||||
|
background-color: var(--surface-color);
|
||||||
|
border-width: 0 0 2px 0;
|
||||||
|
border-radius: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#session-title:focus {
|
||||||
|
background-color: transparent;
|
||||||
|
border-color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Activity Builder */
|
||||||
|
#custom-builder {
|
||||||
|
background: var(--surface-color);
|
||||||
|
padding: 1.5rem;
|
||||||
|
border: 1px dashed var(--border-color);
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-row {
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
box-shadow: 0 2px 4px rgba(0,0,0,0.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-row:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 8px rgba(0,0,0,0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Options Dropdown */
|
||||||
|
.dropdown-menu {
|
||||||
|
box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-header {
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Utility */
|
||||||
|
.tracking-widest { letter-spacing: 0.1em; }
|
||||||
|
.tracking-wider { letter-spacing: 0.05em; }
|
||||||
|
.fs-small { font-size: 0.75rem; }
|
||||||
|
.fs-tiny { font-size: 0.65rem; }
|
||||||
|
.cursor-pointer { cursor: pointer; }
|
||||||
|
|
||||||
|
/* Alerts / Finishes */
|
||||||
|
.timer-finish {
|
||||||
|
animation: flash 1s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes flash {
|
||||||
|
0% { opacity: 1; }
|
||||||
|
50% { opacity: 0.5; }
|
||||||
|
100% { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Settings Switches */
|
||||||
|
.form-check-input:checked {
|
||||||
|
background-color: var(--accent-color);
|
||||||
|
border-color: var(--accent-color);
|
||||||
}
|
}
|
||||||
@ -1,39 +1,660 @@
|
|||||||
document.addEventListener('DOMContentLoaded', () => {
|
/**
|
||||||
const chatForm = document.getElementById('chat-form');
|
* INTERACTIVE TIMER APP
|
||||||
const chatInput = document.getElementById('chat-input');
|
* Core Logic - Handles:
|
||||||
const chatMessages = document.getElementById('chat-messages');
|
* - Landing Clock
|
||||||
|
* - Timer Modes (Time-watch, Countdown, Stopwatch, Lap, Relay, Custom)
|
||||||
|
* - Display Formats
|
||||||
|
* - Lap, Relay Split & Custom Activity Logic
|
||||||
|
* - Sound Alerts & Session Management
|
||||||
|
*/
|
||||||
|
|
||||||
const appendMessage = (text, sender) => {
|
const app = {
|
||||||
const msgDiv = document.createElement('div');
|
// STATE
|
||||||
msgDiv.classList.add('message', sender);
|
currentView: 'landing',
|
||||||
msgDiv.textContent = text;
|
currentMode: null,
|
||||||
chatMessages.appendChild(msgDiv);
|
isRunning: false,
|
||||||
chatMessages.scrollTop = chatMessages.scrollHeight;
|
isPaused: false,
|
||||||
};
|
isPreStarting: false,
|
||||||
|
startTime: 0,
|
||||||
|
elapsedTime: 0,
|
||||||
|
pausedTime: 0,
|
||||||
|
animationId: null,
|
||||||
|
history: [], // Universal storage for laps, splits, activities
|
||||||
|
countdownStartValue: 0,
|
||||||
|
|
||||||
|
// Relay State
|
||||||
|
currentParticipant: 1,
|
||||||
|
|
||||||
|
// Custom State
|
||||||
|
customActivities: [
|
||||||
|
{ name: 'Activity 1', duration: 60000 },
|
||||||
|
{ name: 'Activity 2', duration: 120000 }
|
||||||
|
],
|
||||||
|
currentActivityIndex: 0,
|
||||||
|
|
||||||
chatForm.addEventListener('submit', async (e) => {
|
// Audio Helpers
|
||||||
e.preventDefault();
|
audioCtx: null,
|
||||||
const message = chatInput.value.trim();
|
lastPlayedSecond: -1,
|
||||||
if (!message) return;
|
|
||||||
|
|
||||||
appendMessage(message, 'visitor');
|
// CONFIG
|
||||||
chatInput.value = '';
|
modes: {
|
||||||
|
'time-watch': { title: 'Time-watch', allowPause: true, hasLaps: false, canToggleCountdown: true },
|
||||||
|
'countdown': { title: 'Countdown Timer', allowPause: true, hasLaps: false, forceCountdown: true },
|
||||||
|
'stopwatch': { title: 'Stopwatch', allowPause: false, hasLaps: false, canToggleCountdown: false },
|
||||||
|
'lap': { title: 'Lap Timer', allowPause: false, hasLaps: true, canToggleCountdown: false },
|
||||||
|
'relay': { title: 'Relay Timer', allowPause: true, hasRelay: true, canToggleCountdown: false },
|
||||||
|
'custom': { title: 'Custom Timer', allowPause: true, isCustom: true, canToggleCountdown: true }
|
||||||
|
},
|
||||||
|
|
||||||
try {
|
// ELEMENTS
|
||||||
const response = await fetch('api/chat.php', {
|
el: {
|
||||||
method: 'POST',
|
landingClock: document.getElementById('landing-clock'),
|
||||||
headers: { 'Content-Type': 'application/json' },
|
mainTimer: document.getElementById('main-timer'),
|
||||||
body: JSON.stringify({ message })
|
subTimer: document.getElementById('sub-timer'),
|
||||||
});
|
viewLanding: document.getElementById('view-landing'),
|
||||||
const data = await response.json();
|
viewTimer: document.getElementById('view-timer'),
|
||||||
|
timerTitle: document.getElementById('timer-title'),
|
||||||
// Artificial delay for realism
|
activeActivityName: document.getElementById('active-activity-name'),
|
||||||
setTimeout(() => {
|
sessionTitle: document.getElementById('session-title'),
|
||||||
appendMessage(data.reply, 'bot');
|
|
||||||
}, 500);
|
btnStart: document.getElementById('btn-start'),
|
||||||
} catch (error) {
|
btnPause: document.getElementById('btn-pause'),
|
||||||
console.error('Error:', error);
|
btnStop: document.getElementById('btn-stop'),
|
||||||
appendMessage("Sorry, something went wrong. Please try again.", 'bot');
|
btnReset: document.getElementById('btn-reset'),
|
||||||
|
btnLap: document.getElementById('btn-lap'),
|
||||||
|
btnNext: document.getElementById('btn-next'),
|
||||||
|
|
||||||
|
formatSelect: document.getElementById('format-select'),
|
||||||
|
listContainer: document.getElementById('list-container'),
|
||||||
|
listTitle: document.getElementById('list-title'),
|
||||||
|
listHead: document.getElementById('list-head'),
|
||||||
|
listBody: document.getElementById('list-body'),
|
||||||
|
|
||||||
|
countdownInputs: document.getElementById('countdown-inputs'),
|
||||||
|
inputH: document.getElementById('input-h'),
|
||||||
|
inputM: document.getElementById('input-m'),
|
||||||
|
inputS: document.getElementById('input-s'),
|
||||||
|
|
||||||
|
relayConfig: document.getElementById('relay-config'),
|
||||||
|
participantCount: document.getElementById('participant-count'),
|
||||||
|
|
||||||
|
customBuilder: document.getElementById('custom-builder'),
|
||||||
|
activityList: document.getElementById('activity-list'),
|
||||||
|
btnAddActivity: document.getElementById('btn-add-activity'),
|
||||||
|
|
||||||
|
// Settings / Options
|
||||||
|
optCountdownContainer: document.getElementById('opt-countdown-container'),
|
||||||
|
settingIsCountdown: document.getElementById('setting-is-countdown'),
|
||||||
|
alertPreStart: document.getElementById('alert-pre-start'),
|
||||||
|
alertPreStartSec: document.getElementById('alert-pre-start-seconds'),
|
||||||
|
alertPreEnd: document.getElementById('alert-pre-end'),
|
||||||
|
alertPreEndSec: document.getElementById('alert-pre-end-seconds'),
|
||||||
|
alertCompletion: document.getElementById('alert-completion'),
|
||||||
|
|
||||||
|
brandLink: document.getElementById('brand-link')
|
||||||
|
},
|
||||||
|
|
||||||
|
init() {
|
||||||
|
console.log('Timer App Initializing...');
|
||||||
|
this.updateLandingClock();
|
||||||
|
this.bindEvents();
|
||||||
|
this.renderCustomBuilder();
|
||||||
|
this.resetTimer();
|
||||||
|
},
|
||||||
|
|
||||||
|
bindEvents() {
|
||||||
|
this.el.btnStart.addEventListener('click', () => this.handleStartClick());
|
||||||
|
this.el.btnPause.addEventListener('click', () => this.pauseTimer());
|
||||||
|
this.el.btnStop.addEventListener('click', () => this.stopTimer());
|
||||||
|
this.el.btnReset.addEventListener('click', () => this.resetTimer());
|
||||||
|
this.el.btnLap.addEventListener('click', () => this.recordLap());
|
||||||
|
this.el.btnNext.addEventListener('click', () => this.recordRelaySplit());
|
||||||
|
this.el.btnAddActivity.addEventListener('click', () => this.addActivity());
|
||||||
|
|
||||||
|
this.el.brandLink.addEventListener('click', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
this.switchView('landing');
|
||||||
|
});
|
||||||
|
|
||||||
|
this.el.formatSelect.addEventListener('change', () => this.updateDisplay());
|
||||||
|
this.el.settingIsCountdown.addEventListener('change', () => this.resetTimer());
|
||||||
|
},
|
||||||
|
|
||||||
|
updateLandingClock() {
|
||||||
|
const now = new Date();
|
||||||
|
const h = String(now.getHours()).padStart(2, '0');
|
||||||
|
const m = String(now.getMinutes()).padStart(2, '0');
|
||||||
|
const s = String(now.getSeconds()).padStart(2, '0');
|
||||||
|
|
||||||
|
if (this.el.landingClock) {
|
||||||
|
this.el.landingClock.textContent = `${h}:${m}:${s}`;
|
||||||
}
|
}
|
||||||
});
|
setTimeout(() => this.updateLandingClock(), 1000);
|
||||||
});
|
},
|
||||||
|
|
||||||
|
switchView(viewName) {
|
||||||
|
this.currentView = viewName;
|
||||||
|
document.querySelectorAll('.view-section').forEach(s => s.classList.remove('active'));
|
||||||
|
|
||||||
|
if (viewName === 'landing') {
|
||||||
|
this.el.viewLanding.classList.add('active');
|
||||||
|
this.stopTimer();
|
||||||
|
} else {
|
||||||
|
this.el.viewTimer.classList.add('active');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
setMode(modeKey) {
|
||||||
|
this.currentMode = modeKey;
|
||||||
|
const mode = this.modes[modeKey];
|
||||||
|
|
||||||
|
this.el.timerTitle.textContent = mode.title;
|
||||||
|
this.switchView('timer');
|
||||||
|
this.resetTimer();
|
||||||
|
|
||||||
|
// UI Adjustments
|
||||||
|
this.el.btnPause.classList.toggle('d-none', !mode.allowPause);
|
||||||
|
this.el.btnLap.classList.toggle('d-none', !mode.hasLaps);
|
||||||
|
this.el.btnNext.classList.toggle('d-none', !mode.hasRelay);
|
||||||
|
|
||||||
|
this.el.listContainer.classList.toggle('d-none', !mode.hasLaps && !mode.hasRelay && !mode.isCustom);
|
||||||
|
this.el.countdownInputs.classList.toggle('d-none', modeKey !== 'countdown');
|
||||||
|
this.el.relayConfig.classList.toggle('d-none', !mode.hasRelay);
|
||||||
|
this.el.customBuilder.classList.toggle('d-none', !mode.isCustom);
|
||||||
|
this.el.activeActivityName.classList.add('d-none');
|
||||||
|
|
||||||
|
// Options Box adjustments
|
||||||
|
this.el.optCountdownContainer.classList.toggle('d-none', !mode.canToggleCountdown && !mode.forceCountdown);
|
||||||
|
if (mode.forceCountdown) {
|
||||||
|
this.el.settingIsCountdown.checked = true;
|
||||||
|
this.el.settingIsCountdown.disabled = true;
|
||||||
|
} else if (modeKey === 'custom') {
|
||||||
|
this.el.settingIsCountdown.checked = false; // Default to count up as requested
|
||||||
|
this.el.settingIsCountdown.disabled = false;
|
||||||
|
} else {
|
||||||
|
this.el.settingIsCountdown.checked = false;
|
||||||
|
this.el.settingIsCountdown.disabled = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update List Header
|
||||||
|
if (mode.hasLaps) {
|
||||||
|
this.el.listTitle.textContent = 'Laps';
|
||||||
|
this.el.listHead.innerHTML = '<tr><th style="width: 80px;">Lap</th><th>Split Time</th><th>Delta</th><th class="text-end">Notes</th></tr>';
|
||||||
|
} else if (mode.hasRelay) {
|
||||||
|
this.el.listTitle.textContent = 'Relay Splits';
|
||||||
|
this.el.listHead.innerHTML = '<tr><th style="width: 120px;">Participant</th><th>Total Time</th><th>Split</th><th class="text-end">Status</th></tr>';
|
||||||
|
} else if (mode.isCustom) {
|
||||||
|
this.el.listTitle.textContent = 'Activities Completed';
|
||||||
|
this.el.listHead.innerHTML = '<tr><th>Activity</th><th>Duration</th><th>Total Elapsed</th><th class="text-end">Status</th></tr>';
|
||||||
|
}
|
||||||
|
|
||||||
|
this.updateDisplay();
|
||||||
|
},
|
||||||
|
|
||||||
|
handleStartClick() {
|
||||||
|
if (!this.el.sessionTitle.value.trim()) {
|
||||||
|
alert('Please enter a Session Name or Title before starting.');
|
||||||
|
this.el.sessionTitle.focus();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.isRunning && !this.isPaused) return;
|
||||||
|
|
||||||
|
// Sound Pre-start check
|
||||||
|
if (!this.isPaused && this.el.alertPreStart.checked) {
|
||||||
|
const preStartSec = parseInt(this.el.alertPreStartSec.value) || 0;
|
||||||
|
if (preStartSec > 0) {
|
||||||
|
this.runPreStartCountdown(preStartSec);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.startTimer();
|
||||||
|
},
|
||||||
|
|
||||||
|
runPreStartCountdown(seconds) {
|
||||||
|
this.isPreStarting = true;
|
||||||
|
this.el.btnStart.disabled = true;
|
||||||
|
this.el.btnReset.disabled = true;
|
||||||
|
this.el.sessionTitle.disabled = true;
|
||||||
|
|
||||||
|
let remaining = seconds;
|
||||||
|
this.el.mainTimer.textContent = `STARTING IN ${remaining}...`;
|
||||||
|
this.beep(440, 0.1);
|
||||||
|
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
remaining--;
|
||||||
|
if (remaining > 0) {
|
||||||
|
this.el.mainTimer.textContent = `STARTING IN ${remaining}...`;
|
||||||
|
this.beep(440, 0.1);
|
||||||
|
} else {
|
||||||
|
clearInterval(interval);
|
||||||
|
this.isPreStarting = false;
|
||||||
|
this.beep(880, 0.3);
|
||||||
|
this.startTimer();
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
},
|
||||||
|
|
||||||
|
startTimer() {
|
||||||
|
const mode = this.modes[this.currentMode];
|
||||||
|
const now = performance.now();
|
||||||
|
const isCountdownMode = this.el.settingIsCountdown.checked;
|
||||||
|
|
||||||
|
if (this.currentMode === 'countdown' && !this.isPaused) {
|
||||||
|
const h = parseInt(this.el.inputH.value) || 0;
|
||||||
|
const m = parseInt(this.el.inputM.value) || 0;
|
||||||
|
const s = parseInt(this.el.inputS.value) || 0;
|
||||||
|
const totalMs = ((h * 3600) + (m * 60) + s) * 1000;
|
||||||
|
|
||||||
|
if (totalMs <= 0) {
|
||||||
|
alert('Please enter a duration.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.countdownStartValue = totalMs;
|
||||||
|
this.elapsedTime = totalMs;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (mode.isCustom && !this.isPaused) {
|
||||||
|
this.currentActivityIndex = 0;
|
||||||
|
this.history = [];
|
||||||
|
this.renderHistory();
|
||||||
|
this.el.activeActivityName.classList.remove('d-none');
|
||||||
|
this.el.activeActivityName.textContent = this.customActivities[0].name;
|
||||||
|
|
||||||
|
this.countdownStartValue = this.customActivities[0].duration;
|
||||||
|
this.elapsedTime = isCountdownMode ? this.countdownStartValue : 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.isPaused) {
|
||||||
|
const offset = (isCountdownMode) ? (this.countdownStartValue - this.elapsedTime) : this.elapsedTime;
|
||||||
|
this.startTime = now - offset;
|
||||||
|
} else {
|
||||||
|
this.startTime = now;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.isRunning = true;
|
||||||
|
this.isPaused = false;
|
||||||
|
this.lastPlayedSecond = -1;
|
||||||
|
|
||||||
|
this.el.btnStart.disabled = true;
|
||||||
|
this.el.btnPause.disabled = false;
|
||||||
|
this.el.btnStop.disabled = false;
|
||||||
|
this.el.btnReset.disabled = true;
|
||||||
|
this.el.sessionTitle.disabled = true;
|
||||||
|
this.el.mainTimer.classList.remove('timer-finish');
|
||||||
|
|
||||||
|
// Lock inputs
|
||||||
|
if (this.el.inputH) this.el.inputH.disabled = true;
|
||||||
|
if (this.el.inputM) this.el.inputM.disabled = true;
|
||||||
|
if (this.el.inputS) this.el.inputS.disabled = true;
|
||||||
|
if (this.el.participantCount) this.el.participantCount.disabled = true;
|
||||||
|
|
||||||
|
this.tick();
|
||||||
|
},
|
||||||
|
|
||||||
|
pauseTimer() {
|
||||||
|
if (!this.isRunning || this.isPaused) return;
|
||||||
|
|
||||||
|
this.isPaused = true;
|
||||||
|
this.pausedTime = this.elapsedTime;
|
||||||
|
cancelAnimationFrame(this.animationId);
|
||||||
|
|
||||||
|
this.el.btnStart.disabled = false;
|
||||||
|
this.el.btnPause.disabled = true;
|
||||||
|
this.el.btnReset.disabled = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
stopTimer() {
|
||||||
|
if (!this.isRunning && !this.isPaused) return;
|
||||||
|
|
||||||
|
this.isRunning = false;
|
||||||
|
this.isPaused = false;
|
||||||
|
cancelAnimationFrame(this.animationId);
|
||||||
|
|
||||||
|
this.el.btnStart.disabled = false;
|
||||||
|
this.el.btnPause.disabled = true;
|
||||||
|
this.el.btnStop.disabled = true;
|
||||||
|
this.el.btnReset.disabled = false;
|
||||||
|
|
||||||
|
if (this.currentMode === 'lap') {
|
||||||
|
this.recordLap();
|
||||||
|
} else if (this.currentMode === 'relay') {
|
||||||
|
this.recordRelaySplit(true);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
resetTimer() {
|
||||||
|
this.stopTimer();
|
||||||
|
this.elapsedTime = 0;
|
||||||
|
this.pausedTime = 0;
|
||||||
|
this.countdownStartValue = 0;
|
||||||
|
this.history = [];
|
||||||
|
this.currentParticipant = 1;
|
||||||
|
this.currentActivityIndex = 0;
|
||||||
|
this.lastPlayedSecond = -1;
|
||||||
|
|
||||||
|
this.el.listBody.innerHTML = '';
|
||||||
|
this.el.mainTimer.classList.remove('timer-finish');
|
||||||
|
|
||||||
|
this.el.btnReset.disabled = true;
|
||||||
|
this.el.btnStart.disabled = false;
|
||||||
|
this.el.btnPause.disabled = true;
|
||||||
|
this.el.btnStop.disabled = true;
|
||||||
|
this.el.activeActivityName.classList.add('d-none');
|
||||||
|
this.el.sessionTitle.disabled = false;
|
||||||
|
|
||||||
|
if (this.el.inputH) this.el.inputH.disabled = false;
|
||||||
|
if (this.el.inputM) this.el.inputM.disabled = false;
|
||||||
|
if (this.el.inputS) this.el.inputS.disabled = false;
|
||||||
|
if (this.el.participantCount) this.el.participantCount.disabled = false;
|
||||||
|
|
||||||
|
this.updateDisplay();
|
||||||
|
},
|
||||||
|
|
||||||
|
tick() {
|
||||||
|
if (!this.isRunning || this.isPaused) return;
|
||||||
|
|
||||||
|
const mode = this.modes[this.currentMode];
|
||||||
|
const now = performance.now();
|
||||||
|
const isCountdownMode = this.el.settingIsCountdown.checked;
|
||||||
|
|
||||||
|
if (isCountdownMode) {
|
||||||
|
const delta = now - this.startTime;
|
||||||
|
this.elapsedTime = Math.max(0, this.countdownStartValue - delta);
|
||||||
|
|
||||||
|
this.checkAlerts(this.elapsedTime);
|
||||||
|
|
||||||
|
if (this.elapsedTime === 0) {
|
||||||
|
if (mode.isCustom) {
|
||||||
|
this.nextActivity();
|
||||||
|
} else {
|
||||||
|
this.updateDisplay();
|
||||||
|
this.stopTimer();
|
||||||
|
this.playCompletionAlert();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (mode.isCustom) {
|
||||||
|
// Count up custom mode
|
||||||
|
const delta = now - this.startTime;
|
||||||
|
this.elapsedTime = delta;
|
||||||
|
|
||||||
|
if (this.elapsedTime >= this.countdownStartValue) {
|
||||||
|
this.nextActivity();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Standard count up
|
||||||
|
this.elapsedTime = now - this.startTime;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.updateDisplay();
|
||||||
|
this.animationId = requestAnimationFrame(() => this.tick());
|
||||||
|
},
|
||||||
|
|
||||||
|
nextActivity() {
|
||||||
|
const isCountdownMode = this.el.settingIsCountdown.checked;
|
||||||
|
this.recordCustomActivity();
|
||||||
|
this.currentActivityIndex++;
|
||||||
|
|
||||||
|
if (this.currentActivityIndex < this.customActivities.length) {
|
||||||
|
const nextAct = this.customActivities[this.currentActivityIndex];
|
||||||
|
this.el.activeActivityName.textContent = nextAct.name;
|
||||||
|
this.countdownStartValue = nextAct.duration;
|
||||||
|
this.elapsedTime = isCountdownMode ? this.countdownStartValue : 0;
|
||||||
|
this.startTime = performance.now();
|
||||||
|
this.lastPlayedSecond = -1;
|
||||||
|
this.beep(660, 0.2);
|
||||||
|
} else {
|
||||||
|
this.updateDisplay();
|
||||||
|
this.stopTimer();
|
||||||
|
this.playCompletionAlert();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
checkAlerts(ms) {
|
||||||
|
if (!this.el.alertPreEnd.checked) return;
|
||||||
|
|
||||||
|
const secondsLeft = Math.ceil(ms / 1000);
|
||||||
|
const warningSec = parseInt(this.el.alertPreEndSec.value) || 0;
|
||||||
|
|
||||||
|
if (secondsLeft <= warningSec && secondsLeft > 0 && secondsLeft !== this.lastPlayedSecond) {
|
||||||
|
this.lastPlayedSecond = secondsLeft;
|
||||||
|
this.beep(523, 0.1);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
updateDisplay() {
|
||||||
|
const ms = this.elapsedTime;
|
||||||
|
const format = this.el.formatSelect.value;
|
||||||
|
|
||||||
|
this.el.mainTimer.textContent = this.formatTime(ms, format);
|
||||||
|
|
||||||
|
if (format !== 'hh:mm:ss.ms') {
|
||||||
|
this.el.subTimer.textContent = this.formatTime(ms, 'hh:mm:ss.ms');
|
||||||
|
this.el.subTimer.classList.remove('d-none');
|
||||||
|
} else {
|
||||||
|
this.el.subTimer.classList.add('d-none');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
formatTime(ms, format) {
|
||||||
|
let absMs = Math.abs(ms);
|
||||||
|
let seconds = Math.floor(absMs / 1000);
|
||||||
|
let minutes = Math.floor(seconds / 60);
|
||||||
|
let hours = Math.floor(minutes / 60);
|
||||||
|
let milliseconds = Math.floor(absMs % 1000);
|
||||||
|
|
||||||
|
seconds %= 60;
|
||||||
|
minutes %= 60;
|
||||||
|
|
||||||
|
const pad = (n, l = 2) => String(n).padStart(l, '0');
|
||||||
|
|
||||||
|
switch (format) {
|
||||||
|
case 'hh:mm:ss.ms':
|
||||||
|
return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}.${pad(milliseconds, 3)}`;
|
||||||
|
case 'hh:mm:ss':
|
||||||
|
return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
|
||||||
|
case 'hours':
|
||||||
|
return (ms / 3600000).toFixed(4) + ' h';
|
||||||
|
case 'minutes':
|
||||||
|
return (ms / 60000).toFixed(2) + ' m';
|
||||||
|
case 'seconds':
|
||||||
|
return (ms / 1000).toFixed(0) + ' s';
|
||||||
|
case 'seconds.ms':
|
||||||
|
return (ms / 1000).toFixed(3) + ' s';
|
||||||
|
default:
|
||||||
|
return '00:00:00.000';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
recordLap() {
|
||||||
|
const now = this.elapsedTime;
|
||||||
|
const lastTime = this.history.length > 0 ? this.history[this.history.length - 1].time : 0;
|
||||||
|
const delta = now - lastTime;
|
||||||
|
|
||||||
|
this.history.push({
|
||||||
|
id: this.history.length + 1,
|
||||||
|
time: now,
|
||||||
|
delta: delta
|
||||||
|
});
|
||||||
|
|
||||||
|
this.renderHistory();
|
||||||
|
},
|
||||||
|
|
||||||
|
recordRelaySplit(isFinal = false) {
|
||||||
|
const now = this.elapsedTime;
|
||||||
|
const lastTime = this.history.length > 0 ? this.history[this.history.length - 1].time : 0;
|
||||||
|
const delta = now - lastTime;
|
||||||
|
const maxParticipants = parseInt(this.el.participantCount.value) || 1;
|
||||||
|
|
||||||
|
if (this.currentParticipant > maxParticipants && !isFinal) return;
|
||||||
|
|
||||||
|
this.history.push({
|
||||||
|
id: `P${this.currentParticipant}`,
|
||||||
|
time: now,
|
||||||
|
delta: delta,
|
||||||
|
status: isFinal ? 'DONE' : 'SPLIT'
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!isFinal) {
|
||||||
|
this.currentParticipant++;
|
||||||
|
if (this.currentParticipant > maxParticipants) {
|
||||||
|
this.stopTimer();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.renderHistory();
|
||||||
|
},
|
||||||
|
|
||||||
|
recordCustomActivity() {
|
||||||
|
const act = this.customActivities[this.currentActivityIndex];
|
||||||
|
const totalElapsedSoFar = this.history.reduce((acc, h) => acc + h.delta, 0) + act.duration;
|
||||||
|
|
||||||
|
this.history.push({
|
||||||
|
id: act.name,
|
||||||
|
delta: act.duration,
|
||||||
|
time: totalElapsedSoFar,
|
||||||
|
status: 'COMPLETED'
|
||||||
|
});
|
||||||
|
|
||||||
|
this.renderHistory();
|
||||||
|
},
|
||||||
|
|
||||||
|
renderHistory() {
|
||||||
|
if (this.currentMode === 'lap') {
|
||||||
|
let minDelta = Infinity;
|
||||||
|
let bestId = -1;
|
||||||
|
this.history.forEach(h => {
|
||||||
|
if (h.delta < minDelta) {
|
||||||
|
minDelta = h.delta;
|
||||||
|
bestId = h.id;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.el.listBody.innerHTML = this.history.slice().reverse().map(h => `
|
||||||
|
<tr class="${h.id === bestId ? 'table-success' : ''}">
|
||||||
|
<td class="font-tabular fw-bold">#${h.id}</td>
|
||||||
|
<td class="font-tabular">${this.formatTime(h.time, 'hh:mm:ss.ms')}</td>
|
||||||
|
<td class="font-tabular text-muted">+${this.formatTime(h.delta, 'seconds.ms')}</td>
|
||||||
|
<td class="text-end">
|
||||||
|
${h.id === bestId ? '<span class="badge-best">BEST</span>' : ''}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
`).join('');
|
||||||
|
} else if (this.currentMode === 'relay') {
|
||||||
|
this.el.listBody.innerHTML = this.history.slice().reverse().map(h => `
|
||||||
|
<tr>
|
||||||
|
<td class="fw-bold">${h.id}</td>
|
||||||
|
<td class="font-tabular">${this.formatTime(h.time, 'hh:mm:ss.ms')}</td>
|
||||||
|
<td class="font-tabular text-muted">${this.formatTime(h.delta, 'seconds.ms')}</td>
|
||||||
|
<td class="text-end">
|
||||||
|
<span class="badge ${h.status === 'DONE' ? 'bg-danger' : 'bg-primary'} font-tabular" style="font-size: 0.6rem;">${h.status}</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
`).join('');
|
||||||
|
} else if (this.currentMode === 'custom') {
|
||||||
|
this.el.listBody.innerHTML = this.history.slice().reverse().map(h => `
|
||||||
|
<tr>
|
||||||
|
<td class="fw-bold">${h.id}</td>
|
||||||
|
<td class="font-tabular">${this.formatTime(h.delta, 'hh:mm:ss')}</td>
|
||||||
|
<td class="font-tabular text-muted">${this.formatTime(h.time, 'hh:mm:ss.ms')}</td>
|
||||||
|
<td class="text-end">
|
||||||
|
<span class="badge bg-success font-tabular" style="font-size: 0.6rem;">${h.status}</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// Custom Activity Builder
|
||||||
|
renderCustomBuilder() {
|
||||||
|
this.el.activityList.innerHTML = this.customActivities.map((act, i) => `
|
||||||
|
<div class="activity-row p-3 border rounded bg-white">
|
||||||
|
<div class="row g-2 align-items-center">
|
||||||
|
<div class="col-md-5">
|
||||||
|
<label class="fs-tiny text-uppercase text-muted d-block mb-1">Activity Name</label>
|
||||||
|
<input type="text" class="form-control form-control-precise" value="${act.name}" onchange="app.updateActName(${i}, this.value)">
|
||||||
|
</div>
|
||||||
|
<div class="col-md-7">
|
||||||
|
<div class="d-flex justify-content-between align-items-end mb-1">
|
||||||
|
<label class="fs-tiny text-uppercase text-muted m-0">Duration: <span class="fw-bold text-primary font-tabular">${this.formatTime(act.duration, 'hh:mm:ss')}</span></label>
|
||||||
|
<button class="btn btn-link btn-sm p-0 text-danger text-decoration-none fs-tiny" onclick="app.removeActivity(${i})">REMOVE</button>
|
||||||
|
</div>
|
||||||
|
<div class="input-group input-group-sm">
|
||||||
|
<input type="number" id="act-input-${i}" class="form-control form-control-precise" placeholder="Enter number..." style="width: 80px;">
|
||||||
|
<button class="btn btn-outline-secondary" onclick="app.applyUnit(${i}, 'H')">H</button>
|
||||||
|
<button class="btn btn-outline-secondary" onclick="app.applyUnit(${i}, 'M')">M</button>
|
||||||
|
<button class="btn btn-outline-secondary" onclick="app.applyUnit(${i}, 'S')">S</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
},
|
||||||
|
|
||||||
|
addActivity() {
|
||||||
|
this.customActivities.push({ name: `Activity ${this.customActivities.length + 1}`, duration: 60000 });
|
||||||
|
this.renderCustomBuilder();
|
||||||
|
},
|
||||||
|
|
||||||
|
removeActivity(index) {
|
||||||
|
if (this.customActivities.length <= 1) return;
|
||||||
|
this.customActivities.splice(index, 1);
|
||||||
|
this.renderCustomBuilder();
|
||||||
|
},
|
||||||
|
|
||||||
|
updateActName(index, val) {
|
||||||
|
this.customActivities[index].name = val;
|
||||||
|
},
|
||||||
|
|
||||||
|
applyUnit(index, unit) {
|
||||||
|
const input = document.getElementById(`act-input-${index}`);
|
||||||
|
const val = parseFloat(input.value) || 0;
|
||||||
|
let ms = 0;
|
||||||
|
|
||||||
|
switch(unit) {
|
||||||
|
case 'H': ms = val * 3600000; break;
|
||||||
|
case 'M': ms = val * 60000; break;
|
||||||
|
case 'S': ms = val * 1000; break;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.customActivities[index].duration = ms;
|
||||||
|
this.renderCustomBuilder();
|
||||||
|
},
|
||||||
|
|
||||||
|
playCompletionAlert() {
|
||||||
|
this.el.mainTimer.classList.add('timer-finish');
|
||||||
|
if (this.el.alertCompletion.checked) {
|
||||||
|
this.beep(880, 0.5);
|
||||||
|
setTimeout(() => this.beep(1100, 0.5), 200);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
beep(freq = 440, duration = 0.1) {
|
||||||
|
try {
|
||||||
|
if (!this.audioCtx) {
|
||||||
|
this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
|
||||||
|
}
|
||||||
|
const osc = this.audioCtx.createOscillator();
|
||||||
|
const gain = this.audioCtx.createGain();
|
||||||
|
|
||||||
|
osc.type = 'sine';
|
||||||
|
osc.frequency.setValueAtTime(freq, this.audioCtx.currentTime);
|
||||||
|
|
||||||
|
gain.gain.setValueAtTime(0.1, this.audioCtx.currentTime);
|
||||||
|
gain.gain.exponentialRampToValueAtTime(0.01, this.audioCtx.currentTime + duration);
|
||||||
|
|
||||||
|
osc.connect(gain);
|
||||||
|
gain.connect(this.audioCtx.destination);
|
||||||
|
|
||||||
|
osc.start();
|
||||||
|
osc.stop(this.audioCtx.currentTime + duration);
|
||||||
|
} catch (e) {
|
||||||
|
console.warn('Audio error:', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Start the app
|
||||||
|
document.addEventListener('DOMContentLoaded', () => app.init());
|
||||||
401
index.php
401
index.php
@ -1,150 +1,263 @@
|
|||||||
<?php
|
<?php
|
||||||
declare(strict_types=1);
|
// PHP Header for Dynamic Meta Tags
|
||||||
@ini_set('display_errors', '1');
|
$projectName = $_SERVER['PROJECT_NAME'] ?? 'Interactive Timer';
|
||||||
@error_reporting(E_ALL);
|
$projectDesc = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Modern, professional timing website for all your needs.';
|
||||||
@date_default_timezone_set('UTC');
|
$projectImage = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
||||||
|
|
||||||
$phpVersion = PHP_VERSION;
|
|
||||||
$now = date('Y-m-d H:i:s');
|
|
||||||
?>
|
?>
|
||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>New Style</title>
|
<title><?php echo htmlspecialchars($projectName); ?></title>
|
||||||
<?php
|
<meta name="description" content="<?php echo htmlspecialchars($projectDesc); ?>">
|
||||||
// Read project preview data from environment
|
|
||||||
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
|
<!-- Open Graph / Twitter -->
|
||||||
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
<meta property="og:type" content="website">
|
||||||
?>
|
<meta property="og:title" content="<?php echo htmlspecialchars($projectName); ?>">
|
||||||
<?php if ($projectDescription): ?>
|
<meta property="og:description" content="<?php echo htmlspecialchars($projectDesc); ?>">
|
||||||
<!-- Meta description -->
|
<?php if ($projectImage): ?>
|
||||||
<meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
|
<meta property="og:image" content="<?php echo htmlspecialchars($projectImage); ?>">
|
||||||
<!-- Open Graph meta tags -->
|
<meta name="twitter:image" content="<?php echo htmlspecialchars($projectImage); ?>">
|
||||||
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
<?php endif; ?>
|
||||||
<!-- Twitter meta tags -->
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
<meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
|
||||||
<?php endif; ?>
|
<!-- CSS -->
|
||||||
<?php if ($projectImageUrl): ?>
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
<!-- Open Graph image -->
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||||||
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<!-- Twitter image -->
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@700&display=swap" rel="stylesheet">
|
||||||
<?php endif; ?>
|
|
||||||
<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;700&display=swap" rel="stylesheet">
|
|
||||||
<style>
|
|
||||||
:root {
|
|
||||||
--bg-color-start: #6a11cb;
|
|
||||||
--bg-color-end: #2575fc;
|
|
||||||
--text-color: #ffffff;
|
|
||||||
--card-bg-color: rgba(255, 255, 255, 0.01);
|
|
||||||
--card-border-color: rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
font-family: 'Inter', sans-serif;
|
|
||||||
background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
|
|
||||||
color: var(--text-color);
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
min-height: 100vh;
|
|
||||||
text-align: center;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
body::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
|
|
||||||
animation: bg-pan 20s linear infinite;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
@keyframes bg-pan {
|
|
||||||
0% { background-position: 0% 0%; }
|
|
||||||
100% { background-position: 100% 100%; }
|
|
||||||
}
|
|
||||||
main {
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
.card {
|
|
||||||
background: var(--card-bg-color);
|
|
||||||
border: 1px solid var(--card-border-color);
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 2rem;
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
-webkit-backdrop-filter: blur(20px);
|
|
||||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
.loader {
|
|
||||||
margin: 1.25rem auto 1.25rem;
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
border: 3px solid rgba(255, 255, 255, 0.25);
|
|
||||||
border-top-color: #fff;
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
}
|
|
||||||
@keyframes spin {
|
|
||||||
from { transform: rotate(0deg); }
|
|
||||||
to { transform: rotate(360deg); }
|
|
||||||
}
|
|
||||||
.hint {
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
.sr-only {
|
|
||||||
position: absolute;
|
|
||||||
width: 1px; height: 1px;
|
|
||||||
padding: 0; margin: -1px;
|
|
||||||
overflow: hidden;
|
|
||||||
clip: rect(0, 0, 0, 0);
|
|
||||||
white-space: nowrap; border: 0;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
font-size: 3rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin: 0 0 1rem;
|
|
||||||
letter-spacing: -1px;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
margin: 0.5rem 0;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
}
|
|
||||||
code {
|
|
||||||
background: rgba(0,0,0,0.2);
|
|
||||||
padding: 2px 6px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
||||||
}
|
|
||||||
footer {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 1rem;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="bg-white">
|
||||||
<main>
|
|
||||||
<div class="card">
|
<!-- Navigation -->
|
||||||
<h1>Analyzing your requirements and generating your website…</h1>
|
<nav class="navbar navbar-light bg-white border-bottom py-3">
|
||||||
<div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
|
<div class="container d-flex justify-content-between align-items-center">
|
||||||
<span class="sr-only">Loading…</span>
|
<a class="navbar-brand fw-bold text-uppercase fs-6 tracking-wider" href="#" id="brand-link">
|
||||||
</div>
|
<span class="text-primary">•</span> <?php echo htmlspecialchars($projectName); ?>
|
||||||
<p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
|
</a>
|
||||||
<p class="hint">This page will update automatically as the plan is implemented.</p>
|
<div id="nav-actions">
|
||||||
<p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
|
<!-- Dynamic actions can be injected here -->
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</div>
|
||||||
<footer>
|
</nav>
|
||||||
Page updated: <?= htmlspecialchars($now) ?> (UTC)
|
|
||||||
</footer>
|
<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="text-center mb-5">
|
||||||
|
|
||||||
|
<!-- Workspace Header -->
|
||||||
|
<div class="d-flex justify-content-between align-items-start mb-4 mx-auto" style="max-width: 800px;">
|
||||||
|
<div class="text-start">
|
||||||
|
<h2 id="timer-title" class="text-uppercase tracking-widest fs-small text-muted mb-1">Timer</h2>
|
||||||
|
<div id="active-activity-name" class="fs-4 fw-bold text-primary d-none">Activity Name</div>
|
||||||
|
</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">Timer Settings</h6>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<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 Countdown</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 Warning</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 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>
|
||||||
|
<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-auto d-inline-block">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Session Title Input -->
|
||||||
|
<div class="mb-5 text-start mx-auto" style="max-width: 600px;">
|
||||||
|
<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" placeholder="Enter title to begin...">
|
||||||
|
</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 - ALWAYS DIRECTLY UNDER TIMER -->
|
||||||
|
<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 mx-auto" style="max-width: 600px;">
|
||||||
|
<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</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>
|
||||||
|
|
||||||
|
<!-- List Container (Laps / Relay / Custom History) -->
|
||||||
|
<div id="list-container" class="mx-auto d-none" style="max-width: 600px;">
|
||||||
|
<h4 id="list-title" class="fs-6 fw-bold text-uppercase tracking-widest border-bottom pb-2 mb-3">History</h4>
|
||||||
|
<div class="table-responsive">
|
||||||
|
<table class="table table-precise align-middle">
|
||||||
|
<thead id="list-head">
|
||||||
|
<tr>
|
||||||
|
<th style="width: 80px;">Item</th>
|
||||||
|
<th>Split Time</th>
|
||||||
|
<th>Delta</th>
|
||||||
|
<th class="text-end">Notes</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="list-body">
|
||||||
|
<!-- Data injected here -->
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user