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

feat: Add initial chat page UI

Browse Source 
This commit introduces a new, self-contained chat page, including the necessary HTML, CSS, and JavaScript files.

The page features a modern, responsive design with a glassmorphism effect on the main chat container, a gradient background with animated floating circles, and a clear layout for displaying sent and received messages.

- `index.html`: Defines the structure for the header, message area, and input form.
- `style.css`: Provides the visual styling, including the glass effect, message bubbles, and responsive adjustments.
- `script.js`: Contains the initial client-side logic for adding messages to the chat.
This commit is contained in:
emmanuel.rizky
2025-07-12 09:50:35 +07:00
parent 28b4d09993
commit 39afff75c4
3 changed files with 617 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
chat-page/index.html Normal file
View File

@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halaman Chat</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="chat-container">
<!-- Floating circles background -->
<ul class="floating-circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- Header dengan avatar dan nama pengguna -->
<header class="chat-header">
<div class="user-info">
<div class="avatar">A</div>
<h2>John Doe</h2>
</div>
</header>
<!-- Area chat utama -->
<div class="chat-area">
<!-- Contoh pesan masuk -->
<div class="message received">
<div class="message-content">
Hai, ada kabar terbaru?
</div>
<div class="message-time">10:00</div>
</div>
<!-- Contoh pesan keluar -->
<div class="message sent">
<div class="message-content">
Iya, proyek baru sudah selesai!
</div>
<div class="message-time">10:01</div>
</div>
</div>
<!-- Input area -->
<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...">
<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>
</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>