157 lines
7.4 KiB
HTML
157 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">
|
|
<link rel="icon" href="/favicon.ico" type="image/x-icon">
|
|
<script src="/app.js" defer></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 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="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">
|
|
<main>
|
|
<div class="join-section" id="join-section">
|
|
<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"
|
|
>
|
|
<label for="username-input"></label>
|
|
<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">
|
|
</div>
|
|
<button
|
|
id="request-mic-btn"
|
|
onclick="requestMicrophonePermission()"
|
|
class="mic-button"
|
|
>
|
|
Request Microphone Access
|
|
</button>
|
|
<div id="mic-status" class="mic-status"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Chat Section -->
|
|
<div class="chat-section" id="chat-section" style="display: none;">
|
|
<div class="chat-messages" id="chat-messages">
|
|
</div>
|
|
<div class="chat-input-container">
|
|
<textarea
|
|
id="chat-input"
|
|
placeholder="Type a message..."
|
|
rows="1"
|
|
></textarea>
|
|
<label for="chat-input"></label>
|
|
<div class="chat-input-buttons">
|
|
<button id="scroll-btn" onclick="scrollChatToBottom()" disabled>⮟</button>
|
|
<input type="file" id="file-input" multiple style="display: none;"/>
|
|
<button id="file-btn" onclick='openFilePicker()'>📤</button>
|
|
<button id="emoji-btn" onclick="toggleEmojiPicker()">😀</button>
|
|
<button id="send-btn" onclick="sendChatMessage()" disabled>Send</button>
|
|
</div>
|
|
</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">
|
|
<h1>Volume Control</h1>
|
|
<div class="volume-control">
|
|
<span>🔇</span>
|
|
<input type="range" id="user-volume-slider" min="0" max="100" value="100" oninput="updateUserVolume()">
|
|
<label for="user-volume-slider"></label>
|
|
<span>🔊</span>
|
|
<span id="volume-percentage">100%</span>
|
|
</div>
|
|
</div>
|
|
<div class="control-section">
|
|
<h1>Audio Controls</h1>
|
|
<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>
|
|
</body>
|
|
</html>
|