pixel/pixelserver2
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changes needed to adapt to new environment

Browse Source
This commit is contained in:
lounge
2026-01-27 22:42:37 +01:00
parent 690b4ebd3c
commit a714bd9d76
7 changed files with 318 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
html/draw.html
View File

@@ -13,8 +13,10 @@
--header-color: #1a202c;
--subheader-color: #718096;
--toolbar-bg: #ffffff;
--button-bg: #e53e3e;
--button-hover-bg: #c53030;
--button-red-bg: #e53e3e;
--button-red-hover-bg: #c53030;
--button-blue-bg: #3b82f6;
--button-blue-hover-bg: #3167bf;
--swatch-border: #e2e8f0;
--active-swatch-border: #3b82f6;
--input-bg: #f7fafc;
@@ -154,9 +156,8 @@
color: var(--text-color);
}
#clearCanvas {
.control-group button {
padding: 0.6rem 1rem;
background-color: var(--button-bg);
color: white;
border: none;
border-radius: 0.5rem;
@@ -165,8 +166,20 @@
transition: background-color 0.2s ease;
}
#clearCanvas {
background-color: var(--button-red-bg);
}
#clearCanvas:hover {
background-color: var(--button-hover-bg);
background-color: var(--button-red-hover-bg);
}
#saveCanvas {
background-color: var(--button-blue-bg);
}
#saveCanvas:hover {
background-color: var(--button-blue-hover-bg);
}
#grid-container {
@@ -191,7 +204,7 @@
<div class="main-container">
<header>
<h1>Pixel Art Canvas</h1>
<p>Click and drag to paint. Your changes are live.</p>
<p>Click and drag to paint. Your changes are live. <a href="gallery.html">Gallery</a></p>
</header>
<div class="toolbar">
@@ -210,6 +223,7 @@
</div>
<div class="control-group">
<button id="clearCanvas">Clear</button>
<button id="saveCanvas">Save</button>
</div>
</div>
@@ -224,14 +238,16 @@
const paletteContainer = document.getElementById('color-palette');
const brushSizeSelect = document.getElementById('brushSize');
const clearCanvasBtn = document.getElementById('clearCanvas');
const saveCanvasBtn = document.getElementById('saveCanvas');
// --- Grid Configuration ---
const GRID_ROWS = 40;
const GRID_COLS = 80;
const DEFAULT_COLOR = '#ffffff';
const PRESET_COLORS = [
'#ffffff', '#c0c0c0', '#ff0000', '#ffa500', '#ffff00',
'#008000', '#0000ff', '#4b0082', '#ee82ee', '#000000'
'#ffffff', '#c0c0c0', '#ff0000', '#ffa500',
'#ffff00', '#008000', '#0000ff', '#4b0082',
'#ee82ee', '#b5651d', '#000000',
];
// --- State Management ---
@@ -414,6 +430,12 @@
}))
});
saveCanvasBtn.addEventListener('click', async () => {
await fetch("/save_frame").then((res) => {
// if (res.ok) ...
});
});
// --- Initial Load ---
initializePalette();
initializeGrid();