v1 - прикольный лендинг

2026-07-09 04:39:47 +00:00 · 2026-07-09 04:39:47 +00:00 · 446fcdfebb
commit 446fcdfebb
parent ed13625a7a
2 changed files with 228 additions and 0 deletions
--- a/design.md
+++ b/design.md
@ -0,0 +1,142 @@
+<!-- vibe42-design-version: v2-recipes-2026-07-07 -->
+# 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 |
+
+На мобиле — h1 → 36px, h2 → 28px.
+
+## Лейаут
+
+- max-width контента: **1140px**
+- секция: `padding: 80px 24px` (мобила: `48px 20px`)
+- border-radius: `8px` (кнопки), `16px` (карточки)
+
+## Стартер `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}
+.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>`
+- **Placeholder картинки**: `https://picsum.photos/800/600`
+- **Google Fonts через `<link>`** в head
+
+## 📦 Готовые рецепты (используй их, не изобретай)
+
+### Фото без ключей
+- Детерминированные (одно и то же слово → одна и та же картинка): `https://picsum.photos/seed/coffee/800/600`. Меняй `coffee` на любое слово-seed.
+- Тематические (по тегу): `https://loremflickr.com/800/600/coffee` — тег прямо в URL (`/coffee`, `/mountains`, `/food`). Тема не гарантируется на 100%, но обычно в кассу.
+
+### Кнопка WhatsApp
+```html
+<a href="https://wa.me/7XXXXXXXXXX?text=Здравствуйте!" style="display:inline-block;background:#25D366;color:#fff;padding:12px 22px;border-radius:8px;font-weight:700;text-decoration:none">Написать в WhatsApp</a>
+```
+`7XXXXXXXXXX` — номер в межд. формате без `+`. `text=` — предзаполненное сообщение.
+
+### Форма заявки без бэкенда
+```html
+<form action="https://formsubmit.co/EMAIL" method="POST">
+  <input name="name" placeholder="Имя" required>
+  <input name="phone" placeholder="Телефон" required>
+  <button type="submit">Отправить</button>
+</form>
+```
+Скажи юзеру: замени `EMAIL` на свою почту — заявки будут приходить туда (первая заявка активирует, письмо-подтверждение придёт один раз).
+
+### Google Fonts (максимум 2 шрифта: один display + один text)
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&family=Unbounded:wght@700&display=swap" rel="stylesheet">
+```
+В CSS: `font-family:'Unbounded',sans-serif` для заголовков, `'Manrope',sans-serif` для текста.
+
+### Favicon-эмодзи (inline SVG data-URI, без файла)
+```html
+<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>☕</text></svg>">
+```
+Меняй эмодзи `☕` на подходящее теме.
+
+### Карта (Google Maps embed, без ключа)
+На maps.google.com найди место → «Поделиться» → «Встроить карту» → скопируй iframe. Вставь как есть:
+```html
+<iframe src="https://www.google.com/maps/embed?pb=..." width="100%" height="320" style="border:0;border-radius:12px" loading="lazy"></iframe>
+```
+
+### Плавные появления при скролле (IntersectionObserver)
+```html
+<style>
+.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
+.reveal.in{opacity:1;transform:none}
+</style>
+<script>
+var io=new IntersectionObserver(function(entries){
+  entries.forEach(function(e){ if(e.isIntersecting) e.target.classList.add('in'); });
+},{threshold:.15});
+document.querySelectorAll('.reveal').forEach(function(el){ io.observe(el); });
+</script>
+```
+Добавь класс `reveal` любой секции/карточке — появится плавно при прокрутке.
--- a/index.html
+++ b/index.html
@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Тестовый лендинг</title>
+<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚀</text></svg>">
+<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(--ink)}
+.container{max-width:1140px;margin:0 auto;padding:80px 24px}
+.hero{position:relative;background:url('https://picsum.photos/seed/space/1200/600') center/cover;color:var(--white);padding:120px 0;text-align:center}
+.hero::before{content:"";position:absolute;inset:0;background:rgba(15,18,24,0.6);z-index:0}
+.hero .container{position:relative;z-index:1}
+.hero h1{font-size:56px;font-weight:800;line-height:1.05;margin-bottom:16px;letter-spacing:-1px}
+.hero .accent{color:var(--cyan)}
+.hero p{font-size:20px;color:#9aa3b2;max-width:560px;margin:0 auto 36px}
+.btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:14px 32px;border-radius:8px;font-weight:700;text-decoration:none;font-size:17px;transition:opacity .2s}
+.btn:hover{opacity:.85}
+.btn-outline{background:transparent;color:var(--cyan);border:2px solid var(--cyan);margin-left:12px}
+.section h2{font-size:36px;font-weight:700;margin-bottom:12px;text-align:center}
+.section .sub{color:#9aa3b2;text-align:center;margin-bottom:48px;font-size:18px}
+.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
+.card{background:#1a1e26;border-radius:16px;padding:32px;text-align:center}
+.card .emoji{font-size:40px;margin-bottom:12px;display:block}
+.card h3{font-size:22px;font-weight:700;margin-bottom:8px}
+.card p{color:#9aa3b2;font-size:15px}
+.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
+.reveal.in{opacity:1;transform:none}
+@media (max-width:640px){
+  .hero h1{font-size:36px}
+  .section h2{font-size:28px}
+  .container{padding:48px 20px}
+  .btn-outline{margin-left:0;margin-top:12px}
+}
+</style>
+</head>
+<body>
+<section class="hero reveal"><div class="container">
+  <h1>Привет!<br>Это <span class="accent">тестовый</span> лендинг</h1>
+  <p>Простая страница на тёмном фоне с акцентным цветом. Сделано за 10 минут.</p>
+  <a class="btn" href="#features">Смотреть дальше</a>
+  <a class="btn btn-outline" href="#contact">Контакты</a>
+   <a class="btn" style="background:#25D366;color:#fff;margin-left:12px;" href="https://wa.me/77000000000?text=Привет%20!">WhatsApp</a>
+</div></section>
+
+<section id="features" class="section reveal"><div class="container">
+  <h2>Что здесь есть</h2>
+  <p class="sub">Пара блоков для красоты</p>
+  <div class="grid">
+<div class="card reveal">
+        <span class="emoji">⚡</span>
+      <h3>Быстро</h3>
+      <p>Лендинг готов за пару минут. Без серверов и сложных настроек.</p>
+    </div>
+<div class="card reveal">
+        <span class="emoji">🎨</span>
+      <h3>Красиво</h3>
+      <p>Тёмная тема с ярким акцентом. Минималистично и стильно.</p>
+    </div>
+<div class="card reveal">
+        <span class="emoji">🌍</span>
+      <h3>В интернете</h3>
+      <p>Сайт уже опубликован — можно открыть с телефона и показать друзьям.</p>
+    </div>
+  </div>
+</div></section>
+
+<section id="contact" class="section reveal"><div class="container" style="text-align:center">
+  <h2>Контакты</h2>
+  <p class="sub">Свяжитесь со мной</p>
+  <p style="color:#9aa3b2;margin-bottom:8px">✉️ example@email.com</p>
+  <p style="color:#9aa3b2;margin-bottom:32px">📱 +7 700 000 00 00</p>
+  <a class="btn" href="#">Наверх ↑</a>
+</div></section>
+<script>
+document.addEventListener('DOMContentLoaded',function(){
+  var io=new IntersectionObserver(function(entries){
+    entries.forEach(function(e){if(e.isIntersecting)e.target.classList.add('in');});
+  },{threshold:0.15});
+  document.querySelectorAll('.reveal').forEach(function(el){io.observe(el);});
+});
+</script>
+</body>
+</html>