From 16eb366ce1c208e917223b320c8049993e536ce4 Mon Sep 17 00:00:00 2001 From: lefiathan Date: Sun, 3 Nov 2024 21:00:53 +0700 Subject: [PATCH] update --- FrontEnd/app.js | 25 +++++++ FrontEnd/components/ChatBox.js | 26 +++++++ FrontEnd/components/Message.js | 13 ++++ FrontEnd/css/style.css | 119 ++------------------------------- FrontEnd/index.html | 49 ++++++++------ FrontEnd/js/main.js | 39 ++++------- 6 files changed, 110 insertions(+), 161 deletions(-) diff --git a/FrontEnd/app.js b/FrontEnd/app.js index e69de29..019776f 100755 --- a/FrontEnd/app.js +++ b/FrontEnd/app.js @@ -0,0 +1,25 @@ +import Navbar from './components/Navbar.js'; +import ChatBox from './components/ChatBox.js'; + +document.addEventListener('DOMContentLoaded', () => { + const loginForm = document.getElementById('loginForm'); + const dashboard = document.getElementById('dashboard'); + const loginRegister = document.getElementById('login-register'); + + loginForm.addEventListener('submit', (e) => { + e.preventDefault(); + loginRegister.classList.add('d-none'); + dashboard.classList.remove('d-none'); + loadComponents(); + }); + + document.getElementById('logoutButton').addEventListener('click', () => { + location.reload(); + }); + + function loadComponents() { + const chatboxContainer = document.getElementById('chatbox'); + const chatbox = new ChatBox(); + chatboxContainer.appendChild(chatbox.render()); + } +}); \ No newline at end of file diff --git a/FrontEnd/components/ChatBox.js b/FrontEnd/components/ChatBox.js index e69de29..2033b44 100755 --- a/FrontEnd/components/ChatBox.js +++ b/FrontEnd/components/ChatBox.js @@ -0,0 +1,26 @@ +import Message from './Message.js'; + +export default class ChatBox { + render() { + const container = document.createElement('div'); + container.classList.add('d-flex', 'flex-column', 'h-100'); + + container.innerHTML = ` +
+
+ + +
+ `; + + container.querySelector('#messageForm').addEventListener('submit', (e) => { + e.preventDefault(); + const messageText = container.querySelector('#messageInput').value; + const message = new Message(messageText, 'sent'); + container.querySelector('#messages').appendChild(message.render()); + container.querySelector('#messageInput').value = ''; + }); + + return container; + } +} \ No newline at end of file diff --git a/FrontEnd/components/Message.js b/FrontEnd/components/Message.js index e69de29..93e302b 100755 --- a/FrontEnd/components/Message.js +++ b/FrontEnd/components/Message.js @@ -0,0 +1,13 @@ +export default class Message { + constructor(text, type) { + this.text = text; + this.type = type; + } + + render() { + const message = document.createElement('div'); + message.className = 'message ' + (this.type === 'sent' ? 'sent' : ''); + message.textContent = this.text; + return message; + } +} \ No newline at end of file diff --git a/FrontEnd/css/style.css b/FrontEnd/css/style.css index d4cd81c..a4eb5ac 100755 --- a/FrontEnd/css/style.css +++ b/FrontEnd/css/style.css @@ -1,122 +1,11 @@ -/* 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; + background: linear-gradient(to right, #74ebd5, #acb6e5); } -#app { - width: 100%; - max-width: 420px; - border: 1px solid #ddd; +.card { 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; - } +h2 { + font-weight: 600; } \ No newline at end of file diff --git a/FrontEnd/index.html b/FrontEnd/index.html index e9ddffa..492c4e7 100755 --- a/FrontEnd/index.html +++ b/FrontEnd/index.html @@ -1,30 +1,41 @@ - + - ChatsApp + - - - + Registrasi - ChatsApp - -
-
-
-

ChatsApp

- + +
+
+
+

Registrasi

+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+ Sudah punya akun? Masuk +
-
-
-
-
- - -
-
+
+ + + \ No newline at end of file diff --git a/FrontEnd/js/main.js b/FrontEnd/js/main.js index 3f7c972..ba04e6c 100755 --- a/FrontEnd/js/main.js +++ b/FrontEnd/js/main.js @@ -1,29 +1,14 @@ -document.addEventListener("DOMContentLoaded", () => { - const chatBox = document.getElementById("chat-box"); - const messageForm = document.getElementById("message-form"); - const messageInput = document.getElementById("message-input"); +document.getElementById('registerForm').addEventListener('submit', function(e) { + e.preventDefault(); + + const username = document.getElementById('username').value; + const email = document.getElementById('email').value; + const password = document.getElementById('password').value; - // 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); - } - }); + // Logika untuk mengirim data ke server bisa ditambahkan di sini + console.log('Registrasi:', { username, email, password }); + alert('Registrasi berhasil!'); + + // Reset form setelah pengiriman + this.reset(); }); \ No newline at end of file