Images + details + logo + wording updates

stvncode · stvncode · commit 835d7d04d7ed · 2025-09-30T15:25:54.000+02:00
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
+    <link rel="icon" type="image/svg+xml" href="/open-home-foundation.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Device Toolbox</title>
     <!-- ESP Web Tools -->
diff --git a/public/images/bluetooth-proxy.png b/public/images/bluetooth-proxy.png
diff --git a/public/images/empty-esphome.png b/public/images/empty-esphome.png
diff --git a/public/images/media-player.png b/public/images/media-player.png
diff --git a/public/logo.svg b/public/logo.svg
diff --git a/public/svgs/ble.svg b/public/svgs/ble.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE --><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 8l10 8l-5 4V4l5 4l-10 8"/></svg>
diff --git a/public/svgs/code.svg b/public/svgs/code.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE --><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m8 9l3 3l-3 3m5 0h3"/><path d="M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></g></svg>
diff --git a/public/svgs/doc.svg b/public/svgs/doc.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE --><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M5 12V5a2 2 0 0 1 2-2h7l5 5v4M5 15v6h1a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2zm15 1.5a1.5 1.5 0 0 0-3 0v3a1.5 1.5 0 0 0 3 0M12.5 15a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-3 0v-3a1.5 1.5 0 0 1 1.5-1.5"/></g></svg>
diff --git a/public/svgs/github.svg b/public/svgs/github.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE --><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19c-4.3 1.4-4.3-2.5-6-3m12 5v-3.5c0-1 .1-1.4-.5-2c2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2a4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12.3 12.3 0 0 0-6.2 0C6.5 2.8 5.4 3.1 5.4 3.1a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6c-.6.6-.6 1.2-.5 2V21"/></svg>
diff --git a/public/svgs/install.svg b/public/svgs/install.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE --><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 18a3.5 3.5 0 0 0 0-7h-1A5 4.5 0 0 0 7 9a4.6 4.4 0 0 0-2.1 8.4M12 13v9m-3-3l3 3l3-3"/></svg>
diff --git a/public/svgs/product.svg b/public/svgs/product.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE --><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm3 1h.01M9 8h.01"/></svg>
diff --git a/public/svgs/raspberry.svg b/public/svgs/raspberry.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 128 128"><!-- Icon from Devicon Plain by konpa - https://github.com/devicons/devicon/blob/master/LICENSE --><path fill="currentColor" d="M40.663.001c-.657.02-1.363.26-2.165.884c-1.967-.748-3.871-1.008-5.576.513c-2.633-.337-3.49.359-4.138 1.169c-.577-.012-4.324-.587-6.043 1.939c-4.317-.504-5.683 2.503-4.137 5.305c-.881 1.345-1.795 2.672.267 5.235c-.73 1.429-.277 2.976 1.442 4.852c-.454 2.006.438 3.423 2.037 4.527c-.3 2.746 2.556 4.343 3.408 4.911c.328 1.6 1.013 3.111 4.276 3.945c.537 2.387 2.498 2.799 4.396 3.299c-6.275 3.594-11.658 8.32-11.62 19.92l-.92 1.614c-7.195 4.31-13.67 18.162-3.547 29.422c.662 3.525 1.771 6.056 2.759 8.858c1.477 11.291 11.115 16.577 13.656 17.203c3.727 2.795 7.695 5.445 13.064 7.303c5.06 5.142 10.544 7.102 16.057 7.1h.242c5.514.003 10.997-1.958 16.057-7.1c5.37-1.857 9.337-4.508 13.062-7.303c2.542-.626 12.182-5.91 13.659-17.203c.987-2.801 2.097-5.333 2.758-8.858c10.123-11.26 3.648-25.113-3.548-29.424l-.92-1.615c.037-11.598-5.343-16.325-11.619-19.92c1.899-.5 3.858-.91 4.396-3.296c3.262-.835 3.946-2.345 4.274-3.945c.854-.57 3.708-2.167 3.409-4.915c1.599-1.102 2.491-2.519 2.038-4.525c1.718-1.875 2.17-3.425 1.44-4.852c2.064-2.562 1.148-3.89.268-5.235c1.545-2.802.181-5.807-4.138-5.303c-1.718-2.525-5.464-1.952-6.043-1.941c-.648-.81-1.505-1.504-4.137-1.167c-1.704-1.52-3.61-1.26-5.577-.513c-2.334-1.815-3.881-.362-5.646.188c-2.827-.91-3.474.338-4.862.846c-3.083-.642-4.02.753-5.498 2.229l-1.718-.032c-4.65 2.699-6.962 8.193-7.78 11.019c-.82-2.827-3.124-8.321-7.773-11.02l-1.719.033c-1.48-1.476-2.417-2.871-5.5-2.23c-1.388-.507-2.033-1.755-4.862-.845c-1.158-.36-2.224-1.109-3.477-1.072Zm46.761 3.242c-.644.786-1.548 1.554-.591 2.458c1.319-.824 2.646-1.646 5.778-2.231c-.707.787-2.165 1.573-1.28 2.36c1.655-.632 3.486-1.091 5.513-1.358c-.97.8-1.78 1.58-.983 2.199c1.77-.545 4.21-1.28 6.597-.646l-1.51 1.519c-.168.203 3.532.159 5.974.195c-.892 1.237-1.799 2.433-2.33 4.559c.243.245 1.453.108 2.595 0c-1.172 2.462-3.204 3.083-3.678 4.138c.715.542 1.707.4 2.79.032c-.842 1.735-2.608 2.925-4.004 4.332c.354.252.97.4 2.43.227c-1.29 1.37-2.848 2.624-4.695 3.75c.328.377 1.45.363 2.494.388c-1.673 1.637-3.826 2.486-5.844 3.557c1.006.688 1.726.528 2.496.517c-1.426 1.172-3.854 1.783-6.106 2.491c.428.665.858.846 1.774 1.032c-2.385 1.32-5.8.717-6.763 1.392c.232.662.887 1.093 1.674 1.453c-3.838.224-14.336-.136-16.348-8.08c3.929-4.317 11.098-9.385 23.432-15.648c-9.596 3.211-18.253 7.492-25.5 13.383c-8.52-3.967-2.648-13.973 1.509-17.945c.211 1.049.45 1.714.722 1.909c1.353-1.45 2.46-2.937 4.201-4.333c.007.82-.413 1.708.625 2.358c.933-1.256 2.197-2.378 3.873-3.33c-.807 1.393-.137 1.817.297 2.394c1.28-1.097 2.497-2.21 4.858-3.072m-46.5.002c2.361.861 3.577 1.973 4.858 3.07c.434-.577 1.101-1 .294-2.392c1.676.952 2.94 2.074 3.873 3.33c1.038-.65.619-1.54.625-2.36c1.742 1.396 2.848 2.882 4.202 4.333c.27-.195.51-.86.722-1.909c4.157 3.972 10.031 13.978 1.51 17.945c-7.25-5.889-15.91-10.17-25.504-13.383C43.838 18.14 51.01 23.21 54.94 27.527c-2.011 7.944-12.509 8.304-16.348 8.08c.787-.36 1.442-.791 1.674-1.453c-.963-.675-4.376-.072-6.76-1.392c.915-.186 1.342-.367 1.77-1.032c-2.253-.708-4.678-1.319-6.106-2.491c.77.01 1.49.17 2.496-.517c-2.017-1.07-4.171-1.92-5.843-3.557c1.041-.025 2.168-.01 2.496-.388c-1.848-1.126-3.406-2.38-4.695-3.75c1.46.173 2.076.025 2.43-.227c-1.397-1.407-3.164-2.597-4.006-4.332c1.084.368 2.075.51 2.79-.032c-.475-1.055-2.506-1.676-3.676-4.138c1.141.108 2.351.245 2.593 0c-.53-2.126-1.439-3.322-2.33-4.56c2.441-.035 6.141.01 5.974-.194l-1.51-1.52c2.385-.632 4.827.102 6.6.647c.794-.618-.015-1.4-.986-2.2c2.028.268 3.858.73 5.513 1.36c.885-.786-.574-1.574-1.28-2.361c3.133.585 4.46 1.41 5.778 2.233c.958-.904.055-1.672-.59-2.458m23.324 32.72c6.042-.065 13.523 4.441 13.494 8.687c-.027 3.748-5.255 6.782-13.447 6.725c-8.024-.095-13.426-3.811-13.407-7.443c.016-2.988 6.551-8.142 13.36-7.968zm-19.892 2.528a23 23 0 0 1 4.174.316c4.202.695-20.144 21.637-20.52 16.966c-.335-10.662 6.89-17.109 16.346-17.282m39.869.358c9.454.173 16.68 6.617 16.345 17.28c-.375 4.67-24.72-16.27-20.517-16.966v.002a23 23 0 0 1 4.172-.316M78.903 51.85c4.916-.054 10.11 2.676 13.383 7.555c4.762 7.098 3.658 16.054-2.466 20.005c-6.122 3.952-14.945 1.401-19.707-5.695c-4.763-7.098-3.658-16.053 2.466-20.005c1.913-1.235 4.09-1.835 6.324-1.86m-29.176.716c2.234.025 4.41.625 6.324 1.86c6.123 3.951 7.227 12.908 2.466 20.005s-13.586 9.646-19.71 5.695c-6.122-3.951-7.225-12.908-2.464-20.005c3.274-4.88 8.468-7.609 13.384-7.555m51.909 7.928a2.2 2.2 0 0 1 .589.076c10.969 6.17 9.064 19.9 3.146 24.588c-5.211 2.279-9.484-24.57-3.735-24.664m-75.22.356c5.747.094 1.474 26.942-3.736 24.661c-5.917-4.687-7.823-18.415 3.146-24.585a2.2 2.2 0 0 1 .59-.076m37.821 18.424c8.162-.04 14.811 5.939 14.854 13.352v.142c.044 7.412-6.538 13.452-14.699 13.491c-8.162.04-14.81-5.936-14.854-13.35v-.141c-.043-7.413 6.538-13.455 14.7-13.494Zm32.636 5.068a4.94 4.94 0 0 1 3.21 1.032c2.623 2.575 4.163 12.27-.43 18.076c-6.326 8.645-14.89 8.982-18.079 6.574c-3.336-3.099-.79-12.722 3.784-17.998v-.004c3.926-4.365 8.052-7.592 11.515-7.68M30.992 86.4c3.72.156 8.172 3.056 11.809 7.213h.002c4.226 5.017 6.154 13.827 2.627 16.424c-3.337 1.984-11.442 1.168-17.203-6.983c-3.884-6.838-3.383-13.799-.655-15.843c1.02-.612 2.18-.864 3.42-.812zm33.781 24.029c5.937-.256 13.905 1.882 13.92 4.718c.099 2.755-7.226 8.98-14.314 8.86c-7.34.312-14.537-5.921-14.442-8.082c-.11-3.169 8.938-5.641 14.837-5.496z"/></svg>
diff --git a/public/svgs/serial.svg b/public/svgs/serial.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE --><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10v8a5 5 0 0 1-10 0zm2 0V3h6v5"/></svg>
diff --git a/public/svgs/start.svg b/public/svgs/start.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE --><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 4H5v16h4m9-4h-.01M14 16h-.01M10 16h-.01"/></svg>
diff --git a/public/svgs/wifi.svg b/public/svgs/wifi.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE --><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M12 18h.01m-2.838-2.828a4 4 0 0 1 5.656 0m-8.485-2.829a8 8 0 0 1 11.314 0"/><path d="M3.515 9.515c4.686-4.687 12.284-4.687 17 0"/></g></svg>
diff --git a/src/components/app-header.ts b/src/components/app-header.ts
@@ -1,4 +1,5 @@
 import '@awesome.me/webawesome/dist/components/icon/icon.js';
+import { Router } from '@vaadin/router';
 import { LitElement, css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
@@ -27,6 +28,7 @@ export class AppHeader extends LitElement {
       display: flex;
       align-items: center;
       gap: 12px;
+      cursor: pointer;
     }
 
     .logo {
@@ -117,10 +119,14 @@ export class AppHeader extends LitElement {
     }
   `;
 
+  private _handleLogoClick() {
+    Router.go('/');
+  }
+
   render() {
     return html`
       <header>
-        <div class="logo-section">
+        <div class="logo-section" @click=${this._handleLogoClick}>
           <img
             src="/open-home-foundation.svg"
             alt="Open Home Foundation"
diff --git a/src/components/details.ts b/src/components/details.ts
@@ -8,13 +8,7 @@ export interface DetailsAction {
   description: string;
   href: string;
   label: string;
-  iconPath?: string;
-}
-
-export interface DetailsFeature {
-  iconPath: string;
-  header: string;
-  text: string;
+  icon: string;
 }
 
 export interface DetailsConfig {
@@ -82,7 +76,7 @@ export class DetailsPage extends LitElement {
 
     .hero h1 {
       color: #333;
-      margin: 0 0 16px 0;
+      margin: 32px 0 16px 0;
       font-size: 2.2rem;
       font-weight: 600;
     }
@@ -110,6 +104,12 @@ export class DetailsPage extends LitElement {
       font-size: 1.05rem;
     }
 
+    @media (max-width: 768px) {
+      .hero h1 {
+        margin-top: 0;
+      }
+    }
+
     @media (max-width: 768px) {
       .hero .description.clamped {
         -webkit-line-clamp: 5;
@@ -130,7 +130,7 @@ export class DetailsPage extends LitElement {
     .actions-list {
       background: white;
       border-radius: 16px;
-      padding: 8px 8px 0 8px;
+      padding: 8px;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
       height: 100%;
       box-sizing: border-box;
@@ -145,9 +145,8 @@ export class DetailsPage extends LitElement {
       align-items: center;
       gap: 16px;
       padding: 18px 16px;
-      border-bottom: 1px solid #eee;
       cursor: pointer;
-      border-radius: 12px;
+      border-radius: 6px;
     }
 
     .action-item:hover {
@@ -168,10 +167,12 @@ export class DetailsPage extends LitElement {
       justify-content: center;
     }
 
-    .action-icon svg {
+    .icon-mask {
       width: 20px;
       height: 20px;
-      fill: #1976d2;
+      background-color: #1976d2;
+      -webkit-mask: var(--icon-url) no-repeat center / contain;
+      mask: var(--icon-url) no-repeat center / contain;
     }
 
     .action-content h3 {
@@ -188,8 +189,8 @@ export class DetailsPage extends LitElement {
     }
 
     .action-trailing svg {
-      width: 20px;
-      height: 20px;
+      width: 16px;
+      height: 16px;
       fill: #9e9e9e;
     }
 
@@ -229,13 +230,6 @@ export class DetailsPage extends LitElement {
     Router.go('/');
   }
 
-  private renderIcon(path?: string) {
-    if (!path) {
-      return null;
-    }
-    return html`<svg viewBox="0 0 24 24"><path d="${path}" /></svg>`;
-  }
-
   private _handleActionClick(href: string) {
     const isExternal = href.startsWith('http');
     if (isExternal) {
@@ -274,7 +268,7 @@ export class DetailsPage extends LitElement {
             class="hero"
             data-expanded="${this.isDescriptionExpanded ? 'true' : 'false'}"
           >
-            <h1 style="margin-top: 32px;">${hero.title}</h1>
+            <h1>${hero.title}</h1>
             ${hero.subtitle
               ? html`<p class="subtitle">${hero.subtitle}</p>`
               : nothing}
@@ -304,7 +298,12 @@ export class DetailsPage extends LitElement {
                   class="action-item"
                   @click=${() => this._handleActionClick(a.href)}
                 >
-                  <div class="action-icon">${this.renderIcon(a.iconPath)}</div>
+                  <div class="action-icon">
+                    <div
+                      class="icon-mask"
+                      style="--icon-url: url(${a.icon})"
+                    ></div>
+                  </div>
                   <div class="action-content">
                     <h3>${a.title}</h3>
                     <p>${a.description}</p>
@@ -314,14 +313,9 @@ export class DetailsPage extends LitElement {
                       xmlns="http://www.w3.org/2000/svg"
                       viewBox="0 0 448 512"
                     >
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 512 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>
+                      <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>
diff --git a/src/utils/details.ts b/src/utils/details.ts
diff --git a/src/utils/tools.ts b/src/utils/tools.ts
