diff --git a/srcs/frontend/index.html b/srcs/frontend/index.html
new file mode 100644
index 0000000..c444bb5
--- /dev/null
+++ b/srcs/frontend/index.html
@@ -0,0 +1,26 @@
+
+
+
+
+ scribl.lidl_edition
+
+
+
+
+ scribl.lidl_edition
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/srcs/frontend/main.js b/srcs/frontend/main.js
deleted file mode 100644
index e69de29..0000000
diff --git a/srcs/frontend/script.js b/srcs/frontend/script.js
new file mode 100644
index 0000000..0d5a39e
--- /dev/null
+++ b/srcs/frontend/script.js
@@ -0,0 +1,148 @@
+function direBonjour() {
+ alert("clicked !");
+}
+
+class Element {
+ constructor(id) {
+ this.element = document.getElementById(id);
+ this.element.addEventListener("mouseenter", () => {
+ console.log("La souris est sur le bouton " + id + " !");
+ });
+ this.element.addEventListener("mouseleave", () => {
+ console.log("La souris a quitté le bouton " + id + ".");
+ });
+ }
+}
+
+class MenuElement extends Element {
+ constructor(id) {
+ super(id);
+ this.element.addEventListener("click", () => {
+ console.log("Le bouton " + id + " a été cliqué !");
+ });
+ this.element.addEventListener("mouseenter", () => {
+ this.element.style.backgroundColor = "lightgrey";
+ this.element.style.fontSize = "1.2em";
+ this.element.style.cursor = "move";
+ });
+ this.element.addEventListener("mouseleave", () => {
+ this.element.style.backgroundColor = "";
+ this.element.style.fontSize = "";
+ this.element.style.cursor = "";
+ this.element.getAnimations().forEach(animation => animation.cancel());
+ });
+ }
+}
+
+
+
+class Grid {
+ constructor(color = '#143a0fff', zIndex = 1, gridSize = 25, speed = 0.35, sens = "normal") {
+ // Initialisation des propriétés de l'instance
+ this.canvas = document.createElement('canvas');
+ this.ctx = this.canvas.getContext('2d');
+ this.offset = 0;
+ this.gridSize = gridSize;
+ this.speed = speed;
+ this.color = color;
+
+ // Configuration du style
+ document.body.appendChild(this.canvas);
+ this.canvas.style.position = 'fixed';
+ this.canvas.style.top = '0';
+ this.canvas.style.left = '0';
+ this.canvas.style.zIndex = zIndex;
+ this.canvas.style.pointerEvents = 'none'; // Pour ne pas bloquer les clics sur les boutons
+
+ // Gestion du redimensionnement
+ window.addEventListener('resize', () => this.resize());
+ this.resize();
+ this.draw(sens);
+ }
+
+ resize() {
+ this.canvas.width = window.innerWidth;
+ this.canvas.height = window.innerHeight;
+ }
+
+ draw(sens = "normal") {
+ this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+ this.ctx.strokeStyle = this.color;
+ this.ctx.lineWidth = 1;
+
+ // Mise à jour de l'offset
+ this.offset = (this.offset + this.speed) % this.gridSize;
+ if (sens === "normal") {
+ // Lignes verticales
+ for (let x = this.offset; x < this.canvas.width; x += this.gridSize) {
+ this.ctx.beginPath();
+ this.ctx.moveTo(x, 0);
+ this.ctx.lineTo(x, this.canvas.height);
+ this.ctx.stroke();
+ }
+
+ // Lignes horizontales
+ for (let y = this.offset; y < this.canvas.height; y += this.gridSize) {
+ this.ctx.beginPath();
+ this.ctx.moveTo(0, y);
+ this.ctx.lineTo(this.canvas.width, y);
+ this.ctx.stroke();
+ }
+ }
+ //pareillement pour le sens reverse
+ else if (sens === "reverse") {
+ // Lignes verticales
+ for (let x = this.gridSize - this.offset; x < this.canvas.width; x += this.gridSize) {
+ this.ctx.beginPath();
+ this.ctx.moveTo(x, 0);
+ this.ctx.lineTo(x, this.canvas.height);
+ this.ctx.stroke();
+ }
+ // Lignes horizontales
+ for (let y = this.gridSize - this.offset; y < this.canvas.height; y += this.gridSize) {
+ this.ctx.beginPath();
+ this.ctx.moveTo(0, y);
+ this.ctx.lineTo(this.canvas.width, y);
+ this.ctx.stroke();
+ }
+ }
+ // Appel récursif pour l'animation
+ requestAnimationFrame(() => this.draw(sens));
+ }
+
+}
+
+class fenetre{
+ constructor(width = 300, height = 150) {
+ this.width = width;
+ this.height = height;
+ this.main = document.createElement("div");
+ this.main.style.width = this.width + "px";
+ this.main.style.height = this.height + "px";
+ this.main.style.position = "absolute";
+ this.main.style.top = "50%";
+ this.main.style.left = "50%";
+ this.main.style.transform = "translate(-50%, -50%)";
+ this.main.style.backgroundColor = '#000000ff';
+ this.main.style.border = "1.4mm ridge white";
+ this.body = document.createElement("div");
+ this.body.style.width = "50%";
+ this.body.style.height = "50%";
+ this.body.style.backgroundColor = '#faeaea';
+ document.body.appendChild(this.main);
+ this.main.appendChild(this.body);
+ }
+}
+
+const menuElement = new Element("menu");
+const loginElement = new MenuElement("login");
+const registeredElement = new MenuElement("registered");
+const explorerElement = new MenuElement("explorer");
+const accueilElement = new MenuElement("accueil");
+
+// Lancement de la grille
+const gridgreen = new Grid('#143a0fff', -1, 25, 0.12, "normal");
+const gridReverseRed = new Grid('#3a0f0f75', -1, 12.5, 0.09, "reverse");
+
+//Ajouter les fenetres
+const loginWindow = new fenetre();
\ No newline at end of file
diff --git a/srcs/frontend/style.css b/srcs/frontend/style.css
new file mode 100644
index 0000000..e3a12f2
--- /dev/null
+++ b/srcs/frontend/style.css
@@ -0,0 +1,50 @@
+/* || General setup */
+
+html {
+ font-size: 10px;
+ background-color: rgb(0, 0, 0);
+}
+
+body {
+ margin: 0;
+ width: 70%;
+ min-width: 800px;
+ margin: 0 auto;
+}
+
+/* || typography */
+
+h1 {
+ position: absolute;
+ top: 0%;
+ left: 50%;
+ text-transform: uppercase;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 20px;
+ font-size: 4rem;
+ text-align: center;
+ text-shadow: 2px 2px 10px black;
+ z-index: 1;
+ font-family: "Cinzel Decorative", cursive;
+ color: #3cff01;
+}
+
+/* id */
+#menu{
+ position: fixed;
+ top: 0px;
+ left: 50px;
+ padding-inline-start: 0px;
+ z-index: 2;
+}
+
+#menu li {
+ list-style-type: none;
+}
+
+#loginWindow {
+ position: fixed;
+ z-index: 3;
+}