TG-117 : update login view

frontend/app/images/booklet.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="500" height="500" version="1.1" viewBox="0 0 500.00001 500.00001" xmlns="http://www.w3.org/2000/svg">
+ <g transform="translate(0 -552.36)">
+  <rect y="552.36" width="500" height="500" ry="0" fill="#00b2c6"/>
+ </g>
+ <g transform="translate(-22.114 -2.1104)">
+  <g transform="matrix(1.3937 0 0 1.3937 -107.14 -99.261)">
+   <path d="m193.55 140.55 157.12-4c4.0467-0.10302 9 6.23 9 9v204.25c0 2.77-2.23 5-5 5h-161.12c-2.77 0-9.0769-5.1516-9-9l4-200.25c0.0553-2.7694 2.2309-4.9295 5-5z" fill="#f1f1f1"/>
+   <path d="m189.55 136.55h161.12c2.77 0 5 2.23 5 5v204.25c0 2.77-2.23 5-5 5h-161.12c-2.77 0-5-2.23-5-5v-204.25c0-2.77 2.23-5 5-5z" fill="#cb6565"/>
+   <path d="m209.5 136.55h18.5v214.25h-18.5z" fill="#c14a4a"/>
+   <path d="m212.25 352.18v15.5h0.2207l6.2793-7.25 6.2793 7.25h0.2207v-15.5z" fill="#ed1e1e"/>
+  </g>
+ </g>
+</svg>

frontend/app/styles/main.css

@@ -8,4 +8,26 @@
 body {
   padding: 0;
   background-color: #DADADA;
+}
+
+.indigo.darken-2 {
+ background-color: #a0b75e;
+}
+
+.bg-booklet {
+  background-image: url(../images/booklet.png);
+  background-size: 100% 100%;
+  /* #cb6565 #269486 #a0b75e*/
+}
+
+.no-margin {
+  margin: 0;
+}
+
+body > ui-view > div > div.bg-booklet.layout-align-center-center.layout-row.flex-gt-sm-65.flex > md-card {
+  background-image: rgba(255,255,0,0.8);
+}
+
+.p-home {
+  font-size: 0.6em;
 }

frontend/app/views/login.html

@@ -1,24 +1,31 @@
-<div layout="row" layout-align="center center">
+<div layout="row" layout-fill>
-  <div flex flex-gt-sm="40">
+  <div flex flex-gt-sm="35" layout="row" layout-align="center" class="indigo darken-2">
     <md-card>
+      <!--<img ng-src="{{imagePath}}" class="md-card-image" alt="Washed Out">-->
       <md-card-title>
         <md-card-title-text>
-          <span class="md-headline">Livret de l'alternant</span>
+          <span class="md-headline">Livret Alternant</span>
         </md-card-title-text>
       </md-card-title>
-
       <md-card-content>
-        <div layout="column">
+        <p class="p-home">
-          <md-input-container class="md-block">
+          The titles of Washed Out's breakthrough song and the first single from Paracosm share the two most important words in Ernest
-            <label>Email</label>
+          Greene's musical language: feel it. It's a simple request, as well...
-            <input type="email" ng-model="email">
+        </p>
-          </md-input-container>
+        <p class="p-home">
-          <md-input-container class="md-block">
+          The titles of Washed Out's breakthrough song and the first single from Paracosm share the two most important words in Ernest
-            <label>Mot de passe</label>
+          Greene's musical language: feel it. It's a simple request, as well...
-            <input type="password" ng-model="password">
+        </p>
-          </md-input-container>
+        <p class="p-home">
-        </div>
+          The titles of Washed Out's breakthrough song and the first single from Paracosm share the two most important words in Ernest
-        <md-button class="md-raised md-primary" ng-click="login()">Se connecter</md-button>
+          Greene's musical language: feel it. It's a simple request, as well...
+        </p>
+      </md-card-content>
+    </md-card>
+  </div>
+  <div flex flex-gt-sm="65" layout="row" layout-align="center center" class="bg-booklet">
+    <md-card flex flex-gt-sm="55" class="transparencyCard">
+      <md-button class="md-raised md-primary md-mini" ng-click="login()">Se connecter</md-button>
       </md-card-content>
     </md-card>
   </div>