Полка и чтение
Читаю, хочу прочитать, прочитано, отложено. Страницы, оценка, даты и темы.
ДВОР / ДЛЯ СЕБЯ
Закрываешь книгу, а потом забываешь, что хотелось из неё забрать. Здесь можно оставить цитаты, свои мысли и отзыв — и найти их, даже если название книги уже не помнишь.
ПЕРВЫЙ УРОВЕНЬ / ГОТОВЫЙ ИНСТРУМЕНТ
Выше — рабочий вариант первого уровня. Листай полку стрелками и нажимай на книгу: в отдельном окне можно отмечать чтение, выписывать цитаты и вести заметки. Поиск ищет по всему дневнику, а не только по названиям. Записи сохраняются в браузере; для переноса на другой компьютер есть скачивание и загрузка файла.
Читаю, хочу прочитать, прочитано, отложено. Страницы, оценка, даты и темы.
Несколько цитат и заметок к одной книге, отдельный отзыв. Найти мысль, даже когда не помнишь книгу.
Книги, их объём и средняя оценка за месяц или год. Весь дневник можно скачать в JSON.
Скачай пять документов ниже и приложи их к запросу. Сам пример со страницы отправлять не нужно: задание, данные, поведение и оформление описаны в документах.
Собери браузерный читательский дневник «На полях» по пяти приложенным документам: 01-Задание.md, 02-Данные-и-логика.md, 03-Поиск-и-итоги.md, 04-Оформление.md и 05-Проверки.md. Реализуй книжную полку, которую можно листать влево и вправо без полосы прокрутки. Нажатие на книгу открывает окно с её статусом, прогрессом, оценкой, датами, темами, цитатами, заметками и отзывом. Добавь поиск по всем записям, фильтры, сортировку, итоги чтения, сохранение в браузере, экспорт и импорт JSON с проверкой данных. Поведение и проверки описаны в документах. Оформление возьми из приложенного документа 04. Шрифты подключи внешними ссылками с системной заменой. Картинки, если они нужны, подключай публичными ссылками; оформление из линий и текста или встроенный SVG можно оставить внутри HTML. Результат — один HTML со стилями и JavaScript внутри. Его должно быть можно открыть в браузере и выложить на GitHub Pages. Подготовь код для вставки в блок Т123 в Тильде. На телефоне нет горизонтальной прокрутки, на компьютере основной экран подходит для показа 16:9. Проверь действия из документа 05 в браузере, если инструменты доступны. Верни готовый HTML. Кратко укажи, что проверено; если проверка в браузере недоступна, прямо скажи об этом.
Функции, действия и правила первого уровня.
Что хранить, как связаны книги и записи, как переносить дневник.
Где ищем совпадения и как считаем чтение за месяц или год.
Готовый бумажный стиль. Можно изменить под себя.
Сценарии для проверки собранного дневника.
Полный список, включая неверные страницы, удаление всех книг и ошибки хранилища, — в «05-Проверки».
ВТОРОЙ УРОВЕНЬ / ВЫБРАТЬ ДОРАБОТКУ
Сначала собери и проверь первый уровень. Затем можно выбрать одну доработку или сделать обе. Ниже пример того, как они могут выглядеть. Это рисунок для обсуждения, а не работающий экран второго уровня.
Читаешь новую книгу и замечаешь: об этом уже было у другого автора. Связываешь две книги или две конкретные записи, оставляешь комментарий. Потом переходишь от одной мысли к другой.
Для начала достаточно списка связей. Темы уже есть в базе; подборки и карту с линиями можно добавить дальше.
Выбираешь цитату, настраиваешь бумагу, шрифт и подпись, скачиваешь картинку для поста, сторис или своего архива. Начать можно с пары шаблонов без обложки.
Если добавляешь обложку по ссылке, отдельно проверь скачивание: не каждый сервер разрешает использовать свою картинку в таком экспорте.
Приложи свой уже работающий HTML и документ второго уровня. В запросе оставь выбранный вариант. Сначала выясни, как новая функция будет работать с существующими данными; потом собирай и проверяй её в браузере.
Я прикладываю работающий HTML читательского дневника и документ «06-Связи-и-карточки.md». Хочу добавить: [выбери — связи между книгами и записями / карточки цитат / оба варианта]. Сначала изучи текущие данные и код, задай вопросы, которые влияют на поведение новой функции. После ответов доработай тот же HTML. Сохрани существующие книги и записи, подготовь перенос данных и расширь импорт/экспорт, если меняешь структуру. Проверь новые действия в браузере и повтори основные проверки первого уровня. Верни обновлённый HTML и укажи, что удалось проверить.
Для связей — переходы в обе стороны, удаление книги, перезагрузку и перенос через файл. Для карточек — кириллицу, длинную цитату, разные форматы и сам скачанный файл: размер, шрифт и текст должны совпадать с предпросмотром.
ТРЕТИЙ УРОВЕНЬ / ЧТЕНИЕ ВНУТРИ ДНЕВНИКА
Загружаешь EPUB, читаешь внутри дневника и выделяешь фрагмент. Его можно сохранить в цитаты с комментарием, а потом вернуться из записи к этому месту в книге.
Сначала собери дневник первого уровня. Второй уровень можно пропустить. Рисунок ниже показывает один вариант читалки. В дневнике выше её пока нет.
Нужно сохранить и книгу, и место каждой цитаты в тексте. Номер экрана не подходит: поменяешь шрифт — текст расположится иначе.
Можно использовать EPUB.js для чтения, JSZip для открытия файла и IndexedDB для хранения книги в браузере. Подробности есть в документе ниже.
Начни с EPUB: оглавление, размер текста, сохранение места, цитаты и возврат к ним. PDF и аудиокниги пока оставь на потом.
Приложи свой работающий HTML, документ третьего уровня и тестовый EPUB. Скопируй запрос ниже. После сборки проверь загрузку книги, чтение, сохранение цитаты и переход обратно в текст.
Я прикладываю работающий HTML дневника, документ «07-Читалка-EPUB.md» и тестовый EPUB. Добавь читалку: загрузку EPUB, оглавление, изменение размера текста и сохранение места. Выделенный текст можно сохранить в цитаты с комментарием, а из цитаты — вернуться к этому месту в книге. Книги хранятся в браузере. В экспорт дневника входят записи и сохранённое место, но не сами EPUB. Для чтения на другом устройстве пользователь загружает тот же файл книги. Если он выбрал другой файл, покажи понятную ошибку и дай выбрать снова. Удаление EPUB не удаляет цитаты и заметки. Читалка показывает процент прочитанного. Страницы и статус книги пользователь отмечает самостоятельно — читалка их не меняет. Изучи текущий код и документацию библиотек. За основу можно взять EPUB.js 0.3.93 и JSZip 3.10.1 — эту связку мы проверили. Доработай дневник, сохрани все прежние записи и возможность загрузить старый файл дневника. Если что-то в задании осталось неясным, спроси перед доработкой. Верни обновлённый HTML и подготовь код для вставки в блок Т123 в Тильде. Библиотеки для чтения EPUB подключи по ссылкам. Проверь действия из документа в браузере, если инструменты доступны. Кратко напиши, что проверено и какие ограничения остались. Если проверка в браузере недоступна, прямо скажи об этом.
Остальные проверки — в скачиваемом документе.