620 lines
18 KiB
HTML
620 lines
18 KiB
HTML
{% load static i18n %}
|
|
{% get_current_language as CURRENT_LANGUAGE %}
|
|
<!doctype html>
|
|
<html lang="{{ CURRENT_LANGUAGE }}">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>{% trans "TUBCO Onboarding & Offboarding Portal" %}</title>
|
|
<link rel="stylesheet" href="{% static 'workflows/css/buttons.css' %}" />
|
|
<style>
|
|
:root {
|
|
--brand-blue: #000078;
|
|
--brand-red: #8c1d1d;
|
|
--ink: #102039;
|
|
--muted: #5f6f85;
|
|
--line: #d8e1ee;
|
|
--panel: #ffffff;
|
|
--bg-soft: #eff4ff;
|
|
--ok-bg: #effaf2;
|
|
--ok-ink: #166534;
|
|
--warn-bg: #fff6ea;
|
|
--warn-ink: #8a4f00;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
|
|
color: var(--ink);
|
|
background:
|
|
radial-gradient(80% 120% at 85% 8%, rgba(0, 0, 120, 0.12), rgba(0, 0, 120, 0)),
|
|
radial-gradient(70% 90% at 8% 92%, rgba(140, 29, 29, 0.10), rgba(140, 29, 29, 0)),
|
|
linear-gradient(165deg, #eef3ff, #f7f9ff 48%, #f0f5ff);
|
|
min-height: 100vh;
|
|
padding: 24px;
|
|
}
|
|
|
|
.shell {
|
|
width: min(1380px, 100%);
|
|
margin: 0 auto;
|
|
background: var(--panel);
|
|
border: 1px solid var(--line);
|
|
border-radius: 20px;
|
|
box-shadow: 0 20px 44px rgba(16, 32, 57, 0.13);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.topbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 16px;
|
|
padding: 18px 22px;
|
|
border-bottom: 1px solid var(--line);
|
|
background: #fff;
|
|
}
|
|
|
|
.brand-logo {
|
|
width: 210px;
|
|
max-width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
margin: 0;
|
|
}
|
|
|
|
.quick-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
.lang-switch { display:flex; gap:6px; }
|
|
.lang-btn { border:1px solid var(--line); background:#f8fbff; color:#1f3a5f; border-radius:999px; padding:6px 10px; font-size:12px; font-weight:700; cursor:pointer; }
|
|
.lang-btn.active { background:var(--brand-blue); border-color:var(--brand-blue); color:#fff; }
|
|
|
|
.hero {
|
|
padding: 24px;
|
|
border-bottom: 1px solid var(--line);
|
|
background:
|
|
linear-gradient(135deg, rgba(0, 0, 120, 0.08), rgba(0, 0, 120, 0) 44%),
|
|
linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246,250,255,0.92));
|
|
}
|
|
|
|
.hero-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 18px;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.hero-card,
|
|
.hero-sidecard {
|
|
border: 1px solid rgba(217, 227, 238, 0.94);
|
|
background: rgba(255,255,255,0.92);
|
|
border-radius: 22px;
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,0.92);
|
|
}
|
|
|
|
.hero-card {
|
|
padding: 24px;
|
|
background:
|
|
radial-gradient(100% 140% at 10% 10%, rgba(31,79,214,0.12), rgba(31,79,214,0)),
|
|
linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,255,0.95));
|
|
}
|
|
|
|
.hero-sidecard {
|
|
padding: 18px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
background:
|
|
radial-gradient(120% 120% at 100% 0%, rgba(163,32,32,0.10), rgba(163,32,32,0)),
|
|
linear-gradient(180deg, rgba(255,255,255,0.98), rgba(253,247,247,0.96));
|
|
}
|
|
|
|
.eyebrow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 10px;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(0,0,120,0.12);
|
|
background: rgba(0,0,120,0.05);
|
|
color: var(--brand-blue);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.03em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.hero h1 {
|
|
margin: 14px 0 8px;
|
|
font-size: clamp(30px, 5vw, 46px);
|
|
line-height: 1;
|
|
letter-spacing: -0.04em;
|
|
color: var(--brand-blue);
|
|
}
|
|
|
|
.hero p {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
max-width: 720px;
|
|
font-size: 15px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.status-row {
|
|
margin-top: 16px;
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.status-pill {
|
|
border-radius: 999px;
|
|
border: 1px solid var(--line);
|
|
background: #fff;
|
|
color: #30445f;
|
|
padding: 8px 12px;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.status-pill.ok {
|
|
background: var(--ok-bg);
|
|
color: var(--ok-ink);
|
|
border-color: #c7ecd2;
|
|
}
|
|
|
|
.status-pill.warn {
|
|
background: var(--warn-bg);
|
|
color: var(--warn-ink);
|
|
border-color: #f7dfbb;
|
|
}
|
|
|
|
.hero-sidecard h2 {
|
|
margin: 0;
|
|
font-size: 18px;
|
|
color: #1a3359;
|
|
}
|
|
|
|
.hero-sidecard p {
|
|
margin: 8px 0 0;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.hero-metrics {
|
|
margin-top: 18px;
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.hero-metric {
|
|
padding: 12px 14px;
|
|
border-radius: 16px;
|
|
background: rgba(255,255,255,0.86);
|
|
border: 1px solid rgba(217, 227, 238, 0.95);
|
|
}
|
|
|
|
.hero-metric-label {
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.hero-metric-value {
|
|
margin-top: 5px;
|
|
font-size: 26px;
|
|
font-weight: 800;
|
|
color: var(--brand-blue);
|
|
letter-spacing: -0.03em;
|
|
}
|
|
|
|
.main {
|
|
padding: 20px 22px 24px;
|
|
}
|
|
|
|
.section-head {
|
|
margin: 0 0 12px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
align-items: flex-end;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.section-head h2 {
|
|
margin: 0;
|
|
font-size: 19px;
|
|
color: #172b4a;
|
|
}
|
|
|
|
.section-head p {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.apps-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 14px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.app-card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(217, 227, 238, 0.94);
|
|
border-radius: 22px;
|
|
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,255,0.95));
|
|
padding: 18px;
|
|
min-height: 222px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,0.92);
|
|
}
|
|
|
|
.app-card::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: auto -24px -38px auto;
|
|
width: 118px;
|
|
height: 118px;
|
|
border-radius: 50%;
|
|
background: rgba(31, 79, 214, 0.08);
|
|
}
|
|
|
|
.app-card.primary {
|
|
background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(242,247,255,0.97));
|
|
}
|
|
|
|
.app-card.red {
|
|
background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(255,245,245,0.97));
|
|
}
|
|
|
|
.app-card.red::before { background: rgba(163, 32, 32, 0.08); }
|
|
|
|
.app-card .top-line {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.accent {
|
|
width: 38px;
|
|
height: 38px;
|
|
border-radius: 14px;
|
|
background: rgba(0, 0, 120, 0.06);
|
|
color: var(--brand-blue);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.04em;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.accent.red {
|
|
background: rgba(163, 32, 32, 0.08);
|
|
color: var(--brand-red);
|
|
}
|
|
|
|
.app-title {
|
|
margin: 0;
|
|
font-size: 24px;
|
|
line-height: 1.05;
|
|
letter-spacing: -0.03em;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.app-text {
|
|
margin: 10px 0 12px;
|
|
color: #5a6a81;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
max-width: 34ch;
|
|
}
|
|
|
|
.tag-row {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.tag {
|
|
border: 1px solid rgba(217, 227, 238, 0.96);
|
|
border-radius: 14px;
|
|
padding: 7px 10px;
|
|
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,255,0.96));
|
|
color: #486183;
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.03em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.card-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.admin-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.admin-card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(217, 227, 238, 0.94);
|
|
border-radius: 18px;
|
|
padding: 14px;
|
|
background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(247,250,255,0.96));
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,0.92);
|
|
}
|
|
|
|
.admin-card::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: auto -18px -30px auto;
|
|
width: 84px;
|
|
height: 84px;
|
|
border-radius: 50%;
|
|
background: rgba(31, 79, 214, 0.06);
|
|
}
|
|
|
|
.admin-card h3 {
|
|
margin: 0 0 7px;
|
|
font-size: 15px;
|
|
color: #18345f;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.admin-card p {
|
|
margin: 0 0 11px;
|
|
font-size: 12px;
|
|
color: #607088;
|
|
min-height: 34px;
|
|
line-height: 1.45;
|
|
max-width: 26ch;
|
|
}
|
|
|
|
.msg {
|
|
border-radius: 10px;
|
|
padding: 10px 12px;
|
|
margin: 0 0 14px;
|
|
border: 1px solid #d6e1ef;
|
|
background: #f8fbff;
|
|
color: #1f3a5f;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.msg.error {
|
|
border-color: #fecaca;
|
|
background: #fff1f2;
|
|
color: #991b1b;
|
|
}
|
|
|
|
.footer-note {
|
|
margin-top: 16px;
|
|
border-top: 1px solid var(--line);
|
|
padding-top: 12px;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
@media (max-width: 1080px) {
|
|
.hero-grid { grid-template-columns: 1fr; }
|
|
.apps-grid { grid-template-columns: 1fr 1fr; }
|
|
.admin-grid { grid-template-columns: 1fr 1fr; }
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
body { padding: 12px; }
|
|
.topbar, .hero, .main { padding-left: 14px; padding-right: 14px; }
|
|
.hero h1 { font-size: 28px; }
|
|
.apps-grid, .admin-grid { grid-template-columns: 1fr; }
|
|
.quick-actions { justify-content: flex-start; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="shell">
|
|
<div class="topbar">
|
|
<img class="brand-logo" src="https://tub.co/media/site/0856bfc615-1750234287/tubco-wortbildmarke.svg" alt="TUB/CO Logo" />
|
|
<div class="quick-actions">
|
|
<form method="post" action="{% url 'set_language' %}" class="lang-switch">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="next" value="{{ request.get_full_path }}" />
|
|
<button class="lang-btn {% if CURRENT_LANGUAGE == 'de' %}active{% endif %}" type="submit" name="language" value="de">DE</button>
|
|
<button class="lang-btn {% if CURRENT_LANGUAGE == 'en' %}active{% endif %}" type="submit" name="language" value="en">EN</button>
|
|
</form>
|
|
<form method="post" action="/accounts/logout/" style="display:inline;">
|
|
{% csrf_token %}
|
|
<button class="btn btn-secondary" type="submit">{% trans "Abmelden" %}</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero">
|
|
<div class="hero-grid">
|
|
<div class="hero-card">
|
|
<span class="eyebrow">{% trans "Operations Console" %}</span>
|
|
<h1>{% trans "TUBCO Onboarding & Offboarding Portal" %}</h1>
|
|
<p>{% trans "Zentrale Arbeitsfläche für Anfragen, PDF-Generierung, E-Mail-Workflows und Ablage in Nextcloud." %}</p>
|
|
<div class="status-row">
|
|
<span class="status-pill">{% trans "Rolle:" %} {% if request.user.is_staff %}{% trans "Admin" %}{% else %}{% trans "Mitarbeiter" %}{% endif %}</span>
|
|
<span class="status-pill {% if nextcloud_enabled %}ok{% else %}warn{% endif %}">
|
|
{% trans "Nextcloud:" %} {% if nextcloud_enabled %}{% trans "aktiv" %}{% else %}{% trans "inaktiv" %}{% endif %}
|
|
</span>
|
|
<span class="status-pill {% if email_test_mode %}warn{% else %}ok{% endif %}">
|
|
{% trans "E-Mail:" %} {% if email_test_mode %}{% trans "Testmodus" %}{% else %}{% trans "Produktion" %}{% endif %}
|
|
</span>
|
|
<span class="status-pill">{% trans "PDF + E-Mail Workflow bereit" %}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<main class="main">
|
|
{% if messages %}
|
|
{% for message in messages %}
|
|
<div class="msg {% if message.tags == 'error' %}error{% endif %}">{{ message }}</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
<div class="section-head">
|
|
<h2>{% trans "Apps" %}</h2>
|
|
<p>{% trans "Wählen Sie den gewünschten Prozess." %}</p>
|
|
</div>
|
|
<div class="apps-grid">
|
|
<section class="app-card primary">
|
|
<div>
|
|
<div class="top-line"><div class="accent">ON</div></div>
|
|
<h3 class="app-title">{% trans "Onboarding" %}</h3>
|
|
<p class="app-text">{% trans "Neue Mitarbeitende erfassen, PDF mit Briefkopf erstellen, Benachrichtigungen senden und in Nextcloud ablegen." %}</p>
|
|
<div class="tag-row">
|
|
<span class="tag">{% trans "Mehrschritt-Formular" %}</span>
|
|
<span class="tag">PDF</span>
|
|
<span class="tag">{% trans "E-Mail Routing" %}</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-actions">
|
|
<a class="btn btn-primary" href="/onboarding/new/">{% trans "Onboarding starten" %}</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="app-card red">
|
|
<div>
|
|
<div class="top-line"><div class="accent red">OFF</div></div>
|
|
<h3 class="app-title">{% trans "Offboarding" %}</h3>
|
|
<p class="app-text">{% trans "Mitarbeitende suchen, Daten vorbefüllen, Offboarding-Dokumente erzeugen und Rückgabe-Prozess starten." %}</p>
|
|
<div class="tag-row">
|
|
<span class="tag">{% trans "Profile-Suche" %}</span>
|
|
<span class="tag">{% trans "Hardware-Liste" %}</span>
|
|
<span class="tag">{% trans "IT-Rückgabe" %}</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-actions">
|
|
<a class="btn btn-primary" href="/offboarding/new/">{% trans "Offboarding starten" %}</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="app-card">
|
|
<div>
|
|
<div class="top-line"><div class="accent">APP</div></div>
|
|
<h3 class="app-title">{% trans "Anfragen Dashboard" %}</h3>
|
|
<p class="app-text">{% trans "Status, Suchfunktion, PDF-Links und Verlauf aller Onboarding-/Offboarding-Anfragen." %}</p>
|
|
<div class="tag-row">
|
|
<span class="tag">{% trans "Suche" %}</span>
|
|
<span class="tag">{% trans "Status" %}</span>
|
|
<span class="tag">{% trans "PDF Zugriff" %}</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-actions">
|
|
<a class="btn btn-secondary" href="/requests/">{% trans "Dashboard öffnen" %}</a>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
{% if request.user.is_staff %}
|
|
<div class="section-head">
|
|
<h2>{% trans "Admin Apps" %}</h2>
|
|
<p>{% trans "Konfiguration, Tests und Steuerung." %}</p>
|
|
</div>
|
|
<div class="admin-grid">
|
|
<section class="admin-card">
|
|
<h3>{% trans "Form Builder" %}</h3>
|
|
<p>{% trans "Felder, Schritte und Optionen verwalten." %}</p>
|
|
<a class="btn btn-secondary" href="/admin-tools/form-builder/">{% trans "Öffnen" %}</a>
|
|
</section>
|
|
<section class="admin-card">
|
|
<h3>{% trans "Einweisungs-Builder" %}</h3>
|
|
<p>{% trans "Checklistenpunkte für das Einweisungsprotokoll konfigurieren." %}</p>
|
|
<a class="btn btn-secondary" href="/admin-tools/intro-builder/">{% trans "Öffnen" %}</a>
|
|
</section>
|
|
<section class="admin-card">
|
|
<h3>{% trans "Projekt Wiki" %}</h3>
|
|
<p>{% trans "Dokumentation, Architektur und Runbook." %}</p>
|
|
<a class="btn btn-secondary" href="/admin-tools/wiki/">{% trans "Öffnen" %}</a>
|
|
</section>
|
|
<section class="admin-card">
|
|
<h3>{% trans "Integrationen" %}</h3>
|
|
<p>{% trans "Nextcloud- und E-Mail-Setup." %}</p>
|
|
<a class="btn btn-secondary" href="/admin-tools/integrations/?kind=nextcloud">{% trans "Öffnen" %}</a>
|
|
</section>
|
|
<section class="admin-card">
|
|
<h3>{% trans "Welcome E-Mails" %}</h3>
|
|
<p>{% trans "Geplante Welcome Mails verwalten." %}</p>
|
|
<a class="btn btn-secondary" href="/admin-tools/welcome-emails/">{% trans "Öffnen" %}</a>
|
|
</section>
|
|
<section class="admin-card">
|
|
<h3>{% trans "Django Admin" %}</h3>
|
|
<p>{% trans "Vollständige Datenverwaltung." %}</p>
|
|
<a class="btn btn-secondary" href="/admin/">{% trans "Öffnen" %}</a>
|
|
</section>
|
|
<section class="admin-card">
|
|
<h3>SMTP Einstellungen</h3>
|
|
<p>Server und Absender in der Backend-UI.</p>
|
|
<a class="btn btn-secondary" href="/admin/workflows/systememailconfig/">Öffnen</a>
|
|
</section>
|
|
<section class="admin-card">
|
|
<h3>Nextcloud schalten</h3>
|
|
<p>Aktiv/Inaktiv direkt umschalten.</p>
|
|
<form method="post" action="/admin-tools/nextcloud/toggle/" style="display:inline;">
|
|
{% csrf_token %}
|
|
<button class="btn btn-secondary" type="submit">
|
|
{% if nextcloud_enabled %}Deaktivieren{% else %}Aktivieren{% endif %}
|
|
</button>
|
|
</form>
|
|
</section>
|
|
<section class="admin-card">
|
|
<h3>E-Mail Modus</h3>
|
|
<p>Zwischen Testmodus und Produktion wechseln.</p>
|
|
<form method="post" action="/admin-tools/email-mode/toggle/" style="display:inline;">
|
|
{% csrf_token %}
|
|
<button class="btn btn-secondary" type="submit">
|
|
Auf {% if email_test_mode %}Produktion{% else %}Testmodus{% endif %}
|
|
</button>
|
|
</form>
|
|
</section>
|
|
<section class="admin-card">
|
|
<h3>Verbindungstests</h3>
|
|
<p>Testupload und Testmail auslösen.</p>
|
|
<div class="card-actions">
|
|
<form method="post" action="/test/nextcloud/" style="display:inline;">
|
|
{% csrf_token %}
|
|
<button class="btn btn-secondary" type="submit">Nextcloud-Test</button>
|
|
</form>
|
|
<form method="post" action="/test/email/" style="display:inline;">
|
|
{% csrf_token %}
|
|
<button class="btn btn-secondary" type="submit">SMTP-Test</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="footer-note">
|
|
{% trans "Tipp: Die letzten Vorgänge sehen Sie jederzeit im Anfragen Dashboard." %}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</body>
|
|
</html>
|