ruslan/ForME
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI polish: global modern styles; Admin button pinned top-left across app and generated pages; index redirects to login for guests

Browse Source
This commit is contained in:
RGalyaviev
2025-09-03 14:37:36 +03:00
commit 85eaf6a99a
7 changed files with 468 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
templates/admin.html Normal file
View File

@@ -0,0 +1,40 @@
{% extends 'base.html' %}
{% block content %}
<h1>Публикация HTML-страниц</h1>
<form method="post">
<div class="row">
<label for="html">HTML-код</label>
<textarea id="html" name="html" placeholder="<h1>Заголовок</h1>\n<p>Мой контент...</p>" required></textarea>
</div>
<button class="btn" type="submit">Опубликовать</button>
<span class="muted">После публикации создаётся ссылка с UUID.</span>
</form>
<h2 style="margin-top:2rem;">Опубликованные страницы</h2>
{% if pages %}
<table>
<thead>
<tr>
<th>ID</th>
<th>UUID</th>
<th>Ссылка</th>
<th>Создано</th>
</tr>
</thead>
<tbody>
{% for p in pages %}
<tr>
<td>{{ p.id }}</td>
<td><code>{{ p.uuid }}</code></td>
<td><a href="{{ base_url }}/p/{{ p.uuid }}" target="_blank">{{ base_url }}/p/{{ p.uuid }}</a></td>
<td>{{ p.created_at }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<p class="muted">Страниц пока нет.</p>
{% endif %}
{% endblock %}

115
templates/base.html Normal file
View File

@@ -0,0 +1,115 @@
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ title or 'Админка' }}</title>
<style>
:root {
--bg: #0b0e13;
--bg-soft: #11161f;
--card: #121825;
--text: #e6edf3;
--muted: #97a3b6;
--accent: #4f8cff;
--accent-2: #7a5cff;
--danger: #ff5c7a;
--success: #2ecc71;
--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 14px 140px; 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);
}
header nav { position: absolute; top: 14px; left: 18px; }
.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: 0.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);
transition: transform .06s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(79,140,255,.45); }
.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;
box-shadow: inset 0 0 0 1px transparent;
}
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); }
nav a { margin-left: 10px; }
</style>
</head>
<body>
<div class="container">
<header>
<div><strong>{{ title or 'Админка' }}</strong></div>
<nav>
{% if logged_in %}
<a class="btn secondary" href="{{ url_for('admin') }}">Админка</a>
<form style="display:inline" method="post" action="{{ url_for('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>

16
templates/login.html Normal file
View File

@@ -0,0 +1,16 @@
{% extends 'base.html' %}
{% block content %}
<h1>Вход в админку</h1>
<form method="post">
<div class="row">
<label>Имя пользователя</label>
<input type="text" name="username" autocomplete="username" required>
</div>
<div class="row">
<label>Пароль</label>
<input type="password" name="password" autocomplete="current-password" required>
</div>
<button class="btn" type="submit">Войти</button>
</form>
{% endblock %}