{"loaderData":{"0":null,"0-2":{"total":6508,"projects":[{"created":"2024-01-22T17:06:12.000Z","isPrivate":0,"projectId":"a0d54f","snapshot":null,"tags":null,"title":"switch by sabin-koju","updated":"2024-01-22T17:06:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":147,"cssLen":1987,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

","css":".switch {\n display: -ms-inline-flexbox;\n display: inline-flex;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.switch .switch-label {\n cursor: pointer;\n}\n\n.switch .switch-input {\n appearance: none;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -ms-flex-align: center;\n align-items: center;\n box-shadow: inset 0 0 0 1px #c9c9c9;\n background-color: #dadada;\n width: 3rem;\n min-width: 3rem;\n padding: 0.125rem;\n border-radius: 3rem;\n cursor: pointer;\n transition: background-color 0.75s ease, box-shadow 0.35s ease-in;\n}\n\n.switch .switch-input:before {\n position: relative;\n content: \"\";\n display: inline-block;\n border-radius: 1rem;\n height: 1.5rem;\n width: 1.5rem;\n box-shadow: 0 0 3px rgba(0, 0, 0, 0.32);\n background-color: #ffffff;\n border: 1px solid rgba(0, 0, 0, 0);\n transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.175);\n}\n\n.switch .switch-input:active:not(:disabled):before {\n width: 1.75rem;\n}\n\n.switch .switch-input:hover:not(:disabled) {\n box-shadow: inset 0 0 0 1rem #c9c9c9;\n}\n\n.switch .switch-input:focus, .switch .switch-input:focus-within {\n box-shadow: 0 0 0 0.125rem #4caf30;\n outline: none;\n}\n\n.switch .switch-input:focus:before, .switch .switch-input:focus-within:before {\n box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.4);\n}\n\n.switch .switch-input:checked {\n background-color: #5dca3e;\n box-shadow: inset 0 0 0 1px #5dca3e;\n}\n\n.switch .switch-input:checked:before {\n transform: translate3d(calc(100% - 0.5rem), 0, 0);\n}\n\n.switch .switch-input:checked:active:not(:disabled):before {\n margin-left: -0.5rem;\n}\n\n.switch .switch-input:checked:hover:not(:disabled) {\n box-shadow: inset 0 0 0 1rem #459f2c;\n}\n\n.switch .switch-input:checked:focus, .switch .switch-input:checked:focus-within {\n box-shadow: 0 0 0 0.125rem #4caf30;\n}\n\n.switch .switch-input:disabled {\n pointer-events: none;\n cursor: not-allowed;\n opacity: 0.5;\n user-select: none;\n}\n\n.switch .switch-input:disabled:before {\n background-color: #f8f8f8;\n}"},{"created":"2024-01-22T17:06:12.000Z","isPrivate":0,"projectId":"b92156","snapshot":null,"tags":null,"title":"switch by TroyRandall","updated":"2024-01-22T17:06:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":744,"cssLen":1634,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n\n 14\n

\n","css":"/* The switch - the box around the slider */\n.comment-react {\n margin: 0;\n display: flex;\n justify-content: center;\n padding: 5px;\n background-color: #f1f1f1;\n border-radius: 5px;\n scale: 1.5;\n width: 100px;\n}\n\n.comment-react button {\n width: 35px;\n height: 35px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: transparent;\n border: 0;\n outline: none;\n}\n\n.comment-react button:after {\n content: \"\";\n width: 40px;\n height: 40px;\n position: absolute;\n left: -3px;\n top: -3px;\n background: linear-gradient(to bottom right, #3598f5, blue);\n border-radius: 50%;\n z-index: 0;\n transform: scale(0);\n filter: blur(10px);\n}\n\n.comment-react button svg {\n position: relative;\n z-index: 9;\n}\n\n.comment-react button:hover:after {\n animation: ripple 0.6s ease-in-out infinite;\n}\n\n.comment-react button:hover svg {\n animation: ripple2 1s ease-in-out infinite;\n fill: #f5356e;\n}\n\n.comment-react button:hover svg path {\n stroke: #f5356e;\n fill: #f5356e;\n}\n\n.comment-react hr {\n width: 80%;\n height: 1px;\n background-color: #dfe1e6;\n margin: auto;\n border: 0;\n}\n\n.comment-react span {\n height: 35px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: auto;\n font-size: 20px;\n font-weight: 600;\n color: #707277;\n padding-right: 10px;\n text-align: center;\n}\n\n@keyframes ripple {\n 0% {\n transform: scale(0);\n opacity: 1;\n }\n\n 100% {\n transform: scale(1.3);\n opacity: 0.3;\n }\n}\n\n@keyframes ripple2 {\n 0% {\n transform: scale(0);\n opacity: 1;\n }\n\n 100% {\n transform: scale(1.6);\n opacity: 1;\n }\n}\n"},{"created":"2024-01-22T17:06:12.000Z","isPrivate":0,"projectId":"65ab89","snapshot":null,"tags":null,"title":"switch by shadowfax29","updated":"2024-01-22T17:06:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":89,"cssLen":967,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n\n","css":"/* The switch - the box around the slider */\n.switch {\n font-size: 17px;\n position: relative;\n display: inline-block;\n width: 3.5em;\n height: 2em;\n}\n\n/* Hide default HTML checkbox */\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n/* The slider */\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #2196F3;\n transition: .4s;\n border-radius: 30px;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 1.4em;\n width: 1.4em;\n border-radius: 20px;\n left: 0.3em;\n bottom: 0.3em;\n background-color: yellow;\n transition: .4s;\n}\n\n.switch input:checked + .slider:before {\n background-color: black;\n border-radius: 50px;\n box-shadow: inset 9px 0px 1px 0px white;\n}\n\n.switch input:checked + .slider {\n background-color: black;\n}\n\n.switch input:focus + .slider {\n box-shadow: 0 0 1px #2196F3;\n}\n\n.switch input:checked + .slider:before {\n transform: translateX(1.5em);\n}"},{"created":"2024-01-22T17:06:12.000Z","isPrivate":0,"projectId":"075b26","snapshot":null,"tags":null,"title":"switch by Javierrocadev","updated":"2024-01-22T17:06:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":601,"cssLen":2700,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n","css":".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.relative{position:relative}.inline-flex{display:inline-flex}.h-14{height:3.5rem}.w-28{width:7rem}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.bg-blue-300{--tw-bg-opacity:1;background-color:rgb(147 197 253 / var(--tw-bg-opacity))}.outline-none{outline:2px solid transparent;outline-offset:2px}.duration-100{transition-duration:100ms}.after\\:absolute::after{content:var(--tw-content);position:absolute}.after\\:left-1::after{content:var(--tw-content);left:0.25rem}.after\\:top-1::after{content:var(--tw-content);top:0.25rem}.after\\:flex::after{content:var(--tw-content);display:flex}.after\\:h-12::after{content:var(--tw-content);height:3rem}.after\\:w-12::after{content:var(--tw-content);width:3rem}.after\\:items-center::after{content:var(--tw-content);align-items:center}.after\\:justify-center::after{content:var(--tw-content);justify-content:center}.after\\:bg-white::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.after\\:font-bold::after{content:var(--tw-content);font-weight:700}.after\\:text-sky-800::after{content:var(--tw-content);--tw-text-opacity:1;color:rgb(7 89 133 / var(--tw-text-opacity))}.after\\:outline-none::after{content:var(--tw-content);outline:2px solid transparent;outline-offset:2px}.after\\:duration-500::after{content:var(--tw-content);transition-duration:500ms}.after\\:content-\\[\\'No\\'\\]::after{--tw-content:'No';content:var(--tw-content)}.peer:checked ~ .peer-checked\\:after\\:translate-x-14::after{content:var(--tw-content);--tw-translate-x:3.5rem;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\\:after\\:border-white::after{content:var(--tw-content);--tw-border-opacity:1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}.peer:checked ~ .peer-checked\\:after\\:content-\\[\\'Yes\\'\\]::after{--tw-content:'Yes';content:var(--tw-content)}.peer:focus ~ .peer-focus\\:outline-none{outline:2px solid transparent;outline-offset:2px}.peer:focus ~ .peer-focus\\:ring-4{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.peer:focus ~ .peer-focus\\:ring-blue-500{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246 / var(--tw-ring-opacity))}"},{"created":"2024-01-22T17:06:12.000Z","isPrivate":0,"projectId":"345a0a","snapshot":null,"tags":null,"title":"switch by Javierrocadev","updated":"2024-01-22T17:06:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":779,"cssLen":4330,"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":".sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0\n}\n\n.relative {\n position: relative\n}\n\n.inline-flex {\n display: inline-flex\n}\n\n.h-12 {\n height: 3rem\n}\n\n.w-24 {\n width: 6rem\n}\n\n.cursor-pointer {\n cursor: pointer\n}\n\n.items-center {\n align-items: center\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.bg-gradient-to-bl {\n background-image: linear-gradient(to bottom left, var(--tw-gradient-stops))\n}\n\n.from-neutral-800 {\n --tw-gradient-from: #262626 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(38 38 38 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)\n}\n\n.via-neutral-700 {\n --tw-gradient-to: rgb(64 64 64 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), #404040 var(--tw-gradient-via-position), var(--tw-gradient-to)\n}\n\n.to-neutral-600 {\n --tw-gradient-to: #525252 var(--tw-gradient-to-position)\n}\n\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\n\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px\n}\n\n.ring-0 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)\n}\n\n.duration-1000 {\n transition-duration: 1000ms\n}\n\n.after\\:absolute::after {\n content: var(--tw-content);\n position: absolute\n}\n\n.after\\:left-1::after {\n content: var(--tw-content);\n left: 0.25rem\n}\n\n.after\\:top-1::after {\n content: var(--tw-content);\n top: 0.25rem\n}\n\n.after\\:h-10::after {\n content: var(--tw-content);\n height: 2.5rem\n}\n\n.after\\:w-10::after {\n content: var(--tw-content);\n width: 2.5rem\n}\n\n.after\\:rounded-full::after {\n content: var(--tw-content);\n border-radius: 9999px\n}\n\n.after\\:outline-none::after {\n content: var(--tw-content);\n outline: 2px solid transparent;\n outline-offset: 2px\n}\n\n.after\\:duration-300::after {\n content: var(--tw-content);\n transition-duration: 300ms\n}\n\n.after\\:content-\\[\\'\\'\\]::after{--tw-content:'';content:var(--tw-content)}.after\\:\\[background\\:\\#0D2B39\\]::after{content:var(--tw-content);background:#0D2B39}.after\\:\\[background\\:conic-gradient\\(from_135deg\\2c _\\#b2a9a9\\2c _\\#b2a8a8\\2c _\\#ffffff\\2c _\\#d7dbd9_\\2c _\\#ffffff\\2c _\\#b2a8a8\\)\\]::after{content:var(--tw-content);background:conic-gradient(from 135deg, #b2a9a9, #b2a8a8, #ffffff, #d7dbd9 , #ffffff, #b2a8a8)}.peer:checked ~ .peer-checked\\:bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.peer:checked ~ .peer-checked\\:from-emerald-500{--tw-gradient-from:#10b981 var(--tw-gradient-from-position);--tw-gradient-to:rgb(16 185 129 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.peer:checked ~ .peer-checked\\:to-emerald-900{--tw-gradient-to:#064e3b var(--tw-gradient-to-position)}.peer:checked ~ .peer-checked\\:after\\:translate-x-12::after{content:var(--tw-content);--tw-translate-x:3rem;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\\:after\\:rotate-180::after{content:var(--tw-content);--tw-rotate:180deg;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:hover ~ .peer-hover\\:after\\:scale-95::after{content:var(--tw-content);--tw-scale-x:.95;--tw-scale-y:.95;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:focus ~ .peer-focus\\:outline-none{outline:2px solid transparent;outline-offset:2px}"},{"created":"2024-01-22T17:06:12.000Z","isPrivate":0,"projectId":"c7d8f5","snapshot":null,"tags":null,"title":"switch by AbanoubMagdy1","updated":"2024-01-22T17:06:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":158,"cssLen":1298,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n On\n Off\n","css":"/* The switch - the box around the slider */\n.switch {\n font-size: 17px;\n position: relative;\n display: inline-block;\n width: 5.2em;\n height: 2em;\n overflow: hidden;\n}\n\n/* Hide default HTML checkbox */\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n/* The slider */\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #eee;\n transition: .4s;\n border-radius: 30px;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 1.4em;\n width: 1.4em;\n border-radius: 20px;\n border: 1px solid #333;\n left: 0.4em;\n bottom: 0.2em;\n background-color: white;\n transition: .4s;\n}\n\ninput:checked + .slider {\n background-color: #2196F3;\n}\n\ninput:focus + .slider {\n box-shadow: 0 0 1px #2196F3;\n}\n\ninput:checked + .slider:before {\n transform: translateX(3em);\n}\n\n.switch .text {\n position: absolute;\n top: 50%;\n pointer-events: none;\n text-transform: uppercase;\n transform: translateY(-50%);\n transition: .4s;\n}\n\n.switch .text.on {\n left: .8rem;\n transform: translateX(-3rem) translateY(-50%);\n}\n\n.switch .text.off {\n color: #999;\n right: .8rem;\n}\n\ninput:checked ~ .text.off {\n transform: translateX(3rem) translateY(-50%);\n}\n\ninput:checked ~ .text.on {\n transform: translateX(0) translateY(-50%);\n}"},{"created":"2024-01-22T17:06:12.000Z","isPrivate":0,"projectId":"58851e","snapshot":null,"tags":null,"title":"switch by coding-masala","updated":"2024-01-22T17:06:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":162,"cssLen":892,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

\n","css":".toggle-switcher {\n width: 50px;\n height: 25px;\n position: relative;\n margin: 20px auto;\n background: #000;\n border-radius: 50px;\n}\n\n.toggle-input {\n display: none;\n}\n\n.toggle-label {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n border-radius: 50px;\n cursor: pointer;\n box-shadow: 0 0 0 0 #ff0000;\n}\n\n.toggle-label::before {\n content: \"\";\n width: 25px;\n height: 25px;\n position: absolute;\n top: 0;\n left: 0;\n background: #ffffff;\n border-radius: 50%;\n transition: all 0.3s ease;\n}\n\n.toggle-input:checked + .toggle-label {\n animation: shadow-animation_5020 10s linear infinite;\n}\n\n.toggle-input:checked + .toggle-label::before {\n transform: translateX(25px);\n}\n\n@keyframes shadow-animation_5020 {\n 0% {\n box-shadow: 0 0 0 0 #ff0000;\n }\n\n 50% {\n box-shadow: 0 0 25px 25px #ffa500;\n }\n\n 100% {\n box-shadow: 0 0 0 0 #ff0000;\n }\n}\n"},{"created":"2024-01-22T17:06:12.000Z","isPrivate":0,"projectId":"1cbcf3","snapshot":null,"tags":null,"title":"switch by mrhyddenn","updated":"2024-01-22T17:06:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":88,"cssLen":794,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n","css":"/* The switch - the box around the slider */\n.switch {\n font-size: 17px;\n position: relative;\n display: inline-block;\n width: 3.5em;\n height: 2em;\n}\n\n/* Hide default HTML checkbox */\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n/* The slider */\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #fff;\n border: 1px solid #99999;\n transition: .4s;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 1.5em;\n width: 1.5em;\n left: 0.20em;\n bottom: 0.25em;\n background-color: white;\n transition: .4s;\n box-shadow: 0 0 2px 0px #999999;\n}\n\ninput:checked + .slider {\n background-color: #2da54f;\n}\n\ninput:focus + .slider {\n box-shadow: 0 0 1px #2196F3;\n}\n\ninput:checked + .slider:before {\n transform: translateX(1.5em);\n}"},{"created":"2024-01-22T17:06:12.000Z","isPrivate":0,"projectId":"ae0554","snapshot":null,"tags":null,"title":"switch by Shoh2008","updated":"2024-01-22T17:06:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":131,"cssLen":5175,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n To-do\n

","css":".checkbox-wrapper-11 {\n --text: #414856;\n --check: #4F29F0;\n --disabled: #C3C8DE;\n --border-radius: 10px;\n border-radius: var(--border-radius);\n position: relative;\n padding: 5px;\n display: grid;\n grid-template-columns: 30px auto;\n align-items: center;\n}\n\n.checkbox-wrapper-11 label {\n color: var(--text);\n position: relative;\n cursor: pointer;\n display: grid;\n align-items: center;\n width: -webkit-fit-content;\n width: -moz-fit-content;\n width: fit-content;\n transition: color 0.3s ease;\n}\n\n.checkbox-wrapper-11 label::before,\n .checkbox-wrapper-11 label::after {\n content: \"\";\n position: absolute;\n}\n\n.checkbox-wrapper-11 label::before {\n height: 2px;\n width: 8px;\n left: -27px;\n background: var(--check);\n border-radius: 2px;\n transition: background 0.3s ease;\n}\n\n.checkbox-wrapper-11 label:after {\n height: 4px;\n width: 4px;\n top: 8px;\n left: -25px;\n border-radius: 50%;\n}\n\n.checkbox-wrapper-11 input[type=checkbox] {\n -webkit-appearance: none;\n -moz-appearance: none;\n position: relative;\n height: 15px;\n width: 15px;\n outline: none;\n border: 0;\n margin: 0 15px 0 0;\n cursor: pointer;\n background: var(--background);\n display: grid;\n align-items: center;\n}\n\n.checkbox-wrapper-11 input[type=checkbox]::before, .checkbox-wrapper-11 input[type=checkbox]::after {\n content: \"\";\n position: absolute;\n height: 2px;\n top: auto;\n background: var(--check);\n border-radius: 2px;\n}\n\n.checkbox-wrapper-11 input[type=checkbox]::before {\n width: 0px;\n right: 60%;\n transform-origin: right bottom;\n}\n\n.checkbox-wrapper-11 input[type=checkbox]::after {\n width: 0px;\n left: 40%;\n transform-origin: left bottom;\n}\n\n.checkbox-wrapper-11 input[type=checkbox]:checked::before {\n -webkit-animation: check-01-11 0.4s ease forwards;\n animation: check-01-11 0.4s ease forwards;\n}\n\n.checkbox-wrapper-11 input[type=checkbox]:checked::after {\n -webkit-animation: check-02-11 0.4s ease forwards;\n animation: check-02-11 0.4s ease forwards;\n}\n\n.checkbox-wrapper-11 input[type=checkbox]:checked + label {\n color: var(--disabled);\n -webkit-animation: move-11 0.3s ease 0.1s forwards;\n animation: move-11 0.3s ease 0.1s forwards;\n}\n\n.checkbox-wrapper-11 input[type=checkbox]:checked + label::before {\n background: var(--disabled);\n -webkit-animation: slice-11 0.4s ease forwards;\n animation: slice-11 0.4s ease forwards;\n}\n\n.checkbox-wrapper-11 input[type=checkbox]:checked + label::after {\n -webkit-animation: firework-11 0.5s ease forwards 0.1s;\n animation: firework-11 0.5s ease forwards 0.1s;\n}\n\n@-webkit-keyframes move-11 {\n 50% {\n padding-left: 8px;\n padding-right: 0px;\n }\n\n 100% {\n padding-right: 4px;\n }\n}\n\n@keyframes move-11 {\n 50% {\n padding-left: 8px;\n padding-right: 0px;\n }\n\n 100% {\n padding-right: 4px;\n }\n}\n\n@-webkit-keyframes slice-11 {\n 60% {\n width: 100%;\n left: 4px;\n }\n\n 100% {\n width: 100%;\n left: -2px;\n padding-left: 0;\n }\n}\n\n@keyframes slice-11 {\n 60% {\n width: 100%;\n left: 4px;\n }\n\n 100% {\n width: 100%;\n left: -2px;\n padding-left: 0;\n }\n}\n\n@-webkit-keyframes check-01-11 {\n 0% {\n width: 4px;\n top: auto;\n transform: rotate(0);\n }\n\n 50% {\n width: 0px;\n top: auto;\n transform: rotate(0);\n }\n\n 51% {\n width: 0px;\n top: 8px;\n transform: rotate(45deg);\n }\n\n 100% {\n width: 5px;\n top: 8px;\n transform: rotate(45deg);\n }\n}\n\n@keyframes check-01-11 {\n 0% {\n width: 4px;\n top: auto;\n transform: rotate(0);\n }\n\n 50% {\n width: 0px;\n top: auto;\n transform: rotate(0);\n }\n\n 51% {\n width: 0px;\n top: 8px;\n transform: rotate(45deg);\n }\n\n 100% {\n width: 5px;\n top: 8px;\n transform: rotate(45deg);\n }\n}\n\n@-webkit-keyframes check-02-11 {\n 0% {\n width: 4px;\n top: auto;\n transform: rotate(0);\n }\n\n 50% {\n width: 0px;\n top: auto;\n transform: rotate(0);\n }\n\n 51% {\n width: 0px;\n top: 8px;\n transform: rotate(-45deg);\n }\n\n 100% {\n width: 10px;\n top: 8px;\n transform: rotate(-45deg);\n }\n}\n\n@keyframes check-02-11 {\n 0% {\n width: 4px;\n top: auto;\n transform: rotate(0);\n }\n\n 50% {\n width: 0px;\n top: auto;\n transform: rotate(0);\n }\n\n 51% {\n width: 0px;\n top: 8px;\n transform: rotate(-45deg);\n }\n\n 100% {\n width: 10px;\n top: 8px;\n transform: rotate(-45deg);\n }\n}\n\n@-webkit-keyframes firework-11 {\n 0% {\n opacity: 1;\n box-shadow: 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0;\n }\n\n 30% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n box-shadow: 0 -15px 0 0px #4F29F0, 14px -8px 0 0px #4F29F0, 14px 8px 0 0px #4F29F0, 0 15px 0 0px #4F29F0, -14px 8px 0 0px #4F29F0, -14px -8px 0 0px #4F29F0;\n }\n}\n\n@keyframes firework-11 {\n 0% {\n opacity: 1;\n box-shadow: 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0;\n }\n\n 30% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n box-shadow: 0 -15px 0 0px #4F29F0, 14px -8px 0 0px #4F29F0, 14px 8px 0 0px #4F29F0, 0 15px 0 0px #4F29F0, -14px 8px 0 0px #4F29F0, -14px -8px 0 0px #4F29F0;\n }\n}"},{"created":"2024-01-22T17:06:12.000Z","isPrivate":0,"projectId":"b6b9f2","snapshot":null,"tags":null,"title":"switch by Javierrocadev","updated":"2024-01-22T17:06:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":602,"cssLen":3354,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n","css":".sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0\n}\n\n.relative {\n position: relative\n}\n\n.inline-flex {\n display: inline-flex\n}\n\n.h-12 {\n height: 3rem\n}\n\n.w-24 {\n width: 6rem\n}\n\n.cursor-pointer {\n cursor: pointer\n}\n\n.items-center {\n align-items: center\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.bg-rose-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(251 113 133 / var(--tw-bg-opacity))\n}\n\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\n\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px\n}\n\n.ring-0 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)\n}\n\n.duration-300 {\n transition-duration: 300ms\n}\n\n.after\\:absolute::after {\n content: var(--tw-content);\n position: absolute\n}\n\n.after\\:left-1::after {\n content: var(--tw-content);\n left: 0.25rem\n}\n\n.after\\:top-1::after {\n content: var(--tw-content);\n top: 0.25rem\n}\n\n.after\\:flex::after {\n content: var(--tw-content);\n display: flex\n}\n\n.after\\:h-10::after {\n content: var(--tw-content);\n height: 2.5rem\n}\n\n.after\\:w-10::after {\n content: var(--tw-content);\n width: 2.5rem\n}\n\n.after\\:items-center::after {\n content: var(--tw-content);\n align-items: center\n}\n\n.after\\:justify-center::after {\n content: var(--tw-content);\n justify-content: center\n}\n\n.after\\:rounded-full::after {\n content: var(--tw-content);\n border-radius: 9999px\n}\n\n.after\\:bg-gray-50::after {\n content: var(--tw-content);\n --tw-bg-opacity: 1;\n background-color: rgb(249 250 251 / var(--tw-bg-opacity))\n}\n\n.after\\:outline-none::after {\n content: var(--tw-content);\n outline: 2px solid transparent;\n outline-offset: 2px\n}\n\n.after\\:duration-300::after {\n content: var(--tw-content);\n transition-duration: 300ms\n}\n\n.after\\:content-\\[\\'\\2716\\FE0F\\'\\]::after{--tw-content:'✖️';content:var(--tw-content)}.peer:checked ~ .peer-checked\\:bg-emerald-500{--tw-bg-opacity:1;background-color:rgb(16 185 129 / var(--tw-bg-opacity))}.peer:checked ~ .peer-checked\\:after\\:translate-x-12::after{content:var(--tw-content);--tw-translate-x:3rem;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\\:after\\:content-\\[\\'\\2714\\FE0F\\'\\]::after{--tw-content:'✔️';content:var(--tw-content)}.peer:hover ~ .peer-hover\\:after\\:scale-95::after{content:var(--tw-content);--tw-scale-x:.95;--tw-scale-y:.95;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:focus ~ .peer-focus\\:outline-none{outline:2px solid transparent;outline-offset:2px}"},{"created":"2024-01-22T17:06:12.000Z","isPrivate":0,"projectId":"9a10fa","snapshot":null,"tags":null,"title":"switch by csemszepp","updated":"2024-01-22T17:06:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":145,"cssLen":768,"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":".switch {\n position: relative;\n display: inline-block;\n width: 60px;\n height: 34px;\n}\n\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #6E6E6E;\n transition: .4s;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 26px;\n width: 26px;\n left: 4px;\n bottom: 4px;\n background-color: white;\n transition: .4s;\n}\n\n.input:checked + .slider {\n background-color: #1849AB;\n}\n\n.input:focus + .slider {\n box-shadow: 0 0 0 4px rgba(21, 156, 228, 0.7);\n outline: none;\n}\n\n.input:checked + .slider:before {\n transform: translateX(26px);\n}\n\n.slider.round {\n border-radius: 34px;\n}\n\n.slider.round:before {\n border-radius: 50%;\n}"},{"created":"2024-01-22T17:06:12.000Z","isPrivate":0,"projectId":"2e9e6e","snapshot":null,"tags":null,"title":"switch by Javierrocadev","updated":"2024-01-22T17:06:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":648,"cssLen":3922,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n","css":".sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0\n}\n\n.relative {\n position: relative\n}\n\n.inline-flex {\n display: inline-flex\n}\n\n.h-12 {\n height: 3rem\n}\n\n.w-24 {\n width: 6rem\n}\n\n.cursor-pointer {\n cursor: pointer\n}\n\n.items-center {\n align-items: center\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.bg-rose-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(251 113 133 / var(--tw-bg-opacity))\n}\n\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\n\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px\n}\n\n.ring-0 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)\n}\n\n.duration-300 {\n transition-duration: 300ms\n}\n\n.after\\:absolute::after {\n content: var(--tw-content);\n position: absolute\n}\n\n.after\\:left-1::after {\n content: var(--tw-content);\n left: 0.25rem\n}\n\n.after\\:top-1::after {\n content: var(--tw-content);\n top: 0.25rem\n}\n\n.after\\:flex::after {\n content: var(--tw-content);\n display: flex\n}\n\n.after\\:h-10::after {\n content: var(--tw-content);\n height: 2.5rem\n}\n\n.after\\:w-10::after {\n content: var(--tw-content);\n width: 2.5rem\n}\n\n.after\\:-rotate-180::after {\n content: var(--tw-content);\n --tw-rotate: -180deg;\n 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))\n}\n\n.after\\:items-center::after {\n content: var(--tw-content);\n align-items: center\n}\n\n.after\\:justify-center::after {\n content: var(--tw-content);\n justify-content: center\n}\n\n.after\\:rounded-full::after {\n content: var(--tw-content);\n border-radius: 9999px\n}\n\n.after\\:bg-gray-50::after {\n content: var(--tw-content);\n --tw-bg-opacity: 1;\n background-color: rgb(249 250 251 / var(--tw-bg-opacity))\n}\n\n.after\\:outline-none::after {\n content: var(--tw-content);\n outline: 2px solid transparent;\n outline-offset: 2px\n}\n\n.after\\:duration-300::after {\n content: var(--tw-content);\n transition-duration: 300ms\n}\n\n.after\\:content-\\[\\'\\2716\\FE0F\\'\\]::after{--tw-content:'✖️';content:var(--tw-content)}.peer:checked ~ .peer-checked\\:bg-emerald-500{--tw-bg-opacity:1;background-color:rgb(16 185 129 / var(--tw-bg-opacity))}.peer:checked ~ .peer-checked\\:after\\:translate-x-12::after{content:var(--tw-content);--tw-translate-x:3rem;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\\:after\\:rotate-0::after{content:var(--tw-content);--tw-rotate:0deg;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\\:after\\:content-\\[\\'\\2714\\FE0F\\'\\]::after{--tw-content:'✔️';content:var(--tw-content)}.peer:hover ~ .peer-hover\\:after\\:scale-95::after{content:var(--tw-content);--tw-scale-x:.95;--tw-scale-y:.95;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:focus ~ .peer-focus\\:outline-none{outline:2px solid transparent;outline-offset:2px}"}]}},"actionData":null,"errors":null}