OHHHHH OUII SACHA JE JUTEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE

css/profile.css

@@ -1,9 +1,17 @@
-#modal-profile
+.cont-profile
 {
-    width: 60%;
-    height: 70%;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+
+#profile
+{
+    width: 50%;
+    height: 90%;
     padding: 10px;
-    background-color: rgba(0, 0, 0, 0.521);
+    background-color: rgb(0, 0, 0);
     border: none;
     border-radius: 10px;
     display: flex;
@@ -18,12 +26,12 @@
     width: 100%;
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: center;
 }
 
 .profile-header p
 {
-    font-size: 40px;
+    font-size: 60px;
 }
 
 .profile-header button
@@ -66,15 +74,14 @@
 {
     display: flex;
     align-items: center;
-    justify-content: space-around;
     width: 80%;
     padding: 5px;
 }
 
 #btn-logout
 {
-    width: 60px;
-    height: 60px;
+    width: 50px;
+    height: 50px;
     padding: 0;
     border: none;
     background: none;

html/templates/modal_profile.html

@@ -1,19 +0,0 @@
-<div class="profile-header">
-    <div></div>
-    <p class="">Profile</p>
-    <button id="btn-close"><p>X</p></button>
-</div>  
-<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>

html/templates/profile/profile.html

@@ -0,0 +1,21 @@
+<div class="cont-profile">
+    <div id="profile">
+        <div class="profile-header">
+            <p class="">Profile</p>
+        </div>  
+        <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>

js/controllers/profile.js

@@ -1,13 +1,11 @@
-import { Modal } from "../skama_code/ui/modal.js"
+import menu_mod from "./menu_mod.js";
 import { Auth } from "../skama_code/auth/auth.js"
 import { My } from "../skama_code/commun/my.js"
 import login from "./login.js";
 
 export default function profile(temp_engine) {
-    let modal = new Modal("modal-profile", temp_engine);
-    modal.load("templates/modal_profile.html");
-    modal.after_load(() => {
-        modal.show();
+    temp_engine.after_render(() => {
+        $("body").css("background-image", "url('/assets/profile/background.png')")
         $('#name').append(My.agent.name);
         $('#faction').append(My.agent.faction);
         $('#credit').append(My.agent.credits);
@@ -17,17 +15,15 @@ export default function profile(temp_engine) {
         temp_engine.add_event('#btn-token', 'click', () => {
             navigator.clipboard.writeText(My.agent.token);
             alert('Token copied !');
-        })
+        });
 
         temp_engine.add_event('#btn-logout', 'click', () => {
             const auth = new Auth();
             auth.unload_token();
             login(temp_engine);
-        })
-
-        temp_engine.add_event('#btn-close', 'click', () => {
-            console.log("CLOSINF")
-            modal.close();
         });
+
+        menu_mod(temp_engine);
     });
+    temp_engine.render("/templates/profile/profile.html");
 }