File size: 2,202 Bytes
727a40a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Page</title>
<link rel="stylesheet" href="./css/color.css">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/chat.css">
<script src="./js/base.js" defer></script>
<script src="./js/chat.js" defer></script>
</head>
<body>
<div class="main_box">
<div class="chat_box">
<!-- Header -->
<div class="header">
<button onclick="goBack()">
<img src="./img/icon/icons8-left-arrow-60.png" alt="Back">
</button>
<h1>John Doe</h1>
<div class="menu">
<button onclick="toggleMenu()">
<img src="./img/icon/icons8-menu-vertical-50.png" alt="Menu">
</button>
<div class="dropdown-content" id="dropdown">
<a href="/edit-profile">Edit Profile</a>
<a href="/settings">Settings</a>
<a href="/logout">Logout</a>
<a href="#" class="dark-mode-toggle">Light Mode</a>
</div>
</div>
</div>
<!-- Chat Area -->
<div class="chat-area" id="chat-area">
<div class="chat-message sent">
<div class="message-text">Hey! How are you?</div>
<div class="timestamp">10:30 AM</div>
</div>
<div class="chat-message received">
<div class="message-text">I'm good, thanks! How about you?</div>
<div class="timestamp">10:32 AM</div>
</div>
</div>
<!-- Input Area -->
<div class="input-area">
<textarea class="message-input" id="message-input" placeholder="Type a message..."></textarea>
<button class="send-button" id="send-button">
➤
</button>
</div>
</div>
</div>
</body>
</html> |