-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit bf3d83d
Showing
5 changed files
with
134 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
## License | ||
This project is licensed under the MIT License - see the LICENSE file for details. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
<html> | ||
<head> | ||
<link rel="stylesheet" href="style.css"> | ||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"> | ||
<style> | ||
html, body { | ||
height: 100%; | ||
} | ||
body { | ||
margin: 0; | ||
display: flex; | ||
|
||
/* This centers our sketch horizontally. */ | ||
justify-content: center; | ||
|
||
/* This centers our sketch vertically. */ | ||
align-items: center; | ||
} | ||
</style> | ||
<script src="https://telegram.org/js/telegram-web-app.js"></script> | ||
<!-- Expand the window as soon as the Telegram Web App API is loaded --> | ||
<script> | ||
window.onload = function() { | ||
if (window.Telegram && window.Telegram.WebApp) { | ||
window.Telegram.WebApp.expand(); | ||
} | ||
}; | ||
</script> | ||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script> | ||
<script src="slideit.js"></script> | ||
</head> | ||
<body> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,96 @@ | ||
<html> | ||
<head> | ||
<link rel="stylesheet" href="style.css"> | ||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"> | ||
<script src="https://telegram.org/js/telegram-web-app.js"></script> | ||
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.7.4/lottie.min.js"></script> | ||
<style> | ||
#beautifulText { | ||
text-align: center; | ||
margin: 20px auto; | ||
padding: 15px; | ||
font-size: 20px; | ||
color: #333; /* Dark text color for contrast */ | ||
background-color: #f8f8f8; /* Light background for universality */ | ||
border-radius: 10px; /* Optional: for rounded corners */ | ||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: subtle shadow for depth */ | ||
max-width: 80%; | ||
text-align: left; /* Aligns paragraph text to the left */ | ||
} | ||
/* Other styles */ | ||
</style> | ||
</head> | ||
<body> | ||
<!-- Lottie animation container --> | ||
<div id="lottieAnimation" style="width: 300px; height: 300px; margin: auto;"></div> | ||
<!-- Beautiful text section --> | ||
<div id="beautifulText"> | ||
Welcome! ✨ | ||
<p>Dive into our captivating puzzle game and put your finger agility to the test. Ready for the challenge?</p> | ||
</div> | ||
<script> | ||
|
||
var lottieAnimationInstance; // To store the Lottie animation instance | ||
|
||
function loadLottieAnimation() { | ||
lottieAnimationInstance = lottie.loadAnimation({ | ||
container: document.getElementById('lottieAnimation'), | ||
path: 'main.json', | ||
renderer: 'svg', | ||
loop: true, | ||
autoplay: true | ||
}); | ||
} | ||
|
||
// Init TWA | ||
Telegram.WebApp.ready(); | ||
|
||
window.onload = function() { | ||
if (window.Telegram && window.Telegram.WebApp) { | ||
window.Telegram.WebApp.expand(); | ||
loadLottieAnimation(); // Initialize the Lottie animation | ||
} | ||
}; | ||
|
||
// Event occurs whenever theme settings are changed in the user's Telegram app (including switching to night mode). | ||
Telegram.WebApp.onEvent('themeChanged', function() { | ||
document.documentElement.className = Telegram.WebApp.colorScheme; | ||
}); | ||
|
||
// Show main button | ||
Telegram.WebApp.MainButton.setParams({ | ||
text: 'PLAY NOW' | ||
}); | ||
Telegram.WebApp.MainButton.show(); | ||
|
||
// Modify the MainButton onClick event | ||
Telegram.WebApp.MainButton.onClick(function () { | ||
// Hide and stop the Lottie animation | ||
var lottieContainer = document.getElementById('lottieAnimation'); | ||
if (lottieAnimationInstance) { | ||
lottieAnimationInstance.stop(); | ||
} | ||
|
||
if (lottieContainer) { | ||
lottieContainer.remove(); | ||
} | ||
|
||
var textBlock = document.getElementById('beautifulText'); | ||
if (textBlock) { | ||
textBlock.remove(); | ||
} | ||
|
||
// Hide the Main Button | ||
Telegram.WebApp.MainButton.hide(); | ||
|
||
// Load game.html as a new page | ||
loadGame(); | ||
}); | ||
|
||
function loadGame() { | ||
// Redirect to game.html | ||
window.location.href = 'game.html'; | ||
} | ||
</script> | ||
</body> | ||
</html> |
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.