retsepty/index.html

537 lines
27 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="kk">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Дәнді дақылдарды кептірудің технологиялық процестерін автоматты басқару жүйесін зерттеу және әзірлеу</title>
<meta name="description" content="Диссертациялық жұмысты қорғауға арналған презентация">
<script src="https://cdn.jsdelivr.net/npm/pptxgenjs@3.12.0/dist/pptxgen.bundle.js"></script>
<style>
* { margin: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background: linear-gradient(135deg, #0f1218 0%, #1a1f2e 100%);
color: #f4f4f5;
min-height: 100vh;
}
.slide {
display: none;
min-height: 100vh;
padding: 5vh 7vw;
flex-direction: column;
justify-content: center;
}
.slide.on { display: flex; }
.slide h1 {
font-size: clamp(24px, 4.2vw, 42px);
margin-bottom: 20px;
line-height: 1.2;
color: #ffffff;
border-left: 5px solid #00b8cc;
padding-left: 18px;
padding-right: 12px;
}
.content-row {
display: flex;
gap: 32px;
align-items: flex-start;
flex-wrap: wrap;
}
.text-col { flex: 1; min-width: 280px; }
.img-col { flex: 0 0 380px; max-width: 420px; }
.slide img {
width: 100%;
height: auto;
border-radius: 14px;
border: 2px solid #2a3050;
box-shadow: 0 8px 30px rgba(0,0,0,0.4);
object-fit: cover;
}
.slide img.tall { max-height: 55vh; }
.slide ul { padding-left: 0; list-style: none; }
.slide li {
font-size: clamp(14px, 1.9vw, 21px);
line-height: 1.65;
margin-bottom: 9px;
padding-left: 28px;
position: relative;
color: #e4e4e7;
}
.slide li::before {
content: "";
position: absolute;
left: 0;
top: .55em;
width: 12px;
height: 12px;
border-radius: 3px;
background: linear-gradient(135deg, #00b8cc, #0088aa);
box-shadow: 0 0 16px rgba(0, 184, 204, 0.4);
}
.slide li strong { color: #00d4e8; }
.num {
position: fixed;
bottom: 18px;
right: 22px;
color: #8a8a92;
font-size: 14px;
z-index: 100;
}
.nav {
position: fixed;
bottom: 14px;
left: 22px;
display: flex;
gap: 8px;
z-index: 100;
}
.nav button {
border: 1px solid #333;
background: #1a1f2e;
color: #f4f4f5;
border-radius: 8px;
padding: 10px 16px;
cursor: pointer;
font-size: 15px;
transition: all 0.2s;
}
.nav button:hover { background: #252b3d; border-color: #00b8cc; }
.nav .pptx {
border-color: #00b8cc;
color: #9beeff;
background: linear-gradient(135deg, #00b8cc22, #0088aa22);
}
.nav .pptx:hover { background: linear-gradient(135deg, #00b8cc33, #0088aa33); }
/* Схемалар */
.schematic {
background: #11151f;
border: 2px solid #2a3050;
border-radius: 14px;
padding: 14px;
width: 100%;
margin-bottom: 12px;
}
.schematic svg { width: 100%; height: auto; display: block; }
.schematic-label {
font-size: 11px;
color: #8a93a8;
text-align: center;
margin-top: 6px;
letter-spacing: 0.3px;
}
@media (max-width: 900px) {
.content-row { flex-direction: column; }
.img-col { flex: 1 1 100%; max-width: 100%; }
.slide { padding: 4vh 5vw; }
}
@media print {
.nav, .num { display: none; }
.slide { display: flex; page-break-after: always; min-height: 100vh; }
}
</style>
</head>
<body>
<div id="deck"></div>
<div class="nav">
<button onclick="go(-1)">« Артқа</button>
<button onclick="go(1)">Алға »</button>
<button class="pptx" onclick="downloadPptx()">⬇ Скачать .pptx</button>
</div>
<div class="num" id="num"></div>
<script>
// ============ ВСЁ СОДЕРЖАНИЕ — ТОЛЬКО В ЭТОМ МАССИВЕ ============
var SLIDES = [
{
title: "Дәнді дақылдарды кептірудің технологиялық процестерін автоматты басқару жүйесін зерттеу және әзірлеу",
bullets: [
"<strong>Диссертациялық зерттеу</strong> — диссертация ұсынысына арналған",
"Мақсаты: дәнді дақылдарды кептіру процесін автоматтандыру және оптимизациялау",
"Жоба: техникалық ауыл шаруашылық машиналары",
"Бағыт: автоматтандыру, астық технологиясы, энергия үнемдеу"
],
img: "https://picsum.photos/seed/grain-drying-plant/760/430",
imgLabel: "Дәнді дақылдарды кептіру кешені"
},
{
title: "1. Кіріспе",
bullets: [
"Дәнді дақылдарды сақтау алдында кептіру — <strong>маңызды технологиялық процесс</strong>",
"Қолмен басқару кезінде:",
" • энергия шығыны <strong>жоғары</strong> (15–30% артық)",
" • дәндердің сапасы тұрақсыз (тозу, жарылу, қоюу)",
" • өнімділік төмен, оператор тәжірибесіне тәуелді",
"Маселе: кептіру процесін толық автоматтандыру және оптимизациялау"
],
img: "https://picsum.photos/seed/wheat-harvest-field/760/430",
imgLabel: "Жиналған дәнді дақылдарды кептіру қажеттілігі"
},
{
title: "2. Кептіру процесінің физикалық мәні",
bullets: [
"Кептіру — дәндерден суды <strong>буланып жою</strong> процесі",
"Жылу-масса алмасу: қызу ауасы дәндерге жылу береді, суды булантырады",
"Бастапқы ылғалдылық (W₀ = 14–20%) → мақсатты (W = 12–14%)",
"Негізгі параметрлер: қызу температурасы (t), ауа ағыны (V), дәндер қабат қалыңдығы",
"Артық қыздыру — дәндердің <strong>сапасына зиян</strong> (жұмыртқақ, көгеру)"
],
img: "https://picsum.photos/seed/grain-moisture-drying/760/430",
imgLabel: "Дәндің ылғалдылығын төмендету"
},
{
title: "3. Кепкір құрылысы (конвективті тип)",
bullets: [
"<strong>Конвективті кепкір</strong> — ең тараған тип",
"Құрамы: кепкір қасиеті (дәндер қатынайтын), ауа желдеткіші, қыздырғыш, ұстау қоймасы",
"Дәндер төменнен жоғарыға қарай қатынайды / желдеткіш арқылы желдетіледі",
"Ауа қыздырға 250–400°C дейін келеді (дәндер 60–90°C болуы керек)",
"<strong>Түрлері:</strong> конвективті, рециркуляциялы, қосындылық, кондиционерлі"
],
img: "https://picsum.photos/seed/grain-dryer-machine/760/430",
imgLabel: "Конвективті кепкірдің сыртқы құрылысы"
},
{
title: "4. Басқару жүйесінің схемасы",
bullets: [
"<strong>1-қабат: Өлшеу датчиктері</strong>",
" • Температура (PT100, 5–10 дана кепкір бойынша)",
" • Ылғалдылық (емдіктік / микрохромат)",
" • Ауа ағыны қысымы / қарқыны",
"<strong>2-қабат: Басқару бірлігі</strong> — ПЛК (SCADA немесе микроконтроллер)",
"<strong>3-қабат: Реттеуші алгоритм</strong> — PID / MPC / Fuzzy",
"<strong>4-қабат: Өрнектік элементтер</strong> — вентиль, сым, мотор, қыздырғыш реттегіші"
],
schematic: "auto"
},
{
title: "5. Кепкірдің процестік схемасы",
bullets: [
"Схема — дәнді дақылдардың <strong>көлігі</strong> кепкір қасында: сырыну → кепкір → сақтау",
"<strong>Негізгі ағындар:</strong>",
" • 1 — сұрыпталмаған астық қоймасы",
" • 2 — бастапқы кепкір (температура + ауа ағыны реттеледі)",
" • 3 — ауа желдеткіші (мотор)",
" • 4 — қыздырғыш (газ/май/электр)",
" • 5 — соңғы кепкір / тұнбаластыру",
" • 6 — дайын өнім қоймасы (W = 12–14%)"
],
schematic: "process"
},
{
title: "6. Математикалық модель",
bullets: [
"Кепкір динамикасы — <strong>дифференциалдық теңдеулер</strong> тобы:",
"Жылу балансы: dT/dt = f(T, T_air, Q_mass, W)",
"Масса балансы: dW/dt = −k · (T − T_sat) · (W − W_eq)",
" • k — булану коэффициенті (опыттық)",
" • T_sat — тоқтамалық температура",
" • W_eq — тепе-теңдік ылғалдылығы",
"<strong>Бұл модель MPC алгоритміне негіз болады</strong>"
],
img: "https://picsum.photos/seed/engineer-math-model/760/430",
imgLabel: "Инженерлік есептеулер"
},
{
title: "7. Реттеуші алгоритмдердің салыстыруы",
bullets: [
"<strong>PID реттеуші</strong> (Kp, Ki, Kd): жылдам, қарапайым; баяу ауысуларда өтіп кeteuedі",
"<strong>MPC (Model Predictive Control):</strong> модельдік болжамды, көп параметрлі, шектеулерді ескереді",
" • Артықшылық: оптимизация, тұрақтылық",
" • Кемшілік: модель қажет, есептеу жүктемесі",
"<strong>Fuzzy-логика:</strong> \"қызығушылық ережелеріне\" негізделген, қателіктерге төзімді",
"<strong>Салыстыру критерийі:</strong> ITAE, өту уақыты, энергия шығыны"
],
img: "https://picsum.photos/seed/control-algorithm-diagram/760/430",
imgLabel: "Басқару алгоритмдерін көру"
},
{
title: "8. Симуляция нәтижелері",
bullets: [
"<strong>Сценарий 1 — PID реттеуші:</strong>",
" • Температура қателігі: ±2–3°C",
" • Энергия шығыны: 100% (базалық)",
"<strong>Сценарий 2 — MPC реттеуші:</strong>",
" • Температура қателігі: ±1–1.5°C (жамансырақ)",
" • Энергия шығыны: <strong>85–90%</strong> (10–15% үнемдеу)",
"<strong>Сценарий 3 — Fuzzy + адаптив:</strong>",
" • Температура қателігі: ±1.5–2°C",
" • Энергия шығыны: 88–92% (8–12% үнемдеу)",
"<strong>Қорытынды:</strong> MPC ең тиімді, бірақ есептеу ресурстары сұрайды"
],
schematic: "compare"
},
{
title: "9. Энергия үнемдеу тәсілдері",
bullets: [
"<strong>1. Жылуды қайта пайдалану</strong> — кепкірдің жылжу ауасын қайта қыздыруға пайдалану",
"<strong>2. Өндіріс айналымдылығын реттеу</strong> — кептіру жылдамдығын дәнді сапасына қарай реттеу",
"<strong>3. Өңдеу кезеңдерін оптимизациялау</strong> — бастапқы жоғары T, кейін төмен",
"<strong>4. Датчиктерге негізделген басқару</strong> — ылғалдылық көрсеткішіне қарай автоматты тоқтату",
"<strong>Жалпы үнемдеу: 15–25%</strong> (MPC + қайта пайдалану)"
],
img: "https://picsum.photos/seed/energy-saving-grain/760/430",
imgLabel: "Энергия үнемдеу"
},
{
title: "10. Жұмыс нәтижелері және қорытынды",
bullets: [
"<strong>Нәтижелер:</strong>",
"1. Кепкір динамикалық моделін құрылды (дифференциалдық теңдеулер)",
"2. 3 реттеуші алгоритм салыстырылды (PID, MPC, Fuzzy)",
"3. Ең тиімді тәсіл: <strong>MPC</strong> (энергия: 15% үнемдеу, температура: ±1.5°C)",
"4. 15–25% энергия үнемдеу тәсілдері ұсынылды",
"<strong>Ғылыми жаңалық:</strong> кепкірлерге арналған MPC негізгі реттеуші әдісі",
"<strong>Болашақ:</strong> жасанды интеллект, машинді оқу, цифрлық близнец",
"<strong>Рахмет! Сұрақтарыңызды қабылдаймын</strong>"
],
img: "https://picsum.photos/seed/agriculture-future-tech/760/430",
imgLabel: "Болашақ технологиялар"
}
];
// =====================================================================
var cur = 0;
function buildSchematic(type) {
if (type === "auto") {
// Басқару жүйесінің құрылымы (блок-схема)
return `
<svg viewBox="0 0 600 280" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arr1" markerWidth="10" markerHeight="8" refX="9" refY="4" orient="auto">
<polygon points="0 0, 10 4, 0 8" fill="#00b8cc"/>
</marker>
</defs>
<!-- Датчиктер -->
<rect x="10" y="30" width="120" height="220" rx="10" fill="#1a2338" stroke="#2a3050" stroke-width="2"/>
<text x="70" y="55" fill="#9beeff" font-size="13" font-weight="bold" text-anchor="middle">Датчиктер</text>
<rect x="25" y="70" width="90" height="32" rx="6" fill="#0f172a" stroke="#0088aa" stroke-width="1.5"/>
<text x="70" y="90" fill="#e4e4e7" font-size="10" text-anchor="middle">PT100 T</text>
<rect x="25" y="110" width="90" height="32" rx="6" fill="#0f172a" stroke="#0088aa" stroke-width="1.5"/>
<text x="70" y="130" fill="#e4e4e7" font-size="10" text-anchor="middle">Ылғал W</text>
<rect x="25" y="150" width="90" height="32" rx="6" fill="#0f172a" stroke="#0088aa" stroke-width="1.5"/>
<text x="70" y="170" fill="#e4e4e7" font-size="10" text-anchor="middle">Қысым P</text>
<rect x="25" y="190" width="90" height="32" rx="6" fill="#0f172a" stroke="#0088aa" stroke-width="1.5"/>
<text x="70" y="210" fill="#e4e4e7" font-size="10" text-anchor="middle">Ауа ағыны</text>
<!-- PLC -->
<rect x="190" y="70" width="150" height="140" rx="12" fill="#0d2436" stroke="#00b8cc" stroke-width="2.5"/>
<text x="265" y="100" fill="#00d4e8" font-size="15" font-weight="bold" text-anchor="middle">ПЛК / SCADA</text>
<text x="265" y="122" fill="#9beeff" font-size="11" text-anchor="middle">Басқару бірлігі</text>
<text x="265" y="145" fill="#9beeff" font-size="11" text-anchor="middle">MPC алгоритм</text>
<text x="265" y="167" fill="#9beeff" font-size="11" text-anchor="middle">Optimization</text>
<text x="265" y="189" fill="#9beeff" font-size="11" text-anchor="middle">Safety</text>
<!-- Выпускные -->
<rect x="395" y="30" width="195" height="220" rx="10" fill="#1a2338" stroke="#2a3050" stroke-width="2"/>
<text x="492" y="55" fill="#9beeff" font-size="13" font-weight="bold" text-anchor="middle">Өрнектік элементтер</text>
<rect x="410" y="70" width="165" height="32" rx="6" fill="#0f172a" stroke="#0088aa" stroke-width="1.5"/>
<text x="492" y="90" fill="#e4e4e7" font-size="10" text-anchor="middle">Қыздырғыш вентиль</text>
<rect x="410" y="110" width="165" height="32" rx="6" fill="#0f172a" stroke="#0088aa" stroke-width="1.5"/>
<text x="492" y="130" fill="#e4e4e7" font-size="10" text-anchor="middle">Желдеткіш моторы</text>
<rect x="410" y="150" width="165" height="32" rx="6" fill="#0f172a" stroke="#0088aa" stroke-width="1.5"/>
<text x="492" y="170" fill="#e4e4e7" font-size="10" text-anchor="middle">Дозатор (сырғыш)</text>
<rect x="410" y="190" width="165" height="32" rx="6" fill="#0f172a" stroke="#0088aa" stroke-width="1.5"/>
<text x="492" y="210" fill="#e4e4e7" font-size="10" text-anchor="middle">Сыртқы сигнализация</text>
<!-- Стрелка 1 -->
<line x1="130" y1="140" x2="185" y2="140" stroke="#00b8cc" stroke-width="2.5" marker-end="url(#arr1)"/>
<!-- Стрелка 2 -->
<line x1="340" y1="140" x2="390" y2="140" stroke="#00b8cc" stroke-width="2.5" marker-end="url(#arr1)"/>
<text x="155" y="132" fill="#00d4e8" font-size="10" text-anchor="middle">signal</text>
<text x="365" y="132" fill="#00d4e8" font-size="10" text-anchor="middle">control</text>
<!-- Обратная связь -->
<path d="M 330 215 Q 330 250 265 250 Q 160 250 160 215" fill="none" stroke="#ffd700" stroke-width="2" stroke-dasharray="6,3" marker-end="url(#arr1)"/>
<text x="245" y="262" fill="#ffd700" font-size="10" text-anchor="middle">feedback (датчиктер)</text>
</svg>
<div class="schematic-label">Шурекердің басқару жүйесінің құрылымы (PID/MPC/Fuzzy)</div>`;
}
if (type === "process") {
// Процестік схема (дәндер ағыны)
return `
<svg viewBox="0 0 700 220" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arr2" markerWidth="10" markerHeight="8" refX="9" refY="4" orient="auto">
<polygon points="0 0, 10 4, 0 8" fill="#00b8cc"/>
</marker>
</defs>
<!-- Қойма 1 -->
<rect x="10" y="60" width="100" height="100" rx="10" fill="#1a2338" stroke="#2a3050" stroke-width="2"/>
<text x="60" y="90" fill="#9beeff" font-size="11" font-weight="bold" text-anchor="middle">1</text>
<text x="60" y="108" fill="#e4e4e7" font-size="10" text-anchor="middle">Қойма</text>
<text x="60" y="122" fill="#e4e4e7" font-size="10" text-anchor="middle">(бастапқы)</text>
<text x="60" y="136" fill="#8a93a8" font-size="9" text-anchor="middle">W₀=14-20%</text>
<!-- Кепкір -->
<rect x="160" y="40" width="140" height="140" rx="12" fill="#0d2436" stroke="#00b8cc" stroke-width="2.5"/>
<text x="230" y="70" fill="#00d4e8" font-size="13" font-weight="bold" text-anchor="middle">Кепкір</text>
<text x="230" y="90" fill="#e4e4e7" font-size="10" text-anchor="middle">2. Бастапқы этап</text>
<text x="230" y="120" fill="#ffd700" font-size="10" text-anchor="middle">T=250-400°C</text>
<text x="230" y="140" fill="#ffd700" font-size="10" text-anchor="middle">V=50-100 m³/h</text>
<text x="230" y="160" fill="#8a93a8" font-size="9" text-anchor="middle">MPC реттеуші</text>
<!-- Желдеткіш -->
<rect x="350" y="60" width="60" height="100" rx="8" fill="#1a2338" stroke="#2a3050" stroke-width="2"/>
<text x="380" y="105" fill="#9beeff" font-size="10" font-weight="bold" text-anchor="middle">3</text>
<text x="380" y="120" fill="#e4e4e7" font-size="9" text-anchor="middle">Желдеткіш</text>
<!-- Қыздырғыш -->
<rect x="350" y="170" width="60" height="32" rx="6" fill="#2a1a10" stroke="#ff6b35" stroke-width="2"/>
<text x="380" y="190" fill="#ff6b35" font-size="9" font-weight="bold" text-anchor="middle">4 Қыздырғыш</text>
<line x1="380" y1="170" x2="380" y2="140" stroke="#ff6b35" stroke-width="2" marker-end="url(#arr2)"/>
<!-- Тұнбаластыру -->
<rect x="455" y="60" width="80" height="100" rx="8" fill="#1a2338" stroke="#2a3050" stroke-width="2"/>
<text x="495" y="90" fill="#9beeff" font-size="11" font-weight="bold" text-anchor="middle">5</text>
<text x="495" y="110" fill="#e4e4e7" font-size="10" text-anchor="middle">Тұнбаластыру</text>
<text x="495" y="130" fill="#8a93a8" font-size="9" text-anchor="middle">(тозу, бу)</text>
<!-- Қойма 2 -->
<rect x="580" y="60" width="100" height="100" rx="10" fill="#0f2f1a" stroke="#00cc66" stroke-width="2"/>
<text x="630" y="90" fill="#00cc66" font-size="11" font-weight="bold" text-anchor="middle">6</text>
<text x="630" y="108" fill="#e4e4e7" font-size="10" text-anchor="middle">Қойма</text>
<text x="630" y="122" fill="#e4e4e7" font-size="10" text-anchor="middle">(дайын)</text>
<text x="630" y="136" fill="#00cc66" font-size="9" text-anchor="middle">W=12-14%</text>
<!-- Стрелкалар -->
<line x1="110" y1="110" x2="155" y2="110" stroke="#00b8cc" stroke-width="2.5" marker-end="url(#arr2)"/>
<line x1="300" y1="110" x2="345" y2="110" stroke="#00b8cc" stroke-width="2.5" marker-end="url(#arr2)"/>
<line x1="410" y1="110" x2="450" y2="110" stroke="#00b8cc" stroke-width="2.5" marker-end="url(#arr2)"/>
<line x1="535" y1="110" x2="575" y2="110" stroke="#00b8cc" stroke-width="2.5" marker-end="url(#arr2)"/>
</svg>
<div class="schematic-label">Кепкірдің процестік схемасы: дәнді ағыны мен параметрлері</div>`;
}
if (type === "compare") {
// Салыстыру графигі
return `
<svg viewBox="0 0 600 240" xmlns="http://www.w3.org/2000/svg">
<text x="300" y="20" fill="#9beeff" font-size="12" font-weight="bold" text-anchor="middle">Энергия шығыны салыстыруы (%, басқару бойынша)</text>
<!-- Ось -->
<line x1="60" y1="40" x2="60" y2="200" stroke="#2a3050" stroke-width="2"/>
<line x1="60" y1="200" x2="560" y2="200" stroke="#2a3050" stroke-width="2"/>
<text x="30" y="120" fill="#8a93a8" font-size="10" text-anchor="middle" transform="rotate(-90 30 120)">Энергия %</text>
<!-- Столбиктер -->
<rect x="100" y="60" width="80" height="140" fill="#ff6b35" opacity="0.85" rx="4"/>
<text x="140" y="50" fill="#ff6b35" font-size="11" font-weight="bold" text-anchor="middle">100%</text>
<text x="140" y="220" fill="#e4e4e7" font-size="11" text-anchor="middle">PID</text>
<rect x="250" y="92" width="80" height="108" fill="#00cc66" opacity="0.85" rx="4"/>
<text x="290" y="82" fill="#00cc66" font-size="11" font-weight="bold" text-anchor="middle">88%</text>
<text x="290" y="220" fill="#e4e4e7" font-size="11" text-anchor="middle">Fuzzy</text>
<rect x="400" y="87" width="80" height="113" fill="#00b8cc" opacity="0.85" rx="4"/>
<text x="440" y="77" fill="#00b8cc" font-size="11" font-weight="bold" text-anchor="middle">85%</text>
<text x="440" y="220" fill="#e4e4e7" font-size="11" text-anchor="middle">MPC</text>
<!-- Штрих сызық -->
<line x1="60" y1="60" x2="560" y2="60" stroke="#8a93a8" stroke-width="1" stroke-dasharray="4,2" opacity="0.5"/>
<text x="30" y="65" fill="#8a93a8" font-size="10">100%</text>
<line x1="60" y1="120" x2="560" y2="120" stroke="#8a93a8" stroke-width="1" stroke-dasharray="4,2" opacity="0.5"/>
<text x="30" y="125" fill="#8a93a8" font-size="10">80%</text>
</svg>
<div class="schematic-label">Реттеуші алгоритмдердің салыстыруы — MPC 15% үнемдейді</div>`;
}
return "";
}
function render() {
var deck = document.getElementById("deck");
deck.innerHTML = SLIDES.map(function (s, i) {
var content = "";
// Схегер болса
if (s.schematic) {
content = '<div class="schematic">' + buildSchematic(s.schematic) + '</div>';
// Text below schematic
if (s.bullets && s.bullets.length) {
content += '<ul style="margin-top:8px">' +
s.bullets.map(function (b) { return "<li>" + b + "</li>"; }).join("") +
'</ul>';
}
} else {
// Стандарт: text + img
var bulletsHtml = '<ul>' +
s.bullets.map(function (b) { return "<li>" + b + "</li>"; }).join("") +
'</ul>';
var imgHtml = s.img ?
'<div class="img-col"><img class="tall" src="' + s.img + '" alt="">' +
(s.imgLabel ? '<div class="schematic-label" style="margin-top:8px">' + s.imgLabel + '</div>' : '') +
'</div>' : '';
content = '<div class="content-row"><div class="text-col">' + bulletsHtml + '</div>' + imgHtml + '</div>';
}
return '<section class="slide' + (i === cur ? " on" : "") + '">' +
'<h1>' + s.title + '</h1>' + content + '</section>';
}).join("");
document.getElementById("num").textContent = (cur + 1) + " / " + SLIDES.length;
}
function go(d) {
cur = Math.min(SLIDES.length - 1, Math.max(0, cur + d));
render();
}
document.addEventListener("keydown", function (e) {
if (e.key === "ArrowRight" || e.key === " " || e.key === "ArrowDown") go(1);
if (e.key === "ArrowLeft" || e.key === "ArrowUp") go(-1);
});
function downloadPptx() {
var p = new PptxGenJS();
p.defineLayout({ name: "WIDE", width: 13.33, height: 7.5 });
p.layout = "WIDE";
SLIDES.forEach(function (s, idx) {
var sl = p.addSlide();
sl.background = { color: "0F1218" };
// Title
sl.addText(s.title, {
x: 0.55, y: 0.45, w: 12.2, h: 1.2,
fontSize: 24, bold: true, color: "FFFFFF",
fontFace: "Arial"
});
// Accent line
sl.addShape(p.ShapeType.rect, {
x: 0.55, y: 1.65, w: 0.1, h: 4.6,
line: { type: "none" }, fill: { color: "00B8CC" }
});
// Bullets
sl.addText(s.bullets.map(function (b) {
var text = b.replace(/<\/?strong>/g, "");
return { text: text, options: { bullet: true, breakLine: true, fontSize: 15 } };
}), {
x: 0.95, y: 1.85, w: 7.2, h: 4.4,
color: "E4E4E7", fontFace: "Arial", lineSpacingMultiple: 1.4
});
// Image
if (s.img) {
sl.addImage({
path: s.img,
x: 8.6, y: 1.85, w: 4.3, h: 2.4,
line: { color: "2A3050", width: 2 }
});
if (s.imgLabel) {
sl.addText(s.imgLabel, {
x: 8.6, y: 4.4, w: 4.3, h: 0.4,
fontSize: 9, color: "8A93A8", fontFace: "Arial", align: "center"
});
}
}
// Slide number
sl.addText((idx + 1) + " / " + SLIDES.length, {
x: 12.4, y: 7.05, w: 0.85, h: 0.35,
fontSize: 10, color: "8A8A92", align: "right"
});
});
p.writeFile({ fileName: "dissertatsiya_keshtiru_juiyesi.pptx" });
}
render();
</script>
</body>
</html>