895 lines
37 KiB
HTML
895 lines
37 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Terminal Chat - Python TCP Chat Application</title>
|
|
<link rel="icon" type="image/png" href="https://ben.de-roo.org/install/Screenshot_20260220_134634.png" />
|
|
<meta name="description" content="A simple yet powerful terminal-based chat application written in Python with TCP sockets.">
|
|
<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=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
:root {
|
|
--bg: #0a0e17;
|
|
--bg-card: #111827;
|
|
--bg-card-hover: #151d2e;
|
|
--bg-terminal: #0d1117;
|
|
--green: #22c55e;
|
|
--green-dim: #16a34a;
|
|
--green-glow: rgba(34, 197, 94, 0.15);
|
|
--green-glow-strong: rgba(34, 197, 94, 0.3);
|
|
--text: #e2e8f0;
|
|
--text-dim: #94a3b8;
|
|
--text-muted: #64748b;
|
|
--border: #1e293b;
|
|
--border-hover: #334155;
|
|
--cyan: #06b6d4;
|
|
--yellow: #eab308;
|
|
--red: #ef4444;
|
|
--orange: #f97316;
|
|
}
|
|
|
|
html { scroll-behavior: smooth; }
|
|
|
|
body {
|
|
font-family: 'Inter', system-ui, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
line-height: 1.6;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
code, .mono { font-family: 'JetBrains Mono', monospace; }
|
|
|
|
/* Scrollbar */
|
|
::-webkit-scrollbar { width: 6px; }
|
|
::-webkit-scrollbar-track { background: var(--bg); }
|
|
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
|
|
::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }
|
|
|
|
/* Selection */
|
|
::selection { background: var(--green-glow-strong); color: var(--green); }
|
|
|
|
/* ===== NAV ===== */
|
|
nav {
|
|
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
|
background: rgba(10, 14, 23, 0.8);
|
|
backdrop-filter: blur(20px);
|
|
border-bottom: 1px solid var(--border);
|
|
transition: box-shadow 0.3s;
|
|
}
|
|
nav.scrolled { box-shadow: 0 4px 30px rgba(0,0,0,0.3); }
|
|
.nav-inner {
|
|
max-width: 1100px; margin: 0 auto;
|
|
padding: 0 24px;
|
|
height: 64px;
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
}
|
|
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
|
|
.nav-logo-text { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 16px; color: var(--green); }
|
|
|
|
/* ===== HERO ===== */
|
|
.hero {
|
|
padding: 160px 24px 100px;
|
|
text-align: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.hero::before {
|
|
content: '';
|
|
position: absolute; inset: 0;
|
|
background: radial-gradient(ellipse 600px 400px at 50% 0%, var(--green-glow) 0%, transparent 70%);
|
|
pointer-events: none;
|
|
}
|
|
.hero-badge {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
padding: 6px 14px; border-radius: 999px;
|
|
background: var(--green-glow);
|
|
border: 1px solid rgba(34,197,94,0.2);
|
|
font-size: 13px; color: var(--green);
|
|
font-family: 'JetBrains Mono', monospace;
|
|
margin-bottom: 28px;
|
|
}
|
|
.hero-badge .dot {
|
|
width: 6px; height: 6px; border-radius: 50%;
|
|
background: var(--green);
|
|
animation: pulse-dot 2s ease-in-out infinite;
|
|
}
|
|
@keyframes pulse-dot {
|
|
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--green-glow-strong); }
|
|
50% { opacity: 0.6; box-shadow: 0 0 0 6px transparent; }
|
|
}
|
|
.hero h1 {
|
|
font-size: clamp(36px, 6vw, 64px);
|
|
font-weight: 700;
|
|
line-height: 1.1;
|
|
letter-spacing: -0.03em;
|
|
margin-bottom: 20px;
|
|
}
|
|
.hero h1 .highlight {
|
|
background: linear-gradient(135deg, var(--green), var(--cyan));
|
|
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
.hero p {
|
|
color: var(--text-dim); font-size: 18px;
|
|
max-width: 560px; margin: 0 auto 40px;
|
|
line-height: 1.6;
|
|
}
|
|
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
|
|
.btn {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
padding: 12px 24px; border-radius: 10px;
|
|
font-size: 14px; font-weight: 600;
|
|
text-decoration: none; cursor: pointer;
|
|
transition: all 0.2s; border: none;
|
|
}
|
|
.btn-primary {
|
|
background: var(--green); color: #000;
|
|
box-shadow: 0 0 20px var(--green-glow-strong);
|
|
}
|
|
.btn-primary:hover { background: var(--green-dim); transform: translateY(-1px); box-shadow: 0 0 30px var(--green-glow-strong); }
|
|
.btn-secondary {
|
|
background: var(--bg-card); color: var(--text);
|
|
border: 1px solid var(--border);
|
|
}
|
|
.btn-secondary:hover { border-color: var(--border-hover); background: var(--bg-card-hover); }
|
|
|
|
/* ===== INSTALL BOX ===== */
|
|
.install-box {
|
|
max-width: 540px; margin: 48px auto 0;
|
|
background: var(--bg-terminal);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
.install-header {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 10px 16px;
|
|
background: rgba(30, 41, 59, 0.5);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.install-dots { display: flex; gap: 6px; }
|
|
.install-dots span { width: 10px; height: 10px; border-radius: 50%; }
|
|
.install-dots span:nth-child(1) { background: var(--red); }
|
|
.install-dots span:nth-child(2) { background: var(--yellow); }
|
|
.install-dots span:nth-child(3) { background: var(--green); }
|
|
.install-label { font-size: 12px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }
|
|
.install-copy {
|
|
background: none; border: none; color: var(--text-muted);
|
|
cursor: pointer; padding: 4px; border-radius: 4px;
|
|
transition: all 0.2s; display: flex; align-items: center;
|
|
}
|
|
.install-copy:hover { color: var(--green); background: var(--green-glow); }
|
|
.install-copy.copied { color: var(--green); }
|
|
.install-body {
|
|
padding: 20px;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 14px;
|
|
color: var(--green);
|
|
display: flex; align-items: center; gap: 10px;
|
|
}
|
|
.install-body .prompt { color: var(--text-muted); user-select: none; }
|
|
|
|
/* ===== TERMINAL PREVIEW ===== */
|
|
.terminal-section { padding: 0 24px 100px; }
|
|
.terminal-window {
|
|
max-width: 800px; margin: 0 auto;
|
|
background: var(--bg-terminal);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 25px 60px -12px rgba(0,0,0,0.5);
|
|
}
|
|
.terminal-bar {
|
|
display: flex; align-items: center; gap: 8px;
|
|
padding: 12px 16px;
|
|
background: rgba(30, 41, 59, 0.5);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.terminal-bar-dots { display: flex; gap: 6px; }
|
|
.terminal-bar-dots span { width: 10px; height: 10px; border-radius: 50%; }
|
|
.terminal-bar-dots span:nth-child(1) { background: #ef4444; }
|
|
.terminal-bar-dots span:nth-child(2) { background: #eab308; }
|
|
.terminal-bar-dots span:nth-child(3) { background: #22c55e; }
|
|
.terminal-bar-title { flex: 1; text-align: center; font-size: 12px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }
|
|
.terminal-body {
|
|
padding: 20px;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 13px;
|
|
line-height: 1.8;
|
|
min-height: 320px;
|
|
}
|
|
.terminal-line { opacity: 0; transform: translateY(6px); transition: all 0.4s ease; }
|
|
.terminal-line.visible { opacity: 1; transform: translateY(0); }
|
|
.t-green { color: var(--green); }
|
|
.t-cyan { color: var(--cyan); }
|
|
.t-yellow { color: var(--yellow); }
|
|
.t-red { color: var(--red); }
|
|
.t-dim { color: var(--text-muted); }
|
|
.t-orange { color: var(--orange); }
|
|
.t-bold { font-weight: 700; }
|
|
.cursor-blink {
|
|
display: inline-block; width: 8px; height: 16px;
|
|
background: var(--green); vertical-align: text-bottom;
|
|
animation: blink 1s step-end infinite;
|
|
}
|
|
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
|
|
|
|
/* ===== SECTIONS ===== */
|
|
section { padding: 80px 24px; }
|
|
.container { max-width: 1100px; margin: 0 auto; }
|
|
.section-label {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 13px; color: var(--green);
|
|
text-transform: uppercase; letter-spacing: 0.1em;
|
|
margin-bottom: 12px;
|
|
}
|
|
.section-title {
|
|
font-size: clamp(28px, 4vw, 40px);
|
|
font-weight: 700; letter-spacing: -0.02em;
|
|
margin-bottom: 16px;
|
|
}
|
|
.section-desc {
|
|
color: var(--text-dim); font-size: 16px;
|
|
max-width: 600px; margin-bottom: 48px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ===== FEATURES GRID ===== */
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
.feature-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
padding: 28px;
|
|
transition: all 0.3s;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.feature-card::before {
|
|
content: '';
|
|
position: absolute; top: 0; left: 0; right: 0;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, transparent, var(--green), transparent);
|
|
opacity: 0; transition: opacity 0.3s;
|
|
}
|
|
.feature-card:hover { border-color: var(--border-hover); background: var(--bg-card-hover); }
|
|
.feature-card:hover::before { opacity: 1; }
|
|
.feature-icon {
|
|
width: 40px; height: 40px; border-radius: 10px;
|
|
background: var(--green-glow);
|
|
display: flex; align-items: center; justify-content: center;
|
|
margin-bottom: 16px; font-size: 18px;
|
|
}
|
|
.feature-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
|
|
.feature-card p { font-size: 14px; color: var(--text-dim); line-height: 1.6; }
|
|
|
|
/* ===== DOCS / COMMANDS ===== */
|
|
.docs-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
.doc-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
transition: all 0.3s;
|
|
}
|
|
.doc-card:hover { border-color: var(--border-hover); }
|
|
.doc-card-header {
|
|
padding: 20px 24px 0;
|
|
display: flex; align-items: center; gap: 12px;
|
|
}
|
|
.doc-card-header h3 { font-size: 15px; font-weight: 600; }
|
|
.doc-card-body { padding: 16px 24px 24px; }
|
|
.doc-card-body p { font-size: 14px; color: var(--text-dim); margin-bottom: 16px; line-height: 1.6; }
|
|
|
|
.command-table { width: 100%; border-collapse: collapse; }
|
|
.command-table th, .command-table td {
|
|
padding: 10px 12px; text-align: left;
|
|
font-size: 13px; border-bottom: 1px solid var(--border);
|
|
}
|
|
.command-table th { color: var(--text-muted); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
|
|
.command-table td:first-child {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
color: var(--cyan); font-size: 13px;
|
|
}
|
|
.command-table td:last-child { color: var(--text-dim); }
|
|
.command-table tr:last-child td { border-bottom: none; }
|
|
|
|
/* ===== ARCHITECTURE ===== */
|
|
.arch-block {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
padding: 32px;
|
|
max-width: 700px;
|
|
}
|
|
.arch-row {
|
|
display: flex; align-items: center; gap: 16px;
|
|
padding: 14px 0;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.arch-row:last-child { border-bottom: none; }
|
|
.arch-label {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 13px; color: var(--cyan);
|
|
min-width: 120px;
|
|
}
|
|
.arch-value { font-size: 14px; color: var(--text-dim); }
|
|
.arch-arrow {
|
|
display: flex; justify-content: center; padding: 8px 0;
|
|
color: var(--text-muted); font-size: 18px;
|
|
}
|
|
|
|
/* ===== CODE BLOCK ===== */
|
|
.code-block {
|
|
background: var(--bg-terminal);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 13px;
|
|
overflow-x: auto;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
/* ===== FOOTER ===== */
|
|
footer {
|
|
border-top: 1px solid var(--border);
|
|
padding: 40px 24px;
|
|
text-align: center;
|
|
}
|
|
footer p { color: var(--text-muted); font-size: 13px; }
|
|
footer a { color: var(--green); text-decoration: none; }
|
|
footer a:hover { text-decoration: underline; }
|
|
|
|
/* ===== SCROLL ANIMATIONS ===== */
|
|
.fade-in {
|
|
opacity: 0; transform: translateY(24px);
|
|
transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
.fade-in.visible { opacity: 1; transform: translateY(0); }
|
|
|
|
/* ===== RESPONSIVE ===== */
|
|
@media (max-width: 768px) {
|
|
.features-grid, .docs-grid { grid-template-columns: 1fr; }
|
|
.hero { padding: 130px 24px 60px; }
|
|
.hero p { font-size: 16px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- NAV -->
|
|
<nav id="navbar">
|
|
<div class="nav-inner">
|
|
<a href="#" class="nav-logo">
|
|
<svg width="28" height="28" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<rect x="1" y="1" width="30" height="30" rx="7" fill="#0d1117" stroke="#22c55e" stroke-width="1.5"/>
|
|
<text x="6" y="21" font-family="JetBrains Mono, monospace" font-size="14" font-weight="700" fill="#22c55e">>_</text>
|
|
</svg>
|
|
<span class="nav-logo-text">terminal-chat</span>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- HERO -->
|
|
<section class="hero">
|
|
<div class="hero-badge"><span class="dot"></span> v1.0 — Open Source</div>
|
|
<h1>Chat from your <span class="highlight">Terminal</span></h1>
|
|
<p>A simple yet powerful terminal-based chat application written in Python. Realtime messaging via TCP sockets, straight from your command line.</p>
|
|
<div class="hero-actions">
|
|
<a href="#installatie" class="btn btn-primary">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 2v8m0 0l-3-3m3 3l3-3M3 13h10"/></svg>
|
|
Install
|
|
</a>
|
|
<a href="#docs" class="btn btn-secondary">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 2h7l3 3v9H3V2z"/><path d="M10 2v3h3"/></svg>
|
|
Documentation
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Install Command -->
|
|
<div class="install-box" id="installatie">
|
|
<div class="install-header">
|
|
<div class="install-dots"><span></span><span></span><span></span></div>
|
|
<span class="install-label">bash</span>
|
|
<button class="install-copy" id="copyBtn" onclick="copyInstall()" aria-label="Copy command">
|
|
<svg id="copyIcon" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="5" y="5" width="9" height="9" rx="1.5"/><path d="M5 11H3.5A1.5 1.5 0 012 9.5v-7A1.5 1.5 0 013.5 1h7A1.5 1.5 0 0112 2.5V5"/></svg>
|
|
<svg id="checkIcon" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" style="display:none"><path d="M3 8.5l3.5 3.5L13 4.5"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="install-body">
|
|
<span class="prompt">$</span>
|
|
<span id="installCmd">curl -s https://ben.de-roo.org/install/script.sh | bash</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- LIVE TERMINAL DEMO -->
|
|
<section class="terminal-section" id="demo">
|
|
<div class="terminal-window">
|
|
<div class="terminal-bar">
|
|
<div class="terminal-bar-dots"><span></span><span></span><span></span></div>
|
|
<div class="terminal-bar-title">terminal-chat — python3</div>
|
|
<div></div>
|
|
</div>
|
|
<div class="terminal-body" id="terminalBody" style="padding:0;min-height:400px;display:flex;flex-direction:column;">
|
|
|
|
<!-- PHASE 1: Login flow -->
|
|
<div id="loginPhase" style="padding:20px;">
|
|
<div class="terminal-line" data-delay="0">
|
|
<span class="t-dim">$</span> <span class="t-green">python3</span> client.py
|
|
</div>
|
|
<div class="terminal-line" data-delay="500">
|
|
<br>
|
|
<div style="background:#2563eb;text-align:center;padding:6px 0;border-radius:4px;margin-bottom:4px;">
|
|
<span class="t-bold" style="color:#fff;">Terminal Chat</span>
|
|
</div>
|
|
</div>
|
|
<div class="terminal-line" data-delay="900">
|
|
<br>
|
|
<span class="t-green t-bold">========================================</span><br>
|
|
<span class="t-green t-bold"> Welcome to The Terminal Chat</span><br>
|
|
<span class="t-green t-bold">========================================</span>
|
|
</div>
|
|
<div class="terminal-line" data-delay="1400">
|
|
<br>
|
|
<span>1. Login</span><br>
|
|
<span>2. New account</span>
|
|
</div>
|
|
<div class="terminal-line" data-delay="2000">
|
|
<br><span class="t-dim">></span> <span class="t-yellow">1</span>
|
|
</div>
|
|
<div class="terminal-line" data-delay="2500">
|
|
<br><span class="t-cyan">Username:</span> <span class="t-yellow">max</span>
|
|
</div>
|
|
<div class="terminal-line" data-delay="2900">
|
|
<span class="t-cyan">Password:</span> <span class="t-dim">********</span>
|
|
</div>
|
|
<div class="terminal-line" data-delay="3400">
|
|
<br><span class="t-dim">--- Available chats: ---</span><br><br>
|
|
<span class="t-cyan">1.</span> <span>General</span><br>
|
|
<span class="t-cyan">2.</span> <span>Create new chat</span>
|
|
</div>
|
|
<div class="terminal-line" data-delay="4000">
|
|
<br><span class="t-dim">></span> <span class="t-yellow">1</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PHASE 2: Chat view (hidden initially, shown after login) -->
|
|
<div id="chatPhase" style="display:none;flex:1;flex-direction:column;">
|
|
<!-- Blue ANSI bar -->
|
|
<div style="background:#2563eb;text-align:center;padding:6px 0;">
|
|
<span class="t-bold" style="color:#fff;font-family:'JetBrains Mono',monospace;font-size:13px;">General</span>
|
|
</div>
|
|
|
|
<!-- Chat messages area -->
|
|
<div id="chatMessages" style="flex:1;padding:12px 16px;display:flex;flex-direction:column;gap:2px;font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.7;min-height:240px;">
|
|
</div>
|
|
|
|
<!-- Green separator line -->
|
|
<div id="greenLine" style="padding:0 16px;font-family:'JetBrains Mono',monospace;font-size:13px;color:#22c55e;user-select:none;opacity:0;transition:opacity 0.3s;">
|
|
<span>-----------------------------------------------------------------------------------------------</span>
|
|
</div>
|
|
|
|
<!-- Input area -->
|
|
<div id="inputArea" style="padding:6px 16px 14px;font-family:'JetBrains Mono',monospace;font-size:13px;opacity:0;transition:opacity 0.3s;">
|
|
<span class="t-dim">></span> <span id="typingText"></span><span class="cursor-blink"></span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FEATURES -->
|
|
<section id="features">
|
|
<div class="container fade-in">
|
|
<div class="section-label">// features</div>
|
|
<h2 class="section-title">Everything you need</h2>
|
|
<p class="section-desc">Terminal Chat is built with a focus on simplicity and functionality. No unnecessary complexity, just chatting from your terminal.</p>
|
|
<div class="features-grid">
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="#22c55e" stroke-width="1.5"><rect x="2" y="3" width="16" height="14" rx="2"/><path d="M6 9l2 2 4-4"/></svg>
|
|
</div>
|
|
<h3>Login & Signup</h3>
|
|
<p>Full authentication system with username and password. Default test account included.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="#22c55e" stroke-width="1.5"><path d="M4 16V4l6 4-6 4"/><path d="M14 8h4"/></svg>
|
|
</div>
|
|
<h3>Terminal Interface</h3>
|
|
<p>Colorful terminal interface with intuitive navigation. Works on any terminal that supports ANSI colors.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="#22c55e" stroke-width="1.5"><circle cx="10" cy="10" r="7"/><path d="M10 6v4l2.5 2.5"/></svg>
|
|
</div>
|
|
<h3>Realtime Messaging</h3>
|
|
<p>Messages are delivered instantly via TCP sockets. No delay, no polling. True realtime communication.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="#22c55e" stroke-width="1.5"><path d="M3 5h14M3 10h14M3 15h14"/><circle cx="7" cy="5" r="1.5" fill="#22c55e"/><circle cx="13" cy="10" r="1.5" fill="#22c55e"/><circle cx="9" cy="15" r="1.5" fill="#22c55e"/></svg>
|
|
</div>
|
|
<h3>Multiple Chats</h3>
|
|
<p>Create multiple chat channels and easily switch between them. Each channel has its own message history.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="#22c55e" stroke-width="1.5"><circle cx="7" cy="8" r="3"/><circle cx="14" cy="8" r="3"/><path d="M2 16c0-2.2 2.2-4 5-4s5 1.8 5 4"/><path d="M12 12c2.8 0 5 1.8 5 4"/></svg>
|
|
</div>
|
|
<h3>User Management</h3>
|
|
<p>Add users to chats with a simple command. Manage who is in which channel.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="#22c55e" stroke-width="1.5"><path d="M10 2a8 8 0 100 16 8 8 0 000-16z"/><path d="M10 6v8M6 10h8"/></svg>
|
|
</div>
|
|
<h3>Open Source</h3>
|
|
<p>Fully open source and free to use. View the code, contribute, or fork the project for your own use.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="compatibility">
|
|
<div class="container fade-in">
|
|
<div class="section-label">//compatibility</div>
|
|
<h2 class="selection-title">good for Linux users</h2>
|
|
<p class="section-desc">and kinda for Windows</p>
|
|
|
|
<div class="doc-card">
|
|
<div class="card-item">
|
|
<h3>Linux</h3>
|
|
<p>Fully tested for Linux. Works great in terminal environments.</p>
|
|
</div>
|
|
<div class="card-item">
|
|
<h3>Windows</h3>
|
|
<p>Mostly compatible, but requires changes to the Readline and autofill function.</p>
|
|
</div>
|
|
<div class="card-item">
|
|
<h3>MacOS</h3>
|
|
<p>Not tested I am broke</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- DOCUMENTATIE -->
|
|
<section id="docs">
|
|
<div class="container fade-in">
|
|
<div class="section-label">// documentation</div>
|
|
<h2 class="section-title">Get started quickly</h2>
|
|
<p class="section-desc">Everything you need to install, configure, and use Terminal Chat.</p>
|
|
<div class="docs-grid">
|
|
|
|
<!-- Installation -->
|
|
<div class="doc-card">
|
|
<div class="doc-card-header">
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="#22c55e" stroke-width="1.5"><path d="M10 2v12m0 0l-4-4m4 4l4-4M3 17h14"/></svg>
|
|
<h3>Installation</h3>
|
|
</div>
|
|
<div class="doc-card-body">
|
|
<p>Install Terminal Chat with a single command. The script downloads and configures everything automatically.</p>
|
|
<div class="code-block">
|
|
<span class="t-dim"># Automatic installation</span><br>
|
|
<span class="t-green">$</span> curl -s https://ben.de-roo.org/install/script.sh | bash<br><br>
|
|
<span class="t-dim"># Or manually</span><br>
|
|
<span class="t-green">$</span> git clone <repo-url><br>
|
|
<span class="t-green">$</span> cd terminal-chat<br>
|
|
<span class="t-green">$</span> pip install -r requirements.txt
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Getting Started -->
|
|
<div class="doc-card">
|
|
<div class="doc-card-header">
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="#06b6d4" stroke-width="1.5"><path d="M7 4l8 6-8 6V4z"/></svg>
|
|
<h3>Getting Started</h3>
|
|
</div>
|
|
<div class="doc-card-body">
|
|
<p>Start the server first, then the client. Log in with the default test account or create a new one.</p>
|
|
<div class="code-block">
|
|
<span class="t-dim"># Start the server</span><br>
|
|
<span class="t-green">$</span> python3 server.py<br><br>
|
|
<span class="t-dim"># Start the client (another terminal window)</span><br>
|
|
<span class="t-green">$</span> python3 client.py<br><br>
|
|
<span class="t-dim"># Default test account</span><br>
|
|
<span class="t-yellow">user:</span> test <span class="t-yellow">pass:</span> test
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Commands -->
|
|
<div class="doc-card" style="grid-column: 1 / -1;">
|
|
<div class="doc-card-header">
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="#eab308" stroke-width="1.5"><path d="M4 16V4l6 4-6 4"/><path d="M14 8h4"/></svg>
|
|
<h3>Available Commands</h3>
|
|
</div>
|
|
<div class="doc-card-body">
|
|
<p>Use these commands while chatting to perform additional actions.</p>
|
|
<table class="command-table">
|
|
<thead>
|
|
<tr><th>Command</th><th>Description</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>/add <username></td>
|
|
<td>Add a user to the current chat</td>
|
|
</tr>
|
|
<tr>
|
|
<td>/break</td>
|
|
<td>Leave the current chat and return to chat selection</td>
|
|
</tr>
|
|
<tr>
|
|
<td>/quit</td>
|
|
<td>Close the program completely and disconnect</td>
|
|
</tr>
|
|
<tr>
|
|
<td>obviously more commands and features comming on the way!</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ARCHITECTUUR -->
|
|
<section id="architectuur">
|
|
<div class="container fade-in">
|
|
<div class="section-label">// architecture</div>
|
|
<h2 class="section-title">How it works</h2>
|
|
<p class="section-desc">Terminal Chat uses a classic client-server model with TCP sockets for reliable, bidirectional communication.</p>
|
|
<div class="arch-block">
|
|
<div class="arch-row">
|
|
<span class="arch-label">Client</span>
|
|
<span class="arch-value">Python script that connects to the server. Handles input/output and displays messages with ANSI colors.</span>
|
|
</div>
|
|
<div class="arch-arrow">↓ TCP Socket ↓</div>
|
|
<div class="arch-row">
|
|
<span class="arch-label">Server</span>
|
|
<span class="arch-value">Runs centrally and manages all connections, authentication, chat channels, and message routing.</span>
|
|
</div>
|
|
<div class="arch-arrow">↓ Threading ↓</div>
|
|
<div class="arch-row">
|
|
<span class="arch-label">Storage</span>
|
|
<span class="arch-value">User and chat data are stored server-side. Each client gets its own thread for non-blocking I/O.</span>
|
|
</div>
|
|
</div>
|
|
<br><br>
|
|
<div class="code-block" style="max-width:700px;">
|
|
<span class="t-dim"># Simplified overview</span><br><br>
|
|
<span class="t-cyan">client.py</span> <span class="t-dim">→</span> Connects to server via socket<br>
|
|
<span class="t-dim">→</span> Login / Signup prompt<br>
|
|
<span class="t-dim">→</span> Chat selection menu<br>
|
|
<span class="t-dim">→</span> Send & receive messages<br><br>
|
|
<span class="t-cyan">server.py</span> <span class="t-dim">→</span> Listens on TCP port<br>
|
|
<span class="t-dim">→</span> New thread per client<br>
|
|
<span class="t-dim">→</span> Authentication handling<br>
|
|
<span class="t-dim">→</span> Message broadcast to channel
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FOOTER -->
|
|
<footer>
|
|
<p>Terminal Chat — Built with Python & TCP Sockets</p>
|
|
<p style="margin-top: 8px;">
|
|
<a href="#installatie">Install</a> ·
|
|
<a href="#docs">Documentation</a> ·
|
|
<a href="#features">Features</a>
|
|
</p>
|
|
</footer>
|
|
|
|
<script>
|
|
// === NAV SCROLL ===
|
|
const navbar = document.getElementById('navbar');
|
|
window.addEventListener('scroll', () => {
|
|
navbar.classList.toggle('scrolled', window.scrollY > 20);
|
|
});
|
|
|
|
// === COPY INSTALL COMMAND ===
|
|
function copyInstall() {
|
|
const cmd = document.getElementById('installCmd').textContent;
|
|
navigator.clipboard.writeText(cmd).then(() => {
|
|
const copyIcon = document.getElementById('copyIcon');
|
|
const checkIcon = document.getElementById('checkIcon');
|
|
const btn = document.getElementById('copyBtn');
|
|
copyIcon.style.display = 'none';
|
|
checkIcon.style.display = 'block';
|
|
btn.classList.add('copied');
|
|
setTimeout(() => {
|
|
copyIcon.style.display = 'block';
|
|
checkIcon.style.display = 'none';
|
|
btn.classList.remove('copied');
|
|
}, 2000);
|
|
});
|
|
}
|
|
|
|
// === TERMINAL ANIMATION ===
|
|
const chatMessages = [
|
|
{ user: 'alice', color: '#06b6d4', text: 'hey everyone, server is up', align: 'left' },
|
|
{ user: 'jake', color: '#f97316', text: 'nice, just connected', align: 'left' },
|
|
{ user: 'alice', color: '#06b6d4', text: 'max you there?', align: 'left' },
|
|
{ user: 'max', color: '#eab308', text: 'yeah just logged in', align: 'right' },
|
|
{ user: 'jake', color: '#f97316', text: 'this thing is actually fast', align: 'left' },
|
|
{ user: 'max', color: '#eab308', text: 'right? tcp sockets go crazy', align: 'right' },
|
|
{ user: 'alice', color: '#06b6d4', text: 'lol true. let me add sarah', align: 'left' },
|
|
{ user: 'alice', color: '#06b6d4', text: '/add sarah', align: 'left', isCmd: true },
|
|
{ user: null, color: '#22c55e', text: 'sarah has been added to the chat.', align: 'center', isSystem: true },
|
|
{ user: 'sarah', color: '#a78bfa', text: 'heyy thanks for the invite', align: 'left' },
|
|
{ user: 'max', color: '#eab308', text: 'welcome! we were just testing', align: 'right' },
|
|
{ user: 'sarah', color: '#a78bfa', text: 'looks super clean ngl', align: 'left' },
|
|
{ user: 'jake', color: '#f97316', text: 'agreed, terminal chat supremacy', align: 'left' },
|
|
{ user: 'max', color: '#eab308', text: 'haha lets gooo', align: 'right' },
|
|
];
|
|
|
|
let typingMsg = 'who else should we add?';
|
|
|
|
function animateTerminal() {
|
|
const termBody = document.getElementById('terminalBody');
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
startLoginPhase();
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, { threshold: 0.3 });
|
|
observer.observe(termBody);
|
|
}
|
|
|
|
function startLoginPhase() {
|
|
const lines = document.querySelectorAll('#loginPhase .terminal-line');
|
|
lines.forEach(line => {
|
|
const delay = parseInt(line.getAttribute('data-delay')) || 0;
|
|
setTimeout(() => line.classList.add('visible'), delay);
|
|
});
|
|
|
|
// After login flow finishes, transition to chat
|
|
const lastDelay = Math.max(...Array.from(lines).map(l => parseInt(l.getAttribute('data-delay')) || 0));
|
|
setTimeout(() => {
|
|
transitionToChat();
|
|
}, lastDelay + 800);
|
|
}
|
|
|
|
function transitionToChat() {
|
|
const loginPhase = document.getElementById('loginPhase');
|
|
const chatPhase = document.getElementById('chatPhase');
|
|
|
|
loginPhase.style.transition = 'opacity 0.4s';
|
|
loginPhase.style.opacity = '0';
|
|
|
|
setTimeout(() => {
|
|
loginPhase.style.display = 'none';
|
|
chatPhase.style.display = 'flex';
|
|
|
|
// Show green line and input area
|
|
setTimeout(() => {
|
|
document.getElementById('greenLine').style.opacity = '1';
|
|
document.getElementById('inputArea').style.opacity = '1';
|
|
}, 300);
|
|
|
|
// Start adding messages one by one
|
|
let msgIndex = 0;
|
|
const msgContainer = document.getElementById('chatMessages');
|
|
const typingEl = document.getElementById('typingText');
|
|
|
|
function typeInInput(text, callback) {
|
|
typingEl.textContent = '';
|
|
let i = 0;
|
|
function typeChar() {
|
|
if (i < text.length) {
|
|
typingEl.textContent += text[i];
|
|
i++;
|
|
setTimeout(typeChar, 45 + Math.random() * 60);
|
|
} else {
|
|
// Brief pause then "send"
|
|
setTimeout(() => {
|
|
typingEl.textContent = '';
|
|
callback();
|
|
}, 350);
|
|
}
|
|
}
|
|
typeChar();
|
|
}
|
|
|
|
function appendMessage(msg) {
|
|
const div = document.createElement('div');
|
|
div.style.opacity = '0';
|
|
div.style.transform = 'translateY(4px)';
|
|
div.style.transition = 'all 0.3s ease';
|
|
|
|
if (msg.isSystem) {
|
|
div.style.textAlign = 'center';
|
|
div.innerHTML = '<span style="color:' + msg.color + ';font-size:12px;">' + msg.text + '</span>';
|
|
} else if (msg.align === 'right') {
|
|
div.style.textAlign = 'right';
|
|
div.innerHTML = '<span style="color:#64748b;">[</span><span style="color:' + msg.color + ';">' + msg.user + '</span><span style="color:#64748b;">]</span> ' + (msg.isCmd ? '<span style="color:#f97316;">' + msg.text + '</span>' : msg.text);
|
|
} else {
|
|
div.style.textAlign = 'left';
|
|
div.innerHTML = '<span style="color:#64748b;">[</span><span style="color:' + msg.color + ';">' + msg.user + '</span><span style="color:#64748b;">]</span> ' + (msg.isCmd ? '<span style="color:#f97316;">' + msg.text + '</span>' : msg.text);
|
|
}
|
|
|
|
msgContainer.appendChild(div);
|
|
requestAnimationFrame(() => {
|
|
requestAnimationFrame(() => {
|
|
div.style.opacity = '1';
|
|
div.style.transform = 'translateY(0)';
|
|
});
|
|
});
|
|
}
|
|
|
|
function addNextMessage() {
|
|
if (msgIndex >= chatMessages.length) {
|
|
// Final typing animation (no send)
|
|
setTimeout(() => {
|
|
let i = 0;
|
|
function lastType() {
|
|
if (i < typingMsg.length) {
|
|
typingEl.textContent += typingMsg[i];
|
|
i++;
|
|
setTimeout(lastType, 60 + Math.random() * 80);
|
|
}
|
|
}
|
|
lastType();
|
|
}, 400);
|
|
return;
|
|
}
|
|
|
|
const msg = chatMessages[msgIndex];
|
|
msgIndex++;
|
|
|
|
if (msg.user === 'max') {
|
|
// Max's messages: type in input first, then send to chat
|
|
typeInInput(msg.text, () => {
|
|
appendMessage(msg);
|
|
setTimeout(addNextMessage, 400 + Math.random() * 400);
|
|
});
|
|
} else {
|
|
// Other users: just appear after a delay
|
|
appendMessage(msg);
|
|
setTimeout(addNextMessage, 600 + Math.random() * 500);
|
|
}
|
|
}
|
|
|
|
setTimeout(addNextMessage, 500);
|
|
}, 400);
|
|
}
|
|
|
|
animateTerminal();
|
|
|
|
// === FADE-IN SECTIONS ===
|
|
const fadeObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
fadeObserver.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, { threshold: 0.15 });
|
|
|
|
document.querySelectorAll('.fade-in').forEach(el => fadeObserver.observe(el));
|
|
</script>
|
|
</body>
|
|
</html>
|