mirror of
https://github.com/MarshalX/telegram-crawler.git
synced 2024-12-12 01:40:59 +01:00
216 lines
6.5 KiB
HTML
216 lines
6.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||
|
|
<meta name="format-detection" content="telephone=no" />
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
|
|
<meta name="MobileOptimized" content="176" />
|
||
|
|
<meta name="HandheldFriendly" content="True" />
|
||
|
|
<meta name="robots" content="noindex,nofollow" />
|
||
|
|
<script src="https://telegram.org/js/telegram-webview.js?9"></script>
|
||
|
|
<script>
|
||
|
|
function setThemeClass() {
|
||
|
|
document.documentElement.className = document.documentElement.style.getPropertyValue('--tg-theme-color-scheme');
|
||
|
|
}
|
||
|
|
Telegram.WebView.onEvent('theme_changed', setThemeClass);
|
||
|
|
setThemeClass();
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: sans-serif;
|
||
|
|
background-color: var(--tg-theme-bg-color, #ffffff);
|
||
|
|
color: var(--tg-theme-text-color, #222222);
|
||
|
|
font-size: 16px;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
color-scheme: var(--tg-theme-color-scheme);
|
||
|
|
}
|
||
|
|
a {
|
||
|
|
color: var(--tg-theme-link-color, #2678b6);
|
||
|
|
}
|
||
|
|
button {
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
font-size: 14px;
|
||
|
|
margin: 15px 0;
|
||
|
|
padding: 12px 20px;
|
||
|
|
border: none;
|
||
|
|
border-radius: 4px;
|
||
|
|
background-color: var(--tg-theme-button-color, #50a8eb);
|
||
|
|
color: var(--tg-theme-button-text-color, #ffffff);
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
button[disabled] {
|
||
|
|
opacity: 0.6;
|
||
|
|
cursor: auto;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
button.close_btn {
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
border-radius: 0;
|
||
|
|
margin: 0;
|
||
|
|
padding: 16px 20px;
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
section {
|
||
|
|
padding: 15px 15px 65px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
p {
|
||
|
|
margin: 40px 0 15px;
|
||
|
|
}
|
||
|
|
textarea {
|
||
|
|
width: 100%;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 7px;
|
||
|
|
}
|
||
|
|
pre {
|
||
|
|
background: rgba(0, 0, 0, .07);
|
||
|
|
border-radius: 4px;
|
||
|
|
padding: 4px;
|
||
|
|
margin: 7px 0;
|
||
|
|
word-break: break-all;
|
||
|
|
word-break: break-word;
|
||
|
|
white-space: pre-wrap;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
.dark pre {
|
||
|
|
background: rgba(255, 255, 255, .15);
|
||
|
|
}
|
||
|
|
.hint {
|
||
|
|
font-size: .8em;
|
||
|
|
color: var(--tg-theme-hint-color, #a8a8a8);
|
||
|
|
}
|
||
|
|
.ok {
|
||
|
|
color: green;
|
||
|
|
}
|
||
|
|
.err {
|
||
|
|
color: red;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body style="visibility: hidden;">
|
||
|
|
<section>
|
||
|
|
<button id="main_btn" onclick="sendMessage('');">Send «Hello, World!»</button>
|
||
|
|
<button id="with_webview_btn" onclick="sendMessage('', true);">Send «Hello, World!» with inline webview button</button>
|
||
|
|
<button id="data_btn" onclick="sendTime();">Send current time to bot</button>
|
||
|
|
<button id="spam_btn" onclick="sendTime(true);">Send current time to bot (x100)</button>
|
||
|
|
<button class="close_btn" onclick="webviewClose()">Close Webview</button>
|
||
|
|
<div id="btn_status" class="hint" style="display: none;">
|
||
|
|
</div>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="https://telegram.org/" target="_blank">Morbi lacus</a>.</p>
|
||
|
|
<pre><code id="webview_data"></code></pre>
|
||
|
|
<div class="hint">
|
||
|
|
Data passed to webview.
|
||
|
|
<span id="webview_data_status" style="display: none;">Checking hash...</span>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<script src="/js/jquery.min.js"></script>
|
||
|
|
<script>
|
||
|
|
var WebAppData = Telegram.WebApp.initData || {};
|
||
|
|
var WebAppDataRaw = Telegram.WebApp.initDataRaw || '';
|
||
|
|
|
||
|
|
function sendMessage(msg_id, with_webview) {
|
||
|
|
if (!WebAppData.query_id) {
|
||
|
|
alert('WebViewQueryId not defined');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
$('button').prop('disabled', true);
|
||
|
|
$('#btn_status').text('Sending...').removeClass('ok err').show();
|
||
|
|
$.ajax('/test_webview/sendMessage', {
|
||
|
|
type: 'POST',
|
||
|
|
data: {query_id: WebAppData.query_id, msg_id: msg_id || '', with_webview: !WebAppData.receiver && with_webview ? 1 : 0},
|
||
|
|
dataType: 'json',
|
||
|
|
success: function(result) {
|
||
|
|
$('button').prop('disabled', false);
|
||
|
|
if (result.response) {
|
||
|
|
if (result.response.ok) {
|
||
|
|
$('#btn_status').html('Message sent successfully!').addClass('ok').show();
|
||
|
|
} else {
|
||
|
|
$('#btn_status').text(result.response.description).addClass('err').show();
|
||
|
|
alert(result.response.description);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
$('#btn_status').text('Unknown error').addClass('err').show();
|
||
|
|
alert('Unknown error');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function(xhr) {
|
||
|
|
$('button').prop('disabled', false);
|
||
|
|
$('#btn_status').text('Server error').addClass('err').show();
|
||
|
|
alert('Server error');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function byteLength(str) {
|
||
|
|
if (window.Blob) {
|
||
|
|
try { return new Blob([str]).size; } catch (e) {}
|
||
|
|
}
|
||
|
|
var s = str.length;
|
||
|
|
for (var i=str.length-1; i>=0; i--) {
|
||
|
|
var code = str.charCodeAt(i);
|
||
|
|
if (code > 0x7f && code <= 0x7ff) s++;
|
||
|
|
else if (code > 0x7ff && code <= 0xffff) s+=2;
|
||
|
|
if (code >= 0xDC00 && code <= 0xDFFF) i--;
|
||
|
|
}
|
||
|
|
return s;
|
||
|
|
}
|
||
|
|
|
||
|
|
function sendText(spam) {
|
||
|
|
var text = $('#text_field').val();
|
||
|
|
if (!text.length) {
|
||
|
|
return $('#text_field').focus();
|
||
|
|
}
|
||
|
|
if (byteLength(text) > 4096) {
|
||
|
|
return alert('Text is too long');
|
||
|
|
}
|
||
|
|
var repeat = spam ? 100 : 1;
|
||
|
|
for (var i = 0; i < repeat; i++) {
|
||
|
|
Telegram.WebApp.sendData(text);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function sendTime(spam) {
|
||
|
|
var repeat = spam ? 100 : 1;
|
||
|
|
for (var i = 0; i < repeat; i++) {
|
||
|
|
Telegram.WebApp.sendData(new Date().toString());
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function webviewClose() {
|
||
|
|
Telegram.WebApp.close();
|
||
|
|
}
|
||
|
|
$('#main_btn').toggle(!!WebAppData.query_id);
|
||
|
|
$('#with_webview_btn').toggle(!!WebAppData.query_id && !WebAppData.receiver);
|
||
|
|
$('#data_btn,#spam_btn').toggle(!WebAppData.query_id || !WebAppData.receiver);
|
||
|
|
$('#webview_data').html(JSON.stringify(WebAppData, null, 2));
|
||
|
|
$('#text_field').focus();
|
||
|
|
if (WebAppData.query_id && WebAppDataRaw) {
|
||
|
|
$('#webview_data_status').show();
|
||
|
|
$.ajax('/test_webview/checkData', {
|
||
|
|
type: 'POST',
|
||
|
|
data: {data: WebAppDataRaw},
|
||
|
|
dataType: 'json',
|
||
|
|
success: function(result) {
|
||
|
|
if (result.ok) {
|
||
|
|
$('#webview_data_status').html('Hash is correct').addClass('ok');
|
||
|
|
} else {
|
||
|
|
$('#webview_data_status').html(result.error).addClass('err');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function(xhr) {
|
||
|
|
$('#webview_data_status').html('Server error').addClass('err');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
$('body').css('visibility', '');
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|