Шрифты

.gitignore

@@ -28,6 +28,7 @@ vendor/
 
 # Зависимости node_modules
 node_modules/
+dist/
 package-lock.json
 yarn.lock
 pnpm-lock.yaml

cmd/server/web/css/audio.css

@@ -1,5 +1,4 @@
-/* Стили аудио-индикатора (pulse, индикатор) */
+/* Стили аудио-индикатора */
-/* ===== AUDIO INDICATOR ===== */
 @keyframes pulse {
     0%, 100% {
         opacity: 1;
@@ -12,9 +11,8 @@
 }
 
 #audio-indicator {
-    transition: all 0.3s ease;
+    font-family: var(--font-tech);
-    font-family: monospace;
+    font-size: var(--font-size-lg);
-    font-size: 16px;
     padding: 4px 12px;
     border-radius: 6px;
     background: rgba(0, 0, 0, 0.4);
@@ -22,6 +20,7 @@
     min-width: 50px;
     text-align: center;
     user-select: none;
+    transition: all 0.3s ease;
 }
 
 #audio-indicator.active {

cmd/server/web/css/base.css

@@ -1,4 +1,25 @@
 /* Базовые стили (сброс, body, общие настройки) */
+/* ===== БАЗОВЫЕ СТИЛИ ===== */
+:root {
+    /* Основные шрифты */
+    --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
+    --font-display: 'Orbitron', 'Share Tech Mono', 'Segoe UI', sans-serif;
+    --font-tech: 'Share Tech Mono', 'Courier New', monospace;
+
+    /* Размеры */
+    --font-size-xs: 10px;
+    --font-size-sm: 12px;
+    --font-size-base: 14px;
+    --font-size-lg: 16px;
+    --font-size-xl: 18px;
+    --font-size-2xl: 22px;
+    --font-size-3xl: 28px;
+
+    /* Веса */
+    --font-weight-normal: 400;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+}
 
 * {
     box-sizing: border-box;
@@ -6,8 +27,62 @@
 
 body {
     margin: 0;
-    font-family: monospace;
+    font-family: var(--font-mono);
     background: #050805;
     color: #00ff88;
     padding: 12px;
+    font-size: var(--font-size-base);
+    line-height: 1.6;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+/* ===== ЗАГОЛОВКИ ===== */
+h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-display);
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    font-weight: var(--font-weight-bold);
+    margin: 0;
+}
+
+h1 {
+    font-size: var(--font-size-2xl);
+    text-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
+}
+
+h2 {
+    font-size: var(--font-size-xl);
+}
+
+h3 {
+    font-size: var(--font-size-lg);
+}
+
+/* ===== МОНОШИРИННЫЙ ТЕКСТ ===== */
+code, pre, .mono {
+    font-family: var(--font-mono);
+    font-weight: var(--font-weight-normal);
+}
+
+/* ===== ТЕХНИЧЕСКИЙ ТЕКСТ (статусы, значения) ===== */
+.status-text,
+.value-text,
+.signal-text,
+.tech-text {
+    font-family: var(--font-tech);
+    letter-spacing: 0.02em;
+}
+
+/* ===== УЛУЧШЕНИЯ ЧИТАЕМОСТИ ===== */
+.text-muted {
+    opacity: 0.6;
+}
+
+.text-bold {
+    font-weight: var(--font-weight-bold);
+}
+
+.text-semibold {
+    font-weight: var(--font-weight-semibold);
 }

cmd/server/web/css/camera.css

@@ -1,5 +1,4 @@
 /* Стили камеры (cam-modal, cam-frame, crosshair) */
-/* ===== CAMERA OVERLAY ===== */
 .cam-modal {
     height: 100%;
     display: flex;
@@ -13,6 +12,9 @@
     padding: 8px;
     background: #111;
     color: #00ff88;
+    font-family: var(--font-display);
+    font-size: var(--font-size-base);
+    letter-spacing: 0.05em;
 }
 
 .cam-frame-wrapper {
@@ -77,4 +79,4 @@
     box-shadow:
         0 0 10px rgba(0, 255, 136, 0.3),
         inset 0 0 10px rgba(0, 255, 136, 0.1);
-}
+}

cmd/server/web/css/cards.css

@@ -1,3 +1,4 @@
+/* Стили карточек (card, accordion, статусы) */
 /* ===== CARD ===== */
 .card {
     border: 1px solid #00ff88;
@@ -8,31 +9,44 @@
     height: 100%;
     display: flex;
     flex-direction: column;
+    transition: all 0.3s ease;
+}
+
+.card:hover {
+    box-shadow: 0 0 30px rgba(0, 255, 136, 0.05);
 }
 
 .card h3 {
     margin: 0 0 10px;
-    font-size: 18px;
+    font-size: var(--font-size-lg);
+    font-family: var(--font-display);
+    letter-spacing: 0.1em;
+    font-weight: var(--font-weight-bold);
 }
 
 /* ===== STATUS ===== */
 #status {
-    font-size: 28px;
+    font-family: var(--font-tech);
-    font-weight: bold;
+    font-size: var(--font-size-3xl);
+    font-weight: var(--font-weight-bold);
     margin-bottom: 8px;
+    letter-spacing: 0.05em;
 }
 
 .status-ok {
     color: #00ff88 !important;
+    text-shadow: 0 0 30px rgba(0, 255, 136, 0.3);
 }
 
 .status-lost {
     color: #ffffff !important;
     animation: blink 1.5s infinite;
+    text-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
 }
 
 .status-error {
     color: #ff4444 !important;
+    text-shadow: 0 0 30px rgba(255, 68, 68, 0.3);
 }
 
 @keyframes blink {
@@ -42,9 +56,10 @@
 
 /* ===== META ===== */
 #meta {
-    font-size: 14px;
+    font-family: var(--font-mono);
+    font-size: var(--font-size-base);
     opacity: 0.8;
-    word-break: break-word;
+    letter-spacing: 0.02em;
 }
 
 /* ===== ACCORDION ===== */
@@ -53,10 +68,15 @@
     user-select: none;
     padding: 10px 0;
     margin: 0;
+    font-family: var(--font-display);
+    font-weight: var(--font-weight-bold);
+    letter-spacing: 0.05em;
+    transition: all 0.3s ease;
 }
 
 .accordion-header:hover {
     opacity: 0.7;
+    text-shadow: 0 0 20px rgba(0, 255, 136, 0.2);
 }
 
 .accordion-body {
@@ -72,18 +92,35 @@
 
 /* ===== LAST BYTE ===== */
 #last-byte {
-    font-size: 18px;
+    font-family: var(--font-tech);
-    font-weight: bold;
+    font-size: var(--font-size-xl);
+    font-weight: var(--font-weight-bold);
     color: #00ff88;
+    text-shadow: 0 0 20px rgba(0, 255, 136, 0.2);
 }
 
 /* ===== HISTORY ===== */
 #history {
-    font-size: 13px;
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
     line-height: 1.35;
     max-height: 420px;
     overflow-y: auto;
     white-space: nowrap;
     padding-right: 4px;
     margin: 0;
+    letter-spacing: 0.02em;
+}
+
+#history::-webkit-scrollbar {
+    width: 6px;
+}
+
+#history::-webkit-scrollbar-track {
+    background: rgba(0, 255, 136, 0.05);
+}
+
+#history::-webkit-scrollbar-thumb {
+    background: #00ff88;
+    border-radius: 3px;
 }

cmd/server/web/css/components.css

@@ -1,14 +1,16 @@
-/* Компоненты (прогресс-бары, сигнальные иконки, перекрестие) */
+/* Компоненты (прогресс-бары, сигнальные иконки) */
 /* ===== PROGRESS BARS ===== */
 .progress-row {
     margin-bottom: 16px;
 }
 
 .progress-label {
-    font-size: 16px;
+    font-family: var(--font-mono);
+    font-size: var(--font-size-base);
     margin-bottom: 6px;
     color: #ffffff;
     opacity: 0.9;
+    letter-spacing: 0.03em;
 }
 
 .progress {

cmd/server/web/css/fonts.css

@@ -0,0 +1,60 @@
+/* ===== ЛОКАЛЬНЫЕ ШРИФТЫ ===== */
+
+/* JetBrains Mono */
+@font-face {
+    font-family: 'JetBrains Mono';
+    font-style: normal;
+    font-weight: 400;
+    src: url('/fonts/JetBrainsMono/ttf/JetBrainsMono-Regular.ttf') format('truetype');
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'JetBrains Mono';
+    font-style: normal;
+    font-weight: 600;
+    src: url('/fonts/JetBrainsMono/ttf/JetBrainsMono-Bold.ttf') format('truetype');
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'JetBrains Mono';
+    font-style: normal;
+    font-weight: 700;
+    src: url('/fonts/JetBrainsMono/ttf/JetBrainsMono-ExtraBold.ttf') format('truetype');
+    font-display: swap;
+}
+
+/* Orbitron - для заголовков */
+@font-face {
+    font-family: 'Orbitron';
+    font-style: normal;
+    font-weight: 400;
+    src: url('/fonts/Orbitron/static/Orbitron-Regular.ttf') format('truetype');
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Orbitron';
+    font-style: normal;
+    font-weight: 600;
+    src: url('/fonts/Orbitron/static/Orbitron-SemiBold.ttf') format('truetype');
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Orbitron';
+    font-style: normal;
+    font-weight: 700;
+    src: url('/fonts/Orbitron/static/Orbitron-Bold.ttf') format('truetype');
+    font-display: swap;
+}
+
+/* Share Tech Mono - для статусов и значений */
+@font-face {
+    font-family: 'Share Tech Mono';
+    font-style: normal;
+    font-weight: 400;
+    src: url('/fonts/ShareTechMono-Regular.ttf') format('truetype');
+    font-display: swap;
+}

cmd/server/web/css/header.css

@@ -7,19 +7,24 @@
     gap: 16px;
 }
 
-h1 {
+.header-bar h1 {
-    font-size: 22px;
+    font-family: var(--font-display);
-    margin: 0;
+    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-2xl);
+    letter-spacing: 0.1em;
+    text-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
 }
 
 .header-time {
-    font-size: 16px;
+    font-family: var(--font-tech);
+    font-size: var(--font-size-lg);
     text-align: center;
     white-space: nowrap;
     padding: 6px 12px;
     border: 1px solid rgba(0, 255, 136, 0.35);
     border-radius: 8px;
     background: rgba(0, 255, 136, 0.05);
+    letter-spacing: 0.05em;
 }
 
 .header-bar .cam-btn {
@@ -34,17 +39,22 @@ h1 {
     border: 1px solid #00ff88;
     border-radius: 8px;
     cursor: pointer;
-    font-family: monospace;
+    font-family: var(--font-mono);
-    font-size: 14px;
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-semibold);
     display: flex;
     align-items: center;
     gap: 8px;
     white-space: nowrap;
     flex-shrink: 0;
+    transition: all 0.3s ease;
+    letter-spacing: 0.03em;
 }
 
 .cam-btn:hover {
     background: rgba(0, 255, 136, 0.2);
+    box-shadow: 0 0 20px rgba(0, 255, 136, 0.1);
+    transform: translateY(-1px);
 }
 
 .cam-btn-icon {

cmd/server/web/css/logs.css

@@ -1,5 +1,4 @@
-/* Стили страницы журнала (дополнительные стили из logs.html) */
+/* Стили страницы журнала */
-/* Дополнительные стили для журнала */
 .logs-container {
     display: flex;
     gap: 20px;
@@ -25,6 +24,7 @@
     border-radius: 4px;
     border: 1px solid transparent;
     transition: all 0.2s;
+    font-family: var(--font-mono);
 }
 
 .log-file-item:hover {
@@ -38,11 +38,12 @@
 }
 
 .log-file-item .file-name {
-    font-size: 13px;
+    font-size: var(--font-size-sm);
+    font-family: var(--font-mono);
 }
 
 .log-file-item .file-info {
-    font-size: 11px;
+    font-size: var(--font-size-xs);
     opacity: 0.6;
 }
 
@@ -58,22 +59,27 @@
     border: 1px solid #00ff88;
     border-radius: 4px;
     text-align: center;
+    background: rgba(0,255,136,0.02);
 }
 
 .log-stat-card .value {
-    font-size: 24px;
+    font-family: var(--font-tech);
-    font-weight: bold;
+    font-size: var(--font-size-2xl);
+    font-weight: var(--font-weight-bold);
 }
 
 .log-stat-card .label {
-    font-size: 11px;
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
     opacity: 0.6;
+    margin-top: 4px;
 }
 
 .data-table {
     width: 100%;
-    font-size: 12px;
+    font-size: var(--font-size-sm);
     border-collapse: collapse;
+    font-family: var(--font-mono);
 }
 
 .data-table th {
@@ -83,11 +89,16 @@
     position: sticky;
     top: 0;
     background: #050805;
+    font-family: var(--font-display);
+    font-weight: var(--font-weight-bold);
+    letter-spacing: 0.05em;
+    font-size: var(--font-size-sm);
 }
 
 .data-table td {
     padding: 4px 8px;
     border-bottom: 1px solid rgba(0,255,136,0.1);
+    font-family: var(--font-mono);
 }
 
 .data-table tr:hover {
@@ -100,13 +111,14 @@
 .strength-3 { color: #ff4444; }
 
 .events-list {
-    font-family: monospace;
+    font-family: var(--font-mono);
-    font-size: 13px;
+    font-size: var(--font-size-sm);
     line-height: 1.6;
 }
 
 .events-list .event-time {
     opacity: 0.5;
+    font-family: var(--font-tech);
 }
 
 .tabs {
@@ -122,15 +134,19 @@
     border: 1px solid #00ff88;
     border-radius: 4px;
     cursor: pointer;
-    font-family: monospace;
+    font-family: var(--font-mono);
+    font-size: var(--font-size-base);
+    transition: all 0.3s ease;
 }
 
 .tab-btn.active {
     background: rgba(0,255,136,0.2);
+    box-shadow: 0 0 20px rgba(0, 255, 136, 0.1);
 }
 
 .tab-btn:hover {
     background: rgba(0,255,136,0.1);
+    transform: translateY(-1px);
 }
 
 .tab-content {
@@ -164,8 +180,8 @@
     border: 1px solid #00ff88;
     border-radius: 4px;
     cursor: pointer;
-    font-family: monospace;
+    font-family: var(--font-mono);
-    font-size: 14px;
+    font-size: var(--font-size-base);
     transition: all 0.2s;
     min-width: 40px;
 }
@@ -184,8 +200,8 @@
 .pagination-info {
     padding: 0 12px;
     color: #00ff88;
-    font-size: 14px;
+    font-size: var(--font-size-base);
-    font-family: monospace;
+    font-family: var(--font-mono);
     min-width: 200px;
     text-align: center;
 }
@@ -204,8 +220,8 @@
     color: #00ff88;
     border: 1px solid #00ff88;
     border-radius: 4px;
-    font-family: monospace;
+    font-family: var(--font-mono);
-    font-size: 14px;
+    font-size: var(--font-size-base);
     text-align: center;
 }
 
@@ -216,7 +232,7 @@
 
 .pagination-goto-btn {
     padding: 4px 12px;
-    font-size: 12px;
+    font-size: var(--font-size-sm);
 }
 
 .loading-indicator {
@@ -224,7 +240,7 @@
     padding: 20px;
     color: #00ff88;
     opacity: 0.7;
-    font-family: monospace;
+    font-family: var(--font-mono);
 }
 
 /* ===== АДАПТИВНОСТЬ ===== */
@@ -235,12 +251,12 @@
 
     .pagination-btn {
         padding: 4px 10px;
-        font-size: 12px;
+        font-size: var(--font-size-sm);
         min-width: 32px;
     }
 
     .pagination-info {
-        font-size: 12px;
+        font-size: var(--font-size-sm);
         min-width: 120px;
         padding: 0 8px;
     }
@@ -251,7 +267,7 @@
 
     .pagination-input {
         width: 50px;
-        font-size: 12px;
+        font-size: var(--font-size-sm);
         padding: 3px 6px;
     }
 }

cmd/server/web/dashboard.html

@@ -5,15 +5,18 @@
 <head>
 <meta charset="UTF-8">
 <title>GPIO Панель</title>
-<link rel="icon" type="image/png" href="/favicon.png">
+    <link rel="icon" type="image/png" href="/favicon.png">
-<link rel="stylesheet" href="/css/base.css">
+    <!-- Локальные шрифты -->
-<link rel="stylesheet" href="/css/header.css">
+    <link rel="stylesheet" href="/css/fonts.css">
-<link rel="stylesheet" href="/css/layout.css">
+    <!-- ===== СТИЛИ ===== -->
-<link rel="stylesheet" href="/css/cards.css">
+    <link rel="stylesheet" href="/css/base.css">
-<link rel="stylesheet" href="/css/components.css">
+    <link rel="stylesheet" href="/css/header.css">
-<link rel="stylesheet" href="/css/camera.css">
+    <link rel="stylesheet" href="/css/layout.css">
-<link rel="stylesheet" href="/css/audio.css">
+    <link rel="stylesheet" href="/css/cards.css">
-<link rel="stylesheet" href="/css/responsive.css">
+    <link rel="stylesheet" href="/css/components.css">
+    <link rel="stylesheet" href="/css/camera.css">
+    <link rel="stylesheet" href="/css/audio.css">
+    <link rel="stylesheet" href="/css/responsive.css">
 </head>
 
 <body>

cmd/server/web/logs.html

@@ -4,7 +4,8 @@
     <meta charset="UTF-8">
     <title>Журнал логов</title>
     <link rel="icon" type="image/png" href="/favicon.png">
-
+    <!-- Локальные шрифты -->
+    <link rel="stylesheet" href="/css/fonts.css">
     <!-- Базовые стили -->
     <link rel="stylesheet" href="/css/base.css">
     <link rel="stylesheet" href="/css/header.css">