infrastructure/neutral
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Raphix
2023-10-31 17:00:25 +01:00
parent 99f0392a6c
commit 98a6480830
20 changed files with 520 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/FontLogo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 455 KiB

BIN
public/images/FormatLogo_BLACK.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 155 KiB

50
public/images/FormatLogo_BLACK.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
public/images/FormatLogo_WHITE.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 101 KiB

50
public/images/FormatLogo_WHITE.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

35
public/javascripts/basics.js Normal file
View 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
View 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()
}
})

214
public/stylesheets/style.css
View File

@ -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;
}