<!doctype html><html lang="uk"><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}}/uk/"> <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}}/uk/"> <meta property="og:image" content="https://{{DOMAIN}}/images/og.png"> <meta property="og:locale" content="uk_UA"> <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}}/uk/", "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> <a href="../ru/" lang="ru" hreflang="ru">Русский</a> <strong lang="uk" aria-current="page">Українська</strong> <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>й</span></span>і хвилястий текст, а також смайлики, намальовані достеменно так, як колись.</p> <a class="play" href="../play/?lang=uk">Увійти в чат</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=uk">Відкрити CaraChat</a></main><footer class="wrap">CaraChat – неофіційне відтворення, зроблене за допомогою JumPHP. Оригінальний аплет (net.spray.chat, 2002) і PHP-сервер « NewCaraChat » (2012) належать їхнім авторам.</footer></body></html>