2024-11-05 20:35:10 +11:00
|
|
|
<!DOCTYPE html>
|
2025-06-06 10:03:27 +10:00
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Chookchat</title>
|
|
|
|
|
<link rel="preconnect" href="https://rsms.me/">
|
|
|
|
|
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
|
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
|
<link type="text/css" rel="stylesheet" href="index.css">
|
|
|
|
|
<link rel="shortcut icon" type="image/jpg" href="favicon.ico"/>
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
|
|
|
|
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="login-container">
|
|
|
|
|
<div class="login-card">
|
|
|
|
|
<div class="login-header">
|
|
|
|
|
<h2>Chookchat</h2>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="login-form">
|
|
|
|
|
<div class="input-group">
|
|
|
|
|
<i class="fa-solid fa-user"></i>
|
|
|
|
|
<input type="text" id="username" placeholder="Username">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="input-group">
|
|
|
|
|
<i class="fa-solid fa-lock"></i>
|
|
|
|
|
<input type="password" id="password" placeholder="Password">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="login-buttons">
|
|
|
|
|
<button class="btn btn-primary" onclick="connect()">Log in</button>
|
|
|
|
|
<button class="btn btn-success" onclick="register()">Register</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="server-options">
|
|
|
|
|
<button class="btn btn-text" onclick="showConfig()">Server Settings</button>
|
2024-11-05 20:35:10 +11:00
|
|
|
<div id="serverStatus"></div>
|
|
|
|
|
</div>
|
2025-06-06 10:03:27 +10:00
|
|
|
<div id="serverconfig" class="server-config">
|
|
|
|
|
<div class="input-group">
|
|
|
|
|
<i class="fa-solid fa-server"></i>
|
|
|
|
|
<input type="text" id="serverUrl" value="localhost" placeholder="Server URL">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="input-group">
|
|
|
|
|
<i class="fa-solid fa-network-wired"></i>
|
|
|
|
|
<input type="text" id="serverPort" value="7070" placeholder="Server Port">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="checkbox-group">
|
|
|
|
|
<input type="checkbox" id="securityStatus" checked>
|
|
|
|
|
<label for="securityStatus">Use HTTPS/WSS</label>
|
|
|
|
|
</div>
|
2024-11-05 20:35:10 +11:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-06-06 10:03:27 +10:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="app" class="hidden">
|
|
|
|
|
<div class="sidebar">
|
|
|
|
|
<div class="sidebar-header">
|
|
|
|
|
<h3>Chookchat</h3>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="room-list" class="room-list">
|
|
|
|
|
<div class="room-category">
|
|
|
|
|
<div class="room-category-header">
|
|
|
|
|
<span>Rooms</span>
|
|
|
|
|
<button class="btn-icon" onclick="promptCreateRoom()">
|
|
|
|
|
<i class="fa-solid fa-plus"></i>
|
|
|
|
|
</button>
|
2024-11-23 18:10:56 +11:00
|
|
|
</div>
|
2025-06-06 10:03:27 +10:00
|
|
|
<!-- Rooms will be dynamically added here -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="user-profile">
|
|
|
|
|
<div class="user-avatar">
|
|
|
|
|
<i class="fa-solid fa-user"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="user-info">
|
|
|
|
|
<span id="current-username">Username</span>
|
|
|
|
|
<span class="user-status">Online</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="chat-container">
|
|
|
|
|
<div class="chat-header">
|
|
|
|
|
<div class="current-room">
|
|
|
|
|
<i class="fa-solid fa-hashtag"></i>
|
|
|
|
|
<span id="current-room-name">general</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="header-actions">
|
|
|
|
|
<button class="btn-icon" onclick="startMeeting()" title="Start Call">
|
|
|
|
|
<i class="fa-solid fa-phone"></i>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="chat-content">
|
|
|
|
|
<div id="messagebox" class="messages">
|
|
|
|
|
<!-- Messages will be dynamically added here -->
|
2024-11-05 20:35:10 +11:00
|
|
|
</div>
|
2025-06-06 10:03:27 +10:00
|
|
|
|
|
|
|
|
<div id="typing" class="typing-indicator"></div>
|
|
|
|
|
|
|
|
|
|
<div class="message-input-container">
|
|
|
|
|
<div class="message-actions">
|
|
|
|
|
<button class="btn-icon" onclick="showFileUpload()" title="Upload File">
|
|
|
|
|
<i class="fa-solid fa-paperclip"></i>
|
|
|
|
|
</button>
|
|
|
|
|
<button class="btn-icon" onclick="showEggs()" title="Eggs">
|
|
|
|
|
<i class="fa-solid fa-egg"></i>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="message-input-wrapper">
|
2025-06-06 17:32:48 +10:00
|
|
|
<textarea style="font-family: sans-serif" id="messageInput" placeholder="Send a message..." autofocus></textarea>
|
2025-06-06 10:03:27 +10:00
|
|
|
<button class="send-button" onclick="sendMessage()">
|
|
|
|
|
<i class="fa-solid fa-paper-plane"></i>
|
|
|
|
|
</button>
|
2024-12-06 13:27:22 +11:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-11-05 20:35:10 +11:00
|
|
|
</div>
|
2025-03-14 08:44:06 +11:00
|
|
|
|
2025-06-06 10:03:27 +10:00
|
|
|
<div class="users-panel">
|
|
|
|
|
<div class="users-panel-header">
|
|
|
|
|
<h3>Members</h3>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="users" class="users-list">
|
|
|
|
|
<!-- Users will be dynamically added here -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="eggs-panel" class="eggs-panel hidden">
|
|
|
|
|
<div class="eggs-header">
|
|
|
|
|
<h3>Eggs</h3>
|
|
|
|
|
<button class="btn-icon" onclick="closeEggs()">
|
|
|
|
|
<i class="fa-solid fa-times"></i>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="eggs-list" class="eggs-list">
|
|
|
|
|
<button class="egg-item" onclick="eggNotepad()">
|
|
|
|
|
<i class="fa-solid fa-note-sticky"></i>
|
|
|
|
|
<span>Notepad</span>
|
|
|
|
|
</button>
|
|
|
|
|
<!-- More eggs can be added here -->
|
|
|
|
|
</div>
|
|
|
|
|
<div id="egg-content" class="egg-content">
|
|
|
|
|
<!-- Egg content will be displayed here -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="meet" class="meet-container hidden"></div>
|
|
|
|
|
|
|
|
|
|
<div id="upload-modal" class="modal hidden">
|
|
|
|
|
<div class="modal-content">
|
|
|
|
|
<div class="modal-header">
|
|
|
|
|
<h3>Upload File</h3>
|
|
|
|
|
<button class="btn-icon" onclick="hideFileUpload()">
|
|
|
|
|
<i class="fa-solid fa-times"></i>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-body">
|
|
|
|
|
<input type="file" id="fileupload" accept="image/*,text/*">
|
|
|
|
|
<div class="upload-preview" id="upload-preview"></div>
|
|
|
|
|
<button class="btn btn-primary" onclick="uploadFile()">Upload</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script src="index.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
