Закрытый архив писем в пиксельном стиле, который живёт на космическом фоне. Тексты зашифрованы и расшифровываются прямо в браузере. Сервера нет, только статика.
| 🔐 Вход по коду доступа | Письма лежат в letters.enc и расшифровываются в браузере. В коде страницы текстов нет, после перезагрузки они пропадают из памяти. |
| 💾 «Запомнить меня» | По желанию на устройстве сохраняется ключ расшифровки (не сам код и не письма). Кнопка «выйти» стирает его. |
| ⭐ Избранное | Пиксельная закладка в открытой заметке. Хранится только на устройстве. |
| По дате добавления, по алфавиту, по избранным. Выбор запоминается. | |
| 🌌 Живой космический фон | Звёзды, созвездия, планеты, чёрные дыры, туманности и летающие пиксели (подробности ниже). |
| 🎨 Тема, анимации, звук | Тёмная и светлая тема, отключение анимаций, звук нажатий. Всё спрятано в шестерёнку справа сверху. |
| 📱 Адаптив | Отдельная вёрстка для телефона: компактные кнопки, жесты. |
| 🧩 Пиксельный стиль | Шрифт WebPlus IBM MDA, значки нарисованы по пиксельной сетке. |
- Звёзды. Загораются прямо на экране (жёлтые, оранжевые, красные), с ореолом и лучами. Живут 10–30 секунд, перед концом краснеют и взрываются. Одновременно не больше трёх (на телефоне двух).
- Чёрные дыры. Пять настоящих: Стрелец A*, M87*, Лебедь X-1, TON 618 и Gaia BH1. С вращающимся аккреционным диском, линзированием и джетами (у M87* и Лебедя X-1). Под каждой подпись.
- Туманности. Самый нижний слой: мягкий движущийся газ без чётких границ, шесть приглушённых палитр.
- Созвездия. 50 настоящих созвездий, линии которых прорисовываются на экране.
- Планеты. Все восемь планет Солнечной системы в виде маленьких пиксельных спрайтов.
- Пиксели. Летающие точки, которые отталкиваются от курсора и притягиваются чёрными дырами.
Поддерживается небольшой набор тегов:
<v>выделение</v>
<u>подчёркивание</u>
<i>курсив</i>
<b>жирный</b>
<a href="https://example.com">ссылка</a> <!-- только http/https -->.
├── index.html # страница, экран загрузки, подробное описание в шапке
├── scripts.js # основной скрипт: вход, расшифровка, интерфейс, фон
├── style.css # оформление
├── 404.html # редирект на главную для несуществующих адресов
├── letters.enc # зашифрованные письма
├── fonts/
│ └── font.woff2 # шрифт
├── pics/
│ ├── pic.webp # аватарка
│ └── favicon.jpg # иконка вкладки
└── sounds/
└── click.mp3 # звук нажатия
- Из кода доступа через PBKDF2 (SHA-256) получается 256-битный ключ.
- Письма расшифровываются алгоритмом AES-GCM средствами Web Crypto API.
- Расшифрованные тексты живут только в памяти вкладки.
- Если включено «запомнить меня», в
localStorage(ключlk) кладётся именно ключ, а не код. Сменили код или пересобралиletters.enc— ключ перестанет подходить, и сайт снова попросит код.
Note
Файл letters.enc собирается скриптом private/encrypt.mjs. Параметр AAD (letters-v1) в скрипте сборки и в scripts.js должен совпадать.
Warning
Защита опирается на стойкость кода доступа. letters.enc лежит в открытом репозитории, поэтому короткий или простой код можно подобрать перебором.
Что где хранится на устройстве
| Ключ | Где | Что |
|---|---|---|
lk |
localStorage |
ключ расшифровки (только с галочкой «запомнить меня») |
fav |
localStorage / sessionStorage |
избранные заметки |
sort |
localStorage |
выбранная сортировка |
theme, motion, sound |
localStorage |
тема, анимации, звук |
Кнопка «выйти» стирает ключ и избранное.
Сайт статический, но письма загружаются через fetch, а Web Crypto работает только в защищённом контексте, поэтому открывать index.html двойным щелчком не получится. Нужен любой локальный сервер:
# Python
python3 -m http.server 8000
# или Node.js
npx serve .После этого откройте http://localhost:8000.
- Залейте файлы в репозиторий.
- Settings → Pages → Build and deployment: Source — Deploy from a branch, ветка
main, папка/ (root). - Через минуту-две сайт будет доступен по адресу
https://<ваш-ник>.github.io/<репозиторий>/.
Файл 404.html в корне автоматически перенаправляет любой несуществующий адрес на главную. Если репозиторий называется не notes, поправьте константу REPO в 404.html.
Tip
После правок в scripts.js или style.css увеличивайте число в ?v= у подключения в index.html, иначе браузеры могут показывать закэшированную версию.
- Чистые HTML, CSS и JavaScript без сборки, фреймворков и зависимостей
- Canvas 2D для фона (звёзды, планеты, чёрные дыры, туманности)
- Web Crypto API (PBKDF2 + AES-GCM)
- Web Audio API для звука нажатий
- Шрифт WebPlus IBM MDA в формате WOFF2
| Что | Лицензия |
|---|---|
| Код и оформление сайта (ibuzy projects) | MIT |
| Шрифт WebPlus IBM MDA | CC BY-SA 4.0 |
| Данные созвездий (из проекта d3-celestial, © 2015 Olaf Frohn) | BSD-3-Clause |
Полный текст уведомления BSD-3-Clause лежит в комментарии в начале index.html, его нужно сохранять при любых изменениях.
Сделано с любовью к звёздам и пикселям ✦ ibuzy projects