249 lines
12 KiB
HTML
249 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Чек-лист подготовки к обучению</title>
|
||
<style>
|
||
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7;--green:#10B981;--green-50:#ECFDF5}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--white)}
|
||
.container{max-width:1140px;margin:0 auto;padding:80px 24px}
|
||
.hero{background:var(--cyan-50);color:var(--ink)}
|
||
.hero h1{font-size:56px;font-weight:800;line-height:1.05;margin-bottom:24px}
|
||
.hero p{font-size:20px;color:var(--gray-500);max-width:600px;margin-bottom:32px}
|
||
|
||
.progress-wrap{position:sticky;top:0;z-index:10;background:var(--white);border-bottom:1px solid var(--gray-100);padding:16px 24px}
|
||
.progress-row{max-width:1140px;margin:0 auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
|
||
.progress-bar{flex:1;min-width:200px;height:12px;background:var(--gray-100);border-radius:6px;overflow:hidden}
|
||
.progress-fill{height:100%;background:var(--cyan);border-radius:6px;transition:width .3s;width:0%}
|
||
.progress-text{font-weight:700;font-size:15px;white-space:nowrap}
|
||
.progress-percent{color:var(--cyan);font-size:24px;font-weight:800}
|
||
.btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none;border:none;cursor:pointer;font-size:16px}
|
||
.btn:hover{background:#1be5ff}
|
||
.btn-reset{background:var(--gray-100);color:var(--ink);padding:10px 20px;border-radius:8px;font-weight:600;text-decoration:none;border:none;cursor:pointer;font-size:14px}
|
||
.btn-reset:hover{background:#e0e3e8}
|
||
|
||
.section h2{font-size:36px;font-weight:700;margin-bottom:12px}
|
||
.section .subtitle{color:var(--gray-500);margin-bottom:32px;font-size:16px}
|
||
.card{background:var(--gray-100);border-radius:16px;padding:24px 32px;margin-bottom:12px;display:flex;align-items:center;gap:16px;transition:background .2s;cursor:pointer;user-select:none}
|
||
.card.checked{background:var(--green-50)}
|
||
.card.checked .check-label{text-decoration:line-through;color:var(--gray-500)}
|
||
.check-box{width:28px;height:28px;border-radius:6px;border:2px solid var(--gray-500);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .2s;font-size:16px}
|
||
.card.checked .check-box{background:var(--green);border-color:var(--green);color:var(--white)}
|
||
.check-label{flex:1;font-weight:500}
|
||
.check-icon{display:none}
|
||
.card.checked .check-icon{display:inline}
|
||
|
||
.category{background:var(--cyan-50);border-radius:12px;padding:32px;margin-bottom:40px}
|
||
.category h3{font-size:22px;font-weight:700;margin-bottom:20px}
|
||
.category h3 .emoji{margin-right:8px}
|
||
|
||
.footer{text-align:center;padding:48px 24px;color:var(--gray-500);font-size:14px}
|
||
.footer strong{color:var(--ink)}
|
||
|
||
.confetti{display:none;text-align:center;font-size:48px;padding:24px;animation:pulse .6s ease-in-out}
|
||
.confetti.show{display:block}
|
||
@keyframes pulse{0%{transform:scale(0.5);opacity:0}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
|
||
|
||
@media(max-width:640px){
|
||
.hero h1{font-size:36px}
|
||
.section h2{font-size:28px}
|
||
.container{padding:48px 20px}
|
||
.card{padding:20px;gap:12px}
|
||
.category{padding:24px 20px}
|
||
.progress-wrap{padding:12px 16px}
|
||
.progress-percent{font-size:20px}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="progress-wrap" id="progressBar">
|
||
<div class="progress-row">
|
||
<span class="progress-percent" id="percent">0%</span>
|
||
<div class="progress-bar"><div class="progress-fill" id="fill"></div></div>
|
||
<span class="progress-text" id="counter">0 / 20</span>
|
||
<button class="btn-reset" onclick="resetAll()">Сбросить</button>
|
||
</div>
|
||
</div>
|
||
|
||
<section class="hero">
|
||
<div class="container">
|
||
<h1>Чек-лист подготовки<br>к обучению</h1>
|
||
<p>Собери всё необходимое перед стартом учёбы — от документов до настроя. Отмечай пункты по мере готовности и сразу види свой прогресс.</p>
|
||
<a class="btn" href="#checklist">Начать проверку</a>
|
||
</div>
|
||
</section>
|
||
|
||
<div id="checklist" class="section">
|
||
<div class="container">
|
||
<h2>Список дел</h2>
|
||
<p class="subtitle">Нажимай на пункты чтобы отмечать выполненное. Прогресс сохраняется в браузере.</p>
|
||
<div class="confetti" id="confetti">🎉 Всё готово! Пора учиться!</div>
|
||
|
||
<div class="category">
|
||
<h3><span class="emoji">📄</span> Документы и формальности</h3>
|
||
<div class="card" data-id="1" onclick="toggleItem(this)">
|
||
<div class="check-box"><span class="check-icon">✓</span></div>
|
||
<span class="check-label">Договор на обучение подписан</span>
|
||
</div>
|
||
<div class="card" data-id="2" onclick="toggleItem(this)">
|
||
<div class="check-box"><span class="check-icon">✓</span></div>
|
||
<span class="check-label">Оплата внесена (квитанция сохранена)</span>
|
||
</div>
|
||
<div class="card" data-id="3" onclick="toggleItem(this)">
|
||
<div class="check-box"><span class="check-icon">✓</span></div>
|
||
<span class="check-label">Расписание занятий получено</span>
|
||
</div>
|
||
<div class="card" data-id="4" onclick="toggleItem(this)">
|
||
<div class="check-box"><span class="check-icon">✓</span></div>
|
||
<span class="check-label">Доступы в личный кабинет / LMS активированы</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="category">
|
||
<h3><span class="emoji">💻</span> Техника и рабочее место</h3>
|
||
<div class="card" data-id="5" onclick="toggleItem(this)">
|
||
<div class="check-box"><span class="check-icon">✓</span></div>
|
||
<span class="check-label">Ноутбук / компьютер исправен и готов к работе</span>
|
||
</div>
|
||
<div class="card" data-id="6" onclick="toggleItem(this)">
|
||
<div class="check-box"><span class="check-icon">✓</span></div>
|
||
<span class="check-label">Стабильный интернет проверен</span>
|
||
</div>
|
||
<div class="card" data-id="7" onclick="toggleItem(this)">
|
||
<div class="check-box"><span class="check-icon">✓</span></div>
|
||
<span class="check-label">Наушники / гарнитура для созвонов</span>
|
||
</div>
|
||
<div class="card" data-id="8" onclick="toggleItem(this)">
|
||
<div class="check-box"><span class="check-icon">✓</span></div>
|
||
<span class="check-label">Рабочее место организовано (стол, стул, свет)</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="category">
|
||
<h3><span class="emoji">📚</span> Учебные материалы</h3>
|
||
<div class="card" data-id="9" onclick="toggleItem(this)">
|
||
<div class="check-box"><span class="check-icon">✓</span></div>
|
||
<span class="check-label">Необходимые программы установлены (Zoom, IDE, etc.)</span>
|
||
</div>
|
||
<div class="card" data-id="10" onclick="toggleItem(this)">
|
||
<div class="check-box"><span class="check-icon">✓</span></div>
|
||
<span class="check-label">Канцелярия: тетради, ручки, стикеры</span>
|
||
</div>
|
||
<div class="card" data-id="11" onclick="toggleItem(this)">
|
||
<div class="check-box"><span class="check-icon">✓</span></div>
|
||
<span class="check-label">Учебники и материалы скачаны / куплены</span>
|
||
</div>
|
||
<div class="card" data-id="12" onclick="toggleItem(this)">
|
||
<div class="check-box"><span class="check-icon">✓</span></div>
|
||
<span class="check-label">Закладки на полезные ресурсы сохранены</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="category">
|
||
<h3><span class="emoji">⏰</span> Тайм-менеджмент</h3>
|
||
<div class="card" data-id="13" onclick="toggleItem(this)">
|
||
<div class="check-box"><span class="check-icon">✓</span></div>
|
||
<span class="check-label">Календарь с занятиями настроен</span>
|
||
</div>
|
||
<div class="card" data-id="14" onclick="toggleItem(this)">
|
||
<div class="check-box"><span class="check-icon">✓</span></div>
|
||
<span class="check-label">Время для домашек выделено в расписании</span>
|
||
</div>
|
||
<div class="card" data-id="15" onclick="toggleItem(this)">
|
||
<div class="check-box"><span class="check-icon">✓</span></div>
|
||
<span class="check-label">Напоминания о дедлайнах настроены</span>
|
||
</div>
|
||
<div class="card" data-id="16" onclick="toggleItem(this)">
|
||
<div class="check-box"><span class="check-icon">✓</span></div>
|
||
<span class="check-label">Дни отдыха запланированы (без перегруза)</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="category">
|
||
<h3><span class="emoji">🧠</span> Настрой и поддержка</h3>
|
||
<div class="card" data-id="17" onclick="toggleItem(this)">
|
||
<div class="check-box"><span class="check-icon">✓</span></div>
|
||
<span class="check-label">Цели обучения записаны (зачем я это делаю)</span>
|
||
</div>
|
||
<div class="card" data-id="18" onclick="toggleItem(this)">
|
||
<div class="check-box"><span class="check-icon">✓</span></div>
|
||
<span class="check-label">Близкие в курсе твоего графика</span>
|
||
</div>
|
||
<div class="card" data-id="19" onclick="toggleItem(this)">
|
||
<div class="check-box"><span class="check-icon">✓</span></div>
|
||
<span class="check-label">Чат с одногруппниками найден / создан</span>
|
||
</div>
|
||
<div class="card" data-id="20" onclick="toggleItem(this)">
|
||
<div class="check-box"><span class="check-icon">✓</span></div>
|
||
<span class="check-label">Награда за завершение курса придумана</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer">
|
||
<p>Сделано с заботой о твоём обучении</p>
|
||
</div>
|
||
|
||
<script>
|
||
const TOTAL = 20;
|
||
|
||
function loadState(){
|
||
try{
|
||
var raw = localStorage.getItem('checklist_state');
|
||
return raw ? JSON.parse(raw) : {};
|
||
}catch(e){ return {}; }
|
||
}
|
||
function saveState(state){
|
||
try{ localStorage.setItem('checklist_state', JSON.stringify(state)); }catch(e){}
|
||
}
|
||
|
||
function updateProgress(){
|
||
var state = loadState();
|
||
var done = Object.values(state).filter(function(v){ return v; }).length;
|
||
var pct = Math.round((done / TOTAL) * 100);
|
||
document.getElementById('percent').textContent = pct + '%';
|
||
document.getElementById('counter').textContent = done + ' / ' + TOTAL;
|
||
document.getElementById('fill').style.width = pct + '%';
|
||
var confetti = document.getElementById('confetti');
|
||
if(done === TOTAL){ confetti.classList.add('show'); }
|
||
else{ confetti.classList.remove('show'); }
|
||
}
|
||
|
||
function restoreCards(){
|
||
var state = loadState();
|
||
var cards = document.querySelectorAll('.card');
|
||
cards.forEach(function(card){
|
||
var id = card.getAttribute('data-id');
|
||
if(state[id]){ card.classList.add('checked'); }
|
||
else{ card.classList.remove('checked'); }
|
||
});
|
||
}
|
||
|
||
function toggleItem(card){
|
||
var id = card.getAttribute('data-id');
|
||
var state = loadState();
|
||
state[id] = !state[id];
|
||
saveState(state);
|
||
if(state[id]){ card.classList.add('checked'); }
|
||
else{ card.classList.remove('checked'); }
|
||
updateProgress();
|
||
}
|
||
|
||
function resetAll(){
|
||
if(confirm('Сбросить весь прогресс?')){
|
||
localStorage.removeItem('checklist_state');
|
||
restoreCards();
|
||
updateProgress();
|
||
}
|
||
}
|
||
|
||
restoreCards();
|
||
updateProgress();
|
||
</script>
|
||
</body>
|
||
</html>
|