diff options
| author | elioat <elioat@tilde.institute> | 2024-08-22 21:29:39 -0400 |
|---|---|---|
| committer | elioat <elioat@tilde.institute> | 2024-08-22 21:29:39 -0400 |
| commit | 219801d28401d7283bf2e133cc16f0dc80999b49 (patch) | |
| tree | 247d5884332aaa72a4dead877a14643bc6edfd24 /js/pixel-art/pixel/index.html | |
| parent | 8ff754e4de53a227b0d02ac0e9b00e40d5cd49cc (diff) | |
| download | tour-219801d28401d7283bf2e133cc16f0dc80999b49.tar.gz | |
*
Diffstat (limited to 'js/pixel-art/pixel/index.html')
| -rw-r--r-- | js/pixel-art/pixel/index.html | 86 |
1 files changed, 86 insertions, 0 deletions
diff --git a/js/pixel-art/pixel/index.html b/js/pixel-art/pixel/index.html new file mode 100644 index 0000000..91f1813 --- /dev/null +++ b/js/pixel-art/pixel/index.html @@ -0,0 +1,86 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Pixel Pixel Pixel Pixel Pixel Pixel</title> + <meta name="description" content="Draw me a goblin, please."> + <style> + body, html { + margin: 0; + padding: 0; + overflow: hidden; + background-color: teal; + } + button { + padding: 4px 10px; + font-size: 16px; + cursor: pointer; + } + #canvas { + display: block; + } + #palette { + position: absolute; + top: 10px; + right: 10px; + background-color: beige; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + width: 150px; + } + + #palette label, + #palette input, + #palette button { + display: block; + margin-bottom: 10px; + width: 100%; + } + + .color-history { + display: flex; + flex-wrap: wrap; + } + + .color-history div { + width: 20px; + height: 20px; + border: 1px solid #000; + cursor: pointer; + margin-right: 5px; + margin-bottom: 5px; + } + + .color-history { + display: flex; + margin-top: 10px; + } + .color-history div { + width: 20px; + height: 20px; + border: 1px solid #000; + cursor: pointer; + margin-right: 5px; + } + </style> +</head> +<body> + <canvas id="canvas"></canvas> + <div id="palette"> + <label for="gridWidth">Grid Width:</label> + <input type="number" id="gridWidth" value="16" min="1"> + <label for="gridHeight">Grid Height:</label> + <input type="number" id="gridHeight" value="16" min="1"> + <br> + <label for="colorPicker">Select Color:</label> + <input type="color" id="colorPicker" value="#000000"> + <div id="colorHistory" class="color-history"></div> + <button id="exportBtn">Export as PNG</button> + <button id="resetBtn">Reset</button> + <!--<input type="file" id="importBtn" accept="image/png">--> + </div> + <script src="app.js"></script> +</body> +</html> |