owflow 0.1.5 → 0.1.7

package/dist/skills/product-design/server/template.html

@@ -1,256 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>{{TITLE}} — Product Design</title>
-  <style>
-    *, *::before, *::after { box-sizing: border-box; }
-    body {
-      margin: 0;
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-      background: #f5f5f5;
-      color: #222;
-    }
-    header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 0.75rem 1.5rem;
-      background: #fff;
-      border-bottom: 1px solid #ddd;
-    }
-    header h1 { margin: 0; font-size: 1.1rem; font-weight: 600; }
-    #status { font-size: 0.8rem; color: #4a4; font-weight: 500; }
-    #status.disconnected { color: #a44; }
-
-    /* Screen navigation */
-    .screen-nav {
-      background: #fafafa;
-      border-bottom: 1px solid #e0e0e0;
-      padding: 0.5rem 1.5rem;
-    }
-    .nav-screens {
-      display: flex;
-      gap: 0.25rem;
-      flex-wrap: wrap;
-      margin-bottom: 0.25rem;
-    }
-    .nav-screen {
-      padding: 0.3rem 0.7rem;
-      border-radius: 4px;
-      text-decoration: none;
-      color: #555;
-      font-size: 0.8rem;
-      background: #eee;
-      transition: background 0.15s;
-    }
-    .nav-screen:hover { background: #ddd; }
-    .nav-screen.active { background: #333; color: #fff; }
-    .nav-prevnext {
-      display: flex;
-      justify-content: space-between;
-      margin-top: 0.25rem;
-    }
-    .nav-arrow {
-      font-size: 0.8rem;
-      color: #0066cc;
-      text-decoration: none;
-    }
-    .nav-arrow:hover { text-decoration: underline; }
-
-    /* Gallery */
-    .gallery-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-      gap: 1.5rem;
-      padding: 1rem 0;
-    }
-    .gallery-card {
-      display: block;
-      background: #fff;
-      border: 1px solid #e0e0e0;
-      border-radius: 6px;
-      overflow: hidden;
-      text-decoration: none;
-      color: inherit;
-      transition: box-shadow 0.2s, transform 0.15s;
-    }
-    .gallery-card:hover {
-      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-      transform: translateY(-2px);
-    }
-    .gallery-card-title {
-      padding: 0.75rem 1rem;
-      font-weight: 600;
-      font-size: 0.9rem;
-      border-bottom: 1px solid #eee;
-      background: #fafafa;
-    }
-    .gallery-card-preview {
-      padding: 1rem;
-      max-height: 200px;
-      overflow: hidden;
-      position: relative;
-      font-size: 0.7rem;
-      transform: scale(0.8);
-      transform-origin: top left;
-      pointer-events: none;
-    }
-    .gallery-card-preview::after {
-      content: '';
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: 60px;
-      background: linear-gradient(transparent, white);
-    }
-
-    /* Mockup content */
-    main {
-      max-width: 1200px;
-      margin: 1.5rem auto;
-      padding: 1.5rem;
-      background: #fff;
-      border: 1px solid #e0e0e0;
-      border-radius: 4px;
-      min-height: 300px;
-      position: relative;
-    }
-    .placeholder {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 300px;
-      color: #999;
-      font-size: 1rem;
-      text-align: center;
-      line-height: 1.8;
-    }
-    .annotation-tooltip {
-      position: absolute;
-      background: rgba(0, 0, 0, 0.75);
-      color: #fff;
-      font-size: 0.75rem;
-      padding: 4px 8px;
-      border-radius: 3px;
-      pointer-events: none;
-      max-width: 250px;
-      z-index: 1000;
-      line-height: 1.3;
-    }
-    .annotation-tooltip::before {
-      content: '';
-      position: absolute;
-      top: -4px;
-      left: 10px;
-      width: 8px;
-      height: 8px;
-      background: rgba(0, 0, 0, 0.75);
-      transform: rotate(45deg);
-    }
-
-    /* Interactive screen-to-screen navigation */
-    [data-screen] { cursor: pointer; }
-    [data-screen]:hover { outline: 2px solid #0066cc; outline-offset: 2px; border-radius: 2px; }
-
-    /* Annotation toggle */
-    .annotations-hidden .annotation-tooltip { display: none; }
-    #annotation-toggle {
-      font-size: 0.8rem;
-      padding: 0.25rem 0.6rem;
-      border: 1px solid #ccc;
-      border-radius: 3px;
-      background: #f0f0f0;
-      cursor: pointer;
-      margin-left: 0.75rem;
-    }
-    #annotation-toggle:hover { background: #e0e0e0; }
-    #annotation-toggle.active { background: #333; color: #fff; border-color: #333; }
-  </style>
-</head>
-<body>
-  <header>
-    <h1>{{TITLE}}</h1>
-    <div>
-      <button id="annotation-toggle" class="active" title="Toggle annotation tooltips">Annotations</button>
-      <span id="status">Connected</span>
-    </div>
-  </header>
-
-  {{NAV}}
-
-  <main id="mockup-container">
-    {{CONTENT}}
-  </main>
-
-  <script>
-    // SSE client for live refresh — navigates to /latest on new screen
-    const statusEl = document.getElementById('status');
-    const evtSource = new EventSource('/events');
-    evtSource.onmessage = function(e) {
-      if (e.data === 'refresh') window.location.href = '/latest';
-    };
-    evtSource.onopen = function() {
-      statusEl.textContent = 'Connected';
-      statusEl.className = '';
-    };
-    evtSource.onerror = function() {
-      statusEl.textContent = 'Reconnecting...';
-      statusEl.className = 'disconnected';
-    };
-
-    // Annotation overlay rendering
-    const annotations = {{ANNOTATIONS}};
-    function renderAnnotations() {
-      const container = document.getElementById('mockup-container');
-      annotations.forEach(function(ann) {
-        if (!ann.selector) return;
-        const target = container.querySelector(ann.selector);
-        if (!target) return;
-        const text = ann.note || ann.text || '';
-        if (!text) return;
-        const rect = target.getBoundingClientRect();
-        const containerRect = container.getBoundingClientRect();
-        const tooltip = document.createElement('div');
-        tooltip.className = 'annotation-tooltip';
-        tooltip.textContent = text;
-        tooltip.style.top = (rect.bottom - containerRect.top + 6) + 'px';
-        tooltip.style.left = (rect.left - containerRect.left) + 'px';
-        container.appendChild(tooltip);
-      });
-    }
-    if (annotations.length > 0) requestAnimationFrame(renderAnnotations);
-
-    // Annotation toggle with localStorage persistence
-    var toggleBtn = document.getElementById('annotation-toggle');
-    var container = document.getElementById('mockup-container');
-    var annotationsVisible = localStorage.getItem('annotations-visible') !== 'false'; // default: true
-    function updateToggle() {
-      if (annotationsVisible) {
-        container.classList.remove('annotations-hidden');
-        toggleBtn.classList.add('active');
-      } else {
-        container.classList.add('annotations-hidden');
-        toggleBtn.classList.remove('active');
-      }
-    }
-    updateToggle();
-    toggleBtn.addEventListener('click', function() {
-      annotationsVisible = !annotationsVisible;
-      localStorage.setItem('annotations-visible', annotationsVisible);
-      updateToggle();
-    });
-
-    // Screen-to-screen navigation: clicking elements with data-screen="slug" navigates to that screen
-    document.getElementById('mockup-container').addEventListener('click', function(e) {
-      var target = e.target.closest('[data-screen]');
-      if (target) {
-        e.preventDefault();
-        window.location.href = '/screen/' + target.getAttribute('data-screen');
-      }
-    });
-  </script>
-</body>
-</html>