Build a Digital Booklet Gift Maker With One Prompt, Then Gift It Free or Sell It With Razorpay

Build me a "booklet gift maker": a web page with an editor on the left and a live book on
the right, where I compose a small photo booklet and export it as ONE self-contained .html
file I can send to someone as a gift.

Work only inside the current folder. Plain HTML, CSS and JavaScript — no framework, no build
step, no backend, no npm install. Serve it over a local static server, never file://.

PART 1 — THE BOOK AND THE PAGE TURN
- A spread is one element with the aspect ratio 1280x720, drawn as an open book: cream paper
  with curved outer edges, a darker gutter down the middle, and a soft shadow underneath.
  Clip the paper with an SVG clipPath using clipPathUnits="objectBoundingBox" so it scales.
- Turning a page must look like paper, not a slide. Build it this way:
  * .sb-flap is a 50%-wide leaf holding two faces with backface-visibility:hidden — the old
    page on the front, the new page on the back — rotating rotateY(±180deg) over 0.85s with
    the container at perspective:2600px, transform-origin on the gutter.
  * Underneath it, the half that is NOT turning keeps showing the old page and fades out at
    70% of the turn, so the swap happens exactly as the leaf lands.
  * The half the leaf uncovers fades in beneath it.
  * Each half is a 50%-wide window with overflow:clip holding a 200%-wide copy of a spread,
    offset by margin-left:-100% for the right half. That way either half of any page is
    addressable without slicing images.
- All page content is positioned in PERCENTAGES of the spread, and every decorative size is
  in cqw, so a page looks identical at any width — including on the turning leaf. Put
  container-type:inline-size on the spread and font-size:1cqw on its CHILDREN, never on the
  spread itself (container units used on the container resolve against the viewport).

PART 2 — COVERS, AND THE BOOK BEING SHUT
- The first page is a front cover and the last is a back cover: cloth boards, not paper, with
  the title on the front board, "from <name>" under it, and a blind-stamped ring on the other
  board. The back cover mirrors the front and carries a closing line.
- The book must START CLOSED, everywhere — on first load, in preview, and in the exported
  file. Only the front board faces the reader, centred, with the page block visible at the
  fore-edge. Clicking it opens the case: the far board swings out on its hinge while the book
  widens into a spread. Clicking the near board shuts it again.
- Paint covers as two hinged halves (transform-origin on the gutter, backface-visibility
  hidden so the folded board disappears behind the other). Interior pages stay a single
  element — splitting them would duplicate every item.

PART 3 — THE EDITOR
Left panel, in three tabs so every control sits next to the thing it changes:
- COVER: title + its typeface, "signed by" + its typeface, front cover colour, back cover
  colour, closing words, and a "show it closed" toggle.
- PAGES: photo tray, page strip, arrangement presets, left-page and right-page colour, and
  buttons to add a note or delete the page.
- DESIGN: palette, paper colour, cloth colour, a YouTube link for music, and a device preview.
Rules:
- Up to 15 photos. Downscale each to 1500px and re-encode as JPEG on import, or the gift file
  becomes too big to email.
- Photos can be dragged from the tray onto the page and land where dropped, or clicked to be
  placed by the current arrangement. Image files dropped straight onto the book work too.
- On the page: drag to move, a round handle above to rotate, a corner to resize, a red × to
  delete. Single click selects a note and moves it; double-click types in it.
- A photo's starting width must be derived from its OWN aspect ratio so a tall portrait and a
  wide landscape arrive at the same visual weight (width is a % of the spread's WIDTH while
  height follows the image, so a portrait at the same width lands nearly twice as tall).
- Notes: per-item typeface (italic serif / serif / sans / hand), size, alignment, ink colour
  and rotation. A note's clickable area must hug its words, not fill its slot, or it will
  swallow clicks meant for the photo underneath.
- Eight arrangement presets (full bleed, one each side, note + photo, four up, three across,
  stack + note, scattered polaroids, title page). Applying one tidies the page around whatever
  is already on it; moving anything by hand stops the page auto-arranging.
- Colour: a palette of four-colour themes, plus the SAME colour control on every surface —
  paper, cloth, front cover, back cover, left page, right page — each offering the palette's
  colours, an inherit chip, and a free colour picker. Ink flips between dark and light based
  on the background's WCAG relative luminance, so text stays readable on any colour.
- Undo (⌘Z), autosave, and keyboard arrows to turn pages.
- Storage: the document (text, positions, colours) in localStorage; the photos as blobs in
  IndexedDB. Closing the tab must not lose the booklet.

PART 4 — PREVIEW, MUSIC AND PHONES
- A Preview mode that hides the editor completely: no selection outlines, no handles, no
  captions, no hints — the booklet and nothing else, full-bleed, with the screen behind it
  taking the colour of whatever page is open. An "← Edit" pill and Esc bring the editor back.
- Music: paste a YouTube link and a small round play button appears in the bottom-right corner
  of preview and of the exported file. Load NOTHING until it is pressed — browsers block
  autoplay with sound, so the player must be created inside the click, using the YouTube
  IFrame Player API (postMessage on a bare iframe will not unmute reliably). Pressing it again
  pauses. Fall back to a plain autoplaying embed if the API is blocked.
- Device preview (desktop / tablet / phone) lives in the preview bar only, and leaving preview
  resets it to desktop. Make the device box a CSS container so the booklet's own responsive
  rules react to the simulated width, not the window.
- On a portrait phone, show a message over the still-visible booklet: "Please rotate your
  mobile to view it more nicely and make for a better view." It clears itself when the phone
  is turned.

PART 5 — THE GIFT FILE
- A "Download gift" button that writes ONE .html file containing: the layout as JSON, every
  photo used, base64-encoded as a data: URL, and the turn engine and stylesheet inlined. No
  external requests except the optional music.
- Ask where to save with showSaveFilePicker when the browser has it, and fall back to an
  anchor that is APPENDED TO THE DOCUMENT before clicking (a detached anchor is silently
  blocked). Never report "Saved" unless it actually saved — say what really happened.
- The exported file opens shut, on a full screen, with no chrome at all, and the first click
  both opens the book and requests fullscreen so the browser's tabs and address bar drop away.
- Structure the code so the reader needs only three files inlined — the stylesheet, the page
  renderer and the turn engine. Editor-only code must live in separate files that are never
  exported.

PART 6 — RUN IT AND PROVE IT WORKS
1. Start a static server and give me the localhost link.
2. Add three photos yourself, build a two-page booklet, and show me a screenshot of a spread
   and of the book shut.
3. Export a gift file, open it from file://, and confirm every page turns and every photo
   renders with no console errors. Tell me the file size.
Do not tell me it works. Show me.

I have a working static booklet editor in ~/Desktop/booklet-gift (index.html, book.js,
render.js, editor.js, gift.js and CSS). Wrap it in a Next.js 15 app I can sell access to.

1. Create a Next.js app with the App Router and TypeScript in this folder.
2. Copy my static editor into /public/app/ and serve it at /editor inside an iframe that
   fills the viewport, so I can keep improving the editor as plain files.
3. Auth with Supabase and Google only:
   - Use @supabase/ssr. Add a browser client, a server client, and middleware that refreshes
     the session on every request.
   - A /login page with one button: "Continue with Google", calling signInWithOAuth with
     redirectTo pointing at /auth/callback.
   - An /auth/callback route that exchanges the code for a session and redirects to /editor.
   - /editor and /api/* must redirect to /login when there is no session.
4. Database (SQL I can paste into the Supabase SQL editor):
   - profiles: id uuid references auth.users primary key, email text, created_at timestamptz.
   - purchases: id uuid, user_id uuid references auth.users, razorpay_order_id text unique,
     razorpay_payment_id text, amount int, status text, created_at timestamptz.
   - Row Level Security ON for both, with policies letting a user read only their own rows and
     no client write access to purchases at all.
   - A trigger that inserts a profile row when a new auth user is created.
5. Payments with Razorpay:
   - POST /api/checkout — verify the session, create a Razorpay order with the Orders API for
     the amount in paise, insert a purchases row with status "created", return the order id.
   - The client opens Razorpay Standard Checkout with that order id.
   - POST /api/verify — recompute HMAC-SHA256 of "<order_id>|<razorpay_payment_id>" with the
     key secret and compare it to razorpay_signature with a timing-safe comparison. On match,
     set the purchase to "paid". Reject anything that doesn't match.
   - POST /api/webhook — verify the x-razorpay-signature header against the raw request body
     using the webhook secret, and mark payment.captured events paid. This is the source of
     truth: the browser can be closed before /api/verify ever runs.
   - Never trust an amount, a status or a user id sent from the browser. Read the price from
     the server and the user from the session.
6. The gate: the editor's "Download gift" button calls GET /api/entitlement first. The server
   answers yes only if that user has a paid purchase. If not, open the payment flow. Put the
   check on the SERVER — a client-side check is a five-second bypass.
7. Env vars in .env.local and documented in README:
   NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY, SUPABASE_SERVICE_ROLE_KEY,
   RAZORPAY_KEY_ID, RAZORPAY_KEY_SECRET, RAZORPAY_WEBHOOK_SECRET, NEXT_PUBLIC_RAZORPAY_KEY_ID,
   NEXT_PUBLIC_SITE_URL. The service role key must never be imported into a client component.
8. Then tell me, in order, exactly what to click in Google Cloud Console, Supabase and
   Razorpay to get each value, and how to test the whole flow with Razorpay test keys.

npx vercel --prod

Personalised digital booklets 🎁
Your photos → a real book they open on their phone
Delivered in 24 hours · from ₹799
↓ order here

Hi [Name]! Saw your story about [friend]'s birthday 🎂

I make digital booklets — your photos become a small book they actually open and
turn the pages of, on their phone. It's not a video or a collage.

Here's one I made: [your demo link]

Send me 8–10 photos and one line you'd want written, and I'll have it ready in
24 hours. ₹799.

Hello [Name], I build digital keepsake booklets and I think they'd sit well
alongside what you already deliver.

After the album, couples have nothing to send their guests. I make a small book
they open on their phone — photos, a note, their colours — delivered as one file
with no app and no link that expires.

Demo: [your demo link]

I can white-label it under your studio name. Want me to make one from a recent
shoot so you can see it with your own work in it?