diff --git a/Doc/Sketch.bmpr b/Doc/Sketch.bmpr
index e4e3298..f30a472 100644
Binary files a/Doc/Sketch.bmpr and b/Doc/Sketch.bmpr differ
diff --git a/site/css/style.css b/site/css/style.css
index 5fd8f3c..8384f2d 100644
--- a/site/css/style.css
+++ b/site/css/style.css
@@ -6,6 +6,34 @@
 
 }
 
+#header-container{
+    padding-bottom: 1%;
+    background-color: white;
+    width: 80%;
+    margin: 0 auto;
+    margin-top: 2%;
+    -webkit-box-shadow: 6px 9px 78px -2px rgba(0,0,0,0.75);
+    -moz-box-shadow: 6px 9px 78px -2px rgba(0,0,0,0.75);
+    box-shadow: 6px 9px 78px -2px rgba(0,0,0,0.75);
+}
+
+#progressBar{
+    background-color: grey;
+    width: 1%;
+    height: 20px;
+    margin-top:1%;
+}
+
+#play-container {
+    -webkit-box-shadow: 6px 9px 78px -2px rgba(0,0,0,0.75);
+    -moz-box-shadow: 6px 9px 78px -2px rgba(0,0,0,0.75);
+    box-shadow: 6px 9px 78px -2px rgba(0,0,0,0.75);
+    margin: 0 auto;
+    margin-top: 1%;
+    background-color: white;
+    width: 80%;
+}
+
 body{
     background-color: lightgray; 
 }
@@ -98,4 +126,67 @@ nav{
 }
 .nav_links li:nth-child(4n) > a{
     background-color: #3da4ab;
-}
\ No newline at end of file
+}
+
+/* modal */
+
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    padding-top: 100px; /* Location of the box */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  }
+  
+  /* Modal Content */
+  .modal-content {
+    position: relative;
+    background-color: #fefefe;
+    margin: auto;
+    padding: 0;
+    border: 1px solid #888;
+    width: 80%;
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+    -webkit-animation-name: animatetop;
+    -webkit-animation-duration: 0.4s;
+    animation-name: animatetop;
+    animation-duration: 0.4s
+  }
+  
+  /* Add Animation */
+  @-webkit-keyframes animatetop {
+    from {top:-300px; opacity:0} 
+    to {top:0; opacity:1}
+  }
+  
+  @keyframes animatetop {
+    from {top:-300px; opacity:0}
+    to {top:0; opacity:1}
+  }
+  
+  .close:hover,
+  .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  
+  .modal-header {
+    padding: 2px 16px;
+    background-color: lightgrey;
+    color: black;
+  }
+  
+  .modal-body {padding: 2px 16px;}
+  
+  .modal-footer {
+    padding: 2px 16px;
+    background-color: lightgrey;
+    color: black;
+  }
\ No newline at end of file
diff --git a/site/js/const.js b/site/js/const.js
index 2e63dd6..6357940 100644
--- a/site/js/const.js
+++ b/site/js/const.js
@@ -20,4 +20,7 @@ const SwitchHeight = 25;
 const SwitchWidth = 50;
 const colorSwitchBorder = "black";
 const colorSwitchInnactiveBackground = "red";
-const colorSwitchActiveBackground = "green";
\ No newline at end of file
+const colorSwitchActiveBackground = "green";
+
+//timer
+const timeEnd = 15;
\ No newline at end of file
diff --git a/site/js/easytimer.min.js b/site/js/easytimer.min.js
new file mode 100644
index 0000000..ca9c46b
--- /dev/null
+++ b/site/js/easytimer.min.js
@@ -0,0 +1,7 @@
+/**
+ * easytimer.js
+ * Generated: 2019-12-22
+ * Version: 4.1.1
+ */
+
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).easytimer={})}(this,function(t){"use strict";function _(t){return(_="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function e(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,o)}return n}function z(r){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?e(Object(i),!0).forEach(function(t){var e,n,o;e=r,o=i[n=t],n in e?Object.defineProperty(e,n,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[n]=o}):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(i)):e(Object(i)).forEach(function(t){Object.defineProperty(r,t,Object.getOwnPropertyDescriptor(i,t))})}return r}function i(t,e,n){var o,r="";if((t="number"==typeof t?String(t):t).length>e)return t;for(o=0;o<e;o+=1)r+=String(n);return(r+t).slice(-r.length)}function R(){this.secondTenths=0,this.seconds=0,this.minutes=0,this.hours=0,this.days=0,this.toString=function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:["hours","minutes","seconds"],e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:":",n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:2;t=t||["hours","minutes","seconds"],e=e||":",n=n||2;var o,r=[];for(o=0;o<t.length;o+=1)void 0!==this[t[o]]&&("secondTenths"===t[o]?r.push(this[t[o]]):r.push(i(this[t[o]],n,"0")));return r.join(e)}}var n="undefined"!=typeof window?window.CustomEvent:void 0;"undefined"!=typeof window&&"function"!=typeof n&&((n=function(t,e){e=e||{bubbles:!1,cancelable:!1,detail:void 0};var n=document.createEvent("CustomEvent");return n.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),n}).prototype=window.Event.prototype,window.CustomEvent=n);var B="secondTenths",F="seconds",G="minutes",H="hours",J="days",K=[B,F,G,H,J],N={secondTenths:100,seconds:1e3,minutes:6e4,hours:36e5,days:864e5},Q={secondTenths:10,seconds:60,minutes:60,hours:24},W="undefined"!=typeof module&&module.exports&&"function"==typeof require?require("events"):void 0;function X(){return"undefined"!=typeof document}function Y(){return W}function Z(t,e){return(t%e+e)%e}function o(){var e,n,r,o,i,s,u,c,a,f,d=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},l=new R,h=new R,p=X()?document.createElement("span"):Y()?new W.EventEmitter:void 0,v=!1,y=!1,m={},b={detail:{timer:this}};function w(t,e){var n,o,r=h[e];return o=C(t,N[n=e]),h[n]=o,l[n]=n===J?o:0<=o?Z(o,Q[n]):Q[n]-Z(o,Q[n]),h[e]!==r}function t(){g(),function(){for(var t in l)l.hasOwnProperty(t)&&"number"==typeof l[t]&&(l[t]=0);for(var e in h)h.hasOwnProperty(e)&&"number"==typeof h[e]&&(h[e]=0)}()}function g(){clearInterval(e),e=void 0,y=v=!1}function O(t){I()?(a=E(),s=V(i.target)):D(t),function(){var t=N[n];if(S(P(Date.now())))return;e=setInterval(j,t),v=!0,y=!1}()}function E(){return P(Date.now())-h.secondTenths*N[B]*r}function j(){var t=P(Date.now());!function(t){t[B]&&M("secondTenthsUpdated",b);t[F]&&M("secondsUpdated",b);t[G]&&M("minutesUpdated",b);t[H]&&M("hoursUpdated",b);t[J]&&M("daysUpdated",b)}(T()),o(b.detail.timer),S(t)&&(U(),M("targetAchieved",b))}function T(t){var e=0<arguments.length&&void 0!==t?t:P(Date.now()),n=0<r?e-a:a-e,o={};return o[B]=w(n,B),o[F]=w(n,F),o[G]=w(n,G),o[H]=w(n,H),o[J]=w(n,J),o}function P(t){return Math.floor(t/N[n])*N[n]}function S(t){return s instanceof Array&&f<=t}function D(t){var e;n=function(t){if(function(t){return 0<=K.indexOf(t)}(t=typeof t==="string"?t:F))return t;throw new Error("Error in precision parameter: ".concat(t," is not a valid value"))}((t=t||{}).precision),o="function"==typeof t.callback?t.callback:function(){},c=!0===t.countdown,r=!0==c?-1:1,"object"===_(t.startValues)?(e=t.startValues,u=x(e),l.secondTenths=u[0],l.seconds=u[1],l.minutes=u[2],l.hours=u[3],l.days=u[4],h=L(u,h)):u=null,a=E(),T(),s="object"===_(t.target)?V(t.target):c?(t.target={seconds:0},V(t.target)):null,m={precision:n,callback:o,countdown:"object"===_(t)&&!0===t.countdown,target:s,startValues:u},i=t}function x(t){var e,n,o,r,i,s;if("object"===_(t))if(t instanceof Array){if(5!==t.length)throw new Error("Array size not valid");s=t}else{for(var u in t)if(K.indexOf(u)<0)throw new Error("Error in startValues or target parameter: ".concat(u," is not a valid input value"));s=[t.secondTenths||0,t.seconds||0,t.minutes||0,t.hours||0,t.days||0]}return e=s[0],n=s[1]+C(e,10),o=s[2]+C(n,60),r=s[3]+C(o,60),i=s[4]+C(r,24),s[0]=e%10,s[1]=n%60,s[2]=o%60,s[3]=r%24,s[4]=i,s}function C(t,e){var n=t/e;return n<0?Math.ceil(n):Math.floor(n)}function V(t){if(t){var e=L(s=x(t));return f=a+e.secondTenths*N[B]*r,s}}function L(t,e){var n=e||{};return n.days=t[4],n.hours=24*n.days+t[3],n.minutes=60*n.hours+t[2],n.seconds=60*n.minutes+t[1],n.secondTenths=10*n.seconds+t[[0]],n}function U(){t(),M("stopped",b)}function k(t,e){X()?p.addEventListener(t,e):Y()&&p.on(t,e)}function A(t,e){X()?p.removeEventListener(t,e):Y()&&p.removeListener(t,e)}function M(t,e){X()?p.dispatchEvent(new CustomEvent(t,e)):Y()&&p.emit(t,e)}function q(){return v}function I(){return y}D(d),void 0!==this&&(this.start=function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};t=z({},d,{},t),q()||(O(t),M("started",b))},this.pause=function(){g(),y=!0,M("paused",b)},this.stop=U,this.reset=function(){t(),O(i),M("reset",b)},this.isRunning=q,this.isPaused=I,this.getTimeValues=function(){return l},this.getTotalTimeValues=function(){return h},this.getConfig=function(){return m},this.addEventListener=k,this.on=k,this.removeEventListener=A,this.off=A)}t.Timer=o,t.default=o,Object.defineProperty(t,"__esModule",{value:!0})});
diff --git a/site/js/timer.js b/site/js/timer.js
new file mode 100644
index 0000000..e88912f
--- /dev/null
+++ b/site/js/timer.js
@@ -0,0 +1,29 @@
+function initTimer(){
+    var TimerElem = document.getElementById("progressBar");
+    TimerElem.style.width = "0%";
+    document.getElementById("timerend").innerHTML = timeEnd;
+}
+
+function move() {
+    var lapsPerSecond = 100/timeEnd;
+    var TimerElem = document.getElementById("progressBar");
+    TimerElem.style.width = (parseInt(TimerElem.style.width) + lapsPerSecond)+"%";
+}
+
+
+
+var timer = new easytimer.Timer();
+    timer.start();
+    timer.addEventListener('secondsUpdated', function (e) {
+      if(timer.getTimeValues().seconds <= timeEnd){
+        document.getElementById("timer").innerHTML = timer.getTimeValues().minutes.toString() +" m " + timer.getTimeValues().seconds.toString() + " s";
+        move();
+      }else{
+        endTime();
+        timer.stop();
+      }
+    });
+    function endTime(){
+        var modal = document.getElementById("myModal");
+        modal.style.display = "block";
+    }
\ No newline at end of file
diff --git a/site/vues/jeu.html b/site/vues/jeu.html
index 77aaadd..2cc5b11 100644
--- a/site/vues/jeu.html
+++ b/site/vues/jeu.html
@@ -9,6 +9,8 @@
   <script src="../js/logique.js"></script>
   <script src="../js/init.js"></script>
   <script src="../js/createElement.js"></script>
+  <script src="../js/easytimer.min.js"></script>
+  <script src="../js/timer.js"></script>
   <link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Bitter:wght@700&display=swap" rel="stylesheet">
   <meta charset="utf-8" />
@@ -16,45 +18,84 @@
 </head>
 
 <body>
-  <header>
-    <nav>
-      <ul class="nav_links">
-        <li><a href="#">Play</a></li>
-        <li><a href="#">Aide</a></li>
-        <li><a href="#">Editeur</a></li>
-        <li><a href="#">Records</a></li>
-      </ul>
-    </nav>
-  </header>
-  <div id="container"></div>
+
+  <!-- The Modal -->
+  <div id="myModal" class="modal">
+
+    <!-- Modal content -->
+    <div class="modal-content">
+      <div class="modal-header" align=center>
+        <br>
+        <h1>Game Over</h1>
+        <br>
+      </div>
+      <div class="modal-body" align=center>
+        <br>
+        <p>Temps total : 13 m 40 s</p>
+        <p>Temps moyen par niveau : 20.5s</p>
+        <p>Score moyen par niveau : 4.5</p>
+        <br>
+        <h2>Score total : 140</h2>
+        <br>
+        <input type="text" placeholder="Pseudo">
+        <button>Envoyer son score</button>
+        <br><br><br>
+      </div>
+      <div class="modal-footer">
+        <br>
+        <button onclick="window.location.href='index.html'">Home</button>
+        <br>
+        <br>
+      </div>
+    </div>
+  
+  </div>
+
+  <div id="header-container">
+    <h1 align=center>Niveau 26</h1>
+    <div align=center>
+      <a>Temps :</a>  
+      <a id="timer">0 m 0 s</a>
+      <a id="end"> / 0 m </a><a id="timerend">20</a><a> s</a> 
+    </div>
+      <div id="progressBar"></div>
+  </div>
+  <div id="play-container"></div>
   <script>
     var switchs = [], lineCount = [], logiques = [],lines = [], endLines = [],end;
 
     var layer = new Konva.Layer();
+    let container = document.getElementById('play-container');
+    container.style.height = innerHeight /100*80 + "px";
+    var width = container.offsetWidth;
+
+    initTimer();
 
     var stage = new Konva.Stage({
-      container: 'container',
+      container: 'play-container',
       /*rotation: -90,
       x: 20,
       y: 1000,*/
-      width: window.innerWidth,
+      width: width,
       height: window.innerHeight,
     });
     stage.add(layer);
 
     initLayer();
 
-    createLogique(200, 100, "logique1","et");
-    createLogique(300,200,"logique2","ou");
-    createLogique(500,300,"logique3","et");
-    createLogique(500,400,"logique4","et");
-    
+   
     createSwitch("s1", 20, 20);
     createSwitch("s2", 20, 90);
     createSwitch("s3", 20, 300);
     createSwitch("s4", 20, 500);
     createSwitch("s5", 20, 700);
     createSwitch("s6", 20, 600);
+    
+    createLogique(200, 100, "logique1","et");
+    createLogique(300,200,"logique2","ou");
+    createLogique(500,300,"logique3","et");
+    createLogique(500,400,"logique4","et");
+
     createLink(stage.findOne("#s5"), findLogique("logique4"));
     createLink(stage.findOne("#s6"), findLogique("logique4"));
     createLink(stage.findOne("#s3"), findLogique("logique2"));
@@ -66,8 +107,14 @@
     initAllSwitch();
     createEnd(800, 320);
     initEnd();
-      
-    
     </script>
+    <script>
+      var modal = document.getElementById("myModal");      
+      window.onclick = function(event) {
+        if (event.target == modal) {
+          modal.style.display = "none";
+        }
+      }
+      </script>
 </body>
 </html>
\ No newline at end of file