add password gate
This commit is contained in:
parent
9bafb6ac9f
commit
1f8f12d2aa
98
index.html
98
index.html
@ -11,6 +11,42 @@
|
|||||||
<link rel="stylesheet" href="design-system/kt-ai-page.css">
|
<link rel="stylesheet" href="design-system/kt-ai-page.css">
|
||||||
<style>
|
<style>
|
||||||
a.kt-ai-btn { text-decoration: none; }
|
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 {
|
.photo-frame {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-width: 720px;
|
max-width: 720px;
|
||||||
@ -58,7 +94,19 @@
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</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">
|
<header class="kt-ai-pagehead">
|
||||||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||||||
@ -84,7 +132,7 @@
|
|||||||
<div class="quote-block reveal">
|
<div class="quote-block reveal">
|
||||||
<p>Бабушка всегда умела сделать так, чтобы обычный вечер стал особенным. Рядом с ней и внучкой, и внучек чувствовали себя самыми любимыми. Эти моменты мы храним и помним.</p>
|
<p>Бабушка всегда умела сделать так, чтобы обычный вечер стал особенным. Рядом с ней и внучкой, и внучек чувствовали себя самыми любимыми. Эти моменты мы храним и помним.</p>
|
||||||
</div>
|
</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">
|
<article class="kt-ai-tile">
|
||||||
<h3>Смех и разговоры</h3>
|
<h3>Смех и разговоры</h3>
|
||||||
<p>Про бабушкины истории, шутки и то, что казалось совсем не смешным, но после её рассказа — уже очень.</p>
|
<p>Про бабушкины истории, шутки и то, что казалось совсем не смешным, но после её рассказа — уже очень.</p>
|
||||||
@ -158,10 +206,48 @@
|
|||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
var io=new IntersectionObserver(function(entries){
|
(function() {
|
||||||
entries.forEach(function(e){ if(e.isIntersecting) e.target.classList.add('in'); });
|
var PASSWORD = "123456789";
|
||||||
},{threshold:.12});
|
var KEY = "ghbdtn_mem_unlocked";
|
||||||
document.querySelectorAll('.reveal').forEach(function(el){ io.observe(el); });
|
|
||||||
|
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>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user