sherimbetova.d/ghbdtn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add password gate

Browse Source
This commit is contained in:
sherimbetova.d 2026-09-18 09:53:23 +00:00
parent 9bafb6ac9f
commit 1f8f12d2aa
1 changed files with 92 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
index.html
View File

@ -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>