Welcom and warning message added

index.html

@@ -21,6 +21,9 @@
     <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>
@@ -32,8 +35,12 @@
     <dialog id="welcome">
         <div>
             <h1 style="text-align: center; font-size: 2em;">Tarot AI Experience</h1>
-            <p style="text-align: center;">An AI based tarot reading web app</p>
-            <p style="text-align: center; font-size: 0.8em;">by Massimo Avvisati</p>
+            <h2>Your Personal Digital Oracle</h2>
+            <h3>Created by <a href="https://www.linkedin.com/in/massimo-avvisati-7220312/">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>
@@ -69,7 +76,7 @@
                 <img src="./images/avatar-07.png" alt="Avatar" class="fortune-teller-avatar">
             </div>
             <div class="fortune-teller-buttons">
-                <button>+</button>
+                <button id="coming-soon">+</button>
             </div>
             <div class="fortune-teller-buttons">
                 <button disabled id="fortune-teller-selected" class="continue-button"></button>
@@ -106,10 +113,17 @@
             <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>

main.css

@@ -17,7 +17,17 @@ body {
     background-repeat: no-repeat;
     background-position: left bottom;
     background-color: #111;
-    height: 100lvh;
+    height: 100vh;
+}
+
+dialog a {
+    text-decoration: none;
+    font-weight: bold;
+    color: white;
+}
+
+dialog#welcome {
+    max-width: 50vw;
 }
 
 body.background-01 {
@@ -58,7 +68,7 @@ body.background-06 {
 
 /* 
 .fortune-teller-profile {
-    grid-template-rows: 30lvh;
+    grid-template-rows: 30vh;
     grid-template-columns: 1fr 1fr;
     grid-template-areas:'picture deck'
     'bio bio';
@@ -83,7 +93,7 @@ body.background-06 {
     aspect-ratio: 1;
     position: relative;
     width: 100%;
-    max-height: 20lvh;
+    max-height: 20vh;
     overflow: hidden;
     cursor: url("./icons/hand.png") 19 4, default;
 }
@@ -101,7 +111,7 @@ textarea {
     font-size: 1rem;
     min-width: 60lvw;
     max-width: 80lvw;
-    font-size: clamp(1rem, 5lvh, 2.5rem);
+    font-size: clamp(1rem, 5vh, 2rem);
     color: inherit;
 }
 
@@ -161,7 +171,7 @@ textarea:focus-visible {
     transform: translate(-50%, -50%) scale(var(--card-size)) rotateY(0deg);
     border: 3px solid wheat;
     box-shadow: 0 0 10px black;
-    top: 50lvh;
+    top: 50vh;
     left: 50lvw;
 }
 
@@ -393,12 +403,10 @@ div.setting input {
     border: 0;
     font-family: 'Courier New', Courier, monospace;
 }
-div.setting input::placeholder {
 
-}
 /* response dialog */
 #response {
-    margin-bottom: 1lvh;
+    margin-bottom: 1vh;
 }
 
 div.response-container {
@@ -441,7 +449,7 @@ div.response-container {
 div.current-fortune-teller {
     aspect-ratio: 1;
     background-size: cover;
-    height: 30lvh;
+    height: 30vh;
     display: flex;
     margin: auto;
     border-radius: 10%;
@@ -474,4 +482,119 @@ body.background-06 div.current-fortune-teller {
 
 body.background-07 div.current-fortune-teller {
     background-image: url(./images/avatar-07.png);
+}
+
+.mystic-warning {
+    animation: fadeIn 0.5s ease-in-out;
+}
+
+h1::before {
+    content: '✨';
+    margin-right: 5px;
+}
+
+h1::after {
+    content: '✨';
+    margin-left: 5px;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+
+/* Media query per schermi fino a 768px di larghezza (tipicamente tablet e smartphone in modalità landscape) */
+@media screen and (max-width: 768px) {
+    :root {
+        --card-size: 0.4;
+        /* Riduce la dimensione delle carte */
+    }
+
+    #fortune-tellers {
+        grid-template-columns: 1fr 1fr;
+        /* Cambia il layout a 2 colonne */
+        gap: 0.5rem;
+    }
+
+    .fortune-teller-profile {
+        max-height: 15vh;
+    }
+
+    dialog {
+        padding: 0.5rem 1rem 1rem 1rem;
+        font-size: 0.9rem;
+    }
+
+    textarea {
+        min-width: 80lvw;
+        font-size: clamp(0.9rem, 4vh, 1.5rem);
+    }
+
+    button {
+        width: 3rem;
+        height: 3rem;
+        font-size: 1.5rem;
+    }
+}
+
+/* Media query per schermi fino a 480px di larghezza (tipicamente smartphone in modalità portrait) */
+@media screen and (max-width: 480px) {
+    :root {
+        --card-size: 0.3;
+        /* Riduce ulteriormente la dimensione delle carte */
+    }
+
+    #fortune-tellers {
+        grid-template-columns: 1fr;
+        /* Cambia il layout a 1 colonna */
+    }
+
+    .fortune-teller-profile {
+        max-height: 12vh;
+    }
+
+    dialog {
+        font-size: 0.8rem;
+        border-radius: 1rem;
+    }
+
+    div.response-container {
+        grid-template-columns: 1fr;
+        /* Cambia il layout a 1 colonna */
+        gap: 1rem;
+    }
+
+    div.current-fortune-teller {
+        height: 20vh;
+    }
+
+    #settings div {
+        font-size: 1rem;
+    }
+
+    div.setting input {
+        font-size: 1rem;
+        width: 100%;
+        box-sizing: border-box;
+    }
+}
+
+/* Media query per gestire l'altezza dello schermo su dispositivi molto piccoli */
+@media screen and (max-height: 600px) {
+    .fortune-teller-profile {
+        max-height: 25vh;
+    }
+
+    dialog {
+        max-height: 80vh;
+        overflow-y: auto;
+    }
 }

main.js

@@ -289,6 +289,29 @@ document.addEventListener('DOMContentLoaded', () => {
         openDeckSelectionDialog();
     })
 
+    const comingSoonButton = document.getElementById('coming-soon');
+    const comingSoonDialog = document.getElementById('coming-soon-dialog');
+    
+    comingSoonButton.addEventListener('click', () => {
+        comingSoonDialog.showModal();
+    })
+
+    const comingSoonCloseButton = document.getElementById('close-coming-soon-button');
+    comingSoonCloseButton.addEventListener('click', () => {
+        comingSoonDialog.close();
+    })
+
     // Chiamata alla funzione per aprire il dialogo di benvenuto all'avvio dell'app
     openDeckSelectionDialog();
+    openWelcomeDialog();
+    
+    const dialogs = document.querySelectorAll('dialog');
+    dialogs.forEach(dialog => {
+        dialog.addEventListener('keydown', (event) => {
+            if (event.key === 'Escape') {
+                event.preventDefault();  // Impedisce la chiusura
+            }
+        });
+    });
+
 });