{"loaderData":{"0":null,"0-2":{"total":7178,"projects":[{"created":"2024-01-22T17:16:03.000Z","isPrivate":0,"projectId":"1fd217","snapshot":null,"tags":null,"title":"input by EddyBel","updated":"2024-01-22T17:16:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":237,"cssLen":1091,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Username\n \n

What do you want to call yourself?

","css":".input__container {\n max-width: 200px;\n display: flex;\n flex-direction: column;\n gap: 6px;\n background: rgba(255, 255, 255, 0.3);\n padding: 15px;\n border-radius: 20px;\n position: relative;\n}\n\n.input__container::before {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n z-index: -1;\n filter: blur(25px);\n border-radius: 20px;\n background-color: #e499ff;\n background-image: radial-gradient(at 47% 69%, hsla(17,62%,65%,1) 0px, transparent 50%),\nradial-gradient(at 9% 32%, hsla(222,75%,60%,1) 0px, transparent 50%);\n}\n\n.input__label {\n display: block;\n margin-left: 0.4em;\n color: #000;\n text-transform: uppercase;\n font-size: 0.9em;\n font-weight: bold;\n}\n\n.input__description {\n font-size: 0.6em;\n font-weight: bold;\n text-align: center;\n color: rgba(0, 0, 0, 0.5);\n}\n\n.input {\n border: none;\n outline: none;\n width: 100%;\n padding: 0.6em;\n padding-left: 0.9em;\n border-radius: 20px;\n background: #fff;\n transition: background 300ms, color 300ms;\n}\n\n.input:hover,.input:focus {\n background: rgb(0, 0, 0);\n color: #fff;\n}"},{"created":"2024-01-22T17:16:03.000Z","isPrivate":0,"projectId":"bf16de","snapshot":null,"tags":null,"title":"input by PriyanshuGupta28","updated":"2024-01-22T17:16:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":78,"cssLen":750,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".slider {\n -webkit-appearance: none;\n width: 100%;\n height: 10px;\n border-radius: 5px;\n background-color: #4158D0;\n background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);\n outline: none;\n opacity: 0.7;\n -webkit-transition: .2s;\n transition: opacity .2s;\n}\n\n.slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background-color: #4c00ff;\n background-image: linear-gradient(160deg, #4900f5 0%, #80D0C7 100%);\n cursor: pointer;\n}\n\n.slider::-moz-range-thumb {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background-color: #0093E9;\n background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);\n cursor: pointer;\n}\n"},{"created":"2024-01-22T17:16:03.000Z","isPrivate":0,"projectId":"550e2b","snapshot":null,"tags":null,"title":"input by Yaseen549","updated":"2024-01-22T17:16:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":71,"cssLen":302,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".input {\n border: none;\n border-radius: 15px;\n padding: 15px;\n background-color: #e8e8e8;\n box-shadow: 6px 6px 12px #ffffff,\n -6px -6px 12px #c5c5c5;\n font-size: medium;\n font-weight: bold;\n max-width: 200px;\n}\n\n.input:focus {\n outline-color: white;\n place-content: \"Enter your message!\";\n}"},{"created":"2024-01-22T17:16:03.000Z","isPrivate":0,"projectId":"0c7601","snapshot":null,"tags":null,"title":"input by saidbl1","updated":"2024-01-22T17:16:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":69,"cssLen":311,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".input {\n height: 40px;\n border-radius: 8px;\n border: 2px solid hsl(236, 92%, 66%);\n outline: none;\n transition: 200ms ease-in;\n padding-left: 1rem;\n}\n\n.input:focus {\n border-bottom: 4px solid hsl(236, 92%, 66%);\n padding-top: 2px;\n}\n\n.input::placeholder {\n color: hsl(236, 92%, 66%);\n opacity: 0.5;\n}"},{"created":"2024-01-22T17:16:03.000Z","isPrivate":0,"projectId":"e227ea","snapshot":null,"tags":null,"title":"input by ainasoa","updated":"2024-01-22T17:16:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":64,"cssLen":292,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".input {\n max-width: 210px;\n height: 50px;\n border-radius: 7px;\n border: 0;\n outline: auto grey;\n padding-inline: 15px;\n font-size: 16px;\n transform: all 200ms;\n}\n\n.input:focus {\n text-decoration: underline 6px;\n box-shadow: 0 0 50px rgb(255, 255, 255);\n border: 1px solid grey;\n}\n"},{"created":"2024-01-22T17:16:03.000Z","isPrivate":0,"projectId":"bed515","snapshot":null,"tags":null,"title":"input by Amine-maker","updated":"2024-01-22T17:16:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":145,"cssLen":762,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n Name\n

","css":"#label-input {\n transition: all 0.1s ease-in-out;\n color: #2c2c54;\n position: absolute;\n top: 30%;\n left: 18px;\n transform: scale(0.95);\n opacity: 1;\n pointer-events: none;\n}\n\n.input-base {\n border-radius: 10px;\n}\n\n#input:focus ~ label#label-input,\n#input:not(:placeholder-shown) ~ #label-input {\n top: -20% !important;\n left: 2px !important;\n transform: scale(0.8);\n background: white;\n color: black;\n padding: 0 6px;\n opacity: 1;\n}\n\n#input {\n transition: outline 0.2s ease;\n font-size: 1rem;\n outline-color: var(--button-text);\n outline: unset;\n border: 1px solid #bbbbbb;\n padding: 17px 10px 10px 17px;\n width: 100%;\n}\n\n#input:focus {\n box-shadow: 0 0 0 1px #e8e8e8, 0 0 0 3px rgb(92, 127, 202);\n}\n\n.relative {\n position: relative;\n}\n"},{"created":"2024-01-22T17:16:03.000Z","isPrivate":0,"projectId":"7b75b7","snapshot":null,"tags":null,"title":"input by Desarrollo3HQ5","updated":"2024-01-22T17:16:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":448,"cssLen":394,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

\n","css":".flex{display:flex}.flex-row{flex-direction:row}.gap-1{gap:0.25rem}.rounded-md{border-radius:0.375rem}.bg-inherit{background-color:inherit}.bg-white\\/80{background-color:rgb(255 255 255 / 0.8)}.px-1{padding-left:0.25rem;padding-right:0.25rem}.py-1{padding-top:0.25rem;padding-bottom:0.25rem}.pl-1{padding-left:0.25rem}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}"},{"created":"2024-01-22T17:16:03.000Z","isPrivate":0,"projectId":"b8a756","snapshot":null,"tags":null,"title":"input by Jules-gitclerc","updated":"2024-01-22T17:16:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1063,"cssLen":1489,"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","css":".relative {\n position: relative;\n}\n.flex {\n display: flex;\n}\n.h-6 {\n height: 1.5rem;\n}\n.h-9 {\n height: 2.25rem;\n}\n.h-full {\n height: 100%;\n}\n.w-10 {\n width: 2.5rem;\n}\n.items-center {\n align-items: center;\n}\n.justify-center {\n justify-content: center;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.rounded-lg {\n border-radius: 0.5rem;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.border {\n border-width: 1px;\n}\n.border-none {\n border-style: none;\n}\n.border-white {\n --tw-border-opacity: 1;\n border-color: rgb(255 255 255 / var(--tw-border-opacity));\n}\n.border-opacity-20 {\n --tw-border-opacity: 0.2;\n}\n.border-opacity-30 {\n --tw-border-opacity: 0.3;\n}\n.bg-gray-800 {\n --tw-bg-opacity: 1;\n background-color: rgb(31 41 55 / var(--tw-bg-opacity));\n}\n.fill-current {\n fill: currentColor;\n}\n.p-1 {\n padding: 0.25rem;\n}\n.pl-2 {\n padding-left: 0.5rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.font-semibold {\n font-weight: 600;\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.caret-orange-500 {\n caret-color: #f97316;\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),\n 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n"},{"created":"2024-01-22T17:16:03.000Z","isPrivate":0,"projectId":"56d54f","snapshot":null,"tags":null,"title":"input by sabbircoder07","updated":"2024-01-22T17:16:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":94,"cssLen":359,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".input__email {\n width: 100%;\n padding: 10px 18px;\n font-size: 14px;\n font-family: inherit;\n box-shadow: 0 0 0 1px #ffe3e3;\n border: none;\n border-radius: 20px;\n background-color: #fff5f5;\n}\n\n.input__email::placeholder {\n color: #ce9797;\n font-size: 12px;\n}\n\n.input__email:focus {\n outline: none;\n box-shadow: 0 0 0 1px #ffe3e3;\n border: none;\n}\n"},{"created":"2024-01-22T17:16:03.000Z","isPrivate":0,"projectId":"826fda","snapshot":null,"tags":null,"title":"input by TaniaDou","updated":"2024-01-22T17:16:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":146,"cssLen":607,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n Name^*\n

\n","css":".input-box {\n position: relative;\n max-width: 190px;\n}\n\n.input {\n position: relative;\n width: 100%;\n padding: 1.5rem;\n background: none;\n border: solid 1.5px #9e9e9e;\n border-radius: .6rem;\n color: #9e9e9e;\n font-size: 1rem;\n}\n\n.label {\n position: absolute;\n pointer-events: none;\n left: 1rem;\n top: .875rem;\n white-space: nowrap;\n overflow: hidden;\n line-height: 2rem;\n padding-left: 1rem;\n font-size: 1rem;\n color: #9e9e9e;\n transition: 500ms cubic-bezier(0.4,0,0.2,1);\n}\n\n.input:focus~.label, input:valid ~ label {\n top: -6px;\n left: -5px;\n font-size: .875rem;\n color: #9e9e9e;\n}"},{"created":"2024-01-22T17:16:03.000Z","isPrivate":0,"projectId":"aa2722","snapshot":null,"tags":null,"title":"input by lenfear23","updated":"2024-01-22T17:16:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":75,"cssLen":417,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".input {\n max-width: 200px;\n min-height: 40px;\n padding: 10px;\n font-family: 'Courier New', Courier, monospace;\n outline: none;\n background: #e8e8e8;\n box-shadow: 5px 5px 17px #c8c8c8,\n -5px -5px 17px #ffffff;\n border: none;\n border-radius: 10px;\n transition: all .5s;\n}\n\n.input:focus {\n background: #e8e8e8;\n box-shadow: inset 5px 5px 17px #c8c8c8,\n inset -5px -5px 17px #ffffff;\n}"},{"created":"2024-01-22T17:16:03.000Z","isPrivate":0,"projectId":"6ef53a","snapshot":null,"tags":null,"title":"input by OmarN6","updated":"2024-01-22T17:16:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":523,"cssLen":4941,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"/*The eye icon on the password can be stylize with any tool you want\nto use (the only way i know to do this correctly is using JS)\nthis is meant to be wide supported and it really depends on you browsers\nif i realize any way to stylize the eye it could be added in the future\nin other input type*/\n#SubscribeTXT {\n font-size: 20px;\n color: #9fc4d0;\n}\n\nbutton {\n color: #9fc4d0;\n text-decoration: none;\n font-size: 25px;\n border: none;\n background: none;\n font-weight: 600;\n font-family: 'Poppins', sans-serif;\n margin: 10px 0 0;\n}\n\nbutton::before {\n margin-left: auto;\n}\n\nbutton::after, button::before {\n content: '';\n width: 0%;\n height: 2px;\n background: #06aed8;\n display: block;\n transition: 0.5s;\n}\n\nbutton:hover::after, button:hover::before {\n width: 100%;\n}\n\n.container {\n font-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;\n font-style: italic;\n font-weight: bold;\n display: flex;\n margin: auto;\n aspect-ratio: 16/9;\n align-items: center;\n justify-items: center;\n justify-content: center;\n flex-wrap: wrap;\n flex-direction: column;\n gap: 1em;\n}\n\n.input-container {\n filter: drop-shadow(46px 36px 24px #4090b5) drop-shadow(-55px -40px 25px #9e30a9);\n animation: blinkShadowsFilter 8s ease-in infinite;\n}\n\n.input-content {\n display: grid;\n align-content: center;\n justify-items: center;\n align-items: center;\n text-align: center;\n padding-inline: 1em;\n}\n\n.input-content::before {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n filter: blur(40px);\n -webkit-clip-path: polygon(26% 0, 66% 0, 92% 0, 100% 8%, 100% 89%, 91% 100%, 7% 100%, 0 92%, 0 0);\n clip-path: polygon(26% 0, 66% 0, 92% 0, 100% 8%, 100% 89%, 91% 100%, 7% 100%, 0 92%, 0 0);\n background: rgba(122, 251, 255, 0.5568627451);\n transition: all 1s ease-in-out;\n}\n\n.input-content::after {\n content: \"\";\n position: absolute;\n width: 98%;\n height: 98%;\n box-shadow: inset 0px 0px 20px 20px #212121;\n background: repeating-linear-gradient(to bottom, transparent 0%, rgba(64, 144, 181, 0.6) 1px, rgb(0, 0, 0) 3px, hsl(295, 60%, 12%) 5px, #153544 4px, transparent 0.5%), repeating-linear-gradient(to left, hsl(295, 60%, 12%) 100%, hsla(295, 60%, 12%, 0.99) 100%);\n -webkit-clip-path: polygon(26% 0, 31% 5%, 61% 5%, 66% 0, 92% 0, 100% 8%, 100% 89%, 91% 100%, 7% 100%, 0 92%, 0 0);\n clip-path: polygon(26% 0, 31% 5%, 61% 5%, 66% 0, 92% 0, 100% 8%, 100% 89%, 91% 100%, 7% 100%, 0 92%, 0 0);\n animation: backglitch 50ms linear infinite;\n}\n\n.input-dist {\n z-index: 80;\n display: grid;\n align-items: center;\n text-align: center;\n width: 100%;\n padding-inline: 1em;\n padding-block: 1.2em;\n grid-template-columns: 1fr;\n}\n\n.input-type {\n display: flex;\n flex-wrap: wrap;\n flex-direction: column;\n gap: 1em;\n font-size: 1.1rem;\n background-color: transparent;\n width: 100%;\n border: none;\n}\n\n.input-is {\n color: #fff;\n font-size: 0.9rem;\n background-color: transparent;\n width: 100%;\n box-sizing: border-box;\n padding-inline: 0.5em;\n padding-block: 0.7em;\n border: none;\n transition: all 1s ease-in-out;\n border-bottom: 1px solid hsl(221, 26%, 43%);\n}\n\n.input-is:hover {\n transition: all 1s ease-in-out;\n background: linear-gradient(90deg, transparent 0%, rgba(102, 224, 255, 0.2) 27%, rgba(102, 224, 255, 0.2) 63%, transparent 100%);\n}\n\n.input-content:focus-within::before {\n transition: all 1s ease-in-out;\n background: hsla(0, 0%, 100%, 0.814);\n}\n\n.input-is:focus {\n outline: none;\n border-bottom: 1px solid hsl(192, 100%, 100%);\n color: hsl(192, 100%, 88%);\n background: linear-gradient(90deg, transparent 0%, rgba(102, 224, 255, 0.2) 27%, rgba(102, 224, 255, 0.2) 63%, transparent 100%);\n}\n\n.input-is::-moz-placeholder {\n color: hsla(192, 100%, 88%, 0.806);\n}\n\n.input-is::placeholder {\n color: hsla(192, 100%, 88%, 0.806);\n}\n\n@keyframes backglitch {\n 0% {\n box-shadow: inset 0px 20px 20px 30px #212121;\n }\n\n 50% {\n box-shadow: inset 0px -20px 20px 30px hsl(297, 42%, 10%);\n }\n\n to {\n box-shadow: inset 0px 20px 20px 30px #212121;\n }\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg) translate(-50%, 20%);\n }\n\n 50% {\n transform: rotate(180deg) translate(40%, 10%);\n }\n\n to {\n transform: rotate(360deg) translate(-50%, 20%);\n }\n}\n\n@keyframes blinkShadowsFilter {\n 0% {\n filter: drop-shadow(46px 36px 28px rgba(64, 144, 181, 0.3411764706)) drop-shadow(-55px -40px 28px #9e30a9);\n }\n\n 25% {\n filter: drop-shadow(46px -36px 24px rgba(64, 144, 181, 0.8980392157)) drop-shadow(-55px 40px 24px #9e30a9);\n }\n\n 50% {\n filter: drop-shadow(46px 36px 30px rgba(64, 144, 181, 0.8980392157)) drop-shadow(-55px 40px 30px rgba(159, 48, 169, 0.2941176471));\n }\n\n 75% {\n filter: drop-shadow(20px -18px 25px rgba(64, 144, 181, 0.8980392157)) drop-shadow(-20px 20px 25px rgba(159, 48, 169, 0.2941176471));\n }\n\n to {\n filter: drop-shadow(46px 36px 28px rgba(64, 144, 181, 0.3411764706)) drop-shadow(-55px -40px 28px #9e30a9);\n }\n}"}]}},"actionData":null,"errors":null}