<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>Rigger Calculator</title>

        <meta name="description" content="A fun and responsive rigger calculator to estimate total costs based on tonnage, risk level, distance, and labor hours.">

        <meta name="keywords" content="rigger calculator, cost estimator, construction tool, tonnage, risk assessment, transport costs">



        <!-- Libraries -->

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

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

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">



        <script type="text/javascript">

            try {



                document.addEventListener("DOMContentLoaded", function() {

                    const laborRate = 280; // per hour

                    const transportRate = 3; // per km

                    let totalCost = null;



                    const calculateTotal = () => {

                        const tonnage = parseFloat(document.getElementById("tonnage").value);

                        const risk = document.getElementById("risk").value;

                        const distance = parseFloat(document.getElementById("distance").value) || 0;

                        const hours = parseFloat(document.getElementById("hours").value) || 0;



                        if (tonnage <= 0) {

                            totalCost = "Enter a valid tonnage";

                            updateTotal();

                            return;

                        }



                        let tonnageCost = 0;

                        if (risk === "low") {

                            tonnageCost = tonnage * 2000;

                        } else if (risk === "medium") {

                            tonnageCost = tonnage * 3000 * 1.5;

                        } else if (risk === "high") {

                            tonnageCost = tonnage * 5000 * 3.5;

                        }



                        const transportCost = distance * transportRate;

                        const laborCost = hours * laborRate;



                        totalCost = tonnageCost + transportCost + laborCost;

                        updateTotal();

                    }



                    const updateTotal = () => {

                        document.getElementById("total").innerText = totalCost !== null ? totalCost.toLocaleString("en-US", { style: 'currency', currency: 'USD' }) : "";

                    }



                    document.getElementById("calculate").addEventListener("click", calculateTotal);

                });



            } catch (error) {

                throw error;

            }

        </script>



        <style>

            body {

                background: linear-gradient(135deg, #74ebd5, #9face6);

                color: #333;

            }

            .container {

                margin-top: 50px;

            }

            h1 {

                color: #1a1a2e;

            }

            #calculate {

                background-color: #4CAF50;

                color: white;

                transition: background-color 0.3s;

            }

            #calculate:hover {

                background-color: #45a049;

            }

            .total-cost {

                font-size: 1.5rem;

                font-weight: bold;

                color: #e63946;

            }

        </style>

    </head>

    <body>

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

            <h1>Rigger Cost Calculator</h1>

            <div class="mb-3">

                <label for="tonnage" class="form-label">Tonnage:</label>

                <input type="number" id="tonnage" class="form-control" placeholder="Enter tonnage"/>

            </div>

            <div class="mb-3">

                <label for="risk" class="form-label">Risk Level:</label>

                <select id="risk" class="form-select">

                    <option value="low">Low</option>

                    <option value="medium">Medium</option>

                    <option value="high">High</option>

                </select>

            </div>

            <div class="mb-3">

                <label for="distance" class="form-label">Distance (km):</label>

                <input type="number" id="distance" class="form-control" placeholder="Enter distance"/>

            </div>

            <div class="mb-3">

                <label for="hours" class="form-label">Labor Hours:</label>

                <input type="number" id="hours" class="form-control" placeholder="Enter hours"/>

            </div>

            <button id="calculate" class="btn">Calculate Total Cost</button>

            <div class="mt-4 total-cost" id="total"></div>

        </div>

    </body>

</html>