[html]
<style>
@import url('https://fonts.googleapis.com/css2?family=Allura&family=IBM+Plex+Mono:wght@400;500;600&family=Special+Elite&display=swap');

.aes-board{
    position:relative;
    box-sizing:border-box;
    width:650px;
    margin:30px auto;
    padding:28px;
    display:grid;
    grid-template-columns:250px 1fr;
    gap:18px;

    font-family:'Special Elite', monospace;
    color:#292723;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(63,52,38,.025) 0,
            rgba(63,52,38,.025) 1px,
            transparent 1px,
            transparent 4px
        ),
        linear-gradient(135deg, #d8cfb8 0%, #eee7d5 48%, #d3c8ad 100%);

    border:1px solid #8d826d;
    box-shadow:
        0 10px 30px rgba(0,0,0,.22),
        inset 0 0 45px rgba(68,51,31,.12);
}

/* линия архивной папки */
.aes-board:before{
    content:"CASE FILE  № 0617-JC";
    position:absolute;
    top:-13px;
    left:28px;
    padding:6px 15px 5px;

    font-family:'IBM Plex Mono', monospace;
    font-size:10px;
    font-weight:600;
    letter-spacing:1.8px;
    color:#302c25;

    background:#c4b48f;
    border:1px solid #81765f;
    box-shadow:2px 3px 7px rgba(0,0,0,.14);
}

/* штамп */
.aes-board:after{
    content:"CONFIDENTIAL";
    position:absolute;
    right:22px;
    bottom:15px;

    padding:5px 9px;
    border:2px solid rgba(116,33,28,.55);

    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    font-weight:600;
    letter-spacing:2px;
    color:rgba(116,33,28,.62);

    transform:rotate(-7deg);
    pointer-events:none;
}

.aes-big{
    display:flex;
    flex-direction:column;
    position:relative;
}

/* номер фотографии */
.aes-big:before{
    content:"EVIDENCE PHOTO 01";
    position:absolute;
    z-index:3;
    top:10px;
    left:10px;

    padding:4px 7px;
    background:rgba(20,20,18,.78);
    color:#eee9dc;

    font-family:'IBM Plex Mono', monospace;
    font-size:8px;
    letter-spacing:1px;
}

.aes-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px 14px;
}

.aes-item{
    display:flex;
    flex-direction:column;
    position:relative;
}

.aes-photo{
    position:relative;
    overflow:hidden;
    padding:6px;

    background:#e6dfcf;
    border:1px solid #665f52;
    border-radius:1px;

    box-shadow:
        2px 3px 8px rgba(0,0,0,.18),
        inset 0 0 8px rgba(0,0,0,.08);
}

/* эффект старой фотографии */
.aes-photo:after{
    content:"";
    position:absolute;
    inset:6px;
    pointer-events:none;

    background:
        linear-gradient(
            135deg,
            rgba(62,47,28,.13),
            transparent 35%,
            rgba(255,255,255,.05) 60%,
            rgba(35,27,18,.16)
        );

    box-shadow:inset 0 0 20px rgba(19,16,12,.18);
}

.aes-big .aes-photo{
    height:470px;
}

.aes-grid .aes-photo{
    height:160px;
}

.aes-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;

    filter:saturate(.72) contrast(1.06) sepia(.12);
    transition:.35s ease;
}

.aes-photo:hover img{
    transform:scale(1.025);
    filter:saturate(.9) contrast(1.08) sepia(.05);
}

.aes-caption{
    box-sizing:border-box;
    margin-top:7px;
    padding:5px 6px 4px;

    text-align:left;
    font-family:'IBM Plex Mono', monospace;
    font-size:9px;
    font-weight:500;
    line-height:1.3;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#39352f;

    border-bottom:1px solid rgba(67,61,51,.45);
}

.aes-caption:before{
    content:"SUBJECT / ";
    color:#7a2d28;
    font-weight:600;
}

.aes-name{
    position:relative;
    margin-top:15px;
    padding:13px 8px 8px;

    text-align:center;
    font-family:'Special Elite', monospace;
    font-size:24px;
    line-height:1.25;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#292723;

    border-top:1px solid #777062;
    border-bottom:1px solid #777062;
}

.aes-name:before{
    content:"IDENTIFICATION";
    display:block;
    margin-bottom:7px;

    font-family:'IBM Plex Mono', monospace;
    font-size:8px;
    font-weight:600;
letter-spacing:2.5px;
    color:#792f29;
}

.aes-name span{
    display:block;
    margin-top:5px;

    font-family:'Allura', cursive;
    font-size:27px;
    line-height:1;
    letter-spacing:.5px;
    text-transform:none;
    color:#5d5148;
}

/* разные лёгкие наклоны архивных снимков */
.aes-item:nth-child(2) .aes-photo,
.aes-item:nth-child(5) .aes-photo{
    transform:rotate(.45deg);
}

.aes-item:nth-child(3) .aes-photo,
.aes-item:nth-child(6) .aes-photo{
    transform:rotate(-.4deg);
}

@media(max-width:700px){
    .aes-board{
        width:94%;
        grid-template-columns:1fr;
    }

    .aes-big .aes-photo{
        height:430px;
    }

    .aes-board:after{
        display:none;
    }
}
</style>

<div class="aes-board">

    <div class="aes-big">

        <div class="aes-photo">
            <img src="ЛИЧНОЕ ФОТО">
        </div>

        <div class="aes-caption">photo</div>

        <div class="aes-name">
            ИМЯ ФАМИЛИЯ
            <span></span>
        </div>

    </div>

    <div class="aes-grid">

        <div class="aes-item">
            <div class="aes-photo">
                <img src="РАБОЧЕЕ МЕСТО">
            </div>
            <div class="aes-caption">work place</div>
        </div>

        <div class="aes-item">
            <div class="aes-photo">
                <img src="НАПИТОК">
            </div>
            <div class="aes-caption">drink</div>
        </div>

        <div class="aes-item">
            <div class="aes-photo">
                <img src="ЛЮБИМАЯ ЕДА">
            </div>
            <div class="aes-caption">food</div>
        </div>

        <div class="aes-item">
            <div class="aes-photo">
                <img src="ЛЮБИМЫЙ ЦВЕТ">
            </div>
            <div class="aes-caption">color</div>
        </div>

        <div class="aes-item">
            <div class="aes-photo">
                <img src="ВРЕМЯ ГОДА">
            </div>
            <div class="aes-caption">season</div>
        </div>

        <div class="aes-item">
            <div class="aes-photo">
                <img src="ЖИВОТНОЕ">
            </div>
            <div class="aes-caption">animal</div>
        </div>

    </div>

</div>
[/html]

[html]
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Oswald:wght@400;500;600&display=swap');

.radio-card{
    box-sizing:border-box;
    position:relative;
    width:600px;
    margin:28px auto;
    padding:18px;

    display:grid;
    grid-template-columns:155px 1fr;
    gap:20px;

    overflow:hidden;
    color:#d7d9d8;
    font-family:'IBM Plex Mono', monospace;

    background:
        radial-gradient(
            circle at 18% 15%,
            rgba(155,24,29,.14),
            transparent 28%
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.012) 0,
            rgba(255,255,255,.012) 1px,
            transparent 1px,
            transparent 5px
        ),
        linear-gradient(
            145deg,
            #232627 0%,
            #111415 55%,
            #080a0b 100%
        );

    border:1px solid #3c4142;
    border-radius:6px;

    box-shadow:
        0 14px 35px rgba(0,0,0,.42),
        inset 0 1px 0 rgba(255,255,255,.05),
        inset 0 0 45px rgba(0,0,0,.45);
}

/* декоративные винты */

.radio-screw{
    position:absolute;
    width:5px;
    height:5px;

    border-radius:50%;
    background:#64696a;

    box-shadow:
        inset 1px 1px 1px rgba(255,255,255,.2),
        0 1px 2px rgba(0,0,0,.7);
}

.radio-screw.one{
    top:8px;
    left:8px;
}

.radio-screw.two{
    top:8px;
    right:8px;
}

.radio-screw.three{
    bottom:8px;
    left:8px;
}

.radio-screw.four{
    right:8px;
    bottom:8px;
}

/* Фото ведущего */

.radio-host{
    position:relative;
}

.radio-photo{
    box-sizing:border-box;
    position:relative;
    width:155px;
    height:155px;
    padding:5px;

    overflow:hidden;
    background:#090b0c;

    border:1px solid #4b5051;
    border-radius:3px;

    box-shadow:
        0 5px 14px rgba(0,0,0,.45),
        inset 0 0 0 1px rgba(255,255,255,.035);
}

.radio-photo img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;

    filter:
        saturate(.72)
        contrast(1.12)
        brightness(.83);

    transition:.35s ease;
}

.radio-photo:hover img{
    transform:scale(1.035);

    filter:
        saturate(.92)
        contrast(1.1)
        brightness(.92);
}

.radio-photo:after{
    content:"";
    position:absolute;
    inset:5px;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(0,0,0,.35)
        ),
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.025) 0,
            rgba(255,255,255,.025) 1px,
            transparent 1px,
            transparent 3px
        );

    box-shadow:inset 0 0 18px rgba(0,0,0,.45);
}

.radio-camera-label{
    position:absolute;
    z-index:3;
    top:10px;
    left:10px;

    padding:3px 5px;

    font-size:7px;
    letter-spacing:1.1px;
    text-transform:uppercase;

    color:#dedede;
    background:rgba(4,5,5,.72);
    border-left:2px solid #a2272c;
}

.radio-host-name{
    margin-top:9px;
    padding:7px 5px;

    text-align:center;
    font-family:'Oswald', sans-serif;
    font-size:14px;
    font-weight:500;
    line-height:1.25;
    letter-spacing:1px;
    text-transform:uppercase;

    color:#e2e2df;
    background:#171a1b;
    border:1px solid #353a3b;
}

.radio-host-name span{
    display:block;
    margin-top:3px;

    font-family:'IBM Plex Mono', monospace;
    font-size:7px;
    font-weight:400;
    letter-spacing:1.4px;

    color:#878d8d;
}

/* Контент */

.radio-content{
    min-width:0;
}

.radio-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    margin-bottom:12px;
}

.radio-station{
    display:flex;
    align-items:baseline;
    gap:7px;
}

.radio-frequency{
    font-family:'Oswald', sans-serif;
    font-size:30px;
    font-weight:500;
    line-height:1;
    letter-spacing:1px;

    color:#e5e7e4;

    text-shadow:
        0 0 8px rgba(255,255,255,.08);
}

.radio-fm{
    font-size:9px;
    letter-spacing:1.5px;
    color:#8c9292;
}

.radio-live{
    padding:5px 8px;

    font-size:8px;
    font-weight:600;
    letter-spacing:1.5px;
    text-transform:uppercase;

    color:#fff;
    background:#9b2429;
    border:1px solid #c14448;
    border-radius:2px;

    box-shadow:
        0 0 10px rgba(155,36,41,.34),
        inset 0 1px 0 rgba(255,255,255,.12);
}

.radio-live:before{
    content:"●";
    display:inline-block;
    margin-right:6px;

    font-size:7px;

    animation:radio-light 1.2s ease-in-out infinite;
}

@keyframes radio-light{
    0%, 45%{
        opacity:1;
    }

    46%, 100%{
        opacity:.25;
    }
}

/* Шкала частот */

.radio-scale{
    position:relative;
    height:20px;
    margin-bottom:13px;

    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    border-top:1px solid #393e3f;
    border-bottom:1px solid #393e3f;
}

.radio-scale span{
    width:1px;
    height:6px;
    background:#596061;
}

.radio-scale span:nth-child(5n){
    height:11px;
    background:#898e8e;
}

.radio-scale:after{
    content:"";
    position:absolute;
    top:0;
    left:64%;

    width:2px;
    height:100%;

    background:#b52d33;

    box-shadow:0 0 7px rgba(181,45,51,.75);
}

/* Название передачи */

.radio-show-title{
    margin-bottom:5px;

    font-family:'Oswald', sans-serif;
    font-size:28px;
    font-weight:500;
    line-height:1.1;
    letter-spacing:.8px;
    text-transform:uppercase;

    color:#ececea;
}

.radio-show-info{
    margin-bottom:11px;

    font-size:8px;
    line-height:1.55;
    letter-spacing:1.2px;
    text-transform:uppercase;

    color:#a92e33;
}

.radio-description{
    box-sizing:border-box;
    min-height:70px;
    padding:10px 12px;

    font-size:10px;
    line-height:1.55;

    color:#bec2c1;
    background:rgba(5,7,7,.45);

    border:1px solid #323738;
    border-left:3px solid #94262b;

    box-shadow:inset 0 0 14px rgba(0,0,0,.25);
}

/* Аудиоволна */

.radio-wave{
    height:31px;
    margin-top:11px;
    padding:0 6px;

    display:flex;
    align-items:center;
    gap:3px;

    overflow:hidden;

    background:#090b0c;
    border:1px solid #303536;
}

.radio-wave span{
    display:block;
    width:3px;
    min-height:3px;

    background:#a82a30;
    box-shadow:0 0 4px rgba(168,42,48,.35);

    animation:radio-wave 1.05s ease-in-out infinite;
}

.radio-wave span:nth-child(1){height:5px;}
.radio-wave span:nth-child(2){height:13px; animation-delay:.08s;}
.radio-wave span:nth-child(3){height:8px; animation-delay:.16s;}
.radio-wave span:nth-child(4){height:21px; animation-delay:.24s;}
.radio-wave span:nth-child(5){height:11px; animation-delay:.32s;}
.radio-wave span:nth-child(6){height:25px; animation-delay:.4s;}
.radio-wave span:nth-child(7){height:9px; animation-delay:.48s;}
.radio-wave span:nth-child(8){height:18px; animation-delay:.56s;}
.radio-wave span:nth-child(9){height:6px; animation-delay:.64s;}
.radio-wave span:nth-child(10){height:23px; animation-delay:.72s;}
.radio-wave span:nth-child(11){height:12px; animation-delay:.8s;}
.radio-wave span:nth-child(12){height:7px; animation-delay:.88s;}
.radio-wave span:nth-child(13){height:19px; animation-delay:.16s;}
.radio-wave span:nth-child(14){height:10px; animation-delay:.32s;}
.radio-wave span:nth-child(15){height:16px; animation-delay:.48s;}
.radio-wave span:nth-child(16){height:5px; animation-delay:.64s;}
.radio-wave span:nth-child(17){height:24px; animation-delay:.8s;}
.radio-wave span:nth-child(18){height:11px; animation-delay:.24s;}
.radio-wave span:nth-child(19){height:17px; animation-delay:.56s;}
.radio-wave span:nth-child(20){height:7px; animation-delay:.88s;}
.radio-wave span:nth-child(21){height:20px; animation-delay:.1s;}
.radio-wave span:nth-child(22){height:9px; animation-delay:.4s;}
.radio-wave span:nth-child(23){height:15px; animation-delay:.7s;}
.radio-wave span:nth-child(24){height:5px; animation-delay:.9s;}

@keyframes radio-wave{
    0%, 100%{
        transform:scaleY(.45);
        opacity:.45;
    }

    50%{
        transform:scaleY(1);
        opacity:1;
    }
}

/* Нижняя служебная строка */

.radio-footer{
    margin-top:8px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;

    font-size:7px;
    line-height:1.4;
    letter-spacing:1.1px;
    text-transform:uppercase;

    color:#747b7b;
}

.radio-signal{
    display:flex;
    align-items:flex-end;
    gap:2px;
}

.radio-signal i{
    display:block;
    width:3px;
    background:#8e9695;
}

.radio-signal i:nth-child(1){height:4px;}
.radio-signal i:nth-child(2){height:7px;}
.radio-signal i:nth-child(3){height:10px;}
.radio-signal i:nth-child(4){height:13px; background:#a82a30;}

/* Адаптация */

@media(max-width:630px){

    .radio-card{
        width:94%;
        grid-template-columns:120px 1fr;
        gap:14px;
        padding:15px;
    }

    .radio-photo{
        width:120px;
        height:120px;
    }

    .radio-frequency{
        font-size:24px;
    }

    .radio-show-title{
        font-size:22px;
    }

    .radio-description{
        font-size:9px;
    }

    .radio-wave span:nth-child(n+19){
        display:none;
    }
}
</style>

<div class="radio-card">

    <span class="radio-screw one"></span>
    <span class="radio-screw two"></span>
    <span class="radio-screw three"></span>
    <span class="radio-screw four"></span>

    <div class="radio-host">

        <div class="radio-photo">

            <div class="radio-camera-label">
                studio 04
            </div>

            <img src="https://upforme.ru/uploads/001c/bd/d1/70/138497.jpg">

        </div>

        <div class="radio-host-name">
            Randy pierce
            <span>host / night broadcast</span>
        </div>

    </div>

    <div class="radio-content">

        <div class="radio-header">

            <div class="radio-station">
                <div class="radio-frequency">93.7</div>
                <div class="radio-fm">FM · LIVERPOOL</div>
            </div>

            <div class="radio-live">
                on air
            </div>

        </div>

        <div class="radio-scale">
            <span></span><span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span><span></span>
        </div>

        <div class="radio-show-title">
            After Midnight
        </div>

        <div class="radio-show-info">
            every night · 22:00–05:00 · live from studio four
        </div>

        <div class="radio-description">
            Ночной эфир о музыке, городских историях и людях,
            которые всё ещё не спят. Звонки слушателей,
            редкие пластинки и разговоры, которые едва ли
            прозвучали бы при дневном свете.
        </div>

        <div class="radio-wave">
            <span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span>
        </div>

        <div class="radio-footer">

            <span>stereo transmission</span>

            <span class="radio-signal">
                signal
                <i></i><i></i><i></i><i></i>
            </span>

            <span>mic channel 01</span>

        </div>

    </div>

</div>
[/html]

[hideprofile]
[html]
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Всплывающие картинки с текстом</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f0f2f5;
            padding: 40px 20px;
        }

        .gallery {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
        }

        .gallery-item {
            cursor: pointer;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            background: white;
        }

        .gallery-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }

        .gallery-item img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            display: block;
        }

        .gallery-item .caption {
            padding: 12px 15px;
            font-size: 14px;
            color: #333;
            text-align: center;
            font-weight: 500;
        }

        /* Модальное окно */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(8px);
            animation: fadeIn 0.3s ease;
        }

        .modal.active {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal-container {
            position: relative;
            max-width: 900px;
            width: 90%;
            max-height: 90vh;
            background: white;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0,0,0,0.5);
            display: flex;
            flex-direction: column;
            animation: slideUp 0.3s ease;
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(30px) scale(0.95);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .modal-image-wrapper {
            position: relative;
            background: #000;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 300px;
            flex-shrink: 0;
        }

        .modal-image-wrapper img {
            width: 100%;
            max-height: 55vh;
            object-fit: contain;
            display: block;
        }

        /* Блок с текстом - теперь со скроллом */
        .modal-text-block {
            padding: 20px 30px 25px;
            background: white;
            border-top: 1px solid #e8ecf1;
            max-height: 45vh;
            overflow-y: auto;
            flex-shrink: 0;
        }

        /* Стилизация скроллбара */
        .modal-text-block::-webkit-scrollbar {
            width: 6px;
        }

        .modal-text-block::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }

        .modal-text-block::-webkit-scrollbar-thumb {
            background: #c1c7d0;
            border-radius: 10px;
        }

        .modal-text-block::-webkit-scrollbar-thumb:hover {
            background: #a0a8b4;
        }

        /* Firefox scrollbar */
        .modal-text-block {
            scrollbar-width: thin;
            scrollbar-color: #c1c7d0 #f1f1f1;
        }

        .modal-text-block .title {
            font-size: 22px; /* был 24px - уменьшил на 2 кегля */
            font-weight: 700;
            color: #1a1a2e;
            margin-bottom: 8px;
            line-height: 1.3;
        }

        .modal-text-block .subtitle {
            font-size: 15px; /* был 16px - уменьшил на 1 кегль */
            color: #6c7a8a;
            margin-bottom: 10px;
            font-weight: 500;
        }

        .modal-text-block .description {
            font-size: 14px; /* был 15px - уменьшил на 1 кегль */
            line-height: 1.7; /* чуть увеличил для читаемости */
            color: #2d3436;
            margin-bottom: 12px;
        }

        .modal-text-block .description p {
            margin-bottom: 8px;
        }

        .modal-text-block .tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 10px;
        }

        .modal-text-block .tag {
            background: #eef2f7;
            color: #4a5b6e;
            padding: 3px 12px;
            border-radius: 20px;
            font-size: 11px; /* был 12px - уменьшил на 1 кегль */
            font-weight: 600;
            letter-spacing: 0.3px;
        }

        .modal-text-block .meta {
            display: flex;
            gap: 20px;
            margin-top: 10px;
            font-size: 12px; /* был 13px - уменьшил на 1 кегль */
            color: #8a9aa8;
            border-top: 1px solid #f0f2f5;
            padding-top: 10px;
        }

        .modal-text-block .meta span {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        /* Кнопка закрытия */
        .close-btn {
            position: absolute;
            top: 15px;
            right: 15px;
            color: white;
            font-size: 32px;
            font-weight: bold;
            cursor: pointer;
            transition: 0.3s;
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(0,0,0,0.4);
            border: 2px solid rgba(255,255,255,0.2);
            z-index: 10;
            line-height: 1;
        }

        .close-btn:hover {
            background: rgba(255,0,0,0.5);
            transform: rotate(90deg);
        }

        /* Навигационные кнопки */
        .nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            color: white;
            font-size: 28px;
            cursor: pointer;
            padding: 12px 18px;
            background: rgba(0,0,0,0.4);
            border-radius: 50%;
            transition: 0.3s;
            border: 2px solid rgba(255,255,255,0.15);
            user-select: none;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
            backdrop-filter: blur(4px);
        }

        .nav-btn:hover {
            background: rgba(255,255,255,0.2);
            transform: translateY(-50%) scale(1.05);
        }

        .prev-btn {
            left: 15px;
        }

        .next-btn {
            right: 15px;
        }

        /* Индикатор счётчика */
        .counter {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            color: white;
            font-size: 14px;
            background: rgba(0,0,0,0.5);
            padding: 5px 18px;
            border-radius: 20px;
            backdrop-filter: blur(4px);
            border: 1px solid rgba(255,255,255,0.1);
            z-index: 10;
            font-weight: 500;
            letter-spacing: 0.5px;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* Адаптивность */
        @media (max-width: 768px) {
            .modal-container {
                width: 95%;
                max-height: 95vh;
                border-radius: 12px;
            }

            .modal-image-wrapper img {
                max-height: 40vh;
            }

            .modal-text-block {
                padding: 15px 18px 18px;
                max-height: 50vh;
            }

            .modal-text-block .title {
                font-size: 19px; /* был 20px - уменьшил на 1 кегль */
            }

            .modal-text-block .subtitle {
                font-size: 14px;
            }

            .modal-text-block .description {
                font-size: 13px; /* был 14px - уменьшил на 1 кегль */
                line-height: 1.6;
            }

            .close-btn {
                top: 10px;
                right: 10px;
                font-size: 26px;
                width: 38px;
                height: 38px;
            }

            .nav-btn {
                font-size: 20px;
                padding: 8px 12px;
                width: 40px;
                height: 40px;
            }

            .prev-btn {
                left: 8px;
            }

            .next-btn {
                right: 8px;
            }

            .counter {
                top: 12px;
                font-size: 12px;
                padding: 3px 14px;
            }

            .modal-text-block .meta {
                flex-wrap: wrap;
                gap: 10px;
                font-size: 11px;
            }

            .modal-text-block .tag {
                font-size: 10px;
            }
        }

        @media (max-width: 480px) {
            .modal-image-wrapper img {
                max-height: 30vh;
            }

            .modal-text-block {
                max-height: 55vh;
                padding: 12px 15px 15px;
            }

            .modal-text-block .title {
                font-size: 17px;
            }

            .modal-text-block .description {
                font-size: 12px;
            }
        }
    </style>
</head>
<body>

    <div class="gallery" id="gallery"></div>

    <!-- Модальное окно -->
    <div class="modal" id="modal">
        <div class="modal-container">
            <div class="modal-image-wrapper">
                <span class="close-btn" id="closeBtn">&times;</span>
                <span class="counter" id="counter">1 / 5</span>
                <img id="modalImage" src="" alt="Изображение">
                <span class="nav-btn prev-btn" id="prevBtn">❮</span>
                <span class="nav-btn next-btn" id="nextBtn">❯</span>
            </div>

            <!-- БЛОК С ТЕКСТОМ (со скроллом) -->
            <div class="modal-text-block" id="textBlock">
                <div class="title" id="modalTitle">Заголовок</div>
                <div class="subtitle" id="modalSubtitle">Подзаголовок</div>
                <div class="description" id="modalDescription">
                    <p>Основное описание изображения. Здесь может быть любой текст с форматированием.</p>
                </div>
                <div class="tags" id="modalTags">
                    <span class="tag">#природа</span>
                    <span class="tag">#пейзаж</span>
                    <span class="tag">#фотография</span>
                </div>
                <div class="meta">
                    <span>📅 <span id="modalDate">12.05.2026</span></span>
                    <span>👁️ <span id="modalViews">1 234</span></span>
                    <span>❤️ <span id="modalLikes">456</span></span>
                </div>
            </div>
        </div>
    </div>

    <script>
        // ===== ДАННЫЕ ГАЛЕРЕИ (с большим текстом для демонстрации скролла) =====
        const images = [
            {
                url: 'https://upforme.ru/uploads/000f/09/5e/5678/783654.png',
                title: 'Закат в горах',
                subtitle: 'Национальный парк "Скалистые вершины"',
                description: `
                    <p>Этот потрясающий закат был снят на высоте 2500 метров над уровнем моря.
                    Золотистые лучи солнца пробиваются сквозь облака, создавая уникальную игру света и теней.</p>
                    <p>Горы покрыты изумрудной зеленью, а на горизонте виднеются снежные шапки
                    самых высоких пиков. Это место считается одним из лучших для наблюдения за закатом
                    во всей стране.</p>
                    <p>Многие фотографы специально приезжают сюда за несколько часов до заката,
                    чтобы занять лучшую точку для съёмки. В ясную погоду здесь можно увидеть
                    более 50 оттенков красного, оранжевого и фиолетового.</p>
                    <p>Местные жители рассказывают легенду о том, что в этих горах живёт дух
                    гор, который окрашивает небо в такие яркие цвета, чтобы привлечь внимание
                    путников и напомнить им о красоте природы.</p>
                `,
                tags: ['#природа', '#горы', '#закат', '#пейзаж', '#фотография'],
                date: '12.05.2026',
                views: '1 234',
                likes: '456'
            },
            {
                url: 'https://upforme.ru/uploads/000f/09/5e/5678/25295.png',
                title: 'Городской пейзаж',
                subtitle: 'Ночной мегаполис с высоты птичьего полёта',
                description: `
                    <p>Панорама ночного города, который никогда не спит. Миллионы огней создают
                    впечатляющую картину, отражаясь в тёмных водах реки.</p>
                    <p>На переднем плане видны небоскрёбы делового центра, а за ними — спальные районы,
                    окутанные мягким светом уличных фонарей. Это один из самых узнаваемых городских
                    пейзажей в мире.</p>
                    <p>Архитектурные решения зданий отражают разные эпохи — от классицизма до
                    ультрасовременных футуристических форм. Особенно выделяется башня в центре,
                    которая подсвечивается синим и золотым.</p>
                `,
                tags: ['#город', '#ночь', '#огоньки', '#архитектура'],
                date: '10.05.2026',
                views: '3 456',
                likes: '789'
            },
            {
                url: 'https://upforme.ru/uploads/000f/09/5e/5678/171367.png',
                title: 'Морской закат',
                subtitle: 'Побережье Тихого океана',
                description: `
                    <p>Волны мягко накатывают на берег, окрашивая песок в золотистые оттенки.
                    Небо переливается всеми цветами радуги — от нежного розового до глубокого фиолетового.</p>
                    <p>Это идеальное место для романтической прогулки или медитации.
                    Здесь можно услышать только шум прибоя и крики чаек вдалеке.</p>
                    <p>Пляж тянется на несколько километров вдоль побережья, и в часы заката
                    здесь почти нет людей. Только редкие рыбаки и влюблённые пары приходят
                    насладиться этим волшебным зрелищем.</p>
                `,
                tags: ['#море', '#закат', '#пляж', '#океан'],
                date: '08.05.2026',
                views: '2 890',
                likes: '634'
            },
            {
                url: 'https://upforme.ru/uploads/000f/09/5e/5678/999452.png',
                title: 'Лесная тропа',
                subtitle: 'Заповедник "Зелёное сердце"',
                description: `
                    <p>Таинственная лесная тропа, уходящая вглубь древнего заповедника.
                    Лучи солнца пробиваются сквозь густую крону деревьев, создавая магическую атмосферу.</p>
                    <p>В этом лесу растут вековые дубы и клёны, а воздух наполнен ароматом хвои
                    и лесных ягод. Тропа ведёт к живописному водопаду, который скрыт в глубине
                    заповедника.</p>
                    <p>Маршрут проходит через несколько экосистем, и путешественники могут
                    наблюдать, как меняется растительность — от густых ельников до светлых
                    берёзовых рощ. Особенно красиво здесь весной, когда цветут подснежники.</p>
                    <p>Заповедник был основан более ста лет назад и сейчас находится под охраной
                    государства. Здесь обитают редкие виды животных и птиц, занесённые в Красную книгу.</p>
                `,
                tags: ['#лес', '#природа', '#тропа', '#заповедник'],
                date: '05.05.2026',
                views: '1 567',
                likes: '321'
            },
            {
                url: 'https://upforme.ru/uploads/000f/09/5e/5678/87156.png',
                title: 'Ночное небо',
                subtitle: 'Млечный Путь над пустыней',
                description: `
                    <p>Это невероятное фото было сделано в пустыне, где нет светового загрязнения.
                    Тысячи звёзд и Млечный Путь сияют так ярко, что кажется, будто можно дотянуться
                    рукой до неба.</p>
                    <p>На переднем плане видны силуэты скал, которые были сформированы ветрами
                    за миллионы лет. Это напоминание о том, как малы мы перед величием Вселенной.</p>
                    <p>Фотографы называют это место «Окно в космос», потому что здесь звёздное небо
                    видно особенно отчётливо. В безлунные ночи можно увидеть даже туманности и
                    галактики, невидимые невооружённым глазом в городе.</p>
                `,
                tags: ['#звёзды', '#млечныйпуть', '#пустыня', '#космос'],
                date: '01.05.2026',
                views: '4 321',
                likes: '987'
            },
            {
                url: 'https://upforme.ru/uploads/000f/09/5e/5678/862494.png',
                title: 'Цветущий сад',
                subtitle: 'Ботанический сад в весенний день',
                description: `
                    <p>Сакура и магнолии расцвели в этом прекрасном ботаническом саду.
                    Розовые лепестки кружатся в воздухе, создавая ощущение сказки.</p>
                    <p>Сад был основан более ста лет назад и сейчас содержит более 2000 видов
                    растений со всего мира. Весной он превращается в настоящий рай для
                    фотографов и любителей природы.</p>
                    <p>Особую ценность представляют коллекции рододендронов и японских клёнов,
                    которые привлекают ботаников со всего мира. Каждый год в саду проводится
                    фестиваль цветения, собирающий тысячи посетителей.</p>
                    <p>В тенистых аллеях сада можно встретить белок и певчих птиц, которые
                    чувствуют себя здесь как в естественной среде обитания. Это место стало
                    настоящим оазисом спокойствия в шумном городе.</p>
                `,
                tags: ['#сад', '#цветы', '#весна', '#сакура'],
                date: '28.04.2026',
                views: '2 222',
                likes: '543'
            }
        ];

        // ===== ПЕРЕМЕННЫЕ СОСТОЯНИЯ =====
        let currentIndex = 0;
        const gallery = document.getElementById('gallery');
        const modal = document.getElementById('modal');
        const modalImage = document.getElementById('modalImage');
        const modalTitle = document.getElementById('modalTitle');
        const modalSubtitle = document.getElementById('modalSubtitle');
        const modalDescription = document.getElementById('modalDescription');
        const modalTags = document.getElementById('modalTags');
        const modalDate = document.getElementById('modalDate');
        const modalViews = document.getElementById('modalViews');
        const modalLikes = document.getElementById('modalLikes');
        const counter = document.getElementById('counter');
        const textBlock = document.getElementById('textBlock');

        // ===== РЕНДЕР ГАЛЕРЕИ =====
        function renderGallery() {
            gallery.innerHTML = '';
            images.forEach((img, index) => {
                const item = document.createElement('div');
                item.className = 'gallery-item';
                item.innerHTML = `
                    <img src="${img.url}" alt="${img.title}" loading="lazy">
                    <div class="caption">${img.title}</div>
                `;
                item.addEventListener('click', () => openModal(index));
                gallery.appendChild(item);
            });
        }

        // ===== ОТКРЫТЬ МОДАЛЬНОЕ ОКНО =====
        function openModal(index) {
            currentIndex = index;
            updateModal();
            modal.classList.add('active');
            document.body.style.overflow = 'hidden';
            // Сбрасываем скролл текстового блока при открытии
            textBlock.scrollTop = 0;
        }

        // ===== ЗАКРЫТЬ МОДАЛЬНОЕ ОКНО =====
        function closeModal() {
            modal.classList.remove('active');
            document.body.style.overflow = 'auto';
        }

        // ===== ОБНОВИТЬ СОДЕРЖИМОЕ МОДАЛЬНОГО ОКНА =====
        function updateModal() {
            const img = images[currentIndex];
           
            // Картинка
            modalImage.src = img.url;
            modalImage.alt = img.title;
           
            // Текстовый блок
            modalTitle.textContent = img.title;
            modalSubtitle.textContent = img.subtitle || '';
            modalDescription.innerHTML = img.description || '<p>Описание отсутствует</p>';
           
            // Теги
            if (img.tags && img.tags.length > 0) {
                modalTags.innerHTML = img.tags.map(tag =>
                    `<span class="tag">${tag}</span>`
                ).join('');
            } else {
                modalTags.innerHTML = '';
            }
           
            // Метаданные
            modalDate.textContent = img.date || 'Дата не указана';
            modalViews.textContent = img.views || '0';
            modalLikes.textContent = img.likes || '0';
           
            // Счётчик
            counter.textContent = `${currentIndex + 1} / ${images.length}`;

            // Сбрасываем скролл при переключении
            textBlock.scrollTop = 0;
        }

        // ===== НАВИГАЦИЯ =====
        function prevImage() {
            currentIndex = (currentIndex - 1 + images.length) % images.length;
            updateModal();
        }

        function nextImage() {
            currentIndex = (currentIndex + 1) % images.length;
            updateModal();
        }

        // ===== ОБРАБОТЧИКИ СОБЫТИЙ =====
        document.getElementById('closeBtn').addEventListener('click', closeModal);
        document.getElementById('prevBtn').addEventListener('click', prevImage);
        document.getElementById('nextBtn').addEventListener('click', nextImage);

        modal.addEventListener('click', (e) => {
            if (e.target === modal) closeModal();
        });

        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') closeModal();
            if (e.key === 'ArrowLeft') prevImage();
            if (e.key === 'ArrowRight') nextImage();
        });

        // ===== ЗАПУСК =====
        renderGallery();
    </script>
</body>
</html>

[/html]

[hideprofile]
[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Журнал "Семейный Очаг"</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto:wght@300;400;700&display=swap');

body{background:#e8ddd0;font-family:'Roboto',sans-serif;padding:20px;display:flex;flex-direction:column;align-items:center}

/* ===== ОБЛОЖКА ===== */
.magazine-wrapper{max-width:1200px;width:100%}
.cover{background:linear-gradient(135deg,#2c1810,#4a2820);border-radius:15px;padding:40px;margin-bottom:30px;color:#f5ede4;position:relative;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.4)}
.cover::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y="30" font-size="12" opacity="0.05" fill="white">СЕМЕЙНЫЙ ОЧАГ</text><text y="50" font-size="10" opacity="0.03" fill="white">СОВЕТЫ</text><text y="70" font-size="8" opacity="0.02" fill="white">ГОРОСКОП</text></svg>');background-size:200px}
.cover-content{position:relative;z-index:1;text-align:center}
.cover .badge{display:inline-block;background:#c41e3a;padding:5px 20px;border-radius:20px;font-size:12px;letter-spacing:3px;text-transform:uppercase;margin-bottom:15px}
.cover h1{font-family:'Playfair Display',serif;font-size:64px;font-weight:700;letter-spacing:5px;text-shadow:0 4px 20px rgba(0,0,0,.5);margin-bottom:10px}
.cover h1 span{color:#d4a574}
.cover .subtitle{font-size:20px;letter-spacing:8px;opacity:.7;margin-bottom:20px}
.cover .date{font-size:14px;opacity:.5;letter-spacing:2px}
.cover .features{display:flex;justify-content:center;gap:30px;margin-top:25px;flex-wrap:wrap}
.cover .features span{background:rgba(255,255,255,.1);padding:8px 20px;border-radius:20px;font-size:13px;letter-spacing:1px;backdrop-filter:blur(5px)}

/* ===== НАВИГАЦИЯ ПО СТРАНИЦАМ ===== */
.page-nav{display:flex;justify-content:center;gap:10px;margin-bottom:25px;flex-wrap:wrap}
.page-nav button{background:transparent;border:2px solid #4a2820;color:#4a2820;padding:8px 20px;border-radius:25px;cursor:pointer;font-family:'Roboto',sans-serif;font-weight:700;font-size:13px;transition:.3s;letter-spacing:1px}
.page-nav button:hover{background:#4a2820;color:#f5ede4}
.page-nav button.active{background:#4a2820;color:#f5ede4}

/* ===== РАЗВОРОТ ===== */
.spread{display:none;grid-template-columns:1fr 1fr;gap:25px;margin-bottom:30px;animation:fadeIn .5s}
.spread.active{display:grid}

@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ===== СТРАНИЦА ===== */
.page{background:linear-gradient(170deg,#fcf7f0,#f5ede4);border-radius:12px;padding:30px;box-shadow:0 4px 20px rgba(0,0,0,.1);position:relative;min-height:500px}
.page::before{content:'';position:absolute;top:10px;left:10px;right:10px;bottom:10px;border:1px solid rgba(74,40,32,.08);border-radius:8px;pointer-events:none}
.page-number{position:absolute;bottom:15px;right:25px;font-size:12px;color:#c4b5a5;font-family:'Playfair Display',serif}
.page-title{font-family:'Playfair Display',serif;font-size:24px;color:#2c1810;margin-bottom:5px;border-bottom:2px solid #d4a574;padding-bottom:8px;display:inline-block}
.page-subtitle{font-size:14px;color:#8a7a6a;margin-bottom:15px;font-style:italic}

/* ===== ОТРЫВНЫЕ КУПОНЫ ===== */
.coupon{background:linear-gradient(135deg,#fff8f0,#f5ede4);border:2px dashed #d4a574;border-radius:8px;padding:18px;margin:12px 0;position:relative;transition:.3s;cursor:pointer}
.coupon:hover{transform:scale(1.01);box-shadow:0 4px 15px rgba(212,165,116,.2)}
.coupon::after{content:'✂️ Оторвите';position:absolute;bottom:-10px;right:15px;background:#f5ede4;padding:0 10px;font-size:10px;color:#8a7a6a;letter-spacing:1px}
.coupon .title{font-weight:700;color:#2c1810;font-size:16px}
.coupon .text{font-size:13px;color:#5a4a3a;margin:5px 0;line-height:1.5}
.coupon .code{display:inline-block;background:#2c1810;color:#f5ede4;padding:3px 15px;border-radius:15px;font-size:12px;letter-spacing:2px;font-family:'Courier New',monospace}

/* ===== ГОРОСКОП ===== */
.zodiac-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin:10px 0}
.zodiac-item{background:rgba(212,165,116,.1);padding:10px;border-radius:8px;text-align:center;font-size:12px;border:1px solid rgba(212,165,116,.2);transition:.3s;cursor:pointer}
.zodiac-item:hover{background:rgba(212,165,116,.2);transform:scale(1.05)}
.zodiac-item .sign{font-size:20px;display:block}
.zodiac-item .name{font-weight:700;color:#2c1810;font-size:11px;margin-top:3px}
.zodiac-item .horoscope{display:none;font-size:11px;color:#5a4a3a;margin-top:5px;line-height:1.4;background:rgba(255,255,255,.5);padding:5px;border-radius:4px}
.zodiac-item.active .horoscope{display:block}
.zodiac-item.active{background:rgba(212,165,116,.25);border-color:#d4a574}

/* ===== КРОССВОРД ===== */
.crossword{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;max-width:400px;margin:10px auto}
.crossword-cell{aspect-ratio:1;background:white;border:1px solid #c4b5a5;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:#2c1810;transition:.2s;cursor:pointer}
.crossword-cell.black{background:#2c1810;border-color:#2c1810}
.crossword-cell.filled{background:#f0e8dd}
.crossword-cell.highlight{background:#d4a574;color:white}
.crossword-cell:hover:not(.black){background:#f0e8dd}
.clues{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;font-size:12px}
.clues div{padding:8px;background:rgba(255,255,255,.5);border-radius:6px}
.clues .num{font-weight:700;color:#2c1810}

/* ===== СОВЕТЫ ===== */
.tips-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0}
.tip{background:rgba(255,255,255,.6);padding:15px;border-radius:8px;border-left:4px solid #d4a574}
.tip .icon{font-size:24px}
.tip h4{color:#2c1810;font-size:14px;margin:5px 0}
.tip p{font-size:12px;color:#5a4a3a;line-height:1.5}

/* ===== РЕЦЕПТ ===== */
.recipe{background:rgba(255,255,255,.6);border-radius:8px;padding:15px;margin:10px 0}
.recipe .ingredients{display:grid;grid-template-columns:1fr 1fr;gap:5px;font-size:13px;margin:8px 0}
.recipe .ingredients li{list-style:none;padding:3px 0;border-bottom:1px dashed rgba(0,0,0,.05)}
.recipe .steps{font-size:13px;line-height:1.6;color:#5a4a3a}

/* ===== АДАПТИВ ===== */
@media(max-width:768px){
.spread{grid-template-columns:1fr;gap:15px}
.cover h1{font-size:36px}
.cover .features{flex-direction:column;align-items:center}
.page{padding:18px;min-height:auto}
.coupon{padding:12px}
.tips-grid{grid-template-columns:1fr}
.zodiac-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}
.crossword{max-width:280px}
.clues{grid-template-columns:1fr}
}
@media(max-width:480px){
.cover{padding:20px}
.cover h1{font-size:28px}
.cover .subtitle{font-size:14px;letter-spacing:4px}
.page-title{font-size:20px}
}
</style>
</head>
<body>

<div class="magazine-wrapper">

<!-- ===== ОБЛОЖКА ===== -->
<div class="cover">
<div class="cover-content">
<div class="badge">⭐ Специальный выпуск</div>
<h1>СЕМЕЙНЫЙ <span>ОЧАГ</span></h1>
<div class="subtitle">УЮТ • ЗДОРОВЬЕ • СЧАСТЬЕ</div>
<div class="date">📅 Август 2026 • № 8 (128)</div>
<div class="features">
<span>🍳 Вкусные рецепты</span>
<span>🔮 Гороскоп на месяц</span>
<span>🧩 Кроссворд</span>
<span>💡 Полезные советы</span>
<span>✂️ Купоны со скидками</span>
</div>
</div>
</div>

<!-- ===== НАВИГАЦИЯ ===== -->
<div class="page-nav">
<button class="active" onclick="openSpread(0)">📖 Разворот 1</button>
<button onclick="openSpread(1)">📖 Разворот 2</button>
<button onclick="openSpread(2)">📖 Разворот 3</button>
</div>

<!-- ===== РАЗВОРОТ 1: СОВЕТЫ + КУПОНЫ ===== -->
<div class="spread active" id="spread0">
<!-- Левая страница: Полезные советы -->
<div class="page">
<span class="page-number">Стр. 2</span>
<div class="page-title">💡 Полезные советы</div>
<div class="page-subtitle">Лайфхаки для дома и семьи</div>
<div class="tips-grid">
<div class="tip">
<div class="icon">🧹</div>
<h4>Уборка без химии</h4>
<p>Смешайте уксус (1:1 с водой) — отличное средство для мытья стёкол и дезинфекции поверхностей.</p>
</div>
<div class="tip">
<div class="icon">🌿</div>
<h4>Комнатные растения</h4>
<p>Поливайте цветы водой, в которой лежала банановая кожура — это отличное натуральное удобрение.</p>
</div>
<div class="tip">
<div class="icon">👕</div>
<h4>Пятна от кофе</h4>
<p>Посыпьте свежее пятно солью, подождите 5 минут и постирайте — кофе исчезнет без следа.</p>
</div>
<div class="tip">
<div class="icon">🍋</div>
<h4>Чистый чайник</h4>
<p>Прокипятите воду с лимонной кислотой (1 ч.л.) — накипь растворится быстрее, чем за 10 минут.</p>
</div>
</div>
<div style="margin-top:15px;padding:12px;background:#d4a57420;border-radius:8px;text-align:center;border:1px solid #d4a57440">
<strong>🌟 Совет дня:</strong> "Счастье — это когда утром хочется идти на работу, а вечером — домой!"
</div>
</div>

<!-- Правая страница: Отрывные купоны -->
<div class="page">
<span class="page-number">Стр. 3</span>
<div class="page-title">✂️ Отрывные купоны</div>
<div class="page-subtitle">Скидки и специальные предложения</div>

<div class="coupon" onclick="tearCoupon(this)">
<div class="title">🎁 Скидка 20% на ужин в ресторане</div>
<div class="text">При предъявлении купона — скидка на весь заказ. Действует до 30 сентября.</div>
<div class="code">CODE: FAMILY20</div>
</div>

<div class="coupon" onclick="tearCoupon(this)">
<div class="title">🧴 Бесплатная доставка косметики</div>
<div class="text">При заказе от 1500 рублей. Не суммируется с другими акциями.</div>
<div class="code">CODE: BEAUTYFREE</div>
</div>

<div class="coupon" onclick="tearCoupon(this)">
<div class="title">📚 Книга в подарок</div>
<div class="text">При покупке двух книг в нашем магазине — третья в подарок! Акция до конца месяца.</div>
<div class="code">CODE: READMORE</div>
</div>

<div style="margin-top:10px;font-size:11px;color:#8a7a6a;text-align:center;border-top:1px dashed #d4a574;padding-top:10px">
✂️ Нажмите на купон, чтобы "оторвать" его
</div>
</div>
</div>

<!-- ===== РАЗВОРОТ 2: ГОРОСКОП + КРОССВОРД ===== -->
<div class="spread" id="spread1">
<!-- Левая страница: Гороскоп -->
<div class="page">
<span class="page-number">Стр. 4</span>
<div class="page-title">🔮 Гороскоп на месяц</div>
<div class="page-subtitle">Что звёзды готовят для вас</div>
<p style="font-size:13px;color:#5a4a3a;margin-bottom:12px;font-style:italic">Нажмите на знак, чтобы узнать прогноз</p>
<div class="zodiac-grid" id="zodiacGrid"></div>
</div>

<!-- Правая страница: Кроссворд -->
<div class="page">
<span class="page-number">Стр. 5</span>
<div class="page-title">🧩 Кроссворд</div>
<div class="page-subtitle">Проверьте свою эрудицию</div>
<div class="crossword" id="crossword"></div>
<div class="clues">
<div><strong>По горизонтали:</strong><br>
<span class="num">1.</span> Домашнее животное (4 буквы)<br>
<span class="num">3.</span> Утренняя еда (8 букв)<br>
<span class="num">5.</span> Осенний месяц (7 букв)
</div>
<div><strong>По вертикали:</strong><br>
<span class="num">2.</span> Птица с красной грудкой (7 букв)<br>
<span class="num">4.</span> Самая высокая гора (8 букв)<br>
<span class="num">6.</span> Напиток из ягод (6 букв)
</div>
</div>
<div style="margin-top:10px;font-size:11px;color:#8a7a6a;text-align:center;border-top:1px dashed #d4a574;padding-top:10px">
💡 Нажмите на ячейку, чтобы заполнить (введите букву)
</div>
</div>
</div>

<!-- ===== РАЗВОРОТ 3: РЕЦЕПТЫ + ЕЩЁ КУПОНЫ ===== -->
<div class="spread" id="spread2">
<!-- Левая страница: Рецепт -->
<div class="page">
<span class="page-number">Стр. 6</span>
<div class="page-title">🍳 Кулинарный рецепт</div>
<div class="page-subtitle">Пирог "Яблочный рай"</div>
<div class="recipe">
<h4>📝 Ингредиенты:</h4>
<ul class="ingredients">
<li>🍎 Яблоки — 5 шт.</li>
<li>🥚 Яйца — 3 шт.</li>
<li>🧈 Сливочное масло — 100 г</li>
<li>🍚 Мука — 200 г</li>
<li>🍬 Сахар — 150 г</li>
<li>🥛 Молоко — 100 мл</li>
<li>🧂 Корица — по вкусу</li>
</ul>
<h4>👨‍🍳 Приготовление:</h4>
<div class="steps">
1. Яблоки нарежьте дольками и обжарьте на масле с сахаром и корицей (5 минут).<br>
2. Взбейте яйца с сахаром, добавьте муку и молоко — замесите тесто.<br>
3. Выложите яблоки в форму, залейте тестом и выпекайте при 180°C 35 минут.<br>
4. Подавайте горячим с шариком мороженого или со сметаной.<br>
<strong style="color:#2c1810">🍽️ Приятного аппетита!</strong>
</div>
</div>
</div>

<!-- Правая страница: Ещё купоны -->
<div class="page">
<span class="page-number">Стр. 7</span>
<div class="page-title">✂️ Ещё купоны</div>
<div class="page-subtitle">Экономьте с нами!</div>

<div class="coupon" onclick="tearCoupon(this)">
<div class="title">☕ Кофе в подарок</div>
<div class="text">При покупке десерта в нашей кофейне — кофе бесплатно! Предложение действует по будням.</div>
<div class="code">CODE: COFFEETIME</div>
</div>

<div class="coupon" onclick="tearCoupon(this)">
<div class="title">🎭 Билеты в театр со скидкой 30%</div>
<div class="text">На все спектакли текущего репертуара. Билеты бронируйте заранее!</div>
<div class="code">CODE: THEATRE30</div>
</div>

<div style="margin-top:10px;font-size:11px;color:#8a7a6a;text-align:center;border-top:1px dashed #d4a574;padding-top:10px">
📅 Все купоны действительны до 01.10.2026
</div>
</div>
</div>

</div>

<script>
// ===== ГОРОСКОП =====
const zodiacData = [
{sign:'♈',name:'Овен',text:'Этот месяц принесёт вам новые возможности. Не бойтесь рисковать — удача на вашей стороне!'},
{sign:'♉',name:'Телец',text:'Время для домашнего уюта. Займитесь делами, которые давно откладывали. Результат порадует.'},
{sign:'♊',name:'Близнецы',text:'Общение принесёт плоды. Новые знакомства могут перерасти в полезные связи.'},
{sign:'♋',name:'Рак',text:'Семья — ваш якорь. Проведите время с близкими, это укрепит ваши отношения.'},
{sign:'♌',name:'Лев',text:'Проявите лидерство. Ваш энтузиазм зарядит окружающих на великие дела.'},
{sign:'♍',name:'Дева',text:'Внимание к деталям поможет избежать ошибок. Здоровье требует заботы.'},
{sign:'♎',name:'Весы',text:'Ищите баланс во всём. Гармония принесёт успех в делах и любви.'},
{sign:'♏',name:'Скорпион',text:'Трансформации неизбежны. Примите перемены как шанс на новую жизнь.'},
{sign:'♐',name:'Стрелец',text:'Путешествия и приключения манят. Смело открывайте новые горизонты.'},
{sign:'♑',name:'Козерог',text:'Упорство приведёт к цели. Финансовые вопросы решатся успешно.'},
{sign:'♒',name:'Водолей',text:'Креативность и нестандартные решения приведут к успеху. Доверяйте интуиции.'},
{sign:'♓',name:'Рыбы',text:'Развивайте интуицию. Творческие проекты будут особенно удачными.'}
];

const zodiacGrid = document.getElementById('zodiacGrid');
zodiacData.forEach(z => {
const div = document.createElement('div');
div.className = 'zodiac-item';
div.innerHTML = `<span class="sign">${z.sign}</span><div class="name">${z.name}</div><div class="horoscope">${z.text}</div>`;
div.onclick = function() {
this.classList.toggle('active');
document.querySelectorAll('.zodiac-item').forEach(el => {
if(el !== this) el.classList.remove('active');
});
};
zodiacGrid.appendChild(div);
});

// ===== КРОССВОРД =====
const crosswordData = [
['','','','','','','',''],
['','','','','','','',''],
['','','','','','','',''],
['','','','','','','',''],
['','','','','','','',''],
['','','','','','','',''],
['','','','','','','',''],
['','','','','','','','']
];

// Черные клетки
const blackCells = [[0,3],[0,4],[1,4],[2,4],[4,0],[4,1],[5,1],[6,1],[7,4],[7,5]];
blackCells.forEach(([r,c]) => crosswordData[r][c] = 'black');

const crosswordEl = document.getElementById('crossword');
function renderCrossword() {
crosswordEl.innerHTML = '';
crosswordData.forEach((row, r) => {
row.forEach((cell, c) => {
const cellEl = document.createElement('div');
cellEl.className = 'crossword-cell';
if(cell === 'black') {
cellEl.classList.add('black');
} else {
cellEl.dataset.row = r;
cellEl.dataset.col = c;
cellEl.contentEditable = true;
cellEl.maxLength = 1;
cellEl.addEventListener('input', function() {
this.value = this.value.toUpperCase();
if(this.value) this.classList.add('filled');
else this.classList.remove('filled');
});
cellEl.addEventListener('focus', function() {
this.classList.add('highlight');
});
cellEl.addEventListener('blur', function() {
this.classList.remove('highlight');
});
}
crosswordEl.appendChild(cellEl);
});
});
}
renderCrossword();

// ===== ОТРЫВНЫЕ КУПОНЫ =====
function tearCoupon(el) {
if(el.style.opacity === '0.3') {
el.style.opacity = '1';
el.style.transform = 'scale(1)';
el.style.pointerEvents = 'auto';
return;
}
el.style.transition = 'all 0.5s ease';
el.style.opacity = '0.3';
el.style.transform = 'scale(0.95)';
el.style.pointerEvents = 'none';
// Эффект "отрывания"
setTimeout(() => {
el.style.transform = 'scale(0.98) rotate(-1deg)';
}, 100);
setTimeout(() => {
el.style.transform = 'scale(0.97) rotate(1deg)';
}, 300);
// Восстановление через 3 секунды (для демонстрации)
setTimeout(() => {
el.style.opacity = '1';
el.style.transform = 'scale(1)';
el.style.pointerEvents = 'auto';
}, 3000);
// Уведомление
showNotification('✂️ Купон оторван! Спешите использовать!');
}

// ===== УВЕДОМЛЕНИЕ =====
function showNotification(text) {
const old = document.querySelector('.notification');
if(old) old.remove();
const notif = document.createElement('div');
notif.className = 'notification';
notif.style.cssText = `
position: fixed;
bottom: 20px;
right: 20px;
background: #2c1810;
color: #f5ede4;
padding: 12px 24px;
border-radius: 10px;
font-family: 'Roboto', sans-serif;
font-size: 14px;
box-shadow: 0 4px 20px rgba(0,0,0,.3);
animation: slideUp 0.3s ease;
z-index: 9999;
border-left: 4px solid #d4a574;
`;
notif.textContent = text;
document.body.appendChild(notif);
setTimeout(() => {
notif.style.opacity = '0';
notif.style.transform = 'translateY(20px)';
notif.style.transition = 'all 0.5s ease';
setTimeout(() => notif.remove(), 500);
}, 3000);
}

// ===== НАВИГАЦИЯ ПО СТРАНИЦАМ =====
function openSpread(index) {
document.querySelectorAll('.spread').forEach(el => el.classList.remove('active'));
document.getElementById(`spread${index}`).classList.add('active');
document.querySelectorAll('.page-nav button').forEach((btn, i) => {
btn.classList.toggle('active', i === index);
});
// Прокрутка к началу
document.querySelector('.magazine-wrapper').scrollIntoView({behavior:'smooth',block:'start'});
}

// ===== СТАТИСТИКА КРОССВОРДА =====
function checkCrossword() {
// Просто демонстрация: выводим заполненные ячейки
const filled = document.querySelectorAll('.crossword-cell.filled').length;
showNotification(`🧩 Заполнено ячеек: ${filled} из 42`);
}
// Периодическая проверка для демонстрации
setInterval(() => {
const filled = document.querySelectorAll('.crossword-cell.filled').length;
if(filled > 0 && filled % 5 === 0) {
// Не спамим уведомлениями
}
}, 5000);

console.log('📖 Журнал "Семейный Очаг" загружен! Приятного чтения!');
</script>
</body>
</html>[/html]

[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🗺️ Карта-путеводитель с тайнами</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Roboto:wght@300;400;700&display=swap');

body{background:linear-gradient(135deg,#1a1208,#2a1a0a);min-height:100vh;padding:20px;font-family:'Roboto',sans-serif;color:#e8ddd0}

/* ===== КОНТЕЙНЕР ===== */
.container{max-width:1300px;margin:0 auto}

/* ===== ШАПКА ===== */
.header{text-align:center;margin-bottom:25px;padding:20px;background:linear-gradient(145deg,#2a1a0a,#1a1208);border:2px solid #5a4a3a;border-radius:12px;position:relative}
.header h1{font-family:'Cinzel',serif;font-size:38px;color:#d4a574;text-shadow:0 0 30px rgba(212,165,116,.2);letter-spacing:4px}
.header h1 span{color:#8a7a6a}
.header .sub{font-size:14px;color:#8a7a6a;letter-spacing:6px;margin-top:5px}
.header .progress-info{position:absolute;right:20px;top:50%;transform:translateY(-50%);text-align:right;font-size:13px;color:#8a7a6a}
.header .progress-info .num{color:#d4a574;font-size:24px;font-weight:700;font-family:'Cinzel',serif}

/* ===== ОСНОВНАЯ КАРТА ===== */
.map-wrapper{background:linear-gradient(145deg,#2a1a0a,#1a1208);border:2px solid #5a4a3a;border-radius:12px;padding:20px;position:relative;overflow:hidden}
.map-wrapper::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="100" height="100" fill="none"/><path d="M10 10 L30 10 L30 30 L10 30 Z" fill="rgba(90,74,58,0.03)"/><path d="M50 50 L70 50 L70 70 L50 70 Z" fill="rgba(90,74,58,0.03)"/></svg>');pointer-events:none}

.map-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;aspect-ratio:16/10;min-height:500px;position:relative}

/* ===== ЯЧЕЙКИ КАРТЫ ===== */
.cell{background:linear-gradient(145deg,#2a1a0a,#1a1008);border:1px solid #3a2a1a;border-radius:6px;position:relative;cursor:pointer;transition:all .4s;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60px;overflow:hidden}
.cell:hover:not(.locked){border-color:#8a7a6a;transform:scale(1.03);z-index:2;box-shadow:0 0 30px rgba(212,165,116,.1)}
.cell .terrain{position:absolute;top:0;left:0;right:0;bottom:0;opacity:.15;font-size:40px;display:flex;align-items:center;justify-content:center}
.cell .label{position:relative;z-index:1;font-size:10px;color:#8a7a6a;text-align:center;line-height:1.2;font-weight:700;text-shadow:0 0 10px rgba(0,0,0,.8)}
.cell .icon{position:relative;z-index:1;font-size:22px;margin-bottom:2px}
.cell .discovery{position:absolute;top:-4px;right:-4px;font-size:14px;animation:pulse 1s ease-in-out infinite;z-index:3}

/* ===== СОСТОЯНИЯ ЯЧЕЕК ===== */
.cell.forest{background:linear-gradient(145deg,#1a2a1a,#0a1a0a);border-color:#2a4a2a}
.cell.forest .terrain{color:#2a5a2a}
.cell.mountain{background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border-color:#4a4a4a}
.cell.mountain .terrain{color:#5a5a5a}
.cell.water{background:linear-gradient(145deg,#0a1a2a,#0a0a1a);border-color:#1a2a4a}
.cell.water .terrain{color:#1a3a6a}
.cell.city{background:linear-gradient(145deg,#2a1a1a,#1a0a0a);border-color:#5a3a2a}
.cell.city .terrain{color:#6a4a3a}
.cell.desert{background:linear-gradient(145deg,#3a2a1a,#2a1a0a);border-color:#5a4a2a}
.cell.desert .terrain{color:#6a5a3a}

.cell.discovered{background:linear-gradient(145deg,#3a2a1a,#2a1a0a);border-color:#8a7a6a;box-shadow:inset 0 0 30px rgba(212,165,116,.05)}
.cell.discovered .label{color:#d4c9a8}
.cell.discovered.forest{background:linear-gradient(145deg,#2a3a2a,#1a2a1a)}
.cell.discovered.mountain{background:linear-gradient(145deg,#3a3a3a,#2a2a2a)}
.cell.discovered.water{background:linear-gradient(145deg,#1a2a3a,#0a1a2a)}
.cell.discovered.city{background:linear-gradient(145deg,#3a2a1a,#2a1a0a)}
.cell.discovered.desert{background:linear-gradient(145deg,#4a3a2a,#3a2a1a)}

.cell.locked{opacity:.3;cursor:not-allowed}
.cell.locked::after{content:'🔒';position:absolute;font-size:18px;opacity:.5}
.cell.locked .terrain{opacity:.05}

.cell .marker{position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:28px;animation:markerPulse 2s ease-in-out infinite;z-index:2;pointer-events:none}
@keyframes markerPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}

/* ===== ВСПЛЫВАЮЩАЯ ПОДСКАЗКА ===== */
.tooltip{display:none;position:fixed;background:linear-gradient(145deg,#2a1a0a,#1a1208);border:2px solid #5a4a3a;border-radius:12px;padding:20px;max-width:320px;z-index:100;box-shadow:0 10px 40px rgba(0,0,0,.8);animation:fadeIn .3s}
.tooltip.active{display:block}
.tooltip .close{position:absolute;top:10px;right:12px;font-size:20px;cursor:pointer;color:#8a7a6a;transition:.3s}
.tooltip .close:hover{color:#d4a574;transform:rotate(90deg)}
.tooltip h3{font-family:'Cinzel',serif;color:#d4a574;font-size:20px;margin-bottom:8px}
.tooltip .desc{font-size:13px;color:#b0a090;line-height:1.6;margin-bottom:10px}
.tooltip .info{font-size:12px;color:#8a7a6a;border-top:1px solid #3a2a1a;padding-top:10px;margin-top:8px}
.tooltip .info span{display:inline-block;margin-right:12px}
.tooltip .action-btn{background:#4a3520;color:#f5ede4;border:none;padding:8px 20px;border-radius:8px;cursor:pointer;font-weight:700;transition:.3s;font-family:'Roboto',sans-serif;margin-top:8px;width:100%}
.tooltip .action-btn:hover{background:#5a4530;transform:scale(1.02)}
.tooltip .action-btn:disabled{opacity:.3;cursor:not-allowed;transform:none}

/* ===== ЛЕГЕНДА ===== */
.legend{display:flex;gap:15px;flex-wrap:wrap;padding:15px 0 5px;justify-content:center}
.legend-item{display:flex;align-items:center;gap:6px;font-size:11px;color:#8a7a6a}
.legend-item .dot{width:14px;height:14px;border-radius:4px;border:1px solid #3a2a1a}
.legend-item .dot.forest{background:#1a2a1a}
.legend-item .dot.mountain{background:#2a2a2a}
.legend-item .dot.water{background:#0a1a2a}
.legend-item .dot.city{background:#2a1a1a}
.legend-item .dot.desert{background:#3a2a1a}
.legend-item .dot.locked{background:#1a1208;opacity:.3}
.legend-item .dot.discovered{background:#3a2a1a;border-color:#8a7a6a}

/* ===== ПАНЕЛЬ КВЕСТА ===== */
.quest-panel{margin-top:15px;display:grid;grid-template-columns:1fr 1fr;gap:15px}
.quest-box{background:linear-gradient(145deg,#2a1a0a,#1a1208);border:1px solid #3a2a1a;border-radius:10px;padding:15px}
.quest-box h4{font-family:'Cinzel',serif;color:#d4a574;font-size:14px;margin-bottom:8px;letter-spacing:2px}
.quest-box .quest-list{list-style:none}
.quest-box .quest-list li{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid #2a1a0a;font-size:12px;color:#8a7a6a}
.quest-box .quest-list li:last-child{border-bottom:none}
.quest-box .quest-list li .status{font-size:16px;min-width:24px}
.quest-box .quest-list li.done{color:#6a8a6a;text-decoration:line-through}
.quest-box .quest-list li.active{color:#d4c9a8}

/* ===== АНИМАЦИИ ===== */
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ===== АДАПТИВ ===== */
@media(max-width:768px){
.header h1{font-size:24px;letter-spacing:2px}
.header .progress-info{position:static;transform:none;text-align:center;margin-top:10px}
.map-grid{grid-template-columns:repeat(6,1fr);aspect-ratio:auto;min-height:400px}
.cell{min-height:50px;font-size:10px}
.cell .icon{font-size:16px}
.cell .label{font-size:8px}
.quest-panel{grid-template-columns:1fr}
.tooltip{max-width:280px;padding:15px}
}
@media(max-width:480px){
.map-grid{grid-template-columns:repeat(4,1fr);min-height:350px}
.cell{min-height:44px}
.cell .icon{font-size:14px}
.legend{gap:8px}
.legend-item{font-size:9px}
}
</style>
</head>
<body>

<div class="container">

<!-- ===== ШАПКА ===== -->
<div class="header">
<h1>🗺️ <span>ТАЙНАЯ</span> КАРТА</h1>
<div class="sub">❖ ПУТЕВОДИТЕЛЬ ИССЛЕДОВАТЕЛЯ ❖</div>
<div class="progress-info">
Открыто <span class="num" id="discoveredCount">0</span> / <span id="totalCount">0</span>
<div style="font-size:11px;letter-spacing:1px">тайных областей</div>
</div>
</div>

<!-- ===== КАРТА ===== -->
<div class="map-wrapper">
<div class="map-grid" id="mapGrid"></div>

<!-- Легенда -->
<div class="legend">
<span class="legend-item"><span class="dot forest"></span>Лес</span>
<span class="legend-item"><span class="dot mountain"></span>Горы</span>
<span class="legend-item"><span class="dot water"></span>Вода</span>
<span class="legend-item"><span class="dot city"></span>Город</span>
<span class="legend-item"><span class="dot desert"></span>Пустыня</span>
<span class="legend-item"><span class="dot locked"></span>🔒 Скрыто</span>
<span class="legend-item"><span class="dot discovered"></span>✨ Открыто</span>
</div>
</div>

<!-- ===== ПАНЕЛЬ КВЕСТА ===== -->
<div class="quest-panel">
<div class="quest-box">
<h4>📜 ЗАДАНИЯ</h4>
<ul class="quest-list" id="questList"></ul>
</div>
<div class="quest-box">
<h4>🧭 ОТКРЫТЫЕ МЕСТА</h4>
<ul class="quest-list" id="discoveredList"></ul>
</div>
</div>

</div>

<!-- ===== ВСПЛЫВАЮЩАЯ ПОДСКАЗКА ===== -->
<div class="tooltip" id="tooltip">
<span class="close" onclick="closeTooltip()">✕</span>
<h3 id="tipTitle">Название</h3>
<div class="desc" id="tipDesc">Описание</div>
<div class="info" id="tipInfo"></div>
<button class="action-btn" id="tipAction" onclick="tipAction()">Исследовать</button>
</div>

<script>
// ===== ДАННЫЕ КАРТЫ =====
const mapData = [
// Ряд 1
{id:'a1', terrain:'forest', label:'🌲', name:'Тёмный лес', desc:'Дремучий лес, полный тайн и древних троп.', discovered:false, locked:false, quest:1},
{id:'a2', terrain:'mountain', label:'⛰️', name:'Скалистый пик', desc:'Вершина, откуда видно всё королевство.', discovered:false, locked:true, quest:2},
{id:'a3', terrain:'water', label:'🌊', name:'Озеро слёз', desc:'Тихая гладь воды, хранящая древние легенды.', discovered:false, locked:false, quest:3},
{id:'a4', terrain:'city', label:'🏰', name:'Забытый замок', desc:'Руины величественного замка древних королей.', discovered:false, locked:true, quest:4},
{id:'a5', terrain:'desert', label:'🏜️', name:'Безмолвные дюны', desc:'Бескрайние пески, скрывающие сокровища.', discovered:false, locked:true, quest:5},
{id:'a6', terrain:'forest', label:'🌳', name:'Дубрава', desc:'Вековые дубы, помнящие древние ритуалы.', discovered:false, locked:false, quest:6},
{id:'a7', terrain:'water', label:'🏝️', name:'Остров духов', desc:'Мистический остров, видимый только в тумане.', discovered:false, locked:true, quest:7},
{id:'a8', terrain:'mountain', label:'🗻', name:'Вулкан', desc:'Дремлющий великан, ожидающий своего часа.', discovered:false, locked:true, quest:8},
// Ряд 2
{id:'b1', terrain:'city', label:'🏛️', name:'Древний форум', desc:'Место встреч мудрецов и философов.', discovered:false, locked:false, quest:9},
{id:'b2', terrain:'forest', label:'🎋', name:'Бамбуковая роща', desc:'Тишина нарушается только шелестом листьев.', discovered:false, locked:true, quest:10},
{id:'b3', terrain:'desert', label:'🏺', name:'Гробница фараона', desc:'Захоронение, полное ловушек и сокровищ.', discovered:false, locked:true, quest:11},
{id:'b4', terrain:'water', label:'⛲', name:'Фонтан желаний', desc:'Говорят, брошенная монета исполняет желания.', discovered:false, locked:false, quest:12},
{id:'b5', terrain:'mountain', label:'🏔️', name:'Ледяная пещера', desc:'Хрустальные своды, созданные природой.', discovered:false, locked:true, quest:13},
{id:'b6', terrain:'city', label:'🏯', name:'Восточные ворота', desc:'Вход в неизведанные земли.', discovered:false, locked:false, quest:14},
{id:'b7', terrain:'forest', label:'🍂', name:'Зачарованная поляна', desc:'Место, где время течёт иначе.', discovered:false, locked:true, quest:15},
{id:'b8', terrain:'desert', label:'🐪', name:'Караван-сарай', desc:'Приют уставших путников в бескрайней пустыне.', discovered:false, locked:false, quest:16},
// Ряд 3
{id:'c1', terrain:'water', label:'🐠', name:'Коралловый риф', desc:'Подводный мир, полный жизни и красок.', discovered:false, locked:true, quest:17},
{id:'c2', terrain:'mountain', label:'🧗', name:'Орлиное гнездо', desc:'Недоступная скала с видом на все земли.', discovered:false, locked:true, quest:18},
{id:'c3', terrain:'city', label:'🎪', name:'Площадь чудес', desc:'Ярмарка и магия переплелись в этом месте.', discovered:false, locked:false, quest:19},
{id:'c4', terrain:'forest', label:'🦉', name:'Сова-роща', desc:'Ночной лес, где мудрые совы дают советы.', discovered:false, locked:true, quest:20},
{id:'c5', terrain:'desert', label:'💎', name:'Алмазные копи', desc:'Место, где рождаются самые ценные камни.', discovered:false, locked:true, quest:21},
{id:'c6', terrain:'water', label:'🚢', name:'Затонувший корабль', desc:'Останки судна с грузом тайн.', discovered:false, locked:false, quest:22},
{id:'c7', terrain:'mountain', label:'🧭', name:'Дозорная башня', desc:'Стратегическая точка для обозрения окрестностей.', discovered:false, locked:true, quest:23},
{id:'c8', terrain:'city', label:'🎭', name:'Театр теней', desc:'Место, где древние легенды оживают в тенях.', discovered:false, locked:false, quest:24},
// Ряд 4
{id:'d1', terrain:'desert', label:'🕯️', name:'Храм Солнца', desc:'Святилище, где солнце освещает всё сакральное.', discovered:false, locked:true, quest:25},
{id:'d2', terrain:'forest', label:'🐺', name:'Волчья тропа', desc:'Тропа, где даже храбрые замирают в страхе.', discovered:false, locked:true, quest:26},
{id:'d3', terrain:'water', label:'🧜', name:'Грот русалок', desc:'Таинственное место у воды с музыкой ветра.', discovered:false, locked:false, quest:27},
{id:'d4', terrain:'mountain', label:'⚡', name:'Громовая скала', desc:'Вершина, притягивающая молнии.', discovered:false, locked:true, quest:28},
{id:'d5', terrain:'city', label:'🏺', name:'Античный театр', desc:'Место, где оживают греческие мифы.', discovered:false, locked:false, quest:29},
{id:'d6', terrain:'desert', label:'🐍', name:'Змеиный каньон', desc:'Опасное ущелье, полное ядовитых змей.', discovered:false, locked:true, quest:30},
{id:'d7', terrain:'forest', label:'🦋', name:'Бабочкина поляна', desc:'Место, где тысячи бабочек танцуют в воздухе.', discovered:false, locked:false, quest:31},
{id:'d8', terrain:'water', label:'🐉', name:'Драконья бухта', desc:'Где, по слухам, обитает древний дракон.', discovered:false, locked:true, quest:32}
];

// ===== СОСТОЯНИЕ =====
let discovered = [];
let quests = [
{id:1, text:'Найти Тёмный лес', done:false},
{id:2, text:'Подняться на Скалистый пик', done:false},
{id:3, text:'Посетить Озеро слёз', done:false},
{id:4, text:'Исследовать Забытый замок', done:false},
{id:5, text:'Пересечь Безмолвные дюны', done:false}
];
let activeTooltip = null;
let totalCells = mapData.length;

// ===== ИНИЦИАЛИЗАЦИЯ =====
function init() {
// Выбираем первые 3 клетки открытыми
mapData.slice(0, 3).forEach(cell => {
cell.discovered = true;
discovered.push(cell.id);
});
renderMap();
renderQuests();
updateStats();
}

// ===== ОТРИСОВКА КАРТЫ =====
function renderMap() {
const grid = document.getElementById('mapGrid');
grid.innerHTML = mapData.map(cell => {
const isDiscovered = cell.discovered;
const isLocked = cell.locked && !isDiscovered;
const classes = [
'cell',
cell.terrain,
isDiscovered ? 'discovered' : '',
isLocked ? 'locked' : '',
(isLocked || !isDiscovered) ? 'clickable' : ''
].filter(Boolean).join(' ');

return `
<div class="${classes}" data-id="${cell.id}" onclick="cellClick('${cell.id}')">
<div class="terrain">${getTerrainIcon(cell.terrain)}</div>
${isDiscovered ? `<div class="icon">${cell.label}</div>` : ''}
${isDiscovered ? `<div class="label">${cell.name}</div>` : ''}
${isDiscovered ? `<div class="discovery">✨</div>` : ''}
${isLocked ? '' : ''}
</div>
`;
}).join('');
}

function getTerrainIcon(terrain) {
const icons = {
forest: '🌳',
mountain: '🏔️',
water: '🌊',
city: '🏙️',
desert: '🏜️'
};
return icons[terrain] || '⬛';
}

// ===== КЛИК ПО КЛЕТКЕ =====
function cellClick(id) {
const cell = mapData.find(c => c.id === id);
if(!cell) return;

// Если уже открыто - показываем инфо
if(cell.discovered) {
showTooltip(cell);
return;
}

// Если заблокировано - проверяем возможность открытия
if(cell.locked) {
// Проверяем, есть ли рядом открытые клетки
const neighbors = getNeighbors(id);
const hasDiscoveredNeighbor = neighbors.some(n => n.discovered);
if(hasDiscoveredNeighbor) {
// Открываем клетку
cell.discovered = true;
discovered.push(id);
renderMap();
updateStats();
showTooltip(cell);
// Проверяем квесты
checkQuests(cell);
} else {
showMessage('🔒 Это место скрыто туманом. Исследуйте соседние территории!');
}
return;
}

// Обычная клетка - открываем
cell.discovered = true;
discovered.push(id);
renderMap();
updateStats();
showTooltip(cell);
checkQuests(cell);
}

// ===== ПОИСК СОСЕДЕЙ =====
function getNeighbors(id) {
const index = mapData.findIndex(c => c.id === id);
const cols = 8;
const neighbors = [];
const positions = [
index - cols, // вверх
index + cols, // вниз
index - 1,    // влево
index + 1,    // вправо
];
positions.forEach(pos => {
if(pos >= 0 && pos < mapData.length) {
// Проверка, что не перескакиваем строки
const row = Math.floor(index / cols);
const nRow = Math.floor(pos / cols);
if(Math.abs(row - nRow) <= 1) {
neighbors.push(mapData[pos]);
}
}
});
return neighbors;
}

// ===== ВСПЛЫВАЮЩАЯ ПОДСКАЗКА =====
function showTooltip(cell) {
const tooltip = document.getElementById('tooltip');
const rect = event?.target?.getBoundingClientRect() || {left: window.innerWidth/2, top: window.innerHeight/2};
tooltip.style.left = Math.min(rect.left + 20, window.innerWidth - 350) + 'px';
tooltip.style.top = Math.min(rect.top - 100, window.innerHeight - 250) + 'px';
tooltip.classList.add('active');

document.getElementById('tipTitle').textContent = `${cell.label} ${cell.name}`;
document.getElementById('tipDesc').textContent = cell.desc;
document.getElementById('tipInfo').innerHTML = `
<span>📍 ${cell.terrain.charAt(0).toUpperCase() + cell.terrain.slice(1)}</span>
<span>${cell.discovered ? '✨ Открыто' : '🔒 Скрыто'}</span>
`;
const btn = document.getElementById('tipAction');
if(cell.discovered) {
btn.textContent = '✅ Исследовано';
btn.disabled = true;
} else if(cell.locked) {
btn.textContent = '🔓 Открыть (1 шаг)';
btn.disabled = false;
btn.dataset.id = cell.id;
} else {
btn.textContent = '🗺️ Исследовать';
btn.disabled = false;
btn.dataset.id = cell.id;
}
activeTooltip = cell;
}

function closeTooltip() {
document.getElementById('tooltip').classList.remove('active');
activeTooltip = null;
}

function tipAction() {
const btn = document.getElementById('tipAction');
const id = btn.dataset.id;
if(id) cellClick(id);
closeTooltip();
}

// ===== КВЕСТЫ =====
function renderQuests() {
const list = document.getElementById('questList');
list.innerHTML = quests.map(q => `
<li class="${q.done ? 'done' : 'active'}">
<span class="status">${q.done ? '✅' : '⬜'}</span>
${q.text}
</li>
`).join('');

// Открытые места
const discoveredList = document.getElementById('discoveredList');
const discoveredCells = mapData.filter(c => c.discovered);
discoveredList.innerHTML = discoveredCells.map(c => `
<li>
<span>${c.label}</span>
${c.name}
</li>
`).join('');
if(discoveredCells.length === 0) {
discoveredList.innerHTML = '<li style="color:#5a4a3a;font-style:italic">Пока ничего не открыто...</li>';
}
}

function checkQuests(cell) {
// Проверяем, есть ли квест, связанный с этой клеткой
quests.forEach(q => {
if(q.id === cell.quest && !q.done) {
q.done = true;
renderQuests();
showMessage(`🎉 Квест выполнен: "${q.text}"!`);
}
});
// Проверяем, все ли квесты выполнены
if(quests.every(q => q.done)) {
showMessage('🏆 ВСЕ КВЕСТЫ ВЫПОЛНЕНЫ! Вы великий исследователь!');
}
}

// ===== СТАТИСТИКА =====
function updateStats() {
const count = discovered.length;
document.getElementById('discoveredCount').textContent = count;
document.getElementById('totalCount').textContent = totalCells;
}

// ===== СООБЩЕНИЯ =====
function showMessage(text) {
const tooltip = document.getElementById('tooltip');
const oldContent = tooltip.innerHTML;
tooltip.innerHTML = `
<span class="close" onclick="closeTooltip()">✕</span>
<div style="padding:10px 0;text-align:center;font-size:16px;color:#d4a574">${text}</div>
<button class="action-btn" onclick="closeTooltip()">OK</button>
`;
tooltip.classList.add('active');
tooltip.style.left = '50%';
tooltip.style.top = '50%';
tooltip.style.transform = 'translate(-50%, -50%)';
setTimeout(() => {
if(tooltip.classList.contains('active')) {
closeTooltip();
}
}, 3000);
}

// ===== КЛАВИАТУРА =====
document.addEventListener('keydown', (e) => {
if(e.key === 'Escape') closeTooltip();
});

// ===== ЗАПУСК =====
init();

console.log('🗺️ Карта-путеводитель загружена!');
console.log(`📍 Всего мест: ${totalCells}`);
console.log(`🔓 Открыто: ${discovered.length}`);
console.log('📜 Квестов: 5');
</script>
</body>
</html>[/html]

[hideprofile]

[html]
<style>
.db-wrap{max-width:100%;margin:10px auto;font-family:Arial,sans-serif;background:#0a0a0a;padding:10px;border-radius:10px;border:2px solid #3a2a1a;color:#d4c9a8}
.db-wrap .header{display:flex;justify-content:space-between;flex-wrap:wrap;gap:5px;padding-bottom:8px;border-bottom:2px solid #3a2a1a;margin-bottom:10px}
.db-wrap .header .title{font-size:20px;font-weight:700;color:#8a3a2a}
.db-wrap .header .title span{color:#5a2a1a}
.db-wrap .header .tools{display:flex;gap:3px;flex-wrap:wrap}
.db-wrap .header .tools button{background:#1a0f0a;border:1px solid #3a2a1a;border-radius:4px;color:#8a7a6a;padding:3px 8px;font-size:9px;cursor:pointer;font-weight:700}
.db-wrap .header .tools button:hover{background:#3a2a1a;color:#d4c9a8}
.db-wrap .header .tools button.active{background:#3a2a1a;color:#d4c9a8;border-color:#8a3a2a}
.db-wrap .header .tools button.danger:hover{background:#5a1a1a;border-color:#8a2a2a;color:#ff6a4a}
.db-wrap .board{position:relative;border:1px solid #2a1a0a;border-radius:6px;background:#0d0805;min-height:400px;overflow:hidden}
.db-wrap .board .bg{position:absolute;top:0;left:0;right:0;bottom:0;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="100" height="100" fill="%231a0f0a"/><rect x="10" y="10" width="2" height="2" fill="%232a1a0a" opacity="0.3"/><rect x="30" y="20" width="2" height="2" fill="%232a1a0a" opacity="0.2"/><rect x="50" y="5" width="2" height="2" fill="%232a1a0a" opacity="0.15"/></svg>');background-size:100px 100px;pointer-events:none;z-index:0}
.db-wrap .board .bg.has{background-size:cover;background-position:center}
.db-wrap .board .cards{position:relative;min-height:400px;padding:10px;z-index:1}
.db-card{position:absolute;padding:5px 8px;background:#1a0f0a;border:2px solid #3a2a1a;border-radius:5px;cursor:pointer;min-width:80px;max-width:130px;font-size:10px;box-shadow:0 2px 8px rgba(0,0,0,.6);z-index:2;transition:all .2s}
.db-card:hover{z-index:10;border-color:#5a4a3a}
.db-card.dragging{opacity:.6;z-index:100;transform:scale(1.04);cursor:grabbing}
.db-card .head{display:flex;justify-content:space-between;margin-bottom:2px}
.db-card .head .type{font-size:7px;color:#5a4a3a;text-transform:uppercase;font-weight:700}
.db-card .head .del{color:#3a2a1a;cursor:pointer;font-size:9px;background:0;border:none;padding:0 2px}
.db-card .head .del:hover{color:#8a3a2a}
.db-card .name{font-size:11px;color:#d4c9a8;font-weight:700;margin-bottom:2px}
.db-card .name .icon{font-size:13px;margin-right:2px}
.db-card .desc{font-size:8px;color:#6a5a4a;max-height:28px;overflow:hidden;transition:all .3s}
.db-card .desc textarea{width:100%;background:0;border:none;color:#6a5a4a;font-size:8px;font-family:Arial,sans-serif;resize:vertical;outline:none;min-height:14px;padding:0}
.db-card .desc textarea:focus{color:#d4c9a8}
.db-card .count{position:absolute;bottom:-5px;right:-5px;background:#2a1a0a;border:1px solid #3a2a1a;border-radius:6px;padding:0 6px;font-size:7px;color:#5a4a3a}
.db-card .expand-hint{position:absolute;bottom:2px;right:20px;font-size:8px;color:#3a2a1a;opacity:0;transition:opacity .3s}
.db-card:hover .expand-hint{opacity:1}
.db-card.evidence{border-color:#3a2a1a}
.db-card.suspect{border-color:#5a1a1a}
.db-card.location{border-color:#1a3a2a}
.db-card.note{border-color:#2a2a3a}
.db-card.photo{border-color:#3a2a2a}
.db-card.evidence .type{color:#8a5a3a}
.db-card.suspect .type{color:#8a3a2a}
.db-card.location .type{color:#3a6a4a}
.db-card.note .type{color:#4a4a6a}
.db-card.photo .type{color:#6a4a3a}

/* ===== РАСШИРЕННОЕ СОСТОЯНИЕ (БЕЗ ЗАТЕМНЕНИЯ) ===== */
.db-card.expanded{position:fixed;min-width:320px;max-width:450px;padding:20px 25px;z-index:999;border-color:#8a3a2a;box-shadow:0 20px 60px rgba(0,0,0,.9),0 0 40px rgba(138,58,42,.15);cursor:default;animation:expandIn .3s ease;transform:translate(-50%,-50%);left:50%!important;top:50%!important}
.db-card.expanded .name{font-size:20px}
.db-card.expanded .name .icon{font-size:26px}
.db-card.expanded .desc{font-size:14px;color:#a09080;max-height:350px;overflow-y:auto}
.db-card.expanded .desc textarea{font-size:14px;color:#a09080;min-height:100px}
.db-card.expanded .type{font-size:11px}
.db-card.expanded .count{font-size:11px;padding:3px 14px;bottom:-10px;right:-10px}
.db-card.expanded .expand-hint{display:none}
.db-card.expanded .head .del{font-size:16px}
.db-card.expanded .desc::-webkit-scrollbar{width:4px}
.db-card.expanded .desc::-webkit-scrollbar-track{background:transparent}
.db-card.expanded .desc::-webkit-scrollbar-thumb{background:#3a2a1a;border-radius:4px}
.db-card.expanded .desc::-webkit-scrollbar-thumb:hover{background:#5a4a3a}
@keyframes expandIn{from{opacity:0;transform:translate(-50%,-50%) scale(.85)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

.db-line{position:absolute;pointer-events:none;z-index:1}
.db-line svg{position:absolute;top:0;left:0;width:100%;height:100%}
.db-line line{stroke:#5a4a3a;stroke-width:2;opacity:.4;stroke-dasharray:6,4}
.db-connecting{cursor:crosshair}
.db-connecting .db-card:hover{cursor:crosshair}
.db-info{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.db-info .box{background:#1a0f0a;border:1px solid #2a1a0a;border-radius:5px;padding:8px}
.db-info .box .label{font-size:8px;color:#5a4a3a;text-transform:uppercase;border-bottom:1px solid #2a1a0a;padding-bottom:3px;margin-bottom:4px}
.db-info .box .content{font-size:10px;color:#8a7a6a;min-height:30px;max-height:80px;overflow-y:auto;line-height:1.3}
.db-info .box .content .empty{color:#3a2a1a;font-style:italic}
.db-info .box .content::-webkit-scrollbar{width:2px}
.db-info .box .content::-webkit-scrollbar-track{background:#0a0a0a}
.db-info .box .content::-webkit-scrollbar-thumb{background:#3a2a1a;border-radius:2px}
.db-list{max-height:70px;overflow-y:auto}
.db-list::-webkit-scrollbar{width:2px}
.db-list::-webkit-scrollbar-track{background:#0a0a0a}
.db-list::-webkit-scrollbar-thumb{background:#3a2a1a;border-radius:2px}
.db-list .item{display:flex;justify-content:space-between;padding:2px 0;border-bottom:1px solid #1a0f0a;font-size:9px;color:#6a5a4a}
.db-list .item .name{color:#d4c9a8}
.db-list .item .type{font-size:7px;color:#3a2a1a}
.db-modal{display:none;position:fixed;z-index:9999;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8)}
.db-modal.active{display:flex;align-items:center;justify-content:center}
.db-modal .box{background:#1a0f0a;border:2px solid #3a2a1a;border-radius:10px;padding:18px;max-width:380px;width:92%;max-height:80vh;overflow-y:auto}
.db-modal .box h2{font-size:20px;color:#8a3a2a;margin-bottom:8px}
.db-modal .box .field{margin-bottom:6px}
.db-modal .box .field label{display:block;font-size:8px;color:#5a4a3a;text-transform:uppercase;letter-spacing:1px;margin-bottom:2px}
.db-modal .box .field input,.db-modal .box .field select,.db-modal .box .field textarea{width:100%;padding:5px 8px;background:#0a0a0a;border:1px solid #2a1a0a;border-radius:4px;color:#d4c9a8;font-size:11px;font-family:Arial,sans-serif;outline:none}
.db-modal .box .field input:focus,.db-modal .box .field select:focus,.db-modal .box .field textarea:focus{border-color:#5a4a3a}
.db-modal .box .field textarea{resize:vertical;min-height:35px}
.db-modal .box .actions{display:flex;gap:5px;margin-top:8px}
.db-modal .box .actions button{padding:5px 14px;border:none;border-radius:4px;font-weight:700;cursor:pointer;flex:1;font-size:11px}
.db-modal .box .actions .save{background:#3a2a1a;color:#d4c9a8}
.db-modal .box .actions .save:hover{background:#5a4a3a}
.db-modal .box .actions .cancel{background:#1a0a0a;color:#5a4a3a;border:1px solid #2a1a0a}
.db-modal .box .actions .cancel:hover{background:#2a1a0a}
@media(max-width:600px){.db-wrap .header .title{font-size:16px}.db-wrap .board .cards{min-height:320px}.db-card{min-width:60px;max-width:100px;font-size:8px;padding:4px 6px}.db-card .name{font-size:9px}.db-card .name .icon{font-size:11px}.db-card.expanded{min-width:260px;max-width:340px;padding:15px 18px}.db-card.expanded .name{font-size:17px}.db-card.expanded .desc{font-size:13px;max-height:250px}.db-info{grid-template-columns:1fr}.db-wrap .header .tools button{font-size:8px;padding:2px 6px}}
</style>

<div class="db-wrap" id="detectiveBoard">
<div class="header">
<div class="title">🕵️ <span>ДЕТЕКТИВНАЯ</span> ДОСКА</div>
<div class="tools">
<button onclick="addClue('clue')">➕ Улика</button>
<button onclick="addClue('suspect')">👤 Подозр.</button>
<button onclick="addClue('location')">📍 Локация</button>
<button onclick="addClue('note')">📝 Заметка</button>
<button onclick="toggleConnect()" id="connectBtn">🔗 Связать</button>
<button class="danger" onclick="clearBoard()">🗑️</button>
<button onclick="document.getElementById('bgInput').click()">🖼️ Фон</button>
<input type="file" id="bgInput" accept="image/*" style="display:none" onchange="setBackground(event)">
<button onclick="resetBackground()">↺ Сброс</button>
</div>
</div>

<div class="board">
<div class="bg" id="boardBg"></div>
<div class="cards" id="boardCards"></div>
</div>

<div class="db-info">
<div class="box">
<div class="label">📋 ЖУРНАЛ</div>
<div class="content" id="logContent"><div class="empty">🕵️ Начните расследование...</div></div>
</div>
<div class="box">
<div class="label">📌 УЛИКИ</div>
<div class="content db-list" id="clueList"><div class="empty">Пока ничего нет</div></div>
</div>
</div>

<div class="db-modal" id="clueModal">
<div class="box">
<h2 id="modalTitle">📌 Новая улика</h2>
<div class="field"><label>Название</label><input type="text" id="clueName" placeholder="Что это?"></div>
<div class="field"><label>Тип</label><select id="clueType"><option value="evidence">🔍 Улика</option><option value="suspect">👤 Подозреваемый</option><option value="location">📍 Локация</option><option value="note">📝 Заметка</option><option value="photo">🖼️ Фото</option></select></div>
<div class="field"><label>Описание</label><textarea id="clueDesc" placeholder="Детали..."></textarea></div>
<div class="field"><label>Иконка</label><input type="text" id="clueIcon" value="🔍" maxlength="4"></div>
<div class="actions"><button class="save" onclick="saveClue()">Добавить</button><button class="cancel" onclick="closeModal()">Отмена</button></div>
</div>
</div>
</div>

<script>
// ===== ДАННЫЕ =====
var clues = [];
var connections = [];
var nextId = 1;
var connectMode = false;
var connectStart = null;
var dragData = null;
var expandedId = null;

// ===== ИНИЦИАЛИЗАЦИЯ =====
function initBoard() {
loadData();
loadBackground();
if(clues.length === 0) {
addClueData('Старая фотография', 'evidence', 'На обороте надпись: "Они вернутся в полнолуние"', '🖼️', 50, 80);
addClueData('Кровавый след', 'evidence', 'Ведёт к подвалу. Следы свежие', '🩸', 220, 120);
addClueData('Запертая дверь', 'location', 'Подвал заперт изнутри. Ключ пропал', '🚪', 400, 100);
addClueData('Мистер Блэк', 'suspect', 'Дворецкий. Вёл себя подозрительно в ночь исчезновения', '👤', 110, 280);
addClueData('Дневник', 'note', 'Последняя запись: "Они здесь. Я чувствую их дыхание"', '📖', 320, 290);
}
renderBoard();
addLog('🕵️ Расследование начато...');
}

// ===== ДОБАВЛЕНИЕ УЛИКИ =====
function addClueData(name, type, desc, icon, x, y) {
clues.push({
id: nextId++,
name: name,
type: type,
desc: desc,
icon: icon || '🔍',
x: x || 80 + Math.random() * 250,
y: y || 80 + Math.random() * 200
});
}

function getTypeLabel(type) {
var types = {
evidence: '🔍 Улика',
suspect: '👤 Подозреваемый',
location: '📍 Локация',
note: '📝 Заметка',
photo: '🖼️ Фото'
};
return types[type] || type;
}

function getConnections(id) {
var result = [];
for(var i = 0; i < connections.length; i++) {
if(connections[i].from === id || connections[i].to === id) {
result.push(connections[i]);
}
}
return result;
}

function findClue(id) {
for(var i = 0; i < clues.length; i++) {
if(clues[i].id === id) return clues[i];
}
return null;
}

// ===== ОТРИСОВКА =====
function renderBoard() {
var board = document.getElementById('boardCards');
board.querySelectorAll('.db-card').forEach(function(el) { el.remove(); });
board.querySelectorAll('.db-line').forEach(function(el) { el.remove(); });

for(var i = 0; i < clues.length; i++) {
var c = clues[i];
var el = document.createElement('div');
el.className = 'db-card ' + c.type;
el.style.left = c.x + 'px';
el.style.top = c.y + 'px';
el.dataset.id = c.id;
el.innerHTML =
'<div class="head">' +
'<span class="type">' + getTypeLabel(c.type) + '</span>' +
'<button class="del" onclick="event.stopPropagation();deleteClue(' + c.id + ')">✕</button>' +
'</div>' +
'<div class="name"><span class="icon">' + c.icon + '</span> ' + c.name + '</div>' +
'<div class="desc"><textarea onclick="event.stopPropagation()" onchange="updateDesc(' + c.id + ', this.value)">' + (c.desc || '') + '</textarea></div>' +
'<div class="count">🔗 ' + getConnections(c.id).length + '</div>' +
'<div class="expand-hint">↕</div>';

// Клик для увеличения
el.addEventListener('click', function(e) {
if(!e.target.closest('.del') && !e.target.closest('textarea')) {
toggleExpand(parseInt(this.dataset.id));
}
});

// Drag
el.addEventListener('mousedown', function(e) {
if(e.button === 0 && !e.target.closest('.del') && !e.target.closest('textarea') && !e.target.closest('.expand-hint')) {
if(connectMode) {
handleConnect(parseInt(this.dataset.id));
} else {
startDrag(e, parseInt(this.dataset.id));
}
}
});

board.appendChild(el);
}

for(var j = 0; j < connections.length; j++) {
var from = findClue(connections[j].from);
var to = findClue(connections[j].to);
if(from && to) {
var line = document.createElement('div');
line.className = 'db-line';
line.style.cssText = 'left:0;top:0;width:100%;height:100%;pointer-events:none';
line.innerHTML = '<svg><line x1="' + (from.x + 45) + '" y1="' + (from.y + 18) + '" x2="' + (to.x + 45) + '" y2="' + (to.y + 18) + '"/></svg>';
board.appendChild(line);
}
}

renderList();

// Восстанавливаем развёрнутое состояние
if(expandedId) {
var ec = document.querySelector('.db-card[data-id="' + expandedId + '"]');
if(ec) {
ec.classList.add('expanded');
var c = findClue(expandedId);
if(c) {
var ww = window.innerWidth;
var wh = window.innerHeight;
var nw = Math.min(450, ww - 40);
var nh = Math.min(500, wh - 40);
ec.style.width = nw + 'px';
ec.style.height = 'auto';
ec.style.maxHeight = nh + 'px';
}
}
}
}

// ===== РАСШИРЕНИЕ КАРТОЧКИ (ЦЕНТРИРОВАННОЕ, БЕЗ ЗАТЕМНЕНИЯ) =====
function toggleExpand(id) {
var el = document.querySelector('.db-card[data-id="' + id + '"]');
if(!el) return;

if(expandedId === id) {
closeExpanded();
return;
}

closeExpanded();
expandedId = id;
el.classList.add('expanded');

var ww = window.innerWidth;
var wh = window.innerHeight;
var nw = Math.min(450, ww - 40);
var nh = Math.min(500, wh - 40);

el.style.width = nw + 'px';
el.style.maxHeight = nh + 'px';
el.style.height = 'auto';
el.style.left = '50%';
el.style.top = '50%';
el.style.position = 'fixed';
}

function closeExpanded() {
if(expandedId) {
var el = document.querySelector('.db-card[data-id="' + expandedId + '"]');
if(el) {
el.classList.remove('expanded');
el.style.position = 'absolute';
el.style.width = '';
el.style.maxHeight = '';
el.style.height = '';
el.style.left = '';
el.style.top = '';
var c = findClue(expandedId);
if(c) {
el.style.left = c.x + 'px';
el.style.top = c.y + 'px';
}
}
expandedId = null;
}
}

// ===== DRAG & DROP =====
function startDrag(e, id) {
if(expandedId) closeExpanded();
var c = findClue(id);
if(!c) return;
var el = e.currentTarget;
dragData = {
id: id,
ox: e.clientX - el.getBoundingClientRect().left,
oy: e.clientY - el.getBoundingClientRect().top,
sx: c.x,
sy: c.y
};
el.classList.add('dragging');
document.addEventListener('mousemove', onDrag);
document.addEventListener('mouseup', endDrag);
e.preventDefault();
}

function onDrag(e) {
if(!dragData) return;
var board = document.getElementById('boardCards');
var rect = board.getBoundingClientRect();
var x = e.clientX - rect.left - dragData.ox;
var y = e.clientY - rect.top - dragData.oy;
var c = findClue(dragData.id);
if(c) {
c.x = Math.max(0, Math.min(x, board.clientWidth - 110));
c.y = Math.max(0, Math.min(y, board.clientHeight - 60));
renderBoard();
}
}

function endDrag() {
document.removeEventListener('mousemove', onDrag);
document.removeEventListener('mouseup', endDrag);
document.querySelectorAll('.db-card.dragging').forEach(function(el) {
el.classList.remove('dragging');
});
if(dragData) {
var c = findClue(dragData.id);
if(c && (c.x !== dragData.sx || c.y !== dragData.sy)) {
saveData();
}
dragData = null;
}
}

// ===== СВЯЗИ =====
function toggleConnect() {
connectMode = !connectMode;
var btn = document.getElementById('connectBtn');
var board = document.getElementById('boardCards');
if(connectMode) {
btn.classList.add('active');
board.classList.add('db-connecting');
btn.textContent = '🔗 Отменить';
connectStart = null;
} else {
btn.classList.remove('active');
board.classList.remove('db-connecting');
btn.textContent = '🔗 Связать';
connectStart = null;
}
}

function handleConnect(id) {
if(!connectStart) {
connectStart = id;
document.querySelector('.db-card[data-id="' + id + '"]').style.borderColor = '#8a3a2a';
addLog('🔗 Выберите вторую улику');
return;
}
if(connectStart === id) {
connectStart = null;
document.querySelectorAll('.db-card').forEach(function(el) { el.style.borderColor = ''; });
addLog('❌ Связь отменена');
return;
}
var exists = false;
for(var i = 0; i < connections.length; i++) {
if((connections[i].from === connectStart && connections[i].to === id) ||
(connections[i].from === id && connections[i].to === connectStart)) {
exists = true;
break;
}
}
if(exists) {
addLog('⚠️ Связь уже существует');
} else {
connections.push({from: connectStart, to: id});
addLog('🔗 Связаны: "' + findClue(connectStart).name + '" ↔ "' + findClue(id).name + '"');
saveData();
}
connectStart = null;
document.querySelectorAll('.db-card').forEach(function(el) { el.style.borderColor = ''; });
renderBoard();
document.getElementById('connectBtn').click();
}

// ===== УПРАВЛЕНИЕ УЛИКАМИ =====
function addClue(type) {
var titles = {
clue: '📌 Новая улика',
suspect: '👤 Подозреваемый',
location: '📍 Локация',
note: '📝 Заметка'
};
var types = {
clue: 'evidence',
suspect: 'suspect',
location: 'location',
note: 'note'
};
var icons = {
clue: '🔍',
suspect: '👤',
location: '📍',
note: '📝'
};
document.getElementById('modalTitle').textContent = titles[type] || '📌 Новая улика';
document.getElementById('clueName').value = '';
document.getElementById('clueType').value = types[type] || 'evidence';
document.getElementById('clueDesc').value = '';
document.getElementById('clueIcon').value = icons[type] || '🔍';
document.getElementById('clueModal').classList.add('active');
}

function saveClue() {
var name = document.getElementById('clueName').value.trim();
var type = document.getElementById('clueType').value;
var desc = document.getElementById('clueDesc').value.trim();
var icon = document.getElementById('clueIcon').value || '🔍';
if(!name) {
alert('Введите название');
return;
}
var board = document.getElementById('boardCards');
addClueData(name, type, desc, icon, 20 + Math.random() * (board.clientWidth - 140), 10 + Math.random() * (board.clientHeight - 80));
closeModal();
renderBoard();
addLog('➕ Добавлена улика: ' + name);
saveData();
}

function closeModal() {
document.getElementById('clueModal').classList.remove('active');
}

function deleteClue(id) {
if(confirm('Удалить улику "' + findClue(id).name + '"?')) {
var name = findClue(id).name;
if(expandedId === id) closeExpanded();
clues = clues.filter(function(c) { return c.id !== id; });
connections = connections.filter(function(c) { return c.from !== id && c.to !== id; });
renderBoard();
addLog('🗑️ Удалена улика: ' + name);
saveData();
}
}

function updateDesc(id, value) {
var c = findClue(id);
if(c) {
c.desc = value;
saveData();
}
}

// ===== СПИСОК УЛИК =====
function renderList() {
var list = document.getElementById('clueList');
if(!clues.length) {
list.innerHTML = '<div class="empty">Пока ничего нет</div>';
return;
}
var html = '';
for(var i = 0; i < clues.length; i++) {
html += '<div class="item"><span class="name">' + clues[i].icon + ' ' + clues[i].name + '</span><span class="type">' + getTypeLabel(clues[i].type) + '</span></div>';
}
list.innerHTML = html;
}

// ===== ЛОГ =====
function addLog(message) {
var log = document.getElementById('logContent');
var time = new Date().toLocaleTimeString('ru-RU');
var entry = document.createElement('div');
entry.style.cssText = 'padding:2px 0;border-bottom:1px solid #1a0f0a;font-size:9px;color:#6a5a4a';
entry.innerHTML = '<span style="color:#3a2a1a;font-size:7px">[' + time + ']</span> ' + message;
log.appendChild(entry);
log.scrollTop = log.scrollHeight;
while(log.children.length > 25) {
log.removeChild(log.firstChild);
}
}

// ===== ФОН =====
function setBackground(e) {
var file = e.target.files[0];
if(!file) return;
var reader = new FileReader();
reader.onload = function(e) {
var bg = document.getElementById('boardBg');
bg.style.backgroundImage = 'url(' + e.target.result + ')';
bg.classList.add('has');
try {
localStorage.setItem('boardBg', e.target.result);
} catch(err) {}
};
reader.readAsDataURL(file);
}

function resetBackground() {
var bg = document.getElementById('boardBg');
bg.style.backgroundImage = '';
bg.classList.remove('has');
try {
localStorage.removeItem('boardBg');
} catch(err) {}
}

function loadBackground() {
try {
var data = localStorage.getItem('boardBg');
if(data) {
var bg = document.getElementById('boardBg');
bg.style.backgroundImage = 'url(' + data + ')';
bg.classList.add('has');
}
} catch(err) {}
}

// ===== ХРАНЕНИЕ =====
function saveData() {
try {
localStorage.setItem('boardClues', JSON.stringify(clues));
localStorage.setItem('boardConnections', JSON.stringify(connections));
localStorage.setItem('boardNextId', String(nextId));
} catch(e) {}
}

function loadData() {
try {
var c = localStorage.getItem('boardClues');
var l = localStorage.getItem('boardConnections');
var n = localStorage.getItem('boardNextId');
if(c) clues = JSON.parse(c);
if(l) connections = JSON.parse(l);
if(n) nextId = parseInt(n) || 1;
} catch(e) {}
}

// ===== ОЧИСТКА =====
function clearBoard() {
if(confirm('Удалить все улики и связи?')) {
clues = [];
connections = [];
nextId = 1;
closeExpanded();
renderBoard();
addLog('🗑️ Доска очищена');
saveData();
}
}

// ===== КЛАВИАТУРА =====
document.addEventListener('keydown', function(e) {
if(e.key === 'Escape') {
closeExpanded();
closeModal();
if(connectMode) toggleConnect();
}
if((e.key === 'c' || e.key === 'C') && !document.querySelector('.db-modal.active')) {
toggleConnect();
}
});

// ===== ЗАПУСК =====
initBoard();
</script>
[/html]
[hideprofile]

[html]<!-- НЕ УБИРАТЬ ТЕГИ! Для RusFF -->
<div style="background:linear-gradient(180deg,#2d2d2d 0%,#1a1a1a 100%);padding:20px 25px 18px;border-radius:8px;max-width:380px;margin:10px auto;font-family:'Courier New',monospace;color:#eee;border:2px solid #444;border-top-color:#555;border-bottom-color:#333;position:relative;">
 
  <!-- Верхняя часть кассеты -->
  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding:0 5px;">
    <span style="font-size:0.65rem;color:#666;letter-spacing:1px;font-weight:bold;">◄ ● ►</span>
    <span style="font-size:0.55rem;color:#555;letter-spacing:2px;">██████████</span>
    <span style="font-size:0.65rem;color:#666;letter-spacing:1px;font-weight:bold;">► ● ◄</span>
  </div>
 
  <!-- Прозрачное окошко кассеты -->
  <div style="background:linear-gradient(180deg,#1a1a1a 0%,#0d0d0d 100%);border:2px solid #555;border-radius:4px;padding:12px 15px 14px;margin-bottom:10px;position:relative;overflow:hidden;">
   
    <!-- Бегущая лента (имитация) -->
    <div style="position:absolute;top:0;left:-100%;width:300%;height:100%;background:repeating-linear-gradient(90deg,transparent,transparent 8px,rgba(255,255,255,0.02) 8px,rgba(255,255,255,0.02) 10px);animation:tapeScroll 4s linear infinite;" id="tapeAnimation"></div>
   
    <!-- Название трека -->
    <div style="font-size:1rem;font-weight:bold;text-align:center;color:#b8b8ff;letter-spacing:0.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;z-index:1;font-family:'Segoe UI',sans-serif;" id="trackTitle">Название трека</div>
   
    <!-- Исполнитель -->
    <div style="font-size:0.7rem;text-align:center;color:#888;margin-top:4px;letter-spacing:1px;position:relative;z-index:1;font-family:'Segoe UI',sans-serif;" id="trackArtist">Исполнитель</div>
   
    <!-- Прогресс-бар в стиле счётчика ленты -->
    <div style="display:flex;align-items:center;gap:6px;margin-top:10px;position:relative;z-index:1;">
      <span style="font-size:0.6rem;color:#666;min-width:30px;font-family:'Courier New',monospace;" id="currentTime">0:00</span>
      <div style="flex:1;height:3px;background:#333;border-radius:2px;cursor:pointer;position:relative;border:1px solid #444;" id="progressBar">
        <div style="height:100%;width:0%;background:linear-gradient(90deg,#6c8cff,#a78cff);border-radius:2px;pointer-events:none;" id="progressFill"></div>
      </div>
      <span style="font-size:0.6rem;color:#666;min-width:30px;font-family:'Courier New',monospace;" id="totalTime">0:00</span>
    </div>
  </div>
 
  <!-- Кнопки управления -->
  <div style="display:flex;justify-content:center;align-items:center;gap:12px;margin-bottom:8px;">
    <button style="background:linear-gradient(180deg,#3a3a3a,#222);border:1px solid #555;color:#ccc;font-size:1.1rem;cursor:pointer;padding:5px 12px;border-radius:3px;transition:0.15s;font-family:'Courier New',monospace;letter-spacing:1px;" id="prevBtn" onmouseover="this.style.background='linear-gradient(180deg,#4a4a4a,#2a2a2a)';this.style.color='#fff'" onmouseout="this.style.background='linear-gradient(180deg,#3a3a3a,#222)';this.style.color='#ccc'">◄◄</button>
   
    <button style="background:linear-gradient(180deg,#4a4a4a,#2a2a2a);border:1px solid #666;color:#fff;font-size:1.6rem;cursor:pointer;padding:4px 18px;border-radius:3px;transition:0.15s;font-family:'Courier New',monospace;" id="playBtn" onmouseover="this.style.background='linear-gradient(180deg,#5a5a5a,#3a3a3a)';this.style.borderColor='#888'" onmouseout="this.style.background='linear-gradient(180deg,#4a4a4a,#2a2a2a)';this.style.borderColor='#666'">▶</button>
   
    <button style="background:linear-gradient(180deg,#3a3a3a,#222);border:1px solid #555;color:#ccc;font-size:1.1rem;cursor:pointer;padding:5px 12px;border-radius:3px;transition:0.15s;font-family:'Courier New',monospace;letter-spacing:1px;" id="nextBtn" onmouseover="this.style.background='linear-gradient(180deg,#4a4a4a,#2a2a2a)';this.style.color='#fff'" onmouseout="this.style.background='linear-gradient(180deg,#3a3a3a,#222)';this.style.color='#ccc'">►►</button>
  </div>
 
  <!-- Нижняя часть кассеты с регулятором громкости -->
  <div style="display:flex;align-items:center;gap:8px;padding-top:8px;border-top:1px solid #333;margin-top:2px;">
    <span style="font-size:0.7rem;color:#666;">VOL</span>
    <input type="range" style="flex:1;-webkit-appearance:none;appearance:none;height:2px;background:#333;border-radius:2px;outline:none;border:1px solid #444;" id="volumeSlider" min="0" max="1" step="0.01" value="0.8" />
    <span style="font-size:0.6rem;color:#555;min-width:30px;text-align:right;font-family:'Courier New',monospace;" id="volumeDisplay">80%</span>
  </div>
</div>

<style>
/* Анимация прокрутки ленты */
@keyframes tapeScroll {
  0% { transform: translateX(0%); }
  100% { transform: translateX(33.33%); }
}

/* Стили для ползунка громкости */
#volumeSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  background: linear-gradient(180deg, #6c8cff, #4a6aff);
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid #555;
}

#volumeSlider::-moz-range-thumb {
  width: 10px;
  height: 10px;
  background: linear-gradient(180deg, #6c8cff, #4a6aff);
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid #555;
}
</style>

<script>
(function() {
  // ============================================================
  //  🎵  ЗАМЕНИТЕ НА СВОИ ТРЕКИ
  // ============================================================
  var playlist = [
    { title: 'Трек 1', artist: 'Исполнитель A', src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3' },
    { title: 'Трек 2', artist: 'Исполнитель B', src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3' },
    { title: 'Трек 3', artist: 'Исполнитель C', src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3' }
  ];

  var audio = new Audio();
  var currentIndex = 0;
  var isPlaying = false;
  var isDragging = false;

  var playBtn = document.getElementById('playBtn');
  var prevBtn = document.getElementById('prevBtn');
  var nextBtn = document.getElementById('nextBtn');
  var trackTitle = document.getElementById('trackTitle');
  var trackArtist = document.getElementById('trackArtist');
  var progressFill = document.getElementById('progressFill');
  var progressBar = document.getElementById('progressBar');
  var currentTimeEl = document.getElementById('currentTime');
  var totalTimeEl = document.getElementById('totalTime');
  var volumeSlider = document.getElementById('volumeSlider');
  var volumeDisplay = document.getElementById('volumeDisplay');

  function loadTrack(index) {
    var track = playlist[index];
    if (!track) return;
    audio.src = track.src;
    trackTitle.textContent = track.title;
    trackArtist.textContent = track.artist;
    currentTimeEl.textContent = '0:00';
    totalTimeEl.textContent = '0:00';
    progressFill.style.width = '0%';
    if (isPlaying) {
      audio.play().catch(function() {});
    }
  }

  function playPause() {
    if (audio.paused) {
      audio.play().then(function() {
        isPlaying = true;
        playBtn.textContent = '⏸';
      }).catch(function() {});
    } else {
      audio.pause();
      isPlaying = false;
      playBtn.textContent = '▶';
    }
  }

  function nextTrack() {
    currentIndex = (currentIndex + 1) % playlist.length;
    loadTrack(currentIndex);
    if (isPlaying) {
      audio.play().catch(function() {});
    }
  }

  function prevTrack() {
    currentIndex = (currentIndex - 1 + playlist.length) % playlist.length;
    loadTrack(currentIndex);
    if (isPlaying) {
      audio.play().catch(function() {});
    }
  }

  function formatTime(seconds) {
    if (isNaN(seconds) || !isFinite(seconds)) return '0:00';
    var mins = Math.floor(seconds / 60);
    var secs = Math.floor(seconds % 60);
    return mins + ':' + (secs < 10 ? '0' : '') + secs;
  }

  function updateProgress() {
    if (isDragging) return;
    var duration = audio.duration;
    var current = audio.currentTime;
    if (duration && !isNaN(duration) && isFinite(duration)) {
      var percent = (current / duration) * 100;
      progressFill.style.width = Math.min(percent, 100) + '%';
      currentTimeEl.textContent = formatTime(current);
      totalTimeEl.textContent = formatTime(duration);
    } else {
      totalTimeEl.textContent = '0:00';
    }
  }

  function handleProgressClick(e) {
    var rect = progressBar.getBoundingClientRect();
    var clickX = e.clientX - rect.left;
    var percent = Math.min(Math.max(clickX / rect.width, 0), 1);
    if (audio.duration && !isNaN(audio.duration) && isFinite(audio.duration)) {
      audio.currentTime = percent * audio.duration;
      progressFill.style.width = (percent * 100) + '%';
      currentTimeEl.textContent = formatTime(audio.currentTime);
    }
  }

  // События
  playBtn.addEventListener('click', playPause);
 
  prevBtn.addEventListener('click', function() {
    if (audio.currentTime > 3) {
      audio.currentTime = 0;
      progressFill.style.width = '0%';
      currentTimeEl.textContent = '0:00';
    } else {
      prevTrack();
    }
  });
 
  nextBtn.addEventListener('click', nextTrack);
 
  progressBar.addEventListener('click', handleProgressClick);
 
  progressBar.addEventListener('mousedown', function(e) {
    isDragging = true;
    handleProgressClick(e);
  });

  document.addEventListener('mousemove', function(e) {
    if (isDragging) {
      var rect = progressBar.getBoundingClientRect();
      var x = e.clientX - rect.left;
      var percent = Math.min(Math.max(x / rect.width, 0), 1);
      if (audio.duration && !isNaN(audio.duration) && isFinite(audio.duration)) {
        audio.currentTime = percent * audio.duration;
        progressFill.style.width = (percent * 100) + '%';
        currentTimeEl.textContent = formatTime(audio.currentTime);
      }
    }
  });

  document.addEventListener('mouseup', function() {
    if (isDragging) {
      isDragging = false;
      updateProgress();
    }
  });

  audio.addEventListener('timeupdate', updateProgress);
 
  audio.addEventListener('loadedmetadata', function() {
    totalTimeEl.textContent = formatTime(audio.duration);
  });
 
  audio.addEventListener('ended', function() {
    nextTrack();
  });
 
  audio.addEventListener('play', function() {
    isPlaying = true;
    playBtn.textContent = '⏸';
  });
 
  audio.addEventListener('pause', function() {
    isPlaying = false;
    playBtn.textContent = '▶';
  });

  // Громкость с отображением
  volumeSlider.addEventListener('input', function() {
    var val = parseFloat(this.value);
    audio.volume = val;
    volumeDisplay.textContent = Math.round(val * 100) + '%';
  });

  audio.volume = parseFloat(volumeSlider.value);
  volumeDisplay.textContent = Math.round(parseFloat(volumeSlider.value) * 100) + '%';
  loadTrack(currentIndex);
})();
</script>[/html]

[hideprofile]
[html]<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark Aesthetic Template</title>
   
    <!-- Шрифты -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,700&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
   
    <style>
        /* ====================================================================
           НАСТРОЙКИ ЦВЕТОВ И ИЗОБРАЖЕНИЙ (Меняйте только здесь!)
           ==================================================================== */
        :root {
            /* --- Основной фон --- */
            --bg-wrapper: rgba(11, 11, 11, 0.90); /* Полупрозрачный общий фон скрипта */
            --bg-card: #141414;          /* Фон рамок и карточек (почти черный) */
           
            /* --- Цвета текста --- */
            --text-main: #f0f0f0;        /* Белый/светло-серый текст */
            --text-muted: #a0a0a0;       /* Серый текст для подписей */
           
            /* --- Границы и разделители --- */
            --border-main: #2a2a2a;      /* Цвет тонких линий */
            --border-frame: #e0e0e0;     /* Цвет рамки вокруг портрета (белая) */
           
            /* --- Настройки изображений --- */
            --img-filter: grayscale(100%) contrast(110%) brightness(0.85); /* Ч/Б с контрастом */
            --img-hover: grayscale(0%) brightness(1); /* Цветной при наведении */
           
            /* --- Шрифты --- */
            --font-heading: 'Playfair Display', serif;
            --font-body: 'Cormorant Garamond', serif;
        }
        /* ==================================================================== */

        /* Сброс стилей */
        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            /* Убрали жесткий цвет фона, теперь он зависит от темы форума */
            background: transparent !important;
            color: var(--text-main);
            font-family: var(--font-body);
            display: flex;
            justify-content: center;
            padding: 20px 15px;
        }

        /* Главный контейнер с полупрозрачным фоном */
        .container {
            max-width: 1100px;
            width: 100%;
            background: var(--bg-wrapper);
            padding: 40px 50px;
            border-radius: 4px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7); /* Тень для выделения на форуме */
            display: flex;
            flex-direction: column;
            gap: 2.5rem;
        }

        /* --- Шрифты --- */
        .gothic-title {
            font-family: var(--font-heading);
            font-size: 3.5rem;
            font-style: italic;
            letter-spacing: 2px;
            margin-bottom: 0.2rem;
        }

        .gothic-sub {
            font-family: var(--font-heading);
            font-size: 1.6rem;
            letter-spacing: 1px;
            margin-bottom: 1rem;
        }

        .subtitle {
            font-size: 0.75rem;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--text-muted);
        }

        .body-text {
            font-size: 0.95rem;
            line-height: 1.8;
            color: var(--text-muted);
        }

        .text-justify {
            text-align: justify;
        }

        /* --- ВЕРХНЯЯ СЕКЦИЯ (Портрет + Текст по бокам) --- */
        .hero-section {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 2rem;
            border-bottom: 1px solid var(--border-main);
            padding-bottom: 2rem;
        }

        .hero-col {
            flex: 1;
        }

        .hero-center {
            flex: 0 0 280px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        /* Рамка портрета */
        .portrait-frame {
            width: 220px;
            height: 280px;
            background: var(--bg-card);
            border: 1px solid var(--border-frame);
            padding: 12px;
            position: relative;
        }

        .portrait-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: var(--img-filter);
            transition: filter 0.4s ease;
        }
        .portrait-img:hover {
            filter: var(--img-hover);
        }

        .frame-caption {
            font-size: 0.65rem;
            letter-spacing: 3px;
            color: var(--text-muted);
            text-align: center;
            margin-top: 15px;
            font-family: var(--font-heading);
            border-top: 1px solid var(--border-main);
            padding-top: 10px;
            width: 100%;
        }

        /* --- НИЖНЯЯ ГАЛЕРЕЯ (с текстом поверх фото) --- */
        .gallery-section {
            display: flex;
            justify-content: center;
            gap: 20px;
            border-top: 1px solid var(--border-main);
            padding-top: 2rem;
        }

        .gallery-item {
            flex: 0 1 280px;
            max-width: 320px;
            position: relative;
            overflow: hidden;
            border: 1px solid var(--border-main);
            cursor: default;
        }

        .gallery-item img {
            display: block;
            width: 100%;
            height: 300px;
            object-fit: cover;
            filter: var(--img-filter);
            transition: filter 0.4s ease, transform 0.4s ease;
        }

        /* Полупрозрачный слой поверх картинки */
        .gallery-item .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.65);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
            text-align: center;
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .gallery-item .overlay h3 {
            font-family: var(--font-heading);
            font-size: 1.2rem;
            letter-spacing: 1px;
            color: #fff;
            margin-bottom: 8px;
        }

        .gallery-item .overlay p {
            font-size: 0.9rem;
            color: var(--text-muted);
            line-height: 1.4;
        }

        .gallery-item:hover .overlay {
            opacity: 1;
        }

        .gallery-item:hover img {
            filter: var(--img-hover);
            transform: scale(1.05);
        }

        /* --- ПОДВАЛ ФУТЕРА --- */
        .footer {
            text-align: center;
            font-family: var(--font-heading);
            font-size: 0.8rem;
            letter-spacing: 2px;
            border-top: 1px solid var(--border-main);
            padding-top: 1.5rem;
        }

        .footer a {
            color: var(--text-muted);
            text-decoration: none;
            margin: 0 10px;
            transition: color 0.3s;
        }

        .footer a:hover {
            color: var(--text-main);
        }

        /* --- АДАПТИВНОСТЬ --- */
        @media (max-width: 850px) {
            .container {
                padding: 20px 20px;
            }
            .hero-section {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }
           
            .hero-center {
                order: -1;
                flex: auto;
            }
           
            .portrait-frame {
                width: 180px;
                height: 230px;
            }

            .gallery-section {
                flex-wrap: wrap;
                gap: 15px;
            }

            .gallery-item {
                flex: 1 1 200px;
                max-width: 250px;
            }

            .gallery-item img {
                height: 200px;
            }
        }
    </style>
</head>
<body>

<div class="container">
   
    <!-- ========================================== -->
    <!-- 1. ВЕРХНЯЯ СЕКЦИЯ: Портрет + Текст по краям -->
    <!-- ========================================== -->
    <header class="hero-section">
       
        <!-- ЛЕВЫЙ ТЕКСТ -->
        <div class="hero-col">
            <h2 class="gothic-sub">Reflections</h2>
            <p class="subtitle">Thoughts on darkness</p>
            <p class="body-text text-justify" style="margin-top: 15px;">
                <span style="font-size: 2rem; float: left; margin-right: 5px; line-height: 1;">“</span>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
        </div>

        <!-- ЦЕНТР: ПОРТРЕТ -->
        <div class="hero-center">
            <div class="portrait-frame">
                <!-- ССЫЛКА НА ВАШ ПОРТРЕТ (замените) -->
                <img src="https://images.unsplash.com/photo-1581722134898-cfab77c15d47?q=80&w=400&auto=format&fit=crop" alt="Portrait" class="portrait-img">
            </div>
            <div class="frame-caption">✦ V I O L E T T A ✦</div>
        </div>

        <!-- ПРАВЫЙ ТЕКСТ -->
        <div class="hero-col">
            <h2 class="gothic-sub">Hidden Truths</h2>
            <p class="subtitle">Unspoken words</p>
            <p class="body-text text-justify" style="margin-top: 15px;">
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                <span style="font-size: 2rem; float: right; margin-left: 5px; line-height: 1;">”</span>
            </p>
        </div>

    </header>

    <!-- ========================================== -->
    <!-- 2. НИЖНЯЯ СЕКЦИЯ: ТРИ ФОТО С ТЕКСТОМ -->
    <!-- ========================================== -->
    <section class="gallery-section">
       
        <!-- Фото 1 -->
        <div class="gallery-item">
            <img src="https://images.unsplash.com/photo-1511192336575-5a79af67a629?q=80&w=600&auto=format&fit=crop" alt="Gallery 1">
            <div class="overlay">
                <h3>ECHOES</h3>
                <!-- ЗДЕСЬ МОЖНО МЕНЯТЬ ТЕКСТ -->
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>

        <!-- Фото 2 -->
        <div class="gallery-item">
            <img src="https://images.unsplash.com/photo-1544642056-513e6bb43bcc?q=80&w=600&auto=format&fit=crop" alt="Gallery 2">
            <div class="overlay">
                <h3>SHADOWS</h3>
                <!-- ЗДЕСЬ МОЖНО МЕНЯТЬ ТЕКСТ -->
                <p>Sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
            </div>
        </div>

        <!-- Фото 3 -->
        <div class="gallery-item">
            <img src="https://images.unsplash.com/photo-1562676201-aeb9715df2a9?q=80&w=600&auto=format&fit=crop" alt="Gallery 3">
            <div class="overlay">
                <h3>WHISPERS</h3>
                <!-- ЗДЕСЬ МОЖНО МЕНЯТЬ ТЕКСТ -->
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
            </div>
        </div>

    </section>

    <!-- ========================================== -->
    <!-- 3. ПОДВАЛ СО ССЫЛКАМИ -->
    <!-- ========================================== -->
    <footer class="footer">
        <a href="#">MAIN PAGE</a> ✦
        <a href="#">ARCHIVE</a> ✦
        <a href="#">CONTACT</a> ✦
        <a href="#">SOCIALS</a>
    </footer>

</div>

</body>
</html>[/html]