{"loaderData":{"0":null,"0-2":{"total":7178,"projects":[{"created":"2024-01-22T17:16:02.000Z","isPrivate":0,"projectId":"d3ef53","snapshot":null,"tags":null,"title":"input by Bodyhc","updated":"2024-01-22T17:16:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":88,"cssLen":506,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":" \n","css":".input[type=text] {\n max-width: 180px;\n height: 20px;\n background-color: #fff;\n color: #242424;\n padding: .15rem .5rem;\n min-height: 40px;\n border-radius: 4px;\n outline: none;\n border: none;\n box-shadow: 0px 10px 20px -18px blue;\n border-bottom: 3px solid #0d14e9;\n transition: .10s ease;\n}\n\n.input[type=text]:hover {\n outline: 2px solid #0d14e9;\n max-width: 200px;\n}\n\n.input[type=text]:focus {\n border-bottom: 3px solid #0d14e9;\n border-radius: 5px 5px 2px 2px;\n transform: scale(1.1);\n}\n"},{"created":"2024-01-22T17:16:02.000Z","isPrivate":0,"projectId":"bed3ca","snapshot":null,"tags":null,"title":"input by foxyyyyyyyyyyyyy","updated":"2024-01-22T17:16:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":524,"cssLen":767,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n U\n s\n e\n r\n n\n a\n m\n e\n \n

","css":".form-control {\n position: relative;\n margin: 20px 0 40px;\n width: 190px;\n}\n\n.form-control input {\n background-color: transparent;\n border: 0;\n border-bottom: 2px #fff solid;\n display: block;\n width: 100%;\n padding: 15px 0;\n font-size: 18px;\n color: #fff;\n}\n\n.form-control input:focus,\n.form-control input:valid {\n outline: 0;\n border-bottom-color: lightblue;\n}\n\n.form-control label {\n position: absolute;\n top: 15px;\n left: 0;\n pointer-events: none;\n}\n\n.form-control label span {\n display: inline-block;\n font-size: 18px;\n min-width: 5px;\n color: #fff;\n transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n.form-control input:focus+label span,\n.form-control input:valid+label span {\n color: lightblue;\n transform: translateY(-30px);\n}"},{"created":"2024-01-22T17:16:02.000Z","isPrivate":0,"projectId":"35b8f4","snapshot":null,"tags":null,"title":"input by Anas92876","updated":"2024-01-22T17:16:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":66,"cssLen":129,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".input {\n max-width: 400px;\n padding: 1rem;\n border-radius: 1rem;\n border: none;\n box-shadow: 2px 2px 30px 2px lightgrey;\n}\n"},{"created":"2024-01-22T17:16:02.000Z","isPrivate":0,"projectId":"a1179b","snapshot":null,"tags":null,"title":"input by Smit-Prajapati","updated":"2024-01-22T17:16:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":120,"cssLen":1376,"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(45deg, #c5c5c5 0%, #ffffff 100%);\n box-shadow: 20px 20px 20px #d8d8d8,-10px -10px 20px #f8f8f8;\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: #e8e8e8;\n box-shadow: inset 13px 13px 10px #dcdcdc,\n inset -13px -13px 10px #f4f4f4;\n width: 100%;\n flex-basis: 75%;\n padding: 1rem;\n border: none;\n border-left: 2px solid #4998FF;\n color: #5e5e5e;\n transition: all 0.2s ease-in-out;\n}\n\n.input-container input:focus {\n border-left: 2px solid #4998FF;\n outline: none;\n box-shadow: inset 13px 13px 10px #BFF0FA,inset -13px -13px 10px #f4f4f4;\n}\n\n.input-container button {\n flex-basis: 25%;\n padding: 1rem;\n background: linear-gradient(135deg, #BFF0FA 0%, #4998FF 100%);\n font-weight: 900;\n letter-spacing: 0.3rem;\n text-transform: uppercase;\n color: white;\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, #BFF0FA 0%, #4998ffc4 100%);\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:02.000Z","isPrivate":0,"projectId":"5b4505","snapshot":null,"tags":null,"title":"input by chethan025","updated":"2024-01-22T17:16:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":76,"cssLen":525,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".input[type = \"text\"] {\n display: block;\n color: rgb(34, 34, 34);\n background: linear-gradient(142.99deg, rgba(217, 217, 217, 0.63) 15.53%, rgba(243, 243, 243, 0.63) 88.19%);\n box-shadow: 0px 12px 24px -1px rgba(0, 0, 0,0.18);\n border-color: rgba(7, 4, 14, 0);\n border-radius: 50px;\n block-size: 20px;\n margin: 7px auto;\n padding: 18px 15px;\n outline: none;\n text-align: center;\n width: 200px;\n transition: 0.5s;\n}\n\n.input[type = \"text\"]:hover {\n width: 240px;\n}\n\n.input[type = \"text\"]:focus {\n width: 280px;\n}"},{"created":"2024-01-22T17:16:02.000Z","isPrivate":0,"projectId":"ffcf40","snapshot":null,"tags":null,"title":"input by Minka1902","updated":"2024-01-22T17:16:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":191,"cssLen":1196,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n Input title\n

","css":".input-container {\n position: relative;\n width: clamp(100px, 100%, 200px);\n}\n\n.input {\n padding: 10px;\n height: 40px;\n width: clamp(100px, 100%, 200px);\n border: 2px solid #0B2447;\n border-top: none;\n font-size: 16px;\n background: transparent;\n outline: none;\n box-shadow: 7px 7px 0px 0px #0B2447;\n transition: all 0.5s;\n}\n\n.input:focus {\n box-shadow: none;\n transition: all 0.5s;\n}\n\n.label {\n position: absolute;\n top: 10px;\n left: 10px;\n color: #0B2447;\n transition: all 0.5s;\n transform: scale(0);\n z-index: -1;\n}\n\n.input-container .top-line {\n position: absolute;\n content: \"\";\n background-color: #0B2447;\n width: 100%;\n height: 2px;\n right: 0;\n top: 0;\n transition: all 0.5s;\n}\n\n.input-container input[type=\"text\"]:focus~.top-line {\n width: 35%;\n transition: all 0.5s;\n}\n\n.input-container .under-line {\n position: absolute;\n content: \"\";\n background-color: #0B2447;\n width: 0%;\n height: 2px;\n right: 0;\n bottom: 0;\n transition: all 0.5s;\n}\n\n.input-container input[type=\"text\"]:focus~.under-line {\n width: 100%;\n transition: all 0.5s;\n}\n\n.input-container input[type=\"text\"]:focus~.label {\n top: -10px;\n transform: scale(1);\n transition: all 0.5s;\n}"},{"created":"2024-01-22T17:16:02.000Z","isPrivate":0,"projectId":"aac456","snapshot":null,"tags":null,"title":"input by Christian-putra30","updated":"2024-01-22T17:16:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":100,"cssLen":338,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".input {\n border: none;\n outline: none;\n border-radius: 100px;\n padding: 1em;\n background-color: #e1e2e3;\n box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.3);\n transition: 300ms ease-in-out;\n}\n\n.input:focus {\n background-color: #ffffff;\n transform: scale(1.05);\n box-shadow: 13px 13px 100px #969696, -13px -13px 100px #ffffff;\n}\n"},{"created":"2024-01-22T17:16:02.000Z","isPrivate":0,"projectId":"9b672f","snapshot":null,"tags":null,"title":"input by kamehame-ha","updated":"2024-01-22T17:16:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":231,"cssLen":511,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n user@ui-verse:~$\n

\n \n

","css":".input-container {\n display: flex;\n align-items: center;\n background-color: #0F172A;\n padding: 10px 15px;\n gap: 5px;\n border-radius: 20px;\n}\n\n.input-container .bash-text {\n font-size: .8rem;\n color: white;\n}\n\n.input-container .bash-text .user {\n color: #E879F9;\n}\n\n.input-container .bash-text .vm {\n color: #2DD4BF;\n}\n\n.input-container .bash-text .char {\n color: #A78BFA;\n}\n\n.input-container input[type=text].input {\n background-color: transparent;\n border: none;\n outline: none;\n color: white;\n}"},{"created":"2024-01-22T17:16:02.000Z","isPrivate":0,"projectId":"3ddc14","snapshot":null,"tags":null,"title":"input by Akshdeep74644","updated":"2024-01-22T17:16:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":198,"cssLen":821,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n Full Name\n

","css":".input-group {\n position: relative;\n}\n\n.input {\n border: 3px solid #000;\n background: none;\n padding: 1rem;\n font-size: 1rem;\n color: black;\n}\n\n.user-label {\n position: absolute;\n left: 15px;\n color: #000;\n pointer-events: none;\n transform: translateY(1rem);\n transition: 350ms;\n}\n\n.input:focus,\ninput:valid {\n outline: none;\n --angle: 0deg;\n border-bottom: 3px solid;\n border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1;\n animation: 3s rotate9234 linear infinite;\n}\n\n@keyframes rotate9234 {\n to {\n --angle: 360deg;\n }\n}\n\n@property --angle {\n syntax: '';\n initial-value: 0deg;\n inherits: false;\n}\n\n.input:focus~label,\ninput:valid~label {\n transform: translateY(235%) scale(1);\n background-color: #e8e8e8;\n padding: 0 .2em;\n color: #2196f3;\n}"},{"created":"2024-01-22T17:16:02.000Z","isPrivate":0,"projectId":"b6d28e","snapshot":null,"tags":null,"title":"input by ClawHack1","updated":"2024-01-22T17:16:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":120,"cssLen":743,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n Username\n

","css":".input {\n font-family: 'Segoe UI', sans-serif;\n margin: 1em 0 1em 0;\n max-width: 190px;\n position: relative;\n}\n\n.input input {\n font-size: 100%;\n padding: 0.8em;\n outline: none;\n border: 2px solid rgb(141, 109, 255);\n background-color: transparent;\n border-radius: 20px;\n width: 100%;\n}\n\n.input 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(255, 255, 255);\n}\n\n.input :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: #212121;\n}\n\n.inputGroup :is(input:focus, input:valid) {\n border-color: rgb(37, 37, 211);\n}"},{"created":"2024-01-22T17:16:02.000Z","isPrivate":0,"projectId":"329fae","snapshot":null,"tags":null,"title":"input by Yaya12085","updated":"2024-01-22T17:16:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1020,"cssLen":909,"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: 20px;\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(91, 107, 255);\n width: 290px;\n cursor: none;\n padding: 18px 16px 18px 45px;\n}\n\n.icon {\n position: absolute;\n left: 0;\n height: 45px;\n width: 45px;\n background-color: #fff;\n border-radius: 99px;\n z-index: -1;\n fill: rgb(91, 107, 255);\n border: 1px solid rgb(91, 107, 255);\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:02.000Z","isPrivate":0,"projectId":"6a1864","snapshot":null,"tags":null,"title":"input by mRcOol7","updated":"2024-01-22T17:16:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":67,"cssLen":2998,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".search-container {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n background: linear-gradient(to right, #5c5c5c, #f5f5f5);\n padding: 30px;\n border-radius: 15px;\n transition: background 0.3s ease;\n perspective: 1000px;\n}\n\n.label {\n position: absolute;\n top: 50%;\n left: 20px;\n transform: translateY(-50%);\n color: #999;\n pointer-events: none;\n transition: transform 0.3s ease, font-size 0.3s ease, color 0.3s ease,\n text-shadow 0.3s ease;\n}\n\n.search-input {\n position: relative;\n width: 230px;\n height: 40px;\n padding: 12px;\n border: 2px solid #ccc;\n border-radius: 8px;\n background: linear-gradient(to right, #d9d9d9, #f8f8f8);\n font-size: 16px;\n color: #555;\n outline: none;\n transition: box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease,\n border-color 0.3s ease, transform 0.3s ease;\n transform-style: preserve-3d;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.2) inset; /* Improved box-shadow for a realistic feel */\n}\n\n.search-input:focus,\n.search-input:not(:placeholder-shown) {\n border-color: #4caf50;\n background: linear-gradient(to right, #c2f0c2, #f0f0f0);\n transform: rotateX(20deg);\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.2) inset; /* Improved box-shadow on focus */\n}\n\n.search-input:focus + .label,\n.search-input:not(:placeholder-shown) + .label {\n transform: translateY(-120%) scale(0.8);\n font-size: 12px;\n color: #4caf50;\n text-shadow: 0 0 5px rgba(76, 175, 80, 0.6);\n}\n\n.search-input:hover {\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.2) inset; /* Improved box-shadow on hover */\n background: linear-gradient(to right, #e6e6e6, #f9f9f9);\n border-color: #999;\n}\n\n.clear-button {\n position: absolute;\n top: 50%;\n right: 20px;\n transform: translateY(-50%);\n color: #999;\n cursor: pointer;\n opacity: 0;\n transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;\n}\n\n.clear-button:hover {\n color: #4caf50;\n transform: scale(1.1);\n}\n\n.search-input:not(:focus):not(:placeholder-shown) + .clear-button {\n opacity: 1;\n}\n\n.shine {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n to bottom right,\n rgba(255, 255, 255, 0.6),\n transparent\n );\n border-radius: 8px;\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.search-input:focus + .shine {\n opacity: 1;\n}\n\n.search-icon {\n position: absolute;\n top: 50%;\n right: 20px;\n transform: translateY(-50%);\n color: #999;\n cursor: pointer;\n transition: color 0.3s ease, transform 0.3s ease, filter 0.3s ease;\n border-radius: 50%;\n}\n\n.search-input:focus + .search-icon {\n color: #4caf50;\n transform: translateY(-50%) scale(1.1);\n filter: drop-shadow(0 0 5px rgba(76, 175, 80, 0.6));\n}\n\n@keyframes inputPulse {\n 0%,\n 100% {\n transform: scale(1);\n }\n 50% {\n transform: scale(1.05);\n }\n}\n\n.search-input:focus {\n animation: inputPulse 0.5s ease;\n}\n"}]}},"actionData":null,"errors":null}