<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Crypto To BDT Converter</title>
    <style>
        /* CODED BY - DARK LMNx9 */
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            font-family: 'Poppins', sans-serif;
            color: #00ff00;
            background-color: #000;
            text-align: center;
        }

        /* CODED BY - DARK LMNx9 */
        .stars {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: -1;
            pointer-events: none;
        }

        /* CODED BY - DARK LMNx9 */
        .star {
            position: absolute;
            background-color: #00ff00;
            border-radius: 50%;
            opacity: 0;
            animation: twinkle 1.5s infinite alternate;
        }

        /* CODED BY - DARK LMNx9 */
@keyframes twinkle {
            0% {
                opacity: 0.5;
                transform: scale(1);
            }
            50% {
                opacity: 1;
                transform: scale(1.2);
            }
            100% {
                opacity: 0.5;
                transform: scale(1);
            }
        }

        /* CODED BY - DARK LMNx9 */
        .container {
            position: relative;
            max-width: 400px;
            margin: auto;
            padding: 20px 0;
            z-index: 1;
            color: #00ff00;
        }

        .header-box {
            padding: 10px;
            margin-bottom: 20px;
            background-color: rgba(0, 0, 0, 0.9);
            border: 2px solid #00ff00;
            border-radius: 10px;
        }

        .header-box h1, .header-box p {
            margin: 5px 0;
        }
        /* CODED BY - DARK LMNx9 */
        .header-box .developer {
            font-size: 16px;
            font-weight: bold;
            color: #00ff00;
            text-decoration: none;
        }

        .header-box .developer:hover {
            color: #00cc00;
        }
        /* CODED BY - DARK LMNx9 */
        .image-container {
            width: 120px;
            height: 120px;
            margin: 20px auto;
            border: 3px solid #00ff00;
            border-radius: 50%;
            overflow: hidden;
        }

        .image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        /* CODED BY - DARK LMNx9 */
        label {
            display: block;
            font-size: 13px;
            font-weight: bold;
            margin: 10px 0 5px;
            text-align: left;
            color: #00ff00;
        }
        /* CODED BY - DARK LMNx9 */
        input, button {
            width: 100%;
            padding: 10px;
            font-size: 14px;
            font-weight: bold;
            border: 2px solid #00ff00;
            border-radius: 5px;
            background-color: #000;
            color: #00ff00;
            outline: none;
            box-sizing: border-box;
        }

        input::placeholder {
            color: #00ff00;
        }
        /* CODED BY - DARK LMNx9 */
        ul {
            max-height: 150px;
            overflow-y: auto;
            margin: 0;
            padding: 0;
            list-style: none;
            background-color: #000;
            border: 2px solid #00ff00;
            border-radius: 5px;
            color: #00ff00;
        }

        li {
            padding: 10px;
            cursor: pointer;
            font-weight: bold;
        }
        /* CODED BY - DARK LMNx9 */
        li:hover {
            background-color: #00ff00;
            color: #000;
        }

        .button-container {
            display: flex;
            justify-content: space-between;
            gap: 4%;
        }
        /* CODED BY - DARK LMNx9 */
        button {
            font-size: 19px;
            font-weight: bold;
            background-color: #00ff00;
            color: #000;
            border: none;
            cursor: pointer;
        }

        button:hover {
            background-color: #00cc00;
        }
        /* CODED BY - DARK LMNx9 */
        .result {
            margin-top: 20px;
            padding: 10px;
            font-size: 18px;
            font-weight: bold;
            background-color: rgba(0, 0, 0, 0.9);
            color: #00ff00;
            border-radius: 10px;
            border: 2px solid #00ff00;
        }
        /* CODED BY - DARK LMNx9 */
        .telegram {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
            text-decoration: none;
            font-size: 15px;
            font-weight: bold;
            color: #00ff00;
        }
        /* CODED BY - DARK LMNx9 */
        .telegram img {
            width: 17px;
            height: 17px;
            margin-right: 8px;
        }

        .telegram:hover {
            color: #00cc00;
        }
    </style>
</head>
<body>
    <div class="stars" id="stars"></div>
    <div class="container">
        <div class="image-container">
            <img src="https://raw.githubusercontent.com/LMNx9-CYBER-999/About-LMNx9/refs/heads/main/images (3).png" alt="LMNx9 Logo">
        </div>
        <div class="header-box">
            <h1>Crypto To BDT Converter</h1>
            <p>
                Easily Convert Any Crypto To Bangladeshi Taka
            </p>
            <a class="developer">Developed By - DARK LMNx9</a>
          
        </div>
        <label for="crypto">- Choose Crypto :</label>
        <input type="text" id="crypto" placeholder="Example - Bitcoin/Ethereum/Toncoin" oninput="filterCryptoList()">
        <ul id="suggestions"></ul>
        <label for="amount">- Choose Amount :</label>
        <input type="number" id="amount" placeholder="Example - 1/5/10" min="0" step="any">
        <h1> </h1>
        <div class="button-container">
            
            <button onclick="location.href='file:///android_asset/LMNx3.html';"><cite>LIVE PRICE</cite></button>
            <button onclick="refreshPage()"><cite>REFRESH</script></button>
            <button onclick="convertToBDT()"><cite>CONVERT</script></button>
            
        </div>
        <div class="result" id="result"></div>
    <a class="telegram">
        <img src="https://upload.wikimedia.org/wikipedia/commons/8/82/Telegram_logo.svg" alt="Telegram Logo" style="width: 20px; height: 20px;">
        @TEAM_LMNx9
    </a>

    </div>

    <script>
    
        function checkNetwork() {
            if (navigator.onLine) {
                console.log(""); 
            } else {
            window.location.href = 'file:///android_asset/LMNx4.html';
                }
            }
        
        let mainCryptos = [];
        /* CODED BY - DARK LMNx9 */
        async function fetchCoinGeckoCryptos() {
            try {
                const response = await fetch('https://api.coingecko.com/api/v3/coins/list');
                const data = await response.json();

                mainCryptos = data.map(coin => ({
                    id: coin.id.toLowerCase(),
                    name: coin.name,
                    symbol: coin.symbol.toUpperCase(),
                }));

                console.log(`Fetched ${mainCryptos.length} cryptocurrencies from CoinGecko.`);
            } catch (error) {
                console.error("Error fetching data from CoinGecko API:", error);
            }
        }

        fetchCoinGeckoCryptos();
        /* CODED BY - DARK LMNx9 */
        function filterCryptoList() {
            const input = document.getElementById('crypto').value.toLowerCase();
            const suggestionsBox = document.getElementById('suggestions');
            suggestionsBox.innerHTML = '';

            if (!input) return;

            const filtered = mainCryptos.filter(coin =>
                coin.name.toLowerCase().includes(input) || coin.symbol.toLowerCase().includes(input)
            );
        /* CODED BY - DARK LMNx9 */
            filtered.slice(0, 10).forEach(coin => {
                const li = document.createElement('li');
                li.textContent = `${coin.name} (${coin.symbol})`;
                li.onclick = () => {
                    document.getElementById('crypto').value = coin.id;
                    suggestionsBox.innerHTML = '';
                };
                suggestionsBox.appendChild(li);
            });
        }
        /* CODED BY - DARK LMNx9 */
        async function convertToBDT() {
            checkNetwork();
            const cryptoName = document.getElementById('crypto').value.toLowerCase();
            const amount = parseFloat(document.getElementById('amount').value);

            if (!cryptoName || !amount || amount <= 0) {
                document.getElementById('result').innerText = "Please Enter A Valid Crypto And Amount";
                return;
            }
        /* CODED BY - DARK LMNx9 */
            try {
                const response = await fetch(`https://api.coingecko.com/api/v3/simple/price?ids=${cryptoName}&vs_currencies=bdt`);
                const data = await response.json();

                if (!data[cryptoName]) {
                    document.getElementById('result').innerText = `Cryptocurrency "${cryptoName}" not found.`;
                    return;
                }
        /* CODED BY - DARK LMNx9 */
                const rate = data[cryptoName].bdt;
                const convertedAmount = (amount * rate).toFixed(2);
                document.getElementById('result').innerText = `${amount} ${cryptoName.toUpperCase()}  =  ${convertedAmount} BDT`;
            } catch (error) {
                document.getElementById('result').innerText = "Error Fetching Conversion Rate";
            }
        }

        function refreshPage() {
            document.getElementById('crypto').value = '';
            document.getElementById('amount').value = '';
            document.getElementById('result').innerText = '';
        }
        /* CODED BY - DARK LMNx9 */
        function generateStars() {
            const starsContainer = document.getElementById('stars');
            const starCount = 200;
        /* CODED BY - DARK LMNx9 */
            for (let i = 0; i < starCount; i++) {
                const star = document.createElement('div');
                star.classList.add('star');

                const size = Math.random() * 2 + 1;
                const left = Math.random() * 100 + 'vw';
                const top = Math.random() * 100 + 'vh';
                const delay = Math.random() * 1 + 's';

                star.style.width = size + 'px';
                star.style.height = size + 'px';
                star.style.left = left;
                star.style.top = top;
                star.style.animationDuration = (Math.random() * 2 + 1) + 's';
                star.style.animationDelay = delay;
                starsContainer.appendChild(star);
            }
        }
        /* CODED BY - DARK LMNx9 */
        checkNetwork();
        window.onload = generateStars;
    </script>
</body>
</html>