<!doctype html><html lang="de"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CaraChat – der Caramail-Chat der 2000er, neu in PHP gebaut (kostenlos, online)</title> <meta name="description" content="CaraChat baut den Caramail-Chat-Client von 2002 in PHP nach: Räume, Privatchats, bunte Nicknames, Regenbogen- und Wellentext und die original gezeichneten Smileys. Kostenlos, im Browser."> <link rel="canonical" href="https://{{DOMAIN}}/de/"> <link rel="alternate" hreflang="fr" href="https://{{DOMAIN}}/"> <link rel="alternate" hreflang="en" href="https://{{DOMAIN}}/en/"> <link rel="alternate" hreflang="es" href="https://{{DOMAIN}}/es/"> <link rel="alternate" hreflang="de" href="https://{{DOMAIN}}/de/"> <link rel="alternate" hreflang="it" href="https://{{DOMAIN}}/it/"> <link rel="alternate" hreflang="pt" href="https://{{DOMAIN}}/pt/"> <link rel="alternate" hreflang="nl" href="https://{{DOMAIN}}/nl/"> <link rel="alternate" hreflang="pl" href="https://{{DOMAIN}}/pl/"> <link rel="alternate" hreflang="ru" href="https://{{DOMAIN}}/ru/"> <link rel="alternate" hreflang="uk" href="https://{{DOMAIN}}/uk/"> <link rel="alternate" hreflang="tr" href="https://{{DOMAIN}}/tr/"> <link rel="alternate" hreflang="ja" href="https://{{DOMAIN}}/ja/"> <link rel="alternate" hreflang="zh" href="https://{{DOMAIN}}/zh/"> <link rel="alternate" hreflang="ko" href="https://{{DOMAIN}}/ko/"> <link rel="alternate" hreflang="x-default" href="https://{{DOMAIN}}/"> <link rel="icon" href="../images/favicon.png"> <meta property="og:type" content="website"> <meta property="og:title" content="CaraChat – der Caramail-Chat der 2000er"> <meta property="og:description" content="Räume, Privatchats, Farben, Regenbogen und die Original-Smileys: der Chat von 2002, neu in PHP gebaut."> <meta property="og:url" content="https://{{DOMAIN}}/de/"> <meta property="og:image" content="https://{{DOMAIN}}/images/og.png"> <meta property="og:locale" content="de_DE"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="CaraChat – der Caramail-Chat der 2000er"> <meta name="twitter:description" content="Räume, Privatchats, Farben, Regenbogen und die Original-Smileys: der Chat von 2002, neu in PHP gebaut."> <meta name="twitter:image" content="https://{{DOMAIN}}/images/og.png"> <script type="application/ld+json">{ "@context": "https://schema.org", "@type": "WebApplication", "name": "CaraChat", "description": "Der Caramail-Chat-Client von 2002, mit JumPHP in PHP nachgebaut: Räume, Privatchats, Farben, Regenbogen- und Wellentext, original gezeichnete Smileys.", "url": "https://{{DOMAIN}}/de/", "applicationCategory": "CommunicationApplication", "operatingSystem": "Web browser, Linux, Windows, macOS", "image": "https://{{DOMAIN}}/images/og.png", "screenshot": ["https://{{DOMAIN}}/images/chat.png", "https://{{DOMAIN}}/images/rooms.png", "https://{{DOMAIN}}/images/search.png", "https://{{DOMAIN}}/images/private.png", "https://{{DOMAIN}}/images/phone.png", "https://{{DOMAIN}}/images/login.png"], "isAccessibleForFree": true, "offers": {"@type": "Offer", "price": "0", "priceCurrency": "EUR"}, "potentialAction": {"@type": "UseAction", "target": "https://{{DOMAIN}}/play/"}} </script> <script type="application/ld+json">{ "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [ {"@type": "Question", "name": "Wie macht man einen Smiley?", "acceptedAnswer": {"@type": "Answer", "text": "Wie 2002: Augen, Nase und Mund, zum Beispiel :-) ;-) 8-) :o) oder :#) für den Weihnachtsmann. Die Nase ist Pflicht. Eine Ziffer nach dem Smiley ändert seine Farbe (:-)2), #c oder #d fügt eine Hand hinzu. #00 bis #14 sind Zeichnungen: #13 ist ein Herz."}}, {"@type": "Question", "name": "Braucht man einen Server?", "acceptedAnswer": {"@type": "Answer", "text": "Ja: Der Chat-Server CaraChat Serveur (PHP, ohne Datenbank) läuft in Docker auf jedem beliebigen Rechner; danach gibt man seine Adresse und seinen Port (4500) im Anmeldefenster an."}} ]} </script> <style> :root { --gris: #c0c0c0; --bleu: #0000ff; --nuit: #1a1a8c; --rose: #ff00c8; } * { box-sizing: border-box; } body { margin: 0; font-family: Helvetica, Arial, sans-serif; background: var(--gris); color: #000; line-height: 1.5; } header { background: #404040; color: #fff; padding: 12px 16px; } header .wrap { display: flex; align-items: center; gap: 12px; } header img { width: 40px; height: 40px; image-rendering: pixelated; } header strong { font-size: 1.4rem; color: #fff; } .wrap { max-width: 1040px; margin: 0 auto; } main { padding: 0 16px 40px; } .langs { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; margin: 10px 0 0; padding: 0; } .langs a { color: var(--nuit); } h1 { color: var(--bleu); font-size: 2.2rem; margin: 28px 0 8px; } h2 { color: var(--nuit); border-bottom: 2px solid #808080; padding-bottom: 4px; margin-top: 40px; } .lead { font-size: 1.15rem; max-width: 760px; } .play { display: inline-block; background: var(--bleu); color: #fff; font-weight: bold; font-size: 1.25rem; padding: 14px 28px; border-radius: 6px; text-decoration: none; margin: 12px 0 24px; } .play:hover { background: var(--nuit); } figure { margin: 0; background: #fff; border: 1px solid #808080; padding: 6px; } figure img { display: block; width: 100%; height: auto; } figcaption { font-size: .9rem; color: #646464; padding: 6px 2px 0; } .grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; } .card { background: #fff; border: 1px solid #808080; padding: 12px 16px; } code { background: #eeeeff; padding: 1px 4px; border-radius: 3px; } .help h3 { color: #990000; font-size: 1.05rem; margin: 18px 0 6px; } .help .note { color: #646464; font-size: .9rem; } .rainbow span:nth-child(9n+1) { color: #ff00c8 } .rainbow span:nth-child(9n+2) { color: #6e265f } .rainbow span:nth-child(9n+3) { color: #7d0000 } .rainbow span:nth-child(9n+4) { color: #1a1a8c } .rainbow span:nth-child(9n+5) { color: #0000ff } .rainbow span:nth-child(9n+6) { color: #147300 } .rainbow span:nth-child(9n+7) { color: #9b9b14 } .rainbow span:nth-child(9n+8) { color: #ff9d00 } .rainbow span:nth-child(9n) { color: #ff0000 } .shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .shots .phone img { max-width: 260px; margin: 0 auto; } @media (max-width: 720px) { .shots { grid-template-columns: 1fr; } } footer { font-size: .85rem; color: #404040; padding: 24px 16px; border-top: 1px solid #808080; } @media (max-width: 720px) { .grid { grid-template-columns: 1fr; } h1 { font-size: 1.7rem; } } </style></head><body><header><div class="wrap"><img src="../images/favicon.png" alt="Der zwinkernde Smiley des Applets" width="40" height="40"><strong>CaraChat</strong></div></header><main class="wrap"> <nav class="langs" aria-label="Sprachen"> <a href="../" lang="fr" hreflang="fr">Français</a> <a href="../en/" lang="en" hreflang="en">English</a> <a href="../es/" lang="es" hreflang="es">Español</a> <strong lang="de" aria-current="page">Deutsch</strong> <a href="../it/" lang="it" hreflang="it">Italiano</a> <a href="../pt/" lang="pt" hreflang="pt">Português</a> <a href="../nl/" lang="nl" hreflang="nl">Nederlands</a> <a href="../pl/" lang="pl" hreflang="pl">Polski</a> <a href="../ru/" lang="ru" hreflang="ru">Русский</a> <a href="../uk/" lang="uk" hreflang="uk">Українська</a> <a href="../tr/" lang="tr" hreflang="tr">Türkçe</a> <a href="../ja/" lang="ja" hreflang="ja">日本語</a> <a href="../zh/" lang="zh" hreflang="zh">中文</a> <a href="../ko/" lang="ko" hreflang="ko">한국어</a> </nav> <h1>Der Chat der 2000er ist zurück</h1> <p class="lead">CaraChat baut das Caramail-Chat-Applet von 2002 in PHP nach: die Räume, die Privatchats, die rosa und blauen Nicknames, den Text in <span class="rainbow"><span>R</span><span>e</span><span>g</span><span>e</span><span>n</span><span>b</span><span>o</span><span>g</span><span>e</span><span>n</span><span>f</span><span>a</span><span>r</span><span>b</span><span>e</span><span>n</span></span>und den Wellentext sowie die Smileys, genau so gezeichnet wie damals.</p> <a class="play" href="../play/?lang=de">Zum Chat</a> <figure> <img src="../images/chat.png" alt="Der Raum Accueil (Startseite) von CaraChat: farbige Sätze, Smileys, Liste der Anwesenden und Reiter" width="1024" height="700"> <figcaption>Ein Raum: farbige Sätze, der Regenbogen, Smileys, rechts die Anwesenden und ein Privatchat, der orange blinkt.</figcaption> </figure> <h2>Die Reiter des Applets</h2> <div class="shots"> <figure><img src="../images/rooms.png" alt="Der Reiter Salons: die dauerhaften Räume, Erstellen eines öffentlichen oder privaten Raums" width="1024" height="700" loading="lazy"><figcaption>Salons (Räume): die dauerhaften Räume und die der Mitglieder, Erstellen eines Raums.</figcaption></figure> <figure><img src="../images/search.png" alt="Der Reiter Connecté(e)s: die Liste der Online-Nutzer und die Suche nach Nickname, Alter, Geschlecht" width="1024" height="700" loading="lazy"><figcaption>Connecté(e)s (Online): Suche nach Nickname oder nach Stadt, Alter und Geschlecht.</figcaption></figure> <figure><img src="../images/private.png" alt="Ein Privatdialog mit seinen Optionen und der Palette der Spezial-Smileys" width="1024" height="700" loading="lazy"><figcaption>Ein Privatdialog, seine Optionen und die Spezial-Smileys.</figcaption></figure> <figure class="phone"><img src="../images/phone.png" alt="CaraChat auf einem Smartphone" width="390" height="760" loading="lazy"><figcaption>Auf dem Smartphone.</figcaption></figure> </div> <h2>Was zurückkommt</h2> <div class="grid"> <div class="card"> <ul> <li><strong>Die Oberfläche des Applets</strong>, identisch nachgezeichnet: Reiter Salons (Räume), Connecté(e)s (Online), Options und Ami(e)s (Freunde), der Raum und ein Reiter pro Privatchat (höchstens 20), der orange wird, die Rahmen « Dialogue » und « Membres du salon » (Raummitglieder), « Message privé » (Privatnachricht), « Pas de nouveaux PVs » (keine neuen Privatchats), « Problème de comportement » (Verhaltensproblem).</li> <li><strong>Auch auf dem Smartphone</strong> und in 14 Sprachen (die des Browsers, änderbar im Reiter Options).</li> <li><strong>Die Räume</strong>, dauerhafte und die der Mitglieder, öffentlich oder privat; ein voller Raum (40) läuft in « Salon* » über.</li> <li><strong>Die Privatchats</strong>: Doppelklick auf einen Nickname oder <code>/nickname Nachricht</code> im Raum.</li> <li><strong>Die Suche</strong> nach Nickname oder nach Stadt, mit Altersspanne und Geschlecht.</li> <li><strong>Die Farben</strong> (12, darunter der Regenbogen) und die Größen (darunter die Welle), je nach Profil gefärbte Nicknames, dein Nickname fett, wenn man dich anspricht.</li> <li><strong>Die Moderation</strong>: Rauswurf, Moderator rufen, jemanden ignorieren, « keine neuen Privatchats », beschäftigt.</li> </ul> </div> <figure> <img src="../images/login.png" alt="Das Anmeldefenster: Nickname, Alter, Stadt, Geschlecht und Server" width="520" height="447"> <figcaption>Die Anmeldung: dein Profil und der Server.</figcaption> </figure> </div> <h2>Die Original-Smileys</h2> <p>Das waren keine Bilder, sondern Zeichencode: Dieser Code wurde aus dem Applet ausgelesen und pixelgenau nachgespielt. Augen <code>:;8B%</code>, eine Nase, die den Kopf bestimmt <code>-o#!*$</code> (Clown, Weihnachtsmann, Bierkrug, Maske…), ein Mund <code>)(DPO|</code>: <code>:-)</code>, <code>;-)</code>, <code>8-)</code>, <code>:o)</code>, <code>:#)</code>. Eine Ziffer färbt das Gesicht (<code>:-)2</code>), <code>#c</code> / <code>#d</code> fügen eine Hand hinzu, und <code>#00</code> bis <code>#14</code> sind Zeichnungen: Bombe, Teddybär, Tannenbaum, Delfin, Herz <code>#13</code>… Und die 60 Bilder der Palette « Smileys » (der Hamburger <code>@00</code>, das Herz <code>@11</code>, der Kuchen <code>@09</code>…) stammen aus der originalen <code>smiley.gif</code>.</p> <figure> <img src="../images/smileys.png" alt="Sätze aus dem Raum mit den gezeichneten Smileys: Gesichter, Herz, Tannenbaum, Musiknote" width="900" height="319"> </figure> <h2>Die originale Anleitung</h2> <p>Die Online-Hilfe zum Live-Chat von Caramail (1999), unverändert übernommen, auf Französisch: <a href="../aide.html">was ein Live-Chat ist, öffentliche oder private Räume erstellen, Privatnachrichten senden (Hilfe auf Französisch)</a>.</p> <h2>Der Server</h2> <p>Der Server <strong>CaraChat Serveur</strong> ist aus den Quellen von 2012 in PHP 8 neu geschrieben, kommt ohne Datenbank aus und läuft in Docker auf jumphp.net. Er spricht genau das Protokoll des Applets (eine Zeile pro Frame, durch Tabulatoren getrennte Felder), über TCP wie damals oder über WebSocket auf Port 443 (<code>wss://caramail.jumphp.net/ws</code>): Die Verbindung kommt überall durch, sogar hinter einer Firewall.</p> <a class="play" href="../play/?lang=de">CaraChat öffnen</a></main><footer class="wrap">CaraChat ist ein inoffizieller Nachbau, gemacht mit JumPHP. Das ursprüngliche Applet (net.spray.chat, 2002) und der PHP-Server « NewCaraChat » (2012) gehören ihren Autoren.</footer></body></html>