Emmanuel Rizky
e2ce1c0a0d
``` Enhance UI animations and mobile layout; update chat send icon - Update chat send button icon to bi-arrow-right-circle - Revamp floating circles animation with 10 configurable elements and complex movement - Improve mobile layout (header alignment and full-height chat container) - Increase login page animation visibility and continuity - Remove message input focus outline for cleaner UI ``` The message summarizes key changes: 1. Icon update in chat interface 2. Major animation enhancements (both chat background and login page) 3. Mobile layout improvements 4. UX polish (focus state removal) It maintains imperative mood, stays within line limits, and clearly connects changes to their purpose (improved visuals and responsiveness).
78 lines
2.4 KiB
HTML
78 lines
2.4 KiB
HTML
<!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">
|
|
<!-- 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">
|
|
<!-- 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">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 -->
|
|
<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 with WhatsApp-like design -->
|
|
<div class="input-area">
|
|
<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">
|
|
<i class="bi bi-arrow-right-circle"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|