concrete.html

<!DOCTYPE html>
<html lang="en" class="js">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Concrete Pour Estimator | GC Tools</title>
    
    <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" type="text/css">
    <link rel="stylesheet" href="/style.css" type="text/css">

    <script data-goatcounter="https://mds08011.goatcounter.com/count" async src="https://gc.zgo.at/count.v5.js" crossorigin="anonymous" integrity="sha384-atnOLvQb9t+jTSipvd75X2yginT4PjVbqDdlJAmxMm+wYElFmeR6EmLP5bYeoRVQ"></script>
    <script type="module">
        document.documentElement.classList.remove('no-js');
        document.documentElement.classList.add('js');
    </script>

    <style>
        /* Minimal Vanilla CSS for Mobile & Native Dark Mode */
        .concrete-estimator {
            --estimator-bg: #fcfcfc;
            --estimator-text: #222;
            --estimator-input-bg: #fff;
            --estimator-border: #ccc;
            --estimator-accent: #d97706; /* GC Orange */
            
            font-family: system-ui, sans-serif;
            background-color: var(--estimator-bg);
            color: var(--estimator-text);
            max-width: 65ch;
            margin: 0 auto;
            padding: 1.5rem;
            line-height: 1.6;
            border-radius: 8px;
        }

        @media (prefers-color-scheme: dark) {
            .concrete-estimator {
                --estimator-bg: #1a1a1a;
                --estimator-text: #e0e0e0;
                --estimator-input-bg: #2a2a2a;
                --estimator-border: #444;
                --estimator-accent: #f59e0b;
            }
        }

        .concrete-estimator label {
            display: block;
            margin-top: 1.2rem;
            font-weight: bold;
        }

        .concrete-estimator input {
            width: 100%;
            padding: 12px; /* Minimum 12px padding for thumb-tapping */
            margin-top: 0.5rem;
            font-size: 1.1rem;
            background-color: var(--estimator-input-bg);
            color: var(--estimator-text);
            border: 1px solid var(--estimator-border);
            border-radius: 4px;
            box-sizing: border-box;
        }

        .concrete-estimator .results {
            margin-top: 2rem;
            padding: 1.5rem;
            background-color: var(--estimator-input-bg);
            border: 1px solid var(--estimator-accent);
            border-radius: 4px;
        }

        .concrete-estimator .result-item {
            font-size: 1.25rem;
            margin-bottom: 0.5rem;
        }
        
        .concrete-estimator .result-value {
            font-weight: bold;
            color: var(--estimator-accent);
        }

        .concrete-estimator .note {
            font-size: 0.9rem;
            color: #666;
            margin-top: 0.5rem;
        }
    </style>
</head>
<body>
    <header>
            <nav>
        <ul style="display: flex; list-style: none; padding: 0; gap: 1rem; margin: 0;">
            <li><a href="/">Home</a></li>
            <li><a href="/blog/">Blog</a></li>
            <li><a href="/tools/">Tools</a></li>
            <li><a href="/contact/">Contact</a></li>
            <li><a href="https://github.com/mds08011/mds08011.github.io">GitHub</a></li>
        </ul>
        <hr>
    </nav>
    </header>

    <main>
        <article class="concrete-estimator">
            <header>
                <h1 style="border-bottom: 2px solid var(--estimator-accent); padding-bottom: 0.5rem; margin-top: 0;">Concrete Pour Estimator</h1>
                <p>Offline field tool for calculating order volumes (Cubic Yards).</p>
            </header>

            <form id="concrete-form">
                <label for="length">Length (Feet):</label>
                <input type="number" id="length" value="10" step="0.1" inputmode="decimal">

                <label for="width">Width (Feet):</label>
                <input type="number" id="width" value="10" step="0.1" inputmode="decimal">

                <label for="thickness">Thickness (Inches):</label>
                <input type="number" id="thickness" value="6" step="0.5" inputmode="decimal">

                <label for="waste">Waste Factor (%):</label>
                <input type="number" id="waste" value="10" inputmode="numeric">
            </form>

            <div class="results">
                <div class="result-item">Theoretical: <span id="out-theoretical" class="result-value">0.00</span> CY</div>
                <div class="result-item">Order Volume: <span id="out-order" class="result-value">0.00</span> CY</div>
                <div class="note">* Order volume includes the specified waste factor.</div>
            </div>
        </article>
    </main>

    <script>
        // Vanilla JavaScript - Executes entirely locally
        (function() {
            const lengthInput = document.getElementById('length');
            const widthInput = document.getElementById('width');
            const thicknessInput = document.getElementById('thickness');
            const wasteInput = document.getElementById('waste');
            
            const outTheoretical = document.getElementById('out-theoretical');
            const outOrder = document.getElementById('out-order');

            function calculateConcrete() {
                const L = parseFloat(lengthInput.value) || 0;
                const W = parseFloat(widthInput.value) || 0;
                const T = parseFloat(thicknessInput.value) || 0; // In inches
                const waste = parseFloat(wasteInput.value) || 0;

                if (L > 0 && W > 0 && T > 0 && waste >= 0) {
                    // Convert thickness to feet, multiply by L and W, divide by 27 for CY
                    const theoreticalCY = (L * W * (T / 12)) / 27;
                    
                    // Add waste percentage
                    const orderCY = theoreticalCY * (1 + (waste / 100));

                    outTheoretical.textContent = theoreticalCY.toFixed(2);
                    outOrder.textContent = orderCY.toFixed(2);
                } else {
                    outTheoretical.textContent = "0.00";
                    outOrder.textContent = "0.00";
                }
            }

            // Add event listeners to calculate instantly as you type
            lengthInput.addEventListener('input', calculateConcrete);
            widthInput.addEventListener('input', calculateConcrete);
            thicknessInput.addEventListener('input', calculateConcrete);
            wasteInput.addEventListener('input', calculateConcrete);

            // Run once on load
            calculateConcrete();
        })();
    </script>

    <footer>
        <hr>
        <p><sub>Minimalist, privacy-conscious analytics are implemented for this site and <a href="https://mds08011.goatcounter.com">publicly viewable</a>.<br>
        This website's source code is open and available on <a href="https://github.com/mds08011/mds08011.github.io">GitHub</a>.</sub></p>
    </footer>
</body>
</html>