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

styles

Browse Source
This commit is contained in:
Tizian.Breuch
2025-09-09 11:47:48 +02:00
parent c65aef11ca
commit 5601cd0110
16 changed files with 223 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

225
src/app/features/demo/components/demo2/demo2.component.html
View File

@@ -88,76 +88,48 @@
<app-page-header></app-page-header>
<div class="dashboard-grid">
<!-- Sektion: KPI-Karten -->
<app-kpi-card value="€ 14.750" label="Umsatz (Monat)" color="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
></app-kpi-card>
<app-kpi-card value="1.284" label="Neue Nutzer" color="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
></app-kpi-card>
<app-kpi-card value="312" label="Bestellungen" color="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
></app-kpi-card>
<app-kpi-card value="99.8%" label="Verfügbarkeit" color="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
<app-kpi-card
value="€ 14.750"
label="Umsatz"
color="green"
iconName="money"
></app-kpi-card>
<app-card>
<h3 card-header>Letzte Bestellungen</h3>
<app-kpi-card
value="1.284"
label="Neue Nutzer"
color="blue"
iconName="group"
></app-kpi-card>
<app-kpi-card
value="312"
label="Bestellungen"
color="orange"
iconName="shopping_bag"
></app-kpi-card>
<app-kpi-card
value="99.8%"
label="Verfügbarkeit"
color="purple"
iconName="bolt"
></app-kpi-card>
<app-card class="grid-col-span-2">
<h3 class="card-header">Umsatzentwicklung</h3>
<div class="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>
</app-card>
<app-card class="grid-col-span-2">
<h3 class="card-header">Letzte Bestellungen</h3>
<div class="table-container">
<table class="modern-table">
<thead>
@@ -212,65 +184,26 @@
</td>
<td class="text-right amount">€ 129,99</td>
<td class="actions-cell">
<app-button color="icon" 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></app-button
><app-button color="icon" 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></app-button
><app-button
<app-button
color="icon"
tooltip="Details anzeigen"
iconName="eye"
></app-button>
<app-button
color="icon"
tooltip="Bearbeiten"
iconName="edit"
></app-button>
<app-button
color="icon-danger"
tooltip="Löschen"
iconName="delete"
(click)="openDialog()"
><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"
>
<polyline points="3 6 5 6 21 6"></polyline>
<path
d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
></path>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line></svg
></app-button>
</td>
</tr>
<!-- Weitere Tabellenzeilen hier... -->
</tbody>
</table>
</div>
@@ -282,24 +215,9 @@
></app-paginator>
</app-card>
<!-- Sektion: Diagramm & Tabelle -->
<app-card class="grid-col-span-2">
<h3 card-header>Umsatzentwicklung</h3>
<div class="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>
</app-card>
<!-- UI Komponenten Showcase -->
<app-card class="grid-col-span-2">
<h3 card-header>Moderne Formular-Elemente</h3>
<h3 class="card-header">Moderne Formular-Elemente</h3>
<div class="component-grid">
<app-form-field label="Name" type="text"></app-form-field>
<div class="form-field">
@@ -325,26 +243,21 @@
</app-card>
<app-card class="grid-col-span-2">
<h3 card-header>Buttons, Chips & Interaktion</h3>
<h3 class="card-header">Buttons, Chips & Interaktion</h3>
<div class="component-grid">
<div class="button-group">
<app-button color="primary">Primary</app-button>
<app-button color="secondary">Secondary</app-button>
<app-button color="stroked">Stroked</app-button>
<app-button color="flat">Flat</app-button>
<app-button color="icon" tooltip="Favorit hinzufügen"
><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
>...</app-button
>
<app-button
color="icon"
tooltip="Details anzeigen"
iconName="eye"
></app-button>
</div>
<div class="chip-set">
@@ -373,11 +286,13 @@
><span class="badge-dot">3</span>
</div>
</div>
</div>
</app-card>
<app-card class="grid-col-span-2">
<h3 card-header>Indikatoren & Feedback</h3>
<h3 class="card-header">Indikatoren & Feedback</h3>
<div class="card-body component-grid">
<app-button color="secondary" (click)="triggerSnackbar()"
>Snackbar anzeigen</app-button
@@ -394,7 +309,7 @@
</app-card>
<app-card class="grid-col-span-2">
<h3 card-header>Navigation & Layout</h3>
<h3 class="card-header">Navigation & Layout</h3>
<div class="component-grid">
<div class="tab-group">
<button class="tab-link active">Profil</button
@@ -437,7 +352,7 @@
</app-card>
<app-card class="grid-col-span-2">
<h3 card-header>Ladezustände (Skeleton)</h3>
<h3 class="card-header">Ladezustände (Skeleton)</h3>
<div *ngIf="isLoading" class="component-grid">
<div class="skeleton-card card">
<app-skeleton type="avatar"></app-skeleton>