kar
/
phaser-game-bs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

s1

pull/28/head
Suvodip 2024-11-06 19:05:11 +05:30
parent ebd61445de
commit 1bd86ba8cc
10 changed files with 231 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
public/assets/svg/tracing-done.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

1
public/saveGameAI.js
View File

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

134
public/saveTracingGameData.js Normal file
View File

@ -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();
});
};

38
src/pages/drag/index.astro
View File

@ -61,24 +61,24 @@ const numberOfTimes = starNumberOfTime;
let cancelIconWidth; let cancelIconWidth;
if(isMobile){ if(isMobile){
topLogoWidth = 4.5; topLogoWidth = 4.5;
muteIconWidth = 1.8; muteIconWidth = 1.8;
resetIconWidth = 1.47; resetIconWidth = 1.47;
tickIconWidth = 1.24; tickIconWidth = 1.24;
cancelIconWidth = 1.08; cancelIconWidth = 1.08;
}else if(isTab){ }else if(isTab){
topLogoWidth = 4.5; topLogoWidth = 4.5;
muteIconWidth = 1.6; muteIconWidth = 1.6;
resetIconWidth = 1.43; resetIconWidth = 1.43;
tickIconWidth = 1.29; tickIconWidth = 1.29;
cancelIconWidth = 1.18; cancelIconWidth = 1.18;
}else{ }else{
topLogoWidth = 6; topLogoWidth = 6;
muteIconWidth = 1.3; muteIconWidth = 1.3;
resetIconWidth = 1.26; resetIconWidth = 1.26;
tickIconWidth = 1.222; tickIconWidth = 1.222;
cancelIconWidth = 1.185; cancelIconWidth = 1.185;
} }
if(isMobile){ if(isMobile){
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
@ -465,7 +465,7 @@ const numberOfTimes = starNumberOfTime;
counter++; counter++;
return 'borderCorrect'; return 'borderCorrect';
} else { } else {
console.log(`Score Total: ${scoreTotal}`); // console.log(`Score Total: ${scoreTotal}`);
return 'borderWrong'; return 'borderWrong';
} }
}; };

2
src/pages/drawing/drawing_phonics.astro
View File

@ -18,7 +18,7 @@ import Layout from '../../layouts/Layout.astro';
</div> </div>
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3"> <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="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> </div>
</div> </div>

2
src/pages/drawing/drawing_writo.astro
View File

@ -18,7 +18,7 @@ import Layout from '../../layouts/Layout.astro';
</div> </div>
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3"> <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="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> </div>
</div> </div>

6
src/pages/drawing/index.astro
View File

@ -18,7 +18,7 @@ import Layout from '../../layouts/Layout.astro';
</div> </div>
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3"> <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="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> </div>
</div> </div>
@ -709,12 +709,14 @@ import Layout from '../../layouts/Layout.astro';
eraserButton.addEventListener('click', () => { eraserButton.addEventListener('click', () => {
isErasing = !isErasing; isErasing = !isErasing;
if (isErasing) { if (isErasing) {
eraserButton.style.border = '2px solid #0348A8'; eraserButton.style.border = '3px solid #0348A8';
eraserButton.style.backgroundColor = '#0348A820';
} else { } else {
// Return to drawing mode // Return to drawing mode
// eraserButton.style.backgroundColor = 'green'; // Restore eraser button color // eraserButton.style.backgroundColor = 'green'; // Restore eraser button color
eraserButton.style.color = 'blue'; eraserButton.style.color = 'blue';
eraserButton.style.border = 'none'; eraserButton.style.border = 'none';
eraserButton.style.backgroundColor = 'transparent';
} }
}); });
// Add the Clear and Eraser buttons to the container // Add the Clear and Eraser buttons to the container

2
src/pages/drawing/v2.astro
View File

@ -18,7 +18,7 @@ import Layout from '../../layouts/Layout.astro';
</div> </div>
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3"> <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="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> </div>
</div> </div>

2
src/pages/drawing/v3.astro
View File

@ -18,7 +18,7 @@ import Layout from '../../layouts/Layout.astro';
</div> </div>
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3"> <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="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> </div>
</div> </div>

133
src/pages/guided-tracing/A.astro
View File

@ -8,69 +8,20 @@ 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> <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
</div> </div>
</div> </div>
<div id="parentMainContainer" class="hidden"> <div>
<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 id="wsSavedImg" class="clip-art-container -z-10 absolute bottom-0 right-0">
<div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] "> <img src="/assets/svg/tracing-done.svg" alt="Clip Art" class="clip-art">
<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>
</div> </div>
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameAI.js" is:inline></script> <script src="/saveTracingGameData.js" is:inline></script>
<script is:inline> <script is:inline>
function showAnimation() { function showAnimation() {
const clipArt = document.querySelector('.clip-art'); const clipArt = document.querySelector('.clip-art');
clipArt.classList.add('show'); clipArt.classList.add('show');
} }
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416; const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
@ -108,7 +59,7 @@ import Layout from "../../layouts/Layout.astro";
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
let demoButton; let demoButton;
let maxScore;
if(isMobile){ if(isMobile){
cloudeSize = 200; cloudeSize = 200;
@ -229,7 +180,7 @@ import Layout from "../../layouts/Layout.astro";
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData(this);
showAnimation(); 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); 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); const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setDepth(2).setScale(letterScale);
@ -260,6 +211,7 @@ import Layout from "../../layouts/Layout.astro";
this.add.text(window.innerWidth / 2, 80, 'Letter: A', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5); 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); 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); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedAScale);
// Play the video // Play the video
// animatedLetter.play(); // animatedLetter.play();
animatedLetter.setVisible(false); animatedLetter.setVisible(false);
@ -273,6 +225,9 @@ import Layout from "../../layouts/Layout.astro";
let textX, textY; let textX, textY;
let stepTextSize = isMobile ? 12 : 16; 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); firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2.4; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
@ -299,6 +254,8 @@ import Layout from "../../layouts/Layout.astro";
const audioThreeAudio = this.sound.add('audioThree'); const audioThreeAudio = this.sound.add('audioThree');
thirdTextLayer.setVisible(false); thirdTextLayer.setVisible(false);
thirdLayer.setDepth(1.1); thirdLayer.setDepth(1.1);
// thirdLayer.setScale(1.15); // thirdLayer.setScale(1.15);
thirdLayer.setAlpha(0.5); thirdLayer.setAlpha(0.5);
thirdLayer.setInteractive({ draggable: true }); thirdLayer.setInteractive({ draggable: true });
@ -363,6 +320,7 @@ import Layout from "../../layouts/Layout.astro";
if (distance >= 100) { if (distance >= 100) {
thirdLayer.setAlpha(1); thirdLayer.setAlpha(1);
thirdTextLayer.setVisible(false); thirdTextLayer.setVisible(false);
finalMessage.setVisible(true)
} else { } else {
thirdLayer.setAlpha(0.5); thirdLayer.setAlpha(0.5);
} }
@ -370,7 +328,7 @@ import Layout from "../../layouts/Layout.astro";
graphics = this.add.graphics(); graphics = this.add.graphics();
graphics.setMask(mask); graphics.setMask(mask);
graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha) graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
this.input.on('pointerdown', function (pointer) { this.input.on('pointerdown', function (pointer) {
isDrawing = true; isDrawing = true;
@ -404,40 +362,37 @@ function update() {
} }
</script> </script>
<style> <style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
.clear-button { * {
background-color: blue; margin: 0;
padding: 0;
cursor: -webkit-grab; cursor: grab;
font-family: quicksand;
} }
/* Animation styles */ /* Animation styles */
@keyframes slideInUp { @keyframes slideInUp {
0% { 0% {
opacity: 0; opacity: 0;
transform: translateY(100%); /* Start below the viewport */ transform: translateY(100%); /* Start below the viewport */
}
100% {
opacity: 1;
transform: translateY(0); /* End at its original position */
}
} }
100% {
opacity: 1;
transform: translateY(0); /* End at its original position */
}
}
.clip-art-container { .clip-art-container {
overflow: hidden; /* Prevents overflow during the animation */ overflow: hidden; /* Prevents overflow during the animation */
} }
.clip-art { .clip-art {
transform: translateX(100%); /* Initially off-screen to the right */ transform: translateX(100%); /* Initially off-screen to the right */
opacity: 0; /* Initially hidden */ opacity: 0; /* Initially hidden */
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */ 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 */ transform: translateX(0); /* Move the image into view */
opacity: 1; /* Fade in */ opacity: 1; /* Fade in */
} }
.slide{
display: none;
}
.active{
display: block;
}
</style> </style>