{"loaderData":{"0":null,"0-3":{"total":7364,"projects":[{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"37deac","snapshot":null,"tags":null,"title":"switch by adamgiebl","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":824,"cssLen":1606,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n","css":".toggle-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n border-radius: 50px;\n padding: 10px;\n background-image: linear-gradient(to bottom, #f0f0f0, #e8e8e8);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\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 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: 50px;\n width: 80px;\n height: 40px;\n background-color: #e8e8e8;\n box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.1);\n transition: background-color 0.4s linear;\n}\n\n.toggle-checkbox:checked + .toggle-container {\n background-color: #f3b519;\n}\n\n.toggle-button {\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n left: 2px;\n border-radius: 50%;\n width: 36px;\n height: 36px;\n background-color: #e8e8e8;\n box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.1), inset 0 -4px 2px rgba(0, 0, 0, 0.2), inset 0 6px 2px rgba(255, 255, 255, 0.3), 0 4px 4px rgba(0, 0, 0, 0.5);\n transition: left 0.4s;\n}\n\n.toggle-checkbox:checked + .toggle-container > .toggle-button {\n left: 42px;\n}\n\n.toggle-button-circles-container {\n display: grid;\n grid-template-columns: repeat(3, 4px);\n gap: 2px;\n position: absolute;\n margin: 0 auto;\n}\n\n.toggle-button-circle {\n border-radius: 50%;\n width: 2px;\n height: 2px;\n background-image: radial-gradient(circle at 50% 0, #f5f5f5, #c4c4c4);\n}"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"4ccd54","snapshot":null,"tags":null,"title":"switch by faxriddin20","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":826,"cssLen":1778,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n","css":".toggle-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n border-radius: 0.5em;\n padding: 0.125em;\n background-image: linear-gradient(to bottom, #d5d5d5, #e8e8e8);\n box-shadow: 0 1px 1px rgb(255 255 255 / 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: 0.375em;\n width: 3em;\n height: 1.5em;\n background-color: #e8e8e8;\n box-shadow: inset 0 0 0.0625em 0.125em rgb(255 255 255 / 0.2),\n inset 0 0.0625em 0.125em rgb(0 0 0 / 0.4);\n transition: background-color 0.4s linear;\n}\n\n.toggle-checkbox:checked + .toggle-container {\n background-color: lime;\n}\n\n.toggle-button {\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n left: 0.0625em;\n border-radius: 0.3125em;\n width: 1.375em;\n height: 1.375em;\n background-color: #e8e8e8;\n box-shadow: inset 0 -0.0625em 0.0625em 0.125em rgb(0 0 0 / 0.1),\n inset 0 -0.125em 0.0625em rgb(0 0 0 / 0.2),\n inset 0 0.1875em 0.0625em rgb(255 255 255 / 0.3),\n 0 0.125em 0.125em rgb(0 0 0 / 0.5);\n transition: left 0.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: 0.125em;\n position: absolute;\n margin: 0 auto;\n}\n\n.toggle-button-circle {\n border-radius: 50%;\n width: 0.125em;\n height: 0.125em;\n background-image: radial-gradient(circle at 50% 0, #f5f5f5, #c4c4c4);\n}\n"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"5b1fc2","snapshot":null,"tags":null,"title":"switch by adamgiebl","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":405,"cssLen":3593,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n","css":".toggle-container {\n --knob-size: 1.75em;\n display: flex;\n justify-content: center;\n position: relative;\n}\n\n.toggle-input {\n position: absolute;\n z-index: 2;\n bottom: 132.5%;\n border-radius: 50%;\n transform: rotate(-25deg);\n transform-origin: 50% 4.75em;\n width: var(--knob-size);\n height: var(--knob-size);\n opacity: 0;\n /* fix em sizing */\n font: inherit;\n transition: transform .24s cubic-bezier(.65, 1.35, .5, 1);\n cursor: pointer;\n}\n\n.toggle-input:checked {\n transform: rotate(25deg);\n}\n\n.toggle-handle-wrapper {\n position: absolute;\n z-index: 1;\n bottom: -135%;\n -webkit-mask-image: linear-gradient(to bottom, #000 62.125%, transparent 50%);\n mask-image: linear-gradient(to bottom, #000 62.125%, transparent 50%);\n width: 200%;\n overflow: hidden;\n}\n\n.toggle-handle {\n display: flex;\n flex-direction: column;\n align-items: center;\n transform: rotate(-25deg);\n transform-origin: bottom center;\n transition: transform .24s cubic-bezier(.65, 1.35, .5, 1);\n}\n\n.toggle-input:checked + .toggle-handle-wrapper > .toggle-handle {\n transform: rotate(25deg);\n}\n\n.toggle-handle-knob {\n position: relative;\n z-index: 1;\n border-radius: 50%;\n width: var(--knob-size);\n height: var(--knob-size);\n background-image: radial-gradient(farthest-corner at 70% 30%, #ffffff 4%, #61bdda 12% 24%, #4791b2 50% 65%, #61bdda 75%);\n transition: transform .24s cubic-bezier(.65, 1.35, .5, 1);\n}\n\n.toggle-input:checked + .toggle-handle-wrapper .toggle-handle-knob {\n transform: rotate(-90deg);\n}\n\n /* toggle handle knob hover inner shadow */\n.toggle-handle-knob::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n border-radius: inherit;\n width: 100%;\n height: 100%;\n box-shadow: inset 0 0 8px 2px rgb(255 255 255 / .4);\n opacity: 0;\n transition: opacity .2s;\n}\n\n@media (hover: hover) {\n .toggle-input:hover + .toggle-handle-wrapper .toggle-handle-knob::after,\n .toggle-input:focus-visible + .toggle-handle-wrapper .toggle-handle-knob::after {\n opacity: 1;\n }\n}\n\n.toggle-handle-bar-wrapper {\n position: relative;\n width: .5em;\n height: 3em;\n}\n\n.toggle-handle-bar {\n position: absolute;\n top: calc(var(--knob-size) / 2 * -1);\n left: 0;\n width: 100%;\n height: calc(100% + var(--knob-size) / 2);\n background-image: linear-gradient(to right, #1f1f1f, #161616, #1f1f1f 45% 55%, #161616, #1f1f1f);\n background-position-x: .06125em;\n transition: background-position-x .24s cubic-bezier(.65, 1.35, .5, 1);\n box-shadow: inset 0 1em .25em rgb(0 0 0 / .4);\n}\n\n.toggle-input:checked + .toggle-handle-wrapper .toggle-handle-bar {\n background-position-x: -.06125em;\n}\n\n.toggle-base {\n position: relative;\n border-radius: 3.125em;\n padding: .25em;\n width: 3.5em;\n height: 1.125em;\n background-color: #222222;\n background-image: linear-gradient(to bottom, #444444, #222222);\n box-shadow: 0 -.25em .5em #fff, 0 .25em .5em #d7d7d7;\n}\n\n.toggle-base-inside {\n position: relative;\n border-radius: inherit;\n width: 100%;\n height: 100%;\n background-image: linear-gradient(to bottom, #1f1f1f, #0f0f0f);\n box-shadow: inset 0 .0625em rgb(255 255 255 / .2), inset 0 -.03125em rgb(255 255 255 / 1), inset 0 -.0625em .25em rgb(0 0 0 / .1);\n}\n\n /* toggle base inside active */\n.toggle-base-inside::after {\n content: '';\n position: absolute;\n border-radius: inherit;\n width: 100%;\n height: 100%;\n background-image: linear-gradient(to bottom, #00cfb6, #00a5bf);\n box-shadow: inherit;\n opacity: 0;\n transition: opacity .24s cubic-bezier(.65, 1.35, .5, 1);\n}\n\n.toggle-input:checked ~ .toggle-base .toggle-base-inside::after {\n opacity: 1;\n}"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"371050","snapshot":null,"tags":null,"title":"switch by zebra76966","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":88,"cssLen":868,"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 position: absolute;\n top: 50%;\n width: 30px;\n height: 60px;\n padding: 2px;\n left: 50%;\n transform: translate(-50%,-50%);\n}\n\n.switch input {\n opacity: 0;\n height: 0;\n width: 0;\n}\n\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: 20px;\n border: 1px solid rgba(0,0,0,0.2);\n border-style: outset;\n background-color: white;\n transition: 0.4s;\n}\n\n.slider::before {\n content: \"🌞\";\n font-size: 22px;\n line-height: 15px;\n border-radius: 100%;\n position: absolute;\n left: -0.8px;\n top: 8px;\n background-color: transparent;\n transition: 0.4s;\n}\n\n.switch > input:checked + .slider {\n background-color: #000429;\n}\n\n.switch > input:checked + .slider:before {\n content: \"🌑\";\n font-size: 22px;\n line-height: 25px;\n background-color: transparent;\n transform: translateY(24px);\n}"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"99b7cf","snapshot":null,"tags":null,"title":"switch by Javierrocadev","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1351,"cssLen":3072,"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","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}.absolute{position:absolute}.relative{position:relative}.left-1{left:0.25rem}.left-12{left:3rem}.top-1{top:0.25rem}.inline-flex{display:inline-flex}.h-10{height:2.5rem}.h-12{height:3rem}.w-10{width:2.5rem}.w-24{width:6rem}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.rounded-full{border-radius:9999px}.bg-rose-400{--tw-bg-opacity:1;background-color:rgb(251 113 133 / var(--tw-bg-opacity))}.stroke-gray-900{stroke:#111827}.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-300{transition-duration:300ms}.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-10::after{content:var(--tw-content);height:2.5rem}.after\\:w-10::after{content:var(--tw-content);width:2.5rem}.after\\:items-center::after{content:var(--tw-content);align-items:center}.after\\:justify-center::after{content:var(--tw-content);justify-content:center}.after\\:rounded-full::after{content:var(--tw-content);border-radius:9999px}.after\\:bg-gray-50::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.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)}.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: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:07:51.000Z","isPrivate":0,"projectId":"a047d4","snapshot":null,"tags":null,"title":"switch by Bodyhc","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":269,"cssLen":1245,"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: 100px;\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 #999999;\n border-radius: 50px;\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: 30px;\n padding: 0;\n line-height: 30px;\n font-size: 20px;\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: \"ON\";\n padding-left: 18px;\n background-color: #437A99;\n color: #FFFFFF;\n}\n\n.flipswitch-inner:after {\n content: \"OFF\";\n padding-right: 18px;\n background-color: #FFFFFF;\n color: #437A99;\n text-align: right;\n}\n\n.flipswitch-switch {\n width: 35px;\n margin: -2.5px;\n background: #FFFFFF;\n border: 1px solid #999999;\n border-radius: 50px;\n position: absolute;\n top: 0;\n bottom: 0;\n right: 67px;\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:07:51.000Z","isPrivate":0,"projectId":"c937bd","snapshot":null,"tags":null,"title":"switch by adamgiebl","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":88,"cssLen":804,"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: #ccc;\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: 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(1.5em);\n}"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"4bf41a","snapshot":null,"tags":null,"title":"switch by nhfiz","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":284,"cssLen":1284,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\t\n\tON\n\t\n\tOFF\n\t\n\tAUTO\n

","css":"/* Multiple Toggle Switch by Abu Shafiyya */\n\nfieldset {\n border: 0;\n}\n\n/* Hide default radio */\n.radio input[type=\"radio\"] {\n position: absolute;\n visibility: hidden;\n display: none;\n opacity: 0;\n z-index: -1;\n}\n\n/* Customizing label */\n.radio label {\n position: relative;\n padding: 10px 20px 10px 25px;\n cursor: pointer;\n border-radius: 20px;\n color: #2196F3;\n margin: 0px 5px;\n font-weight: 600;\n text-transform: uppercase;\n}\n\n.radio label, .radio label::before {\n -webkit-transition: .25s all ease;\n transition: .25s all ease;\n}\n\n.radio label::before {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n content: \" \";\n position: absolute;\n top: 30%;\n left: 0;\n width: 1em;\n height: 1em;\n border: 2px solid #2196F3;\n}\n\n.radio input[type=\"radio\"] + label::before {\n border-radius: 1em;\n}\n\n\n/* Checked toggle */\n.radio input[type=\"radio\"]:checked + label {\n color: #fff;\n background: #2196F3;\n z-index: 1;\n}\n\n.radio input[type=\"radio\"]:checked + label {\n padding: 10px 20px 10px 20px;\n}\n\n.radio input[type=\"radio\"]:checked + label::before {\n top: 4px;\n width: 100%;\n height: 2em;\n z-index: -1;\n}\n\n.radio:hover input[type=\"radio\"]:checked + label {\n -webkit-box-shadow: #2195f338 0px 0px 0px 25px;\n box-shadow: #2195f338 0px 0px 0px 25px;\n}"},{"created":"2024-01-22T17:07:50.000Z","isPrivate":0,"projectId":"1c614d","snapshot":null,"tags":null,"title":"switch by nihad-abbasov","updated":"2024-01-22T17:07:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":124,"cssLen":3556,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n\n","css":"/* switch settings 👇 */\n\n.ui-switch {\n /* switch */\n --switch-bg: rgb(135, 150, 165);\n --switch-width: 48px;\n --switch-height: 20px;\n /* circle */\n --circle-diameter: 32px;\n --circle-bg: rgb(232, 89, 15);\n --circle-inset: calc((var(--circle-diameter) - var(--switch-height)) / 2);\n}\n\n.ui-switch input {\n display: none;\n}\n\n.slider {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: var(--switch-width);\n height: var(--switch-height);\n background: var(--switch-bg);\n border-radius: 999px;\n position: relative;\n cursor: pointer;\n}\n\n.slider .circle {\n top: calc(var(--circle-inset) * -1);\n left: 0;\n width: var(--circle-diameter);\n height: var(--circle-diameter);\n position: absolute;\n background: var(--circle-bg);\n border-radius: inherit;\n background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNmZmYiCiAgICAgICAgZD0iTTkuMzA1IDEuNjY3VjMuNzVoMS4zODlWMS42NjdoLTEuMzl6bS00LjcwNyAxLjk1bC0uOTgyLjk4Mkw1LjA5IDYuMDcybC45ODItLjk4Mi0xLjQ3My0xLjQ3M3ptMTAuODAyIDBMMTMuOTI3IDUuMDlsLjk4Mi45ODIgMS40NzMtMS40NzMtLjk4Mi0uOTgyek0xMCA1LjEzOWE0Ljg3MiA0Ljg3MiAwIDAwLTQuODYyIDQuODZBNC44NzIgNC44NzIgMCAwMDEwIDE0Ljg2MiA0Ljg3MiA0Ljg3MiAwIDAwMTQuODYgMTAgNC44NzIgNC44NzIgMCAwMDEwIDUuMTM5em0wIDEuMzg5QTMuNDYyIDMuNDYyIDAgMDExMy40NzEgMTBhMy40NjIgMy40NjIgMCAwMS0zLjQ3MyAzLjQ3MkEzLjQ2MiAzLjQ2MiAwIDAxNi41MjcgMTAgMy40NjIgMy40NjIgMCAwMTEwIDYuNTI4ek0xLjY2NSA5LjMwNXYxLjM5aDIuMDgzdi0xLjM5SDEuNjY2em0xNC41ODMgMHYxLjM5aDIuMDg0di0xLjM5aC0yLjA4NHpNNS4wOSAxMy45MjhMMy42MTYgMTUuNGwuOTgyLjk4MiAxLjQ3My0xLjQ3My0uOTgyLS45ODJ6bTkuODIgMGwtLjk4Mi45ODIgMS40NzMgMS40NzMuOTgyLS45ODItMS40NzMtMS40NzN6TTkuMzA1IDE2LjI1djIuMDgzaDEuMzg5VjE2LjI1aC0xLjM5eiIgLz4KPC9zdmc+\");\n background-repeat: no-repeat;\n background-position: center center;\n -webkit-transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n -o-transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);\n ;\n}\n\n.slider .circle::before {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n background: rgba(255, 255, 255, 0.75);\n border-radius: inherit;\n -webkit-transition: all 500ms;\n -o-transition: all 500ms;\n transition: all 500ms;\n opacity: 0;\n}\n\n/* actions */\n\n.ui-switch input:checked+.slider .circle {\n left: calc(100% - var(--circle-diameter));\n background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNmZmYiCiAgICAgICAgZD0iTTQuMiAyLjVsLS43IDEuOC0xLjguNyAxLjguNy43IDEuOC42LTEuOEw2LjcgNWwtMS45LS43LS42LTEuOHptMTUgOC4zYTYuNyA2LjcgMCAxMS02LjYtNi42IDUuOCA1LjggMCAwMDYuNiA2LjZ6IiAvPgo8L3N2Zz4=\");\n background-color: rgb(0, 56, 146);\n}\n\n.ui-switch input:active+.slider .circle::before {\n -webkit-transition: 0s;\n -o-transition: 0s;\n transition: 0s;\n opacity: 1;\n width: 0;\n height: 0;\n}"},{"created":"2024-01-22T17:07:50.000Z","isPrivate":0,"projectId":"29ea78","snapshot":null,"tags":null,"title":"switch by Javierrocadev","updated":"2024-01-22T17:07:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":738,"cssLen":4378,"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-8 {\n height: 2rem\n}\n\n.w-20 {\n width: 5rem\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-r {\n background-image: linear-gradient(to right, var(--tw-gradient-stops))\n}\n\n.from-rose-400 {\n --tw-gradient-from: #fb7185 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(251 113 133 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)\n}\n\n.to-red-900 {\n --tw-gradient-to: #7f1d1d var(--tw-gradient-to-position)\n}\n\n.shadow-inner {\n --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\n --tw-shadow-colored: inset 0 2px 4px 0 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.shadow-gray-900 {\n --tw-shadow-color: #111827;\n --tw-shadow: var(--tw-shadow-colored)\n}\n\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px\n}\n\n.ring-2 {\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(2px + 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.ring-gray-900 {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity))\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-2::after {\n content: var(--tw-content);\n left: -0.5rem\n}\n\n.after\\:-top-2::after {\n content: var(--tw-content);\n top: -0.5rem\n}\n\n.after\\:flex::after {\n content: var(--tw-content);\n display: flex\n}\n\n.after\\:h-12::after {\n content: var(--tw-content);\n height: 3rem\n}\n\n.after\\:w-12::after {\n content: var(--tw-content);\n width: 3rem\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\\:border-4::after {\n content: var(--tw-content);\n border-width: 4px\n}\n\n.after\\:border-gray-900::after {\n content: var(--tw-content);\n --tw-border-opacity: 1;\n border-color: rgb(17 24 39 / var(--tw-border-opacity))\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-\\[\\'\\'\\]::after{--tw-content:'';content:var(--tw-content)}.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-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: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-gray-900{--tw-ring-opacity:1;--tw-ring-color:rgb(17 24 39 / var(--tw-ring-opacity))}"},{"created":"2024-01-22T17:07:50.000Z","isPrivate":0,"projectId":"67c7ca","snapshot":null,"tags":null,"title":"switch by csemszepp","updated":"2024-01-22T17:07:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1502,"cssLen":3730,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n\t\n\t\n\t\n\tDark Mode\n\n

","css":":root {\n --hue: 223;\n --bg: hsl(var(--hue),10%,90%);\n --fg: hsl(var(--hue),10%,10%);\n --primary: hsl(var(--hue),90%,50%);\n --trans-dur: 0.3s;\n --trans-timing: cubic-bezier(0.76,0.05,0.24,0.95);\n --trans-timing-in: cubic-bezier(0.76,0.05,0.86,0.06);\n --trans-timing-out: cubic-bezier(0.05,0.76,0.06,0.86);\n font-size: calc(40px + (80 - 40) * (100px - 320px) / (2560 - 320));\n}\n\n.container,\n.switch__input {\n color: var(--fg);\n font: 1em/1.5 sans-serif;\n}\n\n.container {\n background-color: var(--bg);\n display: flex;\n height: 100%;\n transition: background-color var(--trans-dur),\n\t\tcolor var(--trans-dur);\n}\n\n.container:has(.switch__input:checked) {\n background-color: var(--fg);\n color: var(--bg);\n}\n\n.switch {\n margin: auto;\n position: relative;\n}\n\n.switch__icon,\n.switch__input {\n display: block;\n}\n\n.switch__icon {\n position: absolute;\n top: 0.375em;\n right: 0.375em;\n width: 0.75em;\n height: 0.75em;\n transition: opacity calc(var(--trans-dur) / 2),\n\t\ttransform calc(var(--trans-dur) / 2);\n}\n\n.switch__icon polyline {\n transition: stroke-dashoffset calc(var(--trans-dur) / 2);\n}\n\n.switch__icon--light,\n.switch__icon--light polyline {\n transition-delay: calc(var(--trans-dur) / 2);\n transition-timing-function: var(--trans-timing-out);\n}\n\n.switch__icon--dark {\n opacity: 0;\n transform: translateX(-0.75em) rotate(30deg) scale(0.75);\n transition-timing-function: var(--trans-timing-in);\n}\n\n.switch__input {\n background-color: hsl(210,90%,70%);\n border-radius: 0.75em;\n box-shadow: 0 0 0 0.125em hsla(var(--hue),90%,50%,0),\n\t\t0.125em 0.125em 0.25em hsla(var(--hue),90%,10%,0.2);\n outline: transparent;\n position: relative;\n width: 3em;\n height: 1.5em;\n -webkit-appearance: none;\n appearance: none;\n -webkit-tap-highlight-color: transparent;\n transition: background-color var(--trans-dur) var(--trans-timing),\n\t\tbox-shadow 0.15s linear;\n}\n\n.switch__input:focus-visible {\n box-shadow: 0 0 0 0.125em hsl(var(--hue),90%,50%),\n\t\t0.125em 0.125em 0.25em hsla(var(--hue),90%,10%,0.2);\n}\n\n.switch__input:before,\n.switch__input:after {\n content: \"\";\n display: block;\n position: absolute;\n}\n\n.switch__input:before {\n background-color: hsl(50,90%,50%);\n border-radius: inherit;\n mask-image: linear-gradient(120deg,hsl(0,0%,0%) 20%,hsla(0,0%,0%,0) 80%);\n -webkit-mask-image: linear-gradient(120deg,hsl(0,0%,0%) 20%,hsla(0,0%,0%,0) 80%);\n inset: 0;\n transition: background-color var(--trans-dur) var(--trans-timing);\n}\n\n.switch__input:after {\n background-color: hsl(0,0%,100%);\n border-radius: 50%;\n box-shadow: 0.05em 0.05em 0.05em hsla(var(--hue),90%,10%,0.1);\n top: 0.125em;\n left: 0.125em;\n width: 1.25em;\n height: 1.25em;\n transition: background-color var(--trans-dur) var(--trans-timing),\n\t\ttransform var(--trans-dur) var(--trans-timing);\n z-index: 1;\n}\n\n.switch__input:checked {\n background-color: hsl(290,90%,40%);\n}\n\n.switch__input:checked:before {\n background-color: hsl(220,90%,40%);\n}\n\n.switch__input:checked:after {\n background-color: hsl(0,0%,0%);\n transform: translateX(1.5em);\n}\n\n.switch__input:checked ~ .switch__icon--light,\n.switch__input:checked ~ .switch__icon--light polyline {\n transition-delay: 0s;\n transition-timing-function: var(--trans-timing-in);\n}\n\n.switch__input:checked ~ .switch__icon--light {\n opacity: 0;\n transform: translateX(-0.75em) rotate(-30deg) scale(0.75);\n}\n\n.switch__input:checked ~ .switch__icon--light polyline {\n stroke-dashoffset: 1.5;\n}\n\n.switch__input:checked ~ .switch__icon--dark {\n opacity: 1;\n transform: translateX(-1.5em);\n transition-delay: calc(var(--trans-dur) / 2);\n transition-timing-function: var(--trans-timing-out);\n}\n\n.switch__sr {\n overflow: hidden;\n position: absolute;\n width: 1px;\n height: 1px;\n}\n"},{"created":"2024-01-22T17:07:50.000Z","isPrivate":0,"projectId":"372a8a","snapshot":null,"tags":null,"title":"switch by faxriddin20","updated":"2024-01-22T17:07:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":91,"cssLen":960,"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 inset: 0;\n background: black;\n border-radius: 50px;\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n display: flex;\n align-items: center;\n justify-content: center;\n height: 2em;\n width: 2em;\n inset: 0;\n background-color: white;\n border-radius: 50px;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.switch input:checked + .slider {\n background: lime;\n}\n\n.switch input:focus + .slider {\n box-shadow: 0 0 1px #0974f1;\n}\n\n.switch input:checked + .slider:before {\n transform: translateX(1.6em);\n}\n"}]}},"actionData":null,"errors":null}