admin/ShopSolution-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styling und routing

Browse Source
This commit is contained in:
Tizian.Breuch
2025-09-05 15:10:41 +02:00
parent 79d8df8d4f
commit 99dee65a79
35 changed files with 1708 additions and 479 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/app/features/demo/components/demo/demo.component.css Normal file
View File

676
src/app/features/demo/components/demo/demo.component.html Normal file
View File

@@ -0,0 +1,676 @@
<!-- FINALE demo.component.html -->
<div class="dashboard-container">
<!-- =================================================================== -->
<!-- SIDEBAR -->
<!-- =================================================================== -->
<aside class="sidebar">
<div class="sidebar-header">
<h1 class="sidebar-title">CustomDash</h1>
</div>
<nav class="sidebar-nav">
<a href="#" class="nav-item active">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
<polyline points="9 22 9 12 15 12 15 22"></polyline>
</svg>
<span>Übersicht</span>
</a>
<a href="#" class="nav-item">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="18" y1="20" x2="18" y2="10"></line>
<line x1="12" y1="20" x2="12" y2="4"></line>
<line x1="6" y1="20" x2="6" y2="14"></line>
</svg>
<span>Analysen</span>
</a>
<a href="#" class="nav-item">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"
></path>
</svg>
<span>Berichte</span>
</a>
</nav>
<div class="sidebar-footer">
<a href="#" class="nav-item">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M10.3 21.7c.9.9 2.5.9 3.4 0l6.9-6.9c.9-.9.9-2.5 0-3.4l-6.9-6.9c-.9-.9-2.5-.9-3.4 0l-6.9 6.9c-.9.9-.9-2.5 0 3.4l6.9 6.9z"
></path>
</svg>
<span>Einstellungen</span>
</a>
</div>
</aside>
<!-- =================================================================== -->
<!-- HAUPTINHALT -->
<!-- =================================================================== -->
<main class="main-content">
<header class="main-header">
<div class="search-bar">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
<input type="text" placeholder="Dashboard durchsuchen..." />
</div>
<div class="header-actions">
<div class="theme-switcher">
<label for="theme-toggle">Dark Mode</label>
<input
type="checkbox"
id="theme-toggle"
class="slider-checkbox"
(change)="toggleTheme()"
[checked]="isDarkMode"
/>
</div>
<div class="user-profile">
<img src="https://i.pravatar.cc/40" alt="User Avatar" />
</div>
</div>
</header>
<!-- Haupt-Grid für alle Dashboard-Inhalte und Komponenten -->
<div class="dashboard-grid">
<!-- Sektion: KPI-Karten -->
<div class="card kpi-card">
<div class="kpi-icon icon-sales">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="12" y1="1" x2="12" y2="23"></line>
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
</svg>
</div>
<div class="kpi-content">
<span class="kpi-value">€ 14.750</span
><span class="kpi-label">Umsatz (Monat)</span>
</div>
</div>
<div class="card kpi-card">
<div class="kpi-icon icon-users">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
</div>
<div class="kpi-content">
<span class="kpi-value">1.284</span
><span class="kpi-label">Neue Nutzer</span>
</div>
</div>
<div class="card kpi-card">
<div class="kpi-icon icon-orders">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
<line x1="3" y1="6" x2="21" y2="6"></line>
<path d="M16 10a4 4 0 0 1-8 0"></path>
</svg>
</div>
<div class="kpi-content">
<span class="kpi-value">312</span
><span class="kpi-label">Bestellungen</span>
</div>
</div>
<div class="card kpi-card">
<div class="kpi-icon icon-performance">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
</svg>
</div>
<div class="kpi-content">
<span class="kpi-value">99.8%</span
><span class="kpi-label">Verfügbarkeit</span>
</div>
</div>
<!-- Sektion: Diagramm -->
<section class="card grid-col-span-2">
<h3 class="card-header">Umsatzentwicklung</h3>
<div class="card-body chart-container">
<div class="chart-bar" style="height: 60%"><span>Jan</span></div>
<div class="chart-bar" style="height: 75%"><span>Feb</span></div>
<div class="chart-bar" style="height: 50%"><span>Mär</span></div>
<div class="chart-bar" style="height: 85%"><span>Apr</span></div>
<div class="chart-bar" style="height: 90%"><span>Mai</span></div>
<div class="chart-bar" style="height: 65%"><span>Jun</span></div>
</div>
</section>
<!-- =================================================================== -->
<!-- Sektion: Datentabelle (Final & Korrigiert) -->
<!-- =================================================================== -->
<section class="card grid-col-span-2">
<h3 class="card-header">Letzte Bestellungen</h3>
<div class="table-container">
<table class="modern-table">
<thead>
<tr>
<th class="sortable">
<span>Kunde</span>
<svg
class="sort-icon"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M8 3v18l8-9L8 3z"
transform="rotate(90 12 12)"
></path>
</svg>
</th>
<th>Bestell-ID</th>
<th>Status</th>
<th class="text-right">Betrag</th>
<th class="text-center">Aktionen</th>
</tr>
</thead>
<tbody>
<!-- Zeile 1 -->
<tr>
<td>
<div class="user-cell">
<img
src="https://i.pravatar.cc/40?u=max"
alt="Avatar Max Mustermann"
/>
<div>
<div class="user-name">Max Mustermann</div>
<div class="user-email">max.mustermannATexample.com</div>
</div>
</div>
</td>
<td><span class="mono">#10543</span></td>
<!-- HIER WURDE DIE KORREKTE STATUS-PILLE HINZUGEFÜGT -->
<td>
<span class="status-pill pill-success">Abgeschlossen</span>
</td>
<td class="text-right amount">€ 129,99</td>
<td class="actions-cell">
<button class="btn btn-icon" data-tooltip="Details anzeigen">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>
</button>
<button class="btn btn-icon" data-tooltip="Bearbeiten">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
></path>
<path
d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
></path>
</svg>
</button>
</td>
</tr>
<!-- Zeile 2 -->
<tr>
<td>
<div class="user-cell">
<img
src="https://i.pravatar.cc/40?u=erika"
alt="Avatar Erika Mustermann"
/>
<div>
<div class="user-name">Erika Mustermann</div>
<div class="user-email">erika.mATexample.com</div>
</div>
</div>
</td>
<td><span class="mono">#10542</span></td>
<!-- HIER WURDE DIE KLASSE ZU status-pill GEÄNDERT -->
<td>
<span class="status-pill pill-warning">In Bearbeitung</span>
</td>
<td class="text-right amount">€ 49,50</td>
<td class="actions-cell">
<button class="btn btn-icon" data-tooltip="Details anzeigen">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>
</button>
<button class="btn btn-icon" data-tooltip="Bearbeiten">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
></path>
<path
d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
></path>
</svg>
</button>
</td>
</tr>
<!-- Zeile 3 -->
<tr>
<td>
<div class="user-cell">
<img
src="https://i.pravatar.cc/40?u=peter"
alt="Avatar Peter Pan"
/>
<div>
<div class="user-name">Peter Pan</div>
<div class="user-email">peter.panATexample.com</div>
</div>
</div>
</td>
<td><span class="mono">#10541</span></td>
<!-- HIER WURDE DIE KLASSE ZU status-pill GEÄNDERT -->
<td><span class="status-pill pill-danger">Storniert</span></td>
<td class="text-right amount">€ 87,00</td>
<td class="actions-cell">
<button class="btn btn-icon" data-tooltip="Details anzeigen">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>
</button>
<button class="btn btn-icon" data-tooltip="Bearbeiten">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
></path>
<path
d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
></path>
</svg>
</button>
</td>
</tr>
<!-- Zeile 4 (Bonus) -->
<tr>
<td>
<div class="user-cell">
<img
src="https://i.pravatar.cc/40?u=anna"
alt="Avatar Anna Kurz"
/>
<div>
<div class="user-name">Anna Kurz</div>
<div class="user-email">anna.kurzATexample.com</div>
</div>
</div>
</td>
<td><span class="mono">#10540</span></td>
<!-- HIER WURDE DIE KLASSE ZU status-pill GEÄNDERT -->
<td><span class="status-pill pill-info">Versendet</span></td>
<td class="text-right amount">€ 214,20</td>
<td class="actions-cell">
<button class="btn btn-icon" data-tooltip="Details anzeigen">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>
</button>
<button class="btn btn-icon" data-tooltip="Bearbeiten">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
></path>
<path
d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
></path>
</svg>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- BEGINN DER UI-KOMPONENTEN-BIBLIOTHEK -->
<section class="card grid-col-span-2">
<h3 class="card-header">Moderne Formular-Elemente</h3>
<div class="card-body component-grid">
<div class="form-field">
<input
type="text"
class="form-input"
id="name"
placeholder=" "
/><label for="name" class="form-label">Name</label>
</div>
<div class="form-field">
<select class="form-input" id="city">
<option>Berlin</option>
<option>München</option></select
><label for="city" class="form-label">Stadt</label>
</div>
<div class="form-field">
<textarea
class="form-input"
id="message"
placeholder=" "
rows="2"
></textarea
><label for="message" class="form-label">Nachricht</label>
</div>
<div class="form-group-inline">
<label>Benachrichtigungen</label>
<div class="slide-toggle">
<input
type="checkbox"
id="toggle-1"
class="slide-toggle-input"
/><label for="toggle-1" class="slide-toggle-label"></label>
</div>
</div>
</div>
</section>
<section class="card grid-col-span-2">
<h3 class="card-header">Buttons, Chips & Badges</h3>
<div class="card-body component-grid">
<div class="button-group">
<button class="btn btn-primary">Primary</button
><button class="btn btn-secondary">Secondary</button
><button class="btn btn-stroked">Stroked</button
><button class="btn btn-flat">Flat</button
><button class="btn btn-icon" data-tooltip="Favorit">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
></path>
</svg>
</button>
</div>
<div class="chip-set">
<span class="chip"
>Technologie<span class="chip-remove">&times;</span></span
><span class="chip"
>Design<span class="chip-remove">&times;</span></span
><span class="chip chip-active"
>Angular<span class="chip-remove">&times;</span></span
>
</div>
<div class="badge-showcase">
<div class="badge-container">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
<path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg
><span class="badge-dot">3</span>
</div>
</div>
</div>
</section>
<section class="card grid-col-span-2">
<h3 class="card-header">Indikatoren & Feedback</h3>
<div class="card-body component-grid">
<div>
<label>Fortschritt</label>
<div class="progress-bar">
<div class="progress-bar-value" style="width: 75%"></div>
</div>
</div>
<div class="spinner-container">
<div class="progress-spinner"></div>
</div>
<div class="alert alert-success">
<strong>Erfolg!</strong> Ihre Änderungen wurden gespeichert.
</div>
<div class="alert alert-danger">
<strong>Fehler!</strong> Bitte füllen Sie alle Felder aus.
</div>
</div>
</section>
<!-- Karte: Navigation & Layout -->
<section class="card grid-col-span-2">
<h3 class="card-header">Navigation & Layout</h3>
<div class="card-body">
<div class="tab-group">
<button class="tab-link active">Profil</button
><button class="tab-link">Konto</button
><button class="tab-link">Sicherheit</button>
</div>
<div class="tab-content">
<p>Hier wäre der Inhalt für den aktiven Tab "Profil".</p>
</div>
<hr class="divider" />
<!-- HIER IST DIE WICHTIGE ÄNDERUNG FÜR DIE ANIMATION -->
<details class="expansion-panel">
<summary class="expansion-panel-header">
<span>Weitere Details anzeigen</span>
<svg
class="expansion-panel-icon"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</summary>
<div class="expansion-panel-content-wrapper">
<div class="expansion-panel-content">
Hier steht der Inhalt, der ein- und ausgeklappt werden kann.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse malesuada lacus ex, sit amet blandit leo lobortis
eget.
</div>
</div>
</details>
</div>
</section>
</div>
<!-- Ende .dashboard-grid -->
</main>
</div>

32
src/app/features/demo/components/demo/demo.component.ts Normal file
View File

@@ -0,0 +1,32 @@
import { Component, Renderer2 } from '@angular/core';
@Component({
selector: 'app-demo',
imports: [],
templateUrl: './demo.component.html',
styleUrl: './demo.component.css'
})
export class DemoComponent {
// 1. Eine Eigenschaft, die den aktuellen Zustand des Dark Mode speichert.
// Sie ist an [checked]="isDarkMode" in der HTML gebunden.
isDarkMode = false;
// 2. Wir "injizieren" den Renderer2. Das ist der sichere Weg in Angular,
// um das DOM (z.B. den <body>-Tag) zu manipulieren.
constructor(private renderer: Renderer2) {}
// 3. Das ist die Funktion, die vom (change)-Event des Schalters aufgerufen wird.
toggleTheme(): void {
// Kehre den aktuellen Zustand um (true -> false, false -> true)
this.isDarkMode = !this.isDarkMode;
// Überprüfe den neuen Zustand und füge die Klasse 'dark-theme'
// zum <body>-Tag hinzu oder entferne sie.
if (this.isDarkMode) {
this.renderer.addClass(document.body, 'dark-theme');
} else {
this.renderer.removeClass(document.body, 'dark-theme');
}
}
}

9
src/app/features/demo/demo.module.ts Normal file
View File

@@ -0,0 +1,9 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [],
imports: [CommonModule, ReactiveFormsModule],
})
export class DemoModule {}

14
src/app/features/demo/demo.routes.ts Normal file
View File

@@ -0,0 +1,14 @@
import { Routes } from '@angular/router';
import { DemoComponent } from './components/demo/demo.component';
export const DEMO_ROUTES: Routes = [
{
path: '',
component: DemoComponent,
children: [
{ path: '', redirectTo: '1', pathMatch: 'full' },
{ path: '1', component: DemoComponent, title: 'Demo' },
]
}
];