Update donation button code

I'm still improving the bot to learn how to do things in coding. We've just added a donation button for HIVE, HIVE-ENGINE, and/or Hive-ENGINE tokens.
When you click the button, it opens a page where you can choose the currency for your donation. For now, I've added a few tokens in addition to HIVE and HBD.

As you'll see in the screenshots below, the bot is paused with 78% voting mana after casting 223 votes today. It will later send 0.01 GLYPH to each person who voted, but for now, it's paused.

Pour rajouté un bouton de dons voici un petit bout de code pour ceux que sa intéresserais :

<!-- ===== 💝 BIG DONATION BUTTON TOP LEFT ===== -->
<div style="
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 10000;
">

    <button onclick="openDonationModal()" style="
        background: linear-gradient(135deg, #ff6b9d, #ffa800);
        color: white;
        border: none;
        border-radius: 16px;
        padding: 18px 28px;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        box-shadow: 0 8px 30px rgba(255, 107, 157, 0.6);
        transition: all 0.25s ease;
        max-width: 280px;
        text-align: left;
        line-height: 1.4;
        animation: pulse 2s infinite;
    "
    onmouseover="this.style.transform='scale(1.08)'"
    onmouseout="this.style.transform='scale(1)'">

        💝 If you want to support the project,<br>
        I accept donations.

    </button>

</div>

<!-- ===== 💎 DONATION MODAL ===== -->
<div id="donationModal" style="
    display:none;
    position: fixed;
    top:0; left:0;
    width:100%; height:100%;
    background: rgba(0,0,0,0.7);
    z-index:10001;
    justify-content:center;
    align-items:center;
">

    <div style="
        background:#111;
        padding:25px;
        border-radius:12px;
        width:320px;
        color:white;
        text-align:center;
        box-shadow: 0 0 25px rgba(255,107,157,0.4);
    ">

        <h2>💝 Support the project</h2>

        <input id="donationUser" placeholder="Your Hive username" style="width:100%; padding:10px; margin:10px 0; border-radius:8px; border:none;">
        
        <input id="donationAmount" placeholder="Amount" type="number" style="width:100%; padding:10px; margin:10px 0; border-radius:8px; border:none;">

        <select id="donationToken" style="width:100%; padding:10px; margin:10px 0; border-radius:8px;">
<option value="HIVE">HIVE</option>           
<option value="HBD">HBD</option>
           <option value="ALIVE">ALIVE</option>
<option value="ALIVEM">ALIVEM</option>
<option value="ARCHON">ARCHON</option>
<option value="BBH">BBH</option>
<option value="BBHM">BBHM</option>
<option value="BBHO">BBHO</option>
<option value="BEE">BEE</option>
<option value="BEED">BEED</option>
<option value="BRO">BRO</option>
<option value="BYTE">BYTE</option>
<option value="CCC">CCC</option>
<option value="CENT">CENT</option>
<option value="CTP">CTP</option>
<option value="CURE">CURE</option>
<option value="DAB">DAB</option>
<option value="DCORE">DCORE</option>
<option value="DEC">DEC</option>
<option value="DOOK">DOOK</option>
<option value="DRIP">DRIP</option>
<option value="DRUBBLE">DRUBBLE</option>
<option value="EDSI">EDSI</option>
<option value="EXAIN">EXAIN</option>
<option value="FOODIE">FOODIE</option>
<option value="FUN">FUN</option>
<option value="GAMER">GAMER</option>
<option value="GLYPH">GLYPH</option>
<option value="GROWTH">GROWTH</option>
<option value="HASHSCORE">HASHSCORE</option>
<option value="HBD">HBD</option>
<option value="HEARTBEAT">HEARTBEAT</option>
<option value="HELIOS">HELIOS</option>
<option value="HIVE">HIVE</option>
<option value="HUG">HUG</option>
<option value="IDD">IDD</option>
<option value="LEO">LEO</option>
<option value="LIMITLESS">LIMITLESS</option>
<option value="LOLZ">LOLZ</option>
<option value="MEME">MEME</option>
<option value="NEOX">NEOX</option>
<option value="NEOXAG">NEOXAG</option>
<option value="NEOXAGM">NEOXAGM</option>
<option value="NIGHTMARE">NIGHTMARE</option>
<option value="ONEUP">ONEUP</option>
<option value="ORB">ORB</option>
<option value="PAKX">PAKX</option>
<option value="PART">PART</option>
<option value="PEPE">PEPE</option>
<option value="PIMP">PIMP</option>
<option value="PIZZA">PIZZA</option>
<option value="POB">POB</option>
<option value="SBT">SBT</option>
<option value="SHEKEL">SHEKEL</option>
<option value="SPORTS">SPORTS</option>
<option value="SPT">SPT</option>
<option value="SPS">SPS</option>
<option value="STARBITS">STARBITS</option>
<option value="STARPRO">STARPRO</option>
<option value="STEM">STEM</option>
<option value="SURGE">SURGE</option>
<option value="SWAP.HBD">SWAP.HBD</option>
<option value="SWAP.HIVE">SWAP.HIVE</option>
<option value="THGAMING">THGAMING</option>
<option value="VKBT">VKBT</option>
<option value="WAIV">WAIV</option>
<option value="ZING">ZING</option>
        </select>

        <button onclick="sendDonation()" style="
            width:100%;
            padding:12px;
            margin-top:10px;
            background:#ff6b9d;
            border:none;
            border-radius:8px;
            color:white;
            font-weight:bold;
            cursor:pointer;
        ">
            Send Donation
        </button>

        <button onclick="closeDonationModal()" style="
            width:100%;
            padding:10px;
            margin-top:10px;
            background:#333;
            border:none;
            border-radius:8px;
            color:white;
            cursor:pointer;
        ">
            Cancel
        </button>

    </div>
</div>

<!-- ===== ⚙️ STYLE ANIMATION ===== -->
<style>
@keyframes pulse {
    0% { box-shadow: 0 0 0 rgba(255,107,157,0.6); }
    50% { box-shadow: 0 0 30px rgba(255,107,157,1); }
    100% { box-shadow: 0 0 0 rgba(255,107,157,0.6); }
}
</style>

<!-- ===== ⚙️ SCRIPT ===== -->
<script>
function openDonationModal() {
    document.getElementById('donationModal').style.display = 'flex';
}

function closeDonationModal() {
    document.getElementById('donationModal').style.display = 'none';
}

function sendDonation() {
    const user = document.getElementById('donationUser').value;
    const amount = document.getElementById('donationAmount').value;
    const token = document.getElementById('donationToken').value;

    if (!user || !amount) {
        alert("Please fill all fields");
        return;
    }

    const to = "we-are-ai";
    const memo = "Donation ❤️";

    if (token === "HIVE") {
        window.hive_keychain.requestTransfer(
            user,
            to,
            amount,
            memo,
            "HIVE",
            function(response) {
                alert("✅ Donation sent!");
                closeDonationModal();
            }
        );
    } else {
        window.hive_keychain.requestCustomJson(
            user,
            "ssc-mainnet-hive",
            "Active",
            JSON.stringify({
                contractName: "tokens",
                contractAction: "transfer",
                contractPayload: {
                    symbol: token,
                    to: to,
                    quantity: amount,
                    memo: memo
                }
            }),
            "Hive-Engine transfer",
            function(response) {
                alert("✅ Donation sent!");
                closeDonationModal();
            }
        );
    }
}
</script>

Even though the bot isn't online, I still enjoy improving it with little things from time to time, lol.

Okay, right after this post, we'll send the GLYPHs to the people who voted.

Have a good day, everyone!