262 lines
13 KiB
HTML
262 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Семейные задачи</title>
|
||
<script>
|
||
window.addEventListener('error',function(e){
|
||
var d=document.createElement('div');
|
||
d.style.cssText='position:fixed;top:0;left:0;right:0;background:#b91c1c;color:#fff;padding:12px;font:14px sans-serif;z-index:9999;white-space:pre-wrap';
|
||
d.textContent='Ошибка JS: '+(e&&e.message||e)+' — обновите страницу; если не поможет, сообщите этот текст.';
|
||
document.body.appendChild(d);
|
||
});
|
||
</script>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body class="bg-line text-ink font-sans min-h-screen">
|
||
|
||
<!-- Экран онбординга (первый запуск) -->
|
||
<div id="onboard" class="hidden min-h-screen flex items-center justify-center p-5">
|
||
<div class="w-full max-w-lg bg-white rounded-2xl shadow-xl p-7">
|
||
<div class="text-center mb-6">
|
||
<div class="text-5xl mb-3">👨👩👧👦</div>
|
||
<h1 class="text-2xl font-extrabold">Создайте семейный аккаунт</h1>
|
||
<p class="text-muted mt-2 text-sm">Добавьте членов семьи — каждый сможет заходить под своим именем и ставить задачи друг другу.</p>
|
||
</div>
|
||
|
||
<label class="block text-sm font-semibold mb-1">Название семьи</label>
|
||
<input id="ob-family" class="field mb-5" placeholder="Напр. Семья Ивановых">
|
||
|
||
<label class="block text-sm font-semibold mb-1">Члены семьи</label>
|
||
<div id="ob-members" class="space-y-2 mb-3"></div>
|
||
<button id="ob-add-member" class="text-sm font-semibold text-ink underline">+ добавить члена семьи</button>
|
||
|
||
<div class="bg-accent-50 rounded-xl p-3 text-xs text-muted mt-5">
|
||
Данные хранятся в этом браузере. Лучше всего пользоваться с одного общего семейного устройства — тогда все увидят одни и те же задачи.
|
||
</div>
|
||
|
||
<button id="ob-create" class="btn-primary w-full mt-5">Создать и войти</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Основное приложение -->
|
||
<div id="app" class="hidden min-h-screen flex flex-col">
|
||
|
||
<!-- Шапка -->
|
||
<header class="bg-ink text-white sticky top-0 z-20">
|
||
<div class="max-w-6xl mx-auto px-4 py-3 flex items-center gap-3">
|
||
<div class="text-2xl">📋</div>
|
||
<div class="flex-1 min-w-0">
|
||
<div id="hd-family" class="font-bold leading-tight truncate">Семья</div>
|
||
<div class="text-xs text-white/50 leading-tight">Семейные задачи и расписание</div>
|
||
</div>
|
||
<button id="hd-new" class="btn-primary text-sm hidden sm:inline-flex">+ Новая задача</button>
|
||
<button id="hd-new-m" class="btn-primary text-sm sm:hidden !px-3">+</button>
|
||
|
||
<!-- Кто я (вход) -->
|
||
<div class="relative">
|
||
<button id="hd-user" class="flex items-center gap-2 bg-white/10 hover:bg-white/20 rounded-full pl-1 pr-3 py-1 transition">
|
||
<span id="hd-avatar" class="avatar w-8 h-8 text-base">?</span>
|
||
<span id="hd-name" class="text-sm font-semibold max-w-[90px] truncate">—</span>
|
||
<svg width="12" height="12" viewBox="0 0 24 24" class="opacity-60"><path fill="currentColor" d="M7 10l5 5 5-5z"/></svg>
|
||
</button>
|
||
<div id="hd-menu" class="hidden absolute right-0 mt-2 w-60 bg-white text-ink rounded-xl shadow-2xl p-2 z-30">
|
||
<div class="px-3 py-2 text-xs text-muted font-semibold">Войти как…</div>
|
||
<div id="hd-user-list" class="max-h-72 overflow-auto"></div>
|
||
<div class="border-t border-line mt-1 pt-1">
|
||
<button id="hd-manage" class="w-full text-left px-3 py-2 rounded-lg hover:bg-line text-sm font-semibold">⚙️ Управление семьёй</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Навигация -->
|
||
<nav class="max-w-6xl mx-auto px-2 flex gap-1 overflow-x-auto">
|
||
<button data-view="mine" class="navtab">✅ Мои задачи</button>
|
||
<button data-view="assigned" class="navtab">📤 Я поручил</button>
|
||
<button data-view="all" class="navtab">🗂 Все задачи</button>
|
||
<button data-view="schedule" class="navtab">📅 Расписание</button>
|
||
<button data-view="family" class="navtab">👨👩👧 Семья</button>
|
||
</nav>
|
||
</header>
|
||
|
||
<!-- Контент -->
|
||
<main id="main" class="flex-1 max-w-6xl w-full mx-auto px-4 py-6"></main>
|
||
|
||
<footer class="text-center text-xs text-muted py-5">
|
||
Данные хранятся локально в этом браузере · семейный таск-менеджер
|
||
</footer>
|
||
</div>
|
||
|
||
<!-- Модалка задачи -->
|
||
<div id="modal" class="hidden fixed inset-0 z-40 bg-black/50 flex items-end sm:items-center justify-center p-0 sm:p-4">
|
||
<div class="bg-white w-full sm:max-w-lg sm:rounded-2xl rounded-t-2xl shadow-2xl max-h-[92vh] overflow-auto">
|
||
<div class="sticky top-0 bg-white border-b border-line px-5 py-3 flex items-center justify-between">
|
||
<h3 id="modal-title" class="font-bold text-lg">Новая задача</h3>
|
||
<button id="modal-close" class="text-2xl leading-none text-muted hover:text-ink px-2">×</button>
|
||
</div>
|
||
<div class="p-5 space-y-4">
|
||
<div>
|
||
<label class="block text-sm font-semibold mb-1">Что нужно сделать *</label>
|
||
<input id="f-title" class="field" placeholder="Напр. Купить молоко">
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-semibold mb-1">Подробности</label>
|
||
<textarea id="f-note" class="field" rows="2" placeholder="Комментарий (необязательно)"></textarea>
|
||
</div>
|
||
<div class="grid grid-cols-2 gap-3">
|
||
<div>
|
||
<label class="block text-sm font-semibold mb-1">Кому *</label>
|
||
<select id="f-assignee" class="field"></select>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-semibold mb-1">Срок</label>
|
||
<input id="f-date" type="date" class="field">
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-2 gap-3">
|
||
<div>
|
||
<label class="block text-sm font-semibold mb-1">Время</label>
|
||
<input id="f-time" type="time" class="field">
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-semibold mb-1">Длительность</label>
|
||
<select id="f-duration" class="field">
|
||
<option value="">— не указана —</option>
|
||
<option value="15">15 мин</option>
|
||
<option value="30">30 мин</option>
|
||
<option value="45">45 мин</option>
|
||
<option value="60">1 ч</option>
|
||
<option value="90">1.5 ч</option>
|
||
<option value="120">2 ч</option>
|
||
<option value="180">3 ч</option>
|
||
<option value="240">4 ч</option>
|
||
<option value="360">6 ч</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-2 gap-3">
|
||
<div>
|
||
<label class="block text-sm font-semibold mb-1">Вид</label>
|
||
<select id="f-category" class="field"></select>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-semibold mb-1">Важность</label>
|
||
<select id="f-priority" class="field">
|
||
<option value="low">🟢 Низкая</option>
|
||
<option value="medium" selected>🟡 Средняя</option>
|
||
<option value="high">🔴 Высокая</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="text-xs text-muted bg-line rounded-lg p-3">
|
||
От кого: <span id="f-from" class="font-semibold text-ink">—</span>
|
||
</div>
|
||
<div id="f-history" class="hidden text-xs text-muted border-t border-line pt-3">
|
||
<div class="font-semibold mb-1">История:</div>
|
||
<div id="f-history-list" class="space-y-1"></div>
|
||
</div>
|
||
</div>
|
||
<div class="sticky bottom-0 bg-white border-t border-line px-5 py-3 flex gap-2">
|
||
<button id="modal-delete" class="hidden btn-danger">Удалить</button>
|
||
<button id="modal-save" class="btn-primary flex-1">Сохранить</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Модалка "перенести на дату" -->
|
||
<div id="postpone-modal" class="hidden fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4">
|
||
<div class="bg-white rounded-2xl shadow-2xl p-5 w-full max-w-xs">
|
||
<h3 class="font-bold text-lg mb-3">Перенести на</h3>
|
||
<input id="pp-date" type="date" class="field mb-4">
|
||
<div class="flex gap-2">
|
||
<button id="pp-cancel" class="btn-ghost flex-1">Отмена</button>
|
||
<button id="pp-ok" class="btn-primary flex-1">Перенести</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Модалка управления семьёй -->
|
||
<div id="family-modal" class="hidden fixed inset-0 z-40 bg-black/50 flex items-end sm:items-center justify-center p-0 sm:p-4">
|
||
<div class="bg-white w-full sm:max-w-lg sm:rounded-2xl rounded-t-2xl shadow-2xl max-h-[92vh] overflow-auto">
|
||
<div class="sticky top-0 bg-white border-b border-line px-5 py-3 flex items-center justify-between">
|
||
<h3 class="font-bold text-lg">⚙️ Управление семьёй</h3>
|
||
<button id="fm-close" class="text-2xl leading-none text-muted hover:text-ink px-2">×</button>
|
||
</div>
|
||
<div class="p-5 space-y-4">
|
||
<div>
|
||
<label class="block text-sm font-semibold mb-1">Название семьи</label>
|
||
<input id="fm-name" class="field">
|
||
</div>
|
||
<div>
|
||
<div class="flex items-center justify-between mb-1">
|
||
<label class="text-sm font-semibold">Члены семьи</label>
|
||
<button id="fm-add" class="text-sm font-semibold text-ink underline">+ добавить</button>
|
||
</div>
|
||
<div id="fm-list" class="space-y-2"></div>
|
||
</div>
|
||
<div class="bg-line rounded-lg p-3 text-xs text-muted">
|
||
Если удалить члена семьи, его задачи станут «без исполнителя». Имя при входе можно сменить в любой момент.
|
||
</div>
|
||
</div>
|
||
<div class="sticky bottom-0 bg-white border-t border-line px-5 py-3">
|
||
<button id="fm-save" class="btn-primary w-full">Сохранить</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Модалка личного события (расписание) -->
|
||
<div id="event-modal" class="hidden fixed inset-0 z-40 bg-black/50 flex items-end sm:items-center justify-center p-0 sm:p-4">
|
||
<div class="bg-white w-full sm:max-w-lg sm:rounded-2xl rounded-t-2xl shadow-2xl max-h-[92vh] overflow-auto">
|
||
<div class="sticky top-0 bg-white border-b border-line px-5 py-3 flex items-center justify-between">
|
||
<h3 id="ev-title" class="font-bold text-lg">Событие в расписании</h3>
|
||
<button id="ev-close" class="text-2xl leading-none text-muted hover:text-ink px-2">×</button>
|
||
</div>
|
||
<div class="p-5 space-y-4">
|
||
<div>
|
||
<label class="block text-sm font-semibold mb-1">Что и где *</label>
|
||
<input id="ev-name" class="field" placeholder="Напр. Школа, Бассейн, Работа">
|
||
</div>
|
||
<div class="grid grid-cols-2 gap-3">
|
||
<div>
|
||
<label class="block text-sm font-semibold mb-1">Дата *</label>
|
||
<input id="ev-date" type="date" class="field">
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-semibold mb-1">Чьё расписание</label>
|
||
<select id="ev-owner" class="field"></select>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-2 gap-3">
|
||
<div>
|
||
<label class="block text-sm font-semibold mb-1">С *</label>
|
||
<input id="ev-start" type="time" class="field">
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-semibold mb-1">До *</label>
|
||
<input id="ev-end" type="time" class="field">
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-semibold mb-1">Вид / цвет</label>
|
||
<select id="ev-cat" class="field"></select>
|
||
</div>
|
||
<div class="bg-line rounded-lg p-3 text-xs text-muted">
|
||
Личные события помогают планировать день: школа, работа, тренировки. Они не зависят от задач и видны в расписании.
|
||
</div>
|
||
</div>
|
||
<div class="sticky bottom-0 bg-white border-t border-line px-5 py-3 flex gap-2">
|
||
<button id="ev-delete" class="hidden btn-danger">Удалить</button>
|
||
<button id="ev-save" class="btn-primary flex-1">Сохранить</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Тост -->
|
||
<div id="toast" class="hidden fixed bottom-5 left-1/2 -translate-x-1/2 z-50 bg-ink text-white px-5 py-3 rounded-full shadow-2xl text-sm font-semibold"></div>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|