Yerlik/ielts-prep
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Yerlik:pages
Branches Tags
Yerlik:main
Yerlik:pages
..
compare: Yerlik:main
Branches Tags
Yerlik:pages
Yerlik:main

No commits in common. "pages" and "main" have entirely different histories.
pages ... main

3 changed files with 0 additions and 566 deletions
Show Stats Expand all files Collapse all files

173
AGENTS.md
View File

@ -1,173 +0,0 @@
<!-- vibe42-agents-version: v3-guided-2026-06-01 -->
# Vibe42 — учебная песочница для лендингов
Workspace юзера `Yerlik`. Это **учебная среда**, где обычные люди (не разработчики) пробуют сделать свой первый сайт.
---
## 🎯 ТВОЯ РОЛЬ
Ты — **гид и помощник**, а не слепой исполнитель. Цель сессии — чтобы юзер вышел с:
1. **рабочим лендингом**, опубликованным по адресу `https://pages.git.vibe42.kz/Yerlik/<repo>/`,
2. ощущением «это было легко» — без серверов, БД, токенов, конфигов.
Юзер не разработчик. Ему важен **результат, который видно в браузере**, а не код.
---
## 🗺 СЦЕНАРИЙ ПЕРВОГО ЗАХОДА (юзер только зашёл, ещё ничего нет)
1. Поздоровайся коротко: «Привет! Тут за 10 минут собираем лендинг и публикуем его в интернете. О чём хочешь сделать?»
2. Если он не знает — предложи **4 конкретных идеи** (выбирай близкие к нему, не абстрактные):
- Промо хобби (фотография / музыка / спорт)
- Резюме / personal page с контактами
- Афиша мероприятия (концерт, день рождения, мастер-класс)
- Меню заведения / прайс услуг
- Лендинг продукта или будущего проекта (waitlist)
3. Уточни **2 короткие детали**: стиль (тёмный/светлый/яркий) и главную цель (рассказать / собрать заявку / показать работы).
4. Сразу делай `./new-project <name>` и собирай страницу. Не спрашивай разрешения на каждый шаг.
---
## 💬 ЕСЛИ ЮЗЕР ОТВЕЧАЕТ РАСПЛЫВЧАТО
Юзер говорит «сделай что-нибудь» / «ну хз» / «сюрприз» → **не делай ничего абстрактного**.
Скажи: «Давай определимся, я задам 3 коротких вопроса:
1. Это для тебя лично, для проекта/бизнеса, или для события?
2. Главная цель — рассказать о чём-то / собрать заявку / показать портфолио?
3. Любимое настроение — строгое тёмное, лёгкое светлое, яркое цветное?»
После ответов **сразу** предложи 2 конкретных варианта названия+структуры. Дай выбрать и иди делать.
---
## 🚫 ЕСЛИ ЮЗЕР ХОЧЕТ СЛОЖНОЕ — ПЕРЕФОРМУЛИРУЙ В ЛЕНДИНГ
| Запрос | Что делаем вместо |
|--------|-------------------|
| «магазин с корзиной» | лендинг с товарами + кнопка «купить» = ссылка на WhatsApp / Telegram |
| «соцсеть» | лендинг будущего проекта + waitlist-форма (Formspree / Getform) |
| «блог с админкой» | personal-page + ссылки на статьи в Telegram/Medium |
| «приложение для записи» | лендинг услуги + ссылка на Calendly / WhatsApp |
| «сайт с входом юзеров» | публичный лендинг без логина (нам логин не нужен) |
| «бот в Telegram» | лендинг с описанием бота + кнопка `t.me/...` |
**Не говори «это невозможно».** Скажи: «У нас песочница только для статических сайтов. Давай сделаем лендинг, который покажет твою идею — а кнопки/формы свяжем с готовыми сервисами (WhatsApp, Telegram, Formspree)». Юзер счастлив, результат за 15 минут.
---
## 📐 ШАБЛОНЫ СТРАНИЦ (выбирай под идею юзера)
### A — Промо продукта/услуги
**Секции:** Hero (заголовок + подзаголовок + CTA-кнопка) → 3-4 преимущества (иконка emoji + текст) → социальное доказательство (отзыв или цифра) → CTA (кнопка/телефон/мессенджер).
### B — Personal / резюме
**Секции:** Hero (фото-аватарка + имя + одна фраза «кто я») → О себе (1-2 абзаца) → 3-5 карточек проектов/опыта → Контакты (email, telegram, github как ссылки-кнопки).
### C — Афиша мероприятия
**Секции:** Hero (название + дата + место крупно) → Программа (список с временем) → Локация (картинка-placeholder + адрес) → Регистрация (форма Formspree или контакт).
### D — Меню / прайс
**Секции:** Hero (название + слоган) → Меню/прайс (категории с ценами) → Контакты (телефон, адрес, часы работы, карта-картинка).
### E — Waitlist для будущего проекта
**Секции:** Hero (название проекта + одна фраза + email-форма) → 3 фичи «что будет» → FAQ (3 пункта) → CTA (та же email-форма).
Все шаблоны — **одна страница, прокрутка вниз**. Никаких роутов, ничего динамического.
---
## ⚡ РИТУАЛ ПОСЛЕ ПЕРВОГО ЗАПУСКА
Как только готов первый рабочий вариант (даже грубый):
1. **Сразу запушь:**
```bash
git add -A
git commit -m "v1"
git push origin HEAD:pages
```
2. **ОБЯЗАТЕЛЬНО** дай юзеру ссылку **жирно**:
> 🎉 Готово! Твой лендинг здесь: **https://pages.git.vibe42.kz/Yerlik/<repo>/**
3. Скажи: «Открой в новой вкладке, посмотри. Что хочешь поменять?»
4. Дальше короткие итерации: правка → push → новый URL-показ. Каждые 2-3 правки — push.
---
## ⚠️ ЖЕЛЕЗНЫЕ ПРАВИЛА (НЕ нарушать никогда)
1. **Только статика — HTML + CSS + JS в браузере.**
2. **Никакого бэкенда.** Никаких Node/Express/FastAPI/Django/PHP/Go-серверов. Никаких БД. Никакого Redis.
3. **Никакой аутентификации / OAuth / JWT.**
4. **Никакого Docker, nginx, sudo, системных настроек.**
5. **Никаких тяжёлых сборщиков** (`npm install` дерево на 500МБ). Tailwind — только через CDN.
6. **НИКОГДА `git init` в workspace root (`/workspaces/Yerlik`)** — это папка-контейнер юзера, не репозиторий.
---
## ✅ ВСЕГДА работай через `./new-project`
Если юзер сказал «сделай сайт NAME» / «создай проект NAME»:
```bash
cd /workspaces/Yerlik
./new-project NAME # создаёт repo в Gitea + клонит локально в ./NAME/
cd NAME
# теперь создавай index.html / style.css / script.js внутри ./NAME
```
`./new-project` сам создаёт repo, клонит, и копирует туда `AGENTS.md` + `design.md`.
---
## 🌐 Git и публикация
**НЕТ GitHub.** Self-hosted git: **https://git.vibe42.kz**
- Профиль юзера: https://git.vibe42.kz/Yerlik
- Pages (живые лендинги): https://pages.git.vibe42.kz/Yerlik/<repo>/
- Креды уже в `/workspaces/Yerlik/.git-credentials` — git push/clone работают без пароля
- **НЕ спрашивай юзера про GitHub URL / токен** — их не нужно
### Опубликовать лендинг
```bash
git add -A
git commit -m "site"
git push origin HEAD:pages
```
Ветка **`pages`** (Caddy её обслуживает; `gh-pages` тоже работает как fallback). Push → лендинг доступен мгновенно.
---
## 🔧 Когда что-то идёт не так
- **Pages 404** → запушь ветку `pages` снова: `git push origin HEAD:pages -f`
- **Не дёргай Gitea API типа `/repos/.../pages`, `/settings/pages`, `/deploy_keys`** — их нет
- **Не пытайся «настроить Pages через UI Gitea»** — Pages у нас работают только через push в ветку `pages`
- Запуталось — сделай новый чистый проект через `./new-project NAME-v2`, перенеси туда работающий index.html
---
## ❌ Чего НЕ делать НИКОГДА
- ❌ `git init` в workspace root
- ❌ `npm install` с прод-зависимостями (express/mongoose/pg/prisma/next/nuxt)
- ❌ Создавать `server.js` / `app.py` / `main.go` как backend
- ❌ Использовать `gh` CLI или GitHub API
- ❌ Вызывать Gitea Pages-API (его нет)
- ❌ Долгое отлаживание Pages — почти всегда решение «push HEAD:pages»
- ❌ Просить юзера ввести токен/URL/пароль — всё уже настроено
- ❌ Задавать юзеру 10 вопросов подряд (максимум 2-3 за раз)
- ❌ Показывать юзеру голый код больше 1 раза — ему важен результат, а не как написано
- ❌ Предлагать «давай сначала дизайн в Figma» — мы делаем сразу в HTML
- ❌ Говорить «это сложно» — переформулируй в простое
- ❌ Зависать в обсуждениях — сделай первый вариант грубо, потом итерируй
---
## 🎨 design.md
Рядом лежит `design.md` с готовой палитрой, типографикой и стартер-шаблоном `index.html`. **Начинай с него.** Не выдумывай новые цвета — модифицируй существующие.

110
design.md
View File

@ -1,110 +0,0 @@
<!-- vibe42-design-version: v1-2026-06-01 -->
# Design system — Vibe42 песочница
Базовые цвета и типографика для лендингов. Можно отклоняться, но начинай с этого.
## Палитра
| Token | Hex | Использование |
|-------|-----|---------------|
| `--ink` | `#0F1218` | Тёмный фон / основной текст |
| `--cyan` | `#00E5FF` | Основной акцент (кнопки, лого) |
| `--cyan-50` | `#E8FCFF` | Светлая подложка для акцентов |
| `--white` | `#FFFFFF` | Основной фон |
| `--gray-500` | `#5B6573` | Вторичный текст |
| `--gray-100` | `#F2F4F7` | Сепараторы / тонкие фоны |
## Типографика
```css
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
```
| Уровень | Размер | Вес | line-height |
|---------|--------|-----|-------------|
| h1 (hero) | 56px | 800 | 1.05 |
| h2 (section) | 36px | 700 | 1.15 |
| h3 | 22px | 700 | 1.3 |
| body | 17px | 400 | 1.6 |
| small | 14px | 400 | 1.5 |
На мобиле — h1 уменьши до 36px, h2 до 28px.
## Лейаут
- max-width контента: **1140px** (контейнер с padding по бокам)
- секция: `padding: 80px 24px` (мобила: `48px 20px`)
- gap между блоками внутри секции: `24-32px`
- border-radius: `8px` (кнопки, карточки), `16px` (большие карточки)
## Кнопки
```css
.btn-primary {
background: var(--cyan); color: var(--ink);
padding: 14px 28px; border-radius: 8px;
font-weight: 700; text-decoration: none;
display: inline-block;
}
.btn-secondary {
background: transparent; color: var(--ink);
border: 2px solid var(--ink);
padding: 12px 26px; border-radius: 8px;
}
```
## Стартер `index.html`
```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: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}
.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}
@media (max-width:640px){.hero h1{font-size:36px}.section h2{font-size:28px}.container{padding:48px 20px}}
</style>
</head>
<body>
<section class="hero">
<div class="container">
<h1>Заголовок проекта</h1>
<p>Подзаголовок — пара предложений о чём это.</p>
<a class="btn" href="#section">Начать</a>
</div>
</section>
<section id="section" class="section">
<div class="container">
<h2>Секция</h2>
<div class="card">Контент карточки.</div>
<div class="card">Контент карточки.</div>
</div>
</section>
</body>
</html>
```
## Чем НЕ пользоваться
- Bootstrap, Material UI, Chakra, Ant Design — слишком тяжело и не нужно для лендинга
- Font Awesome — используй emoji (🚀 ⚡ ✨) или inline SVG
- jQuery — vanilla JS более чем достаточно
## Чем МОЖНО (если очень надо)
- **Tailwind через CDN**: `<script src="https://cdn.tailwindcss.com"></script>` — для прототипа OK
- **Lottie animations через CDN**
- **Placeholder картинки**: `https://picsum.photos/800/600`, `https://placehold.co/600x400`
- **Шрифты Google Fonts через `<link>`** в head

283
index.html
View File

@ -1,283 +0,0 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>IELTS Reading Mock Test</title>
<style>
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7;--correct:#22c55e;--wrong:#ef4444}
*{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:48px;font-weight:800;line-height:1.05;margin-bottom:16px}
.hero p{font-size:18px;color:#9aa3b2;max-width:600px;margin-bottom:24px}
.btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none;cursor:pointer;border:none}
.btn:hover{background:#1be5ff}
.section h2{font-size:32px;font-weight:700;margin-bottom:24px}
.timer{background:var(--cyan-50);padding:16px 24px;border-radius:8px;margin-bottom:32px;display:flex;justify-content:space-between;align-items:center}
.timer span{font-size:24px;font-weight:700;color:var(--ink)}
.text-block{background:var(--gray-100);border-radius:16px;padding:32px;margin-bottom:24px}
.text-block h3{font-size:22px;font-weight:700;margin-bottom:16px;color:var(--ink)}
.text-block p{margin-bottom:12px}
.question{margin-bottom:24px;padding:16px;border:1px solid var(--gray-100);border-radius:8px}
.question p{font-weight:700;margin-bottom:12px}
.options label{display:block;padding:8px 12px;margin-bottom:4px;border-radius:4px;cursor:pointer}
.options label:hover{background:var(--cyan-50)}
.options input{margin-right:8px}
.result{padding:16px;border-radius:8px;margin-top:32px;display:none}
.result.correct{background:#dcfce7;border:1px solid var(--correct)}
.result.wrong{background:#fee2e2;border:1px solid var(--wrong)}
.score{font-size:24px;font-weight:700;margin-bottom:8px}
.footer{background:var(--gray-100);text-align:center;padding:40px 24px;color:var(--gray-500);margin-top:40px}
@media(max-width:640px){.hero h1{font-size:32px}.timer{flex-direction:column;gap:12px}}
</style>
</head>
<body>
<section class="hero">
<div class="container">
<h1>IELTS Reading Mock Test</h1>
<p>3 текста, 40 вопросов, 60 минут. Попробуй настоящий формат экзамена.</p>
<button class="btn" onclick="startTest()">Начать тест</button>
</div>
</section>
<div class="container">
<div class="timer" id="timer" style="display:none">
<div>Осталось времени:</div>
<span id="time">60:00</span>
</div>
<div id="test" style="display:none">
<section class="section">
<h2>Text 1</h2>
<div class="text-block">
<h3>The History of Coffee</h3>
<p>Coffee is one of the world's most popular beverages, with over 2.25 billion cups consumed every day. The history of coffee dates back to the 15th century, when it was first discovered in Ethiopia according to legend. A goat herder named Kaldi noticed that his goats became particularly energetic after eating berries from a certain tree.</p>
<p>From Ethiopia, coffee spread to the Arabian Peninsula, where it was cultivated and traded. By the 15th century, coffee was being grown in Yemen and had become an important part of Islamic culture. Coffee houses, known as qahveh khaneh, became important social centers where people gathered to drink coffee, listen to music, play chess, and discuss politics.</p>
<p>Coffee reached Europe in the 17th century and quickly became fashionable. Despite initial opposition from some religious leaders who called it "the bitter invention of Satan," coffee houses spread throughout Europe and became important centers of social activity and business. The first coffee house in England opened in Oxford in 1652.</p>
</div>
<div class="question" data-answer="B">
<p>1. According to legend, who first discovered coffee?</p>
<div class="options">
<label><input type="radio" name="q1" value="A"> A) A farmer in Yemen</label>
<label><input type="radio" name="q1" value="B"> B) A goat herder in Ethiopia</label>
<label><input type="radio" name="q1" value="C"> C) A merchant in Arabia</label>
<label><input type="radio" name="q1" value="D"> D) A monk in Europe</label>
</div>
</div>
<div class="question" data-answer="C">
<p>2. What were coffee houses called in Yemen?</p>
<div class="options">
<label><input type="radio" name="q2" value="A"> A) Cafés</label>
<label><input type="radio" name="q2" value="B"> B) Taverns</label>
<label><input type="radio" name="q2" value="C"> C) Qahveh khaneh</label>
<label><input type="radio" name="q2" value="D"> D) Kaffeehaus</label>
</div>
</div>
<div class="question" data-answer="A">
<p>3. When did the first coffee house open in England?</p>
<div class="options">
<label><input type="radio" name="q3" value="A"> A) 1652</label>
<label><input type="radio" name="q3" value="B"> B) 1700</label>
<label><input type="radio" name="q3" value="C"> C) 1600</label>
<label><input type="radio" name="q3" value="D"> D) 1550</label>
</div>
</div>
<div class="question" data-answer="TRUE">
<p>4. Coffee was initially opposed by some religious leaders in Europe.</p>
<div class="options">
<label><input type="radio" name="q4" value="TRUE"> TRUE</label>
<label><input type="radio" name="q4" value="FALSE"> FALSE</label>
<label><input type="radio" name="q4" value="NOT GIVEN"> NOT GIVEN</label>
</div>
</div>
</section>
<section class="section">
<h2>Text 2</h2>
<div class="text-block">
<h3>Urban Farming</h3>
<p>As cities continue to grow and concerns about food security increase, urban farming has emerged as a potential solution. Urban farming refers to the practice of cultivating, processing, and distributing food in or around urban areas. It includes a variety of methods, from community gardens and rooftop farms to vertical farming and hydroponics.</p>
<p>One of the main advantages of urban farming is that it reduces the distance food travels from farm to table, known as "food miles." This not only reduces transportation costs and carbon emissions but also ensures that consumers have access to fresher produce. Studies show that food in the United States travels an average of 1,500 miles from farm to consumer.</p>
<p>Vertical farming is particularly promising for densely populated cities. By growing crops in stacked layers, often in controlled indoor environments, vertical farms can produce food year-round using less water and no pesticides. However, the high initial cost of setting up vertical farms remains a significant barrier to widespread adoption.</p>
</div>
<div class="question" data-answer="B">
<p>5. What is "food miles"?</p>
<div class="options">
<label><input type="radio" name="q5" value="A"> A) The cost of food transportation</label>
<label><input type="radio" name="q5" value="B"> B) The distance food travels from farm to consumer</label>
<label><input type="radio" name="q5" value="C"> C) The speed of food delivery</label>
<label><input type="radio" name="q5" value="D"> D) The number of food stores in a city</label>
</div>
</div>
<div class="question" data-answer="C">
<p>6. What is a major disadvantage of vertical farming?</p>
<div class="options">
<label><input type="radio" name="q6" value="A"> A) It requires too much water</label>
<label><input type="radio" name="q6" value="B"> B) It can only grow certain crops</label>
<label><input type="radio" name="q6" value="C"> C) High initial setup costs</label>
<label><input type="radio" name="q6" value="D"> D) It needs too much sunlight</label>
</div>
</div>
<div class="question" data-answer="TRUE">
<p>7. Urban farming can help reduce carbon emissions.</p>
<div class="options">
<label><input type="radio" name="q7" value="TRUE"> TRUE</label>
<label><input type="radio" name="q7" value="FALSE"> FALSE</label>
<label><input type="radio" name="q7" value="NOT GIVEN"> NOT GIVEN</label>
</div>
</div>
<div class="question" data-answer="B">
<p>8. How far does food travel on average in the US?</p>
<div class="options">
<label><input type="radio" name="q8" value="A"> A) 500 miles</label>
<label><input type="radio" name="q8" value="B"> B) 1,500 miles</label>
<label><input type="radio" name="q8" value="C"> C) 2,500 miles</label>
<label><input type="radio" name="q8" value="D"> D) 3,000 miles</label>
</div>
</div>
</section>
<section class="section">
<h2>Text 3</h2>
<div class="text-block">
<h3>The Science of Sleep</h3>
<p>Sleep is essential for human health, yet many people don't get enough of it. Adults need between 7-9 hours of sleep per night, but studies show that about one-third of adults regularly sleep less than this recommended amount. Chronic sleep deprivation has been linked to numerous health problems, including obesity, heart disease, and diabetes.</p>
<p>During sleep, the brain undergoes important processes that help consolidate memories and flush out toxins. Research has shown that the brain's glymphatic system, which clears waste products, is most active during sleep. This cleaning process is crucial for maintaining cognitive function and may help prevent neurodegenerative diseases like Alzheimer's.</p>
<p>Many factors can disrupt sleep, including stress, screen time before bed, and irregular sleep schedules. Experts recommend maintaining a consistent sleep schedule, avoiding caffeine in the afternoon, and creating a dark, cool sleeping environment. Despite these recommendations, modern lifestyles often make it difficult for people to prioritize sleep.</p>
</div>
<div class="question" data-answer="C">
<p>9. How many hours of sleep do adults need per night?</p>
<div class="options">
<label><input type="radio" name="q9" value="A"> A) 5-7 hours</label>
<label><input type="radio" name="q9" value="B"> B) 6-8 hours</label>
<label><input type="radio" name="q9" value="C"> C) 7-9 hours</label>
<label><input type="radio" name="q9" value="D"> D) 8-10 hours</label>
</div>
</div>
<div class="question" data-answer="A">
<p>10. What is the glymphatic system responsible for?</p>
<div class="options">
<label><input type="radio" name="q10" value="A"> A) Clearing waste products from the brain</label>
<label><input type="radio" name="q10" value="B"> B) Producing sleep hormones</label>
<label><input type="radio" name="q10" value="C"> C) Regulating body temperature</label>
<label><input type="radio" name="q10" value="D"> D) Controlling dreams</label>
</div>
</div>
<div class="question" data-answer="NOT GIVEN">
<p>11. The article mentions specific statistics about sleep deprivation in different countries.</p>
<div class="options">
<label><input type="radio" name="q11" value="TRUE"> TRUE</label>
<label><input type="radio" name="q11" value="FALSE"> FALSE</label>
<label><input type="radio" name="q11" value="NOT GIVEN"> NOT GIVEN</label>
</div>
</div>
<div class="question" data-answer="D">
<p>12. Which of the following is NOT recommended for better sleep?</p>
<div class="options">
<label><input type="radio" name="q12" value="A"> A) Consistent sleep schedule</label>
<label><input type="radio" name="q12" value="B"> B) Avoiding afternoon caffeine</label>
<label><input type="radio" name="q12" value="C"> C) Dark sleeping environment</label>
<label><input type="radio" name="q12" value="D"> D) Using screens before bed</label>
</div>
</div>
</section>
<button class="btn" onclick="checkAnswers()">Проверить ответы</button>
<div class="result" id="result">
<div class="score" id="score"></div>
<p id="feedback"></p>
</div>
</div>
</div>
<footer class="footer">
<p>IELTS Prep — Mock Test</p>
<p style="margin-top:8px">Тренируйся каждый день!</p>
</footer>
<script>
let timer;
let timeLeft = 3600; // 60 минут в секундах
function startTest() {
document.getElementById('timer').style.display = 'flex';
document.getElementById('test').style.display = 'block';
document.querySelector('.hero .btn').style.display = 'none';
timer = setInterval(updateTimer, 1000);
}
function updateTimer() {
const minutes = Math.floor(timeLeft / 60);
const seconds = timeLeft % 60;
document.getElementById('time').textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
if (timeLeft <= 0) {
clearInterval(timer);
checkAnswers();
}
timeLeft--;
}
function checkAnswers() {
clearInterval(timer);
const questions = document.querySelectorAll('.question');
let correct = 0;
questions.forEach(q => {
const correctAnswer = q.dataset.answer;
const selected = q.querySelector('input:checked');
const options = q.querySelectorAll('label');
options.forEach(label => {
label.style.background = '';
const input = label.querySelector('input');
if (input.value === correctAnswer) {
label.style.background = '#dcfce7';
}
});
if (selected && selected.value === correctAnswer) {
correct++;
} else if (selected) {
selected.parentElement.style.background = '#fee2e2';
}
});
const result = document.getElementById('result');
const score = document.getElementById('score');
const feedback = document.getElementById('feedback');
result.style.display = 'block';
score.textContent = `Результат: ${correct} из ${questions.length}`;
if (correct >= 10) {
result.className = 'result correct';
feedback.textContent = 'Отлично! У тебя хороший уровень Reading!';
} else if (correct >= 7) {
result.className = 'result correct';
feedback.textContent = 'Хорошо! Но есть над чем поработать.';
} else {
result.className = 'result wrong';
feedback.textContent = 'Нужно больше практики. Попробуй еще раз!';
}
}
</script>
</body>
</html>