162 lines
8.1 KiB
HTML
162 lines
8.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, interactive-widget=resizes-content" />
|
|
<meta name="HandheldFriendly" content="true" />
|
|
<title>Pandora</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css">
|
|
<link rel="stylesheet" href="loading.css">
|
|
<link rel="stylesheet" href="metroicons.css">
|
|
<link rel="manifest" href="./manifest.json">
|
|
</head>
|
|
<body>
|
|
<div class="app-container no-active-chat">
|
|
<aside id="desktop-aside">
|
|
<button id="chats-sidebar-btn" class="icon-btn mif-qa mif-2x" data-page="chat-page"></button>
|
|
<button id="settings-sidebar-btn" class="icon-btn mif-cog mif-2x" data-page="settings-page"></button>
|
|
</aside>
|
|
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar">
|
|
<header class="sidebar-header">
|
|
<p class="app-name">PANDORA</p>
|
|
<div class="user-profile">
|
|
<!-- <div id="pandora-user-icon" class="avatar user-avatar">P</div> -->
|
|
<div class="user-info">
|
|
<h3 id="pandora-username">Pandora User</h3>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="search-container">
|
|
<div class="search-wrapper">
|
|
<input type="text" id="chat-search" placeholder="Search or start new chat...">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chat-list-container">
|
|
<div class="loading-chats" id="chats-loader">
|
|
<div class='loading-animation-wrapper'>
|
|
<div class="animation">
|
|
<div class="dot"></div>
|
|
<div class="dot"></div>
|
|
<div class="dot"></div>
|
|
<div class="dot"></div>
|
|
<div class="dot"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ul class="chat-list" id="chat-list">
|
|
<!-- Chats will be dynamically injected here -->
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="sidebar-footer">
|
|
<div class="api-status-badge">
|
|
<span class="pulse-dot"></span>
|
|
<span id="backend-status-text">Backend connected</span>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<div class="extra-page" id="chat-page">
|
|
<!-- Main Chat Area -->
|
|
<main class="chat-area">
|
|
<!-- No Chat Selected State -->
|
|
<div class="no-chat-state" id="no-chat-state">
|
|
<div class="empty-state-content">
|
|
<div class="empty-state-icon mif-qa mif-3x">
|
|
</div>
|
|
<p>Select a contact to view the conversation or start a new chat.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Active Chat State -->
|
|
<div class="active-chat-container hidden" id="active-chat-container">
|
|
<header class="chat-header">
|
|
<div class="active-contact-info">
|
|
<!-- <button class="icon-btn back-btn mif-arrow-left mif-2x" id="back-to-sidebar" title="Back to chats"></button> -->
|
|
<div class="avatar active-avatar" id="active-chat-avatar">C</div>
|
|
<div>
|
|
<h3 id="active-chat-name">Contact Name</h3>
|
|
<span class="contact-status" id="active-chat-status"></span>
|
|
</div>
|
|
</div>
|
|
<div class="chat-actions">
|
|
<!-- <button class="icon-btn" title="Search in conversation"><i data-lucide="search"></i></button>
|
|
<button class="icon-btn" title="Call"><i data-lucide="phone"></i></button>
|
|
<button class="icon-btn" title="Video Call"><i data-lucide="video"></i></button>
|
|
<button class="icon-btn" title="More Options"><i data-lucide="more-vertical"></i></button> -->
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Messages Area -->
|
|
<div class="messages-container" id="messages-container">
|
|
<!-- Messages will be dynamically injected here -->
|
|
</div>
|
|
|
|
<!-- Input Panel -->
|
|
<footer id="chat-input-panel" class="chat-input-panel">
|
|
<div class="input-actions-left">
|
|
<button id="chat-bottom-bar-btn" class="icon-btn mif-expand-less mif-3x" title="Expand"></button>
|
|
</div>
|
|
<form class="input-form" id="message-form">
|
|
<input type="text" id="message-input" placeholder="Type a message..." autocomplete="off">
|
|
<button type="submit" class="send-btn mif-paper-plane mif-3x" id="send-button">
|
|
</button>
|
|
</form>
|
|
</footer>
|
|
<!-- Bottom Bar -->
|
|
<footer id="chat-bottom-bar" class="chat-expanded-panel alternate-panel collapsed">
|
|
<input id="attachment-input" style="display: none;" type="file">
|
|
<button id="attachment-btn" class="icon-btn send-btn mif-attachment mif-2x" title="Attach file"></button>
|
|
</footer>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<section class="extra-page" id="settings-page">
|
|
<div class="modal-content">
|
|
<header class="modal-header">
|
|
<h2>SETTINGS</h2>
|
|
</header>
|
|
<div class="modal-body">
|
|
<h3>server</h3>
|
|
<div class="form-group">
|
|
<label for="settings-waha-url">WAHA Server URL</label>
|
|
<input type="text" id="settings-waha-url" placeholder="http://localhost:3100">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="settings-session">Session ID</label>
|
|
<input type="text" id="settings-session" placeholder="session_01...">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="settings-api-key">API Key (X-API-KEY)</label>
|
|
<input type="password" id="settings-api-key" placeholder="Enter API Key">
|
|
</div>
|
|
<p class="settings-warning">Note: Requests are sent directly from your browser to the WAHA server. Make sure CORS is enabled on your WAHA instance.</p>
|
|
<h3>chats</h3>
|
|
<div class="form-group">
|
|
<label for="settings-background-image">Chat background image</label>
|
|
<input type="text" id="settings-background-image" placeholder="Enter image URL">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="settings-background-opacity">Chat background opacity</label>
|
|
<input type="number" min="0" max="1" step="0.1" id="settings-background-opacity" placeholder="Enter opacity value">
|
|
</div>
|
|
</div>
|
|
<footer class="modal-footer">
|
|
<button class="btn primary-btn" id="save-settings">Save</button>
|
|
</footer>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Client-side script loaded as ES Module -->
|
|
<script type="module" src="./js/app.js"></script>
|
|
</body>
|
|
</html>
|