54 lines
2.7 KiB
HTML
54 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Chat Dock</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div id="chat-dock">
|
|
<div id="chat-header">
|
|
<div class="platform-tabs">
|
|
<button id="tab-all" class="tab active" data-platform="all">All</button>
|
|
<button id="tab-twitch" class="tab" data-platform="twitch">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z"/></svg>
|
|
Twitch
|
|
</button>
|
|
<button id="tab-youtube" class="tab" data-platform="youtube">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
|
|
YouTube
|
|
</button>
|
|
</div>
|
|
<div id="connection-status">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">Connecting...</span>
|
|
</div>
|
|
</div>
|
|
<div id="chat-messages"></div>
|
|
<div id="chat-input-area">
|
|
<div id="input-header">
|
|
<div id="send-platform-indicator">
|
|
<span id="send-platform-icon"></span>
|
|
<span id="send-platform-name">Twitch</span>
|
|
</div>
|
|
<div id="auth-status">
|
|
<span id="auth-status-text">Checking...</span>
|
|
<button id="reconnect-btn" title="Reconnect chat (reload tokens)">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M17.65 6.35A7.958 7.958 0 0012 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0112 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="input-row">
|
|
<input type="text" id="message-input" placeholder="Send a message..." maxlength="500" autocomplete="off">
|
|
<button id="send-button" title="Send message">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
|
|
</button>
|
|
</div>
|
|
<div id="char-counter"><span id="char-count">0</span>/500</div>
|
|
</div>
|
|
</div>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|
|
|