Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zodiac Rarity Chance Calculator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            transition: background-color 0.5s, color 0.5s;
        }
        .dark-mode {
            background-color: #2c2c2c;
            color: white;
        }
        h1 {
            text-align: center;
        }
        label {
            display: block;
            margin: 10px 0 5px;
        }
        input {
            width: 100%;
            padding: 8px;
            margin-bottom: 20px;
            box-sizing: border-box;
        }
        button {
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
        .result {
            margin-top: 20px;
        }
        .toggle-button {
            margin: 10px 0;
            padding: 10px;
            background-color: #444;
            color: white;
            border: none;
            cursor: pointer;
        }
        .rarity-chance {
            border: 1px solid #339933;
            border-collapse: collapse;
            width: 100%;
            color: black;
            font-size: 65%;
            th {
                border: 1px solid #339933;
                border-collapse: collapse;
                height: 20px;
            }
            td {
                border: 1px solid #339933;
                border-collapse: collapse;
                height: 30px;
                background-color: #effbfd;
                text-align: center;
                font-size: 125%;
            }
            .header-garbage {
                background-color: #635f5f;
            }
            .header-common {
                background-color: #b5b5b5;
            }
            .header-uncommon {
                background-color: #789c44;
            }
            .header-rare {
                background-color: #4f87dc;
            }
            .header-epic {
                background-color: #c855c8;
            }
            .header-legendary {
                background-color: #e4a44e;
            }
            .header-mythic {
                background-color: #d24949;
            }
            .header-godly {
                background-color: #f3f443;
            }
            .header-divine {
                background-color: #90fff8;
            }
            .header-immortal {
                background-color: #79ffc6;
            }
        }
    </style>
</head>
<body>
    <h1>Zodiac Rarity Chance Calculator</h1>

    <button class="toggle-button" onclick="toggleDarkMode()">Toggle Dark Mode</button>

    <label for="luck">Luck (e.g., 5):</label>
    <input type="text" id="luck" placeholder="Enter luck">

    <button onclick="calculate()">Calculate</button>

    <div class="result">
        <div class="info" id="info"></div>
        <div id="tables" style="display: none;">
            <table class="rarity-chance">
                <tr>
                    <th class="header-garbage">Garbage</th>
                    <th class="header-common">Common</th>
                    <th class="header-uncommon">Uncommon</th>
                    <th class="header-rare">Rare</th>
                    <th class="header-epic">Epic</th>
                    <th class="header-legendary">Legendary</th>
                    <th class="header-mythic">Mythic</th>
                    <th class="header-godly">Godly</th>
                    <th class="header-divine">Divine</th>
                    <th class="header-immortal">Immortal</th>
                </tr>
                <tr>
                    <td id="chance-garbage"></td>
                    <td id="chance-common"></td>
                    <td id="chance-uncommon"></td>
                    <td id="chance-rare"></td>
                    <td id="chance-epic"></td>
                    <td id="chance-legendary"></td>
                    <td id="chance-mythic"></td>
                    <td id="chance-godly"></td>
                    <td id="chance-divine"></td>
                    <td id="chance-immortal"></td>
                </tr>
            </table>
            <table class="rarity-chance" id="extra-rarity" style="margin-top: 10px;"></table>
        </div>
    </div>

    <script>
        function toggleDarkMode() {
            document.body.classList.toggle('dark-mode');
        }

        function formatChance(chance) {
            return Math.round(chance * 10000) / 100 + '%';
        }

        function calculate() {
            var luck = parseFloat(document.getElementById('luck').value);
            if (luck < 0 || isNaN(luck)) {
                document.getElementById('info').innerText = "Please enter valid numbers. Luck cannot be negative or not a number.";
                document.getElementById('tables').style.display = "none";
                return;
            }

            if (luck > 18) luck = Math.pow(luck / 18, 0.3) * 18;

            const garbageWeight = calculateGarbage(luck);
            const commonWeight = calculateCommon(luck);
            const uncommonWeight = calculateUncommon(luck);
            const rareWeight = calculateRare(luck);
            const epicWeight = calculateEpic(luck);
            const legendaryWeight = calculateLegendary(luck);
            const mythicWeight = calculateMythic(luck);
            const godlyWeight = calculateGodly(luck);
            const divineWeight = calculateDivine(luck);
            const immortalWeight = calculateImmortal(luck);

            const garbageChance = Math.min(Math.max(garbageWeight / (garbageWeight + commonWeight + uncommonWeight + rareWeight + epicWeight + legendaryWeight + mythicWeight + godlyWeight + divineWeight + immortalWeight), 0), 1);
            const commonChance = Math.min(Math.max(commonWeight / (garbageWeight + commonWeight + uncommonWeight + rareWeight + epicWeight + legendaryWeight + mythicWeight + godlyWeight + divineWeight + immortalWeight), 0), 1);
            const uncommonChance = Math.min(Math.max(uncommonWeight / (garbageWeight + commonWeight + uncommonWeight + rareWeight + epicWeight + legendaryWeight + mythicWeight + godlyWeight + divineWeight + immortalWeight), 0), 1);
            const rareChance = Math.min(Math.max(rareWeight / (garbageWeight + commonWeight + uncommonWeight + rareWeight + epicWeight + legendaryWeight + mythicWeight + godlyWeight + divineWeight + immortalWeight), 0), 1);
            const epicChance = Math.min(Math.max(epicWeight / (garbageWeight + commonWeight + uncommonWeight + rareWeight + epicWeight + legendaryWeight + mythicWeight + godlyWeight + divineWeight + immortalWeight), 0), 1);
            const legendaryChance = Math.min(Math.max(legendaryWeight / (garbageWeight + commonWeight + uncommonWeight + rareWeight + epicWeight + legendaryWeight + mythicWeight + godlyWeight + divineWeight + immortalWeight), 0), 1);
            const mythicChance = Math.min(Math.max(mythicWeight / (garbageWeight + commonWeight + uncommonWeight + rareWeight + epicWeight + legendaryWeight + mythicWeight + godlyWeight + divineWeight + immortalWeight), 0), 1);
            const godlyChance = Math.min(Math.max(godlyWeight / (garbageWeight + commonWeight + uncommonWeight + rareWeight + epicWeight + legendaryWeight + mythicWeight + godlyWeight + divineWeight + immortalWeight), 0), 1);
            const divineChance = Math.min(Math.max(divineWeight / (garbageWeight + commonWeight + uncommonWeight + rareWeight + epicWeight + legendaryWeight + mythicWeight + godlyWeight + divineWeight + immortalWeight), 0), 1);
            const immortalChance = Math.min(Math.max(immortalWeight / (garbageWeight + commonWeight + uncommonWeight + rareWeight + epicWeight + legendaryWeight + mythicWeight + godlyWeight + divineWeight + immortalWeight), 0), 1);

            document.getElementById('info').innerText = "";
            document.getElementById('tables').style.display = "block";
            document.getElementById('chance-garbage').innerText = formatChance(garbageChance);
            document.getElementById('chance-common').innerText = formatChance(commonChance);
            document.getElementById('chance-uncommon').innerText = formatChance(uncommonChance);
            document.getElementById('chance-rare').innerText = formatChance(rareChance);
            document.getElementById('chance-epic').innerText = formatChance(epicChance);
            document.getElementById('chance-legendary').innerText = formatChance(legendaryChance);
            document.getElementById('chance-mythic').innerText = formatChance(mythicChance);
            document.getElementById('chance-godly').innerText = formatChance(godlyChance);
            document.getElementById('chance-divine').innerText = formatChance(divineChance);
            document.getElementById('chance-immortal').innerText = formatChance(immortalChance);
            populateExtras(document.getElementById('extra-rarity'), luck, immortalChance);
        }

        function calculateGarbage(luck) {
            var chance = 5 * Math.pow(0.8, luck - 1);
            if (luck > 2) chance *= Math.pow(0.4, luck - 2);
            if (luck > 3) chance = 0;
            return chance;
        }

        function calculateCommon(luck) {
            var chance = 15;
            if (luck > 2) chance *= Math.pow(0.45, luck - 2);
            if (luck > 5) chance = 0;
            return chance;
        }

        function calculateUncommon(luck) {
            var chance = 20 * Math.pow(1.5, luck - 1) - 12;
            if (luck > 3) chance *= Math.pow(0.5, luck - 3);
            if (luck > 8) chance = 0;
            return chance;
        }

        function calculateRare(luck) {
            var chance = 30 * Math.pow(1.45, luck - 1) - 28;
            if (luck > 5) chance *= Math.pow(0.55, luck - 5);
            if (luck > 12) chance = 0;
            return chance;
        }

        function calculateEpic(luck) {
            var chance = Math.max(0, 45 * Math.pow(1.4, luck - 2) - 50);
            if (luck > 8) chance *= Math.pow(0.6, luck - 8);
            if (luck > 20) chance = 0;
            return chance;
        }

        function calculateLegendary(luck) {
            var chance = Math.max(0, 80 * Math.pow(1.36, luck - 3) - 100);
            if (luck > 12) chance *= Math.pow(0.64, luck - 12);
            if (luck > 30) chance = 0;
            return chance;
        }

        function calculateMythic(luck) {
            var chance = Math.max(0, 120 * Math.pow(1.3, luck - 5) - 140);
            if (luck > 20) chance *= Math.pow(0.67, luck - 20);
            if (luck > 50) chance = 0;
            return chance;
        }

        function calculateGodly(luck) {
            var chance = Math.max(0, 150 * Math.pow(1.25, luck - 8) - 200);
            if (luck > 30) chance *= Math.pow(0.7, luck - 30);
            if (luck > 50) chance = 0;
            return chance;
        }

        function calculateDivine(luck) {
            var chance = Math.max(0, 200 * Math.pow(1.2, luck - 12) - 300);
            if (luck > 40) chance *= Math.pow(0.92, luck - 40);
            if (luck > 50) chance *= Math.pow(0.75, luck - 50);
            if (luck > 70) chance = 0;
            return chance;
        }

        function calculateImmortal(luck) {
            return Math.max(0, 300 * Math.pow(1.1, luck - 20) - 500);
        }

        function populateExtras(table, luck, immortalChance) {
            if (luck < 50) {
                table.style.display = "none";
                return;
            }

            const maxRarity = (luck - 45) / 4.95;
            const randomChances = new Array(parseInt(Math.ceil(maxRarity)));
            for (let i = 0; i < randomChances.length; i++) {
                randomChances[i] = Math.min(Math.pow((i + 1) / maxRarity, 2), 1) - Math.pow(i / maxRarity, 2);
            }

            var html = "";
            for (let j = 0; j < randomChances.length; j += 9) {
                let cells = 9;
                if (randomChances.length - j - 9 < 0) cells = randomChances.length % 9;

                html += "<tr>";
                for (let i = 0; i < cells; i++) {
                    if (j == 0 && i == 0)
                        html += "<th class=\"header-immortal\">Immortal</th>"
                    else
                        html += "<th class=\"header-immortal\">Immortal+" + (i + j) + "</th>"
                }
                html += "</tr><tr>";
                for (let i = 0; i < cells; i++) {
                    html += "<td>" + formatChance(immortalChance * randomChances[i + j]) + "</td>"
                }
                html += "</tr>";
            }

            table.innerHTML = html;
            table.style.display = "table";
        }
    </script>
</body>
</html>