mirror of
https://github.com/python-telegram-bot/python-telegram-bot.git
synced 2024-10-23 17:36:26 +02:00
39 lines
No EOL
1.5 KiB
HTML
39 lines
No EOL
1.5 KiB
HTML
<!--
|
|
Simple static Telegram WebApp. Does not verify the WebAppInitData, as a bot token would be needed for that.
|
|
-->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>python-telegram-bot Example WebApp</title>
|
|
<script src="https://telegram.org/js/telegram-web-app.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script>
|
|
</head>
|
|
<script type="text/javascript">
|
|
const colorPicker = new iro.ColorPicker('#picker', {
|
|
borderColor: "#ffffff",
|
|
borderWidth: 1,
|
|
width: Math.round(document.documentElement.clientWidth / 2),
|
|
});
|
|
colorPicker.on('color:change', function (color) {
|
|
document.body.style.background = color.hexString;
|
|
});
|
|
|
|
Telegram.WebApp.ready();
|
|
Telegram.WebApp.MainButton.setText('Choose Color').show().onClick(function () {
|
|
const data = JSON.stringify({hex: colorPicker.color.hexString, rgb: colorPicker.color.rgb});
|
|
Telegram.WebApp.sendData(data);
|
|
Telegram.WebApp.close();
|
|
});
|
|
</script>
|
|
<body style="background-color: #ffffff">
|
|
<div style="position: absolute; margin-top: 5vh; margin-left: 5vw; height: 90vh; width: 90vw; border-radius: 5vh; background-color: var(--tg-theme-bg-color); box-shadow: 0 0 2vw
|
|
#000000;">
|
|
<div id="picker"
|
|
style="display: flex; justify-content: center; align-items: center; height: 100%; width: 100%"></div>
|
|
</div>
|
|
</body>
|
|
<script type="text/javascript">
|
|
Telegram.WebApp.expand();
|
|
</script>
|
|
</html> |