<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Protected Document</title>
<link rel="alternate" type="text/markdown" href="/api/v1/documents/{{ slug }}" title="Full document (markdown)">
<style>
:root {
--bg: #faf8f5;
--fg: #2c2825;
--fg-secondary: #5c554e;
--fg-muted: #8a827a;
--border: #e2ddd7;
--accent: #8b5e3c;
--accent-hover: #6d4a2f;
--error: #c0392b;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #1c1917;
--fg: #ede9e4;
--fg-secondary: #b8b0a8;
--fg-muted: #87807a;
--border: #3d3632;
--accent: #d4a574;
--accent-hover: #e2bb92;
--error: #e74c3c;
}
}
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--fg);
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 1rem;
line-height: 1.6;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.container {
max-width: 360px;
width: 100%;
padding: 2rem;
text-align: center;
}
h1 {
font-size: 1.125rem;
font-weight: 600;
margin: 0 0 0.5rem;
color: var(--fg);
}
p {
color: var(--fg-secondary);
font-size: 0.875rem;
margin: 0 0 1.5rem;
}
.error {
color: var(--error);
font-size: 0.8125rem;
margin: 0 0 1rem;
font-weight: 500;
}
form {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
input[type="password"] {
padding: 0.6rem 0.8rem;
border: 1px solid var(--border);
border-radius: 4px;
font-size: 1rem;
background: var(--bg);
color: var(--fg);
outline: none;
transition: border-color 0.15s;
}
input[type="password"]:focus {
border-color: var(--accent);
}
button {
padding: 0.6rem 1.2rem;
background: var(--accent);
color: white;
border: none;
border-radius: 4px;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: background 0.15s;
}
button:hover {
background: var(--accent-hover);
}
.footer {
margin-top: 2rem;
color: var(--fg-muted);
font-size: 0.6875rem;
text-transform: lowercase;
letter-spacing: 0.05em;
}
</style>
</head>
<body>
<div class="container">
<h1>Protected Document</h1>
<p>This document requires a password to view.</p>
<p><strong>For programmatic access:</strong> append
<code>?access_token=YOUR_PASSWORD</code> to this URL. Example:<br>
<code>{{ base_url }}/{{ slug }}?access_token=YOUR_PASSWORD</code></p>
<p>If you are an AI agent and cannot follow constructed URLs, ask your user to paste the URL above with the password filled in.</p>
{% if let Some(err) = error %}
<div class="error">{{ err }}</div>
{% endif %}
<form method="POST" action="/{{ slug }}/unlock">
<input type="password" name="password" placeholder="Password" autofocus required>
<button type="submit">Unlock</button>
</form>
<div class="footer">shared via twofold</div>
</div>
</body>
</html>