Шрифты
This commit is contained in:
@@ -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: monospace;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-tech);
|
||||
font-size: var(--font-size-lg);
|
||||
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 {
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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-weight: bold;
|
||||
font-family: var(--font-tech);
|
||||
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-weight: bold;
|
||||
font-family: var(--font-tech);
|
||||
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;
|
||||
}
|
||||
@@ -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 {
|
||||
|
||||
60
cmd/server/web/css/fonts.css
Normal file
60
cmd/server/web/css/fonts.css
Normal file
@@ -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;
|
||||
}
|
||||
@@ -7,19 +7,24 @@
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 22px;
|
||||
margin: 0;
|
||||
.header-bar h1 {
|
||||
font-family: var(--font-display);
|
||||
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-size: 14px;
|
||||
font-family: var(--font-mono);
|
||||
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 {
|
||||
|
||||
@@ -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-weight: bold;
|
||||
font-family: var(--font-tech);
|
||||
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-size: 13px;
|
||||
font-family: var(--font-mono);
|
||||
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-size: 14px;
|
||||
font-family: var(--font-mono);
|
||||
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-family: monospace;
|
||||
font-size: var(--font-size-base);
|
||||
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-size: 14px;
|
||||
font-family: var(--font-mono);
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,15 +5,18 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>GPIO Панель</title>
|
||||
<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/layout.css">
|
||||
<link rel="stylesheet" href="/css/cards.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">
|
||||
<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">
|
||||
<link rel="stylesheet" href="/css/layout.css">
|
||||
<link rel="stylesheet" href="/css/cards.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>
|
||||
|
||||
BIN
cmd/server/web/fonts/JetBrainsMono-2.304.zip
Normal file
BIN
cmd/server/web/fonts/JetBrainsMono-2.304.zip
Normal file
Binary file not shown.
BIN
cmd/server/web/fonts/ShareTechMono-Regular.ttf
Normal file
BIN
cmd/server/web/fonts/ShareTechMono-Regular.ttf
Normal file
Binary file not shown.
BIN
cmd/server/web/fonts/master.zip
Normal file
BIN
cmd/server/web/fonts/master.zip
Normal file
Binary file not shown.
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user