Mini app Telegram adalah aplikasi web yang dapat digunakan di dalam aplikasi Telegram, memungkinkan pengguna untuk mengakses layanan, bermain game, atau berbelanja tanpa meninggalkan antarmuka obrolan. Dibangun menggunakan teknologi web standar seperti HTML, CSS, dan JavaScript, mini app ini terintegrasi dengan bot Telegram dan menawarkan pengalaman yang mulus serta fungsionalitas kaya seperti pembayaran, notifikasi push, dan interaksi lintas platform.
klik untuk menyalin
👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mini Aplikasi Telegram</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
ul.dtree {
list-style: none;
padding: 0;
margin: 0;
}
ul.dtree li {
margin: 10px 0;
}
ul.dtree li .toggle {
cursor: pointer;
margin-right: 5px;
font-weight: bold;
}
ul.dtree ul {
display: none;
padding-left: 20px;
}
ul.dtree li.open > ul {
display: block;
}
.popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
color: #fff;
justify-content: center;
align-items: center;
text-align: center;
}
.popup.active {
display: flex;
}
.popup button {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
.completed {
color: gray;
text-decoration: line-through;
pointer-events: none;
}
</style>
</head>
<body>
<h1>Mini Aplikasi Telegram</h1>
<p>Total Poin: <span id="totalPoints">0</span></p>
<ul class="dtree">
<li>
<span class="toggle">▶</span> Home
</li>
<li>
<span class="toggle">▶</span> Reward
<ul>
<li>Jumlah Poin: <span id="rewardPoints">0</span></li>
<li>Jumlah Rupiah: Rp.<span id="rewardRupiah">0</span></li>
</ul>
</li>
<li>
<span class="toggle">▶</span> Tugas 1
<ul>
<li><a href="https://youtube.com" target="_blank" class="task" data-points="10">Follow YouTube +10</a></li>
<li><a href="https://facebook.com" target="_blank" class="task" data-points="10">Follow Facebook +10</a></li>
</ul>
</li>
<li>
<span class="toggle">▶</span> Tugas 2
<ul>
<li><a href="https://instagram.com" target="_blank" class="task" data-points="10">Follow Instagram +10</a></li>
<li><a href="https://twitter.com" target="_blank" class="task" data-points="10">Follow Twitter +10</a></li>
<li><a href="tg://resolve?domain=telegram_channel" class="task" data-points="10">Follow Telegram +10</a></li>
</ul>
</li>
<li>
<span class="toggle">▶</span> Tugas 3
<ul>
<li><button class="popup-trigger" data-reward="100">Follow Iklan (Rp.100)</button></li>
</ul>
</li>
</ul>
<div class="popup" id="popup">
<div>
<h2>Tugas Berhasil Diselesaikan!</h2>
<p>Anda mendapatkan Rp. <span id="popupReward">0</span></p>
<p>Popup akan menutup dalam <span id="popupTimer">15</span> detik...</p>
</div>
</div>
<script>
// Inisialisasi poin
let totalPoints = parseInt(localStorage.getItem('points')) || 0;
document.getElementById('totalPoints').textContent = totalPoints;
document.getElementById('rewardPoints').textContent = totalPoints;
document.getElementById('rewardRupiah').textContent = totalPoints * 100;
// Fungsi toggle menu
document.querySelectorAll('.dtree .toggle').forEach(toggle => {
toggle.addEventListener('click', () => {
const parentLi = toggle.parentElement;
parentLi.classList.toggle('open');
toggle.textContent = parentLi.classList.contains('open') ? '▼' : '▶';
});
});
// Tambah poin saat tugas selesai
document.querySelectorAll('.task').forEach(task => {
task.addEventListener('click', (e) => {
e.preventDefault();
const points = parseInt(task.getAttribute('data-points'));
totalPoints += points;
localStorage.setItem('points', totalPoints);
task.textContent = 'Tugas Selesai';
task.classList.add('completed');
updateRewards();
});
});
// Popup untuk tugas 3
document.querySelector('.popup-trigger').addEventListener('click', (e) => {
const reward = parseInt(e.target.getAttribute('data-reward'));
totalPoints += reward / 100;
localStorage.setItem('points', totalPoints);
document.getElementById('popupReward').textContent = reward;
document.getElementById('popup').classList.add('active');
updateRewards();
// Timer untuk menutup popup
let countdown = 15;
const timerElement = document.getElementById('popupTimer');
const interval = setInterval(() => {
countdown--;
timerElement.textContent = countdown;
if (countdown <= 0) {
clearInterval(interval);
document.getElementById('popup').classList.remove('active');
}
}, 1000);
});
// Fungsi update rewards
function updateRewards() {
document.getElementById('totalPoints').textContent = totalPoints;
document.getElementById('rewardPoints').textContent = totalPoints;
document.getElementById('rewardRupiah').textContent = totalPoints * 100;
}
</script>
</body>
</html>
Komentar untuk contoh script mini game aplikasi telegram