Update templates/index.html
This commit is contained in:
parent
e2373bcb64
commit
301260caa5
@ -33,6 +33,7 @@
|
||||
</div>
|
||||
|
||||
<div class="header-navigation">
|
||||
<div class="header-nav-group">
|
||||
<button
|
||||
id="feedButton"
|
||||
class="header-action feed-button active"
|
||||
@ -81,14 +82,16 @@
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="header-context-group">
|
||||
<select
|
||||
id="teamSelect"
|
||||
class="room-select team-select"
|
||||
aria-label="Select team"
|
||||
disabled
|
||||
>
|
||||
<option value="">Loading teams…</option>
|
||||
<option value="">Loading teams…</option>
|
||||
</select>
|
||||
|
||||
<select
|
||||
@ -97,9 +100,11 @@
|
||||
aria-label="Select channel"
|
||||
disabled
|
||||
>
|
||||
<option value="">Loading channels…</option>
|
||||
<option value="">Loading channels…</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="header-utility-group">
|
||||
<div id="presenceLabel" class="presence-label hidden" aria-live="polite"></div>
|
||||
|
||||
<button
|
||||
@ -124,6 +129,7 @@
|
||||
Call
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header-account-wrap">
|
||||
<div id="headerAccount" class="header-account">not signed in</div>
|
||||
@ -151,7 +157,7 @@
|
||||
aria-label="Activity feed"
|
||||
>
|
||||
<div class="empty-state">
|
||||
<div class="empty-card">Loading activity…</div>
|
||||
<div class="empty-card">Loading activity…</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -209,7 +215,7 @@
|
||||
|
||||
<div id="newMessagesBar" class="new-messages-bar hidden">
|
||||
<button id="jumpToLatestButton" class="small-button" type="button">
|
||||
New messages · Jump to latest
|
||||
New messages · Jump to latest
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -217,9 +223,10 @@
|
||||
|
||||
<div id="composerWrap" class="composer-wrap hidden">
|
||||
<form id="chatForm" class="composer">
|
||||
<div class="composer-stack">
|
||||
<div class="composer-shell">
|
||||
<label class="sr-only" for="messageInput">Message</label>
|
||||
|
||||
<div class="composer-field-wrap">
|
||||
<textarea
|
||||
id="messageInput"
|
||||
class="composer-input"
|
||||
@ -231,12 +238,7 @@
|
||||
disabled
|
||||
></textarea>
|
||||
|
||||
<div class="composer-meta">
|
||||
<span id="attachmentName" class="attachment-name"></span>
|
||||
<span id="messageCount" class="message-count">0 / 1000</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="composer-shell-actions">
|
||||
<label
|
||||
id="attachmentButton"
|
||||
class="attachment-button disabled"
|
||||
@ -247,6 +249,20 @@
|
||||
+
|
||||
</label>
|
||||
|
||||
<button id="sendButton" class="send-button" type="submit" disabled>
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="emojiAutocomplete" class="emoji-autocomplete hidden" aria-live="polite"></div>
|
||||
|
||||
<div class="composer-meta">
|
||||
<span id="attachmentName" class="attachment-name"></span>
|
||||
<span id="messageCount" class="message-count">0 / 1000</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input
|
||||
id="attachmentInput"
|
||||
class="sr-only"
|
||||
@ -255,18 +271,15 @@
|
||||
multiple
|
||||
disabled
|
||||
>
|
||||
|
||||
<button id="sendButton" class="send-button" type="submit" disabled>
|
||||
Send
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="threadComposerWrap" class="composer-wrap hidden">
|
||||
<form id="threadForm" class="composer">
|
||||
<div class="composer-stack">
|
||||
<div class="composer-shell">
|
||||
<label class="sr-only" for="threadInput">Reply in thread</label>
|
||||
|
||||
<div class="composer-field-wrap">
|
||||
<textarea
|
||||
id="threadInput"
|
||||
class="composer-input"
|
||||
@ -278,12 +291,7 @@
|
||||
disabled
|
||||
></textarea>
|
||||
|
||||
<div class="composer-meta">
|
||||
<span id="threadAttachmentName" class="attachment-name"></span>
|
||||
<span id="threadMessageCount" class="message-count">0 / 1000</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="composer-shell-actions">
|
||||
<label
|
||||
id="threadAttachmentButton"
|
||||
class="attachment-button disabled"
|
||||
@ -294,6 +302,20 @@
|
||||
+
|
||||
</label>
|
||||
|
||||
<button id="threadSendButton" class="send-button" type="submit" disabled>
|
||||
Reply
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="threadEmojiAutocomplete" class="emoji-autocomplete hidden" aria-live="polite"></div>
|
||||
|
||||
<div class="composer-meta">
|
||||
<span id="threadAttachmentName" class="attachment-name"></span>
|
||||
<span id="threadMessageCount" class="message-count">0 / 1000</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input
|
||||
id="threadAttachmentInput"
|
||||
class="sr-only"
|
||||
@ -302,14 +324,24 @@
|
||||
multiple
|
||||
disabled
|
||||
>
|
||||
|
||||
<button id="threadSendButton" class="send-button" type="submit" disabled>
|
||||
Reply
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input
|
||||
id="avatarUploadInput"
|
||||
class="sr-only"
|
||||
type="file"
|
||||
accept=".png,.jpg,.jpeg,.gif,.webp"
|
||||
>
|
||||
|
||||
<input
|
||||
id="bannerUploadInput"
|
||||
class="sr-only"
|
||||
type="file"
|
||||
accept=".png,.jpg,.jpeg,.gif,.webp"
|
||||
>
|
||||
|
||||
<section
|
||||
id="authOverlay"
|
||||
class="auth-overlay"
|
||||
@ -399,7 +431,10 @@
|
||||
aria-label="Reactions"
|
||||
>
|
||||
<div class="reaction-popup-card">
|
||||
<div class="reaction-popup-header">
|
||||
<h2 class="reaction-popup-title">Reactions</h2>
|
||||
</div>
|
||||
|
||||
<div id="reactionPopupGrid" class="reaction-popup-grid"></div>
|
||||
|
||||
<div class="reaction-popup-custom">
|
||||
@ -436,14 +471,15 @@
|
||||
aria-label="Media preview"
|
||||
>
|
||||
<div class="media-card">
|
||||
<div class="media-header">
|
||||
<div class="media-header minimal">
|
||||
<div id="mediaTitle" class="media-title">Media</div>
|
||||
<div class="settings-actions">
|
||||
<a id="mediaDownloadLink" class="button secondary" href="#" download>Download</a>
|
||||
<button id="closeMediaButton" class="button secondary" type="button">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
|
||||
<div class="media-body spacious">
|
||||
<img id="mediaImage" class="hidden" alt="">
|
||||
<audio id="mediaAudio" class="hidden" controls preload="metadata"></audio>
|
||||
<video id="mediaVideo" class="hidden" controls preload="metadata"></video>
|
||||
@ -455,14 +491,55 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
id="imageCropOverlay"
|
||||
class="dialog-overlay hidden"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Image crop and preview"
|
||||
>
|
||||
<div class="dialog-card crop-dialog-card">
|
||||
<h2>Adjust image</h2>
|
||||
|
||||
<div class="crop-dialog-body">
|
||||
<div id="imageCropPreview" class="crop-preview-area" aria-live="polite"></div>
|
||||
|
||||
<label class="dialog-label" for="imageCropZoom">
|
||||
Zoom
|
||||
<input
|
||||
id="imageCropZoom"
|
||||
class="field"
|
||||
type="range"
|
||||
min="1"
|
||||
max="3"
|
||||
step="0.05"
|
||||
value="1"
|
||||
>
|
||||
</label>
|
||||
|
||||
<label class="dialog-label crop-toggle">
|
||||
<input id="imageCropAuto" type="checkbox">
|
||||
Auto-crop placeholder
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="dialog-actions">
|
||||
<button id="imageCropCancel" class="button secondary" type="button">Cancel</button>
|
||||
<button id="imageCropApply" class="button" type="button">Apply</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
id="callOverlay"
|
||||
class="call-overlay hidden"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-modal="false"
|
||||
aria-label="Voice call"
|
||||
>
|
||||
<div class="call-card">
|
||||
<div class="call-card utility-panel">
|
||||
<div id="callDragHandle" class="call-drag-handle" aria-hidden="true"></div>
|
||||
|
||||
<div class="call-title-row">
|
||||
<div>
|
||||
<div class="call-title">call</div>
|
||||
@ -473,6 +550,29 @@
|
||||
|
||||
<div id="callPeerLabel" class="call-peer-label">No active call</div>
|
||||
|
||||
<div id="callSummaryStats" class="call-summary-stats">
|
||||
<div class="call-stat-row">
|
||||
<span class="call-stat-label">Users</span>
|
||||
<span id="callUserCountStat" class="call-stat-value">0</span>
|
||||
</div>
|
||||
<div class="call-stat-row">
|
||||
<span class="call-stat-label">Elapsed</span>
|
||||
<span id="callElapsedStat" class="call-stat-value">0m</span>
|
||||
</div>
|
||||
<div class="call-stat-row">
|
||||
<span class="call-stat-label">Latency</span>
|
||||
<span id="callLatencyStat" class="call-stat-value">—</span>
|
||||
</div>
|
||||
<div class="call-stat-row">
|
||||
<span class="call-stat-label">Loss</span>
|
||||
<span id="callPacketLossStat" class="call-stat-value">—</span>
|
||||
</div>
|
||||
<div class="call-stat-row">
|
||||
<span class="call-stat-label">Uptime</span>
|
||||
<span id="callUptimeStat" class="call-stat-value">—</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="callParticipants" class="call-participants"></div>
|
||||
<div id="callPendingInvites" class="call-pending-invites hidden"></div>
|
||||
<div id="remoteAudioContainer" class="remote-audio-container"></div>
|
||||
@ -521,14 +621,52 @@
|
||||
<div class="admin-actions">
|
||||
<button id="createRoomButton" class="button" type="button">Add chat</button>
|
||||
<button id="clearMessagesButton" class="danger-button" type="button">Clear selected room</button>
|
||||
<button id="typingToggleButton" class="button secondary" type="button">Typing indicator: on</button>
|
||||
<button id="notificationsToggleButton" class="button secondary" type="button">Notifications: off</button>
|
||||
<button id="themeButton" class="button secondary" type="button" aria-label="Choose accent color">Accent color</button>
|
||||
</div>
|
||||
|
||||
<div class="admin-tabs" role="tablist" aria-label="Moderation sections">
|
||||
<button
|
||||
id="adminTabRooms"
|
||||
class="admin-tab active"
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected="true"
|
||||
>
|
||||
Rooms
|
||||
</button>
|
||||
<button
|
||||
id="adminTabUsers"
|
||||
class="admin-tab"
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected="false"
|
||||
>
|
||||
Users
|
||||
</button>
|
||||
<button
|
||||
id="adminTabTeams"
|
||||
class="admin-tab"
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected="false"
|
||||
>
|
||||
Teams/channels
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="admin-tab-panels">
|
||||
<div id="adminRoomsPanel" class="admin-tab-panel">
|
||||
<div id="adminRooms" class="admin-rooms"></div>
|
||||
</div>
|
||||
|
||||
<div id="adminUsersPanel" class="admin-tab-panel hidden">
|
||||
<div id="adminUsers" class="admin-users"></div>
|
||||
</div>
|
||||
|
||||
<div id="adminTeamsPanel" class="admin-tab-panel hidden">
|
||||
<div id="adminTeamsChannels" class="admin-rooms"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
@ -545,6 +683,23 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div
|
||||
id="settingsSavePanel"
|
||||
class="settings-save-panel hidden"
|
||||
aria-live="polite"
|
||||
>
|
||||
<div class="settings-save-panel-inner">
|
||||
<div class="settings-save-copy">
|
||||
<strong id="settingsUnsavedIndicator">Unsaved changes</strong>
|
||||
<small>Your previews are local until you save.</small>
|
||||
</div>
|
||||
<div class="settings-save-actions">
|
||||
<button id="settingsCloseButton" class="button secondary" type="button">Close</button>
|
||||
<button id="settingsSaveButton" class="button" type="button">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="statusToast" class="status-toast" role="status" aria-live="polite"></div>
|
||||
|
||||
<script src="{{ url_for('static', filename='js/00-config.js', v=asset_version) }}" defer></script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user