<!DOCTYPE html>
<html>
<head>
<title>My Gradio App</title>
<script src="https://telegram.org/js/telegram-web-app.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Initialize the Telegram Web App
window.Telegram.WebApp.init();
// Get user data
const user = window.Telegram.WebApp.initDataUnsafe.user;
console.log('Telegram user data:', user);
// Extract username
const username = user ? user.username : 'Guest';
// Set a custom title for the app
window.Telegram.WebApp.setTitle("My Gradio App");
// Display welcome message
document.getElementById('welcome-message').textContent = `Welcome, ${username}!`;
// Example: Handle button click
document.getElementById('my-button').addEventListener('click', function() {
window.Telegram.WebApp.close();
});
});
</script>
</head>
<body>
<h1 id="welcome-message">Welcome, Guest!</h1>
<!-- Gradio app iframe -->
<iframe src="https://your-gradio-app-url" width="100%" height="600px"></iframe>
<!-- Optional button to close the app -->
<button id="my-button">Close</button>
</body>
</html>