<!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CaraChat – the 2000s Caramail chat, rebuilt in PHP (free, online)</title> <meta name="description" content="CaraChat rebuilds the 2002 Caramail chat client in PHP: rooms, private chats, colored nicknames, rainbow and wave text, and the original hand-drawn smileys. Free, in your browser."> <link rel="canonical" href="https://{{DOMAIN}}/en/"> <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 – the 2000s Caramail chat"> <meta property="og:description" content="Rooms, private chats, colors, rainbow and the original smileys: the 2002 chat rebuilt in PHP."> <meta property="og:url" content="https://{{DOMAIN}}/en/"> <meta property="og:image" content="https://{{DOMAIN}}/images/og.png"> <meta property="og:locale" content="en_US"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="CaraChat – the 2000s Caramail chat"> <meta name="twitter:description" content="Rooms, private chats, colors, rainbow and the original smileys: the 2002 chat rebuilt in PHP."> <meta name="twitter:image" content="https://{{DOMAIN}}/images/og.png"> <script type="application/ld+json">{ "@context": "https://schema.org", "@type": "WebApplication", "name": "CaraChat", "description": "The 2002 Caramail chat client rebuilt in PHP with JumPHP: rooms, private chats, colors, rainbow and wave text, original hand-drawn smileys.", "url": "https://{{DOMAIN}}/en/", "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": "How do I make a smiley?", "acceptedAnswer": {"@type": "Answer", "text": "Just like in 2002: eyes, a nose and a mouth, for example :-) ;-) 8-) :o) or :#) for Santa Claus. The nose is mandatory. A digit after the smiley changes its color (:-)2), #c or #d adds a hand. #00 to #14 are drawings: #13 is a heart."}}, {"@type": "Question", "name": "Do I need a server?", "acceptedAnswer": {"@type": "Answer", "text": "Yes: the CaraChat Serveur chat server (PHP, no database) runs in Docker on any machine, then you enter its address and port (4500) in the login window."}} ]} </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="The winking smiley of the applet" width="40" height="40"><strong>CaraChat</strong></div></header><main class="wrap"> <nav class="langs" aria-label="Languages"> <a href="../" lang="fr" hreflang="fr">Français</a> <strong lang="en" aria-current="page">English</strong> <a href="../es/" lang="es" hreflang="es">Español</a> <a href="../de/" lang="de" hreflang="de">Deutsch</a> <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>The 2000s chat is back</h1> <p class="lead">CaraChat rebuilds the 2002 Caramail chat applet in PHP: the rooms, the private chats, the pink and blue nicknames, the <span class="rainbow"><span>r</span><span>a</span><span>i</span><span>n</span><span>b</span><span>o</span><span>w</span></span>text and the wave, and the smileys drawn exactly like back then.</p> <a class="play" href="../play/?lang=en">Enter the chat</a> <figure> <img src="../images/chat.png" alt="The Accueil (Home) room of CaraChat: colored sentences, smileys, list of people present and tabs" width="1024" height="700"> <figcaption>A room: colored sentences, the rainbow, smileys, who is there on the right and a private chat blinking orange.</figcaption> </figure> <h2>The applet's tabs</h2> <div class="shots"> <figure><img src="../images/rooms.png" alt="The Salons tab: the permanent rooms, creating a public or private room" width="1024" height="700" loading="lazy"><figcaption>Salons (rooms): the permanent rooms and the members' rooms, creating a room.</figcaption></figure> <figure><img src="../images/search.png" alt="The Connecté(e)s tab: the list of people online and the search by nickname, age, gender" width="1024" height="700" loading="lazy"><figcaption>Connecté(e)s (online): search by nickname or by city, age and gender.</figcaption></figure> <figure><img src="../images/private.png" alt="A private chat with its options and the palette of special smileys" width="1024" height="700" loading="lazy"><figcaption>A private chat, its options and the special smileys.</figcaption></figure> <figure class="phone"><img src="../images/phone.png" alt="CaraChat on a phone" width="390" height="760" loading="lazy"><figcaption>On a phone.</figcaption></figure> </div> <h2>What's back</h2> <div class="grid"> <div class="card"> <ul> <li><strong>The applet's interface</strong>, redrawn identically: Salons (rooms), Connecté(e)s (online), Options and Ami(e)s (friends) tabs, the room and one tab per private chat (20 at most) that turns orange, « Dialogue » and « Membres du salon » (room members) frames, « Message privé » (private message), « Pas de nouveaux PVs » (no new private chats), « Problème de comportement » (behavior problem).</li> <li><strong>On phones</strong> too, and in 14 languages (your browser's, changeable in the Options tab).</li> <li><strong>Rooms</strong>, permanent ones and members' ones, public or private; a full room (40) overflows into « Salon* ».</li> <li><strong>Private chats</strong>: double-click a nickname, or <code>/nickname message</code> from the room.</li> <li><strong>Search</strong> by nickname or by city, with age range and gender.</li> <li><strong>Colors</strong> (12, including the rainbow) and sizes (including the wave), nicknames colored by profile, your nickname in bold when someone talks to you.</li> <li><strong>Moderation</strong>: kicking, calling a moderator, ignoring someone, « no new private chats », busy.</li> </ul> </div> <figure> <img src="../images/login.png" alt="The login window: nickname, age, city, gender and server" width="520" height="447"> <figcaption>Login: your profile and the server.</figcaption> </figure> </div> <h2>The original smileys</h2> <p>They were not images but drawing code: that code was read from the applet and replayed pixel for pixel. Eyes <code>:;8B%</code>, a nose that picks the head <code>-o#!*$</code> (clown, Santa, beer mug, mask…), a mouth <code>)(DPO|</code>: <code>:-)</code>, <code>;-)</code>, <code>8-)</code>, <code>:o)</code>, <code>:#)</code>. A digit colors the face (<code>:-)2</code>), <code>#c</code> / <code>#d</code> add a hand, and <code>#00</code> to <code>#14</code> are drawings: bomb, teddy bear, fir tree, dolphin, heart <code>#13</code>… And the 60 pictures of the « Smileys » palette (the hamburger <code>@00</code>, the heart <code>@11</code>, the cake <code>@09</code>…) come from the original <code>smiley.gif</code>.</p> <figure> <img src="../images/smileys.png" alt="Room sentences with the drawn smileys: faces, heart, fir tree, musical note" width="900" height="319"> </figure> <h2>The original user guide</h2> <p>The online help of Caramail's live chat (1999), reproduced as is, in French: <a href="../aide.html">what live chat is, creating public or private rooms, sending private messages (help in French)</a>.</p> <h2>The server</h2> <p>The <strong>CaraChat Serveur</strong> server is rewritten in PHP 8 from the 2012 sources, without a database, and runs in Docker on jumphp.net. It speaks exactly the applet's protocol (one line per frame, fields separated by tabs), over TCP like back then or over WebSocket on port 443 (<code>wss://caramail.jumphp.net/ws</code>): the connection goes through anywhere, even behind a firewall.</p> <a class="play" href="../play/?lang=en">Open CaraChat</a></main><footer class="wrap">CaraChat is an unofficial recreation, made with JumPHP. The original applet (net.spray.chat, 2002) and the PHP server « NewCaraChat » (2012) belong to their authors.</footer></body></html>