162 lines
9.3 KiB
HTML
162 lines
9.3 KiB
HTML
<!DOCTYPE html>
|
||
<!-- Режим дня. Архетип: календарь-чеклист дня + привычки. ДС 5 файлов ниже. -->
|
||
<html lang="ru" data-theme="light">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Мой режим дня</title>
|
||
<link rel="stylesheet" href="design-system/kt-ai-fonts.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-tokens.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-components.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-page.css">
|
||
<link rel="stylesheet" href="design-system/vibe-theme.css">
|
||
<style>
|
||
section.blk { margin-top: var(--kt-ai-space-9); }
|
||
section.blk > h2 { font-size: var(--kt-ai-text-xl); font-weight: var(--kt-ai-weight-semibold); margin-bottom: var(--kt-ai-space-5); }
|
||
.blk-actions { display: flex; align-items: center; gap: var(--kt-ai-space-5); flex-wrap: wrap; }
|
||
.progress { height: 8px; border-radius: var(--kt-ai-radius-full); background: var(--kt-ai-bg-hover); overflow: hidden; flex: 1 1 160px; min-width: 120px; max-width: 380px; }
|
||
.progress i { display: block; height: 100%; border-radius: var(--kt-ai-radius-full); background: var(--kt-ai-primary); transition: width .3s ease; }
|
||
.item-name { display: inline; }
|
||
.item-row:hover .item-name { text-decoration-color: var(--kt-ai-fg-faint); text-underline-offset: 2px; cursor: pointer; }
|
||
.item-row:hover .item-name:hover { color: var(--kt-ai-fg); }
|
||
.item-check { cursor: pointer; }
|
||
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--kt-ai-space-4); }
|
||
.wcell { display: flex; flex-direction: column; gap: var(--kt-ai-space-3); padding: var(--kt-ai-space-5); background: var(--kt-ai-card-bg); border: 1px solid var(--kt-ai-divider); border-radius: 10px; }
|
||
.wcell span:first-child { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); }
|
||
.wcells { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
|
||
.wcells i { height: 22px; border-radius: 6px; background: var(--kt-ai-bg-hover); }
|
||
.wcells i.on { background: var(--kt-ai-primary-subtle); }
|
||
.wcells i.today { outline: 2px solid var(--kt-ai-primary); outline-offset: 1px; }
|
||
.wcell b { font-size: var(--kt-ai-text-md); font-weight: var(--kt-ai-weight-semibold); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
|
||
.wcell b.full { color: var(--kt-ai-status-ok-fg); }
|
||
.sleep-row { display: flex; align-items: center; justify-content: space-between; gap: var(--kt-ai-space-6); padding: var(--kt-ai-space-5) 0; border-top: 1px solid var(--kt-ai-divider); }
|
||
.sleep-row span { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); }
|
||
.sleep-val { display: flex; align-items: center; gap: var(--kt-ai-space-3); font-size: var(--kt-ai-text-md); font-weight: var(--kt-ai-weight-semibold); }
|
||
.sleep-val .kt-icon { color: var(--kt-ai-fg-muted); }
|
||
.drawer-title { font-size: var(--kt-ai-text-lg); font-weight: var(--kt-ai-weight-semibold); margin-bottom: var(--kt-ai-space-6); }
|
||
.day-meta { display: flex; align-items: center; gap: var(--kt-ai-space-4); margin-bottom: var(--kt-ai-space-6); }
|
||
@media (max-width: 720px) {
|
||
.wcell { padding: var(--kt-ai-space-4); }
|
||
.wcell span:first-child { display: none; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="kt-ai-app">
|
||
<div class="kt-ai-shell">
|
||
<aside class="kt-ai-sidebar">
|
||
<div class="kt-ai-brand-row" style="padding: var(--kt-ai-space-7) var(--kt-ai-space-7) var(--kt-ai-space-5)">
|
||
<img src="design-system/brand/kt-ai-logo.png" alt="">
|
||
<span>Режим дня</span>
|
||
</div>
|
||
<nav>
|
||
<div class="kt-ai-nav-group">
|
||
<a class="kt-ai-nav-item is-active" href="#day">Сегодня</a>
|
||
<a class="kt-ai-nav-item" href="#habits">Привычки</a>
|
||
<a class="kt-ai-nav-item" href="#sleep">Сон</a>
|
||
</div>
|
||
</nav>
|
||
</aside>
|
||
<main class="kt-ai-main">
|
||
<header class="kt-ai-topbar">
|
||
<strong id="pageTitle">Сегодня</strong>
|
||
<span class="spacer"></span>
|
||
<span class="kt-ai-chip" id="dateChip"></span>
|
||
</header>
|
||
<div class="kt-ai-work-column">
|
||
<div class="kt-ai-kpi-strip" data-cards="true">
|
||
<div class="kt-ai-kpi"><span class="value" id="kpiDone">–</span><span class="label">выполнено сегодня</span></div>
|
||
<div class="kt-ai-kpi" id="kWeek"><span class="value" id="kpiWeek">–</span>
|
||
<span class="progress" style="max-width:100%;margin-top:4px"><i class="pfill" style="width:0%"></i></span>
|
||
<span class="label">средняя неделя (7 дней)</span></div>
|
||
<div class="kt-ai-kpi"><span class="value" id="kpiStreak">–</span><span class="label">стрик: дней подряд по плану</span></div>
|
||
<div class="kt-ai-kpi"><span class="value" id="kpiSleep">–</span><span class="label">по расписанию: отбой → подъём</span></div>
|
||
</div>
|
||
|
||
<section class="blk" id="day">
|
||
<div class="blk-actions">
|
||
<h2>Сегодняшний план</h2>
|
||
<span class="kt-ai-spacer"></span>
|
||
<div class="progress" aria-hidden="true"><i id="progressBar" style="width:0%"></i></div>
|
||
<span id="progressText" class="kt-ai-chip"></span>
|
||
<button class="kt-ai-btn" data-variant="ghost" id="btnToday">Все пункты</button>
|
||
</div>
|
||
<div id="dayList"></div>
|
||
</section>
|
||
|
||
<section class="blk" id="habits">
|
||
<div class="blk-actions">
|
||
<h2>Привычки недели</h2>
|
||
<span class="kt-ai-spacer"></span>
|
||
<button class="kt-ai-icon-button" id="btnAddHabit" data-tip="Добавить привычку" aria-label="Добавить привычку">
|
||
<svg class="kt-icon" aria-hidden="true"><use href="#plus"></use></svg>
|
||
</button>
|
||
</div>
|
||
<div class="week" id="weekGrid"></div>
|
||
</section>
|
||
|
||
<section class="blk" id="sleep">
|
||
<h2>Отбой и пробуждение</h2>
|
||
<div class="kt-ai-card">
|
||
<div class="sleep-row" style="border-top:none"><span>Отбой</span><span class="sleep-val"><i data-sleepkey="bedtime"></i></span></div>
|
||
<div class="sleep-row"><span>Пробуждение</span><span class="sleep-val"><i data-sleepkey="wake"></i></span></div>
|
||
<div class="sleep-row"><span>Как сдвинуть часы</span><span class="sleep-val">Напиши мне в чат, какой тебе нужен отбой — поправлю</span></div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<!-- Drawer: детали дня -->
|
||
<div class="kt-ai-drawer" id="dayDrawer" style="display:none" role="dialog" aria-modal="true" aria-labelledby="dayDrawerTitle">
|
||
<h3 class="drawer-title" id="dayDrawerTitle">День</h3>
|
||
<div class="day-meta">
|
||
<span class="kt-ai-status-pill" id="dayDrawerPill" data-status="info"></span>
|
||
<span id="dayDrawerDate" style="font-size:var(--kt-ai-text-2xs);color:var(--kt-ai-fg-muted)"></span>
|
||
</div>
|
||
<div id="dayDrawerList"></div>
|
||
</div>
|
||
|
||
<!-- Drawer: детали привычки -->
|
||
<div class="kt-ai-drawer" id="habitDrawer" style="display:none" role="dialog" aria-modal="true" aria-labelledby="habitDrawerTitle">
|
||
<h3 class="drawer-title" id="habitDrawerTitle">Привычка</h3>
|
||
<p id="habitDrawerNote" style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted);margin-bottom:var(--kt-ai-space-6)">Отмечай день, если успел. Клик по дню переключает отметку, по названию — открыть/скрыть.</p>
|
||
<div class="wcells" id="habitDrawerCells" style="grid-template-columns:repeat(7,1fr)"></div>
|
||
<div class="kt-ai-drawer-actions">
|
||
<button class="kt-ai-btn" data-variant="ghost" id="btnDeleteHabit">Удалить</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal: новая привычка -->
|
||
<div class="kt-ai-modal-overlay" id="habitOverlay" style="display:none" onclick="if(event.target===this)this.style.display='none'"></div>
|
||
<div class="kt-ai-modal" id="habitModal" role="dialog" aria-modal="true" aria-labelledby="habitModalTitle" hidden>
|
||
<h3 class="modal-title" id="habitModalTitle">Новая привычка</h3>
|
||
<div class="kt-ai-field">
|
||
<label for="hName">Название</label>
|
||
<input class="kt-ai-input" id="hName" placeholder="Например: 30 минут спорта" maxlength="60">
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label for="hNote">Заметка (необязательно)</label>
|
||
<input class="kt-ai-input" id="hNote" placeholder="Утренняя пробежка за домом" maxlength="120">
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label for="hDays">Сколько дней в неделю</label>
|
||
<select class="kt-ai-select" id="hDays">
|
||
<option value="7">Ежедневно</option>
|
||
<option value="5" selected>5 дней</option>
|
||
<option value="3">3 дня</option>
|
||
<option value="1">Раз в неделю</option>
|
||
</select>
|
||
</div>
|
||
<div class="modal-actions">
|
||
<button class="kt-ai-btn" data-variant="ghost" id="btnHabitCancel">Отмена</button>
|
||
<button class="kt-ai-btn" data-variant="primary" id="btnHabitSave">Добавить</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="kt-ai-toast-stack" id="toasts"></div>
|
||
|
||
<script src="design-system/icons/kt-ai-icons.js"></script>
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|