Version 0.1.1 - Ajout d'une page de login et de style

2023-10-31 17:00:25 +01:00
parent 99f0392a6c
commit 98a6480830
20 changed files with 520 additions and 115 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -130,3 +130,5 @@ dist
 .yarn/install-state.gz
 .pnp.*

+#data
+./data/
--- a/bin/global-variables.js
+++ b/bin/global-variables.js
@@ -2,7 +2,9 @@ const path = require("path");
 const root = path.resolve(__dirname, '../')

 const __glob = {
-    ROUTES: root + path.sep + "routes" + path.sep
+    ROUTES: root + path.sep + "routes" + path.sep,
+    ROOT: root,
+    LOGS: root + path.sep + "logs"
 };


--- a/bin/www
+++ b/bin/www
@@ -3,11 +3,19 @@
 /**
 * Module dependencies.
 */
+var log = require("loguix")
+var {LogType} = require("loguix")
+var { __glob } = require("./global-variables")
+log.setup(__glob.LOGS)
+const wlog = new LogType("Web")
+wlog.step.init("start_server",  "Démarrage du serveur Express JS")

 var app = require('../main');
 var debug = require('debug')('neutral:server');
 var http = require('http');

+
+
 /**
 * Get port from environment and store in Express.
 */
@@ -25,6 +33,7 @@ var server = http.createServer(app);
 * Listen on provided port, on all network interfaces.
 */

+
 server.listen(port);
 server.on('error', onError);
 server.on('listening', onListening);
@@ -65,11 +74,11 @@ function onError(error) {
  // handle specific listen errors with friendly messages
  switch (error.code) {
    case 'EACCES':
-      console.error(bind + ' requires elevated privileges');
+      wlog.step.error("start_server", bind + ' requires elevated privileges');
      process.exit(1);
      break;
    case 'EADDRINUSE':
-      console.error(bind + ' is already in use');
+      wlog.step.error("start_server" , bind + ' is already in use');
      process.exit(1);
      break;
    default:
@@ -86,5 +95,5 @@ function onListening() {
  var bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
-  debug('Listening on ' + bind);
+    wlog.step.end("start_server")
 }
--- a/main.js
+++ b/main.js
@@ -5,11 +5,18 @@ const cookieParser = require('cookie-parser');
 const app = express();
 const fs = require("fs");
 const { __glob } = require('./bin/global-variables');
+const log = require("loguix")
+
+var wlog = log.getInstance("Web")
+
+

 setup()

+
 function getRouters() {

+  wlog.log("Récupération de " + fs.readdirSync(__glob.ROUTES).length + " routeurs")
   for(var route of fs.readdirSync(__glob.ROUTES)) {

      if(route == "index.js") {
@@ -30,6 +37,7 @@ function setup() {
  app.set('view engine', 'ejs');


+
  app.use(express.json());
  app.use(express.urlencoded({ extended: false }));
  app.use(cookieParser());
@@ -39,7 +47,15 @@ function setup() {

  // catch 404 and forward to error handler
  app.use(function(req, res, next) {
-    next(createError(404));
+    res.locals.message = "Page non trouvé";
+    res.locals.error = {
+      "status": "404",
+      "stack": ""
+    }
+
+    // render the error page
+    res.status(404 || 404);
+    res.render('utils/error');
  });

  // error handler
@@ -50,7 +66,7 @@ function setup() {

    // render the error page
    res.status(err.status || 500);
-    res.render('error');
+    res.render('utils/error');
  });


--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
        "ejs": "~2.6.1",
        "express": "~4.16.1",
        "http-errors": "~1.6.3",
-        "loguix": "^1.2.0",
+        "loguix": "1.4.1",
        "nodemon": "^3.0.1"
      }
    },
@@ -446,9 +446,9 @@
      }
    },
    "node_modules/loguix": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/loguix/-/loguix-1.2.0.tgz",
-      "integrity": "sha512-6ITC4SzqPG/R/uWr0HCGYybeciWk/GV7gZYOOxkES6DGVI5FcHK0UWOf8yczt2eXg+riLyT79HJQJwh10hVqFw=="
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/loguix/-/loguix-1.4.1.tgz",
+      "integrity": "sha512-lLBMc4ue37BLCIhtxBsp0PEbhOgf0DtHjYnJPoHkfUtO6T5sLy+kFwySKih0cEJgt1nmi1OMMoCEVYCqNnuODg=="
    },
    "node_modules/lru-cache": {
      "version": "6.0.0",
@@ -1179,9 +1179,9 @@
      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
    },
    "loguix": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/loguix/-/loguix-1.2.0.tgz",
-      "integrity": "sha512-6ITC4SzqPG/R/uWr0HCGYybeciWk/GV7gZYOOxkES6DGVI5FcHK0UWOf8yczt2eXg+riLyT79HJQJwh10hVqFw=="
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/loguix/-/loguix-1.4.1.tgz",
+      "integrity": "sha512-lLBMc4ue37BLCIhtxBsp0PEbhOgf0DtHjYnJPoHkfUtO6T5sLy+kFwySKih0cEJgt1nmi1OMMoCEVYCqNnuODg=="
    },
    "lru-cache": {
      "version": "6.0.0",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "neutral",
-  "version": "0.1.0",
+  "version": "0.1.1",
  "description": "Panel d'administration de Raphix",
  "main": "index.js",
  "scripts": {
@@ -24,7 +24,7 @@
    "ejs": "~2.6.1",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
-    "loguix": "^1.2.0",
+    "loguix": "1.4.1",
    "nodemon": "^3.0.1"
  },
  "author": "Raphix",
--- a/public/images/FontLogo.png
+++ b/public/images/FontLogo.png
--- a/public/images/FormatLogo_BLACK.png
+++ b/public/images/FormatLogo_BLACK.png
--- a/public/images/FormatLogo_BLACK.svg
+++ b/public/images/FormatLogo_BLACK.svg
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 481.43 481.43">
+  <defs>
+    <style>
+      .cls-1 {
+        stroke-width: 40px;
+      }
+
+      .cls-1, .cls-2, .cls-3, .cls-4, .cls-5 {
+        stroke: #1d1d1b;
+        stroke-miterlimit: 10;
+      }
+
+      .cls-1, .cls-3, .cls-5 {
+        fill: none;
+      }
+
+      .cls-2, .cls-3 {
+        stroke-width: 2px;
+      }
+
+      .cls-2, .cls-4 {
+        fill: #1d1d1b;
+      }
+
+      .cls-5 {
+        stroke-width: 10px;
+      }
+    </style>
+  </defs>
+  <circle class="cls-1" cx="240.78" cy="240.65" r="190.13"/>
+  <circle class="cls-1" cx="240.78" cy="240.65" r="112.42"/>
+  <circle class="cls-5" cx="240.78" cy="240.65" r="52"/>
+  <circle class="cls-5" cx="240.78" cy="240.65" r="36"/>
+  <circle class="cls-3" cx="240.78" cy="240.65" r="17.5"/>
+  <line class="cls-2" x1="240.78" y1="187.65" x2="240.78" y2="204.13"/>
+  <line class="cls-2" x1="293.78" y1="240.65" x2="276.29" y2="240.65"/>
+  <path class="cls-2" d="m228.23,252.44c-3.81,3.81-7.62,7.62-11.43,11.43"/>
+  <path class="cls-4" d="m240.05,7.01c7.99,14.68,16.4,32.59,23.67,53.57,6.88,19.85,11.25,38.14,14.07,53.93-9.15-2.76-22.44-5.68-38.61-5.59-15.41.08-28.12,2.87-37.04,5.55,2.78-15.73,7.13-34.02,14.04-53.88,7.32-21.05,15.82-38.96,23.86-53.57Z"/>
+  <path class="cls-4" d="m240.86,474.3c7.99-14.68,16.4-32.59,23.67-53.57,6.88-19.85,11.25-38.14,14.07-53.93-9.15,2.76-22.44,5.68-38.61,5.59-15.41-.08-28.12-2.87-37.04-5.55,2.78,15.73,7.13,34.02,14.04,53.88,7.32,21.05,15.82,38.96,23.86,53.57Z"/>
+  <path class="cls-4" d="m7.05,240.83c14.68-7.99,32.59-16.4,53.57-23.67,19.85-6.88,38.14-11.25,53.93-14.07-2.76,9.15-5.68,22.44-5.59,38.61.08,15.41,2.87,28.12,5.55,37.04-15.73-2.78-34.02-7.13-53.88-14.04-21.05-7.32-38.96-15.82-53.57-23.86Z"/>
+  <path class="cls-4" d="m474.27,240.61c-14.68-7.99-32.59-16.4-53.57-23.67-19.85-6.88-38.14-11.25-53.93-14.07,2.76,9.15,5.68,22.44,5.59,38.61-.08,15.41-2.87,28.12-5.55,37.04,15.73-2.78,34.02-7.13,53.88-14.04,21.05-7.32,38.96-15.82,53.57-23.86Z"/>
+  <line class="cls-2" x1="203.8" y1="240.69" x2="186.31" y2="240.69"/>
+  <line class="cls-2" x1="240.78" y1="275.18" x2="240.78" y2="291.66"/>
+  <path class="cls-2" d="m264.13,216.54c-3.94,3.94-7.87,7.87-11.81,11.81"/>
+  <g>
+    <path class="cls-2" d="m253.02,253.15c3.81,3.81,7.62,7.62,11.43,11.43"/>
+    <path class="cls-2" d="m217.12,217.25c3.94,3.94,7.87,7.87,11.81,11.81"/>
+  </g>
+</svg>
--- a/public/images/FormatLogo_WHITE.png
+++ b/public/images/FormatLogo_WHITE.png
--- a/public/images/FormatLogo_WHITE.svg
+++ b/public/images/FormatLogo_WHITE.svg
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 481.43 481.43">
+  <defs>
+    <style>
+      .cls-1 {
+        stroke-width: 40px;
+      }
+
+      .cls-1, .cls-2, .cls-3, .cls-4, .cls-5 {
+        stroke: #ffffff;
+        stroke-miterlimit: 10;
+      }
+
+      .cls-1, .cls-3, .cls-5 {
+        fill: none;
+      }
+
+      .cls-2, .cls-3 {
+        stroke-width: 2px;
+      }
+
+      .cls-2, .cls-4 {
+        fill: #ffffff;
+      }
+
+      .cls-5 {
+        stroke-width: 10px;
+      }
+    </style>
+  </defs>
+  <circle class="cls-1" cx="240.78" cy="240.65" r="190.13"/>
+  <circle class="cls-1" cx="240.78" cy="240.65" r="112.42"/>
+  <circle class="cls-5" cx="240.78" cy="240.65" r="52"/>
+  <circle class="cls-5" cx="240.78" cy="240.65" r="36"/>
+  <circle class="cls-3" cx="240.78" cy="240.65" r="17.5"/>
+  <line class="cls-2" x1="240.78" y1="187.65" x2="240.78" y2="204.13"/>
+  <line class="cls-2" x1="293.78" y1="240.65" x2="276.29" y2="240.65"/>
+  <path class="cls-2" d="m228.23,252.44c-3.81,3.81-7.62,7.62-11.43,11.43"/>
+  <path class="cls-4" d="m240.05,7.01c7.99,14.68,16.4,32.59,23.67,53.57,6.88,19.85,11.25,38.14,14.07,53.93-9.15-2.76-22.44-5.68-38.61-5.59-15.41.08-28.12,2.87-37.04,5.55,2.78-15.73,7.13-34.02,14.04-53.88,7.32-21.05,15.82-38.96,23.86-53.57Z"/>
+  <path class="cls-4" d="m240.86,474.3c7.99-14.68,16.4-32.59,23.67-53.57,6.88-19.85,11.25-38.14,14.07-53.93-9.15,2.76-22.44,5.68-38.61,5.59-15.41-.08-28.12-2.87-37.04-5.55,2.78,15.73,7.13,34.02,14.04,53.88,7.32,21.05,15.82,38.96,23.86,53.57Z"/>
+  <path class="cls-4" d="m7.05,240.83c14.68-7.99,32.59-16.4,53.57-23.67,19.85-6.88,38.14-11.25,53.93-14.07-2.76,9.15-5.68,22.44-5.59,38.61.08,15.41,2.87,28.12,5.55,37.04-15.73-2.78-34.02-7.13-53.88-14.04-21.05-7.32-38.96-15.82-53.57-23.86Z"/>
+  <path class="cls-4" d="m474.27,240.61c-14.68-7.99-32.59-16.4-53.57-23.67-19.85-6.88-38.14-11.25-53.93-14.07,2.76,9.15,5.68,22.44,5.59,38.61-.08,15.41-2.87,28.12-5.55,37.04,15.73-2.78,34.02-7.13,53.88-14.04,21.05-7.32,38.96-15.82,53.57-23.86Z"/>
+  <line class="cls-2" x1="203.8" y1="240.69" x2="186.31" y2="240.69"/>
+  <line class="cls-2" x1="240.78" y1="275.18" x2="240.78" y2="291.66"/>
+  <path class="cls-2" d="m264.13,216.54c-3.94,3.94-7.87,7.87-11.81,11.81"/>
+  <g>
+    <path class="cls-2" d="m253.02,253.15c3.81,3.81,7.62,7.62,11.43,11.43"/>
+    <path class="cls-2" d="m217.12,217.25c3.94,3.94,7.87,7.87,11.81,11.81"/>
+  </g>
+</svg>
--- a/public/javascripts/basics.js
+++ b/public/javascripts/basics.js
@@ -0,0 +1,35 @@
+// Get Document ID
+
+function getID(string) {
+
+    return document.getElementById(string)
+}
+
+class InfoPop {
+    constructor(name) {
+        this.name = name
+        this.element = getID(this.name)
+        this.element.style.fontSize = "14px"
+
+    }
+
+    clear() {
+
+        this.element.innerHTML = ""
+    }
+    
+    err(text) {
+     
+        this.element.classList.add("yellow")
+        this.element.innerHTML = "<i class='fa fa-warning'></i> " + text
+
+    }
+
+    info(text) {
+   
+        this.element.classList.remove("yellow")
+
+        this.element.innerHTML = "<i class='fa fa-info-circle'></i> " + text
+    }
+
+}
--- a/public/javascripts/loginscript.js
+++ b/public/javascripts/loginscript.js
@@ -0,0 +1,22 @@
+const username = getID("username")
+const password = getID("password")
+const submit = getID("submit")
+
+const loginInfo = new InfoPop("login-info")
+
+loginInfo.clear()
+
+submit.addEventListener("click", () => {
+
+    if(!username.value) {
+
+        loginInfo.err("Le nom d'utilisateur est nécéssaire pour se connecter !")
+
+    } else if(!password.value) {
+
+        loginInfo.err("Le mot de passe est nécéssaire pour se connecter !")
+    } else {
+
+        loginInfo.clear()
+    }
+})
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -1,11 +1,17 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

 body {
  padding: 2%;
-  background-color: #323031;
+  background: linear-gradient(120deg, #323031 40%, rgba(241,0,0,1) 100%);
  color: white;
-  font-size: 1vw;
+  font-size: 20px;
  font-family: 'Roboto', sans-serif !important;
+  
+}
+
+html {
+  min-height: 100%;
+  margin: 0;
 }

 /*Button*/
@@ -19,7 +25,7 @@ body {
  color: currentColor;
  padding: 0.5vw;
  transition: 0.2s;
-  
+  cursor: pointer;
 }

 .btn span {
@@ -48,20 +54,27 @@ body {
 
 }

+.btn span a {
+  text-decoration: none;
+}
+
 /* Miniaturiez Button */

 .min {

-  width: 2vw !important;
-  height: 2vw !important;
+  width: 40px !important;
+  height: 40px !important;
  border-radius: 100% !important;
  font-size: 1vw !important;
-  display: flex;
-  justify-content: center;
-  align-items: center;
  transition: 0.2s;
+  padding: 0 !important;
 }
  
+.min span {
+
+  font-size: 20px !important;
+
+}



@@ -69,7 +82,7 @@ body {

 .red {

-  color: rgb(255, 63, 63) !important; 
+  color: #f01000!important; 
 }

 .blue {
@@ -85,4 +98,185 @@ body {
 .green {

  color: rgb(64, 248, 64) !important;
+}
+
+/*Balise Properties*/
+
+code {
+
+  background-color: #3D3B3C;
+  padding: 0.3vw;
+  border-radius: 0.5vw;
+}
+
+p {
+  margin-block-start: 0.5em !important;
+  margin-block-end: 0.5em !important;
+}
+
+a {
+  color: currentColor;
+}
+
+/*Lists*/
+
+.center {
+
+  text-align: center !important;
+  
+
+}
+
+.col {
+
+  display: flex;
+  flex-direction: column;
+  gap: 2vw;
+
+}
+
+@media (max-width: 500px) {
+
+  .row {
+
+  
+    display: flex;
+    flex-direction: column;
+    gap: 2vw;
+  
+  }
+  
+} 
+
+@media (min-width: 500px) {
+
+.row {
+
+  
+  display: flex;
+  flex-direction: row;
+  gap: 2vw;
+  
+}
+
+}
+
+/* Fields */
+
+.field {
+
+  width: fit-content;
+  border-radius: 5px;
+  padding-bottom: 0.3vw;
+  padding-top: 0.3vw;
+  padding-left: 0.5vw;
+  border: 1px solid white;
+  background-color: transparent;
+  transition: 0.2s;
+  color: white;
+}
+
+.field:focus {
+  color: black;
+  outline: none;
+  background-color: white;
+  box-shadow: 0px 0px 8px #C1BDB3 ;
+}
+
+
+
+
+/* Logo */
+
+@media (max-width: 640px) {
+
+  .logo {
+
+    font-family: 'Gunship', sans-serif;
+    text-shadow: 0px 0px 10px #ffffff;
+    font-size: 50px;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .logo-img {
+  
+    width: 70px;
+    margin-right: 10px;
+  }
+  
+  
+} 
+
+@media (min-width: 640px) {
+
+  .logo {
+
+    font-family: 'Gunship', sans-serif;
+    text-shadow: 0px 0px 10px #ffffff;
+    font-size: 50px;
+    display: flex;
+
+    justify-content: center;
+    text-align: center;
+    align-items: center;
+  }
+  
+  .logo-img {
+  
+    width: 70px;
+    margin-right: 10px;
+  }
+  
+
+}
+
+
+
+/* Form Box */
+
+
+.form-box {
+
+  width: 500px;
+  height: 400px;
+  border-radius: 0.5vw;
+  display: flex;
+  padding: 2%;
+  flex-direction: column;
+  justify-content: space-between;
+  background-color: #605e5863;
+}
+
+.m-align {
+
+    margin-right: auto !important;
+    margin-left: auto !important;
+}
+
+.t-center {
+
+  text-align: center;
+}
+
+
+/* LOGIN Specs */
+
+.LOG_btn {
+
+  margin-top: 2%;
+  margin-bottom: 2%;
+}
+
+.LOG_body {
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    padding: 0 !important;
+    margin: 0 !important;
 }
--- a/routes/login.js
+++ b/routes/login.js
@@ -0,0 +1,9 @@
+var express = require('express');
+var router = express.Router();
+
+/* GET home page. */
+router.get('/', function(req, res, next) {
+  res.render('login');
+});
+
+module.exports = router;
--- a/routes/stylepage.js
+++ b/routes/stylepage.js
@@ -3,7 +3,7 @@ var router = express.Router();

 /* GET home page. */
 router.get('/', function(req, res, next) {
-  res.render('stylepage');
+  res.render('utils/stylepage');
 });

 module.exports = router;
--- a/views/login.ejs
+++ b/views/login.ejs
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Neutral</title>
+    <link rel='stylesheet' href='/stylesheets/style.css' />
+  </head>
+  <body class="LOG_body">
+    <div class=" form-box m-align t-center">
+        
+        <div class="logo"><img class="logo-img" src="/images/FormatLogo_WHITE.svg"><p>Neutral</p></div>
+        <div>
+          <p>Nom d'utilisateur</p>
+          <input id="username" type="text" class="field  m-align">
+        </div>
+        <div>
+          <p>Mot de passe</p>
+          <input id="password" type="password" class="field  m-align">
+        </div>
+        <p id="login-info"></p>
+        <button id="submit" class="btn green m-align LOG_btn"><span><i class="fa-solid fa-right-to-bracket"></i> Connexion</span></button>
+    </div>
+    
+    <script defer="" src="https://use.fontawesome.com/releases/v6.4.2/js/all.js" crossorigin="anonymous"></script>
+    <script src="/javascripts/basics.js"></script>
+    <script src="/javascripts/loginscript.js"></script>
+ 
+  </body>
+</html>
--- a/views/stylepage.ejs
+++ b/views/stylepage.ejs
@@ -1,70 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Neutral</title>
-    <link rel='stylesheet' href='/stylesheets/style.css' />
-  </head>
-  <body>
-    <h1>Neutral - Style Page</h1>
-    <p>Welcome to Neutral</p>
-
-    <p>Police : 'Roboto', sans-serif </p>
-    <style>
-      .box-color {
-
-        width: 5vw;
-        height: 5vw;
-        transition: 0.2s;
-        border: 1px solid;
-      }
-
-      .box-color:hover {
-
-        transform: scale(1.1);
-      }
-
-      .box-color:active {
-
-        transform: scale(1);
-        color: rgb(58, 255, 3);
-      }
-
-
-      button {
-        width: fit-content ;
-      }
-
-      .list-items {
-
-        display: flex;
-        flex-direction: column;
-        gap: 2vw;
-      }
-    </style>
-
-    <div class="list-items">
-    <button class="btn red"><span>Error Button</span></button>
-    <button class="btn blue "><span>Info Button</span></button>
-    <button class="btn yellow"><span>Warning Button</span></button>
-    <button class="btn green"><span>Confirm Button</span></button>
-    <button class="btn"><span>Default Button</span></button>
-    <button class="btn min red"><span><i class="fa fa-x"></i></span></button>
-    <button class="btn min blue"><span><i class="fa fa-info"></i></span></button>
-    <button class="btn min"><span><i class="fa fa-def"></i></span></button>
-    <div onclick="copyToClipboard('#323031')" style='background-color: #323031;' class="box-color"><p style="text-align: center;">#323031</p></div>
-    <div onclick="copyToClipboard('#3D3B3C')" style='background-color: #3D3B3C;' class="box-color"><p style="text-align: center;">#3D3B3C</p></div>
-    <div onclick="copyToClipboard('#7F7979')" style='background-color: #7F7979;' class="box-color"><p style="text-align: center;">#7F7979</p></div>
-    <div onclick="copyToClipboard('#C1BDB3')" style='background-color: #C1BDB3;' class="box-color"><p style="text-align: center;">#C1BDB3</p></div>
-    <div onclick="copyToClipboard('#5f5b6b')" style='background-color: #5f5b6b;' class="box-color"><p style="text-align: center;">#5F5B6B</p></div>
-    </div>
-
-    <script>
-      function copyToClipboard(text) {
-
-        navigator.clipboard.writeText(text)
-      }
-      
-    </script>
-    <script defer="" src="https://use.fontawesome.com/releases/v6.4.2/js/all.js" crossorigin="anonymous"></script>
-  </body>
-</html>
--- a/views/utils/error.ejs
+++ b/views/utils/error.ejs
@@ -16,34 +16,17 @@
            border-radius: 1vw;
            padding: 2%;
        }
-
-        button {
-            color: red;
-            background-color: transparent;
-            border-radius: 1vw;
-            border-color: red;
-            border-style: solid;
-            padding: 10px;
-            transition: all 0.2s ease 0s;
-        }
-
-        button:hover {
-
-            color: white;
-            background-color: red;
-            cursor: pointer;
-        }
    </style>
  </head>
  <body>
    <div>
-        <h1>Erreur</h1>
+        <h1>Erreur  <%= error.status %></h1>
        <h2><%= message %> - <%= error.status %></h1>
        <pre><%= error.stack %></pre>

    </div>
    <br>
-   <a href="/"><button>Retourner sur le panel</button></a>
+   <a href="/"><button class="btn red"><span>Retourner sur le panel</span></button></a>
  </body>
 </html>

--- a/views/utils/stylepage.ejs
+++ b/views/utils/stylepage.ejs
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Neutral</title>
+    <link rel='stylesheet' href='/stylesheets/style.css' />
+  </head>
+  <body>
+    <h1>Neutral - Page de style</h1>
+    <p>Cette page est dédiée au développement et n'est pas en relation avec le Panel Neutral.</p>
+    <a href="/"><button class="btn red"><span>Revenir sur le panel</span></button></a>
+    <hr>
+    <p>Police : <code>'Roboto', sans-serif</code></p>
+    <p>Liens : <a href="/stylepage">https://neutral.raphix.fr/stylepage</a></p>
+    <hr>
+    <br>
+    <style>
+      .box-color {
+
+        width: 100px;
+        height: 100px;
+        transition: 0.2s;
+        border: 1px solid;
+      }
+
+      .box-color:hover {
+
+        transform: scale(1.1);
+      }
+   
+      .box-color:active {
+
+        transform: scale(1);
+        color: rgb(58, 255, 3);
+      }
+
+
+      button {
+        width: fit-content ;
+      }
+
+      
+    </style>
+
+    <div class="col">
+    <p>Classe : <code>btn</code></p>
+    <div class="row">
+      <button class="btn red"><span>Error Button</span></button>
+      <button class="btn blue "><span>Info Button</span></button>
+      <button class="btn yellow"><span>Warning Button</span></button>
+      <button class="btn green"><span>Confirm Button</span></button>
+      <button class="btn"><span>Default Button</span></button>
+    </div>
+    <p>Classe : <code>btn min</code></p>
+    <div class="row">
+      <button class="btn min red"><span><i class="fa fa-xmark"></i></span></button>
+      <button class="btn min blue"><span><i class="fa fa-info"></i></span></button>
+      <button class="btn min"><span><i class="fa fa-def"></i></span></button>
+    </div>
+    <div class="row">
+      <div onclick="copyToClipboard('#323031')" style='background-color: #323031;' class="box-color"><p style="text-align: center;">#323031</p></div>
+      <div onclick="copyToClipboard('#f10000')" style='background-color: #f10000;' class="box-color"><p style="text-align: center;">#f10000</p></div>
+      <div onclick="copyToClipboard('#605e5863')" style='background-color: #605e5863;' class="box-color"><p style="text-align: center;">#605e5863</p></div>
+    </div>
+    <p>Classe : <code>field</code></p>
+    <input type="text" class="field">
+    
+    <script>
+      function copyToClipboard(text) {
+        navigator.clipboard.writeText(text)
+      }
+      
+    </script>
+    <script defer="" src="https://use.fontawesome.com/releases/v6.4.2/js/all.js" crossorigin="anonymous"></script>
+  </body>
+</html>