174 lines
7.4 KiB
HTML
174 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>RadChat</title>
|
|
<link rel="stylesheet" href="/styles.css">
|
|
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
|
|
</head>
|
|
<body>
|
|
<div class="app-container">
|
|
<!-- Left Sidebar for Users and Voice Controls -->
|
|
<div class="sidebar" id="sidebar">
|
|
<!-- Users List -->
|
|
<div class="sidebar-section users-section">
|
|
<!-- <div class="sidebar-header"> -->
|
|
<!-- <h3>👥 Users (<span id="user-count">0</span>)</h3> -->
|
|
<!-- </div> -->
|
|
<div id="users-list" class="users-list">
|
|
<div class="no-users"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Voice Controls in Sidebar -->
|
|
<div class="sidebar-section voice-controls-sidebar" id="voice-controls-sidebar" style="display: none;">
|
|
<!-- <div class="sidebar-header"> -->
|
|
<!-- <h3>🎙️ Voice Controls</h3> -->
|
|
<!-- </div> -->
|
|
<div class="voice-controls-content">
|
|
<div class="control-buttons">
|
|
<button
|
|
id="toggle-mute-btn"
|
|
onclick="toggleMute()"
|
|
class="voice-btn unmuted"
|
|
>
|
|
🎤
|
|
</button>
|
|
<button
|
|
id="toggle-deafen-btn"
|
|
onclick="toggleDeafen()"
|
|
class="voice-btn"
|
|
>
|
|
🔊
|
|
</button>
|
|
<button
|
|
id="voice-settings-btn"
|
|
onclick="openSelfModal()"
|
|
class="voice-btn"
|
|
>
|
|
⚙️
|
|
</button>
|
|
<button
|
|
id="leave-voice-btn"
|
|
onclick="leaveVoiceChat()"
|
|
class="voice-btn danger"
|
|
>
|
|
📞
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content Area -->
|
|
<div class="main-content">
|
|
<!-- <header> -->
|
|
<!-- <h1>RadChat</h1> -->
|
|
<!-- <div class="connection-status" id="status" display="none"> -->
|
|
<!-- <span class="status-indicator disconnected"></span> -->
|
|
<!-- <span id="status-text">Disconnected</span> -->
|
|
<!-- </div> -->
|
|
<!-- </header> -->
|
|
|
|
<main>
|
|
<!-- Username Section - Always visible when not in voice chat -->
|
|
<div class="username-section" id="username-section">
|
|
<div class="section-header">
|
|
<h2>RadChat</h2>
|
|
</div>
|
|
<div class="input-group">
|
|
<input
|
|
type="text"
|
|
id="username-input"
|
|
placeholder="Enter your username"
|
|
maxlength="20"
|
|
>
|
|
<button
|
|
id="join-chat-btn"
|
|
onclick="joinVoiceChat()"
|
|
disabled
|
|
>
|
|
📞 Join Voice Chat
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Microphone Permission -->
|
|
<div class="mic-section" id="mic-section">
|
|
<div class="section-header">
|
|
<h2>🎤 Microphone Access</h2>
|
|
<p>Grant microphone access to participate in voice chat</p>
|
|
</div>
|
|
<button
|
|
id="request-mic-btn"
|
|
onclick="requestMicrophonePermission()"
|
|
class="mic-button"
|
|
>
|
|
🎤 Request Microphone Access
|
|
</button>
|
|
<div id="mic-status" class="mic-status"></div>
|
|
</div>
|
|
|
|
<!-- Chat Section -->
|
|
<div class="chat-section" id="chat-section" style="display: none;">
|
|
<!-- <div class="section-header"> -->
|
|
<!-- <h2>💬 Chat</h2> -->
|
|
<!-- </div> -->
|
|
<div class="chat-messages" id="chat-messages">
|
|
</div>
|
|
<div class="chat-input-container">
|
|
<textarea
|
|
id="chat-input"
|
|
placeholder="Type a message... (Shift+Enter for new line)"
|
|
maxlength="500"
|
|
rows="1"
|
|
onkeypress="handleChatKeyPress(event)"
|
|
oninput="handleChatInput(event)"
|
|
></textarea>
|
|
<button id="send-btn" onclick="sendChatMessage()" disabled>Send</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Audio Elements Container -->
|
|
<div id="audio-container" style="display: none;"></div>
|
|
|
|
<!-- User Control Modal -->
|
|
<div id="user-control-modal" class="modal" style="display: none;">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 id="modal-username">User Controls</h3>
|
|
<button class="modal-close" onclick="closeUserModal()">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="control-section">
|
|
<label>Volume Control</label>
|
|
<div class="volume-control">
|
|
<span>🔇</span>
|
|
<input type="range" id="user-volume-slider" min="0" max="100" value="100" oninput="updateUserVolume()">
|
|
<span>🔊</span>
|
|
<span id="volume-percentage">100%</span>
|
|
</div>
|
|
</div>
|
|
<div class="control-section">
|
|
<label>Audio Controls</label>
|
|
<div class="audio-controls">
|
|
<button id="modal-mute-btn" onclick="toggleUserMuteFromModal()" class="control-btn">
|
|
🔇 Mute User
|
|
</button>
|
|
<button onclick="resetUserVolume()" class="control-btn secondary">
|
|
🔄 Reset Volume
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/app.js"></script>
|
|
</body>
|
|
</html>
|