diff options
Diffstat (limited to 'js/pixel-art/pixel/index.html')
| -rw-r--r-- | js/pixel-art/pixel/index.html | 213 |
1 files changed, 213 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..7e3df56 --- /dev/null +++ b/js/pixel-art/pixel/index.html @@ -0,0 +1,213 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> + <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: 0.5rem 0.75rem; + font-size: 1rem; + cursor: pointer; + min-height: 2.75rem; + } + + button.reset-btn { + cursor: pointer; + margin: 0; + padding: 0.25rem 0.5rem; + border: none; + background-color: tomato; + color: #fafafa; + min-height: 2rem; + font-size: 0.875rem; + border-radius: 0.25rem; + margin-top: 0.5rem; + } + + #canvas { + display: block; + } + + #palette { + position: fixed; + top: 0.625rem; + right: 0.625rem; + background-color: beige; + padding: 0.5rem; + border: 1px solid #ccc; + border-radius: 0.25rem; + width: 10.625rem; + transition: transform 0.3s ease-out; + max-height: 90vh; + overflow-y: auto; + scrollbar-width: none; + -ms-overflow-style: none; + box-sizing: border-box; + } + + #palette.hidden { + transform: translateX(calc(100% + 1.25rem)); + } + + #palette-toggle { + position: fixed; + top: 1.025rem; + right: 0.025rem; + background-color: beige; + border: 1px solid #ccc; + border-radius: 0.25rem 0 0 0.25rem; + padding: 0.75rem; + cursor: pointer; + z-index: 1000; + display: flex; + align-items: center; + justify-content: center; + transition: transform 0.3s ease-out; + min-width: 2.75rem; + min-height: 2.75rem; + font-size: 1.125rem; + } + + #palette-toggle:not(.hidden) { + transform: translateX(-11.25rem); + } + + #palette input, + #palette button { + display: block; + margin-bottom: 0.75rem; + width: 100%; + } + + .color-history { + display: flex; + flex-wrap: wrap; + margin-top: 0.625rem; + } + + .color-history div { + width: 1.25rem; + height: 1.25rem; + border: 1px solid #000; + cursor: pointer; + margin-right: 0.3125rem; + margin-bottom: 0.3125rem; + } + + .zoom-controls { + display: flex; + gap: 0.3125rem; + margin-top: 0.625rem; + justify-content: space-between; + width: 100%; + } + + .zoom-controls button { + flex: 1; + padding: 0.25rem; + height: 2rem; + display: flex; + align-items: center; + justify-content: center; + font-size: 1rem; + min-height: unset; + width: unset; + } + + .pan-controls { + display: flex; + flex-direction: column; + gap: 0.3125rem; + margin-top: 0.625rem; + align-items: center; + } + + .pan-middle { + display: flex; + gap: 0.3125rem; + width: 100%; + } + + .pan-controls button { + padding: 0.25rem; + width: 2rem; + height: 2rem; + display: flex; + align-items: center; + justify-content: center; + font-size: 1rem; + min-height: unset; + } + + #centerViewBtn { + margin-top: 0.625rem; + } + + @media (max-width: 48rem) { + #palette { + width: 12.5rem; + top: auto; + bottom: 0.625rem; + } + + #palette-toggle { + top: auto; + right: 0.625rem; + bottom: 0.625rem; + } + + #palette-toggle:not(.hidden) { + transform: translateX(-12.5rem); + } + } + </style> +</head> +<body> + <canvas id="canvas"></canvas> + <button id="palette-toggle">☰</button> + <div id="palette"> + <div style="display: flex; gap: 5px; margin-bottom: 10px;"> + <div style="flex: 1;"> + <label for="gridWidth">Width:</label> + <input type="number" id="gridWidth" value="16" min="1" max="100" style="width: 90%;"> + </div> + <div style="flex: 1;"> + <label for="gridHeight">Height:</label> + <input type="number" id="gridHeight" value="16" min="1" max="100" style="width: 90%;"> + </div> + </div> + <label for="colorPicker">Select Color:</label> + <input type="color" id="colorPicker" value="#000000"> + <div id="colorHistory" class="color-history"></div> + <div class="zoom-controls"> + <button id="zoomInBtn">🔍+</button> + <button id="zoomOutBtn">🔍-</button> + </div> + <div class="pan-controls"> + <button id="panUpBtn">⬆️</button> + <div class="pan-middle"> + <button id="panLeftBtn">⬅️</button> + <button id="panRightBtn">➡️</button> + </div> + <button id="panDownBtn">⬇️</button> + </div> + <button id="centerViewBtn">🎯 Center View</button> + <button id="newCanvasBtn">➕ New Canvas</button> + <hr> + <button id="exportBtn">Export as PNG</button> + <button id="saveProjectBtn">Save Project</button> + <button id="loadProjectBtn">Load Project</button> + <button id="resetBtn" class="reset-btn">Reset</button> + </div> + <script src="app.js"></script> +</body> +</html> |