169 lines
7.2 KiB
HTML
169 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru" data-theme="light">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Наши вечера — тёплое воспоминание</title>
|
||
<link rel="icon" href="design-system/brand/kt-ai-logo.png">
|
||
<link rel="stylesheet" href="design-system/kt-ai-fonts.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-tokens.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-components.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-page.css">
|
||
<style>
|
||
a.kt-ai-btn { text-decoration: none; }
|
||
.photo-frame {
|
||
margin: 0 auto;
|
||
max-width: 720px;
|
||
border-radius: var(--kt-ai-radius-3xl);
|
||
overflow: hidden;
|
||
box-shadow: 0 0 0 1px var(--kt-ai-card-border);
|
||
}
|
||
.photo-frame img {
|
||
display: block;
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
.quote-block {
|
||
max-width: 640px;
|
||
margin: 0 auto;
|
||
padding: var(--kt-ai-space-7) var(--kt-ai-space-7);
|
||
border-radius: var(--kt-ai-radius-3xl);
|
||
background: var(--kt-ai-bg-soft);
|
||
border: 1px solid var(--kt-ai-card-border);
|
||
}
|
||
.quote-block p {
|
||
margin: 0;
|
||
font-size: var(--kt-ai-text-lg);
|
||
line-height: 1.55;
|
||
}
|
||
.step-num {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: var(--kt-ai-radius-full);
|
||
background: var(--kt-ai-primary);
|
||
color: var(--kt-ai-bg);
|
||
font-size: var(--kt-ai-text-sm);
|
||
font-weight: var(--kt-ai-weight-semibold);
|
||
flex: 0 0 auto;
|
||
margin-right: var(--kt-ai-space-3);
|
||
}
|
||
.step {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: var(--kt-ai-space-3);
|
||
margin-bottom: var(--kt-ai-space-5);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="kt-ai-pagehead">
|
||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||
<strong>Воспоминание</strong>
|
||
<span class="kt-ai-spacer"></span>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#photo">Фото</a>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#memory">Воспоминание</a>
|
||
</div>
|
||
</header>
|
||
|
||
<section id="photo" class="kt-ai-hero" data-align="center">
|
||
<div class="kt-ai-wrap" data-width="narrow">
|
||
<h1>Наши вечера с бабушкой</h1>
|
||
<p class="kt-ai-hero-sub">Небольшая страница-память про бабушку, внучку и внучка — про смех, чай и тихие разговоры.</p>
|
||
<div class="photo-frame" style="margin-top:var(--kt-ai-space-8)">
|
||
<img src="IMG-20260918-WA0018.jpg" alt="Бабушка, внучка и внучек">
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="memory" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap" data-width="narrow">
|
||
<div class="quote-block reveal">
|
||
<p>Бабушка всегда умела сделать так, чтобы обычный вечер стал особенным. Рядом с ней и внучкой, и внучек чувствовали себя самыми любимыми. Эти моменты мы храним и помним.</p>
|
||
</div>
|
||
<div class="kt-ai-grid" style="margin-top:var(--kt-ai-space-9); data-cols: 2;" data-cols="2">
|
||
<article class="kt-ai-tile">
|
||
<h3>Смех и разговоры</h3>
|
||
<p>Про бабушкины истории, шутки и то, что казалось совсем не смешным, но после её рассказа — уже очень.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<h3>Руки и забота</h3>
|
||
<p>Вкусный чай, что-то съедобное и то самое внимание, которое даёт только бабушка.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<h3>Внучка и внучек</h3>
|
||
<p>Двое маленьких людей, рядом с которыми бабушка становилась ещё добрее и терпеливее.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<h3>Тепло, которое остаётся</h3>
|
||
<p>Даже когда бабушки больше нет рядом, воспоминания о ней живут в детях и в таких фотографиях.</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="video" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap" data-width="narrow">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Как оживить это воспоминание</h2>
|
||
<p>По этой фотографии можно сделать короткое «мульт-воспоминание»: сцену, где бабушка, внучка и внучек немного двигаются. Вот простой способ сделать это.</p>
|
||
</div>
|
||
<div style="margin-top:var(--kt-ai-space-8)">
|
||
<div class="step reveal">
|
||
<span class="step-num">1</span>
|
||
<div>
|
||
<strong>Выбери сервис</strong><br>
|
||
<span style="color:var(--kt-ai-fg-muted)">Например: Hailuo AI, Kling AI или Luma Dream Machine — все умеют превращать фото в короткое видео.</span>
|
||
</div>
|
||
</div>
|
||
<div class="step reveal">
|
||
<span class="step-num">2</span>
|
||
<div>
|
||
<strong>Загрузи фото</strong><br>
|
||
<span style="color:var(--kt-ai-fg-muted)">Именно то, что на этой странице — бабушка, внучка и внучек.</span>
|
||
</div>
|
||
</div>
|
||
<div class="step reveal">
|
||
<span class="step-num">3</span>
|
||
<div>
|
||
<strong>Введи промпт</strong><br>
|
||
<span style="color:var(--kt-ai-fg-muted)">Например: «A gentle animated memory scene. Grandmother, granddaughter and grandchild smile softly, light warm glow, slow subtle movement, cozy home atmosphere, respectful and tender tone.»</span>
|
||
</div>
|
||
</div>
|
||
<div class="step reveal">
|
||
<span class="step-num">4</span>
|
||
<div>
|
||
<strong>Скачай ролик и покажи семье</strong><br>
|
||
<span style="color:var(--kt-ai-fg-muted)">Это будет тёплый маленький «мультик»-воспоминание, который можно сохранить и пересматривать.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="contacts" class="kt-ai-cta">
|
||
<div class="kt-ai-wrap" data-width="narrow">
|
||
<h2>Сохрани это воспоминание</h2>
|
||
<p>Нажми «Поделиться» в панели предпросмотра, чтобы отправить ссылку близким — и у всех будет одна общая страница памяти.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||
<span>© 2026 Память семьи</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span>Сделано с теплом</span>
|
||
</footer>
|
||
|
||
<script>
|
||
var io=new IntersectionObserver(function(entries){
|
||
entries.forEach(function(e){ if(e.isIntersecting) e.target.classList.add('in'); });
|
||
},{threshold:.12});
|
||
document.querySelectorAll('.reveal').forEach(function(el){ io.observe(el); });
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|