add footer, component, logo

angular/angular.json

@@ -39,7 +39,8 @@
             ],
             "styles": [
               "src/styles.css",
-              "node_modules/bootstrap/dist/css/bootstrap.min.css"
+              "node_modules/bootstrap/dist/css/bootstrap.min.css",
+              "https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css"
             ],
             "scripts": [
               "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"

angular/package-lock.json

@@ -16,6 +16,7 @@
         "@angular/platform-browser-dynamic": "^19.2.0",
         "@angular/router": "^19.2.0",
         "bootstrap": "^5.3.3",
+        "bootstrap-icons": "^1.11.3",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.15.0"
@@ -5892,6 +5893,22 @@
         "@popperjs/core": "^2.11.8"
       }
     },
+    "node_modules/bootstrap-icons": {
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.11.3.tgz",
+      "integrity": "sha512-+3lpHrCw/it2/7lBL15VR0HEumaBss0+f/Lb6ZvHISn1mlK83jjFpooTLsMWbIjJMDjDjOExMsTxnXSIT4k4ww==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

angular/package.json

@@ -18,6 +18,7 @@
     "@angular/platform-browser-dynamic": "^19.2.0",
     "@angular/router": "^19.2.0",
     "bootstrap": "^5.3.3",
+    "bootstrap-icons": "^1.11.3",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"

angular/src/app/app-routing.module.ts

@@ -1,14 +1,20 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { HomeComponent } from './home/home.component';
+import { ContactComponent } from './contact/contact.component';
+import { SymptomeComponent } from './symptome/symptome.component';
+import { BlogComponent } from './blog/blog.component';
 
 const routes: Routes = [
   { path: '', component: HomeComponent },
   { path: 'home', component: HomeComponent },
+  { path: 'contacts', component: ContactComponent },
+  { path: 'symptômes', component: SymptomeComponent },
+  { path: 'blog', component: BlogComponent },
 ];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
 })
-export class AppRoutingModule { }
+export class AppRoutingModule { }

angular/src/app/app.component.html

@@ -1,4 +1,5 @@
 <app-nav-bar></app-nav-bar>
 <div class="container mt-4">
     <router-outlet></router-outlet>
-</div>
+</div>
+<app-footer></app-footer>

angular/src/app/app.module.ts

@@ -6,13 +6,21 @@ import { AppComponent } from './app.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NavBarComponent } from './nav-bar/nav-bar.component';
 import { HomeComponent } from './home/home.component';
+import { FooterComponent } from './footer/footer.component';
+import { SymptomeComponent } from './symptome/symptome.component';
+import { ContactComponent } from './contact/contact.component';
+import { BlogComponent } from './blog/blog.component';
 
 
 @NgModule({
   declarations: [
     AppComponent,
     NavBarComponent,
-    HomeComponent
+    HomeComponent,
+    FooterComponent,
+    SymptomeComponent,
+    ContactComponent,
+    BlogComponent
   ],
   imports: [
     BrowserModule,

angular/src/app/blog/blog.component.html

@@ -0,0 +1 @@
+<p>blog works!</p>

angular/src/app/blog/blog.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BlogComponent } from './blog.component';
+
+describe('BlogComponent', () => {
+  let component: BlogComponent;
+  let fixture: ComponentFixture<BlogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [BlogComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(BlogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

angular/src/app/blog/blog.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-blog',
+  standalone: false,
+  templateUrl: './blog.component.html',
+  styleUrl: './blog.component.css'
+})
+export class BlogComponent {
+
+}

angular/src/app/contact/contact.component.html

@@ -0,0 +1 @@
+<p>contact works!</p>

angular/src/app/contact/contact.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactComponent } from './contact.component';
+
+describe('ContactComponent', () => {
+  let component: ContactComponent;
+  let fixture: ComponentFixture<ContactComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ContactComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ContactComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

angular/src/app/contact/contact.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-contact',
+  standalone: false,
+  templateUrl: './contact.component.html',
+  styleUrl: './contact.component.css'
+})
+export class ContactComponent {
+
+}

angular/src/app/footer/footer.component.html

@@ -0,0 +1,26 @@
+<footer class="bg-primary text-white py-3">
+    <div class="container">
+        <div class="row align-items-center">
+            <div class="col-md-4 d-flex align-items-center text-start">
+                <img src="/assets/logo.png" alt="Angular Covid" height="50" class="me-2">
+                <span class="fs-4 fw-bold">Angular Covid</span>
+            </div>
+            <div class="col-md-4 offset-md-4 d-flex justify-content-end align-items-center">
+                <span class="me-3">Suivez-nous</span>
+                <a href="#" class="text-white me-2 d-flex align-items-center justify-content-center rounded-circle bg-light p-2" style="width: 40px; height: 40px;"><i class="bi bi-rss text-dark"></i></a>
+                <a href="#" class="text-white me-2 d-flex align-items-center justify-content-center rounded-circle bg-light p-2" style="width: 40px; height: 40px;"><i class="bi bi-twitter-x text-dark"></i></a>
+                <a href="#" class="text-white me-2 d-flex align-items-center justify-content-center rounded-circle bg-light p-2" style="width: 40px; height: 40px;"><i class="bi bi-facebook text-dark"></i></a>
+                <a href="#" class="text-white me-2 d-flex align-items-center justify-content-center rounded-circle bg-light p-2" style="width: 40px; height: 40px;"><i class="bi bi-youtube text-dark"></i></a>
+                <a href="#" class="text-white d-flex align-items-center justify-content-center rounded-circle bg-light p-2" style="width: 40px; height: 40px;"><i class="bi bi-linkedin text-dark"></i></a>
+            </div>
+        </div>
+        <div class="text-center mt-3">
+            <span>&copy; Angular Covid - Tous droits réservés</span>
+            <a href="#" class="text-white me-3 SpaceMargin-02">Mentions légales</a>
+            <a href="#" class="text-white me-3">Cookies</a>
+            <a href="#" class="text-white me-3">Accessibilité</a>
+            <a routerLink="/contacts" class="text-white me-3">Nous contacter</a>
+            <a href="#" class="text-white me-3">Presse</a>
+        </div>
+    </div>
+</footer>

angular/src/app/footer/footer.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FooterComponent } from './footer.component';
+
+describe('FooterComponent', () => {
+  let component: FooterComponent;
+  let fixture: ComponentFixture<FooterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [FooterComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

angular/src/app/footer/footer.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  standalone: false,
+  templateUrl: './footer.component.html',
+  styleUrl: './footer.component.css'
+})
+export class FooterComponent {
+
+}

angular/src/app/home/home.component.html

@@ -1 +1,63 @@
-<p>home works!</p>
+<div class="container py-5">
+    <div class="row align-items-center mb-4">
+        <div class="col-md-6 text-center text-md-start">
+            <h2 class="text-primary">Ensemble. Luttons.</h2>
+            <p>Lorem, ipsum dolor, sit amet consectetur adipisicing elit...</p>
+            <button routerLink="/symptômes" class="btn btn-primary">Comment se protéger</button>
+        </div>
+        <div class="col-md-6 text-center">
+            <img src="/assets/illustration.png" alt="Illustration Covid" class="img-fluid">
+        </div>
+    </div>
+
+    <div class="text-center mb-4">
+        <h2 class="text-primary">Symptôme du Coronavirus</h2>
+        <p>Lorem, ipsum dolor sit amet consectetur...</p>
+    </div>
+
+    <div class="row">
+        <div class="col-md-6 mb-3">
+            <div class="card p-3">
+                <div class="d-flex align-items-center">
+                    <img src="/assets/fievre.png" alt="Forte fièvre" class="me-3">
+                    <div>
+                        <h5 class="text-primary">Forte fièvre</h5>
+                        <p>Lorem ipsum dolor sit amet...</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6 mb-3">
+            <div class="card p-3">
+                <div class="d-flex align-items-center">
+                    <img src="/assets/toux.png" alt="Toux" class="me-3">
+                    <div>
+                        <h5 class="text-primary">Toux</h5>
+                        <p>Lorem ipsum dolor sit amet...</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6 mb-3">
+            <div class="card p-3">
+                <div class="d-flex align-items-center">
+                    <img src="/assets/gorge.png" alt="Gorge irritée" class="me-3">
+                    <div>
+                        <h5 class="text-primary">Gorge irritée</h5>
+                        <p>Lorem ipsum dolor sit amet...</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6 mb-3">
+            <div class="card p-3">
+                <div class="d-flex align-items-center">
+                    <img src="/assets/migraine.png" alt="Migraine" class="me-3">
+                    <div>
+                        <h5 class="text-primary">Migraine</h5>
+                        <p>Lorem ipsum dolor sit amet...</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>

angular/src/app/symptome/symptome.component.html

@@ -0,0 +1 @@
+<p>symptome works!</p>

angular/src/app/symptome/symptome.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SymptomeComponent } from './symptome.component';
+
+describe('SymptomeComponent', () => {
+  let component: SymptomeComponent;
+  let fixture: ComponentFixture<SymptomeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [SymptomeComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SymptomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

angular/src/app/symptome/symptome.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-symptome',
+  standalone: false,
+  templateUrl: './symptome.component.html',
+  styleUrl: './symptome.component.css'
+})
+export class SymptomeComponent {
+
+}

angular/src/index.html

@@ -5,9 +5,9 @@
   <title>Angular</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="icon" type="image/x-icon" href="/assets/logo.ico">
 </head>
-<body>
+<body class="background-all">
   <app-root></app-root>
 </body>
 </html>

angular/src/styles.css

@@ -1,4 +1,19 @@
 /* You can add global styles to this file, and also import other style files */
+.background-all {
+    background: linear-gradient(90deg, #E3F2FD, #FFFFFF);
+    background-size: 400% 400%;
+    animation: gradientAnimation 6s infinite alternate ease-in-out;
+}
+
+@keyframes gradientAnimation {
+    0% {
+        background-position: 0% 50%;
+    }
+    100% {
+        background-position: 100% 50%;
+    }
+}
+
 .active-link {
     color: #ffc107 !important; /* Jaune Bootstrap */
     font-weight: bold;