forked from ComputerTech/aprhodite
410 lines
18 KiB
HTML
410 lines
18 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="violet-trial-badge" class="violet-badge hidden"></span>
|
||
<span id="my-username-badge" class="my-badge"></span>
|
||
<button id="admin-btn" class="icon-btn hidden" aria-label="Admin Panel" title="Admin Panel">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||
</svg>
|
||
</button>
|
||
<button id="settings-btn" class="icon-btn" aria-label="Settings">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
|
||
</svg>
|
||
</button>
|
||
<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>
|
||
|
||
<!-- Settings Modal -->
|
||
<div id="settings-modal" class="modal-overlay hidden">
|
||
<div class="settings-card glass">
|
||
<div class="settings-header">
|
||
<h2>Settings</h2>
|
||
<button id="close-settings" class="settings-close">×</button>
|
||
</div>
|
||
|
||
<div class="settings-tabs">
|
||
<button class="settings-tab active" data-stab="account">Account</button>
|
||
<button class="settings-tab" data-stab="chat">Chat</button>
|
||
<button class="settings-tab" data-stab="violet">Violet</button>
|
||
<button class="settings-tab" data-stab="premium">Premium</button>
|
||
</div>
|
||
|
||
<div class="settings-body">
|
||
<!-- Account Tab -->
|
||
<div class="settings-pane active" id="stab-account">
|
||
<div class="settings-group">
|
||
<label>Username</label>
|
||
<div id="settings-username" class="settings-value">—</div>
|
||
</div>
|
||
<div class="settings-group">
|
||
<label>Email</label>
|
||
<div id="settings-email" class="settings-value">—</div>
|
||
</div>
|
||
<div class="settings-group registered-only hidden">
|
||
<label>Change Password</label>
|
||
<input id="settings-old-pw" type="password" placeholder="Current password" class="settings-input" />
|
||
<input id="settings-new-pw" type="password" placeholder="New password" class="settings-input" />
|
||
<input id="settings-confirm-pw" type="password" placeholder="Confirm new password" class="settings-input" />
|
||
<button id="settings-change-pw" class="btn-primary btn-sm">Update Password</button>
|
||
</div>
|
||
<div id="settings-pw-msg" class="settings-msg hidden"></div>
|
||
</div>
|
||
|
||
<!-- Chat Tab -->
|
||
<div class="settings-pane" id="stab-chat">
|
||
<div class="settings-group">
|
||
<label>Theme</label>
|
||
<div class="theme-grid" id="theme-grid">
|
||
<button class="theme-swatch active" data-theme="midnight-purple" title="Midnight Purple">
|
||
<span class="swatch-fill" style="background:linear-gradient(135deg,#8a2be2,#ff00ff)"></span>
|
||
<span class="swatch-label">Midnight</span>
|
||
</button>
|
||
<button class="theme-swatch" data-theme="crimson-noir" title="Crimson Noir">
|
||
<span class="swatch-fill" style="background:linear-gradient(135deg,#b71c1c,#ff1744)"></span>
|
||
<span class="swatch-label">Crimson</span>
|
||
</button>
|
||
<button class="theme-swatch" data-theme="ocean-deep" title="Ocean Deep">
|
||
<span class="swatch-fill" style="background:linear-gradient(135deg,#0277bd,#00bcd4)"></span>
|
||
<span class="swatch-label">Ocean</span>
|
||
</button>
|
||
<button class="theme-swatch" data-theme="ember" title="Ember">
|
||
<span class="swatch-fill" style="background:linear-gradient(135deg,#e65100,#ff9800)"></span>
|
||
<span class="swatch-label">Ember</span>
|
||
</button>
|
||
<button class="theme-swatch" data-theme="neon-green" title="Neon Green">
|
||
<span class="swatch-fill" style="background:linear-gradient(135deg,#00c853,#00ff41)"></span>
|
||
<span class="swatch-label">Neon</span>
|
||
</button>
|
||
<button class="theme-swatch" data-theme="cyberpunk" title="Cyberpunk">
|
||
<span class="swatch-fill" style="background:linear-gradient(135deg,#e040fb,#f5ee28)"></span>
|
||
<span class="swatch-label">Cyber</span>
|
||
</button>
|
||
<button class="theme-swatch" data-theme="rose-gold" title="Rose Gold">
|
||
<span class="swatch-fill" style="background:linear-gradient(135deg,#c2185b,#f48fb1)"></span>
|
||
<span class="swatch-label">Rosé</span>
|
||
</button>
|
||
<button class="theme-swatch" data-theme="arctic" title="Arctic">
|
||
<span class="swatch-fill" style="background:linear-gradient(135deg,#3949ab,#f5f7fa)"></span>
|
||
<span class="swatch-label">Arctic</span>
|
||
</button>
|
||
<button class="theme-swatch" data-theme="daylight" title="Daylight">
|
||
<span class="swatch-fill" style="background:linear-gradient(135deg,#9c27b0,#fafafa)"></span>
|
||
<span class="swatch-label">Light</span>
|
||
</button>
|
||
<button class="theme-swatch" data-theme="midnight-blue" title="Midnight Blue">
|
||
<span class="swatch-fill" style="background:linear-gradient(135deg,#1a237e,#448aff)"></span>
|
||
<span class="swatch-label">Navy</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="settings-group">
|
||
<label>Font Size</label>
|
||
<div class="settings-row">
|
||
<input id="settings-fontsize" type="range" min="12" max="20" value="14" class="settings-range" />
|
||
<span id="settings-fontsize-val">14px</span>
|
||
</div>
|
||
</div>
|
||
<div class="settings-group">
|
||
<label>Timestamp Format</label>
|
||
<div class="settings-row">
|
||
<button class="settings-toggle-btn active" data-tf="12h">12h</button>
|
||
<button class="settings-toggle-btn" data-tf="24h">24h</button>
|
||
</div>
|
||
</div>
|
||
<div class="settings-group">
|
||
<label>Enter to Send</label>
|
||
<div class="settings-row">
|
||
<button id="settings-enter-send" class="settings-toggle active">On</button>
|
||
</div>
|
||
</div>
|
||
<div class="settings-group">
|
||
<label>Notification Sounds</label>
|
||
<div class="settings-row">
|
||
<button id="settings-sounds" class="settings-toggle active">On</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Violet Tab -->
|
||
<div class="settings-pane" id="stab-violet">
|
||
<div class="settings-group">
|
||
<label>AI Access</label>
|
||
<div id="settings-ai-status" class="settings-value">—</div>
|
||
</div>
|
||
<div class="settings-group">
|
||
<label>Messages Used</label>
|
||
<div id="settings-ai-used" class="settings-value">—</div>
|
||
</div>
|
||
<div class="settings-group">
|
||
<label>Conversation Memory</label>
|
||
<p class="settings-hint">Violet remembers your last 20 messages. Reset to start fresh.</p>
|
||
<button id="settings-violet-reset" class="btn-primary btn-sm btn-danger">Reset Violet Memory</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Premium Tab -->
|
||
<div class="settings-pane" id="stab-premium">
|
||
<div class="premium-hero">
|
||
<div class="premium-icon">👑</div>
|
||
<h3>SexyChat Premium</h3>
|
||
<p class="premium-tagline">Unlock the full experience</p>
|
||
</div>
|
||
<div class="premium-features">
|
||
<div class="premium-feature">
|
||
<span class="pf-icon">💜</span>
|
||
<div>
|
||
<strong>Unlimited Violet</strong>
|
||
<p>No message limits — talk to Violet as much as you want</p>
|
||
</div>
|
||
</div>
|
||
<div class="premium-feature">
|
||
<span class="pf-icon">🔒</span>
|
||
<div>
|
||
<strong>Encrypted PMs</strong>
|
||
<p>End-to-end encrypted private messages with anyone</p>
|
||
</div>
|
||
</div>
|
||
<div class="premium-feature">
|
||
<span class="pf-icon">⚡</span>
|
||
<div>
|
||
<strong>Priority Access</strong>
|
||
<p>Skip the queue — your messages to Violet go first</p>
|
||
</div>
|
||
</div>
|
||
<div class="premium-feature">
|
||
<span class="pf-icon">🎨</span>
|
||
<div>
|
||
<strong>Custom Themes</strong>
|
||
<p>Exclusive color schemes and chat customization</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="premium-cta">
|
||
<div class="premium-price">$10<span>/month</span></div>
|
||
<button id="settings-upgrade" class="btn-primary glow btn-lg">Upgrade to Premium</button>
|
||
<p class="premium-note">Coming soon — be the first to know!</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Admin Panel Modal -->
|
||
<div id="admin-modal" class="modal-overlay hidden">
|
||
<div class="admin-card glass">
|
||
<div class="admin-header">
|
||
<h2>👑 Admin Panel</h2>
|
||
<button id="close-admin" class="settings-close">×</button>
|
||
</div>
|
||
|
||
<div class="admin-tabs">
|
||
<button class="admin-tab active" data-atab="users">Users</button>
|
||
<button class="admin-tab" data-atab="bans">Bans</button>
|
||
<button class="admin-tab" data-atab="mutes">Mutes</button>
|
||
</div>
|
||
|
||
<div class="admin-body">
|
||
<!-- Users pane -->
|
||
<div class="admin-pane active" id="atab-users">
|
||
<div id="admin-user-search-wrap" class="admin-search-wrap">
|
||
<input id="admin-user-search" type="text" class="settings-input" placeholder="Search users..." />
|
||
</div>
|
||
<div id="admin-user-list" class="admin-list"></div>
|
||
</div>
|
||
|
||
<!-- Bans pane -->
|
||
<div class="admin-pane" id="atab-bans">
|
||
<div id="admin-ban-list" class="admin-list"></div>
|
||
<p id="admin-no-bans" class="admin-empty">No active bans.</p>
|
||
</div>
|
||
|
||
<!-- Mutes pane -->
|
||
<div class="admin-pane" id="atab-mutes">
|
||
<div id="admin-mute-list" class="admin-list"></div>
|
||
<p id="admin-no-mutes" class="admin-empty">No active mutes.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="admin-toast" class="admin-toast hidden"></div>
|
||
</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 hidden" data-action="mute">Mute / Unmute</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>
|