v0.5.13: стенды в sticky-header — чипсы вместо карточек

site/config/loader.py

@@ -80,7 +80,7 @@ SERVICES = _DF["SERVICES"]
 OPS_INDEX = _DF["OPS_INDEX"]
 
 DELAY = float(os.getenv("MOCK_OP_DELAY", "0.1"))
-VERSION = "0.5.12"
+VERSION = "0.5.13"
 
 
 def get_services(stand_id):

site/static/style.css

@@ -74,6 +74,48 @@ body {
     color: var(--brand-gray);
 }
 
+/* ── Header stands chips ── */
+.header-stands {
+    display: flex;
+    gap: 8px;
+    margin-top: 8px;
+}
+
+.stand-chip {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 14px;
+    border: 2px solid var(--border);
+    border-radius: 100px;
+    text-decoration: none;
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text-muted);
+    transition: all 0.15s;
+}
+
+.stand-chip:hover {
+    border-color: var(--brand-primary);
+    color: var(--brand-primary);
+}
+
+.stand-chip .stand-name {
+    text-transform: uppercase;
+    font-size: 12px;
+}
+
+.stand-chip .stand-count {
+    font-size: 11px;
+    opacity: 0.7;
+}
+
+.stand-active {
+    border-color: var(--brand-primary);
+    background: #eff6ff;
+    color: var(--brand-primary);
+}
+
 /* ── Layout ── */
 main {
     max-width: 960px;

site/templates/index.html

@@ -26,28 +26,19 @@
         <span class="sep">·</span>
         <span>Задержка: <strong>{{ delay }}s</strong></span>
     </div>
-</header>
+    {% if stands_list|length > 1 %}
-
+    <div class="header-stands">
-<main>
-
-<!-- ── Стенды ── -->
-{% if stands_list|length > 1 %}
-<section class="card card-stands">
-    <div class="card-header">
-        <h2>🖥 Стенды</h2>
-        <span class="muted">Вы находитесь на стенде <strong>{{ current_stand }}</strong></span>
-    </div>
-    <div class="card-body stands-grid">
         {% for s in stands_list %}
-        <a href="/{{ s.id }}/" class="stand-card {% if s.id == current_stand %}stand-active{% endif %}">
+        <a href="/{{ s.id }}/" class="stand-chip {% if s.id == current_stand %}stand-active{% endif %}">
             <span class="stand-name">{{ s.id }}</span>
-            <span class="stand-count">{{ s.count }} сервисов</span>
+            <span class="stand-count">{{ s.count }}</span>
-            <span class="stand-arrow">→</span>
         </a>
         {% endfor %}
     </div>
-</section>
+    {% endif %}
-{% endif %}
+</header>
+
+<main>
 
 <!-- ── Что такое Polygon ── -->
 <section class="card">