184 lines
6.8 KiB
HTML
184 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||
<meta name="description" content="Sexy – The hottest adult chat room on the internet. Connect, flirt, and vibe with Violet." />
|
||
<meta name="theme-color" content="#1a0030" />
|
||
<title>Sexy Chat | Deep Purple & Neon Magenta</title>
|
||
|
||
<!-- Google Fonts: Inter and Outfit -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;600;700&display=swap" rel="stylesheet" />
|
||
|
||
<!-- Socket.IO v4 client -->
|
||
<script src="/static/socket.io.min.js"></script>
|
||
<!-- Crypto Library -->
|
||
<script src="/static/crypto.js"></script>
|
||
|
||
<link rel="stylesheet" href="/static/style.css" />
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Join Screen -->
|
||
<div id="join-screen" class="join-screen">
|
||
<div class="join-card glass">
|
||
<div class="join-logo">
|
||
<span class="logo-icon">💋</span>
|
||
<h1 class="logo-text">Sexy<span class="logo-accent">Chat</span></h1>
|
||
<p class="logo-sub">Midnight Whispers & Neon Dreams</p>
|
||
</div>
|
||
|
||
<div class="auth-tabs">
|
||
<button class="auth-tab active" data-mode="guest">Guest</button>
|
||
<button class="auth-tab" data-mode="login">Login</button>
|
||
<button class="auth-tab" data-mode="register">Register</button>
|
||
</div>
|
||
|
||
<form id="join-form" class="join-form" autocomplete="off">
|
||
<div class="field-container">
|
||
<div class="field-group">
|
||
<input id="username-input" type="text" placeholder="Username" maxlength="20" required />
|
||
</div>
|
||
|
||
<div class="field-group auth-only hidden">
|
||
<input id="password-input" type="password" placeholder="Password" />
|
||
</div>
|
||
|
||
<div class="field-group register-only hidden">
|
||
<input id="email-input" type="email" placeholder="Email (optional)" />
|
||
</div>
|
||
|
||
<details class="mod-login">
|
||
<summary>🛡️ Moderator login</summary>
|
||
<div class="field-group" style="margin-top:0.75rem">
|
||
<input id="mod-password-input" type="password" placeholder="Mod password" />
|
||
</div>
|
||
</details>
|
||
</div>
|
||
|
||
<div class="crypto-note auth-only hidden">
|
||
<p>🔒 Your encryption key is derived from your password. Zero-knowledge privacy.</p>
|
||
</div>
|
||
|
||
<button id="join-btn" type="submit" class="btn-primary">
|
||
Enter the Room <span class="btn-arrow">→</span>
|
||
</button>
|
||
<p id="join-error" class="error-msg" role="alert"></p>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Chat Screen -->
|
||
<div id="chat-screen" class="chat-screen hidden">
|
||
<!-- Header -->
|
||
<header class="chat-header glass-header">
|
||
<button id="sidebar-toggle" class="icon-btn" aria-label="Toggle nicklist">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||
<line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/>
|
||
</svg>
|
||
</button>
|
||
|
||
<div class="header-title">
|
||
<span class="pulse-dot"></span>
|
||
<span id="room-name-header">💋 Sexy</span>
|
||
<span id="user-count-badge" class="user-badge">0 online</span>
|
||
</div>
|
||
|
||
<div class="header-right">
|
||
<span id="my-username-badge" class="my-badge"></span>
|
||
<button id="logout-btn" class="btn-logout">Exit</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Main layout -->
|
||
<div class="chat-layout">
|
||
<!-- Nicklist sidebar -->
|
||
<aside id="nicklist-sidebar" class="nicklist-sidebar glass">
|
||
<div class="nicklist-header">Users</div>
|
||
<ul id="nicklist" class="nicklist"></ul>
|
||
</aside>
|
||
|
||
<!-- Chat area -->
|
||
<div class="chat-main">
|
||
<!-- Tab bar -->
|
||
<div id="tab-bar" class="tab-bar">
|
||
<button class="tab-btn active" data-room="lobby" id="tab-lobby" onclick="switchTab('lobby')">
|
||
<span>💋 Lobby</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Message panels -->
|
||
<div id="panels" class="panels">
|
||
<div id="panel-lobby" class="panel active" data-room="lobby">
|
||
<div id="messages-lobby" class="messages" role="log"></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Input row -->
|
||
<form id="message-form" class="message-form glass-input">
|
||
<textarea
|
||
id="message-input"
|
||
placeholder="Say something hot…"
|
||
maxlength="500"
|
||
rows="1"
|
||
></textarea>
|
||
<button id="send-btn" type="submit" class="btn-send">
|
||
<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>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- PM Invite Modal -->
|
||
<div id="pm-modal" class="modal-overlay hidden">
|
||
<div class="modal-card glass">
|
||
<p id="pm-modal-title" class="modal-msg"></p>
|
||
<div class="modal-actions">
|
||
<button id="pm-accept-btn" class="btn-primary">Accept</button>
|
||
<button id="pm-decline-btn" class="btn-ghost">Decline</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Violet Paywall Modal -->
|
||
<div id="paywall-modal" class="modal-overlay hidden">
|
||
<div class="paywall-card glass">
|
||
<div class="paywall-header">
|
||
<div class="ai-avatar large">V</div>
|
||
<h2>Unlock Violet Forever</h2>
|
||
</div>
|
||
<p class="paywall-text">My time is valuable, darling. I only reserve it for my most dedicated guests.</p>
|
||
<div class="paywall-price">$10.00</div>
|
||
<div class="benefits">
|
||
<p>✓ Unlimited private conversations</p>
|
||
<p>✓ Sophisticated & flirtatious companionship</p>
|
||
</div>
|
||
<button id="unlock-btn" class="btn-primary glow">Unlock Violet for $10</button>
|
||
<button id="close-paywall" class="btn-text">Maybe later</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Context Menu -->
|
||
<div id="context-menu" class="context-menu glass hidden">
|
||
<div class="menu-item" data-action="pm">Private Message</div>
|
||
<div class="menu-item" data-action="ignore">Ignore User</div>
|
||
<div class="menu-item" data-action="unignore">Unignore User</div>
|
||
<!-- Mod items -->
|
||
<div class="menu-divider mod-item hidden"></div>
|
||
<div class="menu-item mod-item hidden" data-action="verify">Verify User</div>
|
||
<div class="menu-item mod-item hidden" data-action="kick">Kick</div>
|
||
|
||
<div class="menu-item mod-item red hidden" data-action="ban">Ban</div>
|
||
<div class="menu-item mod-item red bold hidden" data-action="kickban">Kickban</div>
|
||
</div>
|
||
|
||
<script src="/static/chat.js"></script>
|
||
</body>
|
||
</html>
|