Version 0.1.1 - Ajout d'une page de login et de style
This commit is contained in:
parent
99f0392a6c
commit
98a6480830
2
.gitignore
vendored
2
.gitignore
vendored
@ -130,3 +130,5 @@ dist
|
|||||||
.yarn/install-state.gz
|
.yarn/install-state.gz
|
||||||
.pnp.*
|
.pnp.*
|
||||||
|
|
||||||
|
#data
|
||||||
|
./data/
|
||||||
@ -2,7 +2,9 @@ const path = require("path");
|
|||||||
const root = path.resolve(__dirname, '../')
|
const root = path.resolve(__dirname, '../')
|
||||||
|
|
||||||
const __glob = {
|
const __glob = {
|
||||||
ROUTES: root + path.sep + "routes" + path.sep
|
ROUTES: root + path.sep + "routes" + path.sep,
|
||||||
|
ROOT: root,
|
||||||
|
LOGS: root + path.sep + "logs"
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
15
bin/www
15
bin/www
@ -3,11 +3,19 @@
|
|||||||
/**
|
/**
|
||||||
* Module dependencies.
|
* 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 app = require('../main');
|
||||||
var debug = require('debug')('neutral:server');
|
var debug = require('debug')('neutral:server');
|
||||||
var http = require('http');
|
var http = require('http');
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Get port from environment and store in Express.
|
* 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.
|
* Listen on provided port, on all network interfaces.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
server.listen(port);
|
server.listen(port);
|
||||||
server.on('error', onError);
|
server.on('error', onError);
|
||||||
server.on('listening', onListening);
|
server.on('listening', onListening);
|
||||||
@ -65,11 +74,11 @@ function onError(error) {
|
|||||||
// handle specific listen errors with friendly messages
|
// handle specific listen errors with friendly messages
|
||||||
switch (error.code) {
|
switch (error.code) {
|
||||||
case 'EACCES':
|
case 'EACCES':
|
||||||
console.error(bind + ' requires elevated privileges');
|
wlog.step.error("start_server", bind + ' requires elevated privileges');
|
||||||
process.exit(1);
|
process.exit(1);
|
||||||
break;
|
break;
|
||||||
case 'EADDRINUSE':
|
case 'EADDRINUSE':
|
||||||
console.error(bind + ' is already in use');
|
wlog.step.error("start_server" , bind + ' is already in use');
|
||||||
process.exit(1);
|
process.exit(1);
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
@ -86,5 +95,5 @@ function onListening() {
|
|||||||
var bind = typeof addr === 'string'
|
var bind = typeof addr === 'string'
|
||||||
? 'pipe ' + addr
|
? 'pipe ' + addr
|
||||||
: 'port ' + addr.port;
|
: 'port ' + addr.port;
|
||||||
debug('Listening on ' + bind);
|
wlog.step.end("start_server")
|
||||||
}
|
}
|
||||||
|
|||||||
20
main.js
20
main.js
@ -5,11 +5,18 @@ const cookieParser = require('cookie-parser');
|
|||||||
const app = express();
|
const app = express();
|
||||||
const fs = require("fs");
|
const fs = require("fs");
|
||||||
const { __glob } = require('./bin/global-variables');
|
const { __glob } = require('./bin/global-variables');
|
||||||
|
const log = require("loguix")
|
||||||
|
|
||||||
|
var wlog = log.getInstance("Web")
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
setup()
|
setup()
|
||||||
|
|
||||||
|
|
||||||
function getRouters() {
|
function getRouters() {
|
||||||
|
|
||||||
|
wlog.log("Récupération de " + fs.readdirSync(__glob.ROUTES).length + " routeurs")
|
||||||
for(var route of fs.readdirSync(__glob.ROUTES)) {
|
for(var route of fs.readdirSync(__glob.ROUTES)) {
|
||||||
|
|
||||||
if(route == "index.js") {
|
if(route == "index.js") {
|
||||||
@ -30,6 +37,7 @@ function setup() {
|
|||||||
app.set('view engine', 'ejs');
|
app.set('view engine', 'ejs');
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
app.use(express.json());
|
app.use(express.json());
|
||||||
app.use(express.urlencoded({ extended: false }));
|
app.use(express.urlencoded({ extended: false }));
|
||||||
app.use(cookieParser());
|
app.use(cookieParser());
|
||||||
@ -39,7 +47,15 @@ function setup() {
|
|||||||
|
|
||||||
// catch 404 and forward to error handler
|
// catch 404 and forward to error handler
|
||||||
app.use(function(req, res, next) {
|
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
|
// error handler
|
||||||
@ -50,7 +66,7 @@ function setup() {
|
|||||||
|
|
||||||
// render the error page
|
// render the error page
|
||||||
res.status(err.status || 500);
|
res.status(err.status || 500);
|
||||||
res.render('error');
|
res.render('utils/error');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
14
package-lock.json
generated
14
package-lock.json
generated
@ -14,7 +14,7 @@
|
|||||||
"ejs": "~2.6.1",
|
"ejs": "~2.6.1",
|
||||||
"express": "~4.16.1",
|
"express": "~4.16.1",
|
||||||
"http-errors": "~1.6.3",
|
"http-errors": "~1.6.3",
|
||||||
"loguix": "^1.2.0",
|
"loguix": "1.4.1",
|
||||||
"nodemon": "^3.0.1"
|
"nodemon": "^3.0.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -446,9 +446,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/loguix": {
|
"node_modules/loguix": {
|
||||||
"version": "1.2.0",
|
"version": "1.4.1",
|
||||||
"resolved": "https://registry.npmjs.org/loguix/-/loguix-1.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/loguix/-/loguix-1.4.1.tgz",
|
||||||
"integrity": "sha512-6ITC4SzqPG/R/uWr0HCGYybeciWk/GV7gZYOOxkES6DGVI5FcHK0UWOf8yczt2eXg+riLyT79HJQJwh10hVqFw=="
|
"integrity": "sha512-lLBMc4ue37BLCIhtxBsp0PEbhOgf0DtHjYnJPoHkfUtO6T5sLy+kFwySKih0cEJgt1nmi1OMMoCEVYCqNnuODg=="
|
||||||
},
|
},
|
||||||
"node_modules/lru-cache": {
|
"node_modules/lru-cache": {
|
||||||
"version": "6.0.0",
|
"version": "6.0.0",
|
||||||
@ -1179,9 +1179,9 @@
|
|||||||
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
|
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
|
||||||
},
|
},
|
||||||
"loguix": {
|
"loguix": {
|
||||||
"version": "1.2.0",
|
"version": "1.4.1",
|
||||||
"resolved": "https://registry.npmjs.org/loguix/-/loguix-1.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/loguix/-/loguix-1.4.1.tgz",
|
||||||
"integrity": "sha512-6ITC4SzqPG/R/uWr0HCGYybeciWk/GV7gZYOOxkES6DGVI5FcHK0UWOf8yczt2eXg+riLyT79HJQJwh10hVqFw=="
|
"integrity": "sha512-lLBMc4ue37BLCIhtxBsp0PEbhOgf0DtHjYnJPoHkfUtO6T5sLy+kFwySKih0cEJgt1nmi1OMMoCEVYCqNnuODg=="
|
||||||
},
|
},
|
||||||
"lru-cache": {
|
"lru-cache": {
|
||||||
"version": "6.0.0",
|
"version": "6.0.0",
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "neutral",
|
"name": "neutral",
|
||||||
"version": "0.1.0",
|
"version": "0.1.1",
|
||||||
"description": "Panel d'administration de Raphix",
|
"description": "Panel d'administration de Raphix",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
@ -24,7 +24,7 @@
|
|||||||
"ejs": "~2.6.1",
|
"ejs": "~2.6.1",
|
||||||
"express": "~4.16.1",
|
"express": "~4.16.1",
|
||||||
"http-errors": "~1.6.3",
|
"http-errors": "~1.6.3",
|
||||||
"loguix": "^1.2.0",
|
"loguix": "1.4.1",
|
||||||
"nodemon": "^3.0.1"
|
"nodemon": "^3.0.1"
|
||||||
},
|
},
|
||||||
"author": "Raphix",
|
"author": "Raphix",
|
||||||
|
|||||||
BIN
public/images/FontLogo.png
Normal file
BIN
public/images/FontLogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 455 KiB |
BIN
public/images/FormatLogo_BLACK.png
Normal file
BIN
public/images/FormatLogo_BLACK.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 155 KiB |
50
public/images/FormatLogo_BLACK.svg
Normal file
50
public/images/FormatLogo_BLACK.svg
Normal file
@ -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>
|
||||||
|
After Width: | Height: | Size: 2.4 KiB |
BIN
public/images/FormatLogo_WHITE.png
Normal file
BIN
public/images/FormatLogo_WHITE.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
50
public/images/FormatLogo_WHITE.svg
Normal file
50
public/images/FormatLogo_WHITE.svg
Normal file
@ -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>
|
||||||
|
After Width: | Height: | Size: 2.4 KiB |
35
public/javascripts/basics.js
Normal file
35
public/javascripts/basics.js
Normal file
@ -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
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
22
public/javascripts/loginscript.js
Normal file
22
public/javascripts/loginscript.js
Normal file
@ -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()
|
||||||
|
}
|
||||||
|
})
|
||||||
@ -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 {
|
body {
|
||||||
padding: 2%;
|
padding: 2%;
|
||||||
background-color: #323031;
|
background: linear-gradient(120deg, #323031 40%, rgba(241,0,0,1) 100%);
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 1vw;
|
font-size: 20px;
|
||||||
font-family: 'Roboto', sans-serif !important;
|
font-family: 'Roboto', sans-serif !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
min-height: 100%;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Button*/
|
/*Button*/
|
||||||
@ -19,7 +25,7 @@ body {
|
|||||||
color: currentColor;
|
color: currentColor;
|
||||||
padding: 0.5vw;
|
padding: 0.5vw;
|
||||||
transition: 0.2s;
|
transition: 0.2s;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn span {
|
.btn span {
|
||||||
@ -48,20 +54,27 @@ body {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn span a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* Miniaturiez Button */
|
/* Miniaturiez Button */
|
||||||
|
|
||||||
.min {
|
.min {
|
||||||
|
|
||||||
width: 2vw !important;
|
width: 40px !important;
|
||||||
height: 2vw !important;
|
height: 40px !important;
|
||||||
border-radius: 100% !important;
|
border-radius: 100% !important;
|
||||||
font-size: 1vw !important;
|
font-size: 1vw !important;
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
transition: 0.2s;
|
transition: 0.2s;
|
||||||
|
padding: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.min span {
|
||||||
|
|
||||||
|
font-size: 20px !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -69,7 +82,7 @@ body {
|
|||||||
|
|
||||||
.red {
|
.red {
|
||||||
|
|
||||||
color: rgb(255, 63, 63) !important;
|
color: #f01000!important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blue {
|
.blue {
|
||||||
@ -85,4 +98,185 @@ body {
|
|||||||
.green {
|
.green {
|
||||||
|
|
||||||
color: rgb(64, 248, 64) !important;
|
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;
|
||||||
}
|
}
|
||||||
9
routes/login.js
Normal file
9
routes/login.js
Normal file
@ -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;
|
||||||
@ -3,7 +3,7 @@ var router = express.Router();
|
|||||||
|
|
||||||
/* GET home page. */
|
/* GET home page. */
|
||||||
router.get('/', function(req, res, next) {
|
router.get('/', function(req, res, next) {
|
||||||
res.render('stylepage');
|
res.render('utils/stylepage');
|
||||||
});
|
});
|
||||||
|
|
||||||
module.exports = router;
|
module.exports = router;
|
||||||
|
|||||||
28
views/login.ejs
Normal file
28
views/login.ejs
Normal file
@ -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>
|
||||||
@ -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>
|
|
||||||
@ -16,34 +16,17 @@
|
|||||||
border-radius: 1vw;
|
border-radius: 1vw;
|
||||||
padding: 2%;
|
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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>
|
<div>
|
||||||
<h1>Erreur</h1>
|
<h1>Erreur <%= error.status %></h1>
|
||||||
<h2><%= message %> - <%= error.status %></h1>
|
<h2><%= message %> - <%= error.status %></h1>
|
||||||
<pre><%= error.stack %></pre>
|
<pre><%= error.stack %></pre>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<br>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
75
views/utils/stylepage.ejs
Normal file
75
views/utils/stylepage.ejs
Normal file
@ -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>
|
||||||
Loading…
x
Reference in New Issue
Block a user