diff --git a/src/images/cross.png b/src/images/cross.png
new file mode 100644
index 0000000..2c39a2e
Binary files /dev/null and b/src/images/cross.png differ
diff --git a/src/images/send.png b/src/images/send.png
new file mode 100644
index 0000000..0019e74
Binary files /dev/null and b/src/images/send.png differ
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 {