f8d9539959
"Das System sucht automatisch nach den Kundenlogos und erstellt eine angepasste Willkommensseite." stand bisher ganz unten bei den Angaben zu Zielscreens und Markdown. Der Satz beschreibt aber, was mit den eingegebenen Kundennamen passiert, und steht jetzt direkt darunter - gefolgt vom Hinweis zum Logo-Upload und der bestehenden Trennlinie vor "Anzeigen bis". Aus zwei Absaetzen wurde ein Satz. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
276 lines
13 KiB
HTML
276 lines
13 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>
|
||
|
||
<hr class="mt-4 mb-3">
|
||
|
||
<label class="form-label" 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 mb-2">
|
||
Das System sucht automatisch nach den Kundenlogos und erstellt eine angepasste Willkommensseite.
|
||
</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">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>
|