176 lines
6.6 KiB
HTML
176 lines
6.6 KiB
HTML
<!-- OnlyPrompt - Chats page:
|
|
- Direct messaging interface with conversation list and active chat window -->
|
|
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>OnlyPrompt - Chats</title>
|
|
<link rel="stylesheet" href="../css/variables.css" />
|
|
<link rel="stylesheet" href="../css/base.css" />
|
|
<link rel="stylesheet" href="../css/sidebar.css" />
|
|
<link rel="stylesheet" href="../css/login.css" />
|
|
<link rel="stylesheet" href="../css/topbar.css" />
|
|
<link rel="stylesheet" href="../css/chats.css" />
|
|
<script src="../js/profile-shared.js"></script>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
|
|
/>
|
|
</head>
|
|
<body>
|
|
<div class="layout">
|
|
<div id="sidebar-container"></div>
|
|
|
|
<div class="page-body">
|
|
<div id="topbar-container"></div>
|
|
|
|
<main class="chats-main">
|
|
<!-- Chat Container: Left column (list) + Right column (active chat) -->
|
|
<div class="chat-container">
|
|
<!-- Left Column: Chat Overview -->
|
|
<div class="chat-list">
|
|
<div class="chat-list-header">
|
|
<h2>Messages</h2>
|
|
<button class="new-chat-btn">
|
|
<i class="bi bi-pencil-square"></i>
|
|
</button>
|
|
</div>
|
|
<div class="chat-list-items">
|
|
<!-- Chat Entry 1 (active) -->
|
|
<div class="chat-item active">
|
|
<img
|
|
src="../images/content/creator2.png"
|
|
alt="Alex Chen"
|
|
class="chat-avatar"
|
|
/>
|
|
<div class="chat-item-info">
|
|
<div class="chat-name">Alex Chen</div>
|
|
<div class="chat-last-msg">
|
|
Hey Sarah! Really loved your last video on minimalism...
|
|
</div>
|
|
</div>
|
|
<div class="chat-time">10:17 AM</div>
|
|
</div>
|
|
<!-- Chat Entry 2 -->
|
|
<div class="chat-item">
|
|
<img
|
|
src="../images/content/creator3.png"
|
|
alt="Mia Wong"
|
|
class="chat-avatar"
|
|
/>
|
|
<div class="chat-item-info">
|
|
<div class="chat-name">Mia Wong</div>
|
|
<div class="chat-last-msg">
|
|
Thanks for the prompt tips! They worked perfectly.
|
|
</div>
|
|
</div>
|
|
<div class="chat-time">Yesterday</div>
|
|
</div>
|
|
<!-- Chat Entry 3 -->
|
|
<div class="chat-item">
|
|
<img
|
|
src="../images/content/creator4.png"
|
|
alt="Tom Rivera"
|
|
class="chat-avatar"
|
|
/>
|
|
<div class="chat-item-info">
|
|
<div class="chat-name">Tom Rivera</div>
|
|
<div class="chat-last-msg">
|
|
Let's schedule a call for the collab?
|
|
</div>
|
|
</div>
|
|
<div class="chat-time">Yesterday</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column: Active Chat (with Alex Chen) -->
|
|
<div class="chat-active">
|
|
<div class="chat-header">
|
|
<img
|
|
src="../images/content/creator2.png"
|
|
alt="Alex Chen"
|
|
class="chat-avatar-large"
|
|
/>
|
|
<div class="chat-header-info">
|
|
<div class="chat-header-name">Alex Chen</div>
|
|
<div class="chat-header-status">
|
|
<span class="online-dot"></span> Online
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="chat-messages">
|
|
<!-- Message from Alex -->
|
|
<div class="message received">
|
|
<div class="message-bubble">
|
|
Hey Sarah! Really loved your last video on minimalism. Quick
|
|
question about your workspace layout?
|
|
</div>
|
|
<div class="message-time">10:15 AM</div>
|
|
</div>
|
|
<!-- Reply from Sarah -->
|
|
<div class="message sent">
|
|
<div class="message-bubble">
|
|
Thanks Alex! Appreciate it. Yes, happy to share! The desk is
|
|
from Article, and the shelving unit is custom-built. Highly
|
|
recommend a clean setup!
|
|
</div>
|
|
<div class="message-time">10:16 AM</div>
|
|
</div>
|
|
<!-- Alex replies -->
|
|
<div class="message received">
|
|
<div class="message-bubble">
|
|
Thanks so much! Your aesthetic is exactly what I'm aiming
|
|
for. Can't wait for your next piece!
|
|
</div>
|
|
<div class="message-time">10:17 AM</div>
|
|
</div>
|
|
<!-- Sarah replies -->
|
|
<div class="message sent">
|
|
<div class="message-bubble">
|
|
Awesome! Let me know if you need more tips. Enjoy the
|
|
process! 😊
|
|
</div>
|
|
<div class="message-time">10:18 AM</div>
|
|
</div>
|
|
</div>
|
|
<div class="chat-input-area">
|
|
<input type="text" placeholder="Type your message..." />
|
|
<button class="send-btn">Send</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
fetch("/sidebar.html")
|
|
.then((r) => r.text())
|
|
.then((data) => {
|
|
document.getElementById("sidebar-container").innerHTML = data;
|
|
// Remove 'active' from all sidebar links
|
|
document
|
|
.querySelectorAll("#sidebar-container .sidebar a")
|
|
.forEach((link) => {
|
|
link.classList.remove("active");
|
|
});
|
|
// Set 'active' on the Chats link (4th link, index 3)
|
|
const chatsLink = document.querySelectorAll(
|
|
"#sidebar-container .sidebar li a",
|
|
)[3];
|
|
if (chatsLink) chatsLink.classList.add("active");
|
|
});
|
|
|
|
fetch("/topbar.html")
|
|
.then((r) => r.text())
|
|
.then(
|
|
(data) =>
|
|
(document.getElementById("topbar-container").innerHTML = data),
|
|
);
|
|
</script>
|
|
</body>
|
|
</html>
|