start to add chat feature

src/index.html

@@ -42,9 +42,15 @@
             </div>
         </div>
     </div>
+    
     <div id="counter-container">
         <span>Nombre de fans connectés : <span id="value">x</span></span>
     </div>
+    <div id="chat-button">
+        <img src="./images/chat.png">
+    </div>
+    <div id="chat">
+    </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>
     <script src="script.js"></script>

src/style.css

@@ -1,4 +1,6 @@
 body {
+    margin: 0;
+
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
@@ -37,6 +39,34 @@ body {
     font-family: sans-serif;
 }
 
+#chat-button {
+    position: absolute;
+    right: 3vh;
+    bottom: 3vh;
+
+    height: 100px;
+    width: 100px;
+    border-radius: 50%;
+    background-color: white;
+}
+
+#chat-button > img {
+    height: 90px;
+    width: 90px;
+}
+
+#chat {
+    height: 60vh;
+    width: 30vw;
+
+    position: absolute;
+    bottom: 0;
+    right: 0;
+
+    display: none;
+    background-color: white;
+}
+
 .swiper {
     width: 500px;
     height: 400px;
@@ -67,6 +97,12 @@ body {
         display: flex;
     }
 
+    #chat {
+        z-index: 9999;
+        height: 100vh;
+        width: 100vw;
+    }
+
     .photo-container {
         width: 300px;
         height: 300px;