From 45cdd713bd465bbbae93162fad32fb2f8205fd3c Mon Sep 17 00:00:00 2001 From: Quentin ANIERE Date: Tue, 12 Apr 2022 10:25:14 +0200 Subject: [PATCH] add CSS for chat --- src/images/cross.png | Bin 0 -> 12475 bytes src/images/send.png | Bin 0 -> 10833 bytes src/index.html | 6 ++++ src/script.js | 32 +++++++++++++++++++++- src/style.css | 64 +++++++++++++++++++++++++++++++++++++++++-- 5 files changed, 99 insertions(+), 3 deletions(-) create mode 100644 src/images/cross.png create mode 100644 src/images/send.png diff --git a/src/images/cross.png b/src/images/cross.png new file mode 100644 index 0000000000000000000000000000000000000000..2c39a2ec909c600acaa17d9d30986c0e206ea949 GIT binary patch literal 12475 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 literal 0 HcmV?d00001 diff --git a/src/images/send.png b/src/images/send.png new file mode 100644 index 0000000000000000000000000000000000000000..0019e7427edc516b50e2ae63140a72f6c752a223 GIT binary patch literal 10833 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 literal 0 HcmV?d00001 diff --git a/src/index.html b/src/index.html index 7cf866c..937fd31 100644 --- a/src/index.html +++ b/src/index.html @@ -50,6 +50,12 @@
+
    +
  • Rappel: Tous les messages doivent parler de Denis !
  • +
+ + +
diff --git a/src/script.js b/src/script.js index 00d698c..18db3bb 100644 --- a/src/script.js +++ b/src/script.js @@ -1,4 +1,16 @@ -document.addEventListener('DOMContentLoaded', () => { +function addMessage(author, message) { + var li = document.createElement("li"); + li.innerHTML = "" + author + ": "; + 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(); + } +}); diff --git a/src/style.css b/src/style.css index 44830e7..811d49b 100644 --- a/src/style.css +++ b/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 {