{"loaderData":{"0":null,"0-3":{"total":7356,"projects":[{"created":"2024-01-22T17:16:07.000Z","isPrivate":0,"projectId":"46ba8c","snapshot":null,"tags":null,"title":"input by Christardev","updated":"2024-01-22T17:16:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":85,"cssLen":301,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".password {\n outline: none;\n max-width: 190px;\n padding: 8px;\n background-color: #d4cbcb;\n border-radius: 12px;\n border: 4px solid #000000;\n width: auto;\n font-weight: bold;\n font-style: italic;\n}\n\n.password:hover {\n background-color: #6ad5f0;\n outline: none;\n border: 4px solid #000000;\n}"},{"created":"2024-01-22T17:16:06.000Z","isPrivate":0,"projectId":"a6ab5c","snapshot":null,"tags":null,"title":"input by PriyanshuGupta28","updated":"2024-01-22T17:16:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":468,"cssLen":620,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n \n \n \n \n \n \n \n

\n","css":".rating {\n display: flex;\n flex-direction: row-reverse;\n /* Reverse the order of the stars */\n font-size: 0;\n /* Remove the space between the elements */\n}\n\n.rating input[type=\"radio\"] {\n display: none;\n /* Hide the radio buttons */\n}\n\n.rating label {\n font-size: 30px;\n color: rgba(187, 183, 183, 0.726);\n /* Empty star color */\n margin: 0 2px;\n cursor: pointer;\n}\n\n.rating label:before {\n content: \"\\2605\";\n /* Unicode character for filled star */\n}\n\n.rating input[type=\"radio\"]:checked ~ label:before {\n content: \"\\2606\";\n /* Unicode character for empty star */\n color: #016bf5;\n /* Filled star color */\n}\n"},{"created":"2024-01-22T17:16:06.000Z","isPrivate":0,"projectId":"b5ede2","snapshot":null,"tags":null,"title":"input by escannord","updated":"2024-01-22T17:16:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":76,"cssLen":555,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".input {\n max-width: 190px;\n height: 2rem;\n background-color: transparent;\n border: 2px solid transparent;\n color: rgb(0, 0, 0);\n padding: 1rem;\n box-shadow: 2px 2px 2px rgb(146, 145, 145),\n inset 2px 2px 2px rgb(219, 219, 219),\n -1px -1px 20px rgba(206, 206, 206, 0.781);\n outline: none;\n border-radius: 10px;\n font-size: medium;\n}\n\n.input:focus {\n box-shadow: 2px 2px 2px rgb(82, 80, 80),\n inset 2px 2px 5px rgba(82, 80, 80, 0.562),\n -1px -1px 5px rgba(170, 167, 167, 0.493),\n inset -1px -1px 5px rgba(187, 185, 185, 0.822);\n}\n"},{"created":"2024-01-22T17:16:06.000Z","isPrivate":0,"projectId":"dc325d","snapshot":null,"tags":null,"title":"input by Gautammsharma","updated":"2024-01-22T17:16:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":668,"cssLen":942,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

","css":".input__container--variant {\n background: linear-gradient(to bottom, #F3FFF9, #F3FFF9);\n border-radius: 30px;\n max-width: 13em;\n padding: 1em 1em;\n}\n\n.shadow__input--variant {\n filter: blur(25px);\n border-radius: 30px;\n background-color: #F3FFF9;\n opacity: 0.5;\n}\n\n.input__button__shadow--variant {\n border-radius: 15px;\n background-color: #07372C;\n padding: 10px;\n border: none;\n}\n\n.input__button__shadow--variant:hover {\n background-color: #3C6659;\n}\n\n.input__search--variant {\n width: 13em;\n align-items: center;\n border-radius: 13em;\n outline: none;\n border: none;\n padding: 0.8em;\n font-size: 1.2em;\n color: #002019;\n background-color: transparent;\n}\n\n.input__search--variant::placeholder {\n color: #002019;\n opacity: 0.7;\n}\n\n.input__container--variant {\n background: linear-gradient(to bottom, #F3FFF9, #F3FFF9);\n border-radius: 1.5em;\n max-width: 14em;\n padding: 1em;\n box-shadow: 0em 1em 3em #beecdc64;\n}\n"},{"created":"2024-01-22T17:16:06.000Z","isPrivate":0,"projectId":"da1342","snapshot":null,"tags":null,"title":"input by PriyanshuGupta28","updated":"2024-01-22T17:16:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":190,"cssLen":1254,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Name:\n \n

","css":".input-container {\n position: relative;\n margin: 20px;\n}\n\nlabel {\n display: block;\n margin-bottom: 5px;\n color: #333;\n}\n\n.input[type=\"text\"] {\n padding: 10px;\n font-size: 16px;\n border: none;\n border-radius: 4px;\n background-color: #f1f1f1;\n color: #333;\n width: 200px;\n outline: none;\n}\n\n.underline {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 0;\n height: 2px;\n background-color: #4158D0;\n background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);\n transition: width 0.3s;\n}\n\n.input[type=\"text\"]:focus + .underline {\n width: 100%;\n}\n\n@keyframes floating-label {\n 0% {\n transform: translateY(0);\n opacity: 1;\n }\n\n 100% {\n transform: translateY(-25px);\n opacity: 0;\n }\n}\n\n.input[type=\"text\"]:placeholder-shown + label {\n position: absolute;\n top: 50%;\n left: 10px;\n transform: translateY(-50%);\n font-size: 14px;\n color: #777;\n pointer-events: none;\n transition: transform 0.3s, font-size 0.3s, color 0.3s;\n}\n\n.input[type=\"text\"]:focus:not(:placeholder-shown) + label {\n transform: translateY(-25px);\n font-size: 12px;\n background-color: #4158D0;\n background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);\n animation: floating-label 0.3s forwards;\n}\n"},{"created":"2024-01-22T17:16:06.000Z","isPrivate":0,"projectId":"b86fa6","snapshot":null,"tags":null,"title":"input by JaydipPrajapati1910","updated":"2024-01-22T17:16:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":504,"cssLen":645,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

\n","css":".group {\n display: flex;\n line-height: 28px;\n align-items: center;\n position: relative;\n max-width: 190px;\n}\n\n.input {\n height: 40px;\n line-height: 28px;\n padding: 0 1rem;\n width: 100%;\n padding-left: 2.5rem;\n outline: none;\n background: linear-gradient(180deg, rgb(56, 56, 56) 0%, rgb(36, 36, 36) 66%, rgb(41, 41, 41) 100%);\n color: #fff;\n transition: .3s ease;\n border: 2px solid;\n border-image: conic-gradient( #00F260, #0575E6,#64f38c) 1;\n}\n\n.input::placeholder {\n color: #fff;\n}\n\n.input:focus::placeholder {\n color: #999;\n}\n\n.icon {\n position: absolute;\n left: 1rem;\n fill: #fff;\n width: 1rem;\n height: 1rem;\n}\n"},{"created":"2024-01-22T17:16:06.000Z","isPrivate":0,"projectId":"5358ab","snapshot":null,"tags":null,"title":"input by Javierrocadev","updated":"2024-01-22T17:16:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":284,"cssLen":905,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".relative{position:relative}.block{display:block}.w-64{width:16rem}.rounded-lg{border-radius:0.5rem}.border{border-width:1px}.border-neutral-500{--tw-border-opacity:1;border-color:rgb(115 115 115 / var(--tw-border-opacity))}.p-2{padding:0.5rem}.p-2\\.5{padding:0.625rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-neutral-900{--tw-text-opacity:1;color:rgb(23 23 23 / var(--tw-text-opacity))}.placeholder-violet-700::placeholder{--tw-placeholder-opacity:1;color:rgb(109 40 217 / var(--tw-placeholder-opacity))}.outline-none{outline:2px solid transparent;outline-offset:2px}.checked\\:bg-emerald-500:checked{--tw-bg-opacity:1;background-color:rgb(16 185 129 / var(--tw-bg-opacity))}.focus\\:border-violet-500:focus{--tw-border-opacity:1;border-color:rgb(139 92 246 / var(--tw-border-opacity))}.focus\\:ring-violet-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(139 92 246 / var(--tw-ring-opacity))}"},{"created":"2024-01-22T17:16:06.000Z","isPrivate":0,"projectId":"5d9386","snapshot":null,"tags":null,"title":"input by Yaya12085","updated":"2024-01-22T17:16:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":639,"cssLen":1515,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Email\n \n

\n","css":".flex{display:flex}.grid{display:grid}.h-10{height:2.5rem}.w-full{width:100%}.max-w-xs{max-width:20rem}.items-center{align-items:center}.gap-1{gap:0.25rem}.gap-1\\.5{gap:0.375rem}.rounded-md{border-radius:0.375rem}.border{border-width:1px}.px-3{padding-left:0.75rem;padding-right:0.75rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-medium{font-weight:500}.leading-none{line-height:1}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity))}.file\\:border-0::file-selector-button{border-width:0px}.file\\:bg-transparent::file-selector-button{background-color:transparent}.file\\:text-sm::file-selector-button{font-size:0.875rem;line-height:1.25rem}.file\\:font-medium::file-selector-button{font-weight:500}.focus-visible\\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\\:ring-2:focus-visible{--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(2px + 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)}.focus-visible\\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-50:disabled{opacity:0.5}.peer:disabled ~ .peer-disabled\\:cursor-not-allowed{cursor:not-allowed}.peer:disabled ~ .peer-disabled\\:opacity-70{opacity:0.7}"},{"created":"2024-01-22T17:16:06.000Z","isPrivate":0,"projectId":"db8289","snapshot":null,"tags":null,"title":"input by Javierrocadev","updated":"2024-01-22T17:16:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":630,"cssLen":2899,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".relative{position:relative}.block{display:block}.w-64{width:16rem}.w-full{width:100%}.overflow-hidden{overflow:hidden}.rounded-lg{border-radius:0.5rem}.border{border-width:1px}.border-neutral-500{--tw-border-opacity:1;border-color:rgb(115 115 115 / var(--tw-border-opacity))}.bg-transparent{background-color:transparent}.p-2{padding:0.5rem}.p-2\\.5{padding:0.625rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-neutral-900{--tw-text-opacity:1;color:rgb(23 23 23 / var(--tw-text-opacity))}.placeholder-violet-700::placeholder{--tw-placeholder-opacity:1;color:rgb(109 40 217 / var(--tw-placeholder-opacity))}.placeholder-opacity-60::placeholder{--tw-placeholder-opacity:0.6}.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)}.before\\:absolute::before{content:var(--tw-content);position:absolute}.before\\:right-0::before{content:var(--tw-content);right:0px}.before\\:h-12::before{content:var(--tw-content);height:3rem}.before\\:w-12::before{content:var(--tw-content);width:3rem}.before\\:rounded-full::before{content:var(--tw-content);border-radius:9999px}.before\\:bg-violet-500::before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(139 92 246 / var(--tw-bg-opacity))}.before\\:blur-lg::before{content:var(--tw-content);--tw-blur:blur(16px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.after\\:absolute::after{content:var(--tw-content);position:absolute}.after\\:right-12::after{content:var(--tw-content);right:3rem}.after\\:top-3::after{content:var(--tw-content);top:0.75rem}.after\\:-z-10::after{content:var(--tw-content);z-index:-10}.after\\:h-20::after{content:var(--tw-content);height:5rem}.after\\:w-20::after{content:var(--tw-content);width:5rem}.after\\:rounded-full::after{content:var(--tw-content);border-radius:9999px}.after\\:bg-rose-300::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(253 164 175 / var(--tw-bg-opacity))}.after\\:blur-lg::after{content:var(--tw-content);--tw-blur:blur(16px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.checked\\:bg-emerald-500:checked{--tw-bg-opacity:1;background-color:rgb(16 185 129 / var(--tw-bg-opacity))}.focus\\:border-violet-500:focus{--tw-border-opacity:1;border-color:rgb(139 92 246 / var(--tw-border-opacity))}.focus\\:ring-violet-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(139 92 246 / var(--tw-ring-opacity))}"},{"created":"2024-01-22T17:16:06.000Z","isPrivate":0,"projectId":"3ddfdb","snapshot":null,"tags":null,"title":"input by omriluz","updated":"2024-01-22T17:16:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":971,"cssLen":857,"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":".pointer-events-none{pointer-events:none}.flex{display:flex}.h-10{height:2.5rem}.w-10{width:2.5rem}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-e-lg{border-start-end-radius:0.5rem;border-end-end-radius:0.5rem}.rounded-s-lg{border-start-start-radius:0.5rem;border-end-start-radius:0.5rem}.bg-green-300{--tw-bg-opacity:1;background-color:rgb(134 239 172 / var(--tw-bg-opacity))}.py-1{padding-top:0.25rem;padding-bottom:0.25rem}.indent-2{text-indent:0.5rem}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.shadow-sm{--tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}"},{"created":"2024-01-22T17:16:06.000Z","isPrivate":0,"projectId":"249b50","snapshot":null,"tags":null,"title":"input by AtharvaMistry","updated":"2024-01-22T17:16:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1156,"cssLen":1920,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Your Input Label\n

\n \n \n \n \n \n \n

\n\n","css":".pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.inset-y-0{top:0px;bottom:0px}.right-0{right:0px}.mb-1{margin-bottom:0.25rem}.mb-6{margin-bottom:1.5rem}.mt-1{margin-top:0.25rem}.block{display:block}.flex{display:flex}.h-6{height:1.5rem}.w-6{width:1.5rem}.w-full{width:100%}.items-center{align-items:center}.rounded-md{border-radius:0.375rem}.border-2{border-width:2px}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.p-4{padding:1rem}.pr-3{padding-right:0.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-extrabold{font-weight:800}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity))}.placeholder-gray-500::placeholder{--tw-placeholder-opacity:1;color:rgb(107 114 128 / var(--tw-placeholder-opacity))}.transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.focus\\:border-blue-700:focus{--tw-border-opacity:1;border-color:rgb(29 78 216 / var(--tw-border-opacity))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}"},{"created":"2024-01-22T17:16:06.000Z","isPrivate":0,"projectId":"217c4d","snapshot":null,"tags":null,"title":"input by catraco","updated":"2024-01-22T17:16:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":115,"cssLen":889,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n

Title

\n \n \n

","css":".container {\n --light: rgb(255, 255, 255);\n --dark: rgb(50, 50, 50);\n --br: 8px;\n}\n\n.container:hover .title {\n opacity: 1;\n}\n\n.input {\n background-color: transparent;\n border: 2px solid white;\n color: var(--light);\n max-width: 200px;\n padding: .5rem;\n border-radius: var(--br);\n outline: none;\n opacity: .8;\n transition: .2s ease-in-out;\n}\n\n.input:focus {\n opacity: 1;\n}\n\n.title {\n border-radius: var(--br);\n transform: translate(-50%, -150%);\n background-color: var(--light);\n transition: .2s ease-in-out;\n opacity: 0;\n color: var(--dark);\n position: absolute;\n font-size: 15px;\n font-weight: 600;\n letter-spacing: 2px;\n padding: .5rem;\n left: 50%;\n}\n\n.title::before {\n transform: translate(-50%, 50%) rotate(45deg);\n background-color: var(--light);\n position: absolute;\n z-index: -1;\n content: '';\n width: 10px;\n height: 10px;\n bottom: 0;\n left: 50%;\n}"}]}},"actionData":null,"errors":null}