77 lines
4.1 KiB
HTML
77 lines
4.1 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}
|
||
*{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:900px;margin:0 auto;padding:60px 24px}
|
||
.hero{background:var(--ink);color:var(--white);text-align:center}
|
||
.hero h1{font-size:48px;font-weight:800;line-height:1.1;margin-bottom:16px}
|
||
.hero p{font-size:20px;color:#9aa3b2;max-width:600px;margin:0 auto 8px}
|
||
.hero .sub{font-size:15px;color:#6b7280;margin-top:4px}
|
||
.progress-bar{max-width:400px;margin:24px auto 0;background:#2a2f38;border-radius:12px;height:12px;overflow:hidden}
|
||
.progress-fill{height:100%;background:var(--cyan);border-radius:12px;transition:width .3s;width:0%}
|
||
.progress-text{color:#9aa3b2;font-size:14px;margin-top:8px}
|
||
.course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:40px}
|
||
.lesson-card{background:var(--gray-100);border-radius:16px;padding:20px;text-decoration:none;color:var(--ink);transition:.2s;position:relative}
|
||
.lesson-card:hover{transform:translateY(-2px);box-shadow:0 4px 20px rgba(0,0,0,.1)}
|
||
.lesson-card .num{font-size:13px;color:var(--gray-500);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
|
||
.lesson-card h3{font-size:18px;margin:6px 0;font-weight:700}
|
||
.lesson-card .cn{color:var(--gray-500);font-size:15px}
|
||
.lesson-card .status{position:absolute;top:16px;right:16px;font-size:20px}
|
||
.cta{text-align:center;margin-top:48px;padding:40px;background:var(--cyan-50);border-radius:20px}
|
||
.cta h2{font-size:28px;font-weight:700;margin-bottom:12px}
|
||
.cta p{color:var(--gray-500);margin-bottom:20px}
|
||
.btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:14px 32px;border-radius:8px;font-weight:700;text-decoration:none;font-size:17px}
|
||
.btn:hover{background:#1be5ff}
|
||
.reset{background:none;border:none;color:var(--gray-500);cursor:pointer;text-decoration:underline;font-size:14px;margin-top:12px}
|
||
.reset:hover{color:var(--ink)}
|
||
@media(max-width:640px){.hero h1{font-size:32px}.container{padding:36px 20px}.course-grid{grid-template-columns:1fr}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<section class="hero">
|
||
<div class="container">
|
||
<h1>🇨🇳 Китайский с нуля</h1>
|
||
<p>15 уроков для начинающих — слова, грамматика, произношение и упражнения</p>
|
||
<div class="sub">Начни говорить по-китайски уже сегодня</div>
|
||
<div class="progress-bar"><div class="progress-fill" id="progress-fill"></div></div>
|
||
<div class="progress-text" id="progress-text">Пройдено: 0 / 15</div>
|
||
</div>
|
||
</section>
|
||
<div class="container">
|
||
<div class="course-grid" id="course-grid"></div>
|
||
|
||
<div class="cta">
|
||
<h2>🚀 Готов начать?</h2>
|
||
<p>Первый урок уже ждёт тебя! Никакой регистрации — просто открой и учись.</p>
|
||
<a class="btn" href="lesson.html?id=1">Начать урок 1</a>
|
||
</div>
|
||
</div>
|
||
<script src="data.js"></script>
|
||
<script>
|
||
function render() {
|
||
const done = JSON.parse(localStorage.getItem('chineseDone') || '[]');
|
||
const grid = document.getElementById('course-grid');
|
||
grid.innerHTML = lessons.map(l => {
|
||
const completed = done.includes(l.id);
|
||
return `<a class="lesson-card" href="lesson.html?id=${l.id}">
|
||
<div class="num">Урок ${l.id}</div>
|
||
<h3>${l.title}</h3>
|
||
<div class="cn">${l.titleCn}</div>
|
||
<div class="status">${completed ? '✅' : '📖'}</div>
|
||
</a>`;
|
||
}).join('');
|
||
const pct = Math.round((done.length / lessons.length) * 100);
|
||
document.getElementById('progress-fill').style.width = pct + '%';
|
||
document.getElementById('progress-text').textContent = `Пройдено: ${done.length} / ${lessons.length}`;
|
||
}
|
||
render();
|
||
</script>
|
||
</body>
|
||
</html>
|