77 lines
4.6 KiB
HTML
77 lines
4.6 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Отчёт о работе</title>
|
||
<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, "Segoe UI", Roboto, sans-serif; background: #f7f7f8; color: #1a1a1e; }
|
||
.slide { display: none; min-height: 100vh; padding: 8vh 10vw; flex-direction: column; justify-content: center; }
|
||
.slide.on { display: flex; }
|
||
.slide h1 { font-size: clamp(34px, 6vw, 64px); margin-bottom: 24px; }
|
||
.slide li { font-size: clamp(18px, 2.6vw, 28px); line-height: 1.6; margin-bottom: 10px; list-style: none; padding-left: 28px; position: relative; }
|
||
.slide li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 12px; border-radius: 3px; background: #1a56db; }
|
||
.num { position: fixed; bottom: 18px; right: 22px; color: #8a8a92; font-size: 14px; }
|
||
.nav { position: fixed; bottom: 14px; left: 22px; display: flex; gap: 8px; }
|
||
.nav button { border: 1px solid #d4d4d8; background: #fff; color: #1a1a1e; border-radius: 8px; padding: 8px 14px; cursor: pointer; font-size: 14px; }
|
||
.nav .pptx { border-color: #1a56db; color: #1a56db; font-weight: 600; }
|
||
@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: ["Название команды / проекта", "Период: 3 квартал 2026", "Автор: [ваше имя]"] },
|
||
{ title: "Цели периода", bullets: ["Цель 1 — что планировали достичь", "Цель 2 — ключевые задачи", "Цель 3 — ожидаемый результат"] },
|
||
{ title: "Что сделано", bullets: ["Основное достижение 1", "Основное достижение 2", "Основное достижение 3", "Дополнительно: что ещё успели"] },
|
||
{ title: "Цифры и результаты", bullets: ["Показатель 1: +XX% к прошлому периоду", "Показатель 2: XX единиц / руб. / часов", "Показатель 3: экономия или рост XX%"] },
|
||
{ title: "Вызовы и уроки", bullets: ["Что пошло не так и почему", "Как решили проблему", "Что учтём в следующем периоде"] },
|
||
{ title: "Планы на следующий период", bullets: ["Задача 1 — срок", "Задача 2 — срок", "Задача 3 — срок"] },
|
||
{ title: "Итоги", bullets: ["Главный вывод периода", "Спасибо за внимание!", "Вопросы и обсуждение"] }
|
||
];
|
||
// ============================================================================
|
||
var cur = 0;
|
||
function render() {
|
||
var deck = document.getElementById("deck");
|
||
deck.innerHTML = SLIDES.map(function (s, i) {
|
||
return '<section class="slide' + (i === cur ? " on" : "") + '"><h1>' + s.title + '</h1><ul>' +
|
||
s.bullets.map(function (b) { return "<li>" + b + "</li>"; }).join("") + "</ul></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 === " ") go(1);
|
||
if (e.key === "ArrowLeft") go(-1);
|
||
});
|
||
function downloadPptx() {
|
||
var p = new PptxGenJS();
|
||
p.defineLayout({ name: "W", width: 13.33, height: 7.5 });
|
||
p.layout = "W";
|
||
SLIDES.forEach(function (s) {
|
||
var sl = p.addSlide();
|
||
sl.background = { color: "F7F7F8" };
|
||
sl.addText(s.title, { x: 0.7, y: 0.5, w: 12, h: 1.2, fontSize: 36, bold: true, color: "1A1A1E" });
|
||
sl.addText(s.bullets.map(function (b) { return { text: b, options: { bullet: true, breakLine: true } }; }),
|
||
{ x: 0.9, y: 2.0, w: 11.5, h: 4.8, fontSize: 20, color: "3F3F46", lineSpacingMultiple: 1.4 });
|
||
});
|
||
p.writeFile({ fileName: "otchet.pptx" });
|
||
}
|
||
render();
|
||
</script>
|
||
</body>
|
||
</html>
|