Add Impressum page with content & styles
Replace placeholder Impressum with a full, design-aligned Vue page (GUI/src/routes/Impressum.vue). Added a <script setup> providing company, contact, register and legal note data (test data), a structured template (hero, details grid, notes) using Vuetify buttons/links, and comprehensive scoped CSS for layout and responsive behavior. Also updated codexInfo.md to document the new Impressum implementation and its test-data status. Intended to provide a ready-to-customize legal page for production substitution of real company data.
This commit is contained in:
Jonas
+300
-14
@@ -1,19 +1,305 @@
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
const companyDetails = [
|
||||
{ label: 'Anbieter', value: 'Hoard Labs GmbH (Testdaten)' },
|
||||
{ label: 'Vertreten durch', value: 'Max Mustermann, Geschäftsführer' },
|
||||
{ label: 'Adresse', value: 'Musterstraße 42, 12345 Musterstadt, Deutschland' },
|
||||
]
|
||||
|
||||
const registerDetails = [
|
||||
{ label: 'Handelsregister', value: 'HRB 123456' },
|
||||
{ label: 'Registergericht', value: 'Amtsgericht Musterstadt' },
|
||||
{ label: 'Umsatzsteuer-ID', value: 'DE123456789' },
|
||||
]
|
||||
|
||||
const contactDetails = [
|
||||
{ label: 'Telefon', value: '+49 30 1234567-0', href: 'tel:+493012345670' },
|
||||
{ label: 'E-Mail', value: 'kontakt@hoard-demo.de', href: 'mailto:kontakt@hoard-demo.de' },
|
||||
{ label: 'Support', value: 'support@hoard-demo.de', href: 'mailto:support@hoard-demo.de' },
|
||||
]
|
||||
|
||||
const legalNotes = [
|
||||
{
|
||||
title: 'Verantwortlich für den Inhalt',
|
||||
text: 'Julia Beispiel, Musterstraße 42, 12345 Musterstadt, Deutschland (Testdaten).',
|
||||
},
|
||||
{
|
||||
title: 'EU-Streitbeilegung',
|
||||
text: 'Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung bereit: https://ec.europa.eu/consumers/odr/. Wir sind nicht verpflichtet und nicht bereit, an einem Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen.',
|
||||
},
|
||||
{
|
||||
title: 'Haftung für Inhalte',
|
||||
text: 'Als Diensteanbieter sind wir für eigene Inhalte nach den allgemeinen Gesetzen verantwortlich. Für fremde Inhalte, auf die wir verweisen, übernehmen wir keine Gewähr. Dieses Impressum enthält ausschließlich Demo-Angaben.',
|
||||
},
|
||||
{
|
||||
title: 'Haftung für Links',
|
||||
text: 'Unsere Seiten enthalten Links zu externen Webseiten Dritter. Für deren Inhalte ist stets der jeweilige Anbieter verantwortlich. Bei Bekanntwerden von Rechtsverletzungen werden derartige Links umgehend entfernt.',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-container class="py-10">
|
||||
<v-row justify="center">
|
||||
<v-col cols="12" md="10" lg="8">
|
||||
<v-card rounded="lg" elevation="2">
|
||||
<v-card-title class="text-h5">Impressum</v-card-title>
|
||||
<v-card-text>
|
||||
Diese Seite ist als Platzhalter angelegt. Trage hier deine Firmen- oder Vereinsdaten
|
||||
ein.
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-container fluid class="impressum-page">
|
||||
<section class="impressum-hero hoard-panel">
|
||||
<div class="hero-copy">
|
||||
<p class="hero-kicker">Rechtliche Angaben</p>
|
||||
<h1>Impressum</h1>
|
||||
<p class="hero-lead">
|
||||
Diese Seite ist im Hoard-Design aufgebaut und mit Testdaten gefüllt. Ersetze die Angaben
|
||||
vor einem produktiven Einsatz mit deinen echten Unternehmensdaten.
|
||||
</p>
|
||||
|
||||
<div class="hero-meta">
|
||||
<span class="meta-pill">Testdaten</span>
|
||||
<span class="meta-text">Stand: 17. April 2026</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-actions">
|
||||
<v-btn color="primary" prepend-icon="mdi-home" to="/">Zur Startseite</v-btn>
|
||||
<v-btn variant="outlined" prepend-icon="mdi-login" to="/login">Zum Login</v-btn>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="details-grid">
|
||||
<article class="detail-card hoard-panel">
|
||||
<h2>Anbieterangaben</h2>
|
||||
<dl class="detail-list">
|
||||
<div v-for="entry in companyDetails" :key="entry.label" class="detail-item">
|
||||
<dt>{{ entry.label }}</dt>
|
||||
<dd>{{ entry.value }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</article>
|
||||
|
||||
<article class="detail-card hoard-panel">
|
||||
<h2>Kontakt</h2>
|
||||
<dl class="detail-list">
|
||||
<div v-for="entry in contactDetails" :key="entry.label" class="detail-item">
|
||||
<dt>{{ entry.label }}</dt>
|
||||
<dd>
|
||||
<a :href="entry.href">{{ entry.value }}</a>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</article>
|
||||
|
||||
<article class="detail-card hoard-panel">
|
||||
<h2>Register und Steuer</h2>
|
||||
<dl class="detail-list">
|
||||
<div v-for="entry in registerDetails" :key="entry.label" class="detail-item">
|
||||
<dt>{{ entry.label }}</dt>
|
||||
<dd>{{ entry.value }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="notes-section hoard-panel">
|
||||
<header class="notes-head">
|
||||
<p class="notes-kicker">Rechtliche Hinweise</p>
|
||||
<h2>Wichtige Zusatzinformationen</h2>
|
||||
</header>
|
||||
|
||||
<div class="notes-grid">
|
||||
<article v-for="note in legalNotes" :key="note.title" class="note-card">
|
||||
<h3>{{ note.title }}</h3>
|
||||
<p>{{ note.text }}</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<style scoped>
|
||||
.impressum-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-6);
|
||||
margin-inline: auto;
|
||||
width: min(100%, 1120px);
|
||||
padding-block: var(--space-4) var(--space-8);
|
||||
}
|
||||
|
||||
.impressum-hero {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: var(--space-6);
|
||||
align-items: end;
|
||||
padding: var(--space-8);
|
||||
background:
|
||||
linear-gradient(
|
||||
125deg,
|
||||
color-mix(in srgb, var(--color-primary-100) 40%, var(--color-surface) 60%) 0%,
|
||||
var(--color-surface) 56%
|
||||
);
|
||||
}
|
||||
|
||||
.hero-kicker,
|
||||
.hero-lead,
|
||||
.meta-text,
|
||||
.notes-kicker {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.hero-kicker,
|
||||
.notes-kicker {
|
||||
margin-bottom: var(--space-2);
|
||||
color: var(--color-primary-700);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: var(--space-3);
|
||||
font-size: clamp(1.9rem, 2.2vw + 1rem, 2.5rem);
|
||||
}
|
||||
|
||||
.hero-lead {
|
||||
max-width: 64ch;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.hero-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-5);
|
||||
}
|
||||
|
||||
.meta-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px var(--space-3);
|
||||
border: 1px solid color-mix(in srgb, var(--color-primary-300) 60%, var(--color-border) 40%);
|
||||
border-radius: 999px;
|
||||
color: var(--color-primary-700);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 600;
|
||||
background-color: color-mix(in srgb, var(--color-primary-100) 82%, var(--color-surface) 18%);
|
||||
}
|
||||
|
||||
.meta-text {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.details-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: clamp(1.2rem, 1.2vw + 0.85rem, 1.6rem);
|
||||
}
|
||||
|
||||
.detail-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
padding-bottom: var(--space-3);
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--color-border) 75%, var(--color-surface) 25%);
|
||||
}
|
||||
|
||||
.detail-item:last-child {
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
dt {
|
||||
margin-bottom: var(--space-1);
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.notes-section {
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
.notes-head {
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
|
||||
.notes-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.note-card {
|
||||
padding: var(--space-4);
|
||||
border: 1px solid color-mix(in srgb, var(--color-border) 76%, var(--color-surface) 24%);
|
||||
border-radius: var(--radius-md);
|
||||
background-color: color-mix(in srgb, var(--color-surface-alt) 72%, var(--color-surface) 28%);
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0 0 var(--space-2);
|
||||
font-size: 1.03rem;
|
||||
}
|
||||
|
||||
.note-card p {
|
||||
margin: 0;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
@media (width <= 1080px) {
|
||||
.details-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 960px) {
|
||||
.impressum-page {
|
||||
gap: var(--space-5);
|
||||
padding-block: var(--space-2) var(--space-6);
|
||||
}
|
||||
|
||||
.impressum-hero,
|
||||
.notes-section {
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.impressum-hero {
|
||||
grid-template-columns: 1fr;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.details-grid,
|
||||
.notes-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -76,6 +76,7 @@ Ich baue alleine neben meiner Ausbildung eine einfache self-hosted Web-App für
|
||||
- `GUI/src/routes/Home.vue` ist jetzt eine Produkt-Startseite (Landingpage) zur App-Vorstellung statt einer Dashboard-Platzhalterkarte.
|
||||
- Das Brand-Element in `GUI/src/Layout.vue` nutzt nun das App-Icon (`GUI/src/assets/images/icon.png`) statt eines Platzhalter-Buchstabens; die Darstellung wurde im Topbar-Button sichtbar vergrößert.
|
||||
- Das Topbar-Icon in `GUI/src/Layout.vue` wurde nochmals deutlich größer gesetzt, damit das Branding besser sichtbar ist.
|
||||
- `GUI/src/routes/Impressum.vue` wurde von einem Platzhalter auf eine vollständige, designkonforme Impressum-Seite mit klarer Struktur und Testdaten umgestellt.
|
||||
|
||||
## Änderungen durch Codex
|
||||
- Layout-Neubau in `GUI/src/Layout.vue` mit Brand-Bereich, Seitenkontext aus Route-Metadaten, überarbeiteter Navigation und designkonformer Footer-Struktur.
|
||||
@@ -96,3 +97,4 @@ Ich baue alleine neben meiner Ausbildung eine einfache self-hosted Web-App für
|
||||
- In `GUI/src/plugins/routesLayout.ts` wurde ein kurzer Kommentar ergänzt, der die Nutzung von `Visibility.Public`, `Visibility.Route`, `visibilityRoute` (einzeln/mehrfach) sowie typische Szenarien für die Sidebar-Sichtbarkeit beschreibt.
|
||||
- Fokusdarstellung in `GUI/src/global.css` für Vuetify-Inputs verbessert: Der doppelte grüne Fokusrahmen (zusätzlicher `focus-visible`-Outline im inneren `<input>`) wird unterdrückt; der Fokus bleibt über den Feldrahmen klar sichtbar.
|
||||
- Textauswahl (`::selection`) in `GUI/src/global.css` von kräftigem Grün auf eine subtilere Primär-Tönung reduziert, damit markierte Inhalte ruhiger wirken.
|
||||
- `GUI/src/routes/Impressum.vue` vollständig neu aufgebaut: Hero-Bereich, strukturierte Anbieter-/Kontakt-/Registerdaten, rechtliche Hinweisblöcke und klare Kennzeichnung als Testdaten im bestehenden Hoard-Design.
|
||||
|
||||
Reference in New Issue
Block a user