test change

package-lock.json

@@ -753,6 +753,12 @@
         "utilise": "^2.3.5"
       }
     },
+    "@fortawesome/fontawesome-free": {
+      "version": "5.8.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.8.1.tgz",
+      "integrity": "sha512-GJtx6e55qLEOy2gPOsok2lohjpdWNGrYGtQx0FFT/++K4SYx+Z8LlPHdQBaFzKEwH5IbBB4fNgb//uyZjgYXoA==",
+      "dev": true
+    },
     "@ngtools/webpack": {
       "version": "7.1.4",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-7.1.4.tgz",
@@ -2440,9 +2446,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30000953",
+      "version": "1.0.30000954",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000953.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000954.tgz",
-      "integrity": "sha512-2stdF/q5MZTDhQ6uC65HWbSgI9UMKbc7+HKvlwH5JBIslKoD/J9dvabP4J4Uiifu3NljbHj3iMpfYflLSNt09A==",
+      "integrity": "sha512-Wopmc0eVSSG1d9/O4JTn0OmGhUfhEHNkHhoCjUrGSImvHI+2YQWkOI1RRNTUFNSHbSAD8J41jbdZrPP4r32cbQ==",
       "dev": true
     },
     "canonical-path": {
@@ -11278,9 +11284,9 @@
           }
         },
         "semver": {
-          "version": "5.6.0",
+          "version": "5.7.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.6.0.tgz",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz",
-          "integrity": "sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg==",
+          "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==",
           "dev": true
         },
         "source-map": {
@@ -11596,6 +11602,30 @@
       "integrity": "sha512-tDMYfVtvpb96msS1lDX9MEdHrW4yOuZ4Kdc4Him9oU796XldPYF/t2+uKoX0BBa0hXXwDlqYQbXY5Rzjzc5hBA==",
       "dev": true
     },
+    "uglify-es": {
+      "version": "3.3.9",
+      "resolved": "https://registry.npmjs.org/uglify-es/-/uglify-es-3.3.9.tgz",
+      "integrity": "sha512-r+MU0rfv4L/0eeW3xZrd16t4NZfK8Ld4SWVglYBb7ez5uXFWHuVRs6xCTrf1yirs9a4j4Y27nn7SRfO6v67XsQ==",
+      "dev": true,
+      "requires": {
+        "commander": "~2.13.0",
+        "source-map": "~0.6.1"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.13.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.13.0.tgz",
+          "integrity": "sha512-MVuS359B+YzaWqjCL/c+22gfryv+mCBPHAv3zyVI2GN8EY6IRP8VwtasXn8jyyhvvq84R4ImN1OKRtcbIasjYA==",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
     "uglify-js": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.5.2.tgz",
@@ -11632,12 +11662,6 @@
         "worker-farm": "^1.5.2"
       },
       "dependencies": {
-        "commander": {
-          "version": "2.13.0",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.13.0.tgz",
-          "integrity": "sha512-MVuS359B+YzaWqjCL/c+22gfryv+mCBPHAv3zyVI2GN8EY6IRP8VwtasXn8jyyhvvq84R4ImN1OKRtcbIasjYA==",
-          "dev": true
-        },
         "schema-utils": {
           "version": "0.4.7",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.7.tgz",
@@ -11653,16 +11677,6 @@
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
           "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
           "dev": true
-        },
-        "uglify-es": {
-          "version": "3.3.9",
-          "resolved": "https://registry.npmjs.org/uglify-es/-/uglify-es-3.3.9.tgz",
-          "integrity": "sha512-r+MU0rfv4L/0eeW3xZrd16t4NZfK8Ld4SWVglYBb7ez5uXFWHuVRs6xCTrf1yirs9a4j4Y27nn7SRfO6v67XsQ==",
-          "dev": true,
-          "requires": {
-            "commander": "~2.13.0",
-            "source-map": "~0.6.1"
-          }
         }
       }
     },

package.json

@@ -29,13 +29,14 @@
     "zone.js": "~0.8.26"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.11.0",
+    "@angular-devkit/build-angular": "^0.11.4",
     "@angular/cli": "~7.1.2",
     "@angular/compiler-cli": "~7.1.0",
     "@angular/language-service": "~7.1.0",
-    "@types/node": "~8.9.4",
+    "@fortawesome/fontawesome-free": "^5.8.1",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "~2.0.3",
+    "@types/node": "~8.9.4",
     "codelyzer": "~4.5.0",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",

src/app/app.module.ts

@@ -8,19 +8,23 @@ import { HomePageComponent } from './home-page/home-page.component';
 import { AlertModule } from 'ngx-bootstrap/alert';
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
+import { CarouselModule } from 'ngx-bootstrap/carousel';
+import { BorderCardDirective } from './directives/border-card.directive'
+
 
 @NgModule({
   declarations: [
     AppComponent,
-    HomePageComponent
+    HomePageComponent,
+    BorderCardDirective
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     AlertModule.forRoot(),
     BsDatepickerModule.forRoot(),
-    BsDropdownModule.forRoot()
+    BsDropdownModule.forRoot(),
-
+    CarouselModule.forRoot()
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/directives/border-card.directive.spec.ts

@@ -0,0 +1,8 @@
+import { BorderCardDirective } from '../border-card.directive';
+
+describe('BorderCardDirective', () => {
+  it('should create an instance', () => {
+    const directive = new BorderCardDirective();
+    expect(directive).toBeTruthy();
+  });
+});

src/app/directives/border-card.directive.ts

@@ -0,0 +1,29 @@
+import { Directive, ElementRef, HostListener, Input } from '@angular/core';
+
+@Directive({
+  selector: '[appBorderCard]'
+})
+export class BorderCardDirective {
+
+  private initialColor: string = '#f5f5f5';
+	private defaultColor: string = '#3366ff';
+
+  constructor(private el: ElementRef) { 
+    
+  }
+
+  @Input('appBorderCard') borderColor: string;
+
+	@HostListener('mouseenter') onMouseEnter() {
+		this.setBorder(this.borderColor || this.defaultColor);
+	}
+
+	@HostListener('mouseleave') onMouseLeave() {
+		this.setBorder(this.initialColor);
+  }
+  
+  private setBorder(color: string) {
+		let border = 'solid 4px ' + color;
+		this.el.nativeElement.style.border = border;
+	}
+}

src/app/home-page/home-page.component.html

@@ -1,26 +1,135 @@
-<alert class=".alert-success" type="success">
+
-  <strong>Weedzll done!</strong> You successfully read this important alert message.
+
+<carousel>
+  <slide>
+    <img src="../../assets/images/home-page/custo2.png" alt="first slide" style="display: block; width: 100%;">
+    <div class="carousel-caption d-none d-md-block">
+      <h3>First slide label</h3>
+      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+    </div>    
+  </slide>
+  <slide>
+    <img src="../../assets/images/home-page/home.jpg" alt="second slide" style="display: block; width: 100%;">
+    <div class="carousel-caption d-none d-md-block">
+      <h3>Second slide label</h3>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+  </slide>
+  <slide>
+    <img src="../../assets/images/home-page/news2.jpg" alt="third slide" style="display: block; width: 100%;">
+    <div class="carousel-caption d-none d-md-block">
+      <h3>Third slide label</h3>
+      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
+    </div>
+  </slide>
+  <slide>
+    <img src="../../assets/images/home-page/network3.png" alt="fourth slide" style="display: block; width: 100%;">
+    <div class="carousel-caption d-none d-md-block">
+      <h3>Fourth slide label</h3>
+      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
+    </div>
+  </slide>
+</carousel>
+<alert type="info" style="text-align: center">
+  <h4 class="alert-heading">Still not registered?</h4>
+  <p>Sign in now to access to your configuration panel</p>
+  <button type="button" class="btn btn-primary btn-primary">
+    Sign in !
+    <i class="fas fa-pencil-alt"></i>
+  </button>
 </alert>
 
-
+<div class="container-fluid">
   <div class="row">
-    <div class="col-xs-12 col-12 col-md-4 form-group">
+    <div class="col-sm-6">
-      <bs-datepicker-inline [bsValue]="bsInlineValue"></bs-datepicker-inline>
+      <!--  <span class="glyphicon glyphicon-globe logo slideanim"></span>-->
+      <img src="../../assets/images/home-page/logoNew.png" class="img-rounded img-responsive"
+        alt="MyMirror">
+    </div>
+    <div class="col-sm-5 offset-1">
+      <h2>MIOTech</h2>
+      <br>
+      <h4>
+        <strong>Histoire :</strong>
+        bla bla
+      </h4>
+      <br>
+      <h4>
+        <!--  <strong><fmt:message key="home.MyMirrorObjectifO"/> :</strong> <fmt:message key="home.MyMirrorObjectif"/>-->
+      </h4>
+    </div>
   </div>
 </div>
 
-  <div class="btn-group" dropdown>
+<div class="container-fluid bg-grey">
-      <button id="button-basic" dropdownToggle type="button" class="btn btn-primary dropdown-toggle"
+  <div class="row">
-              aria-controls="dropdown-basic">
+    <div class="col-sm-8">
-        Button dropdown <span class="caret"></span>
+      <h2>
-      </button>
+        Plan
-      <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
+      </h2>
-          role="menu" aria-labelledby="button-basic">
+      <br>
-        <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
+      <h4>
-        <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
+        Plan
-        <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
+      </h4>
-        <li class="divider dropdown-divider"></li>
+      <br>
-        <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
+      <p>
-        </li>
+        Plan
+      </p>
+    </div>
+    <div class="col-sm-3">
+      <span style="font-size: 10em; color: #3366ff;">
+        <i class="fas fa-check-square"></i>
+      </span>
+    </div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="row justify-content-around">
+    <div class="col-3 ">
+      <div class="card" style="border: solid 4px #f5f5f5;" appBorderCard>
+        <div class="card-body">
+          <h5 class="card-title">HUBERT</h5>
+          <img class="card-img" src="../../assets/images/home-page/Hubert.jpg" style="margin-bottom: 2em">
+          <h6 class="card-subtitle mb-2 text-muted">Ce beau goss</h6>
+          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+          <ul class="social-network social-circle" style="text-align : center">
+            <li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
+            <li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
+            <li><a href="#" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
           </ul>
         </div>
+      </div>
+    </div>
+    <div class="col-3">
+      <div class="card" style="border: solid 4px #f5f5f5;" appBorderCard>
+        <div class="card-body">
+          <h5 class="card-title">FRANSOLET</h5>
+          <img class="card-img" src="../../assets/images/home-page/Thomas.jpg" style="margin-bottom: 2em">
+          <h6 class="card-subtitle mb-2 text-muted">Cette gribouille</h6>
+          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+          <ul class="social-network social-circle">
+            <li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
+            <li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
+            <li><a href="#" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="col-3" > 
+      <div class="card" style="border: solid 4px #f5f5f5;" appBorderCard>
+        <div class="card-body">
+          <h5 class="card-title">MICHEL</h5>
+          <img class="card-img" src="../../assets/images/home-page/Michel2.jpg" style="margin-bottom: 2em">
+          <h6 class="card-subtitle mb-2 text-muted">Ce poseur</h6>
+          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+          <ul class="social-network social-circle">
+            <li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
+            <li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
+            <li><a href="#" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/home-page/home-page.component.spec.ts

@@ -2,6 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { HomePageComponent } from './home-page.component';
 
+
 describe('HomePageComponent', () => {
   let component: HomePageComponent;
   let fixture: ComponentFixture<HomePageComponent>;

src/app/home-page/home-page.component.ts

@@ -1,6 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router'
-import { $ } from 'protractor';
+
+
+
+
 
 @Component({
   selector: 'app-home-page',

src/assets/css/bootstrap-social.css

@@ -0,0 +1,75 @@
+ul.social-network {
+	list-style: none;
+	display: inline;
+	margin-left:0 !important;
+	padding: 0;
+}
+ul.social-network li {
+	display: inline;
+	margin: 0 5px;
+}
+
+.social-network a.icoRss:hover {
+	background-color: #F56505;
+}
+.social-network a.icoFacebook:hover {
+	background-color:#3B5998;
+}
+.social-network a.icoTwitter:hover {
+	background-color:#33ccff;
+}
+.social-network a.icoGoogle:hover {
+	background-color:#BD3518;
+}
+.social-network a.icoVimeo:hover {
+	background-color:#0590B8;
+}
+.social-network a.icoLinkedin:hover {
+	background-color:#007bb7;
+}
+.social-network a.icoRss:hover i, .social-network a.icoFacebook:hover i, .social-network a.icoTwitter:hover i,
+.social-network a.icoGoogle:hover i, .social-network a.icoVimeo:hover i, .social-network a.icoLinkedin:hover i {
+	color:#fff;
+}
+a.socialIcon:hover, .socialHoverClass {
+	color:#44BCDD;
+}
+
+.social-circle li a {
+	display:inline-block;
+	position:relative;
+	margin:0 auto 0 auto;
+	-moz-border-radius:50%;
+	-webkit-border-radius:50%;
+	border-radius:50%;
+	text-align:center;
+	width: 50px;
+	height: 50px;
+	font-size:20px;
+	background-color: #D3D3D3;
+}
+.social-circle li i {
+	margin:0;
+	line-height:50px;
+	text-align: center;
+}
+
+.social-circle li a:hover i, .triggeredHover {
+	-moz-transform: rotate(360deg);
+	-webkit-transform: rotate(360deg);
+	-ms--transform: rotate(360deg);
+	transform: rotate(360deg);
+	-webkit-transition: all 0.2s;
+	-moz-transition: all 0.2s;
+	-o-transition: all 0.2s;
+	-ms-transition: all 0.2s;
+	transition: all 0.2s;
+}
+.social-circle i {
+	color: #fff;
+	-webkit-transition: all 0.8s;
+	-moz-transition: all 0.8s;
+	-o-transition: all 0.8s;
+	-ms-transition: all 0.8s;
+	transition: all 0.8s;
+}

src/index.html

@@ -10,6 +10,9 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
   <link rel="stylesheet" href="https://unpkg.com/ngx-bootstrap/datepicker/bs-datepicker.css">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href= "assets/css/bootstrap-social.css">
 </head>
 <body>
   <app-root></app-root>

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
+    "paths": { "*": ["types/*"] },
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "sourceMap": true,

types/@fortawesome/fontawesome-free.d.ts

@@ -0,0 +1 @@
+