diff --git a/KeepToine/generic.css b/KeepToine/generic.css
new file mode 100644
index 0000000..a95b229
--- /dev/null
+++ b/KeepToine/generic.css
@@ -0,0 +1,33 @@
+*, html, body{
+ margin: auto;
+}
+
+table{
+ width: 90%;
+}
+
+.s10 {
+ width: 10%;
+}
+
+.s20 {
+ width: 20%;
+}
+
+.s30 {
+ width: 30%;
+}
+
+.s40 {
+ width: 40%;
+}
+
+.debug {
+ position: fixed;
+ display: block;
+ bottom: 0;
+ width: 100%;
+ padding: 15px;
+ background-color: rgba(200, 10, 10, 0.5);
+ color: rgba(255, 255, 255, 1);
+}
\ No newline at end of file
diff --git a/KeepToine/index.html b/KeepToine/index.html
new file mode 100644
index 0000000..ceff3f9
--- /dev/null
+++ b/KeepToine/index.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+ Keep
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/KeepToine/keep.js b/KeepToine/keep.js
new file mode 100644
index 0000000..94ce5e6
--- /dev/null
+++ b/KeepToine/keep.js
@@ -0,0 +1,65 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const EXTENSION_TITLE = "KeepNote";
+ const EXTENSION_DESC = "Application de prise de note.";
+
+ const PT_TH_ID = "Numéro de note";
+ const PT_TH_NAME = "Nom";
+ const PT_TH_ACTIONS = "Actions";
+
+ //const DATA_FILE = "keep.json";
+
+ let DEBUG_TXT = "";
+
+ const BODY = document.querySelector("body");
+
+ const LoadData = () => {
+ return fetch("./data.json")
+ .then((response) => response.json())
+ .then((result) => {
+ return {
+ id: result.id,
+ name: result.name,
+ };
+ });
+ };
+
+ DEBUG_TXT += LoadData;
+
+ GenerateDisplay();
+
+ GenerateDebug();
+
+ function GenerateDisplay(){
+ // |-> On selectionne les élement HTML à implémenter
+
+ // Le titre et la description de l'app
+ let title = document.querySelector("#extension-title");
+ let desc = document.querySelector("#extension-description");
+
+ // Le tableau regroupant les notes
+ let pt_th_id = document.querySelector("#pt_th-id");
+ let pt_th_name = document.querySelector("#pt_th-name");
+ let pt_th_actions = document.querySelector("#pt_th-actions");
+
+ // |-> On applique les changements
+
+ // le titre et la description de l'app
+ title.innerText = EXTENSION_TITLE;
+ desc.innerText = EXTENSION_DESC;
+
+ // Le tableau regroupant les notes
+ pt_th_id.innerText = PT_TH_ID;
+ pt_th_name.innerText = PT_TH_NAME;
+ pt_th_actions.innerText = PT_TH_ACTIONS;
+ }
+
+ function GenerateDebug(){
+ if(DEBUG_TXT === "" || DEBUG_TXT == null) return;
+
+ // |-> On ajoute les infos de debug
+ debug_txt = document.createElement("div");
+ debug_txt.classList += "debug";
+ debug_txt.innerHTML = `${DEBUG_TXT}`;
+ BODY.appendChild(debug_txt);
+ }
+});
\ No newline at end of file