<html>

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width,initial-scale=1">



        <title>Dominance Calculator</title>

        <meta name="description" content="Calculate the dominance of BTC over the broad cryptocurrency market">

        <meta name="keywords" content="dominance, BTC, cryptocurrency">



        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"

                integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

        <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">



        <style>

            body {

                background-color: #f9f9f9;

                font-family: 'Open Sans', sans-serif;

            }

            

            .container {

                max-width: 600px;

                margin: 0 auto;

                padding: 20px;

            }

            

            h1 {

                text-align: center;

                margin-bottom: 30px;

                color: #333;

                font-weight: bold;

            }

            

            .form-group {

                margin-bottom: 20px;

            }

            

            .form-group label {

                display: block;

                font-weight: bold;

                margin-bottom: 5px;

            }

            

            .form-group input {

                width: 100%;

                padding: 10px;

                font-size: 16px;

                border: 1px solid #ddd;

                border-radius: 4px;

            }

            

            .form-group select {

                width: 100%;

                padding: 10px;

                font-size: 16px;

                border: 1px solid #ddd;

                border-radius: 4px;

            }

            

            .btn-primary {

                background-color: #007bff;

                border-color: #007bff;

                color: #fff;

                font-weight: bold;

                padding: 10px 20px;

                font-size: 16px;

                border-radius: 4px;

            }

            

            .result-container {

                margin-top: 30px;

                background-color: #fff;

                padding: 20px;

                border-radius: 4px;

                border: 1px solid #ddd;

            }

            

            .result-container h2 {

                margin-top: 0;

                margin-bottom: 20px;

                color: #333;

                font-weight: bold;

            }

            

            .result-container p {

                margin-bottom: 10px;

            }

            

            .result-container .info {

                color: #777;

            }

            

            .result-container .dominance {

                font-size: 24px;

                font-weight: bold;

                color: #007bff;

            }

        </style>



        <script type="text/javascript">

            function calculateDominance() {

                var btcMarketCap = parseFloat($("#btc-market-cap").val());

                var totalMarketCap = parseFloat($("#total-market-cap").val());



                if (isNaN(btcMarketCap) || isNaN(totalMarketCap)) {

                    alert("Please enter valid numbers for market caps.");

                    return;

                }



                var dominance = (btcMarketCap / totalMarketCap) * 100;

                $("#dominance-result").text(dominance.toFixed(2) + "%");

            }

        </script>

    </head>

    <body>

        <div id="main-container" class="container">

            <h1>Cryptocurrency Dominance Calculator</h1>



            <div class="form-group">

                <label for="btc-market-cap">BTC Market Cap</label>

                <input type="number" id="btc-market-cap" placeholder="Enter BTC Market Cap">

            </div>



            <div class="form-group">

                <label for="total-market-cap">Total Market Cap</label>

                <input type="number" id="total-market-cap" placeholder="Enter Total Market Cap">

            </div>



            <button class="btn btn-primary" onclick="calculateDominance()">Calculate Dominance</button>



            <div class="result-container">

                <h2>Result</h2>

                <p>Your BTC dominance is: <span id="dominance-result" class="dominance"></span></p>

                <p class="info">BTC dominance is the percentage of BTC's market cap compared to the total market cap of all cryptocurrencies.</p>

            </div>

        </div>

    </body>

</html>