GUI
This commit is contained in:
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1 +0,0 @@
|
||||
*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:#f0f0f0;font-family:Arial,sans-serif}#app{width:400px;background:white;border-radius:8px;box-shadow:0 2px 10px #0000001a;overflow:hidden}.tabs{display:flex;background:#e9e9e9}.tab-button{flex:1;padding:12px;background:transparent;border:none;cursor:pointer;font-size:16px;transition:background .2s}.tab-button:hover{background:#dcdcdc}.tab-button.active{background:white;border-bottom:3px solid #3498db;font-weight:700}.tab-content{display:none;padding:20px}.tab-content.active{display:block}.buttons-vertical{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}.action-button{padding:12px;font-size:16px;cursor:pointer;border:1px solid #bbb;border-radius:6px;background-color:#f8f8f8;transition:background-color .2s,border-color .2s}.action-button:hover{background-color:#e2e6ea;border-color:#999}.close-button{background-color:#e74c3c;color:#fff;border-color:#c0392b}.close-button:hover{background-color:#c0392b}#frequency-panel{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background-color:#f9f9f9;border:1px solid #ddd;border-radius:6px;margin-bottom:10px}#frequency-label{font-weight:700;color:#555}#frequency-value{font-size:18px;color:#2c3e50}#status-panel{display:flex;align-items:center;gap:10px;padding:10px 14px;background-color:#f9f9f9;border:1px solid #ddd;border-radius:6px}.indicator{width:16px;height:16px;border-radius:50%;display:inline-block}.indicator-red{background-color:#e74c3c}.indicator-green{background-color:#2ecc71}#status-text{font-size:16px;color:#333}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4);display:flex;justify-content:center;align-items:center;z-index:100}.modal.hidden{display:none}.modal-content{background:white;padding:20px;border-radius:8px;width:300px;box-shadow:0 5px 15px #0000004d;position:relative}.close-modal{position:absolute;top:10px;right:15px;font-size:22px;cursor:pointer;color:#777}.close-modal:hover{color:#333}.modal-content h3{margin-bottom:15px;text-align:center}.freq-input-group{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:15px}.freq-btn{width:40px;height:40px;font-size:20px;background:#3498db;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background .2s}.freq-btn:hover{background:#2980b9}#freq-input{width:100px;padding:8px;font-size:18px;text-align:center;border:1px solid #ccc;border-radius:4px}#btn-set-freq{display:block;width:100%;margin-top:10px}.error-msg{color:#e74c3c;margin-top:8px;text-align:center;font-size:14px}.error-msg.hidden{display:none}
|
||||
@@ -1 +0,0 @@
|
||||
(function(){const i=document.createElement("link").relList;if(i&&i.supports&&i.supports("modulepreload"))return;for(const t of document.querySelectorAll('link[rel="modulepreload"]'))a(t);new MutationObserver(t=>{for(const n of t)if(n.type==="childList")for(const s of n.addedNodes)s.tagName==="LINK"&&s.rel==="modulepreload"&&a(s)}).observe(document,{childList:!0,subtree:!0});function m(t){const n={};return t.integrity&&(n.integrity=t.integrity),t.referrerpolicy&&(n.referrerPolicy=t.referrerpolicy),t.crossorigin==="use-credentials"?n.credentials="include":t.crossorigin==="anonymous"?n.credentials="omit":n.credentials="same-origin",n}function a(t){if(t.ep)return;t.ep=!0;const n=m(t);fetch(t.href,n)}})();function h(){return window.go.main.App.CheckConnection()}function b(){return window.go.main.App.Quit()}function p(d){return window.go.main.App.SetFrequency(d)}(function(){const d=document.querySelectorAll(".tab-button"),i=document.querySelectorAll(".tab-content");d.forEach(e=>{e.addEventListener("click",()=>{d.forEach(c=>c.classList.remove("active")),i.forEach(c=>c.classList.remove("active")),e.classList.add("active");const y=e.getAttribute("data-tab");document.getElementById(`tab-${y}`).classList.add("active")})});const m=document.getElementById("btn-check"),a=document.getElementById("btn-freq"),t=document.getElementById("btn-quit"),n=document.getElementById("status-indicator"),s=document.getElementById("status-text"),f=document.getElementById("frequency-label"),u=document.getElementById("frequency-value"),l=document.getElementById("freq-modal"),g=document.getElementById("close-modal"),r=document.getElementById("freq-input"),v=document.getElementById("btn-minus"),E=document.getElementById("btn-plus"),L=document.getElementById("btn-set-freq"),o=document.getElementById("modal-error");m.addEventListener("click",()=>{h().then(e=>{n.classList.remove("indicator-red"),n.classList.add("indicator-green"),s.textContent=`\u0421\u043E\u0435\u0434\u0438\u043D\u0435\u043D\u0438\u0435 \u0443\u0441\u0442\u0430\u043D\u043E\u0432\u043B\u0435\u043D\u043E! ${e.status}`,f.textContent="\u0422\u0435\u043A\u0443\u0449\u0430\u044F \u0447\u0430\u0441\u0442\u043E\u0442\u0430:",u.textContent=e.frequency}).catch(e=>{console.error("\u041E\u0448\u0438\u0431\u043A\u0430 CheckConnection:",e),s.textContent="\u041E\u0448\u0438\u0431\u043A\u0430: \u043D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u0432\u044B\u043F\u043E\u043B\u043D\u0438\u0442\u044C \u043F\u0440\u043E\u0432\u0435\u0440\u043A\u0443"})}),a.addEventListener("click",()=>{l.classList.remove("hidden");const e=u.textContent!=="---"?u.textContent:"145";r.value=e,o.classList.add("hidden")}),g.addEventListener("click",()=>{l.classList.add("hidden")}),window.addEventListener("click",e=>{e.target===l&&l.classList.add("hidden")}),v.addEventListener("click",()=>{let e=parseInt(r.value,10)||1;e=Math.max(1,e-1),r.value=e.toString()}),E.addEventListener("click",()=>{let e=parseInt(r.value,10)||1;e+=1,r.value=e.toString()}),L.addEventListener("click",()=>{const e=r.value.trim();if(!/^\d+$/.test(e)){o.textContent="\u0412\u0432\u043E\u0434\u0438\u043C\u043E\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u0434\u043E\u043B\u0436\u043D\u043E \u0431\u044B\u0442\u044C \u0446\u0435\u043B\u044B\u043C \u043F\u043E\u043B\u043E\u0436\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u043C \u0447\u0438\u0441\u043B\u043E\u043C",o.classList.remove("hidden");return}if(parseInt(e,10)<=0){o.textContent="\u0412\u0432\u043E\u0434\u0438\u043C\u043E\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u0434\u043E\u043B\u0436\u043D\u043E \u0431\u044B\u0442\u044C \u0446\u0435\u043B\u044B\u043C \u043F\u043E\u043B\u043E\u0436\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u043C \u0447\u0438\u0441\u043B\u043E\u043C",o.classList.remove("hidden");return}p(e).then(c=>{f.textContent="\u0423\u0441\u0442\u0430\u043D\u043E\u0432\u043B\u0435\u043D\u043D\u0430\u044F \u0447\u0430\u0441\u0442\u043E\u0442\u0430:",u.textContent=c,l.classList.add("hidden")}).catch(c=>{o.textContent=c,o.classList.remove("hidden")})}),t.addEventListener("click",()=>{b()})})();
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 176 KiB |
Vendored
+28
-7
@@ -4,14 +4,35 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<title>Тест (Спектр)</title>
|
||||
<script type="module" crossorigin src="/assets/index.cb23cfd6.js"></script>
|
||||
<link rel="stylesheet" href="/assets/index.448f6f10.css">
|
||||
<title>Спектр</title>
|
||||
<script type="module" crossorigin src="/assets/index.02c817da.js"></script>
|
||||
<link rel="stylesheet" href="/assets/index.41fde905.css">
|
||||
</head>
|
||||
<body>
|
||||
<body data-theme="dark">
|
||||
|
||||
<!-- Переключатель темы -->
|
||||
<button id="theme-toggle" title="Сменить тему">☀</button>
|
||||
|
||||
<!-- Интро при запуске: закрывает всё окно приложения, потом "двери" разъезжаются -->
|
||||
<div id="intro-overlay">
|
||||
<div class="door door-left"></div>
|
||||
<div class="door door-right"></div>
|
||||
</div>
|
||||
|
||||
<div id="app">
|
||||
<!-- Заголовки вкладок -->
|
||||
<div class="tabs">
|
||||
|
||||
<!-- Бренд-блок -->
|
||||
<div id="brand">
|
||||
<div class="logo-icon">
|
||||
<img class="logo-dark" src="/assets/logo-dark.ff9a8bc7.jpg" alt="ТЭЧ ДМ" />
|
||||
<img class="logo-light" src="/assets/logo-light.d5e577a8.png" alt="ТЭЧ ДМ" />
|
||||
</div>
|
||||
<h1>СПЕКТР</h1>
|
||||
<div class="tag">видеоприёмник · панель управления</div>
|
||||
</div>
|
||||
|
||||
<!-- Заголовки вкладок (пока скрыты — активен только режим приёмника) -->
|
||||
<div class="tabs" hidden>
|
||||
<button class="tab-button active" data-tab="receiver">Режим приемника</button>
|
||||
<button class="tab-button" data-tab="detector">Режим детектора</button>
|
||||
<button class="tab-button" data-tab="info">Информация</button>
|
||||
@@ -64,4 +85,4 @@
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -4,12 +4,33 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="./src/style.css" />
|
||||
<title>Тест (Спектр)</title>
|
||||
<title>Спектр</title>
|
||||
</head>
|
||||
<body>
|
||||
<body data-theme="dark">
|
||||
|
||||
<!-- Переключатель темы -->
|
||||
<button id="theme-toggle" title="Сменить тему">☀</button>
|
||||
|
||||
<!-- Интро при запуске: закрывает всё окно приложения, потом "двери" разъезжаются -->
|
||||
<div id="intro-overlay">
|
||||
<div class="door door-left"></div>
|
||||
<div class="door door-right"></div>
|
||||
</div>
|
||||
|
||||
<div id="app">
|
||||
<!-- Заголовки вкладок -->
|
||||
<div class="tabs">
|
||||
|
||||
<!-- Бренд-блок -->
|
||||
<div id="brand">
|
||||
<div class="logo-icon">
|
||||
<img class="logo-dark" src="/src/assets/images/logo-dark.jpg" alt="ТЭЧ ДМ" />
|
||||
<img class="logo-light" src="/src/assets/images/logo-light.png" alt="ТЭЧ ДМ" />
|
||||
</div>
|
||||
<h1>СПЕКТР</h1>
|
||||
<div class="tag">видеоприёмник · панель управления</div>
|
||||
</div>
|
||||
|
||||
<!-- Заголовки вкладок (пока скрыты — активен только режим приёмника) -->
|
||||
<div class="tabs" hidden>
|
||||
<button class="tab-button active" data-tab="receiver">Режим приемника</button>
|
||||
<button class="tab-button" data-tab="detector">Режим детектора</button>
|
||||
<button class="tab-button" data-tab="info">Информация</button>
|
||||
@@ -62,4 +83,4 @@
|
||||
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 176 KiB |
@@ -4,7 +4,73 @@ import {
|
||||
Quit,
|
||||
} from "../wailsjs/go/main/App";
|
||||
|
||||
// импорт через ES-модуль, а не строкой-путём — иначе vite не подставит
|
||||
// правильный хэшированный путь в собранном билде (сломается в проде)
|
||||
import logoDarkUrl from "./assets/images/logo-dark.jpg";
|
||||
|
||||
(function() {
|
||||
// === Тема (тёмная/светлая) ===
|
||||
const themeToggle = document.getElementById('theme-toggle');
|
||||
themeToggle.addEventListener('click', () => {
|
||||
const cur = document.body.getAttribute('data-theme');
|
||||
const next = cur === 'light' ? 'dark' : 'light';
|
||||
document.body.setAttribute('data-theme', next);
|
||||
themeToggle.textContent = next === 'light' ? '☾' : '☀';
|
||||
});
|
||||
|
||||
// === Интро при запуске (лого "двери" разъезжаются) ===
|
||||
const NATURAL_W = 640, NATURAL_H = 480;
|
||||
const AXIS_X = 312; // ось раздела — середина носа черепа / верхнего зубца шестерни
|
||||
const LOGO_DARK_URL = logoDarkUrl;
|
||||
|
||||
const introOverlay = document.getElementById('intro-overlay');
|
||||
const doorLeft = document.querySelector('#intro-overlay .door-left');
|
||||
const doorRight = document.querySelector('#intro-overlay .door-right');
|
||||
|
||||
function layoutDoors() {
|
||||
const W = window.innerWidth;
|
||||
const H = window.innerHeight;
|
||||
const scale = Math.max(W / NATURAL_W, H / NATURAL_H); // object-fit: cover на весь размер окна
|
||||
const renderW = NATURAL_W * scale;
|
||||
const renderH = NATURAL_H * scale;
|
||||
const offsetX = (W - renderW) / 2;
|
||||
const offsetY = (H - renderH) / 2;
|
||||
const axisDisplayX = offsetX + AXIS_X * scale;
|
||||
|
||||
const leftW = Math.max(0, Math.min(W, axisDisplayX));
|
||||
const rightW = W - leftW;
|
||||
|
||||
doorLeft.style.width = leftW + 'px';
|
||||
doorLeft.style.backgroundImage = `url(${LOGO_DARK_URL})`;
|
||||
doorLeft.style.backgroundSize = renderW + 'px ' + renderH + 'px';
|
||||
doorLeft.style.backgroundPosition = offsetX + 'px ' + offsetY + 'px';
|
||||
|
||||
doorRight.style.left = leftW + 'px';
|
||||
doorRight.style.width = rightW + 'px';
|
||||
doorRight.style.backgroundImage = `url(${LOGO_DARK_URL})`;
|
||||
doorRight.style.backgroundSize = renderW + 'px ' + renderH + 'px';
|
||||
doorRight.style.backgroundPosition = (offsetX - leftW) + 'px ' + offsetY + 'px';
|
||||
}
|
||||
|
||||
const OPEN_AT = 2100; // момент начала разъезда дверей от старта интро, мс
|
||||
const APPEAR_START = 100;
|
||||
const APPEAR_DUR = 450;
|
||||
|
||||
function playIntro() {
|
||||
introOverlay.style.display = '';
|
||||
introOverlay.classList.remove('appear', 'open');
|
||||
void introOverlay.offsetWidth; // reflow reset
|
||||
layoutDoors();
|
||||
|
||||
setTimeout(() => introOverlay.classList.add('appear'), APPEAR_START);
|
||||
setTimeout(() => introOverlay.classList.add('open'), OPEN_AT);
|
||||
// прячем оверлей из потока/кликов после того как двери разъехались и погасли
|
||||
setTimeout(() => { introOverlay.style.display = 'none'; }, OPEN_AT + 1170);
|
||||
}
|
||||
|
||||
window.addEventListener('resize', layoutDoors);
|
||||
playIntro(); // main.js подключён как type="module" — DOM уже готов на этот момент
|
||||
|
||||
// === Переключение вкладок ===
|
||||
const tabButtons = document.querySelectorAll('.tab-button');
|
||||
const tabContents = document.querySelectorAll('.tab-content');
|
||||
|
||||
@@ -10,138 +10,233 @@ html, body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #f0f0f0;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 400px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Панель вкладок */
|
||||
.tabs {
|
||||
display: flex;
|
||||
background: #e9e9e9;
|
||||
/* ===================== ТЕМА (тёмная/светлая) ===================== */
|
||||
body {
|
||||
background: radial-gradient(circle at 50% 18%, #1a1d24 0%, #0d0f13 70%);
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
body[data-theme="light"] {
|
||||
background: radial-gradient(circle at 50% 18%, #ffffff 0%, #dde1e7 70%);
|
||||
}
|
||||
|
||||
#theme-toggle {
|
||||
position: fixed;
|
||||
top: 16px; right: 18px;
|
||||
z-index: 500;
|
||||
width: 34px; height: 34px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #333a46;
|
||||
background: #222a37;
|
||||
color: #ccc;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
body[data-theme="light"] #theme-toggle {
|
||||
border-color: #c7cbd1;
|
||||
background: #ffffff;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
/* ===================== КАРТОЧКА ПРИЛОЖЕНИЯ ===================== */
|
||||
#app {
|
||||
width: 360px;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
|
||||
overflow: hidden;
|
||||
background: #1b1e24;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
body[data-theme="light"] #app {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
/* ---- бренд-блок ---- */
|
||||
#brand {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
padding: 26px 24px 16px;
|
||||
gap: 6px;
|
||||
}
|
||||
.logo-icon {
|
||||
position: relative;
|
||||
width: 64px; height: 48px; /* пропорции 640:480 исходного лого */
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.logo-icon img {
|
||||
position: absolute; inset: 0;
|
||||
width: 100%; height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.logo-icon .logo-dark { mix-blend-mode: screen; display: block; }
|
||||
.logo-icon .logo-light { mix-blend-mode: multiply; display: none; }
|
||||
body[data-theme="light"] .logo-icon .logo-dark { display: none; }
|
||||
body[data-theme="light"] .logo-icon .logo-light { display: block; }
|
||||
|
||||
#brand h1 {
|
||||
color: #eeeeee;
|
||||
font-size: 21px;
|
||||
letter-spacing: 3.5px;
|
||||
font-weight: 700;
|
||||
}
|
||||
#brand .tag {
|
||||
color: #7a7f89;
|
||||
font-size: 11px;
|
||||
letter-spacing: 1.2px;
|
||||
}
|
||||
body[data-theme="light"] #brand h1 { color: #1b1d22; }
|
||||
body[data-theme="light"] #brand .tag { color: #888d97; }
|
||||
|
||||
/* Панель вкладок (пока скрыта атрибутом hidden в HTML) */
|
||||
.tabs {
|
||||
display: flex;
|
||||
background: transparent;
|
||||
}
|
||||
.tabs[hidden] {
|
||||
display: none; /* без этого .tabs{display:flex} выше перебивает атрибут hidden */
|
||||
}
|
||||
.tab-button {
|
||||
flex: 1;
|
||||
padding: 12px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
color: #9aa0aa;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.tab-button:hover {
|
||||
background: #dcdcdc;
|
||||
}
|
||||
|
||||
.tab-button:hover { background: rgba(255,255,255,0.05); }
|
||||
.tab-button.active {
|
||||
background: white;
|
||||
border-bottom: 3px solid #3498db;
|
||||
color: #eee;
|
||||
border-bottom: 2px solid #b8362a;
|
||||
font-weight: bold;
|
||||
}
|
||||
body[data-theme="light"] .tab-button { color: #7a7f89; }
|
||||
body[data-theme="light"] .tab-button.active { color: #1b1d22; }
|
||||
|
||||
/* Содержимое вкладок */
|
||||
.tab-content {
|
||||
display: none;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
.tab-content { display: none; padding: 4px 22px 24px; }
|
||||
.tab-content.active { display: block; }
|
||||
|
||||
/* Вертикально расположенные кнопки */
|
||||
.buttons-vertical {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
padding: 12px;
|
||||
font-size: 16px;
|
||||
padding: 11px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #bbb;
|
||||
border-radius: 6px;
|
||||
background-color: #f8f8f8;
|
||||
border: 1px solid #2a2d34;
|
||||
border-radius: 8px;
|
||||
background-color: #15171c;
|
||||
color: #e8e8e8;
|
||||
transition: background-color 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
.action-button:hover {
|
||||
background-color: #e2e6ea;
|
||||
border-color: #999;
|
||||
background-color: #1d2027;
|
||||
border-color: #3a3e46;
|
||||
}
|
||||
body[data-theme="light"] .action-button {
|
||||
background-color: #ffffff;
|
||||
border-color: #ccd1d9;
|
||||
color: #22242a;
|
||||
}
|
||||
body[data-theme="light"] .action-button:hover {
|
||||
background-color: #f0f2f5;
|
||||
border-color: #aeb4bd;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
background-color: #e74c3c;
|
||||
background-color: #b8362a;
|
||||
color: white;
|
||||
border-color: #8f2a20;
|
||||
}
|
||||
.close-button:hover { background-color: #c73f31; }
|
||||
body[data-theme="light"] .close-button {
|
||||
background-color: #e74c3c;
|
||||
border-color: #c0392b;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.close-button:hover {
|
||||
background-color: #c0392b;
|
||||
}
|
||||
body[data-theme="light"] .close-button:hover { background-color: #d8432f; }
|
||||
|
||||
/* Панель частоты */
|
||||
#frequency-panel {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 14px;
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#frequency-label {
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
#frequency-value {
|
||||
font-size: 18px;
|
||||
color: #2c3e50;
|
||||
padding: 9px 13px;
|
||||
background-color: #15171c;
|
||||
border: 1px solid #2a2d34;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
#frequency-label { font-weight: bold; color: #9aa0aa; font-size: 13px; }
|
||||
#frequency-value { font-size: 17px; color: #f2f2f2; }
|
||||
body[data-theme="light"] #frequency-panel { background-color: #ffffff; border-color: #ccd1d9; }
|
||||
body[data-theme="light"] #frequency-label { color: #7a7f89; }
|
||||
body[data-theme="light"] #frequency-value { color: #1b1d22; }
|
||||
|
||||
/* Панель статуса */
|
||||
#status-panel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 14px;
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
gap: 9px;
|
||||
padding: 9px 13px;
|
||||
background-color: #15171c;
|
||||
border: 1px solid #2a2d34;
|
||||
border-radius: 8px;
|
||||
}
|
||||
body[data-theme="light"] #status-panel { background-color: #ffffff; border-color: #ccd1d9; }
|
||||
|
||||
.indicator {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
.indicator-red { background-color: #e74c3c; }
|
||||
.indicator-green { background-color: #2ecc71; }
|
||||
|
||||
.indicator-red {
|
||||
background-color: #e74c3c;
|
||||
#status-text { font-size: 14px; color: #ddd; }
|
||||
body[data-theme="light"] #status-text { color: #333; }
|
||||
|
||||
/* ===================== ИНТРО (двери) ===================== */
|
||||
#intro-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
background: #000; /* подстраховка: перекрывает всё, даже пока JS ещё не выставил размеры дверей */
|
||||
transform: scale(1.04);
|
||||
}
|
||||
|
||||
.indicator-green {
|
||||
background-color: #2ecc71;
|
||||
#intro-overlay.appear {
|
||||
animation: introPop 0.45s cubic-bezier(.2,.9,.3,1) forwards;
|
||||
}
|
||||
@keyframes introPop { to { transform: scale(1); } }
|
||||
|
||||
#status-text {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
.door {
|
||||
position: absolute;
|
||||
top: 0; bottom: 0;
|
||||
overflow: hidden;
|
||||
background-color: #000;
|
||||
background-repeat: no-repeat;
|
||||
transition: transform 1.17s cubic-bezier(.65,0,.35,1);
|
||||
}
|
||||
.door-left { left: 0; }
|
||||
.door-right { left: 0; } /* left/width выставляются из JS под реальный размер окна */
|
||||
|
||||
#intro-overlay.open .door-left { transform: translateX(-100%); }
|
||||
#intro-overlay.open .door-right { transform: translateX(100%); }
|
||||
#intro-overlay.open {
|
||||
transition: opacity 0.45s ease 0.65s;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Модальное окно */
|
||||
@@ -151,7 +246,7 @@ html, body {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,0.4);
|
||||
background: rgba(0,0,0,0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@@ -163,12 +258,17 @@ html, body {
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: white;
|
||||
background: #1b1e24;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
width: 300px;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.4);
|
||||
position: relative;
|
||||
color: #eee;
|
||||
}
|
||||
body[data-theme="light"] .modal-content {
|
||||
background: #ffffff;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.close-modal {
|
||||
@@ -177,12 +277,11 @@ html, body {
|
||||
right: 15px;
|
||||
font-size: 22px;
|
||||
cursor: pointer;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.close-modal:hover {
|
||||
color: #333;
|
||||
color: #999;
|
||||
}
|
||||
.close-modal:hover { color: #eee; }
|
||||
body[data-theme="light"] .close-modal { color: #777; }
|
||||
body[data-theme="light"] .close-modal:hover { color: #333; }
|
||||
|
||||
.modal-content h3 {
|
||||
margin-bottom: 15px;
|
||||
@@ -201,25 +300,29 @@ html, body {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 20px;
|
||||
background: #3498db;
|
||||
background: #b8362a;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.freq-btn:hover {
|
||||
background: #2980b9;
|
||||
}
|
||||
.freq-btn:hover { background: #c73f31; }
|
||||
|
||||
#freq-input {
|
||||
width: 100px;
|
||||
padding: 8px;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid #444;
|
||||
border-radius: 4px;
|
||||
background: #15171c;
|
||||
color: #eee;
|
||||
}
|
||||
body[data-theme="light"] #freq-input {
|
||||
border-color: #ccc;
|
||||
background: #fff;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
#btn-set-freq {
|
||||
@@ -237,4 +340,4 @@ html, body {
|
||||
|
||||
.error-msg.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user