<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:yandex="http://news.yandex.ru" xmlns:media="http://search.yahoo.com/mrss/" xmlns:turbo="http://turbo.yandex.ru" version="2.0">
	<channel>
		<title>Пособия по безопасности Октябрьского района</title>
		<link>http://vukp.oktregion.ru</link>
		<language>ru</language>
		<item turbo="true">
			<title>Памятки - безопасность на воде осенью</title>
			<link>http://vukp.oktregion.ru/security/tpost/so56c6m6y1-pamyatki-bezopasnost-na-vode-osenyu</link>
			<amplink>http://vukp.oktregion.ru/security/tpost/so56c6m6y1-pamyatki-bezopasnost-na-vode-osenyu?amp=true</amplink>
			<pubDate>Mon, 23 Jun 2025 19:57:00 +0300</pubDate>
			<category>Безопасность на воде</category>
			<enclosure url="https://static.tildacdn.com/tild6534-3763-4936-b534-326236336161/_1____.jpg" type="image/jpeg"/>
			<turbo:content>
<![CDATA[<header><h1>Памятки - безопасность на воде осенью</h1></header><figure><img src="https://static.tildacdn.com/tild6534-3763-4936-b534-326236336161/_1____.jpg"/></figure><img src="https://static.tildacdn.com/tild6534-3763-4936-b534-326236336161/_1____.jpg"><img src="https://static.tildacdn.com/tild3731-3838-4536-b533-643134323231/_2____.jpg"><img src="https://static.tildacdn.com/tild3265-6137-4663-b939-613331653138/_2____.png"><img src="https://static.tildacdn.com/tild3131-3866-4330-b863-383634623530/_3____.png"><img src="https://static.tildacdn.com/tild3334-6164-4130-b161-313862643832/_4____.jpg"><img src="https://static.tildacdn.com/tild6631-3830-4230-a664-323666653763/_5____.jpg"><img src="https://static.tildacdn.com/tild3533-3935-4437-b262-653535383934/bezopasnoe-povedenie.jpg"><img src="https://static.tildacdn.com/tild6265-6331-4131-b235-383166323330/bezopasnoe-povedenie.jpg"><img src="https://static.tildacdn.com/tild6439-3364-4962-a262-616432366464/bezopasnoe-povedenie.jpg"><img src="https://static.tildacdn.com/tild6532-3035-4766-b330-626465303262/______-__page-0001.jpg"><img src="https://static.tildacdn.com/tild3166-3963-4639-b634-663531663933/______-__page-0002.jpg"><img src="https://static.tildacdn.com/tild3435-6165-4039-a434-343239333433/______-__page-0003.jpg"><img src="https://static.tildacdn.com/tild3630-3732-4761-b766-636336316161/______-__page-0004.jpg"><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Памятки - безопасность на воде летом</title>
			<link>http://vukp.oktregion.ru/security/tpost/05ierfz161-pamyatki-bezopasnost-na-vode-letom</link>
			<amplink>http://vukp.oktregion.ru/security/tpost/05ierfz161-pamyatki-bezopasnost-na-vode-letom?amp=true</amplink>
			<pubDate>Mon, 23 Jun 2025 19:48:00 +0300</pubDate>
			<category>Безопасность на воде</category>
			<enclosure url="https://static.tildacdn.com/tild6337-3339-4539-a439-616165666632/_1_-___.jpg" type="image/jpeg"/>
			<turbo:content>
<![CDATA[<header><h1>Памятки - безопасность на воде летом</h1></header><figure><img src="https://static.tildacdn.com/tild6337-3339-4539-a439-616165666632/_1_-___.jpg"/></figure><h2  class="t-redactor__h2">Безопасность на воде в летний период (памятки)</h2><div class="t-redactor__text">БЕЗОПАСНОСТЬ ДЕТЕЙ НА ВОДЕ – ЗАДАЧА ВЗРОСЛЫХ</div><div class="t-redactor__text">Лето в разгаре, а вместе с ним наступил долгожданный купальный сезон. К сожалению, почти каждый год на воде гибнут дети. Статистика неумолима. Защита здоровья и жизни детей в любых чрезвычайных ситуациях – это задача не только административных и общественных структур государства, а прежде всего, родителей</div><div class="t-redactor__text">Разъясните детям правила поведения на воде, запрещающие: прыгать в воду в незнакомом месте, особенно головой вниз; заплывать за пределы отведённых для купания мест; заходить в воду после сильного перегрева на солнце, купаться в местах, где установлены запрещающие знаки.</div><div class="t-redactor__text">И самое главное: НЕЛЬЗЯ ОСТАВЛЯТЬ БЕЗ ПРИСМОТРА ДЕТЕЙ ВО ВРЕМЯ КУПАНИЯ.</div><div class="t-redactor__text">В пункте 4.1. Правил охраны жизни людей на водных объектах Пермского края сказано: «Родители или иные лица, ответственные за обеспечение безопасности детей, обязаны: не допускать купание детей в неустановленных местах на водных объектах, плавания на неприспособленных для этого средствах (предметах); обеспечить обязательное наличие спасательных средств (спасательные жилеты, нарукавники) на детях в возрасте до 7 лет (включительно) во время купания в местах массового отдыха на водном объекте». Уважаемые родители! Обращаемся к вам с убедительной просьбой провести разъяснительную работу о правилах поведения на природных и искусственных водоемах и о последствиях их нарушения. Этим вы предупредите несчастные случаи с вашими детьми, от этого зависит жизнь ваших детей сегодня и завтра.</div><div class="t-redactor__text">УВАЖАЕМЫЕ ВЗРОСЛЫЕ!<br />РОДИТЕЛИ, РУКОВОДИТЕЛИ ОБРАЗОВАТЕЛЬНЫХ УЧРЕЖДЕНИЙ, ПЕДАГОГИ!</div><div class="t-redactor__text">Безопасность жизни детей на водоемах во многих случаях зависит ТОЛЬКО ОТ ВАС! В связи с наступлением жаркой погоды, в целях недопущения гибели детей на водоемах в летний период обращаемся к Вам с убедительной просьбой: провести разъяснительную работу о правилах поведения на природных и искусственных водоемах и о последствиях их нарушения. Этим Вы предупредите несчастные случаи с Вашими детьми на воде, от этого зависит жизнь Ваших детей сегодня и завтра.</div><div class="t-redactor__text"><strong>Категорически запрещено купание:</strong><br />- детей без надзора взрослых;<br />- в незнакомых местах;<br />- на надувных матрацах, камерах и других плавательных средствах (без надзора взрослых);</div><div class="t-redactor__text"><strong>Необходимо соблюдать следующие правила:</strong><br />- Прежде чем войти в воду, сделайте разминку, выполнив несколько легких упражнений.<br />- Постепенно входите в воду, убедившись в том, что температура воды комфортна для тела (не ниже установленной нормы).<br />- Не нырять при недостаточной глубине водоема, при необследованном дне (особенно головой вниз!), при нахождении вблизи других пловцов.<br />- Продолжительность купания - не более 30 минут, при невысокой температуре воды - не более 5-6 минут.<br />- При купании в естественном водоеме не заплывать за установленные знаки ограждения, не подплывать близко к моторным лодкам и прочим плавательным средствам.<br />- Во избежание перегревания отдыхайте на пляже в головном уборе.<br />- Не допускать ситуаций неоправданного риска, шалости на воде.</div><img src="https://static.tildacdn.com/tild6337-3339-4539-a439-616165666632/_1_-___.jpg"><img src="https://static.tildacdn.com/tild6365-3366-4261-a165-343766666666/_1_-____.jpg"><img src="https://static.tildacdn.com/tild3336-3636-4463-a463-333665336533/_2_-_____.jpg"><img src="https://static.tildacdn.com/tild3062-6136-4661-b764-303332663865/_3_-__________86.jpg"><img src="https://static.tildacdn.com/tild3334-3939-4330-b165-626364393164/_3_-_________.jpg"><img src="https://static.tildacdn.com/tild6433-3432-4033-b464-653730383964/_3_-_____.jpg"><img src="https://static.tildacdn.com/tild3964-3937-4661-b765-356163633763/_3_-_______.jpg"><img src="https://static.tildacdn.com/tild6366-3134-4333-a238-343133623063/_3_-____.jpg"><img src="https://static.tildacdn.com/tild3666-3235-4938-b937-386136373964/_4_-_________.jpg"><img src="https://static.tildacdn.com/tild3339-6336-4263-b430-636561353661/_5_-_____.jpg"><img src="https://static.tildacdn.com/tild3037-6561-4461-b836-323061393037/_5_-_____.jpg"><img src="https://static.tildacdn.com/tild3438-3961-4464-a236-336436383463/_6_-_____.jpg"><img src="https://static.tildacdn.com/tild3531-3766-4361-a537-363432323337/_7_-__.jpg"><img src="https://static.tildacdn.com/tild6233-3531-4964-b065-343634643430/_8_-____.jpg"><img src="https://static.tildacdn.com/tild6235-6362-4866-b137-643830396137/_9_-________.jpg"><img src="https://static.tildacdn.com/tild6632-6136-4664-b266-333361383432/_10_-______.jpg"><img src="https://static.tildacdn.com/tild6561-3362-4139-b939-623062326562/_11_-_______.jpg"><img src="https://static.tildacdn.com/tild3365-3065-4437-a335-313534346235/_1.jpg"><img src="https://static.tildacdn.com/tild3732-3565-4230-b030-336635333037/_2.png"><img src="https://static.tildacdn.com/tild3265-6636-4263-b963-343133326236/_3.jpg"><img src="https://static.tildacdn.com/tild3839-3535-4234-a566-626162653535/_4.jpg"><img src="https://static.tildacdn.com/tild3764-3330-4230-b164-373636633263/_5.jpg"><img src="https://static.tildacdn.com/tild6365-3737-4563-a263-326564373064/_6.jpg"><img src="https://static.tildacdn.com/tild6535-6634-4336-b438-333437376264/_7.png"><img src="https://static.tildacdn.com/tild3639-3366-4166-a165-643532396535/_8.jpg"><img src="https://static.tildacdn.com/tild3336-6333-4164-b566-346537363064/_9.jpg"><img src="https://static.tildacdn.com/tild3366-3732-4437-b263-623861336432/_10.jpg"><img src="https://static.tildacdn.com/tild3737-6133-4338-b361-613664636138/_11.jpg"><img src="https://static.tildacdn.com/tild3034-3663-4338-b431-303064353836/_12.jpg"><img src="https://static.tildacdn.com/tild3162-3662-4464-b831-643165346330/___.jpg"><img src="https://static.tildacdn.com/tild6330-3037-4663-b261-316265326662/__.jpg"><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Памятки - безопасность на воде зимой</title>
			<link>http://vukp.oktregion.ru/security/tpost/5l4da0dor1-pamyatki-bezopasnost-na-vode-zimoi</link>
			<amplink>http://vukp.oktregion.ru/security/tpost/5l4da0dor1-pamyatki-bezopasnost-na-vode-zimoi?amp=true</amplink>
			<pubDate>Mon, 23 Jun 2025 19:41:00 +0300</pubDate>
			<category>Безопасность на воде</category>
			<enclosure url="https://static.tildacdn.com/tild6637-3234-4462-b561-306464643937/mchs_4.png" type="image/png"/>
			<turbo:content>
<![CDATA[<header><h1>Памятки - безопасность на воде зимой</h1></header><figure><img src="https://static.tildacdn.com/tild6637-3234-4462-b561-306464643937/mchs_4.png"/></figure><img src="https://static.tildacdn.com/tild6637-3234-4462-b561-306464643937/mchs_4.png"><img src="https://static.tildacdn.com/tild3838-3735-4162-b238-653732643462/mchs-1.jpg"><img src="https://static.tildacdn.com/tild3139-3965-4466-b039-366337393763/mchs-2.jpg"><img src="https://static.tildacdn.com/tild6261-3031-4230-a662-626162316637/mchs-3.jpg"><div class="t-redactor__text"><strong>Помните, основным условием безопасного пребывания человека на льду является толщина льда не менее 7 см!</strong></div><div class="t-redactor__text">В устьях рек и протоках прочность льда ослаблена. Лёд непрочен в местах быстрого течения, бьющих ключей и стоковых вод, а также в районах произрастания водной растительности, вблизи деревьев, кустов, камышей. Если температура воздуха выше 00С держится более трех дней, то прочность льда снижается на 25%. Прочность льда можно определить визуально: лёд голубого цвета – прочный, белого – прочность его в 2 раза меньше, матово-белый или с желтоватым оттенком – ненадёжен</div><div class="t-redactor__text"><br /><strong>Правила поведения на льду</strong></div><div class="t-redactor__text">Ни в коем случае нельзя выходить на лёд в тёмное время суток и при плохой видимости (туман, снегопад, дождь).<br /><br />При переходе через реку пользоваться официальными ледовыми переправами.<br /><br />Нельзя проверять прочность льда ударом ноги. Если после первого сильного удара покажется хоть немного воды, - это означает, что лёд тонкий, по нему ходить нельзя. В этом случае следует немедленно отойти по своему же следу к берегу, скользящими шагами, не отрывая ног ото льда и расставив их на ширину плеч, чтобы нагрузка распределялась на большую площадь. Точно так же поступают при предостерегающем потрескивании льда и образовании в нём трещин.<br /><br />При вынужденном переходе водоёма безопаснее всего придерживаться проторенных троп или идти по уже проложенной лыжне. Но если их нет, надо перед тем, как спуститься на лёд, очень внимательно осмотреться и наметить предстоящий маршрут.<br /><br />При переходе водоёма группой необходимо соблюдать расстояние друг от друга (5-6 м).<br /><br />Замёрзшую реку (озеро) лучше переходить на лыжах, при этом: крепления лыж расстегнуть, чтобы при необходимости быстро их сбросить; лыжные палки держать в руках, не накидывая петли на кисти рук, чтобы в случае опасности сразу их отбросить.<br /><br />Если есть рюкзак, то повесить его на одно плечо, что позволит легко освободиться от груза в случае, если лёд под вами провалится.<br /><br />На замёрзший водоём необходимо брать с собой прочный шнур длиной 20 – 25 метров с большой глухой петлей на конце и грузом. Груз поможет забросить шнур к провалившемуся в воду товарищу, петля нужна для того, чтобы пострадавший мог надежнее держаться, продев её под мышки.<br /><br />Убедительная просьба к родителям не отпускать детей на лёд (на рыбалку, катание на лыжах и коньках) без присмотра.<br /><br />Одна из самых частых причин трагедий на водоёмах – алкогольное опьянение. Люди неадекватно реагируют на опасность и в случае чрезвычайной ситуации становятся беспомощными.</div><div class="t-redactor__text"><br /><strong>Если вы провалились под лёд, необходимо</strong></div><div class="t-redactor__text">Не поддаваться панике.</div><div class="t-redactor__text">Широко раскинуть руки, чтобы не погрузиться с головой в воду.</div><div class="t-redactor__text">Опереться локтями об лёд и, приведя тело в горизонтальное положение, забросить на лёд ту ногу, которая ближе всего к его кромке, поворотом корпуса вытащить вторую ногу и быстро выкатиться на лёд.</div><div class="t-redactor__text">Без резких движений отползти как можно дальше от опасного места в том направлении, откуда пришли.</div><div class="t-redactor__text">Удерживая себя на поверхности воды, стараться затрачивать на это минимум физических усилий (одна из причин быстрого понижения температуры тела - перемещение прилежащего к телу подогретого им слоя воды и замена его новым, холодным, а кроме того, при движениях нарушается дополнительная изоляция, создаваемая водой, пропитавшей одежду).</div><div class="t-redactor__text">Находясь на плаву, следует голову держать как можно выше над водой (известно, что более 50% всех теплопотерь организма приходится на ее долю).</div><div class="t-redactor__text">Активно плыть к берегу, плоту или шлюпке, можно, если они находятся на расстоянии, преодоление которого потребует не более 40 мин.</div><div class="t-redactor__text">Добравшись до плавсредства, надо немедленно раздеться, выжать намокшую одежду и снова её надеть.</div><div class="t-redactor__text"><br /><strong>Оказание помощи провалившемуся под лёд</strong></div><div class="t-redactor__text">Подходить к полынье очень осторожно, лучше подползти по-пластунски.</div><div class="t-redactor__text">Сообщить пострадавшему криком, что идете ему на помощь, это придаст ему силы и уверенность.</div><div class="t-redactor__text">За 3-4 метра протянуть ему веревку, шест, доску, шарф или любое другое подручное средство.</div><div class="t-redactor__text">Подавать пострадавшему руку небезопасно, т.к. сами рискуете провалиться.</div><div class="t-redactor__text"><br /><strong>Отогревание пострадавшего</strong></div><div class="t-redactor__text">Пострадавшего надо укрыть в месте, защищённом от ветра, хорошо укутать в любую имеющуюся одежду, одеяло.</div><div class="t-redactor__text">Если он в сознании - напоить горячим чаем, кофе. Очень эффективны грелки, бутылки, фляги, заполненные горячей водой, и приложенные к боковым поверхностям грудной клетки, к голове, к паховой области, под мышки.</div><div class="t-redactor__text">Нельзя растирать тело, давать алкоголь, этим можно нанести серьёзный вред организму, т.к. при растирании охлажденная кровь из периферических сосудов начнёт активно поступать к «сердцевине» тела, что приведёт к дальнейшему снижению его температуры.</div><div class="t-redactor__text"><br /><strong>Что испытывает человек, неожиданно оказавшийся в ледяной воде</strong></div><div class="t-redactor__text">Перехватывает дыхание.</div><div class="t-redactor__text">Голову как будто сдавливает железный обруч.</div><div class="t-redactor__text">Резко учащается сердцебиение.</div><div class="t-redactor__text">Артериальное давление повышается до угрожающих пределов.</div><div class="t-redactor__text">Мышцы груди и живота рефлекторно сокращаются, вызывая сначала выдох, а затем вдох (непроизвольный дыхательный акт особенно опасен, если в этот момент голова находится под водой, т.к. человек может захлебнуться).</div><div class="t-redactor__text">Пытаясь защититься от смертоносного действия холода, организм включает в работу резервную систему теплопроизводства - механизм холодовой дрожи, когда температура кожи понижается до 30°С, дрожь прекращается, и с этого момента гипотермия начинает развиваться с нарастающей скоростью.</div><div class="t-redactor__text">Дыхание становится все реже, пульс замедляется, артериальное давление падет до критической отметки.</div><div class="t-redactor__text"><br /><strong>Основные причины смерти человека в холодной воде:</strong></div><div class="t-redactor__text">Переохлаждение, так как тепла, вырабатываемого организмом, недостаточно чтобы возместить теплопотери.</div><div class="t-redactor__text">Своеобразный «холодовый шок», развивающийся иногда в первые 5-15 мин после погружения в воду.</div><div class="t-redactor__text">Нарушение функции дыхания, вызванное массивным раздражением холодовых рецепторов кожи.</div><div class="t-redactor__text">Быстрая потеря тактильной чувствительности (находясь рядом со спасательной лодкой, терпящий бедствие иногда не может самостоятельно забраться в неё, т.к. температура кожи пальцев падает до температуры окружающей воды).</div><div class="t-redactor__text">В случае возникновения происшествий на воде и в целях оказания помощи терпящим бедствие немедленно звоните по телефонам 01 или 112 (с сотовых телефонов).</div><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Памятки - безопасность на воде весной</title>
			<link>http://vukp.oktregion.ru/security/tpost/1msm8r8j01-pamyatki-bezopasnost-na-vode-vesnoi</link>
			<amplink>http://vukp.oktregion.ru/security/tpost/1msm8r8j01-pamyatki-bezopasnost-na-vode-vesnoi?amp=true</amplink>
			<pubDate>Mon, 23 Jun 2025 19:37:00 +0300</pubDate>
			<category>Безопасность на воде</category>
			<enclosure url="https://static.tildacdn.com/tild3538-3934-4365-b437-363033333566/1.jpg" type="image/jpeg"/>
			<turbo:content>
<![CDATA[<header><h1>Памятки - безопасность на воде весной</h1></header><figure><img src="https://static.tildacdn.com/tild3538-3934-4365-b437-363033333566/1.jpg"/></figure><img src="https://static.tildacdn.com/tild3538-3934-4365-b437-363033333566/1.jpg"><img src="https://static.tildacdn.com/tild3736-3137-4632-b631-643739353961/2.jpg"><img src="https://static.tildacdn.com/tild3432-6661-4532-a131-353966623166/3.jpg"><img src="https://static.tildacdn.com/tild6136-3735-4738-a531-663266656338/4.jpg"><img src="https://static.tildacdn.com/tild6361-6335-4161-b363-346566633466/5.jpg"><img src="https://static.tildacdn.com/tild3365-3837-4864-a661-323861336366/6.jpg"><img src="https://static.tildacdn.com/tild6462-6333-4264-b830-386563366432/7.jpeg"><img src="https://static.tildacdn.com/tild3233-6136-4137-b836-663834623663/11111.jpg"><img src="https://static.tildacdn.com/tild6465-6465-4339-b732-363738343861/33333.jpg"><img src="https://static.tildacdn.com/tild3664-6362-4561-a535-663933663939/cIDX7e3ikE.jpg"><img src="https://static.tildacdn.com/tild3538-3739-4666-a639-326262383336/DCLxotx6UTQ.jpg"><img src="https://static.tildacdn.com/tild3666-3735-4361-a337-366331396638/navodnenie.jpg"><img src="https://static.tildacdn.com/tild3436-3530-4637-b866-396238633936/RIV7Iczbqmo.jpg"><img src="https://static.tildacdn.com/tild6236-3235-4463-b234-353034396134/tonkiy_led2.jpg"><img src="https://static.tildacdn.com/tild3335-3963-4439-a433-343330613666/wallid1062_1.jpg"><img src="https://static.tildacdn.com/tild3061-3634-4934-b665-656638626664/Xr0MrE229Z.jpg"><img src="https://static.tildacdn.com/tild3432-6565-4033-b739-656337396162/2026___1_-____.png"><img src="https://static.tildacdn.com/tild6461-3436-4531-a239-366233316663/2026___3_-_____.png"><img src="https://static.tildacdn.com/tild6661-6435-4162-a230-616632616237/2026___4_-____.png"><img src="https://static.tildacdn.com/tild3466-6336-4265-b036-633766663666/4_____1.jpg"><img src="https://static.tildacdn.com/tild3764-3563-4630-b635-333938646563/13___1.jpg"><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Памятки о запрете купания в неустановленных местах</title>
			<link>http://vukp.oktregion.ru/security/tpost/745vrsllz1-pamyatki-o-zaprete-kupaniya-v-neustanovl</link>
			<amplink>http://vukp.oktregion.ru/security/tpost/745vrsllz1-pamyatki-o-zaprete-kupaniya-v-neustanovl?amp=true</amplink>
			<pubDate>Mon, 23 Jun 2025 19:35:00 +0300</pubDate>
			<category>Безопасность на воде</category>
			<enclosure url="https://static.tildacdn.com/tild6434-3963-4636-b061-343265356639/__2.jpg" type="image/jpeg"/>
			<turbo:content>
<![CDATA[<header><h1>Памятки о запрете купания в неустановленных местах</h1></header><figure><img src="https://static.tildacdn.com/tild6434-3963-4636-b061-343265356639/__2.jpg"/></figure><img src="https://static.tildacdn.com/tild6434-3963-4636-b061-343265356639/__2.jpg"><img src="https://static.tildacdn.com/tild3066-3836-4065-b738-373832616131/____1.jpg"><img src="https://static.tildacdn.com/tild6336-3332-4035-b332-306464353231/____2.jpeg"><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Безопасность на льду</title>
			<link>http://vukp.oktregion.ru/security/tpost/ji6u9n4mf1-bezopasnost-na-ldu</link>
			<amplink>http://vukp.oktregion.ru/security/tpost/ji6u9n4mf1-bezopasnost-na-ldu?amp=true</amplink>
			<pubDate>Mon, 23 Jun 2025 19:32:00 +0300</pubDate>
			<category>Безопасность на воде</category>
			<enclosure url="https://static.tildacdn.com/tild3532-3931-4566-b430-326335623134/4_____.jpg" type="image/jpeg"/>
			<turbo:content>
<![CDATA[<header><h1>Безопасность на льду</h1></header><figure><img src="https://static.tildacdn.com/tild3532-3931-4566-b430-326335623134/4_____.jpg"/></figure><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239105" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239104" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><img src="https://static.tildacdn.com/tild3532-3931-4566-b430-326335623134/4_____.jpg"><img src="https://static.tildacdn.com/tild3436-3539-4231-a231-616438646466/5__.jpg"><img src="https://static.tildacdn.com/tild3165-3863-4336-b532-643638613632/4_____1.jpg"><img src="https://static.tildacdn.com/tild3363-3765-4930-a336-333936393238/13___1.jpg"><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Безопасность на воде</title>
			<link>http://vukp.oktregion.ru/security/tpost/skzatc25s1-bezopasnost-na-vode</link>
			<amplink>http://vukp.oktregion.ru/security/tpost/skzatc25s1-bezopasnost-na-vode?amp=true</amplink>
			<pubDate>Mon, 23 Jun 2025 19:26:00 +0300</pubDate>
			<category>Безопасность на воде</category>
			<enclosure url="https://static.tildacdn.com/tild6166-3664-4833-b137-386463653732/2026___4_-____.png" type="image/png"/>
			<turbo:content>
<![CDATA[<header><h1>Безопасность на воде</h1></header><figure><img src="https://static.tildacdn.com/tild6166-3664-4833-b137-386463653732/2026___4_-____.png"/></figure><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239092" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239093" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239091" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239095" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239096" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239098" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239097" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239099" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239100" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239101" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239102" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239103" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239094" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><img src="https://static.tildacdn.com/tild6166-3664-4833-b137-386463653732/2026___4_-____.png"><img src="https://static.tildacdn.com/tild6332-3362-4265-b639-333635653939/20____1.jpg"><img src="https://static.tildacdn.com/tild3533-3237-4436-a265-643463333134/21___2_1.jpg"><img src="https://static.tildacdn.com/tild3861-3731-4234-a634-623266353665/22___3_1.jpg"><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Зимние риски</title>
			<link>http://vukp.oktregion.ru/security/tpost/o6p5msdys1-zimnie-riski</link>
			<amplink>http://vukp.oktregion.ru/security/tpost/o6p5msdys1-zimnie-riski?amp=true</amplink>
			<pubDate>Mon, 23 Jun 2025 19:23:00 +0300</pubDate>
			<category>Безопасность на воде</category>
			<turbo:content>
<![CDATA[<header><h1>Зимние риски</h1></header><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239088" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239086" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239089" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239087" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239090" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Всесезонные риски</title>
			<link>http://vukp.oktregion.ru/security/tpost/emgtgvzm91-vsesezonnie-riski</link>
			<amplink>http://vukp.oktregion.ru/security/tpost/emgtgvzm91-vsesezonnie-riski?amp=true</amplink>
			<pubDate>Mon, 23 Jun 2025 19:13:00 +0300</pubDate>
			<category>Безопасность на воде</category>
			<enclosure url="https://static.tildacdn.com/tild3830-3739-4639-b434-383335643537/2026___5_-__.png" type="image/png"/>
			<turbo:content>
<![CDATA[<header><h1>Всесезонные риски</h1></header><figure><img src="https://static.tildacdn.com/tild3830-3739-4639-b434-383335643537/2026___5_-__.png"/></figure><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239085" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><img src="https://static.tildacdn.com/tild3830-3739-4639-b434-383335643537/2026___5_-__.png"><img src="https://static.tildacdn.com/tild3237-3736-4263-b563-386231313032/6___1.png"><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Дети о безопасности</title>
			<link>http://vukp.oktregion.ru/security/tpost/ps1532fzc1-deti-o-bezopasnosti</link>
			<amplink>http://vukp.oktregion.ru/security/tpost/ps1532fzc1-deti-o-bezopasnosti?amp=true</amplink>
			<pubDate>Mon, 23 Jun 2025 16:55:00 +0300</pubDate>
			<category>Безопасность на воде</category>
			<enclosure url="https://static.tildacdn.com/tild6334-3130-4431-a233-636430343338/2026___2_-____.png" type="image/png"/>
			<turbo:content>
<![CDATA[<header><h1>Дети о безопасности</h1></header><figure><img src="https://static.tildacdn.com/tild6334-3130-4431-a233-636430343338/2026___2_-____.png"/></figure><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239084" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239084" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><img src="https://static.tildacdn.com/tild6334-3130-4431-a233-636430343338/2026___2_-____.png"><img src="https://static.tildacdn.com/tild3239-6235-4439-b739-636332363833/2026___5_-__.png"><img src="https://static.tildacdn.com/tild6161-3136-4238-b630-353465313961/2026___6_-___101__11.png"><img src="https://static.tildacdn.com/tild3163-3833-4162-a261-396138393730/6__.jpg"><img src="https://static.tildacdn.com/tild3963-6432-4563-b237-656362376261/7_____.jpg"><img src="https://static.tildacdn.com/tild3738-3263-4533-b033-643039373865/6___1.jpg"><img src="https://static.tildacdn.com/tild3134-3533-4638-a331-333438653134/10_5______1.jpg"><img src="https://static.tildacdn.com/tild6262-6631-4638-a330-336335373735/11______1.jpg"><img src="https://static.tildacdn.com/tild6263-3430-4133-a331-343662343034/23____1.jpg"><img src="https://static.tildacdn.com/tild6437-3966-4635-b836-376562616536/24___2.jpg"><img src="https://static.tildacdn.com/tild6132-6532-4561-b030-363263663339/25____1.jpg"><img src="https://static.tildacdn.com/tild3661-3831-4161-b333-303133363834/26___1.jpg"><img src="https://static.tildacdn.com/tild3463-6130-4661-b739-333238323233/27_____1.jpg"><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Памятки и видеоролики</title>
			<link>http://vukp.oktregion.ru/terroristthreat/tpost/54pvhgj291-pamyatki-i-videoroliki</link>
			<amplink>http://vukp.oktregion.ru/terroristthreat/tpost/54pvhgj291-pamyatki-i-videoroliki?amp=true</amplink>
			<pubDate>Wed, 26 Mar 2025 01:45:00 +0300</pubDate>
			<category>Террористическая угроза</category>
			<enclosure url="https://static.tildacdn.com/tild6666-6163-4930-a335-616530346238/_____.jpg" type="image/jpeg"/>
			<turbo:content>
<![CDATA[<header><h1>Памятки и видеоролики</h1></header><figure><img src="https://static.tildacdn.com/tild6666-6163-4930-a335-616530346238/_____.jpg"/></figure><img src="https://static.tildacdn.com/tild6666-6163-4930-a335-616530346238/_____.jpg"><img src="https://static.tildacdn.com/tild6336-3961-4632-a462-303333333231/_.jpg"><img src="https://static.tildacdn.com/tild6133-3566-4664-b333-333261386334/____.jpg"><img src="https://static.tildacdn.com/tild3265-6662-4165-a130-356231373532/___.jpg"><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239080" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239079" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239078" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239076" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239077" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><img src="https://static.tildacdn.com/tild3865-3366-4665-a636-646266373736/_.jpg"><img src="https://static.tildacdn.com/tild3865-3366-4363-a563-313538336562/_-_.jpg"><img src="https://static.tildacdn.com/tild6337-6265-4530-a364-616336353064/__________page-0001.jpg"><img src="https://static.tildacdn.com/tild3834-3136-4638-a435-373037356234/__________page-0002.jpg"><img src="https://static.tildacdn.com/tild3634-3262-4365-a538-303237343163/______2.jpg"><img src="https://static.tildacdn.com/tild3036-6263-4163-b865-636634613538/________page-0001.jpg"><img src="https://static.tildacdn.com/tild3936-3733-4237-a339-343461363362/_____.jpg"><img src="https://static.tildacdn.com/tild6134-6564-4236-b662-356532366162/10_____.jpg"><img src="https://static.tildacdn.com/tild6136-6134-4361-b061-646565366236/14.jpg"><img src="https://static.tildacdn.com/tild3930-3432-4565-b566-363864623565/_.jpg"><img src="https://static.tildacdn.com/tild3533-3635-4262-b731-656539633032/3RV4hT5z8sc.jpg"><img src="https://static.tildacdn.com/tild6562-6332-4837-a365-356232363335/07qrbswqUb8.jpg"><img src="https://static.tildacdn.com/tild3137-3861-4230-b665-626535666263/C3p3LrffNAQ.jpg"><img src="https://static.tildacdn.com/tild3663-6464-4430-a237-636363653962/EeCo-xYdr_g.jpg"><img src="https://static.tildacdn.com/tild3162-3963-4039-b539-623437653138/ly-bLkwBHBk.jpg"><img src="https://static.tildacdn.com/tild6163-3066-4238-a539-393662393739/2026___6_-___101__11.png"><img src="https://static.tildacdn.com/tild3361-3561-4665-a632-363263333630/1_9_.jpg"><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Цифровое мошенничество</title>
			<link>http://vukp.oktregion.ru/digital_security/tpost/3uip3tl851-tsifrovoe-moshennichestvo</link>
			<amplink>http://vukp.oktregion.ru/digital_security/tpost/3uip3tl851-tsifrovoe-moshennichestvo?amp=true</amplink>
			<pubDate>Wed, 19 Feb 2025 22:34:00 +0300</pubDate>
			<category>Цифровое мошенничество</category>
			<enclosure url="https://static.tildacdn.com/tild3265-6335-4435-b737-666235646664/0cd1b3ad-94b9-4a7c-9.png" type="image/png"/>
			<turbo:content>
<![CDATA[<header><h1>Цифровое мошенничество</h1></header><figure><img src="https://static.tildacdn.com/tild3265-6335-4435-b737-666235646664/0cd1b3ad-94b9-4a7c-9.png"/></figure><img src="https://static.tildacdn.com/tild3032-3463-4161-b765-656132366361/_______-1.jpg"><img src="https://static.tildacdn.com/tild3130-3831-4935-b964-323934623062/_______-2.jpg"><img src="https://static.tildacdn.com/tild3865-3734-4631-a532-653930623331/_______-3.jpg"><img src="https://static.tildacdn.com/tild3963-3531-4934-b563-363034383664/_______-4.jpg"><img src="https://static.tildacdn.com/tild6338-3038-4638-b665-366632343634/_______-5.jpg"><img src="https://static.tildacdn.com/tild6361-3038-4631-b663-663232353232/_______-6.jpg"><img src="https://static.tildacdn.com/tild6234-3637-4635-b265-313062633036/_______-7.jpg"><img src="https://static.tildacdn.com/tild6531-3266-4736-a464-646131356538/_______-8.jpg"><img src="https://static.tildacdn.com/tild3966-3064-4262-a235-376639616637/_______-9.jpg"><img src="https://static.tildacdn.com/tild6165-6632-4861-b538-383165386630/_______-10.jpg"><img src="https://static.tildacdn.com/tild6461-3065-4438-a163-646561613662/_______-11.jpg"><img src="https://static.tildacdn.com/tild3639-3061-4933-b638-633165633664/_______-12.jpg"><img src="https://static.tildacdn.com/tild6262-3439-4534-a537-373064643535/_______-13.jpg"><img src="https://static.tildacdn.com/tild3930-3332-4637-b061-353563633537/_______-14.jpg"><img src="https://static.tildacdn.com/tild3862-3334-4165-b665-343636633836/_______-15.jpg"><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Ролики УМВД Росии по ХМАО - Югре</title>
			<link>http://vukp.oktregion.ru/digital_security/tpost/mjtp26gvx1-roliki-umvd-rosii-po-hmao-yugre</link>
			<amplink>http://vukp.oktregion.ru/digital_security/tpost/mjtp26gvx1-roliki-umvd-rosii-po-hmao-yugre?amp=true</amplink>
			<pubDate>Wed, 19 Feb 2025 22:14:00 +0300</pubDate>
			<category>Цифровое мошенничество</category>
			<turbo:content>
<![CDATA[<header><h1>Ролики УМВД Росии по ХМАО - Югре</h1></header><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239046" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239038" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239041" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239048" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239042" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239045" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239039" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239040" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239043" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Видеоролик про кибербезопасности</title>
			<link>http://vukp.oktregion.ru/digital_security/tpost/t5rtcd4fm1-videorolik-pro-kiberbezopasnosti</link>
			<amplink>http://vukp.oktregion.ru/digital_security/tpost/t5rtcd4fm1-videorolik-pro-kiberbezopasnosti?amp=true</amplink>
			<pubDate>Wed, 19 Feb 2025 20:42:00 +0300</pubDate>
			<category>Цифровое мошенничество</category>
			<turbo:content>
<![CDATA[<header><h1>Видеоролик про кибербезопасности</h1></header><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239017" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Видеоролики от МВД, Банка России и Генпрокуратуры</title>
			<link>http://vukp.oktregion.ru/digital_security/tpost/tgyva1zla1-videoroliki-ot-mvd-banka-rossii-i-genpro</link>
			<amplink>http://vukp.oktregion.ru/digital_security/tpost/tgyva1zla1-videoroliki-ot-mvd-banka-rossii-i-genpro?amp=true</amplink>
			<pubDate>Wed, 19 Feb 2025 20:30:00 +0300</pubDate>
			<category>Цифровое мошенничество</category>
			<turbo:content>
<![CDATA[<header><h1>Видеоролики от МВД, Банка России и Генпрокуратуры</h1></header><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239018" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239019" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239026" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239020" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239027" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239034" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239021" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239022" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239028" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239029" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239030" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239031" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239033" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239035" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239036" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239037" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239032" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239025" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239024" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239023" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239120" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239121" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239122" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239123" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239124" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239125" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239128" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Вредные советы</title>
			<link>http://vukp.oktregion.ru/digital_security/tpost/31agt84i31-vrednie-soveti</link>
			<amplink>http://vukp.oktregion.ru/digital_security/tpost/31agt84i31-vrednie-soveti?amp=true</amplink>
			<pubDate>Wed, 19 Feb 2025 20:26:00 +0300</pubDate>
			<category>Цифровое мошенничество</category>
			<enclosure url="https://static.tildacdn.com/tild3334-6430-4933-b537-353834646530/1.JPG" type="image/jpeg"/>
			<turbo:content>
<![CDATA[<header><h1>Вредные советы</h1></header><figure><img src="https://static.tildacdn.com/tild3334-6430-4933-b537-353834646530/1.JPG"/></figure><img src="https://static.tildacdn.com/tild3334-6430-4933-b537-353834646530/1.JPG"><img src="https://static.tildacdn.com/tild6236-3137-4764-b338-343065333936/2.JPG"><img src="https://static.tildacdn.com/tild6236-3033-4434-b739-636335396462/3.JPG"><img src="https://static.tildacdn.com/tild3862-3434-4562-b762-663832363864/4.JPG"><img src="https://static.tildacdn.com/tild3466-3065-4232-a365-653063323139/5.JPG"><img src="https://static.tildacdn.com/tild3330-3263-4231-a437-666138373134/6.JPG"><img src="https://static.tildacdn.com/tild6635-3262-4138-b830-663236373265/7.JPG"><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Подмена номера</title>
			<link>http://vukp.oktregion.ru/digital_security/tpost/ah3u7tf2m1-podmena-nomera</link>
			<amplink>http://vukp.oktregion.ru/digital_security/tpost/ah3u7tf2m1-podmena-nomera?amp=true</amplink>
			<pubDate>Wed, 19 Feb 2025 20:18:00 +0300</pubDate>
			<category>Цифровое мошенничество</category>
			<enclosure url="https://static.tildacdn.com/tild3635-3862-4964-a637-626439616637/1.JPG" type="image/jpeg"/>
			<turbo:content>
<![CDATA[<header><h1>Подмена номера</h1></header><figure><img src="https://static.tildacdn.com/tild3635-3862-4964-a637-626439616637/1.JPG"/></figure><img src="https://static.tildacdn.com/tild3635-3862-4964-a637-626439616637/1.JPG"><img src="https://static.tildacdn.com/tild3830-3530-4866-b232-613836376139/2.JPG"><img src="https://static.tildacdn.com/tild3631-3532-4665-b833-346165633037/3.JPG"><img src="https://static.tildacdn.com/tild3538-3464-4963-b033-343234363763/4.JPG"><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Схемы обмана</title>
			<link>http://vukp.oktregion.ru/digital_security/tpost/8lrov8axh1-shemi-obmana</link>
			<amplink>http://vukp.oktregion.ru/digital_security/tpost/8lrov8axh1-shemi-obmana?amp=true</amplink>
			<pubDate>Wed, 19 Feb 2025 16:41:00 +0300</pubDate>
			<category>Цифровое мошенничество</category>
			<enclosure url="https://static.tildacdn.com/tild3566-3662-4133-a665-343463613961/1.JPG" type="image/jpeg"/>
			<turbo:content>
<![CDATA[<header><h1>Схемы обмана</h1></header><figure><img src="https://static.tildacdn.com/tild3566-3662-4133-a665-343463613961/1.JPG"/></figure><img src="https://static.tildacdn.com/tild3566-3662-4133-a665-343463613961/1.JPG"><img src="https://static.tildacdn.com/tild6366-6366-4333-b861-313137653163/2.JPG"><img src="https://static.tildacdn.com/tild6439-3463-4130-b863-346134353939/3.JPG"><img src="https://static.tildacdn.com/tild6566-6431-4935-a634-633662336439/4.JPG"><img src="https://static.tildacdn.com/tild6631-3638-4562-a361-313162393663/5.JPG"><img src="https://static.tildacdn.com/tild3634-3337-4661-b235-323432333364/6.JPG"><img src="https://static.tildacdn.com/tild6461-6635-4863-b032-616135376634/Group_1.png"><img src="https://static.tildacdn.com/tild3430-6339-4634-b639-313135396533/1.jpg"><img src="https://static.tildacdn.com/tild6334-6439-4633-a334-613834356435/2.jpg"><img src="https://static.tildacdn.com/tild3634-6132-4363-b031-366437303432/3.jpg"><img src="https://static.tildacdn.com/tild3563-3731-4139-b665-383961623736/4.jpg"><img src="https://static.tildacdn.com/tild6464-3365-4734-b763-343330383437/5.jpg"><img src="https://static.tildacdn.com/tild3864-3234-4161-b133-323031646235/6.jpg"><img src="https://static.tildacdn.com/tild6262-3334-4834-b830-363166333265/7.jpg"><img src="https://static.tildacdn.com/tild3065-6338-4438-b564-333564623034/8.jpg"><img src="https://static.tildacdn.com/tild6331-3565-4137-b365-636136373561/9.jpg"><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239125" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239127" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Кредитные мошенники</title>
			<link>http://vukp.oktregion.ru/digital_security/tpost/abb9ykirx1-kreditnie-moshenniki</link>
			<amplink>http://vukp.oktregion.ru/digital_security/tpost/abb9ykirx1-kreditnie-moshenniki?amp=true</amplink>
			<pubDate>Wed, 19 Feb 2025 16:37:00 +0300</pubDate>
			<category>Цифровое мошенничество</category>
			<enclosure url="https://static.tildacdn.com/tild3238-6336-4365-b636-363133633062/_____1-1.jpg" type="image/jpeg"/>
			<turbo:content>
<![CDATA[<header><h1>Кредитные мошенники</h1></header><figure><img src="https://static.tildacdn.com/tild3238-6336-4365-b636-363133633062/_____1-1.jpg"/></figure><img src="https://static.tildacdn.com/tild3238-6336-4365-b636-363133633062/_____1-1.jpg"><img src="https://static.tildacdn.com/tild3965-6332-4534-a263-313638396662/_____1-2.jpg"><img src="https://static.tildacdn.com/tild3338-3365-4937-a137-303432316663/1.jpg"><img src="https://static.tildacdn.com/tild6266-6664-4333-a634-363035613566/2.jpg"><img src="https://static.tildacdn.com/tild6131-6531-4435-b061-346266323964/3.jpg"><img src="https://static.tildacdn.com/tild3361-3938-4439-b938-613765396230/4.jpg"><img src="https://static.tildacdn.com/tild3162-3737-4965-a339-373037356461/5.jpg"><img src="https://static.tildacdn.com/tild3636-3064-4337-b833-306261666364/6.jpg"><img src="https://static.tildacdn.com/tild3765-6637-4436-b234-323736386434/7.jpg"><img src="https://static.tildacdn.com/tild3433-3735-4437-b733-643862343362/8.jpg"><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239106" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239107" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239108" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239118" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239119" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Заработок на бирже</title>
			<link>http://vukp.oktregion.ru/digital_security/tpost/x6gjy6a8p1-zarabotok-na-birzhe</link>
			<amplink>http://vukp.oktregion.ru/digital_security/tpost/x6gjy6a8p1-zarabotok-na-birzhe?amp=true</amplink>
			<pubDate>Wed, 19 Feb 2025 16:30:00 +0300</pubDate>
			<category>Цифровое мошенничество</category>
			<enclosure url="https://static.tildacdn.com/tild6164-6237-4261-b061-656335613632/___-1.jpg" type="image/jpeg"/>
			<turbo:content>
<![CDATA[<header><h1>Заработок на бирже</h1></header><figure><img src="https://static.tildacdn.com/tild6164-6237-4261-b061-656335613632/___-1.jpg"/></figure><img src="https://static.tildacdn.com/tild6164-6237-4261-b061-656335613632/___-1.jpg"><img src="https://static.tildacdn.com/tild6130-3934-4132-a133-313161663864/___-2.jpg"><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Для пожилых</title>
			<link>http://vukp.oktregion.ru/digital_security/tpost/cx8kcy3111-dlya-pozhilih</link>
			<amplink>http://vukp.oktregion.ru/digital_security/tpost/cx8kcy3111-dlya-pozhilih?amp=true</amplink>
			<pubDate>Wed, 19 Feb 2025 16:18:00 +0300</pubDate>
			<category>Цифровое мошенничество</category>
			<enclosure url="https://static.tildacdn.com/tild6237-3131-4162-b436-653962643763/__-1.jpg" type="image/jpeg"/>
			<turbo:content>
<![CDATA[<header><h1>Для пожилых</h1></header><figure><img src="https://static.tildacdn.com/tild6237-3131-4162-b436-653962643763/__-1.jpg"/></figure><img src="https://static.tildacdn.com/tild6237-3131-4162-b436-653962643763/__-1.jpg"><img src="https://static.tildacdn.com/tild6634-6162-4237-a264-393164616537/__-2.jpg"><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Телефонное мошенничество</title>
			<link>http://vukp.oktregion.ru/digital_security/tpost/997fn5lyo1-telefonnoe-moshennichestvo</link>
			<amplink>http://vukp.oktregion.ru/digital_security/tpost/997fn5lyo1-telefonnoe-moshennichestvo?amp=true</amplink>
			<pubDate>Wed, 19 Feb 2025 15:04:00 +0300</pubDate>
			<category>Цифровое мошенничество</category>
			<enclosure url="https://static.tildacdn.com/tild6636-6635-4331-b766-373039396439/___2-1.jpg" type="image/jpeg"/>
			<turbo:content>
<![CDATA[<header><h1>Телефонное мошенничество</h1></header><figure><img src="https://static.tildacdn.com/tild6636-6635-4331-b766-373039396439/___2-1.jpg"/></figure><img src="https://static.tildacdn.com/tild6636-6635-4331-b766-373039396439/___2-1.jpg"><img src="https://static.tildacdn.com/tild6338-3134-4433-b631-373663653537/___2-2.jpg"><img src="https://static.tildacdn.com/tild6163-3061-4535-b435-316231643134/_____1-1.jpg"><img src="https://static.tildacdn.com/tild3732-3037-4435-b339-656162623932/_____1-2.jpg"><img src="https://static.tildacdn.com/tild3666-3033-4439-b039-356239633637/__.jpg"><img src="https://static.tildacdn.com/tild6538-3930-4433-b838-633530386439/____4.jpg"><img src="https://static.tildacdn.com/tild3562-6664-4266-b537-343832663936/____3.jpg"><img src="https://static.tildacdn.com/tild3265-3537-4162-b738-343066653930/____2.jpg"><img src="https://static.tildacdn.com/tild3063-3430-4930-a639-353663313762/01.png"><img src="https://static.tildacdn.com/tild3134-6334-4436-b435-613736323430/02.png"><img src="https://static.tildacdn.com/tild3435-3063-4332-b631-333330373337/03.png"><img src="https://static.tildacdn.com/tild6237-6438-4230-b838-353630343866/04.png"><img src="https://static.tildacdn.com/tild3162-3363-4434-b365-663030356236/05.png"><img src="https://static.tildacdn.com/tild6134-6335-4566-a539-613936373035/06.png"><img src="https://static.tildacdn.com/tild3161-6137-4530-a236-353564626237/07.png"><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239112" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239113" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239114" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239115" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239116" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239117" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239124" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><iframe width="100%" height="100%" src="https://vk.com/video_ext.php?oid=-229448754&id=456239126" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Памятки от МВД</title>
			<link>http://vukp.oktregion.ru/digital_security/tpost/cv41yuftc1-pamyatki-ot-mvd</link>
			<amplink>http://vukp.oktregion.ru/digital_security/tpost/cv41yuftc1-pamyatki-ot-mvd?amp=true</amplink>
			<pubDate>Tue, 18 Feb 2025 14:35:00 +0300</pubDate>
			<category>Цифровое мошенничество</category>
			<enclosure url="https://static.tildacdn.com/tild3765-3863-4138-b930-353261616435/_2024_-7-1-07.jpg" type="image/jpeg"/>
			<turbo:content>
<![CDATA[<header><h1>Памятки от МВД</h1></header><figure><img src="https://static.tildacdn.com/tild3765-3863-4138-b930-353261616435/_2024_-7-1-07.jpg"/></figure><img src="https://static.tildacdn.com/tild3765-3863-4138-b930-353261616435/_2024_-7-1-07.jpg"><img src="https://static.tildacdn.com/tild3034-3937-4536-b065-333461363739/_2024_-7-1-06.jpg"><img src="https://static.tildacdn.com/tild6538-3832-4464-b963-373031393065/_2024_-7-1-05.jpg"><img src="https://static.tildacdn.com/tild6633-6462-4461-a531-313838666261/_2024_-7-1-04.jpg"><img src="https://static.tildacdn.com/tild3466-6161-4635-b736-336533376261/_2024_-7-1-03.jpg"><img src="https://static.tildacdn.com/tild3661-3365-4362-a439-373962353936/_2024_-7-1-02.jpg"><img src="https://static.tildacdn.com/tild3838-6665-4662-b733-393739353339/9___2.jpg"><img src="https://static.tildacdn.com/tild3136-3737-4734-a363-396333333537/11______1.jpg"><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>После ядерного взрыва</title>
			<link>http://vukp.oktregion.ru/nuclear/tpost/z9gd8vl6p1-posle-yadernogo-vzriva</link>
			<amplink>http://vukp.oktregion.ru/nuclear/tpost/z9gd8vl6p1-posle-yadernogo-vzriva?amp=true</amplink>
			<pubDate>Mon, 13 Jan 2025 16:40:00 +0300</pubDate>
			<category>Ядерная угроза</category>
			<enclosure url="https://static.tildacdn.com/tild3439-3033-4939-b364-386532336233/b431c704-fdbe-40b2-8.png" type="image/png"/>
			<turbo:content>
<![CDATA[<header><h1>После ядерного взрыва</h1></header><figure><img src="https://static.tildacdn.com/tild3439-3033-4939-b364-386532336233/b431c704-fdbe-40b2-8.png"/></figure><h2  class="t-redactor__h2">Фильм-очерк «Горький вкус полыни»</h2><div class="t-redactor__text"><strong>Посвящённый героям-ликвидаторам аварии на Чернобыльской атомной электростанции</strong></div><iframe width="100%" height="100%" src="https://vkvideo.ru/video_ext.php?oid=-229448754&id=456239130" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>До ядерного взрыва</title>
			<link>http://vukp.oktregion.ru/nuclear/tpost/37dheicf31-do-yadernogo-vzriva</link>
			<amplink>http://vukp.oktregion.ru/nuclear/tpost/37dheicf31-do-yadernogo-vzriva?amp=true</amplink>
			<pubDate>Mon, 13 Jan 2025 16:38:00 +0300</pubDate>
			<category>Ядерная угроза</category>
			<enclosure url="https://static.tildacdn.com/tild6432-6130-4564-a163-303434343639/f3ab3c71-86eb-4f1c-a.png" type="image/png"/>
			<turbo:content>
<![CDATA[<header><h1>До ядерного взрыва</h1></header><figure><img src="https://static.tildacdn.com/tild6432-6130-4564-a163-303434343639/f3ab3c71-86eb-4f1c-a.png"/></figure><h2  class="t-redactor__h2">Фильм-очерк «Горький вкус полыни»</h2><div class="t-redactor__text">Посвящённый героям-ликвидаторам аварии на Чернобыльской атомной электростанции</div><iframe width="100%" height="100%" src="https://vkvideo.ru/video_ext.php?oid=-229448754&id=456239130" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Химическая авария на производстве</title>
			<link>http://vukp.oktregion.ru/chemical/tpost/70c4o8a301-himicheskaya-avariya-na-proizvodstve</link>
			<amplink>http://vukp.oktregion.ru/chemical/tpost/70c4o8a301-himicheskaya-avariya-na-proizvodstve?amp=true</amplink>
			<pubDate>Mon, 13 Jan 2025 16:06:00 +0300</pubDate>
			<category>Химическое заражение</category>
			<enclosure url="https://static.tildacdn.com/tild3363-3265-4336-a261-366536626164/d2da2384-cf41-48c2-8.png" type="image/png"/>
			<turbo:content>
<![CDATA[<header><h1>Химическая авария на производстве</h1></header><figure><img src="https://static.tildacdn.com/tild3363-3265-4336-a261-366536626164/d2da2384-cf41-48c2-8.png"/></figure><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Применение химического оружия</title>
			<link>http://vukp.oktregion.ru/chemical/tpost/8zpfz5y9g1-primenenie-himicheskogo-oruzhiya</link>
			<amplink>http://vukp.oktregion.ru/chemical/tpost/8zpfz5y9g1-primenenie-himicheskogo-oruzhiya?amp=true</amplink>
			<pubDate>Mon, 13 Jan 2025 16:05:00 +0300</pubDate>
			<category>Химическое заражение</category>
			<enclosure url="https://static.tildacdn.com/tild3362-6438-4736-b632-303763323936/3ab796ca-40c2-4ebe-a.png" type="image/png"/>
			<turbo:content>
<![CDATA[<header><h1>Применение химического оружия</h1></header><figure><img src="https://static.tildacdn.com/tild3362-6438-4736-b632-303763323936/3ab796ca-40c2-4ebe-a.png"/></figure><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Военное положение</title>
			<link>http://vukp.oktregion.ru/safety_manuals/tpost/ftzylscp71-voennoe-polozhenie</link>
			<amplink>http://vukp.oktregion.ru/safety_manuals/tpost/ftzylscp71-voennoe-polozhenie?amp=true</amplink>
			<pubDate>Mon, 13 Jan 2025 15:25:00 +0300</pubDate>
			<category>Главная</category>
			<enclosure url="https://static.tildacdn.com/tild6335-3432-4565-a563-383335656532/8a05fb67-8c2f-4931-9.png" type="image/png"/>
			<turbo:content>
<![CDATA[<header><h1>Военное положение</h1></header><figure><img src="https://static.tildacdn.com/tild6335-3432-4565-a563-383335656532/8a05fb67-8c2f-4931-9.png"/></figure><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Воздушная тревога</title>
			<link>http://vukp.oktregion.ru/air_raid_warning/tpost/899vyul3c1-vozdushnaya-trevoga</link>
			<amplink>http://vukp.oktregion.ru/air_raid_warning/tpost/899vyul3c1-vozdushnaya-trevoga?amp=true</amplink>
			<pubDate>Mon, 13 Jan 2025 15:23:00 +0300</pubDate>
			<category>Воздушная тревога</category>
			<enclosure url="https://static.tildacdn.com/tild3936-3838-4664-a333-636163313533/85d991d9-9670-4b9e-a.png" type="image/png"/>
			<turbo:content>
<![CDATA[<header><h1>Воздушная тревога</h1></header><figure><img src="https://static.tildacdn.com/tild3936-3838-4664-a333-636163313533/85d991d9-9670-4b9e-a.png"/></figure><img src="https://static.tildacdn.com/tild3539-3537-4663-b631-623435383163/HCljrfUE4Y-Vv6fgHHr6.jpg"><img src="https://static.tildacdn.com/tild3763-3832-4338-a335-316362623463/tDowy0M5xqmlFLN_cyXR.jpg"><img src="https://static.tildacdn.com/tild3735-6566-4365-b439-313763656265/1NLM7Y5ZwMzi-SkrNdnW.jpg"><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Землетрясение</title>
			<link>http://vukp.oktregion.ru/safety_manuals/tpost/uyf9rl7al1-zemletryasenie</link>
			<amplink>http://vukp.oktregion.ru/safety_manuals/tpost/uyf9rl7al1-zemletryasenie?amp=true</amplink>
			<pubDate>Mon, 13 Jan 2025 15:17:00 +0300</pubDate>
			<category>Главная</category>
			<enclosure url="https://static.tildacdn.com/tild3863-3139-4433-b237-666630666465/7924745f-01a3-4055-8.png" type="image/png"/>
			<turbo:content>
<![CDATA[<header><h1>Землетрясение</h1></header><figure><img src="https://static.tildacdn.com/tild3863-3139-4433-b237-666630666465/7924745f-01a3-4055-8.png"/></figure><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Наводнение</title>
			<link>http://vukp.oktregion.ru/safety_manuals/tpost/yert7xp521-navodnenie</link>
			<amplink>http://vukp.oktregion.ru/safety_manuals/tpost/yert7xp521-navodnenie?amp=true</amplink>
			<pubDate>Mon, 13 Jan 2025 15:16:00 +0300</pubDate>
			<category>Главная</category>
			<enclosure url="https://static.tildacdn.com/tild6635-6363-4461-b738-656431613134/adb23fd5-6eee-4c5c-9.png" type="image/png"/>
			<turbo:content>
<![CDATA[<header><h1>Наводнение</h1></header><figure><img src="https://static.tildacdn.com/tild6635-6363-4461-b738-656431613134/adb23fd5-6eee-4c5c-9.png"/></figure><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Произошёл терракт</title>
			<link>http://vukp.oktregion.ru/terroristthreat/tpost/8mn6jj74y1-proizoshyol-terrakt</link>
			<amplink>http://vukp.oktregion.ru/terroristthreat/tpost/8mn6jj74y1-proizoshyol-terrakt?amp=true</amplink>
			<pubDate>Mon, 13 Jan 2025 14:52:00 +0300</pubDate>
			<category>Террористическая угроза</category>
			<enclosure url="https://static.tildacdn.com/tild3361-6331-4231-b366-623565623930/624ccd60-ffe2-440f-8.png" type="image/png"/>
			<turbo:content>
<![CDATA[<header><h1>Произошёл терракт</h1></header><figure><img src="https://static.tildacdn.com/tild3361-6331-4231-b366-623565623930/624ccd60-ffe2-440f-8.png"/></figure><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Обнаружено взрывное устройство</title>
			<link>http://vukp.oktregion.ru/terroristthreat/tpost/8tivto3351-obnaruzheno-vzrivnoe-ustroistvo</link>
			<amplink>http://vukp.oktregion.ru/terroristthreat/tpost/8tivto3351-obnaruzheno-vzrivnoe-ustroistvo?amp=true</amplink>
			<pubDate>Mon, 13 Jan 2025 14:51:00 +0300</pubDate>
			<category>Террористическая угроза</category>
			<enclosure url="https://static.tildacdn.com/tild3963-3163-4330-b965-653931636161/e95a2b77-fd5c-49c1-b.png" type="image/png"/>
			<turbo:content>
<![CDATA[<header><h1>Обнаружено взрывное устройство</h1></header><figure><img src="https://static.tildacdn.com/tild3963-3163-4330-b965-653931636161/e95a2b77-fd5c-49c1-b.png"/></figure><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Метель</title>
			<link>http://vukp.oktregion.ru/storm/tpost/407y2zrhn1-metel</link>
			<amplink>http://vukp.oktregion.ru/storm/tpost/407y2zrhn1-metel?amp=true</amplink>
			<pubDate>Mon, 13 Jan 2025 14:25:00 +0300</pubDate>
			<category>Штормовое предупреждение</category>
			<enclosure url="https://static.tildacdn.com/tild6138-3138-4833-a661-393635363737/e53cef4f-fe85-450e-9.png" type="image/png"/>
			<turbo:content>
<![CDATA[<header><h1>Метель</h1></header><figure><img src="https://static.tildacdn.com/tild6138-3138-4833-a661-393635363737/e53cef4f-fe85-450e-9.png"/></figure><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Ураган</title>
			<link>http://vukp.oktregion.ru/storm/tpost/z0a1i8y2m1-uragan</link>
			<amplink>http://vukp.oktregion.ru/storm/tpost/z0a1i8y2m1-uragan?amp=true</amplink>
			<pubDate>Mon, 13 Jan 2025 14:23:00 +0300</pubDate>
			<category>Штормовое предупреждение</category>
			<enclosure url="https://static.tildacdn.com/tild6164-6331-4438-a462-333736376662/28fa56e4-b93c-4b1c-8.png" type="image/png"/>
			<turbo:content>
<![CDATA[<header><h1>Ураган</h1></header><figure><img src="https://static.tildacdn.com/tild6164-6331-4438-a462-333736376662/28fa56e4-b93c-4b1c-8.png"/></figure><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Произошел взрыв</title>
			<link>http://vukp.oktregion.ru/fire/tpost/1z1u023221-proizoshel-vzriv</link>
			<amplink>http://vukp.oktregion.ru/fire/tpost/1z1u023221-proizoshel-vzriv?amp=true</amplink>
			<pubDate>Wed, 16 Sep 2026 14:42:00 +0300</pubDate>
			<category>Пожар</category>
			<enclosure url="https://static.tildacdn.com/tild3834-6661-4265-a435-633236303036/7c8a4770-d7a3-470b-b.png" type="image/png"/>
			<turbo:content>
<![CDATA[<header><h1>Произошел взрыв</h1></header><figure><img src="https://static.tildacdn.com/tild3834-6661-4265-a435-633236303036/7c8a4770-d7a3-470b-b.png"/></figure><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Возгорание</title>
			<link>http://vukp.oktregion.ru/fire/tpost/ktiz4rnmk1-vozgoranie</link>
			<amplink>http://vukp.oktregion.ru/fire/tpost/ktiz4rnmk1-vozgoranie?amp=true</amplink>
			<pubDate>Wed, 16 Sep 2026 14:42:00 +0300</pubDate>
			<category>Пожар</category>
			<enclosure url="https://static.tildacdn.com/tild3637-3638-4161-b332-636338613935/a0a76192-7542-4412-a.png" type="image/png"/>
			<turbo:content>
<![CDATA[<header><h1>Возгорание</h1></header><figure><img src="https://static.tildacdn.com/tild3637-3638-4161-b332-636338613935/a0a76192-7542-4412-a.png"/></figure><img src="https://static.tildacdn.com/tild3239-3564-4566-a532-653366626431/2026___5_-__.png"><img src="https://static.tildacdn.com/tild3962-6363-4934-a330-646535663532/1____.jpg"><img src="https://static.tildacdn.com/tild3236-6535-4338-b263-383532326264/2_________10_.jpg"><img src="https://static.tildacdn.com/tild6464-3661-4633-b364-646162366337/3______-_.jpg"><img src="https://static.tildacdn.com/tild6366-3130-4332-b030-323234366162/8___.jpg"><img src="https://static.tildacdn.com/tild3764-3734-4264-a432-386564623030/9___.jpg"><img src="https://static.tildacdn.com/tild6636-6564-4234-b736-643262346336/10___-__.jpg"><img src="https://static.tildacdn.com/tild3239-3262-4362-b332-646532663764/11___.jpg"><img src="https://static.tildacdn.com/tild3763-6362-4639-a364-613139666131/12____.jpg"><img src="https://static.tildacdn.com/tild3530-3566-4565-b634-626137306137/13____-__.jpg"><img src="https://static.tildacdn.com/tild3762-6537-4938-a432-323030616665/14___.jpg"><img src="https://static.tildacdn.com/tild6433-3038-4432-b132-393230373239/15___.jpg"><img src="https://static.tildacdn.com/tild3566-6633-4432-a466-666162383261/16____.jpg"><img src="https://static.tildacdn.com/tild3066-3362-4561-a639-393832376262/17__.jpg"><img src="https://static.tildacdn.com/tild3463-6431-4634-b665-343063306163/18__.jpg"><img src="https://static.tildacdn.com/tild6465-3966-4737-b763-643030376664/2____.jpg"><img src="https://static.tildacdn.com/tild6531-6437-4265-b632-376566396163/3_______1.jpg"><img src="https://static.tildacdn.com/tild6164-6565-4061-a637-663932633865/12___1.jpg"><img src="https://static.tildacdn.com/tild6433-3963-4933-b134-633265376536/14____1.jpg"><img src="https://static.tildacdn.com/tild3830-3633-4237-b461-333435613935/15____1.jpg"><img src="https://static.tildacdn.com/tild3439-3034-4436-b263-353265333132/16_____1.jpg"><img src="https://static.tildacdn.com/tild3938-3336-4632-a331-303663343361/17____1.jpg"><img src="https://static.tildacdn.com/tild3433-6261-4331-b664-393464303230/18___1.jpg"><img src="https://static.tildacdn.com/tild6533-3233-4566-b532-393931373763/28__2_1.jpg"><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Применение бактериологического оружия</title>
			<link>http://vukp.oktregion.ru/virus/tpost/n97sgkcgt1-primenenie-bakteriologicheskogo-oruzhiya</link>
			<amplink>http://vukp.oktregion.ru/virus/tpost/n97sgkcgt1-primenenie-bakteriologicheskogo-oruzhiya?amp=true</amplink>
			<pubDate>Wed, 16 Sep 2026 15:08:00 +0300</pubDate>
			<category>Вирусная угроза</category>
			<enclosure url="https://static.tildacdn.com/tild3365-3531-4430-a664-323734643639/f2a8fffa-0b2e-44b9-8.png" type="image/png"/>
			<turbo:content>
<![CDATA[<header><h1>Применение бактериологического оружия</h1></header><figure><img src="https://static.tildacdn.com/tild3365-3531-4430-a664-323734643639/f2a8fffa-0b2e-44b9-8.png"/></figure><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Пандемия</title>
			<link>http://vukp.oktregion.ru/virus/tpost/1r9ugyg971-pandemiya</link>
			<amplink>http://vukp.oktregion.ru/virus/tpost/1r9ugyg971-pandemiya?amp=true</amplink>
			<pubDate>Wed, 16 Sep 2026 15:08:00 +0300</pubDate>
			<category>Вирусная угроза</category>
			<enclosure url="https://static.tildacdn.com/tild3437-3661-4334-a134-346165313765/dd9a9b25-6c64-4c6c-b.png" type="image/png"/>
			<turbo:content>
<![CDATA[<header><h1>Пандемия</h1></header><figure><img src="https://static.tildacdn.com/tild3437-3661-4334-a134-346165313765/dd9a9b25-6c64-4c6c-b.png"/></figure><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Беспилотная опасность</title>
			<link>http://vukp.oktregion.ru/air_raid_warning/tpost/y53xv7mlm1-bespilotnaya-opasnost</link>
			<amplink>http://vukp.oktregion.ru/air_raid_warning/tpost/y53xv7mlm1-bespilotnaya-opasnost?amp=true</amplink>
			<pubDate>Thu, 17 Sep 2026 15:27:00 +0300</pubDate>
			<category>Воздушная тревога</category>
			<turbo:content>
<![CDATA[<header><h1>Беспилотная опасность</h1></header><img src="https://static.tildacdn.com/tild3237-3837-4135-a566-643137663035/q9eoUNn5e0y6VcMHtson.jpg"><img src="https://static.tildacdn.com/tild6434-3233-4563-b938-623232636132/___.jpg"><img src="https://static.tildacdn.com/tild3539-6536-4139-a562-653361326133/photo_2025-09-23_16-.jpg"><img src="https://static.tildacdn.com/tild6363-3432-4334-b836-356239353766/image.png"><div class="t-redactor__embedcode"><!--
TILDA: доступный полноэкранный просмотр изображений
Вставьте этот файл целиком в блок T123 → HTML-код.

Поддерживает:
- превью статьи: .js-feed-post-image
- изображения внутри текста статьи: .js-feed-post-text figure img
- zoom колесом мыши
- кнопки + / − / 100%
- drag мышью
- pinch-to-zoom на телефоне
- перемещение пальцем
- клавиатуру
- safe-area на мобильных устройствах
-->

<style>
/* =====================================================
   КЛИКАБЕЛЬНЫЕ ИЗОБРАЖЕНИЯ
===================================================== */

.js-feed-post-image,
.js-feed-post-text figure img {
    cursor: zoom-in;
}

.js-feed-post-image:focus-visible,
.js-feed-post-text figure img:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 4px;
}


/* =====================================================
   БЛОКИРОВКА ПРОКРУТКИ СТРАНИЦЫ
===================================================== */

html.aiv-open,
body.aiv-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* =====================================================
   POPUP
===================================================== */

#aiv-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.97);

    box-sizing: border-box;
}

@supports (height: 100dvh) {
    #aiv-viewer {
        height: 100dvh;
    }
}

#aiv-viewer.is-open {
    display: flex;
}


/* =====================================================
   ВЕРХНЯЯ ПАНЕЛЬ
===================================================== */

.aiv-toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    min-height: 68px;

    padding:
        max(8px, env(safe-area-inset-top))
        12px
        8px;

    background: #111;

    border-bottom: 1px solid rgba(255,255,255,.2);

    z-index: 20;
}

.aiv-btn {
    min-width: 50px;
    height: 50px;

    padding: 0 14px;

    border: 2px solid #fff;
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.aiv-btn:hover {
    background: #fff;
    color: #000;
}

.aiv-btn:focus-visible {
    outline: 4px solid #ffd600;
    outline-offset: 3px;
}

.aiv-scale {
    min-width: 68px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    text-align: center;
}

.aiv-reset {
    font-size: 16px;
}


/* =====================================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
===================================================== */

.aiv-viewport {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        16px
        max(16px, env(safe-area-inset-bottom));

    touch-action: none;
    overscroll-behavior: contain;
}

#aiv-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    cursor: grab;

    transform-origin: center center;

    will-change: transform;
}

#aiv-image.is-dragging {
    cursor: grabbing;
}


/* =====================================================
   ЗАГРУЗКА
===================================================== */

.aiv-loading {
    position: absolute;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 18px;

    pointer-events: none;
}


/* =====================================================
   ТЕКСТ ТОЛЬКО ДЛЯ SCREEN READER
===================================================== */

.aiv-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   МОБИЛЬНЫЕ
===================================================== */

@media (max-width: 640px) {

    .aiv-toolbar {
        justify-content: center;

        min-height: 62px;

        gap: 5px;

        padding:
            max(6px, env(safe-area-inset-top))
            7px
            6px;
    }

    .aiv-btn {
        min-width: 46px;
        height: 46px;

        padding: 0 9px;

        font-size: 19px;
    }

    .aiv-scale {
        min-width: 56px;

        font-size: 15px;
    }

    .aiv-reset {
        font-size: 14px;
    }

    .aiv-viewport {
        padding:
            8px
            8px
            max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {

    .aiv-toolbar {
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .aiv-btn {
        min-width: 43px;

        padding-left: 7px;
        padding-right: 7px;
    }

    .aiv-scale {
        min-width: 50px;
    }
}
</style>


<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    const IMAGE_SELECTOR = `
        .js-feed-post-image,
        .js-feed-post-text figure img
    `;

    const MIN_SCALE = 1;
    const MAX_SCALE = 8;
    const ZOOM_FACTOR = 1.25;

    let scale = 1;

    let panX = 0;
    let panY = 0;

    let sourceImage = null;
    let lastFocusedElement = null;


    /* =====================================================
       СОЗДАЕМ POPUP
    ===================================================== */

    const viewer = document.createElement('div');

    viewer.id = 'aiv-viewer';

    viewer.setAttribute('role', 'dialog');
    viewer.setAttribute('aria-modal', 'true');
    viewer.setAttribute('aria-label', 'Просмотр увеличенного изображения');

    viewer.innerHTML = `

        <div class="aiv-toolbar">

            <button
                type="button"
                class="aiv-btn"
                data-aiv="out"
                aria-label="Уменьшить изображение"
                title="Уменьшить"
            >
                −
            </button>

            <div
                class="aiv-scale"
                aria-live="polite"
                aria-atomic="true"
            >
                100%
            </div>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="in"
                aria-label="Увеличить изображение"
                title="Увеличить"
            >
                +
            </button>

            <button
                type="button"
                class="aiv-btn aiv-reset"
                data-aiv="reset"
                aria-label="Вернуть исходный масштаб"
                title="Исходный размер"
            >
                100%
            </button>

            <button
                type="button"
                class="aiv-btn"
                data-aiv="close"
                aria-label="Закрыть изображение"
                title="Закрыть"
            >
                ×
            </button>

        </div>


        <div class="aiv-viewport">

            <div class="aiv-loading">
                Загрузка…
            </div>

            <img
                id="aiv-image"
                draggable="false"
                alt=""
            >

        </div>

        <div class="aiv-sr-only">
            Используйте кнопки плюс и минус для изменения масштаба.
            Изображение можно перемещать мышью или пальцем.
        </div>
    `;

    document.body.appendChild(viewer);


    const viewport =
        viewer.querySelector('.aiv-viewport');

    const image =
        viewer.querySelector('#aiv-image');

    const scaleText =
        viewer.querySelector('.aiv-scale');

    const loading =
        viewer.querySelector('.aiv-loading');

    const closeButton =
        viewer.querySelector('[data-aiv="close"]');


    /* =====================================================
       ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
    ===================================================== */

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }


    function updateTransform() {

        image.style.transform =
            `translate3d(${panX}px, ${panY}px, 0) scale(${scale})`;

        scaleText.textContent =
            Math.round(scale * 100) + '%';
    }


    /* =====================================================
       ОГРАНИЧЕНИЕ ПЕРЕМЕЩЕНИЯ
    ===================================================== */

    function clampPan() {

        if (scale <= 1) {

            panX = 0;
            panY = 0;

            return;
        }


        const baseWidth =
            image.offsetWidth;

        const baseHeight =
            image.offsetHeight;


        const availableWidth =
            viewport.clientWidth - 16;

        const availableHeight =
            viewport.clientHeight - 16;


        const scaledWidth =
            baseWidth * scale;

        const scaledHeight =
            baseHeight * scale;


        const maxX =
            Math.max(
                0,
                (scaledWidth - availableWidth) / 2 + 60
            );

        const maxY =
            Math.max(
                0,
                (scaledHeight - availableHeight) / 2 + 60
            );


        panX =
            clamp(
                panX,
                -maxX,
                maxX
            );


        panY =
            clamp(
                panY,
                -maxY,
                maxY
            );
    }


    /* =====================================================
       ZOOM
    ===================================================== */

    function zoomTo(
        newScale,
        clientX = null,
        clientY = null
    ) {

        newScale =
            clamp(
                newScale,
                MIN_SCALE,
                MAX_SCALE
            );


        if (newScale === scale) {
            return;
        }


        if (
            clientX !== null &&
            clientY !== null
        ) {

            const rect =
                viewport.getBoundingClientRect();


            const centerX =
                rect.left + rect.width / 2;

            const centerY =
                rect.top + rect.height / 2;


            const localX =
                (
                    clientX -
                    centerX -
                    panX
                ) / scale;


            const localY =
                (
                    clientY -
                    centerY -
                    panY
                ) / scale;


            panX =
                clientX -
                centerX -
                localX * newScale;


            panY =
                clientY -
                centerY -
                localY * newScale;
        }


        scale = newScale;


        if (scale === 1) {

            panX = 0;
            panY = 0;
        }


        clampPan();

        updateTransform();
    }


    /* =====================================================
       СБРОС
    ===================================================== */

    function resetViewer() {

        scale = 1;

        panX = 0;
        panY = 0;

        updateTransform();
    }


    /* =====================================================
       ПОЛУЧАЕМ ИСХОДНИК TILDA
    ===================================================== */

    function getBestSource(img) {

        const figure = img.closest('figure');

        return (
            img.getAttribute('data-original') ||
            img.getAttribute('data-src') ||
            figure?.getAttribute('data-src') ||
            img.currentSrc ||
            img.src
        );
    }


    /* =====================================================
       ОТКРЫТИЕ
    ===================================================== */

    function openViewer(img) {

        sourceImage = img;

        lastFocusedElement =
            document.activeElement;


        resetViewer();


        image.style.visibility = 'hidden';

        loading.style.display = 'block';
        loading.textContent = 'Загрузка…';


        image.alt =
            img.alt ||
            'Увеличенное изображение';


        viewer.classList.add('is-open');

        document.documentElement.classList.add('aiv-open');
        document.body.classList.add('aiv-open');


        requestAnimationFrame(function () {

            image.onload = function () {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            };


            image.onerror = function () {

                loading.textContent =
                    'Не удалось загрузить изображение';

            };


            image.src =
                getBestSource(img);


            if (image.complete && image.naturalWidth) {

                resetViewer();

                loading.style.display = 'none';

                image.style.visibility = 'visible';

            }

        });


        closeButton.focus();
    }


    /* =====================================================
       ЗАКРЫТИЕ
    ===================================================== */

    function closeViewer() {

        if (!viewer.classList.contains('is-open')) {
            return;
        }


        viewer.classList.remove('is-open');

        document.documentElement.classList.remove('aiv-open');
        document.body.classList.remove('aiv-open');


        resetViewer();


        image.removeAttribute('src');


        if (sourceImage) {

            sourceImage.focus();

        }
        else if (lastFocusedElement) {

            lastFocusedElement.focus();

        }


        sourceImage = null;
    }


    /* =====================================================
       КНОПКИ
    ===================================================== */

    viewer.addEventListener('click', function (event) {

        const button =
            event.target.closest('[data-aiv]');


        if (!button) {
            return;
        }


        const action =
            button.dataset.aiv;


        if (action === 'in') {

            zoomTo(
                scale * ZOOM_FACTOR
            );

        }

        else if (action === 'out') {

            zoomTo(
                scale / ZOOM_FACTOR
            );

        }

        else if (action === 'reset') {

            resetViewer();

        }

        else if (action === 'close') {

            closeViewer();

        }

    });


    /* =====================================================
       КОЛЕСО МЫШИ
    ===================================================== */

    viewport.addEventListener(
        'wheel',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            event.preventDefault();


            const factor =
                event.deltaY < 0
                    ? 1.15
                    : 1 / 1.15;


            zoomTo(
                scale * factor,
                event.clientX,
                event.clientY
            );

        },
        {
            passive: false
        }
    );


    /* =====================================================
       POINTER EVENTS:
       МЫШЬ + TOUCH + STYLUS
    ===================================================== */

    const pointers =
        new Map();


    let dragStartX = 0;
    let dragStartY = 0;

    let dragPanX = 0;
    let dragPanY = 0;


    let pinchStartDistance = 0;
    let pinchStartScale = 1;

    let pinchLocalX = 0;
    let pinchLocalY = 0;


    function getDistance(a, b) {

        return Math.hypot(
            b.x - a.x,
            b.y - a.y
        );
    }


    function getMidpoint(a, b) {

        return {
            x: (a.x + b.x) / 2,
            y: (a.y + b.y) / 2
        };
    }


    function startPinch() {

        const values =
            Array.from(pointers.values());


        if (values.length < 2) {
            return;
        }


        const a = values[0];
        const b = values[1];


        pinchStartDistance =
            getDistance(a, b);


        pinchStartScale =
            scale;


        const midpoint =
            getMidpoint(a, b);


        const rect =
            viewport.getBoundingClientRect();


        const centerX =
            rect.left + rect.width / 2;

        const centerY =
            rect.top + rect.height / 2;


        pinchLocalX =
            (
                midpoint.x -
                centerX -
                panX
            ) / scale;


        pinchLocalY =
            (
                midpoint.y -
                centerY -
                panY
            ) / scale;
    }


    viewport.addEventListener(
        'pointerdown',
        function (event) {

            if (
                event.target.closest('.aiv-toolbar')
            ) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            try {

                viewport.setPointerCapture(
                    event.pointerId
                );

            }
            catch (e) {}


            if (pointers.size === 1) {

                dragStartX =
                    event.clientX;

                dragStartY =
                    event.clientY;

                dragPanX =
                    panX;

                dragPanY =
                    panY;


                image.classList.add('is-dragging');

            }

            else if (pointers.size === 2) {

                startPinch();

            }

        }
    );


    viewport.addEventListener(
        'pointermove',
        function (event) {

            if (!pointers.has(event.pointerId)) {
                return;
            }


            event.preventDefault();


            pointers.set(
                event.pointerId,
                {
                    x: event.clientX,
                    y: event.clientY
                }
            );


            if (pointers.size >= 2) {

                const values =
                    Array.from(pointers.values());


                const a = values[0];
                const b = values[1];


                const distance =
                    getDistance(a, b);


                if (!pinchStartDistance) {
                    return;
                }


                const newScale =
                    clamp(
                        pinchStartScale *
                        (
                            distance /
                            pinchStartDistance
                        ),
                        MIN_SCALE,
                        MAX_SCALE
                    );


                const midpoint =
                    getMidpoint(a, b);


                const rect =
                    viewport.getBoundingClientRect();


                const centerX =
                    rect.left + rect.width / 2;

                const centerY =
                    rect.top + rect.height / 2;


                panX =
                    midpoint.x -
                    centerX -
                    pinchLocalX * newScale;


                panY =
                    midpoint.y -
                    centerY -
                    pinchLocalY * newScale;


                scale =
                    newScale;


                clampPan();

                updateTransform();

                return;
            }


            if (pointers.size === 1) {

                if (scale <= 1) {
                    return;
                }


                panX =
                    dragPanX +
                    (
                        event.clientX -
                        dragStartX
                    );


                panY =
                    dragPanY +
                    (
                        event.clientY -
                        dragStartY
                    );


                clampPan();

                updateTransform();

            }

        }
    );


    function endPointer(event) {

        pointers.delete(
            event.pointerId
        );


        if (pointers.size === 0) {

            image.classList.remove(
                'is-dragging'
            );

            pinchStartDistance = 0;

        }


        else if (pointers.size === 1) {

            const remaining =
                Array.from(
                    pointers.values()
                )[0];


            dragStartX =
                remaining.x;

            dragStartY =
                remaining.y;


            dragPanX =
                panX;

            dragPanY =
                panY;


            pinchStartDistance = 0;

        }

    }


    viewport.addEventListener(
        'pointerup',
        endPointer
    );

    viewport.addEventListener(
        'pointercancel',
        endPointer
    );


    /* =====================================================
       DOUBLE CLICK
    ===================================================== */

    image.addEventListener(
        'dblclick',
        function (event) {

            event.preventDefault();


            if (scale > 1) {

                resetViewer();

            }
            else {

                zoomTo(
                    2,
                    event.clientX,
                    event.clientY
                );

            }

        }
    );


    /* =====================================================
       КЛАВИАТУРА
    ===================================================== */

    document.addEventListener(
        'keydown',
        function (event) {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            if (event.key === 'Escape') {

                event.preventDefault();

                closeViewer();

            }


            else if (
                event.key === '+' ||
                event.key === '='
            ) {

                event.preventDefault();

                zoomTo(
                    scale * ZOOM_FACTOR
                );

            }


            else if (
                event.key === '-' ||
                event.key === '_'
            ) {

                event.preventDefault();

                zoomTo(
                    scale / ZOOM_FACTOR
                );

            }


            else if (event.key === '0') {

                event.preventDefault();

                resetViewer();

            }


            else if (
                event.key === 'ArrowLeft' &&
                scale > 1
            ) {

                event.preventDefault();

                panX += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowRight' &&
                scale > 1
            ) {

                event.preventDefault();

                panX -= 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowUp' &&
                scale > 1
            ) {

                event.preventDefault();

                panY += 80;

                clampPan();

                updateTransform();

            }


            else if (
                event.key === 'ArrowDown' &&
                scale > 1
            ) {

                event.preventDefault();

                panY -= 80;

                clampPan();

                updateTransform();

            }

        }
    );


    /* =====================================================
       ПОДКЛЮЧАЕМ ИЗОБРАЖЕНИЯ TILDA
    ===================================================== */

    function imageClickHandler(event) {

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

        openViewer(
            event.currentTarget
        );

        return false;
    }


    function imageKeyHandler(event) {

        if (
            event.key !== 'Enter' &&
            event.key !== ' '
        ) {
            return;
        }


        event.preventDefault();

        event.stopPropagation();

        openViewer(
            event.currentTarget
        );
    }


    function prepareImages() {

        document
            .querySelectorAll(IMAGE_SELECTOR)
            .forEach(function (img) {

                if (
                    img.dataset.aivPrepared === '1'
                ) {
                    return;
                }


                img.dataset.aivPrepared = '1';


                img.setAttribute(
                    'tabindex',
                    '0'
                );


                img.setAttribute(
                    'role',
                    'button'
                );


                img.setAttribute(
                    'aria-haspopup',
                    'dialog'
                );


                let label =
                    'Открыть изображение для увеличения';


                if (img.alt) {

                    label =
                        img.alt +
                        '. Открыть изображение для увеличения';

                }


                img.setAttribute(
                    'aria-label',
                    label
                );


                img.addEventListener(
                    'click',
                    imageClickHandler,
                    true
                );


                img.addEventListener(
                    'keydown',
                    imageKeyHandler
                );

            });

    }


    prepareImages();


    /* =====================================================
       TILDA МОЖЕТ ПОДГРУЖАТЬ КОНТЕНТ ПОЗЖЕ
    ===================================================== */

    const observer =
        new MutationObserver(
            prepareImages
        );


    observer.observe(
        document.body,
        {
            childList: true,
            subtree: true
        }
    );


    /* =====================================================
       ПОВОРОТ ЭКРАНА / ИЗМЕНЕНИЕ РАЗМЕРА
    ===================================================== */

    window.addEventListener(
        'resize',
        function () {

            if (!viewer.classList.contains('is-open')) {
                return;
            }


            requestAnimationFrame(function () {

                clampPan();

                updateTransform();

            });

        }
    );


})();
</script></div>]]>
			</turbo:content>
		</item>
		</channel>
</rss>