255 lines
9.7 KiB
HTML
255 lines
9.7 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; }
|
||
.auth-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: var(--kt-ai-bg);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 9999;
|
||
}
|
||
.auth-card {
|
||
width: 100%;
|
||
max-width: 420px;
|
||
margin: var(--kt-ai-space-5);
|
||
padding: var(--kt-ai-space-8) 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);
|
||
text-align: center;
|
||
}
|
||
.auth-card h1 {
|
||
font-size: var(--kt-ai-text-xl);
|
||
margin-bottom: var(--kt-ai-space-3);
|
||
}
|
||
.auth-card p {
|
||
color: var(--kt-ai-fg-muted);
|
||
margin-bottom: var(--kt-ai-space-6);
|
||
}
|
||
.auth-card form { display: flex; gap: var(--kt-ai-space-3); }
|
||
.auth-card input { flex: 1; text-align: center; }
|
||
.auth-error {
|
||
display: none;
|
||
margin-top: var(--kt-ai-space-4);
|
||
color: var(--kt-ai-danger);
|
||
font-size: var(--kt-ai-text-sm);
|
||
}
|
||
.site-hidden { visibility: hidden; }
|
||
.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 class="site-hidden">
|
||
|
||
<div id="auth-overlay" class="auth-overlay" hidden>
|
||
<div class="auth-card">
|
||
<h1>Семейная страница</h1>
|
||
<p>Введите пароль, чтобы открыть воспоминание.</p>
|
||
<form id="auth-form">
|
||
<input class="kt-ai-input" id="auth-password" type="password" inputmode="numeric" autocomplete="off" placeholder="Пароль" required>
|
||
<button class="kt-ai-btn" data-variant="primary" type="submit">Войти</button>
|
||
</form>
|
||
<div id="auth-error" class="auth-error">Неверный пароль</div>
|
||
</div>
|
||
</div>
|
||
|
||
<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" data-cols="2" style="margin-top:var(--kt-ai-space-9)">
|
||
<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>
|
||
(function() {
|
||
var PASSWORD = "123456789";
|
||
var KEY = "ghbdtn_mem_unlocked";
|
||
|
||
if (sessionStorage.getItem(KEY) === "1") {
|
||
document.body.classList.remove("site-hidden");
|
||
initReveal();
|
||
return;
|
||
}
|
||
|
||
var overlay = document.getElementById("auth-overlay");
|
||
var form = document.getElementById("auth-form");
|
||
var input = document.getElementById("auth-password");
|
||
var error = document.getElementById("auth-error");
|
||
|
||
overlay.hidden = false;
|
||
|
||
form.addEventListener("submit", function(e) {
|
||
e.preventDefault();
|
||
if (input.value === PASSWORD) {
|
||
sessionStorage.setItem(KEY, "1");
|
||
document.body.classList.remove("site-hidden");
|
||
overlay.style.opacity = "0";
|
||
overlay.style.transition = "opacity .35s ease";
|
||
setTimeout(function() {
|
||
overlay.hidden = true;
|
||
}, 350);
|
||
initReveal();
|
||
} else {
|
||
error.style.display = "block";
|
||
input.value = "";
|
||
input.focus();
|
||
}
|
||
});
|
||
})();
|
||
|
||
function initReveal() {
|
||
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>
|