Search

{"loaderData":{"0":null,"0-3":{"total":7356,"projects":[{"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}"},{"created":"2024-01-22T17:16:05.000Z","isPrivate":0,"projectId":"c1f19b","snapshot":null,"tags":null,"title":"input by krlozCJ","updated":"2024-01-22T17:16:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":620,"cssLen":1005,"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 --size-button: 40px;\n color: white;\n}\n\n.input {\n padding-left: var(--size-button);\n height: var(--size-button);\n font-size: 15px;\n border: none;\n color: #fff;\n outline: none;\n width: var(--size-button);\n transition: all ease 0.3s;\n background-color: #191A1E;\n box-shadow: 1.5px 1.5px 3px #0e0e0e, -1.5px -1.5px 3px rgb(95 94 94 / 25%), inset 0px 0px 0px #0e0e0e, inset 0px -0px 0px #5f5e5e;\n border-radius: 50px;\n cursor: pointer;\n}\n\n.input:focus,\n.input:not(:invalid) {\n width: 200px;\n cursor: text;\n box-shadow: 0px 0px 0px #0e0e0e, 0px 0px 0px rgb(95 94 94 / 25%), inset 1.5px 1.5px 3px #0e0e0e, inset -1.5px -1.5px 3px #5f5e5e;\n}\n\n.input:focus + .icon,\n.input:not(:invalid) + .icon {\n pointer-events: all;\n cursor: pointer;\n}\n\n.container .icon {\n position: absolute;\n width: var(--size-button);\n height: var(--size-button);\n top: 0;\n left: 0;\n padding: 8px;\n pointer-events: none;\n}\n\n.container .icon svg {\n width: 100%;\n height: 100%;\n}"},{"created":"2024-01-22T17:16:05.000Z","isPrivate":0,"projectId":"ee7942","snapshot":null,"tags":null,"title":"input by opMorn","updated":"2024-01-22T17:16:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":164,"cssLen":896,"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-container {\n position: relative;\n margin: 50px auto;\n width: 200px;\n}\n\n.input-container input[type=\"text\"] {\n font-size: 20px;\n width: 100%;\n border: none;\n border-bottom: 2px solid #ccc;\n padding: 5px 0;\n background-color: transparent;\n outline: none;\n}\n\n.input-container .label {\n position: absolute;\n top: 0;\n left: 0;\n color: #ccc;\n transition: all 0.3s ease;\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 font-size: 16px;\n color: #333;\n}\n\n.input-container .underline {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 2px;\n width: 100%;\n background-color: #333;\n transform: scaleX(0);\n transition: all 0.3s ease;\n}\n\n.input-container input[type=\"text\"]:focus ~ .underline,\n.input-container input[type=\"text\"]:valid ~ .underline {\n transform: scaleX(1);\n}\n"}]}},"actionData":null,"errors":null}