Шрифты

This commit is contained in:
Maxim
2026-06-18 11:27:03 +03:00
parent fd627257f5
commit e92c7d8f09
14 changed files with 262 additions and 56 deletions

View File

@@ -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 {

View File

@@ -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);
}

View File

@@ -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);
}
}

View File

@@ -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;
}

View File

@@ -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 {

View 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;
}

View File

@@ -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 {

View File

@@ -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;
}
}

View File

@@ -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>

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@@ -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">