magnifying-glass

{"loaderData":{"0":null,"0-2":{"total":7178,"projects":[{"created":"2024-01-22T17:16:03.000Z","isPrivate":0,"projectId":"91eb16","snapshot":null,"tags":null,"title":"input by SouravBandyopadhyay","updated":"2024-01-22T17:16:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":118,"cssLen":883,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n ","css":".inp-border {\n padding: 5px;\n margin: 2em 1em;\n border-radius: 50px;\n max-width: 300px;\n}\n\n.input {\n text-align: center;\n padding: 15px;\n outline: none;\n border: double 0;\n background: #252525;\n border-radius: 50px;\n position: relative;\n box-sizing: border-box;\n display: block;\n width: 100%;\n font-size: 1.5rem;\n}\n\n.a1 {\n background: linear-gradient(\n 330.28deg,\n #ff6e1d 100%,\n #ff6e1d 100%,\n #ff6e1d 100%\n );\n}\n\n.a1 > input {\n color: #caab98;\n}\n\n.a1 > input::placeholder {\n color: #ff6e1d;\n opacity: 0.6;\n}\n\n.inp-border:focus-within {\n background: linear-gradient(\n 330.28deg,\n #2cfff2 0%,\n #1e78ff 30.73%,\n #ff54a6 55.73%,\n #ff6e1d 79.17%,\n #ff3e3e 100%\n );\n}\n\n.inp-border:hover {\n background: linear-gradient(\n 330.28deg,\n #2cfff2 0%,\n #1e78ff 30.73%,\n #ff54a6 55.73%,\n #ff6e1d 79.17%,\n #ff3e3e 100%\n );\n}\n"},{"created":"2024-01-22T17:16:02.000Z","isPrivate":0,"projectId":"433103","snapshot":null,"tags":null,"title":"input by saidbl1","updated":"2024-01-22T17:16:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":119,"cssLen":472,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n First name :\n

","css":".inputBox {\n position: relative;\n}\n\n.inputBox input {\n padding: 15px 20px;\n outline: none;\n background: transparent;\n border-radius: 5px;\n color: #212121;\n border: 1px solid#212121;\n font-size: 1em;\n}\n\n.inputBox span {\n position: absolute;\n left: 0;\n font-size: 0.7em;\n transform: translateX(14px) translateY(-7.5px);\n padding: 0 6px 1px 5px;\n border-radius: 2px;\n background: #e8e8e8;\n letter-spacing: 1px;\n border: 1px solid #212121;\n color: #212121;\n}"},{"created":"2024-01-22T17:16:02.000Z","isPrivate":0,"projectId":"035a9f","snapshot":null,"tags":null,"title":"input by deepak16375","updated":"2024-01-22T17:16:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":124,"cssLen":444,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n ","css":".input {\n max-width: 190px;\n padding: 15px;\n font-size: 17px;\n color: black;\n border-top-left-radius: .5em;\n border-bottom-left-radius: .5em;\n border: 2px solid #fff;\n margin-right: -10px;\n}\n\n.button {\n border: none;\n background-color: #1363DF;\n text-decoration: none;\n padding: 15px;\n padding-bottom: 17px;\n font-size: 17px;\n color: #fff;\n border-top-right-radius: .5em;\n border-bottom-right-radius: .5em;\n cursor: pointer;\n}"},{"created":"2024-01-22T17:16:02.000Z","isPrivate":0,"projectId":"75bca4","snapshot":null,"tags":null,"title":"input by danilppzz","updated":"2024-01-22T17:16:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":66,"cssLen":256,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".input {\n background-color: #292929;\n border: 1px solid #3e3e3e;\n border-radius: 8px;\n color: #fff;\n padding: 14px 24px;\n text-decoration: none;\n font-size: 16px;\n margin: 12px 14px;\n cursor: pointer;\n}\n\n.input:hover {\n border: 1px solid #fff;\n}\n"},{"created":"2024-01-22T17:16:02.000Z","isPrivate":0,"projectId":"0c7887","snapshot":null,"tags":null,"title":"input by andrew-demchenk0","updated":"2024-01-22T17:16:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":72,"cssLen":545,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".input {\n --input-focus: #2d8cf0;\n --font-color: #fefefe;\n --font-color-sub: #7e7e7e;\n --bg-color: #111111;\n --main-color: #fefefe;\n width: 200px;\n height: 40px;\n border-radius: 5px;\n border: 2px solid var(--main-color);\n background-color: var(--bg-color);\n box-shadow: 4px 4px var(--main-color);\n font-size: 15px;\n font-weight: 600;\n color: var(--font-color);\n padding: 5px 10px;\n outline: none;\n}\n\n.input::placeholder {\n color: var(--font-color-sub);\n opacity: 0.8;\n}\n\n.input:focus {\n border: 2px solid var(--input-focus);\n}"},{"created":"2024-01-22T17:16:02.000Z","isPrivate":0,"projectId":"e5382c","snapshot":null,"tags":null,"title":"input by abdullah-sameh","updated":"2024-01-22T17:16:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":197,"cssLen":1124,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\nEnter Your Name\n

","css":".input-container {\n position: relative;\n}\n\n.input {\n padding: 10px;\n height: 40px;\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 .topline {\n position: absolute;\n content: \"\";\n background-color: #0B2447;\n width: 0%;\n height: 2px;\n right: 0;\n top: 0;\n transition: all 0.5s;\n}\n\n.input-container input[type=\"text\"]:focus ~ .topline {\n width: 35%;\n transition: all 0.5s;\n}\n\n.input-container .underline {\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 ~ .underline {\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":"5869e3","snapshot":null,"tags":null,"title":"input by eslam-hany","updated":"2024-01-22T17:16:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":111,"cssLen":919,"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":".inputbox {\n position: relative;\n width: 196px;\n}\n\n.inputbox input {\n position: relative;\n width: 100%;\n padding: 20px 10px 10px;\n background: transparent;\n outline: none;\n box-shadow: none;\n border: none;\n color: #23242a;\n font-size: 1em;\n letter-spacing: 0.05em;\n transition: 0.5s;\n z-index: 10;\n}\n\n.inputbox span {\n position: absolute;\n left: 0;\n padding: 20px 10px 10px;\n font-size: 1em;\n color: #8f8f8f;\n letter-spacing: 00.05em;\n transition: 0.5s;\n pointer-events: none;\n}\n\n.inputbox input:valid ~span,\n.inputbox input:focus ~span {\n color: #5748f2;\n transform: translateX(-10px) translateY(-34px);\n font-size: 0,75em;\n}\n\n.inputbox i {\n position: absolute;\n left: 0;\n bottom: 0;\n width: 100%;\n height: 2px;\n background: #5748f2;\n border-radius: 4px;\n transition: 0.5s;\n pointer-events: none;\n z-index: 9;\n}\n\n.inputbox input:valid ~i,\n.inputbox input:focus ~i {\n height: 44px;\n}"},{"created":"2024-01-22T17:16:02.000Z","isPrivate":0,"projectId":"c8946a","snapshot":null,"tags":null,"title":"input by gaeliam100","updated":"2024-01-22T17:16:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":484,"cssLen":1424,"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":".absolute{position:absolute}.relative{position:relative}.left-0{left:0px}.top-1{top:0.25rem}.flex{display:flex}.cursor-text{cursor:text}.items-center{align-items:center}.justify-center{justify-content:center}.border-b{border-bottom-width:1px}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity))}.bg-inherit{background-color:inherit}.py-1{padding-top:0.25rem;padding-bottom:0.25rem}.transition-all{transition-property:all;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}.focus\\:border-b-2:focus{border-bottom-width:2px}.focus\\:border-blue-700:focus{--tw-border-opacity:1;border-color:rgb(29 78 216 / var(--tw-border-opacity))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.peer:focus ~ .peer-focus\\:-top-4{top:-1rem}.peer:focus ~ .peer-focus\\:text-xs{font-size:0.75rem;line-height:1rem}.peer:focus ~ .peer-focus\\:text-blue-700{--tw-text-opacity:1;color:rgb(29 78 216 / var(--tw-text-opacity))}"},{"created":"2024-01-22T17:16:02.000Z","isPrivate":0,"projectId":"03e7e1","snapshot":null,"tags":null,"title":"input by sabbircoder07","updated":"2024-01-22T17:16:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4717,"cssLen":1507,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".search {\n flex: 0 0 90%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.search__input {\n font-family: \"Open Sans\", sans-serif;\n font-size: 17px;\n color: #333333;\n background-color: #f4f2f2;\n border: none;\n padding: 14px 72px 14px 42px;\n border-radius: 1000px;\n width: 94%;\n margin-left: -34px;\n margin-right: -66px;\n transition: all 0.2s;\n}\n\n.search__input:focus {\n outline: none;\n width: 100%;\n background-color: #f0eeee;\n}\n\n.search__input::-webkit-input-placeholder {\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: 5px;\n font-weight: 500;\n color: #999999;\n}\n\n.search__button {\n border: none;\n background-color: transparent;\n z-index: 999;\n cursor: pointer;\n}\n\n.search__button:focus {\n outline: none;\n}\n\n.search__button:active {\n transform: translateY(2px);\n}\n\n.search__icon {\n height: 20px;\n width: 20px;\n fill: #999999;\n}\n\n.mic__button {\n border: none;\n background-color: transparent;\n margin-right: 10px;\n cursor: pointer;\n}\n\n.mic__button:focus {\n outline: none;\n}\n\n.mic__button:active {\n transform: translateY(2px);\n}\n\n.mic__icon {\n height: 28px;\n width: 20px;\n fill: #999999;\n}\n\n.mic__icon:hover {\n fill: #dd5e89;\n}\n\n.picture__button {\n border: none;\n background-color: transparent;\n cursor: pointer;\n}\n\n.picture__button:focus {\n outline: none;\n}\n\n.picture__button:active {\n transform: translateY(2px);\n}\n\n.picture__icon {\n height: 16px;\n width: 20px;\n fill: #999999;\n}\n\n.picture__icon:hover {\n fill: #dd5e89;\n}\n"},{"created":"2024-01-22T17:16:02.000Z","isPrivate":0,"projectId":"62ed79","snapshot":null,"tags":null,"title":"input by Li-Deheng","updated":"2024-01-22T17:16:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":832,"cssLen":2894,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n\t\tRGBA\n\t\t\n

","css":".info-panels {\n --color-icon: #fff;\n --color-input: #ccc;\n --color-border: #9e9e9e;\n --color-border-hover: #1a73e8;\n --all-transition: all .2s ease-out;\n --input-focus-opacity: .3;\n}\n\n.input-color-group-one {\n position: relative;\n}\n\n.input-color {\n max-width: 230px;\n min-width: 150px;\n border: 1.5px solid var(--color-border);\n border-radius: 80px;\n background: none;\n padding: 16px;\n font-size: 16px;\n transition: var(--all-transition);\n}\n\n.input-color:focus {\n color: var(--color-input);\n outline: none;\n border: 1.5px solid var(--color-border-hover);\n}\n\n.input-color:valid {\n color: var(--color-input);\n outline: none;\n}\n\n.input-color::-webkit-input-placeholder {\n color: var(--color-input);\n}\n\n.input-color::-moz-input-placeholder {\n color: var(--color-input);\n}\n\n.input-color::-ms-input-placeholder {\n color: var(--color-input);\n}\n\n.input-color:focus::-webkit-input-placeholder, input-color:valid::-webkit-input-placeholder {\n opacity: var(--input-focus-opacity);\n}\n\n.input-color:focus::-moz-input-placeholder, input-color:valid::-moz-input-placeholder {\n opacity: var(--input-focus-opacity);\n}\n\n.input-color:focus::-ms-input-placeholder, input-color:valid::-ms-input-placeholder {\n opacity: var(--input-focus-opacity);\n}\n\n.color-label {\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n color: var(--color-border);\n font-weight: 600;\n padding: 0 5px;\n border: 1.5px solid var(--color-border);\n border-radius: 20px;\n top: -11.5px;\n left: 25px;\n background-color: transparent;\n cursor: default;\n backdrop-filter: blur(10px);\n transition: var(--all-transition);\n}\n\n.input-color:focus ~ .color-label, input-color:valid ~ .color-label {\n color: var(--color-border-hover);\n border: 1.5px solid var(--color-border-hover);\n}\n\n.btn-copy {\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 24px;\n height: 24px;\n border: 1.5px solid var(--color-border);\n border-radius: 50%;\n top: -11.5px;\n right: 25px;\n background-color: transparent;\n cursor: pointer;\n backdrop-filter: blur(10px);\n transition: var(--all-transition);\n}\n\n.btn-copy:hover {\n background-color: var(--color-border);\n transform: scale(1.2);\n}\n\n.btn-copy:active {\n transform: scale(1.1);\n}\n\n.input-color:focus ~ .btn-copy {\n border: 1.5px solid var(--color-border-hover);\n}\n\n.input-color:valid .input-color:focus ~ .btn-copy {\n border: 1.5px solid var(--color-border);\n}\n\n.input-color:focus ~ .btn-copy:hover {\n background-color: var(--color-border-hover);\n}\n\n#icon-btn-copy {\n fill: var(--color-border);\n}\n\n.btn-copy:hover #icon-btn-copy {\n fill: var(--color-icon);\n}\n\n.input-color:focus ~ .btn-copy #icon-btn-copy {\n fill: var(--color-border-hover);\n}\n\n.input-color:focus ~ .btn-copy:hover #icon-btn-copy, .input-color:valid ~ .btn-copy:hover #icon-btn-copy {\n fill: var(--color-icon);\n}"},{"created":"2024-01-22T17:16:02.000Z","isPrivate":0,"projectId":"d374b1","snapshot":null,"tags":null,"title":"input by escannord","updated":"2024-01-22T17:16:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":76,"cssLen":487,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".input {\n max-width: 190px;\n height: 2rem;\n background-color: transparent;\n border: 2px solid transparent;\n color: white;\n padding: 1rem;\n box-shadow: 2px 2px 5px black, inset 2px 2px 5px rgb(53, 51, 51),\n -1px -1px 20px rgba(59, 56, 56, 0.781);\n outline: none;\n border-radius: 10px;\n font-size: medium;\n}\n\n.input:focus {\n box-shadow: 2px 2px 5px black, inset 2px 2px 5px black,\n -1px -1px 5px rgba(68, 67, 67, 0.781),\n inset -1px -1px 5px rgba(66, 65, 65, 0.822);\n}\n"},{"created":"2024-01-22T17:16:02.000Z","isPrivate":0,"projectId":"6a597f","snapshot":null,"tags":null,"title":"input by gamerlord295","updated":"2024-01-22T17:16:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":670,"cssLen":647,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n\nU\ns\ne\nr\nn\na\nm\ne\n

Username

\n\n

","css":".main {\n position: relative;\n max-height: 200px;\n}\n\n.input {\n max-width: 190px;\n border: none;\n border-bottom: solid gray 1px;\n background: transparent;\n outline: none;\n padding: 10px;\n transition: 0.2s;\n color: #e8e8e8;\n font-size: 17px;\n}\n\n.input:focus , .input:valid {\n border-color: lightblue;\n}\n\nlabel span {\n position: absolute;\n top: 0px;\n display: block;\n transition: 0.2s;\n pointer-events: none;\n font-size: 25px;\n color: gray;\n opacity: 0%;\n}\n\n.input:focus + label span ,.input:valid + label span {\n color: lightblue;\n top: -25px;\n opacity: 100%;\n}\n\n.input:focus + label p ,.input:valid + label p {\n opacity: 0;\n}"}]}},"actionData":null,"errors":null}