init

src/app/app.config.ts

@@ -0,0 +1,20 @@
+import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './routes';
+
+import { fr_FR, provideNzI18n } from 'ng-zorro-antd/i18n';
+import { registerLocaleData } from '@angular/common';
+import fr from '@angular/common/locales/fr';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { provideHttpClient } from '@angular/common/http';
+
+registerLocaleData(fr);
+
+export const appConfig: ApplicationConfig = {
+    providers: [
+        provideBrowserGlobalErrorListeners(),
+        provideZoneChangeDetection({ eventCoalescing: true }),
+        provideRouter(routes), provideNzI18n(fr_FR), provideAnimationsAsync(), provideHttpClient()
+    ]
+};

src/app/app.css

@@ -0,0 +1,12 @@
+:host {
+  --content-padding: 10px;
+}
+header {
+  display: block;
+  height: 60px;
+  padding: var(--content-padding);
+  box-shadow: 0px 5px 25px var(--shadow-color);
+}
+.content {
+  padding: var(--content-padding);
+}

src/app/app.ts

@@ -0,0 +1,16 @@
+import {Component} from '@angular/core';
+import {RouterModule} from '@angular/router';
+
+@Component({
+  selector: 'app-root',
+    imports: [RouterModule],
+    template: `
+        <main>
+            <router-outlet></router-outlet>
+        </main>
+    `,
+  styleUrls: ['./app.css'],
+})
+export class App {
+  title = 'default';
+}

src/app/components/pages/dashboard/dashboard.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-dashboard',
+  imports: [],
+  template: `
+    <p>
+      dashboard works!
+    </p>
+  `,
+  styles: ``
+})
+export class Dashboard {
+
+}

src/app/components/pages/login/login.css

@@ -0,0 +1,71 @@
+.window {
+    width: 100%;
+    height: 100vh;
+    display: flex;
+
+}
+
+.window .left {
+
+    background: #f5dfbb;
+
+    padding: 1.5rem;
+    gap: 1.5rem;
+    display: flex;
+}
+.window .right {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    padding: 3rem 6rem;
+    background: #efefef;
+}
+
+.login-container {
+    display: block;
+    width: 100%;
+}
+
+.top-img {
+    width: 100%;
+    padding: 1rem;
+    border-radius: 30px;
+    background: #160f09;
+    display: flex;
+    box-sizing: border-box;
+    justify-content: center;
+}
+
+.top-img img {
+    width: 70%;
+    height: auto;
+
+}
+
+.window .left .left-side {
+    display: flex;
+}
+
+.window .left .right-side {
+    display: flex;
+    gap: 2rem;
+    flex-direction: column;
+}
+
+.window .left .right-side .img {
+    height: calc(50vh - 2.5rem);
+    aspect-ratio: 1 / 1;
+}
+
+.window .left .left-side .img {
+    width: 60vh;
+
+}
+
+.window .left img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 20px;
+
+}

src/app/components/pages/login/login.html

@@ -0,0 +1,24 @@
+<div class="window">
+    <div class="left">
+        <div class="left-side">
+            <div class="img">
+                <img src="assets/image/firework1.png" />
+            </div>
+        </div>
+        <div class="right-side">
+            <div class="img">
+             <img src="assets/image/firework2.png" />
+            </div>
+            <div class="img">
+                <img src="assets/image/firework3.png" />
+            </div>
+        </div>
+    </div>
+    <div class="right">
+        <div class="login-container">
+            <div class="top-img">
+                <img src="assets/image/pyrofetes-logo.png" />
+            </div>
+        </div>
+    </div>
+</div>

src/app/components/pages/login/login.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-login',
+  imports: [],
+  templateUrl: 'login.html',
+  styleUrls: ['login.css'],
+})
+export class Login {
+
+}

src/app/components/pages/test/test.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-test',
+  imports: [],
+  template: `
+    <p>
+      test works!
+    </p>
+  `,
+  styles: ``
+})
+export class Test {
+
+}

src/app/routes.ts

@@ -0,0 +1,23 @@
+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),
+        children: [
+            {
+                path: 'test',
+                loadComponent: () => import('./components/pages/test/test').then(x => x.Test)
+            }
+        ]
+    },
+    {
+        path: 'login',
+        loadComponent: () => import('./components/pages/login/login').then(x => x.Login),
+    },
+];