71 lines
3.9 KiB
HTML
71 lines
3.9 KiB
HTML
<!doctype html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{{ title or 'ForMe' }}</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--bg: #0b0e13; --bg-soft: #11161f; --card: #121825; --text: #e6edf3; --muted: #97a3b6;
|
|
--accent: #4f8cff; --accent-2: #7a5cff; --ring: rgba(79,140,255,.45);
|
|
}
|
|
html, body { height: 100%; }
|
|
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
|
|
color: var(--text); background: radial-gradient(1200px 400px at 10% -10%, rgba(79,140,255,0.12), transparent 60%),
|
|
radial-gradient(1000px 400px at 100% 0%, rgba(122,92,255,0.10), transparent 60%), var(--bg); }
|
|
.container { max-width: 980px; margin: 0 auto; padding: 24px; }
|
|
header { position: sticky; top:0; z-index:1000; display:flex; align-items:center; justify-content:space-between;
|
|
padding:14px 18px; margin:0 0 18px 0; background: linear-gradient(180deg, rgba(18,24,37,.85), rgba(18,24,37,.65));
|
|
backdrop-filter: saturate(1.2) blur(8px); border:1px solid rgba(255,255,255,.06); border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.35); }
|
|
nav a { margin-left: 10px; }
|
|
.card { background: var(--card); border: 1px solid rgba(255,255,255,.06); border-radius: 16px; padding: 20px; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
|
|
.muted { color: var(--muted); font-size: .92rem; }
|
|
.row { margin-bottom: 1rem; }
|
|
.btn { display:inline-block; padding:10px 14px; border:none; cursor:pointer; text-decoration:none; color:#fff; font-weight:600; letter-spacing:.2px;
|
|
background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-radius:10px; box-shadow:0 10px 25px rgba(79,140,255,.35); }
|
|
.btn.secondary { background: linear-gradient(135deg,#2a2f3a,#394356); box-shadow:none; }
|
|
input[type=text], input[type=password], textarea { width:100%; color:var(--text); background:var(--bg-soft); border:1px solid rgba(255,255,255,.06);
|
|
border-radius:12px; padding:10px 12px; outline:none; }
|
|
input:focus, textarea:focus { box-shadow: 0 0 0 4px var(--ring); }
|
|
textarea { min-height:260px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
|
|
.flash { padding:10px 12px; margin-bottom:1rem; border-radius:10px; border:1px solid rgba(255,255,255,.08); }
|
|
.flash.success { background: rgba(46,204,113,.12); color: #bbf7d0; }
|
|
.flash.error { background: rgba(255,92,122,.12); color: #fecaca; }
|
|
table { width:100%; border-collapse: collapse; background: var(--card); border-radius:12px; overflow:hidden; }
|
|
th, td { text-align:left; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.06); }
|
|
thead th { background: rgba(255,255,255,.04); font-weight:600; }
|
|
tbody tr:hover { background: rgba(255,255,255,.02); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<div><strong>{{ title or 'ForMe' }}</strong></div>
|
|
<nav>
|
|
{% if logged_in %}
|
|
<form style="display:inline" method="post" action="{{ url_for('auth.logout') }}">
|
|
<button class="btn" type="submit">Выйти</button>
|
|
</form>
|
|
{% endif %}
|
|
</nav>
|
|
</header>
|
|
|
|
<div class="card">
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
{% for category, message in messages %}
|
|
<div class="flash {{ category }}">{{ message }}</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
{% block content %}{% endblock %}
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|