add CSS for chat
This commit is contained in:
parent
b37e05023a
commit
45cdd713bd
BIN
src/images/cross.png
Normal file
BIN
src/images/cross.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 12 KiB |
BIN
src/images/send.png
Normal file
BIN
src/images/send.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 11 KiB |
@ -50,6 +50,12 @@
|
|||||||
<img src="./images/chat.png">
|
<img src="./images/chat.png">
|
||||||
</div>
|
</div>
|
||||||
<div id="chat">
|
<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>
|
</div>
|
||||||
<script src="https://danby.aniere.fr:3000/socket.io/socket.io.js"></script>
|
<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="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
|
||||||
|
@ -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 {
|
try {
|
||||||
var socket = io("https://danby.aniere.fr:3000");
|
var socket = io("https://danby.aniere.fr:3000");
|
||||||
@ -20,3 +32,21 @@ const swiper = new Swiper('.swiper', {
|
|||||||
speed: 400,
|
speed: 400,
|
||||||
spaceBetween: 100,
|
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();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
@ -11,6 +11,7 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#title {
|
#title {
|
||||||
|
margin-top: 1vh;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -48,11 +49,15 @@ body {
|
|||||||
width: 100px;
|
width: 100px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chat-button > img {
|
#chat-button > img {
|
||||||
height: 90px;
|
height: 60px;
|
||||||
width: 90px;
|
width: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chat {
|
#chat {
|
||||||
@ -64,9 +69,37 @@ body {
|
|||||||
right: 0;
|
right: 0;
|
||||||
|
|
||||||
display: none;
|
display: none;
|
||||||
|
padding: 1.5vh;
|
||||||
|
border-radius: 30px 0px 0px 0px;
|
||||||
background-color: white;
|
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 {
|
.swiper {
|
||||||
width: 500px;
|
width: 500px;
|
||||||
height: 400px;
|
height: 400px;
|
||||||
@ -86,6 +119,7 @@ body {
|
|||||||
@media screen and (max-width: 1024px) {
|
@media screen and (max-width: 1024px) {
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
overflow-y: hidden;
|
||||||
background-image: url("./images/mobile-background.jpg");
|
background-image: url("./images/mobile-background.jpg");
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -97,10 +131,36 @@ body {
|
|||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#chat-button {
|
||||||
|
height: 60px;
|
||||||
|
width: 60px;
|
||||||
|
|
||||||
|
bottom: 5vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chat-button > img {
|
||||||
|
z-index: 9998;
|
||||||
|
height: 30px;
|
||||||
|
width: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
#chat {
|
#chat {
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: 100vw;
|
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 {
|
.photo-container {
|
||||||
|
Loading…
Reference in New Issue
Block a user