emmanuel.rizky/demo-mayagen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): Modernize chat interface and standardize background

Browse Source 
This commit overhauls the chat page UI for a cleaner, more modern aesthetic inspired by popular messaging apps.

Key changes include:
- Redesigned the chat header to display the user's name and role.
- Replaced the message input area with a WhatsApp-style layout.
- Added user avatars to received messages and a person icon to sent messages for clearer identification.
- Swapped custom SVG icons with Bootstrap Icons for consistency and easier maintenance.
- Removed the floating circles background animation from both the chat and login pages to reduce visual clutter and improve focus.
This commit is contained in:
Emmanuel Rizky
2025-07-12 16:28:08 +07:00
parent 39afff75c4
commit df68337945
5 changed files with 239 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
chat-page/index.html
View File

@@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halaman Chat</title>
<link rel="stylesheet" href="style.css">
<!-- Tambahkan link Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
</head>
<body>
<div class="chat-container">
@@ -24,10 +26,13 @@
<!-- Header dengan avatar dan nama pengguna -->
<header class="chat-header">
<div class="user-info">
<div class="avatar">A</div>
<h2>John Doe</h2>
</div>
<div class="user-info">
<div class="avatar">J</div>
<div class="user-details">
<h2>John Doe</h2>
<span class="user-role">Virtual Assistant - Bake Shop</span>
</div>
</div>
</header>
<!-- Area chat utama -->
@@ -49,27 +54,20 @@
</div>
</div>
<!-- Input area -->
<!-- Input area with WhatsApp-like design -->
<div class="input-area">
<button class="icon-btn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 15.2C13.7673 15.2 15.2 13.7673 15.2 12C15.2 10.2327 13.7673 8.8 12 8.8C10.2327 8.8 8.8 10.2327 8.8 12C8.8 13.7673 10.2327 15.2 12 15.2Z" fill="#6a11cb"/>
<path d="M20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6C22 4.9 21.1 4 20 4ZM12 7.5C13.93 7.5 15.5 9.07 15.5 11C15.5 12.93 13.93 14.5 12 14.5C10.07 14.5 8.5 12.93 8.5 11C8.5 9.07 10.07 7.5 12 7.5ZM20 18H4V6.03C4 6.01 4.01 6 4.03 6H19.97C19.99 6 20 6.01 20 6.03V18Z" fill="#6a11cb"/>
</svg>
</button>
<button class="icon-btn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19 4H5C3.9 4 3 4.9 3 6V18C3 19.1 3.9 20 5 20H19C20.1 20 21 19.1 21 18V6C21 4.9 20.1 4 19 4ZM5 18V6H19V18H5Z" fill="#6a11cb"/>
<path d="M16.5 14.25C17.3284 14.25 18 13.5784 18 12.75C18 11.9216 17.3284 11.25 16.5 11.25C15.6716 11.25 15 11.9216 15 12.75C15 13.5784 15.6716 14.25 16.5 14.25Z" fill="#6a11cb"/>
</svg>
</button>
<input type="text" class="message-input" placeholder="Ketik pesan...">
<div class="input-wrapper">
<input type="text" class="message-input" placeholder="Ketik pesan...">
<div class="attachment-icons">
<!-- Hanya ikon kamera yang tersisa -->
<button class="icon-btn attachment-btn">
<i class="bi bi-camera"></i>
</button>
</div>
</div>
<button class="send-btn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" fill="#6a11cb"/>
</svg>
<i class="bi bi-send"></i>
</button>
</div>
</div>