From 1f8f12d2aa179fd0819fcd1f43133093538a3321 Mon Sep 17 00:00:00 2001
From: "sherimbetova.d" <sherimbetova.d@yandex.kz>
Date: Fri, 18 Sep 2026 09:53:23 +0000
Subject: [PATCH] add password gate

---
 index.html | 98 ++++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 92 insertions(+), 6 deletions(-)
diff --git a/index.html b/index.html
index 48404c5..8dbf392 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,42 @@
 <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;
@@ -58,7 +94,19 @@
   }
 </style>
 </head>
-<body>
+<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">
@@ -84,7 +132,7 @@
     <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">
+    <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>
@@ -158,10 +206,48 @@
 </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); });
+(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>
