htmlboard 0.3.0 → 0.5.0

package/src/templates/01-screens/{02-mobile.html → 03-mobile.html}

@@ -6,39 +6,20 @@
   <title>Mobile Feed Screen</title>
   <meta name="description" content="Smartphone screen with balance card, quick actions, and transaction feed">
   <meta name="htmlboard" content="width=390, height=844">
+  <link rel="stylesheet" href="../styles.css">
+  <script type="module" src="../components.js"></script>
   <style>
-    * {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-      -webkit-font-smoothing: antialiased;
-    }
-    :root {
-      --bg: #090a0f;
-      --card-bg: #13151f;
-      --card-border: #232738;
-      --accent: #6366f1;
-      --accent-glow: rgba(99, 102, 241, 0.35);
-      --emerald: #10b981;
-      --rose: #f43f5e;
-      --text-main: #f8fafc;
-      --text-muted: #94a3b8;
-    }
     body {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-      background: var(--bg);
-      color: var(--text-main);
       min-height: 100vh;
       display: flex;
       flex-direction: column;
       overflow-x: hidden;
       padding-bottom: 80px;
+      background: #090a0f;
     }
-    /* Status bar simulated */
     .status-bar {
       display: flex;
       justify-content: space-between;
-      align-items: center;
       padding: 14px 24px 8px;
       font-size: 13px;
       font-weight: 600;
@@ -51,49 +32,29 @@
       align-items: center;
       padding: 16px 20px;
     }
-    .user-info {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-    }
-    .avatar {
+    .header .avatar {
       width: 44px;
       height: 44px;
-      border-radius: 50%;
-      background: linear-gradient(135deg, #6366f1, #a855f7);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-weight: 700;
       font-size: 16px;
       box-shadow: 0 0 16px var(--accent-glow);
     }
-    .greeting {
-      font-size: 13px;
-      color: var(--text-muted);
-    }
-    .username {
-      font-size: 17px;
-      font-weight: 700;
-    }
+    .greeting { font-size: 13px; }
+    .username { font-size: 17px; font-weight: 700; }
     .icon-btn {
       width: 40px;
       height: 40px;
       border-radius: 12px;
-      background: var(--card-bg);
-      border: 1px solid var(--card-border);
-      color: var(--text-main);
+      background: var(--surface);
+      border: 1px solid var(--border);
       display: flex;
       align-items: center;
       justify-content: center;
-      cursor: pointer;
       position: relative;
     }
-    .badge-dot {
+    .icon-btn .badge-dot {
       width: 8px;
       height: 8px;
       background: var(--rose);
-      border-radius: 50%;
       position: absolute;
       top: 10px;
       right: 10px;
@@ -105,7 +66,7 @@
       background: linear-gradient(135deg, #1e1b4b 0%, #1e293b 100%);
       border: 1px solid rgba(99, 102, 241, 0.3);
       border-radius: 24px;
-      box-shadow: 0 12px 30px -10px rgba(99, 102, 241, 0.35);
+      box-shadow: 0 12px 30px -10px var(--accent-glow);
       position: relative;
       overflow: hidden;
     }
@@ -119,30 +80,13 @@
       background: radial-gradient(circle, rgba(99, 102, 241, 0.4) 0%, transparent 70%);
       pointer-events: none;
     }
-    .balance-label {
-      font-size: 13px;
-      color: #cbd5e1;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      margin-bottom: 6px;
-    }
+    .hero-card .label { color: #cbd5e1; font-size: 13px; margin-bottom: 6px; }
     .balance-value {
       font-size: 34px;
       font-weight: 800;
       letter-spacing: -0.02em;
       margin-bottom: 12px;
     }
-    .balance-trend {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      background: rgba(16, 185, 129, 0.15);
-      color: var(--emerald);
-      padding: 4px 10px;
-      border-radius: 20px;
-      font-size: 12px;
-      font-weight: 600;
-    }
     /* Quick Actions */
     .actions-grid {
       display: grid;
@@ -155,14 +99,14 @@
       flex-direction: column;
       align-items: center;
       gap: 8px;
-      cursor: pointer;
+      font-size: 12px;
+      font-weight: 500;
     }
     .action-circle {
       width: 52px;
       height: 52px;
+      padding: 0;
       border-radius: 18px;
-      background: var(--card-bg);
-      border: 1px solid var(--card-border);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -174,75 +118,21 @@
       border-color: var(--accent);
       transform: translateY(-2px);
     }
-    .action-label {
-      font-size: 12px;
-      font-weight: 500;
-      color: var(--text-muted);
-    }
-    /* Section Title */
+    /* Transactions */
     .section-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 16px 20px 8px;
     }
-    .section-title {
-      font-size: 17px;
-      font-weight: 700;
-    }
-    .see-all {
-      font-size: 13px;
-      color: var(--accent);
-      text-decoration: none;
-      font-weight: 600;
-    }
-    /* Transactions */
+    .section-title { font-size: 17px; font-weight: 700; }
+    .see-all { font-size: 13px; color: var(--accent); font-weight: 600; }
     .tx-list {
       display: flex;
       flex-direction: column;
       gap: 10px;
       padding: 8px 20px;
     }
-    .tx-item {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 14px 16px;
-      background: var(--card-bg);
-      border: 1px solid var(--card-border);
-      border-radius: 16px;
-    }
-    .tx-left {
-      display: flex;
-      align-items: center;
-      gap: 14px;
-    }
-    .tx-icon {
-      width: 40px;
-      height: 40px;
-      border-radius: 12px;
-      background: #1c2030;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 18px;
-    }
-    .tx-name {
-      font-size: 14px;
-      font-weight: 600;
-    }
-    .tx-date {
-      font-size: 12px;
-      color: var(--text-muted);
-      margin-top: 2px;
-    }
-    .tx-amount {
-      font-size: 14px;
-      font-weight: 700;
-    }
-    .tx-amount.positive {
-      color: var(--emerald);
-    }
     /* Bottom Navigation */
     .bottom-nav {
       position: fixed;
@@ -252,7 +142,7 @@
       height: 72px;
       background: rgba(9, 10, 15, 0.85);
       backdrop-filter: blur(16px);
-      border-top: 1px solid var(--card-border);
+      border-top: 1px solid var(--border);
       display: flex;
       justify-content: space-around;
       align-items: center;
@@ -265,15 +155,9 @@
       gap: 4px;
       color: var(--text-muted);
       font-size: 11px;
-      text-decoration: none;
-      cursor: pointer;
-    }
-    .nav-btn.active {
-      color: var(--accent);
-    }
-    .nav-icon {
-      font-size: 20px;
     }
+    .nav-btn.active { color: var(--accent); }
+    .nav-icon { font-size: 20px; }
   </style>
 </head>
 <body>
@@ -283,10 +167,10 @@
   </div>
 
   <header class="header">
-    <div class="user-info">
+    <div class="row">
       <div class="avatar">LC</div>
       <div>
-        <div class="greeting">Welcome back,</div>
+        <div class="greeting muted">Welcome back,</div>
         <div class="username">Luiz Carlos</div>
       </div>
     </div>
@@ -297,29 +181,27 @@
   </header>
 
   <section class="hero-card">
-    <div class="balance-label">Total Portfolio Value</div>
+    <div class="label">Total Portfolio Value</div>
     <div class="balance-value">$42,850.75</div>
-    <div class="balance-trend">
-      ▲ +14.2% this month
-    </div>
+    <div class="badge badge-emerald">▲ +14.2% this month</div>
   </section>
 
   <nav class="actions-grid">
     <div class="action-item">
-      <div class="action-circle">↗</div>
-      <div class="action-label">Send</div>
+      <div class="action-circle card">↗</div>
+      <div class="muted">Send</div>
     </div>
     <div class="action-item">
-      <div class="action-circle">↙</div>
-      <div class="action-label">Receive</div>
+      <div class="action-circle card">↙</div>
+      <div class="muted">Receive</div>
     </div>
     <div class="action-item">
-      <div class="action-circle">⚡</div>
-      <div class="action-label">Swap</div>
+      <div class="action-circle card">⚡</div>
+      <div class="muted">Swap</div>
     </div>
     <div class="action-item">
-      <div class="action-circle">⋯</div>
-      <div class="action-label">More</div>
+      <div class="action-circle card">⋯</div>
+      <div class="muted">More</div>
     </div>
   </nav>
 
@@ -329,38 +211,9 @@
   </div>
 
   <div class="tx-list">
-    <div class="tx-item">
-      <div class="tx-left">
-        <div class="tx-icon">🛍️</div>
-        <div>
-          <div class="tx-name">Apple Store</div>
-          <div class="tx-date">Today, 2:15 PM • Electronics</div>
-        </div>
-      </div>
-      <div class="tx-amount">-$199.00</div>
-    </div>
-
-    <div class="tx-item">
-      <div class="tx-left">
-        <div class="tx-icon">💼</div>
-        <div>
-          <div class="tx-name">Client Invoice #1042</div>
-          <div class="tx-date">Yesterday • Wire Transfer</div>
-        </div>
-      </div>
-      <div class="tx-amount positive">+$3,450.00</div>
-    </div>
-
-    <div class="tx-item">
-      <div class="tx-left">
-        <div class="tx-icon">☕</div>
-        <div>
-          <div class="tx-name">Blue Bottle Coffee</div>
-          <div class="tx-date">Oct 26 • Food & Beverage</div>
-        </div>
-      </div>
-      <div class="tx-amount">-$6.75</div>
-    </div>
+    <tx-item icon="🛍️" name="Apple Store" meta="Today, 2:15 PM • Electronics" amount="-$199.00"></tx-item>
+    <tx-item icon="💼" name="Client Invoice #1042" meta="Yesterday • Wire Transfer" amount="+$3,450.00" positive></tx-item>
+    <tx-item icon="☕" name="Blue Bottle Coffee" meta="Oct 26 • Food & Beverage" amount="-$6.75"></tx-item>
   </div>
 
   <div class="bottom-nav">

package/src/templates/02-ui-kit/01-overview.html

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Component Library Preview</title>
+  <meta name="description" content="Buttons, inputs, badges and avatars from styles.css, and the components built with them">
+  <meta name="htmlboard" content="width=780, category=components">
+  <link rel="stylesheet" href="../styles.css">
+  <script type="module" src="../components.js"></script>
+  <style>
+    body {
+      padding: 24px;
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+    }
+    .header {
+      border-bottom: 1px solid var(--border);
+      padding-bottom: 16px;
+    }
+    .title { font-size: 20px; font-weight: 700; }
+    .subtitle { font-size: 13px; margin-top: 4px; }
+    body > .card { display: flex; flex-direction: column; gap: 16px; }
+    .row { flex-wrap: wrap; }
+    .field { flex: 1; min-width: 200px; }
+    .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <h1 class="title">Design System Components</h1>
+    <p class="subtitle muted">The classes in styles.css and the components in components/, shared by all the designs</p>
+  </div>
+
+  <div class="card">
+    <div class="label">Buttons & Interactive Triggers</div>
+    <div class="row">
+      <button class="btn btn-primary"><span>✨</span> Primary Action</button>
+      <button class="btn btn-secondary">Secondary Action</button>
+      <button class="btn btn-outline">Outline Button</button>
+      <button class="btn btn-danger"><span>🗑️</span> Danger Action</button>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="label">Status Pills & Badges</div>
+    <div class="row">
+      <div class="badge"><span class="badge-dot"></span> In Progress</div>
+      <div class="badge badge-emerald"><span class="badge-dot"></span> Active / Healthy</div>
+      <div class="badge badge-amber"><span class="badge-dot"></span> Review Required</div>
+      <div class="badge badge-rose"><span class="badge-dot"></span> Error / Offline</div>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="label">Form Controls</div>
+    <div class="row">
+      <label class="field">
+        <span>Project Name</span>
+        <input type="text" class="input" value="HtmlBoard Studio">
+      </label>
+      <label class="field">
+        <span>Environment Target</span>
+        <input type="text" class="input" value="production-edge-01">
+      </label>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="label">Avatars</div>
+    <div class="row">
+      <div class="avatar">LC</div>
+      <div class="avatar" style="background: linear-gradient(135deg, #ec4899, #8b5cf6)">AM</div>
+      <div class="avatar" style="width: 44px; height: 44px; font-size: 16px">JS</div>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="label">Components: &lt;stat-card&gt; and &lt;tx-item&gt;</div>
+    <div class="pair">
+      <stat-card label="Monthly Recurring Revenue" value="$184,290" trend="▲ +12.4% vs last mo"></stat-card>
+      <stat-card label="Average Latency" value="34ms" trend="▼ -2ms target" warn></stat-card>
+      <tx-item icon="💼" name="Client Invoice #1042" meta="Yesterday • Wire Transfer" amount="+$3,450.00" positive></tx-item>
+      <tx-item icon="☕" name="Blue Bottle Coffee" meta="Oct 26 • Food & Beverage" amount="-$6.75"></tx-item>
+    </div>
+  </div>
+</body>
+</html>

package/src/templates/components/app-sidebar.html

@@ -0,0 +1,67 @@
+<!-- <app-sidebar active="Dashboard"></app-sidebar> -->
+<div class="brand row"><span class="logo">⚡</span> Nexus Platform</div>
+
+<nav>
+  <div class="label">Core</div>
+  <a href="../01-screens/01-dashboard.html">📊 Dashboard</a>
+  <a href="../01-screens/02-customers.html">👥 Customers</a>
+  <a href="#">💳 Invoices</a>
+  <a href="#">📈 Analytics</a>
+  <div class="label">System</div>
+  <a href="#">⚙️ Settings</a>
+  <a href="#">🛡️ Security</a>
+</nav>
+
+<div class="user row">
+  <div class="avatar">AM</div>
+  <div>
+    <div class="name">Alex Morgan</div>
+    <div class="email muted">alex@nexus.io</div>
+  </div>
+</div>
+
+<style>
+  & {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    width: 240px;
+    padding: 20px 16px;
+    background: #10131d;
+    border-right: 1px solid var(--border);
+  }
+  .brand { gap: 10px; padding: 4px 8px 24px; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
+  .logo {
+    display: grid;
+    place-items: center;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--radius);
+    background: linear-gradient(135deg, var(--accent), #3b82f6);
+    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
+    font-size: 16px;
+  }
+  nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
+  nav .label { padding: 8px 12px 4px; font-size: 11px; }
+  nav .label ~ .label { margin-top: 16px; }
+  nav a {
+    padding: 10px 12px;
+    border-radius: var(--radius);
+    color: var(--text-muted);
+    font-size: 14px;
+    font-weight: 500;
+    transition: all 0.15s ease;
+  }
+  nav a:hover { background: rgba(255, 255, 255, 0.04); color: var(--text); }
+  nav a.active { background: rgba(99, 102, 241, 0.12); color: var(--accent-light); font-weight: 600; }
+  .user { padding: 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); }
+  .user .avatar { background: linear-gradient(135deg, #ec4899, #8b5cf6); font-weight: 600; }
+  .name { font-size: 13px; font-weight: 600; }
+  .email { font-size: 11px; }
+</style>
+
+<script>
+  // The link named by active="…" is the current page
+  const active = this.getAttribute('active');
+  for (const link of this.querySelectorAll('nav a')) link.classList.toggle('active', link.textContent.includes(active));
+</script>

package/src/templates/components/app-topbar.html

@@ -0,0 +1,19 @@
+<!-- <app-topbar search="Search customers..."><button class="btn btn-primary">+ Add Customer</button></app-topbar> -->
+<input class="input" type="text" placeholder="{{search}}">
+<div class="row"><slot></slot></div>
+
+<style>
+  & {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-shrink: 0;
+    height: 64px;
+    padding: 0 32px;
+    border-bottom: 1px solid var(--border);
+    background: rgba(11, 13, 19, 0.8);
+    backdrop-filter: blur(12px);
+  }
+  .input { width: 280px; padding: 8px 16px; }
+  .row { gap: 16px; font-size: 13px; }
+</style>

package/src/templates/components/stat-card.html

@@ -0,0 +1,14 @@
+<!-- <stat-card label="Monthly Recurring Revenue" value="$184,290" trend="▲ +12.4% vs last mo"></stat-card> <stat-card label="Average Latency" value="34ms" trend="▼ -2ms target" warn></stat-card> -->
+<div class="card">
+  <div class="name muted">{{label}}</div>
+  <div class="value">{{value}}</div>
+  <div class="trend">{{trend}}</div>
+</div>
+
+<style>
+  .card { height: 100%; }
+  .name { font-size: 13px; margin-bottom: 8px; }
+  .value { font-size: 26px; font-weight: 700; margin-bottom: 8px; }
+  .trend { font-size: 12px; font-weight: 600; color: var(--emerald); }
+  &[warn] .trend { color: var(--amber); }
+</style>

package/src/templates/components/tx-item.html

@@ -0,0 +1,33 @@
+<!-- <tx-item icon="💼" name="Client Invoice #1042" meta="Yesterday • Wire Transfer" amount="+$3,450.00" positive></tx-item> <tx-item icon="☕" name="Blue Bottle Coffee" meta="Oct 26 • Food & Beverage" amount="-$6.75"></tx-item> -->
+<div class="icon">{{icon}}</div>
+<div class="what">
+  <div class="name">{{name}}</div>
+  <div class="meta muted">{{meta}}</div>
+</div>
+<div class="amount">{{amount}}</div>
+
+<style>
+  & {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 14px 16px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 16px;
+  }
+  .icon {
+    display: grid;
+    place-items: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 12px;
+    background: var(--surface-2);
+    font-size: 18px;
+  }
+  .what { flex: 1; }
+  .name { font-size: 14px; font-weight: 600; }
+  .meta { font-size: 12px; margin-top: 2px; }
+  .amount { font-size: 14px; font-weight: 700; }
+  &[positive] .amount { color: var(--emerald); }
+</style>