|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Libera Chat - Telegram Clone</title>
|
|
<link rel="stylesheet" href="css/styles.css" />
|
|
</head>
|
|
<body>
|
|
|
|
<div id="connectionStatus" class="connection-status hidden"></div>
|
|
|
|
<div class="app">
|
|
<aside class="chat-list">
|
|
<div class="chat-list-header">
|
|
<h2>Libera Chat</h2>
|
|
<input type="text" placeholder="Search channels" id="chatSearch" />
|
|
</div>
|
|
<ul class="chat-items">
|
|
|
|
</ul>
|
|
<div class="channel-info hidden" id="channelInfo">
|
|
<div class="channel-info-header">
|
|
<button class="back-btn" id="backBtn">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M5 12h14"></path>
|
|
<path d="M12 5l7 7-7 7"></path>
|
|
</svg>
|
|
</button>
|
|
<h3 id="channelName">Channel Name</h3>
|
|
</div>
|
|
<div class="channel-info-content">
|
|
<div class="channel-topic" id="channelTopic">Topic: <span id="topicText">No topic set</span></div>
|
|
<input type="text" placeholder="Search members" id="userSearch" class="user-search-input" />
|
|
<div class="user-list" id="channelUserList">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<main class="chat-window">
|
|
<header class="chat-header">
|
|
<div class="chat-header-info">
|
|
<div class="avatar"></div>
|
|
<h2 id="channelHeader">Welcome to Libera Chat</h2>
|
|
</div>
|
|
<div class="header-actions">
|
|
<button class="connect-btn" id="connectBtn" title="Connect">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M5 12h14"></path>
|
|
<path d="M12 5l7 7-7 7"></path>
|
|
</svg>
|
|
</button>
|
|
<button class="settings-btn" id="settingsBtn" title="Settings">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="3"></circle>
|
|
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<div class="messages" id="messages">
|
|
|
|
</div>
|
|
<form class="message-input" id="messageForm">
|
|
<input type="text" id="messageText" placeholder="Message" disabled />
|
|
<button type="submit" title="Send" disabled>
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="22" y1="2" x2="11" y2="13"></line>
|
|
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
|
|
<div class="user-list"></div>
|
|
</main>
|
|
</div>
|
|
|
|
|
|
<div class="dialog" id="connectionDialog">
|
|
<div class="dialog-content">
|
|
<h3>Connect to Libera Chat</h3>
|
|
<form id="connectionForm">
|
|
<div class="form-group">
|
|
<label for="nickname">Nickname</label>
|
|
<input type="text" id="nickname" required />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="channel">Channel</label>
|
|
<input type="text" id="channel" value="#libera" required />
|
|
</div>
|
|
<div class="buttons">
|
|
<button type="submit">Connect</button>
|
|
<button type="button" class="cancel">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="pm-dialog hidden" id="pmDialog">
|
|
<div class="pm-header">
|
|
<span id="pmUserName">Private Chat</span>
|
|
<button id="pmCloseBtn" title="Close">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="pm-messages" id="pmMessages"></div>
|
|
<div class="pm-input">
|
|
<input type="text" id="pmInput" placeholder="Message" />
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="settings-panel" id="settingsPanel">
|
|
<div class="settings-header">
|
|
<h3>Settings</h3>
|
|
<button id="closeSettingsBtn" title="Close">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="settings-content">
|
|
<div class="settings-group">
|
|
<h3>Server Info</h3>
|
|
<p id="serverInfoText">Loading...</p>
|
|
</div>
|
|
<div class="settings-group">
|
|
<h3>Appearance</h3>
|
|
<p>Theme: Telegram Clone</p>
|
|
</div>
|
|
<div class="settings-group">
|
|
<h3>Advanced</h3>
|
|
<p>Reconnection Status: <span id="reconnectStatus">Good</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/irc.js"></script>
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html> |
