update

BLACKSPI · Jun 24, 2024 · 1628226 · 1628226
1 parent adcb6e2
commit 1628226
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -5,8 +5,34 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Magic Book</title>
     <link rel="stylesheet" href="styles.css">
+    <style>
+        /* Splash screen styles */
+        #splash-screen {
+            position: fixed;
+            width: 100%;
+            height: 100%;
+            background: #fff;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            z-index: 1000;
+        }
+        #splash-screen h1 {
+            font-size: 2em;
+            margin-top: 20px;
+        }
+        #splash-screen img {
+            width: 100px; /* Adjust the size as needed */
+            height: auto;
+        }
+    </style>
 </head>
 <body>
+    <div id="splash-screen">
+        <img src="path/to/your/image.png" alt="Loading Image">
+        <h1>Loading...</h1>
+    </div>
     <div class="instructions">
         <h1>Magic Book</h1>
         <p>Click on the cards to hear their sounds. Use the arrows to change the letters and syllables.</p>
@@ -17,13 +43,13 @@ <h1>Magic Book</h1>
         document.addEventListener("DOMContentLoaded", function() {
             const heading = document.querySelector('h1');
             heading.textContent += ' 📖';
+
+            // Hide the splash screen after 3 seconds
+            setTimeout(function() {
+                document.getElementById('splash-screen').style.display = 'none';
+            }, 3000); // 3000 milliseconds = 3 seconds
         });
     </script>
     <script src="script.js"></script>
-
 </body>
 </html>
-
-
-
-
diff --git a/styles.css b/styles.css
@@ -6,7 +6,7 @@ body {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    height: 100vh;
+    height: 130vh;
     margin: 0;
 }