base_pass2
This commit is contained in:
Flatlogic Bot
parent
82cd85b8bf
commit
e601934adc
@ -182,10 +182,10 @@ body {
|
||||
|
||||
/* Activity Builder */
|
||||
#custom-builder {
|
||||
background: var(--surface-color);
|
||||
padding: 1.5rem;
|
||||
border: 1px dashed var(--border-color);
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.activity-row {
|
||||
@ -292,7 +292,7 @@ body {
|
||||
}
|
||||
|
||||
.timer-side-column {
|
||||
width: 350px;
|
||||
width: 380px;
|
||||
order: 1; /* History on left on desktop */
|
||||
}
|
||||
|
||||
@ -310,4 +310,36 @@ body {
|
||||
|
||||
footer {
|
||||
border-color: var(--border-color) !important;
|
||||
}
|
||||
|
||||
/* Dark Mode Overrides for Status Badges and Table Rows */
|
||||
body.dark-mode .bg-success {
|
||||
background-color: rgba(16, 185, 129, 0.2) !important;
|
||||
color: #10b981 !important;
|
||||
border: 1px solid rgba(16, 185, 129, 0.4);
|
||||
}
|
||||
body.dark-mode .bg-primary {
|
||||
background-color: rgba(59, 130, 246, 0.2) !important;
|
||||
color: #60a5fa !important;
|
||||
border: 1px solid rgba(59, 130, 246, 0.4);
|
||||
}
|
||||
body.dark-mode .bg-danger {
|
||||
background-color: rgba(239, 68, 68, 0.2) !important;
|
||||
color: #f87171 !important;
|
||||
border: 1px solid rgba(239, 68, 68, 0.4);
|
||||
}
|
||||
body.dark-mode .table-success {
|
||||
background-color: rgba(16, 185, 129, 0.1) !important;
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
/* Ensure history list items inherit dark mode color */
|
||||
body.dark-mode .table-precise td {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
body.dark-mode .font-tabular {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
body.dark-mode .text-muted {
|
||||
color: var(--text-secondary) !important;
|
||||
}
|
||||
@ -60,6 +60,7 @@ const app = {
|
||||
activeActivityName: document.getElementById('active-activity-name'),
|
||||
sessionTitle: document.getElementById('session-title'),
|
||||
timerSideColumn: document.getElementById('timer-side-column'),
|
||||
historySection: document.getElementById('history-section'),
|
||||
|
||||
btnStart: document.getElementById('btn-start'),
|
||||
btnPause: document.getElementById('btn-pause'),
|
||||
@ -186,9 +187,17 @@ const app = {
|
||||
this.el.btnNext.classList.toggle('d-none', !mode.hasRelay);
|
||||
|
||||
this.el.timerSideColumn.classList.toggle('d-none', !mode.hasLaps && !mode.hasRelay && !mode.isCustom);
|
||||
|
||||
if (mode.isCustom) {
|
||||
this.el.customBuilder.classList.remove('d-none');
|
||||
this.el.historySection.classList.add('d-none');
|
||||
} else {
|
||||
this.el.customBuilder.classList.add('d-none');
|
||||
this.el.historySection.classList.remove('d-none');
|
||||
}
|
||||
|
||||
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');
|
||||
@ -294,6 +303,10 @@ const app = {
|
||||
|
||||
this.countdownStartValue = this.customActivities[0].duration;
|
||||
this.elapsedTime = isCountdownMode ? this.countdownStartValue : 0;
|
||||
|
||||
// Transition: Builder -> History
|
||||
this.el.customBuilder.classList.add('d-none');
|
||||
this.el.historySection.classList.remove('d-none');
|
||||
}
|
||||
|
||||
if (this.isPaused) {
|
||||
@ -379,6 +392,12 @@ const app = {
|
||||
if (this.el.inputS) this.el.inputS.disabled = false;
|
||||
if (this.el.participantCount) this.el.participantCount.disabled = false;
|
||||
|
||||
// Transition: History -> Builder (if custom)
|
||||
if (this.currentMode === 'custom') {
|
||||
this.el.customBuilder.classList.remove('d-none');
|
||||
this.el.historySection.classList.add('d-none');
|
||||
}
|
||||
|
||||
this.updateDisplay();
|
||||
},
|
||||
|
||||
|
||||
56
index.php
56
index.php
@ -114,24 +114,40 @@ $projectImage = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
||||
|
||||
<div class="timer-workspace-container">
|
||||
|
||||
<!-- Side Column (History) - MOVED TO LEFT -->
|
||||
<!-- Side Column (History / Builder) - 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>
|
||||
|
||||
<!-- History Section -->
|
||||
<div id="history-section">
|
||||
<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>
|
||||
|
||||
<!-- Custom Timer Builder Section -->
|
||||
<div id="custom-builder" class="d-none text-start">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<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>
|
||||
|
||||
@ -262,16 +278,6 @@ $projectImage = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom Timer Builder -->
|
||||
<div id="custom-builder" class="d-none mb-5 text-start">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h4 class="fs-6 fw-bold text-uppercase tracking-widest m-0">Activities Chain</h4>
|
||||
<button id="btn-add-activity" class="btn btn-outline-primary btn-sm btn-precise">+ Add Activity</button>
|
||||
</div>
|
||||
<div id="activity-list" class="d-flex flex-column gap-3 mb-3">
|
||||
<!-- Activity inputs will be injected here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user