Spaces:
Running
Running
File size: 6,025 Bytes
3beb5b8 9c96839 faeee9d 9c96839 3beb5b8 9c96839 faeee9d 7174eb5 faeee9d 9c96839 faeee9d 9c96839 faeee9d 3beb5b8 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 |
<!DOCTYPE html>
<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> |