From c232f2a867a82f4fcfe4a83108ae3a0e60c984b1 Mon Sep 17 00:00:00 2001 From: chevalliea Date: Thu, 11 Dec 2025 17:35:10 +0100 Subject: [PATCH] dashboard --- src/app/app.ts | 23 +- src/app/components/header/header.css | 133 +++++++++ src/app/components/header/header.html | 64 +++++ .../components/pages/dashboard/dashboard.css | 269 ++++++++++++++++++ .../components/pages/dashboard/dashboard.html | 163 +++++++++++ .../components/pages/dashboard/dashboard.ts | 19 +- src/app/routes.ts | 29 +- src/assets/header/calendar.svg | 4 + src/assets/header/design.svg | 4 + src/assets/header/home.svg | 5 + 10 files changed, 679 insertions(+), 34 deletions(-) create mode 100644 src/app/components/header/header.css create mode 100644 src/app/components/header/header.html create mode 100644 src/app/components/pages/dashboard/dashboard.css create mode 100644 src/app/components/pages/dashboard/dashboard.html create mode 100644 src/assets/header/calendar.svg create mode 100644 src/assets/header/design.svg create mode 100644 src/assets/header/home.svg diff --git a/src/app/app.ts b/src/app/app.ts index 5409a370..edbdf408 100644 --- a/src/app/app.ts +++ b/src/app/app.ts @@ -1,16 +1,17 @@ -import {Component} from '@angular/core'; -import {RouterModule} from '@angular/router'; +import { Component } from '@angular/core'; +import { RouterOutlet } from '@angular/router'; @Component({ - selector: 'app-root', - imports: [RouterModule], + selector: 'app-root', + standalone: true, + imports: [RouterOutlet], template: ` -
- -
- `, - styleUrls: ['./app.css'], +
+ +
+ `, + styleUrls: ['./app.css'], }) export class App { - title = 'default'; -} + title = 'default'; +} \ No newline at end of file diff --git a/src/app/components/header/header.css b/src/app/components/header/header.css new file mode 100644 index 00000000..cb315ce8 --- /dev/null +++ b/src/app/components/header/header.css @@ -0,0 +1,133 @@ +.window { + padding: 30px 50px; + box-sizing: border-box; + background: #efefef; + width: 100%; + height: 100vh; + max-height: 100vh !important; + + color: #282828; +} + +.header { + width: 100%; + display: grid; + grid-template-columns: 1fr auto 1fr; + align-items: center; + gap: 20px; + margin-bottom: 3vh; +} + + + +.logo { + background: #fff; + border-radius: 10px; + display: flex; + align-items: center; + justify-self: start; /* Aligne à gauche */ +} + +.logo img { + height: 7vh; +} + +.navbar { + display: flex; + gap: 10px; + justify-self: center; /* Centre parfaitement */ +} + +.navbar button { + background: #fff; + border: none; + display: flex; + justify-content: center; + align-items: center; + height: 5vh; + width: 5vh; + border-radius: 50px; + transition: 0.3s ease; /* Animation fluide */ + cursor: pointer; +} + + +.navbar .active { + background: #8b6d7d; + color: #efefef; + width: auto; + padding: 10px 20px; + gap: 10px; + display: flex; + align-items: center; +} + +.navbar .active:hover { + background: #80596e; +} + +.navbar .active img { + filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg); +} + +.navbar .active:hover img { + transform: none; +} + +.navbar p { + font-size: 1.25em; +} + +.navbar button:hover img { + transform: scale(0.85); /* Dézoom à 85% */ +} + +.navbar button:hover { + background: #fbfbfb; +} + +.navbar button img { + height: 2.3vh; + transition: transform 0.2s ease; /* Animation fluide */ + filter: brightness(0) saturate(100%) invert(30%) sepia(0%) saturate(0%) hue-rotate(0deg); +} + + + +.profile { + background: #fff; + display: flex; + border-radius: 50px; + padding: 5px; + gap: 20px; + width: 30vh; + justify-self: end; /* Aligne à droite */ +} + +.profile .icon { + background: grey; + width: 5vh; + height: 5vh; + border-radius: 50px; +} + +.profile .content { + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.profile .content p { + font-size: 0.9em; + + + overflow: hidden; /* Cache ce qui dépasse */ + text-overflow: ellipsis; /* Affiche les "..." */ + + max-width: 20vh; /* Optionnel : définir une largeur max */ +} + +.window-content { + width: 100%; + height: 90%; +} \ No newline at end of file diff --git a/src/app/components/header/header.html b/src/app/components/header/header.html new file mode 100644 index 00000000..91e7d9af --- /dev/null +++ b/src/app/components/header/header.html @@ -0,0 +1,64 @@ +
+
+ +
+ + @if (currentRoute() === '/dashboard') { + + } @else { + + } + + @if (currentRoute() === '/design') { + + } @else { + + } + + @if (currentRoute() === '/calendar') { + + } @else { + + } + +
+
+
+
+

+ Abel Chevallier +

+

+ abel.chevallier49400@gmail.com +

+
+
+ +
+ +
+ +
+ + + + +
\ No newline at end of file diff --git a/src/app/components/pages/dashboard/dashboard.css b/src/app/components/pages/dashboard/dashboard.css new file mode 100644 index 00000000..667d91ef --- /dev/null +++ b/src/app/components/pages/dashboard/dashboard.css @@ -0,0 +1,269 @@ +.window { + width: 100%; + height: 100%; +} +* { + box-sizing: border-box; +} +h2 { + font-size: 1.5em; + font-weight: 400; + color: #daab3a; +} +.top { + width: 100%; + justify-content: space-between; + display: flex; +} +.top h1 { + color: #c1952e; + font-weight: 400; +} +.top .button-container { + display: flex; + gap: 1rem; +} +.top button { + padding: 10px 30px; + border-radius: 50px; +} +button:focus { + outline: none; +} +.orangeb { + background: linear-gradient( + 180deg, + #daab39 0%, + rgba(218, 171, 57, 0.76) 50%, + rgba(218, 171, 57, 0.52) 100% + ); + border: none; + color: white; +} +.orangeb p { + font-weight: 500; + font-size: 1.1rem; +} +.whiteb { + background: transparent; + border: 2px solid #daab39; +} +.whiteb p { + color: #bf9631; + font-weight: 500; + font-size: 1.1rem; +} +.card-container { + margin-top: 30px; + box-sizing: border-box; + display: flex; + gap: 0.75rem; + height: 20%; +} +.card { + display: flex; + padding: 20px 30px; + width: 100%; + height: 100%; + box-sizing: border-box; + background: white; + border-radius: 20px; +} +.second-container { + margin-top: 0.75rem; + display: flex; + gap: 0.75rem; + box-sizing: border-box; + height: 68%; +} +.left { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + gap: 0.75rem; +} +.left .card { + border-radius: 20px; + background: white; + width: 100%; + height: 100%; +} +.card2 { + display: flex; + padding: 10px 20px; + box-sizing: border-box; + border-radius: 20px; + background: white; + width: 100%; + height: 70%; +} +.right { + display: flex; + + width: 100%; + height: 100%; +} + +button { + cursor: pointer; + +} + + +.top-card-content { + display: flex; + flex-direction: column; + width: 100%; + justify-content: space-between; +} + +h3 { + color: #b67332; + font-size: 3.2em; + +} + +.top-card-header { + display: flex; + justify-content: space-between; + width: 100%; +} + +.special-title { + color: #efefef; +} + +.special-description { + color: white; +} + +.special-card { + background: linear-gradient( + 180deg, + #b67332 20%, + + #daab3a 100% + ); +} + +.team-top { + display: flex; + justify-content: space-between; + + width: 100%; +} + + +.team-button-container { + display: flex; + align-items: start; + + + gap: 1rem; +} + +.add { + display: flex; + padding: 10px 30px; + background: transparent; + border: 2px solid #daab39; + + + color: #bf9631; + font-weight: 500; + font-size: 1.1rem; + border-radius: 50px; + cursor: pointer; + +} + + +.burger { + cursor: pointer; + border-radius: 50px; + display: flex; + padding: 10px; + background: transparent; + border: 2px solid #daab39; + + + color: #bf9631; + font-weight: 500; + font-size: 1.1rem; + +} + + +.team-list { + margin-top: 20px; + display: flex; + flex-direction: column; + gap: 0.2rem; + width: 100%; + + background: white; + border-radius: 12px; +} + +.team-row { + + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px 0; + transition: 0.3s ease; + cursor: pointer; +} + +.team-row:hover { + background: rgba(239, 239, 239, 0.53); + padding: 12px 10px 12px 20px; + border-radius: 15px; +} + +.avatar { + width: 40px; + height: 40px; + border-radius: 50%; + border: 2px solid #daab39; + margin-right: 15px; +} + +.info { + flex: 1; + display: flex; + flex-direction: column; +} + +.name { + font-size: 1rem; + font-weight: 600; + color: #7b550a; + margin: 0; +} + +.work { + font-size: 0.9rem; + color: #bf9631; + margin: 2px 0 0 0; +} + +.work span { + color: #a37019; +} + +.status { + padding: 6px 20px; + background: rgba(120, 88, 105, 0.09); + border: 2px solid #8b6d7d; + border-radius: 13px; + font-size: 0.9rem; + color: #785869; + cursor: pointer; + transition: 0.2s; +} + +.status:hover { + background: #f7ede1; +} diff --git a/src/app/components/pages/dashboard/dashboard.html b/src/app/components/pages/dashboard/dashboard.html new file mode 100644 index 00000000..06a403e2 --- /dev/null +++ b/src/app/components/pages/dashboard/dashboard.html @@ -0,0 +1,163 @@ +
+
+

Dashboard

+
+ + +
+ +
+
+
+
+
+

Total Shows

+ + + + + + + +
+ +

21

+ +
+
+
+
+
+

Ended Shows

+ + + + + + + +
+ +

7

+ +
+
+
+
+
+

Running Shows

+ + + + + + + +
+ +

9

+ +
+
+
+
+
+

Started Shows

+ + + + + + + +
+ +

5

+ +
+
+
+
+
+
+

Show Analystics

+
+
+

Show Progress

+
+
+
+
+ +
+

Team

+ +
+
+ +
+
Add Member
+
+
+ + +
+ +
+
+
+

Durand Solal

+

Workink on [nom du spectacle]

+
+ +
+ +
+
+
+

Cernon Timothé

+

Workink on [nom du spectacle]

+
+ +
+ +
+
+
+

Chevalier Abel

+

Workink on [nom du spectacle]

+
+ +
+ +
+
+
+

Nom Prénom

+

Workink on [nom du spectacle]

+
+ +
+ +
+
+
+

Nom Prénom

+

Workink on [nom du spectacle]

+
+ +
+ +
+ +
+ + + + + + + +
+
+
\ No newline at end of file diff --git a/src/app/components/pages/dashboard/dashboard.ts b/src/app/components/pages/dashboard/dashboard.ts index 891486d6..b350e456 100644 --- a/src/app/components/pages/dashboard/dashboard.ts +++ b/src/app/components/pages/dashboard/dashboard.ts @@ -1,15 +1,14 @@ import { Component } from '@angular/core'; @Component({ - selector: 'app-dashboard', - imports: [], - template: ` -

- dashboard works! -

- `, - styles: `` + selector: 'app-dashboard', + standalone: true, + imports: [], + templateUrl: 'dashboard.html', + styleUrl: 'dashboard.css', }) export class Dashboard { - -} + constructor() { + console.log('Dashboard component loaded'); + } +} \ No newline at end of file diff --git a/src/app/routes.ts b/src/app/routes.ts index 44a9067b..6c18d9f3 100644 --- a/src/app/routes.ts +++ b/src/app/routes.ts @@ -1,23 +1,26 @@ -import {Routes} from '@angular/router'; +import { Routes } from '@angular/router'; export const routes: Routes = [ { path: '', - pathMatch: 'full', - redirectTo: '/dashboard' - }, - { - path: 'dashboard', - loadComponent: () => import('./components/pages/dashboard/dashboard').then(x => x.Dashboard), + loadComponent: () => + import('./components/header/header').then(m => m.Header), children: [ { - path: 'test', - loadComponent: () => import('./components/pages/test/test').then(x => x.Test) - } - ] + path: 'dashboard', + loadComponent: () => + import('./components/pages/dashboard/dashboard').then(m => m.Dashboard), + }, + { + path: '', + redirectTo: 'dashboard', + pathMatch: 'full', + }, + ], }, { path: 'login', - loadComponent: () => import('./components/pages/login/login').then(x => x.Login), + loadComponent: () => + import('./components/pages/login/login').then(m => m.Login), }, -]; +]; \ No newline at end of file diff --git a/src/assets/header/calendar.svg b/src/assets/header/calendar.svg new file mode 100644 index 00000000..42443870 --- /dev/null +++ b/src/assets/header/calendar.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/header/design.svg b/src/assets/header/design.svg new file mode 100644 index 00000000..fe1c004d --- /dev/null +++ b/src/assets/header/design.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/header/home.svg b/src/assets/header/home.svg new file mode 100644 index 00000000..c759461c --- /dev/null +++ b/src/assets/header/home.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file