OpenSource/telegram-crawler
OpenSource/telegram-crawler
1
0
Fork 0
mirror of https://github.com/MarshalX/telegram-crawler.git synced 2024-11-23 07:49:20 +01:00
Code Issues Projects Releases Packages Wiki Activity
telegram-crawler/data/web/webappcontent.telegram.org/demo.html
GitHub Action 71c8767c35 Update content of files
2024-11-11 16:43:28 +00:00

399 lines
21 KiB
HTML
Raw Blame History

<!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, viewport-fit=cover" />
<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://tg.dev/js/telegram-web-app-beta.js?73"></script>
<script>
function setThemeClass() {
document.documentElement.className = Telegram.WebApp.colorScheme;
}
Telegram.WebApp.onEvent('themeChanged', setThemeClass);
setThemeClass();
</script>
<link href="https://tg.dev/css/bootstrap.min.css?3" rel="stylesheet">
<link href="https://tg.dev/css/bootstrap-extra.css?2" rel="stylesheet">
<link href="/css/webappdemo.css?16" rel="stylesheet">
</head>
<body class="" style="visibility: hidden;">
<section id="top_sect" class="second">
<button id="main_btn" onclick="DemoApp.sendMessage('');">Send «Hello, World!»</button>
<button id="with_webview_btn" onclick="DemoApp.sendMessage('', true);">Send «Hello, World!» with inline webview button</button>
<button id="share_btn" onclick="DemoApp.sendMessage('', false, true);">Share «Hello, World!»</button>
<button id="share_ww_btn" onclick="DemoApp.sendMessage('', true, true);">Share «Hello, World!» with inline webview button</button>
<button id="data_btn" onclick="DemoApp.sendTime(true);">Send current time to bot (x10)</button>
<button onclick="DemoApp.expand();">Expand Webview</button>
<button onclick="DemoApp.toggleBackButton(this);">Show Back Button</button>
<button onclick="DemoApp.toggleSettingsButton(this);">Show Settings Button</button>
<button onclick="DemoApp.toggleMainButton(this);">Hide Main Button</button>
<button onclick="DemoApp.toggleSecondaryButton(this);">Hide Secondary Button</button>
<button onclick="DemoApp.toggleButtonsProgress(this);">Show Progress</button>
<button onclick="DemoApp.toggleSwipeBehavior(this);">Disable Vertical Swypes</button>
<button id="fullscreen_btn" onclick="DemoApp.toggleFullscreen(this);">Request Fullscreen</button>
<input type="text" placeholder="Input text in regular input..." />
<div class="input" contenteditable="true" data-placeholder="Input text in contenteditable field..."></div>
<div id="peer_wrap" style="display:none">
<img id="peer_photo" class="chat_img" src="">
<span id="peer_name"></span>
</div>
<div class="sect_row">Header: <input type="color" id="header_color_input" /> <select id="header_color_sel">
<option value="bg_color" selected>bg_color</option>
<option value="secondary_bg_color">secondary_bg_color</option>
<option value="custom" id="header_color_val">custom...</option>
</select></div>
<div class="sect_row">Background: <input type="color" id="bg_color_input" /> <select id="bg_color_sel">
<option value="bg_color" selected>bg_color</option>
<option value="secondary_bg_color">secondary_bg_color</option>
<option value="custom" id="bg_color_val">custom...</option>
</select></div>
<div class="sect_row">Bottom Bar: <input type="color" id="bbar_color_input" /> <select id="bbar_color_sel">
<option value="bg_color">bg_color</option>
<option value="secondary_bg_color">secondary_bg_color</option>
<option value="bottom_bar_bg_color" selected>bottom_bar_bg_color</option>
<option value="custom" id="bbar_color_val">custom...</option>
</select></div>
</section>
<section>
<div id="btn_status" class="hint" style="display: none;">
</div>
<p>Test links:</p>
<ul>
<li><a id="regular_link" href="?nextpage=1">Regular link #1</a> (opens inside webview)</li>
<li><a href="https://telegram.org/" target="_blank">target="_blank" link</a> (opens outside webview)</li>
<li><a href="javascript:window.open('https://telegram.org/');">window.open() link</a> (opens outside webview)</li>
<li><a href="https://t.me/like">LikeBot t.me link</a> (opens inside Telegram app)</li>
<li><a href="javascript:Telegram.WebApp.openTelegramLink('https://t.me/vote');">web_app_open_tg_link()</a> (opens inside Telegram app)</li>
<li><a href="javascript:Telegram.WebApp.openLink('https://google.com/');">web_app_open_link()</a> (opens outside webview)</li>
<li><a href="tg://resolve?domain=vote">VoteBot tg:// link</a> (does not open)</li>
<li><a href="javascript:Telegram.WebApp.openLink('https://telegra.ph/api',{try_instant_view:true});">web_app_open_link({try_instant_view:true})</a> (opens IV inside Telegram app)</li>
<li><a href="javascript:Telegram.WebApp.openTelegramLink('https://t.me/DurgerKingBot/menu');">web_app_open_tg_link(webapp_direct_link)</a> (opens with confirm for the first time, then without)</li>
</ul>
<ul>
<li><a href="javascript:Telegram.WebApp.openLink('https://telegram.org',{try_browser:'chrome'});">telegram.org</a> (opens in Chrome)</li>
<li><a href="javascript:Telegram.WebApp.openLink('https://telegram.org',{try_browser:'firefox'});">telegram.org</a> (opens in Firefox)</li>
<li><a href="javascript:Telegram.WebApp.openLink('https://telegram.org',{try_browser:'safari'});">telegram.org</a> (opens in Safari)</li>
<li><a href="javascript:Telegram.WebApp.openLink('https://telegram.org',{try_browser:'opera'});">telegram.org</a> (opens in Opera)</li>
<li><a href="javascript:Telegram.WebApp.close({return_back:true});">Return back</a> (Android only)</li>
</ul>
<ul>
<li><a href="javascript:Telegram.WebApp.shareToStory('https://telegra.ph/file/5583ac37c90979f052b7b.png');">Share picture to story</a></li>
<li><a href="javascript:Telegram.WebApp.shareToStory('https://telegra.ph/file/5583ac37c90979f052b7b.png',{text:'Test caption'});">Share picture to story</a> (with caption)</li>
<li><a href="javascript:Telegram.WebApp.shareToStory('https://telegra.ph/file/5583ac37c90979f052b7b.png',{widget_link:{url:'https://telegra.ph/Almost-done-07-23'}});">Share picture to story</a> (with link widget)</li>
<li><a href="javascript:Telegram.WebApp.shareToStory('https://telegra.ph/file/61f1dac694c3131a7b4ac.mp4',{text:'Test caption',widget_link:{url:'https://telegra.ph/Almost-done-07-23',name:'Link'}});">Share video to story</a> (with caption and link widget)</li>
</ul>
<ul>
<li><a href="javascript:DemoApp.downloadFile(this, 'https://telegra.ph/file/5583ac37c90979f052b7b.png', 'Photo.png');">Download picture</a> <span></span></li>
<li><a href="javascript:DemoApp.downloadFile(this, 'https://telegra.ph/file/61f1dac694c3131a7b4ac.mp4', 'Video.mp4');">Download video</a> <span></span></li>
<li><a href="javascript:DemoApp.downloadFile(this, 'https://pdfobject.com/pdf/sample.pdf', 'Sample.pdf');">Download PDF</a> <span></span></li>
</ul>
<ul>
<li><a href="javascript:Telegram.WebApp.openTelegramLink('https://t.me/addstickers/fltmp');">Stickerpack</a></li>
<li><a href="javascript:Telegram.WebApp.openTelegramLink('https://t.me/addstickers/fltmp', {force_request:true});">Stickerpack</a> (nocache)</li>
</ul>
<ul>
<li><a href="javascript:;" onclick="return DemoApp.checkHomeScreenStatus(this);">Check Home Screen Status</a> <span></span></li>
<li><a id="add_to_home_btn" href="javascript:;" onclick="return DemoApp.addToHomeScreen(this);">Add to Home Screen</a></li>
</ul>
<ul>
<li><a href="javascript:DemoApp.setEmojiStatus(this, '5213305508034783384');">Set emoji status</a> <span></span></li>
<li><a href="javascript:DemoApp.setEmojiStatus(this, '5213305508034783384', 1731343650);">Set emoji status</a> for 5 min <span></span></li>
<li><a href="javascript:DemoApp.setEmojiStatus(this, '123');">Set emoji status</a> (invalid id) <span></span></li>
</ul>
<p>Test permissions:</p>
<div class="columns">
<ul>
<li><a href="javascript:;" onclick="return DemoApp.requestLocation(this);">Request Location</a> <span></span></li>
<li><a href="javascript:;" onclick="return DemoApp.requestVideo(this);">Request Video</a> <span></span></li>
<li><a href="javascript:;" onclick="return DemoApp.requestAudio(this);">Request Audio</a> <span></span></li>
<li><a href="javascript:;" onclick="return DemoApp.requestAudioVideo(this);">Request Audio+Video</a> <span></span></li>
<li><a href="javascript:;" onclick="return DemoApp.testClipboard(this);" id="clipboard_test">Read from clipboard</a> <span></span></li>
</ul>
<ul>
<li><a href="javascript:;" onclick="return DemoApp.requestWriteAccess(this);">Request write access</a> <span></span></li>
<li><a href="javascript:;" onclick="return DemoApp.requestPhoneNumber(this);">Request phone number</a> <span></span></li>
<li><a href="javascript:;" onclick="return DemoApp.requestEmojiStatusAccess(this);">Request emoji status access</a> <span></span></li>
<li><a href="javascript:;" onclick="return DemoApp.requestServerTime(this);">Request server time</a> (invokes custom method) <span></span></li>
</ul>
</div>
<p>Sensors:</p>
<div class="columns">
<ul>
<li><a id="accelerometer_btn" href="javascript:;" onclick="return DemoApp.toggleAccelerometer(this);">Start Accelerometer</a> <span></span></li>
<li><a id="device_orientation_btn" href="javascript:;" onclick="return DemoApp.toggleDeviceOrientation(this);">Start DeviceOrientation</a> <span></span></li>
<li><a id="gyroscope_btn" href="javascript:;" onclick="return DemoApp.toggleGyroscope(this);">Start Gyroscope</a> <span></span></li>
</ul>
</div>
<p>Test alerts:</p>
<div class="columns">
<ul>
<li><a href="javascript:;" onclick="alert('Hello!');">alert</a></li>
<li><a href="javascript:;" onclick="confirm('Are you sure?');">confirm</a></li>
<li><a href="javascript:;" onclick="prompt('How old are you?');">prompt</a></li>
</ul>
<ul>
<li><a href="javascript:;" onclick="DemoApp.showAlert('Hello!');">showAlert</a></li>
<li><a href="javascript:;" onclick="DemoApp.showConfirm('Are you sure?');">showConfirm</a></li>
<li><a href="javascript:;" onclick="DemoApp.showPopup();">showPopup</a></li>
<li><a href="javascript:;" onclick="DemoApp.showScanQrPopup();">showScanQrPopup</a></li>
<li><a href="javascript:;" onclick="DemoApp.showScanQrPopup(true);">showScanQrPopup (links only)</a></li>
</ul>
</div>
<p>Haptics:</p>
<ul>
<li>Impact: <a href="javascript:Telegram.WebApp.HapticFeedback.impactOccurred('heavy');">heavy</a>, &nbsp; <a href="javascript:Telegram.WebApp.HapticFeedback.impactOccurred('light');">light</a>, &nbsp; <a href="javascript:Telegram.WebApp.HapticFeedback.impactOccurred('medium');">medium</a>, &nbsp; <a href="javascript:Telegram.WebApp.HapticFeedback.impactOccurred('rigid');">rigid</a>, &nbsp; <a href="javascript:Telegram.WebApp.HapticFeedback.impactOccurred('soft');">soft</a><br><br></li>
<li>Notification: <a href="javascript:Telegram.WebApp.HapticFeedback.notificationOccurred('error');">error</a>, &nbsp; <a href="javascript:Telegram.WebApp.HapticFeedback.notificationOccurred('success');">success</a>, &nbsp; <a href="javascript:Telegram.WebApp.HapticFeedback.notificationOccurred('warning');">warning</a><br><br></li>
<li>Selection: <a href="javascript:Telegram.WebApp.HapticFeedback.selectionChanged();">changed</a><br><br></li>
</ul>
<p>Cloud storage:</p>
<form onsubmit="DemoApp.saveCloudForm(this, event);">
<table class="table table-bordered table-condensed text-left small">
<thead>
<tr>
<th width="20%">Key</th>
<th width="70%">Value</th>
<th width="10%"></th>
</tr>
</thead>
<tbody id="cloud_rows"></tbody>
<tfoot>
<tr>
<td><input type="text" name="key" /></td>
<td><input type="text" name="value" /></td>
<td>
<button type="submit">Save</button>
<button type="reset">Clear</button>
</td>
</tr>
</tfoot>
</table>
</form>
<p>Biometrics:</p>
<div class="columns">
<ul>
<li>isInited: <span class="txt" id="bm_inited">false</span></li>
<li>available: <span class="txt" id="bm_available">false</span></li>
<li>type: <span class="txt" id="bm_type"></span></li>
<li>access_requested: <span class="txt" id="bm_access_requested">false</span> (<a href="javascript:;" onclick="return DemoApp.biometricRequestAccess(this);">Request access</a>) <span></span></li>
<li>access_granted: <span class="txt" id="bm_access_granted">false</span> <span id="bm_settings" style="display:none;">(<a href="javascript:;" onclick="return DemoApp.biometricOpenSettings(this);">Open settings</a>)</span></li>
<li>token_saved: <span class="txt" id="bm_token_saved">false</span> (<a href="javascript:;" onclick="return DemoApp.biometricSetToken(this);">Set token</a>, <a href="javascript:;" onclick="return DemoApp.biometricRemoveToken(this);">Remove token</a>) <span></span></li>
<li>device_id: <span class="txt" id="bm_device_id"></span></li>
<li><a href="javascript:;" onclick="return DemoApp.biometricRequestAuth(this);">Request auth</a> <span></span></li>
</ul>
</div>
<p>Location:</p>
<div class="columns">
<ul>
<li>isInited: <span class="txt" id="loc_inited">false</span></li>
<li>available: <span class="txt" id="loc_available">false</span></li>
<li>access_requested: <span class="txt" id="loc_access_requested">false</span> (<a href="javascript:;" onclick="return DemoApp.locationGet(this);">Request location</a>) <span></span></li>
<li>access_granted: <span class="txt" id="loc_access_granted">false</span> <span id="loc_settings" style="display:none;">(<a href="javascript:;" onclick="return DemoApp.locationOpenSettings(this);">Open settings</a>)</span></li>
</ul>
</div>
<pre><code id="webview_data"></code></pre>
<div class="hint">
Data passed to webview.
<span id="webview_data_status" class="status_need">Checking hash...</span>
</div>
<pre><code id="theme_data"></code></pre>
<div class="hint">
Theme params
</div>
<div class="hint">
Version: <span id="ver"></span>,
platform: <span id="platform"></span>
</div>
<div class="hint">
<span id="cur_activity"></span><span id="prev_activity"></span>
</div>
</section>
<div class="safe-area-border"></div>
<div class="tg-safe-area-border">
<div class="tg-content-safe-area-border"></div>
</div>
<div class="viewport-border"></div>
<div class="viewport-stable-border"></div>
<script src="/js/jquery.min.js"></script>
<script src="https://tg.dev/js/bootstrap.min.js"></script>
<script src="/js/webappdemo.js?41"></script>
<script>DemoApp.apiUrl = "/demo/api";
Telegram.WebApp.onEvent('themeChanged', function() {
$('#theme_data').text(JSON.stringify(Telegram.WebApp.themeParams, null, 2));
});
$('#main_btn').toggle(!!DemoApp.initDataUnsafe.query_id);
$('#with_webview_btn').toggle(!!DemoApp.initDataUnsafe.query_id && !DemoApp.initDataUnsafe.receiver);
$('#share_btn').toggle(!!DemoApp.initDataUnsafe.query_id);
$('#share_ww_btn').toggle(!!DemoApp.initDataUnsafe.query_id && !DemoApp.initDataUnsafe.receiver);
// $('#data_btn').toggle(!DemoApp.initDataUnsafe.query_id || !DemoApp.initDataUnsafe.receiver);
$('#webview_data').text(JSON.stringify(DemoApp.initDataUnsafe, null, 2));
$('#theme_data').text(JSON.stringify(Telegram.WebApp.themeParams, null, 2));
$('#regular_link').attr('href', $('#regular_link').attr('href') + location.hash);
$('#text_field').focus();
$('#regular_field').on('input', function(e) {
var val = $(this).val().toLowerCase();
if (val.indexOf('progress') >= 0) {
Telegram.WebApp.MainButton.showProgress();
} else {
Telegram.WebApp.MainButton.hideProgress();
}
});
$('#ver').text(Telegram.WebApp.version);
$('#platform').text(Telegram.WebApp.platform);
if (DemoApp.initDataUnsafe.receiver) {
$('#peer_wrap').show();
$('#peer_name').text(DemoApp.initDataUnsafe.receiver.first_name + ' ' + DemoApp.initDataUnsafe.receiver.last_name);
if (DemoApp.initDataUnsafe.receiver.photo_url) {
$('#peer_photo').attr('src', DemoApp.initDataUnsafe.receiver.photo_url);
} else {
$('#peer_photo').hide();
}
}
else if (DemoApp.initDataUnsafe.chat) {
$('#peer_wrap').show();
$('#peer_name').text(DemoApp.initDataUnsafe.chat.title);
if (DemoApp.initDataUnsafe.chat.photo_url) {
$('#peer_photo').attr('src', DemoApp.initDataUnsafe.chat.photo_url);
} else {
$('#peer_photo').hide();
}
}
DemoApp.checkInitData();
DemoApp.init();
function setViewportData() {
$('.viewport-border').attr('text', window.innerWidth + ' x ' + round(Telegram.WebApp.viewportHeight, 2));
$('.viewport-stable-border').attr('text', window.innerWidth + ' x ' + round(Telegram.WebApp.viewportStableHeight, 2) + ' | is_expanded: ' + (Telegram.WebApp.isExpanded ? 'true' : 'false'));
}
Telegram.WebApp.setHeaderColor('secondary_bg_color');
Telegram.WebApp.onEvent('viewportChanged', setViewportData);
setViewportData();
var prev_bg_color_val = $('#bg_color_sel').val();
$('#bg_color_input').val(Telegram.WebApp.backgroundColor);
$('body').cssProp('--bg-color', Telegram.WebApp.backgroundColor);
var prev_header_color_val = $('#header_color_sel').val();
$('#header_color_input').val(Telegram.WebApp.headerColor);
$('body').cssProp('--header-color', Telegram.WebApp.headerColor);
var prev_bbar_color_val = $('#bbar_color_sel').val();
$('#bbar_color_input').val(Telegram.WebApp.bottomBarColor);
$('body').cssProp('--bottom-bar-color', Telegram.WebApp.bottomBarColor);
$('#header_color_sel').val('secondary_bg_color');
$('#header_color_input').on('change', function(e) {
var color = e.target.value;
$('#header_color_val').text(color);
$('#header_color_sel').val('custom');
prev_header_color_val = $('#header_color_sel').val();
Telegram.WebApp.setHeaderColor(color);
$('body').cssProp('--header-color', Telegram.WebApp.headerColor);
});
$('#header_color_sel').on('change', function(e) {
var color_key = e.target.value;
if (color_key == 'custom') {
$('#header_color_sel').val(prev_header_color_val);
$('#header_color_input').focus().click();
} else {
$('#header_color_val').text('custom...');
Telegram.WebApp.setHeaderColor(color_key);
$('#top_sect').toggleClass('second', color_key == 'secondary_bg_color');
$('body').cssProp('--header-color', Telegram.WebApp.headerColor);
$('#header_color_input').val(Telegram.WebApp.headerColor);
prev_header_color_val = $('#header_color_sel').val();
}
});
$('#bg_color_input').on('change', function(e) {
var color = e.target.value;
$('#bg_color_val').text(color);
$('#bg_color_sel').val('custom');
prev_bg_color_val = $('#bg_color_sel').val();
Telegram.WebApp.setBackgroundColor(color);
$('body').cssProp('--bg-color', Telegram.WebApp.backgroundColor);
});
$('#bg_color_sel').on('change', function(e) {
var color_key = e.target.value;
if (color_key == 'custom') {
$('#bg_color_sel').val(prev_bg_color_val);
$('#bg_color_input').focus().click();
} else {
$('#bg_color_val').text('custom...');
Telegram.WebApp.setBackgroundColor(color_key);
$('body').cssProp('--bg-color', Telegram.WebApp.backgroundColor);
$('#bg_color_input').val(Telegram.WebApp.backgroundColor);
prev_bg_color_val = $('#bg_color_sel').val();
}
});
$('#bbar_color_input').on('change', function(e) {
var color = e.target.value;
$('#bbar_color_val').text(color);
$('#bbar_color_sel').val('custom');
prev_bbar_color_val = $('#bbar_color_sel').val();
Telegram.WebApp.setBottomBarColor(color);
$('body').cssProp('--bottom-bar-color', Telegram.WebApp.bottomBarColor);
});
$('#bbar_color_sel').on('change', function(e) {
var color_key = e.target.value;
if (color_key == 'custom') {
$('#bbar_color_sel').val(prev_bbar_color_val);
$('#bbar_color_input').focus().click();
} else {
$('#bbar_color_val').text('custom...');
Telegram.WebApp.setBottomBarColor(color_key);
$('body').cssProp('--bottom-bar-color', Telegram.WebApp.bottomBarColor);
$('#bbar_color_input').val(Telegram.WebApp.bottomBarColor);
prev_bbar_color_val = $('#bbar_color_sel').val();
}
});
Telegram.WebApp.onEvent('themeChanged', function() {
$('#bg_color_input').val(Telegram.WebApp.backgroundColor);
$('body').cssProp('--bg-color', Telegram.WebApp.backgroundColor);
});
try {
DemoApp.testClipboard(document.getElementById('clipboard_test'));
} catch(e) {}
try {
DemoApp.loadCloudKeys();
} catch(e) {}
try {
DemoApp.biometricInit();
} catch(e) {}
try {
DemoApp.fullscreenInit();
} catch(e) {}
try {
DemoApp.accelerometerInit();
} catch(e) {}
try {
DemoApp.deviceOrientationInit();
} catch(e) {}
try {
DemoApp.gyroscopeInit();
} catch(e) {}
try {
DemoApp.locationInit();
} catch(e) {}
try {
DemoApp.homeScreenInit();
} catch(e) {}
try {
DemoApp.emojiStatusInit();
} catch(e) {}
try {
DemoApp.activityInit();
} catch(e) {}
</script>
</body>
</html>
Reference in a new issue View git blame Copy permalink