CZARKOWY EDYTOR DAT NA OBRAZKACH

\n \n

\n setTextColor(e.target.value)} title=\"Text Color\" />\n setFontSize(Number(e.target.value))} min=\"1\" max=\"100\" title=\"Font Size\" />\n \n \n View Source\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nasync function server(request: Request): Promise {\n return new Response(`\n \n \n CZARKOWY EDYTOR DAT NA OBRAZKACH\n \n \n \n \n

\n \n \n \n `, {\n headers: { \"Content-Type\": \"text/html\" },\n });\n}\n\nconst css = `\nbody {\n font-family: 'Caveat', cursive;\n margin: 0;\n padding: 0;\n height: 100vh;\n background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\n color: #333;\n}\n\n.app-container {\n display: flex;\n flex-direction: column;\n height: 100vh;\n padding: 20px;\n box-sizing: border-box;\n}\n\nh1 {\n text-align: center;\n font-size: 2.5em;\n margin-bottom: 20px;\n color: #4a4a4a;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.1);\n}\n\n.canvas-container {\n flex-grow: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: auto;\n background: rgba(255, 255, 255, 0.8);\n border-radius: 10px;\n box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);\n}\n\ncanvas {\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\ncanvas:hover {\n box-shadow: 0 6px 8px rgba(0,0,0,0.15);\n}\n\ncanvas.grabbing {\n cursor: grabbing;\n}\n\n.controls {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 20px;\n background: rgba(255, 255, 255, 0.8);\n border-radius: 10px;\n margin-top: 20px;\n box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);\n}\n\nbutton {\n font-family: 'Caveat', cursive;\n padding: 10px 20px;\n font-size: 20px;\n background-color: #4CAF50;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: all 0.3s;\n box-shadow: 0 4px #45a049;\n}\n\nbutton:hover {\n background-color: #45a049;\n transform: translateY(-2px);\n box-shadow: 0 6px #357a38;\n}\n\nbutton:active {\n background-color: #45a049;\n box-shadow: 0 2px #357a38;\n transform: translateY(2px);\n}\n\nbutton:disabled {\n background-color: #cccccc;\n color: #666666;\n cursor: not-allowed;\n box-shadow: none;\n}\n\ninput, select {\n font-family: 'Caveat', cursive;\n font-size: 16px;\n padding: 5px 10px;\n border: 2px solid #4CAF50;\n border-radius: 5px;\n background-color: white;\n transition: all 0.3s ease;\n}\n\ninput:focus, select:focus {\n outline: none;\n box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);\n}\n\ninput[type=\"color\"] {\n -webkit-appearance: none;\n width: 40px;\n height: 40px;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n}\n\ninput[type=\"color\"]::-webkit-color-swatch-wrapper {\n padding: 0;\n}\n\ninput[type=\"color\"]::-webkit-color-swatch {\n border: none;\n border-radius: 50%;\n}\n\n.source-link {\n font-family: 'Caveat', cursive;\n font-size: 18px;\n color: #4CAF50;\n text-decoration: none;\n transition: color 0.3s ease;\n}\n\n.source-link:hover {\n color: #45a049;\n text-decoration: underline;\n}\n\n@media (max-width: 768px) {\n .controls {\n flex-direction: column;\n gap: 10px;\n }\n\n input, select, button {\n width: 100%;\n }\n}\n`;\n\nexport default server;","deleted","label",[99],"permalink","https://www.val.town/x/hasparus/czarkowyEdytorDat/code/main.tsx","extension","actionData","errors"]