<!doctype html><html lang="ru"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CaraChat – чат Caramail 2000-х, воссозданный на PHP (бесплатно, онлайн)</title> <meta name="description" content="CaraChat воссоздаёт на PHP чат-клиент Caramail 2002 года: комнаты, приватные диалоги, цветные ники, радужный и волнистый текст и оригинальные нарисованные смайлики. Бесплатно, в браузере."> <link rel="canonical" href="https://{{DOMAIN}}/ru/"> <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 – чат Caramail 2000-х"> <meta property="og:description" content="Комнаты, приваты, цвета, радуга и оригинальные смайлики: чат 2002 года, воссозданный на PHP."> <meta property="og:url" content="https://{{DOMAIN}}/ru/"> <meta property="og:image" content="https://{{DOMAIN}}/images/og.png"> <meta property="og:locale" content="ru_RU"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="CaraChat – чат Caramail 2000-х"> <meta name="twitter:description" content="Комнаты, приваты, цвета, радуга и оригинальные смайлики: чат 2002 года, воссозданный на 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": "Чат-клиент Caramail 2002 года, воссозданный на PHP с помощью JumPHP: комнаты, приваты, цвета, радужный и волнистый текст, оригинальные нарисованные смайлики.", "url": "https://{{DOMAIN}}/ru/", "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": "Как сделать смайлик?", "acceptedAnswer": {"@type": "Answer", "text": "Как в 2002 году: глаза, нос и рот, например :-) ;-) 8-) :o) или :#) для Деда Мороза. Нос обязателен. Цифра после смайлика меняет его цвет (:-)2), #c или #d добавляет руку. От #00 до #14 это рисунки: #13 это сердце."}}, {"@type": "Question", "name": "Нужен ли сервер?", "acceptedAnswer": {"@type": "Answer", "text": "Да: чат-сервер CaraChat Serveur (PHP, без базы данных) запускается в Docker на любой машине, после чего в окне подключения указывают его адрес и порт (4500)."}} ]} </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="Подмигивающий смайлик апплета" width="40" height="40"><strong>CaraChat</strong></div></header><main class="wrap"> <nav class="langs" aria-label="Языки"> <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> <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> <strong lang="ru" aria-current="page">Русский</strong> <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>Чат 2000-х снова с нами</h1> <p class="lead">CaraChat воссоздаёт на PHP чат-апплет Caramail 2002 года: комнаты, приваты, розовые и синие ники, <span class="rainbow"><span>р</span><span>а</span><span>д</span><span>у</span><span>ж</span><span>н</span><span>ы</span><span>й</span></span>и волнистый текст, а также смайлики, нарисованные точно так же, как тогда.</p> <a class="play" href="../play/?lang=ru">Войти в чат</a> <figure> <img src="../images/chat.png" alt="Комната Accueil (Главная) в CaraChat: цветные фразы, смайлики, список присутствующих и вкладки" width="1024" height="700"> <figcaption>Комната: цветные фразы, радуга, смайлики, справа присутствующие и приват, мигающий оранжевым.</figcaption> </figure> <h2>Вкладки апплета</h2> <div class="shots"> <figure><img src="../images/rooms.png" alt="Вкладка Salons: постоянные комнаты, создание публичной или приватной комнаты" width="1024" height="700" loading="lazy"><figcaption>Salons (комнаты): постоянные комнаты и комнаты участников, создание комнаты.</figcaption></figure> <figure><img src="../images/search.png" alt="Вкладка Connecté(e)s: список тех, кто онлайн, и поиск по нику, возрасту, полу" width="1024" height="700" loading="lazy"><figcaption>Connecté(e)s (онлайн): поиск по нику или по городу, возрасту и полу.</figcaption></figure> <figure><img src="../images/private.png" alt="Приватный диалог с его настройками и палитрой специальных смайликов" width="1024" height="700" loading="lazy"><figcaption>Приватный диалог, его настройки и специальные смайлики.</figcaption></figure> <figure class="phone"><img src="../images/phone.png" alt="CaraChat на телефоне" width="390" height="760" loading="lazy"><figcaption>На телефоне.</figcaption></figure> </div> <h2>Что возвращается</h2> <div class="grid"> <div class="card"> <ul> <li><strong>Интерфейс апплета</strong>, перерисованный один в один: вкладки Salons (комнаты), Connecté(e)s (онлайн), Options и Ami(e)s (друзья), комната и по вкладке на каждый приват (не более 20), которая становится оранжевой, рамки « Dialogue » и « Membres du salon » (участники комнаты), « Message privé » (личное сообщение), « Pas de nouveaux PVs » (нет новых приватов), « Problème de comportement » (проблема с поведением).</li> <li><strong>И на телефоне</strong>, и на 14 языках (язык браузера, который можно сменить на вкладке Options).</li> <li><strong>Комнаты</strong> постоянные и созданные участниками, публичные или приватные; переполненная комната (40 человек) переливается в « Salon* ».</li> <li><strong>Приваты</strong>: двойной щелчок по нику или <code>/ник сообщение</code> из комнаты.</li> <li><strong>Поиск</strong> по нику или по городу, с возрастным диапазоном и полом.</li> <li><strong>Цвета</strong> (12, включая радугу) и размеры (включая волну), ники, окрашенные по профилю, ваш ник жирным, когда к вам обращаются.</li> <li><strong>Модерация</strong>: исключение из комнаты, вызов модератора, игнорирование кого-либо, « без новых приватов », занят.</li> </ul> </div> <figure> <img src="../images/login.png" alt="Окно подключения: ник, возраст, город, пол и сервер" width="520" height="447"> <figcaption>Подключение: ваш профиль и сервер.</figcaption> </figure> </div> <h2>Оригинальные смайлики</h2> <p>Это были не картинки, а код рисования: этот код прочитали в апплете и воспроизвели с точностью до пикселя. Глаза <code>:;8B%</code>, нос, определяющий голову <code>-o#!*$</code> (клоун, Дед Мороз, кружка, маска…), рот <code>)(DPO|</code>: <code>:-)</code>, <code>;-)</code>, <code>8-)</code>, <code>:o)</code>, <code>:#)</code>. Цифра окрашивает лицо (<code>:-)2</code>), <code>#c</code> / <code>#d</code> добавляют руку, а с <code>#00</code> по <code>#14</code> это рисунки: бомба, плюшевый мишка, ёлка, дельфин, сердце <code>#13</code>… А 60 картинок палитры « Smileys » (гамбургер <code>@00</code>, сердце <code>@11</code>, торт <code>@09</code>…) взяты из оригинального <code>smiley.gif</code>.</p> <figure> <img src="../images/smileys.png" alt="Фразы из комнаты с нарисованными смайликами: лица, сердце, ёлка, нота" width="900" height="319"> </figure> <h2>Оригинальное руководство</h2> <p>Онлайн-справка по живому чату Caramail (1999), приведённая без изменений, на французском: <a href="../aide.html">что такое живой чат, создание публичных и приватных комнат, отправка личных сообщений (справка на французском)</a>.</p> <h2>Сервер</h2> <p>Сервер <strong>CaraChat Serveur</strong> переписан на PHP 8 по исходникам 2012 года, без базы данных, и работает в Docker на jumphp.net. Он говорит в точности на протоколе апплета (одна строка на кадр, поля разделены табуляцией) по TCP, как тогда, или по WebSocket на порту 443 (<code>wss://caramail.jumphp.net/ws</code>): соединение проходит везде, даже за межсетевым экраном.</p> <a class="play" href="../play/?lang=ru">Открыть CaraChat</a></main><footer class="wrap">CaraChat – неофициальное воссоздание, сделанное с помощью JumPHP. Оригинальный апплет (net.spray.chat, 2002) и PHP-сервер « NewCaraChat » (2012) принадлежат их авторам.</footer></body></html>