{"loaderData":{"0":null,"0-3":{"total":7356,"projects":[{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"7f66f5","snapshot":null,"tags":null,"title":"input by ErzenXz","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":82,"cssLen":412,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".input {\n width: 100%;\n max-width: 220px;\n height: 45px;\n padding: 12px;\n border-radius: 12px;\n border: 1.5px solid lightgrey;\n outline: none;\n transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);\n box-shadow: 0px 0px 20px -18px;\n}\n\n.input:hover {\n border: 2px solid lightgrey;\n box-shadow: 0px 0px 20px -17px;\n}\n\n.input:active {\n transform: scale(0.95);\n}\n\n.input:focus {\n border: 2px solid grey;\n}"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"02d1ee","snapshot":null,"tags":null,"title":"input by Allyhere","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":203,"cssLen":1152,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n Name\n

","css":".input-container {\n --c-text: rgb(50, 50, 80);\n --c-bg: rgb(252, 252, 252);\n --c-outline: rgb(55, 45 , 190);\n display: grid;\n gap: 1ch;\n position: relative;\n max-width: 190px;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n color: black;\n}\n\n.input-field {\n padding: 0.5em 0.75em;\n border-radius: 0.2em;\n border: 1px solid var(--c-border, currentColor);\n color: var(--c-text);\n font-size: 1rem;\n letter-spacing: 0.1ch;\n width: 100%;\n}\n\n.input-field:not(:placeholder-shown) + .input-label {\n transform: translateY(-220%);\n opacity: 1;\n}\n\n.input-field:invalid {\n --c-border: rgb(230, 85, 60);\n --c-text: rgb(230, 85, 60);\n --c-outline: rgb(230, 85, 60);\n}\n\n.input-field:is(:disabled, :read-only) {\n --c-border: rgb(150, 150, 150);\n --c-text: rgb(170, 170, 170);\n}\n\n.input-field:is(:focus, :focus-visible) {\n outline: 2px solid var(--c-outline);\n outline-offset: 2px;\n}\n\n.input-label {\n --timing: 200ms ease-in;\n position: absolute;\n left: 0;\n top: 50%;\n transition: transform var(--timing),\n opacity var(--timing);\n transform: translateY(-50%);\n opacity: 0;\n color: var(--c-text);\n font-weight: 500;\n}\n"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"f08ff4","snapshot":null,"tags":null,"title":"input by Galahhad","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":99,"cssLen":447,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".input {\n max-width: 190px;\n padding: 12px;\n border: none;\n border-radius: 4px;\n box-shadow: 2px 2px 7px 0 rgb(0, 0, 0, 0.2);\n outline: none;\n color: dimgray;\n}\n\n.input:invalid {\n animation: justshake 0.3s forwards;\n color: red;\n}\n\n@keyframes justshake {\n 25% {\n transform: translateX(5px);\n }\n\n 50% {\n transform: translateX(-5px);\n }\n\n 75% {\n transform: translateX(5px);\n }\n\n 100% {\n transform: translateX-(5px);\n }\n}"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"7fb8cd","snapshot":null,"tags":null,"title":"input by Yaseen549","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":84,"cssLen":204,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".input {\n color: #8707ff;\n border: 2px solid #8707ff;\n border-radius: 10px;\n padding: 10px 25px;\n background: transparent;\n max-width: 190px;\n}\n\n.input:active {\n box-shadow: 2px 2px 15px #8707ff inset;\n}\n"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"1db57b","snapshot":null,"tags":null,"title":"input by Javierrocadev","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1259,"cssLen":3097,"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":".absolute{position:absolute}.relative{position:relative}.right-0{right:0px}.top-1{top:0.25rem}.top-1\\.5{top:0.375rem}.block{display:block}.h-8{height:2rem}.w-64{width:16rem}.w-8{width:2rem}.w-full{width:100%}.-rotate-45{--tw-rotate:-45deg;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))}.appearance-none{-webkit-appearance:none;appearance:none}.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-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.stroke-pink-300{stroke:#f9a8d4}.p-2{padding:0.5rem}.p-2\\.5{padding:0.625rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-bold{font-weight:700}.text-neutral-900{--tw-text-opacity:1;color:rgb(23 23 23 / var(--tw-text-opacity))}.text-pink-400{--tw-text-opacity:1;color:rgb(244 114 182 / 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}.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}.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)}.before\\:\\[box-shadow\\:-60px_20px_10px_10px_\\#F9B0B9\\]::before{content:var(--tw-content);box-shadow:-60px 20px 10px 10px #F9B0B9}.hover\\:placeholder-shown\\:bg-emerald-500:placeholder-shown:hover{--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))}.group:hover .group-hover\\:rotate-0{--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))}"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"7263a1","snapshot":null,"tags":null,"title":"input by kamehame-ha","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":159,"cssLen":546,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Name:\n \n

","css":".coolinput {\n display: flex;\n flex-direction: column;\n width: fit-content;\n position: static;\n max-width: 240px;\n}\n\n.coolinput label.text {\n font-size: 0.75rem;\n color: #818CF8;\n font-weight: 700;\n position: relative;\n top: 0.5rem;\n margin: 0 0 0 7px;\n padding: 0 3px;\n background: #e8e8e8;\n width: fit-content;\n}\n\n.coolinput input[type=text].input {\n padding: 11px 10px;\n font-size: 0.75rem;\n border: 2px #818CF8 solid;\n border-radius: 5px;\n background: #e8e8e8;\n}\n\n.coolinput input[type=text].input:focus {\n outline: none;\n}"},{"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"}]}},"actionData":null,"errors":null}