design installed
This commit is contained in:
@@ -1,12 +1,478 @@
|
||||
<script setup>
|
||||
import AppLayout from '@/layouts/AppLayout.vue'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const message = ref('Hallo Welt')
|
||||
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="Dashboard">
|
||||
<h2>{{ message }}</h2>
|
||||
<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>
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
<?php
|
||||
|
||||
namespace App\Domains\Dummy\Controllers;
|
||||
|
||||
use App\Providers\InertiaProvider;
|
||||
use Inertia\Response;
|
||||
|
||||
class DummyController
|
||||
{
|
||||
public function __invoke(): Response
|
||||
{
|
||||
return (new InertiaProvider('Dummy/Dummy', []))->render();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
<?php
|
||||
|
||||
use App\Domains\Dummy\Controllers\DummyController;
|
||||
use Illuminate\Support\Facades\Route;
|
||||
|
||||
Route::get('/dummy', DummyController::class)->name('dummy');
|
||||
@@ -0,0 +1,54 @@
|
||||
<script setup>
|
||||
import AppLayout from '@/layouts/AppLayout.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppLayout title="Dummy">
|
||||
<div class="placeholder">
|
||||
<div class="placeholder-icon-wrap" style="background: #1d4899;">
|
||||
<font-awesome-icon icon="cube" class="placeholder-icon" />
|
||||
</div>
|
||||
<h1 class="placeholder-title">Dummy</h1>
|
||||
<p class="placeholder-text">Platzhalter-Seite für zukünftige Inhalte.</p>
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 60vh;
|
||||
gap: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.placeholder-icon-wrap {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.placeholder-icon {
|
||||
font-size: 2.2rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.placeholder-title {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.placeholder-text {
|
||||
margin: 0;
|
||||
color: #6b7280;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,14 @@
|
||||
<?php
|
||||
|
||||
namespace App\Domains\Rechnung\Controllers;
|
||||
|
||||
use App\Providers\InertiaProvider;
|
||||
use Inertia\Response;
|
||||
|
||||
class RechnungController
|
||||
{
|
||||
public function __invoke(): Response
|
||||
{
|
||||
return (new InertiaProvider('Rechnung/Rechnung', []))->render();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
<?php
|
||||
|
||||
use App\Domains\Rechnung\Controllers\RechnungController;
|
||||
use Illuminate\Support\Facades\Route;
|
||||
|
||||
Route::get('/rechnung', RechnungController::class)->name('rechnung');
|
||||
@@ -0,0 +1,54 @@
|
||||
<script setup>
|
||||
import AppLayout from '@/layouts/AppLayout.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppLayout title="Rechnung erstellen">
|
||||
<div class="placeholder">
|
||||
<div class="placeholder-icon-wrap" style="background: #27ae60;">
|
||||
<font-awesome-icon icon="file-invoice" class="placeholder-icon" />
|
||||
</div>
|
||||
<h1 class="placeholder-title">Rechnung erstellen</h1>
|
||||
<p class="placeholder-text">Dieses Modul wird in Kürze verfügbar sein.</p>
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 60vh;
|
||||
gap: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.placeholder-icon-wrap {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.placeholder-icon {
|
||||
font-size: 2.2rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.placeholder-title {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.placeholder-text {
|
||||
margin: 0;
|
||||
color: #6b7280;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,14 @@
|
||||
<?php
|
||||
|
||||
namespace App\Domains\Schulbefreiung\Controllers;
|
||||
|
||||
use App\Providers\InertiaProvider;
|
||||
use Inertia\Response;
|
||||
|
||||
class SchulbefreiungController
|
||||
{
|
||||
public function __invoke(): Response
|
||||
{
|
||||
return (new InertiaProvider('Schulbefreiung/Schulbefreiung', []))->render();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
<?php
|
||||
|
||||
use App\Domains\Schulbefreiung\Controllers\SchulbefreiungController;
|
||||
use Illuminate\Support\Facades\Route;
|
||||
|
||||
Route::get('/schulbefreiung', SchulbefreiungController::class)->name('schulbefreiung');
|
||||
@@ -0,0 +1,54 @@
|
||||
<script setup>
|
||||
import AppLayout from '@/layouts/AppLayout.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppLayout title="Schulbefreiung erstellen">
|
||||
<div class="placeholder">
|
||||
<div class="placeholder-icon-wrap" style="background: #e74c3c;">
|
||||
<font-awesome-icon icon="graduation-cap" class="placeholder-icon" />
|
||||
</div>
|
||||
<h1 class="placeholder-title">Schulbefreiung erstellen</h1>
|
||||
<p class="placeholder-text">Dieses Modul wird in Kürze verfügbar sein.</p>
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 60vh;
|
||||
gap: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.placeholder-icon-wrap {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.placeholder-icon {
|
||||
font-size: 2.2rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.placeholder-title {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.placeholder-text {
|
||||
margin: 0;
|
||||
color: #6b7280;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,14 @@
|
||||
<?php
|
||||
|
||||
namespace App\Domains\Spendenquittung\Controllers;
|
||||
|
||||
use App\Providers\InertiaProvider;
|
||||
use Inertia\Response;
|
||||
|
||||
class SpendenquittungController
|
||||
{
|
||||
public function __invoke(): Response
|
||||
{
|
||||
return (new InertiaProvider('Spendenquittung/Spendenquittung', []))->render();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
<?php
|
||||
|
||||
use App\Domains\Spendenquittung\Controllers\SpendenquittungController;
|
||||
use Illuminate\Support\Facades\Route;
|
||||
|
||||
Route::get('/spendenquittung', SpendenquittungController::class)->name('spendenquittung');
|
||||
@@ -0,0 +1,54 @@
|
||||
<script setup>
|
||||
import AppLayout from '@/layouts/AppLayout.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppLayout title="Spendenquittung erstellen">
|
||||
<div class="placeholder">
|
||||
<div class="placeholder-icon-wrap" style="background: #c0397e;">
|
||||
<font-awesome-icon icon="heart" class="placeholder-icon" />
|
||||
</div>
|
||||
<h1 class="placeholder-title">Spendenquittung erstellen</h1>
|
||||
<p class="placeholder-text">Dieses Modul wird in Kürze verfügbar sein.</p>
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 60vh;
|
||||
gap: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.placeholder-icon-wrap {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.placeholder-icon {
|
||||
font-size: 2.2rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.placeholder-title {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.placeholder-text {
|
||||
margin: 0;
|
||||
color: #6b7280;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,14 @@
|
||||
<?php
|
||||
|
||||
namespace App\Domains\Teilnahmebescheinigung\Controllers;
|
||||
|
||||
use App\Providers\InertiaProvider;
|
||||
use Inertia\Response;
|
||||
|
||||
class TeilnahmebescheinigungController
|
||||
{
|
||||
public function __invoke(): Response
|
||||
{
|
||||
return (new InertiaProvider('Teilnahmebescheinigung/Teilnahmebescheinigung', []))->render();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
<?php
|
||||
|
||||
use App\Domains\Teilnahmebescheinigung\Controllers\TeilnahmebescheinigungController;
|
||||
use Illuminate\Support\Facades\Route;
|
||||
|
||||
Route::get('/teilnahmebescheinigung', TeilnahmebescheinigungController::class)->name('teilnahmebescheinigung');
|
||||
@@ -0,0 +1,54 @@
|
||||
<script setup>
|
||||
import AppLayout from '@/layouts/AppLayout.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppLayout title="Teilnahmebescheinigung erstellen">
|
||||
<div class="placeholder">
|
||||
<div class="placeholder-icon-wrap" style="background: #e67e22;">
|
||||
<font-awesome-icon icon="certificate" class="placeholder-icon" />
|
||||
</div>
|
||||
<h1 class="placeholder-title">Teilnahmebescheinigung erstellen</h1>
|
||||
<p class="placeholder-text">Dieses Modul wird in Kürze verfügbar sein.</p>
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 60vh;
|
||||
gap: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.placeholder-icon-wrap {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.placeholder-icon {
|
||||
font-size: 2.2rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.placeholder-title {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.placeholder-text {
|
||||
margin: 0;
|
||||
color: #6b7280;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user