207 lines
No EOL
7.3 KiB
HTML
207 lines
No EOL
7.3 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="stylesheet" href="/static/styles.css" />
|
|
<!-- 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>
|
|
<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">
|
|
<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-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>
|
|
|
|
<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">
|
|
<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="message-list" class="message-list"></div>
|
|
|
|
<div class="chat-input-wrapper">
|
|
<form id="message-form" class="message-form">
|
|
<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="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>
|
|
|
|
<script src="/static/app.js" defer></script>
|
|
</body>
|
|
|
|
</html> |