ReadShelf

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Create a responsive, browser-based personal PDF library and reading app titled “ReadShelf.” It is a calm, polished library interface rather than an arcade game. Use a warm off-white background (#f4f1eb), dark charcoal text, muted gray secondary text, teal-green accent buttons and branding (#1e6b63), subtle beige borders, rounded cards, and soft shadows. Use a clean modern system sans-serif font with bold, tightly letter-spaced headings.

The initial desktop layout has a 72px top header, a left navigation sidebar about 238px wide, and a scrollable main content area. The header contains a teal rounded-square book/shelf mark with a white glyph, the bold word “ReadShelf,” a search field with a magnifying-glass glyph and placeholder “Search your library,” a “＋ Library” button, and a prominent “Import PDF” button. The sidebar has Browse navigation: “All books” with a count, “Recently added,” “Favorites” with a count, and “Shelves,” followed by a “My shelves” area and a dashed-outline “＋ New shelf” button. The active navigation item has a pale gray-beige rounded background.

The main empty-library screen should match the provided visual: a hero section with teal uppercase eyebrow text “YOUR READING ROOM,” a large “All books” heading, the subtitle “Import PDFs and keep every title in one calm place.”, and a large teal “＋ Import a PDF” button. Below it, show a pale green/white dashed rounded drop zone with an upload arrow icon, bold “Drop PDFs here,” the text “Files stay in this browser on this device.”, and a teal “Choose files” button. Accept multiple PDF files through a hidden file picker and drag-and-drop. Reject non-PDF files with a toast message. Below, show “Your collection,” a sort dropdown initially set to “Recently added,” and an empty dashed rounded panel with a small outlined glyph, “No books here yet,” and “Import a PDF to start building your library.”

Implement real library interactions. When PDFs are imported, store the file blobs locally in browser IndexedDB so books persist on that device. Derive each title from the filename by removing the .pdf extension and replacing underscores/hyphens with spaces; use “Untitled PDF” for an empty name and “Imported PDF” as author metadata. Also support a bundled/local-book manifest containing an example entry titled “Add a PDF to the books folder,” author “Local book,” and path “./books/example.pdf”; if its PDF is unavailable, explain via a toast that the PDF should be placed in the books folder and books.json updated.

Render imported books in a responsive card grid. Each card has a rounded cover with a deterministic colorful gradient selected from teal, orange, blue, or violet based on the title, a small “PDF book” label, a large title, and “Unsorted” until organized. Under the cover show the title, author/date metadata such as “Imported PDF · Today,” and buttons “Read” and “Organize.” Put a circular star button over the cover to toggle favorite status. Favorite changes persist locally. Support sorting by Recently added, Title A–Z, and Favorites first. Search filters by title or author as the user types. Show toast notifications for imports and other actions.

Implement the views shown by the navigation. “Recently added” sorts newest first and limits the display to 12 books. “Favorites” filters to favorited books. “Shelves” initially displays shelf cards rather than books; each shelf card has a colored top spine, shelf name, book count, and a short preview of up to three book titles, and is clickable to browse that shelf. Users can create a shelf through “＋ Library,” “＋ New shelf,” or the shelf view’s “＋ Create shelf” button using a name prompt. Store shelf names in localStorage. Organizing a book opens a modal titled “Organize book,” shows the book title, and presents shelf buttons; selecting a shelf assigns the book to it and persists the assignment. Clicking a shelf in the sidebar or shelf card filters the main book grid to that shelf and updates headings/subtitle. Empty views use the same calm dashed empty panel with context-appropriate messaging.

Clicking Read opens a full-screen dark translucent overlay with a centered rounded reader panel. The reader header contains a “← Library” close button, the book title, previous/next arrow controls, a page label such as “Pages 1–2 of N” for desktop spreads, a “Download” button, and reader utilities. The PDF itself should be displayed in an offline-capable embedded/document reader from the stored blob or local path, with a dark gray reading frame and white PDF pages. On desktop, render two pages side by side when possible; on narrow screens render one page. Support previous/next navigation, left/right keyboard arrows, Escape to close, and horizontal swipe gestures. Include bookmark and “Go to bookmark” controls when using the custom paginated reader, and persist the bookmarked page on the book. Include a bottom “Page timer” bar with “Auto-turn: Off,” an indicated “3 seconds” label, and a toggle; the implementation may advance automatically on its timer. Include a “Flip-O-Rama” control for rapidly alternating between the current and next spread when the custom reader is active. Make page changes animate with a subtle horizontal slide/fade/rotation effect.

Add a floating teal gear button at the bottom-right. Its Settings modal has rows for a “Landscape reading” toggle, a Full screen action, and an “Android APK” Guide action. Landscape reading should switch the reader to a wider layout and attempt orientation locking when supported; fullscreen should use the browser fullscreen API and change the button label between Enter and Exit. The Android guide modal explains that the browser cannot compile an APK and displays these Capacitor commands in a code block: npm init -y; npm install @capacitor/core @capacitor/cli @capacitor/android; npx cap init ReadShelf com.readshelf.app --web-dir .; npx cap add android; npx cap copy; npx cap open android. Include close buttons and allow clicking modal backdrops to dismiss. Use compact toast messages near the bottom center.

Make the design responsive. At widths below about 760px, use a 62px header, hide the search and secondary header button, reduce the sidebar to a narrow icon rail, hide sidebar text/counts/shelf list, make hero import full width, stack/wrap the drop zone, and use a two-column book grid. The reader becomes edge-to-edge with a single-page layout. Preserve touch-friendly controls, rounded corners, accessibility labels, and the overall quiet reading-room aesthetic. Do not add unrelated gameplay, scoring, combat, animation, or invented content; the core experience is importing, organizing, favoriting, searching, and reading PDFs offline.