1-Bit Bitmap Editor

\n \n {pixels.map((pixel, index) => (\n \n ))}\n

\n setSize(Number(e.target.value))}\n >\n {SIZES.map((s) => (\n \n ))}\n \n

\n \n \n

\n setImageName(e.target.value)}\n placeholder=\"Image name\"\n />\n \n

\n {\n if (e.target.value) {\n loadImage(e.target.value);\n e.target.value = \"\";\n }\n }}\n >\n \n {savedImages.map((name) => (\n \n ))}\n \n {\n if (e.target.value) {\n deleteImage(e.target.value);\n e.target.value = \"\";\n }\n }}\n >\n \n {savedImages.map((name) => (\n \n ))}\n \n

\n \n

\n \n View Source\n \n \n {showSettings && (\n

Settings

\n \n Default Image Name:\n updateSettings({ defaultName: e.target.value })}\n />\n

\n Use <d> for a random digit, <word> for a random word, and{\" \"}\n <date> for the current date.\n

\n \n \n Color Scheme:\n updateSettings({ colorScheme: e.target.value })}\n >\n \n \n \n \n \n \n \n

\n )}\n \n );\n}\n\nfunction client() {\n try {\n const root = createRoot(document.getElementById(\"root\"));\n root.render(\n \n \n ,\n );\n } catch (error) {\n console.error(\"An error occurred while rendering the app:\", error);\n }\n}\n\nif (typeof document !== \"undefined\") {\n try {\n client();\n } catch (error) {\n console.error(\"An error occurred in the client code:\", error);\n }\n}\n\nasync function server(request: Request): Promise {\n return new Response(\n `\n \n \n \n \n \n 1-Bit Bitmap Editor\n \n \n \n \n

\n \n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}\n\nconst css = `\n:root {\n --bg-color: #000;\n --text-color: #0f0;\n --border-color: #0f0;\n --shadow-color: #0f0;\n}\n\nbody {\n font-family: 'Press Start 2P', cursive;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n margin: 0;\n padding: 20px;\n box-sizing: border-box;\n background-color: var(--bg-color);\n color: var(--text-color);\n}\n\n.container {\n text-align: center;\n max-width: 100%;\n}\n\n.retro-border {\n border: 4px solid var(--border-color);\n padding: 20px;\n background-color: var(--bg-color);\n box-shadow: 0 0 10px var(--shadow-color), 0 0 20px var(--shadow-color), 0 0 30px var(--shadow-color);\n}\n\nh1 {\n margin-bottom: 20px;\n font-size: 24px;\n text-shadow: 2px 2px var(--shadow-color);\n}\n\n.canvas {\n display: grid;\n gap: 1px;\n margin: 0 auto 20px;\n border: 2px solid var(--border-color);\n background-color: var(--bg-color);\n user-select: none;\n touch-action: none;\n overflow: hidden;\n}\n\n.pixel {\n width: 100%;\n height: 100%;\n background-color: var(--bg-color);\n border: 1px solid var(--border-color);\n}\n\n.pixel.active {\n background-color: var(--text-color);\n box-shadow: 0 0 2px var(--shadow-color), 0 0 4px var(--shadow-color);\n}\n\n.controls {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.control-group {\n display: flex;\n justify-content: center;\n gap: 10px;\n margin-bottom: 10px;\n}\n\n.control-group select,\n.control-group button,\n.control-group input[type=\"text\"] {\n flex: 1;\n min-width: 0;\n}\n\n.control-group input[type=\"text\"] {\n flex: 2;\n}\n\nbutton, select, input[type=\"text\"] {\n padding: 10px;\n font-size: 16px;\n font-family: 'Press Start 2P', cursive;\n background-color: var(--bg-color);\n color: var(--text-color);\n border: 2px solid var(--border-color);\n}\n\nbutton:hover, select:hover {\n background-color: var(--text-color);\n color: var(--bg-color);\n cursor: pointer;\n}\n\nselect {\n appearance: none;\n padding-right: 30px;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%230f0' d='M0 0l4 4 4-4z'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 10px center;\n}\n\n.download-icon {\n display: inline;\n}\n\n.control-group .download-btn {\n flex: 0.2;\n}\n\n.settings-btn {\n margin-top: 10px;\n}\n\n.view-source {\n display: inline-block;\n margin-top: 20px;\n color: var(--text-color);\n text-decoration: none;\n}\n\n.view-source:hover {\n text-decoration: underline;\n text-shadow: 0 0 5px var(--shadow-color);\n}\n\n.modal {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.modal-content {\n background-color: var(--bg-color);\n padding: 20px;\n border: 2px solid var(--border-color);\n box-shadow: 0 0 10px var(--shadow-color);\n max-width: 80%;\n}\n\n.modal-content h2 {\n margin-top: 0;\n}\n\n.modal-content label {\n display: block;\n margin-bottom: 10px;\n}\n\n.modal-content input,\n.modal-content select {\n width: 100%;\n margin-top: 5px;\n}\n\n.help-text {\n font-size: 12px;\n margin-top: 5px;\n}\n\ncode {\n background-color: var(--text-color);\n color: var(--bg-color);\n padding: 2px 4px;\n border-radius: 3px;\n}\n\n@media (max-width: 480px) {\n body {\n padding: 10px;\n }\n\n .retro-border {\n padding: 10px;\n }\n\n h1 {\n font-size: 18px;\n }\n\n .canvas {\n max-width: 100%;\n max-height: 100vw;\n }\n\n .control-group {\n flex-wrap: wrap;\n }\n\n .control-group select,\n .control-group button,\n .control-group input[type=\"text\"] {\n flex-basis: calc(50% - 5px);\n font-size: 12px;\n }\n\n .download-text {\n display: none;\n }\n\n .download-icon {\n display: inline;\n }\n}\n`;\n\nexport default server;",[],[174],"files",[153,172],"counts",{"_185":32,"_186":160,"_187":32,"_188":189},"pulls","branches","forks","envVars",{"_190":32,"_191":32},"count","emptyCount","contents",[],{"_104":154,"_95":99,"_155":156,"_157":-5,"_158":141,"_159":160,"_161":110,"_106":195,"_100":32,"_163":164,"_165":166,"_167":22,"_168":-5,"_98":196},["D",1726352332787],[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":205,"_151":210,"_181":217,"_164":218,"_192":220,"_221":-5,"_222":-5,"_223":-5,"_224":-5,"_225":226},{"_104":105,"_95":96,"_106":206,"_108":-5,"_109":110,"_111":112,"_113":-5,"_114":-5,"_14":115,"_116":117,"_118":110,"_119":-5,"_120":-5,"_121":32,"_16":122,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_23":207,"_135":208,"_138":209,"_150":22},["D",1746194571412],{"_93":94,"_133":134},{"_93":94,"_137":134,"_14":115},{"_100":140,"_95":43,"_104":141,"_142":105,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":96,"_149":94},[211,214],{"_104":154,"_95":99,"_155":156,"_157":-5,"_158":141,"_159":160,"_161":110,"_106":162,"_100":32,"_163":164,"_165":166,"_167":22,"_168":-5,"_169":212,"_98":213},[],[99],{"_104":173,"_95":174,"_155":117,"_157":-5,"_158":141,"_159":101,"_161":22,"_106":175,"_100":176,"_163":177,"_165":178,"_167":22,"_168":-5,"_169":215,"_98":216},[],[174],[211,214],{"_104":154,"_95":99,"_155":156,"_157":-5,"_158":141,"_159":160,"_161":110,"_106":195,"_100":32,"_163":164,"_165":166,"_167":22,"_168":-5,"_98":219},[99],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

chekos

design32x32bitmap