| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>READING BUDDY</title> |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> |
| <link |
| href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap" |
| rel="stylesheet" |
| /> |
| <link rel="stylesheet" href="/static/styles.css?v=__ASSET_VERSION__" /> |
| </head> |
| <body> |
| <main id="app"> |
| |
| <section class="view view--shelf is-active" data-view="shelf"> |
| <div class="shelf__intro"> |
| <div class="ornament"> |
| <span class="ornament__line"></span> |
| <span class="ornament__dot">❦</span> |
| <span class="ornament__line"></span> |
| </div> |
| <h1 class="brand-title">READING BUDDY</h1> |
| <p class="shelf__tagline">The Quiet Companion That Reads Alongside You</p> |
| <p class="lede"> |
| Choose a volume from the shelf and begin your reading session. When |
| a question stirs, simply speak and receive spoiler-free answers. |
| </p> |
| <div class="ornament"> |
| <span class="ornament__line"></span> |
| <span class="ornament__dot">❦</span> |
| <span class="ornament__line"></span> |
| </div> |
| </div> |
|
|
| <p class="label-caps shelf__label">Your Shelf</p> |
| <div class="shelf__case"> |
| <div class="shelf__row" id="shelf-row"></div> |
| <div class="shelf__ledge" aria-hidden="true"></div> |
| </div> |
| </section> |
|
|
| |
| <section class="view view--session-setup" data-view="session-setup"> |
| <h1 class="setup__brand">READING BUDDY</h1> |
| <div class="ornament"> |
| <span class="ornament__line"></span> |
| <span class="ornament__dot">※</span> |
| <span class="ornament__line"></span> |
| </div> |
|
|
| <div class="setup__card"> |
| <div class="setup__head"> |
| <div class="book-cover" id="setup-cover"></div> |
| <div class="setup__meta"> |
| <h2 class="setup__title" id="setup-title"></h2> |
| <p class="setup__byline" id="setup-byline"></p> |
| <p class="label-caps setup__chapters" id="setup-chapters"></p> |
| </div> |
| </div> |
|
|
| <div class="ornament ornament--labeled"> |
| <span class="ornament__line"></span> |
| <span class="label-caps">Currently Reading</span> |
| <span class="ornament__line"></span> |
| </div> |
|
|
| <p class="setup__chapter-label">Chapter</p> |
|
|
| <div class="stepper"> |
| <button class="stepper__btn" id="chapter-prev" aria-label="Previous chapter">‹</button> |
| <span class="stepper__value" id="chapter-value">1</span> |
| <button class="stepper__btn" id="chapter-next" aria-label="Next chapter">›</button> |
| </div> |
|
|
| <button class="btn-primary" id="begin-reading">Begin Reading</button> |
| </div> |
|
|
| <button class="link-back" id="setup-back">‹ Back to the shelf</button> |
| </section> |
|
|
| |
| <section class="view view--reading-session" data-view="reading-session"> |
| <header class="reading-session__head"> |
| <p class="reading-session__author" id="reading-session-author"></p> |
| <h2 class="reading-session__title" id="reading-session-title"></h2> |
| <div class="ornament ornament--labeled"> |
| <span class="ornament__line"></span> |
| <span class="label-caps" id="reading-session-chapter"></span> |
| <span class="ornament__line"></span> |
| </div> |
| </header> |
|
|
| <div class="reading-session__chapter-control"> |
| <button class="reading-session__chapter-btn" id="session-chapter-prev" aria-label="Previous chapter">‹</button> |
| <span class="reading-session__chapter-num" id="session-chapter-num">1</span> |
| <button class="reading-session__chapter-btn" id="session-chapter-next" aria-label="Next chapter">›</button> |
| </div> |
|
|
| <div class="mic" id="mic" data-state="idle"> |
| <span class="mic__ring mic__ring--outer"></span> |
| <span class="mic__ring mic__ring--mid"></span> |
| <button class="mic__button" id="mic-button" aria-label="Tap to ask a question"> |
| <svg class="mic__icon" viewBox="0 0 24 24" fill="none" aria-hidden="true"> |
| <rect x="9" y="2" width="6" height="12" rx="3" fill="currentColor" /> |
| <path |
| d="M5 11a7 7 0 0 0 14 0M12 18v3" |
| stroke="currentColor" |
| stroke-width="1.6" |
| stroke-linecap="round" |
| /> |
| </svg> |
| </button> |
| </div> |
|
|
| <p class="reading-session__status" id="reading-session-status">Tap to ask a question</p> |
| <button |
| type="button" |
| class="recording-cancel" |
| id="cancel-recording" |
| hidden |
| aria-label="Cancel question" |
| > |
| <svg class="recording-cancel__icon" viewBox="0 0 24 24" fill="none" aria-hidden="true"> |
| <rect x="9" y="2" width="6" height="12" rx="3" fill="currentColor" /> |
| <path |
| d="M5 11a7 7 0 0 0 14 0M12 18v3" |
| stroke="currentColor" |
| stroke-width="1.6" |
| stroke-linecap="round" |
| /> |
| <path d="M4 4l16 16" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" /> |
| </svg> |
| </button> |
|
|
| <div class="ornament reading-session__footer"> |
| <span class="ornament__line"></span> |
| <img src="/icons/book_icon.png" alt="" class="ornament__icon" aria-hidden="true" /> |
| <span class="ornament__line"></span> |
| </div> |
|
|
| <button class="link-back" id="reading-session-back">‹ Leave session</button> |
|
|
| <audio id="answer-audio" hidden></audio> |
| </section> |
| </main> |
|
|
| <script> |
| window.READING_BUDDY_BOOKS = __BOOKS_JSON__; |
| </script> |
| <script type="module" src="/static/app.js?v=__ASSET_VERSION__"></script> |
| </body> |
| </html> |
|
|
