lambda
/
ridein
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects 1 Releases Wiki Activity

Рефакторинг splashscreen

Browse Source
pull/3/head
lambda 1 week ago
parent d8049e89c3
commit 9fb6a22c84
No known key found for this signature in database
GPG Key ID: CF45A8EE158BBCB6
7 changed files with 311 additions and 70 deletions
Show Stats Download Patch File Download Diff File

8
src/colors.css
Unescape View File

@ -1,8 +0,0 @@
:root {
--jet: hsla(0, 0%, 21%, 1);
--gunmetal: hsla(216, 28%, 20%, 1);
--cadet-gray: hsla(212, 8%, 58%, 1);
--nyanza: hsla(114, 100%, 93%, 1);
--rojo: hsla(357, 73%, 50%, 1);
--basewhite: #f6f6f6;
}

BIN
src/fonts/InterVariable.woff2
View File

Binary file not shown.

40
src/index.html
Unescape View File

@ -1,20 +1,38 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="ru">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="stylesheet" href="styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tauri App</title> <link rel="stylesheet" href="styles.css" />
<script type="module" src="/main.js" defer></script> <title>ridein</title>
<script type="module" src="main.js" defer></script>
</head> </head>
<body> <body>
<div class="screen" id="connect"> <main class="screen" id="connect">
<h1>подключение датчиков</h1> <header class="screen-header">
<div class="device-selection" id="hr-monitor-selection"><h2>чсс</h2></div> <h1 class="title">ridein</h1>
<div class="device-selection" id="cadence-sensor-selection"><h2>каденс</h2></div> <p class="subtitle">датчики</p>
<div class="device-selection" id="trainer-selection"><h2>станок</h2></div> </header>
<button>начать</button>
</div> <section class="devices">
<section class="device-group">
<h2 class="device-group__title">чсс</h2>
<ul class="device-list" id="hr-list"></ul>
</section>
<section class="device-group">
<h2 class="device-group__title">каденс</h2>
<ul class="device-list" id="cadence-list"></ul>
</section>
<section class="device-group">
<h2 class="device-group__title">станок</h2>
<ul class="device-list" id="trainer-list"></ul>
</section>
</section>
<button class="btn btn--primary" id="start-btn">начать</button>
</main>
</body> </body>
</html> </html>

51
src/main.js
Unescape View File

@ -1,7 +1,50 @@
const { once } = window.__TAURI__.event; const { once } = window.__TAURI__.event;
once("devices-loaded", (devices) => { const groups = {
console.log("Devices are loaded", devices); hr_sensors: document.querySelector("#hr-list"),
}); cad_sensors: document.querySelector("#cadence-list"),
trainers: document.querySelector("#trainer-list"),
};
function renderDevice(device) {
const li = document.createElement("li");
li.className = "device";
const name = document.createElement("span");
name.className = "device__name";
name.textContent = device.display_name || "без имени";
const rssi = document.createElement("span");
rssi.className = "device__rssi";
rssi.textContent = device.rssi != null ? `${device.rssi} dBm` : "";
const address = document.createElement("span");
address.className = "device__meta";
address.textContent = device.address;
console.log("hello from main.js"); li.append(name, rssi, address);
return li;
}
function renderGroup(list, devices) {
list.replaceChildren();
if (!devices.length) {
const empty = document.createElement("li");
empty.className = "device device--empty";
empty.textContent = "нет";
list.appendChild(empty);
return;
}
for (const device of devices) {
list.appendChild(renderDevice(device));
}
}
once("devices-loaded", (event) => {
const repo = event.payload;
renderGroup(groups.hr_sensors, repo.hr_sensors ?? []);
renderGroup(groups.cad_sensors, repo.cad_sensors ?? []);
renderGroup(groups.trainers, repo.trainers ?? []);
});

10
src/splashscreen.html
Unescape View File

@ -1,14 +1,14 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="ru">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="stylesheet" href="styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tauri App</title> <link rel="stylesheet" href="styles.css" />
<script type="module" src="/init.js" defer></script> <title>ridein</title>
<script type="module" src="init.js" defer></script>
</head> </head>
<body class="screen splashscreen"> <body class="screen splashscreen">
<h1>поиск перефирии</h1> <p class="splash-label">поиск датчиков</p>
</body> </body>
</html> </html>

187
src/styles.css
Unescape View File

@ -1,58 +1,173 @@
@import "./reset.css"; @import "./reset.css";
@import "./colors.css"; @import "./tokens.css";
:root { /* ============================================================
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; База
font-size: 16px; ============================================================ */
line-height: 24px;
font-weight: 400;
color: var(--basewhite); html,
background-color: var(--jet); body {
height: 100%;
}
font-synthesis: none; body {
text-rendering: optimizeLegibility; font-family: var(--font-sans);
font-size: var(--text-base);
line-height: var(--leading-normal);
font-weight: var(--fw-regular);
color: var(--c-text);
background-color: var(--c-bg);
overflow: hidden;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility;
} }
body, /* ============================================================
screen { Экраны
overflow: hidden; ============================================================ */
}
.screen { .screen {
align-content: center; min-height: 100vh;
display: grid; display: grid;
height: 100vh;
justify-content: center;
width: 100vw;
} }
/* --- Сплэш --- */
.splashscreen {
place-items: center;
}
.splash-label {
color: var(--c-text-muted);
font-size: var(--text-sm);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
/* --- Подключение датчиков --- */
#connect { #connect {
gap: 2em; grid-template-rows: auto 1fr auto;
grid-template-columns: repeat(3, 1fr); gap: var(--space-6);
grid-template-rows: repeat(3, 1fr); padding: var(--space-6);
padding: 2em; width: 100%;
max-width: var(--container-max);
margin-inline: auto;
} }
#connect h1 { .screen-header {
grid-column: 1/-1; display: grid;
justify-self: center; gap: var(--space-1);
align-self: end;
} }
#connect button { .title {
grid-column: 1/-1; font-size: var(--text-2xl);
justify-self: center; font-weight: var(--fw-semibold);
align-self: start; line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
} }
.device-selection { .subtitle {
border: 1px solid var(--basewhite); color: var(--c-text-muted);
border-radius: 2%; font-size: var(--text-sm);
}
/* --- Сетка групп датчиков --- */
.devices {
display: grid; display: grid;
justify-content: center; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
padding: 0.5em; gap: var(--space-4);
align-content: start;
}
.device-group {
display: grid;
gap: var(--space-3);
align-content: start;
padding: var(--space-4);
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--radius-md);
}
.device-group__title {
font-size: var(--text-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--c-text-muted);
}
.device-list {
display: grid;
gap: var(--space-2);
}
/* --- Карточка датчика --- */
.device {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-1) var(--space-3);
padding: var(--space-2) var(--space-3);
background: var(--c-surface-2);
border-radius: var(--radius-sm);
}
.device__name {
font-size: var(--text-sm);
font-weight: var(--fw-medium);
}
.device__rssi {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--c-text-muted);
justify-self: end;
}
.device__meta {
grid-column: 1 / -1;
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--c-text-faint);
}
.device--empty {
justify-items: center;
padding: var(--space-3);
color: var(--c-text-faint);
font-size: var(--text-sm);
background: transparent;
border: 1px dashed var(--c-border);
}
/* --- Кнопка --- */
.btn {
font-family: var(--font-sans);
font-size: var(--text-base);
font-weight: var(--fw-medium);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
padding: var(--space-3) var(--space-6);
border-radius: var(--radius-full);
cursor: pointer;
transition: opacity var(--duration-fast) var(--ease);
}
.btn--primary {
color: var(--c-accent-contrast);
background: var(--c-accent);
}
.btn--primary:hover {
opacity: 0.85;
}
#connect .btn {
justify-self: center;
align-self: end;
} }

73
src/tokens.css
Unescape View File

@ -0,0 +1,73 @@
/* ============================================================
ridein — дизайн-токены (монохромная система)
Только функции, поддерживаемые WebKitGTK (webview Tauri):
HSL-цвета, CSS-переменные, grid/flex, clamp/rem. Без oklch,
color-mix(), :has() и прочего слишком свежего.
============================================================ */
@font-face {
font-family: "Inter";
src: url("./fonts/InterVariable.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
:root {
/* --- Цвет: монохромная шкала (нулевая насыщенность) --- */
--c-bg: hsl(0 0% 4%); /* фон страницы */
--c-surface: hsl(0 0% 8%); /* карточка/панель */
--c-surface-2: hsl(0 0% 12%); /* приподнятый элемент */
--c-border: hsl(0 0% 18%); /* тонкая линия */
--c-border-strong: hsl(0 0% 30%);
--c-text: hsl(0 0% 93%); /* основной текст */
--c-text-muted: hsl(0 0% 58%); /* вторичный */
--c-text-faint: hsl(0 0% 40%); /* едва заметный */
--c-accent: hsl(0 0% 93%); /* акцент (инверсия) */
--c-accent-contrast: hsl(0 0% 4%);
/* --- Отступы (база 4px) --- */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.5rem; /* 24px */
--space-6: 2rem; /* 32px */
--space-8: 3rem; /* 48px */
--space-10: 4rem; /* 64px */
/* --- Типографика --- */
--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", monospace;
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.5rem; /* 24px */
--text-2xl: 2rem; /* 32px */
--text-3xl: 2.5rem; /* 40px */
--leading-tight: 1.1;
--leading-normal: 1.5;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--tracking-tight: -0.02em;
--tracking-wide: 0.08em;
/* --- Радиусы --- */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-full: 9999px;
/* --- Разное --- */
--container-max: 72rem;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--duration-fast: 120ms;
--duration-base: 200ms;
}
Write Preview
Loading…
Cancel
Save