-
-
-
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.scss b/src/app/app.component.scss
index e69de29..e0fa767 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -0,0 +1,26 @@
+.app-container {
+ min-height: 100vh;
+ background: #f5f5f5;
+}
+
+.app-header {
+ background: white;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+ padding: 16px 24px;
+
+ h1 {
+ margin: 0;
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ color: #333;
+
+ mat-icon {
+ color: #667eea;
+ }
+ }
+}
+
+.app-main {
+ padding: 24px 0;
+}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index b90c79d..9095c9a 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,12 +1,44 @@
+// src/app/app.component.ts
import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { TitleSheetsFormComponent } from './view/components/title-sheets-form/title-sheets-form.component';
+import { TitleSheet, createEmptyTitleSheet } from './models/title-sheet.model';
+import { Router, RouterModule, RouterOutlet } from '@angular/router';
@Component({
selector: 'app-root',
- imports: [RouterOutlet],
+ standalone: true,
+ imports: [
+ CommonModule,
+ RouterOutlet,
+ TitleSheetsFormComponent // ← Import direct du composant
+ ],
templateUrl: './app.component.html',
- styleUrl: './app.component.scss'
+ styleUrls: ['./app.component.scss']
})
export class AppComponent {
- title = 'DTFluxTitrage-Client';
+ title = 'test-title-sheets';
+ testTitleSheet: TitleSheet;
+ debugInfo: any = {};
+
+ constructor() {
+ // Créer un titleSheet de test
+ this.testTitleSheet = createEmptyTitleSheet();
+ this.debugInfo.testTitleSheet = this.testTitleSheet;
+ }
+
+ onTitleSheetSaved(titleSheet: TitleSheet): void {
+ console.log('Title Sheet saved:', titleSheet);
+ this.debugInfo.lastSaved = titleSheet;
+ this.debugInfo.savedAt = new Date();
+
+ // Créer un nouveau titleSheet pour la suite
+ this.testTitleSheet = createEmptyTitleSheet();
+ }
+
+ onFormReset(): void {
+ console.log('Form reset');
+ this.debugInfo.lastAction = 'Form reset';
+ this.debugInfo.resetAt = new Date();
+ }
}
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index a1e7d6f..f4bcab2 100644
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -1,8 +1,9 @@
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
export const appConfig: ApplicationConfig = {
- providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
+ providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideAnimationsAsync()]
};
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index dc39edb..302556c 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,3 +1,19 @@
import { Routes } from '@angular/router';
+import { DTFluxTitleComponent } from './view/pages/dtflux-title/dtflux-title.component';
-export const routes: Routes = [];
+export const routes: Routes = [
+ {
+ path: '',
+ redirectTo: '/dtflux-title',
+ pathMatch: 'full'
+ },
+{
+ path: 'dtflux-title',
+ component: DTFluxTitleComponent,
+ title: 'Unreal Title Sheets - Main'
+ },
+ {
+ path: '**',
+ redirectTo: '/dtflux-title'
+ }
+];
diff --git a/src/index.html b/src/index.html
index 930d1de..2d4ebb4 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,13 +1,19 @@
-
-
DTFluxTitrageClient
+
UnrealTitleSheets
+
+
+
+
+
+
+
-
+
diff --git a/src/styles.scss b/src/styles.scss
index 90d4ee0..2ebabb5 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1 +1,96 @@
-/* You can add global styles to this file, and also import other style files */
+/* src/styles.scss - Variables globales Dark Theme */
+
+// === DARK THEME PALETTE ===
+:root {
+ // Background colors
+ --bg-primary: #1e1e1e; // VS Code background
+ --bg-secondary: #2d2d30; // Panel background
+ --bg-tertiary: #3c3c3c; // Elevated elements
+ --bg-hover: #464647; // Hover states
+ --bg-active: #094771; // Active/selected (VS Code blue)
+
+ // Border colors
+ --border-primary: #3c3c3c; // Main borders
+ --border-secondary: #464647; // Secondary borders
+ --border-active: #007acc; // Active borders (VS Code blue)
+
+ // Text colors
+ --text-primary: #cccccc; // Main text
+ --text-secondary: #9d9d9d; // Secondary text
+ --text-muted: #6a6a6a; // Muted text
+ --text-accent: #4fc3f7; // Accent text (light blue)
+
+ // Action colors
+ --color-success: #4caf50; // Play button
+ --color-warning: #ff9800; // Stop button
+ --color-danger: #f44336; // Delete button
+ --color-info: #2196f3; // Edit button
+ --color-primary: #007acc; // Primary actions
+
+ // Shadow
+ --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.3);
+ --shadow-medium: 0 2px 8px rgba(0, 0, 0, 0.4);
+ --shadow-heavy: 0 4px 16px rgba(0, 0, 0, 0.5);
+
+ // Border radius
+ --radius-small: 4px;
+ --radius-medium: 6px;
+ --radius-large: 8px;
+
+ // Spacing
+ --spacing-xs: 4px;
+ --spacing-sm: 8px;
+ --spacing-md: 12px;
+ --spacing-lg: 16px;
+ --spacing-xl: 20px;
+ --spacing-xxl: 24px;
+}
+
+// === GLOBAL STYLES ===
+* {
+ box-sizing: border-box;
+}
+
+html, body {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ background: var(--bg-primary);
+ color: var(--text-primary);
+ font-family: 'Segoe UI', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
+ font-size: 14px;
+ line-height: 1.4;
+}
+
+// === SCROLLBAR STYLING ===
+::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+}
+
+::-webkit-scrollbar-track {
+ background: var(--bg-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+ background: var(--border-secondary);
+ border-radius: var(--radius-small);
+
+ &:hover {
+ background: var(--text-muted);
+ }
+}
+
+// === UTILITY CLASSES ===
+.text-primary { color: var(--text-primary); }
+.text-secondary { color: var(--text-secondary); }
+.text-muted { color: var(--text-muted); }
+.text-accent { color: var(--text-accent); }
+
+.bg-primary { background: var(--bg-primary); }
+.bg-secondary { background: var(--bg-secondary); }
+.bg-tertiary { background: var(--bg-tertiary); }
+
+.border-radius { border-radius: var(--radius-medium); }
+.shadow-light { box-shadow: var(--shadow-light); }
+.shadow-medium { box-shadow: var(--shadow-medium); }