Ty Clifford
eb57cde99f
Per-tier audio bitrate: Free 64, Plus 96, Pro 128 kbps. Configurable text/voice reply threads and depth. Registration/login-only honeypot and internal CAPTCHA. Optional Google reCAPTCHA v2/v3 with server verification. Archive/export support for replies and bitrate. Dashboard controls for all settings. Verified JavaScript, JSON, SQLite migrations, desktop/mobile UI, and browser console. Native PHP lint was unavailable because PHP is not installed. Google implementation follows Siteverify and reCAPTCHA v3.
115 lines
3.7 KiB
HTML
115 lines
3.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>CyberChat — Embed Example</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="assets/css/cyberchat.css?v=20260609.4">
|
|
<style>
|
|
html, body {
|
|
height: auto;
|
|
min-height: 100vh;
|
|
overflow: auto;
|
|
background: var(--bg0);
|
|
padding: 32px 20px 48px;
|
|
font-family: var(--mono);
|
|
}
|
|
|
|
.demo-page { max-width: 860px; margin: 0 auto; }
|
|
|
|
.demo-header {
|
|
text-align: center;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.demo-header h1 {
|
|
font-family: var(--disp);
|
|
font-size: clamp(18px, 4vw, 32px);
|
|
background: linear-gradient(90deg, var(--g), var(--b), var(--p));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
letter-spacing: 5px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.demo-header p {
|
|
font-size: 10px;
|
|
color: var(--t1);
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.demo-label {
|
|
font-size: 10px;
|
|
color: var(--g);
|
|
letter-spacing: 2px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
/* ── THE EMBED CONTAINER — set any size you want ── */
|
|
#chat-here {
|
|
width: 100%;
|
|
height: 580px;
|
|
}
|
|
|
|
.demo-code {
|
|
background: var(--bg1);
|
|
border: 1px solid var(--bd);
|
|
border-radius: 6px;
|
|
padding: 18px 20px;
|
|
margin-top: 24px;
|
|
font-size: 12px;
|
|
color: var(--t1);
|
|
line-height: 1.9;
|
|
overflow-x: auto;
|
|
white-space: pre;
|
|
}
|
|
|
|
.demo-code .kw { color: var(--p); }
|
|
.demo-code .str { color: var(--g); }
|
|
.demo-code .cm { color: var(--t2); font-style: italic; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="demo-page">
|
|
<div class="demo-header">
|
|
<h1>CYBERCHAT</h1>
|
|
<p>// EMBED EXAMPLE — DROP INTO ANY PAGE</p>
|
|
</div>
|
|
|
|
<div class="demo-label">▸ LIVE EMBED (580px height, full width)</div>
|
|
|
|
<!-- ── This is all you need in your page ── -->
|
|
<div id="chat-here"></div>
|
|
|
|
<div class="demo-code"><span class="cm"><!-- 1. Google Fonts (optional but recommended) --></span>
|
|
<span class="kw"><link</span> href=<span class="str">"https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Rajdhani:wght@400;600;700&family=Orbitron:wght@700;900&display=swap"</span> rel=<span class="str">"stylesheet"</span><span class="kw">></span>
|
|
|
|
<span class="cm"><!-- 2. CyberChat stylesheet --></span>
|
|
<span class="kw"><link</span> rel=<span class="str">"stylesheet"</span> href=<span class="str">"assets/css/cyberchat.css?v=20260609.4"</span><span class="kw">></span>
|
|
|
|
<span class="cm"><!-- 3. Container with any dimensions --></span>
|
|
<span class="kw"><div</span> id=<span class="str">"my-chat"</span> style=<span class="str">"width:100%; height:600px"</span><span class="kw">></div></span>
|
|
|
|
<span class="cm"><!-- 4. Script + init --></span>
|
|
<span class="kw"><script</span> src=<span class="str">"assets/js/cyberchat-app.js?v=20260609.7"</span><span class="kw">></script></span>
|
|
<span class="kw"><script></span>
|
|
window.CYBERCHAT_BASE = <span class="str">'/path/to/cyberchat'</span>; <span class="cm">// adjust to your install path</span>
|
|
CyberChat.init(<span class="str">'#my-chat'</span>);
|
|
<span class="kw"></script></span></div>
|
|
</div>
|
|
|
|
<script>
|
|
window.CYBERCHAT_BASE = '';
|
|
</script>
|
|
<script src="assets/js/cyberchat-app.js?v=20260609.7"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
CyberChat.init('#chat-here');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|