258 lines
8.3 KiB
HTML
258 lines
8.3 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>{% block title %}PBT – Öffi-Erfahrungen{% endblock %}</title>
|
||
<style>
|
||
:root {
|
||
--bg: #0d1117;
|
||
--panel: #161b22;
|
||
--panel-border: #30363d;
|
||
--field-bg: #0d1117;
|
||
--field-border: #30363d;
|
||
--field-border-focus: #4a9eff;
|
||
--text: #e6edf3;
|
||
--text-muted: #8b949e;
|
||
--accent: #4a9eff;
|
||
--accent-hover: #3d8ce6;
|
||
--danger: #f85149;
|
||
--success: #3fb950;
|
||
}
|
||
* { box-sizing: border-box; }
|
||
body {
|
||
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
max-width: 720px;
|
||
margin: 0 auto;
|
||
padding: 2rem 1rem;
|
||
line-height: 1.5;
|
||
}
|
||
a { color: var(--accent); text-decoration: none; }
|
||
a:hover { text-decoration: underline; }
|
||
|
||
header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 2rem;
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem;
|
||
}
|
||
header h1 { font-size: 1.3rem; margin: 0; }
|
||
nav a { margin-left: 1rem; color: var(--text-muted); }
|
||
nav a:hover { color: var(--accent); }
|
||
|
||
.flash { padding: 0.7rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: 0.9rem; }
|
||
.flash.error { background: rgba(248, 81, 73, 0.15); color: #ffa198; border: 1px solid rgba(248, 81, 73, 0.4); }
|
||
.flash.success { background: rgba(63, 185, 80, 0.15); color: #56d364; border: 1px solid rgba(63, 185, 80, 0.4); }
|
||
|
||
.card {
|
||
background: var(--panel);
|
||
border: 1px solid var(--panel-border);
|
||
border-radius: 10px;
|
||
padding: 1.5rem;
|
||
max-width: 420px;
|
||
margin: 0 auto;
|
||
}
|
||
.card h2 { text-align: center; margin-top: 0; font-size: 1.15rem; font-weight: 600; }
|
||
|
||
form { display: flex; flex-direction: column; gap: 1rem; }
|
||
label {
|
||
font-weight: 600;
|
||
font-size: 0.85rem;
|
||
color: var(--text);
|
||
margin-bottom: 0.35rem;
|
||
display: block;
|
||
}
|
||
label .required { color: var(--danger); margin-left: 2px; }
|
||
label .field-optional { color: var(--text-muted); font-weight: 400; margin-left: 2px; }
|
||
.label-row { display: flex; justify-content: space-between; align-items: baseline; }
|
||
.label-row a { font-size: 0.8rem; }
|
||
|
||
input, select, textarea {
|
||
width: 100%;
|
||
padding: 0.6rem 0.7rem;
|
||
font-size: 0.95rem;
|
||
background: var(--field-bg);
|
||
border: 1px solid var(--field-border);
|
||
border-radius: 6px;
|
||
color: var(--text);
|
||
font-family: inherit;
|
||
}
|
||
input:focus, select:focus, textarea:focus {
|
||
outline: none;
|
||
border-color: var(--field-border-focus);
|
||
box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.15);
|
||
}
|
||
input::placeholder { color: var(--text-muted); }
|
||
|
||
.field { display: flex; flex-direction: column; }
|
||
|
||
button, .btn {
|
||
padding: 0.65rem 1rem;
|
||
font-size: 0.95rem;
|
||
font-weight: 600;
|
||
border: 1px solid transparent;
|
||
border-radius: 6px;
|
||
background: var(--accent);
|
||
color: #fff;
|
||
cursor: pointer;
|
||
width: 100%;
|
||
}
|
||
button:hover, .btn:hover { background: var(--accent-hover); }
|
||
.secondary {
|
||
background: transparent;
|
||
border: 1px solid var(--panel-border);
|
||
color: var(--text);
|
||
}
|
||
.secondary:hover { background: rgba(255,255,255,0.04); }
|
||
a.btn, a.btn:hover { display: inline-block; text-align: center; text-decoration: none; }
|
||
.btn.small {
|
||
width: auto;
|
||
padding: 0.45rem 0.8rem;
|
||
font-size: 0.85rem;
|
||
font-weight: 500;
|
||
}
|
||
.btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
|
||
|
||
.divider {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
color: var(--text-muted);
|
||
font-size: 0.85rem;
|
||
margin: 0.25rem 0;
|
||
}
|
||
.divider::before, .divider::after {
|
||
content: "";
|
||
flex: 1;
|
||
height: 1px;
|
||
background: var(--panel-border);
|
||
}
|
||
|
||
.card-footer {
|
||
text-align: center;
|
||
font-size: 0.9rem;
|
||
color: var(--text-muted);
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
|
||
th, td { text-align: left; padding: 0.6rem 0.4rem; border-bottom: 1px solid var(--panel-border); font-size: 0.9rem; }
|
||
th { color: var(--text-muted); font-weight: 600; }
|
||
.stars { color: #e3b341; white-space: nowrap; }
|
||
.stop-dot { color: var(--success); font-size: 0.7rem; vertical-align: middle; }
|
||
|
||
.row-actions { display: flex; gap: 0.4rem; }
|
||
.row-actions form { display: contents; }
|
||
.icon-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 2rem;
|
||
height: 2rem;
|
||
padding: 0;
|
||
border: 1px solid var(--panel-border);
|
||
border-radius: 6px;
|
||
background: transparent;
|
||
color: var(--text-muted);
|
||
cursor: pointer;
|
||
}
|
||
.icon-btn svg { width: 16px; height: 16px; }
|
||
.icon-btn.edit:hover, .icon-btn.map:hover { color: var(--accent); border-color: var(--accent); background: rgba(74, 158, 255, 0.1); }
|
||
.icon-btn.delete { color: var(--danger); }
|
||
.icon-btn.delete:hover { background: rgba(248, 81, 73, 0.12); border-color: var(--danger); }
|
||
.icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }
|
||
.icon-btn:disabled:hover { color: var(--text-muted); border-color: var(--panel-border); background: transparent; }
|
||
|
||
.route-map {
|
||
height: 220px;
|
||
border-radius: 8px;
|
||
border: 1px solid var(--panel-border);
|
||
background: var(--field-bg);
|
||
}
|
||
/* Leaflet's own UI (zoom buttons, attribution) is deliberately left in its
|
||
standard light styling - it sits on map tiles, not our page background. */
|
||
|
||
dialog.map-dialog {
|
||
border: 1px solid var(--panel-border);
|
||
border-radius: 10px;
|
||
background: var(--panel);
|
||
color: var(--text);
|
||
padding: 1rem;
|
||
width: min(560px, 92vw);
|
||
}
|
||
dialog.map-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
|
||
.map-dialog-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
margin-bottom: 0.75rem;
|
||
font-weight: 600;
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.combo { position: relative; display: flex; flex-direction: column; }
|
||
.combo-list {
|
||
position: absolute;
|
||
z-index: 20;
|
||
left: 0;
|
||
right: 0;
|
||
top: calc(100% + 4px);
|
||
background: var(--panel);
|
||
border: 1px solid var(--panel-border);
|
||
border-radius: 6px;
|
||
max-height: 260px;
|
||
overflow-y: auto;
|
||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
||
}
|
||
.combo-option {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 0.5rem;
|
||
padding: 0.5rem 0.7rem;
|
||
font-size: 0.9rem;
|
||
cursor: pointer;
|
||
}
|
||
.combo-option.active, .combo-option:hover { background: rgba(74, 158, 255, 0.15); }
|
||
.combo-option .muni { color: var(--text-muted); font-size: 0.8rem; }
|
||
.combo-option .kind { margin-left: auto; font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }
|
||
.combo-empty { padding: 0.5rem 0.7rem; font-size: 0.85rem; color: var(--text-muted); }
|
||
.field-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.3rem; min-height: 1em; }
|
||
.field-hint.matched { color: var(--success); }
|
||
</style>
|
||
{% block head %}{% endblock %}
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<h1>🚋 PBT – Öffi-Erfahrungen</h1>
|
||
<nav>
|
||
{% if current_user.is_authenticated %}
|
||
<a href="{{ url_for('dashboard') }}">Meine Fahrten</a>
|
||
<a href="{{ url_for('neue_fahrt') }}">Neue Fahrt</a>
|
||
<a href="{{ url_for('logout') }}">Logout ({{ current_user.username }})</a>
|
||
{% else %}
|
||
<a href="{{ url_for('login') }}">Login</a>
|
||
<a href="{{ url_for('register') }}">Registrieren</a>
|
||
{% endif %}
|
||
</nav>
|
||
</header>
|
||
|
||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||
{% for category, message in messages %}
|
||
<div class="flash {{ category }}">{{ message }}</div>
|
||
{% endfor %}
|
||
{% endwith %}
|
||
|
||
{% block content %}{% endblock %}
|
||
|
||
<footer style="margin-top: 3rem; text-align: center; font-size: 0.75rem; color: var(--text-muted);">
|
||
Haltestellendaten © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>-Mitwirkende (ODbL)
|
||
</footer>
|
||
{% block scripts %}{% endblock %}
|
||
</body>
|
||
</html>
|