v0.5.1: Design overhaul — felhom.eu branding, blue/cyan color scheme

- New color palette matching felhom.eu/controller templates (blue/cyan accent)
- Plus Jakarta Sans font, 12px border radius, accent glow on focus
- felhom.eu logo in navbar, "Powered by felhom.eu" footer
- Settings page: documentation about external vs internal Docker URLs
- Fixed version double "v" prefix display
- Cleaned up example HTML files from development

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-24 17:21:54 +01:00
parent 70323ae46b
commit ca863e4118
301 changed files with 381 additions and 15723 deletions
+75 -28
View File
@@ -4,30 +4,38 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Recept Importáló{% endblock %}</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=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--bg: #1a1a2e;
--surface: #16213e;
--surface2: #0f3460;
--accent: #e94560;
--accent-hover: #d63851;
--text: #eee;
--text-dim: #aab;
--success: #2ecc71;
--warning: #f39c12;
--danger: #e74c3c;
--border: #2a2a4a;
--input-bg: #1a1a3e;
--radius: 8px;
--bg: #0d1117;
--surface: #161b22;
--surface2: #1c2128;
--accent: #0088cc;
--accent-hover: #006da3;
--accent-light: #00aaff;
--accent-glow: rgba(0,136,204,0.3);
--text: #e6edf3;
--text-dim: #8b949e;
--success: #238636;
--success-text: #3fb950;
--warning: #d29922;
--danger: #da3633;
--border: #30363d;
--input-bg: #0d1117;
--radius: 12px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: var(--bg);
color: var(--text);
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* --- Nav --- */
@@ -40,11 +48,18 @@
gap: 1.5rem;
}
nav .brand {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 1.25rem;
font-weight: 700;
color: var(--accent);
color: var(--accent-light);
text-decoration: none;
}
nav .brand img {
height: 28px;
width: auto;
}
nav a {
color: var(--text-dim);
text-decoration: none;
@@ -67,6 +82,7 @@
max-width: 900px;
margin: 2rem auto;
padding: 0 1rem;
flex: 1;
}
/* --- Cards --- */
@@ -100,12 +116,14 @@
font-size: 0.95rem;
margin-bottom: 1rem;
transition: border-color 0.15s;
font-family: inherit;
}
input:focus, textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-glow);
}
textarea { resize: vertical; min-height: 80px; font-family: inherit; }
textarea { resize: vertical; min-height: 80px; }
/* --- Buttons --- */
.btn {
@@ -120,14 +138,15 @@
cursor: pointer;
transition: background 0.15s, transform 0.1s;
color: #fff;
font-family: inherit;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--surface2); }
.btn-secondary:hover { background: #1a4a7a; }
.btn-success { background: var(--success); color: #111; }
.btn-success:hover { background: #27ae60; }
.btn-secondary { background: var(--surface2); border: 1px solid var(--border); }
.btn-secondary:hover { background: #2d333b; }
.btn-success { background: var(--success); }
.btn-success:hover { background: #1a7f2b; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* --- Alerts --- */
@@ -137,9 +156,9 @@
margin-bottom: 1rem;
font-size: 0.9rem;
}
.alert-success { background: rgba(46,204,113,0.15); border: 1px solid var(--success); }
.alert-warning { background: rgba(243,156,18,0.15); border: 1px solid var(--warning); }
.alert-danger { background: rgba(231,76,60,0.15); border: 1px solid var(--danger); }
.alert-success { background: rgba(35,134,54,0.15); border: 1px solid var(--success); color: var(--success-text); }
.alert-warning { background: rgba(210,153,34,0.15); border: 1px solid var(--warning); color: var(--warning); }
.alert-danger { background: rgba(218,54,51,0.15); border: 1px solid var(--danger); color: #f85149; }
/* --- Spinner --- */
.spinner {
@@ -147,12 +166,32 @@
width: 1.2rem;
height: 1.2rem;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: #fff;
border-top-color: var(--accent-light);
border-radius: 50%;
animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* --- Footer --- */
.site-footer {
text-align: center;
padding: 1.5rem 1rem;
color: var(--text-dim);
font-size: 0.8rem;
border-top: 1px solid var(--border);
margin-top: auto;
}
.site-footer a {
color: var(--accent-light);
text-decoration: none;
}
.site-footer a:hover { text-decoration: underline; }
.site-footer .tagline {
font-style: italic;
margin-top: 0.3rem;
color: #6e7681;
}
/* --- Misc --- */
.hidden { display: none !important; }
.mb-1 { margin-bottom: 0.5rem; }
@@ -160,8 +199,8 @@
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.text-dim { color: var(--text-dim); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success-text); }
.text-danger { color: #f85149; }
.text-warning { color: var(--warning); }
.flex { display: flex; gap: 0.75rem; align-items: center; }
.flex-wrap { flex-wrap: wrap; }
@@ -171,10 +210,13 @@
</head>
<body>
<nav>
<a href="/" class="brand">Recept Importáló</a>
<a href="/" class="brand">
<img src="/assets/logo.svg" alt="felhom.eu">
Recept Importáló
</a>
<a href="/import" {% if request.path == '/import' %}class="active"{% endif %}>Importálás</a>
<a href="/settings" {% if request.path == '/settings' %}class="active"{% endif %}>Beállítások</a>
<span class="version">v{{ version }}</span>
<span class="version">{{ version }}</span>
</nav>
<div class="container">
@@ -187,6 +229,11 @@
{% block content %}{% endblock %}
</div>
<footer class="site-footer">
Powered by <a href="https://felhom.eu" target="_blank">felhom.eu</a>
<div class="tagline">Saját felhőd, saját szabályaid</div>
</footer>
{% block scripts %}{% endblock %}
</body>
</html>