{"loaderData":{"0":null,"0-2":{"total":7188,"projects":[{"created":"2024-01-22T17:06:16.000Z","isPrivate":0,"projectId":"a0d881","snapshot":null,"tags":null,"title":"switch by sahilxkhadka","updated":"2024-01-22T17:06:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1088,"cssLen":795,"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 width: 48px;\n height: 48px;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: rgb(60,64,67);\n color: #fff;\n border-radius: 50%;\n cursor: pointer;\n transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.mic-on, .mic-off {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all .3s ease-in-out;\n}\n\n.mic-on {\n z-index: 4;\n}\n\n.mic-off {\n position: absolute;\n inset: 0;\n z-index: 5;\n opacity: 0;\n}\n\n.switch:hover {\n background-color: rgba(60,64,67, 0.8);\n}\n\n#checkbox {\n display: none;\n}\n\n#checkbox:checked + .switch {\n background-color: red\n}\n\n#checkbox:checked + .switch .mic-off {\n opacity: 1;\n}\n\n#checkbox:active + .switch {\n scale: 1.2;\n}"},{"created":"2024-01-22T17:06:16.000Z","isPrivate":0,"projectId":"782d3c","snapshot":null,"tags":null,"title":"switch by Yaya12085","updated":"2024-01-22T17:06:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":825,"cssLen":1751,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".toggle-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n border-radius: 99px;\n padding: .125em;\n background-image: linear-gradient(to bottom, #777676, #212121);\n box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);\n /* resize for demo */\n font-size: 1.5em;\n}\n\n.toggle-checkbox {\n appearance: none;\n position: absolute;\n z-index: 1;\n border-radius: inherit;\n width: 100%;\n height: 100%;\n /* fix em sizing */\n font: inherit;\n opacity: 0;\n cursor: pointer;\n}\n\n.toggle-container {\n display: flex;\n align-items: center;\n position: relative;\n border-radius: 99px;\n width: 3em;\n height: 1.5em;\n background-color: #212121;\n box-shadow: inset 0 0 .0625em .125em rgba(5, 5, 5, 0.2), inset 0 .0625em .125em rgba(0, 0, 0, 0.4);\n transition: background-color .4s linear;\n}\n\n.toggle-checkbox:checked + .toggle-container {\n background-color: rgba(11, 108, 253, 0.1);\n}\n\n.toggle-button {\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n left: .0625em;\n border-radius: 99px;\n width: 1.375em;\n height: 1.375em;\n background-color: #212121;\n box-shadow: inset 0 -.0625em .0625em .125em rgba(5, 5, 5, 0.2), inset 0 -.125em .0625em rgba(5, 5, 5, 0.2), inset 0 .1875em .0625em rgba(219, 219, 219, 0.3), 0 .125em .125em rgb(0 0 0 / .5);\n transition: left .4s;\n}\n\n.toggle-checkbox:checked + .toggle-container > .toggle-button {\n left: 1.5625em;\n}\n\n.toggle-button-circles-container {\n display: grid;\n grid-template-columns: repeat(3, min-content);\n gap: .125em;\n position: absolute;\n margin: 0 auto;\n}\n\n.toggle-button-circle {\n border-radius: 50%;\n width: .125em;\n height: .125em;\n background-image: radial-gradient(circle at 50% 0, #5e5d5d, #807d7d);\n}"},{"created":"2024-01-22T17:06:16.000Z","isPrivate":0,"projectId":"802154","snapshot":null,"tags":null,"title":"switch by SouravBandyopadhyay","updated":"2024-01-22T17:06:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":225,"cssLen":1622,"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-button-cover {\n display: inline-block;\n position: relative;\n width: 200px;\n height: 140px;\n box-sizing: border-box;\n}\n\n.button-cover:before {\n counter-increment: button-counter;\n content: counter(button-counter);\n position: absolute;\n right: 0;\n bottom: 0;\n color: #d7e3e3;\n font-size: 12px;\n line-height: 1;\n padding: 5px;\n}\n\n.button-cover,\n.knobs,\n.layer {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n}\n\n.button {\n position: relative;\n top: 50%;\n width: 74px;\n height: 36px;\n margin: -20px auto 0 auto;\n overflow: hidden;\n}\n\n.button.r,\n.button.r .layer {\n border-radius: 100px;\n}\n\n.checkbox {\n position: relative;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n z-index: 3;\n}\n\n.knobs {\n z-index: 2;\n}\n\n.layer {\n width: 100%;\n background-color: #ebf7fc;\n transition: 0.3s ease all;\n z-index: 1;\n}\n\n#button-2 .knobs:before,\n#button-2 .knobs:after {\n content: 'YES';\n position: absolute;\n top: 4px;\n left: 4px;\n width: 20px;\n height: 10px;\n color: #fff;\n font-size: 10px;\n font-weight: bold;\n text-align: center;\n line-height: 1;\n padding: 9px 4px;\n background-color: #03f480;\n border-radius: 50%;\n transition: 0.3s ease all;\n}\n\n#button-2 .knobs:before {\n content: 'YES';\n}\n\n#button-2 .knobs:after {\n content: 'NO';\n}\n\n#button-2 .knobs:after {\n right: -28px;\n left: auto;\n background-color: #f44336;\n}\n\n#button-2 .checkbox:checked + .knobs:before {\n left: -28px;\n}\n\n#button-2 .checkbox:checked + .knobs:after {\n right: 4px;\n}\n\n#button-2 .checkbox:checked ~ .layer {\n background-color: #fcebeb;\n}\n"},{"created":"2024-01-22T17:06:16.000Z","isPrivate":0,"projectId":"588bef","snapshot":null,"tags":null,"title":"switch by Yaya12085","updated":"2024-01-22T17:06:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":130,"cssLen":1404,"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

\n","css":"/* The switch - the box around the slider */\n.switch {\n font-size: 17px;\n position: relative;\n display: inline-block;\n width: 100px;\n height: 2em;\n}\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 color: #000;\n font-weight: 600;\n border-radius: 30px;\n display: flex;\n justify-content: space-around;\n align-items: center;\n transition: .4s;\n}\n\n.slider:before {\n position: absolute;\n content: \"On\";\n height: 90%;\n width: 48%;\n left: 2%;\n border-radius: 20px;\n background-color: white;\n color: green;\n display: grid;\n align-content: center;\n justify-content: center;\n box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0 -1.31em 1.31em -1.31em rgba(0, 0, 0, 0.3) inset, 0 0 1px 0 rgba(0, 0, 0, 0.1);\n text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);\n transition: .4s;\n}\n\n.slider:after {\n content: \"\";\n position: absolute;\n top: -7px;\n left: -7px;\n right: -7px;\n bottom: -7px;\n border-radius: 1.71em;\n background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.1));\n z-index: -1;\n}\n\n.switch input:checked + .slider {\n background-color: #21f3a3;\n color: #fff;\n}\n\n.switch input:checked + .slider:before {\n content: \"Off\";\n transform: translateX(100%);\n color: red;\n}\n\n.switch input {\n display: none;\n}"},{"created":"2024-01-22T17:06:16.000Z","isPrivate":0,"projectId":"32a3f4","snapshot":null,"tags":null,"title":"switch by Bodyhc","updated":"2024-01-22T17:06:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":269,"cssLen":1240,"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":".flipswitch {\n position: relative;\n width: 80px;\n}\n\n.flipswitch input[type=checkbox] {\n display: none;\n}\n\n.flipswitch-label {\n display: block;\n overflow: hidden;\n cursor: pointer;\n border: 1px solid #260999;\n border-radius: 41px;\n}\n\n.flipswitch-inner {\n width: 200%;\n margin-left: -100%;\n transition: margin 0.3s ease-in 0s;\n}\n\n.flipswitch-inner:before, .flipswitch-inner:after {\n float: left;\n width: 50%;\n height: 38px;\n padding: 0;\n line-height: 38px;\n font-size: 25px;\n color: white;\n font-family: Trebuchet, Arial, sans-serif;\n font-weight: bold;\n box-sizing: border-box;\n}\n\n.flipswitch-inner:before {\n content: \"✔\";\n padding-left: 20px;\n background-color: #15009C;\n color: #FFFFFF;\n}\n\n.flipswitch-inner:after {\n content: \"X\";\n padding-right: 20px;\n background-color: #EBEBEB;\n color: #15009C;\n text-align: right;\n}\n\n.flipswitch-switch {\n width: 25px;\n margin: 6.5px;\n background: #FFFFFF;\n border: 1px solid #260999;\n border-radius: 41px;\n position: absolute;\n top: 0;\n bottom: 0;\n right: 41px;\n transition: all 0.3s ease-in 0s;\n}\n\n.flipswitch-cb:checked + .flipswitch-label .flipswitch-inner {\n margin-left: 0;\n}\n\n.flipswitch-cb:checked + .flipswitch-label .flipswitch-switch {\n right: 0;\n}\n"},{"created":"2024-01-22T17:06:16.000Z","isPrivate":0,"projectId":"ee4a75","snapshot":null,"tags":null,"title":"switch by solanodz","updated":"2024-01-22T17:06:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":88,"cssLen":847,"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: rgb(255, 255, 255);\n transition: .5s;\n border-radius: 0px;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 1.4em;\n width: 1.4em;\n border-radius: 0px;\n left: 0.3em;\n bottom: 0.3em;\n background-color: rgb(0, 0, 0);\n transition: .5s;\n}\n\n.switch input:checked + .slider {\n background-color: #06c235;\n}\n\n.switch input:focus + .slider {\n box-shadow: 0 0 1px #000000;\n}\n\n.switch input:checked + .slider:before {\n transform: translateX(1.5em);\n}"},{"created":"2024-01-22T17:06:16.000Z","isPrivate":0,"projectId":"77c682","snapshot":null,"tags":null,"title":"switch by JkHuger","updated":"2024-01-22T17:06:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":82,"cssLen":962,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"#toggle_checkbox {\n display: none;\n}\n\nlabel {\n position: absolute;\n top: 50%;\n right: 0px;\n left: 0;\n display: block;\n width: 70px;\n height: 35px;\n margin: 0 auto;\n transform: translateY(-50%);\n cursor: pointer;\n}\n\nlabel:before {\n top: 4px;\n left: 4px;\n width: 27px;\n height: 27px;\n border: 2px solid red;\n}\n\nlabel:after {\n top: 0;\n right: 0;\n width: 70px;\n height: 35px;\n border: 2px solid #143240;\n}\n\nlabel:before,\nlabel:after {\n content: \"\";\n position: absolute;\n border-radius: 50px;\n box-sizing: border-box;\n transition: 0.5s ease top, 0.5s ease left, 0.5s ease right, 0.5s ease width,\n 0.5s ease height, 0.5s ease border-color;\n}\n\n#toggle_checkbox:checked + label:before {\n top: 0;\n left: 0;\n width: 70px;\n height: 35px;\n border-color: #143240;\n border: 2px solid #143240\n}\n\n#toggle_checkbox:checked + label:after {\n top: 4px;\n right: 4px;\n width: 27px;\n height: 27px;\n border-color: red;\n border: 2px solid red;\n}\n"},{"created":"2024-01-22T17:06:16.000Z","isPrivate":0,"projectId":"70aaab","snapshot":null,"tags":null,"title":"switch by ami-hp","updated":"2024-01-22T17:06:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3109,"cssLen":939,"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

","css":".darkThemeBtn * {\n transition: all 0.3s;\n}\n\n.darkThemeBtn input {\n width: 0;\n height: 0;\n visibility: hidden;\n}\n\n.darkThemeBtn label {\n border: 1px solid #efefef;\n background: rgba(239, 239, 239, 0.5);\n border-radius: 10px;\n height: 46px;\n width: 46px;\n margin: auto;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n cursor: pointer;\n}\n\n.darkThemeBtn label:active {\n border-radius: 5px;\n}\n\n.darkThemeBtn label svg {\n position: absolute;\n width: 16px;\n transition: 0.3s;\n z-index: 1;\n fill: #000;\n}\n\n.darkThemeBtn label svg.sun {\n width: 20px;\n opacity: 0;\n fill: #fff;\n}\n\n.darkThemeBtn label svg.moon {\n opacity: 1;\n}\n\n.darkThemeBtn input:checked + label {\n background: #4a6cf7;\n}\n\n.darkThemeBtn input:checked + label svg.sun {\n opacity: 1;\n}\n\n.darkThemeBtn input:checked + label svg.moon {\n opacity: 0;\n}\n\n.darkThemeBtn input:checked ~ span {\n background-color: #16174b;\n}"},{"created":"2024-01-22T17:06:15.000Z","isPrivate":0,"projectId":"003c17","snapshot":null,"tags":null,"title":"switch by Javierrocadev","updated":"2024-01-22T17:06:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":786,"cssLen":3906,"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-12{height:3rem}.w-24{width:6rem}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.rounded-full{border-radius:9999px}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-rose-400{--tw-gradient-from:#fb7185 var(--tw-gradient-from-position);--tw-gradient-to:rgb(251 113 133 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-red-900{--tw-gradient-to:#7f1d1d var(--tw-gradient-to-position)}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.ring-0{--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(0px + 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)}.duration-1000{transition-duration:1000ms}.\\[box-shadow\\:1px_3px_0px_0px_\\#000\\]{box-shadow:1px 3px 0px 0px #000}.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\\:h-10::after{content:var(--tw-content);height:2.5rem}.after\\:w-10::after{content:var(--tw-content);width:2.5rem}.after\\:rounded-full::after{content:var(--tw-content);border-radius:9999px}.after\\:outline-none::after{content:var(--tw-content);outline:2px solid transparent;outline-offset:2px}.after\\:duration-300::after{content:var(--tw-content);transition-duration:300ms}.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:15.000Z","isPrivate":0,"projectId":"e28cb3","snapshot":null,"tags":null,"title":"switch by radwakhalil22","updated":"2024-01-22T17:06:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":105,"cssLen":1152,"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 .checkbox {\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: #ccc;\n transition: .4s;\n border-radius: 30px;\n box-shadow: 2px 2px 2px 2px #222831, -2px -2px 2px 2px #393E46, -2px 2px 2px 2px #00ADB5, 2px -2px 2px 2px #EEEEEE;\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: white;\n transition: .4s;\n}\n\n.checkbox:checked + .slider:before {\n box-shadow: 2px 2px 2px 2px #222831, -2px -2px 2px 2px #393E46, -2px 2px 2px 2px #00ADB5, 2px -2px 2px 2px #EEEEEE;\n}\n\n.checkbox:checked + .slider {\n background-color: #afa2a2;\n box-shadow: 2px 2px 2px 2px #222831, -2px -2px 2px 2px #393E46, -2px 2px 2px 2px #00ADB5, 2px -2px 2px 2px #EEEEEE;\n}\n\n.checkbox:checked + .slider:before {\n transform: translateX(1.5em);\n}"},{"created":"2024-01-22T17:06:15.000Z","isPrivate":0,"projectId":"48797f","snapshot":null,"tags":null,"title":"switch by Ratinax","updated":"2024-01-22T17:06:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":88,"cssLen":806,"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: #cc1100;\n transition: .4s;\n border-radius: 10px;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 1.4em;\n width: 1.4em;\n border-radius: 8px;\n left: 0.3em;\n bottom: 0.3em;\n transform: rotate(270deg);\n background-color: rgb(255, 255, 255);\n transition: .4s;\n}\n\n.switch input:checked + .slider {\n background-color: #21cc4c;\n}\n\n.switch input:checked + .slider:before {\n transform: translateX(1.5em);\n}"},{"created":"2024-01-22T17:06:15.000Z","isPrivate":0,"projectId":"37cf90","snapshot":null,"tags":null,"title":"switch by Javierrocadev","updated":"2024-01-22T17:06:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":608,"cssLen":3623,"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-12 {\n width: 3rem\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-500::after {\n content: var(--tw-content);\n transition-duration: 500ms\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\\: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-75::after{content:var(--tw-content);--tw-scale-x:.75;--tw-scale-y:.75;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}