52 lines
2.0 KiB
HTML
Executable File
52 lines
2.0 KiB
HTML
Executable File
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>WebSocket MUD</title>
|
||
<link rel="stylesheet" href="progen.scss" />
|
||
</head>
|
||
<body>
|
||
<div class="editor-container">
|
||
<h1>9×9 Pixel Art Editor</h1>
|
||
<div class="grid-container" id="gridContainer" onmouseleave="painter.updatePreview()">
|
||
<!-- Pixels will be generated by JavaScript -->
|
||
</div>
|
||
<div class="status" id="status">Click a pixel to start drawing</div>
|
||
</div>
|
||
|
||
<div class="controls-panel">
|
||
<div class="color-picker-section">
|
||
<h3>Color Palette</h3>
|
||
<div class="color-palette" id="colorPalette">
|
||
<!-- Color swatches will be generated -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tools">
|
||
<div class="tool-group">
|
||
<h3>Tools</h3>
|
||
<button id="drawBtn" class="active" onclick="painter.setTool('draw')">Draw</button>
|
||
<button id="fillBtn" onclick="painter.setTool('fill')">Fill</button>
|
||
</div>
|
||
|
||
<div class="tool-group">
|
||
<button onclick="painter.reset()">Reset</button>
|
||
<button onclick="painter.randomFill()">Random Fill</button>
|
||
<button onclick="painter.invertColors()">Invert</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="export-section">
|
||
<div class="preview" id="preview"></div>
|
||
<button onclick="painter.exportAsImage()">Export png</button>
|
||
<button onclick="painter.exportAsData()">Export json</button>
|
||
<button onclick="painter.importData()">Import json</button>
|
||
<button onclick="painter.waveFunction()">WaifuCollapse</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script type="module" src="progen.js"></script>
|
||
</body>
|
||
</html>
|