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
Posting Komentar