sultanbek_askaruly/english-easy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1

Browse Source
This commit is contained in:
Dauren777 2026-06-19 05:59:21 +00:00
parent 86fa5c0c76
commit 0e300ae898
11 changed files with 2149 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

173
AGENTS.md Normal file
View 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`. **Начинай с него.** Не выдумывай новые цвета — модифицируй существующие.

64
contact.html Normal file
View File

@ -0,0 +1,64 @@
<!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="stylesheet" href="css/style.css">
</head>
<body>
<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">Home</a></li>
<li><a href="vocabulary.html">Vocabulary</a></li>
<li><a href="grammar.html">Grammar</a></li>
<li><a href="exercises.html">Exercises</a></li>
<li><a href="tests.html">Tests</a></li>
<li><a href="reading.html">Reading</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section class="page-header">
<div class="container">
<h1>Contact Us</h1>
<p>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">Name</label>
<input type="text" id="name" name="name" placeholder="Your name" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="your@email.com" required>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" name="message" placeholder="Write your message here..." required></textarea>
</div>
<button type="submit" class="btn btn-primary">Send Message</button>
<div class="form-message" id="form-message">Thank you! Your message has been received.</div>
</form>
</div>
</section>
<footer>
<div class="container">
<p>&copy; 2026 <a href="index.html">English Easy</a>. Made for learning English.</p>
</div>
</footer>
<script src="js/script.js"></script>
</body>
</html>

794
css/style.css Normal file
View File

@ -0,0 +1,794 @@
:root {
--ink: #0F1218;
--cyan: #00E5FF;
--cyan-50: #E8FCFF;
--white: #FFFFFF;
--gray-500: #5B6573;
--gray-100: #F2F4F7;
--blue: #4A90D9;
--blue-light: #E8F4FD;
--blue-dark: #2C6FAC;
--shadow: 0 2px 12px rgba(0,0,0,0.08);
--shadow-hover: 0 4px 20px rgba(0,0,0,0.12);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
color: var(--ink);
background: var(--white);
min-height: 100vh;
display: flex;
flex-direction: column;
}
.container {
max-width: 1140px;
margin: 0 auto;
padding: 0 24px;
}
/* Header & Navigation */
header {
background: var(--white);
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
position: sticky;
top: 0;
z-index: 100;
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 24px;
max-width: 1140px;
margin: 0 auto;
}
.logo {
font-size: 22px;
font-weight: 800;
color: var(--ink);
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
}
.logo span {
color: var(--blue);
}
.nav-list {
display: flex;
list-style: none;
gap: 4px;
}
.nav-list a {
text-decoration: none;
color: var(--gray-500);
font-size: 15px;
font-weight: 500;
padding: 8px 14px;
border-radius: 8px;
transition: all 0.2s;
}
.nav-list a:hover,
.nav-list a.active {
color: var(--ink);
background: var(--gray-100);
}
.menu-toggle {
display: none;
background: none;
border: none;
font-size: 28px;
cursor: pointer;
color: var(--ink);
padding: 4px;
}
/* Footer */
footer {
background: var(--ink);
color: var(--gray-500);
text-align: center;
padding: 32px 24px;
margin-top: auto;
font-size: 14px;
}
footer a {
color: var(--cyan);
text-decoration: none;
}
/* Hero Section */
.hero {
background: linear-gradient(135deg, var(--ink) 0%, #1a2332 100%);
color: var(--white);
padding: 100px 24px;
text-align: center;
}
.hero h1 {
font-size: 56px;
font-weight: 800;
line-height: 1.05;
margin-bottom: 16px;
}
.hero h1 span {
color: var(--cyan);
}
.hero p {
font-size: 20px;
color: #9aa3b2;
max-width: 600px;
margin: 0 auto 32px;
}
.hero .btn {
font-size: 18px;
padding: 16px 36px;
}
/* Buttons */
.btn {
display: inline-block;
background: var(--cyan);
color: var(--ink);
padding: 14px 28px;
border-radius: 8px;
font-weight: 700;
text-decoration: none;
transition: all 0.25s;
border: none;
cursor: pointer;
font-size: 16px;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 14px rgba(0, 229, 255, 0.4);
}
.btn-primary {
background: var(--blue);
color: var(--white);
}
.btn-primary:hover {
background: var(--blue-dark);
box-shadow: 0 4px 14px rgba(74, 144, 217, 0.4);
}
.btn-outline {
background: transparent;
color: var(--white);
border: 2px solid var(--white);
}
.btn-outline:hover {
background: var(--white);
color: var(--ink);
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
/* Section */
.section {
padding: 80px 24px;
}
.section-title {
font-size: 36px;
font-weight: 700;
text-align: center;
margin-bottom: 12px;
}
.section-subtitle {
font-size: 18px;
color: var(--gray-500);
text-align: center;
margin-bottom: 48px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* Cards */
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.card {
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: 16px;
padding: 32px;
transition: all 0.25s;
box-shadow: var(--shadow);
}
.card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-hover);
}
.card-icon {
font-size: 36px;
margin-bottom: 16px;
}
.card h3 {
font-size: 22px;
font-weight: 700;
margin-bottom: 12px;
}
.card p {
color: var(--gray-500);
margin-bottom: 20px;
}
.card .btn {
font-size: 14px;
padding: 10px 20px;
}
/* How it works */
.how-it-works {
background: var(--gray-100);
}
.steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 32px;
text-align: center;
}
.step-number {
width: 48px;
height: 48px;
background: var(--cyan);
color: var(--ink);
font-size: 22px;
font-weight: 800;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
}
.step h3 {
font-size: 20px;
font-weight: 700;
margin-bottom: 8px;
}
.step p {
color: var(--gray-500);
font-size: 15px;
}
/* Vocabulary page */
.vocab-table {
width: 100%;
border-collapse: collapse;
background: var(--white);
border-radius: 12px;
overflow: hidden;
box-shadow: var(--shadow);
}
.vocab-table th {
background: var(--blue);
color: var(--white);
padding: 14px 18px;
text-align: left;
font-weight: 600;
}
.vocab-table td {
padding: 12px 18px;
border-bottom: 1px solid var(--gray-100);
}
.vocab-table tr:last-child td {
border-bottom: none;
}
.vocab-table tr:hover td {
background: var(--blue-light);
}
.vocab-categories {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-bottom: 32px;
}
.category-btn {
padding: 8px 18px;
border-radius: 20px;
border: 2px solid var(--gray-100);
background: var(--white);
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
}
.category-btn:hover,
.category-btn.active {
background: var(--blue);
color: var(--white);
border-color: var(--blue);
}
/* Grammar page */
.grammar-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px;
}
.grammar-card {
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: 16px;
padding: 28px;
box-shadow: var(--shadow);
}
.grammar-card h3 {
font-size: 22px;
font-weight: 700;
margin-bottom: 12px;
color: var(--blue);
}
.grammar-card .formula {
background: var(--cyan-50);
padding: 12px 16px;
border-radius: 8px;
font-family: monospace;
font-size: 16px;
margin: 12px 0;
border-left: 3px solid var(--cyan);
}
.grammar-card .examples {
margin-top: 12px;
}
.grammar-card .examples li {
list-style: none;
padding: 6px 0;
color: var(--gray-500);
}
.grammar-card .examples li::before {
content: "→ ";
color: var(--blue);
font-weight: 700;
}
/* Exercises page */
.exercise {
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: 16px;
padding: 28px;
margin-bottom: 24px;
box-shadow: var(--shadow);
}
.exercise h3 {
font-size: 18px;
font-weight: 700;
margin-bottom: 16px;
}
.exercise .question {
font-size: 17px;
margin-bottom: 16px;
}
.exercise .options {
display: flex;
flex-direction: column;
gap: 10px;
}
.exercise .option {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
border: 2px solid var(--gray-100);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
}
.exercise .option:hover {
border-color: var(--blue);
background: var(--blue-light);
}
.exercise .option input[type="radio"] {
accent-color: var(--blue);
width: 18px;
height: 18px;
}
.exercise .option.correct {
border-color: #28a745;
background: #e8f5e9;
}
.exercise .option.wrong {
border-color: #dc3545;
background: #fce4ec;
}
.exercise .feedback {
margin-top: 12px;
padding: 10px 16px;
border-radius: 8px;
font-weight: 600;
display: none;
}
.exercise .feedback.correct {
display: block;
background: #e8f5e9;
color: #28a745;
}
.exercise .feedback.wrong {
display: block;
background: #fce4ec;
color: #dc3545;
}
.fill-input {
padding: 8px 12px;
border: 2px solid var(--gray-100);
border-radius: 8px;
font-size: 16px;
width: 200px;
transition: border-color 0.2s;
}
.fill-input:focus {
outline: none;
border-color: var(--blue);
}
.fill-input.correct {
border-color: #28a745;
background: #e8f5e9;
}
.fill-input.wrong {
border-color: #dc3545;
background: #fce4ec;
}
/* Tests page */
.test-question {
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: 16px;
padding: 24px;
margin-bottom: 16px;
box-shadow: var(--shadow);
}
.test-question h4 {
font-size: 16px;
font-weight: 600;
margin-bottom: 12px;
}
.test-question .options {
display: flex;
flex-direction: column;
gap: 8px;
}
.test-question .option {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
border: 2px solid var(--gray-100);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
}
.test-question .option:hover {
border-color: var(--blue);
}
.test-question .option input[type="radio"] {
accent-color: var(--blue);
}
.result-box {
text-align: center;
padding: 32px;
background: var(--blue-light);
border-radius: 16px;
margin-top: 24px;
display: none;
}
.result-box.show {
display: block;
}
.result-box .score {
font-size: 48px;
font-weight: 800;
color: var(--blue);
}
.result-box p {
font-size: 18px;
color: var(--gray-500);
margin-top: 8px;
}
/* Reading page */
.reading-text {
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: 16px;
padding: 28px;
margin-bottom: 24px;
box-shadow: var(--shadow);
}
.reading-text h3 {
font-size: 22px;
font-weight: 700;
margin-bottom: 16px;
color: var(--blue);
}
.reading-text .text-content {
line-height: 1.8;
margin-bottom: 20px;
font-size: 16px;
}
.reading-text .questions h4 {
font-weight: 600;
margin-bottom: 12px;
font-size: 16px;
}
.reading-text .questions ol {
margin-left: 20px;
}
.reading-text .questions li {
margin-bottom: 8px;
color: var(--gray-500);
}
/* Contact page */
.contact-form {
max-width: 600px;
margin: 0 auto;
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: 16px;
padding: 40px;
box-shadow: var(--shadow);
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
font-weight: 600;
margin-bottom: 6px;
font-size: 15px;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 12px 16px;
border: 2px solid var(--gray-100);
border-radius: 8px;
font-size: 16px;
font-family: inherit;
transition: border-color 0.2s;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--blue);
}
.form-group textarea {
min-height: 120px;
resize: vertical;
}
.contact-form .btn {
width: 100%;
}
.form-message {
text-align: center;
padding: 20px;
background: #e8f5e9;
color: #28a745;
border-radius: 12px;
margin-top: 16px;
font-weight: 600;
display: none;
}
.form-message.show {
display: block;
}
/* Page header */
.page-header {
background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
color: var(--white);
padding: 60px 24px;
text-align: center;
}
.page-header h1 {
font-size: 42px;
font-weight: 800;
margin-bottom: 8px;
}
.page-header p {
font-size: 18px;
opacity: 0.9;
}
/* Mobile */
@media (max-width: 768px) {
.menu-toggle {
display: block;
}
.nav-list {
display: none;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--white);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
padding: 8px;
gap: 2px;
}
.nav-list.open {
display: flex;
}
.nav-list a {
padding: 12px 16px;
border-radius: 8px;
}
.hero h1 {
font-size: 36px;
}
.hero p {
font-size: 18px;
}
.section {
padding: 48px 20px;
}
.section-title {
font-size: 28px;
}
.page-header h1 {
font-size: 32px;
}
.page-header {
padding: 40px 20px;
}
.cards-grid {
grid-template-columns: 1fr;
}
.grammar-grid {
grid-template-columns: 1fr;
}
.steps {
grid-template-columns: 1fr;
}
.vocab-table {
font-size: 14px;
}
.vocab-table th,
.vocab-table td {
padding: 10px 12px;
}
.contact-form {
padding: 24px;
}
.fill-input {
width: 100%;
}
}
@media (max-width: 480px) {
.header-inner {
padding: 10px 16px;
}
.logo {
font-size: 18px;
}
.hero {
padding: 60px 16px;
}
.hero h1 {
font-size: 28px;
}
.card {
padding: 24px;
}
}

110
design.md Normal file
View 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

174
exercises.html Normal file
View File

@ -0,0 +1,174 @@
<!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="stylesheet" href="css/style.css">
</head>
<body>
<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">Home</a></li>
<li><a href="vocabulary.html">Vocabulary</a></li>
<li><a href="grammar.html">Grammar</a></li>
<li><a href="exercises.html">Exercises</a></li>
<li><a href="tests.html">Tests</a></li>
<li><a href="reading.html">Reading</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section class="page-header">
<div class="container">
<h1>Exercises</h1>
<p>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)">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)">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)">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'))">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'))">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'))">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)">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)">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)">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)">Check</button>
<div class="feedback"></div>
</div>
</div>
</section>
<footer>
<div class="container">
<p>&copy; 2026 <a href="index.html">English Easy</a>. Made for learning English.</p>
</div>
</footer>
<script src="js/script.js"></script>
</body>
</html>

115
grammar.html Normal file
View File

@ -0,0 +1,115 @@
<!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="stylesheet" href="css/style.css">
</head>
<body>
<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">Home</a></li>
<li><a href="vocabulary.html">Vocabulary</a></li>
<li><a href="grammar.html">Grammar</a></li>
<li><a href="exercises.html">Exercises</a></li>
<li><a href="tests.html">Tests</a></li>
<li><a href="reading.html">Reading</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section class="page-header">
<div class="container">
<h1>Grammar</h1>
<p>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>Present Simple</h3>
<p>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>Past Simple</h3>
<p>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>Future Simple (will)</h3>
<p>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>Articles: a / an / the</h3>
<p>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 &nbsp;|&nbsp; an + vowel sound &nbsp;|&nbsp; 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>Pronouns</h3>
<p>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>Prepositions</h3>
<p>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>&copy; 2026 <a href="index.html">English Easy</a>. Made for learning English.</p>
</div>
</footer>
<script src="js/script.js"></script>
</body>
</html>

107
index.html Normal file
View File

@ -0,0 +1,107 @@
<!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="stylesheet" href="css/style.css">
</head>
<body>
<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">Home</a></li>
<li><a href="vocabulary.html">Vocabulary</a></li>
<li><a href="grammar.html">Grammar</a></li>
<li><a href="exercises.html">Exercises</a></li>
<li><a href="tests.html">Tests</a></li>
<li><a href="reading.html">Reading</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section class="hero">
<div class="container">
<h1>Welcome to <span>English Easy</span></h1>
<p>Learn English step by step with vocabulary, grammar, exercises, reading texts, and tests. Start your journey today!</p>
<a href="vocabulary.html" class="btn">Start Learning</a>
</div>
</section>
<section class="section">
<div class="container">
<h2 class="section-title">What You Will Learn</h2>
<p class="section-subtitle">We make learning English simple and fun with clear explanations and interactive exercises.</p>
<div class="cards-grid">
<div class="card">
<div class="card-icon">📖</div>
<h3>Vocabulary</h3>
<p>Learn new words with translations and example sentences. Over 20 words to start with!</p>
<a href="vocabulary.html" class="btn btn-primary">Explore Words</a>
</div>
<div class="card">
<div class="card-icon">📝</div>
<h3>Grammar</h3>
<p>Simple explanations of English grammar with formulas and examples. Present Simple, Past Simple, and more.</p>
<a href="grammar.html" class="btn btn-primary">Study Grammar</a>
</div>
<div class="card">
<div class="card-icon">💪</div>
<h3>Exercises</h3>
<p>Practice what you learn with fun exercises. Choose answers, fill gaps, and translate sentences.</p>
<a href="exercises.html" class="btn btn-primary">Practice Now</a>
</div>
<div class="card">
<div class="card-icon">📊</div>
<h3>Tests</h3>
<p>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">Take a Test</a>
</div>
<div class="card">
<div class="card-icon">📚</div>
<h3>Reading</h3>
<p>Read short and simple texts in English. Each text has questions to check your understanding.</p>
<a href="reading.html" class="btn btn-primary">Start Reading</a>
</div>
</div>
</div>
</section>
<section class="section how-it-works">
<div class="container">
<h2 class="section-title">How It Works</h2>
<p class="section-subtitle">Three simple steps to start learning English.</p>
<div class="steps">
<div class="step">
<div class="step-number">1</div>
<h3>Learn New Words</h3>
<p>Start with the Vocabulary section to build your word base with common English words.</p>
</div>
<div class="step">
<div class="step-number">2</div>
<h3>Study Grammar</h3>
<p>Understand how sentences work with simple grammar explanations and examples.</p>
</div>
<div class="step">
<div class="step-number">3</div>
<h3>Practice & Test</h3>
<p>Use exercises and tests to check your progress and see how much you've learned!</p>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<p>&copy; 2026 <a href="index.html">English Easy</a>. Made for learning English.</p>
</div>
</footer>
<script src="js/script.js"></script>
</body>
</html>

184
js/script.js Normal file
View File

@ -0,0 +1,184 @@
// 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!';
feedback.className = 'feedback correct';
} else {
parent.classList.add('wrong');
feedback.textContent = 'Try again!';
feedback.className = 'feedback wrong';
// Show correct answer
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!';
feedback.className = 'feedback correct';
} 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!';
feedback.className = 'feedback correct';
} 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!';
feedback.className = 'feedback correct';
} 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++;
}
});
const resultBox = document.getElementById('test-result');
const scoreDisplay = document.getElementById('score');
scoreDisplay.textContent = score + '/' + total;
resultBox.classList.add('show');
// Scroll to result
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);
}
// --- 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';
}
});
}

102
reading.html Normal file
View File

@ -0,0 +1,102 @@
<!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="stylesheet" href="css/style.css">
</head>
<body>
<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">Home</a></li>
<li><a href="vocabulary.html">Vocabulary</a></li>
<li><a href="grammar.html">Grammar</a></li>
<li><a href="exercises.html">Exercises</a></li>
<li><a href="tests.html">Tests</a></li>
<li><a href="reading.html">Reading</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section class="page-header">
<div class="container">
<h1>Reading</h1>
<p>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>&copy; 2026 <a href="index.html">English Easy</a>. Made for learning English.</p>
</div>
</footer>
<script src="js/script.js"></script>
</body>
</html>

148
tests.html Normal file
View File

@ -0,0 +1,148 @@
<!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="stylesheet" href="css/style.css">
</head>
<body>
<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">Home</a></li>
<li><a href="vocabulary.html">Vocabulary</a></li>
<li><a href="grammar.html">Grammar</a></li>
<li><a href="exercises.html">Exercises</a></li>
<li><a href="tests.html">Tests</a></li>
<li><a href="reading.html">Reading</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section class="page-header">
<div class="container">
<h1>English Test</h1>
<p>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()">Check Result</button>
</div>
<div class="result-box" id="test-result">
<div class="score" id="score">0/10</div>
<p>Keep learning and try again!</p>
</div>
</div>
</section>
<footer>
<div class="container">
<p>&copy; 2026 <a href="index.html">English Easy</a>. Made for learning English.</p>
</div>
</footer>
<script src="js/script.js"></script>
</body>
</html>

178
vocabulary.html Normal file
View File

@ -0,0 +1,178 @@
<!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="stylesheet" href="css/style.css">
</head>
<body>
<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">Home</a></li>
<li><a href="vocabulary.html">Vocabulary</a></li>
<li><a href="grammar.html">Grammar</a></li>
<li><a href="exercises.html">Exercises</a></li>
<li><a href="tests.html">Tests</a></li>
<li><a href="reading.html">Reading</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section class="page-header">
<div class="container">
<h1>Vocabulary</h1>
<p>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)">All</button>
<button class="category-btn" onclick="filterVocab('school', this)">School</button>
<button class="category-btn" onclick="filterVocab('family', this)">Family</button>
<button class="category-btn" onclick="filterVocab('food', this)">Food</button>
<button class="category-btn" onclick="filterVocab('daily', this)">Daily Routine</button>
<button class="category-btn" onclick="filterVocab('hobbies', this)">Hobbies</button>
</div>
<table class="vocab-table">
<thead>
<tr>
<th>English</th>
<th>Translation</th>
<th>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>&copy; 2026 <a href="index.html">English Easy</a>. Made for learning English.</p>
</div>
</footer>
<script src="js/script.js"></script>
</body>
</html>