320 lines
15 KiB
HTML
320 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Английский с нуля — Ежедневные задания</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7;--green:#10B981;--yellow:#F59E0B;--purple:#8B5CF6}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{font-family:'Inter',sans-serif;font-size:17px;line-height:1.6;color:var(--ink);background:var(--white)}
|
||
.container{max-width:1140px;margin:0 auto;padding:80px 24px}
|
||
.hero{background:linear-gradient(135deg,var(--ink) 0%,#1a1f2e 100%);color:var(--white);text-align:center;padding:100px 24px}
|
||
.hero h1{font-size:56px;font-weight:800;line-height:1.05;margin-bottom:24px}
|
||
.hero h1 span{color:var(--cyan)}
|
||
.hero p{font-size:20px;color:#9aa3b2;max-width:600px;margin:0 auto 32px}
|
||
.btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none;border:none;cursor:pointer;font-size:17px}
|
||
.btn:hover{background:#1be5ff}
|
||
.btn-secondary{background:transparent;color:var(--white);border:2px solid var(--white);margin-left:16px}
|
||
.section{padding:80px 24px}
|
||
.section h2{font-size:36px;font-weight:700;margin-bottom:24px;text-align:center}
|
||
.section h3{font-size:24px;font-weight:700;margin-bottom:16px}
|
||
.card{background:var(--gray-100);border-radius:16px;padding:32px;margin-bottom:16px}
|
||
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
|
||
.day-card{background:var(--white);border:2px solid var(--gray-100);border-radius:12px;padding:24px;cursor:pointer;transition:all 0.3s}
|
||
.day-card:hover{border-color:var(--cyan);transform:translateY(-4px)}
|
||
.day-card.active{border-color:var(--cyan);background:var(--cyan-50)}
|
||
.day-card .day-number{font-size:14px;color:var(--gray-500);margin-bottom:8px}
|
||
.day-card h4{font-size:18px;font-weight:700;margin-bottom:12px}
|
||
.day-card .topics{display:flex;flex-wrap:wrap;gap:8px}
|
||
.day-card .topic{background:var(--gray-100);padding:4px 12px;border-radius:20px;font-size:13px}
|
||
.progress-bar{height:12px;background:var(--gray-100);border-radius:6px;overflow:hidden;margin:16px 0}
|
||
.progress-fill{height:100%;background:var(--green);border-radius:6px;transition:width 0.5s}
|
||
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px}
|
||
.stat-card{background:var(--gray-100);border-radius:12px;padding:20px;text-align:center}
|
||
.stat-card .icon{font-size:32px;margin-bottom:8px}
|
||
.stat-card .value{font-size:28px;font-weight:800}
|
||
.stat-card .label{font-size:14px;color:var(--gray-500)}
|
||
.task-card{background:var(--white);border-left:4px solid var(--cyan);padding:20px;margin-bottom:16px;border-radius:0 8px 8px 0}
|
||
.task-card h4{font-size:16px;font-weight:700;margin-bottom:8px}
|
||
.task-card p{color:var(--gray-500);font-size:15px}
|
||
.task-card .answer{margin-top:12px;padding:12px;background:var(--cyan-50);border-radius:8px;display:none}
|
||
.task-card .answer.show{display:block}
|
||
.vocabulary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
|
||
.vocab-card{background:var(--gray-100);border-radius:12px;padding:20px;text-align:center;cursor:pointer;transition:all 0.3s}
|
||
.vocab-card:hover{background:var(--cyan-50)}
|
||
.vocab-card .word{font-size:24px;font-weight:800;margin-bottom:8px}
|
||
.vocab-card .translation{font-size:16px;color:var(--gray-500);display:none}
|
||
.vocab-card .translation.show{display:block}
|
||
.vocab-card .pronunciation{font-size:14px;color:var(--cyan);font-style:italic}
|
||
.tab-buttons{display:flex;gap:8px;margin-bottom:24px;justify-content:center}
|
||
.tab-btn{padding:10px 20px;border-radius:8px;font-weight:600;cursor:pointer;border:none;background:var(--gray-100);color:var(--ink)}
|
||
.tab-btn.active{background:var(--cyan);color:var(--ink)}
|
||
footer{background:var(--ink);color:var(--gray-500);text-align:center;padding:40px 24px;font-size:14px}
|
||
@media(max-width:768px){
|
||
.hero h1{font-size:36px}
|
||
.stats-grid{grid-template-columns:repeat(2,1fr)}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<section class="hero">
|
||
<div class="container">
|
||
<h1>Английский <span>с нуля</span></h1>
|
||
<p>Начни изучать английский язык с нуля. Ежедневные задания, простые объяснения и практика.</p>
|
||
<a href="#lessons" class="btn">Начать обучение</a>
|
||
<a href="#about" class="btn btn-secondary">Узнать больше</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="about" class="section">
|
||
<div class="container">
|
||
<h2>Почему этот курс?</h2>
|
||
<div class="stats-grid">
|
||
<div class="stat-card">
|
||
<div class="icon">📚</div>
|
||
<div class="value">30</div>
|
||
<div class="label">Дней обучения</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="icon">⏱️</div>
|
||
<div class="value">15</div>
|
||
<div class="label">Минут в день</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="icon">🎯</div>
|
||
<div class="value">500+</div>
|
||
<div class="label">Слов</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="icon">🏆</div>
|
||
<div class="value">A1-A2</div>
|
||
<div class="label">Уровень</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="lessons" class="section" style="background:var(--gray-100)">
|
||
<div class="container">
|
||
<h2>Программа обучения</h2>
|
||
<p style="text-align:center;margin-bottom:32px;color:var(--gray-500)">Выбери день и начни учиться. Каждый день — новые знания и практика.</p>
|
||
|
||
<div class="card-grid" id="day-cards"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="today" class="section">
|
||
<div class="container">
|
||
<h2>Сегодняшние задания</h2>
|
||
<div id="tasks-container"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="vocabulary" class="section" style="background:var(--gray-100)">
|
||
<div class="container">
|
||
<h2>Словарь</h2>
|
||
<div class="tab-buttons">
|
||
<button class="tab-btn active" onclick="showVocabTab('greetings')">Приветствия</button>
|
||
<button class="tab-btn" onclick="showVocabTab('numbers')">Числа</button>
|
||
<button class="tab-btn" onclick="showVocabTab('family')">Семья</button>
|
||
<button class="tab-btn" onclick="showVocabTab('colors')">Цвета</button>
|
||
</div>
|
||
<div class="vocabulary-grid" id="vocab-container"></div>
|
||
<p style="text-align:center;margin-top:16px;color:var(--gray-500)">Нажми на карточку, чтобы увидеть перевод</p>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<p>© 2026 Английский с нуля — Учись бесплатно</p>
|
||
</footer>
|
||
|
||
<script>
|
||
const dayData = [
|
||
{day: 1, title: "Приветствия", topics: ["Hello", "Hi", "Good morning"], tasks: [
|
||
{q: "Как сказать 'Привет' по-английски?", a: "Hello / Hi"},
|
||
{q: "Что означает 'Good morning'?", a: "Доброе утро"},
|
||
{q: "Как поздороваться после обеда?", a: "Good afternoon"}
|
||
]},
|
||
{day: 2, title: "Знакомство", topics: ["My name is", "Nice to meet you", "How are you?"], tasks: [
|
||
{q: "Как сказать 'Меня зовут...'?", a: "My name is... / I'm..."},
|
||
{q: "Что ответить на 'How are you?'?", a: "I'm fine, thank you. And you?"},
|
||
{q: "Как сказать 'Приятно познакомиться'?", a: "Nice to meet you"}
|
||
]},
|
||
{day: 3, title: "Числа 1-10", topics: ["One", "Two", "Three", "Ten"], tasks: [
|
||
{q: "Как сказать 'пять' по-английски?", a: "Five"},
|
||
{q: "Переведите: seven", a: "Семь"},
|
||
{q: "Как сказать 'десять'?", a: "Ten"}
|
||
]},
|
||
{day: 4, title: "Числа 11-20", topics: ["Eleven", "Twelve", "Twenty"], tasks: [
|
||
{q: "Как сказать 'двенадцать'?", a: "Twelve"},
|
||
{q: "Что означает 'fifteen'?", a: "Пятнадцать"},
|
||
{q: "Как сказать 'двадцать'?", a: "Twenty"}
|
||
]},
|
||
{day: 5, title: "Цвета", topics: ["Red", "Blue", "Green", "Yellow"], tasks: [
|
||
{q: "Как сказать 'красный'?", a: "Red"},
|
||
{q: "Переведите: blue", a: "Синий"},
|
||
{q: "Как сказать 'жёлтый'?", a: "Yellow"}
|
||
]},
|
||
{day: 6, title: "Семья", topics: ["Mother", "Father", "Sister", "Brother"], tasks: [
|
||
{q: "Как сказать 'мать'?", a: "Mother / Mom"},
|
||
{q: "Что означает 'brother'?", a: "Брат"},
|
||
{q: "Как сказать 'семья'?", a: "Family"}
|
||
]},
|
||
{day: 7, title: "Местоимения", topics: ["I", "You", "He", "She", "We"], tasks: [
|
||
{q: "Что означает 'I'?", a: "Я"},
|
||
{q: "Как сказать 'мы'?", a: "We"},
|
||
{q: "Переведите: she", a: "Она (женский род)"}
|
||
]},
|
||
{day: 8, title: "Глагол to be", topics: ["Am", "Is", "Are"], tasks: [
|
||
{q: "Как сказать 'Я студент'?", a: "I am a student"},
|
||
{q: "Вставьте: She ___ a teacher", a: "is"},
|
||
{q: "Как сказать 'Они врачи'?", a: "They are doctors"}
|
||
]},
|
||
{day: 9, title: "Артикли", topics: ["A", "An", "The"], tasks: [
|
||
{q: "Когда используем 'a'?", a: "Перед словами на согласный: a cat"},
|
||
{q: "Когда используем 'an'?", a: "Перед словами на гласный: an apple"},
|
||
{q: "Когда используем 'the'?", a: "Перед конкретными предметами: the book"}
|
||
]},
|
||
{day: 10, title: "Вопросы", topics: ["What?", "Where?", "When?"], tasks: [
|
||
{q: "Как спросить 'Что это?'?", a: "What is this?"},
|
||
{q: "Как спросить 'Где ты?'?", a: "Where are you?"},
|
||
{q: "Как спросить 'Когда?'?", a: "When?"}
|
||
]}
|
||
];
|
||
|
||
const vocabulary = {
|
||
greetings: [
|
||
{word: "Hello", translation: "Привет", pronunciation: "хэ́лоу"},
|
||
{word: "Hi", translation: "Привет (неформально)", pronunciation: "хай"},
|
||
{word: "Good morning", translation: "Доброе утро", pronunciation: "гуд мо́рнинг"},
|
||
{word: "Good afternoon", translation: "Добрый день", pronunciation: "гуд а́фтернун"},
|
||
{word: "Good evening", translation: "Добрый вечер", pronunciation: "гуд и́внинг"},
|
||
{word: "Goodbye", translation: "До свидания", pronunciation: "гудба́й"},
|
||
{word: "See you", translation: "Увидимся", pronunciation: "си́ ю"}
|
||
],
|
||
numbers: [
|
||
{word: "One", translation: "Один", pronunciation: "уан"},
|
||
{word: "Two", translation: "Два", pronunciation: "ту"},
|
||
{word: "Three", translation: "Три", pronunciation: "сри"},
|
||
{word: "Four", translation: "Четыре", pronunciation: "фо"},
|
||
{word: "Five", translation: "Пять", pronunciation: "файв"},
|
||
{word: "Ten", translation: "Десять", pronunciation: "тен"},
|
||
{word: "Twenty", translation: "Двадцать", pronunciation: "тве́нти"}
|
||
],
|
||
family: [
|
||
{word: "Mother", translation: "Мать", pronunciation: "ма́зер"},
|
||
{word: "Father", translation: "Отец", pronunciation: "фа́зер"},
|
||
{word: "Sister", translation: "Сестра", pronunciation: "си́стер"},
|
||
{word: "Brother", translation: "Брат", pronunciation: "бра́зер"},
|
||
{word: "Family", translation: "Семья", pronunciation: "фе́мили"},
|
||
{word: "Son", translation: "Сын", pronunciation: "сан"},
|
||
{word: "Daughter", translation: "Дочь", pronunciation: "до́тер"}
|
||
],
|
||
colors: [
|
||
{word: "Red", translation: "Красный", pronunciation: "ред"},
|
||
{word: "Blue", translation: "Синий", pronunciation: "блю"},
|
||
{word: "Green", translation: "Зелёный", pronunciation: "грин"},
|
||
{word: "Yellow", translation: "Жёлтый", pronunciation: "йе́лоу"},
|
||
{word: "Black", translation: "Чёрный", pronunciation: "блэк"},
|
||
{word: "White", translation: "Белый", pronunciation: "уайт"},
|
||
{word: "Orange", translation: "Оранжевый", pronunciation: "о́риндж"}
|
||
]
|
||
};
|
||
|
||
let currentDay = 1;
|
||
let progress = JSON.parse(localStorage.getItem('english-progress')) || {};
|
||
|
||
function saveProgress() {
|
||
localStorage.setItem('english-progress', JSON.stringify(progress));
|
||
}
|
||
|
||
function renderDayCards() {
|
||
const container = document.getElementById('day-cards');
|
||
container.innerHTML = dayData.map(day => `
|
||
<div class="day-card ${currentDay === day.day ? 'active' : ''}" onclick="selectDay(${day.day})">
|
||
<div class="day-number">День ${day.day}</div>
|
||
<h4>${day.title}</h4>
|
||
<div class="topics">
|
||
${day.topics.map(t => `<span class="topic">${t}</span>`).join('')}
|
||
</div>
|
||
${progress[day.day] ? '<div style="margin-top:12px;color:var(--green);font-weight:600">✓ Выполнено</div>' : ''}
|
||
</div>
|
||
`).join('');
|
||
}
|
||
|
||
function selectDay(day) {
|
||
currentDay = day;
|
||
renderDayCards();
|
||
renderTasks();
|
||
document.getElementById('today').scrollIntoView({behavior: 'smooth'});
|
||
}
|
||
|
||
function renderTasks() {
|
||
const day = dayData.find(d => d.day === currentDay);
|
||
const container = document.getElementById('tasks-container');
|
||
|
||
container.innerHTML = `
|
||
<div class="card">
|
||
<h3>День ${day.day}: ${day.title}</h3>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width:${progress[day.day] ? '100' : '0'}%"></div>
|
||
</div>
|
||
${day.tasks.map((task, i) => `
|
||
<div class="task-card">
|
||
<h4>Задание ${i + 1}</h4>
|
||
<p>${task.q}</p>
|
||
<button class="btn" style="margin-top:12px;padding:8px 16px;font-size:14px" onclick="showAnswer(${day.day}, ${i})">Показать ответ</button>
|
||
<div class="answer ${progress[day.day + '-' + i] ? 'show' : ''}" id="answer-${day.day}-${i}">
|
||
<strong>Ответ:</strong> ${task.a}
|
||
</div>
|
||
</div>
|
||
`).join('')}
|
||
<button class="btn" style="width:100%;margin-top:16px" onclick="completeDay(${day.day})">
|
||
${progress[day.day] ? '✓ День выполнен' : 'Отметить как выполнен'}
|
||
</button>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
function showAnswer(day, taskIndex) {
|
||
const answerEl = document.getElementById(`answer-${day}-${taskIndex}`);
|
||
answerEl.classList.toggle('show');
|
||
progress[day + '-' + taskIndex] = true;
|
||
saveProgress();
|
||
}
|
||
|
||
function completeDay(day) {
|
||
progress[day] = true;
|
||
saveProgress();
|
||
renderDayCards();
|
||
renderTasks();
|
||
}
|
||
|
||
function showVocabTab(tab) {
|
||
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
|
||
event.target.classList.add('active');
|
||
|
||
const container = document.getElementById('vocab-container');
|
||
const words = vocabulary[tab];
|
||
|
||
container.innerHTML = words.map(w => `
|
||
<div class="vocab-card" onclick="this.querySelector('.translation').classList.toggle('show')">
|
||
<div class="word">${w.word}</div>
|
||
<div class="pronunciation">${w.pronunciation}</div>
|
||
<div class="translation">${w.translation}</div>
|
||
</div>
|
||
`).join('');
|
||
}
|
||
|
||
renderDayCards();
|
||
renderTasks();
|
||
showVocabTab('greetings');
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|