7f9a1632b3
Ein Neuladen der Willkommensseite - etwa beim Wechsel des Standorts - leert alle <input type="file">. Die zuvor gewaehlte Datei ist damit weg, ohne dass es auffaellt, und das Absenden erzeugt eine Willkommensseite ohne das hochgeladene Logo. Unter jedem Datei-Feld steht jetzt "Keine Datei gewählt" bzw. nach der Auswahl Name und Groesse der Datei. Damit ist vor dem Absenden erkennbar, ob wirklich etwas angehaengt ist. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
272 lines
12 KiB
HTML
272 lines
12 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||
<title>Willkommensseite</title>
|
||
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
||
|
||
<!-- ─── Dark Mode: Theme vor dem Rendern setzen ─── -->
|
||
<script>
|
||
(() => {
|
||
const stored = window.localStorage.getItem("signage-theme");
|
||
const theme = stored === "dark" || stored === "light" ? stored : "light";
|
||
document.documentElement.setAttribute("data-bs-theme", theme);
|
||
})();
|
||
</script>
|
||
|
||
<link rel="stylesheet"
|
||
href="https://unpkg.com/@tabler/core@1.0.0-beta20/dist/css/tabler.min.css">
|
||
<link rel="stylesheet"
|
||
href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
|
||
<script defer
|
||
src="https://unpkg.com/@tabler/core@1.0.0-beta20/dist/js/tabler.min.js"></script>
|
||
|
||
{% include "_styles.html" %}
|
||
|
||
<style>
|
||
.form-label { font-weight: 600; }
|
||
.card { box-shadow: 0 20px 60px rgba(0,0,0,0.08); }
|
||
/* ─── Logo-Vorschau-Box (gestrichelte Border) ─── */
|
||
.logo-preview-box {
|
||
border: 2px dashed var(--ccm-border);
|
||
border-radius: 0.75rem;
|
||
min-height: 120px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 1rem;
|
||
background: #ffffff;
|
||
}
|
||
[data-bs-theme="dark"] .logo-preview-box {
|
||
background: #1a1e24;
|
||
}
|
||
.logo-preview-box img {
|
||
max-height: 100px;
|
||
max-width: 100%;
|
||
object-fit: contain;
|
||
background: #ffffff;
|
||
padding: 8px;
|
||
border-radius: 0.5rem;
|
||
}
|
||
.logo-preview-box .placeholder {
|
||
color: var(--ccm-muted);
|
||
font-size: 0.85rem;
|
||
text-align: center;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="page">
|
||
|
||
{% set brand_subtitle = "Willkommensseite" %}
|
||
{% set site_dropdown_url_prefix = "/willkommen?site=" %}
|
||
{% include "_header.html" %}
|
||
|
||
<!-- ═══════════════════════════════════════════════════
|
||
Navigation (zweite Zeile)
|
||
═══════════════════════════════════════════════════ -->
|
||
<div class="navbar-expand-md">
|
||
<div class="collapse navbar-collapse show">
|
||
<div class="navbar navbar-dark nav-surface">
|
||
<div class="container-xl">
|
||
<div class="d-flex flex-wrap gap-2 py-2">
|
||
<a class="btn btn-white" href="/admin/{{ current_site }}"><i class="ti ti-layout-dashboard me-1"></i>Übersicht</a>
|
||
<a class="btn btn-white" href="/admin/{{ current_site }}/priority"><i class="ti ti-alert-triangle me-1"></i>Priority Playlist</a>
|
||
<a class="btn btn-white active" href="/willkommen?site={{ current_site }}"><i class="ti ti-file-plus me-1"></i>Willkommensseite</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══════════════════════════════════════════════════
|
||
CONTENT – Willkommensseite-Formular
|
||
Bis zu 3 Kundennamen eingeben → Logos via OpenAI + Brandfetch
|
||
→ welcome.html wird generiert und in den Playlists aller Screens
|
||
mit "welcome_enabled" vorne platziert
|
||
═══════════════════════════════════════════════════ -->
|
||
<div class="page-wrapper">
|
||
<div class="container-xl mt-4">
|
||
<div class="card mb-4">
|
||
<div class="card-header">
|
||
<div class="row align-items-center">
|
||
<div class="col">
|
||
<div class="page-pretitle">Willkommensseite</div>
|
||
<h2 class="page-title">Kundeninformationen eingeben (max. 3)</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
{% if error %}
|
||
<div class="alert alert-danger">{{ error }}</div>
|
||
{% endif %}
|
||
{% if success %}
|
||
<div class="alert alert-success">{{ success }}</div>
|
||
{% endif %}
|
||
{% if logo_hinweise %}
|
||
<div class="alert alert-warning">
|
||
<strong>Hinweise zu den hochgeladenen Logos:</strong>
|
||
<ul class="mb-0">
|
||
{% for h in logo_hinweise %}<li>{{ h }}</li>{% endfor %}
|
||
</ul>
|
||
</div>
|
||
{% endif %}
|
||
|
||
<!-- ─── Logo-Vorschau (wird nach POST angezeigt) ─── -->
|
||
<div class="row g-3 mb-4">
|
||
{% for i in range(3) %}
|
||
<div class="col-md-4">
|
||
<label class="form-label">Logo {{ i + 1 }}</label>
|
||
<div class="logo-preview-box">
|
||
{% if logo_urls and logo_urls[i] %}
|
||
<img src="{{ logo_urls[i] }}" alt="Logo {{ i + 1 }}">
|
||
{% else %}
|
||
<div class="placeholder">kein Logo</div>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
|
||
<!-- ─── Eingabeformular (bis zu 3 Kunden) ─── -->
|
||
<form method="POST" enctype="multipart/form-data">
|
||
<input type="hidden" name="site" value="{{ site }}">
|
||
|
||
{# Echte Zeilenumbrueche statt - in einer Variablen wuerde Jinja
|
||
das kaufmaennische Und escapen und die Entity waere als Text sichtbar. #}
|
||
{% set slots = [
|
||
("z. B. Beispiel GmbH", "**Max Mustermann**\n+49 123 4567890\n*E-Mail*: max@beispiel.de"),
|
||
("z. B. Muster AG", "**Maria Schmidt**\n+49 456 7890123\n*E-Mail*: maria@muster.de"),
|
||
("z. B. Firma GmbH", "**Sabine Weber**\n+49 789 0123456\n*E-Mail*: sabine@firma.de")
|
||
] %}
|
||
|
||
<div class="row g-3 mb-3">
|
||
{% for i in range(3) %}
|
||
<div class="col-md-4">
|
||
<label class="form-label" for="customer_name_{{ i + 1 }}">Kunde {{ i + 1 }}{% if i > 0 %} (optional){% endif %}</label>
|
||
<input type="text" class="form-control" id="customer_name_{{ i + 1 }}"
|
||
name="customer_name_{{ i + 1 }}" placeholder="{{ slots[i][0] }}"
|
||
value="{{ customer_names[i] if customer_names else '' }}">
|
||
|
||
<label class="form-label mt-2" for="contact_{{ i + 1 }}">Ansprechpartner (optional)</label>
|
||
<textarea class="form-control" id="contact_{{ i + 1 }}" name="contact_{{ i + 1 }}" rows="4"
|
||
placeholder="{{ slots[i][1] }}">{{ contacts[i] if contacts else '' }}</textarea>
|
||
|
||
<label class="form-label mt-2" for="logo_file_{{ i + 1 }}">Logo hochladen (optional)</label>
|
||
<input type="file" class="form-control logo-datei" id="logo_file_{{ i + 1 }}"
|
||
name="logo_file_{{ i + 1 }}" accept="image/*"
|
||
data-status="logo_status_{{ i + 1 }}">
|
||
<div class="form-hint" id="logo_status_{{ i + 1 }}">Keine Datei gewählt</div>
|
||
<div class="form-check mt-1">
|
||
<input class="form-check-input" type="checkbox"
|
||
id="logo_keep_bg_{{ i + 1 }}" name="logo_keep_bg_{{ i + 1 }}">
|
||
<label class="form-check-label small" for="logo_keep_bg_{{ i + 1 }}">Hintergrund behalten</label>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
|
||
<div class="text-muted small mb-3">
|
||
<i class="ti ti-info-circle me-1"></i>Ein hochgeladenes Logo hat Vorrang vor der automatischen Suche.
|
||
Der Hintergrund wird automatisch freigestellt, damit das Logo auf der Willkommensseite nicht in einem
|
||
weissen Kasten steht. Am besten funktioniert das bei einem Logo auf einfarbigem Grund; ein PNG mit
|
||
bereits transparentem Hintergrund wird unverändert übernommen.
|
||
</div>
|
||
|
||
<hr class="mt-4 mb-3">
|
||
|
||
<div class="mb-3">
|
||
<label class="form-label" for="valid_until">Anzeigen bis <span class="text-muted">(optional)</span></label>
|
||
<input type="date" class="form-control" id="valid_until" name="valid_until"
|
||
value="{{ request.form.get('valid_until', '') }}" style="max-width: 260px;">
|
||
<div class="form-hint">Ohne Angabe bleibt die Willkommensseite stehen, bis sie von Hand entfernt wird. Mit Datum verschwindet sie nach diesem Tag auf allen Screens von selbst.</div>
|
||
</div>
|
||
|
||
<div class="mb-3 text-muted">
|
||
<p class="mb-1">Das System sucht automatisch nach den Kundenlogos</p>
|
||
<p class="mb-0">und erstellt eine angepasste Willkommensseite.</p>
|
||
<p class="mb-1">Sie erscheint auf allen Screens dieses Standorts, bei denen im Tab „Einstellungen" die Option <em>Willkommensseite hier anzeigen</em> aktiv ist{% if welcome_screens %} – aktuell: <strong>{{ welcome_screens | join(', ') }}</strong>{% else %} – <strong>aktuell keiner</strong>{% endif %}.</p>
|
||
<p class="mb-0 small"><i class="ti ti-markdown me-1"></i>Ansprechpartner unterstützen <strong>fett</strong>, <em>kursiv</em>, <code>Code</code>, Aufzählungen (<code>- </code>) sowie Zeilenumbrüche.</p>
|
||
</div>
|
||
|
||
<button type="submit" class="btn btn-primary">
|
||
<i class="ti ti-file-plus me-1"></i>Logos & Willkommensseite generieren
|
||
</button>
|
||
<a href="?reset=1&site={{ site }}" class="btn btn-outline-secondary ms-2">
|
||
<i class="ti ti-trash me-1"></i>Zurücksetzen
|
||
</a>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══════════════════════════════════════════════════
|
||
Karte: Hintergrundbild hochladen (pro Standort)
|
||
═══════════════════════════════════════════════════ -->
|
||
<div class="card mb-4">
|
||
<div class="card-header">
|
||
<div class="row align-items-center">
|
||
<div class="col">
|
||
<div class="page-pretitle">Willkommensseite</div>
|
||
<h2 class="page-title">Hintergrund</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="row g-3">
|
||
<div class="col-md-6">
|
||
<label class="form-label">Aktuelles Hintergrundbild</label>
|
||
<div class="logo-preview-box" style="min-height:200px; background: #f0f0f0;">
|
||
<img src="{{ background_url or '/static/wallpaper.png' }}" alt="Hintergrund" style="max-height:180px; width:100%; object-fit:contain; background:transparent; padding:0;">
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label">Neues Hintergrundbild hochladen</label>
|
||
<form method="POST" action="/admin/{{ site }}/upload-background" enctype="multipart/form-data">
|
||
<input type="file" class="form-control mb-2" name="background" accept=".jpg,.jpeg,.png" required>
|
||
<button type="submit" class="btn btn-primary">
|
||
<i class="ti ti-upload me-1"></i>Hochladen
|
||
</button>
|
||
</form>
|
||
{% if background_url %}
|
||
<form method="POST" action="/admin/{{ site }}/delete-background" class="mt-2">
|
||
<button type="submit" class="btn btn-outline-danger">
|
||
<i class="ti ti-trash me-1"></i>Zurücksetzen auf Standard
|
||
</button>
|
||
</form>
|
||
{% endif %}
|
||
<p class="text-muted mt-2 mb-0 small">
|
||
<i class="ti ti-info-circle me-1"></i>
|
||
Wenn kein Hintergrundbild hochgeladen ist, wird das Standard-Wallpaper verwendet.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{% include "_footer.html" %}
|
||
</div> <!-- /page -->
|
||
|
||
<script>
|
||
/* Gewaehlte Logo-Datei sichtbar machen. Ein Neuladen der Seite - etwa beim
|
||
Wechsel des Standorts - leert Datei-Felder, ohne dass man es bemerkt. */
|
||
document.querySelectorAll(".logo-datei").forEach(function (feld) {
|
||
var status = document.getElementById(feld.dataset.status);
|
||
feld.addEventListener("change", function () {
|
||
if (feld.files && feld.files.length) {
|
||
var kb = Math.round(feld.files[0].size / 1024);
|
||
status.textContent = "Gewählt: " + feld.files[0].name + " (" + kb + " KB)";
|
||
status.className = "form-hint text-success";
|
||
} else {
|
||
status.textContent = "Keine Datei gewählt";
|
||
status.className = "form-hint";
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|