Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| f037ee9063 | |||
| acc7fbb111 | |||
| 3d72d7d590 | |||
| 69f0d9f78b | |||
| c5bec7fed6 | |||
| 8a52f181cb | |||
| e1d76922a7 | |||
| 0e300ae898 |
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
.git-credentials
|
||||
173
AGENTS.md
Normal file
173
AGENTS.md
Normal file
@ -0,0 +1,173 @@
|
||||
<!-- vibe42-agents-version: v3-guided-2026-06-01 -->
|
||||
# Vibe42 — учебная песочница для лендингов
|
||||
|
||||
Workspace юзера `sultanbek_askaruly`. Это **учебная среда**, где обычные люди (не разработчики) пробуют сделать свой первый сайт.
|
||||
|
||||
---
|
||||
|
||||
## 🎯 ТВОЯ РОЛЬ
|
||||
|
||||
Ты — **гид и помощник**, а не слепой исполнитель. Цель сессии — чтобы юзер вышел с:
|
||||
1. **рабочим лендингом**, опубликованным по адресу `https://pages.git.vibe42.kz/sultanbek_askaruly/<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/sultanbek_askaruly/<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/sultanbek_askaruly`)** — это папка-контейнер юзера, не репозиторий.
|
||||
|
||||
---
|
||||
|
||||
## ✅ ВСЕГДА работай через `./new-project`
|
||||
|
||||
Если юзер сказал «сделай сайт NAME» / «создай проект NAME»:
|
||||
|
||||
```bash
|
||||
cd /workspaces/sultanbek_askaruly
|
||||
./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/sultanbek_askaruly
|
||||
- Pages (живые лендинги): https://pages.git.vibe42.kz/sultanbek_askaruly/<repo>/
|
||||
- Креды уже в `/workspaces/sultanbek_askaruly/.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`. **Начинай с него.** Не выдумывай новые цвета — модифицируй существующие.
|
||||
71
contact.html
Normal file
71
contact.html
Normal file
@ -0,0 +1,71 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Contact — English Easy</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="stars-bg" id="stars-bg"></div>
|
||||
<header>
|
||||
<div class="header-inner">
|
||||
<a href="index.html" class="logo">English <span>Easy</span></a>
|
||||
<button class="menu-toggle" aria-label="Menu">☰</button>
|
||||
<nav>
|
||||
<ul class="nav-list">
|
||||
<li><a href="index.html" data-i18n="nav-home">Home</a></li>
|
||||
<li><a href="vocabulary.html" data-i18n="nav-vocabulary">Vocabulary</a></li>
|
||||
<li><a href="grammar.html" data-i18n="nav-grammar">Grammar</a></li>
|
||||
<li><a href="pronunciation.html" data-i18n="nav-pronunciation">Pronunciation</a></li>
|
||||
<li><a href="exercises.html" data-i18n="nav-exercises">Exercises</a></li>
|
||||
<li><a href="tests.html" data-i18n="nav-tests">Tests</a></li>
|
||||
<li><a href="reading.html" data-i18n="nav-reading">Reading</a></li>
|
||||
<li><a href="progress.html" data-i18n="nav-progress">Progress</a></li>
|
||||
<li><a href="contact.html" data-i18n="nav-contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="page-header">
|
||||
<div class="container">
|
||||
<h1 data-i18n="page-contact-title">Contact Us</h1>
|
||||
<p data-i18n="page-contact-desc">Have a question or suggestion? Send us a message!</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<form class="contact-form" id="contact-form" onsubmit="submitForm(event)">
|
||||
<div class="form-group">
|
||||
<label for="name" data-i18n="form-name">Name</label>
|
||||
<input type="text" id="name" name="name" placeholder="Your name" required data-i18n-placeholder="form-name-placeholder">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email" data-i18n="form-email">Email</label>
|
||||
<input type="email" id="email" name="email" placeholder="your@email.com" required data-i18n-placeholder="form-email-placeholder">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="message" data-i18n="form-message">Message</label>
|
||||
<textarea id="message" name="message" placeholder="Write your message here..." required data-i18n-placeholder="form-message-placeholder"></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary" data-i18n="form-send">Send Message</button>
|
||||
<div class="form-message" id="form-message" data-i18n="form-thankyou">Thank you! Your message has been received.</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p>© 2026 <a href="index.html" data-i18n="footer-by">English Easy</a>. <span data-i18n="footer-text">Made for learning English.</span></p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/lang.js"></script>
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
1480
css/style.css
Normal file
1480
css/style.css
Normal file
File diff suppressed because it is too large
Load Diff
110
design.md
Normal file
110
design.md
Normal file
@ -0,0 +1,110 @@
|
||||
<!-- 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
|
||||
181
exercises.html
Normal file
181
exercises.html
Normal file
@ -0,0 +1,181 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Exercises — English Easy</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="stars-bg" id="stars-bg"></div>
|
||||
<header>
|
||||
<div class="header-inner">
|
||||
<a href="index.html" class="logo">English <span>Easy</span></a>
|
||||
<button class="menu-toggle" aria-label="Menu">☰</button>
|
||||
<nav>
|
||||
<ul class="nav-list">
|
||||
<li><a href="index.html" data-i18n="nav-home">Home</a></li>
|
||||
<li><a href="vocabulary.html" data-i18n="nav-vocabulary">Vocabulary</a></li>
|
||||
<li><a href="grammar.html" data-i18n="nav-grammar">Grammar</a></li>
|
||||
<li><a href="pronunciation.html" data-i18n="nav-pronunciation">Pronunciation</a></li>
|
||||
<li><a href="exercises.html" data-i18n="nav-exercises">Exercises</a></li>
|
||||
<li><a href="tests.html" data-i18n="nav-tests">Tests</a></li>
|
||||
<li><a href="reading.html" data-i18n="nav-reading">Reading</a></li>
|
||||
<li><a href="progress.html" data-i18n="nav-progress">Progress</a></li>
|
||||
<li><a href="contact.html" data-i18n="nav-contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="page-header">
|
||||
<div class="container">
|
||||
<h1 data-i18n="page-exercises-title">Exercises</h1>
|
||||
<p data-i18n="page-exercises-desc">Practice your English with these fun exercises.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
<!-- Exercise 1: Choose the correct answer -->
|
||||
<div class="exercise">
|
||||
<h3>1. Choose the correct answer</h3>
|
||||
<p class="question">I ___ English every day.</p>
|
||||
<div class="options">
|
||||
<label class="option"><input type="radio" name="ex1" value="true"> study</label>
|
||||
<label class="option"><input type="radio" name="ex1" value="false"> studies</label>
|
||||
<label class="option"><input type="radio" name="ex1" value="false"> studied</label>
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="checkExercise(this)" data-i18n="btn-check">Check</button>
|
||||
<div class="feedback"></div>
|
||||
</div>
|
||||
|
||||
<!-- Exercise 2: Choose the correct answer -->
|
||||
<div class="exercise">
|
||||
<h3>2. Choose the correct answer</h3>
|
||||
<p class="question">She ___ a student.</p>
|
||||
<div class="options">
|
||||
<label class="option"><input type="radio" name="ex2" value="false"> am</label>
|
||||
<label class="option"><input type="radio" name="ex2" value="true"> is</label>
|
||||
<label class="option"><input type="radio" name="ex2" value="false"> are</label>
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="checkExercise(this)" data-i18n="btn-check">Check</button>
|
||||
<div class="feedback"></div>
|
||||
</div>
|
||||
|
||||
<!-- Exercise 3: Choose the correct answer -->
|
||||
<div class="exercise">
|
||||
<h3>3. Choose the correct answer</h3>
|
||||
<p class="question">They ___ football yesterday.</p>
|
||||
<div class="options">
|
||||
<label class="option"><input type="radio" name="ex3" value="false"> play</label>
|
||||
<label class="option"><input type="radio" name="ex3" value="true"> played</label>
|
||||
<label class="option"><input type="radio" name="ex3" value="false"> playing</label>
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="checkExercise(this)" data-i18n="btn-check">Check</button>
|
||||
<div class="feedback"></div>
|
||||
</div>
|
||||
|
||||
<!-- Exercise 4: Fill in the gap -->
|
||||
<div class="exercise">
|
||||
<h3>4. Fill in the gap</h3>
|
||||
<p class="question">I ___ a book every day. (read / reads)</p>
|
||||
<div>
|
||||
<input type="text" class="fill-input" data-answer="read" placeholder="Type your answer">
|
||||
</div>
|
||||
<br>
|
||||
<button class="btn btn-primary" onclick="checkFill(this.previousElementSibling.previousElementSibling.querySelector('input'))" data-i18n="btn-check">Check</button>
|
||||
<div class="feedback"></div>
|
||||
</div>
|
||||
|
||||
<!-- Exercise 5: Fill in the gap -->
|
||||
<div class="exercise">
|
||||
<h3>5. Fill in the gap</h3>
|
||||
<p class="question">She ___ to school every day. (go / goes)</p>
|
||||
<div>
|
||||
<input type="text" class="fill-input" data-answer="goes" placeholder="Type your answer">
|
||||
</div>
|
||||
<br>
|
||||
<button class="btn btn-primary" onclick="checkFill(this.previousElementSibling.previousElementSibling.querySelector('input'))" data-i18n="btn-check">Check</button>
|
||||
<div class="feedback"></div>
|
||||
</div>
|
||||
|
||||
<!-- Exercise 6: Fill in the gap -->
|
||||
<div class="exercise">
|
||||
<h3>6. Fill in the gap</h3>
|
||||
<p class="question">They ___ visiting their grandmother yesterday. (was / were)</p>
|
||||
<div>
|
||||
<input type="text" class="fill-input" data-answer="were" placeholder="Type your answer">
|
||||
</div>
|
||||
<br>
|
||||
<button class="btn btn-primary" onclick="checkFill(this.previousElementSibling.previousElementSibling.querySelector('input'))" data-i18n="btn-check">Check</button>
|
||||
<div class="feedback"></div>
|
||||
</div>
|
||||
|
||||
<!-- Exercise 7: Translate -->
|
||||
<div class="exercise">
|
||||
<h3>7. Translate the sentence</h3>
|
||||
<p class="question">Translate: «Я люблю музыку.»</p>
|
||||
<div>
|
||||
<input type="text" class="fill-input" data-answer="i like music" placeholder="Type your translation">
|
||||
</div>
|
||||
<br>
|
||||
<button class="btn btn-primary" onclick="checkTranslate(this)" data-i18n="btn-check">Check</button>
|
||||
<div class="feedback"></div>
|
||||
</div>
|
||||
|
||||
<!-- Exercise 8: Translate -->
|
||||
<div class="exercise">
|
||||
<h3>8. Translate the sentence</h3>
|
||||
<p class="question">Translate: «Он мой друг.»</p>
|
||||
<div>
|
||||
<input type="text" class="fill-input" data-answer="he is my friend" placeholder="Type your translation">
|
||||
</div>
|
||||
<br>
|
||||
<button class="btn btn-primary" onclick="checkTranslate(this)" data-i18n="btn-check">Check</button>
|
||||
<div class="feedback"></div>
|
||||
</div>
|
||||
|
||||
<!-- Exercise 9: Match words -->
|
||||
<div class="exercise">
|
||||
<h3>9. Match words with translations</h3>
|
||||
<p class="question">Write the translation for each word:</p>
|
||||
<div style="display:flex;flex-direction:column;gap:10px;margin-bottom:12px;">
|
||||
<div>Book → <input type="text" class="fill-input" data-answer="книга" style="width:120px;"></div>
|
||||
<div>School → <input type="text" class="fill-input" data-answer="школа" style="width:120px;"></div>
|
||||
<div>Friend → <input type="text" class="fill-input" data-answer="друг" style="width:120px;"></div>
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="checkMatch(this)" data-i18n="btn-check">Check All</button>
|
||||
<div class="feedback"></div>
|
||||
</div>
|
||||
|
||||
<!-- Exercise 10: Fill in the gap (article) -->
|
||||
<div class="exercise">
|
||||
<h3>10. Choose the correct answer</h3>
|
||||
<p class="question">I have ___ apple.</p>
|
||||
<div class="options">
|
||||
<label class="option"><input type="radio" name="ex10" value="false"> a</label>
|
||||
<label class="option"><input type="radio" name="ex10" value="true"> an</label>
|
||||
<label class="option"><input type="radio" name="ex10" value="false"> the</label>
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="checkExercise(this)" data-i18n="btn-check">Check</button>
|
||||
<div class="feedback"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p><p><p><p>© 2026 <a href="index.html">English Easy</a>. Made for learning English.</p>copy; 2026 <a href="index.html" data-i18n="footer-by">English Easy</a>. <span data-i18n="footer-text">Made for learning English.</span></p>copy; 2026 <a href="index.html" data-i18n="footer-by">English Easy</a>. <span data-i18n="footer-text">Made for learning English.</span></p>copy; 2026 <a href="index.html" data-i18n="footer-by">English Easy</a>. <span data-i18n="footer-text">Made for learning English.</span></p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/lang.js"></script>
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
122
grammar.html
Normal file
122
grammar.html
Normal file
@ -0,0 +1,122 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Grammar — English Easy</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="stars-bg" id="stars-bg"></div>
|
||||
<header>
|
||||
<div class="header-inner">
|
||||
<a href="index.html" class="logo">English <span>Easy</span></a>
|
||||
<button class="menu-toggle" aria-label="Menu">☰</button>
|
||||
<nav>
|
||||
<ul class="nav-list">
|
||||
<li><a href="index.html" data-i18n="nav-home">Home</a></li>
|
||||
<li><a href="vocabulary.html" data-i18n="nav-vocabulary">Vocabulary</a></li>
|
||||
<li><a href="grammar.html" data-i18n="nav-grammar">Grammar</a></li>
|
||||
<li><a href="pronunciation.html" data-i18n="nav-pronunciation">Pronunciation</a></li>
|
||||
<li><a href="exercises.html" data-i18n="nav-exercises">Exercises</a></li>
|
||||
<li><a href="tests.html" data-i18n="nav-tests">Tests</a></li>
|
||||
<li><a href="reading.html" data-i18n="nav-reading">Reading</a></li>
|
||||
<li><a href="progress.html" data-i18n="nav-progress">Progress</a></li>
|
||||
<li><a href="contact.html" data-i18n="nav-contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="page-header">
|
||||
<div class="container">
|
||||
<h1 data-i18n="page-grammar-title">Grammar</h1>
|
||||
<p data-i18n="page-grammar-desc">Simple explanations of English grammar with formulas and examples.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="grammar-grid">
|
||||
<div class="grammar-card">
|
||||
<h3 data-i18n="grammar-present-simple">Present Simple</h3>
|
||||
<p data-i18n="grammar-present-simple-desc">Present Simple is used for habits, routines, and general facts.</p>
|
||||
<div class="formula">Subject + V / V+s (he/she/it)</div>
|
||||
<ul class="examples">
|
||||
<li>I study English every day.</li>
|
||||
<li>She likes music.</li>
|
||||
<li>They play football on Sundays.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="grammar-card">
|
||||
<h3 data-i18n="grammar-past-simple">Past Simple</h3>
|
||||
<p data-i18n="grammar-past-simple-desc">Past Simple is used for completed actions in the past.</p>
|
||||
<div class="formula">Subject + V-ed (regular) / V2 (irregular)</div>
|
||||
<ul class="examples">
|
||||
<li>I visited my grandmother yesterday.</li>
|
||||
<li>She watched a film last night.</li>
|
||||
<li>They went to the park.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="grammar-card">
|
||||
<h3 data-i18n="grammar-future-simple">Future Simple (will)</h3>
|
||||
<p data-i18n="grammar-future-simple-desc">Future Simple is used for predictions, promises, and spontaneous decisions.</p>
|
||||
<div class="formula">Subject + will + V</div>
|
||||
<ul class="examples">
|
||||
<li>I will call you tomorrow.</li>
|
||||
<li>She will buy a new phone.</li>
|
||||
<li>It will rain in the evening.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="grammar-card">
|
||||
<h3 data-i18n="grammar-articles">Articles: a / an / the</h3>
|
||||
<p data-i18n="grammar-articles-desc">Use <strong>a</strong> before consonant sounds, <strong>an</strong> before vowel sounds, and <strong>the</strong> for specific things.</p>
|
||||
<div class="formula">a + consonant sound | an + vowel sound | the + specific</div>
|
||||
<ul class="examples">
|
||||
<li>I have <strong>a</strong> book.</li>
|
||||
<li>She eats <strong>an</strong> apple.</li>
|
||||
<li><strong>The</strong> sun is bright today.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="grammar-card">
|
||||
<h3 data-i18n="grammar-pronouns">Pronouns</h3>
|
||||
<p data-i18n="grammar-pronouns-desc">Pronouns replace nouns. They can be subject or object pronouns.</p>
|
||||
<div class="formula">I / you / he / she / it / we / they (subject)</div>
|
||||
<ul class="examples">
|
||||
<li><strong>She</strong> is a student.</li>
|
||||
<li><strong>We</strong> like ice cream.</li>
|
||||
<li>I see <strong>them</strong> every day.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="grammar-card">
|
||||
<h3 data-i18n="grammar-prepositions">Prepositions</h3>
|
||||
<p data-i18n="grammar-prepositions-desc">Prepositions show relationships of time, place, and direction.</p>
|
||||
<div class="formula">in / on / at / under / next to / between</div>
|
||||
<ul class="examples">
|
||||
<li>The book is <strong>on</strong> the table.</li>
|
||||
<li>She is <strong>at</strong> school.</li>
|
||||
<li>I wake up <strong>at</strong> 7 o'clock.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p>© 2026 <a href="index.html" data-i18n="footer-by">English Easy</a>. <span data-i18n="footer-text">Made for learning English.</span></p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/lang.js"></script>
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
144
index.html
Normal file
144
index.html
Normal file
@ -0,0 +1,144 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>English Easy — Learn English Step by Step</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="stars-bg" id="stars-bg"></div>
|
||||
<header>
|
||||
<div class="header-inner">
|
||||
<a href="index.html" class="logo">English <span>Easy</span></a>
|
||||
<button class="menu-toggle" aria-label="Menu">☰</button>
|
||||
<nav>
|
||||
<ul class="nav-list">
|
||||
<li><a href="index.html" data-i18n="nav-home">Home</a></li>
|
||||
<li><a href="vocabulary.html" data-i18n="nav-vocabulary">Vocabulary</a></li>
|
||||
<li><a href="grammar.html" data-i18n="nav-grammar">Grammar</a></li>
|
||||
<li><a href="pronunciation.html" data-i18n="nav-pronunciation">Pronunciation</a></li>
|
||||
<li><a href="exercises.html" data-i18n="nav-exercises">Exercises</a></li>
|
||||
<li><a href="tests.html" data-i18n="nav-tests">Tests</a></li>
|
||||
<li><a href="reading.html" data-i18n="nav-reading">Reading</a></li>
|
||||
<li><a href="progress.html" data-i18n="nav-progress">Progress</a></li>
|
||||
<li><a href="contact.html" data-i18n="nav-contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<div class="hero-badge" data-i18n="hero-badge">⚡ Welcome to Hogwarts School of English</div>
|
||||
<h1 data-i18n="hero-title">Master the <span class="highlight">Magic</span> of English</h1>
|
||||
<p data-i18n="hero-subtitle">Discover vocabulary, grammar, exercises, reading, and tests — your magical journey to speaking English begins now.</p>
|
||||
<div class="hero-buttons">
|
||||
<a href="vocabulary.html" class="btn" data-i18n="btn-begin">🔮 Begin Your Journey</a>
|
||||
<a href="exercises.html" class="btn btn-outline" data-i18n="btn-try">✨ Try a Spell (Exercise)</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h2 class="section-title" data-i18n="section-subjects-title">Your <span>Magical</span> Subjects</h2>
|
||||
<p class="section-subtitle" data-i18n="section-subjects-subtitle">Like a wizard at Hogwarts, master every branch of English magic.</p>
|
||||
<div class="cards-grid">
|
||||
<div class="card">
|
||||
<div class="card-icon">📖</div>
|
||||
<h3 data-i18n="card-vocab-title">Vocabulary</h3>
|
||||
<p data-i18n="card-vocab-desc">Learn new words with translations and example sentences. Over 20 words to start with!</p>
|
||||
<a href="vocabulary.html" class="btn btn-primary" data-i18n="card-vocab-btn">Explore Words</a>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-icon">📝</div>
|
||||
<h3 data-i18n="card-grammar-title">Grammar</h3>
|
||||
<p data-i18n="card-grammar-desc">Simple explanations of English grammar with formulas and examples. Present Simple, Past Simple, and more.</p>
|
||||
<a href="grammar.html" class="btn btn-primary" data-i18n="card-grammar-btn">Study Grammar</a>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-icon">💪</div>
|
||||
<h3 data-i18n="card-exercises-title">Exercises</h3>
|
||||
<p data-i18n="card-exercises-desc">Practice what you learn with fun exercises. Choose answers, fill gaps, and translate sentences.</p>
|
||||
<a href="exercises.html" class="btn btn-primary" data-i18n="card-exercises-btn">Practice Now</a>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-icon">📊</div>
|
||||
<h3 data-i18n="card-tests-title">Tests</h3>
|
||||
<p data-i18n="card-tests-desc">Check your knowledge with a full test. 10 questions to test your vocabulary, grammar, and reading.</p>
|
||||
<a href="tests.html" class="btn btn-primary" data-i18n="card-tests-btn">Take a Test</a>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-icon">📚</div>
|
||||
<h3 data-i18n="card-reading-title">Reading</h3>
|
||||
<p data-i18n="card-reading-desc">Read short and simple texts in English. Each text has questions to check your understanding.</p>
|
||||
<a href="reading.html" class="btn btn-primary" data-i18n="card-reading-btn">Start Reading</a>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-icon">🗣️</div>
|
||||
<h3 data-i18n="card-pronunciation-title">Pronunciation</h3>
|
||||
<p data-i18n="card-pronunciation-desc">Listen to words and phrases spoken aloud. Practice your pronunciation and improve your speaking skills.</p>
|
||||
<a href="pronunciation.html" class="btn btn-primary" data-i18n="card-pronunciation-btn">Start Speaking</a>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-icon">📊</div>
|
||||
<h3 data-i18n="card-progress-title">My Progress</h3>
|
||||
<p data-i18n="card-progress-desc">Track your XP, level, and completed activities. Watch yourself improve from Beginner to Advanced!</p>
|
||||
<a href="progress.html" class="btn btn-primary" data-i18n="card-progress-btn">View Progress</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section motivation-banner" style="padding:0;background:none;">
|
||||
<div class="container">
|
||||
<div class="motivation-banner">
|
||||
<h3 data-i18n="motivation-title">✨ The Chamber of Progress Awaits</h3>
|
||||
<p data-i18n="motivation-desc">Every great wizard started with their first spell. Begin your English magic today!</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section-alt">
|
||||
<div class="container">
|
||||
<h2 class="section-title" data-i18n="section-houses-title">The Four <span>Houses</span></h2>
|
||||
<p class="section-subtitle" data-i18n="section-houses-subtitle">Choose your path — every house has its own strength in learning English.</p>
|
||||
<div class="houses-grid">
|
||||
<div class="card house-card house-gryffindor">
|
||||
<div class="house-crest">🦁</div>
|
||||
<h3 data-i18n="house-gryffindor-title">Gryffindor</h3>
|
||||
<p data-i18n="house-gryffindor-desc">Brave and bold — take risks with new words and speak English without fear. Perfect for conversation practice!</p>
|
||||
</div>
|
||||
<div class="card house-card house-slytherin">
|
||||
<div class="house-crest">🐍</div>
|
||||
<h3 data-i18n="house-slytherin-title">Slytherin</h3>
|
||||
<p data-i18n="house-slytherin-desc">Ambitious and determined — master grammar rules and achieve high scores on every test.</p>
|
||||
</div>
|
||||
<div class="card house-card house-ravenclaw">
|
||||
<div class="house-crest">🦅</div>
|
||||
<h3 data-i18n="house-ravenclaw-title">Ravenclaw</h3>
|
||||
<p data-i18n="house-ravenclaw-desc">Wise and curious — dive deep into reading texts and expand your vocabulary with every lesson.</p>
|
||||
</div>
|
||||
<div class="card house-card house-hufflepuff">
|
||||
<div class="house-crest">🦡</div>
|
||||
<h3 data-i18n="house-hufflepuff-title">Hufflepuff</h3>
|
||||
<p data-i18n="house-hufflepuff-desc">Loyal and patient — practice daily, build your streak, and grow step by step.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p>© 2026 <a href="index.html" data-i18n="footer-by">English Easy</a>. <span data-i18n="footer-text">Made for learning English.</span></p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/lang.js"></script>
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
434
js/lang.js
Normal file
434
js/lang.js
Normal file
@ -0,0 +1,434 @@
|
||||
var LANG = {};
|
||||
|
||||
LANG.en = {
|
||||
// Nav
|
||||
'nav-home': 'Home',
|
||||
'nav-vocabulary': 'Vocabulary',
|
||||
'nav-grammar': 'Grammar',
|
||||
'nav-pronunciation': 'Pronunciation',
|
||||
'nav-exercises': 'Exercises',
|
||||
'nav-tests': 'Tests',
|
||||
'nav-reading': 'Reading',
|
||||
'nav-progress': 'Progress',
|
||||
'nav-contact': 'Contact',
|
||||
|
||||
// Hero
|
||||
'hero-badge': '⚡ Welcome to Hogwarts School of English',
|
||||
'hero-title': 'Master the <span class="highlight">Magic</span> of English',
|
||||
'hero-subtitle': 'Discover vocabulary, grammar, exercises, reading, and tests — your magical journey to speaking English begins now.',
|
||||
'btn-begin': '🔮 Begin Your Journey',
|
||||
'btn-try': '✨ Try a Spell (Exercise)',
|
||||
|
||||
// Index sections
|
||||
'section-subjects-title': 'Your <span>Magical</span> Subjects',
|
||||
'section-subjects-subtitle': 'Like a wizard at Hogwarts, master every branch of English magic.',
|
||||
|
||||
'card-vocab-title': 'Vocabulary',
|
||||
'card-vocab-desc': 'Learn new words with translations and example sentences. Over 20 words to start with!',
|
||||
'card-vocab-btn': 'Explore Words',
|
||||
'card-grammar-title': 'Grammar',
|
||||
'card-grammar-desc': 'Simple explanations of English grammar with formulas and examples.',
|
||||
'card-grammar-btn': 'Study Grammar',
|
||||
'card-exercises-title': 'Exercises',
|
||||
'card-exercises-desc': 'Practice what you learn with fun exercises. Choose answers, fill gaps, and translate.',
|
||||
'card-exercises-btn': 'Practice Now',
|
||||
'card-tests-title': 'Tests',
|
||||
'card-tests-desc': 'Check your knowledge with a full test. 10 questions to test your skills.',
|
||||
'card-tests-btn': 'Take a Test',
|
||||
'card-reading-title': 'Reading',
|
||||
'card-reading-desc': 'Read short and simple texts in English. Each text has questions.',
|
||||
'card-reading-btn': 'Start Reading',
|
||||
'card-pronunciation-title': 'Pronunciation',
|
||||
'card-pronunciation-desc': 'Listen to words spoken aloud. Practice and improve your speaking.',
|
||||
'card-pronunciation-btn': 'Start Speaking',
|
||||
'card-progress-title': 'My Progress',
|
||||
'card-progress-desc': 'Track your XP, level, and completed activities. Watch yourself improve!',
|
||||
'card-progress-btn': 'View Progress',
|
||||
|
||||
// Houses
|
||||
'section-houses-title': 'The Four <span>Houses</span>',
|
||||
'section-houses-subtitle': 'Choose your path — every house has its own strength in learning English.',
|
||||
'house-gryffindor-title': 'Gryffindor',
|
||||
'house-gryffindor-desc': 'Brave and bold — take risks with new words and speak English without fear.',
|
||||
'house-slytherin-title': 'Slytherin',
|
||||
'house-slytherin-desc': 'Ambitious and determined — master grammar rules and achieve high scores.',
|
||||
'house-ravenclaw-title': 'Ravenclaw',
|
||||
'house-ravenclaw-desc': 'Wise and curious — dive deep into reading and expand your vocabulary.',
|
||||
'house-hufflepuff-title': 'Hufflepuff',
|
||||
'house-hufflepuff-desc': 'Loyal and patient — practice daily, build your streak, and grow step by step.',
|
||||
|
||||
// Motivation
|
||||
'motivation-title': '✨ The Chamber of Progress Awaits',
|
||||
'motivation-desc': 'Every great wizard started with their first spell. Begin your English magic today!',
|
||||
|
||||
// Page headers
|
||||
'page-vocabulary-title': 'Vocabulary',
|
||||
'page-vocabulary-desc': 'Learn 20+ common English words with translations and examples.',
|
||||
'page-grammar-title': 'Grammar',
|
||||
'page-grammar-desc': 'Simple explanations of English grammar with formulas and examples.',
|
||||
'page-pronunciation-title': 'Pronunciation',
|
||||
'page-pronunciation-desc': 'Listen, repeat, and improve your English pronunciation.',
|
||||
'page-exercises-title': 'Exercises',
|
||||
'page-exercises-desc': 'Practice your English with these fun exercises.',
|
||||
'page-tests-title': 'English Test',
|
||||
'page-tests-desc': 'Test your knowledge with 10 questions. Choose the correct answer for each question.',
|
||||
'page-reading-title': 'Reading',
|
||||
'page-reading-desc': 'Read short texts in English and check your understanding.',
|
||||
'page-progress-title': 'My Progress',
|
||||
'page-progress-desc': 'Track your learning journey and see how much you\'ve achieved.',
|
||||
'page-contact-title': 'Contact Us',
|
||||
'page-contact-desc': 'Have a question or suggestion? Send us a message!',
|
||||
|
||||
// Footer
|
||||
'footer-text': 'Made for learning English.',
|
||||
'footer-by': 'English Easy',
|
||||
|
||||
// Tests
|
||||
'test-check': 'Check Result',
|
||||
'test-result': 'Keep learning and try again!',
|
||||
|
||||
// Contact form
|
||||
'form-name': 'Name',
|
||||
'form-name-placeholder': 'Your name',
|
||||
'form-email': 'Email',
|
||||
'form-email-placeholder': 'your@email.com',
|
||||
'form-message': 'Message',
|
||||
'form-message-placeholder': 'Write your message here...',
|
||||
'form-send': 'Send Message',
|
||||
'form-thankyou': 'Thank you! Your message has been received.',
|
||||
|
||||
// Pronunciation tips
|
||||
'pron-tip': '💡 Tip: Click <strong>Listen</strong> to hear the word, then repeat it out loud. Use <strong>Slow</strong> to hear it spoken slowly. Practice every day!',
|
||||
'pron-common-words': 'Common <span>Words</span>',
|
||||
'pron-common-phrases': 'Common <span>Phrases</span>',
|
||||
'pron-tips': 'Pronunciation <span>Tips</span>',
|
||||
'pron-dictation': 'Dictation <span>Practice</span>',
|
||||
'pron-dictation-desc': 'Listen to the word, then type what you hear.',
|
||||
'pron-th-sound': '👄 The "th" Sound',
|
||||
'pron-th-desc': 'Put your tongue between your teeth and blow air.',
|
||||
'pron-r-sound': '🗣️ The "r" Sound',
|
||||
'pron-r-desc': 'In English, the tongue does not touch the top of the mouth.',
|
||||
'pron-stress': '🎵 Word Stress',
|
||||
'pron-stress-desc': 'English words have one stressed syllable. Say it louder and longer.',
|
||||
'pron-listen': '🔊 Listen',
|
||||
'pron-slow': '🐢 Slow',
|
||||
'btn-check': 'Check',
|
||||
'btn-all': 'All',
|
||||
'btn-school': 'School',
|
||||
'btn-family': 'Family',
|
||||
'btn-food': 'Food',
|
||||
'btn-daily': 'Daily Routine',
|
||||
'btn-hobbies': 'Hobbies',
|
||||
'vocab-english': 'English',
|
||||
'vocab-translation': 'Translation',
|
||||
'vocab-example': 'Example Sentence',
|
||||
|
||||
// Grammar
|
||||
'grammar-present-simple': 'Present Simple',
|
||||
'grammar-present-simple-desc': 'Present Simple is used for habits, routines, and general facts.',
|
||||
'grammar-past-simple': 'Past Simple',
|
||||
'grammar-past-simple-desc': 'Past Simple is used for completed actions in the past.',
|
||||
'grammar-future-simple': 'Future Simple (will)',
|
||||
'grammar-future-simple-desc': 'Future Simple is used for predictions, promises, and spontaneous decisions.',
|
||||
'grammar-articles': 'Articles: a / an / the',
|
||||
'grammar-articles-desc': 'Use <strong>a</strong> before consonant sounds, <strong>an</strong> before vowel sounds, and <strong>the</strong> for specific things.',
|
||||
'grammar-pronouns': 'Pronouns',
|
||||
'grammar-pronouns-desc': 'Pronouns replace nouns. They can be subject or object pronouns.',
|
||||
'grammar-prepositions': 'Prepositions',
|
||||
'grammar-prepositions-desc': 'Prepositions show relationships of time, place, and direction.',
|
||||
};
|
||||
|
||||
LANG.ru = {
|
||||
'nav-home': 'Главная',
|
||||
'nav-vocabulary': 'Словарь',
|
||||
'nav-grammar': 'Грамматика',
|
||||
'nav-pronunciation': 'Произношение',
|
||||
'nav-exercises': 'Упражнения',
|
||||
'nav-tests': 'Тесты',
|
||||
'nav-reading': 'Чтение',
|
||||
'nav-progress': 'Прогресс',
|
||||
'nav-contact': 'Контакты',
|
||||
|
||||
'hero-badge': '⚡ Добро пожаловать в Школу Английского Хогвартс',
|
||||
'hero-title': 'Освой <span class="highlight">Магию</span> Английского',
|
||||
'hero-subtitle': 'Словарь, грамматика, упражнения, чтение и тесты — твоё волшебное путешествие в мир английского начинается сейчас.',
|
||||
'btn-begin': '🔮 Начать Путешествие',
|
||||
'btn-try': '✨ Попробовать Заклинание',
|
||||
|
||||
'section-subjects-title': 'Твои <span>Волшебные</span> Предметы',
|
||||
'section-subjects-subtitle': 'Как волшебник в Хогвартсе, освой каждую ветвь английской магии.',
|
||||
|
||||
'card-vocab-title': 'Словарь',
|
||||
'card-vocab-desc': 'Учи новые слова с переводом и примерами. Более 20 слов для начала!',
|
||||
'card-vocab-btn': 'Изучить Слова',
|
||||
'card-grammar-title': 'Грамматика',
|
||||
'card-grammar-desc': 'Простые объяснения английской грамматики с формулами и примерами.',
|
||||
'card-grammar-btn': 'Изучить',
|
||||
'card-exercises-title': 'Упражнения',
|
||||
'card-exercises-desc': 'Практикуйся с весёлыми упражнениями. Выбирай ответы и переводи предложения.',
|
||||
'card-exercises-btn': 'Тренироваться',
|
||||
'card-tests-title': 'Тесты',
|
||||
'card-tests-desc': 'Проверь свои знания. 10 вопросов, чтобы оценить твой уровень.',
|
||||
'card-tests-btn': 'Пройти Тест',
|
||||
'card-reading-title': 'Чтение',
|
||||
'card-reading-desc': 'Читай короткие тексты на английском. К каждому есть вопросы.',
|
||||
'card-reading-btn': 'Начать Чтение',
|
||||
'card-pronunciation-title': 'Произношение',
|
||||
'card-pronunciation-desc': 'Слушай слова вслух. Тренируй произношение и улучшай речь.',
|
||||
'card-pronunciation-btn': 'Начать Говорить',
|
||||
'card-progress-title': 'Мой Прогресс',
|
||||
'card-progress-desc': 'Отслеживай XP, уровень и выполненные задания. Смотри, как растёшь!',
|
||||
'card-progress-btn': 'Смотреть',
|
||||
|
||||
'section-houses-title': 'Четыре <span>Факультета</span>',
|
||||
'section-houses-subtitle': 'Выбери свой путь — у каждого факультета своя сила в изучении английского.',
|
||||
'house-gryffindor-title': 'Гриффиндор',
|
||||
'house-gryffindor-desc': 'Храбрые и смелые — рискуй с новыми словами и говори по-английски без страха.',
|
||||
'house-slytherin-title': 'Слизерин',
|
||||
'house-slytherin-desc': 'Амбициозные и решительные — осваивай грамматику и достигай высоких результатов.',
|
||||
'house-ravenclaw-title': 'Когтевран',
|
||||
'house-ravenclaw-desc': 'Мудрые и любознательные — читай тексты и расширяй словарный запас.',
|
||||
'house-hufflepuff-title': 'Пуффендуй',
|
||||
'house-hufflepuff-desc': 'Верные и терпеливые — занимайся каждый день и расти шаг за шагом.',
|
||||
|
||||
'motivation-title': '✨ Зал Прогресса Ждёт',
|
||||
'motivation-desc': 'Каждый великий волшебник начинал с первого заклинания. Начни свою английскую магию сегодня!',
|
||||
|
||||
'page-vocabulary-title': 'Словарь',
|
||||
'page-vocabulary-desc': 'Выучи 20+ популярных английских слов с переводом и примерами.',
|
||||
'page-grammar-title': 'Грамматика',
|
||||
'page-grammar-desc': 'Простые объяснения английской грамматики с формулами и примерами.',
|
||||
'page-pronunciation-title': 'Произношение',
|
||||
'page-pronunciation-desc': 'Слушай, повторяй и улучшай своё английское произношение.',
|
||||
'page-exercises-title': 'Упражнения',
|
||||
'page-exercises-desc': 'Тренируй английский с помощью интересных упражнений.',
|
||||
'page-tests-title': 'Тест по Английскому',
|
||||
'page-tests-desc': 'Проверь знания: 10 вопросов. Выбери правильный ответ на каждый.',
|
||||
'page-reading-title': 'Чтение',
|
||||
'page-reading-desc': 'Читай короткие тексты на английском и проверяй понимание.',
|
||||
'page-progress-title': 'Мой Прогресс',
|
||||
'page-progress-desc': 'Отслеживай свой путь обучения и смотри, сколько ты достиг.',
|
||||
'page-contact-title': 'Свяжитесь с Нами',
|
||||
'page-contact-desc': 'Есть вопрос или предложение? Отправьте нам сообщение!',
|
||||
|
||||
'footer-text': 'Сделано для изучения английского.',
|
||||
'footer-by': 'English Easy',
|
||||
|
||||
'test-check': 'Проверить',
|
||||
'test-result': 'Продолжай учиться и пробуй снова!',
|
||||
|
||||
'form-name': 'Имя',
|
||||
'form-name-placeholder': 'Ваше имя',
|
||||
'form-email': 'Email',
|
||||
'form-email-placeholder': 'ваш@email.com',
|
||||
'form-message': 'Сообщение',
|
||||
'form-message-placeholder': 'Напишите сообщение...',
|
||||
'form-send': 'Отправить',
|
||||
'form-thankyou': 'Спасибо! Ваше сообщение получено.',
|
||||
|
||||
'pron-tip': '💡 Совет: Нажми <strong>Слушать</strong>, чтобы услышать слово, затем повтори вслух. Используй <strong>Медленно</strong>, чтобы услышать медленное произношение.',
|
||||
'pron-common-words': 'Популярные <span>Слова</span>',
|
||||
'pron-common-phrases': 'Популярные <span>Фразы</span>',
|
||||
'pron-tips': 'Советы по <span>Произношению</span>',
|
||||
'pron-dictation': 'Диктант',
|
||||
'pron-dictation-desc': 'Послушай слово и напиши, что услышал.',
|
||||
'pron-th-sound': '👄 Звук "th"',
|
||||
'pron-th-desc': 'Помести язык между зубами и выдохни воздух.',
|
||||
'pron-r-sound': '🗣️ Звук "r"',
|
||||
'pron-r-desc': 'В английском язык не касается нёба.',
|
||||
'pron-stress': '🎵 Ударение',
|
||||
'pron-stress-desc': 'В английских словах один ударный слог. Произноси его громче и длиннее.',
|
||||
'pron-listen': '🔊 Слушать',
|
||||
'pron-slow': '🐢 Медленно',
|
||||
'btn-check': 'Проверить',
|
||||
'btn-all': 'Все',
|
||||
'btn-school': 'Школа',
|
||||
'btn-family': 'Семья',
|
||||
'btn-food': 'Еда',
|
||||
'btn-daily': 'Распорядок дня',
|
||||
'btn-hobbies': 'Хобби',
|
||||
'vocab-english': 'Английский',
|
||||
'vocab-translation': 'Перевод',
|
||||
'vocab-example': 'Пример',
|
||||
|
||||
'grammar-present-simple': 'Настоящее Простое',
|
||||
'grammar-present-simple-desc': 'Present Simple используется для привычек, рутины и общих фактов.',
|
||||
'grammar-past-simple': 'Прошедшее Простое',
|
||||
'grammar-past-simple-desc': 'Past Simple используется для завершённых действий в прошлом.',
|
||||
'grammar-future-simple': 'Будущее Простое (will)',
|
||||
'grammar-future-simple-desc': 'Future Simple используется для предсказаний, обещаний и спонтанных решений.',
|
||||
'grammar-articles': 'Артикли: a / an / the',
|
||||
'grammar-articles-desc': 'Используй <strong>a</strong> перед согласными, <strong>an</strong> перед гласными, <strong>the</strong> для конкретных вещей.',
|
||||
'grammar-pronouns': 'Местоимения',
|
||||
'grammar-pronouns-desc': 'Местоимения заменяют существительные.',
|
||||
'grammar-prepositions': 'Предлоги',
|
||||
'grammar-prepositions-desc': 'Предлоги показывают отношения времени, места и направления.',
|
||||
};
|
||||
|
||||
LANG.kk = {
|
||||
'nav-home': 'Басты бет',
|
||||
'nav-vocabulary': 'Сөздік',
|
||||
'nav-grammar': 'Грамматика',
|
||||
'nav-pronunciation': 'Айтылуы',
|
||||
'nav-exercises': 'Жаттығулар',
|
||||
'nav-tests': 'Тесттер',
|
||||
'nav-reading': 'Оқу',
|
||||
'nav-progress': 'Прогресс',
|
||||
'nav-contact': 'Байланыс',
|
||||
|
||||
'hero-badge': '⚡ Хогвартс Ағылшын Мектебіне Қош Келдіңіз',
|
||||
'hero-title': 'Ағылшынның <span class="highlight">Сиқырын</span> Меңгер',
|
||||
'hero-subtitle': 'Сөздік, грамматика, жаттығулар, оқу және тесттер — ағылшын тілінде сөйлеуге арналған сиқырлы саяхатың басталады.',
|
||||
'btn-begin': '🔮 Саяхатты Бастау',
|
||||
'btn-try': '✨ Сиқырды Қолданып Көр',
|
||||
|
||||
'section-subjects-title': 'Сенің <span>Сиқырлы</span> Пәндерің',
|
||||
'section-subjects-subtitle': 'Хогвартстағы сиқыршы сияқты, ағылшын сиқырының әр саласын меңгер.',
|
||||
|
||||
'card-vocab-title': 'Сөздік',
|
||||
'card-vocab-desc': 'Жаңа сөздерді аудармасымен және мысалдарымен үйрен. Бастау үшін 20+ сөз!',
|
||||
'card-vocab-btn': 'Сөздерді Үйрен',
|
||||
'card-grammar-title': 'Грамматика',
|
||||
'card-grammar-desc': 'Ағылшын грамматикасының қарапайым түсіндірмесі формулалармен және мысалдармен.',
|
||||
'card-grammar-btn': 'Грамматиканы Оқу',
|
||||
'card-exercises-title': 'Жаттығулар',
|
||||
'card-exercises-desc': 'Қызықты жаттығулармен тәжірибе жаса. Жауаптарды таңда және аудар.',
|
||||
'card-exercises-btn': 'Жаттығу',
|
||||
'card-tests-title': 'Тесттер',
|
||||
'card-tests-desc': 'Біліміңді тексер. Деңгейіңді бағалау үшін 10 сұрақ.',
|
||||
'card-tests-btn': 'Тест Тапсыру',
|
||||
'card-reading-title': 'Оқу',
|
||||
'card-reading-desc': 'Ағылшынша қысқа мәтіндерді оқы. Әр мәтін бойынша сұрақтар бар.',
|
||||
'card-reading-btn': 'Оқуды Бастау',
|
||||
'card-pronunciation-title': 'Айтылуы',
|
||||
'card-pronunciation-desc': 'Сөздерді дауыстап тыңда. Айтылуыңды жаттықтырып, сөйлеуіңді жақсарт.',
|
||||
'card-pronunciation-btn': 'Сөйлеуді Бастау',
|
||||
'card-progress-title': 'Менің Прогрессім',
|
||||
'card-progress-desc': 'XP, деңгей және орындалған тапсырмаларды қадағала. Өсіп келе жатқаныңды көр!',
|
||||
'card-progress-btn': 'Прогресті Көру',
|
||||
|
||||
'section-houses-title': 'Төрт <span>Факультет</span>',
|
||||
'section-houses-subtitle': 'Өз жолыңды таңда — әр факультеттің ағылшын үйренуде өз күші бар.',
|
||||
'house-gryffindor-title': 'Гриффиндор',
|
||||
'house-gryffindor-desc': 'Батыл және қайсар — жаңа сөздермен тәуекел ет және ағылшынша қорықпай сөйле.',
|
||||
'house-slytherin-title': 'Слизерин',
|
||||
'house-slytherin-desc': 'Амбициялы және табанды — грамматиканы меңгер және жоғары нәтижеге жет.',
|
||||
'house-ravenclaw-title': 'Когтевран',
|
||||
'house-ravenclaw-desc': 'Дана және білімқұмар — мәтіндерді оқы және сөздік қорыңды кеңейт.',
|
||||
'house-hufflepuff-title': 'Хаффлпафф',
|
||||
'house-hufflepuff-desc': 'Адал және сабырлы — күнделікті жаттық, streak-іңді құр және қадаммен өс.',
|
||||
|
||||
'motivation-title': '✨ Прогресс Залы Күтіп Тұр',
|
||||
'motivation-desc': 'Әр ұлы сиқыршы өзінің бірінші сиқырынан бастады. Бүгін ағылшын сиқырыңды баста!',
|
||||
|
||||
'page-vocabulary-title': 'Сөздік',
|
||||
'page-vocabulary-desc': '20+ танымал ағылшын сөздерін аудармамен және мысалдармен үйрен.',
|
||||
'page-grammar-title': 'Грамматика',
|
||||
'page-grammar-desc': 'Ағылшын грамматикасының қарапайым түсіндірмелері формулалармен және мысалдармен.',
|
||||
'page-pronunciation-title': 'Айтылуы',
|
||||
'page-pronunciation-desc': 'Тыңда, қайтала және ағылшын айтылуыңды жақсарт.',
|
||||
'page-exercises-title': 'Жаттығулар',
|
||||
'page-exercises-desc': 'Қызықты жаттығулармен ағылшын тілін жаттықтыр.',
|
||||
'page-tests-title': 'Ағылшын Тесті',
|
||||
'page-tests-desc': 'Біліміңді тексер: 10 сұрақ. Әр сұраққа дұрыс жауапты таңда.',
|
||||
'page-reading-title': 'Оқу',
|
||||
'page-reading-desc': 'Ағылшынша қысқа мәтіндерді оқы және түсінгеніңді тексер.',
|
||||
'page-progress-title': 'Менің Прогрессім',
|
||||
'page-progress-desc': 'Оқу саяхатыңды бақыла және қанша жеткеніңді көр.',
|
||||
'page-contact-title': 'Бізбен Байланысу',
|
||||
'page-contact-desc': 'Сұрағың немесе ұсынысың бар ма? Бізге хабарлама жібер!',
|
||||
|
||||
'footer-text': 'Ағылшын үйрену үшін жасалған.',
|
||||
'footer-by': 'English Easy',
|
||||
|
||||
'test-check': 'Тексеру',
|
||||
'test-result': 'Оқуды жалғастыр және қайтадан тырыс!',
|
||||
|
||||
'form-name': 'Атыңыз',
|
||||
'form-name-placeholder': 'Атыңыз',
|
||||
'form-email': 'Email',
|
||||
'form-email-placeholder': 'сіздің@email.kz',
|
||||
'form-message': 'Хабарлама',
|
||||
'form-message-placeholder': 'Хабарламаңызды жазыңыз...',
|
||||
'form-send': 'Жіберу',
|
||||
'form-thankyou': 'Рахмет! Сіздің хабарламаңыз қабылданды.',
|
||||
|
||||
'pron-tip': '💡 Кеңес: <strong>Тыңдау</strong> түймесін басып сөзді есті, содан кейін дауыстап қайтала. <strong>Баяу</strong> түймесі баяу айтылуды естуге көмектеседі.',
|
||||
'pron-common-words': 'Танымал <span>Сөздер</span>',
|
||||
'pron-common-phrases': 'Танымал <span>Фразалар</span>',
|
||||
'pron-tips': 'Айтылу <span>Кеңестері</span>',
|
||||
'pron-dictation': 'Диктант',
|
||||
'pron-dictation-desc': 'Сөзді тыңда және естігеніңді жаз.',
|
||||
'pron-th-sound': '👄 "th" Дыбысы',
|
||||
'pron-th-desc': 'Тіліңді тістеріңнің арасына салып, ауаны үрле.',
|
||||
'pron-r-sound': '🗣️ "r" Дыбысы',
|
||||
'pron-r-desc': 'Ағылшын тілінде тіл таңдайға тимейді.',
|
||||
'pron-stress': '🎵 Сөз Екпіні',
|
||||
'pron-stress-desc': 'Ағылшын сөздерінде бір екпінді буын бар. Оны қаттырақ және ұзағырақ айт.',
|
||||
'pron-listen': '🔊 Тыңдау',
|
||||
'pron-slow': '🐢 Баяу',
|
||||
'btn-check': 'Тексеру',
|
||||
'btn-all': 'Барлығы',
|
||||
'btn-school': 'Мектеп',
|
||||
'btn-family': 'Отбасы',
|
||||
'btn-food': 'Тамақ',
|
||||
'btn-daily': 'Күнделікті режим',
|
||||
'btn-hobbies': 'Хобби',
|
||||
'vocab-english': 'Ағылшын',
|
||||
'vocab-translation': 'Аударма',
|
||||
'vocab-example': 'Мысал',
|
||||
|
||||
'grammar-present-simple': 'Қазіргі Жай Шақ',
|
||||
'grammar-present-simple-desc': 'Present Simple әдеттер, күнделікті істер және жалпы фактілер үшін қолданылады.',
|
||||
'grammar-past-simple': 'Өткен Жай Шақ',
|
||||
'grammar-past-simple-desc': 'Past Simple өткенде аяқталған әрекеттер үшін қолданылады.',
|
||||
'grammar-future-simple': 'Келер Жай Шақ (will)',
|
||||
'grammar-future-simple-desc': 'Future Simple болжамдар, уәделер және кенеттен шешімдер үшін қолданылады.',
|
||||
'grammar-articles': 'Артикльдер: a / an / the',
|
||||
'grammar-articles-desc': '<strong>a</strong> дауыссыз дыбыстар алдында, <strong>an</strong> дауысты дыбыстар алдында, <strong>the</strong> нақты заттар үшін.',
|
||||
'grammar-pronouns': 'Есімдіктер',
|
||||
'grammar-pronouns-desc': 'Есімдіктер зат есімдердің орнына қолданылады.',
|
||||
'grammar-prepositions': 'Предлогтар',
|
||||
'grammar-prepositions-desc': 'Предлогтар уақыт, орын және бағыт қатынасын көрсетеді.',
|
||||
};
|
||||
|
||||
// Current language
|
||||
var currentLang = localStorage.getItem('english_easy_lang') || 'en';
|
||||
|
||||
function setLanguage(lang) {
|
||||
if (!LANG[lang]) return;
|
||||
currentLang = lang;
|
||||
localStorage.setItem('english_easy_lang', lang);
|
||||
|
||||
// Update all data-i18n elements
|
||||
var elements = document.querySelectorAll('[data-i18n]');
|
||||
elements.forEach(function(el) {
|
||||
var key = el.getAttribute('data-i18n');
|
||||
if (LANG[lang][key]) {
|
||||
el.innerHTML = LANG[lang][key];
|
||||
}
|
||||
});
|
||||
|
||||
// Update placeholders
|
||||
var placeholders = document.querySelectorAll('[data-i18n-placeholder]');
|
||||
placeholders.forEach(function(el) {
|
||||
var key = el.getAttribute('data-i18n-placeholder');
|
||||
if (LANG[lang][key]) {
|
||||
el.placeholder = LANG[lang][key];
|
||||
}
|
||||
});
|
||||
|
||||
// Update lang switcher UI
|
||||
var btns = document.querySelectorAll('.lang-btn');
|
||||
btns.forEach(function(btn) {
|
||||
btn.classList.toggle('active', btn.getAttribute('data-lang') === lang);
|
||||
});
|
||||
|
||||
// Update html lang attribute
|
||||
document.documentElement.lang = lang;
|
||||
}
|
||||
|
||||
// Init on DOM ready
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
setLanguage(currentLang);
|
||||
});
|
||||
489
js/script.js
Normal file
489
js/script.js
Normal file
@ -0,0 +1,489 @@
|
||||
// Mobile menu toggle
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const toggle = document.querySelector('.menu-toggle');
|
||||
const navList = document.querySelector('.nav-list');
|
||||
|
||||
if (toggle) {
|
||||
toggle.addEventListener('click', function() {
|
||||
navList.classList.toggle('open');
|
||||
});
|
||||
}
|
||||
|
||||
// Close menu on link click
|
||||
const navLinks = document.querySelectorAll('.nav-list a');
|
||||
navLinks.forEach(function(link) {
|
||||
link.addEventListener('click', function() {
|
||||
if (navList) navList.classList.remove('open');
|
||||
});
|
||||
});
|
||||
|
||||
// Highlight active page in nav
|
||||
const currentPage = window.location.pathname.split('/').pop() || 'index.html';
|
||||
navLinks.forEach(function(link) {
|
||||
const href = link.getAttribute('href');
|
||||
if (href === currentPage) {
|
||||
link.classList.add('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// --- Exercises ---
|
||||
function checkExercise(btn) {
|
||||
const exercise = btn.closest('.exercise');
|
||||
const selected = exercise.querySelector('input[type="radio"]:checked');
|
||||
const feedback = exercise.querySelector('.feedback');
|
||||
|
||||
if (!selected) {
|
||||
feedback.textContent = 'Please select an answer!';
|
||||
feedback.className = 'feedback wrong';
|
||||
feedback.style.display = 'block';
|
||||
return;
|
||||
}
|
||||
|
||||
const options = exercise.querySelectorAll('.option');
|
||||
options.forEach(function(opt) {
|
||||
opt.classList.remove('correct', 'wrong');
|
||||
});
|
||||
|
||||
const parent = selected.closest('.option');
|
||||
const isCorrect = selected.value === 'true';
|
||||
|
||||
if (isCorrect) {
|
||||
parent.classList.add('correct');
|
||||
feedback.textContent = 'Correct! +10 XP';
|
||||
feedback.className = 'feedback correct';
|
||||
var exId = exercise.getAttribute('data-ex-id') || exercise.querySelector('h3').textContent.trim();
|
||||
markExerciseDone(exId);
|
||||
} else {
|
||||
parent.classList.add('wrong');
|
||||
feedback.textContent = 'Try again!';
|
||||
feedback.className = 'feedback wrong';
|
||||
options.forEach(function(opt) {
|
||||
const radio = opt.querySelector('input[type="radio"]');
|
||||
if (radio && radio.value === 'true') {
|
||||
opt.classList.add('correct');
|
||||
}
|
||||
});
|
||||
}
|
||||
feedback.style.display = 'block';
|
||||
}
|
||||
|
||||
function checkFill(input) {
|
||||
const exercise = input.closest('.exercise');
|
||||
const answer = input.getAttribute('data-answer');
|
||||
const feedback = exercise.querySelector('.feedback');
|
||||
|
||||
input.classList.remove('correct', 'wrong');
|
||||
|
||||
if (input.value.trim().toLowerCase() === answer.toLowerCase()) {
|
||||
input.classList.add('correct');
|
||||
feedback.textContent = 'Correct! +10 XP';
|
||||
feedback.className = 'feedback correct';
|
||||
var exId = input.closest('.exercise').getAttribute('data-ex-id') || input.closest('.exercise').querySelector('h3').textContent.trim();
|
||||
markExerciseDone(exId);
|
||||
} else {
|
||||
input.classList.add('wrong');
|
||||
feedback.textContent = 'Try again! Correct answer: ' + answer;
|
||||
feedback.className = 'feedback wrong';
|
||||
}
|
||||
feedback.style.display = 'block';
|
||||
}
|
||||
|
||||
function checkTranslate(btn) {
|
||||
const exercise = btn.closest('.exercise');
|
||||
const input = exercise.querySelector('input[type="text"]');
|
||||
const feedback = exercise.querySelector('.feedback');
|
||||
const answer = input.getAttribute('data-answer');
|
||||
|
||||
input.classList.remove('correct', 'wrong');
|
||||
|
||||
if (input.value.trim().toLowerCase() === answer.toLowerCase()) {
|
||||
input.classList.add('correct');
|
||||
feedback.textContent = 'Correct! +10 XP';
|
||||
feedback.className = 'feedback correct';
|
||||
var exId = exercise.getAttribute('data-ex-id') || exercise.querySelector('h3').textContent.trim();
|
||||
markExerciseDone(exId);
|
||||
} else {
|
||||
input.classList.add('wrong');
|
||||
feedback.textContent = 'Try again! Correct answer: ' + answer;
|
||||
feedback.className = 'feedback wrong';
|
||||
}
|
||||
feedback.style.display = 'block';
|
||||
}
|
||||
|
||||
function checkMatch(btn) {
|
||||
const exercise = btn.closest('.exercise');
|
||||
const inputs = exercise.querySelectorAll('input[type="text"]');
|
||||
const feedback = exercise.querySelector('.feedback');
|
||||
let allCorrect = true;
|
||||
|
||||
inputs.forEach(function(input) {
|
||||
const answer = input.getAttribute('data-answer');
|
||||
input.classList.remove('correct', 'wrong');
|
||||
if (input.value.trim().toLowerCase() === answer.toLowerCase()) {
|
||||
input.classList.add('correct');
|
||||
} else {
|
||||
input.classList.add('wrong');
|
||||
allCorrect = false;
|
||||
}
|
||||
});
|
||||
|
||||
if (allCorrect) {
|
||||
feedback.textContent = 'All correct! Great job! +10 XP';
|
||||
feedback.className = 'feedback correct';
|
||||
var exId = exercise.getAttribute('data-ex-id') || exercise.querySelector('h3').textContent.trim();
|
||||
markExerciseDone(exId);
|
||||
} else {
|
||||
feedback.textContent = 'Some answers are wrong. Try again!';
|
||||
feedback.className = 'feedback wrong';
|
||||
}
|
||||
feedback.style.display = 'block';
|
||||
}
|
||||
|
||||
// --- Tests ---
|
||||
function checkTest() {
|
||||
let score = 0;
|
||||
const total = document.querySelectorAll('.test-question').length;
|
||||
const questions = document.querySelectorAll('.test-question');
|
||||
|
||||
questions.forEach(function(q) {
|
||||
const selected = q.querySelector('input[type="radio"]:checked');
|
||||
if (selected && selected.value === 'true') {
|
||||
score++;
|
||||
}
|
||||
});
|
||||
|
||||
markTestDone(score, total);
|
||||
|
||||
var data = getProgress();
|
||||
var info = getLevelProgress(data.xp);
|
||||
|
||||
const resultBox = document.getElementById('test-result');
|
||||
const scoreDisplay = document.getElementById('score');
|
||||
scoreDisplay.textContent = score + '/' + total;
|
||||
resultBox.classList.add('show');
|
||||
|
||||
var detail = document.getElementById('test-detail');
|
||||
if (detail) {
|
||||
detail.innerHTML = 'Level: <strong>' + info.current.label + '</strong> | XP: <strong>' + data.xp + '</strong> | Best: <strong>' + data.bestTestScore + '/' + total + '</strong>';
|
||||
}
|
||||
|
||||
resultBox.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
|
||||
// --- Contact form ---
|
||||
function submitForm(event) {
|
||||
event.preventDefault();
|
||||
const message = document.getElementById('form-message');
|
||||
message.classList.add('show');
|
||||
document.getElementById('contact-form').reset();
|
||||
setTimeout(function() {
|
||||
message.classList.remove('show');
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// --- Pronunciation ---
|
||||
function speakWord(word, rate) {
|
||||
if (!window.speechSynthesis) {
|
||||
alert('Speech synthesis is not supported in your browser.');
|
||||
return;
|
||||
}
|
||||
window.speechSynthesis.cancel();
|
||||
var utterance = new SpeechSynthesisUtterance(word);
|
||||
utterance.lang = 'en-US';
|
||||
utterance.rate = rate || 0.9;
|
||||
utterance.pitch = 1;
|
||||
window.speechSynthesis.speak(utterance);
|
||||
}
|
||||
|
||||
function repeatWord(btn) {
|
||||
var word = btn.getAttribute('data-word');
|
||||
speakWord(word, 0.8);
|
||||
btn.textContent = '🔊 Playing...';
|
||||
markWordListened();
|
||||
setTimeout(function() { btn.textContent = '🔊 Listen'; }, 1500);
|
||||
}
|
||||
|
||||
function speakSlow(btn) {
|
||||
var word = btn.getAttribute('data-word');
|
||||
speakWord(word, 0.4);
|
||||
btn.textContent = '🐢 Slow...';
|
||||
setTimeout(function() { btn.innerHTML = '🐢 Slow'; }, 2000);
|
||||
}
|
||||
|
||||
function checkDictation(input) {
|
||||
var exercise = input.closest('.exercise');
|
||||
var answer = input.getAttribute('data-answer');
|
||||
var feedback = exercise.querySelector('.feedback');
|
||||
|
||||
input.classList.remove('correct', 'wrong');
|
||||
|
||||
if (input.value.trim().toLowerCase() === answer.toLowerCase()) {
|
||||
input.classList.add('correct');
|
||||
feedback.textContent = 'Correct! Great listening!';
|
||||
feedback.className = 'feedback correct';
|
||||
} else {
|
||||
input.classList.add('wrong');
|
||||
feedback.textContent = 'Not quite. The correct word is: ' + answer;
|
||||
feedback.className = 'feedback wrong';
|
||||
}
|
||||
feedback.style.display = 'block';
|
||||
}
|
||||
|
||||
function speakPhrase(btn) {
|
||||
var phrase = btn.getAttribute('data-phrase');
|
||||
speakWord(phrase, 0.8);
|
||||
btn.textContent = '🔊 Playing...';
|
||||
setTimeout(function() { btn.innerHTML = '🔊 Hear Phrase'; }, 1500);
|
||||
}
|
||||
|
||||
// --- Progress Tracking ---
|
||||
var PROGRESS_KEY = 'english_easy_progress';
|
||||
|
||||
var LEVELS = [
|
||||
{ min: 0, label: 'A0 Beginner', desc: 'You are just starting your English journey!' },
|
||||
{ min: 50, label: 'A1 Starter', desc: 'You know basic words and phrases.' },
|
||||
{ min: 150, label: 'A2 Elementary', desc: 'You can understand simple sentences.' },
|
||||
{ min: 300, label: 'B1 Intermediate', desc: 'You can talk about familiar topics.' },
|
||||
{ min: 500, label: 'B2 Upper Intermediate', desc: 'You can communicate fluently.' },
|
||||
{ min: 800, label: 'C1 Advanced', desc: 'You understand complex texts and ideas.' }
|
||||
];
|
||||
|
||||
function getProgress() {
|
||||
var data = JSON.parse(localStorage.getItem(PROGRESS_KEY));
|
||||
if (!data) {
|
||||
data = {
|
||||
xp: 0,
|
||||
exercisesDone: [],
|
||||
testsDone: 0,
|
||||
bestTestScore: 0,
|
||||
lastTestScore: 0,
|
||||
wordsListened: 0,
|
||||
readingDone: [],
|
||||
joined: new Date().toISOString().split('T')[0]
|
||||
};
|
||||
localStorage.setItem(PROGRESS_KEY, JSON.stringify(data));
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
function saveProgress(data) {
|
||||
localStorage.setItem(PROGRESS_KEY, JSON.stringify(data));
|
||||
}
|
||||
|
||||
function addXP(amount, reason) {
|
||||
var data = getProgress();
|
||||
data.xp += amount;
|
||||
saveProgress(data);
|
||||
updateLevelBadge();
|
||||
return data;
|
||||
}
|
||||
|
||||
function getLevel(xp) {
|
||||
for (var i = LEVELS.length - 1; i >= 0; i--) {
|
||||
if (xp >= LEVELS[i].min) return LEVELS[i];
|
||||
}
|
||||
return LEVELS[0];
|
||||
}
|
||||
|
||||
function getLevelProgress(xp) {
|
||||
var current = getLevel(xp);
|
||||
var nextMin = 9999;
|
||||
for (var i = 0; i < LEVELS.length; i++) {
|
||||
if (LEVELS[i].min > current.min) {
|
||||
nextMin = LEVELS[i].min;
|
||||
break;
|
||||
}
|
||||
}
|
||||
var range = nextMin - current.min;
|
||||
var progress = xp - current.min;
|
||||
return { current: current, nextMin: nextMin, progress: progress, range: range, percent: range > 0 ? Math.min(100, Math.round(progress / range * 100)) : 100 };
|
||||
}
|
||||
|
||||
function updateLevelBadge() {
|
||||
var data = getProgress();
|
||||
var info = getLevelProgress(data.xp);
|
||||
var badge = document.querySelector('.level-badge');
|
||||
if (badge) {
|
||||
badge.innerHTML = '<span class="level-label">' + info.current.label + '</span><span class="level-xp">' + data.xp + ' XP</span>';
|
||||
}
|
||||
var bar = document.querySelector('.level-bar-fill');
|
||||
if (bar) bar.style.width = info.percent + '%';
|
||||
}
|
||||
|
||||
function markExerciseDone(id) {
|
||||
var data = getProgress();
|
||||
if (data.exercisesDone.indexOf(id) === -1) {
|
||||
data.exercisesDone.push(id);
|
||||
data.xp += 10;
|
||||
saveProgress(data);
|
||||
}
|
||||
}
|
||||
|
||||
function markTestDone(score, total) {
|
||||
var data = getProgress();
|
||||
data.testsDone++;
|
||||
data.lastTestScore = score;
|
||||
if (score > data.bestTestScore) data.bestTestScore = score;
|
||||
data.xp += 15 + score * 2;
|
||||
saveProgress(data);
|
||||
}
|
||||
|
||||
function markWordListened() {
|
||||
var data = getProgress();
|
||||
data.wordsListened++;
|
||||
if (data.wordsListened % 5 === 0) {
|
||||
data.xp += 5;
|
||||
saveProgress(data);
|
||||
}
|
||||
}
|
||||
|
||||
// --- Daily Reminder at 20:00 ---
|
||||
(function() {
|
||||
var LS_KEY = 'english_easy_daily';
|
||||
var TOAST_SHOWN = false;
|
||||
|
||||
function getToday() {
|
||||
return new Date().toDateString();
|
||||
}
|
||||
|
||||
function getStreak() {
|
||||
var data = JSON.parse(localStorage.getItem(LS_KEY) || '{"streak":0,"lastDate":""}');
|
||||
var yesterday = new Date();
|
||||
yesterday.setDate(yesterday.getDate() - 1);
|
||||
var yesterdayStr = yesterday.toDateString();
|
||||
var today = getToday();
|
||||
if (data.lastDate === today) {
|
||||
// already done today
|
||||
} else if (data.lastDate === yesterdayStr) {
|
||||
// consecutive day
|
||||
} else if (data.lastDate && data.lastDate !== today) {
|
||||
data.streak = 0;
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
function saveStreak(data) {
|
||||
data.lastDate = getToday();
|
||||
localStorage.setItem(LS_KEY, JSON.stringify(data));
|
||||
}
|
||||
|
||||
function showDailyToast() {
|
||||
if (TOAST_SHOWN) return;
|
||||
TOAST_SHOWN = true;
|
||||
|
||||
var data = getStreak();
|
||||
var existing = document.querySelector('.daily-toast');
|
||||
if (existing) existing.remove();
|
||||
|
||||
var toast = document.createElement('div');
|
||||
toast.className = 'daily-toast';
|
||||
|
||||
var streakHTML = '';
|
||||
if (data.streak > 0) {
|
||||
streakHTML = '<div class="streak">🔥 Day ' + data.streak + ' streak!</div>';
|
||||
}
|
||||
|
||||
toast.innerHTML =
|
||||
'<div class="toast-header">' +
|
||||
'<div class="toast-title">⏰ Daily Practice</div>' +
|
||||
'<button class="toast-close" onclick="this.closest(\'.daily-toast\').remove()">✕</button>' +
|
||||
'</div>' +
|
||||
streakHTML +
|
||||
'<p>It\'s time for your daily English practice! Spend 5 minutes on an exercise or test.</p>' +
|
||||
'<div class="toast-actions">' +
|
||||
'<a href="exercises.html" class="btn" onclick="saveStreakFunc()">Practice Now</a>' +
|
||||
'<button class="btn btn-outline" onclick="this.closest(\'.daily-toast\').remove()">Later</button>' +
|
||||
'</div>';
|
||||
|
||||
document.body.appendChild(toast);
|
||||
|
||||
// trigger animation
|
||||
setTimeout(function() { toast.classList.add('show'); }, 100);
|
||||
|
||||
// also try browser notification
|
||||
if ('Notification' in window && Notification.permission === 'granted') {
|
||||
new Notification('English Easy — Daily Practice', {
|
||||
body: 'Time for your daily English practice! 5 minutes is all you need.',
|
||||
icon: '/images/icon.png'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Expose saveStreak for the toast button
|
||||
window.saveStreakFunc = function() {
|
||||
var data = getStreak();
|
||||
data.streak = (data.streak || 0) + 1;
|
||||
saveStreak(data);
|
||||
};
|
||||
|
||||
// Request notification permission
|
||||
function requestNotifPermission() {
|
||||
if ('Notification' in window && Notification.permission === 'default') {
|
||||
Notification.requestPermission();
|
||||
}
|
||||
}
|
||||
|
||||
function checkDailyReminder() {
|
||||
var now = new Date();
|
||||
var hours = now.getHours();
|
||||
var minutes = now.getMinutes();
|
||||
var data = getStreak();
|
||||
|
||||
// Show if it's >= 20:00 and we haven't shown today
|
||||
if (hours >= 20 && data.lastDate !== getToday()) {
|
||||
showDailyToast();
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// Check on page load
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
requestNotifPermission();
|
||||
checkDailyReminder();
|
||||
|
||||
// Check every 30 seconds if it's 20:00
|
||||
setInterval(function() {
|
||||
var now = new Date();
|
||||
if (now.getHours() === 20 && now.getMinutes() === 0) {
|
||||
checkDailyReminder();
|
||||
}
|
||||
}, 30000);
|
||||
});
|
||||
})();
|
||||
|
||||
// --- Twinkling Stars ---
|
||||
(function() {
|
||||
var bg = document.getElementById('stars-bg');
|
||||
if (!bg) return;
|
||||
var count = window.innerWidth < 600 ? 40 : 80;
|
||||
for (var i = 0; i < count; i++) {
|
||||
var star = document.createElement('div');
|
||||
star.className = 'star';
|
||||
star.style.left = Math.random() * 100 + '%';
|
||||
star.style.top = Math.random() * 100 + '%';
|
||||
star.style.width = (Math.random() * 3 + 1) + 'px';
|
||||
star.style.height = star.style.width;
|
||||
star.style.animationDelay = (Math.random() * 5) + 's';
|
||||
star.style.animationDuration = (Math.random() * 3 + 2) + 's';
|
||||
bg.appendChild(star);
|
||||
}
|
||||
})();
|
||||
|
||||
// --- Vocabulary filter ---
|
||||
function filterVocab(category, btn) {
|
||||
const rows = document.querySelectorAll('.vocab-row');
|
||||
const buttons = document.querySelectorAll('.category-btn');
|
||||
|
||||
buttons.forEach(function(b) { b.classList.remove('active'); });
|
||||
if (btn) btn.classList.add('active');
|
||||
|
||||
rows.forEach(function(row) {
|
||||
if (category === 'all' || row.getAttribute('data-category') === category) {
|
||||
row.style.display = '';
|
||||
} else {
|
||||
row.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
155
progress.html
Normal file
155
progress.html
Normal file
@ -0,0 +1,155 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>My Progress — English Easy</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="stars-bg" id="stars-bg"></div>
|
||||
<header>
|
||||
<div class="header-inner">
|
||||
<a href="index.html" class="logo"><span class="logo-icon">E</span>English <span>Easy</span></a>
|
||||
<button class="menu-toggle" aria-label="Menu">☰</button>
|
||||
<nav>
|
||||
<ul class="nav-list">
|
||||
<li><a href="index.html" data-i18n="nav-home">Home</a></li>
|
||||
<li><a href="vocabulary.html" data-i18n="nav-vocabulary">Vocabulary</a></li>
|
||||
<li><a href="grammar.html" data-i18n="nav-grammar">Grammar</a></li>
|
||||
<li><a href="pronunciation.html" data-i18n="nav-pronunciation">Pronunciation</a></li>
|
||||
<li><a href="exercises.html" data-i18n="nav-exercises">Exercises</a></li>
|
||||
<li><a href="tests.html" data-i18n="nav-tests">Tests</a></li>
|
||||
<li><a href="reading.html" data-i18n="nav-reading">Reading</a></li>
|
||||
<li><a href="progress.html" data-i18n="nav-progress">Progress</a></li>
|
||||
<li><a href="contact.html" data-i18n="nav-contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="page-header">
|
||||
<div class="container">
|
||||
<h1 data-i18n="page-progress-title">My Progress</h1>
|
||||
<p data-i18n="page-progress-desc">Track your learning journey and see how much you've achieved.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container" id="progress-root">
|
||||
|
||||
<div class="level-hero" id="level-hero">
|
||||
<div class="level-icon" id="level-icon">🌱</div>
|
||||
<div class="level-title" id="level-title">A0 Beginner</div>
|
||||
<div class="level-desc" id="level-desc">You are just starting your English journey!</div>
|
||||
<div class="level-xp-total" id="level-xp-total">0 XP</div>
|
||||
<div class="level-bar"><div class="level-bar-fill" id="level-bar-fill" style="width:0%"></div></div>
|
||||
</div>
|
||||
|
||||
<div class="stat-grid" id="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">✅</div>
|
||||
<div class="stat-value" id="stat-exercises">0</div>
|
||||
<div class="stat-label">Exercises Done</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">📝</div>
|
||||
<div class="stat-value" id="stat-tests">0</div>
|
||||
<div class="stat-label">Tests Taken</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">🏆</div>
|
||||
<div class="stat-value" id="stat-best">—</div>
|
||||
<div class="stat-label">Best Test Score</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">🔊</div>
|
||||
<div class="stat-value" id="stat-words">0</div>
|
||||
<div class="stat-label">Words Practiced</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="activity-list">
|
||||
<h3>📋 Recent Activity</h3>
|
||||
<div id="activity-feed">
|
||||
<div class="activity-item"><div class="act-icon">👋</div><div class="act-text">Start learning to see your activity here!</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p><p><p><p>© 2026 <a href="index.html">English Easy</a>. Made for learning English.</p>copy; 2026 <a href="index.html" data-i18n="footer-by">English Easy</a>. <span data-i18n="footer-text">Made for learning English.</span></p>copy; 2026 <a href="index.html" data-i18n="footer-by">English Easy</a>. <span data-i18n="footer-text">Made for learning English.</span></p>copy; 2026 <a href="index.html" data-i18n="footer-by">English Easy</a>. <span data-i18n="footer-text">Made for learning English.</span></p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/lang.js"></script>
|
||||
<script src="js/script.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
renderProgress();
|
||||
});
|
||||
|
||||
function renderProgress() {
|
||||
var data = getProgress();
|
||||
var info = getLevelProgress(data.xp);
|
||||
|
||||
var icons = ['🌱', '🌿', '🌳', '⭐', '🌟', '👑'];
|
||||
var levelIndex = LEVELS.indexOf(info.current);
|
||||
document.getElementById('level-icon').textContent = icons[levelIndex] || '🌱';
|
||||
document.getElementById('level-title').textContent = info.current.label;
|
||||
document.getElementById('level-desc').textContent = info.current.desc;
|
||||
document.getElementById('level-xp-total').textContent = data.xp + ' XP';
|
||||
document.getElementById('level-bar-fill').style.width = info.percent + '%';
|
||||
|
||||
document.getElementById('stat-exercises').textContent = data.exercisesDone.length;
|
||||
document.getElementById('stat-tests').textContent = data.testsDone;
|
||||
document.getElementById('stat-best').textContent = data.bestTestScore > 0 ? data.bestTestScore + '/10' : '—';
|
||||
document.getElementById('stat-words').textContent = data.wordsListened;
|
||||
|
||||
// Activity feed
|
||||
var feed = document.getElementById('activity-feed');
|
||||
feed.innerHTML = '';
|
||||
var activities = [];
|
||||
|
||||
if (data.exercisesDone.length > 0) {
|
||||
activities.push({ icon: '✅', text: 'Completed ' + data.exercisesDone.length + ' exercise' + (data.exercisesDone.length > 1 ? 's' : ''), xp: data.exercisesDone.length * 10 });
|
||||
}
|
||||
if (data.testsDone > 0) {
|
||||
activities.push({ icon: '📝', text: 'Took ' + data.testsDone + ' test' + (data.testsDone > 1 ? 's' : ''), xp: 15 + data.bestTestScore * 2 });
|
||||
}
|
||||
if (data.wordsListened > 0) {
|
||||
activities.push({ icon: '🔊', text: 'Practiced ' + data.wordsListened + ' word' + (data.wordsListened > 1 ? 's' : '') + ' with pronunciation', xp: Math.floor(data.wordsListened / 5) * 5 });
|
||||
}
|
||||
if (data.readingDone && data.readingDone.length > 0) {
|
||||
activities.push({ icon: '📚', text: 'Read ' + data.readingDone.length + ' text' + (data.readingDone.length > 1 ? 's' : ''), xp: 0 });
|
||||
}
|
||||
|
||||
if (activities.length === 0) {
|
||||
feed.innerHTML = '<div class="activity-item"><div class="act-icon">👋</div><div class="act-text">Complete exercises and tests to see your activity here!</div></div>';
|
||||
} else {
|
||||
activities.forEach(function(a) {
|
||||
var div = document.createElement('div');
|
||||
div.className = 'activity-item';
|
||||
div.innerHTML = '<div class="act-icon">' + a.icon + '</div><div class="act-text">' + a.text + '</div><div class="act-xp">+' + a.xp + ' XP</div>';
|
||||
feed.appendChild(div);
|
||||
});
|
||||
|
||||
// Total
|
||||
var totalDiv = document.createElement('div');
|
||||
totalDiv.className = 'activity-item';
|
||||
totalDiv.style.borderTop = '2px solid var(--gray-100)';
|
||||
totalDiv.style.paddingTop = '16px';
|
||||
totalDiv.style.marginTop = '8px';
|
||||
totalDiv.innerHTML = '<div class="act-icon">⭐</div><div class="act-text"><strong>Total XP</strong></div><div class="act-xp" style="font-size:18px;">' + data.xp + ' XP</div>';
|
||||
feed.appendChild(totalDiv);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
419
pronunciation.html
Normal file
419
pronunciation.html
Normal file
@ -0,0 +1,419 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Pronunciation — English Easy</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<style>
|
||||
.pron-card {
|
||||
background: var(--white);
|
||||
border: 1px solid var(--gray-100);
|
||||
border-radius: 20px;
|
||||
padding: 24px 28px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: var(--shadow);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.pron-card:hover {
|
||||
box-shadow: var(--shadow-hover);
|
||||
}
|
||||
.pron-word {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.pron-word .word {
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
color: var(--accent);
|
||||
}
|
||||
.pron-word .transcription {
|
||||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
font-size: 16px;
|
||||
color: var(--gray-500);
|
||||
background: var(--gray-100);
|
||||
padding: 4px 12px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.pron-word .translation {
|
||||
font-size: 15px;
|
||||
color: var(--gray-500);
|
||||
}
|
||||
.pron-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.pron-actions .btn {
|
||||
font-size: 13px;
|
||||
padding: 8px 16px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.btn-listen {
|
||||
background: var(--green);
|
||||
color: var(--white);
|
||||
box-shadow: 0 3px 10px rgba(0,184,148,0.2);
|
||||
}
|
||||
.btn-listen:hover {
|
||||
box-shadow: 0 6px 20px rgba(0,184,148,0.3);
|
||||
}
|
||||
.btn-slow {
|
||||
background: var(--accent-50);
|
||||
color: var(--accent);
|
||||
box-shadow: none;
|
||||
border: 2px solid var(--accent-light);
|
||||
}
|
||||
.btn-slow:hover {
|
||||
background: var(--accent);
|
||||
color: var(--white);
|
||||
}
|
||||
.tip-box {
|
||||
background: var(--warm-light);
|
||||
border-left: 4px solid #fdcb6e;
|
||||
padding: 16px 20px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 24px;
|
||||
font-size: 15px;
|
||||
color: var(--ink);
|
||||
}
|
||||
.tip-box strong {
|
||||
color: #e17055;
|
||||
}
|
||||
.phonetics-intro {
|
||||
max-width: 700px;
|
||||
margin: 0 auto 32px;
|
||||
text-align: center;
|
||||
color: var(--gray-500);
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.pron-card {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.pron-word .word {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stars-bg" id="stars-bg"></div>
|
||||
<header>
|
||||
<div class="header-inner">
|
||||
<a href="index.html" class="logo"><span class="logo-icon">E</span>English <span>Easy</span></a>
|
||||
<button class="menu-toggle" aria-label="Menu">☰</button>
|
||||
<nav>
|
||||
<ul class="nav-list">
|
||||
<li><a href="index.html" data-i18n="nav-home">Home</a></li>
|
||||
<li><a href="vocabulary.html" data-i18n="nav-vocabulary">Vocabulary</a></li>
|
||||
<li><a href="grammar.html" data-i18n="nav-grammar">Grammar</a></li>
|
||||
<li><a href="pronunciation.html" data-i18n="nav-pronunciation">Pronunciation</a></li>
|
||||
<li><a href="exercises.html" data-i18n="nav-exercises">Exercises</a></li>
|
||||
<li><a href="tests.html" data-i18n="nav-tests">Tests</a></li>
|
||||
<li><a href="reading.html" data-i18n="nav-reading">Reading</a></li>
|
||||
<li><a href="progress.html" data-i18n="nav-progress">Progress</a></li>
|
||||
<li><a href="contact.html" data-i18n="nav-contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="page-header">
|
||||
<div class="container">
|
||||
<h1 data-i18n="page-pronunciation-title">Pronunciation</h1>
|
||||
<p data-i18n="page-pronunciation-desc">Listen, repeat, and improve your English pronunciation.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
<div class="tip-box" data-i18n="pron-tip">
|
||||
<strong>💡 Tip:</strong> Click <strong>Listen</strong> to hear the word, then repeat it out loud. Use <strong>Slow</strong> to hear it spoken slowly. Practice every day!
|
||||
</div>
|
||||
|
||||
<div class="phonetics-intro">
|
||||
<p>Click on any word to hear how it's pronounced. Repeat after the speaker. The transcription shows you how to read the sounds.</p>
|
||||
</div>
|
||||
|
||||
<!-- Common Words -->
|
||||
<h2 class="section-title" style="font-size:28px;margin-bottom:24px;" data-i18n="pron-common-words">Common <span>Words</span></h2>
|
||||
|
||||
<div class="pron-card">
|
||||
<div class="pron-word">
|
||||
<span class="word">Hello</span>
|
||||
<span class="transcription">/həˈloʊ/</span>
|
||||
<span class="translation">Привет</span>
|
||||
</div>
|
||||
<div class="pron-actions">
|
||||
<button class="btn btn-listen" data-word="Hello" onclick="repeatWord(this)" data-i18n="pron-listen">🔊 Listen</button>
|
||||
<button class="btn btn-slow" data-word="Hello" onclick="speakSlow(this)" data-i18n="pron-slow">🐢 Slow</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pron-card">
|
||||
<div class="pron-word">
|
||||
<span class="word">Goodbye</span>
|
||||
<span class="transcription">/ɡʊdˈbaɪ/</span>
|
||||
<span class="translation">До свидания</span>
|
||||
</div>
|
||||
<div class="pron-actions">
|
||||
<button class="btn btn-listen" data-word="Goodbye" onclick="repeatWord(this)" data-i18n="pron-listen">🔊 Listen</button>
|
||||
<button class="btn btn-slow" data-word="Goodbye" onclick="speakSlow(this)" data-i18n="pron-slow">🐢 Slow</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pron-card">
|
||||
<div class="pron-word">
|
||||
<span class="word">Thank you</span>
|
||||
<span class="transcription">/θæŋk juː/</span>
|
||||
<span class="translation">Спасибо</span>
|
||||
</div>
|
||||
<div class="pron-actions">
|
||||
<button class="btn btn-listen" data-word="Thank you" onclick="repeatWord(this)" data-i18n="pron-listen">🔊 Listen</button>
|
||||
<button class="btn btn-slow" data-word="Thank you" onclick="speakSlow(this)" data-i18n="pron-slow">🐢 Slow</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pron-card">
|
||||
<div class="pron-word">
|
||||
<span class="word">Please</span>
|
||||
<span class="transcription">/pliːz/</span>
|
||||
<span class="translation">Пожалуйста</span>
|
||||
</div>
|
||||
<div class="pron-actions">
|
||||
<button class="btn btn-listen" data-word="Please" onclick="repeatWord(this)" data-i18n="pron-listen">🔊 Listen</button>
|
||||
<button class="btn btn-slow" data-word="Please" onclick="speakSlow(this)" data-i18n="pron-slow">🐢 Slow</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pron-card">
|
||||
<div class="pron-word">
|
||||
<span class="word">Sorry</span>
|
||||
<span class="transcription">/ˈsɒri/</span>
|
||||
<span class="translation">Извините</span>
|
||||
</div>
|
||||
<div class="pron-actions">
|
||||
<button class="btn btn-listen" data-word="Sorry" onclick="repeatWord(this)" data-i18n="pron-listen">🔊 Listen</button>
|
||||
<button class="btn btn-slow" data-word="Sorry" onclick="speakSlow(this)" data-i18n="pron-slow">🐢 Slow</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pron-card">
|
||||
<div class="pron-word">
|
||||
<span class="word">Water</span>
|
||||
<span class="transcription">/ˈwɔːtər/</span>
|
||||
<span class="translation">Вода</span>
|
||||
</div>
|
||||
<div class="pron-actions">
|
||||
<button class="btn btn-listen" data-word="Water" onclick="repeatWord(this)" data-i18n="pron-listen">🔊 Listen</button>
|
||||
<button class="btn btn-slow" data-word="Water" onclick="speakSlow(this)" data-i18n="pron-slow">🐢 Slow</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pron-card">
|
||||
<div class="pron-word">
|
||||
<span class="word">Beautiful</span>
|
||||
<span class="transcription">/ˈbjuːtɪfəl/</span>
|
||||
<span class="translation">Красивый</span>
|
||||
</div>
|
||||
<div class="pron-actions">
|
||||
<button class="btn btn-listen" data-word="Beautiful" onclick="repeatWord(this)" data-i18n="pron-listen">🔊 Listen</button>
|
||||
<button class="btn btn-slow" data-word="Beautiful" onclick="speakSlow(this)" data-i18n="pron-slow">🐢 Slow</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pron-card">
|
||||
<div class="pron-word">
|
||||
<span class="word">Important</span>
|
||||
<span class="transcription">/ɪmˈpɔːrtənt/</span>
|
||||
<span class="translation">Важный</span>
|
||||
</div>
|
||||
<div class="pron-actions">
|
||||
<button class="btn btn-listen" data-word="Important" onclick="repeatWord(this)" data-i18n="pron-listen">🔊 Listen</button>
|
||||
<button class="btn btn-slow" data-word="Important" onclick="speakSlow(this)" data-i18n="pron-slow">🐢 Slow</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pron-card">
|
||||
<div class="pron-word">
|
||||
<span class="word">Different</span>
|
||||
<span class="transcription">/ˈdɪfərənt/</span>
|
||||
<span class="translation">Разный</span>
|
||||
</div>
|
||||
<div class="pron-actions">
|
||||
<button class="btn btn-listen" data-word="Different" onclick="repeatWord(this)" data-i18n="pron-listen">🔊 Listen</button>
|
||||
<button class="btn btn-slow" data-word="Different" onclick="speakSlow(this)" data-i18n="pron-slow">🐢 Slow</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pron-card">
|
||||
<div class="pron-word">
|
||||
<span class="word">Family</span>
|
||||
<span class="transcription">/ˈfæməli/</span>
|
||||
<span class="translation">Семья</span>
|
||||
</div>
|
||||
<div class="pron-actions">
|
||||
<button class="btn btn-listen" data-word="Family" onclick="repeatWord(this)" data-i18n="pron-listen">🔊 Listen</button>
|
||||
<button class="btn btn-slow" data-word="Family" onclick="speakSlow(this)" data-i18n="pron-slow">🐢 Slow</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pron-card">
|
||||
<div class="pron-word">
|
||||
<span class="word">Weather</span>
|
||||
<span class="transcription">/ˈweðər/</span>
|
||||
<span class="translation">Погода</span>
|
||||
</div>
|
||||
<div class="pron-actions">
|
||||
<button class="btn btn-listen" data-word="Weather" onclick="repeatWord(this)" data-i18n="pron-listen">🔊 Listen</button>
|
||||
<button class="btn btn-slow" data-word="Weather" onclick="speakSlow(this)" data-i18n="pron-slow">🐢 Slow</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pron-card">
|
||||
<div class="pron-word">
|
||||
<span class="word">Morning</span>
|
||||
<span class="transcription">/ˈmɔːrnɪŋ/</span>
|
||||
<span class="translation">Утро</span>
|
||||
</div>
|
||||
<div class="pron-actions">
|
||||
<button class="btn btn-listen" data-word="Morning" onclick="repeatWord(this)" data-i18n="pron-listen">🔊 Listen</button>
|
||||
<button class="btn btn-slow" data-word="Morning" onclick="speakSlow(this)" data-i18n="pron-slow">🐢 Slow</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Phrases -->
|
||||
<h2 class="section-title" style="font-size:28px;margin-bottom:24px;margin-top:48px;" data-i18n="pron-common-phrases">Common <span>Phrases</span></h2>
|
||||
|
||||
<div class="pron-card">
|
||||
<div class="pron-word">
|
||||
<span class="word">How are you?</span>
|
||||
<span class="translation">Как дела?</span>
|
||||
</div>
|
||||
<div class="pron-actions">
|
||||
<button class="btn btn-listen" data-phrase="How are you?" onclick="speakPhrase(this)" data-i18n="pron-listen">🔊 Hear Phrase</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pron-card">
|
||||
<div class="pron-word">
|
||||
<span class="word">I am fine, thank you.</span>
|
||||
<span class="translation">Я в порядке, спасибо.</span>
|
||||
</div>
|
||||
<div class="pron-actions">
|
||||
<button class="btn btn-listen" data-phrase="I am fine, thank you." onclick="speakPhrase(this)" data-i18n="pron-listen">🔊 Hear Phrase</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pron-card">
|
||||
<div class="pron-word">
|
||||
<span class="word">Nice to meet you.</span>
|
||||
<span class="translation">Приятно познакомиться.</span>
|
||||
</div>
|
||||
<div class="pron-actions">
|
||||
<button class="btn btn-listen" data-phrase="Nice to meet you." onclick="speakPhrase(this)" data-i18n="pron-listen">🔊 Hear Phrase</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pron-card">
|
||||
<div class="pron-word">
|
||||
<span class="word">What is your name?</span>
|
||||
<span class="translation">Как тебя зовут?</span>
|
||||
</div>
|
||||
<div class="pron-actions">
|
||||
<button class="btn btn-listen" data-phrase="What is your name?" onclick="speakPhrase(this)" data-i18n="pron-listen">🔊 Hear Phrase</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pron-card">
|
||||
<div class="pron-word">
|
||||
<span class="word">Where are you from?</span>
|
||||
<span class="translation">Откуда ты?</span>
|
||||
</div>
|
||||
<div class="pron-actions">
|
||||
<button class="btn btn-listen" data-phrase="Where are you from?" onclick="speakPhrase(this)" data-i18n="pron-listen">🔊 Hear Phrase</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pronunciation Tips -->
|
||||
<h2 class="section-title" style="font-size:28px;margin-bottom:24px;margin-top:48px;" data-i18n="pron-tips">Pronunciation <span>Tips</span></h2>
|
||||
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;">
|
||||
<div class="grammar-card">
|
||||
<h3 data-i18n="pron-th-sound">👄 The "th" Sound</h3>
|
||||
<p data-i18n="pron-th-desc">Put your tongue between your teeth and blow air.</p>
|
||||
<div class="formula">Think /θɪŋk/ — Thank you /θæŋk juː/</div>
|
||||
</div>
|
||||
<div class="grammar-card">
|
||||
<h3 data-i18n="pron-r-sound">🗣️ The "r" Sound</h3>
|
||||
<p data-i18n="pron-r-desc">In English, the tongue does not touch the top of the mouth.</p>
|
||||
<div class="formula">Red /red/ — Right /raɪt/</div>
|
||||
</div>
|
||||
<div class="grammar-card">
|
||||
<h3 data-i18n="pron-stress">🎵 Word Stress</h3>
|
||||
<p data-i18n="pron-stress-desc">English words have one stressed syllable. Say it louder and longer.</p>
|
||||
<div class="formula">im<strong>POR</strong>tant — <strong>BEAU</strong>tiful</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dictation -->
|
||||
<h2 class="section-title" style="font-size:28px;margin-bottom:24px;margin-top:48px;" data-i18n="pron-dictation">Dictation <span>Practice</span></h2>
|
||||
<p class="section-subtitle" data-i18n="pron-dictation-desc">Listen to the word, then type what you hear.</p>
|
||||
|
||||
<div class="exercise">
|
||||
<h3>Listen and type the word</h3>
|
||||
<p class="question">🔊 Click the button to hear a word, then type it:</p>
|
||||
<div style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px;">
|
||||
<button class="btn btn-listen" data-word="Hello" onclick="repeatWord(this)">🔊 Hear Word</button>
|
||||
<input type="text" class="fill-input" data-answer="hello" placeholder="Type the word..." style="width:180px;">
|
||||
<button class="btn" onclick="checkDictation(this.previousElementSibling)" data-i18n="btn-check">Check</button>
|
||||
</div>
|
||||
<div class="feedback"></div>
|
||||
</div>
|
||||
|
||||
<div class="exercise">
|
||||
<h3>Listen and type the word</h3>
|
||||
<p class="question">🔊 Click the button to hear a word, then type it:</p>
|
||||
<div style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px;">
|
||||
<button class="btn btn-listen" data-word="Friend" onclick="repeatWord(this)">🔊 Hear Word</button>
|
||||
<input type="text" class="fill-input" data-answer="friend" placeholder="Type the word..." style="width:180px;">
|
||||
<button class="btn" onclick="checkDictation(this.previousElementSibling)" data-i18n="btn-check">Check</button>
|
||||
</div>
|
||||
<div class="feedback"></div>
|
||||
</div>
|
||||
|
||||
<div class="exercise">
|
||||
<h3>Listen and type the word</h3>
|
||||
<p class="question">🔊 Click the button to hear a word, then type it:</p>
|
||||
<div style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px;">
|
||||
<button class="btn btn-listen" data-word="Teacher" onclick="repeatWord(this)">🔊 Hear Word</button>
|
||||
<input type="text" class="fill-input" data-answer="teacher" placeholder="Type the word..." style="width:180px;">
|
||||
<button class="btn" onclick="checkDictation(this.previousElementSibling)" data-i18n="btn-check">Check</button>
|
||||
</div>
|
||||
<div class="feedback"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p>© 2026 <a href="index.html" data-i18n="footer-by">English Easy</a>. <span data-i18n="footer-text">Made for learning English.</span></p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/lang.js"></script>
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
109
reading.html
Normal file
109
reading.html
Normal file
@ -0,0 +1,109 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Reading — English Easy</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="stars-bg" id="stars-bg"></div>
|
||||
<header>
|
||||
<div class="header-inner">
|
||||
<a href="index.html" class="logo">English <span>Easy</span></a>
|
||||
<button class="menu-toggle" aria-label="Menu">☰</button>
|
||||
<nav>
|
||||
<ul class="nav-list">
|
||||
<li><a href="index.html" data-i18n="nav-home">Home</a></li>
|
||||
<li><a href="vocabulary.html" data-i18n="nav-vocabulary">Vocabulary</a></li>
|
||||
<li><a href="grammar.html" data-i18n="nav-grammar">Grammar</a></li>
|
||||
<li><a href="pronunciation.html" data-i18n="nav-pronunciation">Pronunciation</a></li>
|
||||
<li><a href="exercises.html" data-i18n="nav-exercises">Exercises</a></li>
|
||||
<li><a href="tests.html" data-i18n="nav-tests">Tests</a></li>
|
||||
<li><a href="reading.html" data-i18n="nav-reading">Reading</a></li>
|
||||
<li><a href="progress.html" data-i18n="nav-progress">Progress</a></li>
|
||||
<li><a href="contact.html" data-i18n="nav-contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="page-header">
|
||||
<div class="container">
|
||||
<h1 data-i18n="page-reading-title">Reading</h1>
|
||||
<p data-i18n="page-reading-desc">Read short texts in English and check your understanding.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
<!-- Text 1 -->
|
||||
<div class="reading-text">
|
||||
<h3>My Daily Routine</h3>
|
||||
<div class="text-content">
|
||||
<p>My name is Anna. I am a student. I wake up at 7 o'clock every day. I have breakfast at 7:30. I go to school at 8 o'clock. I have lunch at school. I come home at 3 o'clock. Then I do my homework. In the evening, I read books or watch TV. I go to sleep at 10 o'clock.</p>
|
||||
<p>I like English because it is interesting. I study English every day.</p>
|
||||
</div>
|
||||
<div class="questions">
|
||||
<h4>Questions:</h4>
|
||||
<ol>
|
||||
<li>What is her name?</li>
|
||||
<li>What time does she wake up?</li>
|
||||
<li>Why does she like English?</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Text 2 -->
|
||||
<div class="reading-text">
|
||||
<h3>My Family</h3>
|
||||
<div class="text-content">
|
||||
<p>Hi! I am Tom. I am 10 years old. I live with my family. There are four people in my family: my mother, my father, my sister, and me.</p>
|
||||
<p>My mother is a teacher. She works at a school. My father is a doctor. He works in a hospital. My sister is 15 years old. She likes music and plays the guitar. I like football. We are a happy family.</p>
|
||||
<p>On Sundays, we have dinner together. My mother cooks delicious food.</p>
|
||||
</div>
|
||||
<div class="questions">
|
||||
<h4>Questions:</h4>
|
||||
<ol>
|
||||
<li>How many people are in Tom's family?</li>
|
||||
<li>What does Tom's mother do?</li>
|
||||
<li>What does Tom's sister like?</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Text 3 -->
|
||||
<div class="reading-text">
|
||||
<h3>A Day at the Park</h3>
|
||||
<div class="text-content">
|
||||
<p>Last Saturday, I went to the park with my friends. The weather was nice and sunny. We played football and listened to music.</p>
|
||||
<p>There was a small café in the park. We bought ice cream and cold water. We sat on the grass and talked for a long time. I took some photos with my phone.</p>
|
||||
<p>In the evening, we went home. I was tired but very happy. It was a great day!</p>
|
||||
</div>
|
||||
<div class="questions">
|
||||
<h4>Questions:</h4>
|
||||
<ol>
|
||||
<li>When did the story happen?</li>
|
||||
<li>What did they buy at the café?</li>
|
||||
<li>How did the boy feel in the evening?</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p><p><p><p>© 2026 <a href="index.html">English Easy</a>. Made for learning English.</p>copy; 2026 <a href="index.html" data-i18n="footer-by">English Easy</a>. <span data-i18n="footer-text">Made for learning English.</span></p>copy; 2026 <a href="index.html" data-i18n="footer-by">English Easy</a>. <span data-i18n="footer-text">Made for learning English.</span></p>copy; 2026 <a href="index.html" data-i18n="footer-by">English Easy</a>. <span data-i18n="footer-text">Made for learning English.</span></p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/lang.js"></script>
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
155
tests.html
Normal file
155
tests.html
Normal file
@ -0,0 +1,155 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Tests — English Easy</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="stars-bg" id="stars-bg"></div>
|
||||
<header>
|
||||
<div class="header-inner">
|
||||
<a href="index.html" class="logo">English <span>Easy</span></a>
|
||||
<button class="menu-toggle" aria-label="Menu">☰</button>
|
||||
<nav>
|
||||
<ul class="nav-list">
|
||||
<li><a href="index.html" data-i18n="nav-home">Home</a></li>
|
||||
<li><a href="vocabulary.html" data-i18n="nav-vocabulary">Vocabulary</a></li>
|
||||
<li><a href="grammar.html" data-i18n="nav-grammar">Grammar</a></li>
|
||||
<li><a href="pronunciation.html" data-i18n="nav-pronunciation">Pronunciation</a></li>
|
||||
<li><a href="exercises.html" data-i18n="nav-exercises">Exercises</a></li>
|
||||
<li><a href="tests.html" data-i18n="nav-tests">Tests</a></li>
|
||||
<li><a href="reading.html" data-i18n="nav-reading">Reading</a></li>
|
||||
<li><a href="progress.html" data-i18n="nav-progress">Progress</a></li>
|
||||
<li><a href="contact.html" data-i18n="nav-contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="page-header">
|
||||
<div class="container">
|
||||
<h1>English Test</h1>
|
||||
<p data-i18n="page-tests-desc">Test your knowledge with 10 questions. Choose the correct answer for each question.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
<div class="test-question">
|
||||
<h4>1. What is the English word for «Книга»?</h4>
|
||||
<div class="options">
|
||||
<label class="option"><input type="radio" name="q1" value="false"> Pen</label>
|
||||
<label class="option"><input type="radio" name="q1" value="true"> Book</label>
|
||||
<label class="option"><input type="radio" name="q1" value="false"> Table</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="test-question">
|
||||
<h4>2. She ___ a doctor.</h4>
|
||||
<div class="options">
|
||||
<label class="option"><input type="radio" name="q2" value="false"> am</label>
|
||||
<label class="option"><input type="radio" name="q2" value="true"> is</label>
|
||||
<label class="option"><input type="radio" name="q2" value="false"> are</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="test-question">
|
||||
<h4>3. I ___ breakfast at 8 o'clock every morning.</h4>
|
||||
<div class="options">
|
||||
<label class="option"><input type="radio" name="q3" value="true"> have</label>
|
||||
<label class="option"><input type="radio" name="q3" value="false"> has</label>
|
||||
<label class="option"><input type="radio" name="q3" value="false"> had</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="test-question">
|
||||
<h4>4. What is the past form of «go»?</h4>
|
||||
<div class="options">
|
||||
<label class="option"><input type="radio" name="q4" value="false"> go</label>
|
||||
<label class="option"><input type="radio" name="q4" value="false"> goes</label>
|
||||
<label class="option"><input type="radio" name="q4" value="true"> went</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="test-question">
|
||||
<h4>5. Choose the correct sentence:</h4>
|
||||
<div class="options">
|
||||
<label class="option"><input type="radio" name="q5" value="false"> He like music.</label>
|
||||
<label class="option"><input type="radio" name="q5" value="true"> He likes music.</label>
|
||||
<label class="option"><input type="radio" name="q5" value="false"> He liking music.</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="test-question">
|
||||
<h4>6. What is «друг» in English?</h4>
|
||||
<div class="options">
|
||||
<label class="option"><input type="radio" name="q6" value="false"> Family</label>
|
||||
<label class="option"><input type="radio" name="q6" value="true"> Friend</label>
|
||||
<label class="option"><input type="radio" name="q6" value="false"> Father</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="test-question">
|
||||
<h4>7. I ___ an apple yesterday.</h4>
|
||||
<div class="options">
|
||||
<label class="option"><input type="radio" name="q7" value="false"> eat</label>
|
||||
<label class="option"><input type="radio" name="q7" value="true"> ate</label>
|
||||
<label class="option"><input type="radio" name="q7" value="false"> eaten</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="test-question">
|
||||
<h4>8. What is the meaning of «beautiful»?</h4>
|
||||
<div class="options">
|
||||
<label class="option"><input type="radio" name="q8" value="true"> Красивый</label>
|
||||
<label class="option"><input type="radio" name="q8" value="false"> Большой</label>
|
||||
<label class="option"><input type="radio" name="q8" value="false"> Умный</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="test-question">
|
||||
<h4>9. We ___ football on Sundays.</h4>
|
||||
<div class="options">
|
||||
<label class="option"><input type="radio" name="q9" value="true"> play</label>
|
||||
<label class="option"><input type="radio" name="q9" value="false"> plays</label>
|
||||
<label class="option"><input type="radio" name="q9" value="false"> played</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="test-question">
|
||||
<h4>10. The cat is ___ the table.</h4>
|
||||
<div class="options">
|
||||
<label class="option"><input type="radio" name="q10" value="false"> in</label>
|
||||
<label class="option"><input type="radio" name="q10" value="true"> on</label>
|
||||
<label class="option"><input type="radio" name="q10" value="false"> at</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="text-align:center;margin-top:24px;">
|
||||
<button class="btn" onclick="checkTest()" data-i18n="test-check">Check Result</button>
|
||||
</div>
|
||||
|
||||
<div class="result-box" id="test-result">
|
||||
<div class="score" id="score">0/10</div>
|
||||
<p id="test-detail" data-i18n="test-result">Keep learning and try again!</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p>© 2026 <a href="index.html" data-i18n="footer-by">English Easy</a>. <span data-i18n="footer-text">Made for learning English.</span></p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/lang.js"></script>
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
185
vocabulary.html
Normal file
185
vocabulary.html
Normal file
@ -0,0 +1,185 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Vocabulary — English Easy</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="stars-bg" id="stars-bg"></div>
|
||||
<header>
|
||||
<div class="header-inner">
|
||||
<a href="index.html" class="logo">English <span>Easy</span></a>
|
||||
<button class="menu-toggle" aria-label="Menu">☰</button>
|
||||
<nav>
|
||||
<ul class="nav-list">
|
||||
<li><a href="index.html" data-i18n="nav-home">Home</a></li>
|
||||
<li><a href="vocabulary.html" data-i18n="nav-vocabulary">Vocabulary</a></li>
|
||||
<li><a href="grammar.html" data-i18n="nav-grammar">Grammar</a></li>
|
||||
<li><a href="pronunciation.html" data-i18n="nav-pronunciation">Pronunciation</a></li>
|
||||
<li><a href="exercises.html" data-i18n="nav-exercises">Exercises</a></li>
|
||||
<li><a href="tests.html" data-i18n="nav-tests">Tests</a></li>
|
||||
<li><a href="reading.html" data-i18n="nav-reading">Reading</a></li>
|
||||
<li><a href="progress.html" data-i18n="nav-progress">Progress</a></li>
|
||||
<li><a href="contact.html" data-i18n="nav-contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="page-header">
|
||||
<div class="container">
|
||||
<h1 data-i18n="page-vocabulary-title">Vocabulary</h1>
|
||||
<p data-i18n="page-vocabulary-desc">Learn 20+ common English words with translations and examples.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="vocab-categories">
|
||||
<button class="category-btn active" onclick="filterVocab('all', this)" data-i18n="btn-all">All</button>
|
||||
<button class="category-btn" onclick="filterVocab('school', this)" data-i18n="btn-school">School</button>
|
||||
<button class="category-btn" onclick="filterVocab('family', this)" data-i18n="btn-family">Family</button>
|
||||
<button class="category-btn" onclick="filterVocab('food', this)" data-i18n="btn-food">Food</button>
|
||||
<button class="category-btn" onclick="filterVocab('daily', this)" data-i18n="btn-daily">Daily Routine</button>
|
||||
<button class="category-btn" onclick="filterVocab('hobbies', this)" data-i18n="btn-hobbies">Hobbies</button>
|
||||
</div>
|
||||
|
||||
<table class="vocab-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-i18n="vocab-english">English</th>
|
||||
<th data-i18n="vocab-translation">Translation</th>
|
||||
<th data-i18n="vocab-example">Example Sentence</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- School -->
|
||||
<tr class="vocab-row" data-category="school">
|
||||
<td><strong>Book</strong></td>
|
||||
<td>Книга</td>
|
||||
<td>I read a <em>book</em> every evening.</td>
|
||||
</tr>
|
||||
<tr class="vocab-row" data-category="school">
|
||||
<td><strong>Teacher</strong></td>
|
||||
<td>Учитель</td>
|
||||
<td>My <em>teacher</em> is very kind.</td>
|
||||
</tr>
|
||||
<tr class="vocab-row" data-category="school">
|
||||
<td><strong>Lesson</strong></td>
|
||||
<td>Урок</td>
|
||||
<td>The <em>lesson</em> starts at 9 am.</td>
|
||||
</tr>
|
||||
<tr class="vocab-row" data-category="school">
|
||||
<td><strong>Homework</strong></td>
|
||||
<td>Домашнее задание</td>
|
||||
<td>I do my <em>homework</em> after school.</td>
|
||||
</tr>
|
||||
<!-- Family -->
|
||||
<tr class="vocab-row" data-category="family">
|
||||
<td><strong>Friend</strong></td>
|
||||
<td>Друг</td>
|
||||
<td>He is my best <em>friend</em>.</td>
|
||||
</tr>
|
||||
<tr class="vocab-row" data-category="family">
|
||||
<td><strong>Mother</strong></td>
|
||||
<td>Мама</td>
|
||||
<td>My <em>mother</em> cooks dinner.</td>
|
||||
</tr>
|
||||
<tr class="vocab-row" data-category="family">
|
||||
<td><strong>Father</strong></td>
|
||||
<td>Папа</td>
|
||||
<td>My <em>father</em> works in an office.</td>
|
||||
</tr>
|
||||
<tr class="vocab-row" data-category="family">
|
||||
<td><strong>Sister</strong></td>
|
||||
<td>Сестра</td>
|
||||
<td>My <em>sister</em> likes music.</td>
|
||||
</tr>
|
||||
<!-- Food -->
|
||||
<tr class="vocab-row" data-category="food">
|
||||
<td><strong>Apple</strong></td>
|
||||
<td>Яблоко</td>
|
||||
<td>I eat an <em>apple</em> every day.</td>
|
||||
</tr>
|
||||
<tr class="vocab-row" data-category="food">
|
||||
<td><strong>Milk</strong></td>
|
||||
<td>Молоко</td>
|
||||
<td>I drink <em>milk</em> in the morning.</td>
|
||||
</tr>
|
||||
<tr class="vocab-row" data-category="food">
|
||||
<td><strong>Bread</strong></td>
|
||||
<td>Хлеб</td>
|
||||
<td>We buy <em>bread</em> from the shop.</td>
|
||||
</tr>
|
||||
<tr class="vocab-row" data-category="food">
|
||||
<td><strong>Water</strong></td>
|
||||
<td>Вода</td>
|
||||
<td>I drink a lot of <em>water</em>.</td>
|
||||
</tr>
|
||||
<!-- Daily Routine -->
|
||||
<tr class="vocab-row" data-category="daily">
|
||||
<td><strong>Wake up</strong></td>
|
||||
<td>Просыпаться</td>
|
||||
<td>I <em>wake up</em> at 7 o'clock.</td>
|
||||
</tr>
|
||||
<tr class="vocab-row" data-category="daily">
|
||||
<td><strong>Breakfast</strong></td>
|
||||
<td>Завтрак</td>
|
||||
<td>I have <em>breakfast</em> at 8 am.</td>
|
||||
</tr>
|
||||
<tr class="vocab-row" data-category="daily">
|
||||
<td><strong>School</strong></td>
|
||||
<td>Школа</td>
|
||||
<td>I go to <em>school</em> every day.</td>
|
||||
</tr>
|
||||
<tr class="vocab-row" data-category="daily">
|
||||
<td><strong>Sleep</strong></td>
|
||||
<td>Спать</td>
|
||||
<td>I go to <em>sleep</em> at 10 pm.</td>
|
||||
</tr>
|
||||
<!-- Hobbies -->
|
||||
<tr class="vocab-row" data-category="hobbies">
|
||||
<td><strong>Music</strong></td>
|
||||
<td>Музыка</td>
|
||||
<td>I love listening to <em>music</em>.</td>
|
||||
</tr>
|
||||
<tr class="vocab-row" data-category="hobbies">
|
||||
<td><strong>Football</strong></td>
|
||||
<td>Футбол</td>
|
||||
<td>I play <em>football</em> on weekends.</td>
|
||||
</tr>
|
||||
<tr class="vocab-row" data-category="hobbies">
|
||||
<td><strong>Read</strong></td>
|
||||
<td>Читать</td>
|
||||
<td>I like to <em>read</em> books.</td>
|
||||
</tr>
|
||||
<tr class="vocab-row" data-category="hobbies">
|
||||
<td><strong>Travel</strong></td>
|
||||
<td>Путешествовать</td>
|
||||
<td>I want to <em>travel</em> to London.</td>
|
||||
</tr>
|
||||
<tr class="vocab-row" data-category="hobbies">
|
||||
<td><strong>Cook</strong></td>
|
||||
<td>Готовить</td>
|
||||
<td>I <em>cook</em> dinner with my mother.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p>© 2026 <a href="index.html" data-i18n="footer-by">English Easy</a>. <span data-i18n="footer-text">Made for learning English.</span></p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/lang.js"></script>
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user