Frontend basics

This commit is contained in:
Piotr Dec 2025-10-16 23:07:06 +02:00
parent 8565ce19fe
commit e310930d9e
Signed by: stawros
GPG key ID: 74B18A3F0F1E99C0
10 changed files with 607 additions and 58 deletions

View file

@ -4,36 +4,63 @@
<meta charset="utf-8"/>
<title>{{ title }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
body {
font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
margin: 2rem;
}
code {
background: #f4f4f4;
padding: 0.2rem 0.4rem;
border-radius: 4px;
}
a {
color: #0b5fff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
<link rel="stylesheet" href="/static/css/style.css"/>
</head>
<body>
<h1>{{ title }}</h1>
<p>To jest prosta strona Jinja2 serwowana przez FastAPI.</p>
<ul>
<li>UI OpenAPI: <a href="/docs">/docs</a></li>
<li>OpenAPI JSON: <a href="/openapi.json">/openapi.json</a></li>
<li>API v1: <a href="/api/v1/">/api/v1/</a></li>
</ul>
<p>Uruchamianie serwera lokalnie: <code>uv run app</code> lub <code>uv run uvicorn app.main:app --reload</code></p>
<div class="layout">
<div class="left">
<div class="toolbar">
<button id="btn-refresh">Odśwież</button>
<button id="btn-add-group">Nowa grupa</button>
<button id="btn-add-entry">Nowy wpis</button>
</div>
<div id="tree"></div>
</div>
<div class="right">
<div class="toolbar">
<select id="entry-kind">
<option value="simple">Prosty (klucz:wartość)</option>
<option value="complex">Złożony</option>
</select>
<button id="btn-save-all">Zapisz do bazy</button>
</div>
<div class="section" id="editor-simple" style="display:none;">
<div class="row"><label class="mono" style="width:140px;">Klucz</label><input id="s-key" type="text"/></div>
<div class="row"><label class="mono" style="width:140px;">Wartość</label><input id="s-value"
type="password"/></div>
<div class="row" style="justify-content:flex-end; gap:8px;">
<button id="s-save">Zapisz wpis</button>
<button id="s-delete" class="danger">Usuń</button>
</div>
</div>
<div class="section" id="editor-complex" style="display:none;">
<div class="row"><label style="width:140px;">Tytuł</label><input id="c-title" type="text"/></div>
<div class="row"><label style="width:140px;">Użytkownik</label><input id="c-username" type="text"/></div>
<div class="row"><label style="width:140px;">Hasło</label><input id="c-password" type="password"/></div>
<div class="row"><label style="width:140px;">URL</label><input id="c-url" type="url"/></div>
<div class="row"><label style="width:140px;">Notatka</label><textarea id="c-notes" rows="5"></textarea>
</div>
<div class="row" style="justify-content:flex-end; gap:8px;">
<button id="c-save">Zapisz wpis</button>
<button id="c-delete" class="danger">Usuń</button>
</div>
</div>
<div class="section">
<div class="row">
<label style="width:140px;">Docelowa grupa</label>
<input id="target-group" type="text" placeholder="/Ścieżka/Grupy"/>
<button id="btn-move-entry">Przenieś wpis</button>
</div>
</div>
<div class="section">
Aktualna ścieżka: <span id="current-path" class="mono">/</span>
</div>
</div>
</div>
<script src="/static/js/app.js"></script>
</body>
</html>