简易像素画板

Pixel Art Maker

\n\n

\n \n

网格设置

\n 宽度:\n \n

\n 高度:\n \n

\n 像素大小:\n \n

\n \n

\n\n

颜色选择

\n 颜色:\n \n

\n 橡皮擦:\n \n

\n\n

对称模式

\n \n 无对称\n

\n \n 水平对称\n

\n \n 垂直对称\n

\n \n 中心对称\n

\n\n

工具

\n \n \n

\n\n \n

画布

\n\n \n

动画帧

\n \n \n

\n 帧延迟 (毫秒):\n \n

\n \n \n

\n\n

预览

添加帧后预览

\n\n \n

\n\n \n \n \n \n\n",[],[99,170],{"_104":178,"_95":179,"_152":180,"_154":153,"_155":138,"_156":101,"_158":159,"_106":181,"_100":32,"_161":173,"_163":182,"_164":22,"_165":-5,"_166":183,"_98":184},"70b28270-346e-11f0-9ade-9e149126039e","styles.css","70b2832e-346e-11f0-9ade-9e149126039e",["D",1747630939021],"/* Custom styles for Pixel Art Maker */\n\n/* Pixel grid styling */\n#pixelGrid {\n display: grid;\n grid-template-columns: repeat(var(--grid-width, 16), 1fr);\n grid-template-rows: repeat(var(--grid-height, 16), 1fr);\n gap: 1px;\n background-color: #f0f0f0;\n}\n\n.pixel {\n width: var(--pixel-size, 20px);\n height: var(--pixel-size, 20px);\n background-color: white;\n cursor: pointer;\n transition: background-color 0.1s;\n}\n\n.pixel:hover {\n opacity: 0.8;\n}\n\n/* Color presets styling */\n.color-preset {\n width: 100%;\n height: 30px;\n border-radius: 4px;\n cursor: pointer;\n transition: transform 0.1s;\n}\n\n.color-preset:hover {\n transform: scale(1.05);\n}\n\n.color-preset.selected {\n box-shadow: 0 0 0 2px #4f46e5, 0 0 0 4px rgba(79, 70, 229, 0.3);\n}\n\n/* Frame thumbnails */\n.frame-thumbnail {\n position: relative;\n border: 1px solid #e5e7eb;\n border-radius: 4px;\n overflow: hidden;\n cursor: pointer;\n}\n\n.frame-thumbnail.active {\n border-color: #4f46e5;\n box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.3);\n}\n\n.frame-thumbnail .delete-frame {\n position: absolute;\n top: 2px;\n right: 2px;\n width: 16px;\n height: 16px;\n background-color: rgba(239, 68, 68, 0.8);\n color: white;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 10px;\n opacity: 0;\n transition: opacity 0.2s;\n}\n\n.frame-thumbnail:hover .delete-frame {\n opacity: 1;\n}\n\n.frame-number {\n position: absolute;\n bottom: 2px;\n left: 2px;\n background-color: rgba(0, 0, 0, 0.5);\n color: white;\n font-size: 10px;\n padding: 1px 4px;\n border-radius: 2px;\n}\n\n/* Animation preview */\n#animationPreview {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Responsive adjustments */\n@media (max-width: 1024px) {\n .container {\n padding: 1rem;\n }\n}\n\n@media (max-width: 768px) {\n #pixelGrid {\n max-width: 100%;\n overflow: auto;\n }\n}",[],[99,179],[99],{"_104":187,"_95":188,"_152":189,"_154":-5,"_155":138,"_156":190,"_158":159,"_106":191,"_100":192,"_161":193,"_163":194,"_164":22,"_165":-5,"_166":195,"_98":196},"52e6a1c2-346e-11f0-a981-9e149126039e","index.ts","511952c2-346e-11f0-8b9a-9e149126039e",2,["D",1747630889025],1,"http","import { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport default async function(req: Request) {\n const url = new URL(req.url);\n const path = url.pathname;\n \n // Serve the main HTML file for the root path\n if (path === \"/\" || path === \"\") {\n return serveFile(\"/frontend/index.html\", import.meta.url);\n }\n \n // Serve other static files\n if (path.startsWith(\"/frontend/\")) {\n return serveFile(path, import.meta.url);\n }\n \n // 404 for anything else\n return new Response(\"Not Found\", { status: 404 });\n}",[],[188],"files",[150,168,177,186],"counts",{"_201":32,"_202":192,"_203":32,"_204":32},"pulls","branches","forks","envVars","contents",[207,210],{"_104":169,"_95":170,"_152":171,"_154":153,"_155":138,"_156":157,"_158":159,"_106":208,"_100":32,"_161":173,"_163":174,"_164":22,"_165":-5,"_98":209},["D",1747630922368],[99,170],{"_104":178,"_95":179,"_152":180,"_154":153,"_155":138,"_156":101,"_158":159,"_106":211,"_100":32,"_161":173,"_163":182,"_164":22,"_165":-5,"_98":212},["D",1747630939021],[99,179],{"_104":151,"_95":99,"_152":153,"_154":-5,"_155":138,"_156":157,"_158":159,"_106":214,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":215},["D",1747630922368],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":224,"_148":229,"_197":242,"_173":243,"_205":245,"_250":-5,"_251":22,"_252":-5,"_253":-5,"_254":-5,"_255":256},{"_104":105,"_95":96,"_106":225,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":226,"_132":227,"_135":228,"_147":22},["D",1747630827939],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_100":137,"_95":43,"_104":138,"_139":105,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":96,"_146":94},[230,239],{"_104":151,"_95":99,"_152":153,"_154":-5,"_155":138,"_156":157,"_158":159,"_106":160,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":231,"_98":238},[232,235],{"_104":169,"_95":170,"_152":171,"_154":153,"_155":138,"_156":157,"_158":159,"_106":172,"_100":32,"_161":173,"_163":174,"_164":22,"_165":-5,"_166":233,"_98":234},[],[99,170],{"_104":178,"_95":179,"_152":180,"_154":153,"_155":138,"_156":101,"_158":159,"_106":181,"_100":32,"_161":173,"_163":182,"_164":22,"_165":-5,"_166":236,"_98":237},[],[99,179],[99],{"_104":187,"_95":188,"_152":189,"_154":-5,"_155":138,"_156":190,"_158":159,"_106":191,"_100":192,"_161":193,"_163":194,"_164":22,"_165":-5,"_166":240,"_98":241},[],[188],[230,232,235,239],{"_104":151,"_95":99,"_152":153,"_154":-5,"_155":138,"_156":157,"_158":159,"_106":214,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":244},[99],[246,248],{"_104":169,"_95":170,"_152":171,"_154":153,"_155":138,"_156":157,"_158":159,"_106":208,"_100":32,"_161":173,"_163":174,"_164":22,"_165":-5,"_98":247},[99,170],{"_104":178,"_95":179,"_152":180,"_154":153,"_155":138,"_156":101,"_158":159,"_106":211,"_100":32,"_161":173,"_163":182,"_164":22,"_165":-5,"_98":249},[99,179],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]