131 lines
5.7 KiB
HTML
131 lines
5.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>Texture Padder – Dusk Editor</title>
|
||
<link rel="stylesheet" href="/styles/main.css">
|
||
</head>
|
||
<body>
|
||
|
||
<header class="site-header">
|
||
<a href="/" class="logo" style="text-decoration:none;color:inherit">Dusk <span>Editor</span></a>
|
||
<nav>
|
||
<a href="/">Home</a>
|
||
<a href="/texture-padder/" class="active">Texture Padder</a>
|
||
</nav>
|
||
</header>
|
||
|
||
<main class="page">
|
||
|
||
<div class="hero">
|
||
<h1>Texture Padder</h1>
|
||
<p>Load an image or .dtf file and pad its dimensions to meet power-of-two or minimum size requirements.</p>
|
||
</div>
|
||
|
||
<div class="tool-workspace">
|
||
|
||
<!-- ─── Sidebar ────────────────────────────────────────────────────── -->
|
||
<aside class="tool-panel">
|
||
|
||
<section class="panel-section">
|
||
<div class="section-label">Load</div>
|
||
<label class="load-area" id="load-label">
|
||
<input type="file" id="file-input" accept=".png,.jpg,.jpeg,.gif,.bmp,.webp,.dtf" style="display:none">
|
||
Click or drop a file<br>
|
||
<small>PNG · JPG · GIF · BMP · WebP · DTF</small>
|
||
</label>
|
||
<div class="file-name" id="file-name">No file loaded</div>
|
||
</section>
|
||
|
||
<section class="panel-section">
|
||
<div class="section-label">Padding</div>
|
||
<div class="control-row">
|
||
<input type="checkbox" id="chk-pad-width-pow2" checked>
|
||
<label for="chk-pad-width-pow2">Pad width to power of two</label>
|
||
</div>
|
||
<div class="control-row">
|
||
<input type="checkbox" id="chk-pad-height-pow2" checked>
|
||
<label for="chk-pad-height-pow2">Pad height to power of two</label>
|
||
</div>
|
||
<div class="control-row">
|
||
<input type="checkbox" id="chk-min-width-4" checked>
|
||
<label for="chk-min-width-4">Ensure minimum width (4 px)</label>
|
||
</div>
|
||
<div class="control-row">
|
||
<input type="checkbox" id="chk-min-height-4" checked>
|
||
<label for="chk-min-height-4">Ensure minimum height (4 px)</label>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="panel-section">
|
||
<div class="section-label">Preview</div>
|
||
|
||
<div class="control-row">
|
||
<label for="scale-input">Scale</label>
|
||
<input type="number" id="scale-input" min="1" max="10" value="1">
|
||
<span class="unit">×</span>
|
||
</div>
|
||
|
||
<div class="section-label">Background</div>
|
||
|
||
<div class="bg-swatches" id="bg-swatches">
|
||
<button class="bg-swatch active" data-bg="grid" title="Transparent (grid)">
|
||
<svg width="26" height="26" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg">
|
||
<rect width="13" height="13" fill="#c8c8c8"/>
|
||
<rect x="13" width="13" height="13" fill="#fff"/>
|
||
<rect y="13" width="13" height="13" fill="#fff"/>
|
||
<rect x="13" y="13" width="13" height="13" fill="#c8c8c8"/>
|
||
</svg>
|
||
</button>
|
||
<button class="bg-swatch" data-bg="#ffffff" title="White" style="background:#ffffff"></button>
|
||
<button class="bg-swatch" data-bg="#000000" title="Black" style="background:#000000"></button>
|
||
<button class="bg-swatch" data-bg="#ff00ff" title="Magenta" style="background:#ff00ff"></button>
|
||
<button class="bg-swatch" data-bg="#00ff00" title="Green" style="background:#00ff00"></button>
|
||
<button class="bg-swatch" data-bg="#ff0000" title="Red" style="background:#ff0000"></button>
|
||
<button class="bg-swatch" data-bg="#0000ff" title="Blue" style="background:#0000ff"></button>
|
||
<button class="bg-swatch" data-bg="#ffff00" title="Yellow" style="background:#ffff00"></button>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="panel-section" id="info-section" hidden>
|
||
<div class="section-label">Info</div>
|
||
<table class="info-table">
|
||
<tr><td>File</td><td id="info-filename">N/A</td></tr>
|
||
<tr><td>Input</td><td id="info-input-size">N/A</td></tr>
|
||
<tr><td>Output</td><td id="info-output-size">N/A</td></tr>
|
||
<tr><td>DTF</td><td id="info-dtf-size">N/A</td></tr>
|
||
</table>
|
||
</section>
|
||
|
||
<section class="panel-section">
|
||
<div class="section-label">Export</div>
|
||
<select id="format-select">
|
||
<option value="1">Alpha (0x01)</option>
|
||
<option value="3">RGB (0x03)</option>
|
||
<option value="4" selected>RGBA (0x04)</option>
|
||
</select>
|
||
<button class="btn btn-primary" id="btn-dtf" disabled>Download .dtf</button>
|
||
<button class="btn" id="btn-png" disabled>Download .png</button>
|
||
</section>
|
||
|
||
</aside>
|
||
|
||
<!-- ─── Preview ───────────────────────────────────────────────────── -->
|
||
<div class="tool-preview" id="preview-area">
|
||
<div class="preview-empty" id="preview-empty">Load an image or .dtf file to get started</div>
|
||
<div class="preview-scroll" id="preview-scroll" hidden>
|
||
<canvas id="canvas"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</main>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/pngjs@6.0.0/browser.js"></script>
|
||
<script src="/common/dtf.js"></script>
|
||
<script src="/common/png.js"></script>
|
||
<script src="/texture-padder/texture-padder.js"></script>
|
||
</body>
|
||
</html>
|