add CSS for chat

src/index.html

@@ -50,6 +50,12 @@
         <img src="./images/chat.png">
     </div>
     <div id="chat">
+        <ul id="messages">
+            <li><b>Rappel:</b> Tous les messages doivent parler de Denis !</li>
+        </ul>
+        <input id="message-input" type="text" placeholder="Écrivez votre message sur Denis ici...">
+        <img id="send" src="./images/send.png">
+        <img id="close" src="./images/cross.png">
     </div>
     <script src="https://danby.aniere.fr:3000/socket.io/socket.io.js"></script>
     <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

src/script.js

@@ -1,4 +1,16 @@
-document.addEventListener('DOMContentLoaded', () => {
+function addMessage(author, message) {
+    var li = document.createElement("li");
+    li.innerHTML = "<b>" + author + ": </b>";
+    li.innerText += message;
+    document.getElementById("messages").appendChild(li);
+}
+
+function sendMessage() {
+    document.getElementById("message-input").value = "";
+}
+
+
+document.addEventListener("DOMContentLoaded", () => {
 
     try {
         var socket = io("https://danby.aniere.fr:3000");
@@ -20,3 +32,21 @@ const swiper = new Swiper('.swiper', {
     speed: 400,
     spaceBetween: 100,
 });
+
+
+document.getElementById("chat-button").addEventListener("click", () => {
+    document.getElementById("chat").style.display = "block";
+});
+
+document.getElementById("close").addEventListener("click", () => {
+    document.getElementById("chat").style.display = "none";
+});
+
+document.getElementById("send").addEventListener("click", sendMessage);
+
+document.getElementById("message-input").addEventListener("keyup", (event) => {
+
+    if(event.key == "Enter") {
+        sendMessage();
+    }
+});

src/style.css

@@ -11,6 +11,7 @@ body {
 }
 
 #title {
+    margin-top: 1vh;
     width: 100%;
     display: flex;
     justify-content: center;
@@ -48,11 +49,15 @@ body {
     width: 100px;
     border-radius: 50%;
     background-color: white;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 #chat-button > img {
-    height: 90px;
-    width: 90px;
+    height: 60px;
+    width: 60px;
 }
 
 #chat {
@@ -64,9 +69,37 @@ body {
     right: 0;
 
     display: none;
+    padding: 1.5vh;
+    border-radius: 30px 0px 0px 0px; 
     background-color: white;
 }
 
+#messages {
+    height: 50vh;
+    padding: 0;
+    list-style: none;
+    overflow-y: scroll;
+    font-family: sans-serif;
+}
+
+#message-input {
+    padding: 1vh;
+    width: 20vw;
+}
+
+#send {
+    height: 30px;
+    margin-left: 5px;
+    transform: translateY(10px);
+}
+
+#close {
+    height: 30px;
+    margin-left: 5px;
+    transform: translateY(10px);
+}
+
+
 .swiper {
     width: 500px;
     height: 400px;
@@ -86,6 +119,7 @@ body {
 @media screen and (max-width: 1024px) {
 
     body {
+        overflow-y: hidden;
         background-image: url("./images/mobile-background.jpg");
     }
 
@@ -97,10 +131,36 @@ body {
         display: flex;
     }
 
+    #chat-button  {
+        height: 60px;
+        width: 60px;
+
+        bottom: 5vh;
+    }
+
+    #chat-button > img {
+        z-index: 9998;
+        height: 30px;
+        width: 30px;
+    }
+
     #chat {
         z-index: 9999;
         height: 100vh;
         width: 100vw;
+
+        border-radius: 0px 0px 0px 0px; 
+    } 
+
+    #messages {
+        padding-left: 5vw;
+        height: 80vh;
+        width: 95vw;
+    }
+
+    #message-input {
+        margin-left: 5vw;
+        width: 60vw;
     }
 
     .photo-container {