diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 0000000..0f0e6b0 --- /dev/null +++ b/AGENTS.md @@ -0,0 +1,173 @@ + +# Vibe42 — учебная песочница для лендингов + +Workspace юзера `sultanbek_askaruly`. Это **учебная среда**, где обычные люди (не разработчики) пробуют сделать свой первый сайт. + +--- + +## 🎯 ТВОЯ РОЛЬ + +Ты — **гид и помощник**, а не слепой исполнитель. Цель сессии — чтобы юзер вышел с: +1. **рабочим лендингом**, опубликованным по адресу `https://pages.git.vibe42.kz/sultanbek_askaruly//`, +2. ощущением «это было легко» — без серверов, БД, токенов, конфигов. + +Юзер не разработчик. Ему важен **результат, который видно в браузере**, а не код. + +--- + +## 🗺 СЦЕНАРИЙ ПЕРВОГО ЗАХОДА (юзер только зашёл, ещё ничего нет) + +1. Поздоровайся коротко: «Привет! Тут за 10 минут собираем лендинг и публикуем его в интернете. О чём хочешь сделать?» +2. Если он не знает — предложи **4 конкретных идеи** (выбирай близкие к нему, не абстрактные): + - Промо хобби (фотография / музыка / спорт) + - Резюме / personal page с контактами + - Афиша мероприятия (концерт, день рождения, мастер-класс) + - Меню заведения / прайс услуг + - Лендинг продукта или будущего проекта (waitlist) +3. Уточни **2 короткие детали**: стиль (тёмный/светлый/яркий) и главную цель (рассказать / собрать заявку / показать работы). +4. Сразу делай `./new-project ` и собирай страницу. Не спрашивай разрешения на каждый шаг. + +--- + +## 💬 ЕСЛИ ЮЗЕР ОТВЕЧАЕТ РАСПЛЫВЧАТО + +Юзер говорит «сделай что-нибудь» / «ну хз» / «сюрприз» → **не делай ничего абстрактного**. + +Скажи: «Давай определимся, я задам 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//** +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// +- Креды уже в `/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`. **Начинай с него.** Не выдумывай новые цвета — модифицируй существующие. diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..6600bef --- /dev/null +++ b/contact.html @@ -0,0 +1,64 @@ + + + + + + Contact — English Easy + + + +
+
+ + + +
+
+ +
+
+

Contact Us

+

Have a question or suggestion? Send us a message!

+
+
+ +
+
+
+
+ + +
+
+ + +
+
+ + +
+ +
Thank you! Your message has been received.
+
+
+
+ + + + + + diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..726d56c --- /dev/null +++ b/css/style.css @@ -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; + } +} diff --git a/design.md b/design.md new file mode 100644 index 0000000..5c8e829 --- /dev/null +++ b/design.md @@ -0,0 +1,110 @@ + +# 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 + + + + + +Мой проект + + + +
+
+

Заголовок проекта

+

Подзаголовок — пара предложений о чём это.

+ Начать +
+
+
+
+

Секция

+
Контент карточки.
+
Контент карточки.
+
+
+ + +``` + +## Чем НЕ пользоваться + +- Bootstrap, Material UI, Chakra, Ant Design — слишком тяжело и не нужно для лендинга +- Font Awesome — используй emoji (🚀 ⚡ ✨) или inline SVG +- jQuery — vanilla JS более чем достаточно + +## Чем МОЖНО (если очень надо) + +- **Tailwind через CDN**: `` — для прототипа OK +- **Lottie animations через CDN** +- **Placeholder картинки**: `https://picsum.photos/800/600`, `https://placehold.co/600x400` +- **Шрифты Google Fonts через ``** в head diff --git a/exercises.html b/exercises.html new file mode 100644 index 0000000..a24d03e --- /dev/null +++ b/exercises.html @@ -0,0 +1,174 @@ + + + + + + Exercises — English Easy + + + +
+
+ + + +
+
+ +
+
+

Exercises

+

Practice your English with these fun exercises.

+
+
+ +
+
+ + +
+

1. Choose the correct answer

+

I ___ English every day.

+
+ + + +
+ + +
+ + +
+

2. Choose the correct answer

+

She ___ a student.

+
+ + + +
+ + +
+ + +
+

3. Choose the correct answer

+

They ___ football yesterday.

+
+ + + +
+ + +
+ + +
+

4. Fill in the gap

+

I ___ a book every day. (read / reads)

+
+ +
+
+ + +
+ + +
+

5. Fill in the gap

+

She ___ to school every day. (go / goes)

+
+ +
+
+ + +
+ + +
+

6. Fill in the gap

+

They ___ visiting their grandmother yesterday. (was / were)

+
+ +
+
+ + +
+ + +
+

7. Translate the sentence

+

Translate: «Я люблю музыку.»

+
+ +
+
+ + +
+ + +
+

8. Translate the sentence

+

Translate: «Он мой друг.»

+
+ +
+
+ + +
+ + +
+

9. Match words with translations

+

Write the translation for each word:

+
+
Book →
+
School →
+
Friend →
+
+ + +
+ + +
+

10. Choose the correct answer

+

I have ___ apple.

+
+ + + +
+ + +
+ +
+
+ + + + + + diff --git a/grammar.html b/grammar.html new file mode 100644 index 0000000..6bbaf5f --- /dev/null +++ b/grammar.html @@ -0,0 +1,115 @@ + + + + + + Grammar — English Easy + + + +
+
+ + + +
+
+ +
+
+

Grammar

+

Simple explanations of English grammar with formulas and examples.

+
+
+ +
+
+
+
+

Present Simple

+

Present Simple is used for habits, routines, and general facts.

+
Subject + V / V+s (he/she/it)
+
    +
  • I study English every day.
    • +
  • She likes music.
    • +
  • They play football on Sundays.
    • +
+
+ +
+

Past Simple

+

Past Simple is used for completed actions in the past.

+
Subject + V-ed (regular) / V2 (irregular)
+
    +
  • I visited my grandmother yesterday.
    • +
  • She watched a film last night.
    • +
  • They went to the park.
    • +
+
+ +
+

Future Simple (will)

+

Future Simple is used for predictions, promises, and spontaneous decisions.

+
Subject + will + V
+
    +
  • I will call you tomorrow.
    • +
  • She will buy a new phone.
    • +
  • It will rain in the evening.
    • +
+
+ +
+

Articles: a / an / the

+

Use a before consonant sounds, an before vowel sounds, and the for specific things.

+
a + consonant sound  |  an + vowel sound  |  the + specific
+
    +
  • I have a book.
    • +
  • She eats an apple.
    • +
  • The sun is bright today.
    • +
+
+ +
+

Pronouns

+

Pronouns replace nouns. They can be subject or object pronouns.

+
I / you / he / she / it / we / they (subject)
+
    +
  • She is a student.
    • +
  • We like ice cream.
    • +
  • I see them every day.
    • +
+
+ +
+

Prepositions

+

Prepositions show relationships of time, place, and direction.

+
in / on / at / under / next to / between
+
    +
  • The book is on the table.
    • +
  • She is at school.
    • +
  • I wake up at 7 o'clock.
    • +
+
+
+
+
+ + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..0ccbb3a --- /dev/null +++ b/index.html @@ -0,0 +1,107 @@ + + + + + + English Easy — Learn English Step by Step + + + +
+
+ + + +
+
+ +
+
+

Welcome to English Easy

+

Learn English step by step with vocabulary, grammar, exercises, reading texts, and tests. Start your journey today!

+ Start Learning +
+
+ +
+
+

What You Will Learn

+

We make learning English simple and fun with clear explanations and interactive exercises.

+
+
+
📖
+

Vocabulary

+

Learn new words with translations and example sentences. Over 20 words to start with!

+ Explore Words +
+
+
📝
+

Grammar

+

Simple explanations of English grammar with formulas and examples. Present Simple, Past Simple, and more.

+ Study Grammar +
+
+
💪
+

Exercises

+

Practice what you learn with fun exercises. Choose answers, fill gaps, and translate sentences.

+ Practice Now +
+
+
📊
+

Tests

+

Check your knowledge with a full test. 10 questions to test your vocabulary, grammar, and reading.

+ Take a Test +
+
+
📚
+

Reading

+

Read short and simple texts in English. Each text has questions to check your understanding.

+ Start Reading +
+
+
+
+ +
+
+

How It Works

+

Three simple steps to start learning English.

+
+
+
1
+

Learn New Words

+

Start with the Vocabulary section to build your word base with common English words.

+
+
+
2
+

Study Grammar

+

Understand how sentences work with simple grammar explanations and examples.

+
+
+
3
+

Practice & Test

+

Use exercises and tests to check your progress and see how much you've learned!

+
+
+
+
+ + + + + + diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..bcbb76a --- /dev/null +++ b/js/script.js @@ -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'; + } + }); +} diff --git a/reading.html b/reading.html new file mode 100644 index 0000000..05d03c7 --- /dev/null +++ b/reading.html @@ -0,0 +1,102 @@ + + + + + + Reading — English Easy + + + +
+
+ + + +
+
+ +
+
+

Reading

+

Read short texts in English and check your understanding.

+
+
+ +
+
+ + +
+

My Daily Routine

+
+

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.

+

I like English because it is interesting. I study English every day.

+
+
+

Questions:

+
    +
  1. What is her name?
    2. +
  2. What time does she wake up?
    3. +
  3. Why does she like English?
    4. +
+
+
+ + +
+

My Family

+
+

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.

+

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.

+

On Sundays, we have dinner together. My mother cooks delicious food.

+
+
+

Questions:

+
    +
  1. How many people are in Tom's family?
    2. +
  2. What does Tom's mother do?
    3. +
  3. What does Tom's sister like?
    4. +
+
+
+ + +
+

A Day at the Park

+
+

Last Saturday, I went to the park with my friends. The weather was nice and sunny. We played football and listened to music.

+

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.

+

In the evening, we went home. I was tired but very happy. It was a great day!

+
+
+

Questions:

+
    +
  1. When did the story happen?
    2. +
  2. What did they buy at the café?
    3. +
  3. How did the boy feel in the evening?
    4. +
+
+
+ +
+
+ + + + + + diff --git a/tests.html b/tests.html new file mode 100644 index 0000000..eb4deda --- /dev/null +++ b/tests.html @@ -0,0 +1,148 @@ + + + + + + Tests — English Easy + + + +
+
+ + + +
+
+ +
+
+

English Test

+

Test your knowledge with 10 questions. Choose the correct answer for each question.

+
+
+ +
+
+ +
+

1. What is the English word for «Книга»?

+
+ + + +
+
+ +
+

2. She ___ a doctor.

+
+ + + +
+
+ +
+

3. I ___ breakfast at 8 o'clock every morning.

+
+ + + +
+
+ +
+

4. What is the past form of «go»?

+
+ + + +
+
+ +
+

5. Choose the correct sentence:

+
+ + + +
+
+ +
+

6. What is «друг» in English?

+
+ + + +
+
+ +
+

7. I ___ an apple yesterday.

+
+ + + +
+
+ +
+

8. What is the meaning of «beautiful»?

+
+ + + +
+
+ +
+

9. We ___ football on Sundays.

+
+ + + +
+
+ +
+

10. The cat is ___ the table.

+
+ + + +
+
+ +
+ +
+ +
+
0/10
+

Keep learning and try again!

+
+ +
+
+ + + + + + diff --git a/vocabulary.html b/vocabulary.html new file mode 100644 index 0000000..dea730d --- /dev/null +++ b/vocabulary.html @@ -0,0 +1,178 @@ + + + + + + Vocabulary — English Easy + + + +
+
+ + + +
+
+ +
+
+

Vocabulary

+

Learn 20+ common English words with translations and examples.

+
+
+ +
+
+
+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EnglishTranslationExample Sentence
BookКнигаI read a book every evening.
TeacherУчительMy teacher is very kind.
LessonУрокThe lesson starts at 9 am.
HomeworkДомашнее заданиеI do my homework after school.
FriendДругHe is my best friend.
MotherМамаMy mother cooks dinner.
FatherПапаMy father works in an office.
SisterСестраMy sister likes music.
AppleЯблокоI eat an apple every day.
MilkМолокоI drink milk in the morning.
BreadХлебWe buy bread from the shop.
WaterВодаI drink a lot of water.
Wake upПросыпатьсяI wake up at 7 o'clock.
BreakfastЗавтракI have breakfast at 8 am.
SchoolШколаI go to school every day.
SleepСпатьI go to sleep at 10 pm.
MusicМузыкаI love listening to music.
FootballФутболI play football on weekends.
ReadЧитатьI like to read books.
TravelПутешествоватьI want to travel to London.
CookГотовитьI cook dinner with my mother.
+
+
+ + + + + +