diff --git a/back-end/debug_log.js b/back-end/debug_log.js
new file mode 100644
index 0000000..99c0a20
--- /dev/null
+++ b/back-end/debug_log.js
@@ -0,0 +1,22 @@
+console.log("lancement du debug_log");
+
+if (typeof game_details !== "undefined") {
+    console.log("✅ game_details est disponible :", game_details);
+} else {
+    console.warn("❌ game_details N'EST PAS défini !");
+}
+console.log("🗃️ localStorage :", localStorage);
+console.log("🗃️ sessionStorage :", sessionStorage);
+for (let key in window) {
+    if (typeof window[key] === "object") {
+        console.log(`📦 Objet détecté : ${key}`, window[key]);
+    }
+}
+console.log("📋 Liste des variables globales :");
+console.log(Object.keys(window));
+console.log("📋 Liste des fonctions globales :");
+for (let key in window) {
+    if (typeof window[key] === "function") {
+        console.log("🔹 Fonction détectée :", key);
+    }
+}
diff --git a/back-end/script.js b/back-end/script.js
index c9bc534..6815767 100644
--- a/back-end/script.js
+++ b/back-end/script.js
@@ -1,13 +1,65 @@
-const srvname = document.querySelector('#srv-name');
+const serverName = document.querySelector('#serverName');
+const mapName = document.querySelector('#mapName');
+const playerCount = document.querySelector('#playerCount');
+let mountingaddons = false;
 
 
-window.onload = function() {
-    srvname.textContent = "test"
-    
-    
-    let progress = 0;
-    const progressBar = document.querySelector('.progress');
+function GameDetails ( servername, serverurl, mapname, maxplayers, steamid, gamemode, volume, language ) {
+    serverName.textContent = `${servername}`;
+    mapName.textContent = `actuellement sur : ${mapname}, en ${gamemode}`;
+    playerCount.textContent = `nombre de joueur max : ${maxplayers}`;
 };
 
+function setProgress(percent , statusC, files) {
+    percent = Math.max(1, Math.min(100, percent));
 
-document.getElementById("music").volume = 0.2;
+    let progressBar = document.querySelector('.progress');
+    let progressText = document.querySelector('.progress-text');
+    let progressStatus = document.querySelector('.progress-status');
+    if (progressBar) {
+      progressBar.style.width = percent + "%";
+    }
+    if (progressText) {
+      progressText.innerText = `Chargement : ${percent}%`;
+    }
+    if (files) {
+      progressStatus.innerText = `téléchargement : ${files}`;
+    } else {
+      progressStatus.innerText = "";
+    }
+    console.log(`🔄 Progression mise à jour : ${percent}%`);
+}
+
+function SetStatusChanged( status ) {
+    if(status == "Mounting Addons"){
+      mountingaddons = true;
+    }
+    if(status == "Mounting Addons"){
+      mountingaddons = true;
+      setProgress(50, status);
+    }
+    if(status == "Workshop Complete"){
+      mountingaddons = true;
+      setProgress(50, status);
+    }
+    if(status == "Client info sent!"){
+      mountingaddons = true;
+      setProgress(92, status);
+    }
+    if(status == "Starting Lua..."){
+      mountingaddons = true;
+      setProgress(99, status);
+    }
+    if(status.indexOf("/") !== -1){
+        var statusarray = status.split("/");
+        downloadedFiles = statusarray[0];
+        neededFiles = statusarray[1].split(" ")[0];
+        var offset = 20;
+        if(mountingaddons == true){
+            offset = 50;
+        }
+        var percent = ((downloadedFiles / neededFiles) * 100) / 3;
+        setProgress(offset+percent, status, downloadedFiles);
+    }
+}; 
+document.getElementById("music").volume = 0.2;
\ No newline at end of file
diff --git a/doc/doc-loading-screen.txt b/doc/doc-loading-screen.txt
new file mode 100644
index 0000000..b0deadf
--- /dev/null
+++ b/doc/doc-loading-screen.txt
@@ -0,0 +1,57 @@
+/*
+	Called at the start, when the loading screen finishes loading all assets.
+
+	serverName - Server's name.
+		Convar: hostname
+		For exmaple: "Garry's Mod Server"
+	serverURL - URL for the loading screen.
+		Convar: sv_loadingurl
+		For example: "http://mywebsite.com/myloadingscreen.html"
+	mapName - The name of the map the server is playing.
+		For example: "cs_office"
+	maxPlayers - Maximum number of players for the server.
+		Convar: maxplayers
+	steamID - 64-bit, numeric Steam community ID of the client joining.
+		For example: 76561198012345678
+	gamemode - The gamemode the server is currently playing.
+		Convar: gamemode
+		For example: "deathrun"
+	volume - The value of the player's in-game 'snd_musicvolume' console variable (Music Volume), from 0 to 1
+	language - The value of the player's in-game 'gmod_language' console variable, a two letter representation of the player's main menu language
+*/
+function GameDetails( servername, serverurl, mapname, maxplayers, steamid, gamemode, volume, language ) {}
+
+/*
+	Called at the start
+
+	total- Total number of files the client will have to download.
+*/
+function SetFilesTotal( total ) {}
+
+/*
+	Called when the client starts downloading a file.
+
+	fileName- The full path and name of the file the client is downloading.
+		This path represents the resource's location rather than the actual file's location on the server.
+		For example, the file "garrysmod/addons/myAddon/materials/models/bobsModels/car.mdl" will be:
+			"materials/models/bobsModels/car.mdl"
+*/
+function DownloadingFile( fileName ) {}
+
+/*
+	Called when the client's joining status changes.
+
+	status- Current joining status.
+		For example: "Starting Lua..."
+
+	Under normal conditions this would not be fired until game client starts interacting with server files/workshop. This
+	means you probably can't use "Retrieving server info" and everything that goes before downloads.
+*/
+function SetStatusChanged( status ) {}
+
+/*
+	Called when the number of files remaining for the client to download changes.
+
+	needed- Number of files left for the client to download.
+*/
+function SetFilesNeeded( needed ) {}
\ No newline at end of file
diff --git a/front-end/index.html b/front-end/index.html
deleted file mode 100644
index 48f9fd5..0000000
--- a/front-end/index.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Chargement du Serveur...</title>
-    <link rel="stylesheet" href="style.css">
-</head>
-<body>
-    <div class="background"></div>
-    
-    <div class="loading-container">
-        <h1 id="serverName">Chargement...</h1>
-        <p id="playerCount">Joueurs : 0/0</p>
-        <p id="mapName">Carte : ...</p>
-        
-        <div class="progress-bar">
-            <div class="progress"></div>
-        </div>
-        <p class="loading-text" id="srv-name">serveur de test</p>
-        <p class="loading-text">Connexion en cours...</p>
-    </div>
-
-    <audio id="music" autoplay loop>
-        <source src="music.mp3" type="audio/mpeg">
-    </audio>
-    <script src="../back-end/script.js"></script>
-</body>
-</html>
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..3f003b6
--- /dev/null
+++ b/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chargement du Serveur...</title>
+    <link rel="stylesheet" href="page/style.css">
+</head>
+<body>
+    
+    
+    <div class="loading-container">
+        <h1 id="serverName">Chargement...</h1>
+        <p id="playerCount">Joueurs : ...</p>
+        <p id="mapName">Carte : ...</p>
+        <div class="progress-bar">
+            <div class="progress"></div>
+        </div>
+        <p class="progress-text">Connexion en cours...</p>
+        <p class="progress-status">status...</p>
+        <div class="random-stuffs">
+            <p id="credit-music">CREDIT : music interpreted by Gabriel Piano on youtube originally interpreted by Aaron Smith & KRONO remix</p>
+        </div>
+    </div>
+    
+
+    <audio id="music" autoplay loop>
+        <source src="sound_stuff/dancin.ogg" type="audio/ogg">
+    </audio>
+    <script src="back-end/script.js"></script>
+    <script src="back-end/debug_log.js"></script>
+    <script>
+        console.log("🔄 Ajout de la vidéo d'arrière-plan...");
+
+        // Création de l'élément <video>
+        let video = document.createElement("video");
+        video.id = "background-video";
+        video.autoplay = true;
+        video.loop = true;
+        video.muted = true;
+        video.playsInline = true; // Pour éviter le mode plein écran sur mobile
+        video.style.position = "fixed";
+        video.style.top = "0";
+        video.style.left = "0";
+        video.style.width = "100%";
+        video.style.height = "100%";
+        video.style.objectFit = "cover";
+        video.style.zIndex = "-1";
+
+        // Ajout de la source vidéo
+        let source = document.createElement("source");
+        source.src = "sound_stuff/phasm.mp4"; // Remplace par ton URL
+        source.type = "video/mp4";
+
+        video.appendChild(source);
+        document.body.appendChild(video);
+
+        console.log("✅ Vidéo ajoutée avec succès !");
+
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/front-end/style.css b/page/style.css
similarity index 83%
rename from front-end/style.css
rename to page/style.css
index 5ec9b3f..7f14cde 100644
--- a/front-end/style.css
+++ b/page/style.css
@@ -16,12 +16,13 @@ body {
     text-align: center;
 }
 
-.background {
-    position: absolute;
+#background-video {
+    position: fixed;
+    top: 0;
+    left: 0;
     width: 100%;
     height: 100%;
-    background: url('background.jpg') center/cover no-repeat;
-    filter: blur(8px);
+    object-fit: cover;
     z-index: -1;
 }
 
@@ -54,3 +55,9 @@ body {
     margin-top: 10px;
     opacity: 0.8;
 }
+
+.random-stuffs {
+    font-size: 8px;
+    margin-top: 50px;
+    opacity: 0.5;
+}
diff --git a/sound_stuff/dancin.ogg b/sound_stuff/dancin.ogg
new file mode 100644
index 0000000..0495eca
Binary files /dev/null and b/sound_stuff/dancin.ogg differ
diff --git a/sound_stuff/phasm.mp4 b/sound_stuff/phasm.mp4
new file mode 100644
index 0000000..2ad75f9
Binary files /dev/null and b/sound_stuff/phasm.mp4 differ