<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kalkulator Prętów</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
            color: #333;
        }
        .container {
            max-width: 600px;
            margin: auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
        label {
            font-weight: bold;
            display: block;
            margin-top: 10px;
        }
        input, select, button {
            width: 100%;
            padding: 10px;
            margin-top: 5px;
            margin-bottom: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            background-color: #b4c1cf; /* Kolor przycisku */
            color: white;
            font-size: 16px;
            cursor: pointer;
        }
        button:hover {
            background-color:#d5dde6;
        }
        .result {
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ddd;
            background-color: #f1f1f1;
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <label for="material">Wybierz materiał:</label>
        <select id="material">
            <option value="7.85">Stal (7.85 g/cm³)</option>
            <option value="2.70">Aluminium (2.70 g/cm³)</option>
            <option value="8.96">Mosiądz (8.96 g/cm³)</option>
            <option value="8.90">Miedź (8.90 g/cm³)</option>
            <option value="8.90">Nikiel (8.90 g/cm³)</option>
        </select>

        <label for="shape">Wybierz kształt pręta:</label>
        <select id="shape">
            <option value="round">Okrągły</option>
            <option value="square">Kwadratowy</option>
            <option value="hexagonal">Sześciokątny</option>
        </select>

        <div id="dimensions">
            <label for="dimension">Wymiar (mm):</label>
            <input type="number" id="dimension" placeholder="Podaj wymiar (np. średnica)">
            <label for="length">Długość (cm):</label>
            <input type="number" id="length" placeholder="Podaj długość pręta (domyślnie 100 cm)">
        </div>

        <button onclick="calculateMass()">Wynik</button>
        <div class="result" id="result-box">
            Masa: <span id="result">0.00</span> kg
        </div>
    </div>

    <script>
        function calculateMass() {
            const materialDensity = parseFloat(document.getElementById('material').value);
            const shape = document.getElementById('shape').value;
            const dimension = parseFloat(document.getElementById('dimension').value) || 0;
            const length = parseFloat(document.getElementById('length').value) || 100; // Default length 100 cm
            let mass = 0;

            if (dimension > 0) {
                if (shape === 'round') {
                    const radius = dimension / 20; // Convert mm to cm and calculate radius
                    const volume = Math.PI * Math.pow(radius, 2) * length;
                    mass = volume * materialDensity;
                } else if (shape === 'square') {
                    const side = dimension / 10; // Convert mm to cm
                    const volume = Math.pow(side, 2) * length;
                    mass = volume * materialDensity;
                } else if (shape === 'hexagonal') {
                    const side = dimension / 10; // Convert mm to cm
                    const area = (3 * Math.sqrt(3) * Math.pow(side, 2)) / 2; // Hexagon area formula
                    const volume = area * length;
                    mass = volume * materialDensity;
                }
            }

            const resultBox = document.getElementById('result-box');
            const resultElement = document.getElementById('result');

            if (mass > 0) {
                resultElement.textContent = (mass / 1000).toFixed(2); // Convert g to kg
                resultBox.style.display = 'block';
            } else {
                resultElement.textContent = "0.00";
                resultBox.style.display = 'none';
            }
        }
    </script>
</body>
</html>