242 lines
8.0 KiB
HTML
242 lines
8.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="hu">
|
|
<head>
|
|
<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">
|
|
<link rel="icon" type="image/svg+xml" href="/assets/logo.svg">
|
|
<style>
|
|
:root {
|
|
--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: '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 --- */
|
|
nav {
|
|
background: var(--surface);
|
|
border-bottom: 1px solid var(--border);
|
|
padding: 0.75rem 1.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
}
|
|
nav .brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
}
|
|
nav .brand .brand-white { color: var(--text); }
|
|
nav .brand .brand-blue { color: var(--accent-light); }
|
|
nav .brand img {
|
|
height: 36px;
|
|
width: auto;
|
|
}
|
|
nav a {
|
|
color: var(--text-dim);
|
|
text-decoration: none;
|
|
padding: 0.4rem 0.75rem;
|
|
border-radius: var(--radius);
|
|
transition: background 0.15s, color 0.15s;
|
|
}
|
|
nav a:hover, nav a.active {
|
|
background: var(--surface2);
|
|
color: var(--text);
|
|
}
|
|
nav .version {
|
|
margin-left: auto;
|
|
font-size: 0.8rem;
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
/* --- Layout --- */
|
|
.container {
|
|
max-width: 900px;
|
|
margin: 2rem auto;
|
|
padding: 0 1rem;
|
|
flex: 1;
|
|
}
|
|
|
|
/* --- Cards --- */
|
|
.card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.card h2 {
|
|
margin-bottom: 1rem;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
/* --- Forms --- */
|
|
label {
|
|
display: block;
|
|
margin-bottom: 0.3rem;
|
|
font-weight: 500;
|
|
color: var(--text-dim);
|
|
font-size: 0.9rem;
|
|
}
|
|
input[type="text"], input[type="url"], input[type="password"], textarea {
|
|
width: 100%;
|
|
padding: 0.6rem 0.8rem;
|
|
background: var(--input-bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
color: var(--text);
|
|
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; }
|
|
|
|
/* --- Buttons --- */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
padding: 0.6rem 1.2rem;
|
|
border: none;
|
|
border-radius: var(--radius);
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
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); 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 --- */
|
|
.alert {
|
|
padding: 0.75rem 1rem;
|
|
border-radius: var(--radius);
|
|
margin-bottom: 1rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
.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 {
|
|
display: inline-block;
|
|
width: 1.2rem;
|
|
height: 1.2rem;
|
|
border: 2px solid rgba(255,255,255,0.3);
|
|
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; }
|
|
.mb-2 { margin-bottom: 1rem; }
|
|
.mt-1 { margin-top: 0.5rem; }
|
|
.mt-2 { margin-top: 1rem; }
|
|
.text-dim { color: var(--text-dim); }
|
|
.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; }
|
|
.grow { flex: 1; }
|
|
</style>
|
|
{% block head %}{% endblock %}
|
|
</head>
|
|
<body>
|
|
<nav>
|
|
<a href="/" class="brand">
|
|
<img src="/assets/logo.svg" alt="felhom.eu">
|
|
<span class="brand-white">Recept</span> <span class="brand-blue">Importáló</span>
|
|
</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">{{ version }}</span>
|
|
</nav>
|
|
|
|
<div class="container">
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% for cat, msg in messages %}
|
|
<div class="alert alert-{{ cat }}">{{ msg }}</div>
|
|
{% endfor %}
|
|
{% endwith %}
|
|
|
|
{% 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>
|