v2: interactive course with 15 lessons

data.js

@@ -0,0 +1,384 @@
+const lessons = [
+  {
+    id: 1,
+    title: "Приветствия",
+    titleCn: "问候",
+    vocab: [
+      { cn: "你好", py: "nǐ hǎo", ru: "Здравствуйте" },
+      { cn: "早上好", py: "zǎo shang hǎo", ru: "Доброе утро" },
+      { cn: "晚上好", py: "wǎn shang hǎo", ru: "Добрый вечер" },
+      { cn: "再见", py: "zài jiàn", ru: "До свидания" },
+      { cn: "谢谢", py: "xiè xiè", ru: "Спасибо" },
+      { cn: "不客气", py: "bú kè qì", ru: "Пожалуйста (не за что)" },
+      { cn: "对不起", py: "duì bu qǐ", ru: "Извините" },
+      { cn: "没关系", py: "méi guān xì", ru: "Ничего, бывает" },
+    ],
+    sentences: [
+      { cn: "你好，我叫安娜。", py: "Nǐ hǎo, wǒ jiào Anna.", ru: "Здравствуйте, меня зовут Анна." },
+      { cn: "谢谢你的帮助。", py: "Xiè xiè nǐ de bāng zhù.", ru: "Спасибо за твою помощь." },
+      { cn: "明天见！", py: "Míng tiān jiàn!", ru: "Увидимся завтра!" },
+    ],
+    grammar: "Порядок слов в китайском: Подлежащее + Сказуемое + Дополнение. Частица 的 (de) указывает на принадлежность.",
+    quiz: [
+      { q: "Как будет «Здравствуйте»?", a: "你好", opts: ["你好", "再见", "谢谢", "对不起"] },
+      { q: "Как будет «Спасибо»?", a: "谢谢", opts: ["不客气", "谢谢", "再见", "你好"] },
+      { q: "Как ответить на «谢谢»?", a: "不客气", opts: ["对不起", "没关系", "不客气", "再见"] },
+    ]
+  },
+  {
+    id: 2,
+    title: "Цифры и счёт",
+    titleCn: "数字",
+    vocab: [
+      { cn: "一", py: "yī", ru: "1" },
+      { cn: "二", py: "èr", ru: "2" },
+      { cn: "三", py: "sān", ru: "3" },
+      { cn: "四", py: "sì", ru: "4" },
+      { cn: "五", py: "wǔ", ru: "5" },
+      { cn: "六", py: "liù", ru: "6" },
+      { cn: "七", py: "qī", ru: "7" },
+      { cn: "八", py: "bā", ru: "8" },
+      { cn: "九", py: "jiǔ", ru: "9" },
+      { cn: "十", py: "shí", ru: "10" },
+    ],
+    sentences: [
+      { cn: "我今年二十五岁。", py: "Wǒ jīn nián èr shí wǔ suì.", ru: "Мне 25 лет." },
+      { cn: "请给我三杯水。", py: "Qǐng gěi wǒ sān bēi shuǐ.", ru: "Дайте мне 3 стакана воды, пожалуйста." },
+      { cn: "一共多少钱？", py: "Yí gòng duō shao qián?", ru: "Сколько всего стоит?" },
+    ],
+    grammar: "Числительные: 11 = 十一 (shí yī). 25 = 二十五 (èr shí wǔ). Счётное слово 个 (gè) — универсальное для людей и предметов.",
+    quiz: [
+      { q: "Как будет «3»?", a: "三", opts: ["一", "二", "三", "四"] },
+      { q: "Как будет «10»?", a: "十", opts: ["六", "七", "八", "十"] },
+      { q: "Как будет «25»?", a: "二十五", opts: ["十五", "二十", "二十五", "五十二"] },
+    ]
+  },
+  {
+    id: 3,
+    title: "Семья",
+    titleCn: "家庭",
+    vocab: [
+      { cn: "爸爸", py: "bà ba", ru: "папа" },
+      { cn: "妈妈", py: "mā ma", ru: "мама" },
+      { cn: "哥哥", py: "gē ge", ru: "старший брат" },
+      { cn: "姐姐", py: "jiě jie", ru: "старшая сестра" },
+      { cn: "弟弟", py: "dì di", ru: "младший брат" },
+      { cn: "妹妹", py: "mèi mei", ru: "младшая сестра" },
+      { cn: "爷爷", py: "yé ye", ru: "дедушка" },
+      { cn: "奶奶", py: "nǎi nai", ru: "бабушка" },
+    ],
+    sentences: [
+      { cn: "这是我的妈妈。", py: "Zhè shì wǒ de mā ma.", ru: "Это моя мама." },
+      { cn: "我有两个哥哥。", py: "Wǒ yǒu liǎng gè gē ge.", ru: "У меня два старших брата." },
+      { cn: "你家里有几口人？", py: "Nǐ jiā lǐ yǒu jǐ kǒu rén?", ru: "Сколько человек в твоей семье?" },
+    ],
+    grammar: "Счётное слово 口 (kǒu) — для членов семьи. 的 (de) — частица принадлежности: 我的 (wǒ de) — мой.",
+    quiz: [
+      { q: "Как будет «мама»?", a: "妈妈", opts: ["爸爸", "妈妈", "姐姐", "奶奶"] },
+      { q: "Как будет «старший брат»?", a: "哥哥", opts: ["弟弟", "哥哥", "爷爷", "爸爸"] },
+      { q: "Как сказать «У меня есть младшая сестра»?", a: "我有一个妹妹。", opts: ["我有一个妹妹。", "我有两个姐姐。", "这是我的妈妈。", "我没有弟弟。"] },
+    ]
+  },
+  {
+    id: 4,
+    title: "Еда и напитки",
+    titleCn: "饮食",
+    vocab: [
+      { cn: "米饭", py: "mǐ fàn", ru: "рис" },
+      { cn: "面条", py: "miàn tiáo", ru: "лапша" },
+      { cn: "水", py: "shuǐ", ru: "вода" },
+      { cn: "茶", py: "chá", ru: "чай" },
+      { cn: "咖啡", py: "kā fēi", ru: "кофе" },
+      { cn: "苹果", py: "píng guǒ", ru: "яблоко" },
+      { cn: "肉", py: "ròu", ru: "мясо" },
+      { cn: "鱼", py: "yú", ru: "рыба" },
+    ],
+    sentences: [
+      { cn: "我想吃米饭。", py: "Wǒ xiǎng chī mǐ fàn.", ru: "Я хочу есть рис." },
+      { cn: "你喝什么？", py: "Nǐ hē shén me?", ru: "Что ты пьёшь?" },
+      { cn: "这个很好吃！", py: "Zhè ge hěn hǎo chī!", ru: "Это очень вкусно!" },
+    ],
+    grammar: "Глаголы 吃 (chī) — есть, 喝 (hē) — пить. Слово 想 (xiǎng) — хотеть. 很 (hěn) — очень (перед прилагательным).",
+    quiz: [
+      { q: "Как будет «рис»?", a: "米饭", opts: ["面条", "米饭", "水", "茶"] },
+      { q: "Как будет «чай»?", a: "茶", opts: ["咖啡", "水", "茶", "肉"] },
+      { q: "Как сказать «Я хочу есть лапшу»?", a: "我想吃面条。", opts: ["我想吃米饭。", "我想喝咖啡。", "我想吃面条。", "这个很好吃。"] },
+    ]
+  },
+  {
+    id: 5,
+    title: "Цвета",
+    titleCn: "颜色",
+    vocab: [
+      { cn: "红色", py: "hóng sè", ru: "красный" },
+      { cn: "蓝色", py: "lán sè", ru: "синий" },
+      { cn: "绿色", py: "lǜ sè", ru: "зелёный" },
+      { cn: "白色", py: "bái sè", ru: "белый" },
+      { cn: "黑色", py: "hēi sè", ru: "чёрный" },
+      { cn: "黄色", py: "huáng sè", ru: "жёлтый" },
+      { cn: "颜色", py: "yán sè", ru: "цвет" },
+    ],
+    sentences: [
+      { cn: "我喜欢红色。", py: "Wǒ xǐ huān hóng sè.", ru: "Мне нравится красный." },
+      { cn: "你的车是什么颜色？", py: "Nǐ de chē shì shén me yán sè?", ru: "Какого цвета твоя машина?" },
+      { cn: "这件衣服是蓝色的。", py: "Zhè jiàn yī fu shì lán sè de.", ru: "Эта одежда синяя." },
+    ],
+    grammar: "Прилагательные ставятся перед существительным: 红色的衣服 (hóng sè de yī fu) — красная одежда. Вопрос: 什么 (shén me) — какой/что.",
+    quiz: [
+      { q: "Как будет «красный»?", a: "红色", opts: ["蓝色", "红色", "绿色", "白色"] },
+      { q: "Как будет «чёрный»?", a: "黑色", opts: ["白色", "黑色", "黄色", "蓝色"] },
+      { q: "Как спросить «Какого цвета?»?", a: "什么颜色", opts: ["什么颜色", "红色", "我喜欢", "好不好"] },
+    ]
+  },
+  {
+    id: 6,
+    title: "Животные",
+    titleCn: "动物",
+    vocab: [
+      { cn: "猫", py: "māo", ru: "кошка" },
+      { cn: "狗", py: "gǒu", ru: "собака" },
+      { cn: "鸟", py: "niǎo", ru: "птица" },
+      { cn: "鱼", py: "yú", ru: "рыба" },
+      { cn: "马", py: "mǎ", ru: "лошадь" },
+      { cn: "熊猫", py: "xióng māo", ru: "панда" },
+      { cn: "兔子", py: "tù zi", ru: "кролик" },
+    ],
+    sentences: [
+      { cn: "我有一只猫。", py: "Wǒ yǒu yī zhī māo.", ru: "У меня есть кошка." },
+      { cn: "熊猫很可爱。", py: "Xióng māo hěn kě ài.", ru: "Панды очень милые." },
+      { cn: "你喜欢狗吗？", py: "Nǐ xǐ huān gǒu ma?", ru: "Ты любишь собак?" },
+    ],
+    grammar: "Счётное слово 只 (zhī) — для животных. Частица 吗 (ma) — делает предложение вопросительным. 喜欢 (xǐ huān) — нравиться/любить.",
+    quiz: [
+      { q: "Как будет «кошка»?", a: "猫", opts: ["狗", "鸟", "猫", "鱼"] },
+      { q: "Как будет «панда»?", a: "熊猫", opts: ["熊猫", "兔子", "猫", "狗"] },
+      { q: "Как сказать «У меня есть собака»?", a: "我有一只狗。", opts: ["我有一只猫。", "我有一只狗。", "我喜欢狗。", "狗很可爱。"] },
+    ]
+  },
+  {
+    id: 7,
+    title: "Время и дни",
+    titleCn: "时间",
+    vocab: [
+      { cn: "今天", py: "jīn tiān", ru: "сегодня" },
+      { cn: "明天", py: "míng tiān", ru: "завтра" },
+      { cn: "昨天", py: "zuó tiān", ru: "вчера" },
+      { cn: "早上", py: "zǎo shang", ru: "утро" },
+      { cn: "下午", py: "xià wǔ", ru: "день (после полудня)" },
+      { cn: "晚上", py: "wǎn shang", ru: "вечер" },
+      { cn: "现在", py: "xiàn zài", ru: "сейчас" },
+    ],
+    sentences: [
+      { cn: "现在几点？", py: "Xiàn zài jǐ diǎn?", ru: "Который сейчас час?" },
+      { cn: "明天早上八点。", py: "Míng tiān zǎo shang bā diǎn.", ru: "Завтра в 8 утра." },
+      { cn: "今天很忙。", py: "Jīn tiān hěn máng.", ru: "Сегодня очень занят." },
+    ],
+    grammar: "几点 (jǐ diǎn) — который час. 点 (diǎn) — час. 很忙 (hěn máng) — очень занят. Слова времени ставятся в начале или перед глаголом.",
+    quiz: [
+      { q: "Как будет «сегодня»?", a: "今天", opts: ["明天", "昨天", "今天", "现在"] },
+      { q: "Как будет «завтра»?", a: "明天", opts: ["今天", "明天", "昨天", "晚上"] },
+      { q: "Как спросить «Который час?»?", a: "现在几点？", opts: ["今天几点？", "现在几点？", "明天几点？", "现在好吗？"] },
+    ]
+  },
+  {
+    id: 8,
+    title: "Погода",
+    titleCn: "天气",
+    vocab: [
+      { cn: "天气", py: "tiān qì", ru: "погода" },
+      { cn: "热", py: "rè", ru: "жарко" },
+      { cn: "冷", py: "lěng", ru: "холодно" },
+      { cn: "下雨", py: "xià yǔ", ru: "идёт дождь" },
+      { cn: "下雪", py: "xià xuě", ru: "идёт снег" },
+      { cn: "风", py: "fēng", ru: "ветер" },
+      { cn: "晴天", py: "qíng tiān", ru: "солнечно" },
+    ],
+    sentences: [
+      { cn: "今天天气很好。", py: "Jīn tiān tiān qì hěn hǎo.", ru: "Сегодня хорошая погода." },
+      { cn: "外面很冷。", py: "Wài miàn hěn lěng.", ru: "На улице холодно." },
+      { cn: "明天会下雨吗？", py: "Míng tiān huì xià yǔ ma?", ru: "Завтра будет дождь?" },
+    ],
+    grammar: "很 (hěn) + прилагательное — «очень» или связка без «быть». 会 (huì) — будет/сможет. 外面 (wài miàn) — снаружи/на улице.",
+    quiz: [
+      { q: "Как будет «жарко»?", a: "热", opts: ["冷", "热", "下雨", "风"] },
+      { q: "Как будет «солнечно»?", a: "晴天", opts: ["下雨", "下雪", "晴天", "天气"] },
+      { q: "Как сказать «Сегодня холодно»?", a: "今天很冷。", opts: ["今天很热。", "今天很冷。", "今天下雨。", "天气很好。"] },
+    ]
+  },
+  {
+    id: 9,
+    title: "Хобби",
+    titleCn: "爱好",
+    vocab: [
+      { cn: "看书", py: "kàn shū", ru: "читать книги" },
+      { cn: "听音乐", py: "tīng yīn yuè", ru: "слушать музыку" },
+      { cn: "看电影", py: "kàn diàn yǐng", ru: "смотреть фильмы" },
+      { cn: "运动", py: "yùn dòng", ru: "спорт/заниматься спортом" },
+      { cn: "唱歌", py: "chàng gē", ru: "петь" },
+      { cn: "画画", py: "huà huà", ru: "рисовать" },
+      { cn: "旅行", py: "lǚ xíng", ru: "путешествовать" },
+    ],
+    sentences: [
+      { cn: "我的爱好是看书。", py: "Wǒ de ài hào shì kàn shū.", ru: "Моё хобби — читать книги." },
+      { cn: "你喜欢做什么？", py: "Nǐ xǐ huān zuò shén me?", ru: "Что ты любишь делать?" },
+      { cn: "我喜欢听音乐。", py: "Wǒ xǐ huān tīng yīn yuè.", ru: "Я люблю слушать музыку." },
+    ],
+    grammar: "爱好 (ài hào) — хобби. 喜欢 (xǐ huān) + глагол — любить делать что-то. 做什么 (zuò shén me) — что делать.",
+    quiz: [
+      { q: "Как будет «читать книги»?", a: "看书", opts: ["看书", "听音乐", "看电影", "画画"] },
+      { q: "Как будет «путешествовать»?", a: "旅行", opts: ["运动", "唱歌", "旅行", "画画"] },
+      { q: "Как спросить «Что ты любишь делать?»?", a: "你喜欢做什么？", opts: ["你喜欢什么？", "你喜欢做什么？", "你做什么？", "你的爱好是什么？"] },
+    ]
+  },
+  {
+    id: 10,
+    title: "Школа и учёба",
+    titleCn: "学校",
+    vocab: [
+      { cn: "学校", py: "xué xiào", ru: "школа" },
+      { cn: "老师", py: "lǎo shī", ru: "учитель" },
+      { cn: "学生", py: "xué shēng", ru: "ученик" },
+      { cn: "学习", py: "xué xí", ru: "учиться" },
+      { cn: "课本", py: "kè běn", ru: "учебник" },
+      { cn: "作业", py: "zuò yè", ru: "домашнее задание" },
+      { cn: "考试", py: "kǎo shì", ru: "экзамен" },
+    ],
+    sentences: [
+      { cn: "我是学生。", py: "Wǒ shì xué shēng.", ru: "Я ученик." },
+      { cn: "老师很好。", py: "Lǎo shī hěn hǎo.", ru: "Учитель очень хороший." },
+      { cn: "今天有考试。", py: "Jīn tiān yǒu kǎo shì.", ru: "Сегодня экзамен." },
+    ],
+    grammar: "是 (shì) — быть/являться (глагол-связка). 有 (yǒu) — иметь/есть. 没有 (méi yǒu) — не иметь/нет.",
+    quiz: [
+      { q: "Как будет «учитель»?", a: "老师", opts: ["学生", "老师", "学校", "学习"] },
+      { q: "Как будет «экзамен»?", a: "考试", opts: ["课本", "作业", "考试", "学校"] },
+      { q: "Как сказать «Я учу китайский»?", a: "我学习中文。", opts: ["我是学生。", "我学习中文。", "我喜欢学校。", "老师很好。"] },
+    ]
+  },
+  {
+    id: 11,
+    title: "Покупки",
+    titleCn: "购物",
+    vocab: [
+      { cn: "商店", py: "shāng diàn", ru: "магазин" },
+      { cn: "钱", py: "qián", ru: "деньги" },
+      { cn: "便宜", py: "pián yi", ru: "дёшево" },
+      { cn: "贵", py: "guì", ru: "дорого" },
+      { cn: "买", py: "mǎi", ru: "покупать" },
+      { cn: "卖", py: "mài", ru: "продавать" },
+      { cn: "多少", py: "duō shao", ru: "сколько" },
+    ],
+    sentences: [
+      { cn: "这个多少钱？", py: "Zhè ge duō shao qián?", ru: "Сколько это стоит?" },
+      { cn: "太贵了！", py: "Tài guì le!", ru: "Слишком дорого!" },
+      { cn: "我可以试试吗？", py: "Wǒ kě yǐ shì shì ma?", ru: "Можно примерить?" },
+    ],
+    grammar: "多少钱 (duō shao qián) — сколько стоит. 太...了 (tài...le) — слишком... 可以 (kě yǐ) — можно/разрешается.",
+    quiz: [
+      { q: "Как будет «дёшево»?", a: "便宜", opts: ["贵", "便宜", "钱", "商店"] },
+      { q: "Как будет «покупать»?", a: "买", opts: ["卖", "买", "钱", "多少"] },
+      { q: "Как спросить «Сколько это стоит?»?", a: "这个多少钱？", opts: ["这是什么？", "这个多少钱？", "你喜欢吗？", "你去商店吗？"] },
+    ]
+  },
+  {
+    id: 12,
+    title: "Город и транспорт",
+    titleCn: "城市",
+    vocab: [
+      { cn: "医院", py: "yī yuàn", ru: "больница" },
+      { cn: "超市", py: "chāo shì", ru: "супермаркет" },
+      { cn: "车站", py: "chē zhàn", ru: "остановка/вокзал" },
+      { cn: "飞机场", py: "fēi jī chǎng", ru: "аэропорт" },
+      { cn: "出租车", py: "chū zū chē", ru: "такси" },
+      { cn: "地铁", py: "dì tiě", ru: "метро" },
+      { cn: "哪儿", py: "nǎr", ru: "где/куда" },
+    ],
+    sentences: [
+      { cn: "请问，地铁站在哪儿？", py: "Qǐng wèn, dì tiě zhàn zài nǎr?", ru: "Скажите, где станция метро?" },
+      { cn: "我去超市。", py: "Wǒ qù chāo shì.", ru: "Я иду в супермаркет." },
+      { cn: "坐出租车去。", py: "Zuò chū zū chē qù.", ru: "Поехать на такси." },
+    ],
+    grammar: "在哪儿 (zài nǎr) — где находится. 去 (qù) — идти/ехать куда-то. 坐 (zuò) — сесть на транспорт. 请问 (qǐng wèn) — скажите, пожалуйста.",
+    quiz: [
+      { q: "Как будет «метро»?", a: "地铁", opts: ["出租车", "地铁", "车站", "飞机场"] },
+      { q: "Как будет «где?»?", a: "哪儿", opts: ["什么", "哪儿", "多少", "怎么"] },
+      { q: "Как спросить «Где супермаркет?»?", a: "超市在哪儿？", opts: ["这是什么？", "超市在哪儿？", "你去超市吗？", "超市多少钱？"] },
+    ]
+  },
+  {
+    id: 13,
+    title: "Одежда",
+    titleCn: "衣服",
+    vocab: [
+      { cn: "衣服", py: "yī fu", ru: "одежда" },
+      { cn: "裤子", py: "kù zi", ru: "брюки" },
+      { cn: "鞋子", py: "xié zi", ru: "обувь" },
+      { cn: "帽子", py: "mào zi", ru: "шапка" },
+      { cn: "衬衫", py: "chèn shān", ru: "рубашка" },
+      { cn: "裙子", py: "qún zi", ru: "юбка" },
+      { cn: "穿", py: "chuān", ru: "носить (одежду)" },
+    ],
+    sentences: [
+      { cn: "这件衣服很好看。", py: "Zhè jiàn yī fu hěn hǎo kàn.", ru: "Эта одежда очень красивая." },
+      { cn: "你穿什么？", py: "Nǐ chuān shén me?", ru: "Что ты наденешь?" },
+      { cn: "这双鞋多少钱？", py: "Zhè shuāng xié duō shao qián?", ru: "Сколько стоят эти туфли?" },
+    ],
+    grammar: "Счётные слова: 件 (jiàn) — для одежды, 双 (shuāng) — для пар (обувь). 好看 (hǎo kàn) — красивый (досл. хорошо смотреть).",
+    quiz: [
+      { q: "Как будет «одежда»?", a: "衣服", opts: ["裤子", "衣服", "鞋子", "帽子"] },
+      { q: "Как будет «носить (одежду)»?", a: "穿", opts: ["买", "穿", "看", "吃"] },
+      { q: "Как сказать «Эта рубашка очень красивая»?", a: "这件衬衫很好看。", opts: ["这件衣服很好看。", "这件衬衫很好看。", "这双鞋很贵。", "我穿衬衫。"] },
+    ]
+  },
+  {
+    id: 14,
+    title: "Тело и здоровье",
+    titleCn: "身体",
+    vocab: [
+      { cn: "头", py: "tóu", ru: "голова" },
+      { cn: "手", py: "shǒu", ru: "рука" },
+      { cn: "脚", py: "jiǎo", ru: "нога (ступня)" },
+      { cn: "眼睛", py: "yǎn jīng", ru: "глаза" },
+      { cn: "耳朵", py: "ěr duo", ru: "уши" },
+      { cn: "嘴巴", py: "zuǐ ba", ru: "рот" },
+      { cn: "生病", py: "shēng bìng", ru: "болеть" },
+      { cn: "医生", py: "yī shēng", ru: "врач" },
+    ],
+    sentences: [
+      { cn: "我生病了。", py: "Wǒ shēng bìng le.", ru: "Я заболел." },
+      { cn: "我头疼。", py: "Wǒ tóu téng.", ru: "У меня болит голова." },
+      { cn: "去看医生吧。", py: "Qù kàn yī shēng ba.", ru: "Сходи к врачу." },
+    ],
+    grammar: "了 (le) — частица завершённости действия или нового состояния. 疼 (téng) — болит. 吧 (ba) — частица предложения/побуждения.",
+    quiz: [
+      { q: "Как будет «голова»?", a: "头", opts: ["手", "头", "脚", "眼睛"] },
+      { q: "Как будет «врач»?", a: "医生", opts: ["生病", "医院", "医生", "头疼"] },
+      { q: "Как сказать «У меня болит голова»?", a: "我头疼。", opts: ["我生病了。", "我头疼。", "我看医生。", "我手疼。"] },
+    ]
+  },
+  {
+    id: 15,
+    title: "Путешествия",
+    titleCn: "旅行",
+    vocab: [
+      { cn: "护照", py: "hù zhào", ru: "паспорт" },
+      { cn: "签证", py: "qiān zhèng", ru: "виза" },
+      { cn: "酒店", py: "jiǔ diàn", ru: "отель" },
+      { cn: "房间", py: "fáng jiān", ru: "номер (в отеле)" },
+      { cn: "机票", py: "jī piào", ru: "авиабилет" },
+      { cn: "地图", py: "dì tú", ru: "карта" },
+      { cn: "照片", py: "zhào piàn", ru: "фотография" },
+    ],
+    sentences: [
+      { cn: "我想去中国旅行。", py: "Wǒ xiǎng qù Zhōng guó lǚ xíng.", ru: "Я хочу поехать в Китай." },
+      { cn: "请给我一个房间。", py: "Qǐng gěi wǒ yí gè fáng jiān.", ru: "Дайте мне номер, пожалуйста." },
+      { cn: "这个地方很美。", py: "Zhè ge dì fāng hěn měi.", ru: "Это место очень красивое." },
+    ],
+    grammar: "想 (xiǎng) + глагол — хотеть сделать. 去 (qù) + место — поехать куда-то. 很 + прилагательное — усилительная конструкция. 美 (měi) — красивый (о природе/местах).",
+    quiz: [
+      { q: "Как будет «паспорт»?", a: "护照", opts: ["签证", "护照", "机票", "酒店"] },
+      { q: "Как будет «отель»?", a: "酒店", opts: ["房间", "酒店", "地图", "机票"] },
+      { q: "Как сказать «Я хочу поехать в Китай»?", a: "我想去中国。", opts: ["我去中国。", "我想去中国。", "我喜欢中国。", "中国很美。"] },
+    ]
+  },
+];

index.html

@@ -3,89 +3,74 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
-<title>Учитель китайского языка с нуля</title>
+<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:1140px;margin:0 auto;padding:80px 24px}
-.hero{background:var(--ink);color:var(--white)}
-.hero h1{font-size:56px;font-weight:800;line-height:1.05;margin-bottom:24px}
-.hero p{font-size:20px;color:#9aa3b2;max-width:600px;margin-bottom:32px}
-.btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none}
+.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}
-.section h2{font-size:36px;font-weight:700;margin-bottom:24px}
-.card{background:var(--gray-100);border-radius:16px;padding:32px;margin-bottom:16px}
-.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
-@media (max-width:640px){.hero h1{font-size:36px}.section h2{font-size:28px}.container{padding:48px 20px}}
+.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>Начните говорить по-китайски за 3 месяца. Индивидуальные и групповые занятия для начинающих.</p>
-    <a class="btn" href="#services">Начать обучение</a>
+    <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>
-<section id="about" class="section">
-  <div class="container">
-    <h2>Обо мне</h2>
-    <div class="card">
-      <p>Преподаю китайский язык более 5 лет. Специализируюсь на работе с начинающими. Использую современные методики, которые помогают заговорить с первого урока.</p>
-      <p style="margin-top:16px">Выпускница Пекинского университета. Жила в Китае 4 года. Знаю, как сделать обучение интересным и эффективным.</p>
-    </div>
+<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>
-</section>
-<section id="services" class="section">
-  <div class="container">
-    <h2>Услуги</h2>
-    <div class="grid">
-      <div class="card">
-        <h3>Индивидуальные уроки</h3>
-        <p>Персональная программа под ваши цели. Удобное расписание. Онлайн или офлайн.</p>
-      </div>
-      <div class="card">
-        <h3>Групповые занятия</h3>
-        <p>Малые группы до 5 человек. Общение с другими начинающими. Выгодная цена.</p>
-      </div>
-      <div class="card">
-        <h3>Подготовка к HSK</h3>
-        <p>Систематическая подготовка к экзаменам любого уровня. Все уровни с HSK 1 по HSK 6.</p>
-      </div>
-    </div>
-  </div>
-</section>
-<section id="results" class="section">
-  <div class="container">
-    <h2>Результаты</h2>
-    <div class="grid">
-      <div class="card">
-        <h3>500+</h3>
-        <p>учеников прошли обучение</p>
-      </div>
-      <div class="card">
-        <h3>95%</h3>
-        <p>учеников сдают HSK с первого раза</p>
-      </div>
-      <div class="card">
-        <h3>3 месяца</h3>
-        <p>до свободного разговора</p>
-      </div>
-    </div>
-  </div>
-</section>
-<section id="contact" class="section">
-  <div class="container">
-    <h2>Связаться со мной</h2>
-    <div class="card">
-      <p>Напишите мне в Telegram или WhatsApp для записи на пробный урок.</p>
-      <p style="margin-top:16px">
-        <a class="btn" href="https://t.me/" style="margin-right:16px">Telegram</a>
-        <a class="btn" href="https://wa.me/">WhatsApp</a>
-      </p>
-    </div>
-  </div>
-</section>
+</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>
+</html>

lesson.html

@@ -0,0 +1,175 @@
+<!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:800px;margin:0 auto;padding:40px 24px}
+.header{background:var(--ink);color:var(--white)}
+.header h1{font-size:36px;font-weight:800;margin-bottom:8px}
+.header .sub{color:#9aa3b2;font-size:18px}
+.nav{display:flex;justify-content:space-between;margin:32px 0;gap:12px}
+.nav a{text-decoration:none;font-weight:700;padding:10px 20px;border-radius:8px;background:var(--gray-100);color:var(--ink)}
+.nav a:hover{background:var(--cyan)}
+.section{margin:48px 0}
+.section h2{font-size:28px;font-weight:700;margin-bottom:20px;padding-bottom:8px;border-bottom:2px solid var(--cyan)}
+.vocab-table{width:100%;border-collapse:collapse}
+.vocab-table td{padding:10px 12px;border-bottom:1px solid var(--gray-100)}
+.vocab-table .cn{font-size:22px;font-weight:700;width:25%}
+.vocab-table .py{color:var(--gray-500);font-style:italic;width:30%}
+.vocab-table .ru{width:45%}
+.sentence{padding:16px 20px;background:var(--cyan-50);border-radius:12px;margin-bottom:12px}
+.sentence .cn{font-size:20px;font-weight:700}
+.sentence .py{color:var(--gray-500);font-style:italic;margin:4px 0}
+.sentence .ru{color:var(--ink)}
+.grammar{background:var(--gray-100);border-radius:16px;padding:24px;line-height:1.7}
+.quiz{margin-top:32px}
+.quiz h3{margin-bottom:16px}
+.quiz-question{margin-bottom:20px}
+.quiz-question p{font-weight:700;margin-bottom:8px}
+.quiz-option{display:inline-block;margin:4px;padding:10px 20px;background:var(--gray-100);border-radius:8px;cursor:pointer;border:2px solid transparent;transition:.15s}
+.quiz-option:hover{background:var(--cyan-50);border-color:var(--cyan)}
+.quiz-option.selected{background:var(--cyan);border-color:var(--cyan)}
+.quiz-option.correct{background:#d4edda;border-color:#28a745;color:#155724}
+.quiz-option.wrong{background:#f8d7da;border-color:#dc3545;color:#721c24}
+.quiz-option.disabled{pointer-events:none;opacity:.8}
+.quiz-result{margin-top:16px;padding:16px;border-radius:12px;font-weight:700;display:none}
+.quiz-result.pass{background:#d4edda;color:#155724;display:block}
+.quiz-result.fail{background:#f8d7da;color:#721c24;display:block}
+.back-btn{display:inline-block;margin-top:24px;padding:14px 28px;background:var(--cyan);color:var(--ink);border-radius:8px;font-weight:700;text-decoration:none}
+.btn-check{display:inline-block;margin-top:16px;padding:12px 28px;background:var(--ink);color:var(--white);border:none;border-radius:8px;font-weight:700;cursor:pointer;font-size:16px;transition:.15s}
+.btn-check:hover{opacity:.85}
+</style>
+</head>
+<body>
+<section class="header">
+  <div class="container">
+    <h1 id="lesson-title">Загрузка...</h1>
+    <div class="sub" id="lesson-title-cn"></div>
+  </div>
+</section>
+<div class="container" id="lesson-content">
+  <div class="nav">
+    <a id="prev-link" href="#">← Предыдущий</a>
+    <a id="next-link" href="#">Следующий →</a>
+  </div>
+
+  <div class="section" id="vocab-section">
+    <h2>📖 Слова</h2>
+    <table class="vocab-table" id="vocab-table"></table>
+  </div>
+
+  <div class="section" id="sentences-section">
+    <h2>💬 Примеры</h2>
+    <div id="sentences-list"></div>
+  </div>
+
+  <div class="section" id="grammar-section">
+    <h2>📌 Грамматика</h2>
+    <div class="grammar" id="grammar-text"></div>
+  </div>
+
+  <div class="section quiz" id="quiz-section">
+    <h2>✏️ Проверь себя</h2>
+    <div id="quiz-list"></div>
+    <button class="btn-check" id="check-btn">Проверить</button>
+    <div class="quiz-result" id="quiz-result"></div>
+  </div>
+
+  <a class="back-btn" href="index.html">← На главную</a>
+</div>
+<script src="data.js"></script>
+<script>
+const url = new URL(window.location.href);
+const id = parseInt(url.searchParams.get('id')) || 1;
+const lesson = lessons.find(l => l.id === id);
+
+if (!lesson) {
+  document.getElementById('lesson-title').textContent = 'Урок не найден';
+  document.getElementById('lesson-content').innerHTML = '<p>Такого урока нет. <a href="index.html">Вернуться на главную</a></p>';
+} else {
+  document.title = `Урок ${lesson.id} — ${lesson.title} | Китайский с нуля`;
+  document.getElementById('lesson-title').textContent = `Урок ${lesson.id}: ${lesson.title}`;
+  document.getElementById('lesson-title-cn').textContent = lesson.titleCn;
+
+  let vocabHtml = '';
+  lesson.vocab.forEach(v => {
+    vocabHtml += `<tr><td class="cn">${v.cn}</td><td class="py">${v.py}</td><td class="ru">${v.ru}</td></tr>`;
+  });
+  document.getElementById('vocab-table').innerHTML = vocabHtml;
+
+  let sentHtml = '';
+  lesson.sentences.forEach(s => {
+    sentHtml += `<div class="sentence"><div class="cn">${s.cn}</div><div class="py">${s.py}</div><div class="ru">${s.ru}</div></div>`;
+  });
+  document.getElementById('sentences-list').innerHTML = sentHtml;
+
+  document.getElementById('grammar-text').textContent = lesson.grammar;
+
+  let quizHtml = '';
+  lesson.quiz.forEach((q, qi) => {
+    quizHtml += `<div class="quiz-question"><p>${qi + 1}. ${q.q}</p><div class="quiz-options" data-q="${qi}">`;
+    q.opts.forEach((opt, oi) => {
+      quizHtml += `<span class="quiz-option" data-qi="${qi}" data-oi="${oi}" data-val="${opt}">${opt}</span>`;
+    });
+    quizHtml += '</div></div>';
+  });
+  document.getElementById('quiz-list').innerHTML = quizHtml;
+
+  let selected = {};
+  document.querySelectorAll('.quiz-option').forEach(el => {
+    el.addEventListener('click', function() {
+      const qi = this.dataset.qi;
+      document.querySelectorAll(`.quiz-option[data-qi="${qi}"]`).forEach(o => o.classList.remove('selected'));
+      this.classList.add('selected');
+      selected[qi] = this.dataset.val;
+    });
+  });
+
+  document.getElementById('check-btn').addEventListener('click', function() {
+    let correct = 0;
+    lesson.quiz.forEach((q, qi) => {
+      document.querySelectorAll(`.quiz-option[data-qi="${qi}"]`).forEach(o => {
+        o.classList.remove('correct', 'wrong');
+        o.classList.add('disabled');
+        if (o.dataset.val === q.a) o.classList.add('correct');
+        else if (o.classList.contains('selected')) o.classList.add('wrong');
+      });
+      if (selected[qi] === q.a) correct++;
+    });
+    this.disabled = true;
+    this.style.opacity = '.5';
+    const total = lesson.quiz.length;
+    const result = document.getElementById('quiz-result');
+    if (correct === total) {
+      result.className = 'quiz-result pass';
+      result.textContent = `🎉 Отлично! ${correct}/${total} правильных! Урок пройден!`;
+      const done = JSON.parse(localStorage.getItem('chineseDone') || '[]');
+      if (!done.includes(lesson.id)) {
+        done.push(lesson.id);
+        localStorage.setItem('chineseDone', JSON.stringify(done));
+      }
+    } else {
+      result.className = 'quiz-result fail';
+      result.textContent = `✅ ${correct}/${total} правильных. Повтори слова и попробуй снова!`;
+      document.querySelectorAll('.quiz-option.disabled').forEach(o => o.classList.remove('disabled'));
+      this.disabled = false;
+      this.style.opacity = '1';
+    }
+    document.querySelectorAll('.quiz-option.selected').forEach(o => o.classList.remove('selected'));
+  });
+
+  const prev = document.getElementById('prev-link');
+  const next = document.getElementById('next-link');
+  if (id > 1) prev.href = `lesson.html?id=${id - 1}`;
+  else prev.style.display = 'none';
+  if (id < lessons.length) next.href = `lesson.html?id=${id + 1}`;
+  else next.style.display = 'none';
+}
+</script>
+</body>
+</html>