Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> | |
| <meta name="theme-color" content="#f5f1e7" /> | |
| <title>Ring Fit Feedback — Femometer Smart Ring</title> | |
| <meta name="description" content="Tell us how your ring fit so we can improve sizing." /> | |
| <meta name="robots" content="noindex" /> | |
| <!-- Reuse the /m flow's stylesheet so this form matches the mobile | |
| capture flow's look; feedback.css only adds the success screen + | |
| a couple of form niceties the step CSS doesn't cover. --> | |
| <link rel="stylesheet" href="/static/mobile/mobile.css" /> | |
| <link rel="stylesheet" href="/static/feedback/feedback.css" /> | |
| </head> | |
| <body> | |
| <main class="step step-feedback"> | |
| <!-- Form view --> | |
| <div class="step-body" id="formView"> | |
| <p class="hero-eyebrow">Femometer Smart Ring</p> | |
| <h1 class="hero-headline">How did your ring fit?</h1> | |
| <form class="panel" id="feedbackForm" novalidate> | |
| <div class="controls"> | |
| <label> | |
| <span>Name</span> | |
| <input | |
| type="text" | |
| id="kolName" | |
| placeholder="Your name" | |
| autocomplete="name" | |
| required | |
| /> | |
| </label> | |
| <label> | |
| <span>Email</span> | |
| <input | |
| type="email" | |
| id="kolEmail" | |
| placeholder="you@example.com" | |
| autocomplete="email" | |
| inputmode="email" | |
| required | |
| /> | |
| </label> | |
| <label> | |
| <span>Ring size received</span> | |
| <input | |
| type="text" | |
| id="receivedSize" | |
| placeholder="e.g. 7 (read it off the package)" | |
| autocomplete="off" | |
| /> | |
| </label> | |
| <label> | |
| <span>Ring model</span> | |
| <select id="receivedModel"> | |
| <option value="" disabled selected>Choose…</option> | |
| <option value="gen">Gen1/Gen2</option> | |
| <option value="air">Air</option> | |
| </select> | |
| </label> | |
| <label> | |
| <span>Which finger did it fit best?</span> | |
| <select id="bestFitFinger"> | |
| <option value="" disabled selected>Choose…</option> | |
| <option value="index">Index</option> | |
| <option value="middle">Middle</option> | |
| <option value="ring">Ring</option> | |
| <option value="pinky">Pinky</option> | |
| <option value="thumb">Thumb</option> | |
| <option value="none_too_small">None — too small for all</option> | |
| <option value="none_too_big">None — too big for all</option> | |
| </select> | |
| </label> | |
| <label> | |
| <span>How did it fit on that finger?</span> | |
| <select id="fitQuality"> | |
| <option value="" disabled selected>Choose…</option> | |
| <option value="perfect">Perfect</option> | |
| <option value="snug">Snug</option> | |
| <option value="loose">Loose but stays on</option> | |
| <option value="falls_off">Falls off</option> | |
| <option value="too_tight">Can't get it on</option> | |
| </select> | |
| </label> | |
| <label> | |
| <span>Which hand?</span> | |
| <select id="hand"> | |
| <option value="" disabled selected>Choose…</option> | |
| <option value="left">Left</option> | |
| <option value="right">Right</option> | |
| </select> | |
| </label> | |
| <label> | |
| <span>Photo of the ring on your finger (optional)</span> | |
| <input type="file" id="photo" accept="image/*" /> | |
| </label> | |
| <label> | |
| <span>Anything else? (optional)</span> | |
| <textarea | |
| id="notes" | |
| rows="3" | |
| placeholder="Tell us anything the questions above missed." | |
| ></textarea> | |
| </label> | |
| </div> | |
| <p class="form-error" id="formError" hidden></p> | |
| </form> | |
| </div> | |
| <div class="step-foot" id="formFoot"> | |
| <button type="submit" class="primary" id="submitBtn" form="feedbackForm"> | |
| Submit feedback | |
| </button> | |
| </div> | |
| <!-- Success view (swapped in on submit) --> | |
| <div class="step-body fb-success" id="successView" hidden> | |
| <div class="fb-success-inner"> | |
| <div class="fb-success-check">✓</div> | |
| <h1 class="hero-headline">Thank you!</h1> | |
| <p class="hero-sub"> | |
| Your feedback is in. It directly helps us improve ring-size | |
| accuracy. | |
| </p> | |
| </div> | |
| </div> | |
| </main> | |
| <script type="module" src="/static/feedback/feedback.js"></script> | |
| </body> | |
| </html> | |