diff --git a/FrontEnd/app.js b/FrontEnd/app.js old mode 100644 new mode 100755 diff --git a/FrontEnd/assets/components/css/js/main.js b/FrontEnd/assets/components/css/js/main.js deleted file mode 100644 index e69de29..0000000 diff --git a/FrontEnd/assets/components/css/style.css b/FrontEnd/assets/components/css/style.css deleted file mode 100644 index e69de29..0000000 diff --git a/FrontEnd/assets/components/ChatBox.js b/FrontEnd/components/ChatBox.js old mode 100644 new mode 100755 similarity index 100% rename from FrontEnd/assets/components/ChatBox.js rename to FrontEnd/components/ChatBox.js diff --git a/FrontEnd/assets/components/Message.js b/FrontEnd/components/Message.js old mode 100644 new mode 100755 similarity index 100% rename from FrontEnd/assets/components/Message.js rename to FrontEnd/components/Message.js diff --git a/FrontEnd/assets/components/Navbar.js b/FrontEnd/components/Navbar.js old mode 100644 new mode 100755 similarity index 100% rename from FrontEnd/assets/components/Navbar.js rename to FrontEnd/components/Navbar.js diff --git a/FrontEnd/css/style.css b/FrontEnd/css/style.css new file mode 100755 index 0000000..d4cd81c --- /dev/null +++ b/FrontEnd/css/style.css @@ -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; + } +} \ No newline at end of file diff --git a/FrontEnd/index.html b/FrontEnd/index.html old mode 100644 new mode 100755 index e69de29..dfe8a69 --- a/FrontEnd/index.html +++ b/FrontEnd/index.html @@ -0,0 +1,27 @@ + + + + + + ChatsApp + + + +
+
+
+

ChatsApp

+ +
+
+
+
+
+ + +
+
+
+ + + \ No newline at end of file diff --git a/FrontEnd/js/main.js b/FrontEnd/js/main.js new file mode 100755 index 0000000..3f7c972 --- /dev/null +++ b/FrontEnd/js/main.js @@ -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); + } + }); +}); \ No newline at end of file diff --git a/FrontEnd/assets/components/css/js/services/api.js b/FrontEnd/services/api.js old mode 100644 new mode 100755 similarity index 100% rename from FrontEnd/assets/components/css/js/services/api.js rename to FrontEnd/services/api.js diff --git a/FrontEnd/style.css b/FrontEnd/style.css old mode 100644 new mode 100755 diff --git a/README.md b/README.md old mode 100644 new mode 100755