Modification de présentation de la page d'accueil.

src/app/app.component.css

@@ -23,3 +23,7 @@
   /*width: 100%;*/
   /*height: 100%;*/
 /*}*/
+.app-component-viewer {
+  font-weight: 900;
+  padding: 20px 70px 50px;
+}

src/app/app.component.html

@@ -12,7 +12,7 @@
 </mat-toolbar>
 
 <mat-sidenav-container>
-  <mat-sidenav #sidenav mode="over" opened="true">
+  <mat-sidenav #sidenav mode="over" opened="false">
     <!--button mat-mini-fab class="example-fab" (click)="sidenav.toggle()">
       <mat-icon>add</mat-icon>
     </button-->
@@ -33,25 +33,20 @@
     <mat-list layout="column">
       <mat-list-item>
         <button mat-button aria-label="Dashboard" routerLink="/home">
-          <i class="green" mat-icon>Home</i>
+          <i className="material-icons">home</i>
+          Home
         </button>
       </mat-list-item>
       <mat-list-item>
-        <button mat-button aria-label="Blog">
-          <!--i class="green" mat-icon>Blog</i-->
-          <a href="http://ghost.raveau.info" target="_blank">Blog</a>
+        <button mat-button aria-label="Blog" (click)="go('http://ghost.raveau.info');">
+          <i class="material-icons">description</i>
+          Mon blog
         </button>
       </mat-list-item>
       <mat-list-item>
-        <button mat-button aria-label="Blog">
-          <i class="green" mat-icon>
-            <a href="http://ghost.raveau.info">Blog</a>
-          </i>
-        </button>
-      </mat-list-item>
-      <!--mat-list-item>
-        <button mat-button aria-label="Todolist" routerLink="/todolist">
-          <i class="green" mat-icon>Todolist</i>
+        <button mat-button aria-label="Vtt" routerLink="/vtt">
+          <i class="material-icons">directions_bike</i>
+          Vtt : mes traces
         </button>
       </mat-list-item>
       <mat-divider></mat-divider>
@@ -64,7 +59,7 @@
       </mat-list-item-->
     </mat-list>
   </mat-sidenav>
-  <div style="height: 100%;"><router-outlet></router-outlet></div>
+  <div class="app-component-viewer" sstyle="height: 100%;"><router-outlet></router-outlet></div>
 
 
 </mat-sidenav-container>

src/app/app.component.ts

@@ -1,10 +1,20 @@
 import { Component } from '@angular/core';
+import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
+  providers: [Location, {provide: LocationStrategy, useClass: PathLocationStrategy}]
 })
 export class AppComponent {
   title = 'app';
+  location: Location;
+
+  constructor(location: Location) { this.location = location; }
+
+  go(url: string){
+    window.location.href = url;
+  }
+
 }

src/app/app.module.ts

@@ -10,10 +10,12 @@ import {
 import {RouterModule, Routes} from "@angular/router";
 import { HomeComponent } from './home/home.component';
 import { RouterLinkWithHref } from '@angular/router';
+import {VttTraceComponent} from "./vtt-trace/vtt-trace/vtt-trace.component";
 
 const routes: Routes =[
   {path: 'home', component: HomeComponent},
-  { path: '',   redirectTo: '/home', pathMatch: 'full' }
+  { path: '',   redirectTo: '/home', pathMatch: 'full' },
+  {path: 'vtt', component: VttTraceComponent}
  /* {path: 'dashboard', component: DashboardComponent},
   {path: 'capteur-ht', component: CapteurHtComponent},
   {path: 'todolist', component: TodoDashboardComponent},
@@ -24,7 +26,8 @@ const routes: Routes =[
 @NgModule({
   declarations: [
     AppComponent,
-    HomeComponent
+    HomeComponent,
+    VttTraceComponent
   ],
   imports: [
     BrowserModule,

src/app/home/home.component.css

@@ -0,0 +1,32 @@
+.mat-grid-tile {
+  width: 40%;
+  use: flex;
+}
+
+.mat-grid-list{
+  height: inherit;
+}
+
+.mat-card{
+  width:50%;
+  height: 80%;
+  use: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+
+.mat-card-header{
+  align-items: center;
+  justify-content: center;
+}
+
+.mat-card-content{
+  flex-grow: inherit;
+  text-align: center;
+ }
+
+.mat-card-image{
+  width: 70%;
+}
+

src/app/home/home.component.html

@@ -1,20 +1,194 @@
+
+<!-- Header with image -->
+<!--header class="bgimg w3-display-container w3-grayscale-min" id="home">
+  <div class="w3-display-bottomleft w3-center w3-padding-large w3-hide-small">
+    <span class="w3-tag">Open from 6am to 5pm</span>
+  </div>
+  <div class="w3-display-middle w3-center">
+    <span class="w3-text-white" style="font-size:90px">the<br>Cafe</span>
+  </div>
+  <div class="w3-display-bottomright w3-center w3-padding-large">
+    <span class="w3-text-white">15 Adr street, 5015</span>
+  </div>
+</header-->
+
+<!-- Add a background color and large text to the whole page -->
+<!--div class="w3-sand w3-grayscale w3-large"-->
+
+  <!-- About Container -->
+  <!--div class="w3-container" id="about">
+    <div class="w3-content" style="max-width:700px">
+      <h5 class="w3-center w3-padding-64"><span class="w3-tag w3-wide">ABOUT THE CAFE</span></h5>
+      <p>The Cafe was founded in blabla by Mr. Smith in lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+      <p>In addition to our full espresso and brew bar menu, we serve fresh made-to-order breakfast and lunch sandwiches, as well as a selection of sides and salads and other good stuff.</p>
+      <div class="w3-panel w3-leftbar w3-light-grey">
+        <p><i>"Use products from nature for what it's worth - but never too early, nor too late." Fresh is the new sweet.</i></p>
+        <p>Chef, Coffeeist and Owner: Liam Brown</p>
+      </div>
+      <img src="/w3images/coffeeshop.jpg" style="width:100%;max-width:1000px" class="w3-margin-top">
+      <p><strong>Opening hours:</strong> everyday from 6am to 5pm.</p>
+      <p><strong>Address:</strong> 15 Adr street, 5015, NY</p>
+    </div>
+  </div-->
+
+  <!-- Menu Container -->
+  <!--div class="w3-container" id="menu">
+    <div class="w3-content" style="max-width:700px">
+
+      <h5 class="w3-center w3-padding-48"><span class="w3-tag w3-wide">THE MENU</span></h5>
+
+      <div class="w3-row w3-center w3-card w3-padding">
+        <a href="javascript:void(0)" onclick="openMenu(event, 'Eat');" id="myLink">
+          <div class="w3-col s6 tablink">Eat</div>
+        </a>
+        <a href="javascript:void(0)" onclick="openMenu(event, 'Drinks');">
+          <div class="w3-col s6 tablink">Drink</div>
+        </a>
+      </div>
+
+      <div id="Eat" class="w3-container menu w3-padding-48 w3-card">
+        <h5>Bread Basket</h5>
+        <p class="w3-text-grey">Assortment of fresh baked fruit breads and muffins 5.50</p><br>
+
+        <h5>Honey Almond Granola with Fruits</h5>
+        <p class="w3-text-grey">Natural cereal of honey toasted oats, raisins, almonds and dates 7.00</p><br>
+
+        <h5>Belgian Waffle</h5>
+        <p class="w3-text-grey">Vanilla flavored batter with malted flour 7.50</p><br>
+
+        <h5>Scrambled eggs</h5>
+        <p class="w3-text-grey">Scrambled eggs, roasted red pepper and garlic, with green onions 7.50</p><br>
+
+        <h5>Blueberry Pancakes</h5>
+        <p class="w3-text-grey">With syrup, butter and lots of berries 8.50</p>
+      </div>
+
+      <div id="Drinks" class="w3-container menu w3-padding-48 w3-card">
+        <h5>Coffee</h5>
+        <p class="w3-text-grey">Regular coffee 2.50</p><br>
+
+        <h5>Chocolato</h5>
+        <p class="w3-text-grey">Chocolate espresso with milk 4.50</p><br>
+
+        <h5>Corretto</h5>
+        <p class="w3-text-grey">Whiskey and coffee 5.00</p><br>
+
+        <h5>Iced tea</h5>
+        <p class="w3-text-grey">Hot tea, except not hot 3.00</p><br>
+
+        <h5>Soda</h5>
+        <p class="w3-text-grey">Coke, Sprite, Fanta, etc. 2.50</p>
+      </div>
+      <img src="/w3images/coffeehouse2.jpg" style="width:100%;max-width:1000px;margin-top:32px;">
+    </div>
+  </div-->
+
+  <!-- Contact/Area Container -->
+  <!--div class="w3-container" id="where" style="padding-bottom:32px;">
+    <div class="w3-content" style="max-width:700px">
+      <h5 class="w3-center w3-padding-48"><span class="w3-tag w3-wide">WHERE TO FIND US</span></h5>
+      <p>Find us at some address at some place.</p>
+      <div id="googleMap" class="w3-sepia" style="width:100%;height:400px;"></div>
+      <p><span class="w3-tag">FYI!</span> We offer full-service catering for any event, large or small. We understand your needs and we will cater the food to satisfy the biggerst criteria of them all, both look and taste.</p>
+      <p><strong>Reserve</strong> a table, ask for today's special or just send us a message:</p>
+      <form action="/action_page.php" target="_blank">
+        <p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Name" required name="Name"></p>
+        <p><input class="w3-input w3-padding-16 w3-border" type="number" placeholder="How many people" required name="People"></p>
+        <p><input class="w3-input w3-padding-16 w3-border" type="datetime-local" placeholder="Date and time" required name="date" value="2017-11-16T20:00"></p>
+        <p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Message \ Special requirements" required name="Message"></p>
+        <p><button class="w3-button w3-black" type="submit">SEND MESSAGE</button></p>
+      </form>
+    </div>
+  </div-->
+
+  <!-- End page content -->
+<!--/div-->
+
+<!-- Footer -->
+<!--footer class="w3-center w3-light-grey w3-padding-48 w3-large">
+  <p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" title="W3.CSS" target="_blank" class="w3-hover-text-green">w3.css</a></p>
+</footer-->
+
+<!-- Add Google Maps -->
+<!--script>
+  function myMap()
+  {
+    myCenter=new google.maps.LatLng(41.878114, -87.629798);
+    var mapOptions= {
+      center:myCenter,
+      zoom:12, scrollwheel: false, draggable: false,
+      mapTypeId:google.maps.MapTypeId.ROADMAP
+    };
+    var map=new google.maps.Map(document.getElementById("googleMap"),mapOptions);
+
+    var marker = new google.maps.Marker({
+      position: myCenter,
+    });
+    marker.setMap(map);
+  }
+
+  // Tabbed Menu
+  function openMenu(evt, menuName) {
+    var i, x, tablinks;
+    x = document.getElementsByClassName("menu");
+    for (i = 0; i < x.length; i++) {
+      x[i].style.display = "none";
+    }
+    tablinks = document.getElementsByClassName("tablink");
+    for (i = 0; i < x.length; i++) {
+      tablinks[i].className = tablinks[i].className.replace(" w3-dark-grey", "");
+    }
+    document.getElementById(menuName).style.display = "block";
+    evt.currentTarget.firstElementChild.className += " w3-dark-grey";
+  }
+  document.getElementById("myLink").click();
+</script>
+<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
+<!--
+To use this code on your website, get a free API key from Google.
+Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp
+-->
+
+
+
+
+
 <mat-grid-list cols="2" rowHeight="8:7">
+  <mat-grid-tile >
+    <mat-card>
+      <mat-card-header>
+        <mat-card-title>
+          <i class="material-icons">description</i>
+        </mat-card-title>
+        <mat-card-subtitle>
+          Blog de sujets diverses
+        </mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content>
+        <img mat-card-lg-image src="/assets/images/blog.png" align="center">
+      </mat-card-content>
+      <mat-card-actions>
+        <button mat-button (click)="go('http://ghost.raveau.info');"><i class="material-icons">open_in_new</i></button>
+      </mat-card-actions>
+    </mat-card>
+  </mat-grid-tile>
   <mat-grid-tile>
-    <mat-card class="example-card">
+    <mat-card>
       <mat-card-header>
-        <mat-card-title>Capteur HT - Voltage</mat-card-title>
-        <mat-card-subtitle>Définit la charge du capteur RFID</mat-card-subtitle>
+        <mat-card-title>
+          <i class="material-icons">directions_bike</i>
+        </mat-card-title>
+        <mat-card-subtitle>
+          Vtt: traces et application GPS
+        </mat-card-subtitle>
       </mat-card-header>
       <mat-card-content>
-
+        <img mat-card-lg-image src="/assets/images/vtt.png">
       </mat-card-content>
-      <!--mat-card-actions>
-        <button mat-button>LIKE</button>
-        <button mat-button>SHARE</button>
-      </mat-card-actions-->
+      <mat-card-actions>
+        <button mat-button><i class="material-icons">open_in_new</i></button>
+      </mat-card-actions>
     </mat-card>
+
   </mat-grid-tile>
-  <mat-grid-tile></mat-grid-tile>
-  <mat-grid-tile>3</mat-grid-tile>
-  <mat-grid-tile>4</mat-grid-tile>
 </mat-grid-list>

src/app/home/home.component.ts

@@ -12,4 +12,7 @@ export class HomeComponent implements OnInit {
   ngOnInit() {
   }
 
+  go(url: string){
+    window.location.href = url;
+  }
 }

src/index.html

@@ -1,5 +1,26 @@
-<!doctype html>
-<html lang="en">
+<!DOCTYPE html>
+<html>
+<title>Raveau.info</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<!--link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"-->
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata">
+<!--style>
+  body, html {
+    height: 100%;
+    font-family: "Inconsolata", sans-serif;
+  }
+  .bgimg {
+    background-position: center;
+    background-size: cover;
+    background-image: url("/w3images/coffeehouse.jpg");
+    min-height: 75%;
+  }
+  .menu {
+    display: none;
+  }
+</style-->
+
 <head>
   <meta charset="utf-8">
   <title>Homewebpublic</title>
@@ -9,7 +30,27 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
+
 <body>
-  <app-root></app-root>
+
+<!-- Links (sit on top) -->
+<!--div class="w3-top">
+  <div class="w3-row w3-padding w3-black">
+    <div class="w3-col s3">
+      <a href="#" class="w3-button w3-block w3-black">HOME</a>
+    </div>
+    <div class="w3-col s3">
+      <a href="#about" class="w3-button w3-block w3-black">ABOUT</a>
+    </div>
+    <div class="w3-col s3">
+      <a href="#menu" class="w3-button w3-block w3-black">MENU</a>
+    </div>
+    <div class="w3-col s3">
+      <a href="#where" class="w3-button w3-block w3-black">WHERE</a>
+    </div>
+  </div>
+</div-->
+<app-root></app-root>
+
 </body>
 </html>

src/stylesPerso.scss

@@ -24,6 +24,8 @@ $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-
 @include angular-material-theme($candy-app-theme);
 html, body {
   margin: 0px;
+  width: 100%;
+  height: 100%;
 }
 
 .mat-sidenav {
@@ -34,3 +36,13 @@ html, body {
 .mat-grid-tile {
   background-color: mat-color($candy-app-accent, $hue: 50, $opacity: null);
 }
+
+.mat-toolbar .mat-toolbar-row {
+  background-color: #0097A7;
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  white-space: nowrap;
+}