Fonctionalité pour afficher les infos d'un contrat

css/auth.css

@@ -0,0 +1,61 @@
+* {
+  background-color: #272727;
+}
+
+body {
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.container-auth {
+  border-radius: 10px;
+  padding: 20px;
+  text-align: center;
+  max-width: 400px;
+  width: 100%;
+}
+
+h1 {
+  font-weight: bold;
+  font-size: 24px;
+  line-height: 30px;
+  font-weight: 600;
+}
+
+h2 {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 20px;
+  color: #fa777c;
+}
+
+label {
+  font-weight: 700;
+  font-size: 12px;
+  color: #b5bac1;
+  line-height: 16px;
+}
+
+input {
+  color: #fff;
+  width: 100%;
+  height: 30px;
+  border-radius: 5px;
+  padding: 5px;
+}
+
+button {
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 24px;
+  color: #fff;
+  margin-top: 10px;
+  padding: 10px 20px;
+  cursor: pointer;
+  border-radius: 10px;
+  width: 100%;
+  margin-bottom: 10px;
+}

css/contrats.css

@@ -0,0 +1,8 @@
+#title{
+    text-align: center;
+    margin-bottom: 100px;
+}
+.card{
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+}

css/global.css

@@ -0,0 +1,114 @@
+* {
+  font-family: "Inter", sans-serif;
+  box-sizing: border-box;
+  overflow: hidden;
+  background-color: #272727;
+}
+
+body,
+html {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.modal-header,
+.modal-title,
+.modal-body,
+#contratID{
+  color: black;
+  background-color: white;
+}
+
+/* Menu */
+.menu {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.title-section {
+  color: white;
+  display: flex;
+  align-items: center;
+  padding-left: 10px;
+}
+
+.title-section img {
+  max-width: 80px;
+  max-height: 50px;
+}
+
+.page-change-a {
+  padding-right: 10px;
+}
+
+.page-change-button a {
+  margin: 2px;
+  color: black;
+  background-color: white;
+  border: 2px solid white;
+  border-radius: 10px;
+
+  text-decoration: none;
+}
+
+.page-change-button a:hover {
+  border-color: #eab308;
+  background-color: #eab308;
+  transition: all 1s;
+}
+
+main {
+  flex: 1;
+}
+
+/* Footer */
+footer {
+  color: white;
+}
+
+footer p {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 0px;
+}
+
+h5{
+  color: red;
+}
+
+/* Canvas system
+#canvas-system {
+  border: 1px solid white;
+}
+
+/* Login modal */
+/* #loginModal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 0 10px black;
+  z-index: 1000;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+} */
+
+/* #loginModal p {
+  margin-top: -10px;
+}
+
+#loginModal input {
+  margin-bottom: 10px;
+} */
+
+
+.card-title{
+  color: white;
+}

css/style.css

@@ -1,87 +0,0 @@
-canvas {
-    width: 50%;
-    border: 2px solid black;
-    border-radius: 5px;
-}
-
-
-
-* {
-    /* Pour que les tailles soient correctes */
-    box-sizing: border-box;
-  }
-  
-  body {
-    /* Pour coller le menu au bord, sans espace */
-    margin: 0;
-  }
-  
-  .menu {
-    /* Pour que le menu reste en place quand on scroll */
-    position: fixed;
-    /* Pour que le menu ne soit pas sur le texte et que ce dernier puisse être sélectionné */
-    width: 0px;
-  }
-  
-  main {
-    /* Pour que le texte ne soit pas sous le menu */
-    margin-left: 50px;
-    width: 500px;
-    text-align: justify;
-  }
-  
-  #hamburger {
-    /* Pour que la checkbox ne s'affiche pas */
-    display: none;
-  }
-  
-  #hamburger-logo {
-    /* Pour que le curseur soit un pointeur */
-    cursor: pointer;
-    background: black;
-    width: 200px;
-    display: block;
-    color: white;
-    /* Pour que le menu hamburger s'affiche toujours */
-    text-align: right;
-    /* Pour que le menu hamburger soit "rangé" par défaut */
-    transform: translateX(-168px);
-    padding: 10px;
-  }
-  
-  nav {
-    display: flex;
-    flex-direction: column;
-    background: black;
-    overflow: hidden;
-    width: 200px;
-    /* Pour que les liens soient "rangés" par défaut */
-    transform: translateX(-200px);
-  }
-  
-  #hamburger-logo,
-  nav {
-    /* Pour qu'il y ait une animation */
-    transition: 0.7s;
-  }
-  
-  /* Lorsque #hamburger est coché, le #hamburger-logo et le nav qui sont dans le même parent changent de propriété */
-  #hamburger:checked ~ #hamburger-logo,
-  #hamburger:checked ~ nav {
-    /* Changement de la position pour afficher les menus */
-    transform: translate(0);
-  }
-  
-  nav a {
-    color: white;
-    text-decoration: none;
-    padding: 10px;
-  }
-  
-  nav a:hover {
-    background: #444;
-  }
-
-
-
-  

js/agents.js

@@ -1,7 +1,7 @@
 // Copyright © 2023 Entreprise SpaceTarders
 'use strict'
 import { listSystems, getSystem, listWaypointsInSystem } from "./system.js"
-let token = 'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiUlVCRU4iLCJ2ZXJzaW9uIjoidjIuMS4yIiwicmVzZXRfZGF0ZSI6IjIwMjMtMTEtMTgiLCJpYXQiOjE3MDE0MzUxMTAsInN1YiI6ImFnZW50LXRva2VuIn0.AKe66yRJWV457_U-C5w0z03zwoPJIOyFgnef_nQXjXLtacyYxeYkcilv-5nRcsk1BsI1NkV2mT6Hg_WbevvxJzfIVSq1ZDQAUyA-sxM7qro3-kFfHWgy7FrCGEoKRTGRbFSo6yuKhvygAY6cZFsEAW6i9ayq893JFWeFNM-xfXDrnNI52VOQzWVJzYdhyi7jSsmUfw3vXf9OuXjaMPP3qpmCLpuElWGnqSyQBdLs7y7rN3MmkYH0E5ZPrYmBmdqk10QkJ_bruf2AgU808Q9lgw013qMVoDHwb-83_LrWjzYuIBQQBpfRIyMQrLaum-uEHsIECBg5D3M_OTFmy7htqQ'
+let token = "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiUlVCRU4iLCJ2ZXJzaW9uIjoidjIuMS40IiwicmVzZXRfZGF0ZSI6IjIwMjMtMTItMDIiLCJpYXQiOjE3MDIwMzg1ODgsInN1YiI6ImFnZW50LXRva2VuIn0.Brl1Mm9K7bG7kLfWGiU6M0WFvOXy-sV3T_p9-c-v97XMFvsmA85lpdKzeaAyVpOPMF4uM08HqxWb9mEGbag5whX0LPk39B_vjKeQVB9cjpjDsaElQz2HuWIUlB33eOQTyt_LKdQYnY7Jqh2HLopMbzK5sjeaGYzjoWILCuZXjqQkp5b0M_0EvXqCgDn1PpEb_MXSLkTpSQ1xa6hCaGjf6fE3KfTgRxEGpIunAeLRq1edaN4fU7TFU0SWSJZ1HO9CMfxA7eZt274sw4Wiea6LpwlPsGOMf1HFVl2sWdpbdIwdaFHyKpUAHWOGORKBB4B9G77wFLcOukwQMOQYOFL48Q"
 export function getAgent() {
     const settings = {
         async: true,

js/contrat.js

@@ -1,6 +1,6 @@
 // Copyright © 2023 Entreprise SpaceTarders
 'use strict'
-let token = "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiUlVCRU4iLCJ2ZXJzaW9uIjoidjIuMS4yIiwicmVzZXRfZGF0ZSI6IjIwMjMtMTEtMTgiLCJpYXQiOjE3MDE0MzUxMTAsInN1YiI6ImFnZW50LXRva2VuIn0.AKe66yRJWV457_U-C5w0z03zwoPJIOyFgnef_nQXjXLtacyYxeYkcilv-5nRcsk1BsI1NkV2mT6Hg_WbevvxJzfIVSq1ZDQAUyA-sxM7qro3-kFfHWgy7FrCGEoKRTGRbFSo6yuKhvygAY6cZFsEAW6i9ayq893JFWeFNM-xfXDrnNI52VOQzWVJzYdhyi7jSsmUfw3vXf9OuXjaMPP3qpmCLpuElWGnqSyQBdLs7y7rN3MmkYH0E5ZPrYmBmdqk10QkJ_bruf2AgU808Q9lgw013qMVoDHwb-83_LrWjzYuIBQQBpfRIyMQrLaum-uEHsIECBg5D3M_OTFmy7htqQ"
+let token = "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiUlVCRU4iLCJ2ZXJzaW9uIjoidjIuMS40IiwicmVzZXRfZGF0ZSI6IjIwMjMtMTItMDIiLCJpYXQiOjE3MDIwMzg1ODgsInN1YiI6ImFnZW50LXRva2VuIn0.Brl1Mm9K7bG7kLfWGiU6M0WFvOXy-sV3T_p9-c-v97XMFvsmA85lpdKzeaAyVpOPMF4uM08HqxWb9mEGbag5whX0LPk39B_vjKeQVB9cjpjDsaElQz2HuWIUlB33eOQTyt_LKdQYnY7Jqh2HLopMbzK5sjeaGYzjoWILCuZXjqQkp5b0M_0EvXqCgDn1PpEb_MXSLkTpSQ1xa6hCaGjf6fE3KfTgRxEGpIunAeLRq1edaN4fU7TFU0SWSJZ1HO9CMfxA7eZt274sw4Wiea6LpwlPsGOMf1HFVl2sWdpbdIwdaFHyKpUAHWOGORKBB4B9G77wFLcOukwQMOQYOFL48Q"
 
 export function CreateCardContrat(contrats){
     $('#contrats').empty()
@@ -10,18 +10,24 @@ export function CreateCardContrat(contrats){
         const card =
         `                            
           <div class="card" style="width: 20rem;">
-                <img src="/images/contrat.jpg" class="card-img-top" alt="">
+                <img src="/img/contrat.jpg" class="card-img-top" alt="">
                 <div class="card-body">
-                    <h5 class="card-title">${contrat.factionSymbol}</h5>
+                    <h5 style="color:white" class="card-title">${contrat.factionSymbol}</h5>
-                    <p class="card-text">${contrat.accepted}</p>
+                    <p style="color:white" class="card-text">${contrat.accepted}</p>
-                    <button class="btn btn-primary btn-infos" data-toggle="modal" data-target="#Infos" >Infos</button>
+                    <button id="btn-infos" contratID="${contrat.id}" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Infos</button>
-                    <button class="btn-modify btn btn-primary" data-toggle="modal" data-target="#Modify" >Accepter</button>                       
+                    <button id="btn-accepter" class="btn-modify btn btn-primary" data-toggle="modal" data-target="#Modify" >Accepter</button>                       
                 </div>
             </div>
         `
+
         $('#contrats').append(card)
+        $('#btn-infos').on('click', async function(){
+            await getInfosContrat($(this).attr('contratID'));
+            
+        })
     })
 }
+{/* <button id="btn-infos" contratID="${contrat.id}" class="btn btn-primary btn-infos" data-toggle="modal" data-target="#Infos" >Infos</button> */}
 export function listContrats(){
     const settings = {
         async: true,
@@ -59,3 +65,32 @@ export async function getContrat(contratId){
 
     return contrat;
 }
+
+export async function getInfosContrat(contratId){
+    
+    let contrat;
+    await $.ajax(`https://api.spacetraders.io/v2/my/contracts/${contratId}`, {
+        method: 'GET',
+        headers: {
+            Accept: 'application/json',
+            Authorization: `Bearer ${token}`
+        },
+        success: function(contrat){
+            console.log(contrat);
+            window.contratID.innerText = `ID Contrat : ${contratId}`
+            window.exampleModalLabel.innerText = `${contrat.factionSymbol}`
+            
+            
+        },
+        error: function(error){
+            console.log(error);
+        }
+    });
+
+    return contrat;
+    
+}
+
+
+
+

js/faction.js

@@ -1,6 +1,6 @@
 // Copyright © 2023 Entreprise SpaceTarders
 'use strict'
-let token = 'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiUlVCRU4iLCJ2ZXJzaW9uIjoidjIuMS4yIiwicmVzZXRfZGF0ZSI6IjIwMjMtMTEtMTgiLCJpYXQiOjE3MDE0MzUxMTAsInN1YiI6ImFnZW50LXRva2VuIn0.AKe66yRJWV457_U-C5w0z03zwoPJIOyFgnef_nQXjXLtacyYxeYkcilv-5nRcsk1BsI1NkV2mT6Hg_WbevvxJzfIVSq1ZDQAUyA-sxM7qro3-kFfHWgy7FrCGEoKRTGRbFSo6yuKhvygAY6cZFsEAW6i9ayq893JFWeFNM-xfXDrnNI52VOQzWVJzYdhyi7jSsmUfw3vXf9OuXjaMPP3qpmCLpuElWGnqSyQBdLs7y7rN3MmkYH0E5ZPrYmBmdqk10QkJ_bruf2AgU808Q9lgw013qMVoDHwb-83_LrWjzYuIBQQBpfRIyMQrLaum-uEHsIECBg5D3M_OTFmy7htqQ'
+let token = "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiUlVCRU4iLCJ2ZXJzaW9uIjoidjIuMS40IiwicmVzZXRfZGF0ZSI6IjIwMjMtMTItMDIiLCJpYXQiOjE3MDIwMzg1ODgsInN1YiI6ImFnZW50LXRva2VuIn0.Brl1Mm9K7bG7kLfWGiU6M0WFvOXy-sV3T_p9-c-v97XMFvsmA85lpdKzeaAyVpOPMF4uM08HqxWb9mEGbag5whX0LPk39B_vjKeQVB9cjpjDsaElQz2HuWIUlB33eOQTyt_LKdQYnY7Jqh2HLopMbzK5sjeaGYzjoWILCuZXjqQkp5b0M_0EvXqCgDn1PpEb_MXSLkTpSQ1xa6hCaGjf6fE3KfTgRxEGpIunAeLRq1edaN4fU7TFU0SWSJZ1HO9CMfxA7eZt274sw4Wiea6LpwlPsGOMf1HFVl2sWdpbdIwdaFHyKpUAHWOGORKBB4B9G77wFLcOukwQMOQYOFL48Q"
 export async function listFactions(limit, pages){
     let factions = [];
 

js/main.js

@@ -3,53 +3,21 @@
 import { createAgent, getAgent } from "./agents.js";
 import { listSystems, getSystem, listWaypointsInSystem } from "./system.js";
 import {getFaction, listFactions} from "./faction.js";
-import {getContrat, listContrats, CreateCardContrat} from "./contrat.js";
+import {getContrat, listContrats, CreateCardContrat, getInfosContrat} from "./contrat.js";
-
+
-
+
-
+
-let token = "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiUlVCRU4iLCJ2ZXJzaW9uIjoidjIuMS4yIiwicmVzZXRfZGF0ZSI6IjIwMjMtMTEtMTgiLCJpYXQiOjE3MDE0MzUxMTAsInN1YiI6ImFnZW50LXRva2VuIn0.AKe66yRJWV457_U-C5w0z03zwoPJIOyFgnef_nQXjXLtacyYxeYkcilv-5nRcsk1BsI1NkV2mT6Hg_WbevvxJzfIVSq1ZDQAUyA-sxM7qro3-kFfHWgy7FrCGEoKRTGRbFSo6yuKhvygAY6cZFsEAW6i9ayq893JFWeFNM-xfXDrnNI52VOQzWVJzYdhyi7jSsmUfw3vXf9OuXjaMPP3qpmCLpuElWGnqSyQBdLs7y7rN3MmkYH0E5ZPrYmBmdqk10QkJ_bruf2AgU808Q9lgw013qMVoDHwb-83_LrWjzYuIBQQBpfRIyMQrLaum-uEHsIECBg5D3M_OTFmy7htqQ";
+let token = "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiUlVCRU4iLCJ2ZXJzaW9uIjoidjIuMS40IiwicmVzZXRfZGF0ZSI6IjIwMjMtMTItMDIiLCJpYXQiOjE3MDIwMzg1ODgsInN1YiI6ImFnZW50LXRva2VuIn0.Brl1Mm9K7bG7kLfWGiU6M0WFvOXy-sV3T_p9-c-v97XMFvsmA85lpdKzeaAyVpOPMF4uM08HqxWb9mEGbag5whX0LPk39B_vjKeQVB9cjpjDsaElQz2HuWIUlB33eOQTyt_LKdQYnY7Jqh2HLopMbzK5sjeaGYzjoWILCuZXjqQkp5b0M_0EvXqCgDn1PpEb_MXSLkTpSQ1xa6hCaGjf6fE3KfTgRxEGpIunAeLRq1edaN4fU7TFU0SWSJZ1HO9CMfxA7eZt274sw4Wiea6LpwlPsGOMf1HFVl2sWdpbdIwdaFHyKpUAHWOGORKBB4B9G77wFLcOukwQMOQYOFL48Q"
-let offset = {
+
-    x: 10,
+$(document).ready(async function(){
-    y: 10
+    let contrat = listContrats()
-};
+    if (document.URL.includes('contrats.html')) {
-function initGame() {
+
-    const settings = {
+        return;
-        async: true,
-        crossDomain: true,
-        url: 'https://api.spacetraders.io/v2/register',
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          Accept: 'application/json'
-        },
-        processData: false,
-        data: '{\n  "faction": "COSMIC",\n  "symbol": "",\n  "email": ""\n}'
-    };
-    
-    $.ajax(settings).done(function (response) {
-        console.log(response);
-    });
-}
-
-getAgent()
-
-function getWayPoint(wayPoint) {
-    const settings = {
-        async: true,
-        crossDomain: true,
-        url: `https://api.spacetraders.io/v2/systems/systemSymbol/waypoints/waypointSymbol`,
-        method: 'GET',
-        headers: {
-            Accept: 'application/json'
     }
-    };
 
-    $.ajax(settings).done(function (response) {
+})
-        console.log(response);
-    });
-};
 
-let contrat = listContrats()
 
 
 

js/system.js

@@ -1,6 +1,6 @@
 // Copyright © 2023 Entreprise SpaceTarders
 'use strict'
-let token = 'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiUlVCRU4iLCJ2ZXJzaW9uIjoidjIuMS4yIiwicmVzZXRfZGF0ZSI6IjIwMjMtMTEtMTgiLCJpYXQiOjE3MDE0MzUxMTAsInN1YiI6ImFnZW50LXRva2VuIn0.AKe66yRJWV457_U-C5w0z03zwoPJIOyFgnef_nQXjXLtacyYxeYkcilv-5nRcsk1BsI1NkV2mT6Hg_WbevvxJzfIVSq1ZDQAUyA-sxM7qro3-kFfHWgy7FrCGEoKRTGRbFSo6yuKhvygAY6cZFsEAW6i9ayq893JFWeFNM-xfXDrnNI52VOQzWVJzYdhyi7jSsmUfw3vXf9OuXjaMPP3qpmCLpuElWGnqSyQBdLs7y7rN3MmkYH0E5ZPrYmBmdqk10QkJ_bruf2AgU808Q9lgw013qMVoDHwb-83_LrWjzYuIBQQBpfRIyMQrLaum-uEHsIECBg5D3M_OTFmy7htqQ'
+let token = "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiUlVCRU4iLCJ2ZXJzaW9uIjoidjIuMS40IiwicmVzZXRfZGF0ZSI6IjIwMjMtMTItMDIiLCJpYXQiOjE3MDIwMzg1ODgsInN1YiI6ImFnZW50LXRva2VuIn0.Brl1Mm9K7bG7kLfWGiU6M0WFvOXy-sV3T_p9-c-v97XMFvsmA85lpdKzeaAyVpOPMF4uM08HqxWb9mEGbag5whX0LPk39B_vjKeQVB9cjpjDsaElQz2HuWIUlB33eOQTyt_LKdQYnY7Jqh2HLopMbzK5sjeaGYzjoWILCuZXjqQkp5b0M_0EvXqCgDn1PpEb_MXSLkTpSQ1xa6hCaGjf6fE3KfTgRxEGpIunAeLRq1edaN4fU7TFU0SWSJZ1HO9CMfxA7eZt274sw4Wiea6LpwlPsGOMf1HFVl2sWdpbdIwdaFHyKpUAHWOGORKBB4B9G77wFLcOukwQMOQYOFL48Q"
 const lienSysteme = 'https://api.spacetraders.io/v2/systems'
 
 export async function listSystems(limit, pages){

templates/contrats.html

@@ -1,37 +1,77 @@
 <!--Copyright © 2023 Entreprise SpaceTarders -->
+
 <!DOCTYPE html>
-<html lang="en">
+<html lang="fr" class="html-index">
-<head>
+  <head>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="../css/style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <script type="module" src="../js/main.js"></script>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap"
+      rel="stylesheet"
+    />
+    <script
+      src="https://code.jquery.com/jquery-3.7.1.min.js"
+      integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
+      crossorigin="anonymous"
+    ></script>
+    <script type="module" src="/js/contrat.js" defer></script>
+    <script type="module" src="/js/main.js" defer></script>
+    <link rel="stylesheet" href="/css/global.css"/>
+    <link rel="stylesheet" href="/css/contrats.css"/>
+    <link rel="icon" href="/img/logo.png" />
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
-    <title>Space traders</title>
+    <title>SpaceTraders</title>
-</head>
+  </head>
-<body>
+  <body>
-    <!-- Menu sur le côté -->
+    <header id="header">
       <div class="menu">
-        <!-- Utilisation d'une checkbox -->
+        <div class="title-section">
-        <input type="checkbox" id="hamburger">
+          <img src="/img/logo.png" alt="Logo AppleTech.svg" />
-        <!-- Label de la checkbox -->
+          <p>SpaceTraders</p>
-        <label id="hamburger-logo" for="hamburger">☰</label>
+        </div>
-        <!-- Le reste du menu -->
+        <div class="page-change-button">
-        <nav>
+            <a  id="btn-agent" href="http://127.0.0.1:5501/templates/agent.html">Mon agent</a>
-        <a href="index.html">Page d'accueil</a>
+            <a id="btn-contract" href="http://127.0.0.1:5501/templates/contrats.html">Mes contrats</a>   
-        <a href="#">Mes contrats</a>
+            <a id="btn-faction" href="http://blog.local/user/index">Ma faction</a> 
-        <a href="#">Mon agent</a>
+            <a id="btn-ship" href="http://blog.local/user/create">Mes vaiseaux</a>
-        <a href="#">A propos</a>
+            <a id="btn-ship" href="http://blog.local/user/logout">Systeme</a>  
-        </nav>
+        </div>
-    </div>
+      </div>
-    <main class="main-window">
+      <hr />
-        
+    </header>
 
-        <h1 id="title">Mes contrats</h1>
+    <main id="main">
+        <h1 style="color:white" id="title">Mes contrats</h1>
         <ul id="contrats"></ul>
+
+
+        <!-- Modal -->
+        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                        <div id="contratID"></div>
+                        <p></p>     
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>   
     </main>
-</body>
+
+    <footer id="footer">
+      <hr />
+      <p>SpaceTrader &copy; 2023</p>
+    </footer>
+  </body>
 </html>

templates/index.html

@@ -1,39 +1,55 @@
 <!--Copyright © 2023 Entreprise SpaceTarders -->
 <!DOCTYPE html>
-<html lang="en">
+<html lang="fr" class="html-index">
-<head>
+  <head>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="../css/style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <script type="module" src="../js/main.js"></script>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap"
+      rel="stylesheet"
+    />
+    <script
+      src="https://code.jquery.com/jquery-3.7.1.min.js"
+      integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
+      crossorigin="anonymous"
+    ></script>
+    <script type="module" src="/js/agent.js" defer></script>
+    <script type="module" src="/js/contrat.js" defer></script>
+    <script type="module" src="/js/faction.js" defer></script>
+    <script type="module" src="/js/main.js" defer></script>
+    <script type="module" src="/js/system.js" defer></script>
+    <link rel="stylesheet" href="/css/global.css" />
+    <link rel="icon" href="/img/logo.png" />
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
-    <title>Space traders</title>
+    <title>SpaceTraders</title>
-</head>
+  </head>
-<body>
+  <body>
-    <!-- Menu sur le côté -->
+    <header id="header">
       <div class="menu">
-        <!-- Utilisation d'une checkbox -->
+        <div class="title-section">
-        <input type="checkbox" id="hamburger">
+          <img src="/img/logo.png" alt="Logo AppleTech.svg" />
-        <!-- Label de la checkbox -->
+          <p>SpaceTraders</p>
-        <label id="hamburger-logo" for="hamburger">☰</label>
-        <!-- Le reste du menu -->
-        <nav>
-        <a href="index.html">Page d'accueil</a>
-        <a href="contrats.html">Mes contrats</a>
-        <a href="#">Mon agent</a>
-        <a href="#">A propos</a>
-        </nav>
         </div>
-    <main class="main-window">
+        <div class="page-change-button">
-        
+            <a  id="btn-agent" href="http://127.0.0.1:5501/templates/agent.html">Mon agent</a>
-        <input id="token" type="text">
+            <a id="btn-contract" href="http://127.0.0.1:5501/templates/contrats.html">Mes contrats</a>   
-        <br>
+            <a id="btn-faction" href="http://blog.local/user/index">Ma faction</a> 
-        <canvas id="canvas"></canvas>
+            <a id="btn-ship" href="http://blog.local/user/create">Mes vaiseaux</a>
+            <a id="btn-ship" href="http://blog.local/user/logout">Systeme</a>  
+        </div>
+      </div>
+      <hr />
+    </header>
 
+    <main><p>Page accueil</p></main>
 
-    </main>
+    <footer id="footer">
-</body>
+      <hr />
+      <p>SpaceTrader &copy; 2023</p>
+    </footer>
+  </body>
 </html>

token

@@ -1 +1 @@
-eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiUlVCRU4iLCJ2ZXJzaW9uIjoidjIuMS4yIiwicmVzZXRfZGF0ZSI6IjIwMjMtMTEtMTgiLCJpYXQiOjE3MDE0MzUxMTAsInN1YiI6ImFnZW50LXRva2VuIn0.AKe66yRJWV457_U-C5w0z03zwoPJIOyFgnef_nQXjXLtacyYxeYkcilv-5nRcsk1BsI1NkV2mT6Hg_WbevvxJzfIVSq1ZDQAUyA-sxM7qro3-kFfHWgy7FrCGEoKRTGRbFSo6yuKhvygAY6cZFsEAW6i9ayq893JFWeFNM-xfXDrnNI52VOQzWVJzYdhyi7jSsmUfw3vXf9OuXjaMPP3qpmCLpuElWGnqSyQBdLs7y7rN3MmkYH0E5ZPrYmBmdqk10QkJ_bruf2AgU808Q9lgw013qMVoDHwb-83_LrWjzYuIBQQBpfRIyMQrLaum-uEHsIECBg5D3M_OTFmy7htqQ
+"eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiUlVCRU4iLCJ2ZXJzaW9uIjoidjIuMS40IiwicmVzZXRfZGF0ZSI6IjIwMjMtMTItMDIiLCJpYXQiOjE3MDIwMzg1ODgsInN1YiI6ImFnZW50LXRva2VuIn0.Brl1Mm9K7bG7kLfWGiU6M0WFvOXy-sV3T_p9-c-v97XMFvsmA85lpdKzeaAyVpOPMF4uM08HqxWb9mEGbag5whX0LPk39B_vjKeQVB9cjpjDsaElQz2HuWIUlB33eOQTyt_LKdQYnY7Jqh2HLopMbzK5sjeaGYzjoWILCuZXjqQkp5b0M_0EvXqCgDn1PpEb_MXSLkTpSQ1xa6hCaGjf6fE3KfTgRxEGpIunAeLRq1edaN4fU7TFU0SWSJZ1HO9CMfxA7eZt274sw4Wiea6LpwlPsGOMf1HFVl2sWdpbdIwdaFHyKpUAHWOGORKBB4B9G77wFLcOukwQMOQYOFL48Q"