| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <meta |
| name="description" |
| content="A guided, small-model-powered path of grounded, illustrated encouragement." |
| /> |
| <title>The Compliment Forest</title> |
| <link rel="stylesheet" href="/styles.css" /> |
| </head> |
| <body> |
| <div class="paper-grain" aria-hidden="true"></div> |
| <div class="fireflies" aria-hidden="true"> |
| <i></i><i></i><i></i><i></i><i></i> |
| </div> |
|
|
| <header class="site-header"> |
| <button |
| class="brand" |
| id="brand-home" |
| type="button" |
| aria-label="Return to the beginning" |
| > |
| <svg class="brand-mark" viewBox="0 0 64 64" aria-hidden="true"> |
| <path |
| d="M16 48C5 35 10 16 27 10c15-5 30 4 31 20 1 18-18 29-34 21" |
| /> |
| <path |
| d="M18 45c10-17 21-24 35-27M17 20c6 1 10 4 13 9M34 11c0 6 2 10 7 14" |
| /> |
| <ellipse |
| cx="13" |
| cy="35" |
| rx="3" |
| ry="7" |
| transform="rotate(-31 13 35)" |
| /> |
| <ellipse |
| cx="24" |
| cy="16" |
| rx="3" |
| ry="7" |
| transform="rotate(34 24 16)" |
| /> |
| <ellipse |
| cx="48" |
| cy="16" |
| rx="3" |
| ry="7" |
| transform="rotate(57 48 16)" |
| /> |
| <ellipse |
| cx="53" |
| cy="37" |
| rx="3" |
| ry="7" |
| transform="rotate(102 53 37)" |
| /> |
| </svg> |
| <span>The Compliment Forest</span> |
| </button> |
| </header> |
|
|
| <main id="app"> |
| <section class="view entry-view" id="entry-view"> |
| <div class="entry-copy"> |
| <p class="eyebrow">A private-feeling guided walk</p> |
| <h1>The Compliment<br />Forest</h1> |
| <p class="intro"> |
| Name what you're carrying. The forest is listening before it asks five |
| quiet questions, then walks a path with you. |
| </p> |
|
|
| <form id="forest-form" novalidate> |
| <ol class="step-tracker" id="step-tracker" aria-label="Forest intake progress"> |
| <li class="is-current">Name it</li> |
| <li>Question 1 of 5</li> |
| <li>Question 2 of 5</li> |
| <li>Question 3 of 5</li> |
| <li>Question 4 of 5</li> |
| <li>Question 5 of 5</li> |
| <li>Paint it</li> |
| </ol> |
|
|
| <section class="form-step is-active" data-step="0"> |
| <p class="step-kicker">Step 1 of 5</p> |
| <h2>What should the forest call you?</h2> |
|
|
| <label for="name">Your name</label> |
| <input |
| id="name" |
| name="name" |
| type="text" |
| placeholder="Mika" |
| autocomplete="name" |
| maxlength="80" |
| required |
| /> |
|
|
| <label for="situation" |
| >What are you carrying right now?</label |
| > |
| <textarea |
| id="situation" |
| name="situation" |
| placeholder="Starting a new job, and worried I won't belong..." |
| maxlength="1200" |
| rows="4" |
| required |
| ></textarea> |
|
|
| <div class="step-actions"> |
| <button |
| class="primary-button step-next" |
| type="button" |
| > |
| Begin the walk |
| </button> |
| </div> |
| </section> |
|
|
| <section class="form-step" data-step="intake" id="intake-step" hidden> |
| <p class="step-kicker" id="intake-progress">Question 1 of 5</p> |
| <h2 id="intake-question">The forest is listening for your first question.</h2> |
| <p class="step-help">Pick the option that comes closest. The next question adapts.</p> |
|
|
| <div |
| class="choice-grid two-column" |
| id="intake-options" |
| role="radiogroup" |
| aria-label="Forest question" |
| ></div> |
|
|
| <div class="step-actions split-actions"> |
| <button class="text-button step-back" type="button">Back</button> |
| <button class="primary-button step-next" type="button"> |
| Walk on |
| </button> |
| </div> |
| </section> |
|
|
| <section class="form-step" data-step="style" id="style-step" hidden> |
| <p class="step-kicker">Painting the path</p> |
| <h2>How should the forest paint your walk?</h2> |
|
|
| <label for="style">Art style</label> |
| <select id="style" name="style"> |
| <option value="surprise">Surprise me</option> |
| <option value="watercolor">Watercolor Storybook</option> |
| <option value="paper_cut">Layered Paper Cut</option> |
| <option value="moonlit_gouache">Moonlit Gouache</option> |
| <option value="botanical_ink">Botanical Ink Wash</option> |
| </select> |
|
|
| <div class="step-actions split-actions"> |
| <button class="text-button step-back" type="button">Back</button> |
| <button class="primary-button grow-button" id="grow-button" type="submit"> |
| <span>Grow my forest</span> |
| <svg viewBox="0 0 32 20" aria-hidden="true"> |
| <path d="M2 10h24M19 3l8 7-8 7M13 8c-4-5-8-4-9-2 4 1 7 3 9 6" /> |
| </svg> |
| </button> |
| </div> |
| </section> |
| </form> |
|
|
| <div |
| class="status-region" |
| id="status-region" |
| role="status" |
| aria-live="polite" |
| aria-atomic="true" |
| ></div> |
| </div> |
|
|
| <figure class="entry-art"> |
| <img src="/assets/fox-path.png" alt="" /> |
| </figure> |
| </section> |
|
|
| <section class="view experience-view" hidden id="experience-view"> |
| <div class="path-header"> |
| <h1 id="forest-title">A path is growing</h1> |
| <p id="clearing-progress">Clearing 1</p> |
| <p |
| class="art-style-label" |
| id="art-style-label" |
| aria-live="polite" |
| ></p> |
| <div |
| class="progress-dots" |
| id="progress-dots" |
| aria-hidden="true" |
| ></div> |
| </div> |
|
|
| <section |
| class="soundscape-player" |
| id="soundscape-player" |
| aria-live="polite" |
| hidden |
| > |
| <div> |
| <p class="section-label">Forest soundscape</p> |
| <p class="soundscape-note"> |
| A generated instrumental companion. Press play when |
| ready. |
| </p> |
| </div> |
| <audio |
| id="soundscape-audio" |
| controls |
| loop |
| preload="metadata" |
| ></audio> |
| </section> |
|
|
| <article class="clearing"> |
| <figure class="clearing-art"> |
| <div class="image-wash" aria-hidden="true"></div> |
| <img id="clearing-image" src="" alt="" /> |
| </figure> |
|
|
| <div class="clearing-copy"> |
| <p class="scene-title" id="scene-title"></p> |
| <p class="scene-intro" id="scene-intro"></p> |
| <div class="narration" id="narration"></div> |
|
|
| <section class="carried-question"> |
| <p class="section-label">A question to carry</p> |
| <p id="reflection"></p> |
| </section> |
|
|
| <section class="spell-section"> |
| <p class="section-label">Tiny spell</p> |
| <p class="spell" id="spell"></p> |
| <button |
| class="copy-button" |
| id="copy-spell" |
| type="button" |
| > |
| <svg viewBox="0 0 24 24" aria-hidden="true"> |
| <rect |
| x="8" |
| y="8" |
| width="11" |
| height="12" |
| rx="1" |
| /> |
| <path d="M16 8V4H5v12h3" /> |
| </svg> |
| <span>Copy spell</span> |
| </button> |
| </section> |
|
|
| <div class="path-actions"> |
| <button |
| class="primary-button" |
| id="walk-on" |
| type="button" |
| > |
| <span>Walk on</span> |
| <svg viewBox="0 0 32 20" aria-hidden="true"> |
| <path |
| d="M2 10h24M19 3l8 7-8 7M13 8c-4-5-8-4-9-2 4 1 7 3 9 6" |
| /> |
| </svg> |
| </button> |
| <button |
| class="primary-button save-button" |
| id="save-forest" |
| type="button" |
| hidden |
| > |
| <span>Save your forest</span> |
| <svg viewBox="0 0 24 24" aria-hidden="true"> |
| <path |
| d="M12 3v12m0 0 5-5m-5 5-5-5M5 20h14" |
| /> |
| </svg> |
| </button> |
| <button |
| class="text-button" |
| id="start-over" |
| type="button" |
| > |
| Start another path |
| </button> |
| </div> |
| </div> |
| </article> |
| </section> |
| </main> |
|
|
| <footer> |
| Whimsical encouragement, not a substitute for professional support. |
| </footer> |
| <script src="/app.js" defer></script> |
| </body> |
| </html> |
|
|
