transient.chat/static/chat.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Transient.chat - Private Encrypted Chat</title>
    <link rel="stylesheet" href="/assets/css/styles.css" />
    <link rel="stylesheet" href="/assets/css/chat.css" />
    <link rel="stylesheet" href="/assets/css/watchparty.css" />
    <link rel="icon" href="/assets/images/favicon.ico" type="image/x-icon" />
  </head>
  <body>
    <h1 id="room-title">Chat Room</h1>
    
    <div id="page-container">
      <!-- Collapsible Watch Party Video Section -->
      <div id="video-section" class="hidden">
        <div id="video-controls">
          <input
            type="text"
            id="video-url-input"
            placeholder="Paste YouTube video URL..."
          />
          <button id="start-video-button">▶️ Play</button>
          <button id="pause-video-button" class="hidden">⏸ Pause</button>
          <button id="resume-video-button" class="hidden">▶ Resume</button>
          <button id="clear-video-button" class="hidden">🛑 Clear Video</button>
        </div>
        <div class="video-wrapper">
          <iframe
            id="video-iframe"
            frameborder="0"
            allowfullscreen
            allow="autoplay; encrypted-media"
            class="hidden"
          ></iframe>
          <img
            id="paused-overlay"
            src="/assets/images/paused.png"
            class="hidden"
            alt="Video Paused"
          />
        </div>
      </div>

      <!-- Main Chat Center -->
      <div id="chat-center">
        <div id="messages"></div>
        <form id="chat-form">
          <input
            type="text"
            class="inputfield"
            id="message-input"
            placeholder="Type a message, paste a link, or send an image/video URL."
            autocomplete="off"
            required
          />
          <button type="submit">Send</button>
        </form>
      </div>

      <!-- Sidebar Controls & Users -->
      <div id="user-list-container">
        <a
          href="server_list.html"
          style="
            display: inline-block;
            margin-bottom: 10px;
            text-decoration: none;
          "
        >
          <button>Server List</button>
        </a>
        <br />
        <button
          id="sound-toggle"
          style="
            margin-bottom: 10px;
            text-decoration: none;
            display: inline-block;
            text-align: left;
          "
        >
          🔊 Sound: On
        </button>
        <br />
        <button
          id="external-toggle"
          style="
            margin-bottom: 10px;
            text-decoration: none;
            display: inline-block;
            text-align: left;
          "
        >
          🔒 External Content: Off
        </button>
        <br />
        <button
          id="watchparty-toggle"
          style="
            margin-bottom: 10px;
            text-decoration: none;
            display: inline-block;
            text-align: left;
          "
        >
          🎬 Watch Party: Off
        </button>

        <h3>Users in room</h3>
        <div id="user-list"></div>
      </div>
    </div>

    <!-- Password Modal for Room Access & Key Derivation -->
    <div id="password-modal" class="modal-overlay hidden">
      <div class="modal-box">
        <h3>🔒 Room Password Required</h3>
        <p>This room is private and encrypted. Enter the room password to join and decrypt messages:</p>
        <form id="password-form">
          <input
            type="password"
            id="modal-password-input"
            placeholder="Room Password"
            autocomplete="current-password"
            required
          />
          <div class="modal-buttons">
            <button type="submit" id="modal-submit-btn">Enter Room</button>
            <a href="/server_list.html"><button type="button" class="cancel-btn">Back to Server List</button></a>
          </div>
        </form>
      </div>
    </div>

    <script src="/assets/js/crypto.js"></script>
    <script src="/assets/js/chat.js"></script>
  </body>
</html>