derekc
8e92ae6073
- Extend start-time trigger window from 15s to 5 min so opening the dashboard late still marks the meeting as started - Only play chime and show TV overlay when within 30s of start time - Skip switchBlock call when the session is already on that block Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
800 lines
26 KiB
Vue
800 lines
26 KiB
Vue
<template>
|
|
<div class="page">
|
|
<NavBar />
|
|
<main class="container">
|
|
<div class="page-header">
|
|
<h1>Dashboard</h1>
|
|
<ChildSelector />
|
|
</div>
|
|
|
|
<div v-if="!activeChild" class="empty-state">
|
|
<p>Add a child in <RouterLink to="/admin">Admin</RouterLink> to get started.</p>
|
|
</div>
|
|
|
|
<div v-else class="dashboard-grid">
|
|
|
|
<!-- Top row: TV Dashboard · 3 Strikes · Overlays -->
|
|
<div class="top-row">
|
|
<!-- TV Link -->
|
|
<div class="card tv-card">
|
|
<div class="card-title">TV Dashboard</div>
|
|
<p class="tv-desc">Open this on the living room TV for the full-screen view.</p>
|
|
<a :href="`/tv/${activeChild.tv_token}`" target="_blank" class="btn-primary">
|
|
Open TV View →
|
|
</a>
|
|
</div>
|
|
|
|
<!-- 3 Strikes -->
|
|
<div class="card strikes-card">
|
|
<div class="card-title">3 Strikes</div>
|
|
<div class="strikes-list">
|
|
<div v-for="child in childrenStore.children" :key="child.id" class="strikes-row">
|
|
<div class="strikes-child-color" :style="{ background: child.color }"></div>
|
|
<span class="strikes-child-name">{{ child.name }}</span>
|
|
<div class="strikes-buttons">
|
|
<button
|
|
v-for="i in 3"
|
|
:key="i"
|
|
class="strike-btn"
|
|
:class="{ lit: i <= child.strikes }"
|
|
@click="toggleStrike(child, i)"
|
|
:title="`Strike ${i}`"
|
|
>✕</button>
|
|
</div>
|
|
</div>
|
|
<div v-if="childrenStore.children.length === 0" class="empty-small">No children added yet.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Overlays -->
|
|
<div class="card overlays-card">
|
|
<div class="card-title">Overlays</div>
|
|
<div class="overlays-grid">
|
|
<button
|
|
class="overlay-btn"
|
|
:class="{ 'overlay-btn-active': scheduleStore.showRulesOverlay }"
|
|
@click="toggleRulesOverlay"
|
|
:disabled="!activeChild"
|
|
>
|
|
<span class="overlay-btn-icon">📋</span>
|
|
<span>Rules/Expectations</span>
|
|
<span v-if="scheduleStore.showRulesOverlay" class="overlay-live-badge">LIVE</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Session + Schedule row -->
|
|
<div class="bottom-row">
|
|
<!-- Today's session card -->
|
|
<div class="card session-card">
|
|
<div class="card-title">Today's Session</div>
|
|
<div v-if="scheduleStore.session">
|
|
<div v-if="scheduleStore.blocks.length > 0" class="day-progress-section">
|
|
<div class="day-progress-header">
|
|
<span class="badge-active">Active</span>
|
|
<span class="day-progress-pct">{{ dayProgressPercent }}%</span>
|
|
</div>
|
|
<ProgressBar :percent="dayProgressPercent" />
|
|
<div class="day-progress-times">
|
|
<span>{{ firstBlockStartTime }}</span>
|
|
<span>{{ currentTimeDisplay }}</span>
|
|
<span>{{ estimatedFinishTime }}</span>
|
|
</div>
|
|
</div>
|
|
<div v-else class="session-info">
|
|
<span class="badge-active">Active</span>
|
|
</div>
|
|
<div v-if="scheduleStore.currentBlock" class="current-block-timer">
|
|
<TimerDisplay
|
|
compact
|
|
:block="scheduleStore.currentBlock"
|
|
:session="scheduleStore.session"
|
|
:is-paused="scheduleStore.isPaused"
|
|
:block-started-at="scheduleStore.blockStartedAt"
|
|
:block-elapsed-offset="scheduleStore.blockElapsedOffset"
|
|
/>
|
|
</div>
|
|
|
|
<div class="session-actions">
|
|
<button
|
|
class="btn-sm"
|
|
v-if="scheduleStore.session.current_block_id && !scheduleStore.isPaused"
|
|
@click="sendAction('pause')"
|
|
>Pause</button>
|
|
<button
|
|
class="btn-sm btn-start"
|
|
v-if="scheduleStore.isPaused && scheduleStore.blockElapsedOffset === 0 && scheduleStore.session.current_block_id"
|
|
@click="scheduleStore.startCurrentBlock(scheduleStore.session.id)"
|
|
>Start</button>
|
|
<button
|
|
class="btn-sm"
|
|
v-if="scheduleStore.isPaused && scheduleStore.blockElapsedOffset > 0"
|
|
@click="scheduleStore.resumeCurrentBlock(scheduleStore.session.id)"
|
|
>Resume</button>
|
|
<button
|
|
class="btn-sm"
|
|
v-if="scheduleStore.session.current_block_id"
|
|
@click="scheduleStore.resetCurrentBlock(scheduleStore.session.id)"
|
|
>Reset</button>
|
|
<button
|
|
class="btn-sm"
|
|
v-if="scheduleStore.session.current_block_id"
|
|
@click="scheduleStore.markBlockDone(scheduleStore.session.id)"
|
|
>Done</button>
|
|
<button class="btn-sm btn-danger" @click="sendAction('complete')">End Day</button>
|
|
</div>
|
|
|
|
<!-- Break Time section -->
|
|
<div
|
|
v-if="scheduleStore.currentBlock?.break_time_enabled"
|
|
class="break-section"
|
|
:class="{ 'break-active': scheduleStore.isBreakMode }"
|
|
>
|
|
<div class="break-header">
|
|
<span class="break-icon">☕</span>
|
|
<span class="break-title">Break Time</span>
|
|
<span class="break-duration-badge">{{ scheduleStore.currentBlock.break_time_minutes }} min</span>
|
|
</div>
|
|
<div v-if="scheduleStore.isBreakMode" class="break-timer-display">
|
|
<TimerDisplay
|
|
compact
|
|
:block="breakBlock"
|
|
:session="scheduleStore.session"
|
|
:is-paused="!scheduleStore.breakStartedAt"
|
|
:block-started-at="scheduleStore.breakStartedAt"
|
|
:block-elapsed-offset="scheduleStore.breakElapsedOffset"
|
|
/>
|
|
</div>
|
|
<div class="break-actions">
|
|
<button
|
|
class="btn-sm btn-break"
|
|
v-if="!scheduleStore.isBreakMode"
|
|
@click="scheduleStore.startBreak(scheduleStore.session.id)"
|
|
>Start Break</button>
|
|
<button
|
|
class="btn-sm btn-break"
|
|
v-if="scheduleStore.isBreakMode && scheduleStore.breakStartedAt"
|
|
@click="scheduleStore.pauseBreak(scheduleStore.session.id)"
|
|
>Pause</button>
|
|
<button
|
|
class="btn-sm btn-break"
|
|
v-if="scheduleStore.isBreakMode && !scheduleStore.breakStartedAt && scheduleStore.breakElapsedOffset > 0"
|
|
@click="scheduleStore.resumeBreak(scheduleStore.session.id)"
|
|
>Resume</button>
|
|
<button
|
|
class="btn-sm"
|
|
v-if="scheduleStore.isBreakMode"
|
|
@click="scheduleStore.resetBreak(scheduleStore.session.id)"
|
|
>Reset</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="no-session">
|
|
<p>No active session.</p>
|
|
<button class="btn-primary" @click="showStartDialog = true">Start Day</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Schedule blocks -->
|
|
<div class="card">
|
|
<div class="card-title">Today's Schedule</div>
|
|
<div v-if="scheduleStore.blocks.length === 0" class="empty-small">
|
|
No blocks loaded.
|
|
</div>
|
|
<div class="block-list" v-else>
|
|
<div v-for="block in scheduleStore.blocks" :key="block.id" class="block-row-wrap">
|
|
<ScheduleBlock
|
|
:block="block"
|
|
:is-current="block.id === scheduleStore.session?.current_block_id"
|
|
:is-completed="scheduleStore.completedBlockIds.includes(block.id)"
|
|
:elapsed-seconds="blockElapsed(block)"
|
|
@click="selectBlock(block)"
|
|
/>
|
|
<button
|
|
class="agenda-btn"
|
|
:class="{ 'agenda-btn-set': scheduleStore.blockAgendas[String(block.id)] }"
|
|
@click.stop="openAgendaDialog(block)"
|
|
title="Set agenda for this block"
|
|
>📝</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- end bottom-row -->
|
|
|
|
</div>
|
|
|
|
<!-- Agenda dialog -->
|
|
<div class="dialog-overlay" v-if="agendaDialog.open" @click.self="closeAgendaDialog">
|
|
<div class="dialog">
|
|
<h2>Block Agenda</h2>
|
|
<p class="dialog-hint">{{ agendaDialog.blockLabel }}</p>
|
|
<div class="field">
|
|
<label>Today's activity or note</label>
|
|
<textarea
|
|
v-model="agendaDialog.text"
|
|
class="agenda-textarea"
|
|
placeholder="e.g. Chapter 5 reading, worksheet page 12..."
|
|
rows="4"
|
|
@keydown.ctrl.enter="saveAgenda"
|
|
></textarea>
|
|
</div>
|
|
<div class="dialog-actions">
|
|
<button class="btn-sm btn-danger" v-if="agendaDialog.existing" @click="clearAgenda">Clear</button>
|
|
<button class="btn-sm" @click="closeAgendaDialog">Cancel</button>
|
|
<button class="btn-primary" @click="saveAgenda">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Start session dialog -->
|
|
<div class="dialog-overlay" v-if="showStartDialog" @click.self="showStartDialog = false">
|
|
<div class="dialog">
|
|
<h2>Start School Day</h2>
|
|
<div class="field">
|
|
<label>Schedule Template</label>
|
|
<select v-model="selectedTemplate">
|
|
<option :value="null">No template (freestyle)</option>
|
|
<option v-for="t in templates" :key="t.id" :value="t.id">{{ t.name }}</option>
|
|
</select>
|
|
</div>
|
|
<div class="dialog-actions">
|
|
<button class="btn-sm" @click="showStartDialog = false">Cancel</button>
|
|
<button class="btn-primary" @click="startSession">Start</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Meeting alert corner toasts -->
|
|
<teleport to="body">
|
|
<div class="meeting-toasts">
|
|
<transition-group name="toast">
|
|
<div v-for="alert in meetingAlerts.dashboardAlerts.value" :key="alert.id" class="meeting-toast">
|
|
<div class="toast-icon">📅</div>
|
|
<div class="toast-body">
|
|
<div class="toast-title">Upcoming Meeting</div>
|
|
<div class="toast-label">{{ alert.label }}</div>
|
|
<div class="toast-countdown">Starts in {{ meetingAlerts.alertCountdown(alert) }}</div>
|
|
</div>
|
|
<button class="toast-dismiss" @click="meetingAlerts.dismissDashboardAlert(alert.id)">✕</button>
|
|
</div>
|
|
</transition-group>
|
|
</div>
|
|
</teleport>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, watch, computed } from 'vue'
|
|
import { useChildrenStore } from '@/stores/children'
|
|
import { useScheduleStore } from '@/stores/schedule'
|
|
import { useWebSocket } from '@/composables/useWebSocket'
|
|
import { useMeetingAlerts } from '@/composables/useMeetingAlerts'
|
|
import api from '@/composables/useApi'
|
|
import NavBar from '@/components/NavBar.vue'
|
|
import ChildSelector from '@/components/ChildSelector.vue'
|
|
import ProgressBar from '@/components/ProgressBar.vue'
|
|
import ScheduleBlock from '@/components/ScheduleBlock.vue'
|
|
import TimerDisplay from '@/components/TimerDisplay.vue'
|
|
|
|
const childrenStore = useChildrenStore()
|
|
const scheduleStore = useScheduleStore()
|
|
const activeChild = computed(() => childrenStore.activeChild)
|
|
const meetingAlerts = useMeetingAlerts((blockId) => {
|
|
if (!scheduleStore.session) return
|
|
if (scheduleStore.session.current_block_id === blockId) return
|
|
scheduleStore.switchBlock(scheduleStore.session.id, blockId)
|
|
})
|
|
|
|
// Virtual block for break timer (same block but with break duration)
|
|
const breakBlock = computed(() => {
|
|
const block = scheduleStore.currentBlock
|
|
if (!block?.break_time_enabled) return null
|
|
return { ...block, duration_minutes: block.break_time_minutes }
|
|
})
|
|
const showStartDialog = ref(false)
|
|
const selectedTemplate = ref(null)
|
|
const templates = ref([])
|
|
|
|
const now = ref(new Date())
|
|
setInterval(() => { now.value = new Date() }, 1000)
|
|
|
|
function formatDayTime(str) {
|
|
if (!str) return ''
|
|
const [h, m] = str.split(':').map(Number)
|
|
const period = h >= 12 ? 'PM' : 'AM'
|
|
const hour = h % 12 || 12
|
|
return `${hour}:${String(m).padStart(2, '0')} ${period}`
|
|
}
|
|
|
|
const currentTimeDisplay = computed(() =>
|
|
now.value.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })
|
|
)
|
|
|
|
const dayProgressPercent = computed(() => {
|
|
const allBlocks = scheduleStore.blocks
|
|
if (!allBlocks.length) return 0
|
|
const totalSeconds = allBlocks.reduce((sum, b) => sum + (b.duration_minutes || 0) * 60, 0)
|
|
if (totalSeconds === 0) return 0
|
|
const remainingSeconds = allBlocks.reduce((sum, b) => {
|
|
if (scheduleStore.completedBlockIds.includes(b.id)) return sum
|
|
const blockTotal = (b.duration_minutes || 0) * 60
|
|
const elapsed = blockElapsed(b)
|
|
return sum + Math.max(0, blockTotal - elapsed)
|
|
}, 0)
|
|
return Math.max(0, Math.min(100, Math.round((totalSeconds - remainingSeconds) / totalSeconds * 100)))
|
|
})
|
|
|
|
let wsDisconnect = null
|
|
|
|
async function loadDashboard() {
|
|
if (!activeChild.value) return
|
|
await scheduleStore.fetchDashboard(activeChild.value.tv_token)
|
|
|
|
// Load templates for start dialog
|
|
const res = await api.get('/api/schedules')
|
|
templates.value = res.data
|
|
|
|
// WS subscription
|
|
if (wsDisconnect) wsDisconnect()
|
|
const { disconnect } = useWebSocket(activeChild.value.tv_token, (msg) => {
|
|
scheduleStore.applyWsEvent(msg)
|
|
})
|
|
wsDisconnect = disconnect
|
|
}
|
|
|
|
async function startSession() {
|
|
await scheduleStore.startSession(activeChild.value.id, selectedTemplate.value)
|
|
showStartDialog.value = false
|
|
await loadDashboard()
|
|
}
|
|
|
|
async function toggleStrike(child, index) {
|
|
const newStrikes = index <= child.strikes ? index - 1 : index
|
|
const res = await api.patch(`/api/children/${child.id}/strikes`, { strikes: newStrikes })
|
|
const idx = childrenStore.children.findIndex((c) => c.id === child.id)
|
|
if (idx !== -1) childrenStore.children[idx] = res.data
|
|
}
|
|
|
|
async function sendAction(type) {
|
|
if (!scheduleStore.session) return
|
|
await scheduleStore.sendTimerAction(scheduleStore.session.id, type)
|
|
}
|
|
|
|
function blockElapsed(block) {
|
|
const currentId = scheduleStore.session?.current_block_id
|
|
if (block.id === currentId && scheduleStore.blockStartedAt && !scheduleStore.isPaused) {
|
|
return scheduleStore.blockElapsedOffset + Math.floor((now.value - scheduleStore.blockStartedAt) / 1000)
|
|
}
|
|
return scheduleStore.blockElapsedCache[block.id] || 0
|
|
}
|
|
|
|
function breakElapsed(block) {
|
|
if (scheduleStore.isBreakMode && block.id === scheduleStore.session?.current_block_id && scheduleStore.breakStartedAt) {
|
|
return scheduleStore.breakElapsedOffset + Math.floor((now.value - scheduleStore.breakStartedAt) / 1000)
|
|
}
|
|
return scheduleStore.breakElapsedCache[block.id] || 0
|
|
}
|
|
|
|
const firstBlockStartTime = computed(() => {
|
|
const first = scheduleStore.blocks[0]
|
|
return first?.time_start ? formatDayTime(first.time_start) : ''
|
|
})
|
|
|
|
const estimatedFinishTime = computed(() => {
|
|
const allBlocks = scheduleStore.blocks
|
|
if (!allBlocks.length) return ''
|
|
let remainingSeconds = 0
|
|
for (const b of allBlocks) {
|
|
if (scheduleStore.completedBlockIds.includes(b.id)) continue
|
|
remainingSeconds += Math.max(0, (b.duration_minutes || 0) * 60 - blockElapsed(b))
|
|
if (b.break_time_enabled && b.break_time_minutes) {
|
|
remainingSeconds += Math.max(0, b.break_time_minutes * 60 - breakElapsed(b))
|
|
}
|
|
}
|
|
const finish = new Date(now.value.getTime() + remainingSeconds * 1000)
|
|
const h = finish.getHours()
|
|
const period = h >= 12 ? 'PM' : 'AM'
|
|
const hour = h % 12 || 12
|
|
return `${hour}:${String(finish.getMinutes()).padStart(2, '0')} ${period}`
|
|
})
|
|
|
|
// Agenda dialog
|
|
const agendaDialog = ref({ open: false, blockId: null, blockLabel: '', text: '', existing: false })
|
|
|
|
function openAgendaDialog(block) {
|
|
if (!scheduleStore.session) return
|
|
const label = block.label || block.subject?.name || 'Block'
|
|
const existing = scheduleStore.blockAgendas[String(block.id)] || ''
|
|
agendaDialog.value = { open: true, blockId: block.id, blockLabel: label, text: existing, existing: !!existing }
|
|
}
|
|
|
|
function closeAgendaDialog() {
|
|
agendaDialog.value = { open: false, blockId: null, blockLabel: '', text: '', existing: false }
|
|
}
|
|
|
|
async function saveAgenda() {
|
|
if (!scheduleStore.session || agendaDialog.value.blockId === null) return
|
|
await api.put(
|
|
`/api/sessions/${scheduleStore.session.id}/blocks/${agendaDialog.value.blockId}/agenda`,
|
|
{ text: agendaDialog.value.text }
|
|
)
|
|
closeAgendaDialog()
|
|
}
|
|
|
|
async function clearAgenda() {
|
|
if (!scheduleStore.session || agendaDialog.value.blockId === null) return
|
|
await api.put(
|
|
`/api/sessions/${scheduleStore.session.id}/blocks/${agendaDialog.value.blockId}/agenda`,
|
|
{ text: '' }
|
|
)
|
|
closeAgendaDialog()
|
|
}
|
|
|
|
async function toggleRulesOverlay() {
|
|
if (!activeChild.value) return
|
|
const endpoint = scheduleStore.showRulesOverlay
|
|
? '/api/overlays/rules/hide'
|
|
: '/api/overlays/rules/show'
|
|
await api.post(endpoint, { child_id: activeChild.value.id })
|
|
}
|
|
|
|
function selectBlock(block) {
|
|
if (!scheduleStore.session) return
|
|
// Clicking the current block does nothing — use Start/Pause/Resume buttons
|
|
if (block.id === scheduleStore.session.current_block_id) return
|
|
scheduleStore.selectBlock(scheduleStore.session.id, block.id)
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await childrenStore.fetchChildren()
|
|
await loadDashboard()
|
|
})
|
|
|
|
watch(activeChild, loadDashboard)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page { min-height: 100vh; background: #0f172a; }
|
|
.container { max-width: 1100px; margin: 0 auto; padding: 2rem; }
|
|
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
|
|
h1 { font-size: 1.75rem; font-weight: 700; }
|
|
|
|
.dashboard-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.top-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.bottom-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1.5rem;
|
|
align-items: start;
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.top-row,
|
|
.bottom-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.card {
|
|
background: #1e293b;
|
|
border-radius: 1rem;
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 0.8rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: #64748b;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.session-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
margin-bottom: 0.75rem;
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.day-progress-section { margin-bottom: 0.75rem; }
|
|
.day-progress-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.day-progress-pct { font-size: 0.9rem; color: #94a3b8; }
|
|
.day-progress-times {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 0.75rem;
|
|
color: #475569;
|
|
margin-top: 0.35rem;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.badge-active {
|
|
background: #14532d;
|
|
color: #4ade80;
|
|
padding: 0.2rem 0.6rem;
|
|
border-radius: 999px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.current-block-timer { display: flex; justify-content: center; margin: 1rem 0; }
|
|
.session-actions { display: flex; align-items: center; margin-top: 1rem; gap: 0.5rem; }
|
|
.session-actions .btn-sm { flex: 1; text-align: center; }
|
|
|
|
.btn-sm {
|
|
padding: 0.8rem 0.9rem;
|
|
border: 1px solid #334155;
|
|
background: transparent;
|
|
color: #94a3b8;
|
|
border-radius: 0.5rem;
|
|
cursor: pointer;
|
|
font-size: 0.875rem;
|
|
transition: all 0.2s;
|
|
}
|
|
.btn-sm:hover { background: #334155; }
|
|
.btn-sm.btn-danger { border-color: #7f1d1d; color: #fca5a5; }
|
|
.btn-sm.btn-danger:hover { background: #7f1d1d; }
|
|
.btn-sm.btn-start { border-color: #4f46e5; color: #818cf8; }
|
|
.btn-sm.btn-start:hover { background: #4f46e5; color: #fff; }
|
|
|
|
.break-section {
|
|
margin: 0.75rem 0;
|
|
background: #1c1207;
|
|
border: 1px solid #78350f;
|
|
border-radius: 0.75rem;
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
.break-section.break-active { border-color: #f59e0b; background: #1c1a07; }
|
|
.break-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.break-icon { font-size: 1rem; }
|
|
.break-title { font-size: 0.8rem; font-weight: 600; color: #fbbf24; text-transform: uppercase; letter-spacing: 0.06em; flex: 1; }
|
|
.break-duration-badge {
|
|
font-size: 0.75rem;
|
|
background: #78350f;
|
|
color: #fde68a;
|
|
padding: 0.1rem 0.45rem;
|
|
border-radius: 999px;
|
|
}
|
|
.break-timer-display { display: flex; justify-content: flex-start; margin-bottom: 0.5rem; }
|
|
.break-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
|
|
.btn-break { border-color: #92400e !important; color: #fbbf24 !important; }
|
|
.btn-break:hover { background: #78350f !important; }
|
|
|
|
.no-session { text-align: center; padding: 1.5rem 0; color: #64748b; }
|
|
.no-session p { margin-bottom: 1rem; }
|
|
|
|
.empty-state { text-align: center; padding: 4rem; color: #64748b; }
|
|
.empty-small { color: #64748b; font-size: 0.9rem; padding: 1rem 0; }
|
|
|
|
.block-list { display: flex; flex-direction: column; gap: 0.5rem; }
|
|
|
|
.block-row-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
.block-row-wrap > :first-child { flex: 1; min-width: 0; }
|
|
|
|
.agenda-btn {
|
|
flex-shrink: 0;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border: 1px solid #334155;
|
|
background: transparent;
|
|
border-radius: 0.4rem;
|
|
cursor: pointer;
|
|
font-size: 0.95rem;
|
|
opacity: 0.4;
|
|
transition: all 0.15s;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
}
|
|
.agenda-btn:hover { opacity: 1; background: #334155; }
|
|
.agenda-btn-set { opacity: 1; border-color: #6366f1; background: #1e1b4b; }
|
|
|
|
.agenda-textarea {
|
|
width: 100%;
|
|
padding: 0.65rem 0.9rem;
|
|
background: #0f172a;
|
|
border: 1px solid #334155;
|
|
border-radius: 0.5rem;
|
|
color: #f1f5f9;
|
|
font-size: 0.9rem;
|
|
resize: vertical;
|
|
font-family: inherit;
|
|
line-height: 1.5;
|
|
box-sizing: border-box;
|
|
}
|
|
.agenda-textarea:focus { outline: none; border-color: #818cf8; }
|
|
|
|
.dialog-hint {
|
|
font-size: 0.82rem;
|
|
color: #64748b;
|
|
margin: -0.5rem 0 0.25rem;
|
|
}
|
|
|
|
.strikes-list { display: flex; flex-direction: column; gap: 0.6rem; }
|
|
|
|
.strikes-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.strikes-child-color { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
|
|
.strikes-child-name { flex: 1; font-size: 0.95rem; }
|
|
|
|
.strikes-buttons { display: flex; gap: 0.5rem; }
|
|
|
|
.strike-btn {
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
border-radius: 50%;
|
|
border: 2px solid #334155;
|
|
background: transparent;
|
|
color: #334155;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.strike-btn:hover { border-color: #ef4444; color: #ef4444; }
|
|
|
|
.strike-btn.lit {
|
|
background: #7f1d1d;
|
|
border-color: #ef4444;
|
|
color: #fca5a5;
|
|
}
|
|
|
|
.tv-desc { color: #64748b; margin-bottom: 1rem; font-size: 0.9rem; }
|
|
.overlays-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; }
|
|
|
|
.overlay-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
padding: 0.75rem 1.25rem;
|
|
background: #1e293b;
|
|
border: 1px solid #334155;
|
|
border-radius: 0.75rem;
|
|
color: #94a3b8;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
.overlay-btn:hover:not(:disabled) { background: #334155; border-color: #475569; color: #f1f5f9; }
|
|
.overlay-btn:disabled { opacity: 0.4; cursor: not-allowed; }
|
|
.overlay-btn-active {
|
|
background: #1e1b4b;
|
|
border-color: #6366f1;
|
|
color: #a5b4fc;
|
|
}
|
|
.overlay-btn-active:hover:not(:disabled) { background: #312e81; }
|
|
.overlay-btn-icon { font-size: 1.2rem; }
|
|
.overlay-live-badge {
|
|
font-size: 0.65rem;
|
|
font-weight: 700;
|
|
background: #6366f1;
|
|
color: #fff;
|
|
padding: 0.1rem 0.4rem;
|
|
border-radius: 999px;
|
|
letter-spacing: 0.06em;
|
|
animation: pulse-badge 1.5s ease-in-out infinite;
|
|
}
|
|
@keyframes pulse-badge {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
.btn-primary {
|
|
display: inline-block;
|
|
padding: 0.7rem 1.5rem;
|
|
background: #4f46e5;
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 0.75rem;
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
transition: background 0.2s;
|
|
}
|
|
.btn-primary:hover { background: #4338ca; }
|
|
|
|
.dialog-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0,0,0,0.7);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 100;
|
|
}
|
|
.dialog {
|
|
background: #1e293b;
|
|
border-radius: 1rem;
|
|
padding: 2rem;
|
|
width: 380px;
|
|
max-width: 90vw;
|
|
}
|
|
.dialog h2 { margin-bottom: 1.5rem; }
|
|
.dialog-actions { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1.5rem; }
|
|
|
|
.field { margin-bottom: 1rem; }
|
|
.field label { display: block; font-size: 0.85rem; color: #94a3b8; margin-bottom: 0.4rem; }
|
|
.field select {
|
|
width: 100%;
|
|
padding: 0.65rem 0.9rem;
|
|
background: #0f172a;
|
|
border: 1px solid #334155;
|
|
border-radius: 0.5rem;
|
|
color: #f1f5f9;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* Meeting alert toasts */
|
|
.meeting-toasts {
|
|
position: fixed;
|
|
bottom: 1.5rem;
|
|
right: 1.5rem;
|
|
z-index: 9999;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
align-items: flex-end;
|
|
}
|
|
.meeting-toast {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.75rem;
|
|
background: #1c1a07;
|
|
border: 1px solid #f59e0b;
|
|
border-radius: 0.75rem;
|
|
padding: 0.85rem 1rem;
|
|
width: 280px;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.6);
|
|
}
|
|
.toast-icon { font-size: 1.5rem; flex-shrink: 0; }
|
|
.toast-body { flex: 1; min-width: 0; }
|
|
.toast-title { font-size: 0.7rem; font-weight: 700; color: #fbbf24; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.15rem; }
|
|
.toast-label { font-size: 0.95rem; font-weight: 600; color: #f1f5f9; margin-bottom: 0.25rem; }
|
|
.toast-countdown { font-size: 1.1rem; font-weight: 700; color: #fbbf24; font-variant-numeric: tabular-nums; }
|
|
.toast-dismiss { background: none; border: none; color: #64748b; cursor: pointer; font-size: 1rem; padding: 0; flex-shrink: 0; line-height: 1; }
|
|
.toast-dismiss:hover { color: #f1f5f9; }
|
|
|
|
.toast-enter-active { transition: all 0.3s ease; }
|
|
.toast-leave-active { transition: all 0.3s ease; }
|
|
.toast-enter-from { opacity: 0; transform: translateX(100%); }
|
|
.toast-leave-to { opacity: 0; transform: translateX(100%); }
|
|
</style>
|