Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Tarot AI Experience</title> | |
| <meta name="description" content="An AI based tarot reading web app"> | |
| <!-- Precarica le immagini utilizzate nel CSS --> | |
| <link rel="preload" as="image" href="./images/deck-01.jpg"> | |
| <link rel="preload" as="image" href="./images/deck-01-back.png"> | |
| <link rel="preload" as="image" href="./images/deck-02.jpg"> | |
| <link rel="preload" as="image" href="./images/deck-02-back.png"> | |
| <link rel="preload" as="image" href="./images/deck-03.jpg"> | |
| <link rel="preload" as="image" href="./images/deck-03-back.png"> | |
| <link rel="preload" as="image" href="./images/deck-04.jpg"> | |
| <link rel="preload" as="image" href="./images/deck-04-back.png"> | |
| <link rel="preload" as="image" href="./images/deck-05.jpg"> | |
| <link rel="preload" as="image" href="./images/deck-05-back.png"> | |
| <link rel="preload" as="image" href="./images/deck-06.jpg"> | |
| <link rel="preload" as="image" href="./images/deck-06-back.png"> | |
| <link rel="preload" as="image" href="./images/deck-07.jpg"> | |
| <link rel="preload" as="image" href="./images/deck-07-back.png"> | |
| <link rel="preload" as="image" href="./icons/hand-soft.png"> | |
| <link rel="preload" as="image" href="./icons/hand.png"> | |
| <link rel="preload" as="image" href="./icons/play.svg"> | |
| <link rel="stylesheet" href="main.css"> | |
| <script type="module" src="main.js"></script> | |
| </head> | |
| <body> | |
| <div id="cards-container"> | |
| <!-- Le card vengono generate dinamicamente con JavaScript --> | |
| </div> | |
| <dialog id="welcome"> | |
| <div> | |
| <h1 style="text-align: center; font-size: 2em;">Tarot AI Experience</h1> | |
| <h2>Your Personal Digital Oracle</h2> | |
| <h3>Created by <a href="https://www.linkedin.com/in/massimo-avvisati-7220312/" target="_blank">Massimo Avvisati</a></h3> | |
| <p class="mystic-warning">The cosmic energies channeled through AI guide these cards and craft these images.</p> | |
| <p class="mystic-warning">Like a mirror reflecting the vast universe, they may show unexpected facets and occasional quirks.</p> | |
| <p class="mystic-warning">Trust your intuition as you explore these digital divinations, and remember: true wisdom comes from | |
| within.</p> | |
| <button id="start" class="continue-button"></button> | |
| </div> | |
| </dialog> | |
| <dialog id="deck-selection"> | |
| <div class="toolbar"><button id="settings-button">•••</button></div> | |
| <div id="fortune-tellers"> | |
| <div data-fortune-teller-id="01" class="fortune-teller-profile"> | |
| <div class="tag">AI</div> | |
| <img src="./images/avatar-01.png" alt="Avatar" class="fortune-teller-avatar"> | |
| </div> | |
| <div data-fortune-teller-id="02" class="fortune-teller-profile"> | |
| <div class="tag">AI</div> | |
| <img src="./images/avatar-02.png" alt="Avatar" class="fortune-teller-avatar"> | |
| </div> | |
| <div data-fortune-teller-id="03" class="fortune-teller-profile"> | |
| <div class="tag cpu">AI</div> | |
| <img src="./images/avatar-03.png" alt="Avatar" class="fortune-teller-avatar"> | |
| </div> | |
| <div data-fortune-teller-id="04" class="fortune-teller-profile"> | |
| <div class="tag">AI</div> | |
| <img src="./images/avatar-04.png" alt="Avatar" class="fortune-teller-avatar"> | |
| </div> | |
| <div data-fortune-teller-id="05" class="fortune-teller-profile"> | |
| <div class="tag">AI</div> | |
| <img src="./images/avatar-05.png" alt="Avatar" class="fortune-teller-avatar"> | |
| </div> | |
| <div data-fortune-teller-id="06" class="fortune-teller-profile"> | |
| <div class="tag human">AI</div> | |
| <img src="./images/avatar-06.png" alt="Avatar" class="fortune-teller-avatar"> | |
| </div> | |
| <div data-fortune-teller-id="07" class="fortune-teller-profile"> | |
| <div class="tag">AI</div> | |
| <img src="./images/avatar-07.png" alt="Avatar" class="fortune-teller-avatar"> | |
| </div> | |
| <div class="fortune-teller-buttons"> | |
| <button id="coming-soon">+</button> | |
| </div> | |
| <div class="fortune-teller-buttons"> | |
| <button disabled id="fortune-teller-selected" class="continue-button"></button> | |
| </div> | |
| </div> | |
| </dialog> | |
| <dialog id="question"> | |
| <div class="container"> | |
| <!-- Textarea for user input --> | |
| <textarea id="questionInput" spellcheck="false" rows="4"></textarea> | |
| <!-- Button to ask for Tarot Reading --> | |
| <div class="horizontal-buttons"> | |
| <button id="changeFortuneTellerButton">«</button> | |
| <button id="questionButton">?</button> | |
| </div> | |
| </div> | |
| </dialog> | |
| <dialog id="response"> | |
| <div class="response-container"> | |
| <div class="current-fortune-teller"></div> | |
| <div id="response-output"><span>.</span><span>.</span><span>.</span></div> | |
| <div> | |
| <button id="new-question">+</button> | |
| </div> | |
| </dialog> | |
| <dialog id="settings"> | |
| <div class="toolbar"> | |
| <button id="close-settings-button">✖</button> | |
| </div> | |
| <div> | |
| <div class="setting"> | |
| <label for="llm-server">Tarot LLM HuggingFace Space</label> | |
| <input id="llm-server" type="text" spellcheck="false" autocomplete="false" value="hysts/zephyr-7b"> | |
| </div> | |
| </div> | |
| </dialog> | |
| <dialog id="coming-soon-dialog"> | |
| <div class="toolbar"> | |
| <button id="close-coming-soon-button">✖</button> | |
| </div> | |
| <div> | |
| <h3>Coming soon</h3> | |
| </div> | |
| </dialog> | |
| </body> | |
| </html> |