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

1 week ago · 9fb6a22c84
parent d8049e89c3
commit 9fb6a22c84
7 changed files with 311 additions and 70 deletions
--- a/src/colors.css
+++ b/src/colors.css
@ -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;
-}
--- a/src/fonts/InterVariable.woff2
+++ b/src/fonts/InterVariable.woff2
--- a/src/index.html
+++ b/src/index.html
@ -1,20 +1,38 @@
 <!doctype html>
-<html lang="en">
+<html lang="ru">
  <head>
    <meta charset="UTF-8" />
-    <link rel="stylesheet" href="styles.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Tauri App</title>
-    <script type="module" src="/main.js" defer></script>
+    <link rel="stylesheet" href="styles.css" />
+    <title>ridein</title>
+    <script type="module" src="main.js" defer></script>
  </head>

  <body>
-    <div class="screen" id="connect">
-      <h1>подключение датчиков</h1>
-      <div class="device-selection" id="hr-monitor-selection"><h2>чсс</h2></div>
-      <div class="device-selection" id="cadence-sensor-selection"><h2>каденс</h2></div>
-      <div class="device-selection" id="trainer-selection"><h2>станок</h2></div>
-      <button>начать</button>
-    </div>
+    <main class="screen" id="connect">
+      <header class="screen-header">
+        <h1 class="title">ridein</h1>
+        <p class="subtitle">датчики</p>
+      </header>
+
+      <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>
 </html>
--- a/src/main.js
+++ b/src/main.js
@ -1,7 +1,50 @@
 const { once } = window.__TAURI__.event;

-once("devices-loaded", (devices) => {
-  console.log("Devices are loaded", devices);
-});
+const groups = {
+  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 ?? []);
+});
--- a/src/splashscreen.html
+++ b/src/splashscreen.html
@ -1,14 +1,14 @@
 <!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <link rel="stylesheet" href="styles.css" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Tauri App</title>
-        <script type="module" src="/init.js" defer></script>
-    </head>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="styles.css" />
+    <title>ridein</title>
+    <script type="module" src="init.js" defer></script>
+  </head>

-    <body class="screen splashscreen">
-      <h1>поиск перефирии</h1>
-    </body>
+  <body class="screen splashscreen">
+    <p class="splash-label">поиск датчиков</p>
+  </body>
 </html>
--- a/src/styles.css
+++ b/src/styles.css
@ -1,58 +1,173 @@
@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);
-  background-color: var(--jet);
+html,
+body {
+  height: 100%;
+}

-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
+body {
+  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;
  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
+  text-rendering: optimizeLegibility;
 }

-body,
-screen {
-  overflow: hidden;  
-}
+/* ============================================================
+   Экраны
+   ============================================================ */

 .screen {
-  align-content: center;
+  min-height: 100vh;
  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 {
-  gap: 2em;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(3, 1fr);
-  padding: 2em;
+  grid-template-rows: auto 1fr auto;
+  gap: var(--space-6);
+  padding: var(--space-6);
+  width: 100%;
+  max-width: var(--container-max);
+  margin-inline: auto;
 }

-#connect h1 {
-  grid-column: 1/-1;
-  justify-self: center;
-  align-self: end;
+.screen-header {
+  display: grid;
+  gap: var(--space-1);
 }

-#connect button {
-  grid-column: 1/-1;
-  justify-self: center;
-  align-self: start;
+.title {
+  font-size: var(--text-2xl);
+  font-weight: var(--fw-semibold);
+  line-height: var(--leading-tight);
+  letter-spacing: var(--tracking-tight);
+}
+
+.subtitle {
+  color: var(--c-text-muted);
+  font-size: var(--text-sm);
+}
+
+/* --- Сетка групп датчиков --- */
+
+.devices {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+  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-selection {
-  border: 1px solid var(--basewhite);
-  border-radius: 2%;
+/* --- Карточка датчика --- */
+
+.device {
  display: grid;
-  justify-content: center;
-  padding: 0.5em;
+  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;
 }
--- a/src/tokens.css
+++ b/src/tokens.css
@ -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;
+}