-
Notifications
You must be signed in to change notification settings - Fork 0
/
webapp.html
118 lines (101 loc) · 4.43 KB
/
webapp.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Telegram WebApps API</title>
<script src="https://telegram.org/js/telegram-web-app.js"></script> <!-- Connect the Telegram script -->
<style>
body{
color: var(--tg-theme-text-color);
background: var(--tg-theme-bg-color);
display: flex;
flex-direction: column;
align-items: center;
font-size: 18px;
}
.hint{
color: var(--tg-theme-hint-color);
}
.link{
color: var(--tg-theme-link-color);
}
.button{
background: var(--tg-theme-button-color);
color: var(--tg-theme-button-text-color);
border: none;
font-size: 18px;
}
.button:not(:last-child){
margin-bottom: 20px
}
#usercard{
text-align: center;
}
</style>
</head>
<body>
<div id="usernametg"> <!-- User profile card -->
</div>
<div id="userimg"> </div>
<p>Just text</p> <!-- Just some text for checking -->
<a class="link" href="https://mihailgok.ru">Link</a> <!-- Just a link for checking -->
<p class="hint">Some little hint</p> <!-- Just a hint text for checking -->
<button id="btn" class="button">Show/Hide Main Button</button> <!-- Button to hide/show the main button -->
<button id="btnED" class="button">Enable/Disable Main Button</button> <!-- Button to enable/disable the main button -->
<a href="javascript:window.open('https://telegram.org/');">window.open() link</a>
<!-- Haptic Feedback Controls -->
<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>
</body>
<script>
let tg = window.Telegram.WebApp; // Get the Telegram WebApp object
tg.expand(); // Expand to full window
tg.MainButton.setText("Powered by MalluFiles"); // Set the main button text
tg.MainButton.textColor = "#fff"; // Change button text color
tg.MainButton.color = "#090909"; // Change button background color
tg.MainButton.show(); // Always show the main button
let btn = document.getElementById("btn"); // Get the hide/show button
btn.addEventListener('click', function() { // Add event on HTML button click
if (tg.MainButton.isVisible()) { // If the button is visible
tg.MainButton.hide(); // Hide the button
} else { // Otherwise
tg.MainButton.show(); // Show the button
}
});
let btnED = document.getElementById("btnED"); // Get the enable/disable button
btnED.addEventListener('click', function() { // Add event on HTML button click
if (tg.MainButton.isActive()) { // If the button is active
tg.MainButton.setParams({ "color": "#E0FFFF" }); // Change color
tg.MainButton.disable(); // Disable the button
} else { // Otherwise
tg.MainButton.setParams({ "color": "#143F6B" }); // Change color
tg.MainButton.enable(); // Enable the button
}
});
Telegram.WebApp.onEvent('mainButtonClicked', function() {
tg.sendData("some string that we need to send");
// Send data as a string when the main button is clicked
});
let usercard = document.getElementById("usercard"); // Get the user card block
let profName = document.createElement('p'); // Create a paragraph
profName.innerText = `${tg.initDataUnsafe.user.first_name}`; // Get and set the user's first name
usercard.appendChild(profName);
</script>
</html>