246 lines
13 KiB
PHP
246 lines
13 KiB
PHP
<div class="site-bubbles" aria-hidden="true">
|
||
<i style="--x:87%;--s:3px;--dur:30.3s;--delay:-14.4s;--drift:23px;--blur:0px;--op:0.35;--grow:1.28"></i>
|
||
<i style="--x:38%;--s:12px;--dur:19.5s;--delay:-22.2s;--drift:-9px;--blur:0.3px;--op:0.33;--grow:1.11"></i>
|
||
<i style="--x:14%;--s:8px;--dur:32.3s;--delay:-29.3s;--drift:37px;--blur:0px;--op:0.52;--grow:1.26"></i>
|
||
<i style="--x:15%;--s:11px;--dur:24.7s;--delay:-4.0s;--drift:-33px;--blur:0px;--op:0.36;--grow:1.07"></i>
|
||
<i style="--x:94%;--s:9px;--dur:29.8s;--delay:-18.1s;--drift:42px;--blur:0px;--op:0.41;--grow:1.17"></i>
|
||
<i style="--x:21%;--s:13px;--dur:33.2s;--delay:-23.0s;--drift:27px;--blur:0.5px;--op:0.47;--grow:1.23"></i>
|
||
<i style="--x:50%;--s:6px;--dur:19.4s;--delay:-11.2s;--drift:-29px;--blur:0.5px;--op:0.46;--grow:1.05"></i>
|
||
<i style="--x:59%;--s:10px;--dur:27.1s;--delay:-14.4s;--drift:22px;--blur:0.3px;--op:0.35;--grow:1.26"></i>
|
||
<i style="--x:24%;--s:3px;--dur:21.2s;--delay:-29.2s;--drift:6px;--blur:0.3px;--op:0.26;--grow:1.21"></i>
|
||
<i style="--x:34%;--s:5px;--dur:25.1s;--delay:-16.5s;--drift:-5px;--blur:0.8px;--op:0.28;--grow:1.15"></i>
|
||
<i style="--x:40%;--s:13px;--dur:30.0s;--delay:-27.7s;--drift:-3px;--blur:0.8px;--op:0.55;--grow:1.15"></i>
|
||
<i style="--x:60%;--s:4px;--dur:25.0s;--delay:-16.5s;--drift:-40px;--blur:0px;--op:0.37;--grow:1.11"></i>
|
||
<i style="--x:11%;--s:5px;--dur:19.9s;--delay:-21.4s;--drift:17px;--blur:0px;--op:0.29;--grow:1.16"></i>
|
||
<i style="--x:88%;--s:4px;--dur:24.3s;--delay:-1.6s;--drift:-23px;--blur:0px;--op:0.52;--grow:1.19"></i>
|
||
<i style="--x:38%;--s:13px;--dur:32.8s;--delay:-12.9s;--drift:33px;--blur:0px;--op:0.55;--grow:1.1"></i>
|
||
<i style="--x:66%;--s:8px;--dur:18.0s;--delay:-6.8s;--drift:41px;--blur:0px;--op:0.24;--grow:1.12"></i>
|
||
<i style="--x:60%;--s:11px;--dur:19.3s;--delay:-20.3s;--drift:23px;--blur:0px;--op:0.41;--grow:1.21"></i>
|
||
<i style="--x:95%;--s:7px;--dur:27.9s;--delay:-9.6s;--drift:-6px;--blur:0.8px;--op:0.39;--grow:1.15"></i>
|
||
<i style="--x:62%;--s:3px;--dur:31.8s;--delay:-23.3s;--drift:-37px;--blur:0.3px;--op:0.51;--grow:1.08"></i>
|
||
<i style="--x:76%;--s:4px;--dur:21.4s;--delay:-16.0s;--drift:6px;--blur:0.8px;--op:0.33;--grow:1.13"></i>
|
||
<i style="--x:57%;--s:8px;--dur:33.5s;--delay:-27.2s;--drift:42px;--blur:0.5px;--op:0.37;--grow:1.19"></i>
|
||
<i style="--x:47%;--s:4px;--dur:22.4s;--delay:-19.0s;--drift:33px;--blur:0.8px;--op:0.34;--grow:1.12"></i>
|
||
<i style="--x:36%;--s:4px;--dur:33.6s;--delay:-18.2s;--drift:-21px;--blur:0px;--op:0.38;--grow:1.21"></i>
|
||
<i style="--x:14%;--s:14px;--dur:27.1s;--delay:-27.3s;--drift:-38px;--blur:0.5px;--op:0.37;--grow:1.21"></i>
|
||
<i style="--x:18%;--s:12px;--dur:22.5s;--delay:-13.7s;--drift:27px;--blur:0px;--op:0.31;--grow:1.08"></i>
|
||
<i style="--x:38%;--s:4px;--dur:27.0s;--delay:-16.7s;--drift:-33px;--blur:0.8px;--op:0.37;--grow:1.18"></i>
|
||
<i style="--x:75%;--s:6px;--dur:23.0s;--delay:-6.4s;--drift:-12px;--blur:0px;--op:0.27;--grow:1.16"></i>
|
||
<i style="--x:72%;--s:6px;--dur:26.4s;--delay:-3.3s;--drift:-35px;--blur:0.5px;--op:0.51;--grow:1.15"></i>
|
||
<i style="--x:25%;--s:12px;--dur:18.1s;--delay:-26.2s;--drift:24px;--blur:0px;--op:0.39;--grow:1.27"></i>
|
||
<i style="--x:58%;--s:3px;--dur:25.9s;--delay:-29.2s;--drift:-14px;--blur:0.8px;--op:0.33;--grow:1.11"></i>
|
||
</div>
|
||
|
||
<div class="baikal-nav-wrap">
|
||
<a aria-label="Иркутск" class="baikal-brand" href="#top">
|
||
<svg aria-hidden="true" class="brand-window" viewbox="0 0 42 42">
|
||
<path d="M9 35V15h24v20M13 35V19h16v16M21 19v16M13 27h16M7 15l14-10 14 10M11 13l4-5 3 3 3-6 3 6 3-3 4 5"></path>
|
||
</svg>
|
||
<span><b>ИРКУТСК</b><small>ГОРОД БОЛЬШИХ ИСТОРИЙ</small></span>
|
||
</a>
|
||
<button class="menu-toggle" type="button" aria-expanded="false" aria-controls="mobile-menu" aria-label="Открыть меню"><span></span><span></span><span></span></button>
|
||
<nav id="mobile-menu" aria-label="Навигация" class="baikal-nav">
|
||
<a href="#architecture">О городе</a>
|
||
<a href="#route">Маршруты</a>
|
||
<a href="#architecture">Достопримечательности</a>
|
||
<a href="#museums">Музеи</a>
|
||
<a href="#food">Рестораны</a>
|
||
<a href="#regional-food">Кухня Приангарья</a>
|
||
<a href="#contacts">Полезное</a>
|
||
</nav>
|
||
</div>
|
||
|
||
<header class="baikal-header" id="top">
|
||
<!-- Крупный резной наличник слева -->
|
||
|
||
<!-- Резные углы справа -->
|
||
|
||
<div class="hero-copy">
|
||
|
||
<h1>ИРКУТСК</h1>
|
||
<h2>ЧТО МЫ МОЖЕМ РАССКАЗАТЬ<br/>О ГОРОДЕ</h2>
|
||
<p>Памятка для гостей города: маршруты, архитектура, музеи, кухня и места, которые помогают почувствовать характер Иркутска.</p>
|
||
<div class="hero-actions">
|
||
<a class="hero-primary" href="#architecture">Погрузиться <svg class="hero-primary-arrow" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 3v15M6.5 12.5 12 18l5.5-5.5"/></svg></a>
|
||
</div>
|
||
</div>
|
||
<!-- Байкальские горы и лед -->
|
||
|
||
<!-- Полноширинная водная анимация. Контейнер равен ширине hero и не связан с наличником -->
|
||
|
||
|
||
<!-- Волны Байкала -->
|
||
|
||
|
||
<div class="water-animation-layer" aria-hidden="true">
|
||
|
||
<div class="hero-bubbles hero-bubbles-back">
|
||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||
</div>
|
||
|
||
|
||
<div class="free-fish fish-1 far">
|
||
<div class="free-fish-inner">
|
||
<div class="tail-bubbles"><i></i><i></i><i></i><i></i></div>
|
||
<svg viewBox="0 0 230 94" aria-hidden="true">
|
||
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||
<path class="fish-outline" d="M31 47C56 18 99 10 146 19c29 6 48 17 65 28-17 12-36 23-65 29-47 9-90 0-115-29Z"/>
|
||
<path class="fish-tail" d="M31 47 7 24l8 23-8 23 24-23Z"/>
|
||
<path class="fish-fin fish-fin-top" d="M92 22 111 4l12 20"/>
|
||
<path class="fish-fin fish-fin-bottom" d="m104 72 18 17 11-20"/>
|
||
<path d="M65 35c24 10 58 15 109 12M65 59c27-9 61-13 109-12"/>
|
||
<circle cx="177" cy="40" r="3.1"/>
|
||
<path d="M192 49c7 0 13-2 18-6"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="free-fish fish-2 mid">
|
||
<div class="free-fish-inner">
|
||
<div class="tail-bubbles"><i></i><i></i><i></i><i></i></div>
|
||
<svg viewBox="0 0 230 94" aria-hidden="true">
|
||
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||
<path class="fish-outline" d="M28 47c30-23 69-31 111-25 33 5 55 14 73 25-18 13-41 23-73 27-42 6-82-3-111-27Z"/>
|
||
<path class="fish-tail" d="M29 47 5 29l10 18L5 66l24-19Z"/>
|
||
<path class="fish-fin fish-fin-top" d="m103 25 15-19 15 21"/>
|
||
<path class="fish-fin fish-fin-bottom" d="m113 70 12 18 16-20"/>
|
||
<path d="M62 37c31 8 65 11 111 9M62 57c29-7 66-10 111-9"/>
|
||
<circle cx="181" cy="41" r="3.1"/>
|
||
<path d="M195 50c6 0 11-2 16-5"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="free-fish fish-3 near">
|
||
<div class="free-fish-inner">
|
||
<div class="tail-bubbles"><i></i><i></i><i></i><i></i></div>
|
||
<svg viewBox="0 0 230 94" aria-hidden="true">
|
||
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||
<path class="fish-outline" d="M30 47c22-30 62-40 112-28 30 7 51 17 69 28-17 12-40 23-69 28-48 9-88-1-112-28Z"/>
|
||
<path class="fish-tail" d="M31 47 9 20l5 27-5 27 22-27Z"/>
|
||
<path class="fish-fin fish-fin-top" d="m80 25 17-17 11 19"/>
|
||
<path class="fish-fin fish-fin-bottom" d="m92 69 14 18 12-21"/>
|
||
<path d="M58 32c30 12 67 17 117 14M58 61c30-10 66-14 117-14"/>
|
||
<circle cx="180" cy="39" r="3.1"/>
|
||
<path d="M194 48c7 1 12-1 18-5"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="free-fish fish-4 far">
|
||
<div class="free-fish-inner">
|
||
<div class="tail-bubbles"><i></i><i></i><i></i><i></i></div>
|
||
<svg viewBox="0 0 230 94" aria-hidden="true">
|
||
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||
<path class="fish-outline" d="M31 47C56 18 99 10 146 19c29 6 48 17 65 28-17 12-36 23-65 29-47 9-90 0-115-29Z"/>
|
||
<path class="fish-tail" d="M31 47 7 24l8 23-8 23 24-23Z"/>
|
||
<path class="fish-fin fish-fin-top" d="M92 22 111 4l12 20"/>
|
||
<path class="fish-fin fish-fin-bottom" d="m104 72 18 17 11-20"/>
|
||
<path d="M65 35c24 10 58 15 109 12M65 59c27-9 61-13 109-12"/>
|
||
<circle cx="177" cy="40" r="3.1"/>
|
||
<path d="M192 49c7 0 13-2 18-6"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="free-fish fish-5 mid">
|
||
<div class="free-fish-inner">
|
||
<div class="tail-bubbles"><i></i><i></i><i></i><i></i></div>
|
||
<svg viewBox="0 0 230 94" aria-hidden="true">
|
||
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||
<path class="fish-outline" d="M28 47c30-23 69-31 111-25 33 5 55 14 73 25-18 13-41 23-73 27-42 6-82-3-111-27Z"/>
|
||
<path class="fish-tail" d="M29 47 5 29l10 18L5 66l24-19Z"/>
|
||
<path class="fish-fin fish-fin-top" d="m103 25 15-19 15 21"/>
|
||
<path class="fish-fin fish-fin-bottom" d="m113 70 12 18 16-20"/>
|
||
<path d="M62 37c31 8 65 11 111 9M62 57c29-7 66-10 111-9"/>
|
||
<circle cx="181" cy="41" r="3.1"/>
|
||
<path d="M195 50c6 0 11-2 16-5"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="free-fish fish-6 near">
|
||
<div class="free-fish-inner">
|
||
<div class="tail-bubbles"><i></i><i></i><i></i><i></i></div>
|
||
<svg viewBox="0 0 230 94" aria-hidden="true">
|
||
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||
<path class="fish-outline" d="M31 47C56 18 99 10 146 19c29 6 48 17 65 28-17 12-36 23-65 29-47 9-90 0-115-29Z"/>
|
||
<path class="fish-tail" d="M31 47 7 24l8 23-8 23 24-23Z"/>
|
||
<path class="fish-fin fish-fin-top" d="M92 22 111 4l12 20"/>
|
||
<path class="fish-fin fish-fin-bottom" d="m104 72 18 17 11-20"/>
|
||
<path d="M65 35c24 10 58 15 109 12M65 59c27-9 61-13 109-12"/>
|
||
<circle cx="177" cy="40" r="3.1"/>
|
||
<path d="M192 49c7 0 13-2 18-6"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="free-seal" aria-hidden="true">
|
||
<span class="seal-rock"></span>
|
||
<div class="free-seal-inner">
|
||
<svg viewBox="0 0 240 110" aria-hidden="true">
|
||
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||
<path class="seal-outline" d="M42 61c8-25 32-39 66-39 36 0 70 13 91 31 13 11 20 21 19 28-2 12-18 17-38 11-15-4-27-13-39-15-17-3-33 7-51 10-24 4-45-5-48-21-1-2 0-4 0-5Z"/>
|
||
<path class="seal-face" d="M160 35c13-4 28-1 38 8M180 44l8 4M185 53h1M204 47l10-4M202 56l10 4"/>
|
||
<path class="seal-flipper seal-flipper-top" d="M91 32C78 19 74 8 82 4c12 3 22 12 28 26"/>
|
||
<path class="seal-flipper seal-flipper-bottom" d="M111 78c-9 15-8 25 2 28 11-6 17-15 17-27"/>
|
||
<path class="seal-tail" d="M42 61 22 49 28 63 15 75l26-4"/>
|
||
<path d="M83 51c26-7 56-6 86 6M78 65c28 7 55 7 79 1" opacity=".7"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hero-bubbles hero-bubbles-front">
|
||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="hero-transition-waves" aria-hidden="true">
|
||
<svg viewBox="0 0 1600 240" preserveAspectRatio="none">
|
||
<path class="wave-back" d="M0 66C180 22 310 116 474 82c184-38 270-76 452-24 184 52 331 64 674 0v182H0z"/>
|
||
<path class="wave-mid" d="M0 104C190 48 346 154 526 105c172-47 318-40 471 10 171 55 346 61 603-9v134H0z"/>
|
||
<path class="wave-front" d="M0 137C201 84 363 178 543 132c169-43 311-29 458 14 168 49 351 51 599-11v105H0z"/>
|
||
<path class="wave-blue" d="M0 85C183 39 316 131 481 92c179-43 279-68 452-18 182 53 329 63 667 1"/>
|
||
<path class="wave-gold" d="M0 113C198 59 346 160 525 110c170-47 313-38 466 10 169 53 346 60 609-8"/>
|
||
<path class="wave-gold" d="M0 145C208 96 365 183 545 138c166-42 308-27 454 14 170 48 349 49 601-12" opacity=".62"/>
|
||
<path class="wave-light" d="M0 188C192 151 352 221 541 190c173-28 313-15 467 15 178 35 354 29 592-16v51H0z"/>
|
||
</svg>
|
||
</div>
|
||
</header>
|
||
<script>
|
||
(() => {
|
||
const button = document.querySelector('.menu-toggle');
|
||
const menu = document.getElementById('mobile-menu');
|
||
if (!button || !menu) return;
|
||
const close = () => {
|
||
button.setAttribute('aria-expanded', 'false');
|
||
button.setAttribute('aria-label', 'Открыть меню');
|
||
menu.classList.remove('is-open');
|
||
document.body.classList.remove('menu-open');
|
||
};
|
||
button.addEventListener('click', () => {
|
||
const open = button.getAttribute('aria-expanded') === 'true';
|
||
button.setAttribute('aria-expanded', String(!open));
|
||
button.setAttribute('aria-label', open ? 'Открыть меню' : 'Закрыть меню');
|
||
menu.classList.toggle('is-open', !open);
|
||
document.body.classList.toggle('menu-open', !open);
|
||
});
|
||
menu.querySelectorAll('a').forEach(link => link.addEventListener('click', close));
|
||
document.addEventListener('keydown', event => {
|
||
if (event.key === 'Escape') close();
|
||
});
|
||
})();
|
||
</script>
|