Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 446fcdfebb |
142
design.md
Normal file
142
design.md
Normal file
@ -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` любой секции/карточке — появится плавно при прокрутке.
|
||||
86
index.html
Normal file
86
index.html
Normal file
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user