diff options
Diffstat (limited to 'js/pixel-art/pixel/index.html')
| -rw-r--r-- | js/pixel-art/pixel/index.html | 187 |
1 files changed, 157 insertions, 30 deletions
diff --git a/js/pixel-art/pixel/index.html b/js/pixel-art/pixel/index.html index 91f1813..7e3df56 100644 --- a/js/pixel-art/pixel/index.html +++ b/js/pixel-art/pixel/index.html @@ -2,7 +2,7 @@ <html lang="en"> <head> <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <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> @@ -12,74 +12,201 @@ overflow: hidden; background-color: teal; } + button { - padding: 4px 10px; - font-size: 16px; + 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: absolute; - top: 10px; - right: 10px; + position: fixed; + top: 0.625rem; + right: 0.625rem; background-color: beige; - padding: 10px; + padding: 0.5rem; border: 1px solid #ccc; - border-radius: 5px; - width: 150px; + 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 label, #palette input, #palette button { display: block; - margin-bottom: 10px; + margin-bottom: 0.75rem; width: 100%; } .color-history { display: flex; flex-wrap: wrap; + margin-top: 0.625rem; } .color-history div { - width: 20px; - height: 20px; + width: 1.25rem; + height: 1.25rem; border: 1px solid #000; cursor: pointer; - margin-right: 5px; - margin-bottom: 5px; + margin-right: 0.3125rem; + margin-bottom: 0.3125rem; } - .color-history { + .zoom-controls { display: flex; - margin-top: 10px; + gap: 0.3125rem; + margin-top: 0.625rem; + justify-content: space-between; + width: 100%; } - .color-history div { - width: 20px; - height: 20px; - border: 1px solid #000; - cursor: pointer; - margin-right: 5px; + + .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"> - <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> + <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="resetBtn">Reset</button> - <!--<input type="file" id="importBtn" accept="image/png">--> + <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> |