{"html":"

Habit Tracker

\n\n \n \n

\n \n

\n Morning Walk\n \n\n \n \n

\n \n

\n Journaling\n \n\n \n \n

\n \n

\n Plan the day\n \n\n \n \n

\n \n

\n No screen time before bed\n \n

\n","css":".neumorphic-background {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n background-color: #e0e5ec;\n}\n\n.neumorphic-container {\n width: 300px;\n background-color: #e0e5ec;\n border-radius: 20px;\n box-shadow:\n 9px 9px 16px #a3b1c6,\n -9px -9px 16px #ffffff;\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 15px;\n font-family:\n system-ui,\n -apple-system,\n BlinkMacSystemFont,\n \"Segoe UI\",\n Roboto,\n Oxygen,\n Ubuntu,\n Cantarell,\n \"Open Sans\",\n \"Helvetica Neue\",\n sans-serif;\n}\n\n.neumorphic-title {\n font-size: 22px;\n font-weight: 600;\n color: #5a677a;\n margin-bottom: 10px;\n text-align: center;\n}\n\n.neumorphic-label {\n display: flex;\n align-items: center;\n cursor: pointer;\n padding: 12px 15px;\n border-radius: 12px;\n transition: box-shadow 0.3s ease;\n}\n\n.neumorphic-input {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.custom-checkbox {\n width: 24px;\n height: 24px;\n border-radius: 8px;\n margin-right: 15px;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: box-shadow 0.3s ease;\n box-shadow:\n 5px 5px 10px #a3b1c6,\n -5px -5px 10px #ffffff;\n}\n\n.neumorphic-label:hover .custom-checkbox {\n box-shadow:\n 3px 3px 6px #a3b1c6,\n -3px -3px 6px #ffffff;\n}\n\n.checkmark-svg {\n width: 14px;\n height: 14px;\n stroke: #3498db;\n stroke-width: 3;\n stroke-linecap: round;\n stroke-linejoin: round;\n fill: none;\n opacity: 0;\n transition: opacity 0.4s ease;\n}\n\n.neumorphic-text {\n color: #5a677a;\n font-size: 16px;\n transition: color 0.4s ease;\n}\n\n.neumorphic-input:checked + .custom-checkbox {\n box-shadow:\n inset 5px 5px 10px #a3b1c6,\n inset -5px -5px 10px #ffffff;\n}\n\n.neumorphic-input:checked + .custom-checkbox .checkmark-svg {\n opacity: 1;\n}\n\n.neumorphic-input:checked ~ .neumorphic-text {\n color: #9ba8bd;\n}\n"}

warm-vampirebat-45

👁 实时预览

📝 源代码