282 lines
11 KiB
HTML
282 lines
11 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
|
<title>Chattz</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@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="{{styles_href}}" />
|
|
<!-- Lucide Icons -->
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="auth-screen" id="auth-screen">
|
|
<div class="auth-card">
|
|
<div class="brand-large">C</div>
|
|
<h1>Chattz</h1>
|
|
<p>Sign in to open your servers.</p>
|
|
<button id="login-btn">Login with Authentik</button>
|
|
{{web_downloads}}
|
|
<p id="status" class="status-line"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="shell hidden" id="main">
|
|
<aside class="server-rail">
|
|
<div class="brand" title="Home">
|
|
<i data-lucide="message-square"></i>
|
|
</div>
|
|
<div class="separator"></div>
|
|
<div id="guild-list" class="guild-list"></div>
|
|
<button id="add-guild-btn" class="guild-pill action-pill" title="Add a Server">
|
|
<i data-lucide="plus"></i>
|
|
</button>
|
|
</aside>
|
|
|
|
<aside class="channel-sidebar">
|
|
<header class="sidebar-header clickable" id="guild-header">
|
|
<h2 id="guild-title">No server selected</h2>
|
|
<div class="sidebar-header-actions">
|
|
<span id="invite-copied-badge" class="copied-badge hidden">Copied!</span>
|
|
<button id="create-invite-btn" class="header-action-btn" title="Create Invite Link">
|
|
<i data-lucide="link-2"></i>
|
|
</button>
|
|
<i data-lucide="chevron-down"></i>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="sidebar-scroll">
|
|
<section class="sidebar-group">
|
|
<div class="group-title">
|
|
<i data-lucide="chevron-down" class="group-toggle"></i>
|
|
<span>Text Channels</span>
|
|
<button id="add-text-btn" class="add-btn" type="button" title="Create Text Channel">
|
|
<i data-lucide="plus"></i>
|
|
</button>
|
|
</div>
|
|
<div id="channel-list" class="channel-list"></div>
|
|
</section>
|
|
|
|
<section class="sidebar-group">
|
|
<div class="group-title">
|
|
<i data-lucide="chevron-down" class="group-toggle"></i>
|
|
<span>Voice Channels</span>
|
|
<button id="add-voice-btn" class="add-btn" type="button" title="Create Voice Channel">
|
|
<i data-lucide="plus"></i>
|
|
</button>
|
|
</div>
|
|
<div id="voice-channel-list" class="channel-list"></div>
|
|
</section>
|
|
|
|
<section class="sidebar-group">
|
|
<div class="group-title">
|
|
<i data-lucide="chevron-down" class="group-toggle"></i>
|
|
<span>Direct Messages</span>
|
|
</div>
|
|
<div id="dm-list" class="channel-list"></div>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="sidebar-footer">
|
|
<div id="voice-connection" class="voice-connection hidden">
|
|
<div class="vc-info">
|
|
<i data-lucide="signal-high" class="vc-icon"></i>
|
|
<div class="vc-text">
|
|
<span class="vc-status">Voice Connected</span>
|
|
<span id="vc-channel-name" class="vc-name">General</span>
|
|
</div>
|
|
<div class="vc-actions">
|
|
<button id="voice-video-btn" title="Turn on Camera"><i data-lucide="video-off"></i></button>
|
|
<button id="voice-screen-btn" title="Share Screen"><i data-lucide="monitor-off"></i></button>
|
|
<button id="voice-mute-btn" title="Mute"><i data-lucide="mic"></i></button>
|
|
<button id="voice-leave-btn" title="Disconnect"><i data-lucide="phone-off"></i></button>
|
|
</div>
|
|
</div>
|
|
<div id="soundboard" class="soundboard-container hidden">
|
|
<div class="soundboard-header">
|
|
<span>Sound Board</span>
|
|
<span id="add-sound-btn" class="btn-add-sound">+ Add Sound</span>
|
|
</div>
|
|
<div id="soundboard-grid" class="soundboard-grid"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="user-panel">
|
|
<div class="avatar-wrapper">
|
|
<div id="user-avatar" class="avatar">U</div>
|
|
<div class="status-dot online"></div>
|
|
</div>
|
|
<div class="user-info">
|
|
<div id="user-name" class="display-name">Username</div>
|
|
<div class="user-status">Online</div>
|
|
</div>
|
|
<div class="user-actions">
|
|
{{desktop_updater}}
|
|
<button id="user-settings-btn" title="Settings"><i data-lucide="settings"></i></button>
|
|
<button id="logout-btn" title="Logout"><i data-lucide="log-out"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<main class="chat-pane">
|
|
<header class="chat-header">
|
|
<button id="mobile-menu-btn" class="mobile-toggle-btn" title="Menu">
|
|
<i data-lucide="menu"></i>
|
|
</button>
|
|
<i data-lucide="hash" class="header-icon"></i>
|
|
<h3 id="channel-title">Select a channel</h3>
|
|
<div style="flex:1"></div>
|
|
<button id="mobile-members-btn" class="mobile-toggle-btn" title="Members">
|
|
<i data-lucide="users"></i>
|
|
</button>
|
|
</header>
|
|
|
|
<div id="video-grid" class="video-grid hidden"></div>
|
|
<div id="message-list" class="message-list"></div>
|
|
|
|
<div class="chat-input-wrapper">
|
|
<form id="message-form" class="message-form">
|
|
<input id="media-file-input" type="file" class="hidden-file-input" accept="image/*,video/*,audio/*,.pdf,.txt,.zip,.rar,.7z,.tar,.gz,.json,.csv,.md" />
|
|
<button type="button" id="media-upload-btn" class="input-action-btn" title="Upload File">
|
|
<i data-lucide="paperclip"></i>
|
|
</button>
|
|
<button type="button" id="gif-btn" class="input-action-btn" title="Open GIF Picker">
|
|
<i data-lucide="image"></i>
|
|
</button>
|
|
<input id="message-body" autocomplete="off" placeholder="Message #channel" maxlength="4000" required />
|
|
<button type="submit" class="hidden"></button>
|
|
</form>
|
|
</div>
|
|
</main>
|
|
|
|
<aside class="utility-sidebar" id="utility-sidebar">
|
|
<header class="sidebar-header">
|
|
<h2>Members</h2>
|
|
</header>
|
|
<div class="member-list-wrapper">
|
|
<div id="member-list" class="member-list"></div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
|
|
<div id="overlay" class="overlay hidden"></div>
|
|
|
|
<!-- Modals -->
|
|
<div id="gif-picker" class="modal-container hidden">
|
|
<div class="modal gif-modal">
|
|
<div class="modal-header">
|
|
<h2>Select GIF</h2>
|
|
<button type="button" class="close-btn" id="gif-picker-close">
|
|
<i data-lucide="x"></i>
|
|
</button>
|
|
</div>
|
|
<div class="gif-search-wrapper">
|
|
<input type="text" id="gif-search-input" placeholder="Search for GIFs..." autocomplete="off">
|
|
<i data-lucide="search" class="search-icon"></i>
|
|
</div>
|
|
<div id="gif-results" class="gif-results-grid">
|
|
<!-- GIF results will be injected here -->
|
|
<div class="gif-loading hidden">Loading...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="modal-container" class="modal-container hidden">
|
|
<div class="modal">
|
|
<h2 id="modal-title">Create Server</h2>
|
|
<form id="guild-form" class="modal-form">
|
|
<div class="form-item">
|
|
<label for="guild-name">SERVER NAME</label>
|
|
<input id="guild-name" placeholder="My Awesome Server" maxlength="64" required />
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="cancel-btn" id="modal-cancel">Cancel</button>
|
|
<button type="submit" class="submit-btn">Create</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="channel-modal" class="modal-container hidden">
|
|
<div class="modal">
|
|
<h2>Create Channel</h2>
|
|
<form id="channel-form" class="modal-form">
|
|
<div class="form-item">
|
|
<label>CHANNEL TYPE</label>
|
|
<div class="radio-group">
|
|
<label class="radio-item">
|
|
<input type="radio" name="channel-kind" value="text" checked>
|
|
<div class="radio-box">
|
|
<i data-lucide="hash"></i>
|
|
<div class="radio-text">
|
|
<strong>Text</strong>
|
|
<span>Send messages, images, and GIFs.</span>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
<label class="radio-item">
|
|
<input type="radio" name="channel-kind" value="voice">
|
|
<div class="radio-box">
|
|
<i data-lucide="volume-2"></i>
|
|
<div class="radio-text">
|
|
<strong>Voice</strong>
|
|
<span>Hang out together with voice and video.</span>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-item">
|
|
<label for="channel-name">CHANNEL NAME</label>
|
|
<input id="channel-name" placeholder="new-channel" maxlength="64" required />
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="cancel-btn" id="channel-modal-cancel">Cancel</button>
|
|
<button type="submit" class="submit-btn">Create Channel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="sound-modal" class="modal-container hidden">
|
|
<div class="modal">
|
|
<h2>Add Sound</h2>
|
|
<form id="sound-form" class="modal-form">
|
|
<div class="form-item">
|
|
<label for="sound-name">NAME</label>
|
|
<input id="sound-name" placeholder="Quack" maxlength="32" required />
|
|
</div>
|
|
<div class="form-item">
|
|
<label for="sound-icon">ICON (Emoji or Initials)</label>
|
|
<input id="sound-icon" placeholder="🦆" maxlength="4" required />
|
|
</div>
|
|
<div class="form-item">
|
|
<label for="sound-file">AUDIO FILE (MP3/WAV)</label>
|
|
<input id="sound-file" type="file" accept="audio/*" required />
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="cancel-btn" id="sound-modal-cancel">Cancel</button>
|
|
<button type="submit" class="submit-btn" id="sound-submit-btn">Add Sound</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="upload-limit-modal" class="modal-container hidden">
|
|
<div class="modal">
|
|
<h2>Upload Too Large</h2>
|
|
<p id="upload-limit-message" class="modal-copy">Uploads are limited to 50 MB per file.</p>
|
|
<div class="modal-footer">
|
|
<button type="button" class="submit-btn" id="upload-limit-ok">OK</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="{{app_src}}"></script>
|
|
</body>
|
|
|
|
</html>
|