Modification css et flèche changement de page

.gitignore

@@ -1,2 +1 @@
 /.vs/
-/js/skama_code

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "js/skama_code"]
+	path = js/skama_code
+	url = https://github.com/anulax1225/skama_code.git

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

LICENSE

@@ -1,2 +1,2 @@
 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.

README.md

@@ -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.

css/animation.css

@@ -0,0 +1,16 @@
+/* Copyright © 2023 Entreprise SkamKraft */
+
+
+.ext-modal[open] {
+  animation: myFadeIn 0.5s ease normal;
+}
+
+@keyframes myFadeIn {
+  from {
+    bottom: 100%;
+  }
+
+  to {
+    bottom: 0%;
+  }
+}

css/auth.css

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

css/contract.css

@@ -0,0 +1,99 @@
+/* Copyright © 2023 Entreprise SkamCraft */
+
+
+
+body,
+html {
+  background-image: url("/assets/contracts/background.png");
+  background-repeat: no-repeat;
+  background-size: 100%;
+}
+
+/* Button for more informations about the contact */
+.btn-infos {
+  margin: 2px;
+  background-color: transparent;
+  border: 5px solid #0018e8;
+  border-radius: 10px;
+}
+
+.btn-infos:hover {
+  border-color: #0018e8;
+  background-color: #0018e8;
+
+}
+
+.btn-accept {
+  margin: 2px;
+  background-color: transparent;
+  border: 5px solid #0018e8;
+  border-radius: 10px;
+}
+
+.btn-accept:hover {
+  border-color: rgb(33, 196, 0);
+  background-color: rgb(33, 196, 0);
+}
+
+
+/* Ecran contenant les contrats */
+.nav-nav {
+  margin-bottom: 100px;
+}
+
+.contracts {
+  display: grid;
+  justify-content: center;
+  grid-template-rows: 1fr 1fr;
+}
+
+.card img {
+  margin-right: 50px;
+}
+
+.card-body {
+  margin-right: 50px;
+}
+
+.card {
+  margin-bottom: 100px;
+  margin-left: -400px;
+  display: flex;
+}
+
+.card-button {
+  display: flex;
+  flex-direction: row;
+  height: 30%;
+}
+
+.arrows {
+  display: flex;
+  justify-content: center;
+
+}
+
+/* Modal */
+
+.status-onhold {
+  color: orange;
+}
+
+.status-accepted {
+  color: greenyellow;
+}
+
+/* Flèche changer de page */
+#leftarrow {
+  width: 50px;
+  height: 50px;
+}
+
+#rightarrow {
+  width: 50px;
+  height: 50px;
+}
+
+.arrows {
+  text-align: center;
+}

css/contracts.css

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

css/global.css

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

css/leaderboard.css

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

css/modal-ships.css

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

css/profile.css

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

css/ships.css

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

css/style.css

@@ -0,0 +1,197 @@
+/* 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.png");
+    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);
+}
+
+.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;
+}

css/system.css

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

css/ui.css

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

html/template.html

@@ -1,8 +1,17 @@
-<script>
-    // document.getElementById('audio').play();
-</script>
-<div id="links" class="languettes">
+<!-- Copyright © 2023 Entreprise SkamKraft -->
+<nav class="nav-nav">
+  <div class="nav-brand">
+    <img src="assets/logo/logoblancnotext.png" />
+  </div>
+  <div class="stats"></div>
+  <ul class="nav-links">
+    <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>
 
-</div>
-<div id="block-content">
-</div>
+  </ul>
+</nav>
+<main id="block-content"></main>
+<footer>
+  <p>Skamcraft Sarl</p>
+</footer>

html/templates/auth/login.html

@@ -1,19 +1,11 @@
 <!-- Copyright © 2023 Entreprise SkamKraft -->
-<div class="auth-container">
-    <div class="auth">
-        <p class="auth-title">LOGIN</p>
-        <input type="text" placeholder="Agent token" class="base-input" id="in-token">
-        <div class="auth-grp-label">
-            <p>Remember me ?</p>
-            <input type="checkbox" class="base-input" id="in-remember">
-        </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 class="container smooth"> 
+    <p class="con-title">Login</p>
+    <input type="text" placeholder="Agent token" id="in-token" 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>
+    <div class="errors"></div>
+</div>

html/templates/auth/login_modal.html

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

html/templates/auth/reg.html

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

html/templates/auth/reg_modal.html

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

html/templates/auth/register.html

@@ -1,23 +0,0 @@
-<!-- Copyright © 2023 Entreprise SkamKraft -->
-<div class="auth-container">
-    <div class="auth">
-        <p class="auth-title">New Agent</p>
-        <input type="text" placeholder="Name" class="base-input" id="in-name">
-        <select class="base-select" id="in-faction">
-            <option value="" disabled selected>Factions</option>
-            <optgroup id="group-faction"></optgroup>
-        </select>
-        <div class="auth-grp-label">
-            <p>Remember me ?</p>
-            <input type="checkbox" class="base-input" id="in-remember">
-        </div>
-        <div>
-            <button class="base-btn" id="btn-register">Validate</button>
-            <button class="base-btn" id="btn-cancel">Cancel</button>
-        </div>
-        <div>
-            <button class="base-btn" id="btn-log">Login</button>
-        </div>
-        <div class="errors"></div>
-    </div>
-</div>

html/templates/contracts/contracts.html

@@ -1,6 +1,8 @@
-<p class="Title">CONTRACTS</p>
+<link rel="stylesheet" href="css/contract.css">
 <div class="contract-screen">
-    <img class="screen-img" src="/assets/contracts/screen.png">
-    <div class="contracts">
+    <div class="contracts"></div>
+    <div class="arrows">
+        <input type="image" id="leftarrow" alt="" src="/assets/contracts/leftarrow.png" />
+        <input type="image" id="rightarrow" alt="" src="/assets/contracts/rightarrow.png" />
     </div>
-</div>
+</div>

html/templates/contracts/contracts_modal.html

@@ -1,6 +1,6 @@
 <!-- Copyright © 2023 Entreprise SkamKraft -->
 
-<div>
+<div class="my-modal">
     <p class="modal-title">Contract</p>
     <p class="contract-id"></p>
     <p class="contract-faction"></p>

html/templates/home.html

@@ -1,6 +1,5 @@
-<p class="Title">HOME</p>
-<div class="home-container">
-    <h1>WELCOME TO</h1>
-    <img src="/assets/logo/spacetradertitle.png" alt="" width="60%">
-    <p>Skamkraft is based on the SpaceTraders API</p>
-</div>
+<!-- Copyright © 2023 Entreprise SkamKraft -->
+<div class="container smooth"> 
+    <p class="con-title">Bienvenue sur SkamCraft</p>
+    <p class="con-content">Application client pour l'API Space Tarders.</p>
+</div>

html/templates/leaderboard/leaderboard.html

@@ -1,21 +0,0 @@
-<!-- Copyright © 2023 Entreprise SkamKraft -->
-<p class="Title">LEADERBOARD</p>
-<video autoplay muted loop id="myVideo">
-    <source src="/assets/leaderboard/trophee.mp4" type="video/mp4">
-</video>
-<div class="cont-center">
-    <div class="container-ldb">
-        <div class="head-board">
-            <p class="num">Rank</p>
-            <p class="symbol">Name</p>
-            <p class="credits">Credits</p>
-            <p class="headquarters">Headquarters</p>
-            <p class="faction">Faction</p>
-            <p class="ships">Ships</p>
-        </div>
-        <div class="leaderboard"></div>
-        <div>
-            <!--- leaderboard content -->
-        </div>
-    </div>
-</div>

html/templates/profile/profile.html

@@ -1,24 +0,0 @@
-<div class="cont-profile">
-    <div id="profile">
-        <div class="profile-header">
-            <p class="">PROFILE</p>
-        </div>  
-        <video autoplay muted loop id="myVideo">
-            <source src="/assets/profile/background.mp4" type="video/mp4">
-          </video>
-        <div class="profile-content">
-            <p class="tb-r">Name</p><p id="name"></p>
-            <p class="tb-r">Faction</p><p id="faction"></p>
-            <p class="tb-r">Credits</p><p id="credit"></p>
-            <p class="tb-r">Head Quaters</p><p id="hq"></p>
-            <p class="tb-r">Number of ships</p><p id="shipcount"></p>
-        </div>
-        
-        <div class="profile-footer">
-            <button id="btn-logout">
-                <img src="/assets/menu/logout.png" alt="">
-            </button>
-            <button id="btn-token">COPY TOKEN</button>
-        </div>
-    </div>
-</div>