ben/ben.de-roo.org
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update install/index.html

Browse Source
This commit is contained in:
Ben de Roo
2026-02-20 14:40:06 +01:00
parent 013b6bdcf4
commit 4df0a42112
1 changed files with 261 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

372
install/index.html
View File

@@ -1,11 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="nl"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Terminal Chat - Python TCP Chat Applicatie</title> <title>Terminal Chat - Python TCP Chat Application</title>
<link rel="icon" href="https://ben.de-roo.org/install/Screenshot_20260220_134634.png" type="image/png"> <meta name="description" content="A simple yet powerful terminal-based chat application written in Python with TCP sockets.">
<meta name="description" content="Een simpele maar krachtige terminal-gebaseerde chat applicatie geschreven in Python met TCP-sockets.">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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"> <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">
@@ -387,16 +386,16 @@
<!-- HERO --> <!-- HERO -->
<section class="hero"> <section class="hero">
<div class="hero-badge"><span class="dot"></span> v1.0 &mdash; Open Source</div> <div class="hero-badge"><span class="dot"></span> v1.0 &mdash; Open Source</div>
<h1>Chat vanuit je <span class="highlight">Terminal</span></h1> <h1>Chat from your <span class="highlight">Terminal</span></h1>
<p>Een simpele maar krachtige terminal-gebaseerde chat applicatie geschreven in Python. Realtime messaging via TCP-sockets, direct vanuit je command line.</p> <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"> <div class="hero-actions">
<a href="#installatie" class="btn btn-primary"> <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> <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>
Installeren Install
</a> </a>
<a href="#docs" class="btn btn-secondary"> <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> <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>
Documentatie Documentation
</a> </a>
</div> </div>
@@ -405,7 +404,7 @@
<div class="install-header"> <div class="install-header">
<div class="install-dots"><span></span><span></span><span></span></div> <div class="install-dots"><span></span><span></span><span></span></div>
<span class="install-label">bash</span> <span class="install-label">bash</span>
<button class="install-copy" id="copyBtn" onclick="copyInstall()" aria-label="Kopieer commando"> <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="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> <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> </button>
@@ -425,55 +424,71 @@
<div class="terminal-bar-title">terminal-chat &mdash; python3</div> <div class="terminal-bar-title">terminal-chat &mdash; python3</div>
<div></div> <div></div>
</div> </div>
<div class="terminal-body" id="terminalBody"> <div class="terminal-body" id="terminalBody" style="padding:0;min-height:400px;display:flex;flex-direction:column;">
<div class="terminal-line" data-delay="0">
<span class="t-dim">$</span> <span class="t-green">python3</span> client.py <!-- 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">&nbsp;&nbsp;&nbsp;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">&gt;</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">&gt;</span> <span class="t-yellow">1</span>
</div>
</div> </div>
<div class="terminal-line" data-delay="600">
<br> <!-- PHASE 2: Chat view (hidden initially, shown after login) -->
<span class="t-green t-bold">========================================</span><br> <div id="chatPhase" style="display:none;flex:1;flex-direction:column;">
<span class="t-green t-bold">&nbsp;&nbsp;&nbsp;&nbsp;Welkom bij De Terminal Chat</span><br> <!-- Blue ANSI bar -->
<span class="t-green t-bold">========================================</span> <div style="background:#2563eb;text-align:center;padding:6px 0;">
</div> <span class="t-bold" style="color:#fff;font-family:'JetBrains Mono',monospace;font-size:13px;">General</span>
<div class="terminal-line" data-delay="1200"> </div>
<br><span class="t-cyan">Gebruikersnaam:</span> <span class="t-yellow">ben</span>
</div> <!-- Chat messages area -->
<div class="terminal-line" data-delay="1700"> <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;">
<span class="t-cyan">Wachtwoord:</span> <span class="t-dim">********</span> </div>
</div>
<div class="terminal-line" data-delay="2300"> <!-- Green separator line -->
<br><span class="t-green">Succesvol ingelogd! Welkom, ben.</span> <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;">
</div> <span>-----------------------------------------------------------------------------------------------</span>
<div class="terminal-line" data-delay="3000"> </div>
<br><span class="t-dim">--- Beschikbare chats ---</span><br>
<span class="t-cyan">[1]</span> <span>Algemeen</span><br> <!-- Input area -->
<span class="t-cyan">[2]</span> <span>Project Alpha</span><br> <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-cyan">[3]</span> <span>+ Nieuwe chat aanmaken</span> <span class="t-dim">&gt;</span> <span id="typingText"></span><span class="cursor-blink"></span>
</div> </div>
<div class="terminal-line" data-delay="3800">
<br><span class="t-dim">Selecteer een chat:</span> <span class="t-yellow">1</span>
</div>
<div class="terminal-line" data-delay="4500">
<br><span class="t-green">[Algemeen]</span> <span class="t-dim">Verbonden. Typ je bericht...</span>
</div>
<div class="terminal-line" data-delay="5200">
<span class="t-cyan">alice:</span> Hey, ben je er?
</div>
<div class="terminal-line" data-delay="5800">
<span class="t-yellow">ben:</span> Ja! Alles werkt perfect.
</div>
<div class="terminal-line" data-delay="6400">
<span class="t-cyan">alice:</span> Mooi, ik add dave even.
</div>
<div class="terminal-line" data-delay="7000">
<span class="t-cyan">alice:</span> <span class="t-orange">/add dave</span>
</div>
<div class="terminal-line" data-delay="7500">
<span class="t-green">dave is toegevoegd aan de chat.</span>
</div>
<div class="terminal-line" data-delay="8000">
<span class="t-yellow">ben:</span> Welkom dave! <span class="cursor-blink"></span>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
@@ -482,50 +497,50 @@
<section id="features"> <section id="features">
<div class="container fade-in"> <div class="container fade-in">
<div class="section-label">// features</div> <div class="section-label">// features</div>
<h2 class="section-title">Alles wat je nodig hebt</h2> <h2 class="section-title">Everything you need</h2>
<p class="section-desc">Terminal Chat is gebouwd met focus op eenvoud en functionaliteit. Geen overbodige complexiteit, gewoon chatten vanuit je terminal.</p> <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="features-grid">
<div class="feature-card"> <div class="feature-card">
<div class="feature-icon"> <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> <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> </div>
<h3>Login & Signup</h3> <h3>Login & Signup</h3>
<p>Volledig authenticatiesysteem met gebruikersnaam en wachtwoord. Standaard testaccount inbegrepen.</p> <p>Full authentication system with username and password. Default test account included.</p>
</div> </div>
<div class="feature-card"> <div class="feature-card">
<div class="feature-icon"> <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> <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> </div>
<h3>Terminal Interface</h3> <h3>Terminal Interface</h3>
<p>Kleurrijke terminal interface met intuïtieve navigatie. Werkt op elke terminal die ANSI kleuren ondersteunt.</p> <p>Colorful terminal interface with intuitive navigation. Works on any terminal that supports ANSI colors.</p>
</div> </div>
<div class="feature-card"> <div class="feature-card">
<div class="feature-icon"> <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> <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> </div>
<h3>Realtime Messaging</h3> <h3>Realtime Messaging</h3>
<p>Berichten worden direct afgeleverd via TCP-sockets. Geen vertraging, geen polling. Echte realtime communicatie.</p> <p>Messages are delivered instantly via TCP sockets. No delay, no polling. True realtime communication.</p>
</div> </div>
<div class="feature-card"> <div class="feature-card">
<div class="feature-icon"> <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> <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> </div>
<h3>Meerdere Chats</h3> <h3>Multiple Chats</h3>
<p>Maak meerdere chatkanalen aan en wissel er eenvoudig tussen. Elk kanaal heeft zijn eigen berichtgeschiedenis.</p> <p>Create multiple chat channels and easily switch between them. Each channel has its own message history.</p>
</div> </div>
<div class="feature-card"> <div class="feature-card">
<div class="feature-icon"> <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> <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> </div>
<h3>Gebruikers Beheer</h3> <h3>User Management</h3>
<p>Voeg gebruikers toe aan chats met een simpel commando. Beheer wie er in welk kanaal zit.</p> <p>Add users to chats with a simple command. Manage who is in which channel.</p>
</div> </div>
<div class="feature-card"> <div class="feature-card">
<div class="feature-icon"> <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> <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> </div>
<h3>Open Source</h3> <h3>Open Source</h3>
<p>Volledig open source en vrij te gebruiken. Bekijk de code, draag bij, of fork het project voor eigen gebruik.</p> <p>Fully open source and free to use. View the code, contribute, or fork the project for your own use.</p>
</div> </div>
</div> </div>
</div> </div>
@@ -534,23 +549,23 @@
<!-- DOCUMENTATIE --> <!-- DOCUMENTATIE -->
<section id="docs"> <section id="docs">
<div class="container fade-in"> <div class="container fade-in">
<div class="section-label">// documentatie</div> <div class="section-label">// documentation</div>
<h2 class="section-title">Snel aan de slag</h2> <h2 class="section-title">Get started quickly</h2>
<p class="section-desc">Alles wat je nodig hebt om Terminal Chat te installeren, configureren en gebruiken.</p> <p class="section-desc">Everything you need to install, configure, and use Terminal Chat.</p>
<div class="docs-grid"> <div class="docs-grid">
<!-- Installatie --> <!-- Installation -->
<div class="doc-card"> <div class="doc-card">
<div class="doc-card-header"> <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> <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>Installatie</h3> <h3>Installation</h3>
</div> </div>
<div class="doc-card-body"> <div class="doc-card-body">
<p>Installeer Terminal Chat met een enkel commando. Het script downloadt en configureert alles automatisch.</p> <p>Install Terminal Chat with a single command. The script downloads and configures everything automatically.</p>
<div class="code-block"> <div class="code-block">
<span class="t-dim"># Automatische installatie</span><br> <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-green">$</span> curl -s https://ben.de-roo.org/install/script.sh | bash<br><br>
<span class="t-dim"># Of handmatig</span><br> <span class="t-dim"># Or manually</span><br>
<span class="t-green">$</span> git clone &lt;repo-url&gt;<br> <span class="t-green">$</span> git clone &lt;repo-url&gt;<br>
<span class="t-green">$</span> cd terminal-chat<br> <span class="t-green">$</span> cd terminal-chat<br>
<span class="t-green">$</span> pip install -r requirements.txt <span class="t-green">$</span> pip install -r requirements.txt
@@ -558,49 +573,49 @@
</div> </div>
</div> </div>
<!-- Eerste Start --> <!-- Getting Started -->
<div class="doc-card"> <div class="doc-card">
<div class="doc-card-header"> <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> <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>Eerste Start</h3> <h3>Getting Started</h3>
</div> </div>
<div class="doc-card-body"> <div class="doc-card-body">
<p>Start eerst de server, daarna de client. Log in met het standaard testaccount of maak een nieuw account aan.</p> <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"> <div class="code-block">
<span class="t-dim"># Start de server</span><br> <span class="t-dim"># Start the server</span><br>
<span class="t-green">$</span> python3 server.py<br><br> <span class="t-green">$</span> python3 server.py<br><br>
<span class="t-dim"># Start de client (ander terminal venster)</span><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-green">$</span> python3 client.py<br><br>
<span class="t-dim"># Standaard testaccount</span><br> <span class="t-dim"># Default test account</span><br>
<span class="t-yellow">user:</span> test &nbsp;<span class="t-yellow">pass:</span> test <span class="t-yellow">user:</span> test &nbsp;<span class="t-yellow">pass:</span> test
</div> </div>
</div> </div>
</div> </div>
<!-- Commando's --> <!-- Commands -->
<div class="doc-card" style="grid-column: 1 / -1;"> <div class="doc-card" style="grid-column: 1 / -1;">
<div class="doc-card-header"> <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> <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>Beschikbare Commando's</h3> <h3>Available Commands</h3>
</div> </div>
<div class="doc-card-body"> <div class="doc-card-body">
<p>Gebruik deze commando's tijdens het chatten om extra acties uit te voeren.</p> <p>Use these commands while chatting to perform additional actions.</p>
<table class="command-table"> <table class="command-table">
<thead> <thead>
<tr><th>Commando</th><th>Beschrijving</th></tr> <tr><th>Command</th><th>Description</th></tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>/add &lt;username&gt;</td> <td>/add &lt;username&gt;</td>
<td>Voeg een gebruiker toe aan de huidige chat</td> <td>Add a user to the current chat</td>
</tr> </tr>
<tr> <tr>
<td>/break</td> <td>/break</td>
<td>Verlaat de huidige chat en ga terug naar chat selectie</td> <td>Leave the current chat and return to chat selection</td>
</tr> </tr>
<tr> <tr>
<td>/quit</td> <td>/quit</td>
<td>Sluit het programma volledig af en verbreek de verbinding</td> <td>Close the program completely and disconnect</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@@ -613,46 +628,46 @@
<!-- ARCHITECTUUR --> <!-- ARCHITECTUUR -->
<section id="architectuur"> <section id="architectuur">
<div class="container fade-in"> <div class="container fade-in">
<div class="section-label">// architectuur</div> <div class="section-label">// architecture</div>
<h2 class="section-title">Hoe het werkt</h2> <h2 class="section-title">How it works</h2>
<p class="section-desc">Terminal Chat gebruikt een klassiek client-server model met TCP-sockets voor betrouwbare, bidirectionele communicatie.</p> <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-block">
<div class="arch-row"> <div class="arch-row">
<span class="arch-label">Client</span> <span class="arch-label">Client</span>
<span class="arch-value">Python script dat verbinding maakt met de server. Verwerkt input/output en toont berichten met ANSI kleuren.</span> <span class="arch-value">Python script that connects to the server. Handles input/output and displays messages with ANSI colors.</span>
</div> </div>
<div class="arch-arrow">&darr; TCP Socket &darr;</div> <div class="arch-arrow">&darr; TCP Socket &darr;</div>
<div class="arch-row"> <div class="arch-row">
<span class="arch-label">Server</span> <span class="arch-label">Server</span>
<span class="arch-value">Draait centraal en beheert alle verbindingen, authenticatie, chatkanalen en bericht routing.</span> <span class="arch-value">Runs centrally and manages all connections, authentication, chat channels, and message routing.</span>
</div> </div>
<div class="arch-arrow">&darr; Threading &darr;</div> <div class="arch-arrow">&darr; Threading &darr;</div>
<div class="arch-row"> <div class="arch-row">
<span class="arch-label">Opslag</span> <span class="arch-label">Storage</span>
<span class="arch-value">Gebruikers en chatgegevens worden server-side opgeslagen. Elke client krijgt een eigen thread voor non-blocking I/O.</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>
</div> </div>
<br><br> <br><br>
<div class="code-block" style="max-width:700px;"> <div class="code-block" style="max-width:700px;">
<span class="t-dim"># Vereenvoudigd overzicht</span><br><br> <span class="t-dim"># Simplified overview</span><br><br>
<span class="t-cyan">client.py</span> <span class="t-dim">&rarr;</span> Verbindt met server via socket<br> <span class="t-cyan">client.py</span> <span class="t-dim">&rarr;</span> Connects to server via socket<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="t-dim">&rarr;</span> Login / Signup prompt<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="t-dim">&rarr;</span> Login / Signup prompt<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="t-dim">&rarr;</span> Chat selectie menu<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="t-dim">&rarr;</span> Chat selection menu<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="t-dim">&rarr;</span> Berichten versturen &amp; ontvangen<br><br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="t-dim">&rarr;</span> Send &amp; receive messages<br><br>
<span class="t-cyan">server.py</span> <span class="t-dim">&rarr;</span> Luistert op TCP poort<br> <span class="t-cyan">server.py</span> <span class="t-dim">&rarr;</span> Listens on TCP port<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="t-dim">&rarr;</span> Nieuwe thread per client<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="t-dim">&rarr;</span> New thread per client<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="t-dim">&rarr;</span> Authenticatie afhandeling<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="t-dim">&rarr;</span> Authentication handling<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="t-dim">&rarr;</span> Bericht broadcast naar kanaal &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="t-dim">&rarr;</span> Message broadcast to channel
</div> </div>
</div> </div>
</section> </section>
<!-- FOOTER --> <!-- FOOTER -->
<footer> <footer>
<p>Terminal Chat &mdash; Gemaakt met Python &amp; TCP Sockets</p> <p>Terminal Chat &mdash; Built with Python &amp; TCP Sockets</p>
<p style="margin-top: 8px;"> <p style="margin-top: 8px;">
<a href="#installatie">Installeren</a> &nbsp;&middot;&nbsp; <a href="#installatie">Install</a> &nbsp;&middot;&nbsp;
<a href="#docs">Documentatie</a> &nbsp;&middot;&nbsp; <a href="#docs">Documentation</a> &nbsp;&middot;&nbsp;
<a href="#features">Features</a> <a href="#features">Features</a>
</p> </p>
</footer> </footer>
@@ -683,21 +698,156 @@
} }
// === TERMINAL ANIMATION === // === 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() { function animateTerminal() {
const lines = document.querySelectorAll('.terminal-line'); const termBody = document.getElementById('terminalBody');
const observer = new IntersectionObserver((entries) => { const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => { entries.forEach(entry => {
if (entry.isIntersecting) { if (entry.isIntersecting) {
lines.forEach(line => { startLoginPhase();
const delay = parseInt(line.getAttribute('data-delay')) || 0;
setTimeout(() => line.classList.add('visible'), delay);
});
observer.unobserve(entry.target); observer.unobserve(entry.target);
} }
}); });
}, { threshold: 0.3 }); }, { threshold: 0.3 });
observer.observe(document.getElementById('terminalBody')); 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(); animateTerminal();
// === FADE-IN SECTIONS === // === FADE-IN SECTIONS ===