dashboard
This commit is contained in:
@@ -1,16 +1,17 @@
|
|||||||
import {Component} from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
import {RouterModule} from '@angular/router';
|
import { RouterOutlet } from '@angular/router';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-root',
|
selector: 'app-root',
|
||||||
imports: [RouterModule],
|
standalone: true,
|
||||||
|
imports: [RouterOutlet],
|
||||||
template: `
|
template: `
|
||||||
<main>
|
<main>
|
||||||
<router-outlet></router-outlet>
|
<router-outlet></router-outlet>
|
||||||
</main>
|
</main>
|
||||||
`,
|
`,
|
||||||
styleUrls: ['./app.css'],
|
styleUrls: ['./app.css'],
|
||||||
})
|
})
|
||||||
export class App {
|
export class App {
|
||||||
title = 'default';
|
title = 'default';
|
||||||
}
|
}
|
||||||
133
src/app/components/header/header.css
Normal file
133
src/app/components/header/header.css
Normal file
@@ -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%;
|
||||||
|
}
|
||||||
64
src/app/components/header/header.html
Normal file
64
src/app/components/header/header.html
Normal file
@@ -0,0 +1,64 @@
|
|||||||
|
<div class="window">
|
||||||
|
<div class="header">
|
||||||
|
<div class="logo">
|
||||||
|
<img src="assets/image/pyrofetes-logo.png" />
|
||||||
|
</div>
|
||||||
|
<div class="navbar">
|
||||||
|
|
||||||
|
@if (currentRoute() === '/dashboard') {
|
||||||
|
<button class="active">
|
||||||
|
<img src="assets/header/home.svg">
|
||||||
|
<p>Accueil</p>
|
||||||
|
</button>
|
||||||
|
} @else {
|
||||||
|
<button>
|
||||||
|
<img src="assets/header/home.svg">
|
||||||
|
</button>
|
||||||
|
}
|
||||||
|
|
||||||
|
@if (currentRoute() === '/design') {
|
||||||
|
<button class="active">
|
||||||
|
<img src="assets/header/design.svg">
|
||||||
|
<p>Designer</p>
|
||||||
|
</button>
|
||||||
|
} @else {
|
||||||
|
<button>
|
||||||
|
<img src="assets/header/design.svg">
|
||||||
|
|
||||||
|
</button>
|
||||||
|
}
|
||||||
|
|
||||||
|
@if (currentRoute() === '/calendar') {
|
||||||
|
<button class="active">
|
||||||
|
<img src="assets/header/calendar.svg">
|
||||||
|
<p>Calendrier</p>
|
||||||
|
</button>
|
||||||
|
} @else {
|
||||||
|
<button>
|
||||||
|
<img src="assets/header/calendar.svg">
|
||||||
|
</button>
|
||||||
|
}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="profile">
|
||||||
|
<div class="icon"></div>
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
Abel Chevallier
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
abel.chevallier49400@gmail.com
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="window-content">
|
||||||
|
<router-outlet></router-outlet>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
269
src/app/components/pages/dashboard/dashboard.css
Normal file
269
src/app/components/pages/dashboard/dashboard.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
163
src/app/components/pages/dashboard/dashboard.html
Normal file
163
src/app/components/pages/dashboard/dashboard.html
Normal file
@@ -0,0 +1,163 @@
|
|||||||
|
<div class="window">
|
||||||
|
<div class="top">
|
||||||
|
<h1>Dashboard</h1>
|
||||||
|
<div class="button-container">
|
||||||
|
<button class="orangeb"><p>Add Project</p></button>
|
||||||
|
<button class="whiteb"><p>Add Show</p></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="card-container">
|
||||||
|
<div class="special-card card">
|
||||||
|
<div class="top-card-content">
|
||||||
|
<div class="top-card-header">
|
||||||
|
<h2 class="special-title">Total Shows</h2>
|
||||||
|
<svg width="2.1em" height="2.1em" viewBox="0 -0.5 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="si-glyph si-glyph-arrow-thin-right-top">
|
||||||
|
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<path d="M16.908,0.021 L16.925,8.952 C16.925,9.6 16.314,9.981 16.03,9.979 C15.46,9.978 15.082,9.515 15.081,8.945 L15.071,3.388 L2.677,15.588 C2.314,15.949 1.721,15.942 1.349,15.57 C0.977,15.198 0.968,14.604 1.332,14.243 L13.478,1.931 L8.145,1.923 C7.575,1.921 7.083,1.547 7.083,0.979 C7.08,0.409 7.568,0.00300000002 8.14,0.00500000003 L16.908,0.021 L16.908,0.021 Z" fill="#efefef" class="si-glyph-fill">
|
||||||
|
|
||||||
|
</path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 class="special-description">21</h3>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="top-card-content">
|
||||||
|
<div class="top-card-header">
|
||||||
|
<h2>Ended Shows</h2>
|
||||||
|
<svg width="2.1em" height="2.1em" viewBox="0 -0.5 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="si-glyph si-glyph-arrow-thin-right-top">
|
||||||
|
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<path d="M16.908,0.021 L16.925,8.952 C16.925,9.6 16.314,9.981 16.03,9.979 C15.46,9.978 15.082,9.515 15.081,8.945 L15.071,3.388 L2.677,15.588 C2.314,15.949 1.721,15.942 1.349,15.57 C0.977,15.198 0.968,14.604 1.332,14.243 L13.478,1.931 L8.145,1.923 C7.575,1.921 7.083,1.547 7.083,0.979 C7.08,0.409 7.568,0.00300000002 8.14,0.00500000003 L16.908,0.021 L16.908,0.021 Z" fill="#b67332" class="si-glyph-fill">
|
||||||
|
|
||||||
|
</path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>7</h3>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="top-card-content">
|
||||||
|
<div class="top-card-header">
|
||||||
|
<h2>Running Shows</h2>
|
||||||
|
<svg width="2.1em" height="2.1em" viewBox="0 -0.5 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="si-glyph si-glyph-arrow-thin-right-top">
|
||||||
|
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<path d="M16.908,0.021 L16.925,8.952 C16.925,9.6 16.314,9.981 16.03,9.979 C15.46,9.978 15.082,9.515 15.081,8.945 L15.071,3.388 L2.677,15.588 C2.314,15.949 1.721,15.942 1.349,15.57 C0.977,15.198 0.968,14.604 1.332,14.243 L13.478,1.931 L8.145,1.923 C7.575,1.921 7.083,1.547 7.083,0.979 C7.08,0.409 7.568,0.00300000002 8.14,0.00500000003 L16.908,0.021 L16.908,0.021 Z" fill="#b67332" class="si-glyph-fill">
|
||||||
|
|
||||||
|
</path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>9</h3>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="top-card-content">
|
||||||
|
<div class="top-card-header">
|
||||||
|
<h2>Started Shows</h2>
|
||||||
|
<svg width="2.1em" height="2.1em" viewBox="0 -0.5 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="si-glyph si-glyph-arrow-thin-right-top">
|
||||||
|
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<path d="M16.908,0.021 L16.925,8.952 C16.925,9.6 16.314,9.981 16.03,9.979 C15.46,9.978 15.082,9.515 15.081,8.945 L15.071,3.388 L2.677,15.588 C2.314,15.949 1.721,15.942 1.349,15.57 C0.977,15.198 0.968,14.604 1.332,14.243 L13.478,1.931 L8.145,1.923 C7.575,1.921 7.083,1.547 7.083,0.979 C7.08,0.409 7.568,0.00300000002 8.14,0.00500000003 L16.908,0.021 L16.908,0.021 Z" fill="#b67332" class="si-glyph-fill">
|
||||||
|
|
||||||
|
</path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>5</h3>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="second-container">
|
||||||
|
<div class="left">
|
||||||
|
<div class="card">
|
||||||
|
<h2>Show Analystics</h2>
|
||||||
|
</div>
|
||||||
|
<div class="card2">
|
||||||
|
<h2>Show Progress</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="card" style="display: block">
|
||||||
|
|
||||||
|
<div class="team-top">
|
||||||
|
<h2>Team</h2>
|
||||||
|
|
||||||
|
<div class="team-button-container">
|
||||||
|
<div class="burger"><svg width="1.4em" height="1.4em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M4 6H20M7 12H17M9 18H15" stroke="#daab3a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg></div>
|
||||||
|
<div class="add">Add Member</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="team-list">
|
||||||
|
|
||||||
|
<div class="team-row">
|
||||||
|
<div class="avatar"></div>
|
||||||
|
<div class="info">
|
||||||
|
<p class="name">Durand Solal</p>
|
||||||
|
<p class="work">Workink on <span>[nom du spectacle]</span></p>
|
||||||
|
</div>
|
||||||
|
<button class="status">en service</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="team-row">
|
||||||
|
<div class="avatar"></div>
|
||||||
|
<div class="info">
|
||||||
|
<p class="name">Cernon Timothé</p>
|
||||||
|
<p class="work">Workink on <span>[nom du spectacle]</span></p>
|
||||||
|
</div>
|
||||||
|
<button class="status">en service</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="team-row">
|
||||||
|
<div class="avatar"></div>
|
||||||
|
<div class="info">
|
||||||
|
<p class="name">Chevalier Abel</p>
|
||||||
|
<p class="work">Workink on <span>[nom du spectacle]</span></p>
|
||||||
|
</div>
|
||||||
|
<button class="status">en service</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="team-row">
|
||||||
|
<div class="avatar"></div>
|
||||||
|
<div class="info">
|
||||||
|
<p class="name">Nom Prénom</p>
|
||||||
|
<p class="work">Workink on <span>[nom du spectacle]</span></p>
|
||||||
|
</div>
|
||||||
|
<button class="status">fou rien</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="team-row">
|
||||||
|
<div class="avatar"></div>
|
||||||
|
<div class="info">
|
||||||
|
<p class="name">Nom Prénom</p>
|
||||||
|
<p class="work">Workink on <span>[nom du spectacle]</span></p>
|
||||||
|
</div>
|
||||||
|
<button class="status">lui aussi</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@@ -1,15 +1,14 @@
|
|||||||
import { Component } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-dashboard',
|
selector: 'app-dashboard',
|
||||||
imports: [],
|
standalone: true,
|
||||||
template: `
|
imports: [],
|
||||||
<p>
|
templateUrl: 'dashboard.html',
|
||||||
dashboard works!
|
styleUrl: 'dashboard.css',
|
||||||
</p>
|
|
||||||
`,
|
|
||||||
styles: ``
|
|
||||||
})
|
})
|
||||||
export class Dashboard {
|
export class Dashboard {
|
||||||
|
constructor() {
|
||||||
|
console.log('Dashboard component loaded');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -1,23 +1,26 @@
|
|||||||
import {Routes} from '@angular/router';
|
import { Routes } from '@angular/router';
|
||||||
|
|
||||||
export const routes: Routes = [
|
export const routes: Routes = [
|
||||||
{
|
{
|
||||||
path: '',
|
path: '',
|
||||||
pathMatch: 'full',
|
loadComponent: () =>
|
||||||
redirectTo: '/dashboard'
|
import('./components/header/header').then(m => m.Header),
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'dashboard',
|
|
||||||
loadComponent: () => import('./components/pages/dashboard/dashboard').then(x => x.Dashboard),
|
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: 'test',
|
path: 'dashboard',
|
||||||
loadComponent: () => import('./components/pages/test/test').then(x => x.Test)
|
loadComponent: () =>
|
||||||
}
|
import('./components/pages/dashboard/dashboard').then(m => m.Dashboard),
|
||||||
]
|
},
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
redirectTo: 'dashboard',
|
||||||
|
pathMatch: 'full',
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'login',
|
path: 'login',
|
||||||
loadComponent: () => import('./components/pages/login/login').then(x => x.Login),
|
loadComponent: () =>
|
||||||
|
import('./components/pages/login/login').then(m => m.Login),
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
4
src/assets/header/calendar.svg
Normal file
4
src/assets/header/calendar.svg
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||||
|
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M3 9H21M7 3V5M17 3V5M7 13H17V17H7V13ZM6.2 21H17.8C18.9201 21 19.4802 21 19.908 20.782C20.2843 20.5903 20.5903 20.2843 20.782 19.908C21 19.4802 21 18.9201 21 17.8V8.2C21 7.07989 21 6.51984 20.782 6.09202C20.5903 5.71569 20.2843 5.40973 19.908 5.21799C19.4802 5 18.9201 5 17.8 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.07989 3 8.2V17.8C3 18.9201 3 19.4802 3.21799 19.908C3.40973 20.2843 3.71569 20.5903 4.09202 20.782C4.51984 21 5.07989 21 6.2 21Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 830 B |
4
src/assets/header/design.svg
Normal file
4
src/assets/header/design.svg
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||||
|
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 2C2.34315 2 1 3.34315 1 5V9V10V19C1 20.6569 2.34315 22 4 22H7C7.55228 22 8 21.5523 8 21C8 20.4477 7.55228 20 7 20H4C3.44772 20 3 19.5523 3 19V10V9C3 8.44772 3.44772 8 4 8H11.7808H13.5H20.1C20.5971 8 21 8.40294 21 8.9V9C21 9.55228 21.4477 10 22 10C22.5523 10 23 9.55228 23 9V8.9C23 7.29837 21.7016 6 20.1 6H13.5H11.7808L11.3489 4.27239C11.015 2.93689 9.81505 2 8.43845 2H4ZM4 6C3.64936 6 3.31278 6.06015 3 6.17071V5C3 4.44772 3.44772 4 4 4H8.43845C8.89732 4 9.2973 4.3123 9.40859 4.75746L9.71922 6H4ZM22.1213 11.7071C20.9497 10.5355 19.0503 10.5355 17.8787 11.7071L16.1989 13.3869L11.2929 18.2929C11.1647 18.4211 11.0738 18.5816 11.0299 18.7575L10.0299 22.7575C9.94466 23.0982 10.0445 23.4587 10.2929 23.7071C10.5413 23.9555 10.9018 24.0553 11.2425 23.9701L15.2425 22.9701C15.4184 22.9262 15.5789 22.8353 15.7071 22.7071L20.5556 17.8586L22.2929 16.1213C23.4645 14.9497 23.4645 13.0503 22.2929 11.8787L22.1213 11.7071ZM19.2929 13.1213C19.6834 12.7308 20.3166 12.7308 20.7071 13.1213L20.8787 13.2929C21.2692 13.6834 21.2692 14.3166 20.8787 14.7071L19.8622 15.7236L18.3068 14.1074L19.2929 13.1213ZM16.8923 15.5219L18.4477 17.1381L14.4888 21.097L12.3744 21.6256L12.903 19.5112L16.8923 15.5219Z" fill="#000000"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
5
src/assets/header/home.svg
Normal file
5
src/assets/header/home.svg
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||||
|
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M3 10.8074C3 9.9094 3.40231 9.0586 4.09639 8.48876L9.46186 4.08378C10.9372 2.87254 13.0628 2.87255 14.5381 4.08378L19.9036 8.48876C20.5977 9.0586 21 9.9094 21 10.8074V18C21 19.6569 19.6569 21 18 21H6C4.34315 21 3 19.6569 3 18V10.8074Z" stroke="#000000" stroke-width="2"/>
|
||||||
|
<path d="M15 21V17C15 15.3431 13.6569 14 12 14C10.3431 14 9 15.3431 9 17V21" stroke="#000000" stroke-width="2"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 624 B |
Reference in New Issue
Block a user