s1

public/saveGameAI.js

@@ -1,7 +1,6 @@
     function retryGame(){
         window.location.reload();
     }
-
     const queryString = window.location.search;
     const urlParams = new URLSearchParams(queryString);
     const userId = urlParams.get('userId');

public/saveTracingGameData.js

@@ -0,0 +1,134 @@
+function retryGame(){
+    window.location.reload();
+}
+
+const queryString = window.location.search;
+const urlParams = new URLSearchParams(queryString);
+const userId = urlParams.get('userId');
+const gameVersion = urlParams.get('gameName');
+let gameId;
+let submitNotic;
+
+console.log(userId);
+let startTime = Date.now();
+
+
+const url = window.location.href;
+const gameName = url.split('/');
+const gameType = gameName[3].split('?id=');
+// let gameVersion;
+
+// console.log("Here is game name ", gameType[0])
+
+// if(gameType[0] == "guided-tracing"){
+//     gameVersion = gameType[0].split('?')[0];
+//     gameId = gameName[4];
+//     console.log('Type - 1');
+
+// } else if(gameName.length == 4){
+//     gameVersion = gameName[3].split('?')[0];
+//     gameId = urlParams.get('id');
+// }
+// else if(gameName.length == 5){
+//     gameVersion = gameName[3] + '-' + gameName[4].split('?')[0];
+//     gameId = urlParams.get('id');
+//     console.log('Type - 2');
+// }else if(gameName.length == 6){
+//     gameVersion = gameType[0] + '-' + gameName[4];
+//     gameId = urlParams.get('id');
+//     console.log('Type - 3');
+// }
+
+console.log(gameVersion)
+
+function submitUserData(drawingZone) {
+    const endTime = Date.now();
+    const timeDifference = endTime - startTime;
+    const timeDifferenceInSeconds = timeDifference / 1000;
+    // console.log(`Time difference: ${timeDifferenceInSeconds} seconds`);
+
+    let imageCode;
+    let gameScore;
+
+    if(scoreTotal){
+        gameScore = scoreTotal;
+    }else{
+        gameScore = 0;
+    }
+    // console.log('This is from main point', scoreTotal);
+    drawingZone.renderer.snapshot((image) => {
+        if(gameType[0] == 'drawing'){
+            submitButton.setVisible(true);
+            snapshotButton.setVisible(true);
+            customCursor.setVisible(true);
+            image.style.width = '160px';
+            image.style.height = '120px';
+            image.style.paddingLeft = '2px';
+            document.body.appendChild(image);
+            // Download the snapshot as an image
+            // const link = document.createElement('a');
+            // link.href = image.src;
+            // link.download = 'my_drawing.png';
+            // link.click();
+            document.body.removeChild(image);
+            imageCode = image.src;
+        }else if( gameType[0] == "guided-tracing"){
+            // submitButton.setVisible(true);
+            // snapshotButton.setVisible(true);
+            // customCursor.setVisible(true);
+            image.style.width = '160px';
+            image.style.height = '120px';
+            image.style.paddingLeft = '2px';
+            document.body.appendChild(image);
+            // Download the snapshot as an image
+            // const link = document.createElement('a');
+            // link.href = image.src;
+            // link.download = `guided-tracing-${gameId}.png`;
+            // link.click();
+            document.body.removeChild(image);
+            imageCode = image.src;
+        }
+        let starValue;
+        if(scoreTotal === maxScore){
+            starValue = 5;
+        } else if(scoreTotal === maxScore - 1){
+            starValue = 4;
+        } else{
+            starValue = 3;
+        }
+        let userData = {
+            'gameName': gameVersion,
+            'gameID': gameId,
+            'screenShot': imageCode,
+            'userId' : userId,
+            'gameTime' : timeDifferenceInSeconds,
+            'score' : scoreTotal,
+            'gameStar' : starValue
+        };
+        // console.log(userData);
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(userData)
+        })
+        .then(response => {
+        setTimeout(() => { 
+            if (response.ok) {
+            if (response.status == 200) {
+                document.getElementById('wsSavedImg').classList.remove('-z-10');
+            }
+            } else {
+            console.log('Something went wrong', response);
+            }
+        }, 100);
+        })
+        .catch(error => {
+        console.error('An error occurred', error);
+        });
+            
+            // Clear the drawing
+            // graphics.clear();
+        });        
+};

src/pages/drag/index.astro

@@ -465,7 +465,7 @@ const numberOfTimes = starNumberOfTime;
             counter++;
             return 'borderCorrect';
           } else {
-            console.log(`Score Total: ${scoreTotal}`); 
+            // console.log(`Score Total: ${scoreTotal}`); 
             return 'borderWrong';
           }
         };

src/pages/drawing/drawing_phonics.astro

@@ -3,14 +3,71 @@ import Layout from '../../layouts/Layout.astro';
 ---
 <Layout title='Drawing Game'>
     <main>
-        <div>
+		<div id="parentMainContainer"class="hidden">
+            <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+                <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+            </div>
+            <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+                <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+                    <div class="flex flex-row space-x-4 items-center justify-center">
+                        <div id="star-container"></div>
+                    </div>
+                    <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                        <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                        <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+                    </div>
+                    <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                        <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                        <button onclick="retryGame()" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+                    </div>
+                </div>
+            </div>
+            <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+                <div class="flex flex-row z-50 place-items-end clip-art">
+                    <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+                    <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                        <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                        <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                        
+                        <!-- Content -->
+                        <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                            <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                            <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                            <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                        </div>
+                      </div>
+                </div>
+            </div>
+            <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+                <div class="w-full max-w-6xl bg-white rounded-lg">
+                    <div class="flex justify-between p-3">
+                        <p class="text-[19px] font-[700]">Attempt 2</p>
+                        <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+                    </div>
+                    <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                        <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                        <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                        <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                        <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                            <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                            <p class="text-sm" id="imageDescription">Description goes here.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 	</main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+    function showAnimation() {
+        const clipArt = document.querySelector('.clip-art');
+        clipArt.classList.add('show');
+    }
     const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
     const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
 
@@ -175,9 +232,14 @@ import Layout from '../../layouts/Layout.astro';
             borderBottom.lineTo(x + lineWidth, y);
             borderBottom.strokePath();
 
+            // this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+            // this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+            // const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+            // submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+
             this.add.image(customWidth / topLogoWidth, 30, "topLogo");
-            this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
-            const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+            muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+            retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
             submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
 
 
@@ -193,8 +255,13 @@ import Layout from '../../layouts/Layout.astro';
             // });
             submitButton.setVisible(true);
             submitButton.setInteractive().on('pointerdown', () => {
-                // windowLoad();
                 submitUserData(this);
+                showAnimation();
+                parentMainContainer.classList.remove('hidden');
+                if(isMobile){
+                    colorContainer.style.display = 'none';
+                    // parentMainContainer.classList.remove('hidden');
+                }
             });
 
             const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
@@ -216,7 +283,12 @@ import Layout from '../../layouts/Layout.astro';
                 outlineImage.setDepth(1).setScale(0.5);   
             }  
 
+            const maskGraphics = this.make.graphics();
+            maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+            const mask = maskGraphics.createGeometryMask();
+
             graphics = this.add.graphics();
+            graphics.setMask(mask);
             const colorContainer = document.createElement('div');
             colorContainer.style.position = 'absolute';
             colorContainer.style.top = '13%';
@@ -835,5 +907,30 @@ import Layout from '../../layouts/Layout.astro';
     .clear-button {
         background-color: blue;
     }
+    /* Animation styles */
+    @keyframes slideInUp {
+    0% {
+        opacity: 0;
+        transform: translateY(100%); /* Start below the viewport */
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0); /* End at its original position */
+    }
+    }
+
+    .clip-art-container {
+        overflow: hidden; /* Prevents overflow during the animation */
+    }
+
+    .clip-art {
+        transform: translateX(100%); /* Initially off-screen to the right */
+        opacity: 0; /* Initially hidden */
+        transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+    }
+
+    .clip-art.show {
+        transform: translateX(0); /* Move the image into view */
+        opacity: 1; /* Fade in */
+    }
 </style>
-<!-- <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M11.4001 18.1612L11.4001 18.1612L18.796 10.7653C17.7894 10.3464 16.5972 9.6582 15.4697 8.53068C14.342 7.40298 13.6537 6.21058 13.2348 5.2039L5.83882 12.5999L5.83879 12.5999C5.26166 13.1771 4.97307 13.4657 4.7249 13.7838C4.43213 14.1592 4.18114 14.5653 3.97634 14.995C3.80273 15.3593 3.67368 15.7465 3.41556 16.5208L2.05445 20.6042C1.92743 20.9852 2.0266 21.4053 2.31063 21.6894C2.59466 21.9734 3.01478 22.0726 3.39584 21.9456L7.47918 20.5844C8.25351 20.3263 8.6407 20.1973 9.00498 20.0237C9.43469 19.8189 9.84082 19.5679 10.2162 19.2751C10.5343 19.0269 10.823 18.7383 11.4001 18.1612Z" fill="#1C274C"></path> <path d="M20.8482 8.71306C22.3839 7.17735 22.3839 4.68748 20.8482 3.15178C19.3125 1.61607 16.8226 1.61607 15.2869 3.15178L14.3999 4.03882C14.4121 4.0755 14.4246 4.11268 14.4377 4.15035C14.7628 5.0875 15.3763 6.31601 16.5303 7.47002C17.6843 8.62403 18.9128 9.23749 19.85 9.56262C19.8875 9.57563 19.9245 9.58817 19.961 9.60026L20.8482 8.71306Z" fill="#1C274C"></path> </g></svg> -->

src/pages/drawing/drawing_writo.astro

@@ -3,14 +3,71 @@ import Layout from '../../layouts/Layout.astro';
 ---
 <Layout title='Drawing Game'>
     <main>
-        <div>
+		<div id="parentMainContainer"class="hidden">
+            <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+                <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+            </div>
+            <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+                <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+                    <div class="flex flex-row space-x-4 items-center justify-center">
+                        <div id="star-container"></div>
+                    </div>
+                    <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                        <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                        <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+                    </div>
+                    <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                        <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                        <button onclick="retryGame()" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+                    </div>
+                </div>
+            </div>
+            <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+                <div class="flex flex-row z-50 place-items-end clip-art">
+                    <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+                    <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                        <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                        <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                        
+                        <!-- Content -->
+                        <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                            <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                            <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                            <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                        </div>
+                      </div>
+                </div>
+            </div>
+            <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+                <div class="w-full max-w-6xl bg-white rounded-lg">
+                    <div class="flex justify-between p-3">
+                        <p class="text-[19px] font-[700]">Attempt 2</p>
+                        <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+                    </div>
+                    <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                        <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                        <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                        <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                        <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                            <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                            <p class="text-sm" id="imageDescription">Description goes here.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 	</main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+    function showAnimation() {
+        const clipArt = document.querySelector('.clip-art');
+        clipArt.classList.add('show');
+    }
     const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
     const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
 
@@ -166,6 +223,8 @@ import Layout from '../../layouts/Layout.astro';
             });
             // window.load
 
+
+
             const borderBottom = this.add.graphics();
             const x = 0; const y = 54;
             const lineWidth = window.innerWidth;
@@ -176,9 +235,14 @@ import Layout from '../../layouts/Layout.astro';
             borderBottom.lineTo(x + lineWidth, y);
             borderBottom.strokePath();
 
+            // this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+            // this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+            // const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+            // submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+
             this.add.image(customWidth / topLogoWidth, 30, "topLogo");
-            this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
-            const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+            muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+            retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
             submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
 
 
@@ -195,8 +259,13 @@ import Layout from '../../layouts/Layout.astro';
             // });
             submitButton.setVisible(true);
             submitButton.setInteractive().on('pointerdown', () => {
-                // windowLoad();
                 submitUserData(this);
+                showAnimation();
+                parentMainContainer.classList.remove('hidden');
+                if(isMobile){
+                    colorContainer.style.display = 'none';
+                    // parentMainContainer.classList.remove('hidden');
+                }
             });
 
             const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
@@ -226,7 +295,12 @@ import Layout from '../../layouts/Layout.astro';
             // } else{
             //     outlineImage.setDepth(1).setScale(0.65);   
             // }  
+            const maskGraphics = this.make.graphics();
+            maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+            const mask = maskGraphics.createGeometryMask();
+
             graphics = this.add.graphics();
+            graphics.setMask(mask);
             const colorContainer = document.createElement('div');
             colorContainer.style.position = 'absolute';
             colorContainer.style.top = '13%';
@@ -842,8 +916,30 @@ import Layout from '../../layouts/Layout.astro';
     // }
 </script>
 <style>
-    .clear-button {
-        background-color: blue;
+    /* Animation styles */
+    @keyframes slideInUp {
+    0% {
+        opacity: 0;
+        transform: translateY(100%); /* Start below the viewport */
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0); /* End at its original position */
+    }
+    }
+
+    .clip-art-container {
+        overflow: hidden; /* Prevents overflow during the animation */
+    }
+
+    .clip-art {
+        transform: translateX(100%); /* Initially off-screen to the right */
+        opacity: 0; /* Initially hidden */
+        transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+    }
+
+    .clip-art.show {
+        transform: translateX(0); /* Move the image into view */
+        opacity: 1; /* Fade in */
     }
 </style>
-<!-- <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M11.4001 18.1612L11.4001 18.1612L18.796 10.7653C17.7894 10.3464 16.5972 9.6582 15.4697 8.53068C14.342 7.40298 13.6537 6.21058 13.2348 5.2039L5.83882 12.5999L5.83879 12.5999C5.26166 13.1771 4.97307 13.4657 4.7249 13.7838C4.43213 14.1592 4.18114 14.5653 3.97634 14.995C3.80273 15.3593 3.67368 15.7465 3.41556 16.5208L2.05445 20.6042C1.92743 20.9852 2.0266 21.4053 2.31063 21.6894C2.59466 21.9734 3.01478 22.0726 3.39584 21.9456L7.47918 20.5844C8.25351 20.3263 8.6407 20.1973 9.00498 20.0237C9.43469 19.8189 9.84082 19.5679 10.2162 19.2751C10.5343 19.0269 10.823 18.7383 11.4001 18.1612Z" fill="#1C274C"></path> <path d="M20.8482 8.71306C22.3839 7.17735 22.3839 4.68748 20.8482 3.15178C19.3125 1.61607 16.8226 1.61607 15.2869 3.15178L14.3999 4.03882C14.4121 4.0755 14.4246 4.11268 14.4377 4.15035C14.7628 5.0875 15.3763 6.31601 16.5303 7.47002C17.6843 8.62403 18.9128 9.23749 19.85 9.56262C19.8875 9.57563 19.9245 9.58817 19.961 9.60026L20.8482 8.71306Z" fill="#1C274C"></path> </g></svg> -->

src/pages/drawing/index.astro

@@ -18,7 +18,7 @@ import Layout from '../../layouts/Layout.astro';
                     </div>
                     <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
                         <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
-                        <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+                        <button onclick="retryGame()" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
                     </div>
                 </div>
             </div>
@@ -345,7 +345,14 @@ import Layout from '../../layouts/Layout.astro';
             } else{
                 outlineImage.setDepth(1).setScale(0.65);   
             }
+            
+            const maskGraphics = this.make.graphics();
+            maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+            const mask = maskGraphics.createGeometryMask();
+
+
             graphics = this.add.graphics();
+            graphics.setMask(mask);
             const colorContainer = document.createElement('div');
             colorContainer.style.zIndex = '1';
             colorContainer.style.position = 'absolute';
@@ -702,12 +709,14 @@ import Layout from '../../layouts/Layout.astro';
             eraserButton.addEventListener('click', () => {
             isErasing = !isErasing;
                 if (isErasing) {
-                    eraserButton.style.border = '2px solid #0348A8';
+                    eraserButton.style.border = '3px solid #0348A8';
+                    eraserButton.style.backgroundColor = '#0348A820';
                 } else {
                     // Return to drawing mode
                     // eraserButton.style.backgroundColor = 'green'; // Restore eraser button color
                     eraserButton.style.color = 'blue';
                     eraserButton.style.border = 'none';
+                    eraserButton.style.backgroundColor = 'transparent';
                 }
             });
             // Add the Clear and Eraser buttons to the container
@@ -1030,4 +1039,3 @@ import Layout from '../../layouts/Layout.astro';
         display: block;
     }
 </style>
-<!-- <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M11.4001 18.1612L11.4001 18.1612L18.796 10.7653C17.7894 10.3464 16.5972 9.6582 15.4697 8.53068C14.342 7.40298 13.6537 6.21058 13.2348 5.2039L5.83882 12.5999L5.83879 12.5999C5.26166 13.1771 4.97307 13.4657 4.7249 13.7838C4.43213 14.1592 4.18114 14.5653 3.97634 14.995C3.80273 15.3593 3.67368 15.7465 3.41556 16.5208L2.05445 20.6042C1.92743 20.9852 2.0266 21.4053 2.31063 21.6894C2.59466 21.9734 3.01478 22.0726 3.39584 21.9456L7.47918 20.5844C8.25351 20.3263 8.6407 20.1973 9.00498 20.0237C9.43469 19.8189 9.84082 19.5679 10.2162 19.2751C10.5343 19.0269 10.823 18.7383 11.4001 18.1612Z" fill="#1C274C"></path> <path d="M20.8482 8.71306C22.3839 7.17735 22.3839 4.68748 20.8482 3.15178C19.3125 1.61607 16.8226 1.61607 15.2869 3.15178L14.3999 4.03882C14.4121 4.0755 14.4246 4.11268 14.4377 4.15035C14.7628 5.0875 15.3763 6.31601 16.5303 7.47002C17.6843 8.62403 18.9128 9.23749 19.85 9.56262C19.8875 9.57563 19.9245 9.58817 19.961 9.60026L20.8482 8.71306Z" fill="#1C274C"></path> </g></svg> -->

src/pages/drawing/v2.astro

@@ -3,34 +3,66 @@ import Layout from '../../layouts/Layout.astro';
 ---
 <Layout title='Drawing Game'>
     <main>
-		<div>
-      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
-        <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16">
+		<div id="parentMainContainer"class="hidden">
+            <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+                <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
             </div>
-      </div>
-      <div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
+            <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
                 <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
                     <div class="flex flex-row space-x-4 items-center justify-center">
                         <div id="star-container"></div>
                     </div>
                     <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
-            <img class="z-10" src="/assets/clip-art.svg" alt="" />
+                        <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
                         <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
                     </div>
                     <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-            <button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
-            <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+                        <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                        <button onclick="retryGame()" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
                     </div>
                 </div>
             </div>
-      <div class="clip-art-container absolute bottom-0 right-0">
-          <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
+            <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+                <div class="flex flex-row z-50 place-items-end clip-art">
+                    <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+                    <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                        <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                        <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                        
+                        <!-- Content -->
+                        <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                            <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                            <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                            <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
                         </div>
                       </div>
+                </div>
+            </div>
+            <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+                <div class="w-full max-w-6xl bg-white rounded-lg">
+                    <div class="flex justify-between p-3">
+                        <p class="text-[19px] font-[700]">Attempt 2</p>
+                        <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+                    </div>
+                    <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                        <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                        <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                        <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                        <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                            <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                            <p class="text-sm" id="imageDescription">Description goes here.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
 		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 	</main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
     function showAnimation() {
         const clipArt = document.querySelector('.clip-art');
@@ -254,10 +286,16 @@ import Layout from '../../layouts/Layout.astro';
             const outlineImage1 = this.add.image(customWidth / image1Width, customHeight / image1Height, 'image1');
             const outlineImage2 = this.add.image(customWidth / image2Width + image2Right, customHeight / image2Height + image2Bottom, 'image2');
 
+            // this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+            // this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+            // const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+            // submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+
             this.add.image(customWidth / topLogoWidth, 30, "topLogo");
-            this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
-            const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+            muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+            retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
             submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+
             retryButton.setInteractive().on('pointerdown', ()=>{
                 window.location.reload();
             })
@@ -268,13 +306,16 @@ import Layout from '../../layouts/Layout.astro';
             // backgroundColor: 'blue',
             // padding: { x: 20, y: 10 },
             // });
+            submitButton.setVisible(true);
             submitButton.setInteractive().on('pointerdown', () => {
-            // console.log('Clicked');
-            // windowLoad();
-            // submitUserData();
                 submitUserData(this);
                 showAnimation();
-            })
+                parentMainContainer.classList.remove('hidden');
+                if(isMobile){
+                    colorContainer.style.display = 'none';
+                    // parentMainContainer.classList.remove('hidden');
+                }
+            });
             const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
             if(!isMobile){
                 // this.add.text(customWidth / 10, 20, "Drawing", textStyle);
@@ -294,7 +335,14 @@ import Layout from '../../layouts/Layout.astro';
                 outlineImage1.setDepth(-5).setScale(0.60);
                 outlineImage2.setDepth(-5).setScale(0.60);   
             }
+
+            const maskGraphics = this.make.graphics();
+            maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+            const mask = maskGraphics.createGeometryMask();
+
+
             graphics = this.add.graphics();
+            graphics.setMask(mask);
             const colorContainer = document.createElement('div');
             colorContainer.style.position = 'absolute';
             colorContainer.style.top = '13%';

src/pages/drawing/v3.astro

@@ -3,14 +3,71 @@ import Layout from '../../layouts/Layout.astro';
 ---
 <Layout title='Drawing Game'>
     <main>
-        <div>
+		<div id="parentMainContainer"class="hidden">
+            <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+                <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+            </div>
+            <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+                <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+                    <div class="flex flex-row space-x-4 items-center justify-center">
+                        <div id="star-container"></div>
+                    </div>
+                    <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                        <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                        <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+                    </div>
+                    <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                        <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                        <button onclick="retryGame()" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+                    </div>
+                </div>
+            </div>
+            <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+                <div class="flex flex-row z-50 place-items-end clip-art">
+                    <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+                    <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                        <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                        <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                        
+                        <!-- Content -->
+                        <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                            <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                            <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                            <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                        </div>
+                      </div>
+                </div>
+            </div>
+            <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+                <div class="w-full max-w-6xl bg-white rounded-lg">
+                    <div class="flex justify-between p-3">
+                        <p class="text-[19px] font-[700]">Attempt 2</p>
+                        <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+                    </div>
+                    <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                        <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                        <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                        <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                        <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                            <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                            <p class="text-sm" id="imageDescription">Description goes here.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 	</main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+    function showAnimation() {
+        const clipArt = document.querySelector('.clip-art');
+        clipArt.classList.add('show');
+    }
     const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
     const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
     const drawingZone = {
@@ -208,10 +265,19 @@ import Layout from '../../layouts/Layout.astro';
             borderBottom.strokePath();
 
             const outlineImage = this.add.image(customWidth / 2, customHeight / 2 + 20, 'outline');
+            // this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+            // this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+            // const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+            // submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+
+            
+
             this.add.image(customWidth / topLogoWidth, 30, "topLogo");
-            this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
-            const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+            muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+            retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
             submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+            // galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");
+            
             retryButton.setInteractive().on('pointerdown', () => {
                 window.location.reload();
             })
@@ -222,13 +288,16 @@ import Layout from '../../layouts/Layout.astro';
             // backgroundColor: 'blue',
             // padding: { x: 20, y: 10 },
             // });
-            // submitButton.setVisible(true);
+            submitButton.setVisible(true);
             submitButton.setInteractive().on('pointerdown', () => {
-            // console.log('Clicked');
-            // submitButton.setVisible(false);
-            // windowLoad();
                 submitUserData(this);
-            })
+                showAnimation();
+                parentMainContainer.classList.remove('hidden');
+                if(isMobile){
+                    colorContainer.style.display = 'none';
+                    // parentMainContainer.classList.remove('hidden');
+                }
+            });
             // const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
             // if(!isMobile){
             //     this.add.text(customWidth / 10, 20, "Drawing", textStyle);
@@ -245,7 +314,12 @@ import Layout from '../../layouts/Layout.astro';
                 outlineImage.setDepth(-1).setScale(1);   
             }
 
+            const maskGraphics = this.make.graphics();
+            maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+            const mask = maskGraphics.createGeometryMask();
+
             graphics = this.add.graphics();
+            graphics.setMask(mask);
             const colorContainer = document.createElement('div');
             colorContainer.style.position = 'absolute';
             colorContainer.style.top = '13%';
@@ -788,4 +862,40 @@ import Layout from '../../layouts/Layout.astro';
     //     this.customCursor.y = this.input.y;
     // }
 </script>
-<!-- <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M11.4001 18.1612L11.4001 18.1612L18.796 10.7653C17.7894 10.3464 16.5972 9.6582 15.4697 8.53068C14.342 7.40298 13.6537 6.21058 13.2348 5.2039L5.83882 12.5999L5.83879 12.5999C5.26166 13.1771 4.97307 13.4657 4.7249 13.7838C4.43213 14.1592 4.18114 14.5653 3.97634 14.995C3.80273 15.3593 3.67368 15.7465 3.41556 16.5208L2.05445 20.6042C1.92743 20.9852 2.0266 21.4053 2.31063 21.6894C2.59466 21.9734 3.01478 22.0726 3.39584 21.9456L7.47918 20.5844C8.25351 20.3263 8.6407 20.1973 9.00498 20.0237C9.43469 19.8189 9.84082 19.5679 10.2162 19.2751C10.5343 19.0269 10.823 18.7383 11.4001 18.1612Z" fill="#1C274C"></path> <path d="M20.8482 8.71306C22.3839 7.17735 22.3839 4.68748 20.8482 3.15178C19.3125 1.61607 16.8226 1.61607 15.2869 3.15178L14.3999 4.03882C14.4121 4.0755 14.4246 4.11268 14.4377 4.15035C14.7628 5.0875 15.3763 6.31601 16.5303 7.47002C17.6843 8.62403 18.9128 9.23749 19.85 9.56262C19.8875 9.57563 19.9245 9.58817 19.961 9.60026L20.8482 8.71306Z" fill="#1C274C"></path> </g></svg> -->
+<style>
+    .clear-button {
+        background-color: blue;
+    }
+    /* Animation styles */
+    @keyframes slideInUp {
+        0% {
+            opacity: 0;
+            transform: translateY(100%); /* Start below the viewport */
+        }
+        100% {
+            opacity: 1;
+            transform: translateY(0); /* End at its original position */
+        }
+    }
+
+    .clip-art-container {
+        overflow: hidden; /* Prevents overflow during the animation */
+    }
+
+    .clip-art {
+        transform: translateX(100%); /* Initially off-screen to the right */
+        opacity: 0; /* Initially hidden */
+        transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+    }
+
+    .clip-art.show {
+        transform: translateX(0); /* Move the image into view */
+        opacity: 1; /* Fade in */
+    }
+    .slide{
+        display: none;
+    }
+    .active{
+        display: block;
+    }
+</style>

src/pages/guided-tracing/0.astro

@@ -298,6 +298,9 @@ import Layout from "../../layouts/Layout.astro";
       // const baseFontSize = 16;
       // const responsiveFontSize = (window.innerWidth / 550) * baseFontSize;
       
+          const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
       this.add.text(window.innerWidth / 2, 80, 'Number: 0', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
 
@@ -356,6 +359,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       // graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {

src/pages/guided-tracing/1.astro

@@ -281,6 +281,9 @@ import Layout from "../../layouts/Layout.astro";
     });
 
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Number: 1', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 1', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -337,6 +340,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/2.astro

@@ -246,6 +246,9 @@ import Layout from "../../layouts/Layout.astro";
     });
 
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Number: 1', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 2', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -333,6 +336,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/3.astro

@@ -255,6 +255,9 @@ import Layout from "../../layouts/Layout.astro";
     });
 
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Number: 3', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 3', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -343,6 +346,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/4.astro

@@ -260,6 +260,9 @@ import Layout from "../../layouts/Layout.astro";
       }
     });
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Number: 4', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 4', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -379,6 +382,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/5.astro

@@ -258,6 +258,9 @@ import Layout from "../../layouts/Layout.astro";
     })
 
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Number: 5', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 5', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -375,6 +378,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/6.astro

@@ -256,6 +256,9 @@ import Layout from "../../layouts/Layout.astro";
     })
 
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Number: 6', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 6', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -341,6 +344,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/7.astro

@@ -259,6 +259,9 @@ import Layout from "../../layouts/Layout.astro";
     })
 
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Number: 7', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 7', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -344,6 +347,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/8.astro

@@ -257,6 +257,9 @@ import Layout from "../../layouts/Layout.astro";
     })
 
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Number: 8', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 8', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -345,6 +348,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/9.astro

@@ -257,6 +257,9 @@ import Layout from "../../layouts/Layout.astro";
     })
 
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Number: 9', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 9', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -346,6 +349,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/A.astro

@@ -8,65 +8,16 @@ import Layout from "../../layouts/Layout.astro";
         <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
       </div>
     </div>
-    <div id="parentMainContainer" class="hidden">
-      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
-          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
-      </div>
-      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
-          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
-              <div class="flex flex-row space-x-4 items-center justify-center">
-                  <div id="star-container"></div>
-              </div>
-              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
-                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
-                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
-              </div>
-              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
-                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
-              </div>
-          </div>
-      </div>
-      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
-          <div class="flex flex-row z-50 place-items-end clip-art">
-              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
-              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
-                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
-                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+    <div>
       
-                  <!-- Content -->
-                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
-                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
-                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
-                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
-                  </div>
-                </div>
-          </div>
-      </div>
-      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
-          <div class="w-full max-w-6xl bg-white rounded-lg">
-              <div class="flex justify-between p-3">
-                  <p class="text-[19px] font-[700]">Attempt 2</p>
-                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
-              </div>
-              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
-                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
-
-                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
-                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
-
-                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
-                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
-                      <p class="text-sm" id="imageDescription">Description goes here.</p>
-                  </div>
-              </div>
-          </div>
+      <div id="wsSavedImg" class="clip-art-container -z-10 absolute bottom-0 right-0">
+          <img src="/assets/svg/tracing-done.svg" alt="Clip Art" class="clip-art">
       </div>
     </div>
     <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
   </main>
 </Layout>
-<script src="/saveGameAI.js" is:inline></script>
+<script src="/saveTracingGameData.js" is:inline></script>
 <script is:inline>
   function showAnimation() {
       const clipArt = document.querySelector('.clip-art');
@@ -108,7 +59,7 @@ import Layout from "../../layouts/Layout.astro";
   let formattedDateTime;
   let gameStartTime = "start time here";
   let demoButton;
-  
+  let maxScore;
 
     if(isMobile){
       cloudeSize = 200;
@@ -229,7 +180,7 @@ import Layout from "../../layouts/Layout.astro";
         // windowLoad();
         submitUserData(this);
         showAnimation();
-        parentMainContainer.classList.remove('hidden');
+        // parentMainContainer.classList.remove('hidden');
       })
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setDepth(2).setScale(letterScale);
@@ -253,10 +204,14 @@ import Layout from "../../layouts/Layout.astro";
       }
     })
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: A', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : A', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedAScale);
+
     // Play the video
     // animatedLetter.play();
     animatedLetter.setVisible(false);
@@ -270,6 +225,9 @@ import Layout from "../../layouts/Layout.astro";
 
     let textX, textY;
     let stepTextSize = isMobile ? 12 : 16;
+    let finalMessage = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, 'Great job! You traced the letter perfectly!',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
+    finalMessage.setVisible(false);
+
       firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
@@ -296,6 +254,8 @@ import Layout from "../../layouts/Layout.astro";
       const audioThreeAudio = this.sound.add('audioThree');
       thirdTextLayer.setVisible(false);
       thirdLayer.setDepth(1.1);
+
+
       // thirdLayer.setScale(1.15);
       thirdLayer.setAlpha(0.5);
       thirdLayer.setInteractive({ draggable: true });
@@ -360,6 +320,7 @@ import Layout from "../../layouts/Layout.astro";
         if (distance >= 100) {
             thirdLayer.setAlpha(1);
             thirdTextLayer.setVisible(false);
+            finalMessage.setVisible(true)
         } else {
             thirdLayer.setAlpha(0.5);
         }
@@ -367,6 +328,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+      graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -400,12 +362,15 @@ function update() {
 }
 
 </script>
-<style>
-  .clear-button {
-      background-color: blue;
+<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
+  * {
+    margin: 0;
+    padding: 0;
+    cursor: -webkit-grab; cursor: grab;
+    font-family: quicksand;
   }
-  /* Animation styles */
-  @keyframes slideInUp {
+/* Animation styles */
+@keyframes slideInUp {
   0% {
     opacity: 0;
     transform: translateY(100%); /* Start below the viewport */
@@ -414,26 +379,20 @@ function update() {
     opacity: 1;
     transform: translateY(0); /* End at its original position */
   }
-  }
+}
 
-  .clip-art-container {
+.clip-art-container {
     overflow: hidden; /* Prevents overflow during the animation */
-  }
+}
 
-  .clip-art {
+.clip-art {
     transform: translateX(100%); /* Initially off-screen to the right */
     opacity: 0; /* Initially hidden */
     transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
-  }
+}
 
-  .clip-art.show {
+.clip-art.show {
     transform: translateX(0); /* Move the image into view */
     opacity: 1; /* Fade in */
-  }
-  .slide{
-      display: none;
-  }
-  .active{
-      display: block;
-  }
+}
 </style>

src/pages/guided-tracing/B.astro

@@ -254,6 +254,9 @@ import Layout from "../../layouts/Layout.astro";
       }
     })
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: B', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : B', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -373,6 +376,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/C.astro

@@ -249,6 +249,9 @@ import Layout from "../../layouts/Layout.astro";
       }
     })
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: C', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : C', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -303,6 +306,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/D.astro

@@ -254,6 +254,9 @@ import Layout from "../../layouts/Layout.astro";
       }
     })
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: D', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : D', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -337,6 +340,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/E.astro

@@ -250,6 +250,9 @@ import Layout from "../../layouts/Layout.astro";
       }
     })
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: E', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : E', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -403,6 +406,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/F.astro

@@ -249,6 +249,9 @@ import Layout from "../../layouts/Layout.astro";
       }
     })
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: F', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : F', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -363,6 +366,7 @@ import Layout from "../../layouts/Layout.astro";
         });
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/G.astro

@@ -250,6 +250,9 @@ import Layout from "../../layouts/Layout.astro";
         
       }
     })
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: G', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : G', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -334,6 +337,7 @@ import Layout from "../../layouts/Layout.astro";
         });
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/H.astro

@@ -250,6 +250,9 @@ import Layout from "../../layouts/Layout.astro";
       }
     })
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: H', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : H', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -366,6 +369,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/I.astro

@@ -251,6 +251,9 @@ import Layout from "../../layouts/Layout.astro";
         }
       })
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: I', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : I', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -368,6 +371,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/J.astro

@@ -248,6 +248,9 @@ import Layout from "../../layouts/Layout.astro";
       }
     })
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: J', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : J', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -297,6 +300,7 @@ import Layout from "../../layouts/Layout.astro";
         });
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/K.astro

@@ -254,6 +254,9 @@ import Layout from "../../layouts/Layout.astro";
       }
     })
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: K', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : K', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -369,6 +372,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/L.astro

@@ -255,6 +255,9 @@ import Layout from "../../layouts/Layout.astro";
         }
     })
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: L', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : L', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -341,6 +344,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/M.astro

@@ -251,6 +251,9 @@ import Layout from "../../layouts/Layout.astro";
       }
     })
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: M', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : M', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -404,6 +407,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/N.astro

@@ -261,6 +261,9 @@ import Layout from "../../layouts/Layout.astro";
       }
     })
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: N', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : N', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -375,6 +378,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/O.astro

@@ -255,6 +255,9 @@ import Layout from "../../layouts/Layout.astro";
       }
     })
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: O', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : O', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -311,6 +314,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/P.astro

@@ -256,6 +256,9 @@ import Layout from "../../layouts/Layout.astro";
         
       }
     })
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: P', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : P', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -343,6 +346,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/Q.astro

@@ -252,6 +252,9 @@ import Layout from "../../layouts/Layout.astro";
       }
     })
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: Q', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : Q', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -337,6 +340,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/R.astro

@@ -262,6 +262,9 @@ import Layout from "../../layouts/Layout.astro";
         
       }
     })
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: R', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : R', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -376,6 +379,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/S.astro

@@ -249,6 +249,9 @@ import Layout from "../../layouts/Layout.astro";
       }
     })
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: S', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : S', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -303,6 +306,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/T.astro

@@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
   <main>
-        <div>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div id="parentMainContainer" class="hidden">
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+              <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+              </div>
+              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+              </div>
+              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+              </div>
+          </div>
+      </div>
+      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+          <div class="flex flex-row z-50 place-items-end clip-art">
+              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  
+                  <!-- Content -->
+                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                  </div>
+                </div>
+          </div>
+      </div>
+      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+          <div class="w-full max-w-6xl bg-white rounded-lg">
+              <div class="flex justify-between p-3">
+                  <p class="text-[19px] font-[700]">Attempt 2</p>
+                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+              </div>
+              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                      <p class="text-sm" id="imageDescription">Description goes here.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
     </div>
     <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
   </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -91,6 +156,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     };
+    if(isMobile){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.65;
+      resetIconWidth = 1.40;
+      tickIconWidth = 1.21;
+      cancelIconWidth = 1.08;
+      galleryIconWidth = 2;
+    }else if(isTab){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.6;
+      resetIconWidth = 1.43;
+      tickIconWidth = 1.29;
+      cancelIconWidth = 1.18;
+      galleryIconWidth = 1.81;
+    } else{
+      topLogoWidth = 6;
+      muteIconWidth = 1.3;
+      resetIconWidth = 1.26;
+      tickIconWidth = 1.222;
+      cancelIconWidth = 1.185;
+      galleryIconWidth = 1.345;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -109,137 +196,67 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-     
+    this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+    muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+    retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+    submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+    demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
     submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+    cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+    const borderBottom = this.add.graphics();
+    const x = 0; const y = 54;
+    const lineWidth = window.innerWidth;
+    borderBottom.lineStyle(1, 0x0348A8);
+    borderBottom.setAlpha(0.2);
+    borderBottom.beginPath();
+    borderBottom.moveTo(x, y);
+    borderBottom.lineTo(x + lineWidth, y);
+    borderBottom.strokePath();
 
-        submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-          font: '900 24px Quicksand',
-          fill: '#05b3a4',
-          backgroundColor : '#7c4c23',
-          padding: {x: 10, y: 10},
-          shadow: {
-            offsetX : 2, 
-            offsetY : 2, 
-            color: '#000',
-            blur: 5,
-            fill: true
-          }
-        });
-         submitButton.setVisible(false);
     submitButton.setInteractive().on('pointerdown', () => {
       // console.log('Clicked');
-          submitButton.setVisible(false);
       // windowLoad();
       submitUserData(this);
+      showAnimation();
+      parentMainContainer.classList.remove('hidden');
     })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : T", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterT').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterT').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedT').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-    });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
         animatedLetter.setVisible(true);
-    });
+        firstScreen.setVisible(true);
         
+      }
+    })
 
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : T', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: T', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : T', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedTHeight, 'animatedT').setDepth(2).setScale(animatedVideoScale);
-
     // Play the video
     // animatedLetter.play();
     animatedLetter.setVisible(false);
@@ -253,11 +270,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
       textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -266,7 +283,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -321,7 +338,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -338,31 +355,14 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
   }
 
@@ -371,3 +371,40 @@ function update() {
 }
 
 </script>
+<style>
+  .clear-button {
+      background-color: blue;
+  }
+  /* Animation styles */
+  @keyframes slideInUp {
+      0% {
+          opacity: 0;
+          transform: translateY(100%); /* Start below the viewport */
+      }
+      100% {
+          opacity: 1;
+          transform: translateY(0); /* End at its original position */
+      }
+  }
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
+  }
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
+  }
+  .slide{
+      display: none;
+  }
+  .active{
+      display: block;
+  }
+</style>

src/pages/guided-tracing/U.astro

@@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
   <main>
-        <div>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div id="parentMainContainer" class="hidden">
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+              <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+              </div>
+              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+              </div>
+              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+              </div>
+          </div>
+      </div>
+      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+          <div class="flex flex-row z-50 place-items-end clip-art">
+              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  
+                  <!-- Content -->
+                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                  </div>
+                </div>
+          </div>
+      </div>
+      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+          <div class="w-full max-w-6xl bg-white rounded-lg">
+              <div class="flex justify-between p-3">
+                  <p class="text-[19px] font-[700]">Attempt 2</p>
+                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+              </div>
+              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                      <p class="text-sm" id="imageDescription">Description goes here.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
     </div>
     <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
   </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -91,6 +156,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     };
+    if(isMobile){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.65;
+      resetIconWidth = 1.40;
+      tickIconWidth = 1.21;
+      cancelIconWidth = 1.08;
+      galleryIconWidth = 2;
+    }else if(isTab){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.6;
+      resetIconWidth = 1.43;
+      tickIconWidth = 1.29;
+      cancelIconWidth = 1.18;
+      galleryIconWidth = 1.81;
+    } else{
+      topLogoWidth = 6;
+      muteIconWidth = 1.3;
+      resetIconWidth = 1.26;
+      tickIconWidth = 1.222;
+      cancelIconWidth = 1.185;
+      galleryIconWidth = 1.345;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -107,138 +194,67 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-     
+    this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+    muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+    retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+    submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+    demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
     submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+    cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+    const borderBottom = this.add.graphics();
+    const x = 0; const y = 54;
+    const lineWidth = window.innerWidth;
+    borderBottom.lineStyle(1, 0x0348A8);
+    borderBottom.setAlpha(0.2);
+    borderBottom.beginPath();
+    borderBottom.moveTo(x, y);
+    borderBottom.lineTo(x + lineWidth, y);
+    borderBottom.strokePath();
 
-        submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-          font: '900 24px Quicksand',
-          fill: '#05b3a4',
-          backgroundColor : '#7c4c23',
-          padding: {x: 10, y: 10},
-          shadow: {
-            offsetX : 2, 
-            offsetY : 2, 
-            color: '#000',
-            blur: 5,
-            fill: true
-          }
-        });
-         submitButton.setVisible(false);
     submitButton.setInteractive().on('pointerdown', () => {
       // console.log('Clicked');
-          submitButton.setVisible(false);
       // windowLoad();
       submitUserData(this);
+      showAnimation();
+      parentMainContainer.classList.remove('hidden');
     })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : U", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterU').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 + 90, customHeight / 2 + letterHeight, 'letterU').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedU').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
 
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
         animatedLetter.setVisible(true);
-    });
+        firstScreen.setVisible(true);
         
-
-      const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-      const baseFontSize = 24;
-      const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-      const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : U', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+      }
+    })
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: U', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : U', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedUHeight, 'animatedU').setDepth(2).setScale(animatedVideoScale);
-
       // Play the video
       // animatedLetter.play();
       animatedLetter.setVisible(false);
@@ -252,11 +268,11 @@ let scoreTotal = 0;  let isDrawing = false;
       });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 12 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Tall Down Curve Up',{ font: '700 35px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Tall Down Curve Up',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -291,7 +307,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -308,30 +324,14 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
     })
 
 
@@ -342,3 +342,40 @@ function update() {
 }
 
 </script>
+<style>
+  .clear-button {
+      background-color: blue;
+  }
+  /* Animation styles */
+  @keyframes slideInUp {
+      0% {
+          opacity: 0;
+          transform: translateY(100%); /* Start below the viewport */
+      }
+      100% {
+          opacity: 1;
+          transform: translateY(0); /* End at its original position */
+      }
+  }
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
+  }
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
+  }
+  .slide{
+      display: none;
+  }
+  .active{
+      display: block;
+  }
+</style>

src/pages/guided-tracing/V.astro

@@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
   <main>
-        <div>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div id="parentMainContainer" class="hidden">
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+              <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+              </div>
+              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+              </div>
+              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+              </div>
+          </div>
+      </div>
+      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+          <div class="flex flex-row z-50 place-items-end clip-art">
+              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  
+                  <!-- Content -->
+                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                  </div>
+                </div>
+          </div>
+      </div>
+      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+          <div class="w-full max-w-6xl bg-white rounded-lg">
+              <div class="flex justify-between p-3">
+                  <p class="text-[19px] font-[700]">Attempt 2</p>
+                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+              </div>
+              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                      <p class="text-sm" id="imageDescription">Description goes here.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
     </div>
     <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
   </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -91,6 +156,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     };
+    if(isMobile){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.65;
+      resetIconWidth = 1.40;
+      tickIconWidth = 1.21;
+      cancelIconWidth = 1.08;
+      galleryIconWidth = 2;
+    }else if(isTab){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.6;
+      resetIconWidth = 1.43;
+      tickIconWidth = 1.29;
+      cancelIconWidth = 1.18;
+      galleryIconWidth = 1.81;
+    } else{
+      topLogoWidth = 6;
+      muteIconWidth = 1.3;
+      resetIconWidth = 1.26;
+      tickIconWidth = 1.222;
+      cancelIconWidth = 1.185;
+      galleryIconWidth = 1.345;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -108,140 +195,69 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
      
+    this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
       submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-        submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-          font: '900 24px Quicksand',
-          fill: '#05b3a4',
-          backgroundColor : '#7c4c23',
-          padding: {x: 10, y: 10},
-          shadow: {
-            offsetX : 2, 
-            offsetY : 2, 
-            color: '#000',
-            blur: 5,
-            fill: true
-          }
-        });
-         submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-          submitButton.setVisible(false);
-          submitNotic.setVisible(false);
         // windowLoad();
         submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : V", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
 
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterV').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterV').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedV').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-
        demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
         animatedLetter.setVisible(true);
-    });
+        firstScreen.setVisible(true);
         
+      }
+    })
 
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : V', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: V', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : V', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedVHeight, 'animatedV').setDepth(2).setScale(animatedVideoScale);
-
     // Play the video
     // animatedLetter.play();
     animatedLetter.setVisible(false);
@@ -255,11 +271,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -268,7 +284,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioOne');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -281,8 +297,6 @@ let scoreTotal = 0;  let isDrawing = false;
         let firstDragStartPoint = { x: 0, y: 0 };
         let secondDragStartPoint = { x: 0, y: 0 };
 
-        // ...
-
         // Add this code for firstLayer
         firstLayer.on('dragstart', (pointer) => {
         firstDragStartPoint.x = pointer.x;
@@ -304,7 +318,6 @@ let scoreTotal = 0;  let isDrawing = false;
             firstLayer.setAlpha(0.5);
         }
         });
-``
         // Repeat the above code for secondLayer and thirdLayer
 
         // Add this code for secondLayer
@@ -326,7 +339,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -343,30 +356,14 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
-        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
+      animatedLetter.setVisible(false);     
+      firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
   }
 
@@ -375,3 +372,40 @@ function update() {
 }
 
 </script>
+<style>
+  .clear-button {
+      background-color: blue;
+  }
+  /* Animation styles */
+  @keyframes slideInUp {
+      0% {
+          opacity: 0;
+          transform: translateY(100%); /* Start below the viewport */
+      }
+      100% {
+          opacity: 1;
+          transform: translateY(0); /* End at its original position */
+      }
+  }
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
+  }
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
+  }
+  .slide{
+      display: none;
+  }
+  .active{
+      display: block;
+  }
+</style>

src/pages/guided-tracing/W.astro

@@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
   <main>
-        <div>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div id="parentMainContainer" class="hidden">
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+              <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+              </div>
+              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+              </div>
+              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+              </div>
+          </div>
+      </div>
+      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+          <div class="flex flex-row z-50 place-items-end clip-art">
+              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  
+                  <!-- Content -->
+                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                  </div>
+                </div>
+          </div>
+      </div>
+      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+          <div class="w-full max-w-6xl bg-white rounded-lg">
+              <div class="flex justify-between p-3">
+                  <p class="text-[19px] font-[700]">Attempt 2</p>
+                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+              </div>
+              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                      <p class="text-sm" id="imageDescription">Description goes here.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
     </div>
     <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
   </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer, fourthLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -91,6 +156,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     };
+    if(isMobile){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.65;
+      resetIconWidth = 1.40;
+      tickIconWidth = 1.21;
+      cancelIconWidth = 1.08;
+      galleryIconWidth = 2;
+    }else if(isTab){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.6;
+      resetIconWidth = 1.43;
+      tickIconWidth = 1.29;
+      cancelIconWidth = 1.18;
+      galleryIconWidth = 1.81;
+    } else{
+      topLogoWidth = 6;
+      muteIconWidth = 1.3;
+      resetIconWidth = 1.26;
+      tickIconWidth = 1.222;
+      cancelIconWidth = 1.185;
+      galleryIconWidth = 1.345;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -108,139 +195,68 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-     
+    this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
       submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-        submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-          font: '900 24px Quicksand',
-          fill: '#05b3a4',
-          backgroundColor : '#7c4c23',
-          padding: {x: 10, y: 10},
-          shadow: {
-            offsetX : 2, 
-            offsetY : 2, 
-            color: '#000',
-            blur: 5,
-            fill: true
-          }
-        });
-         submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-          submitButton.setVisible(false);
         // windowLoad();
         submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : W", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
 
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterW').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterW').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedW').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
         animatedLetter.setVisible(true);
-    });
+        firstScreen.setVisible(true);
         
+      }
+    })
 
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : W', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: W', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : W', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedWHeight, 'animatedW').setDepth(2).setScale(animatedVideoScale);
-
     // Play the video
     // animatedLetter.play();
     animatedLetter.setVisible(false);
@@ -254,11 +270,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -267,7 +283,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioOne');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -277,7 +293,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
       textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const thirdTextLayer = this.add.text(textX, textY, '3. Slant', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const thirdTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '3. Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioThreeAudio = this.sound.add('audioOne');
       thirdTextLayer.setVisible(false);
       thirdLayer.setDepth(1.1);
@@ -288,7 +304,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       fourthLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer4').setScale(letterScale);
       textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const fourthTextLayer = this.add.text(textX, textY, '4. Slant', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const fourthTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '4. Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioFourthAudio = this.sound.add('audioOne');
       fourthTextLayer.setVisible(false);
       fourthLayer.setDepth(1.1);
@@ -389,7 +405,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -406,37 +422,55 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
-        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
+      animatedLetter.setVisible(false);     
+      firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
-
-
   }
 
 function update() {
-
 }
 
 </script>
+<style>
+  .clear-button {
+      background-color: blue;
+  }
+  /* Animation styles */
+  @keyframes slideInUp {
+      0% {
+          opacity: 0;
+          transform: translateY(100%); /* Start below the viewport */
+      }
+      100% {
+          opacity: 1;
+          transform: translateY(0); /* End at its original position */
+      }
+  }
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
+  }
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
+  }
+  .slide{
+      display: none;
+  }
+  .active{
+      display: block;
+  }
+</style>

src/pages/guided-tracing/X.astro

@@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
   <main>
-        <div>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div id="parentMainContainer" class="hidden">
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+              <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+              </div>
+              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+              </div>
+              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+              </div>
+          </div>
+      </div>
+      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+          <div class="flex flex-row z-50 place-items-end clip-art">
+              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  
+                  <!-- Content -->
+                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                  </div>
+                </div>
+          </div>
+      </div>
+      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+          <div class="w-full max-w-6xl bg-white rounded-lg">
+              <div class="flex justify-between p-3">
+                  <p class="text-[19px] font-[700]">Attempt 2</p>
+                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+              </div>
+              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                      <p class="text-sm" id="imageDescription">Description goes here.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
     </div>
     <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
   </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -91,6 +156,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     };
+    if(isMobile){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.65;
+      resetIconWidth = 1.40;
+      tickIconWidth = 1.21;
+      cancelIconWidth = 1.08;
+      galleryIconWidth = 2;
+    }else if(isTab){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.6;
+      resetIconWidth = 1.43;
+      tickIconWidth = 1.29;
+      cancelIconWidth = 1.18;
+      galleryIconWidth = 1.81;
+    } else{
+      topLogoWidth = 6;
+      muteIconWidth = 1.3;
+      resetIconWidth = 1.26;
+      tickIconWidth = 1.222;
+      cancelIconWidth = 1.185;
+      galleryIconWidth = 1.345;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -109,138 +196,67 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-     
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
       submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-        submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-          font: '900 24px Quicksand',
-          fill: '#05b3a4',
-          backgroundColor : '#7c4c23',
-          padding: {x: 10, y: 10},
-          shadow: {
-            offsetX : 2, 
-            offsetY : 2, 
-            color: '#000',
-            blur: 5,
-            fill: true
-          }
-        });
-         submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-          submitButton.setVisible(false);
         // windowLoad();
         submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : X", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterX').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterX').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedX').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
 
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
         animatedLetter.setVisible(true);
-    });
+        firstScreen.setVisible(true);
         
-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : X', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+      }
+    })
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: X', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : X', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedXHeight, 'animatedX').setDepth(2).setScale(animatedVideoScale);
-
     // Play the video
     // animatedLetter.play();
     animatedLetter.setVisible(false);
@@ -254,11 +270,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -267,7 +283,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Cross',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Cross',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -280,8 +296,6 @@ let scoreTotal = 0;  let isDrawing = false;
         let firstDragStartPoint = { x: 0, y: 0 };
         let secondDragStartPoint = { x: 0, y: 0 };
 
-        // ...
-
         // Add this code for firstLayer
         firstLayer.on('dragstart', (pointer) => {
         firstDragStartPoint.x = pointer.x;
@@ -324,7 +338,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -341,31 +355,14 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
   }
 
@@ -374,3 +371,40 @@ function update() {
 }
 
 </script>
+<style>
+  .clear-button {
+      background-color: blue;
+  }
+  /* Animation styles */
+  @keyframes slideInUp {
+      0% {
+          opacity: 0;
+          transform: translateY(100%); /* Start below the viewport */
+      }
+      100% {
+          opacity: 1;
+          transform: translateY(0); /* End at its original position */
+      }
+  }
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
+  }
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
+  }
+  .slide{
+      display: none;
+  }
+  .active{
+      display: block;
+  }
+</style>

src/pages/guided-tracing/Y.astro

@@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
   <main>
-        <div>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div id="parentMainContainer" class="hidden">
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+              <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+              </div>
+              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+              </div>
+              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+              </div>
+          </div>
+      </div>
+      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+          <div class="flex flex-row z-50 place-items-end clip-art">
+              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  
+                  <!-- Content -->
+                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                  </div>
+                </div>
+          </div>
+      </div>
+      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+          <div class="w-full max-w-6xl bg-white rounded-lg">
+              <div class="flex justify-between p-3">
+                  <p class="text-[19px] font-[700]">Attempt 2</p>
+                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+              </div>
+              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                      <p class="text-sm" id="imageDescription">Description goes here.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
     </div>
     <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
   </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 //   let x = 100;
 
 // // Use x
@@ -95,6 +160,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     };
+    if(isMobile){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.65;
+      resetIconWidth = 1.40;
+      tickIconWidth = 1.21;
+      cancelIconWidth = 1.08;
+      galleryIconWidth = 2;
+    }else if(isTab){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.6;
+      resetIconWidth = 1.43;
+      tickIconWidth = 1.29;
+      cancelIconWidth = 1.18;
+      galleryIconWidth = 1.81;
+    } else{
+      topLogoWidth = 6;
+      muteIconWidth = 1.3;
+      resetIconWidth = 1.26;
+      tickIconWidth = 1.222;
+      cancelIconWidth = 1.185;
+      galleryIconWidth = 1.345;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -113,136 +200,67 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-     
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
       submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-        submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-          font: '900 24px Quicksand',
-          fill: '#05b3a4',
-          backgroundColor : '#7c4c23',
-          padding: {x: 10, y: 10},
-          shadow: {
-            offsetX : 2, 
-            offsetY : 2, 
-            color: '#000',
-            blur: 5,
-            fill: true
-          }
-        });
-         submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-          submitButton.setVisible(false);
         // windowLoad();
         submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : Y", { font: '700 40px quicksand', fill: '#05b3a4', });
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
 
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'letterY').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'letterY').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedY').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
         animatedLetter.setVisible(true);
-    });
+        firstScreen.setVisible(true);
         
-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : Y', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+      }
+    })
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: Y', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : Y', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedYHeight, 'animatedY').setDepth(2).setScale(animatedYScale);
-
     // Play the video
     // animatedLetter.play();
     animatedLetter.setVisible(false);
@@ -255,12 +273,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Slant Right',{ font: '700 40px quicksand', fill: '#05b3a4'});
-      const audioOneAudio = this.sound.add('audioOne');
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Slant Right',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);      const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
       firstLayer.setAlpha(0.5);
@@ -268,7 +285,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slant Left',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slant Left',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -278,7 +295,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       thirdLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
       textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const thirdTextLayer = this.add.text(textX, textY, '3. Down', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const thirdTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '3. Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioThreeAudio = this.sound.add('audioThree');
       thirdTextLayer.setVisible(false);
       thirdLayer.setDepth(1.1);
@@ -292,8 +309,6 @@ let scoreTotal = 0;  let isDrawing = false;
         let secondDragStartPoint = { x: 0, y: 0 };
         let thirdDragStartPoint = { x: 0, y: 0 };
 
-        // ...
-
         // Add this code for firstLayer
         firstLayer.on('dragstart', (pointer) => {
         firstDragStartPoint.x = pointer.x;
@@ -355,7 +370,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -373,31 +388,14 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
   }
 
@@ -405,3 +403,40 @@ function update() {
 }
 
 </script>
+<style>
+  .clear-button {
+      background-color: blue;
+  }
+  /* Animation styles */
+  @keyframes slideInUp {
+      0% {
+          opacity: 0;
+          transform: translateY(100%); /* Start below the viewport */
+      }
+      100% {
+          opacity: 1;
+          transform: translateY(0); /* End at its original position */
+      }
+  }
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
+  }
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
+  }
+  .slide{
+      display: none;
+  }
+  .active{
+      display: block;
+  }
+</style>

src/pages/guided-tracing/Z.astro

@@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
   <main>
-        <div>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div id="parentMainContainer" class="hidden">
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+              <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+              </div>
+              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+              </div>
+              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+              </div>
+          </div>
+      </div>
+      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+          <div class="flex flex-row z-50 place-items-end clip-art">
+              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  
+                  <!-- Content -->
+                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                  </div>
+                </div>
+          </div>
+      </div>
+      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+          <div class="w-full max-w-6xl bg-white rounded-lg">
+              <div class="flex justify-between p-3">
+                  <p class="text-[19px] font-[700]">Attempt 2</p>
+                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+              </div>
+              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                      <p class="text-sm" id="imageDescription">Description goes here.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
     </div>
     <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
   </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 //   let x = 100;
 
 // // Use x
@@ -95,6 +160,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     };
+    if(isMobile){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.65;
+      resetIconWidth = 1.40;
+      tickIconWidth = 1.21;
+      cancelIconWidth = 1.08;
+      galleryIconWidth = 2;
+    }else if(isTab){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.6;
+      resetIconWidth = 1.43;
+      tickIconWidth = 1.29;
+      cancelIconWidth = 1.18;
+      galleryIconWidth = 1.81;
+    } else{
+      topLogoWidth = 6;
+      muteIconWidth = 1.3;
+      resetIconWidth = 1.26;
+      tickIconWidth = 1.222;
+      cancelIconWidth = 1.185;
+      galleryIconWidth = 1.345;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -111,137 +198,68 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.image('topLogo', '/assets/top_logo.svg');
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
-    this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-     
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
       submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-        submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-          font: '900 24px Quicksand',
-          fill: '#05b3a4',
-          backgroundColor : '#7c4c23',
-          padding: {x: 10, y: 10},
-          shadow: {
-            offsetX : 2, 
-            offsetY : 2, 
-            color: '#000',
-            blur: 5,
-            fill: true
-          }
-        });
-         submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-          submitButton.setVisible(false);
         // windowLoad();
         submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : Z", { font: '700 40px quicksand', fill: '#05b3a4', });
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
 
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterZ').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterZ').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedZ').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
+    const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
     const mask = maskGraphics.createGeometryMask();
     
- 
-
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
         animatedLetter.setVisible(true);
-    });
+        firstScreen.setVisible(true);
         
-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : Z', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+      }
+    })
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: Z', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : Z', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedZHeight, 'animatedZ').setDepth(2).setScale(animatedZScale);
-
     // Play the video
     // animatedLetter.play();
     animatedLetter.setVisible(false);
@@ -254,11 +272,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -267,7 +285,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -277,7 +295,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
       textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const thirdTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '3. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioThreeAudio = this.sound.add('audioOne');
       thirdTextLayer.setVisible(false);
       thirdLayer.setDepth(1.1);
@@ -291,8 +309,6 @@ let scoreTotal = 0;  let isDrawing = false;
         let secondDragStartPoint = { x: 0, y: 0 };
         let thirdDragStartPoint = { x: 0, y: 0 };
 
-        // ...
-
         // Add this code for firstLayer
         firstLayer.on('dragstart', (pointer) => {
         firstDragStartPoint.x = pointer.x;
@@ -354,6 +370,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
@@ -371,31 +388,16 @@ let scoreTotal = 0;  let isDrawing = false;
 
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
-      });let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
+      });
+      
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
   }
 
@@ -403,3 +405,40 @@ function update() {
 }
 
 </script>
+<style>
+  .clear-button {
+      background-color: blue;
+  }
+  /* Animation styles */
+  @keyframes slideInUp {
+      0% {
+          opacity: 0;
+          transform: translateY(100%); /* Start below the viewport */
+      }
+      100% {
+          opacity: 1;
+          transform: translateY(0); /* End at its original position */
+      }
+  }
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
+  }
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
+  }
+  .slide{
+      display: none;
+  }
+  .active{
+      display: block;
+  }
+</style>

src/pages/guided-tracing/a.astro

@@ -253,6 +253,9 @@ import Layout from "../../layouts/Layout.astro";
       }
     })
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: a', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : a', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -339,6 +342,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/b.astro

@@ -250,6 +250,9 @@ import Layout from "../../layouts/Layout.astro";
     })
 
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: b', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : b', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -335,6 +338,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/c.astro

@@ -253,6 +253,9 @@ import Layout from "../../layouts/Layout.astro";
       }
     })
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: c', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : c', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -307,6 +310,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/d.astro

@@ -262,6 +262,9 @@ import Layout from "../../layouts/Layout.astro";
     //       animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedDHeight, 'animatedD').setDepth(2).setScale(animatedVideScale);
 
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: d', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : d', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -346,6 +349,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/e.astro

@@ -256,6 +256,9 @@ import Layout from "../../layouts/Layout.astro";
     })
 
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: e', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : e', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -342,6 +345,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/f.astro

@@ -252,6 +252,9 @@ import Layout from "../../layouts/Layout.astro";
         
       }
     })
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: f', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : f', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -336,6 +339,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/g.astro

@@ -254,6 +254,9 @@ import Layout from "../../layouts/Layout.astro";
       }
     })
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: g', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : g', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -338,6 +341,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/h.astro

@@ -254,6 +254,9 @@ import Layout from "../../layouts/Layout.astro";
       }
     });
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: h', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : h', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -339,6 +342,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/i.astro

@@ -251,6 +251,9 @@ import Layout from "../../layouts/Layout.astro";
         
       }
     })
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: i', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : i', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -335,6 +338,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/j.astro

@@ -253,6 +253,9 @@ import Layout from "../../layouts/Layout.astro";
       }
     })
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: j', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : j', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -337,6 +340,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/k.astro

@@ -256,6 +256,9 @@ import Layout from "../../layouts/Layout.astro";
       }
     })
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: k', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : k', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -370,6 +373,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/l.astro

@@ -250,6 +250,9 @@ import Layout from "../../layouts/Layout.astro";
       }
     })
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: l', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : l', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -304,6 +307,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/m.astro

@@ -253,6 +253,9 @@ import Layout from "../../layouts/Layout.astro";
         
       }
     })
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: m', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : m', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -369,6 +372,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/n.astro

@@ -253,6 +253,9 @@ import Layout from "../../layouts/Layout.astro";
       }
     })
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: n', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : n', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -337,6 +340,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/o.astro

@@ -249,6 +249,9 @@ import Layout from "../../layouts/Layout.astro";
       }
     })
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: o', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : o', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -303,6 +306,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/p.astro

@@ -250,6 +250,9 @@ import Layout from "../../layouts/Layout.astro";
         
       }
     })
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: p', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : p', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -334,6 +337,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/q.astro

@@ -257,6 +257,9 @@ import Layout from "../../layouts/Layout.astro";
         
       }
     })
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: q', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : q', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -340,6 +343,7 @@ import Layout from "../../layouts/Layout.astro";
         });
         
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/r.astro

@@ -252,6 +252,9 @@ import Layout from "../../layouts/Layout.astro";
         
       }
     })
+    const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: r', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : r', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -336,6 +339,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/s.astro

@@ -256,6 +256,9 @@ import Layout from "../../layouts/Layout.astro";
       }
     })
 
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
     let responsiveFontSize = isMobile ? 16 : 32;
     this.add.text(window.innerWidth / 2, 80, 'Letter: s', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
     const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : s', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -308,6 +311,7 @@ import Layout from "../../layouts/Layout.astro";
         });
        
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;

src/pages/guided-tracing/t.astro

@@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
   <main>
-        <div>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div id="parentMainContainer" class="hidden">
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+              <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+              </div>
+              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+              </div>
+              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+              </div>
+          </div>
+      </div>
+      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+          <div class="flex flex-row z-50 place-items-end clip-art">
+              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  
+                  <!-- Content -->
+                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                  </div>
+                </div>
+          </div>
+      </div>
+      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+          <div class="w-full max-w-6xl bg-white rounded-lg">
+              <div class="flex justify-between p-3">
+                  <p class="text-[19px] font-[700]">Attempt 2</p>
+                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+              </div>
+              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                      <p class="text-sm" id="imageDescription">Description goes here.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
     </div>
     <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
   </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -93,6 +158,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     };
+    if(isMobile){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.65;
+      resetIconWidth = 1.40;
+      tickIconWidth = 1.21;
+      cancelIconWidth = 1.08;
+      galleryIconWidth = 2;
+    }else if(isTab){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.6;
+      resetIconWidth = 1.43;
+      tickIconWidth = 1.29;
+      cancelIconWidth = 1.18;
+      galleryIconWidth = 1.81;
+    } else{
+      topLogoWidth = 6;
+      muteIconWidth = 1.3;
+      resetIconWidth = 1.26;
+      tickIconWidth = 1.222;
+      cancelIconWidth = 1.185;
+      galleryIconWidth = 1.345;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -111,141 +198,65 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
 
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-     
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
       submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-        submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-          font: '900 24px Quicksand',
-          fill: '#05b3a4',
-          backgroundColor : '#7c4c23',
-          padding: {x: 10, y: 10},
-          shadow: {
-            offsetX : 2, 
-            offsetY : 2, 
-            color: '#000',
-            blur: 5,
-            fill: true
-          }
-        });
-         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
-          submitButton.setVisible(false);
-          // windowLoad();
           submitUserData(this);
+          showAnimation();
+          parentMainContainer.classList.remove('hidden');
         })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : t", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
- 
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-   
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterTeight, 'letterR').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 , customHeight / 2 + letterTeight, 'letterR').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterTeight, 'animatedT').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
         animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
     });
-
-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : t', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: t', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : t', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
     animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedTHeight, 'animatedT').setDepth(2).setScale(animatedVideoScale);
-
     // Play the video
     // animatedLetter.play();
     animatedLetter.setVisible(false);
@@ -259,11 +270,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterTeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
       textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -272,7 +283,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterTeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Cross',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Cross',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -327,7 +338,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -344,30 +355,14 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
-    firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+      
+      document.getElementById('beforeStartBtn').addEventListener('click', function() {
+        document.getElementById('blurDisplay').classList.add('hidden');
         audioOneAudio.play();
-      submitButton.setVisible(true);
         firstTextLayer.setVisible(true);
         animatedLetter.setVisible(false);     
         firstScreen.setVisible(false);
         graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
       })
   }
 
@@ -376,3 +371,40 @@ function update() {
 }
 
 </script>
+<style>
+  .clear-button {
+      background-color: blue;
+  }
+  /* Animation styles */
+  @keyframes slideInUp {
+      0% {
+          opacity: 0;
+          transform: translateY(100%); /* Start below the viewport */
+      }
+      100% {
+          opacity: 1;
+          transform: translateY(0); /* End at its original position */
+      }
+  }
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
+  }
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
+  }
+  .slide{
+      display: none;
+  }
+  .active{
+      display: block;
+  }
+</style>

src/pages/guided-tracing/u.astro

@@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
   <main>
-        <div>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div id="parentMainContainer" class="hidden">
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+              <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+              </div>
+              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+              </div>
+              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+              </div>
+          </div>
+      </div>
+      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+          <div class="flex flex-row z-50 place-items-end clip-art">
+              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  
+                  <!-- Content -->
+                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                  </div>
+                </div>
+          </div>
+      </div>
+      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+          <div class="w-full max-w-6xl bg-white rounded-lg">
+              <div class="flex justify-between p-3">
+                  <p class="text-[19px] font-[700]">Attempt 2</p>
+                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+              </div>
+              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                      <p class="text-sm" id="imageDescription">Description goes here.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
     </div>
     <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
   </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -93,6 +158,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     };
+    if(isMobile){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.65;
+      resetIconWidth = 1.40;
+      tickIconWidth = 1.21;
+      cancelIconWidth = 1.08;
+      galleryIconWidth = 2;
+    }else if(isTab){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.6;
+      resetIconWidth = 1.43;
+      tickIconWidth = 1.29;
+      cancelIconWidth = 1.18;
+      galleryIconWidth = 1.81;
+    } else{
+      topLogoWidth = 6;
+      muteIconWidth = 1.3;
+      resetIconWidth = 1.26;
+      tickIconWidth = 1.222;
+      cancelIconWidth = 1.185;
+      galleryIconWidth = 1.345;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -111,140 +198,68 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-     
+    this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+    muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+    retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+    submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+    demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
     submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+    cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+    const borderBottom = this.add.graphics();
+    const x = 0; const y = 54;
+    const lineWidth = window.innerWidth;
+    borderBottom.lineStyle(1, 0x0348A8);
+    borderBottom.setAlpha(0.2);
+    borderBottom.beginPath();
+    borderBottom.moveTo(x, y);
+    borderBottom.lineTo(x + lineWidth, y);
+    borderBottom.strokePath();
 
-        submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-          font: '900 24px Quicksand',
-          fill: '#05b3a4',
-          backgroundColor : '#7c4c23',
-          padding: {x: 10, y: 10},
-          shadow: {
-            offsetX : 2, 
-            offsetY : 2, 
-            color: '#000',
-            blur: 5,
-            fill: true
-          }
-        });
-         submitButton.setVisible(false);
     submitButton.setInteractive().on('pointerdown', () => {
       // console.log('Clicked');
-          submitButton.setVisible(false);
-          submitNotic.setVisible(false);
       // windowLoad();
       submitUserData(this);
+      showAnimation();
+      parentMainContainer.classList.remove('hidden');
     })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : u", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
- 
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-   
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 + 20, customHeight / 2 + letterUeight, 'letterU').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterUeight, 'letterU').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterUeight, 'animatedU').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
-
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
 
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
         animatedLetter.setVisible(true);
-    });
+        firstScreen.setVisible(true);
         
+      }
+    })
     
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : u', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: u', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : u', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedUHeight, 'animatedU').setDepth(2).setScale(animatedVideoScale);
-
     // Play the video
     // animatedLetter.play();
     animatedLetter.setVisible(false);
@@ -258,11 +273,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2  + 20, customHeight / 2 + letterUeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 25 : customWidth * 0.75;
       textY = isMobile ? customHeight / 6 : customHeight / 2.3;
-      const firstTextLayer = this.add.text(textX, textY, '1. Small Down Curve Up',{ font: '700 35px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Small Down Curve Up',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -271,7 +286,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2  + 20, customHeight / 2 + letterUeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Small Down',{ font: '700 35px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Small Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -283,8 +298,6 @@ let scoreTotal = 0;  let isDrawing = false;
         let firstDragStartPoint = { x: 0, y: 0 };
         let secondDragStartPoint = { x: 0, y: 0 };
 
-        // ...
-
         // Add this code for firstLayer
         firstLayer.on('dragstart', (pointer) => {
         firstDragStartPoint.x = pointer.x;
@@ -327,7 +340,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -344,30 +357,14 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
     })
   }
 
@@ -376,3 +373,40 @@ function update() {
 }
 
 </script>
+<style>
+  .clear-button {
+      background-color: blue;
+  }
+  /* Animation styles */
+  @keyframes slideInUp {
+      0% {
+          opacity: 0;
+          transform: translateY(100%); /* Start below the viewport */
+      }
+      100% {
+          opacity: 1;
+          transform: translateY(0); /* End at its original position */
+      }
+  }
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
+  }
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
+  }
+  .slide{
+      display: none;
+  }
+  .active{
+      display: block;
+  }
+</style>

src/pages/guided-tracing/v.astro

@@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
   <main>
-        <div>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div id="parentMainContainer" class="hidden">
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+              <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+              </div>
+              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+              </div>
+              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+              </div>
+          </div>
+      </div>
+      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+          <div class="flex flex-row z-50 place-items-end clip-art">
+              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  
+                  <!-- Content -->
+                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                  </div>
+                </div>
+          </div>
+      </div>
+      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+          <div class="w-full max-w-6xl bg-white rounded-lg">
+              <div class="flex justify-between p-3">
+                  <p class="text-[19px] font-[700]">Attempt 2</p>
+                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+              </div>
+              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                      <p class="text-sm" id="imageDescription">Description goes here.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
     </div>
     <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
   </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -93,6 +158,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     };
+    if(isMobile){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.65;
+      resetIconWidth = 1.40;
+      tickIconWidth = 1.21;
+      cancelIconWidth = 1.08;
+      galleryIconWidth = 2;
+    }else if(isTab){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.6;
+      resetIconWidth = 1.43;
+      tickIconWidth = 1.29;
+      cancelIconWidth = 1.18;
+      galleryIconWidth = 1.81;
+    } else{
+      topLogoWidth = 6;
+      muteIconWidth = 1.3;
+      resetIconWidth = 1.26;
+      tickIconWidth = 1.222;
+      cancelIconWidth = 1.185;
+      galleryIconWidth = 1.345;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -110,140 +197,66 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
 
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-     
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
       submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-        submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-          font: '900 24px Quicksand',
-          fill: '#05b3a4',
-          backgroundColor : '#7c4c23',
-          padding: {x: 10, y: 10},
-          shadow: {
-            offsetX : 2, 
-            offsetY : 2, 
-            color: '#000',
-            blur: 5,
-            fill: true
-          }
-        });
-         submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-          submitButton.setVisible(false);
-          submitNotic.setVisible(false);
         // windowLoad();
         submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : v", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
- 
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-   
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterVHeight, 'letterV').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 , customHeight / 2 + letterVHeight, 'letterV').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterVHeight, 'animatedV').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
         animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
     });
 
-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : v', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: v', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : v', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedVHeight, 'animatedV').setDepth(2).setScale(animatedVideoScale);
 
     // Play the video
@@ -259,11 +272,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterVHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 + 30 : customWidth * 0.75;
       textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -272,7 +285,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterVHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioOne');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -284,8 +297,6 @@ let scoreTotal = 0;  let isDrawing = false;
         let firstDragStartPoint = { x: 0, y: 0 };
         let secondDragStartPoint = { x: 0, y: 0 };
 
-        // ...
-
         // Add this code for firstLayer
         firstLayer.on('dragstart', (pointer) => {
         firstDragStartPoint.x = pointer.x;
@@ -328,7 +339,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -345,30 +356,14 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
     })
   }
 
@@ -377,3 +372,40 @@ function update() {
 }
 
 </script>
+<style>
+  .clear-button {
+      background-color: blue;
+  }
+  /* Animation styles */
+  @keyframes slideInUp {
+      0% {
+          opacity: 0;
+          transform: translateY(100%); /* Start below the viewport */
+      }
+      100% {
+          opacity: 1;
+          transform: translateY(0); /* End at its original position */
+      }
+  }
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
+  }
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
+  }
+  .slide{
+      display: none;
+  }
+  .active{
+      display: block;
+  }
+</style>

src/pages/guided-tracing/w.astro

@@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
   <main>
-        <div>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div id="parentMainContainer" class="hidden">
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+              <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+              </div>
+              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+              </div>
+              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+              </div>
+          </div>
+      </div>
+      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+          <div class="flex flex-row z-50 place-items-end clip-art">
+              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  
+                  <!-- Content -->
+                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                  </div>
+                </div>
+          </div>
+      </div>
+      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+          <div class="w-full max-w-6xl bg-white rounded-lg">
+              <div class="flex justify-between p-3">
+                  <p class="text-[19px] font-[700]">Attempt 2</p>
+                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+              </div>
+              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                      <p class="text-sm" id="imageDescription">Description goes here.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
     </div>
     <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
   </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer, fourthLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -93,6 +158,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     };
+    if(isMobile){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.65;
+      resetIconWidth = 1.40;
+      tickIconWidth = 1.21;
+      cancelIconWidth = 1.08;
+      galleryIconWidth = 2;
+    }else if(isTab){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.6;
+      resetIconWidth = 1.43;
+      tickIconWidth = 1.29;
+      cancelIconWidth = 1.18;
+      galleryIconWidth = 1.81;
+    } else{
+      topLogoWidth = 6;
+      muteIconWidth = 1.3;
+      resetIconWidth = 1.26;
+      tickIconWidth = 1.222;
+      cancelIconWidth = 1.185;
+      galleryIconWidth = 1.345;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -109,142 +196,66 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.image('topLogo', '/assets/top_logo.svg');
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
-    this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
      
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-     
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
       submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-        submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-          font: '900 24px Quicksand',
-          fill: '#05b3a4',
-          backgroundColor : '#7c4c23',
-          padding: {x: 10, y: 10},
-          shadow: {
-            offsetX : 2, 
-            offsetY : 2, 
-            color: '#000',
-            blur: 5,
-            fill: true
-          }
-        });
-         submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-          submitButton.setVisible(false);
         // windowLoad();
         submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : w", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
- 
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-   
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterW').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterW').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedW').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
         animatedLetter.setVisible(true);
-    });
+        firstScreen.setVisible(true);
         
-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : w', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+      }
+    })
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: w', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : w', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedWHeight, 'animatedW').setDepth(2).setScale(animatedVideoScale);
-
     // Play the video
     // animatedLetter.play();
     animatedLetter.setVisible(false);
@@ -258,11 +269,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
       let textX, textY;
-
+      let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 + 40: customWidth * 0.75;
       textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -271,7 +282,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioOne');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -281,7 +292,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
       textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const thirdTextLayer = this.add.text(textX, textY, '3. Slant', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const thirdTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '3. Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioThreeAudio = this.sound.add('audioOne');
       thirdTextLayer.setVisible(false);
       thirdLayer.setDepth(1.1);
@@ -292,7 +303,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       fourthLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer4').setScale(letterScale);
       textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const fourthTextLayer = this.add.text(textX, textY, '4. Slant', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const fourthTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '4. Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioFourthAudio = this.sound.add('audioOne');
       fourthTextLayer.setVisible(false);
       fourthLayer.setDepth(1.1);
@@ -393,7 +404,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -410,33 +421,15 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
     })
-
-
   }
 
 function update() {
@@ -444,3 +437,40 @@ function update() {
 }
 
 </script>
+<style>
+  .clear-button {
+      background-color: blue;
+  }
+  /* Animation styles */
+  @keyframes slideInUp {
+      0% {
+          opacity: 0;
+          transform: translateY(100%); /* Start below the viewport */
+      }
+      100% {
+          opacity: 1;
+          transform: translateY(0); /* End at its original position */
+      }
+  }
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
+  }
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
+  }
+  .slide{
+      display: none;
+  }
+  .active{
+      display: block;
+  }
+</style>

src/pages/guided-tracing/x.astro

@@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
   <main>
-        <div>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div id="parentMainContainer" class="hidden">
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+              <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+              </div>
+              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+              </div>
+              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+              </div>
+          </div>
+      </div>
+      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+          <div class="flex flex-row z-50 place-items-end clip-art">
+              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  
+                  <!-- Content -->
+                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                  </div>
+                </div>
+          </div>
+      </div>
+      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+          <div class="w-full max-w-6xl bg-white rounded-lg">
+              <div class="flex justify-between p-3">
+                  <p class="text-[19px] font-[700]">Attempt 2</p>
+                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+              </div>
+              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                      <p class="text-sm" id="imageDescription">Description goes here.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
     </div>
     <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
   </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -93,6 +158,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     };
+    if(isMobile){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.65;
+      resetIconWidth = 1.40;
+      tickIconWidth = 1.21;
+      cancelIconWidth = 1.08;
+      galleryIconWidth = 2;
+    }else if(isTab){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.6;
+      resetIconWidth = 1.43;
+      tickIconWidth = 1.29;
+      cancelIconWidth = 1.18;
+      galleryIconWidth = 1.81;
+    } else{
+      topLogoWidth = 6;
+      muteIconWidth = 1.3;
+      resetIconWidth = 1.26;
+      tickIconWidth = 1.222;
+      cancelIconWidth = 1.185;
+      galleryIconWidth = 1.345;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -111,141 +198,67 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
 
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-     
+    this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
       submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-        submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-          font: '900 24px Quicksand',
-          fill: '#05b3a4',
-          backgroundColor : '#7c4c23',
-          padding: {x: 10, y: 10},
-          shadow: {
-            offsetX : 2, 
-            offsetY : 2, 
-            color: '#000',
-            blur: 5,
-            fill: true
-          }
-        });
-         submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-          submitButton.setVisible(false);
         // windowLoad();
         submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : x", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
- 
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-   
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterXHeight, 'letterX').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 , customHeight / 2 + letterXHeight, 'letterX').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterXHeight, 'animatedX').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
     
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
         animatedLetter.setVisible(true);
-    });
+        firstScreen.setVisible(true);
         
-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : x', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+      }
+    })
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: x', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : x', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedXHeight, 'animatedX').setDepth(2).setScale(animatedXideoScale);
-
     // Play the video
     // animatedLetter.play();
     animatedLetter.setVisible(false);
@@ -259,11 +272,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterXHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
       textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -272,7 +285,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterXHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Cross',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Cross',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -284,8 +297,6 @@ let scoreTotal = 0;  let isDrawing = false;
         let firstDragStartPoint = { x: 0, y: 0 };
         let secondDragStartPoint = { x: 0, y: 0 };
 
-        // ...
-
         // Add this code for firstLayer
         firstLayer.on('dragstart', (pointer) => {
         firstDragStartPoint.x = pointer.x;
@@ -328,7 +339,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -345,30 +356,15 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
+
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
     })
   }
 
@@ -377,3 +373,40 @@ function update() {
 }
 
 </script>
+<style>
+  .clear-button {
+      background-color: blue;
+  }
+  /* Animation styles */
+  @keyframes slideInUp {
+      0% {
+          opacity: 0;
+          transform: translateY(100%); /* Start below the viewport */
+      }
+      100% {
+          opacity: 1;
+          transform: translateY(0); /* End at its original position */
+      }
+  }
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
+  }
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
+  }
+  .slide{
+      display: none;
+  }
+  .active{
+      display: block;
+  }
+</style>

src/pages/guided-tracing/y.astro

@@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
   <main>
-        <div>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div id="parentMainContainer" class="hidden">
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+              <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+              </div>
+              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+              </div>
+              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+              </div>
+          </div>
+      </div>
+      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+          <div class="flex flex-row z-50 place-items-end clip-art">
+              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  
+                  <!-- Content -->
+                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                  </div>
+                </div>
+          </div>
+      </div>
+      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+          <div class="w-full max-w-6xl bg-white rounded-lg">
+              <div class="flex justify-between p-3">
+                  <p class="text-[19px] font-[700]">Attempt 2</p>
+                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+              </div>
+              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                      <p class="text-sm" id="imageDescription">Description goes here.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
     </div>
     <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
   </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -93,6 +158,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     };
+    if(isMobile){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.65;
+      resetIconWidth = 1.40;
+      tickIconWidth = 1.21;
+      cancelIconWidth = 1.08;
+      galleryIconWidth = 2;
+    }else if(isTab){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.6;
+      resetIconWidth = 1.43;
+      tickIconWidth = 1.29;
+      cancelIconWidth = 1.18;
+      galleryIconWidth = 1.81;
+    } else{
+      topLogoWidth = 6;
+      muteIconWidth = 1.3;
+      resetIconWidth = 1.26;
+      tickIconWidth = 1.222;
+      cancelIconWidth = 1.185;
+      galleryIconWidth = 1.345;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -111,138 +198,67 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-     
+    this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
       submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-        submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-          font: '900 24px Quicksand',
-          fill: '#05b3a4',
-          backgroundColor : '#7c4c23',
-          padding: {x: 10, y: 10},
-          shadow: {
-            offsetX : 2, 
-            offsetY : 2, 
-            color: '#000',
-            blur: 5,
-            fill: true
-          }
-        });
-         submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-          submitButton.setVisible(false);
         // windowLoad();
         submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : y", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
 
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
- 
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-   
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 - 10, customHeight / 2 + letterYHeight, 'letterY').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterYHeight, 'letterY').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterYHeight, 'animatedY').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-
         demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
         animatedLetter.setVisible(true);
-    });
+        firstScreen.setVisible(true);
         
+      }
+    })
 
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : y', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: y', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : y', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedYHeight, 'animatedY').setDepth(2).setScale(animatedYideoScale);
 
     // Play the video
@@ -258,11 +274,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterYHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
       textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Slant Right',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Slant Right',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -271,7 +287,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterYHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slant Tail',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slant Tail',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -283,8 +299,6 @@ let scoreTotal = 0;  let isDrawing = false;
         let firstDragStartPoint = { x: 0, y: 0 };
         let secondDragStartPoint = { x: 0, y: 0 };
 
-        // ...
-
         // Add this code for firstLayer
         firstLayer.on('dragstart', (pointer) => {
         firstDragStartPoint.x = pointer.x;
@@ -327,7 +341,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -344,32 +358,15 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
     })
-      
   }
 
 function update() {
@@ -377,3 +374,40 @@ function update() {
 }
 
 </script>
+<style>
+  .clear-button {
+      background-color: blue;
+  }
+  /* Animation styles */
+  @keyframes slideInUp {
+      0% {
+          opacity: 0;
+          transform: translateY(100%); /* Start below the viewport */
+      }
+      100% {
+          opacity: 1;
+          transform: translateY(0); /* End at its original position */
+      }
+  }
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
+  }
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
+  }
+  .slide{
+      display: none;
+  }
+  .active{
+      display: block;
+  }
+</style>

src/pages/guided-tracing/z-test.astro

@@ -0,0 +1,413 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+<Layout title="Guided Letter Tracing Game">
+    <main>
+        <div>
+        </div>
+        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+    </main>
+</Layout>
+<script src="/saveGameData.js" is:inline></script>
+<script is:inline>
+  const isMobile = window.innerWidth <= 768;
+  const drawingZone = {
+    x: isMobile ? 0 : window.innerWidth / 4,
+    y: window.innerHeight / 4,
+    width: isMobile ? window.innerWidth : window.innerWidth / 2,
+    height: window.innerHeight / 2,
+  };
+
+  const config = {
+    type: Phaser.AUTO,
+    width: window.innerWidth,
+    height: window.innerHeight,
+    backgroundColor: 0xFFFFFF,
+    scale: {
+      mode: Phaser.Scale.FIT,
+      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+    },
+    scene: {
+      preload: preload,
+      create: create,
+      update: update
+    }
+  };
+  // backgroundImage.png
+  const game = new Phaser.Game(config);
+  const customWidth = window.innerWidth;
+  const customHeight = window.innerHeight;
+  let firstLayer, secondLayer, thirdLayer;
+  let graphics;
+  let animatedLetter;
+let scoreTotal = 0;  let isDrawing = false;
+  let formattedDateTime;
+  let gameStartTime = "start time here";
+//   let x = 100;
+
+// // Use x
+// console.log(x);
+
+    if(isMobile){
+      cloudeSize = 200;
+      cloudHeight = 340;
+      canvasScale = 0.14
+      canvasHeight = 35; 
+      letterHeight = 70;
+      letterScale = 0.92;
+      backgroundScale = 0.8;
+      sunScale = 0.1;
+      sunScalePlus = 0.15;
+      sunWidth = 70;
+      sunHeight = 70;
+      animatedZHeight = 35;
+      animatedZScale = 0.65;
+      helpButtonHeight = customHeight / 1.1;
+      helpButtonWidth = customWidth / 2 + 10;
+
+      startButtonHeight = customHeight / 1.1;
+      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = window.innerWidth * 0.5 - 100;
+      noticeHeight = window.innerHeight * 0.38;
+    } else{
+      cloudeSize = 500;
+      cloudHeight = 250;
+      canvasScale = 0.195;
+      canvasHeight = 20;
+      letterHeight = 50;
+      letterScale = 1;
+      backgroundScale = 1;
+      sunScale  = 0.2;
+      sunScalePlus = 0.25;
+      sunWidth = 200;
+      sunHeight = 100;
+      animatedZHeight = 20;
+      animatedZScale = 0.73;
+      helpButtonHeight = customHeight / 2 + 40;
+      helpButtonWidth = customWidth / 1.32;
+
+      startButtonHeight = customHeight / 2 - 20;
+      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = window.innerWidth * 0.5 - 120;
+      noticeHeight = window.innerHeight * 0.32;
+    };
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      // console.log("Page loaded on: " + formattedDateTime);
+    };
+  function preload() {
+    this.load.video('animatedZ', '/assets/animated-letter/capital_z.mp4');
+    this.load.svg('letterZ', '/assets/capital-letter/z.svg');
+    this.load.svg('layer1', '/assets/capital-letter/z_l1.svg');
+    this.load.svg('layer2', '/assets/capital-letter/z_l2.svg');
+    this.load.svg('layer3', '/assets/capital-letter/z_l3.svg');
+    this.load.audio('audioOne', '/assets/audio/slide.mp3');
+    this.load.audio('audioTwo', '/assets/audio/slant.mp3');
+    this.load.image('topLogo', '/assets/top_logo.svg');
+    this.load.svg('succesImage', '/assets/svg/tick.svg');
+    this.load.svg('hintImage', '/assets/svg/hint.svg');
+    this.load.svg('handPointer', '/assets/svg/hand.svg');
+    this.load.image('backgroundImage', '/assets/bg6.png');
+    this.load.image('cloud', '/assets/cloud.png');
+    this.load.image('canvas', '/assets/canvas4.png');
+    this.load.image('sun', '/assets/sun.png');
+    this.load.image('bgMobile', '/assets/bgMobile.png');
+    this.load.image('canvasStand', '/assets/stand2.png');
+  }
+
+  function create() {
+     
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
+        submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
+          font: '900 24px Quicksand',
+          fill: '#05b3a4',
+          backgroundColor : '#7c4c23',
+          padding: {x: 10, y: 10},
+          shadow: {
+            offsetX : 2, 
+            offsetY : 2, 
+            color: '#000',
+            blur: 5,
+            fill: true
+          }
+        });
+         submitButton.setVisible(false);
+        submitButton.setInteractive().on('pointerdown', () => {
+          // console.log('Clicked');
+          submitButton.setVisible(false);
+          // windowLoad();
+          submitUserData(this);
+        })
+    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+    this.add.text(customWidth / 10, 20, "Letter : Z", { font: '700 40px quicksand', fill: '#05b3a4', });
+    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
+    cloud.setDepth(-1.8);
+    const scrollSpeed = 0.5;
+    this.time.addEvent({
+      loop: true,
+      callback: () => {
+        cloud.tilePositionX += scrollSpeed;
+      },
+      delay: 16, // Adjust the delay for the desired scrolling speed
+    });
+
+    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
+  
+  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
+  const duration = 3000; // Duration of the animation in milliseconds
+
+  // Create a scaling tween
+  this.tweens.add({
+    targets: sun,
+    scaleX: scaleFactor,
+    scaleY: scaleFactor,
+    duration: duration,
+    ease: 'Linear',
+    yoyo: true, // Makes the animation play in reverse
+    repeat: -1 // Repeat indefinitely
+  });
+    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
+    this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterZ').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterZ').setDepth(2).setScale(letterScale);
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedZ').setDepth(2); canvasStand
+    firstScreen.setVisible(false);
+    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    // Set up a mask for the drawing area based on the canvas dimensions
+    const width = customWidth; // Set your desired width
+const height = customHeight;
+    const maskGraphics = this.make.graphics()
+        maskGraphics.fillRect(
+        customWidth / 2 - width / 2,
+        50, // Offset the rectangle to start 150px from the top
+        width,
+        height
+    );
+    const mask = maskGraphics.createGeometryMask();
+
+ 
+
+    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+    hideButton.setInteractive().on('pointerdown', () => {
+      animatedLetter.stop();
+      isDemoButtonClicked = false;
+      firstScreen.setVisible(false);
+      hideButton.setVisible(false);  // Hide the "Hide" button
+      demoButton.setVisible(true);   // Show the "Demo" button
+      graphics.setVisible(true);
+      animatedLetter.setVisible(false);
+    });
+      hideButton.setVisible(false);
+      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+
+    demoButton.setInteractive().on('pointerdown', () => {
+      animatedLetter.setCurrentTime(0);
+      animatedLetter.play(true);
+      graphics.setVisible(false);
+      firstScreen.setVisible(true);
+      demoButton.setVisible(false);  // Hide the "Demo" button
+      hideButton.setVisible(true);   // Show the "Hide" button
+      animatedLetter.setVisible(true);
+    });
+
+
+    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+    const baseFontSize = 24;
+    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
+    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : Z', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+          animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedZHeight, 'animatedZ').setDepth(2).setScale(animatedZScale);
+
+    // Play the video
+    // animatedLetter.play();
+    animatedLetter.setVisible(false);
+
+    // You can set additional properties for the video, such as loop and mute:
+    animatedLetter.setLoop(true); // Loop the video
+    animatedLetter.setMute(false); // Unmute the video
+      animatedLetter.on('complete', function () {
+        // add function after end video;
+    });
+
+    let textX, textY;
+
+      firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+            textY = isMobile ? customHeight / 5 : customHeight / 2.4;
+      const firstTextLayer = this.add.text(textX, textY, '1. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioOneAudio = this.sound.add('audioOne');
+      // audioOneAudio.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
+
+      secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      const secondTextLayer = this.add.text(textX, textY, '2. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioTwoAudio = this.sound.add('audioTwo');
+      secondTextLayer.setVisible(false);
+      secondLayer.setDepth(1);
+      secondLayer.setAlpha(0.5);
+      secondLayer.setInteractive({ draggable: true });
+      secondLayer.setVisible(false);
+
+      thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
+      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
+      const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioThreeAudio = this.sound.add('audioOne');
+      thirdTextLayer.setVisible(false);
+      thirdLayer.setDepth(1.1);
+      // thirdLayer.setScale(1.15);
+      thirdLayer.setAlpha(0.5);
+      thirdLayer.setInteractive({ draggable: true });
+      thirdLayer.setVisible(false);
+
+        // Add these variables to keep track of start points
+        let firstDragStartPoint = { x: 0, y: 0 };
+        let secondDragStartPoint = { x: 0, y: 0 };
+        let thirdDragStartPoint = { x: 0, y: 0 };
+
+        // ...
+
+        // Add this code for firstLayer
+        firstLayer.on('dragstart', (pointer) => {
+        firstDragStartPoint.x = pointer.x;
+        firstDragStartPoint.y = pointer.y;
+        });
+
+        firstLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 100) {
+          
+            firstTextLayer.setVisible(false);
+            secondTextLayer.setVisible(true);
+            audioTwoAudio.play();
+            secondLayer.setVisible(true);
+            firstLayer.setAlpha(1);
+            secondLayer.setAlpha(0.5);
+            thirdLayer.setAlpha(0.5);
+        } else {
+            firstLayer.setAlpha(0.5);
+        }
+        });
+        secondLayer.on('dragstart', (pointer) => {
+        secondDragStartPoint.x = pointer.x;
+        secondDragStartPoint.y = pointer.y;
+        });
+
+        secondLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 100) {
+            secondTextLayer.setVisible(false);
+            thirdTextLayer.setVisible(true);
+            audioThreeAudio.play();
+            thirdLayer.setVisible(true);
+            secondLayer.setAlpha(1);
+            thirdLayer.setAlpha(0.5);
+        } else {
+            secondLayer.setAlpha(0.5);
+        }
+        });
+
+        // Add this code for thirdLayer
+        thirdLayer.on('dragstart', (pointer) => {
+        thirdDragStartPoint.x = pointer.x;
+        thirdDragStartPoint.y = pointer.y;
+        });
+
+        thirdLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(thirdDragStartPoint.x, thirdDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 100) {
+            thirdLayer.setAlpha(1);
+            thirdTextLayer.setVisible(false);
+        } else {
+            thirdLayer.setAlpha(0.5);
+        }
+        });
+
+
+      graphics = this.add.graphics();
+graphics.setMask(mask);
+      graphics.setMask(mask);
+      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
+      this.input.on('pointerdown', function (pointer) {
+        isDrawing = true;
+        graphics.moveTo(pointer.x, pointer.y);
+        // console.log("Start Position", pointer.x, pointer.y)
+      });
+
+      this.input.on('pointerup', function () {
+        isDrawing = false;
+      });
+
+      this.input.on('pointermove', function (pointer) {
+        if (!isDrawing) return;
+
+        graphics.lineTo(pointer.x, pointer.y);
+        graphics.strokePath();
+      });let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+      font: '900 24px Quicksand',
+      fill: '#05b3a4',
+      backgroundColor : '#7c4c23',
+      padding: {x: 20, y: 10},
+      shadow: {
+        offsetX : 2, 
+        offsetY : 2, 
+        color: '#000',
+        blur: 5,
+        fill: true
+      }
+    })
+    firstTextLayer.setVisible(false);
+    startButton.setInteractive().on('pointerdown', () => {
+      audioOneAudio.play();
+      submitButton.setVisible(true);
+      firstTextLayer.setVisible(true);
+      animatedLetter.setVisible(false);     
+      firstScreen.setVisible(false);
+      graphics.setVisible(true);
+      hideButton.setVisible(false);
+      demoButton.setVisible(true);
+      startButton.setVisible(false);
+
+    })
+  }
+
+function update() {
+}
+
+</script>

src/pages/guided-tracing/z.astro

@@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
   <main>
-        <div>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div id="parentMainContainer" class="hidden">
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+              <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+              </div>
+              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+              </div>
+              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+              </div>
+          </div>
+      </div>
+      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+          <div class="flex flex-row z-50 place-items-end clip-art">
+              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  
+                  <!-- Content -->
+                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                  </div>
+                </div>
+          </div>
+      </div>
+      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+          <div class="w-full max-w-6xl bg-white rounded-lg">
+              <div class="flex justify-between p-3">
+                  <p class="text-[19px] font-[700]">Attempt 2</p>
+                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+              </div>
+              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                      <p class="text-sm" id="imageDescription">Description goes here.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
     </div>
     <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
   </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 //   let x = 100;
 
 // // Use x
@@ -97,6 +162,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     };
+    if(isMobile){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.65;
+      resetIconWidth = 1.40;
+      tickIconWidth = 1.21;
+      cancelIconWidth = 1.08;
+      galleryIconWidth = 2;
+    }else if(isTab){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.6;
+      resetIconWidth = 1.43;
+      tickIconWidth = 1.29;
+      cancelIconWidth = 1.18;
+      galleryIconWidth = 1.81;
+    } else{
+      topLogoWidth = 6;
+      muteIconWidth = 1.3;
+      resetIconWidth = 1.26;
+      tickIconWidth = 1.222;
+      cancelIconWidth = 1.185;
+      galleryIconWidth = 1.345;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -114,139 +201,68 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
  
-     
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-     
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
       submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-        submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-          font: '900 24px Quicksand',
-          fill: '#05b3a4',
-          backgroundColor : '#7c4c23',
-          padding: {x: 10, y: 10},
-          shadow: {
-            offsetX : 2, 
-            offsetY : 2, 
-            color: '#000',
-            blur: 5,
-            fill: true
-          }
-        });
-         submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-          submitButton.setVisible(false);
         // windowLoad();
         submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : z", { font: '700 40px quicksand', fill: '#05b3a4', });
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
 
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
- 
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-   
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'letterZ').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterZ').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedZ').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
         animatedLetter.setVisible(true);
-    });
+        firstScreen.setVisible(true);
         
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : z', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+      }
+    })
+
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: z', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : z', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedZHeight, 'animatedZ').setDepth(2).setScale(animatedZScale);
-
     // Play the video
     // animatedLetter.play();
     animatedLetter.setVisible(false);
@@ -259,11 +275,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 + 40 : customWidth * 0.75;
       textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -272,7 +288,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -282,7 +298,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       thirdLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
       textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const thirdTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '3. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioThreeAudio = this.sound.add('audioOne');
       thirdTextLayer.setVisible(false);
       thirdLayer.setDepth(1.1);
@@ -296,8 +312,6 @@ let scoreTotal = 0;  let isDrawing = false;
         let secondDragStartPoint = { x: 0, y: 0 };
         let thirdDragStartPoint = { x: 0, y: 0 };
 
-        // ...
-
         // Add this code for firstLayer
         firstLayer.on('dragstart', (pointer) => {
         firstDragStartPoint.x = pointer.x;
@@ -359,7 +373,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -377,34 +391,54 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
     })
   }
 
 function update() {
 }
-
 </script>
+<style>
+  .clear-button {
+      background-color: blue;
+  }
+  /* Animation styles */
+  @keyframes slideInUp {
+      0% {
+          opacity: 0;
+          transform: translateY(100%); /* Start below the viewport */
+      }
+      100% {
+          opacity: 1;
+          transform: translateY(0); /* End at its original position */
+      }
+  }
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
+  }
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
+  }
+  .slide{
+      display: none;
+  }
+  .active{
+      display: block;
+  }
+</style>