web/webtools
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Some more tools around Android icons
All checks were successful
/ publish (push) Successful in 1m48s
Details

Browse source
This commit is contained in:
Leon Mika 2026-03-12 22:52:25 +11:00
parent 7f6dcac154
commit c7ff8597aa
15 changed files with 644 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

50
site/gradient-image/index.html Normal file
View file

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient Image - Tools</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body class="container">
<header>
<hgroup>
<h1>Gradient Image</h1>
<p>Generate gradient images as downloadable PNGs</p>
</hgroup>
</header>
<main class="grid">
<section class="controls">
<label for="from-color">From Colour</label>
<input type="color" id="from-color" value="#ff0000">
<label for="to-color">To Colour</label>
<input type="color" id="to-color" value="#0000ff">
<label for="gradient-type">Gradient Type</label>
<select id="gradient-type">
<option value="linear">Linear</option>
<option value="radial">Radial</option>
</select>
<label for="rotation">Rotation: <span id="rotation-value">0</span>&deg;</label>
<input type="range" id="rotation" min="0" max="360" step="45" value="0">
<label for="image-size">Image Size</label>
<select id="image-size">
<option value="64">64 &times; 64</option>
<option value="128">128 &times; 128</option>
<option value="192">192 &times; 192</option>
<option value="256" selected>256 &times; 256</option>
<option value="512">512 &times; 512</option>
</select>
</section>
<section class="preview">
<canvas id="preview-canvas" width="256" height="256"></canvas>
<button id="download-btn">Download</button>
</section>
</main>
<script src="main.js" type="module"></script>
</body>
</html>