Standortauswahl und Multi Logo und Action Button
This commit is contained in:
Erik Thiele
@@ -3,131 +3,173 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<title>Kunde hinzufügen</title>
|
||||
<title>Willkommensseite</title>
|
||||
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
||||
|
||||
<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>
|
||||
body {
|
||||
background-color: #F4F6F8;
|
||||
color: #212121;
|
||||
.form-label { font-weight: 600; }
|
||||
.card { box-shadow: 0 20px 60px rgba(0,0,0,0.08); }
|
||||
.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: var(--ccm-surface);
|
||||
}
|
||||
.navbar {
|
||||
background-color: #DA002D;
|
||||
.logo-preview-box img {
|
||||
max-height: 100px;
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.navbar-brand,
|
||||
.navbar-brand h2,
|
||||
.navbar-brand .page-pretitle {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
.card-header {
|
||||
background-color: #eeeeee;
|
||||
border-left: 6px solid #DA002D;
|
||||
padding-left: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.btn-primary {
|
||||
background-color: #DA002D;
|
||||
border-color: #DA002D;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: #B00024;
|
||||
border-color: #B00024;
|
||||
}
|
||||
.form-label {
|
||||
font-weight: 600;
|
||||
}
|
||||
.card {
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.08);
|
||||
.logo-preview-box .placeholder {
|
||||
color: var(--ccm-muted);
|
||||
font-size: 0.85rem;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="navbar navbar-expand-md">
|
||||
<div class="container-xl">
|
||||
<a class="navbar-brand d-flex align-items-center"
|
||||
href="/admin">
|
||||
<img src="{{ url_for('static', filename='cancom.svg') }}"
|
||||
alt="CANCOM"
|
||||
height="32"
|
||||
class="me-2">
|
||||
<span class="page-pretitle text-white">
|
||||
Admin Dashboard
|
||||
<h2 class="page-title text-white">Simple Signage</h2>
|
||||
</span>
|
||||
</a>
|
||||
<div class="d-none d-sm-inline">
|
||||
<a href="/admin" class="btn">Zurück</a>
|
||||
<a href="/logout" class="btn">Logout</a>
|
||||
|
||||
{% set brand_subtitle = "Willkommensseite" %}
|
||||
{% set site_dropdown_url_prefix = "/willkommen?site=" %}
|
||||
{% include "_header.html" %}
|
||||
|
||||
<!-- Second Nav -->
|
||||
<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</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>
|
||||
</header>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page-wrapper">
|
||||
<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</h2>
|
||||
<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>
|
||||
<div class="alert alert-danger">{{ error }}</div>
|
||||
{% endif %}
|
||||
{% if success %}
|
||||
<div class="alert alert-success">
|
||||
{{ success }}
|
||||
</div>
|
||||
<div class="alert alert-success">{{ success }}</div>
|
||||
{% endif %}
|
||||
|
||||
{% if logo_url %}
|
||||
<div class="alert alert-secondary d-flex align-items-center gap-3">
|
||||
<div>
|
||||
<strong>Logo Vorschau</strong>
|
||||
<div class="text-muted">Wenn das Logo erfolgreich gefunden wurde, wird es hier angezeigt.</div>
|
||||
<!-- Logo Previews -->
|
||||
<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>
|
||||
<img src="{{ logo_url }}"
|
||||
alt="Logo Vorschau"
|
||||
class="img-fluid border"
|
||||
style="max-height: 120px; max-width: 240px; object-fit: contain;">
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<form method="POST">
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="customer_name">Kundenname</label>
|
||||
<input type="text"
|
||||
class="form-control"
|
||||
id="customer_name"
|
||||
name="customer_name"
|
||||
placeholder="z. B. Beispiel GmbH"
|
||||
required>
|
||||
<input type="hidden" name="site" value="{{ site }}">
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-md-4">
|
||||
<label class="form-label" for="customer_name_1">Kunde 1</label>
|
||||
<input type="text" class="form-control" id="customer_name_1"
|
||||
name="customer_name_1" placeholder="z. B. Beispiel GmbH"
|
||||
value="{{ customer_names[0] if customer_names else '' }}">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label" for="customer_name_2">Kunde 2 (optional)</label>
|
||||
<input type="text" class="form-control" id="customer_name_2"
|
||||
name="customer_name_2" placeholder="z. B. Muster AG"
|
||||
value="{{ customer_names[1] if customer_names else '' }}">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label" for="customer_name_3">Kunde 3 (optional)</label>
|
||||
<input type="text" class="form-control" id="customer_name_3"
|
||||
name="customer_name_3" placeholder="z. B. Firma GmbH"
|
||||
value="{{ customer_names[2] if customer_names else '' }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3 text-muted">
|
||||
<p class="mb-1">Das System sucht automatisch nach dem Kundenlogo</p>
|
||||
<p class="mb-1">Das System sucht automatisch nach den Kundenlogos</p>
|
||||
<p class="mb-0">und erstellt eine angepasste Willkommensseite für die Lobby-Playlist.</p>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary">
|
||||
Kundenlogo & Willkommensseite generieren
|
||||
<i class="ti ti-file-plus me-1"></i>Logos & Willkommensseite generieren
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="app-footer">
|
||||
{% include "_footer.html" %}
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.addEventListener("load", () => {
|
||||
const themeToggle = document.getElementById("theme-toggle");
|
||||
const root = document.documentElement;
|
||||
|
||||
const syncThemeToggle = () => {
|
||||
const theme = root.getAttribute("data-bs-theme") || "light";
|
||||
if (!themeToggle) return;
|
||||
themeToggle.innerHTML = theme === "dark"
|
||||
? '<i class="ti ti-sun"></i>'
|
||||
: '<i class="ti ti-moon"></i>';
|
||||
};
|
||||
|
||||
if (themeToggle) {
|
||||
syncThemeToggle();
|
||||
themeToggle.addEventListener("click", () => {
|
||||
const nextTheme = (root.getAttribute("data-bs-theme") || "light") === "dark" ? "light" : "dark";
|
||||
root.setAttribute("data-bs-theme", nextTheme);
|
||||
window.localStorage.setItem("signage-theme", nextTheme);
|
||||
syncThemeToggle();
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user