{"loaderData":{"0":null,"0-3":{"total":7296,"projects":[{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"512672","snapshot":null,"tags":null,"title":"checkbox by catraco","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1653,"cssLen":880,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n \n","css":"/*------ Settings ------*/\n.container {\n --color: #a5a5b0;\n --size: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n cursor: pointer;\n font-size: var(--size);\n user-select: none;\n fill: var(--color);\n}\n\n.container .eye {\n position: absolute;\n animation: keyframes-fill .5s;\n}\n\n.container .eye-slash {\n position: absolute;\n animation: keyframes-fill .5s;\n display: none;\n}\n\n/* ------ On check event ------ */\n.container input:checked ~ .eye {\n display: none;\n}\n\n.container input:checked ~ .eye-slash {\n display: block;\n}\n\n/* ------ Hide the default checkbox ------ */\n.container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n/* ------ Animation ------ */\n@keyframes keyframes-fill {\n 0% {\n transform: scale(0);\n opacity: 0;\n }\n\n 50% {\n transform: scale(1.2);\n }\n}"},{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"b1d6b8","snapshot":null,"tags":null,"title":"checkbox by catraco","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":708,"cssLen":951,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n \n","css":"/*------ Settings ------*/\n.container {\n --color: #a5a5b0;\n --size: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n cursor: pointer;\n font-size: var(--size);\n user-select: none;\n fill: var(--color);\n}\n\n.container .save-regular {\n position: absolute;\n animation: keyframes-fill .5s;\n transform-origin: top;\n}\n\n.container .save-solid {\n position: absolute;\n animation: keyframes-fill .5s;\n display: none;\n transform-origin: top;\n}\n\n/* ------ On check event ------ */\n.container input:checked ~ .save-regular {\n display: none;\n}\n\n.container input:checked ~ .save-solid {\n display: block;\n}\n\n/* ------ Hide the default checkbox ------ */\n.container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n/* ------ Animation ------ */\n@keyframes keyframes-fill {\n 0% {\n transform: scale(0);\n opacity: 0;\n }\n\n 50% {\n transform: scaleY(1.2);\n }\n}"},{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"341caf","snapshot":null,"tags":null,"title":"checkbox by andrew-demchenk0","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":355,"cssLen":433,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n","css":".container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n.container {\n display: block;\n position: relative;\n cursor: pointer;\n user-select: none;\n}\n\n.container svg {\n position: relative;\n top: 0;\n left: 0;\n height: 50px;\n width: 50px;\n transition: all 0.3s;\n fill: #666;\n}\n\n.container svg:hover {\n transform: scale(1.1);\n}\n\n.container input:checked ~ svg {\n fill: #E3474F;\n}\n"},{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"e12220","snapshot":null,"tags":null,"title":"checkbox by TechByElijah","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":145,"cssLen":1596,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n","css":"/* Hide the default checkbox */\n.container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n.container {\n display: inline-block;\n position: relative;\n cursor: pointer;\n font-size: 20px;\n user-select: none;\n width: 24px;\n height: 24px;\n}\n\n /* Create a custom checkbox */\n.checkmark {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n background-color: #fff;\n border-radius: 50%;\n border: 1px solid rgba(255, 255, 255, 0.3);\n transition: background-color 0.3s ease;\n z-index: 1;\n}\n\n.glass-effect {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0);\n height: 14px;\n width: 14px;\n background-color: rgba(255, 255, 255, 0.2);\n border-radius: 50%;\n transition: transform 0.3s ease;\n z-index: 2;\n}\n\n /* When the checkbox is checked, add a blue background */\n.container input:checked ~ .checkmark {\n background-color: #2196F3;\n}\n\n /* Show the glass effect when checked */\n.container input:checked ~ .glass-effect {\n transform: translate(-50%, -50%) scale(1);\n}\n\n /* Create the checkmark/indicator (hidden when not checked) */\n.checkmark:after {\n content: \"\";\n position: absolute;\n display: none;\n}\n\n /* Show the checkmark when checked */\n.container input:checked ~ .checkmark:after {\n display: block;\n}\n\n /* Style the checkmark/indicator */\n.container .checkmark:after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: 5px;\n height: 10px;\n border: solid white;\n border-width: 0 2px 2px 0;\n transform: translate(-50%, -50%) rotate(45deg);\n}"},{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"89c09c","snapshot":null,"tags":null,"title":"checkbox by EddyBel","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":110,"cssLen":1675,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n","css":"/* Hide the default checkbox */\n.container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n.container {\n display: block;\n position: relative;\n cursor: pointer;\n font-size: 20px;\n user-select: none;\n}\n\n.container::before {\n position: absolute;\n left: 0;\n top: 0;\n content: \"\";\n width: 100%;\n height: 100%;\n border-radius: 50%;\n filter: blur(5px);\n background-color: #b899ff;\n background-image: radial-gradient(at 6% 13%, hsla(322,81%,60%,1) 0px, transparent 50%),\nradial-gradient(at 9% 59%, hsla(209,65%,71%,1) 0px, transparent 50%),\nradial-gradient(at 39% 16%, hsla(325,93%,79%,1) 0px, transparent 50%);\n}\n\n/* Create a custom checkbox */\n.checkmark {\n position: relative;\n top: 0;\n left: 0;\n height: 2em;\n width: 2em;\n border-radius: 50%;\n background-color: rgb(255, 255, 255);\n}\n\n/* When the checkbox is checked, add a blue background */\n.container input:checked ~ .checkmark {\n height: 2em;\n width: 2em;\n border-radius: 50%;\n position: relative;\n}\n\n.container input:checked ~ .checkmark::before {\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n margin: auto;\n width: 65%;\n height: 65%;\n content: \"\";\n border-radius: 50%;\n background-color: #ff99f0;\n background-image: radial-gradient(at 86% 29%, hsla(277,65%,76%,1) 0px, transparent 50%),\n radial-gradient(at 13% 20%, hsla(54,73%,71%,1) 0px, transparent 50%),\n radial-gradient(at 76% 0%, hsla(145,64%,69%,1) 0px, transparent 50%);\n animation: animation__checked 600ms normal;\n}\n\n@keyframes animation__checked {\n 0% {\n opacity: 0;\n transform: scale(0.8);\n }\n\n 100% {\n opacity: 100;\n transform: scale(1);\n }\n}"},{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"affd61","snapshot":null,"tags":null,"title":"checkbox by ercnersoy","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":110,"cssLen":1367,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n","css":"/* Hide the default checkbox */\n.container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n.container {\n display: block;\n position: relative;\n cursor: pointer;\n font-size: 20px;\n user-select: none;\n}\n\n/* Create a custom checkbox */\n.checkmark {\n position: relative;\n top: 0;\n left: 0;\n height: 1.4em;\n width: 1.4em;\n border: 2px solid #2196F3;\n border-radius: 1rem 0rem 1rem;\n transform: rotate(45deg);\n transition: all .5s ease-in-out;\n}\n\n/* When the checkbox is checked, add a blue background */\n.container input:checked ~ .checkmark {\n box-shadow: 0px 0px 40px 5px #2196F3;\n border-radius: 1rem 0rem 1rem;\n background-color: #2195f31f;\n}\n\n/* Create the checkmark/indicator (hidden when not checked) */\n.checkmark:after {\n content: \"\";\n position: absolute;\n display: none;\n}\n\n/* Show the checkmark when checked */\n.container input:checked ~ .checkmark:after {\n display: block;\n}\n\n/* Style the checkmark/indicator */\n.container .checkmark:after {\n left: 0.35em;\n top: 0.20em;\n width: 0.25em;\n height: 0.5em;\n border: solid #2196F3;\n border-width: 0 0.15em 0.15em 0;\n transform: rotate(-5deg);\n animation: upAnimate 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);\n}\n\n@keyframes upAnimate {\n from {\n transform: translate(-20px, -20px) rotate(-5deg);\n opacity: 0;\n }\n\n to {\n transform: translate(0, 0) rotate(-5deg);\n opacity: 1;\n }\n}"},{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"67f615","snapshot":null,"tags":null,"title":"checkbox by ahmed150up","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":210,"cssLen":379,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n \n\n","css":"input[type=\"checkbox\"] {\n display: none;\n}\n\nlabel svg {\n width: 44px;\n height: 44px;\n fill: none;\n stroke: #000;\n stroke-width: 2px;\n}\n\ninput[type=\"checkbox\"]:checked + label svg {\n fill: #FFC107;\n animation: pop_42 0.5s ease-out;\n}\n\n@keyframes pop_42 {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(1.5);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n"},{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"4279bb","snapshot":null,"tags":null,"title":"checkbox by catraco","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1628,"cssLen":1399,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n \n \n \n

","css":".heart-container {\n --heart-color: rgb(91, 255, 195);\n position: relative;\n width: 50px;\n height: 50px;\n transition: .3s;\n}\n\n.heart-container .checkbox {\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: 0;\n z-index: 20;\n cursor: pointer;\n}\n\n.heart-container .svg-container {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.heart-container .svg-outline,\n .heart-container .svg-filled {\n fill: var(--heart-color);\n position: absolute;\n}\n\n.heart-container .svg-filled {\n animation: keyframes-svg-filled 1s;\n display: none;\n}\n\n.heart-container .svg-celebrate {\n position: absolute;\n animation: keyframes-svg-celebrate .5s;\n animation-fill-mode: forwards;\n display: none;\n stroke: var(--heart-color);\n fill: var(--heart-color);\n stroke-width: 2px;\n}\n\n.heart-container .checkbox:checked~.svg-container .svg-filled {\n display: block\n}\n\n.heart-container .checkbox:checked~.svg-container .svg-celebrate {\n display: block\n}\n\n@keyframes keyframes-svg-filled {\n 0% {\n transform: scale(0);\n }\n\n 25% {\n transform: scale(1.2);\n }\n\n 50% {\n transform: scale(1);\n filter: brightness(1.5);\n }\n}\n\n@keyframes keyframes-svg-celebrate {\n 0% {\n transform: scale(0);\n }\n\n 50% {\n opacity: 1;\n filter: brightness(1.5);\n }\n\n 100% {\n transform: scale(1.4);\n opacity: 0;\n display: none;\n }\n}"},{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"05a763","snapshot":null,"tags":null,"title":"checkbox by aadium","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":831,"cssLen":1007,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n \n

\n \n \n

\n \n

","css":".container {\n width: 120px;\n height: 120px;\n position: relative;\n border-radius: 50%;\n}\n\n.play-btn {\n position: absolute;\n appearance: none;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background: conic-gradient(#ff6347, #ff6347);\n cursor: pointer;\n outline: none;\n}\n\n.play-btn::before {\n content: \"\";\n position: absolute;\n width: 93%;\n height: 93%;\n background-color: #000;\n border-radius: 50%;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n}\n\n.play-btn:checked {\n animation: borderAnimate 700ms ease-in-out 1;\n animation-fill-mode: forwards;\n}\n\n@keyframes borderAnimate {\n 0% {\n transform: rotate(0);\n background: conic-gradient(#ff6347, transparent 20%);\n }\n\n 80% {\n background: conic-gradient(#ff6347, transparent 90%);\n }\n\n 100% {\n transform: rotate(360deg);\n background: conic-gradient(#ff6347, #ff6347);\n }\n}\n\n.play-icon {\n position: absolute;\n width: 40px;\n height: 40px;\n left: 60%;\n top: 50%;\n background-color: #ff6347;\n transform: translate(-60%, -50%) rotate(90deg);\n clip-path: polygon(50% 15%, 0% 100%, 100% 100%);\n transition: all 400ms ease-in-out;\n cursor: pointer;\n}\n\n.play-btn:checked + .play-icon {\n clip-path: polygon(0 100%, 0% 100%, 100% 100%);\n}\n\n.pause-icon {\n position: absolute;\n width: 40px;\n height: 40px;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n cursor: pointer;\n}\n\n.pause-icon::before {\n content: \"\";\n position: absolute;\n width: 0%;\n height: 100%;\n background-color: #ff6347;\n left: 0;\n}\n\n.pause-icon::after {\n content: \"\";\n position: absolute;\n width: 0;\n height: 100%;\n background-color: #ff6347;\n right: 0;\n}\n\n.play-btn:checked ~ .pause-icon::before {\n animation: reveal 300ms ease-in-out 350ms 1;\n animation-fill-mode: forwards;\n}\n\n.play-btn:checked ~ .pause-icon::after {\n animation: reveal 300ms ease-in-out 600ms 1;\n animation-fill-mode: forwards;\n}\n\n@keyframes reveal {\n 0% {\n width: 0;\n }\n\n 100% {\n width: 35%;\n }\n}"},{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"46ed61","snapshot":null,"tags":null,"title":"checkbox by Javierrocadev","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":835,"cssLen":3662,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n\n","css":".relative{position:relative}.left-2{left:0.5rem}.top-2{top:0.5rem}.z-20{z-index:20}.flex{display:flex}.hidden{display:none}.h-12{height:3rem}.h-8{height:2rem}.w-12{width:3rem}.w-8{width:2rem}.scale-0{--tw-scale-x:0;--tw-scale-y:0;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.overflow-hidden{overflow:hidden}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.border{border-width:1px}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.bg-gradient-to-tr{background-image:linear-gradient(to top right, var(--tw-gradient-stops))}.from-emerald-800{--tw-gradient-from:#065f46 var(--tw-gradient-from-position);--tw-gradient-to:rgb(6 95 70 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-emerald-700{--tw-gradient-to:rgb(4 120 87 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #047857 var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-emerald-500{--tw-gradient-to:#10b981 var(--tw-gradient-to-position)}.opacity-0{opacity:0}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.before\\:absolute::before{content:var(--tw-content);position:absolute}.before\\:right-0::before{content:var(--tw-content);right:0px}.before\\:h-8::before{content:var(--tw-content);height:2rem}.before\\:w-8::before{content:var(--tw-content);width:2rem}.before\\:rounded-full::before{content:var(--tw-content);border-radius:9999px}.before\\:bg-violet-500::before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(139 92 246 / var(--tw-bg-opacity))}.before\\:blur-sm::before{content:var(--tw-content);--tw-blur:blur(4px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.after\\:absolute::after{content:var(--tw-content);position:absolute}.after\\:bottom-1::after{content:var(--tw-content);bottom:0.25rem}.after\\:left-1::after{content:var(--tw-content);left:0.25rem}.after\\:z-10::after{content:var(--tw-content);z-index:10}.after\\:h-4::after{content:var(--tw-content);height:1rem}.after\\:w-4::after{content:var(--tw-content);width:1rem}.after\\:rounded-full::after{content:var(--tw-content);border-radius:9999px}.after\\:bg-rose-300::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(253 164 175 / var(--tw-bg-opacity))}.after\\:blur-sm::after{content:var(--tw-content);--tw-blur:blur(4px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.peer:checked ~ .peer-checked\\:scale-100{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:checked ~ .peer-checked\\:bg-gradient-to-tr{background-image:linear-gradient(to top right, var(--tw-gradient-stops))}.peer:checked ~ .peer-checked\\:opacity-100{opacity:1}.peer:checked ~ .peer-checked\\:transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.peer:checked ~ .peer-checked\\:duration-300{transition-duration:300ms}"}]}},"actionData":null,"errors":null}