diff --git a/site/css/dys.otf b/site/css/dys.otf
new file mode 100644
index 0000000..1a7c9d4
Binary files /dev/null and b/site/css/dys.otf differ
diff --git a/site/css/main.TTF b/site/css/main.TTF
new file mode 100644
index 0000000..9c2323b
Binary files /dev/null and b/site/css/main.TTF differ
diff --git a/site/img/france.png b/site/img/france.png
new file mode 100644
index 0000000..a2864c1
Binary files /dev/null and b/site/img/france.png differ
diff --git a/site/img/usa.png b/site/img/usa.png
new file mode 100644
index 0000000..a064228
Binary files /dev/null and b/site/img/usa.png differ
diff --git a/site/index.php b/site/index.php
deleted file mode 100644
index e63197e..0000000
--- a/site/index.php
+++ /dev/null
@@ -1,7 +0,0 @@
-<?php
-	require_once(__DIR__.'/config/config.php');
-	require_once(__DIR__.'/config/Autoload.php');
-	Autoload::charger();
-	$con = new Connection('mysql:host=localhost;dbname=php','root','');
-	$cont = new FrontControleur();
-?>
diff --git a/site/vues/jeu2.html b/site/vues/jeu2.html
new file mode 100644
index 0000000..2798536
--- /dev/null
+++ b/site/vues/jeu2.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <link rel="stylesheet" type="text/css" href="../css/style.css">
+  <script src="https://unpkg.com/konva@6.0.0/konva.min.js"></script>
+  <script src="../js/const.js"></script>
+  <script src="../js/func.js"></script>
+  <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>
+  <script src="../js/creator.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" />
+  <title>Make It True</title>
+</head>
+
+<body>
+
+  <!-- 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 <a id="niveau">0</a></h1>
+    <div align=center>
+      <a>Temps :</a>  
+      <a id="timer">0 m 0 s</a>
+      <a id="timerend">20</a>
+    </div>
+      <div id="progressBar"></div>
+  </div>
+  <div id="play-container"></div>
+  <script>
+    var mobile = false;
+    var switchs = [], lineCount = [], logiques = [],lines = [], endLines = [],end, switchsInfo= [], switchsInfoCopy = [],lineRemove = [];
+
+    var niveauActuel = localStorage.getItem("niveau");
+    if(niveauActuel == null){
+      niveauActuel = 1;
+    }
+    let niveauhtml = document.getElementById('niveau');
+    niveauhtml.innerHTML = niveauActuel;
+
+    var layer = new Konva.Layer();
+    let container = document.getElementById('play-container');
+    container.style.height = innerHeight /100*80 + "px";
+    var width = container.offsetWidth;
+    var height = container.offsetHeight;
+
+    
+
+    var stage = new Konva.Stage({
+      container: 'play-container',
+      /*rotation: -90,
+      x: 20,
+      y: 1000,*/
+      width: width,
+      height: height,
+    });
+    stage.add(layer);
+
+    initLayer();
+
+    creatorRandomPyramid();
+    
+    checkAllSortieLogique();
+    </script>
+    <script>
+      var modal = document.getElementById("myModal");      
+      window.onclick = function(event) {
+        if (event.target == modal) {
+          modal.style.display = "none";
+        }
+      }
+
+      fitStageIntoParentContainer();
+
+      function fitStageIntoParentContainer() {
+        if(window.innerWidth < window.innerHeight && mobile == false){
+          stage.rotate(90);
+          stage.x(stage.getX() + stage.height());
+          stage.draw();
+          mobile=true;
+        }else if(mobile){
+          stage.rotate(0);
+          stage.draw();
+          mobile=true;
+        }
+        var container = document.querySelector('#play-container');
+
+        
+
+        // now we need to fit stage into parent
+        var containerWidth = container.offsetWidth;
+        // to do this we need to scale the stage
+        var scale = containerWidth / width;
+
+        stage.width(width * scale);
+        stage.height(height * scale);
+        stage.scale({ x: scale, y: scale });
+        stage.draw();
+      }
+      window.addEventListener('resize', fitStageIntoParentContainer);
+      </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/site/vues/menu.html b/site/vues/menu.html
new file mode 100644
index 0000000..c3db5f3
--- /dev/null
+++ b/site/vues/menu.html
@@ -0,0 +1,338 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">
+
+    <title>Make It True | Menu</title>
+</head>
+<style>
+    @font-face {
+        font-family: main;
+        src: url(../css/main.ttf);
+    }
+    @font-face {
+        font-family: dys;
+        src: url(../css/dys.otf);
+    }
+    *{
+        transition: .01s;
+    }
+
+    body{
+        font-family: main;
+    }
+
+    body {
+        background-color: #D7CCC8;
+    }
+
+    .title {
+        width: 100%;
+        text-align: center;
+        font-size: 8vh;
+    }
+
+    #menu-selection {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        margin: 25vh auto;
+        text-align: center;
+    }
+
+    .fa-play-circle {
+        font-size: 15vh;
+    }
+
+    .message {
+        font-size: 3vh;
+        margin-bottom: 7vh;
+    }
+
+    #jeu-select {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        cursor: pointer;
+        font-size: 3vh;
+        background-color: transparent;
+        border: none;
+        color: #fe8a71;
+    }
+
+    #jeu-select:focus {
+        outline: none;
+    }
+
+    #jeu-select option {
+        background-color: lightgray;
+        border: none;
+    }
+
+    .btn_play ul {
+        text-align: center;
+        list-style: none;
+    }
+
+    .fa-cog {
+        font-size: 5vh;
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        margin: 4vh;
+        transition: .5s;
+    }
+
+    .fa-cog:hover {
+        font-size: 6vh;
+    }
+
+    i:hover {
+        cursor: pointer;
+    }
+
+    .modal {
+        display: none;
+        position: fixed;
+        z-index: 1;
+        padding-top: 100px;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        background-color: rgb(0, 0, 0);
+        background-color: rgba(0, 0, 0, 0.4);
+    }
+
+    .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
+    }
+
+    @-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;
+    }
+
+    img {
+        height: 50px;
+        transition: .5s;
+    }
+
+    img:hover {
+        height: 60px;
+        cursor: pointer;
+    }
+</style>
+
+<body id="body">
+    <div id="menu">
+        <p id="titleGame" class="title txt">Make It True</p>
+    </div>
+    <div class="btn_play" id="menu-selection">
+        <ul>
+            <li>
+                <div class="message">
+                    <a class="txt" id="playSelection">Je veux jouer a </a>
+                    <select id="jeu-select">
+                        <option value="aleatoire" class="txt" id="mode1">Aleatoire</option>
+                        <option value="perso" class="txt" id="mode2">Niveau Perso</option>
+                    </select>
+                </div>
+            </li>
+            <li>
+                <a onclick="play()"><i class="far fa-play-circle"></i></a>
+            </li>
+        </ul>
+    </div>
+    <a onclick="setting();"><i class="fa fa-cog" id="setting" aria-hidden="true"></i></a>
+    <div id="myModal" class="modal">
+
+        <div class="modal-content">
+            <div class="modal-header" align=center>
+                <br>
+                <h1 class="txt" id="settingTitle">Parametres</h1>
+                <br>
+            </div>
+            <div id="setting_int" class="modal-body" align=center>
+                <br>
+                <p>
+                    <a class="txt" id="themeDark">Theme dark</a> 
+                    <input id="darkcheck" type="checkbox" onclick="darkMode()"></p>
+                <p>
+                    <a class="txt" id="dysfont">DYSLEXIE</a> 
+                    <input id="dyscheckbox" type="checkbox" onclick="dysFont()"></p>
+                <br>
+                <br><img onclick="setLang('fr')" style="margin-right:50px" src="../img/france.png" />
+                <img onclick="setLang('en')" src="../img/usa.png" /><br><br>
+            </div>
+            <div class="modal-footer">
+                <br>
+                <button onclick="modal.style.display = 'none';" class="txt" id="retour">Retour</button>
+                <br>
+                <br>
+            </div>
+        </div>
+
+    </div>
+</body>
+<script>
+
+    function play(){
+        //document.location.href="jeu2.html"; 
+    }
+
+    var modal = document.getElementById("myModal");
+    function setting() {
+        var modal = document.getElementById("myModal");
+        modal.style.display = "block";
+
+    }
+    function closeSetting() {
+        var modal = document.getElementById("myModal");
+        if (event.target == modal) {
+            modal.style.display = "none";
+        }
+    }
+    window.onclick = function (event) {
+        closeSetting();
+    }
+
+    function darkMode() {
+        var checkbox = document.getElementById("darkcheck");
+        if (checkbox.checked == true) {
+            setColor("black");
+        }
+        else {
+            setColor("white");
+        }
+    }
+    function dysFont() {
+        var checkbox = document.getElementById("dyscheckbox");
+        var textToChange = document.querySelectorAll(".txt");
+        var font;
+        if (checkbox.checked == true) {
+            font = "dys";
+        }
+        else {
+            font = "main";
+        }
+        textToChange.forEach(function (item) {
+            let currText = item.id;
+            document.getElementById(currText).style.fontFamily = font;
+        })
+        document.getElementById("jeu-select").style.fontFamily = font;
+    }
+
+    function setColor(color) {
+        if (color == "black") {
+            document.body.style.color = "white";
+            document.getElementById("body").style.backgroundColor = "black";
+            document.getElementById("setting_int").style.color = "white";
+            document.getElementById("setting_int").style.backgroundColor = "black";
+
+        } else {
+            document.body.style.color = "black";
+            document.getElementById("body").style.backgroundColor = "#D7CCC8";
+            document.getElementById("setting_int").style.color = "black";
+            document.getElementById("setting_int").style.backgroundColor = "white";
+        }
+    }
+    const lang = {
+        fr: {
+            titleGame: "Make It True",
+            settingTitle: "Parametres",
+            playSelection: "Je veux jouer a",
+            mode1: "Aleatoire",
+            mode2: "Niveau Perso",
+            themeDark: "Theme Dark :",
+            retour: "Retour",
+            dysfont: "Dyslexie :",
+        },
+        en: {
+            titleGame: "Make It True",
+            settingTitle: "Settings",
+            playSelection: "I want to play ",
+            mode1: "Random",
+            mode2: "Perso Level",
+            themeDark: "Dark Theme :",
+            retour: "Back",
+            dysfont:"Dyslexia :"
+        }
+    }
+    function setLang(newLang) {
+        var textToChange = document.querySelectorAll(".txt");
+        if (newLang === "fr") {
+            textToChange.forEach(function (item) {
+                let currText = item.id;
+                document.getElementById(currText).innerHTML = lang.fr[currText];
+            })
+        }
+        else {
+            textToChange.forEach(function (item) {
+                let currText = item.id;
+                document.getElementById(currText).innerHTML = lang.en[currText];
+            })
+        }
+    }
+    setLang("fr");
+    dysFont();
+</script>
+
+</html>
\ No newline at end of file
