Update templates/index.html
This commit is contained in:
parent
8a3358aec7
commit
a648fcdcbb
@ -25,11 +25,13 @@
|
||||
class="header-dot"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
|
||||
<div class="header-room-copy">
|
||||
<div id="headerTitle" class="header-title">Feed</div>
|
||||
<div id="headerSubtitle" class="header-subtitle">Recent activity</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header-navigation">
|
||||
<button
|
||||
id="feedButton"
|
||||
@ -42,6 +44,7 @@
|
||||
<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>
|
||||
</button>
|
||||
|
||||
<button
|
||||
id="pagesButton"
|
||||
class="header-action pages-button"
|
||||
@ -56,6 +59,7 @@
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button
|
||||
id="dmsButton"
|
||||
class="header-action"
|
||||
@ -68,6 +72,7 @@
|
||||
<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>
|
||||
</button>
|
||||
|
||||
<button
|
||||
id="backButton"
|
||||
class="header-action hidden"
|
||||
@ -76,6 +81,7 @@
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
|
||||
<select
|
||||
id="teamSelect"
|
||||
class="room-select team-select"
|
||||
@ -84,6 +90,7 @@
|
||||
>
|
||||
<option value="">Loading teams…</option>
|
||||
</select>
|
||||
|
||||
<select
|
||||
id="roomSelect"
|
||||
class="room-select channel-select"
|
||||
@ -92,7 +99,9 @@
|
||||
>
|
||||
<option value="">Loading channels…</option>
|
||||
</select>
|
||||
|
||||
<div id="presenceLabel" class="presence-label hidden" aria-live="polite"></div>
|
||||
|
||||
<button
|
||||
id="settingsButton"
|
||||
class="header-action"
|
||||
@ -104,9 +113,21 @@
|
||||
<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>
|
||||
</button>
|
||||
|
||||
<button
|
||||
id="callStatusChip"
|
||||
class="header-action call-status-chip hidden"
|
||||
type="button"
|
||||
aria-label="Open active call panel"
|
||||
title="Active call"
|
||||
>
|
||||
Call
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="header-account-wrap">
|
||||
<div id="headerAccount" class="header-account">not signed in</div>
|
||||
|
||||
<button
|
||||
id="logoutButton"
|
||||
class="header-action hidden"
|
||||
@ -121,6 +142,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main
|
||||
id="feedBox"
|
||||
class="feed-box"
|
||||
@ -132,6 +154,7 @@
|
||||
<div class="empty-card">Loading activity…</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<main
|
||||
id="dmBox"
|
||||
class="dm-box hidden"
|
||||
@ -143,6 +166,7 @@
|
||||
<div class="empty-card">Sign in to view direct messages.</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<main
|
||||
id="chatBox"
|
||||
class="chat-box hidden"
|
||||
@ -150,6 +174,7 @@
|
||||
aria-busy="true"
|
||||
aria-label="Channel messages"
|
||||
></main>
|
||||
|
||||
<main
|
||||
id="threadBox"
|
||||
class="thread-box hidden"
|
||||
@ -157,6 +182,7 @@
|
||||
aria-busy="false"
|
||||
aria-label="Message thread"
|
||||
></main>
|
||||
|
||||
<main
|
||||
id="pagesBox"
|
||||
class="pages-box hidden"
|
||||
@ -164,6 +190,7 @@
|
||||
aria-busy="false"
|
||||
aria-label="Team pages"
|
||||
></main>
|
||||
|
||||
<main
|
||||
id="pageDetailBox"
|
||||
class="page-detail-box hidden"
|
||||
@ -171,6 +198,7 @@
|
||||
aria-busy="false"
|
||||
aria-label="Page details"
|
||||
></main>
|
||||
|
||||
<main
|
||||
id="profileBox"
|
||||
class="profile-box hidden"
|
||||
@ -178,15 +206,19 @@
|
||||
aria-busy="false"
|
||||
aria-label="Profile"
|
||||
></main>
|
||||
|
||||
<div id="newMessagesBar" class="new-messages-bar hidden">
|
||||
<button id="jumpToLatestButton" class="small-button" type="button">
|
||||
New messages · Jump to latest
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="typingBar" class="typing-bar hidden" aria-live="polite"></div>
|
||||
|
||||
<div id="composerWrap" class="composer-wrap hidden">
|
||||
<form id="chatForm" class="composer">
|
||||
<label class="sr-only" for="messageInput">Message</label>
|
||||
|
||||
<div class="composer-field-wrap">
|
||||
<textarea
|
||||
id="messageInput"
|
||||
@ -198,12 +230,13 @@
|
||||
aria-label="Message"
|
||||
disabled
|
||||
></textarea>
|
||||
<div id="emojiAutocomplete" class="emoji-autocomplete hidden"></div>
|
||||
|
||||
<div class="composer-meta">
|
||||
<span id="attachmentName" class="attachment-name"></span>
|
||||
<span id="messageCount" class="message-count">0 / 1000</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label
|
||||
id="attachmentButton"
|
||||
class="attachment-button disabled"
|
||||
@ -213,22 +246,26 @@
|
||||
>
|
||||
+
|
||||
</label>
|
||||
|
||||
<input
|
||||
id="attachmentInput"
|
||||
class="sr-only"
|
||||
type="file"
|
||||
accept=".txt,.pdf,.png,.jpg,.jpeg,.gif,.webp,.mp3,.wav,.ogg,.m4a,.aac,.flac,.mp4,.webm,.mov,.m4v,.ogv"
|
||||
accept=".txt,.pdf,.png,.jpg,.jpeg,.gif,.webp"
|
||||
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">
|
||||
<label class="sr-only" for="threadInput">Reply in thread</label>
|
||||
|
||||
<div class="composer-field-wrap">
|
||||
<textarea
|
||||
id="threadInput"
|
||||
@ -240,11 +277,13 @@
|
||||
aria-label="Reply in thread"
|
||||
disabled
|
||||
></textarea>
|
||||
|
||||
<div class="composer-meta">
|
||||
<span id="threadAttachmentName" class="attachment-name"></span>
|
||||
<span id="threadMessageCount" class="message-count">0 / 1000</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label
|
||||
id="threadAttachmentButton"
|
||||
class="attachment-button disabled"
|
||||
@ -254,20 +293,23 @@
|
||||
>
|
||||
+
|
||||
</label>
|
||||
|
||||
<input
|
||||
id="threadAttachmentInput"
|
||||
class="sr-only"
|
||||
type="file"
|
||||
accept=".txt,.pdf,.png,.jpg,.jpeg,.gif,.webp,.mp3,.wav,.ogg,.m4a,.aac,.flac,.mp4,.webm,.mov,.m4v,.ogv"
|
||||
accept=".txt,.pdf,.png,.jpg,.jpeg,.gif,.webp"
|
||||
multiple
|
||||
disabled
|
||||
>
|
||||
|
||||
<button id="threadSendButton" class="send-button" type="submit" disabled>
|
||||
Reply
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section
|
||||
id="authOverlay"
|
||||
class="auth-overlay"
|
||||
@ -277,7 +319,9 @@
|
||||
>
|
||||
<div class="auth-card">
|
||||
<p></p>
|
||||
|
||||
<div id="authNotice" class="notice" role="status"></div>
|
||||
|
||||
<label class="sr-only" for="accessKeyInput">access key</label>
|
||||
<input
|
||||
id="accessKeyInput"
|
||||
@ -287,8 +331,9 @@
|
||||
autocapitalize="none"
|
||||
spellcheck="false"
|
||||
maxlength="256"
|
||||
placeholder="private access key"
|
||||
placeholder="access key"
|
||||
>
|
||||
|
||||
<label class="sr-only" for="usernameInput">Username</label>
|
||||
<input
|
||||
id="usernameInput"
|
||||
@ -300,6 +345,7 @@
|
||||
maxlength="30"
|
||||
placeholder="username"
|
||||
>
|
||||
|
||||
<label class="sr-only" for="passwordInput">Password</label>
|
||||
<input
|
||||
id="passwordInput"
|
||||
@ -309,13 +355,16 @@
|
||||
maxlength="256"
|
||||
placeholder="password"
|
||||
>
|
||||
|
||||
<div class="auth-actions">
|
||||
<button id="loginButton" class="button" type="button">sign in</button>
|
||||
<button id="registerButton" class="button secondary" type="button">create account</button>
|
||||
</div>
|
||||
|
||||
<p class="auth-help"></p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
id="blockedOverlay"
|
||||
class="blocked-overlay hidden"
|
||||
@ -325,9 +374,10 @@
|
||||
>
|
||||
<div class="auth-card">
|
||||
<h1>Access blocked</h1>
|
||||
<p id="blockedMessage">Access to this chat service is unavailable.</p>
|
||||
<p id="blockedMessage">Access is unavailable.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
id="headerMenuOverlay"
|
||||
class="header-menu-overlay hidden"
|
||||
@ -340,6 +390,7 @@
|
||||
<div id="headerMenuList" class="header-menu-list"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
id="reactionPopupOverlay"
|
||||
class="reaction-popup-overlay hidden"
|
||||
@ -350,6 +401,7 @@
|
||||
<div class="reaction-popup-card">
|
||||
<h2 class="reaction-popup-title">Reactions</h2>
|
||||
<div id="reactionPopupGrid" class="reaction-popup-grid"></div>
|
||||
|
||||
<div class="reaction-popup-custom">
|
||||
<input
|
||||
id="reactionCustomInput"
|
||||
@ -367,12 +419,15 @@
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="reactionPopupList" class="reaction-popup-list"></div>
|
||||
|
||||
<div class="dialog-actions">
|
||||
<button id="closeReactionPopupButton" class="button secondary" type="button">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
id="mediaOverlay"
|
||||
class="media-overlay hidden"
|
||||
@ -399,6 +454,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
id="callOverlay"
|
||||
class="call-overlay hidden"
|
||||
@ -414,16 +470,24 @@
|
||||
</div>
|
||||
<button id="closeCallPanelButton" class="button secondary" type="button">Hide</button>
|
||||
</div>
|
||||
|
||||
<div id="callPeerLabel" class="call-peer-label">No active call</div>
|
||||
<audio id="remoteAudio" autoplay playsinline></audio>
|
||||
|
||||
<div id="callParticipants" class="call-participants"></div>
|
||||
<div id="callPendingInvites" class="call-pending-invites hidden"></div>
|
||||
<div id="remoteAudioContainer" class="remote-audio-container"></div>
|
||||
|
||||
<div class="call-actions">
|
||||
<button id="startCallButton" class="button" type="button">Start call</button>
|
||||
<button id="answerCallButton" class="button hidden" type="button">Answer</button>
|
||||
<button id="retryCallButton" class="button secondary hidden" type="button">Retry connection</button>
|
||||
<button id="addToCallButton" class="button secondary hidden" type="button">Add user</button>
|
||||
<button id="muteCallButton" class="button secondary hidden" type="button">Mute</button>
|
||||
<button id="hangupCallButton" class="danger-button hidden" type="button">Hang up</button>
|
||||
<button id="hangupCallButton" class="danger-button hidden" type="button">Leave call</button>
|
||||
<button id="endCallButton" class="danger-button hidden" type="button">End call</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<button
|
||||
id="adminFab"
|
||||
class="admin-fab"
|
||||
@ -433,6 +497,7 @@
|
||||
>
|
||||
#
|
||||
</button>
|
||||
|
||||
<section
|
||||
id="adminPanel"
|
||||
class="admin-panel"
|
||||
@ -447,10 +512,12 @@
|
||||
<strong>Moderation</strong>
|
||||
<div class="header-subtitle"></div>
|
||||
</div>
|
||||
|
||||
<button id="closeAdminButton" class="button secondary" type="button">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
@ -458,10 +525,12 @@
|
||||
<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 id="adminRooms" class="admin-rooms"></div>
|
||||
<div id="adminUsers" class="admin-users"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
id="dialogOverlay"
|
||||
class="dialog-overlay hidden"
|
||||
@ -475,7 +544,9 @@
|
||||
<div id="dialogActions" class="dialog-actions"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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/01-api.js', v=asset_version) }}" defer></script>
|
||||
<script src="{{ url_for('static', filename='js/02-chat.js', v=asset_version) }}" defer></script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user