51 lines
1.7 KiB
HTML
51 lines
1.7 KiB
HTML
|
<!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>°</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 × 64</option>
|
||
|
|
<option value="128">128 × 128</option>
|
||
|
|
<option value="192">192 × 192</option>
|
||
|
|
<option value="256" selected>256 × 256</option>
|
||
|
|
<option value="512">512 × 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>
|