{"loaderData":{"0":null,"0-3":{"total":7518,"projects":[{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"1c2db7","snapshot":null,"tags":null,"title":"input by SanguinoCastro","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":439,"cssLen":1328,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Picture\n \n

\n","css":".flex {\n display: flex;\n}\n.grid {\n display: grid;\n}\n.w-full {\n width: 100%;\n}\n.max-w-xs {\n max-width: 20rem;\n}\n.items-center {\n align-items: center;\n}\n.gap-1 {\n gap: 0.25rem;\n}\n.gap-1\\.5 {\n gap: 0.375rem;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.border {\n border-width: 1px;\n}\n.border-blue-300 {\n --tw-border-opacity: 1;\n border-color: rgb(147 197 253 / var(--tw-border-opacity));\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.font-medium {\n font-weight: 500;\n}\n.leading-none {\n line-height: 1;\n}\n.text-gray-400 {\n --tw-text-opacity: 1;\n color: rgb(156 163 175 / var(--tw-text-opacity));\n}\n.file\\:border-0::file-selector-button {\n border-width: 0px;\n}\n.file\\:bg-blue-600::file-selector-button {\n --tw-bg-opacity: 1;\n background-color: rgb(37 99 235 / var(--tw-bg-opacity));\n}\n.file\\:text-sm::file-selector-button {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.file\\:font-medium::file-selector-button {\n font-weight: 500;\n}\n.file\\:text-white::file-selector-button {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.peer:disabled ~ .peer-disabled\\:cursor-not-allowed {\n cursor: not-allowed;\n}\n.peer:disabled ~ .peer-disabled\\:opacity-70 {\n opacity: 0.7;\n}\n"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"4e76cb","snapshot":null,"tags":null,"title":"input by roroland","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":186,"cssLen":1891,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n My nice input\n \n","css":".label {\n --border: rgba(66, 66, 66, 0.733);\n --bgLabel: rgba(120,120,120,1);\n --bgInput: rgba(255,255,255,1);\n --color-light: rgb(98, 0, 255);\n --color-light-a: rgb(133, 123, 150);\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-template-rows: min-content min-content;\n background: var(--bgLabel);\n position: relative;\n font-size: .65rem;\n transition: all .3s ease-out;\n}\n\n.label > .label-title {\n border: 1px solid var(--color-light);\n color: var(--color-light);\n box-shadow: 0 2px 2px rgba(120,120,120,.25);\n padding: .25em .5em;\n background-color: var(--bgInput);\n grid-column: 1/span 1;\n grid-row: 1/span 1;\n position: relative;\n border-radius: 4px;\n translate: 10px -10px;\n transition: all .5s ease-out .5s;\n z-index: 10;\n}\n\n.label:focus .input,\n.label:focus-within .input {\n background-color: var(--bgInput);\n padding: 1em;\n color: var(--color-light);\n border: 2px solid var(--color-light);\n outline: 2px solid var(--color-light);\n outline-offset: -2px;\n border-radius: 12px;\n box-shadow: 0 5px 10px rgba(98, 0, 255, .25), 0 -5px 20px rgba(98, 0, 255,.1);\n scale: 1.15;\n transition: all .5s cubic-bezier(0,1.46,1,1.62) .3s;\n}\n\n.label:focus,\n.label:focus-within .label-title {\n translate: 10px -20px;\n border-radius: 4px 4px 0 0;\n z-index: 0;\n transition: all .3s cubic-bezier(0,1.46,1,1.62);\n}\n\n.input {\n appearance: none;\n border-top: 2px solid transparent;\n border-right: 2px solid transparent;\n border-bottom: 2px solid var(--color-light);\n border-left: 2px solid transparent;\n background-color: var(--bgInput);\n caret-color: var(--color-light);\n min-width: 200px;\n padding: 1.25em 1em .25em;\n outline: 0px solid var(--color-light);\n grid-column: 1/-1;\n grid-row: 1 / -1;\n position: relative;\n transition: all .3s cubic-bezier(.5,.6,.5,.62);\n z-index: 0;\n}\n\n.input, \n.input::placeholder {\n color: var(--color-light-a);\n}"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"0507a9","snapshot":null,"tags":null,"title":"input by OnCloud125252","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":551,"cssLen":499,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

","css":".inputBox_container {\n display: flex;\n align-items: center;\n flex-direction: row;\n max-width: 14em;\n width: fit-content;\n height: fit-content;\n background-color: #5c6370;\n border-radius: 0.8em;\n overflow: hidden;\n}\n\n.search_icon {\n height: 1em;\n padding: 0 0.5em 0 0.8em;\n fill: #abb2bf;\n}\n\n.inputBox {\n background-color: transparent;\n color: #ffffff;\n outline: none;\n width: 100%;\n border: 0;\n padding: 0.5em 1.5em 0.5em 0;\n font-size: 1em;\n}\n\n::placeholder {\n color: #abb2bf;\n}"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"7f4d64","snapshot":null,"tags":null,"title":"input by Yaya12085","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":933,"cssLen":2458,"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":".absolute{position:absolute}.relative{position:relative}.inset-y-1{top:0.25rem;bottom:0.25rem}.right-1{right:0.25rem}.mt-6{margin-top:1.5rem}.block{display:block}.flex{display:flex}.aspect-square{aspect-ratio:1 / 1}.h-full{height:100%}.w-4{width:1rem}.w-full{width:100%}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.rounded-2xl{border-radius:1rem}.rounded-xl{border-radius:0.75rem}.border{border-width:1px}.border-neutral-300{--tw-border-opacity:1;border-color:rgb(212 212 212 / var(--tw-border-opacity))}.bg-neutral-950{--tw-bg-opacity:1;background-color:rgb(10 10 10 / var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.py-4{padding-top:1rem;padding-bottom:1rem}.pl-6{padding-left:1.5rem}.pr-20{padding-right:5rem}.text-base\\/6{font-size:1rem;line-height:1.5rem}.text-neutral-950{--tw-text-opacity:1;color:rgb(10 10 10 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.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)}.ring-transparent{--tw-ring-color:transparent}.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}.placeholder\\:text-neutral-500::placeholder{--tw-text-opacity:1;color:rgb(115 115 115 / var(--tw-text-opacity))}.hover\\:bg-neutral-800:hover{--tw-bg-opacity:1;background-color:rgb(38 38 38 / var(--tw-bg-opacity))}.focus\\:border-neutral-950:focus{--tw-border-opacity:1;border-color:rgb(10 10 10 / var(--tw-border-opacity))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-neutral-950\\/5:focus{--tw-ring-color:rgb(10 10 10 / 0.05)}"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"49df95","snapshot":null,"tags":null,"title":"input by laminelawal","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":69,"cssLen":333,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".input {\n padding: 10px;\n width: 120px;\n border: none;\n outline: none;\n border-radius: 5px;\n box-shadow: 0 1px gray;\n font-size: 18px;\n transition: width 0.3s;\n font-family: Consolas,monaco,monospace;\n}\n\n.input:focus {\n outline: 1px solid blue;\n box-shadow: none;\n width: 230px;\n}\n\n.input::placeholder {\n color: blue;\n}"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"1d9f5f","snapshot":null,"tags":null,"title":"input by elijahgummer","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":80,"cssLen":535,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".input {\n width: 200px;\n padding: 12px;\n border: 2px solid #3498db;\n border-radius: 8px;\n outline: none;\n font-size: 18px;\n transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;\n background-color: #fff;\n color: #333;\n box-sizing: border-box;\n}\n\n.input:focus {\n border-color: #2980b9;\n box-shadow: 0 0 15px rgba(52, 152, 219, 0.5);\n transform: scale(1.02);\n}\n\n/* Placeholder Styling */\n.input::placeholder {\n color: #aaa;\n font-style: italic;\n}\n\n/* Hover Effect */\n.input:hover {\n background-color: #f0f8ff;\n}\n"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"dcd16a","snapshot":null,"tags":null,"title":"input by akshat-patel28","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":488,"cssLen":1614,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n\n

","css":".input-div {\n position: relative;\n width: 100px;\n height: 100px;\n border-radius: 50%;\n border: 2px solid rgb(1, 235, 252);\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n box-shadow: 0px 0px 100px rgb(1, 235, 252) , inset 0px 0px 10px rgb(1, 235, 252),0px 0px 5px rgb(255, 255, 255);\n animation: flicker 2s linear infinite;\n}\n\n.icon {\n color: rgb(1, 235, 252);\n font-size: 2rem;\n cursor: pointer;\n animation: iconflicker 2s linear infinite;\n}\n\n.input {\n position: absolute;\n opacity: 0;\n width: 100%;\n height: 100%;\n cursor: pointer !important;\n}\n\n@keyframes flicker {\n 0% {\n border: 2px solid rgb(1, 235, 252);\n box-shadow: 0px 0px 100px rgb(1, 235, 252) , inset 0px 0px 10px rgb(1, 235, 252),0px 0px 5px rgb(255, 255, 255);\n }\n\n 5% {\n border: none;\n box-shadow: none;\n }\n\n 10% {\n border: 2px solid rgb(1, 235, 252);\n box-shadow: 0px 0px 100px rgb(1, 235, 252) , inset 0px 0px 10px rgb(1, 235, 252),0px 0px 5px rgb(255, 255, 255);\n }\n\n 25% {\n border: none;\n box-shadow: none;\n }\n\n 30% {\n border: 2px solid rgb(1, 235, 252);\n box-shadow: 0px 0px 100px rgb(1, 235, 252) , inset 0px 0px 10px rgb(1, 235, 252),0px 0px 5px rgb(255, 255, 255);\n }\n\n 100% {\n border: 2px solid rgb(1, 235, 252);\n box-shadow: 0px 0px 100px rgb(1, 235, 252) , inset 0px 0px 10px rgb(1, 235, 252),0px 0px 5px rgb(255, 255, 255);\n }\n}\n\n@keyframes iconflicker {\n 0% {\n opacity: 1;\n }\n\n 5% {\n opacity: 0.2;\n }\n\n 10% {\n opacity: 1;\n }\n\n 25% {\n opacity: 0.2;\n }\n\n 30% {\n opacity: 1;\n }\n\n 100% {\n opacity: 1;\n }\n}"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"0ba344","snapshot":null,"tags":null,"title":"input by vinodjangid07","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":602,"cssLen":768,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n\n

","css":".InputContainer {\n height: 35px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgb(8, 8, 8);\n overflow: hidden;\n padding: 0px 5px 0px 15px;\n border: 1px solid rgba(255, 255, 255, 0.322);\n border-radius: 10px;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.075);\n}\n\n.input {\n width: 170px;\n height: 100%;\n border: none;\n outline: none;\n font-size: 0.9em;\n caret-color: rgb(255, 81, 0);\n background-color: rgb(8, 8, 8);\n font-weight: 600;\n color: white;\n}\n\n.visaCard {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 40px;\n height: 25px;\n background-color: rgb(8, 8, 8);\n pointer-events: none;\n border: 1px solid rgba(255, 255, 255, 0.068);\n border-radius: 7px;\n}\n"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"1cd8d7","snapshot":null,"tags":null,"title":"input by SSpisso","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":75,"cssLen":511,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".input {\n background-color: #383838;\n border: 1ex solid none;\n border-top-width: 1.7em;\n margin: 0;\n padding: 0;\n color: #383838;\n word-wrap: break-word;\n outline: 7px solid #383838;\n height: 30px;\n font-size: 17px;\n text-align: center;\n transition: all .5s;\n max-width: 190px;\n font-weight: bold;\n font-family: 'Courier New', Courier, monospace;\n}\n\n.input:hover {\n border-top-width: 0.2em;\n background-color: #f1e8e8;\n}\n\n.input:focus {\n border-top-width: 0.2em;\n background-color: #f1e8e8;\n}"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"ce2486","snapshot":null,"tags":null,"title":"input by absoluteSTrange","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":983,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"input {\n display: inline-block;\n max-width: 196px;\n -webkit-box-sizing: content-box;\n -moz-box-sizing: content-box;\n box-sizing: content-box;\n padding: 10px 20px;\n border: 5px solid #1fbc00;\n -webkit-border-radius: 11px;\n border-radius: 11px;\n font: normal 19px/normal \"Courier New\", Courier, monospace;\n color: rgba(42,255,0,1);\n -o-text-overflow: clip;\n text-overflow: clip;\n background: rgba(45,45,45,1);\n box-shadow: 0 0 9px 4px rgba(0,0,0,0.15) , -1px 4px 8px -1px rgba(0,0,0,0.49) inset;\n text-shadow: 1px 1px 0 rgba(255,255,255,0.66);\n transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);\n -webkit-transform: rotateX(-16.62deg) rotateY(-28.64788975654116deg);\n transform: rotateX(-16.62deg) rotateY(-28.64788975654116deg);\n}\n\ninput:hover {\n -webkit-transform: rotateX(-15.62deg) rotateY(-23.65deg);\n transform: rotateX(-15.62deg) rotateY(-23.65deg);\n}\n\n.search__icon {\n height: 1.3em;\n width: 1.3em;\n fill: #b4b4b4;\n}\n\ninput:focus {\n outline: none;\n}"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"41f87f","snapshot":null,"tags":null,"title":"input by DellBee","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":297,"cssLen":1987,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n Enter Text\n

","css":"/* use it in dark theme */\n.input-container {\n position: relative;\n margin: 50px auto;\n width: 190px;\n}\n\n.input-container input[type=\"text\"] {\n font-size: 20px;\n color: rgb(255, 255, 255);\n border: none;\n border-bottom: 2px solid #a5a2a2;\n outline: none;\n width: 100%;\n background-color: transparent;\n}\n\n.label {\n transition: all 0.3s ease;\n color: #d3d2d2;\n position: absolute;\n top: 0;\n left: 0;\n pointer-events: none;\n}\n\n.input-container input[type=\"text\"]:focus~.label,\n .input-container input[type=\"text\"]:valid~.label {\n top: -20px;\n transition: 0.3s;\n color: rgb(172, 46, 172);\n}\n\n.input-container .underline {\n position: absolute;\n bottom: 4px;\n left: -7px;\n height: 2px;\n width: 110%;\n background-color: rgb(172, 46, 172);\n transform: scaleX(0);\n}\n\n.input-container .sideline {\n position: relative;\n bottom: 15px;\n right: 18px;\n height: 2px;\n width: 18%;\n background-color: rgb(172, 46, 172);\n transform: scaleX(0);\n rotate: 90deg;\n}\n\n.input-container .upperline {\n position: absolute;\n bottom: 30px;\n left: -8px;\n height: 2px;\n width: 110%;\n background-color: rgb(172, 46, 172);\n transform: scaleX(0);\n}\n\n.input-container .line {\n position: relative;\n bottom: 17px;\n left: 178px;\n height: 2px;\n width: 18%;\n background-color: rgb(172, 46, 172);\n transform: scaleX(0);\n rotate: 90deg;\n}\n\n.input-container input[type=\"text\"]:focus~.underline,\n .input-container input[type=\"text\"]:valid~.underline {\n transform: scaleX(1);\n transition: 1s;\n}\n\n.input-container input[type=\"text\"]:focus~.sideline,\n .input-container input[type=\"text\"]:valid~.sideline {\n transform: scaleX(1);\n transition: 1s;\n}\n\n.input-container input[type=\"text\"]:focus~.upperline,\n .input-container input[type=\"text\"]:valid~.upperline {\n transform: scaleX(1);\n transition: 1s;\n}\n\n.input-container input[type=\"text\"]:focus~.line,\n .input-container input[type=\"text\"]:valid~.line {\n transform: scaleX(1);\n transition: 1s;\n}"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"b42214","snapshot":null,"tags":null,"title":"input by ErzenXz","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":77,"cssLen":642,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".input {\n background-color: #F4F4F4;\n border: none;\n border-radius: 10px;\n box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);\n color: #333;\n font-family: \"Helvetica Neue\", sans-serif;\n font-size: 16px;\n padding: 10px;\n width: 100%;\n max-width: 200px;\n height: 50px;\n line-height: 30px;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n transition: background-color 0.3s ease-in-out;\n}\n\n.input:focus {\n background-color: #EAEAEA;\n}\n\n.input:disabled {\n background-color: #DADADA;\n color: #A3A3A3;\n}\n\n.input:read-only {\n background-color: #F4F4F4;\n color: #A3A3A3;\n cursor: not-allowed;\n}"}]}},"actionData":null,"errors":null}