Tyler
204 lines
5.6 KiB
HTML
204 lines
5.6 KiB
HTML
<!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>
|