Rewrite the web client to look sleeker
This commit is contained in:
1138
client-web/index.css
1138
client-web/index.css
File diff suppressed because it is too large
Load Diff
@@ -1,68 +1,171 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Chookchat</title>
|
<title>Chookchat</title>
|
||||||
<link rel="preconnect" href="https://rsms.me/">
|
<link rel="preconnect" href="https://rsms.me/">
|
||||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
|
<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 type="text/css" rel="stylesheet" href="index.css">
|
||||||
<link type="text/css" rel="stylesheet" href="gradient.css">
|
|
||||||
<link rel="shortcut icon" type="image/jpg" href="favicon.ico"/>
|
<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://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>
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body class="gradient">
|
<body>
|
||||||
<div id="login">
|
<div id="login-container">
|
||||||
<div class="section">
|
<div class="login-card">
|
||||||
<div class="box">
|
<div class="login-header">
|
||||||
<h3>Chookchat</h3>
|
<h2>Chookchat</h2>
|
||||||
<input type="text" id="username" placeholder="Username"><br>
|
</div>
|
||||||
<input type="password" id="password" placeholder="Password"><br>
|
<div class="login-form">
|
||||||
<button class="bluebutton" onclick="connect()">Log in</button>
|
<div class="input-group">
|
||||||
<button class="greenbutton" onclick="register()">Register</button>
|
<i class="fa-solid fa-user"></i>
|
||||||
<button class="redbutton" onclick="showConfig()">Show Server Config</button>
|
<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>
|
||||||
<div id="serverStatus"></div>
|
<div id="serverStatus"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="box" style="display: none;" id="serverconfig">
|
<div id="serverconfig" class="server-config">
|
||||||
<input type="text" id="serverUrl" value="bobcompass.online" placeholder="Server URL"><br>
|
<div class="input-group">
|
||||||
<input type="text" id="serverPort" value="443" placeholder="Server Port"><br>
|
<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>
|
<input type="checkbox" id="securityStatus" checked>
|
||||||
<label for="securityStatus">Use HTTPS/WSS</label>
|
<label for="securityStatus">Use HTTPS/WSS</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="hidden" id="messaging">
|
|
||||||
<div class="messaging-container">
|
|
||||||
<div id="meet"></div>
|
|
||||||
<div class="box">
|
|
||||||
<div id="users" class="suttle"></div>
|
|
||||||
<button id="meeting" class="bluebutton" onclick="startMeeting()">📞</button>
|
|
||||||
<div id="messagebox" class="box" style="height: 600px;">
|
|
||||||
<div></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="typing" class="suttle"></div>
|
|
||||||
<div id="upload" class="suttle" style="display: none;">
|
|
||||||
<input type="file" id="fileupload" accept="image/*,text/*">
|
|
||||||
<button class="bluebutton" onclick="uploadFile()">Upload</button>
|
|
||||||
</input>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="input-container">
|
|
||||||
<button onclick="showFileUpload()" class="bluebutton">📁</button>
|
<div id="app" class="hidden">
|
||||||
<button onclick="showEggs()" class="bluebutton">🥚</button>
|
<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>
|
||||||
|
</div>
|
||||||
|
<!-- 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 -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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">
|
||||||
<input type="text" id="messageInput" placeholder="Send a message..." autofocus>
|
<input type="text" id="messageInput" placeholder="Send a message..." autofocus>
|
||||||
<button onclick="sendMessage()" class="bluebutton">Send</button>
|
<button class="send-button" onclick="sendMessage()">
|
||||||
|
<i class="fa-solid fa-paper-plane"></i>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="eggs" style="display: none;">
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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">
|
<div id="eggs-list" class="eggs-list">
|
||||||
<button class="egg-item" onclick="eggNotepad()">📝 Notepad</button>
|
<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>
|
||||||
<!-- Eggs Start Here -->
|
<div id="egg-content" class="egg-content">
|
||||||
|
<!-- Egg content will be displayed here -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
<script src="index.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user