{"loaderData":{"0":null,"0-3":{"total":7283,"projects":[{"created":"2024-01-22T17:03:58.000Z","isPrivate":0,"projectId":"906fdc","snapshot":null,"tags":null,"title":"checkbox by gharsh11032000","updated":"2024-01-22T17:03:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":110,"cssLen":1160,"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.3em;\n width: 1.3em;\n border: 2px solid #414141;\n transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n/* When the checkbox is checked */\n.container input:checked ~ .checkmark {\n background: #0974f1;\n border-color: #0974f1;\n filter: drop-shadow(5px 5px);\n}\n\n/* Create the checkmark/indicator (hidden when not checked) */\n.checkmark:after {\n content: \"\";\n position: absolute;\n}\n\n.container .checkmark:after {\n inset: 0;\n margin: auto;\n width: 0.5em;\n height: 0.5em;\n background-color: #414141;\n border-width: 0 0.15em 0.15em 0;\n}\n\n/* Show the checkmark when checked */\n.container input:checked ~ .checkmark:after {\n width: 0.25em;\n height: 0.5em;\n border: solid #414141;\n border-width: 0 0.15em 0.15em 0;\n border-color: white;\n background-color: transparent;\n transform: rotate(45deg);\n}\n\n"},{"created":"2024-01-22T17:03:58.000Z","isPrivate":0,"projectId":"ff5e96","snapshot":null,"tags":null,"title":"checkbox by Smit-Prajapati","updated":"2024-01-22T17:03:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":41,"cssLen":793,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".checkbox {\n appearance: none;\n width: 30px;\n aspect-ratio: 1;\n border-radius: 8px;\n border: 2px solid black;\n position: relative;\n transition: all 0.2s ease-in-out;\n}\n\n.checkbox::before {\n font-family: \"Quicksand\", sans-serif;\n position: absolute;\n bottom: -4px;\n left: 1px;\n content: \"✔\";\n font-size: 40px;\n color: rgb(255, 153, 0);\n transform: scale(0);\n transition: all 0.2s ease-in-out;\n}\n\n.checkbox:checked::before {\n animation: zoom 0.5s ease-in-out;\n transform: scale(1);\n}\n\n@keyframes zoom {\n 0% {\n transform: scale(0);\n }\n\n 20% {\n transform: scale(1.5);\n }\n\n 40% {\n transform: scale(0.5);\n }\n\n 50% {\n transform: scale(1);\n }\n\n 70% {\n transform: scale(1.2);\n }\n\n 90% {\n transform: scale(0.8);\n }\n\n 100% {\n transform: scale(1);\n }\n}"},{"created":"2024-01-22T17:03:58.000Z","isPrivate":0,"projectId":"1d9abd","snapshot":null,"tags":null,"title":"checkbox by Praashoo7","updated":"2024-01-22T17:03:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1318,"cssLen":1605,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n \n

Liked!

\n","css":"/* Hide the default checkbox */\n.container input {\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: 3em;\n width: 3em;\n background-color: #171717;\n border-radius: 10px;\n transition: .2s ease-in-out;\n z-index: 2;\n}\n\n.like {\n position: relative;\n font-size: 0.8em;\n top: -3.5em;\n text-align: center;\n z-index: -1;\n}\n\n.icon {\n margin: 0.2em;\n fill: white;\n transition: .4s ease-in-out;\n}\n\n.checkmark:hover {\n background-color: white;\n}\n\n.checkmark:hover .icon {\n fill: black;\n transform: rotate(-8deg);\n transform-origin: bottom left;\n}\n\n/* When the checkbox is checked, add a blue background */\n.container input:checked ~ .checkmark {\n background-color: limegreen;\n}\n\n.container input:checked ~ .like {\n color: white;\n animation: 0.6s up_3951;\n}\n\n.container input:checked ~ .checkmark .icon {\n fill: white;\n transform: none;\n animation: 0.5s jump_3951;\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@keyframes up_3951 {\n 100% {\n transform: translateY(-2em);\n }\n}\n\n@keyframes jump_3951 {\n 50% {\n transform-origin: center;\n transform: translateY(-0.5em) rotate(-8deg);\n }\n\n 100% {\n transform-origin: center;\n transform: translateY(0em);\n }\n}"},{"created":"2024-01-22T17:03:58.000Z","isPrivate":0,"projectId":"0b8f7f","snapshot":null,"tags":null,"title":"checkbox by mobinkakei","updated":"2024-01-22T17:03:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":143,"cssLen":642,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n\n","css":".checkmark {\n display: block;\n width: 30px;\n height: 30px;\n background-color: #ddd;\n border-radius: 10px;\n position: relative;\n transition: background-color 0.4s;\n overflow: hidden;\n cursor: pointer;\n}\n\n#check:checked ~ .checkmark {\n background-color: #08bb68;\n}\n\n.checkmark::after {\n content: \"\";\n position: absolute;\n width: 5px;\n height: 10px;\n border-right: 3px solid #fff;\n border-bottom: 3px solid #fff;\n top: 44%;\n left: 50%;\n transform: translate(-50%, -50%) rotateZ(40deg) scale(10);\n opacity: 0;\n transition: all 0.4s;\n}\n\n#check:checked ~ .checkmark::after {\n opacity: 1;\n transform: translate(-50%, -50%) rotateZ(40deg) scale(1);\n}"},{"created":"2024-01-22T17:03:58.000Z","isPrivate":0,"projectId":"86fcb3","snapshot":null,"tags":null,"title":"checkbox by Jack17432","updated":"2024-01-22T17:03:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":176,"cssLen":1136,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n \n \n","css":"/* \nButton insperation by @ke1221\nMenu icon transofmation insperation by @Ali-Tahmazi99\n*/\n.menuButton {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n gap: 13%;\n color: #090909;\n width: 3.5em;\n height: 3.5em;\n border-radius: 0.5em;\n background: #e8e8e8;\n border: 1px solid #e8e8e8;\n transition: all .3s;\n box-shadow: 6px 6px 12px #c5c5c5,\n -6px -6px 12px #ffffff;\n}\n\n.menuButton:hover {\n border: 1px solid white;\n}\n\n.menuButton:active {\n color: #666;\n box-shadow: inset 4px 4px 12px #c5c5c5,\n inset -4px -4px 12px #ffffff;\n}\n\ninput[type = \"checkbox\"] {\n -webkit-appearance: none;\n display: none;\n visibility: hidden;\n}\n\n.menuButton span {\n width: 30px;\n height: 4px;\n background: #131313;\n border-radius: 100px;\n transition: 0.3s ease;\n}\n\ninput[type]:checked ~ span.top {\n transform: translateY(290%)rotate(45deg);\n width: 40px;\n}\n\ninput[type]:checked ~ span.bot {\n transform: translateY(-270%) rotate(-45deg);\n width: 40px;\n box-shadow: 0 0 10px #495057;\n}\n\ninput[type]:checked ~ span.mid {\n transform: translateX(-20px);\n opacity: 0;\n}"},{"created":"2024-01-22T17:03:58.000Z","isPrivate":0,"projectId":"32d39f","snapshot":null,"tags":null,"title":"checkbox by joe-watson-sbf","updated":"2024-01-22T17:03:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":114,"cssLen":546,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n","css":".container {\n display: block;\n height: 1.5em;\n width: 1.5em;\n cursor: pointer;\n position: relative;\n}\n\n.container input {\n position: absolute;\n transform: scale(0);\n}\n\n.container input:checked ~ .checkmark {\n transform: rotate(45deg);\n height: 2em;\n width: .7em;\n border-color: #32cd32;\n border-top-color: transparent;\n border-left-color: transparent;\n border-radius: 0;\n}\n\n.container .checkmark {\n display: block;\n width: inherit;\n height: inherit;\n border: 2px solid #32cd32;\n border-radius: 4px;\n transition: all .3s;\n}\n\n\n\n"},{"created":"2024-01-22T17:03:58.000Z","isPrivate":0,"projectId":"e344ac","snapshot":null,"tags":null,"title":"checkbox by guilhermeyohan","updated":"2024-01-22T17:03:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":340,"cssLen":1305,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

","css":".checkbox-wrapper-31:hover .check {\n stroke-dashoffset: 0;\n}\n\n.checkbox-wrapper-31 {\n position: relative;\n display: inline-block;\n width: 40px;\n height: 40px;\n}\n\n.checkbox-wrapper-31 .background {\n fill: #ccc;\n transition: ease all 0.6s;\n -webkit-transition: ease all 0.6s;\n}\n\n.checkbox-wrapper-31 .stroke {\n fill: none;\n stroke: #fff;\n stroke-miterlimit: 10;\n stroke-width: 2px;\n stroke-dashoffset: 100;\n stroke-dasharray: 100;\n transition: ease all 0.6s;\n -webkit-transition: ease all 0.6s;\n}\n\n.checkbox-wrapper-31 .check {\n fill: none;\n stroke: #fff;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-width: 2px;\n stroke-dashoffset: 22;\n stroke-dasharray: 22;\n transition: ease all 0.6s;\n -webkit-transition: ease all 0.6s;\n}\n\n.checkbox-wrapper-31 input[type=checkbox] {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n margin: 0;\n opacity: 0;\n -appearance: none;\n -webkit-appearance: none;\n}\n\n.checkbox-wrapper-31 input[type=checkbox]:hover {\n cursor: pointer;\n}\n\n.checkbox-wrapper-31 input[type=checkbox]:checked + svg .background {\n fill: #6cbe45;\n}\n\n.checkbox-wrapper-31 input[type=checkbox]:checked + svg .stroke {\n stroke-dashoffset: 0;\n}\n\n.checkbox-wrapper-31 input[type=checkbox]:checked + svg .check {\n stroke-dashoffset: 0;\n}\n"},{"created":"2024-01-22T17:03:58.000Z","isPrivate":0,"projectId":"d67055","snapshot":null,"tags":null,"title":"checkbox by KSAplay","updated":"2024-01-22T17:03:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":479,"cssLen":863,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\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 font-size: 20px;\n user-select: none;\n transition: 100ms;\n}\n\n.checkmark {\n top: 0;\n left: 0;\n height: 2em;\n width: 2em;\n transition: 100ms;\n animation: dislike_effect 400ms ease;\n}\n\n.container input:checked ~ .checkmark path {\n fill: #FF5353;\n stroke-width: 0;\n}\n\n.container input:checked ~ .checkmark {\n animation: like_effect 400ms ease;\n}\n\n.container:hover {\n transform: scale(1.1);\n}\n\n@keyframes like_effect {\n 0% {\n transform: scale(0);\n }\n\n 50% {\n transform: scale(1.2);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n@keyframes dislike_effect {\n 0% {\n transform: scale(0);\n }\n\n 50% {\n transform: scale(1.2);\n }\n\n 100% {\n transform: scale(1);\n }\n}"},{"created":"2024-01-22T17:03:58.000Z","isPrivate":0,"projectId":"97ffc7","snapshot":null,"tags":null,"title":"checkbox by catraco","updated":"2024-01-22T17:03:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1093,"cssLen":928,"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 .flag-regular {\n position: absolute;\n animation: keyframes-fill .5s;\n}\n\n.container .flag-solid {\n position: absolute;\n display: none;\n animation: keyframes-fill .5s;\n}\n\n/* ------ On check event ------ */\n.container input:checked ~ .flag-regular {\n display: none;\n}\n\n.container input:checked ~ .flag-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: rotate(0deg) scale(0);\n opacity: 0;\n }\n\n 50% {\n transform: rotate(-10deg) scale(1.2);\n }\n}"},{"created":"2024-01-22T17:03:58.000Z","isPrivate":0,"projectId":"43461a","snapshot":null,"tags":null,"title":"checkbox by andrew-demchenk0","updated":"2024-01-22T17:03:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1095,"cssLen":859,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n \n","css":".theme {\n --bg-color: #111;\n --main-color: #fefefe;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 40px;\n height: 40px;\n background-color: var(--bg-color);\n border-radius: 100%;\n border: 2px solid var(--main-color);\n box-shadow: 4px 4px var(--main-color);\n}\n\n.input {\n cursor: pointer;\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: 10;\n opacity: 0;\n}\n\n.icon {\n position: absolute;\n top: calc(50% -13px);\n left: calc(50% -13px);\n width: 26px;\n height: 26px;\n}\n\n.icon.icon-moon {\n fill: var(--main-color);\n}\n\n.icon.icon-sun {\n stroke: var(--main-color);\n display: none;\n}\n\n.input:checked ~ .icon.icon-sun {\n display: block;\n}\n\n.input:checked ~ .icon.icon-moon {\n display: none;\n}\n\n.theme:active {\n box-shadow: 0px 0px var(--main-color);\n transform: translate(3px, 3px);\n}"},{"created":"2024-01-22T17:03:58.000Z","isPrivate":0,"projectId":"0bbc59","snapshot":null,"tags":null,"title":"checkbox by kennyotsu-monochromia","updated":"2024-01-22T17:03:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2022,"cssLen":3467,"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 \n \n \n \n \n \n

","css":".wrapper {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 60px;\n height: 60px;\n --black: #000000;\n --ch-black: #141414;\n --eer-black: #1b1b1b;\n --night-rider: #2e2e2e;\n --white: #ffffff;\n --af-white: #f3f3f3;\n --ch-white: #e1e1e1;\n}\n\nfooter .demo {\n position: absolute;\n bottom: 10px;\n width: 500px;\n margin: 0 auto;\n}\n\nfooter .demo a {\n text-align: center;\n color: #000;\n text-decoration: none;\n font-weight: 100;\n border-bottom: 1px solid #000;\n}\n\n.circle {\n display: block;\n position: relative;\n padding: 0;\n z-index: 98;\n margin: 0 auto;\n -webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3);\n box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3);\n border-radius: 50%;\n height: 60px;\n width: 60px;\n background-color: var(--white);\n transition: 0.2s;\n text-align: center;\n}\n\n.circle:active {\n transform: scale(0.9);\n box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.3);\n}\n\n.circle:hover {\n cursor: pointer;\n background-color: var(--af-white);\n box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.3);\n}\n\n.circle .svg {\n position: absolute;\n top: 50%;\n left: 50%;\n margin-left: -15px;\n margin-top: -15px;\n width: 30px;\n height: 30px;\n transition: 0.5s;\n transform: rotate(180deg);\n}\n\n.circle svg image {\n filter: brightness(50%);\n}\n\n.sub-circle {\n z-index: 0;\n position: absolute;\n height: 40px;\n width: 40px;\n overflow: hidden;\n border-radius: 50%;\n transition: 0.3s;\n transform: scale(0.5);\n opacity: 0;\n padding: 0;\n margin: 0;\n box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1);\n border: none;\n}\n\n.sub-circle label {\n background-color: var(--af-white);\n display: block;\n color: white;\n width: 100%;\n height: 100%;\n line-height: 40px;\n transition: .5s;\n}\n\n.sub-circle label:hover {\n cursor: pointer;\n background-color: var(--ch-white);\n}\n\n.subs {\n left: -20px;\n top: -50px;\n width: 40px;\n height: 40px;\n text-align: center;\n z-index: 0;\n margin: 0 auto;\n position: relative;\n}\n\n.hidden-sub-trigger {\n display: none;\n}\n\n.hidden-sub-trigger:checked ~ label {\n background-color: var(--white);\n}\n\n.hidden-trigger {\n display: none;\n}\n\n.hidden-trigger:checked ~ .circle {\n transform: scale(0.9);\n cursor: pointer;\n background-color: var(--white);\n box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.1);\n}\n\n.hidden-trigger:checked ~ .circle .svg {\n transform: rotate(45deg);\n}\n\n.hidden-trigger:checked ~ .subs button:nth-of-type(1) {\n transform: translate(0px, -100px) scale(1);\n opacity: 1;\n transition: 0.1s;\n}\n\n.hidden-trigger:checked ~ .subs button:nth-of-type(2) {\n transform: translate(75px, -75px) scale(1);\n opacity: 1;\n transition: 0.2s;\n}\n\n.hidden-trigger:checked ~ .subs button:nth-of-type(3) {\n transform: translate(100px, 0px) scale(1);\n opacity: 1;\n transition: 0.3s;\n}\n\n.hidden-trigger:checked ~ .subs button:nth-of-type(4) {\n transform: translate(75px, 75px) scale(1);\n opacity: 1;\n transition: 0.4s;\n}\n\n.hidden-trigger:checked ~ .subs button:nth-of-type(5) {\n transform: translate(0px, 100px) scale(1);\n opacity: 1;\n transition: 0.5s;\n}\n\n.hidden-trigger:checked ~ .subs button:nth-of-type(6) {\n transform: translate(-75px, 75px) scale(1);\n opacity: 1;\n transition: 0.6s;\n}\n\n.hidden-trigger:checked ~ .subs button:nth-of-type(7) {\n transform: translate(-100px, 0px) scale(1);\n opacity: 1;\n transition: 0.7s;\n}\n\n.hidden-trigger:checked ~ .subs button:nth-of-type(8) {\n transform: translate(-75px, -75px) scale(1);\n opacity: 1;\n transition: 0.8s;\n}\n"},{"created":"2024-01-22T17:03:58.000Z","isPrivate":0,"projectId":"580e78","snapshot":null,"tags":null,"title":"checkbox by gharsh11032000","updated":"2024-01-22T17:03:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":110,"cssLen":1165,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n