emmanuel.rizky
39afff75c4
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.
80 lines
3.2 KiB
HTML
80 lines
3.2 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">
|
|
</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>
|