add icon on desktop and add first step of history

assets/css/desktop.css

@@ -90,6 +90,24 @@
   font-size: 1rem;
   cursor: pointer; }
 
+.soft {
+  display: flex;
+  flex-flow: row nowrap; }
+  .soft .opensource {
+    display: flex;
+    flex-flow: row wrap;
+    flex-basis: 50%; }
+    .soft .opensource div {
+      cursor: pointer; }
+  .soft .proprio {
+    display: flex;
+    flex-flow: row wrap;
+    flex-basis: 50%; }
+    .soft .proprio div {
+      cursor: pointer; }
+  .soft img {
+    height: 9%; }
+
 *, *:after, *:before {
   box-sizing: border-box;
   margin: 0;

assets/css/sass/app/desktop.scss

@@ -2,6 +2,7 @@
 @import "includes/_globalElements";
 @import "includes/_startMenu";
 @import "includes/_dialogs";
+@import "includes/_main";
 // Z-INDEXs:
 // 100 - main
 // 200 - windows

assets/css/sass/app/includes/_main.scss

@@ -0,0 +1,23 @@
+.soft{
+    display:flex;
+    flex-flow: row nowrap;
+    .opensource{
+        display:flex;
+        flex-flow: row wrap;
+        flex-basis: 50%;
+        div{
+            cursor:pointer;
+        }
+    }
+    .proprio{
+        display:flex;
+        flex-flow: row wrap;
+        flex-basis: 50%;
+        div{
+            cursor:pointer;
+        }
+    }
+    img{
+        height:9%;
+    }
+}

assets/dialogs/fr/dialogs.json

@@ -1,4 +1,5 @@
 {
-    "prologue" : "Vous travaillez à la dryCorporation. Boulot, métro,dodo sont votre quotidien (avec quelques verres entre amis, bien entendu). Jusqu'au jour ou votre entreprise décide de changer votre matériel.",
-    "prologueChangeComputer" : "Pour ne pas vous débousoller, l'équipe technique a préféré garder vos anciens programme qui étaient tous propriétaire, mais elle a aussi ajouté de nouveaux logiciels qui sont <span id='openSource'>open-source</span> et pour certains <span id='libre'>libre</span>"
+    "prologue" : "Vous travaillez à la dryCorporation. Boulot, métro, dodo sont votre quotidien (avec quelques verres entre amis, bien entendu). Jusqu'au jour ou votre entreprise décide de changer votre matériel.",
+    "prologueChangeComputer" : "Pour ne pas vous débousoller, l'équipe technique a préféré garder vos anciens programme qui étaient tous propriétaire, mais elle a aussi ajouté de nouveaux logiciels qui sont <span id='openSource'>open-source</span> et pour certains <span id='libre'>libre</span>",
+    "changeMailClient" : "Lancez votre client mail favoris pour voir si vos mails ont bien été importé"
 }

assets/js/app.js

@@ -1,6 +1,9 @@
 var lang = "fr";
 var dialogs;
 
+var badChoise = 0;
+var goodChoise = 0;
+
 function setTime(ts) {
   var date = new Date(ts);
   $('.time').text(date.toLocaleString(navigator.language, {
@@ -114,22 +117,39 @@ function prologue(){
     $("#dialogsNext").on('click', function(){
         $("#dialogsNext").off('click');
         $('#dialogsNext').css('display', "none");
+        $('.screensaver').addClass("changeMailClient")
         typeWriter(dialogs.prologueChangeComputer, 0);
         $("#dialogsNext").on('click', function(){
             $("#dialogsNext").off('click');
             $('.overlay').fadeOut(500);
              $(".dialogs").fadeOut(500);
+             $('.changeMailClient').on('click', changeMailClient);
         })
     })
 }
 
+function changeMailClient(){
+    $("#dialogsNext").off('click');
+    $('#dialogsNext').css('display', "none");
+    setTimeout(function(){
+        $(".dialogs").css("display", "block");
+        $('.overlay').fadeIn(500);
+        typeWriter(dialogs.changeMailClient, 0);
+    }, 600);
+    $("#dialogsNext").on('click', function(){
+        $("#dialogsNext").off('click');
+        $('.overlay').fadeOut(500);
+        $(".dialogs").fadeOut(500);
+    });
+}
+
 function typeWriter(text, n) {
   if (n < (text.length)) {
     $('#typewritter').html(text.substring(0, n+1));
     n++;
     setTimeout(function() {
       typeWriter(text, n)
-    }, 50);
+    }, 1);
   }
   else{
       $('#dialogsNext').css('display', "block");

index.html

@@ -16,7 +16,18 @@
           <time class="time" style="float: right">time</time>
           <time class="date" style="float: right">date</time>
         </header>
-        <main></main>
+        <main class="soft">
+            <div class="proprio">
+                <div id="outlook">
+                    <img src="assets/img/software/Logo_Microsoft_Outlook_2013.png" />
+                </div>
+            </div>
+            <div class="opensource">
+                <div id="thunderbird">
+                    <img src="assets/img/software/Mozilla_Thunderbird_logo.png" />
+                </div>
+            </div>
+        </main>
         <div class="screensaver">
           <div class="content">
             <time class="time">time</time>