Autosave: 20260303-180732
This commit is contained in:
Flatlogic Bot
parent
9b97fdeae8
commit
82cd85b8bf
@ -11,11 +11,31 @@
|
||||
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
}
|
||||
|
||||
body.dark-mode {
|
||||
--bg-color: #0f172a;
|
||||
--surface-color: #1e293b;
|
||||
--text-primary: #f8fafc;
|
||||
--text-secondary: #94a3b8;
|
||||
--border-color: #334155;
|
||||
--accent-color: #60a5fa;
|
||||
--accent-hover: #93c5fd;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-primary);
|
||||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: var(--bg-color) !important;
|
||||
border-color: var(--border-color) !important;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
.font-tabular {
|
||||
@ -23,6 +43,25 @@ body {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
/* Dark Mode Toggle */
|
||||
.dark-mode-toggle {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--surface-color);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.dark-mode-toggle:hover {
|
||||
border-color: var(--accent-color);
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
/* Landing Clock */
|
||||
.hero-clock {
|
||||
font-size: clamp(4rem, 15vw, 10rem);
|
||||
@ -38,11 +77,12 @@ body {
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s ease;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.card-precise:hover {
|
||||
border-color: var(--accent-color);
|
||||
background: #fff;
|
||||
background: var(--bg-color);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.03);
|
||||
}
|
||||
|
||||
@ -69,6 +109,10 @@ body {
|
||||
}
|
||||
|
||||
/* Table */
|
||||
.table {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.table-precise {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
@ -82,6 +126,10 @@ body {
|
||||
border-bottom: 2px solid var(--border-color);
|
||||
}
|
||||
|
||||
.table-precise td {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.badge-best {
|
||||
background-color: var(--success-color);
|
||||
color: white;
|
||||
@ -100,6 +148,19 @@ body {
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
.form-control, .form-select {
|
||||
background-color: var(--surface-color);
|
||||
color: var(--text-primary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.form-control:focus, .form-select:focus {
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-primary);
|
||||
border-color: var(--accent-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.form-control-precise {
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border-color);
|
||||
@ -107,13 +168,8 @@ body {
|
||||
padding: 0.4rem 0.75rem;
|
||||
}
|
||||
|
||||
.form-control-precise:focus {
|
||||
border-color: var(--accent-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#session-title {
|
||||
background-color: var(--surface-color);
|
||||
background-color: transparent;
|
||||
border-width: 0 0 2px 0;
|
||||
border-radius: 0;
|
||||
padding-left: 0;
|
||||
@ -133,8 +189,21 @@ body {
|
||||
}
|
||||
|
||||
.activity-row {
|
||||
background: var(--bg-color) !important;
|
||||
border-color: var(--border-color) !important;
|
||||
transition: transform 0.2s ease;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.02);
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.activity-row:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.activity-row.dragging {
|
||||
opacity: 0.5;
|
||||
background: var(--border-color) !important;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.activity-row:hover {
|
||||
@ -142,10 +211,33 @@ body {
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.activity-row.rest-activity {
|
||||
border-left: 4px solid var(--accent-color) !important;
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.9;
|
||||
padding: 0.5rem 1rem !important;
|
||||
}
|
||||
|
||||
.activity-row.rest-activity .form-control {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.activity-row.rest-activity .btn {
|
||||
font-size: 0.65rem;
|
||||
padding: 0.2rem 0.4rem;
|
||||
}
|
||||
|
||||
.activity-row.rest-activity .fs-tiny {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
/* Options Dropdown */
|
||||
.dropdown-menu {
|
||||
box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
|
||||
background-color: var(--surface-color);
|
||||
color: var(--text-primary);
|
||||
box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
|
||||
border: 1px solid var(--border-color);
|
||||
z-index: 1050;
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
@ -161,6 +253,12 @@ body {
|
||||
.fs-tiny { font-size: 0.65rem; }
|
||||
.cursor-pointer { cursor: pointer; }
|
||||
|
||||
#active-activity-name {
|
||||
letter-spacing: 0.02em;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Alerts / Finishes */
|
||||
.timer-finish {
|
||||
animation: flash 1s infinite;
|
||||
@ -176,4 +274,40 @@ body {
|
||||
.form-check-input:checked {
|
||||
background-color: var(--accent-color);
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
|
||||
/* Layout Adjustments */
|
||||
.timer-workspace-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.timer-main-column {
|
||||
flex: 1;
|
||||
min-width: 320px;
|
||||
max-width: 800px;
|
||||
order: 2; /* Main on right on desktop */
|
||||
}
|
||||
|
||||
.timer-side-column {
|
||||
width: 350px;
|
||||
order: 1; /* History on left on desktop */
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.timer-side-column {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
order: 2; /* Move history back to bottom on mobile */
|
||||
}
|
||||
.timer-main-column {
|
||||
order: 1; /* Main timer on top on mobile */
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
border-color: var(--border-color) !important;
|
||||
}
|
||||
@ -6,6 +6,7 @@
|
||||
* - Display Formats
|
||||
* - Lap, Relay Split & Custom Activity Logic
|
||||
* - Sound Alerts & Session Management
|
||||
* - Dark Mode & UI Layout
|
||||
*/
|
||||
|
||||
const app = {
|
||||
@ -15,6 +16,7 @@ const app = {
|
||||
isRunning: false,
|
||||
isPaused: false,
|
||||
isPreStarting: false,
|
||||
isDarkMode: false,
|
||||
startTime: 0,
|
||||
elapsedTime: 0,
|
||||
pausedTime: 0,
|
||||
@ -27,10 +29,11 @@ const app = {
|
||||
|
||||
// Custom State
|
||||
customActivities: [
|
||||
{ name: 'Activity 1', duration: 60000 },
|
||||
{ name: 'Activity 2', duration: 120000 }
|
||||
{ name: 'Activity 1', duration: 60000, isRest: false },
|
||||
{ name: 'Rest', duration: 30000, isRest: true }
|
||||
],
|
||||
currentActivityIndex: 0,
|
||||
draggedItemIndex: null,
|
||||
|
||||
// Audio Helpers
|
||||
audioCtx: null,
|
||||
@ -56,6 +59,7 @@ const app = {
|
||||
timerTitle: document.getElementById('timer-title'),
|
||||
activeActivityName: document.getElementById('active-activity-name'),
|
||||
sessionTitle: document.getElementById('session-title'),
|
||||
timerSideColumn: document.getElementById('timer-side-column'),
|
||||
|
||||
btnStart: document.getElementById('btn-start'),
|
||||
btnPause: document.getElementById('btn-pause'),
|
||||
@ -65,7 +69,6 @@ const app = {
|
||||
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'),
|
||||
@ -84,24 +87,48 @@ const app = {
|
||||
|
||||
// Settings / Options
|
||||
optCountdownContainer: document.getElementById('opt-countdown-container'),
|
||||
customOptions: document.getElementById('custom-options'),
|
||||
restAlertContainer: document.getElementById('rest-alert-container'),
|
||||
settingIsCountdown: document.getElementById('setting-is-countdown'),
|
||||
settingRestDuration: document.getElementById('setting-rest-duration'),
|
||||
alertRestPreEnd: document.getElementById('alert-rest-pre-end'),
|
||||
|
||||
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')
|
||||
brandLink: document.getElementById('brand-link'),
|
||||
darkModeToggle: document.getElementById('dark-mode-toggle')
|
||||
},
|
||||
|
||||
init() {
|
||||
console.log('Timer App Initializing...');
|
||||
this.initDarkMode();
|
||||
this.updateLandingClock();
|
||||
this.bindEvents();
|
||||
this.renderCustomBuilder();
|
||||
this.resetTimer();
|
||||
},
|
||||
|
||||
initDarkMode() {
|
||||
this.isDarkMode = localStorage.getItem('darkMode') === 'true';
|
||||
this.applyDarkMode();
|
||||
},
|
||||
|
||||
applyDarkMode() {
|
||||
document.body.classList.toggle('dark-mode', this.isDarkMode);
|
||||
document.getElementById('moon-icon').classList.toggle('d-none', this.isDarkMode);
|
||||
document.getElementById('sun-icon').classList.toggle('d-none', !this.isDarkMode);
|
||||
},
|
||||
|
||||
toggleDarkMode() {
|
||||
this.isDarkMode = !this.isDarkMode;
|
||||
localStorage.setItem('darkMode', this.isDarkMode);
|
||||
this.applyDarkMode();
|
||||
},
|
||||
|
||||
bindEvents() {
|
||||
this.el.btnStart.addEventListener('click', () => this.handleStartClick());
|
||||
this.el.btnPause.addEventListener('click', () => this.pauseTimer());
|
||||
@ -116,6 +143,7 @@ const app = {
|
||||
this.switchView('landing');
|
||||
});
|
||||
|
||||
this.el.darkModeToggle.addEventListener('click', () => this.toggleDarkMode());
|
||||
this.el.formatSelect.addEventListener('change', () => this.updateDisplay());
|
||||
this.el.settingIsCountdown.addEventListener('change', () => this.resetTimer());
|
||||
},
|
||||
@ -157,10 +185,12 @@ const app = {
|
||||
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.timerSideColumn.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.customOptions.classList.toggle('d-none', !mode.isCustom);
|
||||
this.el.restAlertContainer.classList.toggle('d-none', !mode.isCustom);
|
||||
this.el.activeActivityName.classList.add('d-none');
|
||||
|
||||
// Options Box adjustments
|
||||
@ -169,7 +199,7 @@ const app = {
|
||||
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.checked = false; // Default to count up
|
||||
this.el.settingIsCountdown.disabled = false;
|
||||
} else {
|
||||
this.el.settingIsCountdown.checked = false;
|
||||
@ -178,14 +208,14 @@ const app = {
|
||||
|
||||
// Update List Header
|
||||
if (mode.hasLaps) {
|
||||
this.el.listTitle.textContent = 'Laps';
|
||||
this.el.listTitle.textContent = 'Laps Recorded';
|
||||
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.el.listHead.innerHTML = '<tr><th>Activity</th><th>Duration</th><th class="text-end">Status</th></tr>';
|
||||
}
|
||||
|
||||
this.updateDisplay();
|
||||
@ -380,6 +410,8 @@ const app = {
|
||||
const delta = now - this.startTime;
|
||||
this.elapsedTime = delta;
|
||||
|
||||
this.checkAlerts(this.countdownStartValue - this.elapsedTime);
|
||||
|
||||
if (this.elapsedTime >= this.countdownStartValue) {
|
||||
this.nextActivity();
|
||||
}
|
||||
@ -413,14 +445,18 @@ const app = {
|
||||
},
|
||||
|
||||
checkAlerts(ms) {
|
||||
if (!this.el.alertPreEnd.checked) return;
|
||||
const currentAct = this.customActivities[this.currentActivityIndex];
|
||||
const isRest = currentAct && currentAct.isRest;
|
||||
|
||||
const enabled = isRest ? this.el.alertRestPreEnd.checked : this.el.alertPreEnd.checked;
|
||||
if (!enabled) 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);
|
||||
this.beep(isRest ? 330 : 523, 0.1);
|
||||
}
|
||||
},
|
||||
|
||||
@ -509,13 +545,14 @@ const app = {
|
||||
|
||||
recordCustomActivity() {
|
||||
const act = this.customActivities[this.currentActivityIndex];
|
||||
const totalElapsedSoFar = this.history.reduce((acc, h) => acc + h.delta, 0) + act.duration;
|
||||
|
||||
// Skip rest activities in completed list as requested
|
||||
if (act.isRest) return;
|
||||
|
||||
this.history.push({
|
||||
id: act.name,
|
||||
delta: act.duration,
|
||||
time: totalElapsedSoFar,
|
||||
status: 'COMPLETED'
|
||||
status: 'OK'
|
||||
});
|
||||
|
||||
this.renderHistory();
|
||||
@ -558,7 +595,6 @@ const app = {
|
||||
<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>
|
||||
@ -570,31 +606,95 @@ const app = {
|
||||
// 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="activity-row p-3 border rounded ${act.isRest ? 'rest-activity p-2' : ''}"
|
||||
draggable="true"
|
||||
ondragstart="app.onDragStart(${i}, event)"
|
||||
ondragover="app.onDragOver(${i}, event)"
|
||||
ondrop="app.onDrop(${i}, event)">
|
||||
<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>
|
||||
${act.isRest ? `
|
||||
<div class="col-12 d-flex align-items-center justify-content-between">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<span class="fw-bold text-uppercase fs-tiny tracking-wider">Rest</span>
|
||||
<div class="input-group input-group-sm" style="width: 250px;">
|
||||
<input type="text" id="act-input-${i}" class="form-control form-control-precise" placeholder="Time..." value="${this.formatTime(act.duration, 'hh:mm:ss')}">
|
||||
<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 class="d-flex gap-2">
|
||||
<button class="btn btn-link btn-sm p-0 text-danger text-decoration-none fs-tiny" onclick="app.removeActivity(${i})">REMOVE</button>
|
||||
</div>
|
||||
</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 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>
|
||||
<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">Set Duration</label>
|
||||
<div class="d-flex gap-2 ms-auto">
|
||||
<button class="btn btn-link btn-sm p-0 text-primary text-decoration-none fs-tiny" onclick="app.addRestAfter(${i})">ADD REST</button>
|
||||
<button class="btn btn-link btn-sm p-0 text-success text-decoration-none fs-tiny" onclick="app.duplicateActivity(${i})">DUPLICATE</button>
|
||||
<button class="btn btn-link btn-sm p-0 text-danger text-decoration-none fs-tiny" onclick="app.removeActivity(${i})">REMOVE</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group input-group-sm">
|
||||
<input type="text" id="act-input-${i}" class="form-control form-control-precise" placeholder="Enter length of time..." value="${this.formatTime(act.duration, 'hh:mm:ss')}">
|
||||
<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('');
|
||||
},
|
||||
|
||||
onDragStart(index, event) {
|
||||
this.draggedItemIndex = index;
|
||||
event.dataTransfer.effectAllowed = 'move';
|
||||
// Add a small delay to make the actual element transparent while dragging
|
||||
setTimeout(() => {
|
||||
event.target.classList.add('dragging');
|
||||
}, 0);
|
||||
},
|
||||
|
||||
onDragOver(index, event) {
|
||||
event.preventDefault();
|
||||
event.dataTransfer.dropEffect = 'move';
|
||||
},
|
||||
|
||||
onDrop(index, event) {
|
||||
event.preventDefault();
|
||||
if (this.draggedItemIndex === null || this.draggedItemIndex === index) return;
|
||||
|
||||
const item = this.customActivities.splice(this.draggedItemIndex, 1)[0];
|
||||
this.customActivities.splice(index, 0, item);
|
||||
|
||||
this.draggedItemIndex = null;
|
||||
this.renderCustomBuilder();
|
||||
},
|
||||
|
||||
addActivity() {
|
||||
this.customActivities.push({ name: `Activity ${this.customActivities.length + 1}`, duration: 60000 });
|
||||
this.customActivities.push({ name: `Activity ${this.customActivities.length + 1}`, duration: 60000, isRest: false });
|
||||
this.renderCustomBuilder();
|
||||
},
|
||||
|
||||
addRestAfter(index) {
|
||||
const restDuration = (parseInt(this.el.settingRestDuration.value) || 30) * 1000;
|
||||
this.customActivities.splice(index + 1, 0, { name: 'Rest', duration: restDuration, isRest: true });
|
||||
this.renderCustomBuilder();
|
||||
},
|
||||
|
||||
duplicateActivity(index) {
|
||||
const original = this.customActivities[index];
|
||||
const clone = { ...original };
|
||||
this.customActivities.splice(index + 1, 0, clone);
|
||||
this.renderCustomBuilder();
|
||||
},
|
||||
|
||||
@ -636,6 +736,9 @@ const app = {
|
||||
if (!this.audioCtx) {
|
||||
this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
|
||||
}
|
||||
if (this.audioCtx.state === 'suspended') {
|
||||
this.audioCtx.resume();
|
||||
}
|
||||
const osc = this.audioCtx.createOscillator();
|
||||
const gain = this.audioCtx.createGain();
|
||||
|
||||
|
||||
273
index.php
273
index.php
@ -29,16 +29,24 @@ $projectImage = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
||||
<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 class="bg-white">
|
||||
<body>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar navbar-light bg-white border-bottom py-3">
|
||||
<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">
|
||||
<!-- Dynamic actions can be injected here -->
|
||||
<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>
|
||||
@ -103,148 +111,171 @@ $projectImage = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
||||
|
||||
<!-- VIEW: TIMER WORKSPACE -->
|
||||
<section id="view-timer" class="view-section">
|
||||
<div class="text-center mb-5">
|
||||
|
||||
<div class="timer-workspace-container">
|
||||
|
||||
<!-- 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>
|
||||
<!-- 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 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>
|
||||
|
||||
<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>
|
||||
<!-- 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-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 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>
|
||||
<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>
|
||||
<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="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 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="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 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>
|
||||
<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>
|
||||
<!-- 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 - 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;">
|
||||
<!-- 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>
|
||||
|
||||
<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 -->
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user