��<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@O<>9 MD8@ A :0<5@</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; color: #333; user-select: none; transition: background-color 0.5s, color 0.5s; overflow-x: hidden; overflow-y: scroll; } body.dark-theme { background-color: #121212; /* "5<=K9 D>= */ color: #f4f4f4; } body::-webkit-scrollbar { width: 8px; } body::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); border-radius: 10px; } body::-webkit-scrollbar-track { background: #f4f4f4; } header { display: flex; justify-content: space-between; align-items: center; padding: 0 20px; height: 60px; background-color: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); transition: background-color 0.5s; } body.dark-theme header { background-color: #1a1a1a; } .theme-toggle { cursor: pointer; font-size: 24px; transition: opacity 0.3s; } .theme-toggle:hover { opacity: 0.8; } main { padding: 20px; } h1 { margin: 0; font-size: 24px; } .cameras-container { display: flex; flex-wrap: wrap; gap: 20px; } .camera-item { width: calc(33.333% - 34px); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); padding: 10px; background-color: white; border-radius: 8px; position: relative; overflow: hidden; transition: background-color 0.5s, transform 0.3s, box-shadow 0.3s; animation: fadeIn 0.5s ease-in-out; } .camera-item:hover { transform: translateY(-5px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } body.dark-theme .camera-item { background-color: #333; } .camera-item h3 { margin: 0 0 10px 0; font-size: 16px; } .image-container { position: relative; padding-top: 56.25%; background-color: #000; border-radius: 5px; overflow: hidden; } .image-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; cursor: pointer; } .popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); justify-content: center; align-items: center; opacity: 0; transition: opacity 0.5s ease-in-out; } .popup.active { display: flex; opacity: 1; } .popup iframe { width: 90%; height: 90%; border: none; border-radius: 5px; opacity: 0; transform: scale(0.9); transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; } .popup.active iframe { opacity: 1; transform: scale(1); } .close-btn { position: absolute; top: 20px; right: 20px; color: white; font-size: 24px; cursor: pointer; transition: opacity 0.3s; } .unavailable-message { font-size: 32px; color: #f4f4f4; text-align: center; user-select: none; } .close-btn:hover { opacity: 0.8; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 1024px) { .camera-item { width: calc(50% - 10px); } } @media (max-width: 600px) { .camera-item { width: 100%; } } </style> </head> <body> <header> <h1>mdnkq.online / 0<5@K</h1> <div class="theme-toggle" id="themeToggle">&�</div> </header> <main> <div class="cameras-container" id="camerasContainer"> </div> <br> <br> <br> <h2>54>ABC?=K5 : ?@>A<>B@C</h2> <div class="cameras-container" id="unavailableCamerasContainer"> </div> </main> <div class="popup" id="popup"> <span class="close-btn" onclick="closePopup()">�</span> <iframe id="popupIframe" src=""></iframe> <div id="popupContent"></div> </div> <script> const cameras = [{ "id": "381", "fid": "2712e33f73e1bbd849ac69dcd5b93175", "name": "1@0<F52> 5H5E>4=0O 7>=0 5A", "aspect": "1.78", "latitude": "56.234299", "longitude": "37.979698", "is_public": "1", "close_rtk": "1" }, { "id": "380", "fid": "b586bf7f32e6fe0024f9574f10cb7b03", "name": "1@0<F52> 5H5E>4=0O 7>=0 >AB 2 ;5AC", "aspect": "1.78", "latitude": "56.234299", "longitude": "37.976101", "is_public": "1", "close_rtk": "1" }, { "id": "379", "fid": "f17cf8f6b4ca81a060b66bb1b92d79de", "name": "1@0<F52> 5H5E>4=0O 7>=0 >AB G5@57 @5:C", "aspect": "1.78", "latitude": "56.234001", "longitude": "37.972099", "is_public": "1", "close_rtk": "1" }, { "id": "378", "fid": "73960a2cea03422a2caa51cf45947c5c", "name": "1@0<F52> 5H5E>4=0O 7>=0 ;>I04L", "aspect": "1.78", "latitude": "56.233398", "longitude": "37.968201", "is_public": "2", "close_rtk": "1" }, { "id": "383", "fid": "04b0d99f61af1cd0c8d3e3c23efe41bb", "name": "1@0<F52> 5H5E>4=0O 7>=0 !B0=F8O", "aspect": "1.78", "latitude": "56.233898", "longitude": "37.984600", "is_public": "3", "close_rtk": "1" } ]; cameras.sort((a, b) => { if (a.is_public === b.is_public) { return a.name.localeCompare(b.name); } return a.is_public - b.is_public; }); const camerasContainer = document.getElementById('camerasContainer'); const unavailableCamerasContainer = document.getElementById('unavailableCamerasContainer'); const popup = document.getElementById('popup'); const popupIframe = document.getElementById('popupIframe'); const themeToggle = document.getElementById('themeToggle'); const popupContent = document.getElementById('popupContent'); function loadTheme() { const theme = document.cookie.replace(/(?:(?:^|.*;\s*)theme\s*=\s*([^;]*).*$)|^.*$/, "$1"); if (theme === "light") { document.body.classList.remove('dark-theme'); themeToggle.textContent = '&�'; } else { document.body.classList.add('dark-theme'); themeToggle.textContent = '�<�'; } } function saveTheme(theme) { document.cookie = `theme=${theme}; path=/; max-age=31536000`; // !>E@0=O5< =0 1 3>4 } themeToggle.addEventListener('click', () => { document.body.classList.toggle('dark-theme'); if (document.body.classList.contains('dark-theme')) { themeToggle.textContent = '�<�'; saveTheme("dark"); } else { themeToggle.textContent = '&�'; saveTheme("light"); } }); cameras.forEach(camera => { const cameraElement = document.createElement('div'); cameraElement.className = 'camera-item'; cameraElement.innerHTML = ` <h3>${camera.name}</h3> <div class="image-container"> <img src="https://moidom.ots-net.ru/stream/thumbnail?id=${camera.id}&msg=0&submsg=0" alt="${camera.name}"> </div> `; cameraElement.querySelector('img').onclick = () => openPopup(camera); if (camera.is_public === "3") { unavailableCamerasContainer.appendChild(cameraElement); } else { camerasContainer.appendChild(cameraElement); } }); function openPopup(camera) { if (camera.is_public === "3") { popupContent.innerHTML = ` <div class="unavailable-message">-B0 :0<5@0 =54>ABC?=0 : ?@>A<>B@C</div> <img src="https://moidom.ots-net.ru/stream/thumbnail?id=${camera.id}&msg=0&submsg=0" alt="${camera.name}" style="width: 100%; max-width: 100%; margin-top: 20px; border-radius: 8px;"> `; popup.classList.add('active'); popupIframe.style.display = 'none'; document.body.style.overflow = 'hidden'; } else { popupContent.innerHTML = ''; popupIframe.src = `https://flus-s3.ots-net.ru/${camera.fid}/embed.html?version=3&autoplay=true&token=direct`; popupIframe.style.display = 'block'; popup.classList.add('active'); document.body.style.overflow = 'hidden'; } } function closePopup() { popup.classList.remove('active'); popupIframe.src = ''; document.body.style.overflow = 'auto'; } popup.addEventListener('click', (event) => { if (event.target === popup) { closePopup(); } }); loadTheme(); </script> </body> </html>