warceuproject/ChatsApp
4
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Lefiathan 2024-11-02 21:38:13 +07:00
parent 45d476266b
commit e730db80bd
12 changed files with 178 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
FrontEnd/app.js Normal file → Executable file
View File

0
FrontEnd/assets/components/css/js/main.js
View File

0
FrontEnd/assets/components/css/style.css
View File

0
FrontEnd/assets/components/ChatBox.js → FrontEnd/components/ChatBox.js Normal file → Executable file
View File

0
FrontEnd/assets/components/Message.js → FrontEnd/components/Message.js Normal file → Executable file
View File

0
FrontEnd/assets/components/Navbar.js → FrontEnd/components/Navbar.js Normal file → Executable file
View File

122
FrontEnd/css/style.css Executable file
View File

@ -0,0 +1,122 @@
/* Global Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f2f5;
color: #333;
}
#app {
width: 100%;
max-width: 420px;
border: 1px solid #ddd;
border-radius: 10px;
overflow: hidden;
background-color: #fff;
display: flex;
flex-direction: column;
height: 90vh;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Header */
header {
background-color: #075e54;
color: #fff;
padding: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.header-content {
display: flex;
align-items: center;
width: 100%;
justify-content: space-between;
}
.settings-btn {
font-size: 18px;
background: none;
border: none;
color: white;
cursor: pointer;
}
/* Chat Box */
#chat-box {
flex: 1;
padding: 15px;
overflow-y: auto;
background-color: #e5ddd5;
}
.message {
max-width: 75%;
margin-bottom: 10px;
padding: 10px;
border-radius: 8px;
font-size: 14px;
line-height: 1.4;
position: relative;
}
.message.sent {
background-color: #dcf8c6;
align-self: flex-end;
text-align: right;
}
.message.received {
background-color: #fff;
align-self: flex-start;
text-align: left;
}
/* Message Form */
#message-form {
display: flex;
align-items: center;
padding: 10px;
background-color: #f0f2f5;
border-top: 1px solid #ddd;
}
#message-input {
flex: 1;
padding: 10px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 20px;
margin-right: 10px;
outline: none;
}
button {
padding: 10px 15px;
font-size: 20px;
color: #fff;
background-color: #075e54;
border: none;
border-radius: 50%;
cursor: pointer;
}
/* Responsive Design */
@media (max-width: 480px) {
#app {
height: 100vh;
max-width: 100%;
border-radius: 0;
}
}

27
FrontEnd/index.html Normal file → Executable file
View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ChatsApp</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app">
<header>
<div class="header-content">
<h1>ChatsApp</h1>
<button class="settings-btn">⚙️</button>
</div>
</header>
<main>
<section id="chat-box"></section>
<form id="message-form">
<input type="text" id="message-input" placeholder="Type a message...">
<button type="submit">➤</button>
</form>
</main>
</div>
<script src="js/main.js"></script>
</body>
</html>

29
FrontEnd/js/main.js Executable file
View File

@ -0,0 +1,29 @@
document.addEventListener("DOMContentLoaded", () => {
const chatBox = document.getElementById("chat-box");
const messageForm = document.getElementById("message-form");
const messageInput = document.getElementById("message-input");
// Function to add message to chat box
function addMessage(text, type) {
const messageElement = document.createElement("div");
messageElement.textContent = text;
messageElement.classList.add("message", type);
chatBox.appendChild(messageElement);
chatBox.scrollTop = chatBox.scrollHeight;
}
// Handle message send
messageForm.addEventListener("submit", (e) => {
e.preventDefault();
const messageText = messageInput.value.trim();
if (messageText !== "") {
addMessage(messageText, "sent");
messageInput.value = "";
// Simulate received message after 1 second
setTimeout(() => {
addMessage("This is an auto-reply!", "received");
}, 1000);
}
});
});

0
FrontEnd/assets/components/css/js/services/api.js → FrontEnd/services/api.js Normal file → Executable file
View File

0
FrontEnd/style.css Normal file → Executable file
View File

0
README.md Normal file → Executable file
View File