344 lines
8.7 KiB
HTML
344 lines
8.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Spain44 — Учи испанский с нуля</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
background: linear-gradient(135deg, #ff6b35 0%, #f7c548 50%, #ff6b35 100%);
|
||
min-height: 100vh;
|
||
color: #2d2d2d;
|
||
}
|
||
|
||
.container {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
}
|
||
|
||
header {
|
||
text-align: center;
|
||
padding: 60px 20px 40px;
|
||
}
|
||
|
||
.bot-avatar {
|
||
width: 120px;
|
||
height: 120px;
|
||
background: white;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 auto 20px;
|
||
font-size: 60px;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
h1 {
|
||
font-size: 2.5rem;
|
||
color: white;
|
||
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 1.2rem;
|
||
color: white;
|
||
opacity: 0.95;
|
||
}
|
||
|
||
.cta-button {
|
||
display: inline-block;
|
||
background: #0088cc;
|
||
color: white;
|
||
text-decoration: none;
|
||
padding: 18px 40px;
|
||
border-radius: 50px;
|
||
font-size: 1.3rem;
|
||
font-weight: bold;
|
||
margin: 30px 0;
|
||
transition: transform 0.3s, box-shadow 0.3s;
|
||
box-shadow: 0 5px 20px rgba(0,136,204,0.4);
|
||
}
|
||
|
||
.cta-button:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 8px 30px rgba(0,136,204,0.6);
|
||
}
|
||
|
||
.features {
|
||
background: white;
|
||
border-radius: 20px;
|
||
padding: 40px 30px;
|
||
margin: 30px 0;
|
||
box-shadow: 0 10px 40px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.features h2 {
|
||
text-align: center;
|
||
color: #ff6b35;
|
||
margin-bottom: 30px;
|
||
font-size: 1.8rem;
|
||
}
|
||
|
||
.feature-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 25px;
|
||
}
|
||
|
||
.feature {
|
||
text-align: center;
|
||
padding: 20px;
|
||
}
|
||
|
||
.feature-icon {
|
||
font-size: 3rem;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.feature h3 {
|
||
color: #2d2d2d;
|
||
margin-bottom: 10px;
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.feature p {
|
||
color: #666;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.how-it-works {
|
||
background: white;
|
||
border-radius: 20px;
|
||
padding: 40px 30px;
|
||
margin: 30px 0;
|
||
box-shadow: 0 10px 40px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.how-it-works h2 {
|
||
text-align: center;
|
||
color: #ff6b35;
|
||
margin-bottom: 30px;
|
||
font-size: 1.8rem;
|
||
}
|
||
|
||
.steps {
|
||
counter-reset: step;
|
||
}
|
||
|
||
.step {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
margin-bottom: 25px;
|
||
padding: 15px;
|
||
background: #fff9f5;
|
||
border-radius: 12px;
|
||
border-left: 4px solid #ff6b35;
|
||
}
|
||
|
||
.step::before {
|
||
counter-increment: step;
|
||
content: counter(step);
|
||
background: #ff6b35;
|
||
color: white;
|
||
width: 35px;
|
||
height: 35px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: bold;
|
||
margin-right: 15px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.step h3 {
|
||
color: #2d2d2d;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.step p {
|
||
color: #666;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.testimonials {
|
||
background: white;
|
||
border-radius: 20px;
|
||
padding: 40px 30px;
|
||
margin: 30px 0;
|
||
box-shadow: 0 10px 40px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.testimonials h2 {
|
||
text-align: center;
|
||
color: #ff6b35;
|
||
margin-bottom: 30px;
|
||
font-size: 1.8rem;
|
||
}
|
||
|
||
.testimonial {
|
||
background: #fff9f5;
|
||
padding: 20px;
|
||
border-radius: 12px;
|
||
margin-bottom: 20px;
|
||
border-left: 4px solid #f7c548;
|
||
}
|
||
|
||
.testimonial p {
|
||
color: #444;
|
||
line-height: 1.6;
|
||
font-style: italic;
|
||
}
|
||
|
||
.testimonial-author {
|
||
margin-top: 10px;
|
||
font-weight: bold;
|
||
color: #ff6b35;
|
||
}
|
||
|
||
.final-cta {
|
||
text-align: center;
|
||
padding: 40px 20px;
|
||
}
|
||
|
||
footer {
|
||
text-align: center;
|
||
padding: 30px;
|
||
color: white;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
h1 {
|
||
font-size: 2rem;
|
||
}
|
||
.subtitle {
|
||
font-size: 1rem;
|
||
}
|
||
.cta-button {
|
||
padding: 15px 30px;
|
||
font-size: 1.1rem;
|
||
}
|
||
.features, .how-it-works, .testimonials {
|
||
padding: 25px 20px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<div class="bot-avatar">🇪🇸</div>
|
||
<h1>Spain44 Bot</h1>
|
||
<p class="subtitle">Твой персональный помощник для изучения испанского языка с нуля</p>
|
||
<a href="https://t.me/Spain44_bot" class="cta-button">
|
||
🚀 Запустить бота
|
||
</a>
|
||
</header>
|
||
|
||
<section class="features">
|
||
<h2>Что умеет бот?</h2>
|
||
<div class="feature-grid">
|
||
<div class="feature">
|
||
<div class="feature-icon">📚</div>
|
||
<h3>Уроки с нуля</h3>
|
||
<p>Пошаговые уроки от алфавита до разговорной речи</p>
|
||
</div>
|
||
<div class="feature">
|
||
<div class="feature-icon">🎯</div>
|
||
<h3>Практика каждый день</h3>
|
||
<p>Ежедневные задания и упражнения для закрепления</p>
|
||
</div>
|
||
<div class="feature">
|
||
<div class="feature-icon">💬</div>
|
||
<h3>Разговорные фразы</h3>
|
||
<p>Полезные фразы для путешествий и общения</p>
|
||
</div>
|
||
<div class="feature">
|
||
<div class="feature-icon">🎮</div>
|
||
<h3>Игры и тесты</h3>
|
||
<p>Интерактивные игры для изучения слов</p>
|
||
</div>
|
||
<div class="feature">
|
||
<div class="feature-icon">📊</div>
|
||
<h3>Отслеживание прогресса</h3>
|
||
<p>Следи за своими успехами и достижениями</p>
|
||
</div>
|
||
<div class="feature">
|
||
<div class="feature-icon">🔊</div>
|
||
<h3>Произношение</h3>
|
||
<p>Аудио для правильной постановки произношения</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="how-it-works">
|
||
<h2>Как начать?</h2>
|
||
<div class="steps">
|
||
<div class="step">
|
||
<div>
|
||
<h3>Нажми «Запустить»</h3>
|
||
<p>Перейди в бота и нажми кнопку Start / Запустить</p>
|
||
</div>
|
||
</div>
|
||
<div class="step">
|
||
<div>
|
||
<h3>Пройди тест на уровень</h3>
|
||
<p>Бот определит твой уровень и подберёт программу</p>
|
||
</div>
|
||
</div>
|
||
<div class="step">
|
||
<div>
|
||
<h3>Занимайся каждый день</h3>
|
||
<p>15-20 минут в день — и ты заговоришь по-испански!</p>
|
||
</div>
|
||
</div>
|
||
<div class="step">
|
||
<div>
|
||
<h3>Получай награды</h3>
|
||
<p>Зарабатывай баллы и открывай новые уровни</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="testimonials">
|
||
<h2>Отзывы учеников</h2>
|
||
<div class="testimonial">
|
||
<p>«Начал с нуля, через 2 месяца уже могу поддержать разговор в путешествии! Бот реально работает.»</p>
|
||
<div class="testimonial-author">— Алексей, 28 лет</div>
|
||
</div>
|
||
<div class="testimonial">
|
||
<p>«Удобно, что можно заниматься в любое время. 15 минут в метро — и прогресс идёт!»**</p>
|
||
<div class="testimonial-author">— Мария, 34 года</div>
|
||
</div>
|
||
<div class="testimonial">
|
||
<p>«Игровой формат не даёт заскучать. Дети тоже подтянули испанский в школе.»</p>
|
||
<div class="testimonial-author">— Дмитрий, 42 года</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="final-cta">
|
||
<a href="https://t.me/Spain44_bot" class="cta-button">
|
||
🇪🇸 Начать учиться бесплатно
|
||
</a>
|
||
</div>
|
||
|
||
<footer>
|
||
<p>Spain44 Bot © 2026</p>
|
||
<p>¡Vamos a aprender español! 🎉</p>
|
||
</footer>
|
||
</div>
|
||
</body>
|
||
</html>
|