Перегляд вихідного коду сторінки Структурно-логічна схема ОПП ГТБВІВТ (Навчальний план 2026)

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <title>Конструктор ОПП з автоматичним підрахунком кредитів</title>
    <style>
        body {
            font-family: 'Segoe UI', Arial, sans-serif;
            background-color: #f1f5f9;
            padding: 15px;
            margin: 0;
            user-select: none;
        }
        h2 { text-align: center; color: #1e293b; margin: 0 0 5px 0; font-size: 18px; }
        .subtitle { text-align: center; color: #64748b; margin-bottom: 15px; font-size: 12px; }
        
        .matrix-wrapper {
            position: relative;
            width: 100%;
            box-sizing: border-box;
        }
        .matrix {
            display: flex; 
            gap: 8px; 
            position: relative; 
            z-index: 2;
            width: 100%;
        }
        .column {
            flex: 1; 
            min-width: 135px; 
            background: #ffffff;
            border: 1px dashed #cbd5e1; 
            border-radius: 6px; 
            padding: 6px;
            display: flex; 
            flex-direction: column; 
            gap: 8px; 
            min-height: 840px;
            box-sizing: border-box;
            position: relative;
            padding-bottom: 45px; /* Місце для лічильника внизу */
        }
        .column.drag-over { background: #f8fafc; border-color: #3b82f6; }
        .header {
            font-weight: bold; text-align: center; padding: 6px;
            background: #334155; color: white; border-radius: 4px; font-size: 12px;
            pointer-events: none;
        }
        
        /* СТИЛЬ БЛОКУ ВИБІРКОВИХ КОМПОНЕНТІВ */
        .elective-section {
            margin-top: auto; /* Притискає блок донизу колонки */
            background: #f8fafc;
            border: 1.5px dashed #cbd5e1;
            border-radius: 6px;
            padding: 6px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            min-height: 48px;
            box-sizing: border-box;
        }
        .elective-header {
            font-size: 9px;
            font-weight: 700;
            color: #64748b;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 0.4px;
            padding-bottom: 3px;
            border-bottom: 1px dashed #cbd5e1;
            pointer-events: none;
        }
        .elective-empty {
            font-size: 9px;
            color: #94a3b8;
            text-align: center;
            font-style: italic;
            padding: 4px 0;
            pointer-events: none;
        }

        /* СТИЛЬ ЛІЧИЛЬНИКА КРЕДИТІВ ВНИЗУ */
        .semester-summary {
            position: absolute; bottom: 6px; left: 6px; right: 6px;
            background: #e2e8f0; color: #1e293b; text-align: center;
            font-weight: bold; font-size: 11px; padding: 6px; border-radius: 4px;
            border: 1px solid #cbd5e1; pointer-events: none;
        }

        .block {
            position: relative; border-radius: 5px; padding: 16px 6px 16px 6px; 
            min-height: 58px; display: flex; align-items: center; justify-content: center;
            text-align: center; font-size: 10px; cursor: grab;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04); border: 1.5px solid transparent;
            box-sizing: border-box; line-height: 1.2;
        }
        .block:active { cursor: grabbing; }
        .block.dragging { opacity: 0.3; background-color: #cbd5e1 !important; border-color: #94a3b8 !important; }
        
        .code {
            position: absolute; left: 4px; top: 2px;
            font-size: 8.5px; font-weight: bold; color: rgba(0,0,0,0.4);
        }
        .credits {
            position: absolute; right: 4px; bottom: 2px;
            font-size: 8.5px; font-weight: bold; padding: 1px 2px;
            background: rgba(0,0,0,0.05); border-radius: 2px; color: #475569;
        }
        
        .blue { background-color: #DCE6F1; border-color: #B4C6E7; color: #1F4E79; }
        .green { background-color: #E2EFDA; border-color: #C6E0B4; color: #375623; }
        .yellow { background-color: #FFF2CC; border-color: #FFE699; color: #7F6000; font-weight: bold; }
        .gray { background-color: #F2F2F2; border-color: #D9D9D9; color: #595959; }
        .pink { background-color: #FCE4D6; border-color: #F8CBAD; color: #C65911; font-weight: bold; }
        .orange { background-color: #e5a872; border-color: #d8965f; color: #ffffff; font-weight: bold; }
        .purple { background-color: #a89bc9; border-color: #9687ba; color: #ffffff; font-weight: bold; }

        #arrows-svg {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            z-index: 1; pointer-events: none;
        }
    </style>
</head>
<body>

    <h2>Структурно-логічна схема ОПП ГТБВІВТ (Навчальний план 2026)</h2>
    <div class="subtitle">Всі 8 семестрів на екрані. Кредити внизу рахуються автоматично при перетягуванні!</div>

    <div class="matrix-wrapper">
        <svg id="arrows-svg">
            <defs>
                <marker id="arrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
                    <path d="M 0 1.5 L 7 5 L 0 8.5 z" fill="#64748b"/>
                </marker>
            </defs>
        </svg>

        <div class="matrix">
            <!-- СЕМЕСТР 1 -->
            <div class="column" id="sem-1">
                <div class="header">Сем. 1</div>
                <div class="block blue" draggable="true" id="b2" data-credits="3"><span class="code">ОК2</span>Іноземна мова<span class="credits">3 кр.</span></div>
                <div class="block blue" draggable="true" id="b1" data-credits="4"><span class="code">ОК3</span>Українська державність і культура<span class="credits">4 кр.</span></div>
                <div class="block blue" draggable="true" id="b3" data-credits="3"><span class="code">ОК4</span>Основи цифрових технологій<span class="credits">3 кр.</span></div>
                <div class="block blue" draggable="true" id="chem" data-credits="3"><span class="code">ОК6</span>Хімія<span class="credits">3 кр.</span></div>
                <div class="block blue" draggable="true" id="math1" data-credits="5"><span class="code">ОК7</span>Вища математика<span class="credits">5 кр.</span></div>
                <div class="block blue" draggable="true" id="b6" data-credits="3"><span class="code">ОК11</span>Метрологія і стандартизація<span class="credits">3 кр.</span></div>
                <div class="block blue" draggable="true" id="b7" data-credits="3"><span class="code">ОК12</span>Інженерна графіка<span class="credits">3 кр.</span></div>
                <div class="block green" draggable="true" id="geom" data-credits="4"><span class="code">ОК21</span>Інженерна геодезія та геоінформатика<span class="credits">4 кр.</span></div>
                
                <div class="elective-section">
                    <div class="elective-header">Вибіркові компоненти</div>
                    <div class="elective-empty">Не передбачено</div>
                </div>

                <div class="semester-summary">Всього: <span class="sem-total">0</span> кр.</div>
            </div>

            <!-- СЕМЕСТР 2 -->
            <div class="column" id="sem-2">
                <div class="header">Сем. 2</div>
                <div class="block blue" draggable="true" id="b10" data-credits="3"><span class="code">ОК2</span>Іноземна мова (прод.)<span class="credits">3 кр.</span></div>
                <div class="block blue" draggable="true" id="b9" data-credits="3"><span class="code">ОК1</span>Українська мова (за проф.)<span class="credits">3 кр.</span></div>
                <div class="block blue" draggable="true" id="b11" data-credits="3"><span class="code">ОК5</span>Екологія<span class="credits">3 кр.</span></div>
                <div class="block blue" draggable="true" id="phys" data-credits="3"><span class="code">ОК8</span>Физика<span class="credits">3 кр.</span></div>
                <div class="block blue" draggable="true" id="mech1" data-credits="5"><span class="code">ОК9</span>Теоретична механіка<span class="credits">5 кр.</span></div>
                <div class="block blue" draggable="true" id="hydr1" data-credits="4"><span class="code">ОК16</span>Гідравліка<span class="credits">4 кр.</span></div>
                <div class="block blue" draggable="true" id="b_opn" data-credits="5"><span class="code">ОК20</span>Основи національного спротиву<span class="credits">5 кр.</span></div>
                <div class="block gray" draggable="true" id="b16" data-credits="6"><span class="code">ОК22</span>Навчальна практика з геодезії<span class="credits">6 кр.</span></div>
                
                <div class="elective-section">
                    <div class="elective-header">Вибіркові компоненти</div>
                    <div class="elective-empty">Не передбачено</div>
                </div>

                <div class="semester-summary">Всього: <span class="sem-total">0</span> кр.</div>
            </div>

            <!-- СЕМЕСТР 3 -->
            <div class="column" id="sem-3">
                <div class="header">Сем. 3</div>
                <div class="block blue" draggable="true" id="b18" data-credits="3"><span class="code">ОК2</span>Іноземна мова (прод.)<span class="credits">3 кр.</span></div>
                <div class="block blue" draggable="true" id="geology" data-credits="3.5"><span class="code">ОК14</span>Інженерна геологія та гідрогеологія<span class="credits">3.5 кр.</span></div>
                <div class="block green" draggable="true" id="b20" data-credits="4"><span class="code">ОК24</span>Механіка ґрунтів та фундаменти<span class="credits">4 кр.</span></div>
                <div class="block green" draggable="true" id="b21" data-credits="4"><span class="code">ОК25</span>Основи раціонального природокористування та природообл...<span class="credits">4 кр.</span></div>
                <div class="block green" draggable="true" id="materials" data-credits="3"><span class="code">ОК23</span>Будівельне матеріалознавство<span class="credits">3 кр.</span></div>
                <div class="block blue" draggable="true" id="hydr2" data-credits="5"><span class="code">ОК16</span>Гідравліка (продовження)<span class="credits">5 кр.</span></div>
                
                <div class="elective-section">
                    <div class="elective-header">Вибіркові компоненти</div>
                    <div class="elective-empty">Не передбачено</div>
                    <div class="block yellow" draggable="true" id="spkv2" data-credits="3"><span class="code">СпКВ2</span>Спецкурс за вибором<span class="credits">3 кр.</span></div>
                    <div class="block orange" draggable="true" id="b23" data-credits="6"><span class="code">МД</span>Мейджор<span class="credits">6 кр.</span></div>
                </div>

                <div class="semester-summary">Всього: <span class="sem-total">0</span> кр.</div>
            </div>

            <!-- СЕМЕСТР 4 -->
            <div class="column" id="sem-4">
                <div class="header">Сем. 4</div>
                <div class="block blue" draggable="true" id="b26" data-credits="3"><span class="code">ОК2</span>Іноземна мова (завершення)<span class="credits">3 кр.</span></div>
                <div class="block blue" draggable="true" id="b17" data-credits="3"><span class="code">ОК13</span>Використання та охорона водних ресурсів<span class="credits">3 кр.</span></div>
                <div class="block blue" draggable="true" id="sopromat" data-credits="4.5"><span class="code">ОК17</span>Опір матеріалів та буд. механіка<span class="credits">4.5 кр.</span></div>
                <div class="block gray" draggable="true" id="b27" data-credits="3"><span class="code">ОК27</span>Навчальна практика за ОП<span class="credits">3 кр.</span></div>
                <div class="block green" draggable="true" id="b28" data-credits="3"><span class="code">ОК28</span>Виробнича база будівництва<span class="credits">3 кр.</span></div>
                <div class="block green" draggable="true" id="b30" data-credits="3"><span class="code">ОК37</span>Економіка будівництва<span class="credits">3 кр.</span></div>
                
                <div class="elective-section">
                    <div class="elective-header">Вибіркові компоненти</div>
                    <div class="elective-empty">Не передбачено</div>
                    <div class="block yellow" draggable="true" id="b24" data-credits="3"><span class="code">СпКВ1</span>Спецкурс за вибором<span class="credits">3 кр.</span></div>
                    <div class="block orange" draggable="true" id="b31" data-credits="6"><span class="code">МД</span>Мейджор<span class="credits">6 кр.</span></div>
                </div>

                <div class="semester-summary">Всього: <span class="sem-total">0</span> кр.</div>
            </div>

            <!-- СЕМЕСТР 5 -->
            <div class="column" id="sem-5">
                <div class="header">Сем. 5</div>
                <div class="block blue" draggable="true" id="b33" data-credits="5"><span class="code">ОК18</span>Інженерна гідрологія та регулювання стоку<span class="credits">5 кр.</span></div>
                <div class="block green" draggable="true" id="b34" data-credits="4.5"><span class="code">ОК26</span>Насоси та насосні станції<span class="credits">4.5 кр.</span></div>
                <div class="block green" draggable="true" id="struct" data-credits="4"><span class="code">ОК29</span>Будівельні конструкції<span class="credits">4 кр.</span></div>
                
                <div class="elective-section">
                    <div class="elective-header">Вибіркові компоненти</div>
                    <div class="elective-empty">Не передбачено</div>
                    <div class="block orange" draggable="true" id="b36" data-credits="6"><span class="code">МД</span>Мейджор<span class="credits">6 кр.</span></div>
                    <div class="block purple" draggable="true" id="b_mn1" data-credits="6"><span class="code">МН</span>Майнор<span class="credits">6 кр.</span></div>
                </div>

                <div class="semester-summary">Всього: <span class="sem-total">0</span> кр.</div>
            </div>

            <!-- СЕМЕСТР 6 -->
            <div class="column" id="sem-6">
                <div class="header">Сем. 6</div>
                <div class="block blue" draggable="true" id="b39" data-credits="3"><span class="code">ОК15</span>Філософія<span class="credits">3 кр.</span></div>
                <div class="block green" draggable="true" id="hydro_str1" data-credits="6"><span class="code">ОК30</span>Гідротехнічні споруди<span class="credits">6 кр.</span></div>
                <div class="block green" draggable="true" id="org1" data-credits="4"><span class="code">ОК31</span>Організація і технологія буд. робіт<span class="credits">4 кр.</span></div>
                <div class="block green" draggable="true" id="hydro_inf" data-credits="3.5"><span class="code">ОК36</span>Гідроінформатика<span class="credits">3.5 кр.</span></div>               
                <div class="block gray" draggable="true" id="b38" data-credits="3"><span class="code">ОК19</span>Навчальна практика з гідрології<span class="credits">3 кр.</span></div>
                <div class="block gray" draggable="true" id="b43" data-credits="3"><span class="code">ОК38</span>Виробнича практика<span class="credits">3 кр.</span></div>
                
                <div class="elective-section">
                    <div class="elective-header">Вибіркові компоненти</div>
                    <div class="elective-empty">Не передбачено</div>
                    <div class="block orange" draggable="true" id="b44" data-credits="6"><span class="code">МД</span>Мейджор<span class="credits">6 кр.</span></div>
                    <div class="block purple" draggable="true" id="b_mn2" data-credits="6"><span class="code">МН</span>Майнор<span class="credits">6 кр.</span></div>
                </div>

                <div class="semester-summary">Всього: <span class="sem-total">0</span> кр.</div>
            </div>

            <!-- СЕМЕСТР 7 -->
            <div class="column" id="sem-7">
                <div class="header">Сем. 7</div>
                <div class="block green" draggable="true" id="b46" data-credits="5"><span class="code">ОК32</span>Водна інженерія та водні технології<span class="credits">5 кр.</span></div>
                <div class="block green" draggable="true" id="hydro_str2" data-credits="4"><span class="code">ОК30</span>Гідротехнічні споруди (прод.)<span class="credits">4 кр.</span></div>
                <div class="block green" draggable="true" id="b47" data-credits="3"><span class="code">ОК33</span>Основи техн. експлуатації споруд<span class="credits">3 кр.</span></div>
                
                <div class="elective-section">
                    <div class="elective-header">Вибіркові компоненти</div>
                    <div class="elective-empty">Не передбачено</div>
                    <div class="block orange" draggable="true" id="b49" data-credits="12"><span class="code">МД</span>Мейджор<span class="credits">12 кр.</span></div>
                    <div class="block purple" draggable="true" id="b_mn3" data-credits="6"><span class="code">МН</span>Майнор<span class="credits">6 кр.</span></div>
                </div>

                <div class="semester-summary">Всього: <span class="sem-total">0</span> кр.</div>
            </div>

            <!-- СЕМЕСТР 8 -->
            <div class="column" id="sem-8">
                <div class="header">Сем. 8</div>
                <div class="block green" draggable="true" id="b51" data-credits="4"><span class="code">ОК32</span>Водна інженерія та технології (прод.)<span class="credits">4 кр.</span></div>
                <div class="block green" draggable="true" id="org_hydro" data-credits="3"><span class="code">ОК33</span>Основи техн. експлуатації (прод.)<span class="credits">3 кр.</span></div>
                <div class="block blue" draggable="true" id="b53" data-credits="3"><span class="code">ОК10</span>Охорона праці в галузі<span class="credits">3 кр.</span></div>
                <div class="block green" draggable="true" id="b54" data-credits="5"><span class="code">ОК34</span>Організація гідротехн. будівництва<span class="credits">5 кр.</span></div>
                <div class="block green" draggable="true" id="b55" data-credits="3"><span class="code">ОК35</span>Кошторисна вартість будівництва<span class="credits">3 кр.</span></div>
                <div class="block gray" draggable="true" id="b56" data-credits="3"><span class="code">ОК39</span>Переддипломна практика<span class="credits">3 кр.</span></div>
                <div class="block pink" draggable="true" id="diploma" data-credits="9"><span class="code">ОК40</span>Кваліфікаційна бакалаврська робота<span class="credits">9 кр.</span></div>
                
                <div class="elective-section">
                    <div class="elective-header">Вибіркові компоненти</div>
                    <div class="elective-empty">Не передбачено</div>
                </div>

                <div class="semester-summary">Всього: <span class="sem-total">0</span> кр.</div>
            </div>
        </div>
    </div>

    <script>
        const connections = [
            { src: 'math1', dst: 'phys' },
            { src: 'math1', dst: 'mech1' },
            { src: 'mech1', dst: 'sopromat' },
            { src: 'chem', dst: 'materials' },
            { src: 'geom', dst: 'b16' },
            { src: 'hydr1', dst: 'hydr2' },
            { src: 'hydr2', dst: 'hydro_inf' },
            { src: 'sopromat', dst: 'struct' },
            { src: 'hydro_inf', dst: 'hydro_str1' },
            { src: 'hydro_str1', dst: 'hydro_str2' },
            { src: 'org1', dst: 'b54' },
            { src: 'b54', dst: 'diploma' }
        ];

        function drawConnections() {
            const svg = document.getElementById('arrows-svg');
            svg.querySelectorAll('path').forEach(p => p.remove());

            const wrapperRect = document.querySelector('.matrix-wrapper').getBoundingClientRect();

            connections.forEach(conn => {
                const srcEl = document.getElementById(conn.src);
                const dstEl = document.getElementById(conn.dst);

                if (srcEl && dstEl) {
                    const srcRect = srcEl.getBoundingClientRect();
                    const dstRect = dstEl.getBoundingClientRect();

                    const x_start = srcRect.right - wrapperRect.left;
                    const y_start = srcRect.top + srcRect.height / 2 - wrapperRect.top;

                    const x_end = dstRect.left - wrapperRect.left;
                    const y_end = dstRect.top + dstRect.height / 2 - wrapperRect.top;

                    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
                    let dStr = '';
                    
                    if (x_end > x_start) {
                        const x_mid = x_start + (x_end - x_start) / 2;
                        dStr = `M ${x_start},${y_start} L ${x_mid},${y_start} L ${x_mid},${y_end} L ${x_end},${y_end}`;
                    } else {
                        const x_mid = x_start + 8;
                        dStr = `M ${x_start},${y_start} L ${x_mid},${y_start} L ${x_mid},${y_end + 25} L ${x_end - 8},${y_end + 25} L ${x_end - 8},${y_end} L ${x_end},${y_end}`;
                    }

                    path.setAttribute('d', dStr);
                    path.setAttribute('fill', 'none');
                    path.setAttribute('stroke', '#64748b');
                    path.setAttribute('stroke-width', '1.2');
                    path.setAttribute('marker-end', 'url(#arrow)');
                    svg.appendChild(path);
                }
            });
        }

        // ДИНАМІЧНИЙ ПІДРАХУНОК КРЕДИТІВ СЕМЕСТРУ ТА ПЕРЕМИКАННЯ НАПИСУ "НЕ ПЕРЕДБАЧЕНО"
        function calculateCredits() {
            document.querySelectorAll('.column').forEach(column => {
                let total = 0;
                column.querySelectorAll('.block').forEach(block => {
                    total += parseFloat(block.getAttribute('data-credits') || 0);
                });
                column.querySelector('.sem-total').innerText = total;

                // Керування написом у порожній зоні вибіркових курсів
                const electiveSec = column.querySelector('.elective-section');
                if (electiveSec) {
                    const emptyMsg = electiveSec.querySelector('.elective-empty');
                    if (emptyMsg) {
                        const hasBlocks = electiveSec.querySelectorAll('.block').length > 0;
                        emptyMsg.style.display = hasBlocks ? 'none' : 'block';
                    }
                }
            });
        }

        const columns = document.querySelectorAll('.column');

        document.querySelectorAll('.block').forEach(block => {
            block.addEventListener('dragstart', () => block.classList.add('dragging'));
            block.addEventListener('dragend', () => {
                block.classList.remove('dragging');
                drawConnections();
                calculateCredits();
            });
        });

        columns.forEach(column => {
            column.addEventListener('dragover', (e) => {
                e.preventDefault();
                column.classList.add('drag-over');
                
                const draggingBlock = document.querySelector('.dragging');
                if (!draggingBlock) return;

                const afterElement = getDragAfterElement(column, e.clientY);
                const electiveSec = column.querySelector('.elective-section');
                
                if (afterElement) {
                    // Якщо курсор знаходиться над обов'язковою зоною, але після неї є елементи вибіркової
                    if (electiveSec && electiveSec.contains(afterElement) && e.clientY < electiveSec.getBoundingClientRect().top) {
                        column.insertBefore(draggingBlock, electiveSec);
                    } else {
                        afterElement.parentNode.insertBefore(draggingBlock, afterElement);
                    }
                } else {
                    if (electiveSec && e.clientY >= electiveSec.getBoundingClientRect().top) {
                        electiveSec.appendChild(draggingBlock);
                    } else if (electiveSec) {
                        column.insertBefore(draggingBlock, electiveSec);
                    } else {
                        column.insertBefore(draggingBlock, column.querySelector('.semester-summary'));
                    }
                }
                drawConnections();
            });

            column.addEventListener('dragleave', () => column.classList.remove('drag-over'));
            column.addEventListener('drop', () => {
                column.classList.remove('drag-over');
                drawConnections();
                calculateCredits();
            });
        });

        function getDragAfterElement(column, y) {
            const draggableElements = [...column.querySelectorAll('.block:not(.dragging)')];
            return draggableElements.reduce((closest, child) => {
                const box = child.getBoundingClientRect();
                const offset = y - box.top - box.height / 2;
                if (offset < 0 && offset > closest.offset) {
                    return { offset: offset, element: child };
                } else {
                    return closest;
                }
            }, { offset: Number.NEGATIVE_INFINITY }).element;
        }

        window.addEventListener('load', () => {
            setTimeout(() => {
                drawConnections();
                calculateCredits();
            }, 300);
        });
        window.addEventListener('resize', () => {
            drawConnections();
        });
    </script>
</body>
</html>