Updated Official website & demo

mobilepadawan · Mar 7, 2024 · c0f6d02 · c0f6d02
1 parent 999fea3
commit c0f6d02
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 29 deletions.
diff --git a/docs/css/styles.css b/docs/css/styles.css
@@ -26,11 +26,15 @@ table {
 
 .sample-container {
     margin: 0 auto;
-    width: 700px;
+    width: 600px;
     padding: 20px;
     border: 1px solid lightblue;
     border-radius: 6px;
     box-shadow: 2px 8px 10px rgb(70, 70, 70);
+    margin-bottom: 20px;
+    & input, select {
+        width: 90%;
+    }
 }
 
 .contenedor {
@@ -39,11 +43,17 @@ table {
     padding: 0 20px;
 }
 
-header,
-main {
+header, main {
   text-align: left;
 }
 
+details {
+    margin-bottom: 20px;
+    border: 1px solid grey;
+    border-radius: 10px;
+    padding: 16px;
+}
+
 .emoji-image {
     font-size: 24px;
 }
@@ -179,7 +189,7 @@ div.image-sample img {
     }
 
     .sample-container {
-        max-width: 100%;
+        max-width: 80%;
     }
 
     div.theme-picker {

diff --git a/docs/index.html b/docs/index.html
@@ -36,7 +36,7 @@
             <h1 id="titulo">Speak-it JS: a JavaScript Library</h1>
             <p><strong>Speakit JS</strong> is a JavaScript library to an easiest implement of <a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis" target="_blank">Speech Synthesis API</a>.</p>
             <div class="image-sample">
-                <img src="images/speak-64.webp" height="64px" width="64px" alt="Toast-It sample code">
+                <img src="images/speak-64.webp" alt="Toast-It sample code">
             </div>
             <p>This web API let you take a sentence or paragraph written like this, and make it audible through the JavaScript native API. Every modern web browser has the capability to speech any text in many languages. In the link 👆 previously shared you'll find the version compatibility according to the different web browsers available in the market.</p>
             <p>Can't wait to try it out the Full Experiencie? <a href="ttsl/index.html">Come here 👀</a></p>
@@ -62,27 +62,30 @@ <h3>Reading a text</h3>
                 </article>
             </section>
             <section>
-                <article class="sample-container">
-                    <h3>Take a look of Speakit-JS library here</h3>
-                    <label for="inputText">
-                        <input type="text" id="inputText" placeholder="Write a text or sentence here..." autocomplete="off" >
-                    </label>
-                    <label for="selectedLanguage">Pick an ISO language code
-                        <select name="" id="selectedLanguage">
-                            <option selected disabled>...</option>
-                            <option>en-CA</option>
-                            <option>en-GB</option>
-                            <option>en-US</option>
-                            <option>es-ES</option>
-                            <option>es-MX</option>
-                            <option>es-AR</option>
-                            <option>it-IT</option>
-                            <option>pt-PT</option>
-                            <option>pt-BR</option>
-                        </select>
-                    </label>
-                    <button id="buttonRead">Listen it</button>
-                </article>
+                    <h3>Take a quick look of Speakit-JS library</h3>
+                    <details>
+                        <summary>Demo</summary>
+                        <article class="sample-container">
+                                <label for="inputText">
+                                    <input type="text" id="inputText" placeholder="Write a text or sentence here..." autocomplete="off" >
+                                </label>
+                                <label for="selectedLanguage">Pick an ISO language code
+                                    <select name="" id="selectedLanguage">
+                                        <option selected disabled>...</option>
+                                        <option>en-CA</option>
+                                        <option>en-GB</option>
+                                        <option>en-US</option>
+                                        <option>es-ES</option>
+                                        <option>es-MX</option>
+                                        <option>es-AR</option>
+                                        <option>it-IT</option>
+                                        <option>pt-PT</option>
+                                        <option>pt-BR</option>
+                                    </select>
+                                </label>
+                                <button id="buttonRead">Listen it</button>
+                        </article>
+                    </details>
             </section>
             <hr>
             <section>
@@ -154,4 +157,4 @@ <h2>More information</h2>
         </main>
     </div>
 </body>
-</html>
+</html>
diff --git a/docs/js/main.js b/docs/js/main.js
@@ -9,7 +9,6 @@ const applyThemePicked = ()=> localStorage.getItem('themePicked') || 'auto'
 // Main function
 document.documentElement.style.setProperty('color-scheme', applyThemePicked())
 
-
 emojiSun.addEventListener('click', ()=> {
     document.documentElement.style.setProperty('color-scheme', 'Light')
     localStorage.setItem('themePicked', 'Light')
@@ -21,5 +20,5 @@ emojiMoon.addEventListener('click', ()=> {
 
 buttonRead.addEventListener("click", ()=> {
     let textToRead = inputText.value.trim()
-    textToRead && Speakit.readText(textToRead, selectedLanguage.value)
+    textToRead && Speakit.readText(textToRead, selectedLanguage.value) 
 }) // Siete pronti per trovare una pizza, oppure due?