Contoh Script sederhana Bot Mini aplikasi Telegram

December 24, 2024

Contoh Script sederhana Bot Mini aplikasi Telegram

ini hanya Contoh Script sederhana untuk pembuatan Bot Mini aplikasi Telegram

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh bot Telegram Points</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>

<header>
    <h1>Bot 🚀</h1>
    <div class="score-check">Your Score</div>
</header>

<div class="wallet-link">Connect Wallet</div>

<div class="logo">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP6NxYHiMreDsB-cDLru9DA1-x1SMaLBu0LbcvWFjWanREDPHMP5-BpWMKoTiXCSxA8H9DQl8nm7NrNVL65LkoJNR7v9XEbXAh9bv_2RbiZfKq-LDNHuZm0LIvq55JD_vf2QRQ-BHSFyOwWRiOgh4h512xDc8hEUNN67QuAPP9vmSv-vF9hC-klMEEEMAc/s512/stars_purchase.gif" alt="Logo"/>
</div>

<div class="points">70,656 Point</div>

<div class="tasks">
    <h2>Tasks</h2>
    <p>Invite 5 friends to get Point</p>
    <button class="task-button" onclick="completeTask()">Start</button>
    <p id="task-status" class="task-done" style="display:none;">Task Completed! +2,500 POINT</p>
</div>

<footer>
    <a href="#">Home</a>
    <a href="#">Leaderboard</a>
    <a href="#">Friends</a>
</footer>
<script type="text/javascript" src="script.js">
</script>
</body>
</html>

<link rel="stylesheet" type="text/css" href="styles.css">

body {
            background-color: #000;
            color: #fff;
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 0;
            padding: 0;
        }
        header {
            background-color: #333;
            padding: 20px;
            position: relative;
        }
        header h1 {
            margin: 0;
            font-size: 24px;
        }
        .score-check {
            position: absolute;
            top: 10px;
            right: 20px;
            background-color: #007bff;
            padding: 10px;
            border-radius: 20px;
            cursor: pointer;
        }
        .wallet-link {
            background-color: #444;
            padding: 15px;
            margin-top: 10px;
            border-radius: 10px;
            display: inline-block;
            cursor: pointer;
        }
        .logo {
            margin: 20px auto;
        }
        .logo img {
            width: 100px;
        }
        .points {
            font-size: 48px;
            margin: 20px 0;
        }
        .tasks {
            background-color: #222;
            padding: 20px;
            margin: 20px;
            border-radius: 10px;
        }
        .task-button {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 10px;
        }
        .task-button:disabled {
            background-color: #555;
        }
        .task-done {
            color: limegreen;
        }
        footer {
            display: flex;
            justify-content: space-around;
            padding: 20px;
            background-color: #222;
        }
        footer a {
            color: white;
            text-decoration: none;
        }

<script type="text/javascript" src="script.js"></script>

function completeTask() {
        const taskButton = document.querySelector('.task-button');
        taskButton.disabled = true;
        document.getElementById('task-status').style.display = 'block';
        // Simulasi reward tambahan
        setTimeout(() => {
            let pointsElement = document.querySelector('.points');
            let currentPoints = parseInt(pointsElement.innerText.replace(',', ''));
            currentPoints += 2500;
            pointsElement.innerText = currentPoints.toLocaleString() + ' PANDAS';
        }, 500);
    }


      Berikut rencana struktur HTML dan JavaScript untuk fitur yang diinginkan:

1. Header dengan menu cek score/usia status menggunakan Telegram.


2. Menu hubungkan dompet di bawah header.


3. Logo Panda dan jumlah poin total.


4. Slider untuk task, dan button untuk menjalankan task.


5. Menu task dengan reward setelah selesai mengerjakan task.

Penjelasan:

Header memiliki tombol "Your Score" yang dapat digunakan untuk mengecek status score pengguna.

Menu Connect Wallet untuk menampilkan opsi hubungkan dompet.

Logo Panda tampil di tengah dengan jumlah poin di bawahnya.

Tasks memungkinkan pengguna untuk menyelesaikan tugas dengan tombol "Start" yang menghasilkan reward poin.

Footer memiliki beberapa tautan navigasi seperti Home, Leaderboard, dan Friends.

Kamu bisa menyesuaikan lebih lanjut, seperti logo dan event apa yang terjadi saat task selesai. Jika ingin menambahkan slider atau elemen lain, beri tahu dikomentar!

Contoh bot Telegram Points

Bot 🚀

Your Score

Connect Wallet

70,656 Point

Tasks

Invite 5 friends to get Point

Search This Blog

Blog Responsive 2015

Contoh Script sederhana Bot Mini aplikasi Telegram

Navigation Menu

klik 2 kali untuk menyalin

<link rel="stylesheet" type="text/css" href="styles.css">

<script type="text/javascript" src="script.js"></script>

Bot 🚀

Tasks

Comments

Post a Comment

Popular posts from this blog

Ternyata mudah menghapus samsung akun yang nyangkut karena lupa password

Download Script Landing Page CPA Movie Free

Acunetix v9.0 full Version

10 Contoh Landing Page Responsive Siap Copy Paste

Contoh Template Movie & TV Series Full HTML, CSS, JAVASCRIPT

50 Contoh Prompt untuk membuat video menggunakan CapCut

Listing Crypto Terbaru 2026: Daftar Coin Baru, Tren, dan Cara Menemukannya

Kode Script Form kontak blog

Kumpulan Do'a sehari hari

Cara Mengaktifkan kembali akun Youtube yang kena Suspend