temp/na-kakuyu-temu-mozhno-sozdat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Iceland travel landing with parallax landscapes

Browse Source
This commit is contained in:
temp 2026-08-17 10:41:18 +00:00
parent baa3375cee
commit d1848333cc
3 changed files with 393 additions and 308 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
AGENTS.md
View File

@ -23,14 +23,14 @@ Workspace юзера `temp`. Это **учебная среда**, где обы
| Что хочет юзер | Стек (ЖЁСТКО) | Рецепт |
|----------------|---------------|--------|
| Сайт, лендинг, визитка, портфолио, меню, афиша, waitlist | **Статика:** `index.html` + `style.css` + `script.js`, ванильный JS. БЕЗ сборки, БЕЗ React/Vue/Vite, БЕЗ npm. Tailwind — только CDN. | старт с `design.md`, публикация в `pages` |
| Веб сайт фронтенд на javascript | **Статика:** `index.html` + `style.css` + `script.js` + еще файлы для фронтенда, ванильный JS. БЕЗ сборки, БЕЗ React/Vue/Vite, БЕЗ npm. Tailwind или bootstrap — только CDN. | старт с `design.md`, публикация в `pages` |
| Telegram-бот | **Node.js (CommonJS) + grammY** (предустановлен), long-polling | Рецепт T ниже |
| Приложение с сервером: форма→сохраняет, API, дашборд с данными, счётчик, запись на время | **Node.js (CommonJS), сервер на `node:http` БЕЗ зависимостей + хранение в `data.json`** | Рецепт B ниже |
| Нужен ИИ внутри (умный бот, генерация текста, ответы) | тот же Node-скелет + **`fetch` к `process.env.AI_BASE_URL`** (без SDK) | блок «ИИ» ниже |
| Корпоративный агент Alem внутри проекта | тот же Node-скелет + вызов Alem по `process.env.ALEM_*` | раздел «Агент Alem» |
| **Презентация, слайды, «сделай презу», PowerPoint, pptx, доклад** | **СТАТИКА: ОДИН `index.html` + pptxgenjs с CDN. Бэкенд НЕ поднимать, ИИ в рантайме НЕ звать** | раздел «ПРЕЗЕНТАЦИИ» — бери оттуда скелет целиком |
| **Презентация, слайды, «сделай презу», PowerPoint, pptx, доклад** | **СТАТИКА: ОДИН `index.html` + pptxgenjs с CDN. Бэкенд НЕ поднимать, если нужно сделать эмуляцию на фронтенде javascript, ИИ в рантайме НЕ звать** | раздел «ПРЕЗЕНТАЦИИ» — бери оттуда скелет целиком |
| Разобрать документы юзера (Excel / Word / PDF): свод, отчёт, выжимка | Предустановленные `xlsx` / `mammoth` / `pdf-parse` | раздел «ПРОЕКТ ПРИНИМАЕТ ФАЙЛЫ ЮЗЕРОВ» |
| **Учёт и трекер:** склад, заявки, журнал, задачи, СИЗ, путевые листы, сбор статистики, отчётность | **Node.js + `node:http` + `data.json`** — тот же Рецепт B, но несколько сущностей и статусы | Рецепт B + «УЧЁТНАЯ СИСТЕМА» ниже |
| **Учёт и трекер:** склад, заявки, журнал, задачи, СИЗ, путевые листы, сбор статистики, отчётность и любые другие решения | **Node.js + `node:http` + `data.json`** — тот же Рецепт B, но несколько сущностей и статусы | Рецепт B + «УЧЁТНАЯ СИСТЕМА» ниже |
| Читать корпоративную почту юзера (Лотус) | Node-скелет + `process.env.LOTUS_*` | раздел «бот, читающий почту (Lotus)» |
**Сначала таблица, потом код.** Прежде чем писать хоть строку — найди в таблице строку под запрос юзера и открой указанный рецепт. Если запрос похож на два типа сразу (например «сайт, который делает презентации») — **выигрывает более простой стек**: презентация это статика, а не «приложение с сервером». Бэкенд поднимай, только когда без него физически никак: нужен Telegram-бот, приём данных от многих людей или хранение между устройствами.
@ -241,7 +241,7 @@ echo '{"Июль":[["Показатель","Значение"],["Пользов
---
## 📊 УЧЁТНАЯ СИСТЕМА (склад, заявки, журнал, задачи, СИЗ, путевые листы)
## 📊 УЧЁТНАЯ СИСТЕМА (склад, заявки, журнал, задачи, СИЗ, путевые листы и любые другия решения)
Юзер просит «вести учёт», «трекер», «журнал», «заявки», «склад», «отчёт по сотрудникам»? Это Рецепт B, но с несколькими сущностями и статусами. Не изобретай схему — бери эту.
@ -400,8 +400,9 @@ if (req.method === "POST" && req.url === "/api/upload") {
- Афиша мероприятия (концерт, день рождения, мастер-класс)
- Меню заведения / прайс услуг
- Лендинг продукта или будущего проекта (waitlist)
- МОжешь придумать варианты
3. Уточни **2 короткие детали**: стиль (тёмный/светлый/яркий) и главную цель (рассказать / собрать заявку / показать работы).
4. Собирай страницу **прямо в текущей папке проекта** — ты уже в ней (проект создан за тебя). Создавай `index.html`/`style.css`/`script.js` тут же. **НЕ запускай `./new-project`** и не делай `cd` в другие папки. Не спрашивай разрешения на каждый шаг.
4. Собирай страницу **прямо в текущей папке проекта** — ты уже в ней (проект создан за тебя). Создавай `index.html`/`style.css`/`script.js` и другие файлы тут же. **НЕ запускай `./new-project`** и не делай `cd` в другие папки. Не спрашивай разрешения на каждый шаг.
---
@ -441,7 +442,7 @@ if (req.method === "POST" && req.url === "/api/upload") {
## 💬 ЕСЛИ ЮЗЕР ОТВЕЧАЕТ РАСПЛЫВЧАТО
Юзер говорит «сделай что-нибудь» / «ну хз» / «сюрприз» → **не делай ничего абстрактного**.
Юзер говорит «сделай что-нибудь» / «ну хз» / «сюрприз» → **придумай что-то, но четкое и точное, не абстрактное**.
Скажи: «Давай определимся, я задам 3 коротких вопроса:
1. Это для тебя лично, для проекта/бизнеса, или для события?
@ -621,7 +622,7 @@ git push origin HEAD:pages
## ⚠️ ЖЕЛЕЗНЫЕ ПРАВИЛА (НЕ нарушать никогда)
1. **Дефолт — статика (HTML + CSS + JS).** Сайты и лендинги собирай статикой, публикация через `pages`.
1. **Дефолт — статика (HTML + CSS + JS), можешь добавить анимацию и паралакс эффекты.** Сайты и лендинги собирай можешь добавить анимацию и паралакс эффекты, публикация через `pages`.
2. **Бэкенд разрешён ТОЛЬКО через команду `run`** (раздел ниже). НИКОГДА не запускай серверы сам в шелле (`node server.js`, `npm start`, `python bot.py`) — шелл живёт на общем хосте: процесс убьют, а твоя сессия повиснет.
3. **Никакой аутентификации / OAuth / JWT.**
4. **Никакого Docker, nginx, sudo, системных настроек.**
@ -823,7 +824,7 @@ git push origin HEAD:pages
- ❌ `git init` в workspace root
- ❌ `npm install` с прод-зависимостями (express/mongoose/pg/prisma/next/nuxt)
- ❌ Поднимать бэкенд там, где хватает статики (лендинг, визитка, презентация) — сверься с таблицей стека
- ❌ Поднимать бэкенд там, где хватает статики (сайт с фронтом можно на javascript ) — сверься с таблицей стека
- ❌ Ставить прод-фреймворки (express / nest / next / django) — сервер только на `node:http`
- ❌ Использовать `gh` CLI или GitHub API
- ❌ Вызывать Gitea Pages-API (его нет)
@ -832,9 +833,7 @@ git push origin HEAD:pages
- ❌ Задавать юзеру 10 вопросов подряд (максимум 2-3 за раз)
- ❌ **Публиковать сам (push в `pages`) без просьбы юзера / кнопки «Опубликовать»** — до публикации показывай результат только через Предпросмотр
- ❌ **Запускать `./new-project` или уходить `cd` из текущей папки проекта** на обычный запрос «сделай сайт» — ты УЖЕ в папке проекта, собирай тут; иначе сайт уедет не в тот проект
- ❌ Показывать юзеру голый код больше 1 раза — ему важен результат, а не как написано
- ❌ Предлагать «давай сначала дизайн в Figma» — мы делаем сразу в HTML
- ❌ Говорить «это сложно» — переформулируй в простое
- ❌ Предлагать «давай сначала дизайн в Figma» — мы делаем сразу в HTML/CSS/JS
- ❌ Зависать в обсуждениях — сделай первый вариант грубо, потом итерируй
---

39
design.md
View File

@ -1,33 +1,18 @@
# AirSound Pro — Дизайн-система
# Iceland Travel — Дизайн-система
## Цвета
- Фон: `#000000` (глубокий чёрный)
- Текст основной: `#F5F5F7` (светло-серый Apple)
- Текст вторичный: `#86868B` (приглушённый серый)
- Акцент 1: `#6E6E73` (серый металл)
- Акцент 2: `#2997FF` (Apple blue)
- Градиент: `linear-gradient(135deg, #667eea 0%, #764ba2 100%)`
- Фон: `#0B0F19` (глубокий тёмно-синий)
- Текст: `#FFFFFF`
- Текст вторичный: `#94A3B8`
- Акцент: `#00D4FF` (северное сияние)
- Акцент 2: `#7C3AED` (фиолетовый закат)
## Типографика
- Заголовки: `-apple-system, BlinkMacSystemFont, "SF Pro Display"`
- Размер H1: `clamp(48px, 8vw, 96px)`
- Размер H2: `clamp(32px, 5vw, 64px)`
- Текст: `17px`, line-height `1.5`
- Заголовки: `-apple-system, "SF Pro Display"`
- H1: `clamp(56px, 9vw, 112px)`
- H2: `clamp(40px, 6vw, 72px)`
## Эффекты
- Параллакс: `transform: translateZ()` + `perspective`
- Блюр: `backdrop-filter: blur(20px)`
- Анимация: `transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1)`
- Тени: мягкие, рассеянные `box-shadow: 0 20px 40px rgba(0,0,0,0.4)`
## Структура лендинга
1. **Hero** — продукт на фоне градиента, крупный заголовок, CTA
2. **Features** — 3 карточки преимуществ с иконками
3. **Showcase** — полноэкранная секция с параллаксом изображений
4. **Tech Specs** — характеристики в виде сетки
5. **CTA / Footer** — финальный призыв к действию
## Изображения
- Picsum: `https://picsum.photos/1920/1080?random=1`
- Unsplash Source: `https://images.unsplash.com/photo-...`
- Градиентные фоны вместо тяжёлых фото
- Параллакс: multiple layers с разной скоростью
- Градиенты: `linear-gradient(180deg, transparent, #0B0F19)`
- Анимации: `cubic-bezier(0.25, 1, 0.5, 1)`

621
index.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AirSound Pro — Звук будущего</title>
<title>Исландия — Земля льда и пламени</title>
<style>
* {
margin: 0;
@ -12,19 +12,18 @@
}
:root {
--bg: #000000;
--text: #F5F5F7;
--text-muted: #86868B;
--accent: #2997FF;
--card-bg: rgba(28, 28, 30, 0.8);
--bg: #0B0F19;
--text: #FFFFFF;
--text-muted: #94A3B8;
--accent: #00D4FF;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
background: var(--bg);
color: var(--text);
overflow-x: hidden;
line-height: 1.5;
line-height: 1.6;
}
/* Навигация */
@ -34,301 +33,371 @@
left: 0;
right: 0;
z-index: 1000;
background: rgba(0, 0, 0, 0.8);
background: rgba(11, 15, 25, 0.9);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: 12px 0;
padding: 16px 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.nav-container {
max-width: 1200px;
max-width: 1400px;
margin: 0 auto;
padding: 0 24px;
padding: 0 32px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 20px;
font-weight: 600;
letter-spacing: -0.5px;
font-size: 24px;
font-weight: 700;
letter-spacing: -1px;
background: linear-gradient(135deg, #00D4FF, #7C3AED);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.nav-links {
display: flex;
gap: 32px;
gap: 40px;
}
.nav-links a {
color: var(--text-muted);
text-decoration: none;
font-size: 14px;
font-size: 15px;
font-weight: 500;
transition: color 0.3s;
text-transform: uppercase;
letter-spacing: 1px;
}
.nav-links a:hover {
color: var(--text);
color: var(--accent);
}
/* Hero секция */
.hero {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: radial-gradient(ellipse at center, #1a1a2e 0%, #000000 70%);
}
.hero-bg {
.parallax-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 120%;
background-size: cover;
background-position: center;
will-change: transform;
}
.hero-bg1 {
background-image: url('https://picsum.photos/1920/1200?random=10');
z-index: 1;
}
.hero-bg2 {
background-image: url('https://picsum.photos/1920/1200?random=11');
z-index: 2;
opacity: 0.3;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://picsum.photos/1920/1080?random=1') center/cover;
opacity: 0.3;
transform: translateZ(-1px) scale(2);
will-change: transform;
background: linear-gradient(180deg, rgba(11,15,25,0.3) 0%, var(--bg) 100%);
z-index: 3;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 800px;
z-index: 4;
text-align: center;
max-width: 900px;
padding: 0 24px;
}
.hero h1 {
font-size: clamp(48px, 10vw, 96px);
font-weight: 700;
letter-spacing: -2px;
margin-bottom: 16px;
background: linear-gradient(135deg, #F5F5F7 0%, #86868B 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: clamp(56px, 12vw, 128px);
font-weight: 800;
letter-spacing: -4px;
line-height: 1;
margin-bottom: 24px;
text-shadow: 0 20px 60px rgba(0,0,0,0.5);
opacity: 0;
transform: translateY(30px);
animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
animation-delay: 0.2s;
transform: translateY(40px);
animation: fadeUp 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
animation-delay: 0.3s;
}
.hero p {
font-size: clamp(20px, 3vw, 28px);
color: var(--text-muted);
margin-bottom: 40px;
font-weight: 300;
opacity: 0;
transform: translateY(30px);
animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
animation-delay: 0.4s;
}
.cta-buttons {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
opacity: 0;
transform: translateY(30px);
animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
transform: translateY(40px);
animation: fadeUp 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
animation-delay: 0.6s;
}
.btn {
padding: 16px 32px;
display: inline-block;
padding: 18px 42px;
border-radius: 980px;
font-size: 17px;
font-weight: 500;
font-weight: 600;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
cursor: pointer;
border: none;
text-transform: uppercase;
letter-spacing: 1px;
}
.btn-primary {
background: var(--accent);
background: linear-gradient(135deg, var(--accent), #7C3AED);
color: white;
box-shadow: 0 10px 40px rgba(0, 212, 255, 0.3);
}
.btn-primary:hover {
background: #147CE5;
transform: scale(1.05);
transform: translateY(-4px) scale(1.02);
box-shadow: 0 20px 60px rgba(0, 212, 255, 0.5);
}
.btn-secondary {
background: transparent;
color: var(--accent);
border: 2px solid var(--accent);
}
.btn-secondary:hover {
background: var(--accent);
color: white;
}
/* Features */
.features {
padding: 120px 24px;
max-width: 1200px;
/* Destinations */
.destinations {
padding: 140px 24px;
max-width: 1400px;
margin: 0 auto;
}
.section-title {
font-size: clamp(32px, 5vw, 56px);
font-weight: 700;
.section-header {
text-align: center;
margin-bottom: 80px;
letter-spacing: -1px;
}
.features-grid {
.section-label {
color: var(--accent);
font-size: 14px;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 16px;
}
.section-title {
font-size: clamp(40px, 6vw, 72px);
font-weight: 700;
letter-spacing: -2px;
}
.destinations-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
gap: 32px;
}
.feature-card {
background: var(--card-bg);
border-radius: 24px;
padding: 40px;
text-align: center;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
border: 1px solid rgba(255,255,255,0.05);
}
.feature-card:hover {
transform: translateY(-10px);
}
.feature-icon {
font-size: 48px;
margin-bottom: 24px;
}
.feature-card h3 {
font-size: 24px;
margin-bottom: 12px;
}
.feature-card p {
color: var(--text-muted);
font-size: 17px;
}
/* Parallax Showcase */
.showcase {
.destination-card {
position: relative;
height: 100vh;
height: 500px;
border-radius: 24px;
overflow: hidden;
cursor: pointer;
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.destination-card:hover {
transform: translateY(-12px);
}
.destination-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.destination-card:hover .destination-img {
transform: scale(1.1);
}
.destination-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 40px;
background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, transparent 100%);
}
.destination-card h3 {
font-size: 28px;
margin-bottom: 8px;
letter-spacing: -1px;
}
.destination-card p {
color: var(--text-muted);
font-size: 16px;
}
/* Parallax Section */
.parallax-section {
position: relative;
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin: 80px 0;
}
.showcase-bg {
.parallax-bg {
position: absolute;
top: 0;
top: -20%;
left: 0;
width: 100%;
height: 120%;
background: url('https://picsum.photos/1920/1200?random=2') center/cover;
transform: translateY(0);
height: 140%;
background-image: url('https://picsum.photos/1920/1200?random=12');
background-size: cover;
background-position: center;
z-index: 1;
will-change: transform;
}
.showcase-overlay {
.parallax-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
background: rgba(11, 15, 25, 0.7);
z-index: 2;
}
.showcase-content {
.parallax-content {
position: relative;
z-index: 2;
z-index: 3;
text-align: center;
max-width: 700px;
max-width: 800px;
padding: 0 24px;
}
.showcase-content h2 {
font-size: clamp(40px, 6vw, 72px);
.parallax-content h2 {
font-size: clamp(40px, 7vw, 80px);
font-weight: 700;
letter-spacing: -2px;
margin-bottom: 24px;
letter-spacing: -1.5px;
}
.showcase-content p {
.parallax-content p {
font-size: 20px;
color: var(--text-muted);
margin-bottom: 32px;
}
/* Tech Specs */
.specs {
/* Stats */
.stats {
padding: 120px 24px;
background: #0a0a0a;
background: #080B14;
}
.specs-container {
max-width: 1000px;
.stats-container {
max-width: 1200px;
margin: 0 auto;
}
.specs-grid {
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 40px;
margin-top: 60px;
}
.spec-item {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 60px;
text-align: center;
}
.spec-value {
font-size: clamp(36px, 4vw, 56px);
font-weight: 700;
background: linear-gradient(135deg, var(--accent) 0%, #9B51E0 100%);
.stat-item h3 {
font-size: clamp(48px, 6vw, 80px);
font-weight: 800;
background: linear-gradient(135deg, var(--accent), #7C3AED);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 8px;
margin-bottom: 12px;
}
.spec-label {
.stat-item p {
color: var(--text-muted);
font-size: 15px;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 1px;
letter-spacing: 2px;
}
/* CTA Section */
.cta-section {
padding: 120px 24px;
/* Gallery */
.gallery {
padding: 140px 24px;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 300px);
gap: 16px;
max-width: 1400px;
margin: 0 auto;
}
.gallery-item {
border-radius: 16px;
overflow: hidden;
position: relative;
}
.gallery-item:first-child {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
.gallery-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.gallery-item:hover .gallery-img {
transform: scale(1.1);
}
/* CTA */
.cta {
padding: 140px 24px;
text-align: center;
background: linear-gradient(180deg, #000000 0%, #1a1a2e 100%);
background: linear-gradient(180deg, var(--bg) 0%, #1a1f2e 100%);
}
.cta-section h2 {
font-size: clamp(36px, 5vw, 64px);
.cta h2 {
font-size: clamp(40px, 6vw, 72px);
font-weight: 700;
letter-spacing: -2px;
margin-bottom: 24px;
}
.cta-section p {
.cta p {
font-size: 20px;
color: var(--text-muted);
margin-bottom: 40px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
margin: 0 auto 48px;
}
/* Footer */
@ -337,14 +406,13 @@
border-top: 1px solid rgba(255,255,255,0.1);
text-align: center;
color: var(--text-muted);
font-size: 14px;
}
.footer-links {
display: flex;
justify-content: center;
gap: 24px;
margin-bottom: 24px;
gap: 32px;
margin-bottom: 32px;
flex-wrap: wrap;
}
@ -368,8 +436,8 @@
.reveal {
opacity: 0;
transform: translateY(40px);
transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
transform: translateY(50px);
transition: all 1s cubic-bezier(0.25, 1, 0.5, 1);
}
.reveal.active {
@ -383,9 +451,23 @@
display: none;
}
.hero-bg,
.showcase-bg {
background-attachment: scroll !important;
.gallery-grid {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.gallery-item:first-child {
grid-column: 1;
grid-row: 1;
height: 300px;
}
.destinations-grid {
grid-template-columns: 1fr;
}
.stats-grid {
gap: 40px;
}
}
</style>
@ -394,153 +476,172 @@
<!-- Навигация -->
<nav>
<div class="nav-container">
<div class="logo"> AirSound Pro</div>
<div class="logo">ICELAND</div>
<div class="nav-links">
<a href="#features">Возможности</a>
<a href="#showcase">Галерея</a>
<a href="#specs">Характеристики</a>
<a href="#buy">Купить</a>
<a href="#destinations">Места</a>
<a href="#about">О стране</a>
<a href="#gallery">Галерея</a>
<a href="#book">Забронировать</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="hero">
<div class="hero-bg" id="heroBg"></div>
<div class="parallax-layer hero-bg1" id="heroBg1"></div>
<div class="parallax-layer hero-bg2" id="heroBg2"></div>
<div class="hero-overlay"></div>
<div class="hero-content">
<h1>Звук за пределами реальности</h1>
<p>Погрузитесь в мир идеального звучания с AirSound Pro</p>
<div class="cta-buttons">
<a href="#buy" class="btn btn-primary">Купить от 29 990 ₸</a>
<a href="#features" class="btn btn-secondary">Узнать больше</a>
<h1>Земля льда и пламени</h1>
<p>Открой для себя самую загадочную страну мира</p>
<a href="#book" class="btn btn-primary">Начать путешествие</a>
</div>
</section>
<!-- Destinations -->
<section class="destinations" id="destinations">
<div class="section-header reveal">
<p class="section-label">Направления</p>
<h2 class="section-title">Места, которые захватывают дух</h2>
</div>
<div class="destinations-grid">
<div class="destination-card reveal">
<img src="https://picsum.photos/600/800?random=20" alt="Водопад" class="destination-img">
<div class="destination-content">
<h3>Водопад Гюдльфосс</h3>
<p>Один из самых красивых водопадов Исландии</p>
</div>
</div>
<div class="destination-card reveal">
<img src="https://picsum.photos/600/800?random=21" alt="Гейзер" class="destination-img">
<div class="destination-content">
<h3>Долина гейзеров</h3>
<p>Гейзер Строккур извергается каждые 5-10 минут</p>
</div>
</div>
<div class="destination-card reveal">
<img src="https://picsum.photos/600/800?random=22" alt="Лагуна" class="destination-img">
<div class="destination-content">
<h3>Голубая лагуна</h3>
<p>Геотермальный спа-курорт мирового класса</p>
</div>
</div>
<div class="destination-card reveal">
<img src="https://picsum.photos/600/800?random=23" alt="Северное сияние" class="destination-img">
<div class="destination-content">
<h3>Северное сияние</h3>
<p>Природное явление, которое нужно увидеть хотя бы раз</p>
</div>
</div>
</div>
</section>
<!-- Features -->
<section class="features" id="features">
<h2 class="section-title reveal">Технологии будущего</h2>
<div class="features-grid">
<div class="feature-card reveal">
<div class="feature-icon">🎧</div>
<h3>Активное шумоподавление</h3>
<p>Поглощение до 99% внешнего шума для полного погружения в музыку</p>
<!-- Parallax Section -->
<section class="parallax-section" id="about">
<div class="parallax-bg" id="parallaxBg"></div>
<div class="parallax-overlay"></div>
<div class="parallax-content reveal">
<h2>Приключение всей жизни</h2>
<p>Вулканы, ледники, водопады, гейзеры и северное сияние — Исландия собрала все чудеса природы в одном месте</p>
<a href="#book" class="btn btn-primary">Выбрать тур</a>
</div>
<div class="feature-card reveal">
<div class="feature-icon">🔋</div>
<h3>40 часов работы</h3>
<p>Невероятная автономность без подзарядки в течение дней</p>
</section>
<!-- Stats -->
<section class="stats">
<div class="stats-container">
<div class="stats-grid">
<div class="stat-item reveal">
<h3>10K+</h3>
<p>Водопадов</p>
</div>
<div class="feature-card reveal">
<div class="feature-icon">🎵</div>
<h3>Пространственное аудио</h3>
<p>Эффект присутствия в концертном зале у вас дома</p>
<div class="stat-item reveal">
<h3>130</h3>
<p>Вулканов</p>
</div>
<div class="feature-card reveal">
<div class="feature-icon">💧</div>
<h3>Влагозащита IPX4</h3>
<p>Защита от пота и брызг для активных тренировок</p>
<div class="stat-item reveal">
<h3>600</h3>
<p>Горячих источников</p>
</div>
<div class="feature-card reveal">
<div class="feature-icon">⚡</div>
<h3>Быстрая зарядка</h3>
<p>5 минут зарядки = 2 часа прослушивания</p>
<div class="stat-item reveal">
<h3>24/7</h3>
<p>Северное сияние зимой</p>
</div>
<div class="feature-card reveal">
<div class="feature-icon">📱</div>
<h3>Мгновенное подключение</h3>
<p>Автоматическое сопряжение со всеми устройствами Apple</p>
</div>
</div>
</section>
<!-- Parallax Showcase -->
<section class="showcase" id="showcase">
<div class="showcase-bg" id="showcaseBg"></div>
<div class="showcase-overlay"></div>
<div class="showcase-content reveal">
<h2>Дизайн, который вдохновляет</h2>
<p>Премиальные материалы, безупречная эргономика и внимание к каждой детали</p>
<a href="#buy" class="btn btn-primary">Смотреть цвета</a>
<!-- Gallery -->
<section class="gallery" id="gallery">
<div class="section-header reveal">
<p class="section-label">Галерея</p>
<h2 class="section-title">Моменты, которые останутся навсегда</h2>
</div>
</section>
<!-- Tech Specs -->
<section class="specs" id="specs">
<div class="specs-container">
<h2 class="section-title reveal">Характеристики</h2>
<div class="specs-grid">
<div class="spec-item reveal">
<div class="spec-value">40ч</div>
<div class="spec-label">Время работы</div>
<div class="gallery-grid">
<div class="gallery-item reveal">
<img src="https://picsum.photos/1200/800?random=30" alt="Пейзаж" class="gallery-img">
</div>
<div class="spec-item reveal">
<div class="spec-value">40мм</div>
<div class="spec-label">Драйверы</div>
<div class="gallery-item reveal">
<img src="https://picsum.photos/600/600?random=31" alt="Горы" class="gallery-img">
</div>
<div class="spec-item reveal">
<div class="spec-value">250г</div>
<div class="spec-label">Вес</div>
<div class="gallery-item reveal">
<img src="https://picsum.photos/600/600?random=32" alt="Океан" class="gallery-img">
</div>
<div class="spec-item reveal">
<div class="spec-value">BT 5.3</div>
<div class="spec-label">Bluetooth</div>
<div class="gallery-item reveal">
<img src="https://picsum.photos/600/600?random=33" alt="Ледник" class="gallery-img">
</div>
<div class="spec-item reveal">
<div class="spec-value">ANC</div>
<div class="spec-label">Шумоподавление</div>
</div>
<div class="spec-item reveal">
<div class="spec-value">USB-C</div>
<div class="spec-label">Зарядка</div>
<div class="gallery-item reveal">
<img src="https://picsum.photos/600/600?random=34" alt="Пляж" class="gallery-img">
</div>
<div class="gallery-item reveal">
<img src="https://picsum.photos/600/600?random=35" alt="Фьорд" class="gallery-img">
</div>
</div>
</section>
<!-- CTA -->
<section class="cta-section" id="buy">
<h2 class="reveal">Готовы к новому уровню?</h2>
<p class="reveal">AirSound Pro уже ждут вас. Закажите сегодня и получите бесплатную доставку.</p>
<div class="cta-buttons reveal">
<button class="btn btn-primary">Заказать сейчас</button>
<button class="btn btn-secondary">Найти магазин</button>
</div>
<section class="cta" id="book">
<h2 class="reveal">Готовы к приключению?</h2>
<p class="reveal">Забронируйте тур в Исландию прямо сейчас и получите скидку 20% на групповые поездки</p>
<a href="#" class="btn btn-primary reveal">Забронировать тур</a>
</section>
<!-- Footer -->
<footer>
<div class="footer-links">
<a href="#">Политика конфиденциальности</a>
<a href="#">Условия использования</a>
<a href="#">Гарантия</a>
<a href="#">О нас</a>
<a href="#">Туры</a>
<a href="#">Блог</a>
<a href="#">Контакты</a>
<a href="#">Политика конфиденциальности</a>
</div>
<p>&copy; 2026 AirSound. Все права защищены.</p>
<p>&copy; 2026 Iceland Travel. Все права защищены.</p>
</footer>
<script>
// Параллакс эффект для Hero
const heroBg = document.getElementById('heroBg');
// Многослойный параллакс для Hero
const heroBg1 = document.getElementById('heroBg1');
const heroBg2 = document.getElementById('heroBg2');
window.addEventListener('scroll', () => {
const scrolled = window.pageYOffset;
if (scrolled < window.innerHeight) {
heroBg.style.transform = `translateY(${scrolled * 0.5}px) scale(${1 + scrolled * 0.0005})`;
heroBg1.style.transform = `translateY(${scrolled * 0.6}px) scale(${1 + scrolled * 0.0008})`;
heroBg2.style.transform = `translateY(${scrolled * 0.3}px) scale(${1 + scrolled * 0.0005})`;
}
});
// Параллакс для Showcase
const showcaseBg = document.getElementById('showcaseBg');
const showcase = document.getElementById('showcase');
// Параллакс для средней секции
const parallaxBg = document.getElementById('parallaxBg');
const parallaxSection = document.getElementById('parallaxSection');
window.addEventListener('scroll', () => {
const rect = showcase.getBoundingClientRect();
const rect = document.querySelector('.parallax-section').getBoundingClientRect();
if (rect.top < window.innerHeight && rect.bottom > 0) {
const offset = (window.innerHeight - rect.top) * 0.3;
showcaseBg.style.transform = `translateY(${offset}px)`;
const offset = (window.innerHeight - rect.top) * 0.25;
parallaxBg.style.transform = `translateY(${offset}px)`;
}
});
// Анимация появления при скролле
// Анимация появления
const reveals = document.querySelectorAll('.reveal');
function checkReveal() {
reveals.forEach(el => {
@ -554,7 +655,7 @@
window.addEventListener('scroll', checkReveal);
checkReveal();
// Плавный скролл к якорям
// Плавный скролл
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();