diff --git a/angular.json b/angular.json index f3c07b4..ba258da 100644 --- a/angular.json +++ b/angular.json @@ -97,5 +97,8 @@ } } } + }, + "cli": { + "analytics": false } } diff --git a/package-lock.json b/package-lock.json index d027914..a8591cb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "@angular/platform-browser": "^19.2.0", "@angular/platform-browser-dynamic": "^19.2.0", "@angular/router": "^19.2.0", + "@ionic/angular": "^8.8.3", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.15.0" @@ -3114,6 +3115,39 @@ } } }, + "node_modules/@ionic/angular": { + "version": "8.8.3", + "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-8.8.3.tgz", + "integrity": "sha512-/rQCaW0iyyTJuOIwo6Bp0hVvZxaSGrcxtA1rgl50VTK9nvGxMnp49/g/Oj8Dg9qqWW8+ONn74pyHw18+jzkVGw==", + "license": "MIT", + "dependencies": { + "@ionic/core": "8.8.3", + "ionicons": "^8.0.13", + "jsonc-parser": "^3.0.0", + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/core": ">=16.0.0", + "@angular/forms": ">=16.0.0", + "@angular/router": ">=16.0.0", + "rxjs": ">=7.5.0", + "zone.js": ">=0.13.0" + } + }, + "node_modules/@ionic/core": { + "version": "8.8.3", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.3.tgz", + "integrity": "sha512-qvl+bRgZRvAJ35eW2iW0Vlo11T/EQsPazMU6z45QxJvcLukGJ59MwubjDTx6dPKteful4/FBzVt9etCvcNp8Gg==", + "license": "MIT", + "dependencies": { + "@stencil/core": "4.43.0", + "ionicons": "^8.0.13", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">= 16" + } + }, "node_modules/@isaacs/cliui": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", @@ -5223,6 +5257,133 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@stencil/core": { + "version": "4.43.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.0.tgz", + "integrity": "sha512-6Uj2Z3lzLuufYAE7asZ6NLKgSwsB9uxl84Eh34PASnUjfj32GkrP4DtKK7fNeh1WFGGyffsTDka3gwtl+4reUg==", + "license": "MIT", + "bin": { + "stencil": "bin/stencil" + }, + "engines": { + "node": ">=16.0.0", + "npm": ">=7.10.0" + }, + "optionalDependencies": { + "@rollup/rollup-darwin-arm64": "4.34.9", + "@rollup/rollup-darwin-x64": "4.34.9", + "@rollup/rollup-linux-arm64-gnu": "4.34.9", + "@rollup/rollup-linux-arm64-musl": "4.34.9", + "@rollup/rollup-linux-x64-gnu": "4.34.9", + "@rollup/rollup-linux-x64-musl": "4.34.9", + "@rollup/rollup-win32-arm64-msvc": "4.34.9", + "@rollup/rollup-win32-x64-msvc": "4.34.9" + } + }, + "node_modules/@stencil/core/node_modules/@rollup/rollup-darwin-arm64": { + "version": "4.34.9", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.34.9.tgz", + "integrity": "sha512-0CY3/K54slrzLDjOA7TOjN1NuLKERBgk9nY5V34mhmuu673YNb+7ghaDUs6N0ujXR7fz5XaS5Aa6d2TNxZd0OQ==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@stencil/core/node_modules/@rollup/rollup-darwin-x64": { + "version": "4.34.9", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.9.tgz", + "integrity": "sha512-eOojSEAi/acnsJVYRxnMkPFqcxSMFfrw7r2iD9Q32SGkb/Q9FpUY1UlAu1DH9T7j++gZ0lHjnm4OyH2vCI7l7Q==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@stencil/core/node_modules/@rollup/rollup-linux-arm64-gnu": { + "version": "4.34.9", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.9.tgz", + "integrity": "sha512-6TZjPHjKZUQKmVKMUowF3ewHxctrRR09eYyvT5eFv8w/fXarEra83A2mHTVJLA5xU91aCNOUnM+DWFMSbQ0Nxw==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@stencil/core/node_modules/@rollup/rollup-linux-arm64-musl": { + "version": "4.34.9", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.9.tgz", + "integrity": "sha512-LD2fytxZJZ6xzOKnMbIpgzFOuIKlxVOpiMAXawsAZ2mHBPEYOnLRK5TTEsID6z4eM23DuO88X0Tq1mErHMVq0A==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@stencil/core/node_modules/@rollup/rollup-linux-x64-gnu": { + "version": "4.34.9", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.9.tgz", + "integrity": "sha512-FwBHNSOjUTQLP4MG7y6rR6qbGw4MFeQnIBrMe161QGaQoBQLqSUEKlHIiVgF3g/mb3lxlxzJOpIBhaP+C+KP2A==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@stencil/core/node_modules/@rollup/rollup-linux-x64-musl": { + "version": "4.34.9", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.9.tgz", + "integrity": "sha512-cYRpV4650z2I3/s6+5/LONkjIz8MBeqrk+vPXV10ORBnshpn8S32bPqQ2Utv39jCiDcO2eJTuSlPXpnvmaIgRA==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@stencil/core/node_modules/@rollup/rollup-win32-arm64-msvc": { + "version": "4.34.9", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.9.tgz", + "integrity": "sha512-z4mQK9dAN6byRA/vsSgQiPeuO63wdiDxZ9yg9iyX2QTzKuQM7T4xlBoeUP/J8uiFkqxkcWndWi+W7bXdPbt27Q==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@stencil/core/node_modules/@rollup/rollup-win32-x64-msvc": { + "version": "4.34.9", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.9.tgz", + "integrity": "sha512-AyleYRPU7+rgkMWbEh71fQlrzRfeP6SyMnRf9XX4fCdDPAJumdSBqYEcWPMzVQ4ScAl7E4oFfK0GUVn77xSwbw==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, "node_modules/@tufjs/canonical-json": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@tufjs/canonical-json/-/canonical-json-2.0.0.tgz", @@ -8545,6 +8706,15 @@ "node": "^18.17.0 || >=20.5.0" } }, + "node_modules/ionicons": { + "version": "8.0.13", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-8.0.13.tgz", + "integrity": "sha512-2QQVyG2P4wszne79jemMjWYLp0DBbDhr4/yFroPCxvPP1wtMxgdIV3l5n+XZ5E9mgoXU79w7yTWpm2XzJsISxQ==", + "license": "MIT", + "dependencies": { + "@stencil/core": "^4.35.3" + } + }, "node_modules/ip-address": { "version": "10.1.0", "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.1.0.tgz", @@ -8942,7 +9112,6 @@ "version": "3.3.1", "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.3.1.tgz", "integrity": "sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==", - "dev": true, "license": "MIT" }, "node_modules/jsonparse": { diff --git a/package.json b/package.json index 7c6d33b..a7a562e 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "@angular/platform-browser": "^19.2.0", "@angular/platform-browser-dynamic": "^19.2.0", "@angular/router": "^19.2.0", + "@ionic/angular": "^8.8.3", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.15.0" diff --git a/src/app/app.component.css b/src/app/app.component.css index e69de29..cd2cc68 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -0,0 +1,167 @@ +:host { + --bright-blue: oklch(51.01% 0.274 263.83); + --electric-violet: oklch(53.18% 0.28 296.97); + --french-violet: oklch(47.66% 0.246 305.88); + --vivid-pink: oklch(69.02% 0.277 332.77); + --hot-red: oklch(61.42% 0.238 15.34); + --orange-red: oklch(63.32% 0.24 31.68); + + --gray-900: oklch(19.37% 0.006 300.98); + --gray-700: oklch(36.98% 0.014 302.71); + --gray-400: oklch(70.9% 0.015 304.04); + + --red-to-pink-to-purple-vertical-gradient: linear-gradient( + 180deg, + var(--orange-red) 0%, + var(--vivid-pink) 50%, + var(--electric-violet) 100% + ); + + --red-to-pink-to-purple-horizontal-gradient: linear-gradient( + 90deg, + var(--orange-red) 0%, + var(--vivid-pink) 50%, + var(--electric-violet) 100% + ); + + --pill-accent: var(--bright-blue); + + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol"; + box-sizing: border-box; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +h1 { + font-size: 3.125rem; + color: var(--gray-900); + font-weight: 500; + line-height: 100%; + letter-spacing: -0.125rem; + margin: 0; + font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol"; +} + +p { + margin: 0; + color: var(--gray-700); +} + +main { + width: 100%; + min-height: 100%; + display: flex; + justify-content: center; + align-items: center; + padding: 1rem; + box-sizing: inherit; + position: relative; +} + +.angular-logo { + max-width: 9.2rem; +} + +.content { + display: flex; + justify-content: space-around; + width: 100%; + max-width: 700px; + margin-bottom: 3rem; +} + +.content h1 { + margin-top: 1.75rem; +} + +.content p { + margin-top: 1.5rem; +} + +.divider { + width: 1px; + background: var(--red-to-pink-to-purple-vertical-gradient); + margin-inline: 0.5rem; +} + +.pill-group { + display: flex; + flex-direction: column; + align-items: start; + flex-wrap: wrap; + gap: 1.25rem; +} + +.pill { + display: flex; + align-items: center; + --pill-accent: var(--bright-blue); + background: color-mix(in srgb, var(--pill-accent) 5%, transparent); + color: var(--pill-accent); + padding-inline: 0.75rem; + padding-block: 0.375rem; + border-radius: 2.75rem; + border: 0; + transition: background 0.3s ease; + font-family: var(--inter-font); + font-size: 0.875rem; + font-style: normal; + font-weight: 500; + line-height: 1.4rem; + letter-spacing: -0.00875rem; + text-decoration: none; +} + +.pill:hover { + background: color-mix(in srgb, var(--pill-accent) 15%, transparent); +} + +.pill-group .pill:nth-child(6n + 1) { + --pill-accent: var(--bright-blue); +} +.pill-group .pill:nth-child(6n + 2) { + --pill-accent: var(--french-violet); +} +.pill-group .pill:nth-child(6n + 3), +.pill-group .pill:nth-child(6n + 4), +.pill-group .pill:nth-child(6n + 5) { + --pill-accent: var(--hot-red); +} + +.pill-group svg { + margin-inline-start: 0.25rem; +} + +.social-links { + display: flex; + align-items: center; + gap: 0.73rem; + margin-top: 1.5rem; +} + +.social-links path { + transition: fill 0.3s ease; + fill: var(--gray-400); +} + +.social-links a:hover svg path { + fill: var(--gray-900); +} + +@media screen and (max-width: 650px) { + .content { + flex-direction: column; + width: max-content; + } + + .divider { + height: 1px; + width: 100%; + background: var(--red-to-pink-to-purple-horizontal-gradient); + margin-block: 1.5rem; + } +} \ No newline at end of file diff --git a/src/app/app.component.html b/src/app/app.component.html index 36093e1..7137f9e 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,336 +1,5 @@ - - - - - - - - - - -
-
-
- -

Hello, {{ title }}

-

Congratulations! Your app is running. 🎉

-
- -
-
- @for (item of [ - { title: 'Explore the Docs', link: 'https://angular.dev' }, - { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' }, - { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' }, - { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' }, - { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' }, - ]; track item.title) { - - {{ item.title }} - - - - - } -
- -
-
+
- - - - - - - - - - + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index e7b3673..7b4b58f 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,9 +1,11 @@ import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; +import {LoginFormComponent} from "./login-form/login-form.component"; + @Component({ selector: 'app-root', - imports: [RouterOutlet], + imports: [RouterOutlet, LoginFormComponent], templateUrl: './app.component.html', styleUrl: './app.component.css' }) diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index dc39edb..f3bdd9b 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -1,3 +1,15 @@ import { Routes } from '@angular/router'; -export const routes: Routes = []; +export const routes: Routes = [ + + { + path: '', + pathMatch: 'full', + redirectTo: 'discussions' + }, + + { + path: 'login', + loadComponent: () => import('./login-form/login-form.component').then(m => m.LoginFormComponent) + }, +]; diff --git a/src/app/login-form/login-form.component.css b/src/app/login-form/login-form.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/login-form/login-form.component.html b/src/app/login-form/login-form.component.html new file mode 100644 index 0000000..370adc0 --- /dev/null +++ b/src/app/login-form/login-form.component.html @@ -0,0 +1,17 @@ + + + Login

+ Connectez-vous à Knots !

+ + + + Login +
+ +
+ Mot de Passe +
+ + Action 1 + Action 2 + \ No newline at end of file diff --git a/src/app/login-form/login-form.component.ts b/src/app/login-form/login-form.component.ts new file mode 100644 index 0000000..a7d95d1 --- /dev/null +++ b/src/app/login-form/login-form.component.ts @@ -0,0 +1,17 @@ +import { Component } from '@angular/core'; +import { + IonButton, + IonCard, + IonCardContent, + IonCardHeader, + IonCardSubtitle, + IonCardTitle, +} from '@ionic/angular/standalone'; + +@Component({ + selector: 'login-form', + templateUrl: 'login-form.component.html', + styleUrls: ['login-form.component.css'], + imports: [IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle], +}) +export class LoginFormComponent {} \ No newline at end of file diff --git a/src/index.html b/src/index.html index eafb447..a015fdf 100644 --- a/src/index.html +++ b/src/index.html @@ -9,5 +9,6 @@ + diff --git a/src/main.ts b/src/main.ts index 35b00f3..851d20c 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,6 +1,9 @@ import { bootstrapApplication } from '@angular/platform-browser'; import { appConfig } from './app/app.config'; import { AppComponent } from './app/app.component'; +import { LoginFormComponent } from './app/login-form/login-form.component' bootstrapApplication(AppComponent, appConfig) .catch((err) => console.error(err)); + +