2022-04-07 08:19:13 +02:00
<!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" / >
2023-09-03 19:39:56 +02:00
< script src = "https://tg.dev/js/telegram-web-app.js?34" > < / script >
2022-04-07 08:19:13 +02:00
< script >
function setThemeClass() {
2022-04-10 00:07:30 +02:00
document.documentElement.className = Telegram.WebApp.colorScheme;
2022-04-07 08:19:13 +02:00
}
2022-04-11 03:58:11 +02:00
Telegram.WebApp.onEvent('themeChanged', setThemeClass);
2022-04-07 08:19:13 +02:00
setThemeClass();
< / script >
2022-06-03 15:46:09 +02:00
< link href = "https://tg.dev/css/bootstrap.min.css?3" rel = "stylesheet" >
< link href = "https://tg.dev/css/bootstrap-extra.css?2" rel = "stylesheet" >
2023-09-03 19:39:56 +02:00
< link href = "/css/webappdemo.css?8" rel = "stylesheet" >
2022-04-07 08:19:13 +02:00
< / head >
2022-06-03 15:46:09 +02:00
< body class = "" style = "visibility: hidden;" >
2022-06-21 18:52:24 +02:00
< section id = "top_sect" class = "second" >
2022-06-03 15:46:09 +02:00
< 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 = "data_btn" onclick = "DemoApp.sendTime(true);" > Send current time to bot (x10)< / button >
< button onclick = "DemoApp.expand();" > Expand Webview< / button >
< button onclick = "DemoApp.toggleMainButton(this);" > Hide Main Button< / button >
2022-05-26 23:00:05 +02:00
< input type = "text" placeholder = "Input text in regular input..." / >
2022-05-26 13:09:11 +02:00
< div class = "input" contenteditable = "true" data-placeholder = "Input text in contenteditable field..." > < / div >
2022-06-21 18:52:24 +02:00
< div id = "peer_wrap" style = "display:none" >
2022-06-03 15:46:09 +02:00
< img id = "peer_photo" class = "chat_img" src = "" >
< span id = "peer_name" > < / span >
< / div >
2023-09-03 19:39:56 +02:00
< div class = "sect_row" > Header: < input type = "color" id = "header_color_input" / > < select id = "header_color_sel" >
2022-06-21 18:52:24 +02:00
< option value = "bg_color" selected > bg_color< / option >
< option value = "secondary_bg_color" > secondary_bg_color< / option >
2023-09-03 19:39:56 +02:00
< option value = "custom" id = "header_color_val" > custom...< / option >
2022-06-21 18:52:24 +02:00
< / 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 >
2022-06-03 15:46:09 +02:00
< / 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 >
2022-12-13 15:46:38 +01:00
< 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 >
2023-07-18 16:03:45 +02:00
< 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 >
2022-06-03 15:46:09 +02:00
< / ul >
< p > Test permissions:< / p >
2023-08-25 14:44:38 +02:00
< 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 > < br > < br > < / li >
< li > < a href = "javascript:;" onclick = "return DemoApp.requestServerTime(this);" > Request server time< / a > (invokes custom method) < span > < / span > < / li >
< / ul >
< / div >
2022-06-03 15:46:09 +02:00
< p > Test alerts:< / p >
2022-07-01 18:14:00 +02:00
< 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 >
2022-12-13 15:46:38 +01:00
< li > < a href = "javascript:;" onclick = "DemoApp.showScanQrPopup();" > showScanQrPopup< / a > < / li >
2022-12-14 14:55:38 +01:00
< li > < a href = "javascript:;" onclick = "DemoApp.showScanQrPopup(true);" > showScanQrPopup (links only)< / a > < / li >
2022-07-01 18:14:00 +02:00
< / ul >
< / div >
2022-06-03 15:46:09 +02:00
< p > Haptics:< / p >
< ul >
< li > Impact: < a href = "javascript:Telegram.WebApp.HapticFeedback.impactOccurred('heavy');" > heavy< / a > , < a href = "javascript:Telegram.WebApp.HapticFeedback.impactOccurred('light');" > light< / a > , < a href = "javascript:Telegram.WebApp.HapticFeedback.impactOccurred('medium');" > medium< / a > , < a href = "javascript:Telegram.WebApp.HapticFeedback.impactOccurred('rigid');" > rigid< / a > , < 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 > , < a href = "javascript:Telegram.WebApp.HapticFeedback.notificationOccurred('success');" > success< / a > , < 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 >
2023-08-26 14:15:20 +02:00
< 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 >
2022-06-03 15:46:09 +02:00
< 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 >
2022-06-23 15:29:35 +02:00
< div class = "hint" >
2022-08-24 16:31:30 +02:00
Version: < span id = "ver" > < / span > ,
platform: < span id = "platform" > < / span >
2022-06-23 15:29:35 +02:00
< / div >
2022-06-03 15:46:09 +02:00
< / section >
< div class = "viewport-border" > < / div >
< div class = "viewport-stable_border" > < / div >
2022-04-07 08:19:13 +02:00
< script src = "/js/jquery.min.js" > < / script >
2022-06-03 15:46:09 +02:00
< script src = "https://tg.dev/js/bootstrap.min.js" > < / script >
2023-09-01 21:39:40 +02:00
< script src = "/js/webappdemo.js?15" > < / script >
< script > D e m o A p p . a p i U r l = " / d e m o / a p i " ;
2022-04-13 00:22:26 +02:00
Telegram.WebApp.onEvent('themeChanged', function() {
$('#theme_data').html(JSON.stringify(Telegram.WebApp.themeParams, null, 2));
});
2022-04-07 08:19:13 +02:00
2022-06-03 15:46:09 +02:00
$('#main_btn').toggle(!!DemoApp.initDataUnsafe.query_id);
$('#with_webview_btn').toggle(!!DemoApp.initDataUnsafe.query_id & & !DemoApp.initDataUnsafe.receiver);
// $('#data_btn').toggle(!DemoApp.initDataUnsafe.query_id || !DemoApp.initDataUnsafe.receiver);
$('#webview_data').html(JSON.stringify(DemoApp.initDataUnsafe, null, 2));
2022-04-13 00:22:26 +02:00
$('#theme_data').html(JSON.stringify(Telegram.WebApp.themeParams, null, 2));
2022-04-07 08:19:13 +02:00
$('#regular_link').attr('href', $('#regular_link').attr('href') + location.hash);
$('#text_field').focus();
2022-10-07 11:56:27 +02:00
$('#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();
}
});
2022-04-07 08:19:13 +02:00
2022-06-23 15:29:35 +02:00
$('#ver').text(Telegram.WebApp.version);
2022-08-24 16:31:30 +02:00
$('#platform').text(Telegram.WebApp.platform);
2022-06-23 15:29:35 +02:00
2022-06-03 15:46:09 +02:00
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);
2022-04-11 03:58:11 +02:00
} else {
2022-06-03 15:46:09 +02:00
$('#peer_photo').hide();
2022-04-11 03:58:11 +02:00
}
}
2022-06-03 15:46:09 +02:00
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();
}
2022-04-11 03:58:11 +02:00
}
2022-06-03 15:46:09 +02:00
DemoApp.checkInitData();
DemoApp.init();
2022-04-11 03:58:11 +02:00
function setViewportData() {
2022-06-03 15:46:09 +02:00
$('.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'));
2022-04-09 21:58:54 +02:00
}
2022-06-21 18:52:24 +02:00
Telegram.WebApp.setHeaderColor('secondary_bg_color');
2022-04-11 03:58:11 +02:00
Telegram.WebApp.onEvent('viewportChanged', setViewportData);
setViewportData();
2022-05-31 18:08:03 +02:00
Telegram.WebApp.onEvent('settingsButtonClicked', function() {
alert('Settings opened!');
});
2022-04-07 08:19:13 +02:00
2022-06-14 21:54:35 +02:00
var prev_bg_color_val = $('#bg_color_sel').val();
$('#bg_color_input').val(Telegram.WebApp.backgroundColor);
2022-06-23 15:29:35 +02:00
$('body').attr('style', '--bg-color:' + Telegram.WebApp.backgroundColor);
2023-09-03 19:39:56 +02:00
var prev_header_color_val = $('#header_color_sel').val();
$('#header_color_input').val(Telegram.WebApp.headerColor);
$('body').attr('style', '--header-color:' + Telegram.WebApp.headerColor);
2022-06-21 18:52:24 +02:00
$('#header_color_sel').val('secondary_bg_color');
2023-09-03 19:39:56 +02:00
$('#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').attr('style', '--header-color:' + Telegram.WebApp.headerColor);
});
2022-06-21 18:52:24 +02:00
$('#header_color_sel').on('change', function(e) {
var color_key = e.target.value;
2023-09-03 19:39:56 +02:00
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').attr('style', '--header-color:' + Telegram.WebApp.headerColor);
$('#header_color_input').val(Telegram.WebApp.headerColor);
prev_header_color_val = $('#header_color_sel').val();
}
2022-06-21 18:52:24 +02:00
});
2022-06-14 21:54:35 +02:00
$('#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);
2022-06-23 15:29:35 +02:00
$('body').attr('style', '--bg-color:' + Telegram.WebApp.backgroundColor);
2022-06-14 21:54:35 +02:00
});
$('#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);
2022-06-23 15:29:35 +02:00
$('body').attr('style', '--bg-color:' + Telegram.WebApp.backgroundColor);
2022-06-14 21:54:35 +02:00
$('#bg_color_input').val(Telegram.WebApp.backgroundColor);
prev_bg_color_val = $('#bg_color_sel').val();
}
});
Telegram.WebApp.onEvent('themeChanged', function() {
$('#bg_color_input').val(Telegram.WebApp.backgroundColor);
2022-06-23 15:29:35 +02:00
$('body').attr('style', '--bg-color:' + Telegram.WebApp.backgroundColor);
2022-06-14 21:54:35 +02:00
});
2023-08-26 14:15:20 +02:00
try {
DemoApp.testClipboard(document.getElementById('clipboard_test'));
} catch(e) {}
try {
DemoApp.loadCloudKeys();
} catch(e) {}
2022-06-14 21:54:35 +02:00
2022-04-07 08:19:13 +02:00
< / script >
< / body >
< / html >
