Dokers/Northen-node
0
1<!DOCTYPE html>2<html lang="ru">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=device-width, initial-scale=1.0">6<title>Кейсы - Северный Узел</title>7<script src="https://cdn.tailwindcss.com/3.4.16"></script>8<script>9tailwind.config = {10theme: {11extend: {12colors: {13primary: '#25282B',14secondary: '#ffffff'15},16borderRadius: {17'none': '0px',18'sm': '4px',19DEFAULT: '8px',20'md': '12px',21'lg': '16px',22'xl': '20px',23'2xl': '24px',24'3xl': '32px',25'full': '9999px',26'button': '8px'27},28fontFamily: {29'din': ['DIN Alternate', 'DIN Pro', 'sans-serif'],30'roboto': ['Roboto', 'sans-serif']31}32}33}34}35</script>36<link rel="preconnect" href="https://fonts.googleapis.com">37<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>38<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">39<link href="https://fonts.cdnfonts.com/css/coolvetica" rel="stylesheet">40<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.min.css">41<style>42:where([class^="ri-"])::before {43content: "\f3c2";44}45@import url('https://fonts.googleapis.com/css2?family=DIN+Alternate:wght@400;700&display=swap');46.card-hover {47transition: all 0.3s ease;48}49.card-hover:hover {50transform: translateY(-8px);51box-shadow: 0 20px 40px rgba(37, 40, 43, 0.15);52}53.nav-item {54position: relative;55}56.dropdown {57position: absolute;58top: 100%;59left: 0;60background: white;61border: 1px solid #e5e7eb;62border-radius: 8px;63box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);64opacity: 0;65visibility: hidden;66transform: translateY(-10px);67transition: all 0.3s ease;68z-index: 50;69min-width: 200px;70}71.nav-item:hover .dropdown {72opacity: 1;73visibility: visible;74transform: translateY(0);75}76.filter-button {77transition: all 0.3s ease;78}79.filter-button.active {80background-color: #25282B;81color: white;82}83.case-modal {84display: none;85position: fixed;86top: 0;87left: 0;88width: 100%;89height: 100%;90background: rgba(0, 0, 0, 0.8);91z-index: 100;92}93.case-modal.active {94display: flex;95align-items: center;96justify-content: center;97}98.modal-content {99background: white;100border-radius: 16px;101max-width: 90vw;102max-height: 90vh;103overflow-y: auto;104}105.fade-in {106animation: fadeIn 0.5s ease-in;107}108@keyframes fadeIn {109from { opacity: 0; transform: translateY(20px); }110to { opacity: 1; transform: translateY(0); }111}112</style>113</head>114<body class="font-roboto bg-white">115<header class="bg-white border-b border-gray-100 sticky top-0 z-40">116<div class="w-full px-6 lg:px-8">117<div class="flex items-center justify-between h-20">118<div class="flex items-center">119<a href="#" class="flex items-center">120<span class="text-3xl font-['Coolvetica'] text-primary">Северный Узел</span>121</a>122</div>123<nav class="hidden lg:flex items-center space-x-8">124<a href="/index.html" data-readdy="true" class="text-gray-700 hover:text-primary transition-colors font-medium">Главная</a>125<div class="nav-item">126<a href="#" class="text-gray-700 hover:text-primary transition-colors font-medium flex items-center">127Направления128<div class="w-4 h-4 flex items-center justify-center ml-1">129<i class="ri-arrow-down-s-line text-sm"></i>130</div>131</a>132<div class="dropdown">133<a href="/Logistic.html" class="block px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">Кризисная логистика</a>134<a href="/spectech.html" class="block px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">Спецтехника</a>135<a href="/connection.html" class="block px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">Связь и мониторинг</a>136</div>137</div>138<a href="/decisions.html" class="text-gray-700 hover:text-primary transition-colors font-medium">Решения</a>139<a href="/cases.html" class="text-primary font-semibold">Кейсы</a>140<a href="/expertise.html" class="text-gray-700 hover:text-primary transition-colors font-medium">Экспертиза</a>141<a href="/contacts.html" class="text-gray-700 hover:text-primary transition-colors font-medium">Контакты</a>142</nav>143<div class="flex items-center space-x-6">144<a href="tel:+7" class="text-gray-700 hover:text-primary transition-colors font-medium">+7 (495) 123-45-67</a>145<button class="bg-primary text-white px-6 py-3 !rounded-button hover:bg-gray-800 transition-colors font-medium whitespace-nowrap">146Обсудить задачу147</button>148</div>149</div>150</div>151</header>152 153<main>154<section class="relative h-96 flex items-center justify-center overflow-hidden bg-primary">155<div class="absolute inset-0 bg-gradient-to-r from-black/70 via-black/50 to-transparent z-10"></div>156<div style="background-image: url('https://readdy.ai/api/search-image?query=successful%20arctic%20logistics%20projects%20montage%20showing%20various%20completed%20operations%20industrial%20vehicles%20equipment%20delivery%20harsh%20conditions%20professional%20achievements%20cinematic%20composition&width=1920&height=600&seq=caseshero&orientation=landscape')" class="absolute inset-0 bg-cover bg-center bg-no-repeat"></div>157<div class="relative z-20 w-full px-6 lg:px-8">158<div class="max-w-4xl mx-auto text-center">159<h1 class="text-5xl lg:text-6xl font-bold text-white mb-6 font-din leading-tight">160Наши кейсы161</h1>162<p class="text-xl text-gray-200 mb-8 max-w-2xl mx-auto leading-relaxed">163Более 200 успешно реализованных проектов в экстремальных условиях Арктики, Сибири и других труднодоступных регионов164</p>165<div class="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-8">166<div class="bg-white/10 backdrop-blur-sm px-6 py-3 rounded-xl">167<div class="text-2xl font-bold text-white font-din">200+</div>168<div class="text-gray-300 text-sm">проектов</div>169</div>170<div class="bg-white/10 backdrop-blur-sm px-6 py-3 rounded-xl">171<div class="text-2xl font-bold text-white font-din">15</div>172<div class="text-gray-300 text-sm">регионов</div>173</div>174<div class="bg-white/10 backdrop-blur-sm px-6 py-3 rounded-xl">175<div class="text-2xl font-bold text-white font-din">98%</div>176<div class="text-gray-300 text-sm">успешности</div>177</div>178</div>179</div>180</div>181</section>182 183<section class="py-12 bg-gray-50 border-b border-gray-200">184<div class="max-w-7xl mx-auto px-6 lg:px-8">185<div class="flex flex-wrap items-center justify-between gap-6">186<div class="flex flex-wrap items-center gap-4">187<span class="text-gray-700 font-medium">Направление:</span>188<button class="filter-button active px-4 py-2 !rounded-button border border-gray-300 text-gray-700 hover:bg-primary hover:text-white whitespace-nowrap" data-filter="all" data-type="direction">189Все190</button>191<button class="filter-button px-4 py-2 !rounded-button border border-gray-300 text-gray-700 hover:bg-primary hover:text-white whitespace-nowrap" data-filter="logistics" data-type="direction">192Логистика193</button>194<button class="filter-button px-4 py-2 !rounded-button border border-gray-300 text-gray-700 hover:bg-primary hover:text-white whitespace-nowrap" data-filter="equipment" data-type="direction">195Спецтехника196</button>197<button class="filter-button px-4 py-2 !rounded-button border border-gray-300 text-gray-700 hover:bg-primary hover:text-white whitespace-nowrap" data-filter="communication" data-type="direction">198Связь199</button>200</div>201<div class="flex flex-wrap items-center gap-4">202<span class="text-gray-700 font-medium">Год:</span>203<button class="filter-button active px-4 py-2 !rounded-button border border-gray-300 text-gray-700 hover:bg-primary hover:text-white whitespace-nowrap" data-filter="all" data-type="year">204Все годы205</button>206<button class="filter-button px-4 py-2 !rounded-button border border-gray-300 text-gray-700 hover:bg-primary hover:text-white whitespace-nowrap" data-filter="2024" data-type="year">2072024208</button>209<button class="filter-button px-4 py-2 !rounded-button border border-gray-300 text-gray-700 hover:bg-primary hover:text-white whitespace-nowrap" data-filter="2023" data-type="year">2102023211</button>212<button class="filter-button px-4 py-2 !rounded-button border border-gray-300 text-gray-700 hover:bg-primary hover:text-white whitespace-nowrap" data-filter="2022" data-type="year">2132022214</button>215</div>216<div class="flex flex-wrap items-center gap-4">217<span class="text-gray-700 font-medium">Регион:</span>218<button class="filter-button active px-4 py-2 !rounded-button border border-gray-300 text-gray-700 hover:bg-primary hover:text-white whitespace-nowrap" data-filter="all" data-type="region">219Все регионы220</button>221<button class="filter-button px-4 py-2 !rounded-button border border-gray-300 text-gray-700 hover:bg-primary hover:text-white whitespace-nowrap" data-filter="arctic" data-type="region">222Арктика223</button>224<button class="filter-button px-4 py-2 !rounded-button border border-gray-300 text-gray-700 hover:bg-primary hover:text-white whitespace-nowrap" data-filter="siberia" data-type="region">225Сибирь226</button>227<button class="filter-button px-4 py-2 !rounded-button border border-gray-300 text-gray-700 hover:bg-primary hover:text-white whitespace-nowrap" data-filter="fareast" data-type="region">228Дальний Восток229</button>230<button class="filter-button px-4 py-2 !rounded-button border border-gray-300 text-gray-700 hover:bg-primary hover:text-white whitespace-nowrap" data-filter="kamchatka" data-type="region">231Камчатка232</button>233</div>234<button class="text-primary font-medium hover:underline whitespace-nowrap" id="reset-filters">235Сбросить фильтры236</button>237</div>238</div>239</section>240 241<section class="py-20 bg-white">242<div class="max-w-7xl mx-auto px-6 lg:px-8">243<div class="grid lg:grid-cols-3 gap-8" id="cases-grid">244<div class="case-card card-hover bg-white rounded-2xl overflow-hidden shadow-lg fade-in" data-direction="logistics" data-year="2024" data-region="siberia">245<div class="h-64 bg-cover bg-center bg-top" style="background-image: url('https://readdy.ai/api/search-image?query=arctic%20oil%20drilling%20equipment%20delivery%20convoy%20heavy%20machinery%20transportation%20through%20snowy%20siberian%20landscape%20extreme%20winter%20conditions%20professional%20logistics%20operation&width=400&height=300&seq=case01&orientation=landscape')"></div>246<div class="p-6">247<div class="flex items-center justify-between mb-3">248<span class="px-3 py-1 bg-blue-100 text-blue-800 text-sm font-medium rounded-full">Логистика</span>249<span class="text-sm text-gray-500">Сибирь • 2024</span>250</div>251<h3 class="text-xl font-bold text-primary mb-3 font-din">Поставка бурового оборудования на Ямал</h3>252<p class="text-gray-600 text-sm leading-relaxed mb-4">Доставка 450 тонн бурового оборудования на месторождение в условиях арктической зимы при температуре -45°C. Маршрут протяженностью 1200 км по зимникам.</p>253<div class="flex items-center justify-between">254<div class="text-sm text-gray-500">255<span class="font-medium">Длительность:</span> 18 дней256</div>257<button class="case-details-btn text-primary font-medium hover:underline flex items-center" data-case="case1">258Подробнее259<div class="w-4 h-4 flex items-center justify-center ml-2">260<i class="ri-arrow-right-line"></i>261</div>262</button>263</div>264</div>265</div>266 267<div class="case-card card-hover bg-white rounded-2xl overflow-hidden shadow-lg fade-in" data-direction="equipment" data-year="2024" data-region="kamchatka">268<div class="h-64 bg-cover bg-center bg-top" style="background-image: url('https://readdy.ai/api/search-image?query=emergency%20evacuation%20helicopters%20and%20all-terrain%20vehicles%20rescuing%20personnel%20from%20remote%20kamchatka%20industrial%20facility%20storm%20conditions%20professional%20rescue%20operation&width=400&height=300&seq=case02&orientation=landscape')"></div>269<div class="p-6">270<div class="flex items-center justify-between mb-3">271<span class="px-3 py-1 bg-green-100 text-green-800 text-sm font-medium rounded-full">Спецтехника</span>272<span class="text-sm text-gray-500">Камчатка • 2024</span>273</div>274<h3 class="text-xl font-bold text-primary mb-3 font-din">Экстренная эвакуация персонала</h3>275<p class="text-gray-600 text-sm leading-relaxed mb-4">Организация эвакуации 120 человек с удаленного геологического объекта в течение 8 часов в условиях шторма и нулевой видимости.</p>276<div class="flex items-center justify-between">277<div class="text-sm text-gray-500">278<span class="font-medium">Длительность:</span> 8 часов279</div>280<button class="case-details-btn text-primary font-medium hover:underline flex items-center" data-case="case2">281Подробнее282<div class="w-4 h-4 flex items-center justify-center ml-2">283<i class="ri-arrow-right-line"></i>284</div>285</button>286</div>287</div>288</div>289 290<div class="case-card card-hover bg-white rounded-2xl overflow-hidden shadow-lg fade-in" data-direction="communication" data-year="2023" data-region="arctic">291<div class="h-64 bg-cover bg-center bg-top" style="background-image: url('https://readdy.ai/api/search-image?query=satellite%20communication%20installation%20team%20setting%20up%20equipment%20at%20remote%20arctic%20research%20station%20professional%20telecommunications%20infrastructure%20polar%20conditions&width=400&height=300&seq=case03&orientation=landscape')"></div>292<div class="p-6">293<div class="flex items-center justify-between mb-3">294<span class="px-3 py-1 bg-purple-100 text-purple-800 text-sm font-medium rounded-full">Связь</span>295<span class="text-sm text-gray-500">Арктика • 2023</span>296</div>297<h3 class="text-xl font-bold text-primary mb-3 font-din">Развертывание связи на полярной станции</h3>298<p class="text-gray-600 text-sm leading-relaxed mb-4">Установка спутниковой связи Iridium и систем мониторинга на исследовательской станции "Барнео" в условиях полярной ночи.</p>299<div class="flex items-center justify-between">300<div class="text-sm text-gray-500">301<span class="font-medium">Длительность:</span> 12 дней302</div>303<button class="case-details-btn text-primary font-medium hover:underline flex items-center" data-case="case3">304Подробнее305<div class="w-4 h-4 flex items-center justify-center ml-2">306<i class="ri-arrow-right-line"></i>307</div>308</button>309</div>310</div>311</div>312 313<div class="case-card card-hover bg-white rounded-2xl overflow-hidden shadow-lg fade-in" data-direction="logistics" data-year="2023" data-region="fareast">314<div class="h-64 bg-cover bg-center bg-top" style="background-image: url('https://readdy.ai/api/search-image?query=medical%20supplies%20emergency%20delivery%20convoy%20trucks%20navigating%20through%20flooded%20far%20east%20russia%20disaster%20relief%20operation%20professional%20humanitarian%20logistics&width=400&height=300&seq=case04&orientation=landscape')"></div>315<div class="p-6">316<div class="flex items-center justify-between mb-3">317<span class="px-3 py-1 bg-blue-100 text-blue-800 text-sm font-medium rounded-full">Логистика</span>318<span class="text-sm text-gray-500">Дальний Восток • 2023</span>319</div>320<h3 class="text-xl font-bold text-primary mb-3 font-din">Доставка медикаментов в зону ЧС</h3>321<p class="text-gray-600 text-sm leading-relaxed mb-4">Экстренная доставка 15 тонн медикаментов и оборудования в зону наводнения в Приморском крае в обход разрушенных мостов.</p>322<div class="flex items-center justify-between">323<div class="text-sm text-gray-500">324<span class="font-medium">Длительность:</span> 3 дня325</div>326<button class="case-details-btn text-primary font-medium hover:underline flex items-center" data-case="case4">327Подробнее328<div class="w-4 h-4 flex items-center justify-center ml-2">329<i class="ri-arrow-right-line"></i>330</div>331</button>332</div>333</div>334</div>335 336<div class="case-card card-hover bg-white rounded-2xl overflow-hidden shadow-lg fade-in" data-direction="equipment" data-year="2022" data-region="siberia">337<div class="h-64 bg-cover bg-center bg-top" style="background-image: url('https://readdy.ai/api/search-image?query=specialized%20arctic%20mining%20equipment%20all-terrain%20vehicles%20and%20modular%20structures%20at%20remote%20siberian%20gold%20mine%20extreme%20winter%20conditions%20industrial%20operation&width=400&height=300&seq=case05&orientation=landscape')"></div>338<div class="p-6">339<div class="flex items-center justify-between mb-3">340<span class="px-3 py-1 bg-green-100 text-green-800 text-sm font-medium rounded-full">Спецтехника</span>341<span class="text-sm text-gray-500">Сибирь • 2022</span>342</div>343<h3 class="text-xl font-bold text-primary mb-3 font-din">Развертывание золотодобывающего комплекса</h3>344<p class="text-gray-600 text-sm leading-relaxed mb-4">Поставка и монтаж модульного золотодобывающего комплекса в труднодоступном районе Магаданской области с использованием вездеходной техники.</p>345<div class="flex items-center justify-between">346<div class="text-sm text-gray-500">347<span class="font-medium">Длительность:</span> 45 дней348</div>349<button class="case-details-btn text-primary font-medium hover:underline flex items-center" data-case="case5">350Подробнее351<div class="w-4 h-4 flex items-center justify-center ml-2">352<i class="ri-arrow-right-line"></i>353</div>354</button>355</div>356</div>357</div>358 359<div class="case-card card-hover bg-white rounded-2xl overflow-hidden shadow-lg fade-in" data-direction="communication" data-year="2022" data-region="arctic">360<div class="h-64 bg-cover bg-center bg-top" style="background-image: url('https://readdy.ai/api/search-image?query=arctic%20weather%20monitoring%20station%20installation%20satellite%20communication%20equipment%20and%20meteorological%20instruments%20in%20harsh%20polar%20environment%20professional%20setup&width=400&height=300&seq=case06&orientation=landscape')"></div>361<div class="p-6">362<div class="flex items-center justify-between mb-3">363<span class="px-3 py-1 bg-purple-100 text-purple-800 text-sm font-medium rounded-full">Связь</span>364<span class="text-sm text-gray-500">Арктика • 2022</span>365</div>366<h3 class="text-xl font-bold text-primary mb-3 font-din">Автономная метеостанция на Северной Земле</h3>367<p class="text-gray-600 text-sm leading-relaxed mb-4">Установка автономной метеорологической станции с системой спутниковой передачи данных на архипелаге Северная Земля.</p>368<div class="flex items-center justify-between">369<div class="text-sm text-gray-500">370<span class="font-medium">Длительность:</span> 21 день371</div>372<button class="case-details-btn text-primary font-medium hover:underline flex items-center" data-case="case6">373Подробнее374<div class="w-4 h-4 flex items-center justify-center ml-2">375<i class="ri-arrow-right-line"></i>376</div>377</button>378</div>379</div>380</div>381</div>382</div>383</section>384 385<section class="py-20 bg-gray-50">386<div class="max-w-7xl mx-auto px-6 lg:px-8">387<div class="text-center mb-16">388<h2 class="text-4xl font-bold text-primary mb-4 font-din">Статистика успеха</h2>389<p class="text-xl text-gray-600 max-w-3xl mx-auto">Наши достижения в цифрах за последние 5 лет работы</p>390</div>391<div class="grid lg:grid-cols-4 gap-8">392<div class="text-center">393<div class="text-5xl font-bold text-primary mb-2 font-din">200+</div>394<div class="text-gray-600 font-medium">Выполненных проектов</div>395</div>396<div class="text-center">397<div class="text-5xl font-bold text-primary mb-2 font-din">2.5М</div>398<div class="text-gray-600 font-medium">Тонн перевезенных грузов</div>399</div>400<div class="text-center">401<div class="text-5xl font-bold text-primary mb-2 font-din">15</div>402<div class="text-gray-600 font-medium">Регионов присутствия</div>403</div>404<div class="text-center">405<div class="text-5xl font-bold text-primary mb-2 font-din">98%</div>406<div class="text-gray-600 font-medium">Успешно завершенных проектов</div>407</div>408</div>409</div>410</section>411 412<section class="py-20 bg-primary text-white">413<div class="max-w-4xl mx-auto px-6 lg:px-8 text-center">414<h2 class="text-4xl font-bold mb-6 font-din">Обсудим ваш проект?</h2>415<p class="text-xl text-gray-300 mb-8 leading-relaxed">416Расскажите нам о вашей задаче, и мы найдем оптимальное решение даже в самых сложных условиях.417</p>418<div class="max-w-md mx-auto">419<form class="space-y-4">420<input type="text" placeholder="Ваше имя" class="w-full px-4 py-3 rounded-lg border-none bg-white/10 text-white placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-white/30">421<input type="tel" placeholder="Телефон" class="w-full px-4 py-3 rounded-lg border-none bg-white/10 text-white placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-white/30">422<textarea placeholder="Краткое описание задачи" rows="3" class="w-full px-4 py-3 rounded-lg border-none bg-white/10 text-white placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-white/30 resize-none"></textarea>423<button type="submit" class="w-full bg-white text-primary px-8 py-4 !rounded-button hover:bg-gray-100 transition-colors font-medium whitespace-nowrap">424Отправить заявку425</button>426</form>427</div>428</div>429</section>430</main>431 432<div class="case-modal" id="case-modal">433<div class="modal-content w-full max-w-4xl mx-4">434<div class="p-8">435<div class="flex items-center justify-between mb-6">436<h2 class="text-3xl font-bold text-primary font-din" id="modal-title">Детали кейса</h2>437<button class="w-10 h-10 flex items-center justify-center text-gray-500 hover:text-gray-700 transition-colors" id="close-modal">438<i class="ri-close-line ri-xl"></i>439</button>440</div>441<div id="modal-content">442</div>443</div>444</div>445</div>446 447<footer class="bg-white border-t border-gray-100 py-16">448<div class="max-w-7xl mx-auto px-6 lg:px-8">449<div class="grid lg:grid-cols-4 gap-12">450<div class="lg:col-span-2">451<div class="text-2xl font-bold text-primary mb-4 font-['Coolvetica']">Северный Узел</div>452<p class="text-gray-600 mb-6 leading-relaxed max-w-md">453Поставка спутниковой техники, логистика в экстремальных условиях и антикризисный консалтинг для решения самых сложных задач.454</p>455<div class="text-sm text-gray-500">456© 2024 Северный Узел. Все права защищены.457</div>458</div>459<div>460<h3 class="text-lg font-bold text-primary mb-4 font-din">Услуги</h3>461<ul class="space-y-3">462<li><a href="#" class="text-gray-600 hover:text-primary transition-colors">Кризисная логистика</a></li>463<li><a href="#" class="text-gray-600 hover:text-primary transition-colors">Спецтехника</a></li>464<li><a href="#" class="text-gray-600 hover:text-primary transition-colors">Связь и мониторинг</a></li>465<li><a href="#" class="text-gray-600 hover:text-primary transition-colors">Антикризисный консалтинг</a></li>466</ul>467</div>468<div>469<h3 class="text-lg font-bold text-primary mb-4 font-din">Контакты</h3>470<ul class="space-y-3">471<li class="text-gray-600">+7 (495) 123-45-67</li>472<li class="text-gray-600">info@severnyuzel.ru</li>473<li class="text-gray-600">Работаем круглосуточно</li>474</ul>475</div>476</div>477</div>478</footer>479 480<script id="filter-functionality">481document.addEventListener('DOMContentLoaded', function() {482const filterButtons = document.querySelectorAll('.filter-button');483const caseCards = document.querySelectorAll('.case-card');484const resetButton = document.getElementById('reset-filters');485let currentFilters = {486direction: 'all',487year: 'all',488region: 'all'489};490filterButtons.forEach(button => {491button.addEventListener('click', function() {492const filterType = this.dataset.type;493const filterValue = this.dataset.filter;494document.querySelectorAll(`[data-type="${filterType}"]`).forEach(btn => {495btn.classList.remove('active');496});497this.classList.add('active');498currentFilters[filterType] = filterValue;499filterCases();500});501});502resetButton.addEventListener('click', function() {503currentFilters = {504direction: 'all',505year: 'all',506region: 'all'507};508filterButtons.forEach(button => {509button.classList.remove('active');510if (button.dataset.filter === 'all') {511button.classList.add('active');512}513});514filterCases();515});516function filterCases() {517caseCards.forEach(card => {518const cardDirection = card.dataset.direction;519const cardYear = card.dataset.year;520const cardRegion = card.dataset.region;521const matchesDirection = currentFilters.direction === 'all' || cardDirection === currentFilters.direction;522const matchesYear = currentFilters.year === 'all' || cardYear === currentFilters.year;523const matchesRegion = currentFilters.region === 'all' || cardRegion === currentFilters.region;524if (matchesDirection && matchesYear && matchesRegion) {525card.style.display = 'block';526card.classList.add('fade-in');527} else {528card.style.display = 'none';529card.classList.remove('fade-in');530}531});532}533});534</script>535 536<script id="modal-functionality">537document.addEventListener('DOMContentLoaded', function() {538const modal = document.getElementById('case-modal');539const modalTitle = document.getElementById('modal-title');540const modalContent = document.getElementById('modal-content');541const closeModal = document.getElementById('close-modal');542const caseDetailsButtons = document.querySelectorAll('.case-details-btn');543const caseData = {544case1: {545title: 'Поставка бурового оборудования на Ямал',546images: [547'https://readdy.ai/api/search-image?query=arctic%20oil%20drilling%20equipment%20delivery%20convoy%20heavy%20machinery%20transportation%20through%20snowy%20siberian%20landscape%20extreme%20winter%20conditions%20professional%20logistics%20operation&width=600&height=400&seq=case1detail1&orientation=landscape',548'https://readdy.ai/api/search-image?query=heavy%20drilling%20equipment%20being%20unloaded%20from%20specialized%20arctic%20transport%20vehicles%20at%20remote%20oil%20drilling%20site%20professional%20industrial%20operation&width=600&height=400&seq=case1detail2&orientation=landscape'549],550description: 'Компания "Газпром нефть" обратилась к нам с задачей доставки критически важного бурового оборудования на новое месторождение на полуострове Ямал. Груз общим весом 450 тонн включал буровую установку, насосное оборудование и вспомогательные механизмы.',551challenges: [552'Экстремально низкие температуры до -45°C',553'Отсутствие постоянных дорог к месторождению',554'Ограниченное временное окно для доставки',555'Высокая стоимость груза (более 200 млн рублей)'556],557solutions: [558'Использование специализированных арктических тягачей с усиленной ходовой частью',559'Создание временного зимника протяженностью 1200 км',560'Организация промежуточных баз снабжения и технического обслуживания',561'Круглосуточное спутниковое мониторинг конвоя'562],563results: [564'Груз доставлен в срок без повреждений',565'Сэкономлено 40% от стоимости авиаперевозки',566'Создана логистическая схема для будущих поставок',567'Получена благодарность от заказчика'568],569duration: '18 дней',570region: 'Ямало-Ненецкий АО',571year: '2024'572},573case2: {574title: 'Экстренная эвакуация персонала',575images: [576'https://readdy.ai/api/search-image?query=emergency%20evacuation%20helicopters%20and%20all-terrain%20vehicles%20rescuing%20personnel%20from%20remote%20kamchatka%20industrial%20facility%20storm%20conditions%20professional%20rescue%20operation&width=600&height=400&seq=case2detail1&orientation=landscape',577'https://readdy.ai/api/search-image?query=evacuation%20team%20loading%20personnel%20into%20specialized%20arctic%20vehicles%20during%20storm%20emergency%20response%20operation%20professional%20rescue%20coordination&width=600&height=400&seq=case2detail2&orientation=landscape'578],579description: 'Геологоразведочная компания "КамчатГео" столкнулась с критической ситуацией: на удаленном объекте в 400 км от Петропавловска-Камчатского разразился сильный шторм, который угрожал безопасности 120 сотрудников.',580challenges: [581'Нулевая видимость из-за метели',582'Отсутствие взлетно-посадочной полосы',583'Ограниченное время до усиления шторма',584'Необходимость эвакуации тяжелобольного сотрудника'585],586solutions: [587'Мобилизация 15 единиц вездеходной техники',588'Использование GPS-навигации и спутниковой связи',589'Организация медицинского сопровождения',590'Создание промежуточных пунктов обогрева'591],592results: [593'Все 120 человек эвакуированы за 8 часов',594'Тяжелобольной доставлен в больницу вовремя',595'Предотвращена гуманитарная катастрофа',596'Получено признание МЧС России'597],598duration: '8 часов',599region: 'Камчатский край',600year: '2024'601},602case3: {603title: 'Развертывание связи на полярной станции',604images: [605'https://readdy.ai/api/search-image?query=satellite%20communication%20installation%20team%20setting%20up%20equipment%20at%20remote%20arctic%20research%20station%20professional%20telecommunications%20infrastructure%20polar%20conditions&width=600&height=400&seq=case3detail1&orientation=landscape',606'https://readdy.ai/api/search-image?query=arctic%20research%20station%20with%20installed%20satellite%20communication%20equipment%20and%20monitoring%20systems%20professional%20polar%20infrastructure%20northern%20lights&width=600&height=400&seq=case3detail2&orientation=landscape'607],608description: 'Российский научно-исследовательский институт Арктики и Антарктики поручил нам установку современной системы спутниковой связи на дрейфующей станции "Барнео" для обеспечения бесперебойной передачи научных данных.',609challenges: [610'Работы в условиях полярной ночи',611'Температура воздуха до -40°C',612'Дрейфующая ледяная платформа',613'Ограниченный вес оборудования для авиадоставки'614],615solutions: [616'Использование компактного оборудования Iridium',617'Специальные антифризные кабели и разъемы',618'Автономные источники питания на 6 месяцев',619'Дублирование критически важных компонентов'620],621results: [622'Обеспечена стабильная связь 24/7',623'Увеличена скорость передачи данных в 10 раз',624'Создана резервная система связи',625'Получена благодарность от РАН'626],627duration: '12 дней',628region: 'Арктика',629year: '2023'630},631case4: {632title: 'Доставка медикаментов в зону ЧС',633images: [634'https://readdy.ai/api/search-image?query=medical%20supplies%20emergency%20delivery%20convoy%20trucks%20navigating%20through%20flooded%20far%20east%20russia%20disaster%20relief%20operation%20professional%20humanitarian%20logistics&width=600&height=400&seq=case4detail1&orientation=landscape',635'https://readdy.ai/api/search-image?query=emergency%20medical%20supplies%20being%20unloaded%20from%20relief%20trucks%20at%20disaster%20zone%20humanitarian%20aid%20distribution%20professional%20emergency%20response&width=600&height=400&seq=case4detail2&orientation=landscape'636],637description: 'После разрушительного наводнения в Приморском крае местные больницы остались без критически важных медикаментов. Министерство здравоохранения обратилось к нам за помощью в экстренной доставке 15 тонн медицинских препаратов.',638challenges: [639'Разрушенные мосты и дороги',640'Продолжающиеся дожди и подтопления',641'Срочность доставки (препараты для реанимации)',642'Необходимость соблюдения холодовой цепи'643],644solutions: [645'Разработка альтернативного маршрута через временные переправы',646'Использование рефрижераторного транспорта',647'Координация с МЧС и дорожными службами',648'Организация круглосуточного конвоя'649],650results: [651'Медикаменты доставлены за 72 часа',652'Спасены жизни 45 пациентов в критическом состоянии',653'Восстановлено медицинское обеспечение региона',654'Получена благодарность от Минздрава РФ'655],656duration: '3 дня',657region: 'Приморский край',658year: '2023'659},660case5: {661title: 'Развертывание золотодобывающего комплекса',662images: [663'https://readdy.ai/api/search-image?query=specialized%20arctic%20mining%20equipment%20all-terrain%20vehicles%20and%20modular%20structures%20at%20remote%20siberian%20gold%20mine%20extreme%20winter%20conditions%20industrial%20operation&width=600&height=400&seq=case5detail1&orientation=landscape',664'https://readdy.ai/api/search-image?query=modular%20gold%20mining%20complex%20assembly%20in%20remote%20siberian%20location%20specialized%20equipment%20installation%20professional%20mining%20operation&width=600&height=400&seq=case5detail2&orientation=landscape'665],666description: 'Золотодобывающая компания "Полюс" поручила нам доставку и монтаж модульного золотодобывающего комплекса на новом месторождении в труднодоступном районе Магаданской области, где отсутствуют дороги и инфраструктура.',667challenges: [668'Полное отсутствие дорог к месторождению',669'Болотистая местность летом, вечная мерзлота зимой',670'Габаритное и тяжелое оборудование (до 25 тонн за единицу)',671'Сжатые сроки до начала добывающего сезона'672],673solutions: [674'Использование гусеничных вездеходов и модульных прицепов',675'Создание временных настилов через болота',676'Поэтапная доставка с промежуточными складами',677'Привлечение вертолетов для особо габаритных грузов'678],679results: [680'Комплекс введен в эксплуатацию в срок',681'Обеспечена добыча 2,5 тонн золота в сезон',682'Создана логистическая схема для обслуживания',683'Проект окупился за 8 месяцев'684],685duration: '45 дней',686region: 'Магаданская область',687year: '2022'688},689case6: {690title: 'Автономная метеостанция на Северной Земле',691images: [692'https://readdy.ai/api/search-image?query=arctic%20weather%20monitoring%20station%20installation%20satellite%20communication%20equipment%20and%20meteorological%20instruments%20in%20harsh%20polar%20environment%20professional%20setup&width=600&height=400&seq=case6detail1&orientation=landscape',693'https://readdy.ai/api/search-image?query=completed%20arctic%20weather%20station%20with%20satellite%20communication%20equipment%20meteorological%20instruments%20solar%20panels%20in%20polar%20landscape&width=600&height=400&seq=case6detail2&orientation=landscape'694],695description: 'Росгидромет поручил нам установку автономной метеорологической станции на архипелаге Северная Земля для улучшения качества прогнозов погоды в Арктическом регионе и мониторинга климатических изменений.',696challenges: [697'Экстремальные погодные условия круглый год',698'Отсутствие какой-либо инфраструктуры',699'Необходимость автономной работы 2 года',700'Передача данных в режиме реального времени'701],702solutions: [703'Установка ветрогенераторов и солнечных панелей',704'Использование спутниковой связи Инмарсат',705'Специальные морозостойкие материалы и покрытия',706'Модульная конструкция для упрощения монтажа'707],708results: [709'Станция работает без сбоев уже 2 года',710'Повышена точность прогнозов на 15%',711'Получены уникальные климатические данные',712'Проект отмечен премией Росгидромета'713],714duration: '21 день',715region: 'Архипелаг Северная Земля',716year: '2022'717}718};719caseDetailsButtons.forEach(button => {720button.addEventListener('click', function() {721const caseId = this.dataset.case;722const data = caseData[caseId];723if (data) {724modalTitle.textContent = data.title;725modalContent.innerHTML = `726<div class="grid lg:grid-cols-2 gap-8 mb-8">727<div>728<img src="${data.images[0]}" alt="${data.title}" class="w-full h-64 object-cover object-top rounded-lg mb-4">729</div>730<div>731<img src="${data.images[1]}" alt="${data.title}" class="w-full h-64 object-cover object-top rounded-lg">732</div>733</div>734<div class="mb-8">735<h3 class="text-xl font-bold text-primary mb-4 font-din">Описание проекта</h3>736<p class="text-gray-600 leading-relaxed">${data.description}</p>737</div>738<div class="grid lg:grid-cols-2 gap-8 mb-8">739<div>740<h3 class="text-xl font-bold text-primary mb-4 font-din">Основные сложности</h3>741<ul class="space-y-2">742${data.challenges.map(challenge => `<li class="flex items-start"><div class="w-2 h-2 bg-red-500 rounded-full mt-2 mr-3 flex-shrink-0"></div><span class="text-gray-600">${challenge}</span></li>`).join('')}743</ul>744</div>745<div>746<h3 class="text-xl font-bold text-primary mb-4 font-din">Примененные решения</h3>747<ul class="space-y-2">748${data.solutions.map(solution => `<li class="flex items-start"><div class="w-2 h-2 bg-green-500 rounded-full mt-2 mr-3 flex-shrink-0"></div><span class="text-gray-600">${solution}</span></li>`).join('')}749</ul>750</div>751</div>752<div class="mb-8">753<h3 class="text-xl font-bold text-primary mb-4 font-din">Достигнутые результаты</h3>754<ul class="space-y-2">755${data.results.map(result => `<li class="flex items-start"><div class="w-2 h-2 bg-blue-500 rounded-full mt-2 mr-3 flex-shrink-0"></div><span class="text-gray-600">${result}</span></li>`).join('')}756</ul>757</div>758<div class="grid lg:grid-cols-3 gap-6 mb-8">759<div class="bg-gray-50 p-4 rounded-lg text-center">760<div class="text-2xl font-bold text-primary font-din">${data.duration}</div>761<div class="text-gray-600 text-sm">Длительность</div>762</div>763<div class="bg-gray-50 p-4 rounded-lg text-center">764<div class="text-lg font-bold text-primary font-din">${data.region}</div>765<div class="text-gray-600 text-sm">Регион</div>766</div>767<div class="bg-gray-50 p-4 rounded-lg text-center">768<div class="text-2xl font-bold text-primary font-din">${data.year}</div>769<div class="text-gray-600 text-sm">Год</div>770</div>771</div>772<div class="text-center">773<button class="bg-primary text-white px-8 py-3 !rounded-button hover:bg-gray-800 transition-colors font-medium whitespace-nowrap">774<div class="w-5 h-5 flex items-center justify-center mr-2 inline-block">775<i class="ri-download-line"></i>776</div>777Скачать подробный отчет (PDF)778</button>779</div>780`;781modal.classList.add('active');782document.body.style.overflow = 'hidden';783}784});785});786closeModal.addEventListener('click', function() {787modal.classList.remove('active');788document.body.style.overflow = 'auto';789});790modal.addEventListener('click', function(e) {791if (e.target === modal) {792modal.classList.remove('active');793document.body.style.overflow = 'auto';794}795});796});797</script>798 799<script id="dropdown-menu">800document.addEventListener('DOMContentLoaded', function() {801const navItem = document.querySelector('.nav-item');802const dropdown = navItem.querySelector('.dropdown');803const dropdownLink = navItem.querySelector('a');804let isDropdownOpen = false;805dropdownLink.addEventListener('click', function(e) {806e.preventDefault();807isDropdownOpen = !isDropdownOpen;808if (isDropdownOpen) {809dropdown.style.opacity = '1';810dropdown.style.visibility = 'visible';811dropdown.style.transform = 'translateY(0)';812} else {813dropdown.style.opacity = '0';814dropdown.style.visibility = 'hidden';815dropdown.style.transform = 'translateY(-10px)';816}817});818document.addEventListener('click', function(e) {819if (!navItem.contains(e.target)) {820isDropdownOpen = false;821dropdown.style.opacity = '0';822dropdown.style.visibility = 'hidden';823dropdown.style.transform = 'translateY(-10px)';824}825});826});827</script>828</body>829</html>