Start Tailwind UI rebuild

2026-08-06 17:25:09 +02:00
parent 782541338c
commit 0058493a54
5 changed files with 121 additions and 45 deletions
@@ -10,12 +10,12 @@
  </head>
  <body>
    <main class="shell">
-      <section id="loginView" class="login">
-        <form id="loginForm" class="panel">
-          <h1>MaalFlows</h1>
-          <label>Uzivatel <input name="username" autocomplete="username" required></label>
-          <label>Heslo <input name="password" type="password" autocomplete="current-password" required></label>
-          <button type="submit">Prihlasit</button>
+      <section id="loginView" class="login mf-login-shell">
+        <form id="loginForm" class="panel mf-login-card">
+          <h1 class="mf-login-title">MaalFlows</h1>
+          <label class="mf-field">Uzivatel <input class="mf-input" name="username" autocomplete="username" required></label>
+          <label class="mf-field">Heslo <input class="mf-input" name="password" type="password" autocomplete="current-password" required></label>
+          <button class="mf-ui-button-primary" type="submit">Prihlasit</button>
          <p id="loginError" class="error"></p>
        </form>
      </section>
@@ -23,7 +23,7 @@
      <section id="appView" class="app hidden">
        <aside class="sidebar">
          <div class="brand">
-            <h1>MaalFlows</h1>
+            <h1 class="mf-toolbar-title">MaalFlows</h1>
            <div class="brand-actions">
              <label class="online-dot-toggle" title="Online stav chatu" aria-label="Online stav chatu">
              <input id="onlineToggle" type="checkbox">
@@ -6,44 +6,26 @@
    <title>MaalFlows Preview</title>
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
    <link rel="stylesheet" href="/tailwind.css">
-    <style>
-      body {
-        margin: 0;
-        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-        color: #17211d;
-        background: #f5f7f4;
-      }
-      main {
-        max-width: 980px;
-        margin: 0 auto;
-        padding: 56px 20px;
-        display: grid;
-        gap: 22px;
-      }
-      h1 { margin: 0; font-size: clamp(32px, 5vw, 56px); }
-      p { max-width: 680px; line-height: 1.6; color: #627067; }
-      .demo {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-        gap: 14px;
-      }
-      .demo div {
-        background: white;
-        border: 1px solid #dfe6e2;
-        border-radius: 8px;
-        padding: 18px;
-        min-height: 120px;
-      }
-    </style>
  </head>
-  <body>
-    <main>
-      <h1>9b-plus test stranka</h1>
-      <p>Tahle stranka simuluje eshop, kam se widget vlozi pres GTM. Otevri bublinu vpravo dole, posli zpravu a sleduj ji v administraci.</p>
-      <section class="demo">
-        <div><strong>Produkt</strong><p>Ukazkova stranka produktu pro sbirani current URL.</p></div>
-        <div><strong>Kosik</strong><p>Referrer, jazyk, timezone a device info se poslou do konverzace.</p></div>
-        <div><strong>Podpora</strong><p>Zakaznik muze napsat hned, kontaktni udaje jsou volitelne.</p></div>
+  <body class="mf-page-shell">
+    <main class="mf-page-main">
+      <header class="grid gap-4">
+        <h1 class="mf-page-title">9b-plus test stranka</h1>
+        <p class="mf-page-copy">Tahle stranka simuluje eshop, kam se widget vlozi pres GTM. Otevri bublinu vpravo dole, posli zpravu a sleduj ji v administraci.</p>
+      </header>
+      <section class="mf-card-grid">
+        <div class="mf-card">
+          <strong class="mf-card-title">Produkt</strong>
+          <p class="mf-card-copy">Ukazkova stranka produktu pro sbirani current URL.</p>
+        </div>
+        <div class="mf-card">
+          <strong class="mf-card-title">Kosik</strong>
+          <p class="mf-card-copy">Referrer, jazyk, timezone a device info se poslou do konverzace.</p>
+        </div>
+        <div class="mf-card">
+          <strong class="mf-card-title">Podpora</strong>
+          <p class="mf-card-copy">Zakaznik muze napsat hned, kontaktni udaje jsou volitelne.</p>
+        </div>
      </section>
    </main>
    <script>