Compare commits
10 Commits
Author | SHA1 | Date |
---|---|---|
|
5d94e4cc34 | ago%!(EXTRA string=1 year) |
|
3a5f485c42 | ago%!(EXTRA string=1 year) |
|
5ebba421c4 | ago%!(EXTRA string=1 year) |
|
23f8bf763d | ago%!(EXTRA string=1 year) |
|
ba150be610 | ago%!(EXTRA string=1 year) |
|
354437abc0 | ago%!(EXTRA string=1 year) |
|
f03d3b52cd | ago%!(EXTRA string=1 year) |
|
c91a3b6f72 | ago%!(EXTRA string=1 year) |
|
8fe3f4c54f | ago%!(EXTRA string=1 year) |
|
4430a4573c | ago%!(EXTRA string=1 year) |
@ -1,2 +1 @@ |
|||||||
/.vs/ |
/.vs/ |
||||||
/js/skama_code |
|
@ -1,2 +1,2 @@ |
|||||||
DO NOT USE THIS CODE OR LOOK AT IT IF YOU ARE NOT ALLOWED TO |
DO NOT USE THIS CODE OR LOOK AT IT IF YOU ARE NOT ALLOWED TO |
||||||
IF YOU DO YOU CAN'T USE OR TEACH THE KNOWLEAGE YOU ACQUEIRED. |
IF YOU DO YOU CAN USE OR TEACH THE KNOWLEAGE YOU ACQUEIRED. |
||||||
|
@ -0,0 +1,15 @@ |
|||||||
|
# Skamcraft |
||||||
|
|
||||||
|
## Start |
||||||
|
* Start with live server in VsCode to get full functionnality. |
||||||
|
* Start with php : |
||||||
|
``` bash |
||||||
|
cd /.../Skamcraft |
||||||
|
php -S 127.0.0.1:80 |
||||||
|
``` |
||||||
|
|
||||||
|
## Norm |
||||||
|
* ``` ; ``` at the end of each line. |
||||||
|
* snack_case for functions and variables. |
||||||
|
* UpperCamelCase for Classes. |
||||||
|
* all in english. |
Before Width: | Height: | Size: 69 KiB |
Before Width: | Height: | Size: 365 B |
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.5 KiB |
Before Width: | Height: | Size: 343 B |
Before Width: | Height: | Size: 17 KiB |
Before Width: | Height: | Size: 44 KiB |
Before Width: | Height: | Size: 945 B After Width: | Height: | Size: 3.0 KiB |
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 3.8 KiB |
After Width: | Height: | Size: 287 KiB |
Before Width: | Height: | Size: 91 KiB |
Before Width: | Height: | Size: 126 KiB |
Before Width: | Height: | Size: 139 KiB |
Before Width: | Height: | Size: 349 B |
Before Width: | Height: | Size: 359 B |
Before Width: | Height: | Size: 362 B |
Before Width: | Height: | Size: 380 B |
Before Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 360 B |
Before Width: | Height: | Size: 419 B |
Before Width: | Height: | Size: 5.6 KiB |
Before Width: | Height: | Size: 19 KiB |
Before Width: | Height: | Size: 48 KiB |
Before Width: | Height: | Size: 7.5 KiB |
Before Width: | Height: | Size: 4.3 KiB |
Before Width: | Height: | Size: 38 KiB |
Before Width: | Height: | Size: 1.8 KiB |
Before Width: | Height: | Size: 3.1 KiB |
Before Width: | Height: | Size: 4.8 KiB |
Before Width: | Height: | Size: 1.8 KiB |
Before Width: | Height: | Size: 1.8 KiB |
Before Width: | Height: | Size: 1.7 KiB |
Before Width: | Height: | Size: 1.8 KiB |
Before Width: | Height: | Size: 412 KiB |
Before Width: | Height: | Size: 65 KiB |
Before Width: | Height: | Size: 6.4 KiB |
After Width: | Height: | Size: 135 B |
Before Width: | Height: | Size: 31 KiB |
Before Width: | Height: | Size: 69 KiB |
Before Width: | Height: | Size: 98 KiB |
Before Width: | Height: | Size: 6.3 KiB |
Before Width: | Height: | Size: 45 KiB |
Before Width: | Height: | Size: 142 KiB |
Before Width: | Height: | Size: 7.5 KiB |
After Width: | Height: | Size: 545 KiB |
Before Width: | Height: | Size: 7.6 KiB |
Before Width: | Height: | Size: 7.5 KiB |
Before Width: | Height: | Size: 7.4 KiB |
Before Width: | Height: | Size: 7.7 KiB |
@ -0,0 +1,15 @@ |
|||||||
|
/* Copyright © 2023 Entreprise SkamKraft */ |
||||||
|
|
||||||
|
|
||||||
|
.ext-modal[open] { |
||||||
|
animation: myFadeIn 2.0s ease normal; |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes myFadeIn{ |
||||||
|
from { |
||||||
|
bottom: 100%; |
||||||
|
} |
||||||
|
to { |
||||||
|
bottom: 0%; |
||||||
|
} |
||||||
|
} |
@ -1,32 +0,0 @@ |
|||||||
.auth-container { |
|
||||||
height: inherit; |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
|
|
||||||
.auth-title |
|
||||||
{ |
|
||||||
font-size: 50px; |
|
||||||
} |
|
||||||
|
|
||||||
.auth{ |
|
||||||
width: 300px; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
background-color: var(--main-color); |
|
||||||
padding: 30px; |
|
||||||
border-radius: 5px; |
|
||||||
} |
|
||||||
|
|
||||||
.auth-grp-label { |
|
||||||
font-size: 20px; |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
} |
|
||||||
|
|
||||||
.errors { |
|
||||||
color: red; |
|
||||||
} |
|
@ -1,72 +0,0 @@ |
|||||||
.card{ |
|
||||||
display: grid; |
|
||||||
margin-top: 15px; |
|
||||||
grid-template-columns: 1fr 1fr; |
|
||||||
} |
|
||||||
.contracts |
|
||||||
{ |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
flex-direction: column; |
|
||||||
align-items: center; |
|
||||||
height: 50%; |
|
||||||
width: 50%; |
|
||||||
overflow-y: scroll; |
|
||||||
} |
|
||||||
|
|
||||||
.contract-screen |
|
||||||
{ |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
flex-direction: column; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
.screen-img { |
|
||||||
z-index: -1; |
|
||||||
position: absolute; |
|
||||||
top: 10%; |
|
||||||
height: 80%; |
|
||||||
bottom: 1%; |
|
||||||
right: 20%; |
|
||||||
left: 20%; |
|
||||||
width: 60%; |
|
||||||
} |
|
||||||
.card-body{ |
|
||||||
margin-left: 50px; |
|
||||||
} |
|
||||||
.card-button{ |
|
||||||
margin-top: 10px; |
|
||||||
} |
|
||||||
|
|
||||||
.img |
|
||||||
{ |
|
||||||
position: absolute; |
|
||||||
top: 10%; |
|
||||||
left: 25%; |
|
||||||
z-index: -1; |
|
||||||
background-repeat: no-repeat; |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
#contracts-modal |
|
||||||
{ |
|
||||||
background-color: rgba(0, 0, 255, 0.5); |
|
||||||
border: none; |
|
||||||
border-radius: 10px; |
|
||||||
padding: 40px; |
|
||||||
color: white; |
|
||||||
} |
|
||||||
|
|
||||||
/* Modal */ |
|
||||||
|
|
||||||
.status-onhold { |
|
||||||
color: orange; |
|
||||||
} |
|
||||||
|
|
||||||
.status-accepted { |
|
||||||
color: greenyellow; |
|
||||||
} |
|
@ -1,192 +0,0 @@ |
|||||||
@font-face { |
|
||||||
font-family: pixellari; |
|
||||||
src: url("/assets/fonts/Pixellari.ttf"); |
|
||||||
} |
|
||||||
|
|
||||||
:root { |
|
||||||
--text-color: white; |
|
||||||
--text-familly: pixellari; |
|
||||||
--main-color: black; |
|
||||||
--sec-color: rgba(69, 128, 255, 0.842); |
|
||||||
} |
|
||||||
|
|
||||||
::-webkit-scrollbar { |
|
||||||
width: 0 !important |
|
||||||
} |
|
||||||
|
|
||||||
body{ |
|
||||||
background-image: url("/assets/img/background.png"); |
|
||||||
background-repeat: no-repeat; |
|
||||||
background-size: cover; |
|
||||||
overflow: hidden; |
|
||||||
font-family: var(--text-familly); |
|
||||||
color: var(--text-color); |
|
||||||
margin: 0; |
|
||||||
padding: 0; |
|
||||||
} |
|
||||||
/* |
|
||||||
button{ |
|
||||||
font-family: var(--text-familly); |
|
||||||
color: var(--text-color); |
|
||||||
} */ |
|
||||||
|
|
||||||
input{ |
|
||||||
font-family: var(--text-familly); |
|
||||||
color: var(--text-color); |
|
||||||
} |
|
||||||
|
|
||||||
#block-content{ |
|
||||||
margin: 0; |
|
||||||
padding: 0; |
|
||||||
width: 100%; |
|
||||||
height: 100vh; |
|
||||||
} |
|
||||||
|
|
||||||
.modal-disable::backdrop { |
|
||||||
background-color: rgba(0, 0, 0, 0.493); |
|
||||||
} |
|
||||||
|
|
||||||
.ext-modal[open] { |
|
||||||
animation: myFadeIn 0.5s ease normal; |
|
||||||
} |
|
||||||
|
|
||||||
@keyframes myFadeIn{ |
|
||||||
from { |
|
||||||
bottom: 100%; |
|
||||||
} |
|
||||||
to { |
|
||||||
bottom: 0%; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.home-container { |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
flex-direction: column; |
|
||||||
text-shadow: 4px 2px black; |
|
||||||
} |
|
||||||
|
|
||||||
.languettes { |
|
||||||
z-index: 1; |
|
||||||
right: -30px; |
|
||||||
top: 25%; |
|
||||||
width: 80px; |
|
||||||
position: absolute; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
align-items:flex-end; |
|
||||||
} |
|
||||||
.languettes input{ |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
.languettes input:hover{ |
|
||||||
animation: slide-left; |
|
||||||
position: relative; |
|
||||||
animation-timing-function: ease; |
|
||||||
animation-fill-mode: forwards; |
|
||||||
animation-duration: 1s; |
|
||||||
} |
|
||||||
|
|
||||||
@keyframes slide-left { |
|
||||||
0% {right: 0px; top: 0px;} |
|
||||||
100% {right: 25px; top: 0px;} |
|
||||||
} |
|
||||||
|
|
||||||
.Title{ |
|
||||||
position: absolute; |
|
||||||
font-size: 50px; |
|
||||||
margin-left: 50px; |
|
||||||
background-color: rgba(0, 0, 0, 0.363); |
|
||||||
border-radius: 5px; |
|
||||||
width: fit-content; |
|
||||||
padding: 10px; |
|
||||||
} |
|
||||||
|
|
||||||
.cont-center { |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
|
|
||||||
.title{ |
|
||||||
font-size: 50px; |
|
||||||
margin-left: 50px; |
|
||||||
} |
|
||||||
|
|
||||||
::placeholder { |
|
||||||
color: var(--text-color); |
|
||||||
} |
|
||||||
|
|
||||||
.base-input{ |
|
||||||
margin: 5px; |
|
||||||
padding: 10px; |
|
||||||
border: none; |
|
||||||
border-radius: 5px; |
|
||||||
background-color: var(--sec-color); |
|
||||||
font-size: 20px; |
|
||||||
} |
|
||||||
.base-input:active{ |
|
||||||
background-color: var(--sec-color); |
|
||||||
font-size: 20px; |
|
||||||
} |
|
||||||
|
|
||||||
/* .base-btn{ |
|
||||||
margin: 2px; |
|
||||||
padding: 10px; |
|
||||||
border: none; |
|
||||||
border-radius: 5px; |
|
||||||
background-color: var(--sec-color); |
|
||||||
font-size: 20px; |
|
||||||
} */ |
|
||||||
button, .button { |
|
||||||
margin: 2px; |
|
||||||
font-family: var(--text-familly); |
|
||||||
background-color: #0000008f; |
|
||||||
color: #ffffff; |
|
||||||
border: 2px solid #ffffff; |
|
||||||
padding: 10px; |
|
||||||
font-size: 13px; |
|
||||||
cursor: pointer; |
|
||||||
border-radius: 5px; |
|
||||||
transition: background-color 0.3s, color 0.3s, border-color 0.3s; |
|
||||||
} |
|
||||||
|
|
||||||
button:hover, .button:hover { |
|
||||||
background-color: #ffffff; |
|
||||||
color: #1a1a1a; |
|
||||||
border-color: #1a1a1a; |
|
||||||
} |
|
||||||
|
|
||||||
button:active, .button:active { |
|
||||||
background-color: #333333; |
|
||||||
color: #ffffff; |
|
||||||
border-color: #ffffff; |
|
||||||
} |
|
||||||
|
|
||||||
button:disabled, .button:disabled { |
|
||||||
background-color: #555555; |
|
||||||
color: #b3b3b3; |
|
||||||
border-color: #b3b3b3; |
|
||||||
cursor: not-allowed; |
|
||||||
opacity: 0.6; |
|
||||||
} |
|
||||||
|
|
||||||
/* .base-btn:hover{ |
|
||||||
box-shadow: 1px 1px 1px 0px rgba(88, 88, 252, 0.842); |
|
||||||
} */ |
|
||||||
|
|
||||||
.base-select { |
|
||||||
margin: 5px; |
|
||||||
padding: 10px; |
|
||||||
border: none; |
|
||||||
border-radius: 3px; |
|
||||||
background-color: var(--sec-color); |
|
||||||
font-size: 15px; |
|
||||||
font-family: var(--text-familly); |
|
||||||
color: var(--text-color); |
|
||||||
} |
|
@ -1,56 +0,0 @@ |
|||||||
.container-ldb { |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
#myVideo { |
|
||||||
position: fixed; |
|
||||||
right: 0; |
|
||||||
bottom: 0; |
|
||||||
min-width: 100%; |
|
||||||
min-height: 100%; |
|
||||||
z-index: -1; |
|
||||||
} |
|
||||||
.head-board { |
|
||||||
display: grid; |
|
||||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; |
|
||||||
margin: auto; |
|
||||||
width: 60%; |
|
||||||
padding: 20px; |
|
||||||
font-size:x-large; |
|
||||||
border : 1px solid white; |
|
||||||
border-bottom-color: white; |
|
||||||
border-bottom-width: 1px; |
|
||||||
border-top-right-radius: 5px; |
|
||||||
border-top-left-radius: 5px; |
|
||||||
background-color: rgba(0, 0, 0, 0.5); |
|
||||||
} |
|
||||||
|
|
||||||
.leaderboard { |
|
||||||
display: flex; |
|
||||||
margin: auto; |
|
||||||
align-items: center; |
|
||||||
flex-direction: column; |
|
||||||
border : 1px solid white; |
|
||||||
width: 60%; |
|
||||||
height: 350px; |
|
||||||
overflow-y: scroll; |
|
||||||
overflow-x: visible; |
|
||||||
background-color: rgba(0, 0, 0, 0.5); |
|
||||||
padding: 20px; |
|
||||||
border-bottom-right-radius: 5px; |
|
||||||
border-bottom-left-radius: 5px; |
|
||||||
scrollbar-width: none; |
|
||||||
} |
|
||||||
|
|
||||||
.player { |
|
||||||
width: 100%; |
|
||||||
display: grid; |
|
||||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; |
|
||||||
border-bottom: 1px solid rgb(255, 255, 255); |
|
||||||
} |
|
||||||
|
|
||||||
.player p { |
|
||||||
padding: 5px; |
|
||||||
color: white; |
|
||||||
font-size: large; |
|
||||||
text-align: start; |
|
||||||
} |
|
@ -1,41 +0,0 @@ |
|||||||
.modal-ships { |
|
||||||
background-image: url("/assets/spaceships/blueprint.png"); |
|
||||||
background-size: cover; |
|
||||||
font-size: 25px; |
|
||||||
width: 1000px; /* Set the width to the image width */ |
|
||||||
height: 560px; /* Set the height to the image height */ |
|
||||||
position: relative; |
|
||||||
margin: auto; |
|
||||||
padding: 40px; |
|
||||||
color: rgb(255, 255, 255); |
|
||||||
} |
|
||||||
|
|
||||||
.infos-ships { |
|
||||||
padding: 20px; |
|
||||||
margin-bottom: 20px; /* Space below the info box */ |
|
||||||
} |
|
||||||
|
|
||||||
.ship-info { |
|
||||||
background-color: rgba(0, 0, 0, 0.363); |
|
||||||
border-radius: 5px; |
|
||||||
width: fit-content; |
|
||||||
padding: 5px; |
|
||||||
} |
|
||||||
|
|
||||||
.btn-close-ships { |
|
||||||
position: absolute; |
|
||||||
font-size:x-large; |
|
||||||
bottom: 20px; |
|
||||||
left: 20px; |
|
||||||
background-color: rgba(255, 255, 255, 0.8); |
|
||||||
border: none; |
|
||||||
color: rgb(252, 252, 252); |
|
||||||
padding: 10px 20px; |
|
||||||
cursor: pointer; |
|
||||||
border-radius: 5px; |
|
||||||
transition: background-color 0.3s ease; |
|
||||||
} |
|
||||||
|
|
||||||
.btn-close-ships:hover { |
|
||||||
background-color: rgba(255, 255, 255, 1); |
|
||||||
} |
|
@ -1,101 +0,0 @@ |
|||||||
.cont-profile |
|
||||||
{ |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
#myVideo { |
|
||||||
position: fixed; |
|
||||||
right: 0; |
|
||||||
bottom: 0; |
|
||||||
min-width: 100%; |
|
||||||
min-height: 100%; |
|
||||||
z-index: -1; |
|
||||||
} |
|
||||||
#profile |
|
||||||
{ |
|
||||||
width: 50%; |
|
||||||
height: 90%; |
|
||||||
padding: 10px; |
|
||||||
background-color: rgba(0, 0, 0, 0.637); |
|
||||||
border: none; |
|
||||||
border-radius: 10px; |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
align-items: center; |
|
||||||
flex-direction: column; |
|
||||||
color: white; |
|
||||||
} |
|
||||||
|
|
||||||
.profile-header |
|
||||||
{ |
|
||||||
width: 100%; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
} |
|
||||||
|
|
||||||
.profile-header p |
|
||||||
{ |
|
||||||
font-size: 60px; |
|
||||||
} |
|
||||||
|
|
||||||
.profile-header button |
|
||||||
{ |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
border: none; |
|
||||||
} |
|
||||||
|
|
||||||
.profile-header button p |
|
||||||
{ |
|
||||||
font-size: 25px; |
|
||||||
padding: 0; |
|
||||||
margin: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.profile-content |
|
||||||
{ |
|
||||||
width: 80%; |
|
||||||
display: grid; |
|
||||||
grid-template-columns: 1fr 1fr; |
|
||||||
grid-template-rows: 1fr 1fr 1fr 1fr 1fr; |
|
||||||
border: 1px solid white; |
|
||||||
border-radius: 10px; |
|
||||||
padding: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.profile-content p |
|
||||||
{ |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
.tb-r |
|
||||||
{ |
|
||||||
border-right: 1px solid white; |
|
||||||
} |
|
||||||
|
|
||||||
.profile-footer |
|
||||||
{ |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
width: 80%; |
|
||||||
padding: 5px; |
|
||||||
} |
|
||||||
|
|
||||||
#btn-logout |
|
||||||
{ |
|
||||||
width: 50px; |
|
||||||
height: 50px; |
|
||||||
padding: 0; |
|
||||||
border: none; |
|
||||||
background: none; |
|
||||||
} |
|
||||||
|
|
||||||
#btn-logout img |
|
||||||
{ |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
} |
|
@ -1,55 +0,0 @@ |
|||||||
.block-ships{ |
|
||||||
position: relative; |
|
||||||
width: 50%; |
|
||||||
display:flex; |
|
||||||
flex-direction: column; |
|
||||||
color: white; |
|
||||||
font-size:large; |
|
||||||
text-align: center; |
|
||||||
margin: auto; |
|
||||||
} |
|
||||||
|
|
||||||
.ships-modal{ |
|
||||||
font-size:small; |
|
||||||
background-image: url("/assets/spaceships/blueprint.png"); |
|
||||||
background-repeat: no-repeat; |
|
||||||
background-size: contain; |
|
||||||
} |
|
||||||
|
|
||||||
.ships-list { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
/* Next & previous buttons */ |
|
||||||
.prev, .next { |
|
||||||
cursor: pointer; |
|
||||||
position: absolute; |
|
||||||
top: 50%; |
|
||||||
margin-top: -22px; |
|
||||||
font-weight: bold; |
|
||||||
font-size: 60px; |
|
||||||
transition: 0.6s ease; |
|
||||||
} |
|
||||||
|
|
||||||
.imgShip { |
|
||||||
left: 0; |
|
||||||
margin-top: 50px; |
|
||||||
width: 70%; |
|
||||||
} |
|
||||||
.ships-list h5 { |
|
||||||
font-size:xx-large; |
|
||||||
background-color: rgba(0, 0, 0, 0.363); |
|
||||||
border-radius: 5px; |
|
||||||
width: fit-content; |
|
||||||
padding: 10px; |
|
||||||
margin:auto; |
|
||||||
} |
|
||||||
/* Position the "next button" to the right */ |
|
||||||
.next { |
|
||||||
right: 0; |
|
||||||
} |
|
||||||
|
|
||||||
/* On hover, add a black background color with a little bit see-through */ |
|
||||||
.btn-ships{ |
|
||||||
font-size:x-large; |
|
||||||
} |
|
@ -0,0 +1,199 @@ |
|||||||
|
/* Copyright © 2023 Entreprise SkamKraft */ |
||||||
|
|
||||||
|
:root { |
||||||
|
--main-back-color: rgb(143, 143, 143); |
||||||
|
--second-back-color: black; |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: M42; |
||||||
|
src: url("/assets/fonts/m42.TTF"); |
||||||
|
} |
||||||
|
|
||||||
|
* { |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
background-image: url("/assets/img/background.jpg"); |
||||||
|
font-family: "M42"; |
||||||
|
font-size: 7px; |
||||||
|
margin: 0px; |
||||||
|
padding: 0px; |
||||||
|
} |
||||||
|
|
||||||
|
/* Main */ |
||||||
|
.container { |
||||||
|
color: white; |
||||||
|
background-color: rgba(0, 0, 0, 0.726); |
||||||
|
display: flex; |
||||||
|
margin: 10px; |
||||||
|
width: fit-content; |
||||||
|
margin: auto; |
||||||
|
margin-top: 10px; |
||||||
|
margin-bottom: 30px; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
border: 4px solid rgba(68, 68, 68, 0.575); |
||||||
|
/* scrollbar-width: none; |
||||||
|
overflow-y: scroll; */ |
||||||
|
} |
||||||
|
|
||||||
|
.max-container { |
||||||
|
background-color: rgba(0, 0, 0, 0.726); |
||||||
|
color: white; |
||||||
|
display: flex; |
||||||
|
margin: 10px; |
||||||
|
width: 95%; |
||||||
|
margin: auto; |
||||||
|
margin-top: 10px; |
||||||
|
margin-bottom: 30px; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
border: 4px solid rgba(68, 68, 68, 0.575); |
||||||
|
} |
||||||
|
|
||||||
|
.con-title { |
||||||
|
font-size: 15px; |
||||||
|
border-bottom: 2px solid black; |
||||||
|
} |
||||||
|
|
||||||
|
.btn { |
||||||
|
padding: 10px; |
||||||
|
font-size: 8px; |
||||||
|
font-family: "M42"; |
||||||
|
color: white; |
||||||
|
border: none; |
||||||
|
border-radius: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.btn-val { |
||||||
|
background-color: rgba(0, 0, 255, 0.637); |
||||||
|
} |
||||||
|
|
||||||
|
.btn-cancel { |
||||||
|
background-color: rgba(255, 0, 0, 0.699); |
||||||
|
} |
||||||
|
|
||||||
|
/*footer*/ |
||||||
|
footer { |
||||||
|
position: fixed; |
||||||
|
width: 100%; |
||||||
|
bottom: 0; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
background-color: var(--second-back-color); |
||||||
|
color: white; |
||||||
|
} |
||||||
|
|
||||||
|
/*nav bar*/ |
||||||
|
.nav-nav { |
||||||
|
--nav-img-width: 100px; |
||||||
|
background-color: var(--second-back-color); |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.nav-nav .nav-brand { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.nav-nav .nav-brand img { |
||||||
|
width: var(--nav-img-width); |
||||||
|
} |
||||||
|
|
||||||
|
.nav-nav .nav-links { |
||||||
|
--links-color: rgb(0, 0, 0); |
||||||
|
--links-backcolor: rgb(255, 123, 71); |
||||||
|
--links-border-color: rgb(255, 173, 118); |
||||||
|
height: 70%; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
|
||||||
|
.nav-link { |
||||||
|
margin-right: 10px; |
||||||
|
background-color: var(--links-backcolor); |
||||||
|
color: var(--links-color); |
||||||
|
border: 4px solid var(--links-border-color); |
||||||
|
list-style: none; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
box-shadow: 3px 2px white; |
||||||
|
} |
||||||
|
|
||||||
|
.stats { |
||||||
|
color: white; |
||||||
|
} |
||||||
|
|
||||||
|
/* General */ |
||||||
|
.smooth { |
||||||
|
padding: 5px; |
||||||
|
padding-left: 10px; |
||||||
|
padding-right: 10px; |
||||||
|
border-radius: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
.in-big { |
||||||
|
font-family: "M42"; |
||||||
|
font-size: 6px; |
||||||
|
padding: 5px; |
||||||
|
width: 100%; |
||||||
|
margin-bottom: 10px; |
||||||
|
border-radius: 5px; |
||||||
|
border: none; |
||||||
|
} |
||||||
|
|
||||||
|
.errors p { |
||||||
|
background-color: rgba(255, 56, 56, 0.733); |
||||||
|
border: 3px solid rgb(255, 111, 111); |
||||||
|
padding: 10px; |
||||||
|
color: white; |
||||||
|
border-radius: 5px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
/* Modal */ |
||||||
|
.ext-modal { |
||||||
|
background-color: rgba(255, 255, 255, 0.767); |
||||||
|
border-radius: 10px; |
||||||
|
padding: 50px; |
||||||
|
} |
||||||
|
|
||||||
|
.my-modal { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.modal-title { |
||||||
|
font-size: 15px; |
||||||
|
margin-bottom: 40px; |
||||||
|
} |
||||||
|
|
||||||
|
.show-token { |
||||||
|
width: fit-content; |
||||||
|
border: 2px solid black; |
||||||
|
border-radius: 10px; |
||||||
|
padding: 30px; |
||||||
|
font-size: 5px; |
||||||
|
white-space: pre-wrap; |
||||||
|
word-break: break-word; |
||||||
|
} |
||||||
|
|
||||||
|
.my-modal #timer { |
||||||
|
text-align: center; |
||||||
|
border: 1px solid black; |
||||||
|
border-radius: 10px; |
||||||
|
width: 10%; |
||||||
|
padding: 5px; |
||||||
|
margin-bottom: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
#canvas { |
||||||
|
border-radius: 10px; |
||||||
|
} |
@ -1,17 +0,0 @@ |
|||||||
.cont-canvas |
|
||||||
{ |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
z-index: -1; |
|
||||||
} |
|
||||||
|
|
||||||
#sys-canvas |
|
||||||
{ |
|
||||||
z-index: -1; |
|
||||||
border: 1px solid black; |
|
||||||
border-radius: 10px; |
|
||||||
background-color: rgba(11, 1, 37, 0.842); |
|
||||||
} |
|
@ -0,0 +1,11 @@ |
|||||||
|
/* Copyright © 2023 Entreprise SkamKraft */ |
||||||
|
|
||||||
|
#block-content { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.modal-disable::backdrop { |
||||||
|
background-color: rgba(0, 0, 0, 0.493); |
||||||
|
} |
||||||
|
|
@ -1,8 +1,16 @@ |
|||||||
<script> |
<!-- Copyright © 2023 Entreprise SkamKraft --> |
||||||
// document.getElementById('audio').play(); |
<nav class="nav-nav"> |
||||||
</script> |
<div class="nav-brand"> |
||||||
<div id="links" class="languettes"> |
<img src="assets/logo/logoblancnotext.png" /> |
||||||
|
</div> |
||||||
</div> |
<div class="stats"></div> |
||||||
<div id="block-content"> |
<ul class="nav-links"> |
||||||
</div> |
<li class="nav-link smooth" id="systems-link">Systems</li> |
||||||
|
<li class="nav-link smooth" id="login-link">Log in</li> |
||||||
|
<li class="nav-link smooth" id="reg-link">New Agent</li> |
||||||
|
</ul> |
||||||
|
</nav> |
||||||
|
<main id="block-content"></main> |
||||||
|
<footer> |
||||||
|
<p>Skamcraft Sarl</p> |
||||||
|
</footer> |
||||||
|
@ -1,19 +1,11 @@ |
|||||||
<!-- Copyright © 2023 Entreprise SkamKraft --> |
<!-- Copyright © 2023 Entreprise SkamKraft --> |
||||||
<div class="auth-container"> |
|
||||||
<div class="auth"> |
<div class="container smooth"> |
||||||
<p class="auth-title">LOGIN</p> |
<p class="con-title">Login</p> |
||||||
<input type="text" placeholder="Agent token" class="base-input" id="in-token"> |
<input type="text" placeholder="Agent token" id="in-token" class="in-big"> |
||||||
<div class="auth-grp-label"> |
<div class="grp-btn"> |
||||||
<p>Remember me ?</p> |
<button class="btn btn-val" id="val">Validate</button> |
||||||
<input type="checkbox" class="base-input" id="in-remember"> |
<button class="btn btn-cancel" id="cancel">Cancel</button> |
||||||
</div> |
|
||||||
<div> |
|
||||||
<button class="base-btn" id="btn-login">Validate</button> |
|
||||||
<button class="base-btn" id="btn-cancel">Cancel</button> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<button class="base-btn" id="btn-register">New agent</button> |
|
||||||
</div> |
|
||||||
<div class="errors"></div> |
|
||||||
</div> |
</div> |
||||||
</div> |
<div class="errors"></div> |
||||||
|
</div> |
@ -0,0 +1,9 @@ |
|||||||
|
<!-- Copyright © 2023 Entreprise SkamKraft --> |
||||||
|
|
||||||
|
<div class="my-modal"> |
||||||
|
<p class="modal-title">Login success</p> |
||||||
|
<div> |
||||||
|
<button id="ok" class="btn btn-val">Continue</button> |
||||||
|
<button id="forget_login" class="btn btn-cancel">Forget agent</button> |
||||||
|
</div> |
||||||
|
</div> |
@ -0,0 +1,12 @@ |
|||||||
|
<!-- Copyright © 2023 Entreprise SkamKraft --> |
||||||
|
|
||||||
|
<div class="container smooth"> |
||||||
|
<p class="con-title">New Agent</p> |
||||||
|
<input type="text" placeholder="Name" id="in-name" class="in-big"> |
||||||
|
<input type="text" placeholder="Faction" id="in-faction" class="in-big"> |
||||||
|
<div class="grp-btn"> |
||||||
|
<button class="btn btn-val" id="val">Validate</button> |
||||||
|
<button class="btn btn-cancel" id="cancel">Cancel</button> |
||||||
|
</div> |
||||||
|
<div class="errors"></div> |
||||||
|
</div> |
@ -0,0 +1,10 @@ |
|||||||
|
<!-- Copyright © 2023 Entreprise SkamKraft --> |
||||||
|
|
||||||
|
<div class="my-modal"> |
||||||
|
<p class="modal-title">Login success</p> |
||||||
|
<p class="show-token"></p> |
||||||
|
<div> |
||||||
|
<button id="ok" class="btn btn-val">Continue</button> |
||||||
|
<button id="forget_reg" class="btn btn-cancel">Forget agent</button> |
||||||
|
</div> |
||||||
|
</div> |