[ADD] an acceptably functional demo

Author: HenraL

bonus/bootstrap/asperboard.bsdesign

@@ -29,7 +29,7 @@
 
 /* Style the button when it is active */
 
-.buttonList button.active {
+.buttonList button.active, .buttonList li.active {
   background-color: #007bff;
   color: white;
   border-radius: 0px;

html/assets/css/forum_subjects.css

@@ -14,7 +14,7 @@ function generateSentMessage(message) {
     if (typeof message === "object") {
         messageField.appendChild(message);
     } else {
-        messageField.innerHTML = message;
+        messageField.innerText = message;
     }
     talkText.appendChild(messageField);
     receiverMessage.appendChild(talkText);
@@ -30,7 +30,7 @@ function generateReceivedMessage(message) {
     if (typeof message === "object") {
         messageField.appendChild(message);
     } else {
-        messageField.innerHTML = message;
+        messageField.innerText = message;
     }
     talkText.appendChild(messageField);
     receiverMessage.appendChild(talkText);
@@ -67,6 +67,22 @@ function beautifyMessage(message, sender, name, icon) {
     return receiverMessage;
 }
 
+function generateResults() {
+    const results = document.createElement("div");
+    results.classList.add("results");
+    const userGame = getIframeOfTheGame();
+    results.appendChild(userGame);
+    results.appendChild(document.createElement("br"));
+    results.appendChild(document.createElement("br"));
+    const userScore = document.createElement("p");
+    userScore.textContent = "Résultat: 4/5";
+    results.appendChild(userScore);
+    const userTime = document.createElement("p");
+    userTime.textContent = "Temps: 2 minutes";
+    results.appendChild(userTime);
+    return results;
+}
+
 function injectChatLog() {
     const chatLog = document.getElementById("chat-info");
     const username = window.cookie_manager.read("username") || "User";
@@ -81,7 +97,7 @@ function injectChatLog() {
             "sender": true,
             "name": username,
             "icon": "",
-            "message": `${getIframeOfTheGame()}<br>Résultat: 4/5<br>Temps: 2 minutes`
+            "message": generateResults()
         },
         {
             "sender": false,

html/assets/js/pro/suivi/suivi_pro.js

@@ -160,7 +160,7 @@
             <ul class="buttonList">
                 <li><button>Comment gérer le stress des devoirs et des examens ?</button></li>
                 <li><button>Astuces pour mieux s'organiser en classe et à la maison.</button></li>
-                <li><button class="active">Parents d'un enfant Asperger : vos conseils et expériences.</button></li>
+                <li class="active"><button class="active">Parents d'un enfant Asperger : vos conseils et expériences.</button></li>
                 <li><button>Vivre avec un frère ou une sœur neurotypique : défis et solutions.</button></li>
                 <li><button>Comment se faire des amis quand on a du mal à comprendre les codes sociaux ?</button></li>
                 <li><button>Gérer les incompréhensions et les malentendus dans les conversations.</button></li>

html/routes/pro/discuter/index.html

@@ -151,6 +151,27 @@
         </div><select id="fontSelector" onchange="updateFont(this);"></select>
         <aside><button class="button_desing" type="button" onclick="logout();">Logout</button></aside>
     </section>
+    <section class="forumFrame">
+        <aside class="aside-left">
+            <nav class="navbar_search">
+                <form class="search-form"><input type="text" class="search-input" placeholder="Search..."><button class="search-button" type="submit">🔍</button></form>
+            </nav>
+            <ul class="buttonList">
+                <li class="active"><button class="active">Lucas Houilles</button></li>
+                <li><button>Jade Grenelle</button></li>
+                <li><button>Louise Darras</button></li>
+                <li><button>Leonard de Vinci</button></li>
+                <li><button>Marie Incandella</button></li>
+                <li><button>Georges Remi, Hergé</button></li>
+                <li><button>Hiro</button></li>
+                <li><button>Handler One</button></li>
+            </ul>
+        </aside>
+        <aside class="aside-right">
+            <section id="chat-info" class="chat"></section>
+            <section class="userInput"><input type="text" placeholder="Type your message here"><button>Send</button></section>
+        </aside>
+    </section>
     <section id="cookie_banner"></section>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../../../assets/js/modules/cookie_manager.mjs" type="module"></script>

html/routes/pro/suivi/index.html

@@ -157,7 +157,7 @@
                 <form class="search-form"><input type="text" class="search-input" placeholder="Search..."><button type="submit" class="search-button">🔍</button></form>
             </nav>
             <ul class="buttonList">
-                <li><button class="active">Comment gérer le stress des devoirs et des examens ?</button></li>
+                <li class="active"><button class="active">Comment gérer le stress des devoirs et des examens ?</button></li>
                 <li><button>Astuces pour mieux s'organiser en classe et à la maison.</button></li>
                 <li><button>Parents d'un enfant Asperger : vos conseils et expériences.</button></li>
                 <li><button>Vivre avec un frère ou une sœur neurotypique : défis et solutions.</button></li>