Heritage: лендинг, единый дизайн приложения и фронтенда, обновлённый README
This commit is contained in:
german
@@ -93,14 +93,38 @@ family-tree/
|
||||
├── db/
|
||||
│ ├── schema.sql # SQL-схема базы данных
|
||||
│ └── seed.sql # тестовые данные
|
||||
├── landing/
|
||||
│ └── index.html # лендинг Heritage (статичный, готов к открытию)
|
||||
├── preview/
|
||||
│ └── index.html # автономное HTML-превью
|
||||
│ └── index.html # автономное HTML-превью приложения-дерева
|
||||
├── design/ # исходный макет (Heritage Landing.dc.html + скриншоты)
|
||||
├── docker-compose.yml
|
||||
└── README.md
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Дизайн-система Heritage
|
||||
|
||||
Единый визуальный язык лендинга и приложения:
|
||||
|
||||
| Назначение | Цвет |
|
||||
|-----------------------|------------|
|
||||
| Фон (кремовый) | `#F3ECDD` |
|
||||
| Тёмный (чернила) | `#231B12` |
|
||||
| Акцент (терракота) | `#7E3B2D` |
|
||||
| Золото | `#A9854C` / `#C9A05E` |
|
||||
| Мужчины (в дереве) | `#3F6F6F` |
|
||||
| Женщины (в дереве) | `#9C5A6F` |
|
||||
|
||||
Шрифты: **Playfair Display** (заголовки), **Spectral** (текст), **Manrope** (метки).
|
||||
|
||||
Лендинг `landing/index.html` собран из макета `design/Heritage Landing.dc.html`
|
||||
(формат конструктора `x-dc` преобразован в обычный статичный HTML). Кнопки «Открыть дерево»
|
||||
ведут в приложение `preview/index.html`, а логотип приложения — обратно на лендинг.
|
||||
|
||||
---
|
||||
|
||||
## Запуск через Docker
|
||||
|
||||
```bash
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
@@ -0,0 +1,313 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Manrope:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
html { scroll-behavior: smooth; }
|
||||
body { margin: 0; }
|
||||
::selection { background: #7E3B2D; color: #F3ECDD; }
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div style="background:#F3ECDD; color:#231B12; font-family:'Spectral',Georgia,serif; min-height:100%; overflow-x:hidden; position:relative;">
|
||||
|
||||
<!-- ============ NAV ============ -->
|
||||
<header style="position:sticky; top:0; z-index:50; background:rgba(243,236,221,0.86); backdrop-filter:blur(10px); border-bottom:1px solid rgba(35,27,18,0.12);">
|
||||
<div style="max-width:1240px; margin:0 auto; padding:0 40px; height:78px; display:flex; align-items:center; justify-content:space-between;">
|
||||
<a href="#top" style="display:flex; align-items:baseline; gap:10px; text-decoration:none; color:inherit;">
|
||||
<span style="font-family:'Playfair Display',serif; font-size:26px; letter-spacing:0.02em;">Heritage</span>
|
||||
<span style="width:6px; height:6px; border-radius:50%; background:#7E3B2D; display:inline-block; transform:translateY(-3px);"></span>
|
||||
</a>
|
||||
<nav style="display:flex; align-items:center; gap:38px;">
|
||||
<a href="#about" style="font-family:'Manrope',sans-serif; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:#5C5142; text-decoration:none; transition:color .3s ease;" onMouseOver="{{ navHover }}" onMouseOut="{{ navOut }}">О проекте</a>
|
||||
<a href="#how" style="font-family:'Manrope',sans-serif; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:#5C5142; text-decoration:none; transition:color .3s ease;" onMouseOver="{{ navHover }}" onMouseOut="{{ navOut }}">Как это работает</a>
|
||||
<a href="#book" style="font-family:'Manrope',sans-serif; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:#5C5142; text-decoration:none; transition:color .3s ease;" onMouseOver="{{ navHover }}" onMouseOut="{{ navOut }}">Книга</a>
|
||||
<a href="#pricing" style="font-family:'Manrope',sans-serif; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:#5C5142; text-decoration:none; transition:color .3s ease;" onMouseOver="{{ navHover }}" onMouseOut="{{ navOut }}">Тарифы</a>
|
||||
<a href="#start" style="font-family:'Manrope',sans-serif; font-size:13px; letter-spacing:0.06em; text-transform:uppercase; color:#F3ECDD; background:#231B12; padding:12px 22px; border-radius:2px; text-decoration:none; transition:background .3s ease;" onMouseOver="{{ ctaHover }}" onMouseOut="{{ ctaOut }}">Начать</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- ============ HERO ============ -->
|
||||
<section id="top" style="max-width:1240px; margin:0 auto; padding:84px 40px 96px; display:grid; grid-template-columns:1.04fr 0.96fr; gap:72px; align-items:center;">
|
||||
<div>
|
||||
<div style="display:flex; align-items:center; gap:14px; margin-bottom:30px;">
|
||||
<span style="width:38px; height:1px; background:#A9854C;"></span>
|
||||
<span style="font-family:'Manrope',sans-serif; font-size:12px; letter-spacing:0.26em; text-transform:uppercase; color:#7E3B2D;">Семейное наследие · с 2025</span>
|
||||
</div>
|
||||
<h1 style="font-family:'Playfair Display',serif; font-weight:400; font-size:74px; line-height:1.02; letter-spacing:-0.01em; margin:0 0 28px;">
|
||||
История вашей<br>семьи, сохранённая<br><span style="font-style:italic; color:#7E3B2D;">на поколения</span>
|
||||
</h1>
|
||||
<p style="font-size:21px; line-height:1.55; color:#564B3C; max-width:480px; margin:0 0 40px; font-weight:300;">
|
||||
Мы записываем голоса, собираем фотографии и письма, бережно восстанавливаем родословную — и превращаем всё это в книгу и частный архив, который останется детям и внукам.
|
||||
</p>
|
||||
<div style="display:flex; align-items:center; gap:24px;">
|
||||
<a href="#start" style="font-family:'Manrope',sans-serif; font-size:14px; letter-spacing:0.04em; color:#F3ECDD; background:#7E3B2D; padding:17px 34px; border-radius:2px; text-decoration:none; transition:transform .3s ease, background .3s ease; display:inline-block;" onMouseOver="{{ primHover }}" onMouseOut="{{ primOut }}">Создать наследие</a>
|
||||
<a href="#how" style="font-family:'Manrope',sans-serif; font-size:14px; letter-spacing:0.04em; color:#231B12; text-decoration:none; border-bottom:1px solid rgba(35,27,18,0.4); padding-bottom:3px;">Как это устроено →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position:relative;">
|
||||
<div style="position:absolute; inset:-14px -14px 24px 24px; border:1px solid rgba(169,133,76,0.55); border-radius:2px; z-index:0;"></div>
|
||||
<x-import component-from-global-scope="image-slot" from="./image-slot.js" id="hero-portrait" shape="rounded" radius="2" placeholder="Перетащите семейное фото" style="display:block; position:relative; z-index:1; width:100%; height:560px; box-shadow:0 30px 70px -30px rgba(35,27,18,0.5);" hint-size="100%,560px"></x-import>
|
||||
<div style="position:absolute; z-index:2; left:-30px; bottom:36px; background:#F3ECDD; border:1px solid rgba(35,27,18,0.14); padding:18px 22px; max-width:208px; box-shadow:0 18px 40px -20px rgba(35,27,18,0.45);">
|
||||
<div style="font-family:'Playfair Display',serif; font-size:34px; line-height:1; color:#7E3B2D;">3 462</div>
|
||||
<div style="font-family:'Manrope',sans-serif; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:#6B5E4C; margin-top:7px;">сохранённых истории</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ VALUES STRIP ============ -->
|
||||
<div style="border-top:1px solid rgba(35,27,18,0.12); border-bottom:1px solid rgba(35,27,18,0.12); background:#EFE6D2;">
|
||||
<div style="max-width:1240px; margin:0 auto; padding:26px 40px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px;">
|
||||
<span style="font-family:'Spectral',serif; font-style:italic; font-size:17px; color:#564B3C;">Голос</span>
|
||||
<span style="width:5px; height:5px; border-radius:50%; background:#A9854C;"></span>
|
||||
<span style="font-family:'Spectral',serif; font-style:italic; font-size:17px; color:#564B3C;">Фотографии</span>
|
||||
<span style="width:5px; height:5px; border-radius:50%; background:#A9854C;"></span>
|
||||
<span style="font-family:'Spectral',serif; font-style:italic; font-size:17px; color:#564B3C;">Письма</span>
|
||||
<span style="width:5px; height:5px; border-radius:50%; background:#A9854C;"></span>
|
||||
<span style="font-family:'Spectral',serif; font-style:italic; font-size:17px; color:#564B3C;">Родословная</span>
|
||||
<span style="width:5px; height:5px; border-radius:50%; background:#A9854C;"></span>
|
||||
<span style="font-family:'Spectral',serif; font-style:italic; font-size:17px; color:#564B3C;">Реликвии</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ MANIFESTO / ABOUT ============ -->
|
||||
<section id="about" style="max-width:980px; margin:0 auto; padding:120px 40px 110px; text-align:center;">
|
||||
<div style="font-family:'Manrope',sans-serif; font-size:12px; letter-spacing:0.26em; text-transform:uppercase; color:#7E3B2D; margin-bottom:30px;">Почему это важно</div>
|
||||
<p style="font-family:'Playfair Display',serif; font-weight:400; font-size:42px; line-height:1.34; letter-spacing:-0.005em; margin:0; color:#2B2216;">
|
||||
Каждое поколение уносит с собой истории, которые больше <span style="font-style:italic; color:#7E3B2D;">некому рассказать.</span> Имена забываются, фотографии теряются, голоса стихают. Мы возвращаем их домой.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- ============ HOW IT WORKS ============ -->
|
||||
<section id="how" style="background:#231B12; color:#EDE4D2;">
|
||||
<div style="max-width:1240px; margin:0 auto; padding:108px 40px 116px;">
|
||||
<div style="display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:74px; flex-wrap:wrap;">
|
||||
<div>
|
||||
<div style="display:flex; align-items:center; gap:14px; margin-bottom:22px;">
|
||||
<span style="width:38px; height:1px; background:#A9854C;"></span>
|
||||
<span style="font-family:'Manrope',sans-serif; font-size:12px; letter-spacing:0.26em; text-transform:uppercase; color:#C9A05E;">Как это работает</span>
|
||||
</div>
|
||||
<h2 style="font-family:'Playfair Display',serif; font-weight:400; font-size:54px; line-height:1.05; margin:0; max-width:560px;">Четыре шага<br>от памяти к <span style="font-style:italic; color:#C9A05E;">наследию</span></h2>
|
||||
</div>
|
||||
<p style="font-size:18px; line-height:1.6; color:#B6AB95; max-width:380px; font-weight:300; margin:0;">Мы ведём вас за руку на каждом этапе. От вас — только желание сохранить. Всё остальное берём на себя.</p>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid rgba(237,228,210,0.18);">
|
||||
<sc-for list="{{ steps }}" as="step" hint-placeholder-count="4">
|
||||
<div style="padding:40px 28px 44px; border-right:1px solid rgba(237,228,210,0.18); transition:background .35s ease;" onMouseOver="{{ stepHover }}" onMouseOut="{{ stepOut }}">
|
||||
<div style="font-family:'Playfair Display',serif; font-size:20px; color:#C9A05E; margin-bottom:54px;">{{ step.num }}</div>
|
||||
<h3 style="font-family:'Playfair Display',serif; font-weight:500; font-size:25px; margin:0 0 14px; line-height:1.15;">{{ step.title }}</h3>
|
||||
<p style="font-size:15.5px; line-height:1.62; color:#A99E88; font-weight:300; margin:0;">{{ step.body }}</p>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ THE BOOK ============ -->
|
||||
<section id="book" style="max-width:1240px; margin:0 auto; padding:120px 40px;">
|
||||
<div style="display:grid; grid-template-columns:0.94fr 1.06fr; gap:80px; align-items:center;">
|
||||
<div style="position:relative;">
|
||||
<div style="position:absolute; inset:24px -18px -18px 18px; background:#EFE6D2; border:1px solid rgba(35,27,18,0.12); z-index:0;"></div>
|
||||
<x-import component-from-global-scope="image-slot" from="./image-slot.js" id="book-shot" shape="rounded" radius="2" placeholder="Фото готовой книги" style="display:block; position:relative; z-index:1; width:100%; height:540px; box-shadow:0 36px 80px -34px rgba(35,27,18,0.55);" hint-size="100%,540px"></x-import>
|
||||
</div>
|
||||
<div>
|
||||
<div style="display:flex; align-items:center; gap:14px; margin-bottom:26px;">
|
||||
<span style="width:38px; height:1px; background:#A9854C;"></span>
|
||||
<span style="font-family:'Manrope',sans-serif; font-size:12px; letter-spacing:0.26em; text-transform:uppercase; color:#7E3B2D;">Что вы получаете</span>
|
||||
</div>
|
||||
<h2 style="font-family:'Playfair Display',serif; font-weight:400; font-size:52px; line-height:1.06; margin:0 0 30px;">Книга, которую<br>хочется <span style="font-style:italic; color:#7E3B2D;">передать дальше</span></h2>
|
||||
<p style="font-size:19px; line-height:1.6; color:#564B3C; font-weight:300; margin:0 0 40px; max-width:480px;">Ручной переплёт, бумага хлопкового оттенка, оттиск фамильного герба на обложке. Внутри — выверенная вёрстка, отреставрированные снимки и расшифрованные голоса близких.</p>
|
||||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(35,27,18,0.12); border:1px solid rgba(35,27,18,0.12);">
|
||||
<sc-for list="{{ features }}" as="f" hint-placeholder-count="4">
|
||||
<div style="background:#F3ECDD; padding:24px 26px;">
|
||||
<div style="font-family:'Playfair Display',serif; font-size:19px; color:#2B2216; margin-bottom:7px;">{{ f.title }}</div>
|
||||
<div style="font-size:14.5px; line-height:1.5; color:#6B5E4C; font-weight:300;">{{ f.body }}</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ QUOTE ============ -->
|
||||
<section style="background:#EFE6D2; border-top:1px solid rgba(35,27,18,0.12); border-bottom:1px solid rgba(35,27,18,0.12);">
|
||||
<div style="max-width:1000px; margin:0 auto; padding:104px 40px; text-align:center;">
|
||||
<div style="font-family:'Playfair Display',serif; font-size:72px; line-height:0; color:#A9854C; height:40px;">“</div>
|
||||
<blockquote style="font-family:'Playfair Display',serif; font-style:italic; font-weight:400; font-size:38px; line-height:1.34; margin:0 0 36px; color:#2B2216;">
|
||||
Я держала в руках книгу и впервые услышала голос бабушки так, будто она рядом. Теперь это есть у каждого в нашей семье.
|
||||
</blockquote>
|
||||
<div style="display:flex; align-items:center; justify-content:center; gap:16px;">
|
||||
<x-import component-from-global-scope="image-slot" from="./image-slot.js" id="quote-avatar" shape="circle" placeholder="" style="display:block; width:52px; height:52px;" hint-size="52px,52px"></x-import>
|
||||
<div style="text-align:left;">
|
||||
<div style="font-family:'Manrope',sans-serif; font-size:14px; color:#2B2216;">Анна Воронцова</div>
|
||||
<div style="font-family:'Manrope',sans-serif; font-size:12px; letter-spacing:0.06em; color:#7E3B2D; text-transform:uppercase; margin-top:3px;">Москва · семья из 4 поколений</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ PRICING ============ -->
|
||||
<section id="pricing" style="max-width:1240px; margin:0 auto; padding:120px 40px 110px;">
|
||||
<div style="text-align:center; margin-bottom:70px;">
|
||||
<div style="font-family:'Manrope',sans-serif; font-size:12px; letter-spacing:0.26em; text-transform:uppercase; color:#7E3B2D; margin-bottom:22px;">Форматы участия</div>
|
||||
<h2 style="font-family:'Playfair Display',serif; font-weight:400; font-size:54px; line-height:1.05; margin:0;">Выберите глубину <span style="font-style:italic; color:#7E3B2D;">наследия</span></h2>
|
||||
</div>
|
||||
<div style="display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch;">
|
||||
<sc-for list="{{ plans }}" as="plan" hint-placeholder-count="3">
|
||||
<div style="border:1px solid {{ plan.border }}; background:{{ plan.bg }}; color:{{ plan.fg }}; padding:42px 36px 40px; display:flex; flex-direction:column; position:relative;">
|
||||
<sc-if value="{{ plan.featured }}" hint-placeholder-val="{{ false }}">
|
||||
<span style="position:absolute; top:-12px; left:36px; background:#A9854C; color:#231B12; font-family:'Manrope',sans-serif; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; padding:6px 14px;">Чаще всего выбирают</span>
|
||||
</sc-if>
|
||||
<div style="font-family:'Manrope',sans-serif; font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:{{ plan.label }}; margin-bottom:22px;">{{ plan.name }}</div>
|
||||
<div style="display:flex; align-items:baseline; gap:6px; margin-bottom:8px;">
|
||||
<span style="font-family:'Playfair Display',serif; font-size:48px; line-height:1;">{{ plan.price }}</span>
|
||||
<span style="font-size:15px; color:{{ plan.muted }};">{{ plan.unit }}</span>
|
||||
</div>
|
||||
<p style="font-size:15px; line-height:1.55; color:{{ plan.muted }}; font-weight:300; margin:0 0 28px; min-height:48px;">{{ plan.tagline }}</p>
|
||||
<div style="height:1px; background:{{ plan.border }}; margin-bottom:26px;"></div>
|
||||
<div style="display:flex; flex-direction:column; gap:14px; margin-bottom:36px; flex:1;">
|
||||
<sc-for list="{{ plan.items }}" as="item" hint-placeholder-count="4">
|
||||
<div style="display:flex; gap:12px; align-items:flex-start;">
|
||||
<span style="color:#A9854C; font-size:15px; line-height:1.4;">✦</span>
|
||||
<span style="font-size:15px; line-height:1.45; color:{{ plan.fg }}; font-weight:300;">{{ item }}</span>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
<a href="#start" style="font-family:'Manrope',sans-serif; font-size:13px; letter-spacing:0.06em; text-transform:uppercase; text-align:center; padding:15px; text-decoration:none; color:{{ plan.btnFg }}; background:{{ plan.btnBg }}; border:1px solid {{ plan.btnBorder }}; transition:opacity .3s ease;" onMouseOver="{{ planHover }}" onMouseOut="{{ planOut }}">{{ plan.cta }}</a>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ FINAL CTA ============ -->
|
||||
<section id="start" style="background:#7E3B2D; color:#F3ECDD;">
|
||||
<div style="max-width:1000px; margin:0 auto; padding:120px 40px; text-align:center;">
|
||||
<div style="font-family:'Manrope',sans-serif; font-size:12px; letter-spacing:0.26em; text-transform:uppercase; color:#E9C9A0; margin-bottom:30px;">Начните сегодня</div>
|
||||
<h2 style="font-family:'Playfair Display',serif; font-weight:400; font-size:60px; line-height:1.08; margin:0 0 32px;">Пока истории ещё<br><span style="font-style:italic;">можно услышать</span></h2>
|
||||
<p style="font-size:20px; line-height:1.6; color:#F0DCC6; font-weight:300; max-width:540px; margin:0 auto 44px;">Оставьте заявку — мы свяжемся, обсудим вашу семью и составим план первой беседы. Без обязательств.</p>
|
||||
<form onSubmit="{{ onSubmit }}" style="display:flex; gap:12px; max-width:480px; margin:0 auto; flex-wrap:wrap; justify-content:center;">
|
||||
<input type="email" required placeholder="Ваш e-mail" style="flex:1; min-width:240px; background:rgba(243,236,221,0.1); border:1px solid rgba(243,236,221,0.4); color:#F3ECDD; font-family:'Spectral',serif; font-size:16px; padding:16px 20px; border-radius:2px; outline:none;">
|
||||
<button type="submit" style="font-family:'Manrope',sans-serif; font-size:14px; letter-spacing:0.04em; color:#231B12; background:#F3ECDD; border:none; padding:16px 32px; border-radius:2px; cursor:pointer; transition:transform .3s ease;" onMouseOver="{{ primHover }}" onMouseOut="{{ primOut }}">Оставить заявку</button>
|
||||
</form>
|
||||
<sc-if value="{{ submitted }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="margin-top:24px; font-family:'Spectral',serif; font-style:italic; font-size:17px; color:#F0DCC6;">Спасибо. Мы свяжемся с вами в течение двух дней.</div>
|
||||
</sc-if>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ FOOTER ============ -->
|
||||
<footer style="background:#231B12; color:#A99E88;">
|
||||
<div style="max-width:1240px; margin:0 auto; padding:64px 40px 40px;">
|
||||
<div style="display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap; padding-bottom:44px; border-bottom:1px solid rgba(237,228,210,0.16);">
|
||||
<div style="max-width:300px;">
|
||||
<div style="font-family:'Playfair Display',serif; font-size:26px; color:#EDE4D2; margin-bottom:14px;">Heritage</div>
|
||||
<p style="font-size:15px; line-height:1.6; font-weight:300; margin:0;">Студия семейного наследия. Сохраняем голоса, лица и истории — бережно и навсегда.</p>
|
||||
</div>
|
||||
<div style="display:flex; gap:64px; flex-wrap:wrap;">
|
||||
<div style="display:flex; flex-direction:column; gap:13px;">
|
||||
<span style="font-family:'Manrope',sans-serif; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:#6F6450;">Навигация</span>
|
||||
<a href="#about" style="color:#C5BAA3; text-decoration:none; font-size:15px; font-weight:300;">О проекте</a>
|
||||
<a href="#how" style="color:#C5BAA3; text-decoration:none; font-size:15px; font-weight:300;">Как это работает</a>
|
||||
<a href="#book" style="color:#C5BAA3; text-decoration:none; font-size:15px; font-weight:300;">Книга</a>
|
||||
<a href="#pricing" style="color:#C5BAA3; text-decoration:none; font-size:15px; font-weight:300;">Тарифы</a>
|
||||
</div>
|
||||
<div style="display:flex; flex-direction:column; gap:13px;">
|
||||
<span style="font-family:'Manrope',sans-serif; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:#6F6450;">Контакты</span>
|
||||
<a href="mailto:hello@heritage.studio" style="color:#C5BAA3; text-decoration:none; font-size:15px; font-weight:300;">hello@heritage.studio</a>
|
||||
<a href="tel:+70000000000" style="color:#C5BAA3; text-decoration:none; font-size:15px; font-weight:300;">+7 000 000-00-00</a>
|
||||
<span style="color:#C5BAA3; font-size:15px; font-weight:300;">Москва · Санкт-Петербург</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding-top:24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;">
|
||||
<span style="font-family:'Manrope',sans-serif; font-size:12px; color:#6F6450;">© 2026 Heritage Studio. Все права защищены.</span>
|
||||
<span style="font-family:'Spectral',serif; font-style:italic; font-size:14px; color:#8B7F69;">Память живёт, пока её передают.</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":1240,"height":900}}">
|
||||
class Component extends DCLogic {
|
||||
state = { submitted: false };
|
||||
|
||||
renderVals() {
|
||||
const hover = (over, props) => (e) => Object.assign(e.currentTarget.style, over ? props.on : props.off);
|
||||
return {
|
||||
submitted: this.state.submitted,
|
||||
onSubmit: (e) => { e.preventDefault(); this.setState({ submitted: true }); },
|
||||
|
||||
navHover: (e) => { e.currentTarget.style.color = '#7E3B2D'; },
|
||||
navOut: (e) => { e.currentTarget.style.color = '#5C5142'; },
|
||||
ctaHover: (e) => { e.currentTarget.style.background = '#7E3B2D'; },
|
||||
ctaOut: (e) => { e.currentTarget.style.background = '#231B12'; },
|
||||
primHover:(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; },
|
||||
primOut: (e) => { e.currentTarget.style.transform = 'translateY(0)'; },
|
||||
stepHover:(e) => { e.currentTarget.style.background = 'rgba(201,160,94,0.07)'; },
|
||||
stepOut: (e) => { e.currentTarget.style.background = 'transparent'; },
|
||||
planHover:(e) => { e.currentTarget.style.opacity = '0.82'; },
|
||||
planOut: (e) => { e.currentTarget.style.opacity = '1'; },
|
||||
|
||||
steps: [
|
||||
{ num: '01', title: 'Беседа', body: 'Тёплое интервью с близкими. Записываем голос и истории — дома или онлайн, в удобном ритме.' },
|
||||
{ num: '02', title: 'Архив', body: 'Собираем и оцифровываем фотографии, письма, документы. Реставрируем то, что выцвело от времени.' },
|
||||
{ num: '03', title: 'Родословная', body: 'Восстанавливаем линии семьи, сверяем даты и имена, строим наглядное древо до прадедов.' },
|
||||
{ num: '04', title: 'Книга', body: 'Верстаем и печатаем именную книгу в ручном переплёте. Плюс приватный цифровой архив.' },
|
||||
],
|
||||
|
||||
features: [
|
||||
{ title: 'Ручной переплёт', body: 'Лён или кожа, тиснёная обложка, сшитый блок.' },
|
||||
{ title: 'Реставрация фото', body: 'Возвращаем чёткость старым снимкам.' },
|
||||
{ title: 'Голос близких', body: 'QR ведёт к аудиозаписям внутри книги.' },
|
||||
{ title: 'Семейное древо', body: 'Разворот с выверенной родословной.' },
|
||||
],
|
||||
|
||||
plans: [
|
||||
{
|
||||
name: 'Хроника', price: '85 000', unit: '₽', featured: false,
|
||||
tagline: 'Одна линия семьи, бережно собранная в книгу.',
|
||||
bg: '#F3ECDD', fg: '#231B12', border: 'rgba(35,27,18,0.16)',
|
||||
label: '#7E3B2D', muted: '#6B5E4C',
|
||||
btnFg: '#231B12', btnBg: 'transparent', btnBorder: 'rgba(35,27,18,0.4)',
|
||||
cta: 'Выбрать',
|
||||
items: ['До 3 интервью', 'Оцифровка 50 фотографий', 'Книга 80 страниц, 2 экз.', 'Цифровой архив'],
|
||||
},
|
||||
{
|
||||
name: 'Наследие', price: '180 000', unit: '₽', featured: true,
|
||||
tagline: 'Полная история рода с реставрацией и древом.',
|
||||
bg: '#2B2216', fg: '#EDE4D2', border: 'rgba(237,228,210,0.22)',
|
||||
label: '#C9A05E', muted: '#A99E88',
|
||||
btnFg: '#231B12', btnBg: '#A9854C', btnBorder: '#A9854C',
|
||||
cta: 'Выбрать',
|
||||
items: ['До 8 интервью', 'Оцифровка 200 фотографий', 'Реставрация снимков', 'Книга 160 страниц, 5 экз.', 'Семейное древо', 'Аудиоархив с QR'],
|
||||
},
|
||||
{
|
||||
name: 'Династия', price: 'от 360 000', unit: '₽', featured: false,
|
||||
tagline: 'Архивная экспедиция и фамильное издание.',
|
||||
bg: '#F3ECDD', fg: '#231B12', border: 'rgba(35,27,18,0.16)',
|
||||
label: '#7E3B2D', muted: '#6B5E4C',
|
||||
btnFg: '#231B12', btnBg: 'transparent', btnBorder: 'rgba(35,27,18,0.4)',
|
||||
cta: 'Обсудить',
|
||||
items: ['Без ограничений по интервью', 'Работа в архивах и ЗАГС', 'Многотомное издание', 'Тираж для всей семьи', 'Персональный куратор'],
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,643 @@
|
||||
// @ds-adherence-ignore -- omelette starter scaffold (raw elements/hex/px by design)
|
||||
/* BEGIN USAGE */
|
||||
/**
|
||||
* <image-slot> — user-fillable image placeholder.
|
||||
*
|
||||
* Drop this into a deck, mockup, or page wherever you want the user to
|
||||
* supply an image. You control the slot's shape and size; the user fills it
|
||||
* by dragging an image file onto it (or clicking to browse). The dropped
|
||||
* image persists across reloads via a .image-slots.state.json sidecar —
|
||||
* same read-via-fetch / write-via-window.omelette pattern as
|
||||
* design_canvas.jsx, so the filled slot shows on share links, downloaded
|
||||
* zips, and PPTX export. Outside the omelette runtime the slot is read-only.
|
||||
*
|
||||
* The host bridge only allows sidecar writes at the project root, so the
|
||||
* HTML that uses this component is assumed to live at the project root too
|
||||
* (same constraint as design_canvas.jsx).
|
||||
*
|
||||
* Attributes:
|
||||
* id Persistence key. REQUIRED for the drop to survive reload —
|
||||
* every slot on the page needs a distinct id.
|
||||
* shape 'rect' | 'rounded' | 'circle' | 'pill' (default 'rounded')
|
||||
* 'circle' applies 50% border-radius; on a non-square slot
|
||||
* that's an ellipse — set equal width and height for a true
|
||||
* circle.
|
||||
* radius Corner radius in px for 'rounded'. (default 12)
|
||||
* mask Any CSS clip-path value. Overrides `shape` — use this for
|
||||
* hexagons, blobs, arbitrary polygons.
|
||||
* fit object-fit: cover | contain | fill. (default 'cover')
|
||||
* With cover (the default) double-clicking the filled slot
|
||||
* enters a reframe mode: the whole image spills past the mask
|
||||
* (translucent outside, opaque inside), drag to reposition,
|
||||
* corner-drag to scale. The crop persists alongside the image
|
||||
* in the sidecar. contain/fill stay static.
|
||||
* position object-position for fit=contain|fill. (default '50% 50%')
|
||||
* placeholder Empty-state caption. (default 'Drop an image')
|
||||
* src Optional initial/fallback image URL. A user drop overrides
|
||||
* it; clearing the drop reveals src again.
|
||||
*
|
||||
* Size and layout come from ordinary CSS on the element — width/height
|
||||
* inline or from a parent grid — so it composes with any layout.
|
||||
*
|
||||
* Usage:
|
||||
* <image-slot id="hero" style="width:800px;height:450px" shape="rounded" radius="20"
|
||||
* placeholder="Drop a hero image"></image-slot>
|
||||
* <image-slot id="avatar" style="width:120px;height:120px" shape="circle"></image-slot>
|
||||
* <image-slot id="kite" style="width:300px;height:300px"
|
||||
* mask="polygon(50% 0, 100% 50%, 50% 100%, 0 50%)"></image-slot>
|
||||
*/
|
||||
/* END USAGE */
|
||||
|
||||
(() => {
|
||||
const STATE_FILE = '.image-slots.state.json';
|
||||
// 2× a ~600px slot in a 1920-wide deck — retina-sharp without making the
|
||||
// sidecar enormous. A 1200px WebP at q=0.85 is ~150-300KB.
|
||||
const MAX_DIM = 1200;
|
||||
// Raster formats only. SVG is excluded (can carry script; createImageBitmap
|
||||
// on SVG blobs is inconsistent). GIF is excluded because the canvas
|
||||
// re-encode keeps only the first frame, so an animated GIF would silently
|
||||
// go still — better to reject than surprise.
|
||||
const ACCEPT = ['image/png', 'image/jpeg', 'image/webp', 'image/avif'];
|
||||
|
||||
// ── Shared sidecar store ────────────────────────────────────────────────
|
||||
// One fetch + immediate write-on-change for every <image-slot> on the
|
||||
// page. Reads via fetch() so viewing works anywhere the HTML and sidecar
|
||||
// are served together; writes go through window.omelette.writeFile, which
|
||||
// the host allowlists to *.state.json basenames only.
|
||||
const subs = new Set();
|
||||
let slots = {};
|
||||
// ids explicitly cleared before the sidecar fetch resolved — otherwise
|
||||
// the merge below can't tell "never set" from "just deleted" and would
|
||||
// resurrect the sidecar's stale value.
|
||||
const tombstones = new Set();
|
||||
let loaded = false;
|
||||
let loadP = null;
|
||||
|
||||
function load() {
|
||||
if (loadP) return loadP;
|
||||
loadP = fetch(STATE_FILE)
|
||||
.then((r) => (r.ok ? r.json() : null))
|
||||
.then((j) => {
|
||||
// Merge: sidecar loses to any in-memory change that raced ahead of
|
||||
// the fetch (drop or clear) so neither is clobbered by hydration.
|
||||
if (j && typeof j === 'object') {
|
||||
const merged = Object.assign({}, j, slots);
|
||||
// A framing-only write that raced ahead of hydration must not
|
||||
// drop a user image that's only on disk — inherit u from the
|
||||
// sidecar for any in-memory entry that lacks one.
|
||||
for (const k in slots) {
|
||||
if (merged[k] && !merged[k].u && j[k]) {
|
||||
merged[k].u = typeof j[k] === 'string' ? j[k] : j[k].u;
|
||||
}
|
||||
}
|
||||
for (const id of tombstones) delete merged[id];
|
||||
slots = merged;
|
||||
}
|
||||
tombstones.clear();
|
||||
})
|
||||
.catch(() => {})
|
||||
.then(() => { loaded = true; subs.forEach((fn) => fn()); });
|
||||
return loadP;
|
||||
}
|
||||
|
||||
// Serialize writes so two near-simultaneous drops on different slots
|
||||
// can't reorder at the backend and leave the sidecar with only the
|
||||
// first. A save requested mid-flight just marks dirty and re-fires on
|
||||
// completion with the then-current slots.
|
||||
let saving = false;
|
||||
let saveDirty = false;
|
||||
function save() {
|
||||
if (saving) { saveDirty = true; return; }
|
||||
const w = window.omelette && window.omelette.writeFile;
|
||||
if (!w) return;
|
||||
saving = true;
|
||||
Promise.resolve(w(STATE_FILE, JSON.stringify(slots)))
|
||||
.catch(() => {})
|
||||
.then(() => { saving = false; if (saveDirty) { saveDirty = false; save(); } });
|
||||
}
|
||||
|
||||
const S_MAX = 5;
|
||||
const clampS = (s) => Math.max(1, Math.min(S_MAX, s));
|
||||
|
||||
// Normalize a stored slot value. Pre-reframe sidecars stored a bare
|
||||
// data-URL string; newer ones store {u, s, x, y}. Either shape is valid.
|
||||
function getSlot(id) {
|
||||
const v = slots[id];
|
||||
if (!v) return null;
|
||||
return typeof v === 'string' ? { u: v, s: 1, x: 0, y: 0 } : v;
|
||||
}
|
||||
|
||||
function setSlot(id, val) {
|
||||
if (!id) return;
|
||||
if (val) { slots[id] = val; tombstones.delete(id); }
|
||||
else { delete slots[id]; if (!loaded) tombstones.add(id); }
|
||||
subs.forEach((fn) => fn());
|
||||
// A drop is rare + high-value — write immediately so nav-away can't lose
|
||||
// it. Gate on the initial read so we don't overwrite a sidecar we haven't
|
||||
// merged yet; the merge in load() keeps this change once the read lands.
|
||||
if (loaded) save(); else load().then(save);
|
||||
}
|
||||
|
||||
// ── Image downscale ─────────────────────────────────────────────────────
|
||||
// Encode through a canvas so the sidecar carries resized bytes, not the
|
||||
// raw upload. Longest side is capped at 2× the slot's rendered width
|
||||
// (retina) and at MAX_DIM. WebP keeps alpha and is ~10× smaller than PNG
|
||||
// for photos, so there's no need for per-image format picking.
|
||||
async function toDataUrl(file, targetW) {
|
||||
const bitmap = await createImageBitmap(file);
|
||||
try {
|
||||
const cap = Math.min(MAX_DIM, Math.max(1, Math.round(targetW * 2)) || MAX_DIM);
|
||||
const scale = Math.min(1, cap / Math.max(bitmap.width, bitmap.height));
|
||||
const w = Math.max(1, Math.round(bitmap.width * scale));
|
||||
const h = Math.max(1, Math.round(bitmap.height * scale));
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = w; canvas.height = h;
|
||||
canvas.getContext('2d').drawImage(bitmap, 0, 0, w, h);
|
||||
return canvas.toDataURL('image/webp', 0.85);
|
||||
} finally {
|
||||
bitmap.close && bitmap.close();
|
||||
}
|
||||
}
|
||||
|
||||
// ── Custom element ──────────────────────────────────────────────────────
|
||||
const stylesheet =
|
||||
':host{display:inline-block;position:relative;vertical-align:top;' +
|
||||
' font:13px/1.3 system-ui,-apple-system,sans-serif;color:rgba(0,0,0,.55);width:240px;height:160px}' +
|
||||
'.frame{position:absolute;inset:0;overflow:hidden;background:rgba(0,0,0,.04)}' +
|
||||
// .frame img (clipped) and .spill (unclipped ghost + handles) share the
|
||||
// same left/top/width/height in frame-%, computed by _applyView(), so the
|
||||
// inside-mask crop and the outside-mask spill stay pixel-aligned.
|
||||
'.frame img{position:absolute;max-width:none;transform:translate(-50%,-50%);' +
|
||||
' -webkit-user-drag:none;user-select:none;touch-action:none}' +
|
||||
// Reframe mode (double-click): the full image spills past the mask. The
|
||||
// spill layer is sized to the IMAGE bounds so its corners are where the
|
||||
// resize handles belong. The ghost <img> inside is translucent; the real
|
||||
// clipped <img> underneath shows the opaque in-mask crop.
|
||||
'.spill{position:absolute;transform:translate(-50%,-50%);display:none;z-index:1;' +
|
||||
' cursor:grab;touch-action:none}' +
|
||||
':host([data-panning]) .spill{cursor:grabbing}' +
|
||||
'.spill .ghost{position:absolute;inset:0;width:100%;height:100%;opacity:.35;' +
|
||||
' pointer-events:none;-webkit-user-drag:none;user-select:none;' +
|
||||
' box-shadow:0 0 0 1px rgba(0,0,0,.2),0 12px 32px rgba(0,0,0,.2)}' +
|
||||
'.spill .handle{position:absolute;width:12px;height:12px;border-radius:50%;' +
|
||||
' background:#fff;box-shadow:0 0 0 1.5px #c96442,0 1px 3px rgba(0,0,0,.3);' +
|
||||
' transform:translate(-50%,-50%)}' +
|
||||
'.spill .handle[data-c=nw]{left:0;top:0;cursor:nwse-resize}' +
|
||||
'.spill .handle[data-c=ne]{left:100%;top:0;cursor:nesw-resize}' +
|
||||
'.spill .handle[data-c=sw]{left:0;top:100%;cursor:nesw-resize}' +
|
||||
'.spill .handle[data-c=se]{left:100%;top:100%;cursor:nwse-resize}' +
|
||||
':host([data-reframe]){z-index:10}' +
|
||||
':host([data-reframe]) .spill{display:block}' +
|
||||
':host([data-reframe]) .frame{box-shadow:0 0 0 2px #c96442}' +
|
||||
'.empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;' +
|
||||
' justify-content:center;gap:6px;text-align:center;padding:12px;box-sizing:border-box;' +
|
||||
' cursor:pointer;user-select:none}' +
|
||||
'.empty svg{opacity:.45}' +
|
||||
'.empty .cap{max-width:90%;font-weight:500;letter-spacing:.01em}' +
|
||||
'.empty .sub{font-size:11px}' +
|
||||
'.empty .sub u{text-underline-offset:2px;text-decoration-color:rgba(0,0,0,.25)}' +
|
||||
'.empty:hover .sub u{color:rgba(0,0,0,.75);text-decoration-color:currentColor}' +
|
||||
':host([data-over]) .frame{outline:2px solid #c96442;outline-offset:-2px;' +
|
||||
' background:rgba(201,100,66,.10)}' +
|
||||
'.ring{position:absolute;inset:0;pointer-events:none;border:1.5px dashed rgba(0,0,0,.25);' +
|
||||
' transition:border-color .12s}' +
|
||||
':host([data-over]) .ring{border-color:#c96442}' +
|
||||
':host([data-filled]) .ring{display:none}' +
|
||||
// Controls sit BELOW the mask (top:100%), absolutely positioned so the
|
||||
// author-declared slot height is unaffected. The gap is padding, not a
|
||||
// top offset, so the hover target stays contiguous with the frame.
|
||||
'.ctl{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:8px;' +
|
||||
' display:flex;gap:6px;opacity:0;pointer-events:none;transition:opacity .12s;z-index:2;' +
|
||||
' white-space:nowrap}' +
|
||||
':host([data-filled][data-editable]:hover) .ctl,:host([data-reframe]) .ctl' +
|
||||
' {opacity:1;pointer-events:auto}' +
|
||||
'.ctl button{appearance:none;border:0;border-radius:6px;padding:5px 10px;cursor:pointer;' +
|
||||
' background:rgba(0,0,0,.65);color:#fff;font:11px/1 system-ui,-apple-system,sans-serif;' +
|
||||
' backdrop-filter:blur(6px)}' +
|
||||
'.ctl button:hover{background:rgba(0,0,0,.8)}' +
|
||||
'.err{position:absolute;left:8px;bottom:8px;right:8px;color:#b3261e;font-size:11px;' +
|
||||
' background:rgba(255,255,255,.85);padding:4px 6px;border-radius:5px;pointer-events:none}';
|
||||
|
||||
const icon =
|
||||
'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" ' +
|
||||
'stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">' +
|
||||
'<rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/>' +
|
||||
'<path d="m21 15-5-5L5 21"/></svg>';
|
||||
|
||||
class ImageSlot extends HTMLElement {
|
||||
static get observedAttributes() {
|
||||
return ['shape', 'radius', 'mask', 'fit', 'position', 'placeholder', 'src', 'id'];
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
const root = this.attachShadow({ mode: 'open' });
|
||||
// .spill and .ctl sit OUTSIDE .frame so overflow:hidden + border-radius
|
||||
// on the frame (circle, pill, rounded) can't clip them.
|
||||
root.innerHTML =
|
||||
'<style>' + stylesheet + '</style>' +
|
||||
'<div class="frame" part="frame">' +
|
||||
' <img part="image" alt="" draggable="false" style="display:none">' +
|
||||
' <div class="empty" part="empty">' + icon +
|
||||
' <div class="cap"></div>' +
|
||||
' <div class="sub">or <u>browse files</u></div></div>' +
|
||||
' <div class="ring" part="ring"></div>' +
|
||||
'</div>' +
|
||||
'<div class="spill">' +
|
||||
' <img class="ghost" alt="" draggable="false">' +
|
||||
' <div class="handle" data-c="nw"></div><div class="handle" data-c="ne"></div>' +
|
||||
' <div class="handle" data-c="sw"></div><div class="handle" data-c="se"></div>' +
|
||||
'</div>' +
|
||||
'<div class="ctl"><button data-act="replace" title="Replace image">Replace</button>' +
|
||||
' <button data-act="clear" title="Remove image">Remove</button></div>' +
|
||||
'<input type="file" accept="' + ACCEPT.join(',') + '" hidden>';
|
||||
this._frame = root.querySelector('.frame');
|
||||
this._ring = root.querySelector('.ring');
|
||||
this._img = root.querySelector('.frame img');
|
||||
this._empty = root.querySelector('.empty');
|
||||
this._cap = root.querySelector('.cap');
|
||||
this._sub = root.querySelector('.sub');
|
||||
this._spill = root.querySelector('.spill');
|
||||
this._ghost = root.querySelector('.ghost');
|
||||
this._err = null;
|
||||
this._input = root.querySelector('input');
|
||||
this._depth = 0;
|
||||
this._gen = 0;
|
||||
this._view = { s: 1, x: 0, y: 0 };
|
||||
this._subFn = () => this._render();
|
||||
// Shadow-DOM listeners live with the shadow DOM — bound once here so
|
||||
// disconnect/reconnect (e.g. React remount) doesn't stack handlers.
|
||||
this._empty.addEventListener('click', () => this._input.click());
|
||||
root.addEventListener('click', (e) => {
|
||||
const act = e.target && e.target.getAttribute && e.target.getAttribute('data-act');
|
||||
if (act === 'replace') { this._exitReframe(true); this._input.click(); }
|
||||
if (act === 'clear') {
|
||||
this._exitReframe(false);
|
||||
this._gen++;
|
||||
this._local = null;
|
||||
if (this.id) setSlot(this.id, null); else this._render();
|
||||
}
|
||||
});
|
||||
this._input.addEventListener('change', () => {
|
||||
const f = this._input.files && this._input.files[0];
|
||||
if (f) this._ingest(f);
|
||||
this._input.value = '';
|
||||
});
|
||||
// naturalWidth/Height aren't known until load — re-apply so the cover
|
||||
// baseline is computed from real dimensions, not the 100%×100% fallback.
|
||||
this._img.addEventListener('load', () => this._applyView());
|
||||
// Gated on editable + fit=cover so share links and contain/fill slots
|
||||
// stay static.
|
||||
this.addEventListener('dblclick', (e) => {
|
||||
if (!this.hasAttribute('data-editable') || !this._reframes()) return;
|
||||
e.preventDefault();
|
||||
if (this.hasAttribute('data-reframe')) this._exitReframe(true);
|
||||
else this._enterReframe();
|
||||
});
|
||||
// Pan + resize both originate on the spill layer. A handle pointerdown
|
||||
// drives an aspect-locked resize anchored at the opposite corner; any
|
||||
// other pointerdown on the spill pans. Offsets are frame-% so a
|
||||
// reframed slot survives responsive resize / PPTX export.
|
||||
this._spill.addEventListener('pointerdown', (e) => {
|
||||
if (e.button !== 0 || !this.hasAttribute('data-reframe')) return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this._spill.setPointerCapture(e.pointerId);
|
||||
const rect = this.getBoundingClientRect();
|
||||
const fw = rect.width || 1, fh = rect.height || 1;
|
||||
const corner = e.target.getAttribute && e.target.getAttribute('data-c');
|
||||
let move;
|
||||
if (corner) {
|
||||
// Resize about the OPPOSITE corner. Viewport-px throughout (rect
|
||||
// fw/fh, not clientWidth) so the math survives a transform:scale()
|
||||
// ancestor — deck_stage renders slides scaled-to-fit.
|
||||
const iw = this._img.naturalWidth || 1, ih = this._img.naturalHeight || 1;
|
||||
const base = Math.max(fw / iw, fh / ih);
|
||||
const sx = corner.includes('e') ? 1 : -1;
|
||||
const sy = corner.includes('s') ? 1 : -1;
|
||||
const s0 = this._view.s;
|
||||
const w0 = iw * base * s0, h0 = ih * base * s0;
|
||||
const cx0 = (50 + this._view.x) / 100 * fw;
|
||||
const cy0 = (50 + this._view.y) / 100 * fh;
|
||||
const ox = cx0 - sx * w0 / 2, oy = cy0 - sy * h0 / 2;
|
||||
const diag0 = Math.hypot(w0, h0);
|
||||
const ux = sx * w0 / diag0, uy = sy * h0 / diag0;
|
||||
move = (ev) => {
|
||||
const proj = (ev.clientX - rect.left - ox) * ux +
|
||||
(ev.clientY - rect.top - oy) * uy;
|
||||
const s = clampS(s0 * proj / diag0);
|
||||
const d = diag0 * s / s0;
|
||||
this._view.s = s;
|
||||
this._view.x = (ox + ux * d / 2) / fw * 100 - 50;
|
||||
this._view.y = (oy + uy * d / 2) / fh * 100 - 50;
|
||||
this._clampView();
|
||||
this._applyView();
|
||||
};
|
||||
} else {
|
||||
this.setAttribute('data-panning', '');
|
||||
const start = { px: e.clientX, py: e.clientY, x: this._view.x, y: this._view.y };
|
||||
move = (ev) => {
|
||||
this._view.x = start.x + (ev.clientX - start.px) / fw * 100;
|
||||
this._view.y = start.y + (ev.clientY - start.py) / fh * 100;
|
||||
this._clampView();
|
||||
this._applyView();
|
||||
};
|
||||
}
|
||||
const up = () => {
|
||||
try { this._spill.releasePointerCapture(e.pointerId); } catch {}
|
||||
this._spill.removeEventListener('pointermove', move);
|
||||
this._spill.removeEventListener('pointerup', up);
|
||||
this._spill.removeEventListener('pointercancel', up);
|
||||
this.removeAttribute('data-panning');
|
||||
this._dragUp = null;
|
||||
};
|
||||
// Stashed so _exitReframe (Escape / outside-click mid-drag) can
|
||||
// tear the capture + listeners down synchronously.
|
||||
this._dragUp = up;
|
||||
this._spill.addEventListener('pointermove', move);
|
||||
this._spill.addEventListener('pointerup', up);
|
||||
this._spill.addEventListener('pointercancel', up);
|
||||
});
|
||||
// Wheel zoom stays available inside reframe mode as a trackpad nicety —
|
||||
// zooms toward the cursor (offset' = cursor·(1-k) + offset·k).
|
||||
this.addEventListener('wheel', (e) => {
|
||||
if (!this.hasAttribute('data-reframe')) return;
|
||||
e.preventDefault();
|
||||
const r = this.getBoundingClientRect();
|
||||
const cx = (e.clientX - r.left) / r.width * 100 - 50;
|
||||
const cy = (e.clientY - r.top) / r.height * 100 - 50;
|
||||
const prev = this._view.s;
|
||||
const next = clampS(prev * Math.pow(1.0015, -e.deltaY));
|
||||
if (next === prev) return;
|
||||
const k = next / prev;
|
||||
this._view.s = next;
|
||||
this._view.x = cx * (1 - k) + this._view.x * k;
|
||||
this._view.y = cy * (1 - k) + this._view.y * k;
|
||||
this._clampView();
|
||||
this._applyView();
|
||||
}, { passive: false });
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
// Warn once per page — an id-less slot works for the session but
|
||||
// cannot persist, and two id-less slots would share nothing.
|
||||
if (!this.id && !ImageSlot._warned) {
|
||||
ImageSlot._warned = true;
|
||||
console.warn('<image-slot> without an id will not persist its dropped image.');
|
||||
}
|
||||
this.addEventListener('dragenter', this);
|
||||
this.addEventListener('dragover', this);
|
||||
this.addEventListener('dragleave', this);
|
||||
this.addEventListener('drop', this);
|
||||
subs.add(this._subFn);
|
||||
// width%/height% in _applyView encode the frame aspect at call time —
|
||||
// a host resize (responsive grid, pane divider) would stretch the
|
||||
// image until the next _render. Re-render on size change: _render()
|
||||
// re-seeds _view from stored before clamp/apply, so a shrink→grow
|
||||
// cycle round-trips instead of ratcheting x/y toward the narrower
|
||||
// frame's clamp range.
|
||||
this._ro = new ResizeObserver(() => this._render());
|
||||
this._ro.observe(this);
|
||||
load();
|
||||
this._render();
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
subs.delete(this._subFn);
|
||||
this.removeEventListener('dragenter', this);
|
||||
this.removeEventListener('dragover', this);
|
||||
this.removeEventListener('dragleave', this);
|
||||
this.removeEventListener('drop', this);
|
||||
if (this._ro) { this._ro.disconnect(); this._ro = null; }
|
||||
this._exitReframe(false);
|
||||
}
|
||||
|
||||
_enterReframe() {
|
||||
if (this.hasAttribute('data-reframe')) return;
|
||||
this.setAttribute('data-reframe', '');
|
||||
this._applyView();
|
||||
// Close on click outside (the spill handler stopPropagation()s so
|
||||
// in-image drags don't reach this) and on Escape. Listeners are held
|
||||
// on the instance so _exitReframe / disconnectedCallback can detach
|
||||
// exactly what was attached.
|
||||
this._outside = (e) => {
|
||||
if (e.composedPath && e.composedPath().includes(this)) return;
|
||||
this._exitReframe(true);
|
||||
};
|
||||
this._esc = (e) => { if (e.key === 'Escape') this._exitReframe(true); };
|
||||
document.addEventListener('pointerdown', this._outside, true);
|
||||
document.addEventListener('keydown', this._esc, true);
|
||||
}
|
||||
|
||||
_exitReframe(commit) {
|
||||
if (!this.hasAttribute('data-reframe')) return;
|
||||
if (this._dragUp) this._dragUp();
|
||||
this.removeAttribute('data-reframe');
|
||||
this.removeAttribute('data-panning');
|
||||
if (this._outside) document.removeEventListener('pointerdown', this._outside, true);
|
||||
if (this._esc) document.removeEventListener('keydown', this._esc, true);
|
||||
this._outside = this._esc = null;
|
||||
if (commit) this._commitView();
|
||||
}
|
||||
|
||||
attributeChangedCallback() { if (this.shadowRoot) this._render(); }
|
||||
|
||||
// handleEvent — one listener object for all four drag events keeps the
|
||||
// add/remove symmetric and the depth counter correct.
|
||||
handleEvent(e) {
|
||||
if (e.type === 'dragenter' || e.type === 'dragover') {
|
||||
// Without preventDefault the browser never fires 'drop'.
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';
|
||||
if (e.type === 'dragenter') this._depth++;
|
||||
this.setAttribute('data-over', '');
|
||||
} else if (e.type === 'dragleave') {
|
||||
// dragenter/leave fire for every descendant crossing — count depth
|
||||
// so hovering the icon inside the empty state doesn't flicker.
|
||||
if (--this._depth <= 0) { this._depth = 0; this.removeAttribute('data-over'); }
|
||||
} else if (e.type === 'drop') {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this._depth = 0;
|
||||
this.removeAttribute('data-over');
|
||||
const f = e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files[0];
|
||||
if (f) this._ingest(f);
|
||||
}
|
||||
}
|
||||
|
||||
async _ingest(file) {
|
||||
this._setError(null);
|
||||
if (!file || ACCEPT.indexOf(file.type) < 0) {
|
||||
this._setError('Drop a PNG, JPEG, WebP, or AVIF image.');
|
||||
return;
|
||||
}
|
||||
// toDataUrl can take hundreds of ms on a large photo. A Clear or a
|
||||
// newer drop during that window would be clobbered when this await
|
||||
// resumes — bump + capture a generation so stale encodes bail.
|
||||
const gen = ++this._gen;
|
||||
try {
|
||||
const w = this.clientWidth || this.offsetWidth || MAX_DIM;
|
||||
const url = await toDataUrl(file, w);
|
||||
if (gen !== this._gen) return;
|
||||
// Only exit reframe once the new image is in hand — a rejected type
|
||||
// or decode failure leaves the in-progress crop untouched.
|
||||
this._exitReframe(false);
|
||||
const val = { u: url, s: 1, x: 0, y: 0 };
|
||||
setSlot(this.id || '', val);
|
||||
// Keep a session-local copy for id-less slots so the drop still
|
||||
// shows, even though it cannot persist.
|
||||
if (!this.id) { this._local = val; this._render(); }
|
||||
} catch (err) {
|
||||
if (gen !== this._gen) return;
|
||||
this._setError('Could not read that image.');
|
||||
console.warn('<image-slot> ingest failed:', err);
|
||||
}
|
||||
}
|
||||
|
||||
_setError(msg) {
|
||||
if (this._err) { this._err.remove(); this._err = null; }
|
||||
if (!msg) return;
|
||||
const d = document.createElement('div');
|
||||
d.className = 'err'; d.textContent = msg;
|
||||
this.shadowRoot.appendChild(d);
|
||||
this._err = d;
|
||||
setTimeout(() => { if (this._err === d) { d.remove(); this._err = null; } }, 3000);
|
||||
}
|
||||
|
||||
// Reframing (pan/resize) is only meaningful for fit=cover — contain/fill
|
||||
// keep the old object-fit path and double-click is a no-op.
|
||||
_reframes() {
|
||||
return this.hasAttribute('data-filled') &&
|
||||
(this.getAttribute('fit') || 'cover') === 'cover';
|
||||
}
|
||||
|
||||
// Cover-baseline geometry, shared by clamp/apply/resize. Null until the
|
||||
// img has loaded (naturalWidth is 0 before that) or when the slot has no
|
||||
// layout box — ResizeObserver fires with a 0×0 rect under display:none,
|
||||
// and clamping against a degenerate 1×1 frame would silently pull the
|
||||
// stored pan toward zero.
|
||||
_geom() {
|
||||
const iw = this._img.naturalWidth, ih = this._img.naturalHeight;
|
||||
const fw = this.clientWidth, fh = this.clientHeight;
|
||||
if (!iw || !ih || !fw || !fh) return null;
|
||||
return { iw, ih, fw, fh, base: Math.max(fw / iw, fh / ih) };
|
||||
}
|
||||
|
||||
_clampView() {
|
||||
// Pan range on each axis is half the overflow past the frame edge.
|
||||
const g = this._geom();
|
||||
if (!g) return;
|
||||
const mx = Math.max(0, (g.iw * g.base * this._view.s / g.fw - 1) * 50);
|
||||
const my = Math.max(0, (g.ih * g.base * this._view.s / g.fh - 1) * 50);
|
||||
this._view.x = Math.max(-mx, Math.min(mx, this._view.x));
|
||||
this._view.y = Math.max(-my, Math.min(my, this._view.y));
|
||||
}
|
||||
|
||||
_applyView() {
|
||||
const g = this._geom();
|
||||
const fit = this.getAttribute('fit') || 'cover';
|
||||
if (fit !== 'cover' || !g) {
|
||||
// Non-cover, or dimensions not known yet (before img load).
|
||||
this._img.style.width = '100%';
|
||||
this._img.style.height = '100%';
|
||||
this._img.style.left = '50%';
|
||||
this._img.style.top = '50%';
|
||||
this._img.style.objectFit = fit;
|
||||
this._img.style.objectPosition = this.getAttribute('position') || '50% 50%';
|
||||
return;
|
||||
}
|
||||
// Cover baseline: img fills the frame on its tighter axis at s=1, so
|
||||
// pan works immediately on the overflowing axis without zooming first.
|
||||
// Width/height and left/top are all frame-% — depends only on the
|
||||
// frame aspect ratio, so a responsive resize keeps the same crop. The
|
||||
// spill layer mirrors the same box so its corners = image corners.
|
||||
const k = g.base * this._view.s;
|
||||
const w = (g.iw * k / g.fw * 100) + '%';
|
||||
const h = (g.ih * k / g.fh * 100) + '%';
|
||||
const l = (50 + this._view.x) + '%';
|
||||
const t = (50 + this._view.y) + '%';
|
||||
this._img.style.width = w; this._img.style.height = h;
|
||||
this._img.style.left = l; this._img.style.top = t;
|
||||
this._img.style.objectFit = '';
|
||||
this._spill.style.width = w; this._spill.style.height = h;
|
||||
this._spill.style.left = l; this._spill.style.top = t;
|
||||
}
|
||||
|
||||
_commitView() {
|
||||
const v = { s: this._view.s, x: this._view.x, y: this._view.y };
|
||||
if (this._userUrl) v.u = this._userUrl;
|
||||
// Framing-only (no u) persists too so an author-src slot remembers its
|
||||
// crop; clearing the sidecar still falls through to src=.
|
||||
if (this.id) setSlot(this.id, v);
|
||||
else { this._local = v; }
|
||||
}
|
||||
|
||||
_render() {
|
||||
// Shape / mask. Presets use border-radius so the dashed ring can
|
||||
// follow the rounded outline; clip-path is only applied for an
|
||||
// explicit `mask` (the ring is hidden there since a rectangle
|
||||
// dashed border chopped by an arbitrary polygon looks broken).
|
||||
const mask = this.getAttribute('mask');
|
||||
const shape = (this.getAttribute('shape') || 'rounded').toLowerCase();
|
||||
let radius = '';
|
||||
if (shape === 'circle') radius = '50%';
|
||||
else if (shape === 'pill') radius = '9999px';
|
||||
else if (shape === 'rounded') {
|
||||
const n = parseFloat(this.getAttribute('radius'));
|
||||
radius = (Number.isFinite(n) ? n : 12) + 'px';
|
||||
}
|
||||
this._frame.style.borderRadius = mask ? '' : radius;
|
||||
this._frame.style.clipPath = mask || '';
|
||||
this._ring.style.borderRadius = mask ? '' : radius;
|
||||
this._ring.style.display = mask ? 'none' : '';
|
||||
|
||||
// Controls and reframe entry gate on this so share links stay read-only.
|
||||
const editable = !!(window.omelette && window.omelette.writeFile);
|
||||
this.toggleAttribute('data-editable', editable);
|
||||
this._sub.style.display = editable ? '' : 'none';
|
||||
|
||||
// Content. The sidecar is also writable by the agent's write_file
|
||||
// tool, so its value isn't guaranteed canvas-originated — only accept
|
||||
// data:image/ URLs from it. The `src` attribute is author-controlled
|
||||
// (Claude wrote it into the HTML) so it passes through unchanged.
|
||||
let stored = this.id ? getSlot(this.id) : this._local;
|
||||
if (stored && stored.u && !/^data:image\//i.test(stored.u)) stored = null;
|
||||
const srcAttr = this.getAttribute('src') || '';
|
||||
this._userUrl = (stored && stored.u) || null;
|
||||
const url = this._userUrl || srcAttr;
|
||||
// Don't clobber an in-flight reframe with a store-triggered re-render.
|
||||
if (!this.hasAttribute('data-reframe')) {
|
||||
this._view = {
|
||||
s: stored && Number.isFinite(stored.s) ? clampS(stored.s) : 1,
|
||||
x: stored && Number.isFinite(stored.x) ? stored.x : 0,
|
||||
y: stored && Number.isFinite(stored.y) ? stored.y : 0,
|
||||
};
|
||||
}
|
||||
this._cap.textContent = this.getAttribute('placeholder') || 'Drop an image';
|
||||
// Toggle via style.display — the [hidden] attribute alone loses to
|
||||
// the display:flex / display:block rules in the stylesheet above.
|
||||
if (url) {
|
||||
if (this._img.getAttribute('src') !== url) {
|
||||
this._img.src = url;
|
||||
this._ghost.src = url;
|
||||
}
|
||||
this._img.style.display = 'block';
|
||||
this._empty.style.display = 'none';
|
||||
this.setAttribute('data-filled', '');
|
||||
this._clampView();
|
||||
this._applyView();
|
||||
} else {
|
||||
this._img.style.display = 'none';
|
||||
this._img.removeAttribute('src');
|
||||
this._ghost.removeAttribute('src');
|
||||
this._empty.style.display = 'flex';
|
||||
this.removeAttribute('data-filled');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!customElements.get('image-slot')) {
|
||||
customElements.define('image-slot', ImageSlot);
|
||||
}
|
||||
})();
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
+1603
File diff suppressed because it is too large
Load Diff
+4
-1
@@ -3,7 +3,10 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Родословное дерево семьи</title>
|
||||
<title>Heritage — Родословное дерево семьи</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600&family=Spectral:wght@300;400;500;600&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
+13
-10
@@ -7,7 +7,7 @@ import PersonModal from './components/PersonModal';
|
||||
const DEFAULT_VIZ: VizSettings = {
|
||||
orientation: 'vertical',
|
||||
edgeStyle: 'ortho',
|
||||
colors: { parent: '#7c8aa5', spouse: '#c9a14a', adopt: '#e06aa3' },
|
||||
colors: { parent: '#8A7B63', spouse: '#A9854C', adopt: '#9C5A6F' },
|
||||
};
|
||||
|
||||
export default function App() {
|
||||
@@ -35,17 +35,20 @@ export default function App() {
|
||||
: [];
|
||||
|
||||
return (
|
||||
<div className="h-screen flex flex-col bg-slate-50 dark:bg-slate-900 text-slate-800 dark:text-slate-100">
|
||||
<header className="flex items-center gap-3 px-4 py-2 bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 flex-wrap">
|
||||
<div className="flex items-center gap-2 font-bold">🌳 Родословное дерево</div>
|
||||
<div className="h-screen flex flex-col bg-cream dark:bg-ink text-ink dark:text-cream">
|
||||
<header className="flex items-center gap-3 px-4 py-2 bg-cream-2/80 dark:bg-ink-2 border-b border-gold/30 flex-wrap">
|
||||
<a href="../landing/index.html" className="flex items-center gap-2 font-serif text-lg text-ink dark:text-cream no-underline">
|
||||
<span className="w-7 h-7 rounded-lg grid place-items-center text-cream text-sm" style={{ background: 'linear-gradient(135deg,#7E3B2D,#A9854C)' }}>H</span>
|
||||
Heritage · Древо
|
||||
</a>
|
||||
<div className="relative">
|
||||
<input value={q} onChange={e => setQ(e.target.value)} placeholder="Поиск по имени или фамилии…"
|
||||
className="w-56 px-3 py-1.5 rounded-lg bg-slate-100 dark:bg-slate-700 text-sm outline-none" />
|
||||
className="w-56 px-3 py-1.5 rounded-lg bg-cream dark:bg-ink-2 border border-gold/20 text-sm outline-none" />
|
||||
{found.length > 0 && (
|
||||
<div className="absolute top-10 left-0 right-0 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg shadow z-20">
|
||||
<div className="absolute top-10 left-0 right-0 bg-cream dark:bg-ink-2 border border-gold/30 rounded-lg shadow z-20">
|
||||
{found.map(p => (
|
||||
<div key={p.id} onClick={() => { setSelected(p.id); setQ(''); }}
|
||||
className="px-3 py-2 text-sm cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-700">
|
||||
className="px-3 py-2 text-sm cursor-pointer hover:bg-cream-2 dark:hover:bg-ink">
|
||||
{p.last_name} {p.first_name} {p.middle_name}
|
||||
</div>
|
||||
))}
|
||||
@@ -54,17 +57,17 @@ export default function App() {
|
||||
</div>
|
||||
<div className="flex-1" />
|
||||
<select value={viz.orientation} onChange={e => setViz(v => ({ ...v, orientation: e.target.value as any }))}
|
||||
className="px-2 py-1.5 rounded-lg bg-slate-100 dark:bg-slate-700 text-sm">
|
||||
className="px-2 py-1.5 rounded-lg bg-cream dark:bg-ink-2 border border-gold/20 text-sm">
|
||||
<option value="vertical">Вертикально</option>
|
||||
<option value="horizontal">Горизонтально</option>
|
||||
</select>
|
||||
<select value={viz.edgeStyle} onChange={e => setViz(v => ({ ...v, edgeStyle: e.target.value as any }))}
|
||||
className="px-2 py-1.5 rounded-lg bg-slate-100 dark:bg-slate-700 text-sm">
|
||||
className="px-2 py-1.5 rounded-lg bg-cream dark:bg-ink-2 border border-gold/20 text-sm">
|
||||
<option value="ortho">Лучи: примагниченные</option>
|
||||
<option value="curve">Лучи: кривые</option>
|
||||
<option value="straight">Лучи: прямые</option>
|
||||
</select>
|
||||
<button onClick={() => setDark(d => !d)} className="px-3 py-1.5 rounded-lg bg-slate-100 dark:bg-slate-700">
|
||||
<button onClick={() => setDark(d => !d)} className="px-3 py-1.5 rounded-lg bg-cream dark:bg-ink-2 border border-gold/20">
|
||||
{dark ? '☀️' : '🌙'}
|
||||
</button>
|
||||
</header>
|
||||
|
||||
@@ -34,7 +34,7 @@ export default function FamilyTree({
|
||||
<Background gap={24} />
|
||||
<Controls />
|
||||
<MiniMap pannable zoomable nodeColor={(n) =>
|
||||
(n.data?.person?.gender === 'female') ? '#e06aa3' : '#4f8ff5'} />
|
||||
(n.data?.person?.gender === 'female') ? '#9C5A6F' : '#3F6F6F'} />
|
||||
</ReactFlow>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -11,25 +11,25 @@ export default function PersonModal({ id, onClose, onNavigate }: {
|
||||
|
||||
const Chip = ({ rel }: { rel: any }) => (
|
||||
<button onClick={() => onNavigate(rel.id)}
|
||||
className="inline-flex items-center gap-1.5 px-2.5 py-1 mr-1.5 mb-1.5 rounded-full border border-slate-200 dark:border-slate-600 text-sm hover:border-indigo-400">
|
||||
<span className={`w-2 h-2 rounded-full ${rel.gender === 'female' ? 'bg-pink-400' : 'bg-blue-400'}`} />
|
||||
className="inline-flex items-center gap-1.5 px-2.5 py-1 mr-1.5 mb-1.5 rounded-full border border-gold/30 text-sm hover:border-brick">
|
||||
<span className={`w-2 h-2 rounded-full ${rel.gender === 'female' ? 'bg-female' : 'bg-male'}`} />
|
||||
{rel.first_name} {rel.last_name}
|
||||
</button>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/55 grid place-items-center z-50 p-4" onClick={onClose}>
|
||||
<div className="bg-white dark:bg-slate-800 rounded-2xl w-[720px] max-w-full max-h-[90vh] overflow-auto"
|
||||
<div className="bg-cream dark:bg-ink-2 rounded-2xl w-[720px] max-w-full max-h-[90vh] overflow-auto"
|
||||
onClick={e => e.stopPropagation()}>
|
||||
<div className="flex gap-4 p-6 border-b border-slate-100 dark:border-slate-700 items-center">
|
||||
<div className={`w-20 h-20 rounded-2xl grid place-items-center text-2xl font-bold text-white ${p.gender === 'female' ? 'bg-pink-400' : 'bg-blue-400'}`}>
|
||||
<div className="flex gap-4 p-6 border-b border-gold/20 items-center">
|
||||
<div className={`w-20 h-20 rounded-2xl grid place-items-center text-2xl font-serif font-bold text-cream ${p.gender === 'female' ? 'bg-female' : 'bg-male'}`}>
|
||||
{(p.first_name?.[0] || '') + (p.last_name?.[0] || '')}
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xl font-bold">{p.last_name} {p.first_name} {p.middle_name}</h2>
|
||||
<div className="text-sm text-slate-500">{p.birth_date} {p.death_date && `– ${p.death_date}`} · {p.birth_place}</div>
|
||||
<h2 className="text-xl font-serif font-medium">{p.last_name} {p.first_name} {p.middle_name}</h2>
|
||||
<div className="text-sm text-taupe">{p.birth_date} {p.death_date && `– ${p.death_date}`} · {p.birth_place}</div>
|
||||
</div>
|
||||
<button onClick={onClose} className="ml-auto w-9 h-9 rounded-lg bg-slate-100 dark:bg-slate-700">✕</button>
|
||||
<button onClick={onClose} className="ml-auto w-9 h-9 rounded-lg bg-cream-2 dark:bg-ink">✕</button>
|
||||
</div>
|
||||
<div className="p-6 grid sm:grid-cols-2 gap-4 text-sm">
|
||||
<Field label="Биография" full v={p.bio} />
|
||||
@@ -38,12 +38,12 @@ export default function PersonModal({ id, onClose, onNavigate }: {
|
||||
<Field label="Контекст / доп. информация" full v={p.context} />
|
||||
{p.resource_url && (
|
||||
<div className="sm:col-span-2">
|
||||
<div className="text-xs uppercase text-slate-400 mb-1">Подробный ресурс</div>
|
||||
<a href={p.resource_url} target="_blank" className="text-indigo-500">🔗 {p.resource_url}</a>
|
||||
<div className="text-xs uppercase tracking-wide text-taupe mb-1">Подробный ресурс</div>
|
||||
<a href={p.resource_url} target="_blank" className="text-brick">🔗 {p.resource_url}</a>
|
||||
</div>
|
||||
)}
|
||||
<div className="sm:col-span-2">
|
||||
<div className="text-xs uppercase text-slate-400 mb-2">Родственники</div>
|
||||
<div className="text-xs uppercase tracking-wide text-taupe mb-2">Родственники</div>
|
||||
<div className="mb-2"><b>Родители:</b> {p.parents?.map((r: any) => <Chip key={r.id} rel={r} />) || '—'}</div>
|
||||
<div className="mb-2"><b>Супруг(а):</b> {p.spouses?.map((r: any) => <Chip key={r.id} rel={r} />) || '—'}</div>
|
||||
<div className="mb-2"><b>Дети:</b> {p.children?.map((r: any) => <Chip key={r.id} rel={r} />) || '—'}</div>
|
||||
@@ -57,7 +57,7 @@ export default function PersonModal({ id, onClose, onNavigate }: {
|
||||
function Field({ label, v, full }: { label: string; v?: string; full?: boolean }) {
|
||||
return (
|
||||
<div className={full ? 'sm:col-span-2' : ''}>
|
||||
<div className="text-xs uppercase text-slate-400 mb-1">{label}</div>
|
||||
<div className="text-xs uppercase tracking-wide text-taupe mb-1">{label}</div>
|
||||
<div>{v || '—'}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -10,18 +10,18 @@ const years = (p: Person) => {
|
||||
|
||||
export default function PersonNode({ data }: { data: { person: Person } }) {
|
||||
const p = data.person;
|
||||
const accent = p.gender === 'female' ? 'border-pink-400' : 'border-blue-400';
|
||||
const avatar = p.gender === 'female' ? 'bg-pink-400' : 'bg-blue-400';
|
||||
const accent = p.gender === 'female' ? 'border-female' : 'border-male';
|
||||
const avatar = p.gender === 'female' ? 'bg-female' : 'bg-male';
|
||||
return (
|
||||
<div className={`w-[180px] h-[96px] rounded-2xl border-2 ${accent} bg-white dark:bg-slate-800 shadow-md flex items-center gap-3 px-3`}>
|
||||
<div className={`w-[180px] h-[96px] rounded-xl border-2 ${accent} bg-cream dark:bg-ink-2 shadow-md flex items-center gap-3 px-3`}>
|
||||
<Handle type="target" position={Position.Top} className="opacity-0" />
|
||||
<div className={`w-12 h-12 rounded-full ${avatar} text-white grid place-items-center font-bold flex-none`}>
|
||||
<div className={`w-12 h-12 rounded-full ${avatar} text-cream grid place-items-center font-serif font-bold flex-none`}>
|
||||
{p.photo_url ? <img src={p.photo_url} className="w-full h-full rounded-full object-cover" /> : initials(p)}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="font-bold text-sm text-slate-800 dark:text-slate-100 truncate">{p.first_name} {p.last_name}</div>
|
||||
<div className="text-xs text-slate-500 truncate">{p.middle_name}</div>
|
||||
<div className="text-xs text-slate-400">{years(p)}</div>
|
||||
<div className="font-serif font-medium text-sm text-ink dark:text-cream truncate">{p.first_name} {p.last_name}</div>
|
||||
<div className="text-xs text-taupe truncate">{p.middle_name}</div>
|
||||
<div className="text-xs text-taupe/80">{years(p)}</div>
|
||||
</div>
|
||||
<Handle type="source" position={Position.Bottom} className="opacity-0" />
|
||||
</div>
|
||||
|
||||
@@ -3,4 +3,5 @@
|
||||
@tailwind utilities;
|
||||
|
||||
html, body, #root { height: 100%; margin: 0; }
|
||||
body { font-family: 'Manrope', system-ui, sans-serif; }
|
||||
.react-flow__attribution { display: none; }
|
||||
|
||||
@@ -2,6 +2,27 @@
|
||||
export default {
|
||||
darkMode: 'class',
|
||||
content: ['./index.html', './src/**/*.{ts,tsx}'],
|
||||
theme: { extend: {} },
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
cream: '#F3ECDD',
|
||||
'cream-2': '#EFE6D2',
|
||||
ink: '#231B12',
|
||||
'ink-2': '#2B2216',
|
||||
brick: '#7E3B2D',
|
||||
gold: '#A9854C',
|
||||
'gold-2': '#C9A05E',
|
||||
taupe: '#8A7B63',
|
||||
// гендерные цвета в палитре Heritage
|
||||
male: '#3F6F6F',
|
||||
female: '#9C5A6F',
|
||||
},
|
||||
fontFamily: {
|
||||
serif: ['"Playfair Display"', 'Georgia', 'serif'],
|
||||
body: ['Spectral', 'Georgia', 'serif'],
|
||||
sans: ['Manrope', 'system-ui', 'sans-serif'],
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
|
||||
@@ -0,0 +1,347 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Heritage — История вашей семьи, сохранённая на поколения</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Manrope:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root{
|
||||
--cream:#F3ECDD; --cream-2:#EFE6D2; --ink:#231B12; --ink-2:#2B2216;
|
||||
--brick:#7E3B2D; --gold:#A9854C; --gold-2:#C9A05E;
|
||||
--muted:#564B3C; --muted-2:#6B5E4C; --line:rgba(35,27,18,0.12);
|
||||
--serif:'Playfair Display',Georgia,serif; --body:'Spectral',Georgia,serif; --sans:'Manrope',system-ui,sans-serif;
|
||||
}
|
||||
*{box-sizing:border-box;}
|
||||
html{scroll-behavior:smooth;}
|
||||
body{margin:0; background:var(--cream); color:var(--ink); font-family:var(--body); overflow-x:hidden;}
|
||||
::selection{background:var(--brick); color:var(--cream);}
|
||||
a{color:inherit;}
|
||||
.wrap{max-width:1240px; margin:0 auto; padding:0 40px;}
|
||||
.eyebrow{font-family:var(--sans); font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--brick);}
|
||||
.rule{width:38px; height:1px; background:var(--gold); display:inline-block;}
|
||||
h1,h2,h3{font-family:var(--serif); font-weight:400; margin:0;}
|
||||
.btn{font-family:var(--sans); font-size:14px; letter-spacing:.04em; text-decoration:none; display:inline-block; border-radius:2px; transition:transform .3s ease, background .3s ease, opacity .3s ease;}
|
||||
.btn-brick{color:var(--cream); background:var(--brick); padding:17px 34px;}
|
||||
.btn-brick:hover{transform:translateY(-2px);}
|
||||
.btn-ink{color:var(--cream); background:var(--ink); padding:12px 22px; font-size:13px; letter-spacing:.06em; text-transform:uppercase;}
|
||||
.btn-ink:hover{background:var(--brick);}
|
||||
.link-underline{font-family:var(--sans); font-size:14px; text-decoration:none; border-bottom:1px solid rgba(35,27,18,.4); padding-bottom:3px;}
|
||||
|
||||
/* NAV */
|
||||
header.nav{position:sticky; top:0; z-index:50; background:rgba(243,236,221,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
|
||||
.nav-inner{height:78px; display:flex; align-items:center; justify-content:space-between;}
|
||||
.logo{display:flex; align-items:baseline; gap:10px; text-decoration:none;}
|
||||
.logo b{font-family:var(--serif); font-weight:400; font-size:26px; letter-spacing:.02em;}
|
||||
.logo i{width:6px; height:6px; border-radius:50%; background:var(--brick); display:inline-block; transform:translateY(-3px);}
|
||||
nav.menu{display:flex; align-items:center; gap:34px;}
|
||||
nav.menu a{font-family:var(--sans); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color .3s;}
|
||||
nav.menu a:hover{color:var(--brick);}
|
||||
|
||||
/* HERO */
|
||||
.hero{display:grid; grid-template-columns:1.04fr .96fr; gap:72px; align-items:center; padding:84px 0 96px;}
|
||||
.hero h1{font-size:74px; line-height:1.02; letter-spacing:-.01em; margin:28px 0;}
|
||||
.hero h1 i{font-style:italic; color:var(--brick);}
|
||||
.hero p{font-size:21px; line-height:1.55; color:var(--muted); max-width:480px; margin:0 0 40px; font-weight:300;}
|
||||
.hero-actions{display:flex; align-items:center; gap:24px; flex-wrap:wrap;}
|
||||
.frame{position:relative;}
|
||||
.frame .border{position:absolute; inset:-14px -14px 24px 24px; border:1px solid rgba(169,133,76,.55); z-index:0;}
|
||||
.slot{position:relative; z-index:1; display:grid; place-items:center; text-align:center; background:var(--cream-2); border:1px solid var(--line); color:var(--muted-2); font-family:var(--sans); font-size:13px; letter-spacing:.04em; box-shadow:0 30px 70px -30px rgba(35,27,18,.5);}
|
||||
.slot svg{opacity:.4; margin-bottom:10px;}
|
||||
.badge{position:absolute; z-index:2; left:-30px; bottom:36px; background:var(--cream); border:1px solid var(--line); padding:18px 22px; max-width:208px; box-shadow:0 18px 40px -20px rgba(35,27,18,.45);}
|
||||
.badge b{font-family:var(--serif); font-size:34px; line-height:1; color:var(--brick); display:block;}
|
||||
.badge span{font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin-top:7px; display:block;}
|
||||
|
||||
/* VALUES */
|
||||
.values{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--cream-2);}
|
||||
.values-inner{padding:26px 40px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px;}
|
||||
.values em{font-family:var(--body); font-style:italic; font-size:17px; color:var(--muted);}
|
||||
.values .dot{width:5px; height:5px; border-radius:50%; background:var(--gold);}
|
||||
|
||||
/* MANIFESTO */
|
||||
.manifesto{max-width:980px; margin:0 auto; padding:120px 40px 110px; text-align:center;}
|
||||
.manifesto p{font-family:var(--serif); font-size:42px; line-height:1.34; letter-spacing:-.005em; margin:30px 0 0; color:var(--ink-2);}
|
||||
.manifesto p i{font-style:italic; color:var(--brick);}
|
||||
|
||||
/* HOW (dark) */
|
||||
.how{background:var(--ink); color:#EDE4D2;}
|
||||
.how-inner{padding:108px 40px 116px;}
|
||||
.how-head{display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:74px; flex-wrap:wrap;}
|
||||
.how-head h2{font-size:54px; line-height:1.05; max-width:560px;}
|
||||
.how-head h2 i{font-style:italic; color:var(--gold-2);}
|
||||
.how-head .eyebrow{color:var(--gold-2);}
|
||||
.how-head p{font-size:18px; line-height:1.6; color:#B6AB95; max-width:380px; font-weight:300; margin:0;}
|
||||
.steps{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(237,228,210,.18);}
|
||||
.step{padding:40px 28px 44px; border-right:1px solid rgba(237,228,210,.18); transition:background .35s;}
|
||||
.step:hover{background:rgba(201,160,94,.07);}
|
||||
.step .num{font-family:var(--serif); font-size:20px; color:var(--gold-2); margin-bottom:54px;}
|
||||
.step h3{font-family:var(--serif); font-weight:500; font-size:25px; margin:0 0 14px; line-height:1.15;}
|
||||
.step p{font-size:15.5px; line-height:1.62; color:#A99E88; font-weight:300; margin:0;}
|
||||
|
||||
/* BOOK */
|
||||
.book{padding:120px 0;}
|
||||
.book-grid{display:grid; grid-template-columns:.94fr 1.06fr; gap:80px; align-items:center;}
|
||||
.book .frame .border{inset:24px -18px -18px 18px; background:var(--cream-2); border:1px solid var(--line);}
|
||||
.book h2{font-size:52px; line-height:1.06; margin:26px 0 30px;}
|
||||
.book h2 i{font-style:italic; color:var(--brick);}
|
||||
.book .lead{font-size:19px; line-height:1.6; color:var(--muted); font-weight:300; margin:0 0 40px; max-width:480px;}
|
||||
.feat-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line);}
|
||||
.feat{background:var(--cream); padding:24px 26px;}
|
||||
.feat b{font-family:var(--serif); font-weight:400; font-size:19px; color:var(--ink-2); display:block; margin-bottom:7px;}
|
||||
.feat span{font-size:14.5px; line-height:1.5; color:var(--muted-2); font-weight:300;}
|
||||
|
||||
/* QUOTE */
|
||||
.quote{background:var(--cream-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
|
||||
.quote-inner{max-width:1000px; margin:0 auto; padding:104px 40px; text-align:center;}
|
||||
.quote .mark{font-family:var(--serif); font-size:72px; line-height:0; color:var(--gold); height:40px;}
|
||||
.quote blockquote{font-family:var(--serif); font-style:italic; font-size:38px; line-height:1.34; margin:0 0 36px; color:var(--ink-2);}
|
||||
.quote .who{display:flex; align-items:center; justify-content:center; gap:16px;}
|
||||
.quote .ava{width:52px; height:52px; border-radius:50%; background:var(--gold); display:grid; place-items:center; color:var(--cream); font-family:var(--serif); font-size:20px;}
|
||||
.quote .who .n{font-family:var(--sans); font-size:14px; color:var(--ink-2);}
|
||||
.quote .who .m{font-family:var(--sans); font-size:12px; letter-spacing:.06em; color:var(--brick); text-transform:uppercase; margin-top:3px;}
|
||||
|
||||
/* PRICING */
|
||||
.pricing{padding:120px 0 110px;}
|
||||
.pricing-head{text-align:center; margin-bottom:70px;}
|
||||
.pricing-head h2{font-size:54px; line-height:1.05; margin-top:22px;}
|
||||
.pricing-head h2 i{font-style:italic; color:var(--brick);}
|
||||
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch;}
|
||||
.plan{border:1px solid var(--line); padding:42px 36px 40px; display:flex; flex-direction:column; position:relative; background:var(--cream); color:var(--ink);}
|
||||
.plan.dark{background:var(--ink-2); color:#EDE4D2; border-color:rgba(237,228,210,.22);}
|
||||
.plan .tag{position:absolute; top:-12px; left:36px; background:var(--gold); color:var(--ink); font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:6px 14px;}
|
||||
.plan .name{font-family:var(--sans); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--brick); margin-bottom:22px;}
|
||||
.plan.dark .name{color:var(--gold-2);}
|
||||
.plan .price{display:flex; align-items:baseline; gap:6px; margin-bottom:8px;}
|
||||
.plan .price b{font-family:var(--serif); font-weight:400; font-size:48px; line-height:1;}
|
||||
.plan .price span{font-size:15px; color:var(--muted-2);}
|
||||
.plan.dark .price span{color:#A99E88;}
|
||||
.plan .tagline{font-size:15px; line-height:1.55; color:var(--muted-2); font-weight:300; margin:0 0 28px; min-height:48px;}
|
||||
.plan.dark .tagline{color:#A99E88;}
|
||||
.plan .div{height:1px; background:var(--line); margin-bottom:26px;}
|
||||
.plan.dark .div{background:rgba(237,228,210,.22);}
|
||||
.plan ul{list-style:none; padding:0; margin:0 0 36px; display:flex; flex-direction:column; gap:14px; flex:1;}
|
||||
.plan li{display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.45; font-weight:300;}
|
||||
.plan li::before{content:'✦'; color:var(--gold); font-size:15px;}
|
||||
.plan .cta{font-family:var(--sans); font-size:13px; letter-spacing:.06em; text-transform:uppercase; text-align:center; padding:15px; text-decoration:none; color:var(--ink); border:1px solid rgba(35,27,18,.4); transition:opacity .3s;}
|
||||
.plan.dark .cta{color:var(--ink); background:var(--gold); border-color:var(--gold);}
|
||||
.plan .cta:hover{opacity:.82;}
|
||||
|
||||
/* FINAL CTA */
|
||||
.final{background:var(--brick); color:var(--cream);}
|
||||
.final-inner{max-width:1000px; margin:0 auto; padding:120px 40px; text-align:center;}
|
||||
.final .eyebrow{color:#E9C9A0;}
|
||||
.final h2{font-size:60px; line-height:1.08; margin:30px 0 32px;}
|
||||
.final h2 i{font-style:italic;}
|
||||
.final p{font-size:20px; line-height:1.6; color:#F0DCC6; font-weight:300; max-width:540px; margin:0 auto 44px;}
|
||||
.final form{display:flex; gap:12px; max-width:480px; margin:0 auto; flex-wrap:wrap; justify-content:center;}
|
||||
.final input{flex:1; min-width:240px; background:rgba(243,236,221,.1); border:1px solid rgba(243,236,221,.4); color:var(--cream); font-family:var(--body); font-size:16px; padding:16px 20px; border-radius:2px; outline:none;}
|
||||
.final input::placeholder{color:rgba(243,236,221,.6);}
|
||||
.final button{font-family:var(--sans); font-size:14px; letter-spacing:.04em; color:var(--ink); background:var(--cream); border:none; padding:16px 32px; border-radius:2px; cursor:pointer; transition:transform .3s;}
|
||||
.final button:hover{transform:translateY(-2px);}
|
||||
.final .ok{margin-top:24px; font-family:var(--body); font-style:italic; font-size:17px; color:#F0DCC6;}
|
||||
|
||||
/* FOOTER */
|
||||
footer{background:var(--ink); color:#A99E88;}
|
||||
.foot-inner{padding:64px 40px 40px;}
|
||||
.foot-top{display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap; padding-bottom:44px; border-bottom:1px solid rgba(237,228,210,.16);}
|
||||
.foot-top .about{max-width:300px;}
|
||||
.foot-top .about b{font-family:var(--serif); font-size:26px; color:#EDE4D2; display:block; margin-bottom:14px;}
|
||||
.foot-top .about p{font-size:15px; line-height:1.6; font-weight:300; margin:0;}
|
||||
.foot-cols{display:flex; gap:64px; flex-wrap:wrap;}
|
||||
.foot-col{display:flex; flex-direction:column; gap:13px;}
|
||||
.foot-col .h{font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#6F6450;}
|
||||
.foot-col a, .foot-col span{color:#C5BAA3; text-decoration:none; font-size:15px; font-weight:300;}
|
||||
.foot-bottom{padding-top:24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
|
||||
.foot-bottom .c{font-family:var(--sans); font-size:12px; color:#6F6450;}
|
||||
.foot-bottom .s{font-family:var(--body); font-style:italic; font-size:14px; color:#8B7F69;}
|
||||
|
||||
@media (max-width:900px){
|
||||
.wrap{padding:0 22px;}
|
||||
.hero{grid-template-columns:1fr; gap:40px; padding:54px 0 60px;}
|
||||
.hero h1{font-size:48px;}
|
||||
.how-inner,.book,.pricing{padding-left:22px; padding-right:22px;}
|
||||
.steps{grid-template-columns:1fr 1fr;}
|
||||
.book-grid{grid-template-columns:1fr; gap:40px;}
|
||||
.plans{grid-template-columns:1fr;}
|
||||
.manifesto p,.how-head h2,.book h2,.pricing-head h2,.final h2{font-size:34px;}
|
||||
.quote blockquote{font-size:26px;}
|
||||
nav.menu a:not(:last-child){display:none;}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body id="top">
|
||||
|
||||
<!-- NAV -->
|
||||
<header class="nav"><div class="wrap nav-inner">
|
||||
<a class="logo" href="#top"><b>Heritage</b><i></i></a>
|
||||
<nav class="menu">
|
||||
<a href="#about">О проекте</a>
|
||||
<a href="#how">Как это работает</a>
|
||||
<a href="#book">Книга</a>
|
||||
<a href="#pricing">Тарифы</a>
|
||||
<a class="btn btn-ink" href="../preview/index.html">Открыть дерево</a>
|
||||
</nav>
|
||||
</div></header>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="wrap hero">
|
||||
<div>
|
||||
<div style="display:flex; align-items:center; gap:14px;"><span class="rule"></span><span class="eyebrow">Семейное наследие · с 2025</span></div>
|
||||
<h1>История вашей<br>семьи, сохранённая<br><i>на поколения</i></h1>
|
||||
<p>Мы записываем голоса, собираем фотографии и письма, бережно восстанавливаем родословную — и превращаем всё это в книгу и частный архив, который останется детям и внукам.</p>
|
||||
<div class="hero-actions">
|
||||
<a class="btn btn-brick" href="#start">Создать наследие</a>
|
||||
<a class="link-underline" href="../preview/index.html">Построить дерево →</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="frame">
|
||||
<div class="border"></div>
|
||||
<div class="slot" style="height:560px;">
|
||||
<div><svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.3"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg><br>Семейный портрет</div>
|
||||
</div>
|
||||
<div class="badge"><b>3 462</b><span>сохранённых истории</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- VALUES -->
|
||||
<div class="values"><div class="values-inner">
|
||||
<em>Голос</em><span class="dot"></span>
|
||||
<em>Фотографии</em><span class="dot"></span>
|
||||
<em>Письма</em><span class="dot"></span>
|
||||
<em>Родословная</em><span class="dot"></span>
|
||||
<em>Реликвии</em>
|
||||
</div></div>
|
||||
|
||||
<!-- MANIFESTO -->
|
||||
<section id="about" class="manifesto">
|
||||
<div class="eyebrow">Почему это важно</div>
|
||||
<p>Каждое поколение уносит с собой истории, которые больше <i>некому рассказать.</i> Имена забываются, фотографии теряются, голоса стихают. Мы возвращаем их домой.</p>
|
||||
</section>
|
||||
|
||||
<!-- HOW -->
|
||||
<section id="how" class="how"><div class="wrap how-inner">
|
||||
<div class="how-head">
|
||||
<div>
|
||||
<div style="display:flex; align-items:center; gap:14px; margin-bottom:22px;"><span class="rule"></span><span class="eyebrow">Как это работает</span></div>
|
||||
<h2>Четыре шага<br>от памяти к <i>наследию</i></h2>
|
||||
</div>
|
||||
<p>Мы ведём вас за руку на каждом этапе. От вас — только желание сохранить. Всё остальное берём на себя.</p>
|
||||
</div>
|
||||
<div class="steps">
|
||||
<div class="step"><div class="num">01</div><h3>Беседа</h3><p>Тёплое интервью с близкими. Записываем голос и истории — дома или онлайн, в удобном ритме.</p></div>
|
||||
<div class="step"><div class="num">02</div><h3>Архив</h3><p>Собираем и оцифровываем фотографии, письма, документы. Реставрируем то, что выцвело от времени.</p></div>
|
||||
<div class="step"><div class="num">03</div><h3>Родословная</h3><p>Восстанавливаем линии семьи, сверяем даты и имена, строим наглядное древо до прадедов.</p></div>
|
||||
<div class="step"><div class="num">04</div><h3>Книга</h3><p>Верстаем и печатаем именную книгу в ручном переплёте. Плюс приватный цифровой архив.</p></div>
|
||||
</div>
|
||||
</div></section>
|
||||
|
||||
<!-- BOOK -->
|
||||
<section id="book" class="wrap book"><div class="book-grid">
|
||||
<div class="frame">
|
||||
<div class="border"></div>
|
||||
<div class="slot" style="height:540px;"><div><svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.3"><path d="M4 4h7v16H4z"/><path d="M13 4h7v16h-7z"/></svg><br>Фото готовой книги</div></div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="display:flex; align-items:center; gap:14px;"><span class="rule"></span><span class="eyebrow">Что вы получаете</span></div>
|
||||
<h2>Книга, которую<br>хочется <i>передать дальше</i></h2>
|
||||
<p class="lead">Ручной переплёт, бумага хлопкового оттенка, оттиск фамильного герба на обложке. Внутри — выверенная вёрстка, отреставрированные снимки и расшифрованные голоса близких.</p>
|
||||
<div class="feat-grid">
|
||||
<div class="feat"><b>Ручной переплёт</b><span>Лён или кожа, тиснёная обложка, сшитый блок.</span></div>
|
||||
<div class="feat"><b>Реставрация фото</b><span>Возвращаем чёткость старым снимкам.</span></div>
|
||||
<div class="feat"><b>Голос близких</b><span>QR ведёт к аудиозаписям внутри книги.</span></div>
|
||||
<div class="feat"><b>Семейное древо</b><span>Разворот с выверенной родословной.</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div></section>
|
||||
|
||||
<!-- QUOTE -->
|
||||
<section class="quote"><div class="quote-inner">
|
||||
<div class="mark">“</div>
|
||||
<blockquote>Я держала в руках книгу и впервые услышала голос бабушки так, будто она рядом. Теперь это есть у каждого в нашей семье.</blockquote>
|
||||
<div class="who">
|
||||
<div class="ava">А</div>
|
||||
<div style="text-align:left;"><div class="n">Анна Воронцова</div><div class="m">Москва · семья из 4 поколений</div></div>
|
||||
</div>
|
||||
</div></section>
|
||||
|
||||
<!-- PRICING -->
|
||||
<section id="pricing" class="wrap pricing">
|
||||
<div class="pricing-head">
|
||||
<div class="eyebrow">Форматы участия</div>
|
||||
<h2>Выберите глубину <i>наследия</i></h2>
|
||||
</div>
|
||||
<div class="plans">
|
||||
<div class="plan">
|
||||
<div class="name">Хроника</div>
|
||||
<div class="price"><b>85 000</b><span>₽</span></div>
|
||||
<p class="tagline">Одна линия семьи, бережно собранная в книгу.</p>
|
||||
<div class="div"></div>
|
||||
<ul><li>До 3 интервью</li><li>Оцифровка 50 фотографий</li><li>Книга 80 страниц, 2 экз.</li><li>Цифровой архив</li></ul>
|
||||
<a class="cta" href="#start">Выбрать</a>
|
||||
</div>
|
||||
<div class="plan dark">
|
||||
<span class="tag">Чаще всего выбирают</span>
|
||||
<div class="name">Наследие</div>
|
||||
<div class="price"><b>180 000</b><span>₽</span></div>
|
||||
<p class="tagline">Полная история рода с реставрацией и древом.</p>
|
||||
<div class="div"></div>
|
||||
<ul><li>До 8 интервью</li><li>Оцифровка 200 фотографий</li><li>Реставрация снимков</li><li>Книга 160 страниц, 5 экз.</li><li>Семейное древо</li><li>Аудиоархив с QR</li></ul>
|
||||
<a class="cta" href="#start">Выбрать</a>
|
||||
</div>
|
||||
<div class="plan">
|
||||
<div class="name">Династия</div>
|
||||
<div class="price"><b>от 360 000</b><span>₽</span></div>
|
||||
<p class="tagline">Архивная экспедиция и фамильное издание.</p>
|
||||
<div class="div"></div>
|
||||
<ul><li>Без ограничений по интервью</li><li>Работа в архивах и ЗАГС</li><li>Многотомное издание</li><li>Тираж для всей семьи</li><li>Персональный куратор</li></ul>
|
||||
<a class="cta" href="#start">Обсудить</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FINAL CTA -->
|
||||
<section id="start" class="final"><div class="final-inner">
|
||||
<div class="eyebrow">Начните сегодня</div>
|
||||
<h2>Пока истории ещё<br><i>можно услышать</i></h2>
|
||||
<p>Оставьте заявку — мы свяжемся, обсудим вашу семью и составим план первой беседы. Без обязательств.</p>
|
||||
<form id="leadForm">
|
||||
<input type="email" required placeholder="Ваш e-mail">
|
||||
<button type="submit">Оставить заявку</button>
|
||||
</form>
|
||||
<div class="ok" id="okMsg" style="display:none;">Спасибо. Мы свяжемся с вами в течение двух дней.</div>
|
||||
</div></section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer><div class="foot-inner">
|
||||
<div class="foot-top">
|
||||
<div class="about"><b>Heritage</b><p>Студия семейного наследия. Сохраняем голоса, лица и истории — бережно и навсегда.</p></div>
|
||||
<div class="foot-cols">
|
||||
<div class="foot-col">
|
||||
<span class="h">Навигация</span>
|
||||
<a href="#about">О проекте</a><a href="#how">Как это работает</a><a href="#book">Книга</a><a href="#pricing">Тарифы</a>
|
||||
</div>
|
||||
<div class="foot-col">
|
||||
<span class="h">Контакты</span>
|
||||
<a href="mailto:hello@heritage.studio">hello@heritage.studio</a>
|
||||
<a href="tel:+70000000000">+7 000 000-00-00</a>
|
||||
<span>Москва · Санкт-Петербург</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="foot-bottom">
|
||||
<span class="c">© 2026 Heritage Studio. Все права защищены.</span>
|
||||
<span class="s">Память живёт, пока её передают.</span>
|
||||
</div>
|
||||
</div></footer>
|
||||
|
||||
<script>
|
||||
document.getElementById('leadForm').addEventListener('submit', function(e){
|
||||
e.preventDefault();
|
||||
this.style.display = 'none';
|
||||
document.getElementById('okMsg').style.display = 'block';
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+43
-37
@@ -4,41 +4,47 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Родословное дерево семьи — превью</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600&family=Spectral:wght@300;400;500;600&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #f5f6f8;
|
||||
--panel: #ffffff;
|
||||
--panel-2: #f0f2f5;
|
||||
--text: #1c2230;
|
||||
--muted: #687087;
|
||||
--border: #dfe3ea;
|
||||
--accent: #4f6df5;
|
||||
--male: #4f8ff5;
|
||||
--male-bg: #e8f1ff;
|
||||
--female: #e06aa3;
|
||||
--female-bg: #ffe9f3;
|
||||
--shadow: 0 4px 20px rgba(20,30,60,.08);
|
||||
--node-shadow: 0 2px 6px rgba(20,30,60,.10);
|
||||
--bg: #F3ECDD;
|
||||
--panel: #FBF7EC;
|
||||
--panel-2: #EFE6D2;
|
||||
--text: #231B12;
|
||||
--muted: #6B5E4C;
|
||||
--border: #DCCFB4;
|
||||
--accent: #7E3B2D;
|
||||
--male: #3F6F6F;
|
||||
--male-bg: #E5EAE7;
|
||||
--female: #9C5A6F;
|
||||
--female-bg: #F0E2E5;
|
||||
--shadow: 0 10px 34px -18px rgba(35,27,18,.40);
|
||||
--node-shadow: 0 2px 10px -3px rgba(35,27,18,.28);
|
||||
--serif: 'Playfair Display', Georgia, serif;
|
||||
--body: 'Spectral', Georgia, serif;
|
||||
--sans: 'Manrope', system-ui, sans-serif;
|
||||
}
|
||||
html[data-theme="dark"] {
|
||||
--bg: #0f1320;
|
||||
--panel: #171c2b;
|
||||
--panel-2: #1f2536;
|
||||
--text: #e6e9f2;
|
||||
--muted: #97a0b8;
|
||||
--border: #2a3145;
|
||||
--accent: #6d86ff;
|
||||
--male: #5a93ff;
|
||||
--male-bg: #16263f;
|
||||
--female: #ff85bd;
|
||||
--female-bg: #361927;
|
||||
--shadow: 0 6px 28px rgba(0,0,0,.45);
|
||||
--node-shadow: 0 2px 8px rgba(0,0,0,.45);
|
||||
--bg: #1C160E;
|
||||
--panel: #2B2216;
|
||||
--panel-2: #33291A;
|
||||
--text: #EDE4D2;
|
||||
--muted: #A99E88;
|
||||
--border: #473A26;
|
||||
--accent: #C9A05E;
|
||||
--male: #6FA3A0;
|
||||
--male-bg: #21302E;
|
||||
--female: #C98AA0;
|
||||
--female-bg: #321F27;
|
||||
--shadow: 0 14px 40px -18px rgba(0,0,0,.6);
|
||||
--node-shadow: 0 3px 12px -3px rgba(0,0,0,.55);
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html, body { height: 100%; margin: 0; }
|
||||
body {
|
||||
font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
font-family: var(--sans);
|
||||
background: var(--bg); color: var(--text);
|
||||
display: flex; flex-direction: column; overflow: hidden;
|
||||
transition: background .25s, color .25s;
|
||||
@@ -48,11 +54,11 @@
|
||||
background: var(--panel); border-bottom: 1px solid var(--border);
|
||||
box-shadow: var(--shadow); z-index: 20; flex-wrap: wrap;
|
||||
}
|
||||
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; }
|
||||
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 500; font-size: 19px; letter-spacing: .01em; }
|
||||
.brand .logo {
|
||||
width: 30px; height: 30px; border-radius: 9px;
|
||||
background: linear-gradient(135deg, var(--accent), #9d7bff);
|
||||
display: grid; place-items: center; color: #fff; font-size: 16px;
|
||||
width: 30px; height: 30px; border-radius: 8px;
|
||||
background: linear-gradient(135deg, var(--accent), var(--gold, #A9854C));
|
||||
display: grid; place-items: center; color: #F3ECDD; font-size: 15px;
|
||||
}
|
||||
.spacer { flex: 1; }
|
||||
.search { position: relative; }
|
||||
@@ -154,7 +160,7 @@
|
||||
width: 92px; height: 92px; border-radius: 18px; flex: none; display: grid; place-items: center;
|
||||
font-size: 32px; font-weight: 700; color: #fff;
|
||||
}
|
||||
.modal h2 { margin: 0 0 4px; font-size: 22px; }
|
||||
.modal h2 { margin: 0 0 4px; font-size: 24px; font-family: var(--serif); font-weight: 500; }
|
||||
.modal .sub { color: var(--muted); font-size: 14px; }
|
||||
.modal .close { position: absolute; right: 16px; top: 16px; border: none; background: var(--panel-2); width: 34px; height: 34px; border-radius: 9px; cursor: pointer; color: var(--text); font-size: 18px; }
|
||||
.modal .body { padding: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
|
||||
@@ -198,7 +204,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="brand"><div class="logo">🌳</div><span class="t">Родословное дерево</span></div>
|
||||
<a class="brand" href="../landing/index.html" style="text-decoration:none;color:inherit" title="На главную"><div class="logo">H</div><span class="t">Heritage · Древо</span></a>
|
||||
<div class="search">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
|
||||
<input id="searchInput" placeholder="Поиск по имени или фамилии…" autocomplete="off" />
|
||||
@@ -238,9 +244,9 @@
|
||||
</div>
|
||||
<div class="label">Цвета лучей</div>
|
||||
<div style="padding:4px 14px 8px;display:grid;grid-template-columns:1fr auto;gap:8px 6px;align-items:center;font-size:13px">
|
||||
<span>Родители — дети</span><input type="color" data-color="parent" value="#7c8aa5">
|
||||
<span>Супруги</span><input type="color" data-color="spouse" value="#c9a14a">
|
||||
<span>Усыновление</span><input type="color" data-color="adopt" value="#e06aa3">
|
||||
<span>Родители — дети</span><input type="color" data-color="parent" value="#8A7B63">
|
||||
<span>Супруги</span><input type="color" data-color="spouse" value="#A9854C">
|
||||
<span>Усыновление</span><input type="color" data-color="adopt" value="#9C5A6F">
|
||||
</div>
|
||||
<div class="sep"></div>
|
||||
<button data-act-viz="expand">▽ Развернуть все ветки</button>
|
||||
@@ -308,7 +314,7 @@ let collapsed = new Set();
|
||||
const settings = {
|
||||
orientation: "vertical", // vertical | horizontal
|
||||
edgeStyle: "ortho", // straight | ortho (примагниченные) | curve
|
||||
colors: { parent:"#7c8aa5", spouse:"#c9a14a", adopt:"#e06aa3" }
|
||||
colors: { parent:"#8A7B63", spouse:"#A9854C", adopt:"#9C5A6F" }
|
||||
};
|
||||
|
||||
function fullName(p){ return [p.lastName, p.firstName, p.middleName].filter(Boolean).join(" "); }
|
||||
|
||||
Reference in New Issue
Block a user