Page Flow
3-Page Reading Flow
বই দেখা থেকে পড়া পর্যন্ত সম্পূর্ণ navigation flow।
Page 01
Book Listing
book-listing.html
Page 02
Book Detail
book-detail.html
Page 03
Book Reader
book-reader.html
Direct Shortcut: Book listing card-এ book-mode-icon button আছে — সেটা press করলে Detail page skip করে সরাসরি Book Mode-এ Reader পেজে যাবে।
Tap the circle icon on any card thumbnail to jump straight to immersive Book Mode.
Page 1 of 3
Book Listing Page
সব বইয়ের grid। Search করো, card দেখো, পড়ো বা download করো। — book-listing.html
📚 Books & PDFs
Search books...
🇬🇧 EN
Electronics
Arduino Programming Guide
Embedded systems, C++, sensors...
Read
Download
🇧🇩 BN
Mathematics
Advanced Calculus Notes
Integrals, series, transforms...
Read
Download
Home
About
Projects
Studio
Contact
Content Header
Back button → Content Hub। Page title + subtitle। Sticky — scroll করলেও থাকে।
Search Bar
Real-time filter — title, summary, category, tags সব search করে। Data
books.json থেকে auto-load।Book Cover Thumbnail
Cover image থাকলে দেখায়, না থাকলে icon fallback। Language badge (🇬🇧 EN / 🇧🇩 বাং) নিচে।
Book Mode Icon
Cover-এর উপরে floating circle button। Tap → Reader page opens directly in Book Mode।
Book Info Strip
Category badge, title, meta (pages / file size / format), short description, tags।
Action Buttons
Read → Book Detail page। Download → PDF direct download। Haptic feedback on tap।
Data Source: Books load from
Content Studio/books-pdfs/books.json via async fetch. New books added on desktop automatically appear on mobile — no sync needed.
Desktop-এ books.json update করলে mobile-এ automatically আসে।
Page 2 of 3
Book Detail Page
বইয়ের সম্পূর্ণ তথ্য — cover, description, metadata, Download options। — book-detail.html
Sticky Header
Back button + book title সবসময় উপরে থাকে। Scroll করলেও header pin থাকে।
Hero Cover Section
Large book cover image with gradient overlay। Cover না থাকলে icon placeholder।
Full Metadata
Author, category, pages, file size, format, language, publish date — সব details।
Description & Tags
Full book summary/description। Tag chips — category, topics, skill level।
Read Button
Primary CTA — opens
book-reader.html with this book's PDF। Red gradient button।Download Section
Expandable download panel — tap header to expand। Direct PDF download link।
3D View Button
Alternative view mode option। Same reader page অন্য display style-এ খোলে।
Related Books
Same category-র অন্য books দেখায় section-এর নিচে। Cross-navigation।
Page 3 of 3
Book Reader Page
Immersive PDF reading experience — সরাসরি browser-এ পড়ো। — book-reader.html
Arduino Programming Guide
PDF iframe
Book Info
Title: Arduino Programming Guide
Author: Md Akhinoor
Pages: 320
Size: 4.2 MB
Lang: 🇬🇧 English
Cat: Electronics
12 / 320
Reader Header (3 Icon Buttons)
Book Mode toggle Info Panel Bookmark সেভ।
PDF Viewer (iframe)
Browser-native PDF rendering। Password-protected books আলাদাভাবে handle করা হয়।
Info Panel
Right side থেকে slide করে আসে। Title, Author, Pages, Size, Language, Category দেখায়। Info button দিয়ে toggle।
Page Navigation
Prev ◀ / Next ▶ buttons। Center-এ
12 / 320 format-এ page counter। Display: none থেকে JS-এ show করা হয়।Bookmark (localStorage)
Bookmark button tap → book ID localStorage-এ save হয়। App reopen করলেও bookmarked books মনে থাকে।
Swipe Hint
প্রথমবার reader খুললে swipe gesture hint দেখায়। Book Mode-এ
body.book-mode class যোগ হয়। Special Feature
Book Mode
Immersive full-reading experience — সব UI hide হয়ে শুধু বই থাকে।
Full Screen PDF
Book Mode activate → header আড়াল হয়, PDF পুরো screen নেয়।
body.book-mode CSS class।Swipe to Exit
Book Mode থেকে বের হতে swipe gesture বা top control button। Swipe hint first time দেখায়।
Book Mode Controls
#bookModeControls — exit button always visible Book Mode-এ। Floating control bar।Direct Entry
Listing card-এ tap করলে সরাসরি Book Mode-এ reader খোলে। Detail skip।
Data Structure
books.json Schema
প্রতিটি book entry-তে যা fields থাকে।
| Field | Type | Description |
|---|---|---|
id | string | Unique identifier — URL param হিসেবে pass হয় between pages |
title | string | Book name — card title ও reader header-এ দেখায় |
cover | string (path) | Cover image path। Falsy হলে icon fallback। |
category | string | Topic category — search এবং card badge-এ ব্যবহার |
author | string | Author name — detail এবং info panel-এ দেখায় |
pages | number | Page count — meta strip ও info panel-এ |
size | string | File size — "4.2 MB" format |
format | string | "PDF" — meta strip-এ |
language | "en"/"bn"/"bn-en" | Language badge: 🇬🇧 EN / 🇧🇩 বাং |
tags | string[] | Topic tags — search filter + card chips |
summary | string | Short description — card (truncated) ও detail page |
pdfPath | string (path) | PDF file path — reader iframe src |
date | string (ISO) | Published date — sort order (newest first) |
password | string (opt) | If set, PDF is password-protected — reader handles decryption |
File Map
Related Files
Books sub-system-এর সব files।
| File | Role |
|---|---|
mobile/content-studio/books-pdfs/book-listing.html | All books grid + search — main entry page |
mobile/content-studio/books-pdfs/book-listing.js | Fetches books.json, renders cards, search filter, haptic feedback |
mobile/content-studio/books-pdfs/book-detail.html | Single book info page — description, download, related books |
mobile/content-studio/books-pdfs/book-reader.html | PDF iframe viewer — book mode, info panel, page nav, bookmark |
Content Storage/books-pdfs/ | Actual PDF files stored here |
Content Studio/books-pdfs/books.json | Master books data — both desktop and mobile read from this |