| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> |
| <title>pareidolia — everything secretly has a face</title> |
| <meta name="description" content="Point your camera at any object. A small spirit-medium finds the face that was already hiding in it — and it tells you its grudge. Awakened objects join a public menagerie." /> |
| <meta name="theme-color" content="#0b0a09" /> |
| <link rel="stylesheet" href="./style.css" /> |
| </head> |
| <body> |
| <div class="vignette" aria-hidden="true"></div> |
| <div class="grain" aria-hidden="true"></div> |
|
|
| |
| <header class="masthead"> |
| <h1 class="masthead__mark">pareidolia</h1> |
| <p class="masthead__tag">everything secretly has a face</p> |
| <div class="masthead__meta"> |
| <span class="dot" aria-hidden="true"></span> |
| <span id="count">the wall is waking…</span> |
| </div> |
| <br /> |
| <button id="wakeBtn" class="cta">wake something up</button> |
| </header> |
|
|
| |
| <main id="wall" class="wall" aria-label="the menagerie"></main> |
|
|
| |
| <section id="empty" class="empty" hidden> |
| <div class="empty__eyes" aria-hidden="true">· ·</div> |
| <p class="empty__line">No one has woken anything yet. Be first.</p> |
| <p class="empty__sub">point your camera at anything — it is already in there</p> |
| </section> |
|
|
| |
| <aside id="qr" class="qr" hidden> |
| <div id="qrCode" aria-hidden="true"></div> |
| <p>open on your phone</p> |
| </aside> |
|
|
| <footer class="colophon"> |
| minicpm-v finds the face · voxcpm gives it the grudge · build small hackathon |
| </footer> |
|
|
| |
| <button id="wakeBtnFloat" class="cta cta--floating">wake something up</button> |
|
|
| |
| <section id="captureScreen" class="screen" hidden> |
| <div class="screen__bar"> |
| <span class="screen__title">hold still. so it can see you back.</span> |
| <button id="captureCancel" class="ghostbtn">return to the wall</button> |
| </div> |
| <div id="captureStage" class="capture__stage"></div> |
| </section> |
|
|
| |
| <section id="revealScreen" class="screen" hidden> |
| <div class="screen__bar"> |
| <span id="revealTitle" class="screen__title">the medium is looking…</span> |
| <span></span> |
| </div> |
| <div class="reveal__stage"> |
| <div id="revealPhoto" class="reveal__photo"> |
| <img id="revealImg" alt="the offered photograph" /> |
| <div id="seanceLayer" class="reveal__seance"></div> |
| </div> |
| </div> |
| <div id="revealScrim" class="reveal__scrim" aria-hidden="true"></div> |
| <div id="revealName" class="reveal__name"> |
| <h2 id="revealNameText"></h2> |
| <p id="revealGrudge"></p> |
| </div> |
| <div id="revealChoice" class="reveal__choice"> |
| <button id="addBtn" class="cta">add to the menagerie</button> |
| <button id="restBtn" class="ghostbtn">let it rest</button> |
| </div> |
| <div id="revealFail" class="reveal__fail"> |
| <div class="empty__eyes" aria-hidden="true">· ·</div> |
| <p id="revealFailText"></p> |
| <button id="failBack" class="ghostbtn">return to the wall</button> |
| </div> |
| </section> |
|
|
| <div id="toast" class="toast" role="status"></div> |
|
|
| |
| <template id="cardTemplate"> |
| <article class="card"> |
| <div class="card__photo"> |
| <img alt="" /> |
| <div class="card__warm" aria-hidden="true"></div> |
| <div class="card__whisper"></div> |
| </div> |
| <figcaption class="card__caption"> |
| <h3 class="card__name"></h3> |
| <p class="card__grudge"></p> |
| <p class="card__voice"></p> |
| </figcaption> |
| </article> |
| </template> |
|
|
| <script src="./vendor/qrcode.js"></script> |
| <script type="module" src="./main.js"></script> |
| </body> |
| </html> |
|
|
