Untitled Page

<!DOCTYPE html>
<html lang="bg">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GSM CALC PRO v15 - Ellipse Update</title>
    <style>
        :root { --primary: #003d62; --accent: #217346; --bg: #f4f7f9; }
        body { font-family: 'Segoe UI', sans-serif; background: var(--bg); padding: 15px; margin: 0; }
        .app-card { background: white; padding: 20px; border-radius: 15px; box-shadow: 0 8px 25px rgba(0,0,0,0.1); max-width: 500px; margin: auto; border-top: 6px solid var(--primary); }
        h2 { color: var(--primary); text-align: center; margin: 10px 0 20px 0; font-size: 20px; }
        
        .input-group { margin-bottom: 12px; }
        label { display: block; margin-bottom: 5px; font-weight: bold; color: #444; font-size: 14px; }
        input, select { width: 100%; padding: 12px; border: 2px solid #e0e0e0; border-radius: 10px; box-sizing: border-box; font-size: 16px; outline: none; }
        input:focus { border-color: var(--primary); }

        .btn-group { display: flex; gap: 10px; margin-top: 20px; }
        button { flex: 1; padding: 15px; border: none; border-radius: 10px; font-size: 14px; font-weight: bold; cursor: pointer; color: white; transition: 0.2s; }
        .btn-gen { background: var(--primary); }
        .btn-excel { background: var(--accent); display: none; }
        
        #tableContainer { margin-top: 20px; overflow-x: auto; max-height: 350px; border: 1px solid #ddd; border-radius: 10px; }
        table { width: 100%; border-collapse: collapse; background: white; }
        th { background: var(--primary); color: white; padding: 10px; position: sticky; top: 0; font-size: 13px; }
        td { border: 1px solid #eee; padding: 8px; text-align: center; font-size: 14px; }
        tr:nth-child(even) { background: #f8fbff; }
    </style>
</head>
<body onload="updateUI()">

<div class="app-card">
    <h2>Калкулатор за Резервоари</h2>
    
    <div class="input-group">
        <label>Тип резервоар:</label>
        <select id="tankType" onchange="updateUI()">
            <option value="cyl_hor">Хор. цилиндър (Равен)</option>
            <option value="ellip_hor">Елипсовиден хоризонтален</option>
            <option value="cyl_hor_convex">Хор. цилиндър (Изпъкнал)</option>
            <option value="cyl_hor_cone">Хор. цилиндър (Конусен)</option>
            <option value="cyl_ver_flat">Верт. цилиндър (Равен)</option>
            <option value="cyl_ver_cone">Верт. цилиндър (Конусен)</option>
            <option value="cyl_ver_convex">Верт. цилиндър (Изпъкнал)</option>
            <option value="rect">Правоъгълен (Куб)</option>
        </select>
    </div>

    <div id="fieldsContainer">
        <div class="input-group">
            <label id="lbl1">Диаметър (см):</label>
            <input type="number" id="val1">
        </div>

        <div class="input-group">
            <label id="lbl2">Дължина/Височина (см):</label>
            <input type="number" id="val2">
        </div>

        <div class="input-group" id="widthBox" style="display:none;">
            <label id="lblW">Ширина (см):</label>
            <input type="number" id="valW">
        </div>

        <div class="input-group" id="extraBox" style="display:none;">
            <label id="lblExtra">Изпъкналост/Конус (см):</label>
            <input type="number" id="valE" value="0">
        </div>
    </div>

    <div class="input-group">
        <label>Наклон (см разлика или градуси):</label>
        <div style="display: flex; gap: 5px;">
            <input type="number" id="slopeVal" value="0" style="flex: 2;">
            <select id="slopeUnit" style="flex: 1.5;">
                <option value="cm">см</option>
                <option value="deg">градуса</option>
            </select>
        </div>
    </div>

    <div class="btn-group">
        <button class="btn-gen" onclick="calculate()">ГЕНЕРИРАЙ</button>
        <button id="excelBtn" class="btn-excel" onclick="exportExcel()">EXCEL</button>
    </div>

    <div id="tableContainer"></div>
</div>

<script>
function updateUI() {
    const type = document.getElementById('tankType').value;
    const wBox = document.getElementById('widthBox');
    const eBox = document.getElementById('extraBox');
    const lbl1 = document.getElementById('lbl1');
    const lbl2 = document.getElementById('lbl2');
    const lblW = document.getElementById('lblW');
    const lblE = document.getElementById('lblExtra');

    wBox.style.display = "none";
    eBox.style.display = "none";

    if (type === 'rect') {
        lbl1.innerText = "Дължина (см):";
        lbl2.innerText = "Височина (см):";
        lblW.innerText = "Ширина (см):";
        wBox.style.display = "block";
    } else if (type === 'ellip_hor') {
        lbl1.innerText = "Ширина на елипсата (см):";
        lbl2.innerText = "Дължина на резервоара (см):";
        lblW.innerText = "Височина на елипсата (см):";
        wBox.style.display = "block";
    } else if (type.startsWith('cyl_hor')) {
        lbl1.innerText = "Диаметър (см):";
        lbl2.innerText = "Дължина на цилиндъра (см):";
        if (type !== 'cyl_hor') {
            eBox.style.display = "block";
            lblE.innerText = type.includes('convex') ? "Изпъкналост на дъното (см):" : "Дължина на конуса (см):";
        }
    } else { 
        lbl1.innerText = "Диаметър (см):";
        lbl2.innerText = "Височина на цилиндъра (см):";
        if (type !== 'cyl_ver_flat') {
            eBox.style.display = "block";
            lblE.innerText = type.includes('convex') ? "Височина на капака (см):" : "Височина на конуса (см):";
        }
    }
}

function calculate() {
    const type = document.getElementById('tankType').value;
    const val1 = parseFloat(document.getElementById('val1').value); // Ширина или Диаметър
    const L = parseFloat(document.getElementById('val2').value);    // Дължина или Височина
    const E = parseFloat(document.getElementById('valE').value) || 0;
    const valW = parseFloat(document.getElementById('valW').value) || 0; // Височина елипса или Ширина правоъгълник
    const sVal = parseFloat(document.getElementById('slopeVal').value) || 0;
    const isDeg = document.getElementById('slopeUnit').value === 'deg';
    const S = isDeg ? L * Math.sin(sVal * Math.PI / 180) : sVal;

    if(!val1 || !L) { alert("Моля, попълнете основните данни!"); return; }

    let html = '<table><thead><tr><th>Ниво (см)</th><th>Литри</th></tr></thead><tbody>';
    
    // Определяне на максимална височина за цикъла
    let maxH;
    if (type === 'ellip_hor') maxH = valW;
    else if (type.startsWith('cyl_hor')) maxH = val1;
    else if (type === 'rect') maxH = L;
    else maxH = L + E;

    for (let h = 1; h <= maxH; h++) {
        let vol = 0;

        if (type === 'ellip_hor') {
            // Елипса: val1=Ширина(2a), valW=Височина(2b), L=Дължина
            vol = ellipseCalc(val1/2, valW/2, L, h);
        } else if (type === 'cyl_hor') {
            vol = horCalc(val1/2, L, h, S);
        } else if (type === 'cyl_hor_convex') {
            vol = horCalc(val1/2, L, h, S) + (2 * (Math.PI * E * h * h * (3*(val1/2) - h)) / (3 * (val1/2)));
        } else if (type === 'cyl_hor_cone') {
            const R = val1/2;
            vol = horCalc(R, L, h, S) + (2 * (0.5 * R * R * (2*Math.acos((R-h)/R) - Math.sin(2*Math.acos((R-h)/R))) * E / 3));
        } else if (type === 'cyl_ver_flat') {
            vol = Math.PI * Math.pow(val1/2, 2) * h;
        } else if (type === 'cyl_ver_cone') {
            const R = val1/2;
            vol = (h <= E) ? (Math.PI * Math.pow((h/E)*R, 2) * h)/3 : (Math.PI*R*R*E/3) + (Math.PI*R*R*(h-E));
        } else if (type === 'cyl_ver_convex') {
            const R = val1/2;
            vol = (h <= E) ? (Math.PI * h * h * (3*R - h))/3 : ((Math.PI * E * E * (3*R - E))/3) + (Math.PI*R*R*(h-E));
        } else if (type === 'rect') {
            vol = val1 * valW * h;
        }

        html += `<tr><td>${h}</td><td>${(vol/1000).toFixed(2)}</td></tr>`;
    }
    document.getElementById('tableContainer').innerHTML = html + '</tbody></table>';
    document.getElementById('excelBtn').style.display = "block";
}

// Помощна функция за елипсовиден сегмент
function ellipseCalc(a, b, L, h) {
    // a = хоризонтална полуос, b = вертикална полуос
    // Формула: (Площ на сегмент на елипса) * Дължина
    if (h >= 2*b) return Math.PI * a * b * L;
    const cosVal = (b - h) / b;
    const area = a * b * (Math.acos(cosVal) - (cosVal * Math.sqrt(1 - Math.pow(cosVal, 2))));
    return area * L;
}

function horCalc(R, L, h, S) {
    if (h >= 2*R) h = 2*R;
    const s1 = (R*R * Math.acos((R-h)/R) - (R-h) * Math.sqrt(2*R*h - h*h)) * L;
    if (S === 0) return s1;
    const h2 = Math.max(0, h - S);
    const s2 = (R*R * Math.acos((R-h2)/R) - (R-h2) * Math.sqrt(2*R*h2 - h2*h2)) * L;
    return (s1 + s2) / 2;
}

function exportExcel() {
    window.open('data:application/vnd.ms-excel,' + encodeURIComponent(document.getElementById('tableContainer').innerHTML));
}
</script>
</body>
</html>