From 5d24a770a423dba31c1942485890f7cfc856a50f Mon Sep 17 00:00:00 2001
From: Max Gramser <maxgramser@gmail.com>
Date: Mon, 14 Sep 2026 12:24:06 +0200
Subject: [PATCH] Drop the how-to cards and two long hints from the editor page

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 screen_manager/app/static/index.html | 32 ----------------------------
 screen_manager/app/static/style.css  | 28 ------------------------
 2 files changed, 60 deletions(-)

diff --git a/screen_manager/app/static/index.html b/screen_manager/app/static/index.html
index f77b161..c66c118 100644
--- a/screen_manager/app/static/index.html
+++ b/screen_manager/app/static/index.html
@@ -45,37 +45,11 @@
         </div>
         <span id="connection" role="status" class="badge">Verbinden…</span>
       </div>
-      <ol class="howto" aria-label="Zo werkt het">
-        <li>
-          <b>1 · Installeren</b><span
-            >Sluit het scherm via USB aan op de Home Assistant-machine en kies
-            <b>Nieuw scherm</b>: naam, wifi en klaar. Eén keer via USB, daarna
-            gaat alles draadloos.</span
-          >
-        </li>
-        <li>
-          <b>2 · Tegels kiezen</b><span
-            >Sleep entiteiten uit de lijst rechts in de schermmockup, of tik
-            op +. Klik op een tegel voor weergave, breedte, bediening en kleur.</span
-          >
-        </li>
-        <li>
-          <b>3 · Opslaan</b><span
-            >Met <b>Opslaan & naar scherm</b> staat het direct op je scherm.
-            Nieuwe schermfuncties komen met <b>Bijwerken</b> draadloos op je
-            scherm.</span
-          >
-        </li>
-      </ol>
       <div class="workspace">
         <aside>
           <h2>Mijn schermen</h2>
           <div id="screens"></div>
           <div id="pending"></div>
-          <p class="hint">
-            Nieuw scherm gekoppeld in Home Assistant? Het verschijnt hier
-            automatisch binnen 30 seconden.
-          </p>
           <button class="quiet" id="refresh">↻ Vernieuwen</button>
           <div class="updates" id="updates" hidden>
             <h2>Firmware-updates</h2>
@@ -128,12 +102,6 @@
                 <h3>Je tegels</h3>
                 <span id="count">0 / 10</span>
               </div>
-              <p class="hint">
-                Klik op een tegel voor naam, weergave, breedte, directe
-                bediening en kleur; het kruisje verwijdert. Sleep om te ordenen of sleep entiteiten uit
-                de lijst hierheen. Zes vakjes per pagina; een dubbelbrede tegel
-                telt voor twee en begint altijd links.
-              </p>
               <div id="layout-preview" aria-label="Schermindeling"></div>
               <p id="no-tiles" class="hint">
                 Voeg je eerste lamp, scène of apparaat toe via de kiezer.
diff --git a/screen_manager/app/static/style.css b/screen_manager/app/static/style.css
index 35e4be0..30f727b 100644
--- a/screen_manager/app/static/style.css
+++ b/screen_manager/app/static/style.css
@@ -315,29 +315,6 @@ aside h2 {
   color: var(--muted);
   font-size: 11px;
 }
-.howto {
-  list-style: none;
-  padding: 0;
-  margin: 0 0 26px;
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 12px;
-}
-.howto li {
-  background: white;
-  border: 1px solid var(--line);
-  border-radius: 14px;
-  padding: 12px 14px;
-  font-size: 12px;
-  color: var(--muted);
-  line-height: 1.45;
-}
-.howto li > b {
-  display: block;
-  color: var(--ink);
-  font-size: 13px;
-  margin-bottom: 4px;
-}
 .preview-tile,
 .result {
   touch-action: pan-y;
@@ -663,11 +640,6 @@ dialog label {
     margin-bottom: 10px;
   }
 }
-@media (max-width: 1000px) {
-  .howto {
-    grid-template-columns: 1fr;
-  }
-}
 @media (max-width: 620px) {
   main {
     padding: 25px 16px;