75 lines
4.6 KiB
HTML
75 lines
4.6 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<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">
|
||
|
|
<meta http-equiv="Cache-Control" content="max-age=86400, must-revalidate">
|
||
|
|
<meta http-equiv="Pragma" content="cache">
|
||
|
|
<meta http-equiv="Expires" content="86400">
|
||
|
|
<title>RadChat</title>
|
||
|
|
<script src="root.js"></script>
|
||
|
|
<link rel="stylesheet" href="root.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<div class="radchat">
|
||
|
|
RadChat
|
||
|
|
</div>
|
||
|
|
<div class="header-controls">
|
||
|
|
<button class="users-button" onclick="toggleUsers()">
|
||
|
|
<svg class="users-icon" viewBox="0 0 24 24">
|
||
|
|
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
<button class="settings-button" onclick="toggleSettings()">
|
||
|
|
<svg class="settings-icon" viewBox="0 0 24 24">
|
||
|
|
<path d="M12 15.5A3.5 3.5 0 0 1 8.5 12 3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5m7.43-2.53c.04-.32.07-.65.07-.97 0-.32-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65z"/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
<button class="theme-button" onclick="toggleTheme()">
|
||
|
|
<svg class="theme-icon" viewBox="0 0 24 24">
|
||
|
|
<!-- Moon icon for dark mode -->
|
||
|
|
<path class="moon" d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-3.03 0-5.5-2.47-5.5-5.5 0-1.82.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z"/>
|
||
|
|
<!-- Sun icon for light mode -->
|
||
|
|
<path class="sun" d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div id="current-user" class="current-user"></div>
|
||
|
|
|
||
|
|
<div class="users-section" id="users-panel">
|
||
|
|
<h3>Online Users</h3>
|
||
|
|
<div id="users-list">
|
||
|
|
<!-- Users will be loaded here -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="username-section" id="settings-panel">
|
||
|
|
<h3>Username</h3>
|
||
|
|
<div style="display: flex; gap: 10px;">
|
||
|
|
<input type="text" id="username" placeholder="Enter username">
|
||
|
|
<button onclick="setUsername()">Set</button>
|
||
|
|
</div>
|
||
|
|
<div id="username-status"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="messages-section" id="messages">
|
||
|
|
<!-- Messages will be loaded here -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="message-section">
|
||
|
|
<div class="message-container">
|
||
|
|
<textarea id="message" placeholder="Type a message" rows="1"></textarea>
|
||
|
|
<button onclick="sendMessage()">Send</button>
|
||
|
|
<button id="scroll" class="scroll"><svg class="scroll-icon" id="scroll-icon" viewBox="0 0 24 24">
|
||
|
|
<path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
|
||
|
|
</svg></button>
|
||
|
|
</div>
|
||
|
|
<div id="status"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|