Version 0.1.1 - Ajout d'une page de login et de style
This commit is contained in:
Raphix
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;
|
||||
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>
|
||||
|
||||
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>
|
||||
Reference in New Issue
Block a user