From 7785dd624dfb14f43100dcc5481f9af789a48b8e Mon Sep 17 00:00:00 2001
From: cofrizot <colin.frizot@etu.uca.fr>
Date: Fri, 22 Sep 2023 17:11:56 +0200
Subject: [PATCH] Add some css and the Documentation Component

---
 sandkasten/src/app/app-routing.module.ts      |  6 ++--
 sandkasten/src/app/app.component.css          |  2 ++
 sandkasten/src/app/app.module.ts              |  4 ++-
 .../documentation/documentation.component.css | 10 ++++++
 .../documentation.component.html              |  1 +
 .../documentation.component.spec.ts           | 21 +++++++++++++
 .../documentation/documentation.component.ts  | 10 ++++++
 .../src/app/header/header.component.css       | 31 ++++++++++++++-----
 .../src/app/header/header.component.html      |  6 ++++
 .../landing-page/landing-page.component.html  |  6 ++--
 10 files changed, 85 insertions(+), 12 deletions(-)
 create mode 100644 sandkasten/src/app/documentation/documentation.component.css
 create mode 100644 sandkasten/src/app/documentation/documentation.component.html
 create mode 100644 sandkasten/src/app/documentation/documentation.component.spec.ts
 create mode 100644 sandkasten/src/app/documentation/documentation.component.ts

diff --git a/sandkasten/src/app/app-routing.module.ts b/sandkasten/src/app/app-routing.module.ts
index 8f1ac42..41e2c27 100644
--- a/sandkasten/src/app/app-routing.module.ts
+++ b/sandkasten/src/app/app-routing.module.ts
@@ -3,12 +3,14 @@ import { RouterModule, Routes } from '@angular/router';
 import { EditorComponent } from './editor/editor.component';
 import { LandingPageComponent } from './landing-page/landing-page.component';
 import { OutputComponent } from './output/output.component';
+import {DocumentationComponent} from "./documentation/documentation.component";
 
-// Toutes les routes de l'application sont définies ici 
+// Toutes les routes de l'application sont définies ici
 const routes: Routes = [
   { path: '', component: LandingPageComponent },
   { path: 'editor', component: EditorComponent },
-  { path: 'output', component: OutputComponent }
+  { path: 'output', component: OutputComponent },
+  { path: 'documentation', component: DocumentationComponent}
 ];
 
 @NgModule({
diff --git a/sandkasten/src/app/app.component.css b/sandkasten/src/app/app.component.css
index ceb372e..52c2d90 100644
--- a/sandkasten/src/app/app.component.css
+++ b/sandkasten/src/app/app.component.css
@@ -4,4 +4,6 @@ body{
   justify-content: space-between;
   height: 100vh;
   margin: 0;
+
+  background-color: yellow;
 }
diff --git a/sandkasten/src/app/app.module.ts b/sandkasten/src/app/app.module.ts
index 27535a2..d4442f2 100644
--- a/sandkasten/src/app/app.module.ts
+++ b/sandkasten/src/app/app.module.ts
@@ -8,6 +8,7 @@ import { FooterComponent } from './footer/footer.component';
 import { EditorComponent } from './editor/editor.component';
 import { OutputComponent } from './output/output.component';
 import { LandingPageComponent } from './landing-page/landing-page.component';
+import { DocumentationComponent } from './documentation/documentation.component';
 
 @NgModule({
   declarations: [
@@ -16,7 +17,8 @@ import { LandingPageComponent } from './landing-page/landing-page.component';
     FooterComponent,
     EditorComponent,
     OutputComponent,
-    LandingPageComponent
+    LandingPageComponent,
+    DocumentationComponent
   ],
   imports: [
     BrowserModule,
diff --git a/sandkasten/src/app/documentation/documentation.component.css b/sandkasten/src/app/documentation/documentation.component.css
new file mode 100644
index 0000000..58d0514
--- /dev/null
+++ b/sandkasten/src/app/documentation/documentation.component.css
@@ -0,0 +1,10 @@
+
+.love-hugo {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  font-size: 3rem;
+  color: pink;
+  text-align: center;
+}
diff --git a/sandkasten/src/app/documentation/documentation.component.html b/sandkasten/src/app/documentation/documentation.component.html
new file mode 100644
index 0000000..aa2fb35
--- /dev/null
+++ b/sandkasten/src/app/documentation/documentation.component.html
@@ -0,0 +1 @@
+<span class="love-hugo">Ceci est la page Documentation réclamé par Hugo le 21 Septembre 2023. Elle contient une documentation inconnue à ce jour. Cepandant, elle est très importante pour le bon fonctionnement du site et la compréhension de toutes les fonctionnalités ajoutées par l'équipe Sandkasten</span>
diff --git a/sandkasten/src/app/documentation/documentation.component.spec.ts b/sandkasten/src/app/documentation/documentation.component.spec.ts
new file mode 100644
index 0000000..b283923
--- /dev/null
+++ b/sandkasten/src/app/documentation/documentation.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DocumentationComponent } from './documentation.component';
+
+describe('DocumentationComponent', () => {
+  let component: DocumentationComponent;
+  let fixture: ComponentFixture<DocumentationComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [DocumentationComponent]
+    });
+    fixture = TestBed.createComponent(DocumentationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/sandkasten/src/app/documentation/documentation.component.ts b/sandkasten/src/app/documentation/documentation.component.ts
new file mode 100644
index 0000000..36cd8a1
--- /dev/null
+++ b/sandkasten/src/app/documentation/documentation.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-documentation',
+  templateUrl: './documentation.component.html',
+  styleUrls: ['./documentation.component.css']
+})
+export class DocumentationComponent {
+
+}
diff --git a/sandkasten/src/app/header/header.component.css b/sandkasten/src/app/header/header.component.css
index 0dbfc93..3a0fd04 100644
--- a/sandkasten/src/app/header/header.component.css
+++ b/sandkasten/src/app/header/header.component.css
@@ -34,6 +34,16 @@
   text-decoration: none;
 }
 
+.left_part .menu a:hover {
+  color: yellow;
+  text-decoration: underline;
+}
+
+.left_part .menu a.active {
+  color: yellow;
+  text-decoration: underline;
+}
+
 .sandkasten-logo {
   width: 4rem;
   height: auto;
@@ -46,13 +56,6 @@
   color: white;
 }
 
-.menu {
-  display: flex;
-  flex-direction: row;
-  gap: 2rem;
-  color: white;
-}
-
 .right_part {
   display: flex;
   flex-direction: row;
@@ -67,4 +70,18 @@
   aspect-ratio: 1;
 }
 
+@media (max-width: 1024px) {
+  .toolbar {
+    gap: 2rem;
+  }
+
+  .toolbar .left_part {
+    gap: 2rem;
+  }
+
+  .toolbar .left_part .logo_container .logo_title {
+    display: none;
+  }
+}
+
 
diff --git a/sandkasten/src/app/header/header.component.html b/sandkasten/src/app/header/header.component.html
index 8c3bfb8..9da21fa 100644
--- a/sandkasten/src/app/header/header.component.html
+++ b/sandkasten/src/app/header/header.component.html
@@ -23,6 +23,12 @@
         routerLinkActive="active"
         [routerLinkActiveOptions]="{ exact: true }"
       >Editeur</a>
+
+      <a
+        routerLink="documentation"
+        routerLinkActive="active"
+        [routerLinkActiveOptions]="{ exact: true }"
+      >Documentation</a>
     </nav>
   </div>
 
diff --git a/sandkasten/src/app/landing-page/landing-page.component.html b/sandkasten/src/app/landing-page/landing-page.component.html
index a32a71b..644e22e 100644
--- a/sandkasten/src/app/landing-page/landing-page.component.html
+++ b/sandkasten/src/app/landing-page/landing-page.component.html
@@ -1,7 +1,9 @@
 <div class="landing-block">
+  <div class="hero-container">
+    <h2 class="hero-title">Bienvenue sur Sandkasten !</h2>
+    <span class="hero-text">Sandkasten est un site vous permettant de tester votre code.</span>
+  </div>
 
-  <a>Bienvenue sur Sandkasten !</a>
-  <a>Sandkasten est un site vous permettant de tester votre code.</a>
   <div class="landing-links">
     <button (click)="onContinue()">Try it now !</button>
   </div>