Search

{"loaderData":{"0":null,"0-2":{"total":7178,"projects":[{"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"},{"created":"2024-01-22T17:16:04.000Z","isPrivate":0,"projectId":"b3e53f","snapshot":null,"tags":null,"title":"input by 1osm","updated":"2024-01-22T17:16:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":683,"cssLen":740,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n

","css":".Message {\n width: 310px;\n height: 40px;\n border-radius: 10px;\n background-color: #40414f;\n transform: translate(0px,0px);\n box-shadow: 5px 5px #34343f;\n}\n\n.MsgInput {\n font-size: 18px;\n border-radius: 5px;\n background-color: #40414f;\n border: none;\n outline: none;\n width: 250px;\n height: 30px;\n transform: translate(5px,-3px);\n color: white;\n padding: 10px;\n font-weight: bold;\n}\n\n.SendSVG {\n width: 30px;\n height: 30px;\n border-width: 50px;\n transform: translate(20px,5px);\n background-size: 10px;\n border-radius: 10px;\n transition: 0.3s;\n}\n\n.SendSVG:hover {\n background-color: #2b2b35;\n}\n\n.l {\n position: absolute;\n width: 1%;\n height: 30px;\n background-color: #2e2f38;\n transform: translate(-20px,5px);\n}\n"},{"created":"2024-01-22T17:16:04.000Z","isPrivate":0,"projectId":"696a3e","snapshot":null,"tags":null,"title":"input by vinodjangid07","updated":"2024-01-22T17:16:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":453,"cssLen":1209,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n Username\n \n

","css":".inputContainer {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n#inputField {\n border: 2px solid white;\n background-color: transparent;\n border-radius: 10px;\n padding: 12px 15px;\n color: black;\n font-weight: 500;\n outline: none;\n caret-color: rgb(155, 78, 255);\n transition-duration: .3s;\n font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;\n}\n\n.userIcon {\n position: absolute;\n fill: rgb(155, 78, 255);\n width: 12px;\n top: -23px;\n left: -15px;\n opacity: 0;\n transition: .2s linear;\n}\n\n.usernameLabel {\n position: absolute;\n top: -25px;\n left: 5px;\n color: white;\n font-size: 14px;\n font-weight: 400;\n font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;\n overflow: hidden;\n transition: .2s linear;\n opacity: 0;\n}\n\n#inputField:focus ~ .usernameLabel,\n#inputField:valid ~ .usernameLabel {\n transform: translateX(20px);\n opacity: 1;\n}\n\n#inputField:focus ~ .userIcon,\n#inputField:valid ~ .userIcon {\n transform: translateX(20px);\n opacity: 1;\n}\n\n#inputField:focus,\n#inputField:valid {\n background-color: #ddd;\n transition-duration: .3s;\n}\n"},{"created":"2024-01-22T17:16:04.000Z","isPrivate":0,"projectId":"fda1c7","snapshot":null,"tags":null,"title":"input by Yaya12085","updated":"2024-01-22T17:16:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1540,"cssLen":999,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

","css":".input-container {\n position: relative;\n display: flex;\n align-items: center;\n}\n\n.input {\n width: 40px;\n height: 40px;\n border-radius: 10px;\n border: none;\n outline: none;\n padding: 18px 16px;\n background-color: transparent;\n cursor: pointer;\n transition: all .5s ease-in-out;\n}\n\n.input::placeholder {\n color: transparent;\n}\n\n.input:focus::placeholder {\n color: rgb(131, 128, 128);\n}\n\n.input:focus,.input:not(:placeholder-shown) {\n background-color: #fff;\n border: 1px solid rgb(98, 0, 255);\n width: 290px;\n cursor: none;\n padding: 18px 16px 18px 40px;\n}\n\n.icon {\n position: absolute;\n left: 0;\n top: 0;\n height: 40px;\n width: 40px;\n background-color: #fff;\n border-radius: 10px;\n z-index: -1;\n fill: rgb(98, 0, 255);\n border: 1px solid rgb(98, 0, 255);\n}\n\n.input:hover + .icon {\n transform: rotate(360deg);\n transition: .2s ease-in-out;\n}\n\n.input:focus + .icon,.input:not(:placeholder-shown) + .icon {\n z-index: 0;\n background-color: transparent;\n border: none;\n}\n"},{"created":"2024-01-22T17:16:04.000Z","isPrivate":0,"projectId":"ec4881","snapshot":null,"tags":null,"title":"input by Alien14k","updated":"2024-01-22T17:16:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":170,"cssLen":995,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n Input text \n

","css":".form__group {\n position: relative;\n}\n\n.form__field {\n border: 1px solid silver !important;\n border-radius: 5px;\n box-sizing: border-box;\n color: #313a46;\n height: 40px;\n padding: 0rem 15px;\n}\n\n.form__field::placeholder {\n color: transparent;\n}\n\n.form__field:placeholder-shown ~ .form__label {\n top: 10px;\n border-right: none;\n border-left: none;\n}\n\n.form__label {\n background-color: white;\n border-left: 1px solid silver;\n border-right: 1px solid silver;\n color: #9b9b9b;\n display: block;\n font-size: .9em;\n margin-left: 10px;\n padding: 0 10px;\n pointer-events: none;\n position: absolute;\n top: -10px;\n transition: 0.2s;\n}\n\n.form__field:focus {\n border: 1px solid #B9192C !important;\n outline: none;\n}\n\n.form__field:focus ~ .form__label {\n background-color: white;\n border-right: 1px solid #B9192C;\n border-left: 1px solid #B9192C;\n color: #B9192C;\n font-size: .9em;\n margin-left: 10px;\n padding: 0 10px;\n position: absolute;\n top: -10px;\n transition: 0.2s;\n}"},{"created":"2024-01-22T17:16:04.000Z","isPrivate":0,"projectId":"8b5c8e","snapshot":null,"tags":null,"title":"input by Mhyar-nsi","updated":"2024-01-22T17:16:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":72,"cssLen":288,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".input {\n font-family: monospace;\n max-width: 190px;\n outline: none;\n border: 1px solid #dadada;\n padding: 10px;\n border-radius: 5px;\n background-color: #f3f7fe;\n transition: .3s;\n color: #3b82f6;\n}\n\n.input:focus {\n border: 1px solid #3b82f6;\n box-shadow: 0 0 0 4px #3b83f65f\n}"},{"created":"2024-01-22T17:16:04.000Z","isPrivate":0,"projectId":"837617","snapshot":null,"tags":null,"title":"input by sonusng","updated":"2024-01-22T17:16:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":55,"cssLen":381,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"input {\n width: 210px;\n height: 50px;\n padding: 0 16px;\n background: transparent;\n border-radius: 4px;\n border: 1px solid #fe4567;\n color: #f9f9f9;\n animation: shake_541 0.14s 3;\n}\n\ninput:valid {\n border-color: #45feaf;\n animation: none;\n}\n\n@keyframes shake_541 {\n 0%, 100% {\n translate: 0;\n }\n\n 25% {\n translate: 8px 0;\n }\n\n 75% {\n translate: -8px 0;\n }\n}"},{"created":"2024-01-22T17:16:04.000Z","isPrivate":0,"projectId":"736475","snapshot":null,"tags":null,"title":"input by denswastaken","updated":"2024-01-22T17:16:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":165,"cssLen":1259,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\t

\n\t\t\n\t\t\n\t

","css":".input-group {\n display: flex;\n flex-direction: row;\n margin: 0 auto;\n justify-content: center;\n max-width: 160px;\n}\n\n.submit-button {\n font-size: 17px;\n padding: 0.5em 2em;\n border: transparent;\n box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24);\n background: #2E2E2E;\n border-radius: 0 10px 10px 0;\n transition: 0.3s;\n}\n\n.submit-button:hover {\n transition: 0.3s;\n background: linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%);\n cursor: pointer;\n}\n\n.submit-button:active {\n transform: translate(0em, 0.2em);\n}\n\n.submit-button span {\n font-weight: 800;\n letter-spacing: 2px;\n background: linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n transition: 0.3s;\n}\n\n.submit-button:hover span {\n background: #2E2E2E;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n transition: 0.3s;\n}\n\n#input-field {\n background-color: #2E2E2E;\n border-radius: 10px 0 0 10px;\n border: none;\n width: 300px;\n padding-left: 8px;\n color: white;\n font-size: 14px;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n}\n\n::placeholder {\n color: rgb(184, 184, 184);\n}"},{"created":"2024-01-22T17:16:04.000Z","isPrivate":0,"projectId":"3a1142","snapshot":null,"tags":null,"title":"input by Li-Deheng","updated":"2024-01-22T17:16:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1143,"cssLen":3025,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\t

\n\t\t\n\t\tSearch\n\t\t

\n\t\t\t\n\t\t

\n\t\t

\n\t\t\t\n\t\t

\n\t

","css":".search-panels {\n --default-color: #9e9e9e;\n --color-text: #ccc;\n --color-active: #1a73e8;\n --color-active-input: #f5f5f5;\n --transition: 150ms cubic-bezier(0.4,0,0.2,1);\n --width-input: 200px;\n}\n\n.search-group {\n position: relative;\n}\n\n.input {\n width: var(--width-input);\n border: solid 1.5px var(--default-color);\n border-radius: 80px;\n background: none;\n padding: 1rem;\n padding-right: 3rem;\n font-size: 1rem;\n color: var(--color-active-input);\n transition: border var(--transition);\n}\n\n.enter-label {\n position: absolute;\n left: 15px;\n color: var(--default-color);\n pointer-events: none;\n transform: translateY(1rem);\n transition: var(--transition);\n}\n\n.enter-label {\n color: var(--default-color);\n pointer-events: none;\n}\n\n.input:focus, input:valid {\n outline: none;\n border: 1.5px solid var(--color-active);\n}\n\n.input:focus ~ label, input:valid ~ label {\n transform: translateY(-50%) scale(0.8);\n background-color: var(--color-active);\n border-radius: 20px;\n padding: .2em .6em;\n color: var(--color-text);\n}\n\n.btn-box {\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n top: -1em;\n right: 80%;\n border-radius: 100%;\n transition: 300ms cubic-bezier(0.4,0,0.2,1);\n transition-delay: 100ms;\n opacity: 0;\n}\n\n.input:focus ~ .btn-box, input:valid ~ .btn-box {\n right: 10%;\n opacity: 1;\n transition-delay: 0s;\n transition: var(--transition);\n}\n\n.input:not(:focus) ~ .btn-box, input:not(:valid) ~ .btn-box {\n transition-property: right, opacity;\n transition-delay: 300ms;\n}\n\n.input:focus ~ .btn-box:hover, input:valid ~ .btn-box:hover {\n transform: scale(1.2);\n}\n\n.input:focus ~ .btn-box:hover:active, input:valid ~ .btn-box:hover:active {\n transform: scale(1);\n}\n\n.btn-search {\n position: relative;\n cursor: pointer;\n background-color: var(--color-active);\n width: 2em;\n height: 2em;\n top: 2.5px;\n border: none;\n border-radius: 100%;\n padding: 0;\n transition: var(--transition);\n}\n\n.btn-search:active {\n transform: scale(1);\n}\n\n.btn-search svg {\n position: absolute;\n top: 25%;\n left: 25%;\n fill: var(--color-text);\n width: 12px;\n height: 12px;\n}\n\n#svg-circle {\n fill: var(--color-text);\n transition: var(--transition);\n}\n\n.input:focus ~ .btn-box:hover #svg-circle, input:valid ~ .btn-box:hover #svg-circle {\n fill: transparent;\n}\n\n.btn-box-x {\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n top: 1em;\n right: 7%;\n opacity: 0;\n transform: rotate(-90deg) scale(.1);\n transition: var(--transition);\n}\n\n.input:focus ~ .btn-box-x, input:valid ~ .btn-box-x {\n opacity: 1;\n transform: rotate(0) scale(1);\n}\n\n.btn-cleare {\n position: relative;\n cursor: pointer;\n background-color: transparent;\n width: 2em;\n height: 2em;\n border: none;\n border-radius: 100%;\n padding: 0;\n transition: var(--transition);\n}\n\n.btn-cleare svg {\n width: 15px;\n height: 15px;\n}\n\n#cleare-line {\n fill: var(--default-color);\n}\n\n.btn-box-x:hover #cleare-line {\n fill: var(--color-active);\n}"},{"created":"2024-01-22T17:16:04.000Z","isPrivate":0,"projectId":"06ca14","snapshot":null,"tags":null,"title":"input by TechByElijah","updated":"2024-01-22T17:16:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":142,"cssLen":975,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n","css":".input-container {\n position: relative;\n}\n\n.input {\n font-size: 1em;\n padding: 0.6em 1em;\n border: none;\n border-radius: 6px;\n background-color: #f8f8f8;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n transition: background-color 0.3s ease, box-shadow 0.3s ease;\n max-width: 200px;\n color: #333;\n}\n\n.input:hover {\n background-color: #f2f2f2;\n}\n\n.input:focus {\n outline: none;\n background-color: #fff;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\n.input::placeholder {\n color: #999;\n}\n\n.highlight {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 0;\n height: 2px;\n background-color: #6c63ff;\n transition: width 0.3s ease;\n}\n\n.input:focus + .highlight {\n width: 100%;\n}\n\n/* Optional: Animation on focus */\n@keyframes input-focus {\n from {\n transform: scale(1);\n box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);\n }\n\n to {\n transform: scale(1.02);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n }\n}\n\n.input:focus {\n animation: input-focus 0.3s ease;\n}\n"},{"created":"2024-01-22T17:16:04.000Z","isPrivate":0,"projectId":"8f0f9c","snapshot":null,"tags":null,"title":"input by benjimich","updated":"2024-01-22T17:16:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":678,"cssLen":902,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

","css":".container {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 35px;\n}\n\n.input {\n max-width: 190px;\n height: 100%;\n outline: none;\n font-size: 14px;\n font-weight: 500;\n background-color: #53535f;\n caret-color: #f7f7f8;\n color: #fff;\n padding: 7px 10px;\n border: 2px solid transparent;\n border-top-left-radius: 7px;\n border-bottom-left-radius: 7px;\n margin-right: 1px;\n transition: all .2s ease;\n}\n\n.input:hover {\n border: 2px solid rgba(255, 255, 255, 0.16);\n}\n\n.input:focus {\n border: 2px solid #a970ff;\n background-color: #0e0e10;\n}\n\n.search__btn {\n border: none;\n cursor: pointer;\n background-color: rgba(42, 42, 45, 1);\n border-top-right-radius: 7px;\n border-bottom-right-radius: 7px;\n height: 100%;\n width: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.search__btn:hover {\n background-color: rgba(54, 54, 56, 1);\n}"}]}},"actionData":null,"errors":null}