From c3782d062a20cda29c4367e9ab671a2ed21251d6 Mon Sep 17 00:00:00 2001
From: stvncode <steven.travers20@gmail.com>
Date: Fri, 24 Oct 2025 14:16:27 +0200
Subject: [PATCH 1/2] Improvments

---
 src-11ty/_includes/base.html | 142 +------------------
 src-11ty/improv.njk          | 268 ++++++++++++++++++++++++++++++++++-
 src-11ty/index.njk           |  15 +-
 src/main-app.ts              |  19 ---
 src/pages/improv-details.ts  | 130 -----------------
 src/styles/main.css          | 129 +++++++++++++++++
 6 files changed, 411 insertions(+), 292 deletions(-)
 delete mode 100644 src/main-app.ts
 delete mode 100644 src/pages/improv-details.ts
 create mode 100644 src/styles/main.css

diff --git a/src-11ty/_includes/base.html b/src-11ty/_includes/base.html
index a9383df..97e103f 100644
--- a/src-11ty/_includes/base.html
+++ b/src-11ty/_includes/base.html
@@ -14,148 +14,12 @@
     />
     <script type="module" src="/src/utils/dark-mode.ts"></script>
 
-    <link rel="stylesheet" href="/src/styles/shoelace.css" />
-    <link rel="stylesheet" href="/src/styles/theme.css" />
-    <link rel="stylesheet" href="/src/styles/details-page.css" />
-    <link
-      rel="preload"
-      href="/open-home-foundation.svg"
-      as="image"
-      type="image/svg+xml"
-    />
-    <link rel="preload" href="/ohf_dark.svg" as="image" type="image/svg+xml" />
-    <style>
-      body {
-        margin: 0;
-      }
-
-      .app-header {
-        display: block;
-        background: var(--app-bg-header);
-        position: sticky;
-        top: 0;
-        z-index: 100;
-      }
-
-      .app-header header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 0 20px;
-        border-bottom: 1px solid var(--app-border);
-        height: 64px;
-        margin: 0 auto;
-      }
-
-      .app-header .logo-section {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        cursor: pointer;
-      }
-
-      .app-header .logo {
-        height: 32px;
-        width: auto;
-      }
-
-      .app-header .title {
-        font-size: 1.25rem;
-        font-weight: 500;
-        color: var(--app-text-primary);
-        margin: 0;
-      }
-
-      .app-header .nav-links {
-        display: flex;
-        gap: 20px;
-        align-items: center;
-      }
-
-      .app-header .nav-link {
-        color: var(--app-text-secondary);
-        border: 1px solid var(--app-border);
-        text-decoration: none;
-        padding: 8px 12px;
-        border-radius: 6px;
-        transition: all 0.2s ease;
-        font-weight: 400;
-      }
-
-      .app-header .nav-link:hover {
-        background: var(--app-bg-secondary);
-        color: var(--app-text-primary);
-        border-color: var(--app-border-hover);
-      }
-
-      .app-header .github-link {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        color: #666;
-        text-decoration: none;
-        padding: 8px 12px;
-        border-radius: 6px;
-        transition: all 0.2s ease;
-        border: 1px solid #e0e0e0;
-      }
-
-      .app-header .github-link:hover {
-        background: #f5f5f5;
-        color: #333;
-        border-color: #ccc;
-      }
-
-      .app-header .github-icon {
-        width: 16px;
-        height: 16px;
-        fill: currentColor;
-      }
-
-      @media (max-width: 768px) {
-        .app-header .nav-links {
-          gap: 12px;
-        }
-
-        .app-header .nav-link,
-        .app-header .github-link {
-          padding: 6px 8px;
-          font-size: 0.9rem;
-        }
-
-        .app-header .title {
-          font-size: 1.1rem;
-        }
-
-        .app-header .github-link .github-text {
-          display: none;
-        }
-      }
-
-      @media (max-width: 480px) {
-        .app-header header {
-          padding: 0 16px;
-        }
-
-        .app-header .logo {
-          height: 28px;
-        }
-      }
-
-      details-page:not(:defined) {
-        opacity: 0;
-      }
-
-      details-page {
-        opacity: 1;
-        transition: opacity 0.1s;
-      }
-    </style>
+    <link rel="stylesheet" href="/src/styles/main.css" />
   </head>
   <body class="wa-palette-shoelace wa-theme-shoelace">
     <div class="app-header">
       <header>
-        <div class="logo-section" onclick="window.location.href = '/'">
+        <a href="/" class="logo-section" aria-label="Device Toolbox Home">
           <picture>
             <source
               srcset="/ohf_dark.svg"
@@ -167,7 +31,7 @@
               class="logo"
             />
           </picture>
-        </div>
+        </a>
 
         <nav class="nav-links">
           <a
diff --git a/src-11ty/improv.njk b/src-11ty/improv.njk
index ba20ef0..fb0516c 100644
--- a/src-11ty/improv.njk
+++ b/src-11ty/improv.njk
@@ -5,6 +5,270 @@ description: Connect devices to Wi-Fi via Bluetooth from your browser
 permalink: /improv.html
 ---
 
-<script type="module" src="/src/pages/improv-details.ts"></script>
+<style>
+  .container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+    padding-top: 20px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    color: var(--app-text-primary);
+  }
 
-<improv-details></improv-details>
\ No newline at end of file
+  a {
+    color: var(--wa-color-brand-50);
+    text-decoration: none;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+
+  .back-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--wa-color-brand-50);
+    text-decoration: none;
+    padding: 8px 16px;
+    border-radius: 8px;
+    transition: all 0.2s ease;
+    margin-bottom: 20px;
+    background: var(--app-category-bg);
+  }
+
+  .back-button:hover {
+    background: var(--app-bg-secondary);
+  }
+
+  .back-button svg {
+    margin-top: 2px;
+    width: 14px;
+    height: 14px;
+  }
+
+  .layout {
+    display: grid;
+    grid-template-columns: 1.2fr 1fr;
+    gap: 24px;
+    align-items: stretch;
+    grid-auto-rows: 1fr;
+    margin-bottom: 30px;
+  }
+
+  .hero {
+    background: var(--app-bg-card);
+    border-radius: 16px;
+    padding: 0 32px;
+    box-shadow: 0 2px 8px var(--app-shadow);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .hero-title {
+    color: var(--app-text-primary);
+    margin-top: 32px;
+    font-size: 2.2rem;
+    font-weight: 600;
+  }
+
+  .subtitle {
+    color: var(--wa-color-brand-50);
+    font-size: 1.1rem;
+    font-weight: 500;
+    margin: 0 0 10px 0;
+  }
+
+  .description {
+    color: var(--app-text-secondary);
+    line-height: 1.6;
+    margin: 0;
+    font-size: 1.05rem;
+  }
+
+  .actions-list {
+    background: var(--app-bg-card);
+    border-radius: 16px;
+    padding: 8px;
+    box-shadow: 0 2px 8px var(--app-shadow);
+    height: 100%;
+    box-sizing: border-box;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+  }
+
+  improv-wifi-launch-button {
+    display: block;
+    width: 100%;
+  }
+
+  .improv-action {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    gap: 16px;
+    padding: 18px 16px;
+    cursor: pointer;
+    border-radius: 6px;
+  }
+
+  .improv-action:hover {
+    background: var(--app-bg-secondary);
+  }
+
+  .action-item {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    gap: 16px;
+    padding: 18px 16px;
+    cursor: pointer;
+    border-radius: 6px;
+  }
+
+  .action-item:hover {
+    background: var(--app-bg-secondary);
+  }
+
+  .action-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: var(--app-category-bg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .icon-mask {
+    width: 20px;
+    height: 20px;
+    background-color: var(--app-category-text);
+    -webkit-mask: var(--icon-url) no-repeat center / contain;
+    mask: var(--icon-url) no-repeat center / contain;
+  }
+
+  .action-content {
+    min-width: 0;
+  }
+
+  .action-content h3 {
+    margin: 0 0 6px 0;
+    color: var(--app-text-primary);
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  .action-content p {
+    margin: 0;
+    color: var(--app-text-secondary);
+    font-size: 0.95rem;
+    line-height: 1.45;
+  }
+
+  .action-trailing img {
+    width: 20px;
+    height: 20px;
+  }
+
+  .action-trailing svg {
+    width: 16px;
+    height: 16px;
+    fill: var(--app-text-muted);
+  }
+
+  .chevron-icon {
+    color: var(--app-text-primary);
+    width: 20px !important;
+    height: 20px !important;
+  }
+
+  @media (max-width: 768px) {
+    .container {
+      padding: 20px 0 0 0;
+    }
+
+    .layout {
+      grid-template-columns: 1fr;
+      grid-auto-rows: auto;
+      gap: 10px;
+    }
+
+    .hero {
+      padding: 16px 20px;
+      height: auto;
+      display: block;
+    }
+
+    .hero-title {
+      font-size: 1.8rem;
+      margin-top: 0;
+    }
+
+    .actions-list {
+      height: auto;
+      margin-top: 16px;
+      display: block;
+    }
+  }
+</style>
+
+<script type="module">
+  import 'improv-wifi-sdk';
+</script>
+
+<div class="container">
+  <a href="/" class="back-button">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
+    </svg>
+    Back to Home
+  </a>
+
+  <div class="layout">
+    <div class="hero">
+      <div class="hero-title">Improv Wi‑Fi</div>
+      <p class="subtitle">Provision Wi‑Fi for devices without a custom app</p>
+      <p class="description">
+        Use the open Improv protocol to provision Wi‑Fi via BLE or Serial from
+        your browser. Great for makers and product developers.
+      </p>
+    </div>
+
+    <div class="actions-list">
+      <improv-wifi-launch-button>
+        <div class="improv-action" slot="activate">
+          <div class="action-icon">
+            <div class="icon-mask" style="--icon-url: url(/svgs/wifi.svg)"></div>
+          </div>
+          <div class="action-content">
+            <h3>Connect device to Wi‑Fi</h3>
+            <p>
+              Provision your device over Bluetooth Low Energy using Improv.
+            </p>
+          </div>
+          <div class="action-trailing">
+            <img src="/svgs/chevron-right.svg" alt="" />
+          </div>
+        </div>
+      </improv-wifi-launch-button>
+
+      <div class="action-item" onclick="window.open('https://www.improv-wifi.com/', '_blank', 'noopener,noreferrer')">
+        <div class="action-icon">
+          <div class="icon-mask" style="--icon-url: url(/svgs/doc.svg)"></div>
+        </div>
+        <div class="action-content">
+          <h3>Documentation</h3>
+          <p>Learn about the Improv protocol and supported transports</p>
+        </div>
+        <div class="action-trailing">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+            <path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0-201.4 201.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3 448 192c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 96C35.8 96 0 131.8 0 176L0 432c0 44.2 35.8 80 80 80l256 0c44.2 0 80-35.8 80-80l0-80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 80c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l80 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 96z" />
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src-11ty/index.njk b/src-11ty/index.njk
index dde831d..dc90606 100644
--- a/src-11ty/index.njk
+++ b/src-11ty/index.njk
@@ -5,6 +5,17 @@ description: Flash firmware, configure devices, and manage your smart home hardw
 permalink: /index.html
 ---
 
-<main-app></main-app>
+<style>
+  .container {
+    display: block;
+    min-height: 100vh;
+    background: var(--app-bg-primary);
+    color: var(--app-text-primary);
+  }
+</style>
 
-<script type="module" src="/src/main-app.ts"></script>
+<div class="container">
+  <home-page></home-page>
+</div>
+
+<script type="module" src="/src/pages/home-page.ts"></script>
diff --git a/src/main-app.ts b/src/main-app.ts
deleted file mode 100644
index 6ab948b..0000000
--- a/src/main-app.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { LitElement, css, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
-
-import './pages/home-page.js';
-@customElement('main-app')
-export class MainApp extends LitElement {
-  static styles = css`
-    :host {
-      display: block;
-      min-height: 100vh;
-      background: var(--app-bg-primary);
-      color: var(--app-text-primary);
-    }
-  `;
-
-  render() {
-    return html` <home-page></home-page> `;
-  }
-}
diff --git a/src/pages/improv-details.ts b/src/pages/improv-details.ts
deleted file mode 100644
index 941b7d2..0000000
--- a/src/pages/improv-details.ts
+++ /dev/null
@@ -1,130 +0,0 @@
-import 'improv-wifi-sdk';
-import { LitElement, css, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import '../components/action-item.js';
-import '../components/details.js';
-
-@customElement('improv-details')
-export class ImprovDetails extends LitElement {
-  static styles = css`
-    :host {
-      display: block;
-    }
-
-    p[slot='subtitle'] {
-      color: var(--wa-color-brand-50);
-      font-size: 1.1rem;
-      font-weight: 500;
-      margin: 0 0 10px 0;
-    }
-
-    p[slot='description'] {
-      color: var(--app-text-secondary);
-      line-height: 1.6;
-      margin: 0;
-      font-size: 1.05rem;
-    }
-
-    improv-wifi-launch-button {
-      display: block;
-      width: 100%;
-    }
-
-    .improv-action {
-      display: grid;
-      grid-template-columns: auto 1fr auto;
-      align-items: center;
-      gap: 16px;
-      padding: 18px 16px;
-      cursor: pointer;
-      border-radius: 6px;
-    }
-
-    .improv-action:hover {
-      background: var(--app-bg-secondary);
-    }
-
-    .action-icon {
-      width: 40px;
-      height: 40px;
-      border-radius: 50%;
-      background: var(--app-category-bg);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .icon-mask {
-      width: 20px;
-      height: 20px;
-      background-color: var(--app-category-text);
-      -webkit-mask: var(--icon-url) no-repeat center / contain;
-      mask: var(--icon-url) no-repeat center / contain;
-    }
-
-    .action-content h3 {
-      margin: 0 0 6px 0;
-      color: var(--app-text-primary);
-      font-size: 1rem;
-      font-weight: 600;
-    }
-
-    .action-content p {
-      margin: 0;
-      color: var(--app-text-secondary);
-      font-size: 0.95rem;
-      line-height: 1.45;
-    }
-
-    .action-trailing img {
-      width: 20px;
-      height: 20px;
-    }
-  `;
-
-  render() {
-    return html`
-      <details-page>
-        <span slot="title">Improv Wi‑Fi</span>
-        <p slot="subtitle">Provision Wi‑Fi for devices without a custom app</p>
-        <p slot="description">
-          Use the open Improv protocol to provision Wi‑Fi via BLE or Serial from
-          your browser. Great for makers and product developers.
-        </p>
-
-        <div slot="actions">
-          <improv-wifi-launch-button>
-            <div class="improv-action" slot="activate">
-              <div class="action-icon">
-                <div
-                  class="icon-mask"
-                  style="--icon-url: url(/svgs/wifi.svg)"
-                ></div>
-              </div>
-              <div class="action-content">
-                <h3>Connect device to Wi‑Fi</h3>
-                <p>
-                  Provision your device over Bluetooth Low Energy using Improv.
-                </p>
-              </div>
-              <div class="action-trailing">
-                <img src="/svgs/chevron-right.svg" alt="" />
-              </div>
-            </div>
-          </improv-wifi-launch-button>
-
-          <action-item href="https://www.improv-wifi.com/" icon="/svgs/doc.svg">
-            <h3>Documentation</h3>
-            <p>Learn about the Improv protocol and supported transports</p>
-          </action-item>
-        </div>
-      </details-page>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'improv-details': ImprovDetails;
-  }
-}
diff --git a/src/styles/main.css b/src/styles/main.css
new file mode 100644
index 0000000..f34a096
--- /dev/null
+++ b/src/styles/main.css
@@ -0,0 +1,129 @@
+@import url('shoelace.css');
+@import url('theme.css');
+@import url('details-page.css');
+
+body {
+  margin: 0;
+}
+
+.app-header {
+  display: block;
+  background: var(--app-bg-header);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.app-header header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  border-bottom: 1px solid var(--app-border);
+  height: 64px;
+  margin: 0 auto;
+}
+
+.app-header .logo-section {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  cursor: pointer;
+}
+
+.app-header .logo {
+  height: 32px;
+  width: auto;
+}
+
+.app-header .title {
+  font-size: 1.25rem;
+  font-weight: 500;
+  color: var(--app-text-primary);
+  margin: 0;
+}
+
+.app-header .nav-links {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+}
+
+.app-header .nav-link {
+  color: var(--app-text-secondary);
+  border: 1px solid var(--app-border);
+  text-decoration: none;
+  padding: 8px 12px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  font-weight: 400;
+}
+
+.app-header .nav-link:hover {
+  background: var(--app-bg-secondary);
+  color: var(--app-text-primary);
+  border-color: var(--app-border-hover);
+}
+
+.app-header .github-link {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: #666;
+  text-decoration: none;
+  padding: 8px 12px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  border: 1px solid #e0e0e0;
+}
+
+.app-header .github-link:hover {
+  background: #f5f5f5;
+  color: #333;
+  border-color: #ccc;
+}
+
+.app-header .github-icon {
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+}
+
+@media (max-width: 768px) {
+  .app-header .nav-links {
+    gap: 12px;
+  }
+
+  .app-header .nav-link,
+  .app-header .github-link {
+    padding: 6px 8px;
+    font-size: 0.9rem;
+  }
+
+  .app-header .title {
+    font-size: 1.1rem;
+  }
+
+  .app-header .github-link .github-text {
+    display: none;
+  }
+}
+
+@media (max-width: 480px) {
+  .app-header header {
+    padding: 0 16px;
+  }
+
+  .app-header .logo {
+    height: 28px;
+  }
+}
+
+details-page:not(:defined) {
+  opacity: 0;
+}
+
+details-page {
+  opacity: 1;
+  transition: opacity 0.1s;
+}

From 802ff25ade8e6c7a7b79695bfdcd5dc9bef7411f Mon Sep 17 00:00:00 2001
From: stvncode <steven.travers20@gmail.com>
Date: Fri, 24 Oct 2025 14:19:10 +0200
Subject: [PATCH 2/2] Remove unwanted warning css for poe

---
 src/pages/zwa2-install-poe.ts | 31 -------------------------------
 1 file changed, 31 deletions(-)

diff --git a/src/pages/zwa2-install-poe.ts b/src/pages/zwa2-install-poe.ts
index c66caf3..136ce25 100644
--- a/src/pages/zwa2-install-poe.ts
+++ b/src/pages/zwa2-install-poe.ts
@@ -37,37 +37,6 @@ export class Zwa2InstallPoEPage extends LitElement {
       line-height: 1.6;
     }
 
-    .warning-box {
-      background: var(--wa-color-warning-fill-quiet);
-      border: 1px solid var(--wa-color-warning-border-normal);
-      border-radius: 8px;
-      padding: 24px;
-      display: flex;
-      gap: 16px;
-      align-items: flex-start;
-      margin: 20px 0;
-    }
-
-    .warning-icon {
-      flex-shrink: 0;
-      width: 24px;
-      height: 24px;
-      color: var(--wa-color-warning-50);
-      margin-top: 3px;
-    }
-
-    .warning-content h3 {
-      margin: 0 0 8px 0;
-      font-size: 1.1rem;
-      font-weight: 600;
-      color: var(--wa-color-warning-on-normal);
-    }
-
-    .warning-content p {
-      margin: 0;
-      color: var(--wa-color-warning-on-quiet);
-      line-height: 1.5;
-    }
     .install-note {
       font-style: italic;
     }