Update templates/index.html

This commit is contained in:
dev 2026-10-31 09:21:45 +00:00
parent e2373bcb64
commit 301260caa5

View File

@ -33,96 +33,102 @@
</div> </div>
<div class="header-navigation"> <div class="header-navigation">
<button <div class="header-nav-group">
id="feedButton" <button
class="header-action feed-button active" id="feedButton"
type="button" class="header-action feed-button active"
aria-label="Open activity feed" type="button"
aria-pressed="true" aria-label="Open activity feed"
> aria-pressed="true"
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"> >
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24">
</svg> <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/>
</button> </svg>
</button>
<button <button
id="pagesButton" id="pagesButton"
class="header-action pages-button" class="header-action pages-button"
type="button" type="button"
aria-label="Open team pages" aria-label="Open team pages"
aria-pressed="false" aria-pressed="false"
> >
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24">
<g fill="none"> <g fill="none">
<path d="M3.5 2.5h17v19h-17z"/> <path d="M3.5 2.5h17v19h-17z"/>
<path stroke="currentColor" stroke-linecap="square" stroke-width="2" d="M3.5 2.5h17v19h-17zM8 8h8m-8 4h8m-8 4h5"/> <path stroke="currentColor" stroke-linecap="square" stroke-width="2" d="M3.5 2.5h17v19h-17zM8 8h8m-8 4h8m-8 4h5"/>
</g> </g>
</svg> </svg>
</button> </button>
<button <button
id="dmsButton" id="dmsButton"
class="header-action" class="header-action"
type="button" type="button"
aria-label="Open direct messages" aria-label="Open direct messages"
aria-pressed="false" aria-pressed="false"
title="Direct messages" title="Direct messages"
> >
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/> <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
</svg> </svg>
</button> </button>
<button <button
id="backButton" id="backButton"
class="header-action hidden" class="header-action hidden"
type="button" type="button"
aria-label="Go back" aria-label="Go back"
> >
Back Back
</button> </button>
</div>
<select <div class="header-context-group">
id="teamSelect" <select
class="room-select team-select" id="teamSelect"
aria-label="Select team" class="room-select team-select"
disabled aria-label="Select team"
> disabled
<option value="">Loading teams…</option> >
</select> <option value="">Loading teams…</option>
</select>
<select <select
id="roomSelect" id="roomSelect"
class="room-select channel-select" class="room-select channel-select"
aria-label="Select channel" aria-label="Select channel"
disabled disabled
> >
<option value="">Loading channels…</option> <option value="">Loading channels…</option>
</select> </select>
</div>
<div id="presenceLabel" class="presence-label hidden" aria-live="polite"></div> <div class="header-utility-group">
<div id="presenceLabel" class="presence-label hidden" aria-live="polite"></div>
<button <button
id="settingsButton" id="settingsButton"
class="header-action" class="header-action"
type="button" type="button"
aria-label="Open settings and profile menu" aria-label="Open settings and profile menu"
title="Settings and profile" title="Settings and profile"
> >
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3l2.3.8l2.4-.5l1.3 2.1l2.2 1l-.3 2.4l1.1 2.1l-1.6 1.8l-.3 2.4l-2.4.5L14 21l-2-.8l-2 .8l-1.4-2.1l-2.4-.5l-.3-2.4L4.3 14l1.1-2.1l-.3-2.4l2.2-1l1.3-2.1l2.4.5zM12 15.5A3.5 3.5 0 1 0 12 8.5a3.5 3.5 0 0 0 0 7z"/> <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3l2.3.8l2.4-.5l1.3 2.1l2.2 1l-.3 2.4l1.1 2.1l-1.6 1.8l-.3 2.4l-2.4.5L14 21l-2-.8l-2 .8l-1.4-2.1l-2.4-.5l-.3-2.4L4.3 14l1.1-2.1l-.3-2.4l2.2-1l1.3-2.1l2.4.5zM12 15.5A3.5 3.5 0 1 0 12 8.5a3.5 3.5 0 0 0 0 7z"/>
</svg> </svg>
</button> </button>
<button <button
id="callStatusChip" id="callStatusChip"
class="header-action call-status-chip" class="header-action call-status-chip"
type="button" type="button"
aria-label="Open call panel" aria-label="Open call panel"
title="Voice call" title="Voice call"
> >
Call Call
</button> </button>
</div>
</div> </div>
<div class="header-account-wrap"> <div class="header-account-wrap">
@ -151,7 +157,7 @@
aria-label="Activity feed" aria-label="Activity feed"
> >
<div class="empty-state"> <div class="empty-state">
<div class="empty-card">Loading activity…</div> <div class="empty-card">Loading activity…</div>
</div> </div>
</main> </main>
@ -209,7 +215,7 @@
<div id="newMessagesBar" class="new-messages-bar hidden"> <div id="newMessagesBar" class="new-messages-bar hidden">
<button id="jumpToLatestButton" class="small-button" type="button"> <button id="jumpToLatestButton" class="small-button" type="button">
New messages · Jump to latest New messages · Jump to latest
</button> </button>
</div> </div>
@ -217,19 +223,39 @@
<div id="composerWrap" class="composer-wrap hidden"> <div id="composerWrap" class="composer-wrap hidden">
<form id="chatForm" class="composer"> <form id="chatForm" class="composer">
<label class="sr-only" for="messageInput">Message</label> <div class="composer-stack">
<div class="composer-shell">
<label class="sr-only" for="messageInput">Message</label>
<div class="composer-field-wrap"> <textarea
<textarea id="messageInput"
id="messageInput" class="composer-input"
class="composer-input" rows="1"
rows="1" maxlength="1000"
maxlength="1000" autocomplete="off"
autocomplete="off" placeholder="sign in to send"
placeholder="sign in to send" aria-label="Message"
aria-label="Message" disabled
disabled ></textarea>
></textarea>
<div class="composer-shell-actions">
<label
id="attachmentButton"
class="attachment-button disabled"
for="attachmentInput"
title="Attach file(s)"
aria-label="Attach file(s)"
>
+
</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"> <div class="composer-meta">
<span id="attachmentName" class="attachment-name"></span> <span id="attachmentName" class="attachment-name"></span>
@ -237,16 +263,6 @@
</div> </div>
</div> </div>
<label
id="attachmentButton"
class="attachment-button disabled"
for="attachmentInput"
title="Attach file(s)"
aria-label="Attach file(s)"
>
+
</label>
<input <input
id="attachmentInput" id="attachmentInput"
class="sr-only" class="sr-only"
@ -255,28 +271,44 @@
multiple multiple
disabled disabled
> >
<button id="sendButton" class="send-button" type="submit" disabled>
Send
</button>
</form> </form>
</div> </div>
<div id="threadComposerWrap" class="composer-wrap hidden"> <div id="threadComposerWrap" class="composer-wrap hidden">
<form id="threadForm" class="composer"> <form id="threadForm" class="composer">
<label class="sr-only" for="threadInput">Reply in thread</label> <div class="composer-stack">
<div class="composer-shell">
<label class="sr-only" for="threadInput">Reply in thread</label>
<div class="composer-field-wrap"> <textarea
<textarea id="threadInput"
id="threadInput" class="composer-input"
class="composer-input" rows="1"
rows="1" maxlength="1000"
maxlength="1000" autocomplete="off"
autocomplete="off" placeholder="reply in thread"
placeholder="reply in thread" aria-label="Reply in thread"
aria-label="Reply in thread" disabled
disabled ></textarea>
></textarea>
<div class="composer-shell-actions">
<label
id="threadAttachmentButton"
class="attachment-button disabled"
for="threadAttachmentInput"
title="Attach file(s)"
aria-label="Attach file(s)"
>
+
</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"> <div class="composer-meta">
<span id="threadAttachmentName" class="attachment-name"></span> <span id="threadAttachmentName" class="attachment-name"></span>
@ -284,16 +316,6 @@
</div> </div>
</div> </div>
<label
id="threadAttachmentButton"
class="attachment-button disabled"
for="threadAttachmentInput"
title="Attach file(s)"
aria-label="Attach file(s)"
>
+
</label>
<input <input
id="threadAttachmentInput" id="threadAttachmentInput"
class="sr-only" class="sr-only"
@ -302,14 +324,24 @@
multiple multiple
disabled disabled
> >
<button id="threadSendButton" class="send-button" type="submit" disabled>
Reply
</button>
</form> </form>
</div> </div>
</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 <section
id="authOverlay" id="authOverlay"
class="auth-overlay" class="auth-overlay"
@ -399,7 +431,10 @@
aria-label="Reactions" aria-label="Reactions"
> >
<div class="reaction-popup-card"> <div class="reaction-popup-card">
<h2 class="reaction-popup-title">Reactions</h2> <div class="reaction-popup-header">
<h2 class="reaction-popup-title">Reactions</h2>
</div>
<div id="reactionPopupGrid" class="reaction-popup-grid"></div> <div id="reactionPopupGrid" class="reaction-popup-grid"></div>
<div class="reaction-popup-custom"> <div class="reaction-popup-custom">
@ -436,14 +471,15 @@
aria-label="Media preview" aria-label="Media preview"
> >
<div class="media-card"> <div class="media-card">
<div class="media-header"> <div class="media-header minimal">
<div id="mediaTitle" class="media-title">Media</div> <div id="mediaTitle" class="media-title">Media</div>
<div class="settings-actions"> <div class="settings-actions">
<a id="mediaDownloadLink" class="button secondary" href="#" download>Download</a> <a id="mediaDownloadLink" class="button secondary" href="#" download>Download</a>
<button id="closeMediaButton" class="button secondary" type="button">Close</button> <button id="closeMediaButton" class="button secondary" type="button">Close</button>
</div> </div>
</div> </div>
<div class="media-body">
<div class="media-body spacious">
<img id="mediaImage" class="hidden" alt=""> <img id="mediaImage" class="hidden" alt="">
<audio id="mediaAudio" class="hidden" controls preload="metadata"></audio> <audio id="mediaAudio" class="hidden" controls preload="metadata"></audio>
<video id="mediaVideo" class="hidden" controls preload="metadata"></video> <video id="mediaVideo" class="hidden" controls preload="metadata"></video>
@ -455,14 +491,55 @@
</div> </div>
</section> </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 <section
id="callOverlay" id="callOverlay"
class="call-overlay hidden" class="call-overlay hidden"
role="dialog" role="dialog"
aria-modal="true" aria-modal="false"
aria-label="Voice call" 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 class="call-title-row">
<div> <div>
<div class="call-title">call</div> <div class="call-title">call</div>
@ -473,6 +550,29 @@
<div id="callPeerLabel" class="call-peer-label">No active call</div> <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="callParticipants" class="call-participants"></div>
<div id="callPendingInvites" class="call-pending-invites hidden"></div> <div id="callPendingInvites" class="call-pending-invites hidden"></div>
<div id="remoteAudioContainer" class="remote-audio-container"></div> <div id="remoteAudioContainer" class="remote-audio-container"></div>
@ -521,13 +621,51 @@
<div class="admin-actions"> <div class="admin-actions">
<button id="createRoomButton" class="button" type="button">Add chat</button> <button id="createRoomButton" class="button" type="button">Add chat</button>
<button id="clearMessagesButton" class="danger-button" type="button">Clear selected room</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>
<div id="adminRooms" class="admin-rooms"></div> <div class="admin-tabs" role="tablist" aria-label="Moderation sections">
<div id="adminUsers" class="admin-users"></div> <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> </div>
</section> </section>
@ -545,6 +683,23 @@
</div> </div>
</section> </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> <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> <script src="{{ url_for('static', filename='js/00-config.js', v=asset_version) }}" defer></script>
@ -561,4 +716,4 @@
<script src="{{ url_for('static', filename='js/04-main.js', v=asset_version) }}" defer></script> <script src="{{ url_for('static', filename='js/04-main.js', v=asset_version) }}" defer></script>
<script src="{{ url_for('static', filename='js/07-team-channel-adapter.js', v=asset_version) }}" defer></script> <script src="{{ url_for('static', filename='js/07-team-channel-adapter.js', v=asset_version) }}" defer></script>
</body> </body>
</html> </html>