File size: 6,020 Bytes
91db40f b3a9c0e 91db40f b3a9c0e 91db40f b3a9c0e 91db40f b3a9c0e 91db40f b3a9c0e 91db40f b3a9c0e 91db40f b3a9c0e 91db40f b3a9c0e 91db40f b3a9c0e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tri-Chat - Premium Chat Experience</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link href="/static/main.css" rel="stylesheet">
</head>
<body>
<main class="app-shell" id="appShell">
<section class="connect-screen" id="connectScreen" aria-labelledby="connectTitle">
<div class="brand-bar">
<div class="brand-mark" aria-hidden="true">
<i class="fas fa-comments"></i>
</div>
<div>
<h1>Tri-Chat</h1>
<p>Talk together. Stay connected.</p>
</div>
</div>
<div class="welcome-art" aria-hidden="true">
<div class="bubble bubble-primary">
<span></span>
<span></span>
<span></span>
</div>
<div class="bubble bubble-secondary">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="welcome-copy">
<h2 id="connectTitle">Welcome to Tri-Chat!</h2>
<p>Connect to a room and start chatting with others instantly.</p>
</div>
<form class="connection-form" id="connectionForm">
<div class="input-group">
<label for="usernameInput">Your Name</label>
<div class="field-shell">
<i class="fas fa-user"></i>
<input type="text" id="usernameInput" placeholder="Enter your name" maxlength="20" autocomplete="name">
<i class="fas fa-check field-check" aria-hidden="true"></i>
</div>
</div>
<div class="input-group">
<label for="roomInput">Room</label>
<div class="field-shell">
<i class="fas fa-hashtag"></i>
<input type="text" id="roomInput" placeholder="global" maxlength="30" autocomplete="off">
<i class="fas fa-check field-check" aria-hidden="true"></i>
</div>
</div>
<button class="btn btn-primary" id="connectBtn" type="submit">
<i class="fas fa-plug"></i>
<span>Connect</span>
</button>
</form>
<div class="status neutral" id="status" aria-live="polite">
<i class="fas fa-info-circle"></i>
Enter your name and click Connect to start chatting
</div>
<div class="connect-tip">
<i class="fas fa-lightbulb"></i>
<span>Tip: Share the room name with your friends so they can join too.</span>
</div>
</section>
<section class="chat-screen is-hidden" id="chatScreen" aria-label="Chat room">
<header class="chat-header">
<button class="icon-btn mobile-back-btn" id="mobileBackBtn" type="button" aria-label="Disconnect and return to connect screen">
<i class="fas fa-arrow-left"></i>
</button>
<div class="room-meta">
<h2 id="roomTitle">global</h2>
<p>
<span class="online-dot"></span>
<span id="onlineCount">0 members online</span>
</p>
</div>
<div class="chat-actions">
<button class="icon-btn users-toggle" id="usersToggle" type="button" aria-label="Show online users" aria-controls="usersPanel" aria-expanded="false">
<i class="fas fa-users"></i>
</button>
<button class="icon-btn desktop-disconnect-btn" id="disconnectBtn" type="button" aria-label="Disconnect">
<i class="fas fa-sign-out-alt"></i>
</button>
</div>
</header>
<div class="chat-body">
<aside class="users-panel" id="usersPanel">
<div class="users-panel-header">
<h3>Online</h3>
<button class="icon-btn users-close" id="usersClose" type="button" aria-label="Close online users">
<i class="fas fa-times"></i>
</button>
</div>
<ul class="user-list" id="userList"></ul>
<p class="empty-users" id="emptyUsers">No one else is here yet.</p>
</aside>
<div class="messages-wrap">
<div class="messages" id="messages"></div>
<form class="input-area" id="messageForm">
<div class="file-input-wrapper">
<input type="file" id="fileInput" accept="*/*" aria-label="Attach file">
<label for="fileInput" class="file-input-label" aria-hidden="true">
<i class="fas fa-paperclip"></i>
</label>
</div>
<textarea id="messageInput" placeholder="Type a message..." maxlength="500" rows="1"></textarea>
<button class="send-btn" id="sendBtn" type="submit" aria-label="Send message">
<i class="fas fa-paper-plane"></i>
</button>
</form>
</div>
</div>
</section>
</main>
<div class="mobile-drawer-backdrop" id="drawerBackdrop"></div>
<script src="/static/main.js"></script>
</body>
</html>
|