Revamp app layout, theming and navigation
Refactor Layout.vue to implement a redesigned, responsive shell: new branding (SVG icon, title & subtitle), computed sidebar/footer routes, route-aware page title & description, improved footer visibility, and a mobile-friendly navigation drawer. Theme handling now uses a data-theme attribute, persistent storage, accessible labels and toggle controls. Added new image assets (icon.svg, icon.png, 404NotFound.png), global.css and documentation files (style.md, codexInfo.md), updated related plugins/routes/components, and removed the old logo.png. Also updated the favicon.
This commit is contained in:
Jonas
+433
-14
@@ -1,19 +1,438 @@
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
const valueProps = [
|
||||
{
|
||||
icon: 'mdi-folder-multiple-outline',
|
||||
title: 'Dateien zuerst',
|
||||
text: 'Ordner, Dateiliste und Vorschau sind der Kern. Kein überladenes Dashboard-Gefühl.',
|
||||
},
|
||||
{
|
||||
icon: 'mdi-file-document-edit-outline',
|
||||
title: 'Markdown direkt im Browser',
|
||||
text: 'Dokumente bearbeiten, lesen und strukturieren ohne Tool-Wechsel.',
|
||||
},
|
||||
{
|
||||
icon: 'mdi-server-outline',
|
||||
title: 'Self-hosted Kontrolle',
|
||||
text: 'Dateimetadaten in PostgreSQL, Dateien in MinIO, alles auf deinem Server.',
|
||||
},
|
||||
]
|
||||
|
||||
const coreFeatures = [
|
||||
{
|
||||
icon: 'mdi-folder-open-outline',
|
||||
title: 'Ordnernavigation wie gewohnt',
|
||||
text: 'Schnell durch Verzeichnisse klicken, Inhalte erfassen und sauber organisieren.',
|
||||
},
|
||||
{
|
||||
icon: 'mdi-image-outline',
|
||||
title: 'PDF- und Bildvorschau',
|
||||
text: 'Dateien öffnen und direkt einsehen, ohne externe Viewer oder Downloads.',
|
||||
},
|
||||
{
|
||||
icon: 'mdi-account-lock-outline',
|
||||
title: 'Klare Benutzerlogik',
|
||||
text: 'Keine offene Registrierung. Accounts werden bewusst und kontrolliert verwaltet.',
|
||||
},
|
||||
{
|
||||
icon: 'mdi-lightning-bolt-outline',
|
||||
title: 'Schlankes MVP-Setup',
|
||||
text: 'Fokus auf das Wesentliche: stabil, wartbar und realistisch für Solo-Entwicklung.',
|
||||
},
|
||||
]
|
||||
|
||||
const workflowSteps = [
|
||||
{
|
||||
number: '01',
|
||||
title: 'Anmelden',
|
||||
text: 'Melde dich mit einem vorhandenen Konto an und starte direkt in deiner Dateiablage.',
|
||||
},
|
||||
{
|
||||
number: '02',
|
||||
title: 'Dateien strukturieren',
|
||||
text: 'Lege Ordner an, lade Dateien hoch und halte deine Arbeitsbereiche aufgeräumt.',
|
||||
},
|
||||
{
|
||||
number: '03',
|
||||
title: 'Inhalte bearbeiten',
|
||||
text: 'Markdown, Bilder und PDFs direkt in der App ansehen und bearbeiten.',
|
||||
},
|
||||
]
|
||||
|
||||
const techStack = ['Vue 3', 'ASP.NET Core', 'PostgreSQL', 'MinIO', 'md-editor-v3', 'Cookie Auth']
|
||||
</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-h4">Willkommen bei Hoard</v-card-title>
|
||||
<v-card-text class="text-body-1">
|
||||
Dein Vuetify-Setup ist aktiv. Ueber das Menue links kannst du zu den weiteren Seiten
|
||||
navigieren.
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-container fluid class="landing-page">
|
||||
<section class="hero hoard-panel">
|
||||
<div class="hero-copy">
|
||||
<p class="hero-kicker">Self-hosted Datei-Workspace</p>
|
||||
<h1>Hoard ist deine ruhige Startseite für Dateien, Ordner und Markdown.</h1>
|
||||
<p class="hero-lead">
|
||||
Eine einfache, Google-Drive-inspirierte Web-App für Teams, die volle Kontrolle über
|
||||
Daten, Struktur und Workflow behalten wollen.
|
||||
</p>
|
||||
|
||||
<div class="hero-actions">
|
||||
<v-btn color="primary" size="large" prepend-icon="mdi-login" to="/login">
|
||||
Zum Login
|
||||
</v-btn>
|
||||
<v-btn variant="outlined" size="large" prepend-icon="mdi-file-document-outline" to="/impressum">
|
||||
Mehr erfahren
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
<div class="hero-tags">
|
||||
<span class="hero-tag">Light-first UX</span>
|
||||
<span class="hero-tag">Mehrbenutzerfähig</span>
|
||||
<span class="hero-tag">Ohne SaaS-Abhängigkeit</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-preview hoard-panel">
|
||||
<header class="preview-head">
|
||||
<p class="preview-title">Beispielansicht</p>
|
||||
<span class="preview-pill">Workspace</span>
|
||||
</header>
|
||||
<div class="preview-list">
|
||||
<article class="preview-row">
|
||||
<v-icon icon="mdi-folder-outline" size="18" />
|
||||
<div>
|
||||
<p class="row-title">Dokumentation</p>
|
||||
<p class="row-meta">Ordner · vor 3 Tagen aktualisiert</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="preview-row">
|
||||
<v-icon icon="mdi-file-document-outline" size="18" />
|
||||
<div>
|
||||
<p class="row-title">roadmap.md</p>
|
||||
<p class="row-meta">Markdown · 18 KB</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="preview-row">
|
||||
<v-icon icon="mdi-file-pdf-box" size="18" />
|
||||
<div>
|
||||
<p class="row-title">api-reference.pdf</p>
|
||||
<p class="row-meta">PDF · 1.2 MB</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="value-grid">
|
||||
<article v-for="item in valueProps" :key="item.title" class="value-card hoard-panel">
|
||||
<v-icon :icon="item.icon" size="22" />
|
||||
<h2>{{ item.title }}</h2>
|
||||
<p>{{ item.text }}</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="feature-section hoard-panel">
|
||||
<header class="section-head">
|
||||
<p class="section-kicker">Für den Produktivalltag</p>
|
||||
<h2>Weniger Tool-Chaos, mehr Fokus auf Inhalte</h2>
|
||||
</header>
|
||||
<div class="feature-grid">
|
||||
<article v-for="feature in coreFeatures" :key="feature.title" class="feature-card">
|
||||
<v-icon :icon="feature.icon" size="20" />
|
||||
<h3>{{ feature.title }}</h3>
|
||||
<p>{{ feature.text }}</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="workflow-section">
|
||||
<header class="section-head">
|
||||
<p class="section-kicker">So funktioniert Hoard</p>
|
||||
<h2>In drei klaren Schritten produktiv starten</h2>
|
||||
</header>
|
||||
<div class="workflow-grid">
|
||||
<article v-for="step in workflowSteps" :key="step.number" class="workflow-card hoard-panel">
|
||||
<p class="workflow-number">{{ step.number }}</p>
|
||||
<h3>{{ step.title }}</h3>
|
||||
<p>{{ step.text }}</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="stack-section hoard-panel">
|
||||
<div class="stack-copy">
|
||||
<p class="section-kicker">Technische Basis</p>
|
||||
<h2>Schlank gebaut für ein realistisches MVP</h2>
|
||||
<p class="stack-text">
|
||||
Hoard kombiniert einen modernen Frontend-Stack mit einem pragmatischen Backend-Setup,
|
||||
damit Weiterentwicklung und Betrieb auch solo gut machbar bleiben.
|
||||
</p>
|
||||
</div>
|
||||
<div class="stack-list">
|
||||
<span v-for="item in techStack" :key="item" class="stack-pill">{{ item }}</span>
|
||||
</div>
|
||||
</section>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<style scoped>
|
||||
.landing-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-6);
|
||||
margin-inline: auto;
|
||||
width: min(100%, 1180px);
|
||||
padding-block: var(--space-4) var(--space-8);
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
|
||||
gap: var(--space-6);
|
||||
padding: var(--space-8);
|
||||
background:
|
||||
linear-gradient(
|
||||
120deg,
|
||||
color-mix(in srgb, var(--color-primary-100) 34%, var(--color-surface) 66%) 0%,
|
||||
var(--color-surface) 52%
|
||||
);
|
||||
}
|
||||
|
||||
.hero-kicker,
|
||||
.section-kicker,
|
||||
.workflow-number,
|
||||
.preview-title,
|
||||
.row-title,
|
||||
.row-meta,
|
||||
.stack-text {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.hero-kicker,
|
||||
.section-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-4);
|
||||
max-width: 20ch;
|
||||
font-size: clamp(2rem, 2.5vw + 1rem, 3rem);
|
||||
line-height: 1.08;
|
||||
}
|
||||
|
||||
.hero-lead {
|
||||
margin-bottom: var(--space-5);
|
||||
max-width: 50ch;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.hero-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.hero-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 5px var(--space-3);
|
||||
border: 1px solid var(--color-border-strong);
|
||||
border-radius: 999px;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.hero-preview {
|
||||
align-self: center;
|
||||
padding: var(--space-5);
|
||||
width: 100%;
|
||||
background-color: color-mix(in srgb, var(--color-surface-alt) 86%, var(--color-surface) 14%);
|
||||
}
|
||||
|
||||
.preview-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.preview-title {
|
||||
color: var(--color-text);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.preview-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px var(--space-2);
|
||||
border-radius: 999px;
|
||||
color: var(--color-primary-700);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 600;
|
||||
background-color: var(--color-primary-100);
|
||||
}
|
||||
|
||||
.preview-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.preview-row {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: var(--space-3);
|
||||
align-items: center;
|
||||
padding: var(--space-3);
|
||||
border: 1px solid color-mix(in srgb, var(--color-border) 75%, var(--color-surface) 25%);
|
||||
border-radius: var(--radius-md);
|
||||
background-color: var(--color-surface);
|
||||
}
|
||||
|
||||
.row-title {
|
||||
color: var(--color-text);
|
||||
font-size: var(--font-size-md);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.row-meta {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.value-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.value-card {
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.value-card h2,
|
||||
.section-head h2 {
|
||||
margin: var(--space-3) 0 var(--space-2);
|
||||
font-size: clamp(1.25rem, 1.2vw + 0.8rem, 1.8rem);
|
||||
}
|
||||
|
||||
.value-card p,
|
||||
.feature-card p,
|
||||
.workflow-card p,
|
||||
.stack-text {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.feature-section,
|
||||
.stack-section {
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
.section-head {
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
|
||||
.feature-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
padding: var(--space-4);
|
||||
border: 1px solid color-mix(in srgb, var(--color-border) 75%, var(--color-surface) 25%);
|
||||
border-radius: var(--radius-md);
|
||||
background-color: color-mix(in srgb, var(--color-surface) 80%, var(--color-surface-alt) 20%);
|
||||
}
|
||||
|
||||
.feature-card h3,
|
||||
.workflow-card h3,
|
||||
.stack-copy h2 {
|
||||
margin: var(--space-2) 0;
|
||||
}
|
||||
|
||||
.workflow-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.workflow-card {
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.workflow-number {
|
||||
color: var(--color-primary-700);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.stack-section {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
|
||||
gap: var(--space-6);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stack-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.stack-pill {
|
||||
padding: 6px var(--space-3);
|
||||
border: 1px solid var(--color-border-strong);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-text);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 500;
|
||||
background-color: color-mix(in srgb, var(--color-surface-alt) 75%, var(--color-surface) 25%);
|
||||
}
|
||||
|
||||
@media (width <= 1100px) {
|
||||
.hero,
|
||||
.stack-section {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.hero-preview {
|
||||
max-width: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 960px) {
|
||||
.landing-page {
|
||||
gap: var(--space-5);
|
||||
padding-block: var(--space-2) var(--space-6);
|
||||
}
|
||||
|
||||
.hero,
|
||||
.feature-section,
|
||||
.stack-section {
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.value-grid,
|
||||
.feature-grid,
|
||||
.workflow-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user