computertech/chatty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upload files to "/"

Browse Source
This commit is contained in:
Colby Lipsett
2025-10-02 18:20:22 +00:00
parent f900ac671c
commit b59e1dab99
1 changed files with 79 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
index.html Normal file
View File

@@ -0,0 +1,79 @@
<!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>