From 35966e3c86b088fde3fc8167798ea68883740984 Mon Sep 17 00:00:00 2001 From: bitsearch Date: Wed, 7 Jan 2026 00:14:20 +0100 Subject: [PATCH] simple page --- srcs/frontend/index.html | 26 +++++++ srcs/frontend/main.js | 0 srcs/frontend/script.js | 148 +++++++++++++++++++++++++++++++++++++++ srcs/frontend/style.css | 50 +++++++++++++ 4 files changed, 224 insertions(+) create mode 100644 srcs/frontend/index.html delete mode 100644 srcs/frontend/main.js create mode 100644 srcs/frontend/script.js create mode 100644 srcs/frontend/style.css 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; +}