79 lines
2.8 KiB
HTML
79 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>IRC VideoChat - Terminal</title>
|
|
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
|
|
|
|
</head>
|
|
<body>
|
|
<!-- Username Modal -->
|
|
<div id="usernameModal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>IRC Video Chat Server</h2>
|
|
<p>* Connecting to #videochat...</p>
|
|
<p>* Enter your nickname to join</p>
|
|
</div>
|
|
<form id="usernameForm">
|
|
<div class="input-group">
|
|
<input type="text" id="usernameInput" placeholder="your_nickname" maxlength="20" required>
|
|
</div>
|
|
<button type="submit" id="joinButton">
|
|
Join Channel
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Chat Interface -->
|
|
<div id="chatInterface" class="hidden">
|
|
<header class="chat-header">
|
|
<div class="header-left">
|
|
<h1>#videochat</h1>
|
|
<span id="participantCount">1 user</span>
|
|
</div>
|
|
<div class="header-right">
|
|
<button id="themeToggle" class="header-btn" title="Toggle theme">
|
|
🌙
|
|
</button>
|
|
<button id="toggleSelfViewButton" class="header-btn" title="Toggle self view">
|
|
View
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="chat-main">
|
|
<div id="remoteVideos" class="video-grid" aria-label="Remote Videos"></div>
|
|
|
|
<!-- Self View (Initially hidden) -->
|
|
<div id="selfViewContainer" class="self-view hidden">
|
|
<video id="selfVideo" autoplay muted></video>
|
|
<div class="self-view-label">
|
|
<span id="selfViewUsername">[SELF]</span>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="chat-controls">
|
|
<button id="muteButton" class="control-btn mute-btn">
|
|
<span>mic</span>
|
|
</button>
|
|
<button id="videoButton" class="control-btn video-btn">
|
|
<span>cam</span>
|
|
</button>
|
|
<button id="hangupButton" class="control-btn hangup-btn">
|
|
<span>disconnect</span>
|
|
</button>
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- Hidden local video for WebRTC -->
|
|
<video id="localVideo" autoplay muted style="display: none;"></video>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.js"></script>
|
|
<script src="{{ url_for('static', filename='main.js') }}"></script>
|
|
</body>
|
|
</html> |