135 lines
13 KiB
HTML
135 lines
13 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; }
|
||
:root { --bg:#0f1218; --card:#171a21; --fg:#f4f4f5; --muted:#a1a1aa; --acc:#00b8cc; --acc2:#f4b942; }
|
||
body { font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; background: var(--bg); color: var(--fg); }
|
||
.slide { display: none; min-height: 100vh; padding: 7vh 9vw; flex-direction: column; justify-content: center; }
|
||
.slide.on { display: flex; }
|
||
.slide.odd { background: linear-gradient(160deg, #0f1218 0%, #151b26 100%); }
|
||
.eyebrow { color: var(--acc2); font-size: clamp(12px, 1.4vw, 15px); font-weight: 700; text-transform: uppercase; letter-spacing: .18em; margin-bottom: 14px; }
|
||
.slide h1 { font-size: clamp(30px, 5.2vw, 58px); line-height: 1.15; font-weight: 800; letter-spacing: -.01em; margin-bottom: 24px; }
|
||
.title-slide h1 { font-size: clamp(40px, 8vw, 84px); }
|
||
.subtitle { color: var(--muted); font-size: clamp(16px, 2.2vw, 24px); line-height: 1.5; max-width: 22em; margin-bottom: 30px; }
|
||
.meta { margin-top: auto; padding-top: 40px; color: var(--muted); font-size: clamp(13px, 1.6vw, 17px); letter-spacing: .04em; line-height: 1.7; }
|
||
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; flex: 1; }
|
||
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .photo img { height: 300px; } }
|
||
.split .text { order: 1; display: flex; flex-direction: column; justify-content: center; }
|
||
.photo-wrap { order: 2; display: flex; align-items: center; }
|
||
.slide.odd .photo-wrap { order: 1; }
|
||
.photo { position: relative; width: 100%; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.5); background: linear-gradient(135deg, #1e2530, #131a24); }
|
||
.photo img { display: block; width: 100%; height: clamp(260px, 44vh, 480px); object-fit: cover; }
|
||
.photo .ph-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px; font-size: 14px; color: #e4e4e7; background: linear-gradient(transparent, rgba(10,12,16,.85)); }
|
||
.photo .ph-ic { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(0,184,204,.25); font-size: 70px; font-weight: 800; letter-spacing: .08em; text-align: center; }
|
||
ul.facts { list-style: none; }
|
||
.facts li { font-size: clamp(15px, 1.9vw, 20px); line-height: 1.5; margin-bottom: 12px; padding-left: 30px; position: relative; color: #d4d4d8; }
|
||
.facts li::before { content: ""; position: absolute; left: 0; top: .45em; width: 13px; height: 13px; border-radius: 4px; background: var(--acc); }
|
||
.num { position: fixed; bottom: 16px; right: 22px; color: #8a8a92; font-size: 14px; letter-spacing: .05em; }
|
||
.nav { position: fixed; bottom: 12px; left: 20px; display: flex; gap: 8px; z-index: 10; }
|
||
.nav button { border: 1px solid #333; background: #171719; color: #f4f4f5; border-radius: 9px; padding: 9px 15px; cursor: pointer; font-size: 14px; font-family: inherit; }
|
||
.nav button:hover { border-color: var(--acc); }
|
||
.nav .pptx { border-color: var(--acc); color: #9beeff; }
|
||
@media (max-width: 700px) { .nav button { padding: 8px 10px; font-size: 12px; } .num { display: none; } }
|
||
@media print {
|
||
.nav, .num { display: none; }
|
||
.slide { display: flex; page-break-after: always; min-height: 100vh; padding: 10vh 10vw; }
|
||
}
|
||
</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>
|
||
<button onclick="window.print()">Печать / PDF</button>
|
||
</div>
|
||
<div class="num" id="num"></div>
|
||
<script>
|
||
var SLIDES = [
|
||
{ title: "Алматы — горный город", bullets: ["Седьмая столица Казахстана и самый южный крупный город страны, в двух шагах от горного хребта Заилийский Алатау", "Где горы встречаются с небоскрёбами: современный мегаполис, окружённый снежными пиками"] },
|
||
{ title: "Кен Аса", bullets: ["Смотровая площадка на высоте 2 265 м — самая высокая точка города", "Туда ведёт канатная дорога прямо из центра, второй канат поднимает ещё выше, к подножию ледников", "Отсюда вид на весь Алматы: от многоэтажек мегаполиса до снежных вершин Алатау", "Летом — тропы, велосипед и чистый горный воздух, зимой — горнолыжный склон"] },
|
||
{ title: "Денежный мост", bullets: ["Мост через реку Алматы, соединяющий центр города с микрорайоном Бостандык", "Длиной 1 462 м — один из самых длинных мостов в Казахстане", "Вечером мост подсвечивают: отражение фонарей в воде — классика фотосессий в Алматы", "Рядом спускается канатная дорога на Кен Асу — удобно начать вечернюю прогулку"] },
|
||
{ title: "Мемориальный комплекс «Астанай-Бел»", bullets: ["Парк памяти жертвам массовых репрессий и воинам, погибшим в локальных войнах", "В центре — 43-метровый шпиль из стекла: днём светится, ночью подсветка меняется по цветам", "Ухоженная территория: сквер, фонтан и мемориальная стена с именами", "Место для спокойного вечера без суеты центра"] },
|
||
{ title: "Оперный театр имени Абай", bullets: ["Главная сцена страны: здание построено в 2016 году в современном стиле", "Рядом — площадь Абая и фонтаны, одна из старейших площадей города", "Опера, балет, драматические спектакли и концерты симфонического оркестра", "Ночью facade здания эффектно подсвечивается — красиво видно с площади"] },
|
||
{ title: "Центральный рынок", bullets: ["Крупнейший продуктовый рынок Алматы — один из крупнейших в Центральной Азии", "Тысячи торговых мест: фермерские продукты, орехи, сухофрукты, специи и мёд", "Отдельные дворы посвящены юфти, шубам и платкам — здесь берут сувениры", "Приезжайте на голодный желудок: тут же чай, шашлык и наливки"] },
|
||
{ title: "Алматинский зоопарк", bullets: ["Один из крупнейших зоопарков СНГ: более 300 видов животных на 24 гектарах", "Белые тигры, снежные барсы, львы, жирафы и пингвины", "Рядом — Ботанический сад и аттракционы для детей", "Идеально на полдня: животные, растения и прогулка в одном месте"] },
|
||
{ title: "Ботанический сад", bullets: ["Три тысячи видов растений: орхидеи, пальмы, экзотические деревья", "Девять залов, повторяющих природные зоны — от тропиков до высокогорья", "Тихое место в центре города: прогулка вдоль водоёма и фотосессия", "После садов — кафе с видом на горный хребет"] },
|
||
{ title: "Итоги: как прожить один день", bullets: ["Утро — Центральный рынок за сувенирами и завтраком, прогулка по Денежному мосту", "День — канатная дорога на Кен Асу, 2-3 часа на горе с видами", "Вечер — площадь Абая, Оперный театр, ужин с видом на горы", "Эта презентация: скачайте .pptx или распечатайте в PDF (Ctrl+P) и возьмите с собой"] }
|
||
];
|
||
var PHOTOS = {
|
||
0: { seed: "almaty-mountains", cap: "Алматы и горный хребет Заилийский Алатау" },
|
||
1: { seed: "ken-as-cable", cap: "Канатная дорога на Кен Аса" },
|
||
2: { seed: "money-bridge", cap: "Денежный мост в вечерней подсветке" },
|
||
3: { seed: "memorial-spire", cap: "Шпиль мемориального комплекса Астана-Бел" },
|
||
4: { seed: "opera-theater", cap: "Оперный театр имени Абай" },
|
||
5: { seed: "central-bazaar", cap: "Центральный рынок" },
|
||
6: { seed: "almaty-zoo", cap: "Алматинский зоопарк" },
|
||
7: { seed: "botanical-garden", cap: "Ботанический сад" }
|
||
};
|
||
var cur = 0;
|
||
|
||
function render() {
|
||
var deck = document.getElementById("deck");
|
||
deck.innerHTML = SLIDES.map(function (s, i) {
|
||
var ph = PHOTOS[i];
|
||
if (i === 0) {
|
||
return '<section class="slide title-slide' + (i === cur ? " on" : "") + '">' +
|
||
'<div class="eyebrow">Презентация · Казахстан</div>' +
|
||
'<h1>' + s.title + '</h1>' +
|
||
'<div class="subtitle">' + s.bullets[0] + '</div>' +
|
||
'<div class="meta">' + s.bullets.slice(1).join(" · ") + '</div>' +
|
||
'</section>';
|
||
}
|
||
var photo = '<div class="photo"><div class="ph-ic">' + s.title.split(" ")[0].substring(0, 2).toUpperCase() + '</div><img src="img/' + ph.seed + '.jpg" onerror="this.style.display=\'none\'" alt="' + s.title + '" loading="lazy"><span class="ph-cap">' + ph.cap + '</span></div>';
|
||
var cls = "slide" + (i % 2 === 1 ? " odd" : "") + (i === cur ? " on" : "");
|
||
return '<section class="' + cls + '">' +
|
||
'<div class="split"><div class="text">' +
|
||
'<div class="eyebrow">Алматы · место ' + i + ' из ' + (SLIDES.length - 1) + '</div>' +
|
||
'<h1>' + s.title + '</h1>' +
|
||
'<ul class="facts">' + s.bullets.map(function (b) { return "<li>" + b + "</li>"; }).join("") + '</ul>' +
|
||
'</div><div class="photo-wrap">' + photo + '</div></div>' +
|
||
'</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 === "PageDown") go(1);
|
||
if (e.key === "ArrowLeft" || e.key === "PageUp") 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, i) {
|
||
var sl = p.addSlide();
|
||
sl.background = { color: "0F1218" };
|
||
if (i === 0) {
|
||
sl.addText("Презентация · Казахстан", { x: 0.7, y: 0.9, w: 12, h: 0.4, fontSize: 13, color: "F4B942", charSpacing: 3 });
|
||
sl.addText(s.title, { x: 0.7, y: 1.5, w: 12, h: 2.2, fontSize: 44, bold: true, color: "F4F4F5" });
|
||
sl.addText(s.bullets.join("\n"), { x: 0.7, y: 4.0, w: 12, h: 2.6, fontSize: 18, color: "A1A1AA", lineSpacingMultiple: 1.4 });
|
||
return;
|
||
}
|
||
var ph = PHOTOS[i];
|
||
sl.addText("Алматы · место " + i + " из " + (SLIDES.length - 1), { x: 0.7, y: 0.5, w: 12, h: 0.4, fontSize: 11, color: "F4B942", charSpacing: 2 });
|
||
try {
|
||
sl.addImage({ path: "img/" + ph.seed + ".jpg", x: 7.3, y: 0.5, w: 5.5, h: 6.5, sizing: { type: "cover", w: 5.5, h: 6.5 } });
|
||
} catch (e) {}
|
||
sl.addText(s.title, { x: 0.7, y: 1.0, w: 6.3, h: 1.4, fontSize: 30, bold: true, color: "F4F4F5" });
|
||
sl.addText(s.bullets.map(function (b) { return { text: b, options: { bullet: true, breakLine: true } }; }),
|
||
{ x: 0.7, y: 2.6, w: 6.3, h: 4.4, fontSize: 15, color: "E4E4E7", lineSpacingMultiple: 1.35, paraSpaceAfter: 8 });
|
||
});
|
||
p.writeFile({ fileName: "almaty-dostoprimechatelnosti.pptx" });
|
||
}
|
||
render();
|
||
</script>
|
||
</body>
|
||
</html>
|