Update templates/index.html

templates/index.html

@@ -91,7 +91,7 @@
               aria-label="Select team"
               disabled
             >
-              <option value="">Loading teams…</option>
+              <option value="">Loading teams...</option>
             </select>
 
             <select
@@ -100,7 +100,7 @@
               aria-label="Select channel"
               disabled
             >
-              <option value="">Loading channels…</option>
+              <option value="">Loading channels...</option>
             </select>
           </div>
 
@@ -157,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>
 
@@ -328,6 +328,20 @@
     </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"
@@ -477,6 +491,45 @@
     </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"
@@ -485,16 +538,41 @@
     aria-label="Voice call"
   >
     <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>
-          <div id="callStatus" class="call-status">idle</div>
+          <div id="callStatus" class="call-status">Idle</div>
         </div>
         <button id="closeCallPanelButton" class="button secondary" type="button">Hide</button>
       </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="callPendingInvites" class="call-pending-invites hidden"></div>
       <div id="remoteAudioContainer" class="remote-audio-container"></div>
@@ -605,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>