Testing

2026-05-25 01:50:39 -04:00
commit 68e9faa5af
13 changed files with 3941 additions and 0 deletions
@@ -0,0 +1,203 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Ollama Sidebar — Icon Generator</title>
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      background: #161616;
+      color: #e4e4e4;
+      padding: 32px 24px;
+      max-width: 600px;
+      margin: 0 auto;
+    }
+    h1 { font-size: 20px; margin-bottom: 8px; }
+    p  { color: #888; font-size: 13px; line-height: 1.6; margin-bottom: 24px; }
+    code {
+      background: #2a2a2a;
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-size: 12px;
+      font-family: monospace;
+    }
+    .icons-row {
+      display: flex;
+      gap: 32px;
+      flex-wrap: wrap;
+      margin-bottom: 28px;
+    }
+    .icon-card {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 10px;
+    }
+    canvas {
+      border: 1px solid #333;
+      border-radius: 4px;
+      image-rendering: pixelated;
+    }
+    .size-label {
+      font-size: 12px;
+      color: #666;
+    }
+    .save-btn {
+      background: #7c3aed;
+      color: #fff;
+      border: none;
+      padding: 7px 16px;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 12px;
+      font-family: inherit;
+      transition: background 0.15s;
+    }
+    .save-btn:hover { background: #6d28d9; }
+    .save-all-btn {
+      background: #5b21b6;
+      color: #fff;
+      border: none;
+      padding: 10px 24px;
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 14px;
+      font-family: inherit;
+      font-weight: 500;
+      transition: background 0.15s;
+    }
+    .save-all-btn:hover { background: #4c1d95; }
+    .instructions {
+      background: #1f1f1f;
+      border: 1px solid #333;
+      border-radius: 8px;
+      padding: 16px;
+      margin-top: 24px;
+      font-size: 12.5px;
+      line-height: 1.7;
+      color: #999;
+    }
+    .instructions ol { padding-left: 18px; }
+    .instructions li { margin-bottom: 4px; }
+  </style>
+</head>
+<body>
+
+  <h1>Ollama Sidebar — Icon Generator</h1>
+  <p>
+    Click <strong>Save All Icons</strong> (or save each individually), then place the downloaded
+    files inside the <code>icons/</code> folder before loading the extension.
+  </p>
+
+  <div class="icons-row" id="icons-row"></div>
+
+  <button class="save-all-btn" onclick="saveAll()">Save All Icons</button>
+
+  <div class="instructions">
+    <strong>Steps to use:</strong>
+    <ol>
+      <li>Click <em>Save All Icons</em> — your browser will download three PNG files.</li>
+      <li>Move <code>icon16.png</code>, <code>icon48.png</code>, and <code>icon128.png</code> into the <code>icons/</code> folder.</li>
+      <li>Load the extension: <em>Extensions → Manage Extensions → Load unpacked</em> (Chrome) or <em>Tools → Extensions → Install from Disk</em> (Orion).</li>
+    </ol>
+  </div>
+
+  <script>
+    var SIZES = [16, 48, 128];
+    var canvases = {};
+
+    function drawIcon(size) {
+      var canvas = document.createElement('canvas');
+      canvas.width  = size;
+      canvas.height = size;
+      var ctx = canvas.getContext('2d');
+
+      // Purple gradient background
+      var grad = ctx.createLinearGradient(0, 0, size, size);
+      grad.addColorStop(0, '#7c3aed');
+      grad.addColorStop(1, '#4f46e5');
+
+      var r = Math.max(2, Math.round(size * 0.18));
+      ctx.beginPath();
+      if (ctx.roundRect) {
+        ctx.roundRect(0, 0, size, size, r);
+      } else {
+        // Fallback for older browsers
+        ctx.moveTo(r, 0);
+        ctx.lineTo(size - r, 0);
+        ctx.arcTo(size, 0, size, r, r);
+        ctx.lineTo(size, size - r);
+        ctx.arcTo(size, size, size - r, size, r);
+        ctx.lineTo(r, size);
+        ctx.arcTo(0, size, 0, size - r, r);
+        ctx.lineTo(0, r);
+        ctx.arcTo(0, 0, r, 0, r);
+        ctx.closePath();
+      }
+      ctx.fillStyle = grad;
+      ctx.fill();
+
+      // "O" letter centred
+      ctx.fillStyle = 'rgba(255,255,255,0.95)';
+      var fontSize = Math.round(size * 0.56);
+      ctx.font = 'bold ' + fontSize + 'px -apple-system, BlinkMacSystemFont, sans-serif';
+      ctx.textAlign    = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText('O', size / 2, size * 0.52);
+
+      return canvas;
+    }
+
+    function buildUI() {
+      var row = document.getElementById('icons-row');
+      SIZES.forEach(function (size) {
+        var canvas = drawIcon(size);
+        canvases[size] = canvas;
+
+        // Scale canvas visually so small ones are visible
+        var displaySize = Math.max(size, 64);
+        canvas.style.width  = displaySize + 'px';
+        canvas.style.height = displaySize + 'px';
+
+        var card = document.createElement('div');
+        card.className = 'icon-card';
+
+        var label = document.createElement('div');
+        label.className = 'size-label';
+        label.textContent = size + 'x' + size;
+
+        var btn = document.createElement('button');
+        btn.className = 'save-btn';
+        btn.textContent = 'Save';
+        btn.onclick = (function (s) {
+          return function () { saveIcon(s); };
+        }(size));
+
+        card.appendChild(canvas);
+        card.appendChild(label);
+        card.appendChild(btn);
+        row.appendChild(card);
+      });
+    }
+
+    function saveIcon(size) {
+      var canvas = canvases[size];
+      var link = document.createElement('a');
+      link.download = 'icon' + size + '.png';
+      link.href = canvas.toDataURL('image/png');
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    }
+
+    function saveAll() {
+      SIZES.forEach(function (size, i) {
+        // Slight delay between downloads to avoid browser blocking multiple saves
+        setTimeout(function () { saveIcon(size); }, i * 200);
+      });
+    }
+
+    buildUI();
+  </script>
+</body>
+</html>