chatapp
This commit is contained in:
+52
-22
@@ -20,10 +20,11 @@
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
max-width: 40vh;
|
||||
max-width: 50vh;
|
||||
margin: 0 auto;
|
||||
background: #121212;
|
||||
position: relative;
|
||||
@@ -32,7 +33,7 @@
|
||||
|
||||
/* Chat Header */
|
||||
.chat-header {
|
||||
padding: 20px;
|
||||
padding: 10px;
|
||||
background: #1a1a1a;
|
||||
border-bottom: 1px solid #252525;
|
||||
}
|
||||
@@ -76,7 +77,7 @@
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
position: absolute;
|
||||
top: 90px;
|
||||
top: 70px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
@@ -357,7 +358,8 @@
|
||||
margin: 8px 20px;
|
||||
padding: 12px 16px;
|
||||
border-radius: 12px;
|
||||
background: #1a1a1a;
|
||||
background: rgba(30, 30, 30, 0.4);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid #252525;
|
||||
animation: slideIn 0.3s ease-out;
|
||||
transition: all 0.2s ease;
|
||||
@@ -382,12 +384,14 @@
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 25%;
|
||||
background: linear-gradient(135deg, #ff4444, #ff6b6b);
|
||||
background-size: cover;
|
||||
border: 2px solid #252525;
|
||||
flex-shrink: 0;
|
||||
background-image: url('assets/profile_pics/default.jpg');
|
||||
}
|
||||
|
||||
.user-avatar.blue {
|
||||
@@ -427,7 +431,7 @@
|
||||
|
||||
/* Input Container */
|
||||
.input-container {
|
||||
padding: 15px 20px 20px 20px;
|
||||
padding: 10px;
|
||||
background: #1a1a1a;
|
||||
border-top: 1px solid #252525;
|
||||
}
|
||||
@@ -435,10 +439,10 @@
|
||||
.input-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
gap: 10px;
|
||||
background: #252525;
|
||||
border-radius: 24px;
|
||||
padding: 10px 18px;
|
||||
border-radius: 10px;
|
||||
padding: 5px 5px;
|
||||
border: 1px solid #2a2a2a;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
@@ -463,16 +467,15 @@
|
||||
}
|
||||
|
||||
.send-button {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: linear-gradient(135deg, #6a5acd, #8a7fd4);
|
||||
border-radius: 8px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: none;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
@@ -481,7 +484,7 @@
|
||||
.send-button:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 4px 15px rgba(106, 90, 205, 0.4);
|
||||
background: linear-gradient(135deg, #7a6add, #9a8fe4);
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.send-button:active {
|
||||
@@ -509,6 +512,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="chat-container">
|
||||
<!--<div class="chat-container" style="background-image: url('assets/background.png'); backdrop-filter: blur(10px); background-size: cover; background-position: center; background-repeat: no-repeat;">-->
|
||||
<!-- Chat Header -->
|
||||
<div class="chat-header">
|
||||
<div class="chat-title">
|
||||
@@ -539,6 +543,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Messages Container -->
|
||||
<!--<div class="messages-container" style="background-image: url('assets/background.png'); backdrop-filter: blur(10px); background-size: cover; background-position: center; background-repeat: no-repeat;">-->
|
||||
<div class="messages-container">
|
||||
<div class="message">
|
||||
<div class="user-avatar"></div>
|
||||
@@ -577,13 +582,26 @@
|
||||
<!-- Input Container -->
|
||||
<div class="input-container">
|
||||
<div class="input-wrapper">
|
||||
<input type="text" placeholder="typing this message" />
|
||||
<button class="send-button">💬</button>
|
||||
<input type="text" placeholder="Start Typing..." />
|
||||
<button class="send-button">
|
||||
<img src="icons/send.svg" alt="Send" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const users = [
|
||||
{
|
||||
id: 0,
|
||||
username: "LLM"
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
username: "/Zxq5 🚀/",
|
||||
}
|
||||
];
|
||||
|
||||
// Location tracker state
|
||||
const locationUsers = [
|
||||
{ id: 1, color: "linear-gradient(135deg, #ff6b6b, #ff8e8e)" },
|
||||
@@ -665,16 +683,26 @@
|
||||
const messageSource = new EventSource("http://localhost:8001/events");
|
||||
|
||||
messageSource.onmessage = (event) => {
|
||||
const message = JSON.parse(event.data);
|
||||
const date = new Date(message.timestamp).toLocaleTimeString("en-US", {
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
hour12: true,
|
||||
});
|
||||
console.log(users, message);
|
||||
const user = users.find((u) => u.id == message.userid);
|
||||
console.log(user);
|
||||
|
||||
const messageEl = document.createElement("div");
|
||||
messageEl.className = "message";
|
||||
messageEl.innerHTML = `
|
||||
<div class="user-avatar" style="background: linear-gradient(135deg, #32cd32, #90ee90);"></div>
|
||||
<img class="user-avatar" src="assets/profile_pics/${user.id}.jpg" alt="${user.username}">
|
||||
<div class="message-content">
|
||||
<div class="message-header">
|
||||
<span class="username">You</span>
|
||||
<span class="timestamp">${getCurrentTime()}</span>
|
||||
<span class="username">${user.username}</span>
|
||||
<span class="timestamp">${date}</span>
|
||||
</div>
|
||||
<div class="message-text">${event.data}</div>
|
||||
<div class="message-text">${message.text}</div>
|
||||
</div>
|
||||
`;
|
||||
messagesContainer.appendChild(messageEl);
|
||||
@@ -697,7 +725,9 @@
|
||||
fetch("http://localhost:8001/chat", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
text: message
|
||||
userid: users[1].id,
|
||||
text: message,
|
||||
timestamp: new Date().getTime(),
|
||||
}),
|
||||
headers: {
|
||||
"Content-type": "application/json; charset=UTF-8"
|
||||
|
||||
Reference in New Issue
Block a user