{"loaderData":{"0":null,"0-2":{"total":7178,"projects":[{"created":"2024-01-22T17:16:06.000Z","isPrivate":0,"projectId":"0fa75c","snapshot":null,"tags":null,"title":"input by Jules-gitclerc","updated":"2024-01-22T17:16:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1872,"cssLen":1549,"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":".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-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235 / var(--tw-bg-opacity));\n}\n.bg-gray-800 {\n --tw-bg-opacity: 1;\n background-color: rgb(31 41 55 / var(--tw-bg-opacity));\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:06.000Z","isPrivate":0,"projectId":"47393c","snapshot":null,"tags":null,"title":"input by shadowmurphy","updated":"2024-01-22T17:16:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":90,"cssLen":508,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".search-bar {\n width: 200px;\n height: 35px;\n border-radius: 5px;\n outline: none;\n border: 1px solid #303030;\n border-bottom: 2px solid #9a9a9a;\n padding-left: 10px;\n padding-right: 10px;\n background-color: #2d2d2d;\n color: white;\n transition: all 0.3s ease;\n}\n\n.search-bar::placeholder {\n color: #9a9a9a;\n}\n\n.search-bar:hover {\n background-color: #313131;\n}\n\n.search-bar:active,\n.search-bar:focus {\n background-color: #1e1f20;\n border: 1px solid #2d2d2d;\n border-bottom: 2px solid #4cc2ff;\n}\n"},{"created":"2024-01-22T17:16:05.000Z","isPrivate":0,"projectId":"65a561","snapshot":null,"tags":null,"title":"input by AtharvaMistry","updated":"2024-01-22T17:16:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":243,"cssLen":1147,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".rounded-full{border-radius:9999px}.border-2{border-width:2px}.border-purple-500{--tw-border-opacity:1;border-color:rgb(168 85 247 / var(--tw-border-opacity))}.bg-violet-100{--tw-bg-opacity:1;background-color:rgb(237 233 254 / var(--tw-bg-opacity))}.p-4{padding:1rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.placeholder-purple-400::placeholder{--tw-placeholder-opacity:1;color:rgb(192 132 252 / var(--tw-placeholder-opacity))}.focus\\:border-purple-700:focus{--tw-border-opacity:1;border-color:rgb(126 34 206 / var(--tw-border-opacity))}.focus\\:text-violet-950:focus{--tw-text-opacity:1;color:rgb(46 16 101 / var(--tw-text-opacity))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-2:focus{--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\\:ring-purple-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(168 85 247 / var(--tw-ring-opacity))}"},{"created":"2024-01-22T17:16:05.000Z","isPrivate":0,"projectId":"891856","snapshot":null,"tags":null,"title":"input by Yaya12085","updated":"2024-01-22T17:16:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":423,"cssLen":1103,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Picture\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}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.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}.file\\:text-gray-600::file-selector-button{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))}.peer:disabled ~ .peer-disabled\\:cursor-not-allowed{cursor:not-allowed}.peer:disabled ~ .peer-disabled\\:opacity-70{opacity:0.7}"},{"created":"2024-01-22T17:16:05.000Z","isPrivate":0,"projectId":"777bb5","snapshot":null,"tags":null,"title":"input by tranquoclong","updated":"2024-01-22T17:16:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":121,"cssLen":765,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n Name\n

","css":".inputGroup {\n font-family: 'Segoe UI', sans-serif;\n margin: 1em 0 1em 0;\n max-width: 190px;\n position: relative;\n}\n\n.inputGroup input {\n font-size: 100%;\n padding: 0.8em;\n outline: none;\n border: 2px solid rgb(200, 200, 200);\n background-color: transparent;\n border-radius: 20px;\n width: 100%;\n}\n\n.inputGroup label {\n font-size: 100%;\n position: absolute;\n left: 0;\n padding: 0.8em;\n margin-left: 0.5em;\n pointer-events: none;\n transition: all 0.3s ease;\n color: rgb(100, 100, 100);\n}\n\n.inputGroup :is(input:focus, input:valid)~label {\n transform: translateY(-50%) scale(.9);\n margin: 0em;\n margin-left: 1.3em;\n padding: 0.4em;\n background-color: #e8e8e8;\n}\n\n.inputGroup :is(input:focus, input:valid) {\n border-color: rgb(150, 150, 200);\n}"},{"created":"2024-01-22T17:16:05.000Z","isPrivate":0,"projectId":"6c06ba","snapshot":null,"tags":null,"title":"input by Cornerstone-04","updated":"2024-01-22T17:16:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":69,"cssLen":450,"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 height: 30px;\n border: 2px solid transparent;\n outline: none;\n border-bottom: 2px solid #3f3f3f;\n caret-color: #3f3f3f;\n background-color: #212121;\n padding: 5px;\n transition: .5s linear;\n font-family: monospace;\n letter-spacing: 1px;\n}\n\n.input:focus {\n border: 2px solid #fa4753;\n caret-color: #fa4753;\n color: #fa4753;\n box-shadow: 4px 4px 10px #070707;\n}\n\n.input:focus::placeholder {\n color: #fa4753;\n}"},{"created":"2024-01-22T17:16:05.000Z","isPrivate":0,"projectId":"cbbe5a","snapshot":null,"tags":null,"title":"input by Cybercom682","updated":"2024-01-22T17:16:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":166,"cssLen":687,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".number-control {\n display: flex;\n align-items: center;\n}\n\n.number-left::before,\n.number-right::after {\n content: attr(data-content);\n background-color: #333333;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid black;\n width: 20px;\n color: white;\n transition: background-color 0.3s;\n cursor: pointer;\n}\n\n.number-left::before {\n content: \"-\";\n}\n\n.number-right::after {\n content: \"+\";\n}\n\n.number-quantity {\n padding: 0.25rem;\n border: 0;\n width: 50px;\n -moz-appearance: textfield;\n border-top: 1px solid black;\n border-bottom: 1px solid black;\n}\n\n.number-left:hover::before,\n.number-right:hover::after {\n background-color: #666666;\n}\n"},{"created":"2024-01-22T17:16:05.000Z","isPrivate":0,"projectId":"7d1c80","snapshot":null,"tags":null,"title":"input by Shoh2008","updated":"2024-01-22T17:16:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":137,"cssLen":345,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n","css":".input {\n max-width: 190px;\n width: 40px;\n height: 40px;\n outline: none;\n margin: 5px;\n transition: .5s;\n border: none;\n border-radius: 10px;\n padding: 10px;\n text-align: center;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n transform: rotate(90deg);\n}\n\ninput:focus {\n width: 150px;\n transform: rotate(0);\n}"},{"created":"2024-01-22T17:16:05.000Z","isPrivate":0,"projectId":"8724de","snapshot":null,"tags":null,"title":"input by JaydipPrajapati1910","updated":"2024-01-22T17:16:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":68,"cssLen":547,"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 border: none;\n outline: none;\n background: none;\n font-size: 18px;\n color: #222;\n padding: 15px 5px 10px 20px;\n box-shadow: inset 4px 4px 4px rgba(15, 15, 15, 0.315),4px 4px 4px rgba(28, 28, 28, 0.13);\n border-radius: 25px;\n background-clip: padding-box;\n}\n\n.input:focus {\n padding-bottom: 10px;\n}\n\n.input::placeholder {\n color: #222;\n text-transform: uppercase;\n transition: all 0.3s ease;\n font-size: 19px;\n font-weight: 700;\n letter-spacing: .3px;\n}\n\n.input:focus::placeholder {\n color: #999;\n}\n\n\n"},{"created":"2024-01-22T17:16:05.000Z","isPrivate":0,"projectId":"3d856b","snapshot":null,"tags":null,"title":"input by Creatlydev","updated":"2024-01-22T17:16:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":99,"cssLen":391,"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: rotate(5deg);\n }\n\n 50% {\n transform: rotate(-5deg);\n }\n\n 75% {\n transform: rotate(5deg);\n }\n}"},{"created":"2024-01-22T17:16:05.000Z","isPrivate":0,"projectId":"45b934","snapshot":null,"tags":null,"title":"input by vnuny","updated":"2024-01-22T17:16:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":638,"cssLen":1492,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".container {\n position: relative;\n box-sizing: border-box;\n width: fit-content;\n}\n\n.mainbox {\n box-sizing: border-box;\n position: relative;\n width: 230px;\n height: 50px;\n display: flex;\n flex-direction: row-reverse;\n align-items: center;\n justify-content: center;\n border-radius: 160px;\n background-color: rgb(0, 0, 0);\n transition: all 0.3s ease;\n}\n\n.checkbox:focus {\n border: none;\n outline: none;\n}\n\n.checkbox:checked {\n right: 10px;\n}\n\n.checkbox:checked ~ .mainbox {\n width: 50px;\n}\n\n.checkbox:checked ~ .mainbox .search_input {\n width: 0;\n height: 0px;\n}\n\n.checkbox:checked ~ .mainbox .iconContainer {\n padding-right: 8px;\n}\n\n.checkbox {\n box-sizing: border-box;\n width: 30px;\n height: 30px;\n position: absolute;\n right: 17px;\n top: 10px;\n z-index: 9;\n cursor: pointer;\n appearance: none;\n}\n\n.search_input {\n box-sizing: border-box;\n height: 100%;\n width: 170px;\n background-color: transparent;\n border: none;\n outline: none;\n padding-bottom: 4px;\n padding-left: 10px;\n font-size: 1em;\n color: white;\n transition: all 0.3s ease;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n}\n\n.search_input::placeholder {\n color: rgba(255, 255, 255, 0.776);\n}\n\n.iconContainer {\n box-sizing: border-box;\n padding-top: 5px;\n width: fit-content;\n transition: all 0.3s ease;\n}\n\n.search_icon {\n box-sizing: border-box;\n fill: white;\n font-size: 1.3em;\n}"},{"created":"2024-01-22T17:16:05.000Z","isPrivate":0,"projectId":"940c73","snapshot":null,"tags":null,"title":"input by Li-Deheng","updated":"2024-01-22T17:16:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":680,"cssLen":2432,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".search {\n --input-line: #cccccc;\n --input-text-color: #808080;\n --input-text-hover-color: transparent;\n --input-border-color: #808080;\n --input-border-hover-color: #999999;\n --input-bg-color: #333333;\n --search-max-width: 250px;\n --search-min-width: 150px;\n --border-radius: 5px;\n --transition-cubic-bezier: 150ms cubic-bezier(0.4,0,0.2,1);\n}\n\n.search-box {\n max-width: var(--search-max-width);\n min-width: var(--search-min-width);\n height: 35px;\n border: 1px solid var(--input-border-color);\n border-radius: var(--border-radius);\n padding: 5px 15px;\n background: var(--input-bg-color);\n box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);\n transition: var(--transition-cubic-bezier);\n}\n\n.search-box:hover {\n border-color: var(--input-border-hover-color);\n}\n\n/*Section input*/\n.search-field {\n position: relative;\n width: 100%;\n height: 100%;\n left: -5px;\n border: 0;\n}\n\n.input {\n width: calc(100% - 29px);\n height: 100%;\n border: 0;\n border-color: transparent;\n font-size: 1rem;\n padding-right: 0px;\n color: var(--input-line);\n background: var(--input-bg-color);\n border-right: 2px solid var(--input-border-color);\n outline: none;\n}\n\n.input::-webkit-input-placeholder {\n color: var(--input-text-color);\n}\n\n.input::-moz-input-placeholder {\n color: var(--input-text-color);\n}\n\n.input::-ms-input-placeholder {\n color: var(--input-text-color);\n}\n\n.input:focus::-webkit-input-placeholder {\n color: var(--input-text-hover-color);\n}\n\n.input:focus::-moz-input-placeholder {\n color: var(--input-text-hover-color);\n}\n\n.input:focus::-ms-input-placeholder {\n color: var(--input-text-hover-color);\n}\n\n/*Search button*/\n.search-box-icon {\n width: 52px;\n height: 35px;\n position: absolute;\n top: -6px;\n right: -21px;\n background: transparent;\n border-bottom-right-radius: var(--border-radius);\n border-top-right-radius: var(--border-radius);\n transition: var(--transition-cubic-bezier);\n}\n\n.search-box-icon:hover {\n background: var(--input-border-color);\n}\n\n.btn-icon-content {\n width: 52px;\n height: 35px;\n top: -6px;\n right: -21px;\n background: transparent;\n border: none;\n cursor: pointer;\n border-bottom-right-radius: var(--border-radius);\n border-top-right-radius: var(--border-radius);\n transition: var(--transition-cubic-bezier);\n opacity: .4;\n}\n\n.btn-icon-content:hover {\n opacity: .8;\n}\n\n.search-icon {\n width: 21px;\n height: 21px;\n position: absolute;\n top: 7px;\n right: 15px;\n}"}]}},"actionData":null,"errors":null}