Ty Clifford
36c488ca1e
Rebuilt embed-example.html with inline, full-screen, and popup examples. Fixed host-page/frame scrolling and contained reply navigation. New logins now transactionally replace prior sessions; displaced clients return to login. Added per-user session/IP locking with automatic SQLite migration. Added modular Spam Control dashboard for locks, honeypot, and CAPTCHA settings. Moved CAPTCHA controls out of Plans & Platform.
268 lines
8.4 KiB
HTML
268 lines
8.4 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 Examples</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Rajdhani:wght@400;600;700&family=Orbitron:wght@700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="assets/css/cyberchat.css?v=20260609.5">
|
|
<style>
|
|
html, body {
|
|
min-height: 100%;
|
|
background: var(--bg0);
|
|
}
|
|
|
|
body {
|
|
padding: 32px 20px 56px;
|
|
color: var(--t0);
|
|
font-family: var(--mono);
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.demo-page {
|
|
width: min(100%, 960px);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.demo-header {
|
|
margin-bottom: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.demo-header h1 {
|
|
margin-bottom: 6px;
|
|
background: linear-gradient(90deg, var(--g), var(--b), var(--p));
|
|
background-clip: text;
|
|
color: transparent;
|
|
font: 700 clamp(18px, 4vw, 32px) var(--disp);
|
|
letter-spacing: 5px;
|
|
}
|
|
|
|
.demo-header p,
|
|
.demo-note {
|
|
color: var(--t1);
|
|
font-size: 10px;
|
|
letter-spacing: 1px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.demo-section {
|
|
margin-top: 26px;
|
|
}
|
|
|
|
.demo-label {
|
|
margin-bottom: 8px;
|
|
color: var(--g);
|
|
font-size: 10px;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.demo-frame {
|
|
width: 100%;
|
|
height: min(680px, 78vh);
|
|
min-height: 420px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--bd);
|
|
border-radius: 6px;
|
|
background: var(--bg1);
|
|
box-shadow: 0 18px 60px rgba(0, 0, 0, .35);
|
|
}
|
|
|
|
#chat-here {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.demo-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
margin: 10px 0 12px;
|
|
}
|
|
|
|
.demo-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 36px;
|
|
padding: 0 14px;
|
|
border: 1px solid var(--b);
|
|
border-radius: 3px;
|
|
background: transparent;
|
|
color: var(--b);
|
|
font: 10px var(--mono);
|
|
letter-spacing: 1px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.demo-button:hover {
|
|
background: var(--b);
|
|
color: #000;
|
|
}
|
|
|
|
.demo-button.alt {
|
|
border-color: var(--v);
|
|
color: var(--v);
|
|
}
|
|
|
|
.demo-button.alt:hover {
|
|
background: var(--v);
|
|
color: #000;
|
|
}
|
|
|
|
.demo-code {
|
|
margin-top: 12px;
|
|
padding: 18px 20px;
|
|
overflow-x: auto;
|
|
border: 1px solid var(--bd);
|
|
border-radius: 6px;
|
|
background: var(--bg1);
|
|
color: var(--t1);
|
|
font-size: 12px;
|
|
line-height: 1.75;
|
|
white-space: pre;
|
|
}
|
|
|
|
.demo-code .kw { color: var(--p); }
|
|
.demo-code .str { color: var(--g); }
|
|
.demo-code .cm { color: var(--t1); font-style: italic; }
|
|
|
|
.fullscreen-chat {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 10000;
|
|
display: grid;
|
|
grid-template-rows: 42px minmax(0, 1fr);
|
|
background: var(--bg0);
|
|
}
|
|
|
|
.fullscreen-chat[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.fullscreen-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 12px;
|
|
border-bottom: 1px solid var(--bd);
|
|
background: var(--bg1);
|
|
color: var(--g);
|
|
font-size: 10px;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.fullscreen-chat iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0;
|
|
background: var(--bg0);
|
|
}
|
|
|
|
@media (max-width: 520px) {
|
|
body { padding: 18px 10px 36px; }
|
|
.demo-frame { height: 72vh; min-height: 380px; }
|
|
.demo-code { padding: 14px; font-size: 10px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="demo-page">
|
|
<header class="demo-header">
|
|
<h1>CYBERCHAT</h1>
|
|
<p>// INLINE, FULL-SCREEN, AND POPOUT EMBED EXAMPLES</p>
|
|
</header>
|
|
|
|
<section class="demo-section">
|
|
<div class="demo-label">INLINE EMBED</div>
|
|
<p class="demo-note">The chat owns the scrolling inside this fixed-height box. The surrounding page remains independent.</p>
|
|
<div class="demo-frame">
|
|
<div id="chat-here"></div>
|
|
</div>
|
|
<div class="demo-code"><span class="cm"><!-- Include once in the host page --></span>
|
|
<span class="kw"><link</span> rel=<span class="str">"stylesheet"</span> href=<span class="str">"/chat/assets/css/cyberchat.css?v=20260609.5"</span><span class="kw">></span>
|
|
|
|
<span class="kw"><div</span> id=<span class="str">"my-chat"</span> style=<span class="str">"width:100%; height:680px; overflow:hidden"</span><span class="kw">></div></span>
|
|
|
|
<span class="kw"><script></span>window.CYBERCHAT_BASE = <span class="str">'/chat'</span>;<span class="kw"></script></span>
|
|
<span class="kw"><script</span> src=<span class="str">"/chat/assets/js/cyberchat-app.js?v=20260609.10"</span><span class="kw">></script></span>
|
|
<span class="kw"><script></span>CyberChat.init(<span class="str">'#my-chat'</span>);<span class="kw"></script></span></div>
|
|
</section>
|
|
|
|
<section class="demo-section">
|
|
<div class="demo-label">FULL-SCREEN EMBED</div>
|
|
<p class="demo-note">Open the standalone chat inside a full-viewport overlay. An iframe keeps the chat isolated from the host page CSS.</p>
|
|
<div class="demo-actions">
|
|
<button class="demo-button" id="open-fullscreen" type="button">OPEN FULL SCREEN</button>
|
|
</div>
|
|
<div class="demo-code"><span class="kw"><div</span> id=<span class="str">"chat-overlay"</span> style=<span class="str">"position:fixed; inset:0; z-index:10000"</span><span class="kw">></span>
|
|
<span class="kw"><iframe</span> src=<span class="str">"/chat/index.html?embed=fullscreen"</span>
|
|
title=<span class="str">"CyberChat"</span> style=<span class="str">"width:100%; height:100%; border:0"</span><span class="kw">></iframe></span>
|
|
<span class="kw"></div></span></div>
|
|
</section>
|
|
|
|
<section class="demo-section">
|
|
<div class="demo-label">POPOUT / POPUP EMBED</div>
|
|
<p class="demo-note">Launch the standalone chat in a resizable window. The login cookie is shared when it is opened on the same origin.</p>
|
|
<div class="demo-actions">
|
|
<a class="demo-button alt" id="open-popout" href="index.html?embed=popout"
|
|
target="cyberchat-popout" rel="noopener">OPEN POPOUT</a>
|
|
</div>
|
|
<div class="demo-code"><span class="kw"><button</span> type=<span class="str">"button"</span> onclick=<span class="str">"openCyberChat()"</span><span class="kw">></span>Open chat<span class="kw"></button></span>
|
|
<span class="kw"><script></span>
|
|
function openCyberChat() {
|
|
window.open(
|
|
<span class="str">'/chat/index.html?embed=popout'</span>,
|
|
<span class="str">'cyberchat-popout'</span>,
|
|
<span class="str">'popup=yes,width=480,height=720,resizable=yes,scrollbars=no'</span>
|
|
);
|
|
}
|
|
<span class="kw"></script></span></div>
|
|
</section>
|
|
</main>
|
|
|
|
<div class="fullscreen-chat" id="fullscreen-chat" hidden>
|
|
<div class="fullscreen-toolbar">
|
|
<span>CYBERCHAT // FULL SCREEN</span>
|
|
<button class="demo-button" id="close-fullscreen" type="button">CLOSE</button>
|
|
</div>
|
|
<iframe id="fullscreen-frame" title="CyberChat full-screen example"></iframe>
|
|
</div>
|
|
|
|
<script>
|
|
window.CYBERCHAT_BASE = '';
|
|
</script>
|
|
<script src="assets/js/cyberchat-app.js?v=20260609.10"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
CyberChat.init('#chat-here');
|
|
|
|
const overlay = document.getElementById('fullscreen-chat');
|
|
const frame = document.getElementById('fullscreen-frame');
|
|
document.getElementById('open-fullscreen').addEventListener('click', function() {
|
|
if (!frame.src) frame.src = 'index.html?embed=fullscreen';
|
|
overlay.hidden = false;
|
|
document.body.style.overflow = 'hidden';
|
|
});
|
|
document.getElementById('close-fullscreen').addEventListener('click', function() {
|
|
overlay.hidden = true;
|
|
document.body.style.overflow = '';
|
|
});
|
|
document.getElementById('open-popout').addEventListener('click', function(event) {
|
|
const popup = window.open(
|
|
'index.html?embed=popout',
|
|
'cyberchat-popout',
|
|
'popup=yes,width=480,height=720,resizable=yes,scrollbars=no'
|
|
);
|
|
if (popup) {
|
|
event.preventDefault();
|
|
popup.focus();
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|