{"loaderData":{"0":null,"0-3":{"total":7356,"projects":[{"created":"2024-01-22T17:16:02.000Z","isPrivate":0,"projectId":"8bb40e","snapshot":null,"tags":null,"title":"input by LightAndy1","updated":"2024-01-22T17:16:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":501,"cssLen":663,"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 width: 100%;\n height: 40px;\n line-height: 28px;\n padding: 0 1rem;\n padding-left: 2.5rem;\n border: 2px solid transparent;\n border-radius: 8px;\n outline: none;\n background-color: #f3f3f4;\n color: #0d0c22;\n transition: 0.3s ease;\n}\n\n.input::placeholder {\n color: #9e9ea7;\n}\n\n.input:focus,\ninput:hover {\n outline: none;\n border-color: rgba(247, 127, 0, 0.4);\n background-color: #fff;\n box-shadow: 0 0 0 4px rgb(247 127 0 / 10%);\n}\n\n.icon {\n position: absolute;\n left: 1rem;\n fill: #9e9ea7;\n width: 1rem;\n height: 1rem;\n}\n"},{"created":"2024-01-22T17:16:01.000Z","isPrivate":0,"projectId":"56d103","snapshot":null,"tags":null,"title":"input by LightAndy1","updated":"2024-01-22T17:16:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":54,"cssLen":374,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".input {\n margin-top: 1rem;\n border-radius: 10px;\n outline: 2px solid #00a6fb;\n border: 0;\n font-family: \"Montserrat\", sans-serif;\n background-color: #d6f1ff;\n outline-offset: 3px;\n padding: 10px 12.5px;\n transition: all 0.2s ease;\n width: 250px;\n}\n\n.input:hover {\n background-color: #fff;\n}\n\n.input:focus {\n outline-offset: -6px;\n background-color: #d6f1ff;\n}\n"},{"created":"2024-01-22T17:16:01.000Z","isPrivate":0,"projectId":"36dbab","snapshot":null,"tags":null,"title":"input by JaydipPrajapati1910","updated":"2024-01-22T17:16:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":64,"cssLen":386,"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 0 1px 25px rgba(0, 0, 0, 0.55);\n border-radius: 25px;\n}\n\n.input:focus {\n border: 2px solid #c3c6ce;\n}\n\n.input::placeholder {\n color: #555;\n transition: all 0.3s ease;\n}\n\n.input:focus::placeholder {\n color: #999;\n}\n"},{"created":"2024-01-22T17:16:01.000Z","isPrivate":0,"projectId":"fac7e1","snapshot":null,"tags":null,"title":"input by santhoshsj-dev","updated":"2024-01-22T17:16:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":139,"cssLen":602,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

\n","css":".input-wrapper {\n position: relative;\n width: 200px;\n margin: 50px auto;\n}\n\n.input-box {\n font-size: 16px;\n padding: 10px 0;\n border: none;\n border-bottom: 2px solid #ccc;\n color: #08AEEA;\n width: 100%;\n background-color: transparent;\n transition: border-color 0.3s ease-in-out;\n}\n\n.underline {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 2px;\n background-color: #08AEEA;\n transform: scaleX(0);\n transition: transform 0.3s ease-in-out;\n}\n\n.input-box:focus {\n border-color: #08AEEA;\n outline: none;\n}\n\n.input-box:focus + .underline {\n transform: scaleX(1);\n}\n"},{"created":"2024-01-22T17:16:01.000Z","isPrivate":0,"projectId":"e3f1df","snapshot":null,"tags":null,"title":"input by Akshdeep74644","updated":"2024-01-22T17:16:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":133,"cssLen":849,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n You'r name\n \n

","css":".container {\n position: relative;\n width: 200px;\n}\n\n.container input {\n width: 100%;\n background: transparent;\n outline: none;\n border: none;\n color: #222;\n padding: 8px;\n}\n\n.container label {\n position: absolute;\n left: 0;\n top: 0;\n color: rgba(105, 105, 105, 0.7);\n text-transform: uppercase;\n pointer-events: none;\n transition: .5s;\n font-weight: bold;\n}\n\n.container input:valid ~ label,\n.container input:focus ~ label {\n color: rgb(10, 131, 212);\n transform: translateY(-15px);\n font-size: .6rem;\n}\n\n.container i {\n position: absolute;\n left: 0;\n bottom: 0;\n width: 100%;\n height: 2px;\n background: #222;\n}\n\n.container i:before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, #ff1b69, #ff0, #2196f3, #9c27b0, #ff1b69);\n animation: animate 3s linear infinite;\n}"},{"created":"2024-01-22T17:16:01.000Z","isPrivate":0,"projectId":"2cfd85","snapshot":null,"tags":null,"title":"input by sabbircoder07","updated":"2024-01-22T17:16:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":111,"cssLen":408,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".input__email {\n width: 100%;\n padding: 12px 18px;\n font-size: 16px;\n font-family: inherit;\n box-shadow: 0 0 0 1px #f8bfbf;\n border: none;\n border-radius: 25px;\n background-color: #fff5f5;\n transition: all .3s;\n}\n\n.input__email::placeholder {\n color: #ce9797;\n font-size: 14px;\n}\n\n.input__email:focus {\n outline: none;\n box-shadow: 0 0 10px 1px #ee8c8c;\n border: none;\n transition: all .3s;\n}\n"},{"created":"2024-01-22T17:16:01.000Z","isPrivate":0,"projectId":"557dc3","snapshot":null,"tags":null,"title":"input by leerepublik","updated":"2024-01-22T17:16:01.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:01.000Z","isPrivate":0,"projectId":"691f11","snapshot":null,"tags":null,"title":"input by Smit-Prajapati","updated":"2024-01-22T17:16:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":120,"cssLen":1747,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

\n","css":".input-container {\n display: flex;\n background: white;\n border-radius: 1rem;\n background: linear-gradient(135deg, #23272F 0%, #14161a 100%);\n box-shadow: 10px 10px 20px #0e1013, -10px -10px 40px #383e4b;\n padding: 0.3rem;\n gap: 0.3rem;\n}\n\n.input-container input {\n border-radius: 0.8rem 0 0 0.8rem;\n background: #23272F;\n box-shadow: inset 5px 5px 10px #0e1013, inset -5px -5px 10px #383e4b, 0px 0px 100px rgba(255, 212, 59, 0), 0px 0px 100px rgba(255, 102, 0, 0);\n width: 100%;\n flex-basis: 75%;\n padding: 1rem;\n border: none;\n border: 1px solid transparent;\n color: white;\n transition: all 0.2s ease-in-out;\n}\n\n.input-container input:focus {\n border: 1px solid #FFD43B;\n outline: none;\n box-shadow: inset 0px 0px 10px rgba(255, 102, 0, 0.5), inset 0px 0px 10px rgba(255, 212, 59, 0.5), 0px 0px 100px rgba(255, 212, 59, 0.5), 0px 0px 100px rgba(255, 102, 0, 0.5);\n}\n\n.input-container button {\n flex-basis: 25%;\n padding: 1rem;\n background: linear-gradient(135deg, rgb(255, 212, 59) 0%, rgb(255, 102, 0) 100%);\n box-shadow: 0px 0px 1px rgba(255, 212, 59, 0.5), 0px 0px 1px rgba(255, 102, 0, 0.5);\n font-weight: 900;\n letter-spacing: 0.3rem;\n text-transform: uppercase;\n color: #23272F;\n border: none;\n width: 100%;\n border-radius: 0 1rem 1rem 0;\n transition: all 0.2s ease-in-out;\n}\n\n.input-container button:hover {\n background: linear-gradient(135deg, rgb(255, 212, 59) 50%, rgb(255, 102, 0) 100%);\n box-shadow: 0px 0px 100px rgba(255, 212, 59, 0.5), 0px 0px 100px rgba(255, 102, 0, 0.5);\n}\n\n@media (max-width: 500px) {\n .input-container {\n flex-direction: column;\n }\n\n .input-container input {\n border-radius: 0.8rem;\n }\n\n .input-container button {\n padding: 1rem;\n border-radius: 0.8rem;\n }\n}"},{"created":"2024-01-22T17:16:01.000Z","isPrivate":0,"projectId":"33264a","snapshot":null,"tags":null,"title":"input by Galahhad","updated":"2024-01-22T17:16:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4004,"cssLen":799,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n \n ","css":".password-label {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n position: relative;\n}\n\n.password-label svg {\n width: 15px;\n height: auto;\n color: #7c7c7c;\n}\n\n.password-label input {\n width: 100%;\n outline: none;\n background: none;\n border: 1px solid transparent;\n color: #8b8b8b;\n background: #3D3D3D;\n border-radius: 12px;\n padding: 9px 30px 9px 9px;\n transition: .2s;\n}\n\n.password-label input:hover,\n.password-label input:focus {\n border-color: #868686;\n}\n\n.password-label input:valid {\n background: #344b3a;\n border: 1px solid #00FF29;\n color: #00FF29;\n}\n\n.password-label input:valid~.open {\n display: none;\n}\n\n.password-label input:valid~.close {\n display: block;\n}\n\n.password-label svg {\n position: absolute;\n right: 9px;\n}\n\n.close {\n display: none;\n}"},{"created":"2024-01-22T17:16:01.000Z","isPrivate":0,"projectId":"0f70cd","snapshot":null,"tags":null,"title":"input by Yaya12085","updated":"2024-01-22T17:16:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":168,"cssLen":1310,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n

","css":".input-container {\n position: relative;\n display: flex;\n height: 2.8rem;\n width: 100%;\n min-width: 200px;\n max-width: 250px;\n background-color: #fff;\n border-radius: 8px;\n box-shadow: 20px 20px 30px rgba(0, 0, 0, .05);\n}\n\n.input-container input {\n height: 100%;\n width: 100%;\n border-radius: 8px;\n border: 1px solid rgb(176 190 197);\n background-color: transparent;\n padding: 0.625rem 70px 0.625rem 0.75rem;\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 400;\n color: rgb(69 90 100);\n outline: none;\n transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.input-container input:focus {\n border: 1px solid rgb(236 72 153 );\n}\n\n.invite-btn {\n position: absolute;\n width: 65px;\n right: 4px;\n top: 4px;\n bottom: 4px;\n z-index: 10;\n border-radius: 4px;\n background-color: rgb(236 72 153 );\n color: #fff;\n padding-top: .25rem;\n padding-bottom: .25rem;\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n text-align: center;\n vertical-align: middle;\n font-size: 12px;\n font-weight: 600;\n text-transform: uppercase;\n border: none;\n transition: .6s ease;\n}\n\n.invite-btn:hover {\n right: 2px;\n top: 2px;\n bottom: 2px;\n border-radius: 8px;\n}\n\n.input-container input:placeholder-shown ~ .invite-btn {\n pointer-events: none;\n background-color: gray;\n opacity: 0.5;\n}"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"5c13a0","snapshot":null,"tags":null,"title":"input by satyamchaudharydev","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1206,"cssLen":2420,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"/* From uiverse.io by @satyamchaudharydev */\n/* this button is inspired by -- whatsapp input */\n/* == type to see fully interactive and click the close buttom to remove the text == */\n\n.form {\n --input-bg: #FFf;\n /* background of input */\n --padding: 1.5em;\n --rotate: 80deg;\n /* rotation degree of input*/\n --gap: 2em;\n /* gap of items in input */\n --icon-change-color: #15A986;\n /* when rotating changed icon color */\n --height: 40px;\n /* height */\n width: 200px;\n padding-inline-end: 1em;\n /* change this for padding in the end of input */\n background: var(--input-bg);\n position: relative;\n border-radius: 4px;\n}\n\n.form label {\n display: flex;\n align-items: center;\n width: 100%;\n height: var(--height);\n}\n\n.form input {\n width: 100%;\n padding-inline-start: calc(var(--padding) + var(--gap));\n outline: none;\n background: none;\n border: 0;\n}\n/* style for both icons -- search,close */\n.form svg {\n /* display: block; */\n color: #111;\n transition: 0.3s cubic-bezier(.4,0,.2,1);\n position: absolute;\n height: 15px;\n}\n/* search icon */\n.icon {\n position: absolute;\n left: var(--padding);\n transition: 0.3s cubic-bezier(.4,0,.2,1);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n/* arrow-icon*/\n.swap-off {\n transform: rotate(-80deg);\n opacity: 0;\n visibility: hidden;\n}\n/* close button */\n.close-btn {\n /* removing default bg of button */\n background: none;\n border: none;\n right: calc(var(--padding) - var(--gap));\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #111;\n padding: 0.1em;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n transition: 0.3s;\n opacity: 0;\n transform: scale(0);\n visibility: hidden;\n}\n\n.form input:focus ~ .icon {\n transform: rotate(var(--rotate)) scale(1.3);\n}\n\n.form input:focus ~ .icon .swap-off {\n opacity: 1;\n transform: rotate(-80deg);\n visibility: visible;\n color: var(--icon-change-color);\n}\n\n.form input:focus ~ .icon .swap-on {\n opacity: 0;\n visibility: visible;\n}\n\n.form input:valid ~ .icon {\n transform: scale(1.3) rotate(var(--rotate))\n}\n\n.form input:valid ~ .icon .swap-off {\n opacity: 1;\n visibility: visible;\n color: var(--icon-change-color);\n}\n\n.form input:valid ~ .icon .swap-on {\n opacity: 0;\n visibility: visible;\n}\n\n.form input:valid ~ .close-btn {\n opacity: 1;\n visibility: visible;\n transform: scale(1);\n transition: 0s;\n}\n"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"103ea3","snapshot":null,"tags":null,"title":"input by emmanuelh-dev","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1112,"cssLen":2286,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n \n \n

","css":".pointer-events-none{pointer-events:none}.absolute{position:absolute}.flex{display:flex}.w-10{width:2.5rem}.w-5{width:1.25rem}.w-full{width:100%}.max-w-\\[160px\\]{max-width:160px}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-lg{border-radius:0.5rem}.rounded-bl-lg{border-bottom-left-radius:0.5rem}.rounded-br-lg{border-bottom-right-radius:0.5rem}.rounded-tl-lg{border-top-left-radius:0.5rem}.rounded-tr-lg{border-top-right-radius:0.5rem}.border-r{border-right-width:1px}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246 / var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.fill-gray-500{fill:#6b7280}.p-2{padding:0.5rem}.p-5{padding:1.25rem}.pl-2{padding-left:0.5rem}.text-base{font-size:1rem;line-height:1.5rem}.font-semibold{font-weight:600}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.outline-0{outline-width:0px}.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}.transition-colors{transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.hover\\:bg-blue-800:hover{--tw-bg-opacity:1;background-color:rgb(30 64 175 / var(--tw-bg-opacity))}"}]}},"actionData":null,"errors":null}