415 lines
17 KiB
HTML
415 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<!-- Дизайн: Стандартный дизайн. CRM детского сада. -->
|
|
<html lang="ru" data-theme="light">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Детский сад «Ромашка» — CRM</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>
|
|
a.kt-ai-btn { text-decoration: none; }
|
|
.kt-ai-app { min-height: 100vh; }
|
|
.kt-ai-shell { display: flex; min-height: 100vh; }
|
|
.kt-ai-sidebar {
|
|
width: 232px;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--kt-ai-space-6);
|
|
padding: var(--kt-ai-space-6);
|
|
background: var(--kt-ai-card-bg);
|
|
border-right: 1px solid var(--kt-ai-border);
|
|
}
|
|
.kt-ai-brand {
|
|
display: flex; align-items: center; gap: var(--kt-ai-space-4);
|
|
padding: var(--kt-ai-space-4);
|
|
}
|
|
.kt-ai-brand-logo {
|
|
width: 32px; height: 32px; border-radius: 8px;
|
|
background: var(--kt-ai-primary-subtle);
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: var(--kt-ai-text-sm);
|
|
font-weight: 600;
|
|
color: var(--kt-ai-brand-blue);
|
|
}
|
|
.kt-ai-brand-text { display: flex; flex-direction: column; gap: 2px; }
|
|
.kt-ai-brand-name { font-size: var(--kt-ai-text-sm); font-weight: 600; line-height: 1.2; }
|
|
.kt-ai-brand-sub { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); line-height: 1.2; }
|
|
.kt-ai-sidebar .kt-ai-btn { width: 100%; }
|
|
.kt-ai-nav-group { display: flex; flex-direction: column; gap: 2px; }
|
|
.kt-ai-nav-title {
|
|
font-size: var(--kt-ai-text-2xs);
|
|
color: var(--kt-ai-fg-faint);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
padding: var(--kt-ai-space-2) var(--kt-ai-space-4);
|
|
}
|
|
.kt-ai-nav-item {
|
|
display: flex; align-items: center; gap: var(--kt-ai-space-3);
|
|
padding: 7px var(--kt-ai-space-4);
|
|
font-size: var(--kt-ai-text-sm);
|
|
color: var(--kt-ai-fg);
|
|
border-radius: var(--kt-ai-radius-md);
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
.kt-ai-nav-item svg { width: 15px; height: 15px; color: var(--kt-ai-fg-muted); }
|
|
.kt-ai-nav-item.is-active {
|
|
background: var(--kt-ai-primary-subtle);
|
|
color: var(--kt-ai-brand-blue);
|
|
font-weight: 500;
|
|
}
|
|
.kt-ai-nav-item.is-active svg { color: var(--kt-ai-brand-blue); }
|
|
.kt-ai-nav-item:hover:not(.is-active) { background: var(--kt-ai-bg-hover); }
|
|
.kt-ai-sidebar-spacer { flex: 1; }
|
|
.kt-ai-sidebar-note {
|
|
font-size: var(--kt-ai-text-xs);
|
|
color: var(--kt-ai-fg-faint);
|
|
padding: 0 var(--kt-ai-space-4);
|
|
line-height: 1.4;
|
|
}
|
|
.kt-ai-main {
|
|
flex: 1;
|
|
display: flex; flex-direction: column;
|
|
min-width: 0;
|
|
background: var(--kt-ai-bg);
|
|
}
|
|
.kt-ai-topbar {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
gap: var(--kt-ai-space-6);
|
|
padding: var(--kt-ai-space-6) var(--kt-ai-space-9);
|
|
border-bottom: 1px solid var(--kt-ai-border);
|
|
background: var(--kt-ai-card-bg);
|
|
flex-wrap: wrap;
|
|
}
|
|
.kt-ai-topbar-title h1 {
|
|
font-size: var(--kt-ai-text-xl);
|
|
font-weight: 500;
|
|
line-height: 1.25;
|
|
color: var(--kt-ai-fg);
|
|
}
|
|
.kt-ai-topbar-actions { display: flex; align-items: center; gap: var(--kt-ai-space-4); }
|
|
.kt-ai-kpi-strip {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: var(--kt-ai-space-4);
|
|
padding: var(--kt-ai-space-6) var(--kt-ai-space-9);
|
|
}
|
|
.kt-ai-kpi {
|
|
background: var(--kt-ai-card-bg);
|
|
border: 1px solid var(--kt-ai-card-border);
|
|
border-radius: var(--vibe-card-radius);
|
|
padding: var(--kt-ai-space-5) var(--kt-ai-space-6);
|
|
display: flex; flex-direction: column; gap: 4px;
|
|
box-shadow: var(--kt-ai-card-shadow);
|
|
}
|
|
.kt-ai-kpi-label { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); }
|
|
.kt-ai-kpi-value { font-size: var(--kt-ai-text-2xl); font-weight: 500; line-height: 1.1; }
|
|
.kt-ai-kpi-sub { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-faint); }
|
|
.kt-ai-content {
|
|
padding: 0 var(--kt-ai-space-9) var(--kt-ai-space-9);
|
|
display: flex; flex-direction: column;
|
|
gap: var(--kt-ai-space-6);
|
|
}
|
|
.kt-ai-toolbar {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
gap: var(--kt-ai-space-4);
|
|
flex-wrap: wrap;
|
|
}
|
|
.kt-ai-search-wrap {
|
|
position: relative; flex: 1 1 320px; max-width: 380px; min-width: 220px;
|
|
}
|
|
.kt-ai-search-wrap svg {
|
|
position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
|
|
width: 15px; height: 15px; color: var(--kt-ai-fg-muted); pointer-events: none;
|
|
}
|
|
.kt-ai-search {
|
|
width: 100%;
|
|
padding: 7px 14px 7px 34px;
|
|
font-size: var(--kt-ai-text-sm);
|
|
border: 1px solid var(--kt-ai-border);
|
|
border-radius: var(--vibe-button-radius);
|
|
background: var(--kt-ai-card-bg);
|
|
color: var(--kt-ai-fg);
|
|
outline: none;
|
|
}
|
|
.kt-ai-search:focus { border-color: var(--kt-ai-border-strong); box-shadow: 0 0 0 3px var(--kt-ai-primary-subtle); }
|
|
.kt-ai-chip-row { display: flex; gap: var(--kt-ai-space-3); flex-wrap: wrap; }
|
|
.kt-ai-table-wrap {
|
|
background: var(--kt-ai-card-bg);
|
|
border: 1px solid var(--kt-ai-card-border);
|
|
border-radius: var(--vibe-card-radius);
|
|
overflow: hidden;
|
|
overflow-x: auto;
|
|
box-shadow: var(--kt-ai-card-shadow);
|
|
}
|
|
.kt-ai-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: var(--kt-ai-text-sm);
|
|
}
|
|
.kt-ai-table thead th {
|
|
text-align: left;
|
|
padding: var(--kt-ai-space-4) var(--kt-ai-space-5);
|
|
font-size: var(--kt-ai-text-xs);
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
color: var(--kt-ai-fg-muted);
|
|
border-bottom: 1px solid var(--kt-ai-border);
|
|
white-space: nowrap;
|
|
background: var(--kt-ai-bg);
|
|
}
|
|
.kt-ai-table tbody td {
|
|
padding: var(--kt-ai-space-4) var(--kt-ai-space-5);
|
|
border-bottom: 1px solid var(--kt-ai-divider);
|
|
vertical-align: middle;
|
|
}
|
|
.kt-ai-table tbody tr:last-child td { border-bottom: none; }
|
|
.kt-ai-table tbody tr:hover td { background: var(--kt-ai-bg-hover); }
|
|
.kt-ai-child-name { font-weight: 500; color: var(--kt-ai-fg); }
|
|
.kt-ai-child-meta { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); margin-top: 2px; }
|
|
.kt-ai-row-actions { display: flex; gap: var(--kt-ai-space-2); justify-content: flex-end; }
|
|
.kt-ai-row-actions .kt-ai-icon-button {
|
|
width: 28px; height: 28px;
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
background: none; border: none; cursor: pointer;
|
|
color: var(--kt-ai-fg-muted);
|
|
border-radius: var(--kt-ai-radius-md);
|
|
}
|
|
.kt-ai-row-actions .kt-ai-icon-button svg { width: 14px; height: 14px; }
|
|
.kt-ai-row-actions .kt-ai-icon-button:hover { background: var(--kt-ai-bg-active); color: var(--kt-ai-fg); }
|
|
.kt-ai-row-actions .kt-ai-icon-button[data-action="delete"] { color: var(--kt-ai-danger); }
|
|
.kt-ai-row-actions .kt-ai-icon-button[data-action="delete"]:hover { background: var(--kt-ai-chip-red-bg); color: var(--kt-ai-chip-red-fg); }
|
|
.kt-ai-status-pill {
|
|
display: inline-block;
|
|
padding: 3px 10px;
|
|
border-radius: var(--vibe-button-radius);
|
|
font-size: var(--kt-ai-text-xs);
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
}
|
|
.kt-ai-status-pill.is-studying { background: var(--kt-ai-chip-green-bg); color: var(--kt-ai-chip-green-fg); }
|
|
.kt-ai-status-pill.is-sick { background: var(--kt-ai-chip-orange-bg); color: var(--kt-ai-chip-orange-fg); }
|
|
.kt-ai-status-pill.is-vacation { background: var(--kt-ai-chip-blue-bg); color: var(--kt-ai-chip-blue-fg); }
|
|
.kt-ai-drawer {
|
|
position: fixed; top: 0; right: 0; bottom: 0;
|
|
width: 440px; max-width: 90vw;
|
|
background: var(--kt-ai-card-bg);
|
|
border-left: 1px solid var(--kt-ai-border);
|
|
box-shadow: var(--kt-ai-shadow-lg);
|
|
z-index: var(--kt-ai-z-drawer);
|
|
display: flex; flex-direction: column;
|
|
}
|
|
.kt-ai-drawer[hidden] { display: none; }
|
|
.kt-ai-drawer-head {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: var(--kt-ai-space-6);
|
|
border-bottom: 1px solid var(--kt-ai-border);
|
|
}
|
|
.kt-ai-drawer-head h2 { font-size: var(--kt-ai-text-lg); font-weight: 500; }
|
|
.kt-ai-drawer-close {
|
|
width: 28px; height: 28px;
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
background: none; border: none; cursor: pointer;
|
|
color: var(--kt-ai-fg-muted);
|
|
border-radius: var(--kt-ai-radius-md);
|
|
}
|
|
.kt-ai-drawer-close svg { width: 15px; height: 15px; }
|
|
.kt-ai-drawer-close:hover { background: var(--kt-ai-bg-hover); color: var(--kt-ai-fg); }
|
|
.kt-ai-drawer-body { flex: 1; overflow-y: auto; padding: var(--kt-ai-space-6); }
|
|
.kt-ai-drawer-body .kt-ai-field { margin-bottom: var(--kt-ai-space-5); }
|
|
.kt-ai-drawer-actions {
|
|
display: flex; gap: var(--kt-ai-space-4);
|
|
padding: var(--kt-ai-space-6);
|
|
border-top: 1px solid var(--kt-ai-border);
|
|
background: var(--kt-ai-bg);
|
|
}
|
|
.kt-ai-drawer-actions .kt-ai-btn { flex: 1; }
|
|
.kt-ai-empty { text-align: center; padding: var(--kt-ai-space-12); color: var(--kt-ai-fg-muted); }
|
|
.kt-ai-empty svg { width: 32px; height: 32px; margin-bottom: var(--kt-ai-space-4); color: var(--kt-ai-fg-faint); }
|
|
.kt-ai-empty p { margin-bottom: var(--kt-ai-space-5); }
|
|
.kt-ai-toast-stack { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: var(--kt-ai-z-toast); }
|
|
.kt-ai-toast {
|
|
background: var(--kt-ai-card-bg);
|
|
border: 1px solid var(--kt-ai-border-strong);
|
|
border-radius: var(--kt-ai-radius-xl);
|
|
padding: 12px 16px;
|
|
font-size: var(--kt-ai-text-sm);
|
|
box-shadow: var(--kt-ai-shadow-md);
|
|
}
|
|
@media (max-width: 900px) {
|
|
.kt-ai-shell { flex-direction: column; }
|
|
.kt-ai-sidebar {
|
|
width: 100%; min-height: 0;
|
|
flex-direction: row; align-items: center;
|
|
overflow-x: auto; border-right: none; border-bottom: 1px solid var(--kt-ai-border);
|
|
}
|
|
.kt-ai-nav-group, .kt-ai-brand-text, .kt-ai-sidebar-spacer, .kt-ai-sidebar-note { display: none; }
|
|
.kt-ai-sidebar .kt-ai-btn { width: auto; }
|
|
.kt-ai-kpi-strip { grid-template-columns: repeat(2, 1fr); }
|
|
.kt-ai-topbar { padding: var(--kt-ai-space-5) var(--kt-ai-space-6); }
|
|
.kt-ai-content { padding: 0 var(--kt-ai-space-6) var(--kt-ai-space-6); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="kt-ai-app">
|
|
<script src="design-system/icons/kt-ai-icons.js"></script>
|
|
<div class="kt-ai-shell">
|
|
<aside class="kt-ai-sidebar">
|
|
<div class="kt-ai-brand">
|
|
<div class="kt-ai-brand-logo">DS</div>
|
|
<div class="kt-ai-brand-text">
|
|
<span class="kt-ai-brand-name">Детский сад «Ромашка»</span>
|
|
<span class="kt-ai-brand-sub">CRM управления</span>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="kt-ai-btn" id="btn-new">
|
|
<svg viewBox="0 0 16 16" fill="none" aria-hidden="true" style="width:14px;height:14px"><use href="#plus"></use></svg>
|
|
<span>Новый ребёнок</span>
|
|
</button>
|
|
<nav>
|
|
<div class="kt-ai-nav-group">
|
|
<div class="kt-ai-nav-title">Обзор</div>
|
|
<a class="kt-ai-nav-item is-active" href="#">
|
|
<svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="#users"></use></svg>
|
|
<span>Дети</span>
|
|
</a>
|
|
<a class="kt-ai-nav-item" href="#">
|
|
<svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="#calendar"></use></svg>
|
|
<span>Посещаемость</span>
|
|
</a>
|
|
<a class="kt-ai-nav-item" href="#">
|
|
<svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="#receipt"></use></svg>
|
|
<span>Оплата</span>
|
|
</a>
|
|
<a class="kt-ai-nav-item" href="#">
|
|
<svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="#chart"></use></svg>
|
|
<span>Отчёты</span>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
<div class="kt-ai-sidebar-spacer"></div>
|
|
<div class="kt-ai-sidebar-note">Демо-данные. Записи хранятся локально в браузере.</div>
|
|
</aside>
|
|
|
|
<main class="kt-ai-main">
|
|
<header class="kt-ai-topbar">
|
|
<div class="kt-ai-topbar-title">
|
|
<h1>Дети</h1>
|
|
</div>
|
|
<div class="kt-ai-topbar-actions">
|
|
<div class="kt-ai-search-wrap">
|
|
<svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="#search"></use></svg>
|
|
<input type="search" class="kt-ai-search" id="search" placeholder="Поиск: имя, группа, родитель…">
|
|
</div>
|
|
<button type="button" class="kt-ai-btn" id="btn-export">
|
|
<svg viewBox="0 0 16 16" fill="none" aria-hidden="true" style="width:14px;height:14px"><use href="#download"></use></svg>
|
|
<span>Выгрузить в Excel</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="kt-ai-kpi-strip" id="kpis"></div>
|
|
|
|
<div class="kt-ai-content">
|
|
<div class="kt-ai-toolbar">
|
|
<div class="kt-ai-chip-row" id="status-filters"></div>
|
|
<span class="kt-ai-fg-muted kt-ai-text-sm" id="count-label"></span>
|
|
</div>
|
|
|
|
<div class="kt-ai-table-wrap">
|
|
<table class="kt-ai-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Ребёнок</th>
|
|
<th>Группа</th>
|
|
<th>Родитель / контакт</th>
|
|
<th>Статус</th>
|
|
<th>Оплата</th>
|
|
<th style="text-align:right">Действия</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tbody"></tbody>
|
|
</table>
|
|
<div class="kt-ai-empty" id="empty" hidden>
|
|
<svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="#users"></use></svg>
|
|
<p>По вашему запросу ничего не найдено.</p>
|
|
<button type="button" class="kt-ai-btn" id="btn-clear-filters">Сбросить фильтры</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<aside class="kt-ai-drawer" id="drawer" hidden>
|
|
<div class="kt-ai-drawer-head">
|
|
<h2 id="drawer-title">Новый ребёнок</h2>
|
|
<button type="button" class="kt-ai-drawer-close" id="btn-drawer-close" aria-label="Закрыть">
|
|
<svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="#x"></use></svg>
|
|
</button>
|
|
</div>
|
|
<div class="kt-ai-drawer-body">
|
|
<form id="child-form">
|
|
<input type="hidden" id="field-id">
|
|
<div class="kt-ai-field">
|
|
<label class="kt-ai-label" for="field-name">Имя и фамилия ребёнка</label>
|
|
<input class="kt-ai-input" id="field-name" type="text" placeholder="Иванов Петя" required>
|
|
</div>
|
|
<div class="kt-ai-field">
|
|
<label class="kt-ai-label" for="field-group">Группа</label>
|
|
<select class="kt-ai-select" id="field-group" required>
|
|
<option value="Солнышко">Солнышко</option>
|
|
<option value="Любимчики">Любимчики</option>
|
|
<option value="Ромашки">Ромашки</option>
|
|
</select>
|
|
</div>
|
|
<div class="kt-ai-field">
|
|
<label class="kt-ai-label" for="field-birth">Дата рождения</label>
|
|
<input class="kt-ai-input" id="field-birth" type="date">
|
|
</div>
|
|
<div class="kt-ai-field">
|
|
<label class="kt-ai-label" for="field-parent">Родитель / опекун</label>
|
|
<input class="kt-ai-input" id="field-parent" type="text" placeholder="Иванова Мария">
|
|
</div>
|
|
<div class="kt-ai-field">
|
|
<label class="kt-ai-label" for="field-phone">Телефон</label>
|
|
<input class="kt-ai-input" id="field-phone" type="tel" placeholder="+7 700 000 00 00">
|
|
</div>
|
|
<div class="kt-ai-field">
|
|
<label class="kt-ai-label" for="field-status">Статус</label>
|
|
<select class="kt-ai-select" id="field-status">
|
|
<option value="studying">Учится</option>
|
|
<option value="sick">Больничный</option>
|
|
<option value="vacation">Отпуск</option>
|
|
</select>
|
|
</div>
|
|
<div class="kt-ai-field">
|
|
<label class="kt-ai-label" for="field-payment">Оплата</label>
|
|
<select class="kt-ai-select" id="field-payment">
|
|
<option value="paid">Оплачено до конца месяца</option>
|
|
<option value="current">Оплачено актуально</option>
|
|
<option value="overdue">Долг</option>
|
|
</select>
|
|
</div>
|
|
<div class="kt-ai-field">
|
|
<label class="kt-ai-label" for="field-note">Заметка</label>
|
|
<textarea class="kt-ai-textarea" id="field-note" rows="3" placeholder="Аллергии, особенности, договоренности…"></textarea>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="kt-ai-drawer-actions">
|
|
<button type="button" class="kt-ai-btn" id="btn-cancel">Отмена</button>
|
|
<button type="submit" class="kt-ai-btn" id="btn-save" data-variant="primary" form="child-form">Сохранить</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<div class="kt-ai-toast-stack" id="toasts"></div>
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|