Added clocks tool

2025-09-26 08:13:29 +10:00 · 2025-09-26 08:13:29 +10:00 · 7073a2d3f2
commit 7073a2d3f2
parent 8dc2621f87
23 changed files with 1061 additions and 3 deletions
--- a/site/freelens-logo/index.html
+++ b/site/freelens-logo/index.html
@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="color-scheme" content="light dark">
+  <title>Freelens Logo Creator - Tools</title>
+  <link
+    rel="stylesheet"
+    href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
+  >  
+  <style>
+    canvas {
+      border: 1px solid #ccc;
+      display: block;
+      margin-bottom: 10px;
+    }
+  </style>
+</head>
+<body class="container">
+  <header>
+      <hgroup>
+          <h1>Freelens Logo Creator</h1>
+          <p>Create logos for K8S clusters in Freelens</p>
+        </hgroup>
+  </header>  
+  <main class="grid">
+    <div>
+      <form id="logoForm">
+        <input type="text" id="upperText" name="Upper" placeholder="Upper">
+        <input type="text" id="lowerText" name="Lower" placeholder="Lower">
+        <label>Background:
+          <select id="bgColor" name="Background">
+            <option value="#cd2d2d">Red</option>
+            <option value="#d26800">Orange</option>
+            <option value="#f39c12">Amber</option>
+            <option value="#27ae60">Green</option>
+            <option value="#17a094">Teal</option>
+            <option value="#2980b9">Blue</option>
+            <option value="#8e44ad">Purple</option>
+            <option value="#7f8c8d">Gray</option>
+          </select>
+        </label>
+      </form>
+    </div>
+    <div>
+      <canvas id="logoCanvas" width="100" height="100"></canvas>
+      <button id="downloadBtn">Download PNG</button>
+    </div>
+  </main>
+  <script src="script.js"></script>
+</body>
+</html>
--- a/site/freelens-logo/script.js
+++ b/site/freelens-logo/script.js
@ -0,0 +1,78 @@
+(function() {
+  const canvas = document.getElementById('logoCanvas');
+  const ctx = canvas.getContext('2d');
+  const upperInput = document.getElementById('upperText');
+  const lowerInput = document.getElementById('lowerText');
+  const colorSelect = document.getElementById('bgColor');
+  const downloadBtn = document.getElementById('downloadBtn');
+
+  const PADDING = 15;
+  const LINE_WIDTH = 2;
+
+  function fitText(text, maxWidth, maxHeight) {
+    let size = maxHeight;
+    ctx.font = `bold ${size}px sans-serif`;
+    while (ctx.measureText(text).width > maxWidth && size > 8) {
+      size--;
+      ctx.font = `bold ${size}px sans-serif`;
+    }
+    return size;
+  }
+
+  function draw() {
+    const width = canvas.width;
+    const height = canvas.height;
+    ctx.clearRect(0, 0, width, height);
+
+    ctx.fillStyle = colorSelect.value;
+    ctx.fillRect(0, 0, width, height);
+    
+    const upper = upperInput.value;
+    const lower = lowerInput.value;
+
+    if (lower != "") {
+      ctx.strokeStyle = 'white';
+      ctx.lineWidth = LINE_WIDTH;
+      const yLine = height / 2;
+      ctx.beginPath();
+      ctx.moveTo(PADDING, yLine);
+      ctx.lineTo(width - PADDING, yLine);
+      ctx.stroke();
+    }
+
+    const availableWidth = width - PADDING * 2;
+    const availableHeight = height - PADDING * 2;
+    const halfHeight = availableHeight / 2;
+
+    ctx.fillStyle = 'white';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+
+    if (lower != "") {
+      let fontSize = fitText(upper, availableWidth, halfHeight);
+      ctx.font = `bold ${fontSize}px sans-serif`;
+      ctx.fillText(upper, width / 2, PADDING + halfHeight / 2);
+  
+      fontSize = fitText(lower, availableWidth, halfHeight);
+      ctx.font = `bold ${fontSize}px sans-serif`;
+      ctx.fillText(lower, width / 2, height - PADDING - halfHeight / 2 + 4);
+    } else {
+      let fontSize = fitText(upper, availableWidth, halfHeight);
+      ctx.font = `bold ${fontSize}px sans-serif`;
+      ctx.fillText(upper, width / 2, height / 2);
+    }
+  }
+
+  upperInput.addEventListener('input', draw);
+  lowerInput.addEventListener('input', draw);
+  colorSelect.addEventListener('change', draw);
+
+  downloadBtn.addEventListener('click', function() {
+    const link = document.createElement('a');
+    link.download = 'logo.png';
+    link.href = canvas.toDataURL('image/png');
+    link.click();
+  });
+
+  draw();
+})();