diff --git a/index.html b/index.html
new file mode 100644
index 0000000..94991c7
--- /dev/null
+++ b/index.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
+    <head>
+        <meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>SMETI store ITEMS</title>
+<link rel="stylesheet" href="css/carets.css">
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+</head>
+<body>
+
+<h2>SMETI store ITEMS</h2>
+
+<ul class="ul_no_list" id="smeti_list"></ul>
+
+<script>
+/*
+ *  A récuperer en JSON
+ */
+var liste_instructions = null;
+
+/* 
+ * Créer la hierarchie
+ */
+function setHierarchy() {
+  liste_instructions.forEach(function(element1){
+    liste_instructions.forEach(function(element2){
+      if (element1.parent == element2.id)
+      {
+        element1.parent_code = element2.code;
+        return false;
+      }
+    });
+  });
+}
+
+function afficherArbre()
+{
+  var heritage  = [ 'XXX' ];
+  var m14_ul    = [ document.getElementById('smeti_list') ];
+  var m14_span  = [ null ];
+
+  while(m14_ul[0].firstChild) m14_ul[0].removeChild(m14_ul[0].firstChild);
+
+  liste_instructions.forEach(function(element){
+    // if (element.instruction != 'M14')  return true;
+    // if (element.type != courant)  return true;
+
+    var letexte = '';
+      var li = document.createElement('li');
+      var span = document.createElement('span');
+      var ul = document.createElement('ul');
+      var len = heritage.length;
+      while(len-- > 1) {
+        if (element.parent_code == heritage[len]) 
+          break;
+        heritage.pop();
+        m14_ul.pop();
+        m14_span.pop();
+      }
+
+      span.setAttribute('class','caret_gris');
+      letexte += ' { '+element.id + ' } ';
+      letexte += '[ '+element.code + ' ]'
+      letexte += ' - ';
+      letexte += element.libelle
+      span.appendChild(document.createTextNode(letexte));
+      if (element.link == 1) span.setAttribute('style','color:grey');
+      li.appendChild(span);
+
+      ul.setAttribute('class','nested ul_no_list');
+      li.appendChild(ul);
+
+      m14_ul[m14_ul.length-1].appendChild(li);
+      if (m14_span.length > 1) 
+        m14_span[m14_span.length-1].setAttribute('class','caret');
+      m14_ul.push(ul);
+      m14_span.push(span);
+      heritage.push(element.code);
+  });
+
+  var toggler = document.getElementsByClassName("caret");
+  for (var i = 0; i < toggler.length; i++) {
+    toggler[i].addEventListener("click", function() {
+      this.parentElement.querySelector(".nested").classList.toggle("active");
+      this.classList.toggle("caret-down");
+    });
+  }
+}
+
+$( document ).ready(function() {
+
+  $.getJSON( "api/get.php", function( data ) {
+
+    liste_instructions = data;
+
+    liste_instructions.forEach(function(element){
+      element.instruction = 'M14';
+      element.type = 'Chapitre';
+      element.exercice = 2019;
+      element.libelle = element.name;
+    });
+
+    liste_instructions.sort(function(a, b) {
+
+      if (a.path < b.path) return -1;
+      if (a.path > b.path) return 1;
+
+      if (a.instruction < b.instruction) return -1;
+      if (a.instruction > b.instruction) return 1;
+
+      if (a.exercice < b.exercice) return -1;
+      if (a.exercice > b.exercice) return 1;
+
+      if (a.type < b.type) return -1;
+      if (a.type > b.type) return 1;
+
+      if (a.parent < b.parent) return -1;
+      if (a.parent > b.parent) return 1;
+
+      if (a.code < b.code) return -1;
+      if (a.code > b.code) return 1;
+
+      return 0;
+    });
+
+    setHierarchy();
+    afficherArbre();
+  });
+
+});
+
+</script>
+
+</body>
+</html>
