styling und routing
This commit is contained in:
Tizian.Breuch
@@ -1,5 +1,13 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root{
|
||||
|
||||
}
|
||||
/*
|
||||
* =================================================================================
|
||||
* STYLING GUIDELINES & GLOBALES STYLING
|
||||
* =================================================================================
|
||||
*/
|
||||
|
||||
/* 1. CSS Variablen (Custom Properties) für das Theming
|
||||
* =================================================================================
|
||||
* Hier definieren wir alle wiederverwendbaren Werte. Dies ist die "Single Source of Truth"
|
||||
* für Ihr Design-System.
|
||||
*/
|
||||
@@ -1,29 +1,34 @@
|
||||
// src/app/app.routes.ts
|
||||
import { Routes } from '@angular/router';
|
||||
import { LandingpageComponent } from './features/landingpage/landingpage.component';
|
||||
import { NotFoundComponent } from './core/components/not-found/not-found.component';
|
||||
|
||||
export const routes: Routes = [
|
||||
// REGEL 1: Für alle "normalen" Seiten, nutze das MainLayout
|
||||
// Regel 1: Leerer Pfad (Startseite der Anwendung)
|
||||
// Ein Benutzer, der die Haupt-URL Ihrer Seite aufruft (z.B. "http://localhost:4200/"),
|
||||
// wird sofort und ohne Umwege zur Login-Seite weitergeleitet.
|
||||
{
|
||||
path: '',
|
||||
children: [
|
||||
{ path: '', component: LandingpageComponent }, // ... zeige das Landing-Bild darin
|
||||
// { path: 'shop', loadChildren: ... }, // ... zeige das Shop-Bild darin
|
||||
// { path: 'cart', loadChildren: ... } // ... zeige das Warenkorb-Bild darin
|
||||
],
|
||||
redirectTo: 'auth', // Leitet zur /auth-Route weiter
|
||||
pathMatch: 'full' // Wichtig: Gilt nur für den exakt leeren Pfad
|
||||
},
|
||||
|
||||
// Regel 2: Authentifizierungs-Feature
|
||||
// Alle URLs, die mit "auth/" beginnen (z.B. "/auth/login", "/auth/register"),
|
||||
// werden von dieser Regel abgefangen und an die auth.routes.ts zur
|
||||
// weiteren Verarbeitung übergeben.
|
||||
{
|
||||
path: 'auth',
|
||||
loadChildren: () => import('./features/auth/auth.routes').then(r => r.AUTH_ROUTES)
|
||||
},
|
||||
{
|
||||
path: 'demo',
|
||||
loadChildren: () => import('./features/demo/demo.routes').then(r => r.DEMO_ROUTES)
|
||||
},
|
||||
|
||||
// // REGEL 2: Für alle Authentifizierungs-Seiten, nutze das AuthLayout
|
||||
// {
|
||||
// path: 'auth',
|
||||
// component: AuthLayoutComponent, // <- Hänge den "Auth"-Rahmen an die Wand
|
||||
// children: [
|
||||
// // Annahme: auth.routes.ts definiert /login, /register etc.
|
||||
// { path: '', loadChildren: () => import('./features/auth/auth.routes').then(r => r.AUTH_ROUTES) }
|
||||
// ]
|
||||
// },
|
||||
|
||||
// REGEL 3: Die 404-Seite hat kein spezielles Layout
|
||||
{ path: '**', component: NotFoundComponent },
|
||||
];
|
||||
// Regel 3: Fallback-Route (Wildcard)
|
||||
// JEDE ANDERE URL, die nicht von den obigen Regeln abgefangen wurde,
|
||||
// wird als ungültig betrachtet und ebenfalls zum Auth-Feature (und von dort zum Login) umgeleitet.
|
||||
// Das stellt sicher, dass Benutzer immer auf einer validen Seite landen.
|
||||
{
|
||||
path: '**',
|
||||
redirectTo: 'auth'
|
||||
}
|
||||
];
|
||||
@@ -0,0 +1,17 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ReactiveFormsModule } from '@angular/forms';
|
||||
|
||||
import { AuthLayoutComponent } from './components/auth-layout/auth-layout.component';
|
||||
import { LoginComponent } from './components/login/login.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [],
|
||||
imports: [
|
||||
CommonModule,
|
||||
ReactiveFormsModule,
|
||||
AuthLayoutComponent,
|
||||
LoginComponent,
|
||||
],
|
||||
})
|
||||
export class AuthModule {}
|
||||
|
||||
22
src/app/features/auth/auth.routes.ts
Normal file
22
src/app/features/auth/auth.routes.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
import { Routes } from '@angular/router';
|
||||
|
||||
// Importiere dein spezielles Layout für Auth-Seiten und alle Komponenten
|
||||
import { AuthLayoutComponent } from './components/auth-layout/auth-layout.component';
|
||||
import { LoginComponent } from './components/login/login.component';
|
||||
import { RegisterComponent } from './components/register/register.component';
|
||||
import { ForgotPasswordComponent } from './components/forgot-password/forgot-password.component';
|
||||
import { ResetPasswordComponent } from './components/reset-password/reset-password.component';
|
||||
|
||||
export const AUTH_ROUTES: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: AuthLayoutComponent,
|
||||
children: [
|
||||
{ path: '', redirectTo: 'login', pathMatch: 'full' },
|
||||
{ path: 'login', component: LoginComponent, title: 'Anmelden' },
|
||||
{ path: 'register', component: RegisterComponent, title: 'Registrieren' },
|
||||
{ path: 'forgot-password', component: ForgotPasswordComponent, title: 'Passwort vergessen' },
|
||||
{ path: 'reset-password/:token', component: ResetPasswordComponent, title: 'Neues Passwort' }
|
||||
]
|
||||
}
|
||||
];
|
||||
@@ -0,0 +1 @@
|
||||
<p>auth-layout works!</p>
|
||||
@@ -0,0 +1,9 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-auth-layout',
|
||||
imports: [],
|
||||
templateUrl: './auth-layout.component.html',
|
||||
styleUrl: './auth-layout.component.css',
|
||||
})
|
||||
export class AuthLayoutComponent {}
|
||||
@@ -0,0 +1 @@
|
||||
<p>forgot-password works!</p>
|
||||
@@ -0,0 +1,11 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-forgot-password',
|
||||
imports: [],
|
||||
templateUrl: './forgot-password.component.html',
|
||||
styleUrl: './forgot-password.component.css'
|
||||
})
|
||||
export class ForgotPasswordComponent {
|
||||
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<p>login works!</p>
|
||||
11
src/app/features/auth/components/login/login.component.ts
Normal file
11
src/app/features/auth/components/login/login.component.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-login',
|
||||
imports: [],
|
||||
templateUrl: './login.component.html',
|
||||
styleUrl: './login.component.css'
|
||||
})
|
||||
export class LoginComponent {
|
||||
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<p>register works!</p>
|
||||
@@ -0,0 +1,11 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-register',
|
||||
imports: [],
|
||||
templateUrl: './register.component.html',
|
||||
styleUrl: './register.component.css'
|
||||
})
|
||||
export class RegisterComponent {
|
||||
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<p>reset-password works!</p>
|
||||
@@ -0,0 +1,11 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-reset-password',
|
||||
imports: [],
|
||||
templateUrl: './reset-password.component.html',
|
||||
styleUrl: './reset-password.component.css'
|
||||
})
|
||||
export class ResetPasswordComponent {
|
||||
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<p>verify-email works!</p>
|
||||
@@ -0,0 +1,11 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-verify-email',
|
||||
imports: [],
|
||||
templateUrl: './verify-email.component.html',
|
||||
styleUrl: './verify-email.component.css'
|
||||
})
|
||||
export class VerifyEmailComponent {
|
||||
|
||||
}
|
||||
676
src/app/features/demo/components/demo/demo.component.html
Normal file
676
src/app/features/demo/components/demo/demo.component.html
Normal 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">×</span></span
|
||||
><span class="chip"
|
||||
>Design<span class="chip-remove">×</span></span
|
||||
><span class="chip chip-active"
|
||||
>Angular<span class="chip-remove">×</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
32
src/app/features/demo/components/demo/demo.component.ts
Normal 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
9
src/app/features/demo/demo.module.ts
Normal 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
14
src/app/features/demo/demo.routes.ts
Normal 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' },
|
||||
]
|
||||
}
|
||||
];
|
||||
@@ -1,290 +0,0 @@
|
||||
/* ==========================================================================
|
||||
GLOBALE STILE & GRUNDEINSTELLUNGEN
|
||||
========================================================================== */
|
||||
:root {
|
||||
--primary-color: #3f51b5;
|
||||
--accent-color: #ef4444;
|
||||
--text-color: #333;
|
||||
--light-gray-border: #e5e7eb;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Roboto, "Helvetica Neue", sans-serif;
|
||||
color: var(--text-color);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
WIEDERVERWENDBARE LAYOUT- & KOMPONENTEN-STILE
|
||||
========================================================================== */
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 22px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
HEADER
|
||||
========================================================================== */
|
||||
.main-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.logo-image {
|
||||
width: 128px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.social-button {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
.social-button:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
HERO SECTION
|
||||
========================================================================== */
|
||||
.hero-section {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: black;
|
||||
padding: 100px 0;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
max-width: 576px;
|
||||
text-align: center;
|
||||
margin: 200px auto 0 auto;
|
||||
}
|
||||
|
||||
.hero-headline {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.hero-sub-headline {
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.hero-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
background-color: var(--accent-color);
|
||||
padding: 14px 28px;
|
||||
font-weight: 500;
|
||||
border-radius: 8px;
|
||||
transition: background-color 0.3s, opacity 0.3s;
|
||||
}
|
||||
.hero-button:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.hero-background-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
padding-top: 48px;
|
||||
}
|
||||
.hero-image {
|
||||
width: 384px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
ABOUT SECTION
|
||||
========================================================================== */
|
||||
.about-cards-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 30px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.about-card {
|
||||
flex: 1 1 270px;
|
||||
max-width: 300px;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.about-icon {
|
||||
font-size: 64px;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.about-card-title {
|
||||
font-size: 20px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
WORKSPACE SECTION
|
||||
========================================================================== */
|
||||
.workspace-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.workspace-card {
|
||||
border: 2px solid var(--light-gray-border);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 8px;
|
||||
padding: 80px 20px;
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
FOOTER
|
||||
========================================================================== */
|
||||
.main-footer {
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
.main-footer hr {
|
||||
border: none;
|
||||
border-top: 1px solid var(--light-gray-border);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.main-footer span {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
MEDIA QUERIES (RESPONSIVE ANPASSUNGEN)
|
||||
========================================================================== */
|
||||
|
||||
/* Ab 600px (Tablets im Hochformat und größer) */
|
||||
@media (min-width: 600px) {
|
||||
.workspace-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.hero-content {
|
||||
margin: 4px 0 0 auto;
|
||||
text-align: right;
|
||||
}
|
||||
.hero-headline {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ab 960px (Tablets im Querformat und Desktops) */
|
||||
@media (min-width: 960px) {
|
||||
.workspace-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* Bis 959px (Tablets und kleiner) */
|
||||
@media (max-width: 959px) {
|
||||
.section {
|
||||
padding: 60px 0;
|
||||
}
|
||||
.about-cards-container {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.about-card {
|
||||
max-width: 450px;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
.about-icon {
|
||||
font-size: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Bis 599px (Mobiltelefone) */
|
||||
@media (max-width: 599px) {
|
||||
.section {
|
||||
padding: 40px 0;
|
||||
}
|
||||
.section-title,
|
||||
.hero-headline {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.section-subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.hero-content {
|
||||
margin-top: 250px; /* Mehr Platz für Hintergrundbild */
|
||||
text-align: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.hero-background-image {
|
||||
justify-content: center;
|
||||
}
|
||||
.hero-image {
|
||||
width: 280px;
|
||||
}
|
||||
}
|
||||
@@ -1,148 +0,0 @@
|
||||
|
||||
|
||||
<body>
|
||||
<main class="page-wrapper">
|
||||
<!-- ======================= HEADER ======================= -->
|
||||
<header class="main-header">
|
||||
<div class="container header-content">
|
||||
<div class="header-logo">
|
||||
<img
|
||||
class="logo-image"
|
||||
src="https://i.ibb.co/tQqTvrz/unipod.png"
|
||||
alt="unipod logo"
|
||||
/>
|
||||
</div>
|
||||
<div class="header-social">
|
||||
<a href="https://twitter.com/sahilnetic" aria-label="Twitter">
|
||||
<button class="social-button">
|
||||
<svg
|
||||
fill="white"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- ======================= HERO SECTION ======================= -->
|
||||
<section id="hero" class="hero-section">
|
||||
<div class="hero-background-image">
|
||||
<img
|
||||
class="hero-image"
|
||||
src="https://i.ibb.co/5BCcDYB/Remote2.png"
|
||||
alt="Remote work illustration"
|
||||
/>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="hero-content">
|
||||
<h1 class="hero-headline">
|
||||
Download Now
|
||||
<span class="hero-sub-headline"> Lorem Ipsum </span>
|
||||
</h1>
|
||||
<a class="hero-button" href="https://twitter.com/sahilnetic">
|
||||
<svg
|
||||
fill="white"
|
||||
width="24"
|
||||
height="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M1.571 23.664l10.531-10.501 3.712 3.701-12.519 6.941c-.476.264-1.059.26-1.532-.011l-.192-.13zm9.469-11.56l-10.04 10.011v-20.022l10.04 10.011zm6.274-4.137l4.905 2.719c.482.268.781.77.781 1.314s-.299 1.046-.781 1.314l-5.039 2.793-4.015-4.003 4.149-4.137zm-15.854-7.534c.09-.087.191-.163.303-.227.473-.271 1.056-.275 1.532-.011l12.653 7.015-3.846 3.835-10.642-10.612z"
|
||||
/>
|
||||
</svg>
|
||||
<span>Download now</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ======================= ABOUT SECTION ======================= -->
|
||||
<section id="about" class="section mat-typography">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<h2 class="section-title">About</h2>
|
||||
<h3 class="section-subtitle">
|
||||
Lorem ipsum dolor sit amet conse ctetur adipi sicing elit.
|
||||
Doloribus numquam quis.
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="about-cards-container">
|
||||
<div class="about-card">
|
||||
<i class="material-icons about-icon">build</i>
|
||||
<h4 class="about-card-title">This is the expansion title</h4>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet conse ctetur adipi sicing elit.
|
||||
Doloribus numquam quis.
|
||||
</p>
|
||||
</div>
|
||||
<div class="about-card">
|
||||
<i class="material-icons about-icon">alarm</i>
|
||||
<h4 class="about-card-title">This is the expansion title</h4>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet conse ctetur adipi sicing elit.
|
||||
Doloribus numquam quis.
|
||||
</p>
|
||||
</div>
|
||||
<div class="about-card">
|
||||
<i class="material-icons about-icon">stars</i>
|
||||
<h4 class="about-card-title">This is the expansion title</h4>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet conse ctetur adipi sicing elit.
|
||||
Doloribus numquam quis.
|
||||
</p>
|
||||
</div>
|
||||
<div class="about-card">
|
||||
<i class="material-icons about-icon">settings</i>
|
||||
<h4 class="about-card-title">This is the expansion title</h4>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet conse ctetur adipi sicing elit.
|
||||
Doloribus numquam quis.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ======================= WORKSPACE SECTION ======================= -->
|
||||
<section id="workspace" class="section">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<h2 class="section-title">Lorem Ipsum Yojo</h2>
|
||||
</div>
|
||||
<div class="workspace-grid">
|
||||
<div class="workspace-card">Workspace 1</div>
|
||||
<div class="workspace-card">Workspace 2</div>
|
||||
<div class="workspace-card">Workspace 3</div>
|
||||
<div class="workspace-card">Workspace 4</div>
|
||||
<div class="workspace-card">Workspace 5</div>
|
||||
<div class="workspace-card">Workspace 6</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ======================= FOOTER ======================= -->
|
||||
<footer class="main-footer">
|
||||
<div class="container">
|
||||
<hr />
|
||||
<p>Crafted with ❤️ by <span>Sahil</span></p>
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
<!-- Externes Skript -->
|
||||
<script
|
||||
data-name="BMC-Widget"
|
||||
src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
|
||||
data-id="sahilnetic"
|
||||
></script>
|
||||
</body>
|
||||
@@ -1,14 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-landingpage',
|
||||
imports: [],
|
||||
templateUrl: './landingpage.component.html',
|
||||
styleUrl: './landingpage.component.css',
|
||||
schemas: [],
|
||||
})
|
||||
export class LandingpageComponent {
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user