479 lines
14 KiB
Vue
479 lines
14 KiB
Vue
<script setup>
|
||
import AppLayout from '@/layouts/AppLayout.vue'
|
||
|
||
const documentTiles = [
|
||
{
|
||
label: 'Schulbefreiung erstellen',
|
||
description: 'Erstellt die notwendigen Schulbefreiungsformulare für Veranstaltungen.',
|
||
icon: 'graduation-cap',
|
||
color: '#e74c3c',
|
||
href: '/schulbefreiung',
|
||
},
|
||
{
|
||
label: 'Rechnung erstellen',
|
||
description: 'Erstellt eine Rechnung nach BdP-Vorlage.',
|
||
icon: 'file-invoice',
|
||
color: '#27ae60',
|
||
href: '/rechnung',
|
||
},
|
||
{
|
||
label: 'Spendenquittung erstellen',
|
||
description: 'Erstellt eine Spendenquittung für Einzelspenden.',
|
||
icon: 'heart',
|
||
color: '#c0397e',
|
||
href: '/spendenquittung',
|
||
},
|
||
{
|
||
label: 'Teilnahmebescheinigung erstellen',
|
||
description: 'Erstellt eine Teilnahmebescheinigung.',
|
||
icon: 'certificate',
|
||
color: '#e67e22',
|
||
href: '/teilnahmebescheinigung',
|
||
},
|
||
]
|
||
|
||
const externalApps = [
|
||
{
|
||
name: 'Mereba',
|
||
description: 'Mitgliederverwaltung des BdP Landesverbands.',
|
||
icon: 'arrow-up-right-from-square',
|
||
color: '#1d4899',
|
||
href: '#',
|
||
},
|
||
{
|
||
name: 'EFZ-Check',
|
||
description: 'Einrichtung und Prüfung des erweiterten Führungszeugnisses.',
|
||
icon: 'certificate',
|
||
color: '#27ae60',
|
||
href: '#',
|
||
},
|
||
]
|
||
|
||
const dummyTile = {
|
||
label: 'Dummy',
|
||
description: 'Platzhalter-Kachel für zukünftige Inhalte.',
|
||
icon: 'cube',
|
||
color: '#1d4899',
|
||
href: '/dummy',
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<AppLayout title="Startseite">
|
||
<div class="dashboard">
|
||
|
||
<!-- ── Hero Banner ── -->
|
||
<div class="hero">
|
||
<svg class="hero-svg" viewBox="0 0 1200 185"
|
||
preserveAspectRatio="xMidYMid slice"
|
||
xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="hero-sky" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stop-color="#9ccae0"/>
|
||
<stop offset="100%" stop-color="#d8eef8"/>
|
||
</linearGradient>
|
||
</defs>
|
||
|
||
<!-- Himmel -->
|
||
<rect width="1200" height="185" fill="url(#hero-sky)"/>
|
||
|
||
<!--
|
||
Jeder Berg ist ein Polygon mit vielen Zwischenpunkten –
|
||
leicht unregelmäßige Abstände erzeugen organische Hänge.
|
||
Die Schneekappen folgen denselben Punkten entlang der Silhouette.
|
||
-->
|
||
|
||
<!-- Berg 1: hinten, hellster -->
|
||
<polygon fill="#a8c8dc" points="
|
||
150,185
|
||
222,160 298,126 362,98 416,70 458,50 492,36 516,28 524,32
|
||
542,27 558,34 594,50 638,72 692,102 750,136 808,164 860,185"/>
|
||
<!-- Schnee 1: folgt Hangpunkten, Abschluss bei y≈68 -->
|
||
<polygon fill="white" points="
|
||
421,68
|
||
458,50 492,36 516,28 524,32 542,27 558,34 594,50
|
||
624,68"/>
|
||
|
||
<!-- Berg 2: Mitte -->
|
||
<polygon fill="#6090b8" points="
|
||
340,185
|
||
414,158 490,126 558,94 612,64 648,42 668,26 680,18
|
||
690,16 702,20 722,34 758,56 802,86 858,118 915,150 968,170 1020,185"/>
|
||
<!-- Schnee 2 -->
|
||
<polygon fill="white" points="
|
||
616,60
|
||
648,42 668,26 680,18 690,16 702,20 722,34 758,56
|
||
762,60"/>
|
||
|
||
<!-- Berg 3: vorne, dunkelster -->
|
||
<polygon fill="#3868a2" points="
|
||
560,185
|
||
638,153 708,118 766,86 816,56 852,32 870,16 880,6
|
||
892,12 920,34 958,64 1002,98 1058,134 1115,163 1162,179 1200,185"/>
|
||
<!-- Schnee 3 -->
|
||
<polygon fill="white" points="
|
||
818,53
|
||
852,32 870,16 880,6 892,12 920,34 958,64
|
||
962,64 942,53"/>
|
||
|
||
<!-- Waldstreifen am Fuß (rechts) -->
|
||
<rect x="655" y="170" width="545" height="15" fill="#1d3c22"/>
|
||
|
||
<!-- Tannen: Wipfel + Schürze, leicht versetzt in Höhe -->
|
||
<g fill="#182e1a">
|
||
<polygon points="672,167 663,182 681,182"/>
|
||
<polygon points="672,175 661,185 683,185"/>
|
||
|
||
<polygon points="697,163 687,179 707,179"/>
|
||
<polygon points="697,171 685,185 709,185"/>
|
||
|
||
<polygon points="723,166 713,182 733,182"/>
|
||
<polygon points="723,174 711,185 735,185"/>
|
||
|
||
<polygon points="749,161 738,178 760,178"/>
|
||
<polygon points="749,170 737,185 761,185"/>
|
||
|
||
<polygon points="776,164 765,181 787,181"/>
|
||
<polygon points="776,172 763,185 789,185"/>
|
||
|
||
<polygon points="803,160 791,178 815,178"/>
|
||
<polygon points="803,169 789,185 817,185"/>
|
||
|
||
<polygon points="830,163 818,180 842,180"/>
|
||
<polygon points="830,171 816,185 844,185"/>
|
||
|
||
<polygon points="858,161 845,179 871,179"/>
|
||
<polygon points="858,169 843,185 873,185"/>
|
||
|
||
<polygon points="886,164 873,181 899,181"/>
|
||
<polygon points="886,172 871,185 901,185"/>
|
||
|
||
<polygon points="914,161 900,179 928,179"/>
|
||
<polygon points="914,170 898,185 930,185"/>
|
||
|
||
<polygon points="942,164 928,181 956,181"/>
|
||
<polygon points="942,172 926,185 958,185"/>
|
||
|
||
<polygon points="970,162 956,179 984,179"/>
|
||
<polygon points="970,171 954,185 986,185"/>
|
||
</g>
|
||
</svg>
|
||
|
||
<!-- Text overlay -->
|
||
<div class="hero-text">
|
||
<h1 class="hero-title">Willkommen im NEXUS!</h1>
|
||
<p class="hero-sub">Deine zentrale Plattform für Dokumente, Tools und Anwendungen.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ── Dokumente erstellen ── -->
|
||
<section class="section">
|
||
<div class="section-header">
|
||
<h2 class="section-title">Dokumente erstellen</h2>
|
||
<a href="#" class="section-link">
|
||
Alle anzeigen <font-awesome-icon icon="chevron-right" />
|
||
</a>
|
||
</div>
|
||
|
||
<div class="doc-grid">
|
||
<a v-for="tile in documentTiles" :key="tile.href" :href="tile.href" class="doc-tile">
|
||
<div class="doc-tile-top">
|
||
<div class="doc-icon-wrap" :style="{ background: tile.color + '18', color: tile.color }">
|
||
<font-awesome-icon :icon="tile.icon" />
|
||
</div>
|
||
</div>
|
||
<div class="doc-tile-body">
|
||
<p class="doc-title">{{ tile.label }}</p>
|
||
<p class="doc-desc">{{ tile.description }}</p>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ── Weitere Anwendungen ── -->
|
||
<section class="section">
|
||
<div class="section-header">
|
||
<h2 class="section-title">Weitere Anwendungen</h2>
|
||
<a href="#" class="section-link">
|
||
Alle anzeigen <font-awesome-icon icon="chevron-right" />
|
||
</a>
|
||
</div>
|
||
|
||
<div class="app-list">
|
||
<div v-for="app in externalApps" :key="app.name" class="app-card">
|
||
<div class="app-icon" :style="{ background: app.color + '18', color: app.color }">
|
||
<font-awesome-icon :icon="app.icon" />
|
||
</div>
|
||
<div class="app-info">
|
||
<p class="app-name">{{ app.name }}</p>
|
||
<p class="app-desc">{{ app.description }}</p>
|
||
</div>
|
||
<a :href="app.href" target="_blank" rel="noopener" class="app-open-btn">
|
||
<span class="status-dot"></span>
|
||
Offen
|
||
<font-awesome-icon icon="arrow-up-right-from-square" class="open-icon" />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ── Dummy ── -->
|
||
<section class="section">
|
||
<div class="section-header">
|
||
<h2 class="section-title">Weitere Module</h2>
|
||
</div>
|
||
|
||
<div class="doc-grid">
|
||
<a :href="dummyTile.href" class="doc-tile">
|
||
<div class="doc-tile-top">
|
||
<div class="doc-icon-wrap" :style="{ background: dummyTile.color + '18', color: dummyTile.color }">
|
||
<font-awesome-icon :icon="dummyTile.icon" />
|
||
</div>
|
||
</div>
|
||
<div class="doc-tile-body">
|
||
<p class="doc-title">{{ dummyTile.label }}</p>
|
||
<p class="doc-desc">{{ dummyTile.description }}</p>
|
||
</div>
|
||
</a>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
</AppLayout>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.dashboard {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 28px;
|
||
}
|
||
|
||
/* ── Hero Banner ── */
|
||
.hero {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 190px;
|
||
border-radius: 14px;
|
||
overflow: hidden;
|
||
box-shadow: 0 4px 16px rgba(0,0,0,0.10);
|
||
}
|
||
|
||
.hero-svg {
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.hero-text {
|
||
position: absolute;
|
||
left: 36px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
z-index: 2;
|
||
max-width: 420px;
|
||
}
|
||
|
||
.hero-title {
|
||
margin: 0 0 8px;
|
||
font-size: 1.8rem;
|
||
font-weight: 800;
|
||
color: #0f2d5e;
|
||
text-shadow: 0 1px 3px rgba(255,255,255,0.6);
|
||
line-height: 1.15;
|
||
}
|
||
|
||
.hero-sub {
|
||
margin: 0;
|
||
font-size: 0.9rem;
|
||
color: #1c3a6b;
|
||
font-weight: 500;
|
||
text-shadow: 0 1px 2px rgba(255,255,255,0.5);
|
||
}
|
||
|
||
/* ── Section ── */
|
||
.section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.section-title {
|
||
margin: 0;
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
color: #111827;
|
||
}
|
||
|
||
.section-link {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
font-size: 0.83rem;
|
||
font-weight: 500;
|
||
color: #1d4899;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.section-link:hover { text-decoration: underline; }
|
||
|
||
/* ── Document tiles (white cards) ── */
|
||
.doc-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||
gap: 14px;
|
||
}
|
||
|
||
.doc-tile {
|
||
background: #fff;
|
||
border-radius: 12px;
|
||
box-shadow: 0 1px 4px rgba(0,0,0,0.07);
|
||
text-decoration: none;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
border: 1px solid #f0f0f0;
|
||
transition: box-shadow 0.2s, transform 0.15s;
|
||
}
|
||
|
||
.doc-tile:hover {
|
||
box-shadow: 0 6px 20px rgba(0,0,0,0.11);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.doc-tile-top {
|
||
padding: 18px 16px 12px;
|
||
}
|
||
|
||
.doc-icon-wrap {
|
||
width: 54px;
|
||
height: 54px;
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.6rem;
|
||
}
|
||
|
||
.doc-tile-body {
|
||
padding: 6px 16px 18px;
|
||
flex: 1;
|
||
}
|
||
|
||
.doc-title {
|
||
margin: 0 0 5px;
|
||
font-size: 0.88rem;
|
||
font-weight: 600;
|
||
color: #111827;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.doc-desc {
|
||
margin: 0;
|
||
font-size: 0.78rem;
|
||
color: #6b7280;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* ── External app cards ── */
|
||
.app-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.app-card {
|
||
background: #fff;
|
||
border-radius: 12px;
|
||
border: 1px solid #f0f0f0;
|
||
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
padding: 16px 20px;
|
||
transition: box-shadow 0.2s;
|
||
}
|
||
|
||
.app-card:hover {
|
||
box-shadow: 0 4px 14px rgba(0,0,0,0.09);
|
||
}
|
||
|
||
.app-icon {
|
||
width: 46px;
|
||
height: 46px;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.2rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.app-info {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.app-name {
|
||
margin: 0 0 3px;
|
||
font-size: 0.9rem;
|
||
font-weight: 600;
|
||
color: #111827;
|
||
}
|
||
|
||
.app-desc {
|
||
margin: 0;
|
||
font-size: 0.78rem;
|
||
color: #6b7280;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.app-open-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 7px;
|
||
padding: 7px 16px;
|
||
background: #dcfce7;
|
||
color: #16a34a;
|
||
border-radius: 20px;
|
||
font-size: 0.8rem;
|
||
font-weight: 600;
|
||
text-decoration: none;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
transition: background 0.15s;
|
||
}
|
||
|
||
.app-open-btn:hover { background: #bbf7d0; }
|
||
|
||
.status-dot {
|
||
width: 7px;
|
||
height: 7px;
|
||
border-radius: 50%;
|
||
background: #22c55e;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.open-icon { font-size: 0.72rem; }
|
||
|
||
/* ── Responsive ── */
|
||
@media (max-width: 768px) {
|
||
.hero { height: 160px; }
|
||
.hero-title { font-size: 1.4rem; }
|
||
.doc-grid { grid-template-columns: 1fr 1fr; }
|
||
.app-card { flex-wrap: wrap; }
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.hero { height: 140px; }
|
||
.hero-text { left: 20px; }
|
||
.hero-title { font-size: 1.2rem; }
|
||
.doc-grid { grid-template-columns: 1fr; }
|
||
}
|
||
</style>
|