{"loaderData":{"0":null,"0-2":{"total":7178,"projects":[{"created":"2024-01-22T17:15:59.000Z","isPrivate":0,"projectId":"2403ae","snapshot":null,"tags":null,"title":"input by Yaseen549","updated":"2024-01-22T17:15:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":85,"cssLen":280,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".input {\n border: 2px solid #e8e8e8;\n padding: 15px;\n border-radius: 10px;\n background-color: #212121;\n font-size: small;\n font-weight: bold;\n text-align: center;\n}\n\n.input:focus {\n outline-color: white;\n background-color: #212121;\n color: #e8e8e8;\n box-shadow: 5px 5px #888888;\n}"},{"created":"2024-01-22T17:15:59.000Z","isPrivate":0,"projectId":"9c7c34","snapshot":null,"tags":null,"title":"input by ercnersoy","updated":"2024-01-22T17:15:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":73,"cssLen":330,"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 padding: 1rem;\n border-radius: 1rem;\n background: #e8e8e8;\n box-shadow: 20px 20px 60px #c5c5c5,\n\t\t-20px -20px 60px #ffffff;\n transition: 0.3s;\n}\n\n.input:focus {\n outline-color: #e8e8e8;\n background: #e8e8e8;\n box-shadow: inset 20px 20px 60px #c5c5c5,\n\t\tinset -20px -20px 60px #ffffff;\n transition: 0.3s;\n}"},{"created":"2024-01-22T17:15:59.000Z","isPrivate":0,"projectId":"35de73","snapshot":null,"tags":null,"title":"input by Galahhad","updated":"2024-01-22T17:15:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":853,"cssLen":1389,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n /\n \n ","css":".search-label {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n position: relative;\n border: 1px solid transparent;\n border-radius: 12px;\n overflow: hidden;\n background: #3D3D3D;\n padding: 9px;\n cursor: text;\n}\n\n.search-label:hover {\n border-color: gray;\n}\n\n.search-label:focus-within {\n background: #464646;\n border-color: gray;\n}\n\n.search-label input {\n outline: none;\n width: 100%;\n border: none;\n background: none;\n color: rgb(162, 162, 162);\n}\n\n.search-label input:focus+.slash-icon,\n.search-label input:valid+.slash-icon {\n display: none;\n}\n\n.search-label input:valid~.search-icon {\n display: block;\n}\n\n.search-label input:valid {\n width: calc(100% - 22px);\n transform: translateX(20px);\n}\n\n.search-label svg,\n.slash-icon {\n position: absolute;\n color: #7e7e7e;\n}\n\n.search-icon {\n display: none;\n width: 12px;\n height: auto;\n}\n\n.slash-icon {\n right: 7px;\n border: 1px solid #393838;\n background: linear-gradient(-225deg, #343434, #6d6d6d);\n border-radius: 3px;\n text-align: center;\n box-shadow: inset 0 -2px 0 0 #3f3f3f, inset 0 0 1px 1px rgb(94, 93, 93), 0 1px 2px 1px rgba(28, 28, 29, 0.4);\n cursor: pointer;\n font-size: 12px;\n width: 15px;\n}\n\n.slash-icon:active {\n box-shadow: inset 0 1px 0 0 #3f3f3f, inset 0 0 1px 1px rgb(94, 93, 93), 0 1px 2px 0 rgba(28, 28, 29, 0.4);\n text-shadow: 0 1px 0 #7e7e7e;\n color: transparent;\n}"},{"created":"2024-01-22T17:15:59.000Z","isPrivate":0,"projectId":"d29eee","snapshot":null,"tags":null,"title":"input by shadowmurphy","updated":"2024-01-22T17:15:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":40,"cssLen":354,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".input {\n border: 2px solid transparent;\n width: 15em;\n height: 2.5em;\n padding-left: 0.8em;\n outline: none;\n overflow: hidden;\n background-color: #F3F3F3;\n border-radius: 10px;\n transition: all 0.5s;\n}\n\n.input:hover,\n.input:focus {\n border: 2px solid #4A9DEC;\n box-shadow: 0px 0px 0px 7px rgb(74, 157, 236, 20%);\n background-color: white;\n}\n"},{"created":"2024-01-22T17:15:59.000Z","isPrivate":0,"projectId":"f761ed","snapshot":null,"tags":null,"title":"input by vinodjangid07","updated":"2024-01-22T17:15:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1484,"cssLen":2062,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n Add an image\n \n \n

\n \n \n

\n","css":".messageBox {\n width: fit-content;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #2d2d2d;\n padding: 0 15px;\n border-radius: 10px;\n border: 1px solid rgb(63, 63, 63);\n}\n.messageBox:focus-within {\n border: 1px solid rgb(110, 110, 110);\n}\n.fileUploadWrapper {\n width: fit-content;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: Arial, Helvetica, sans-serif;\n}\n\n#file {\n display: none;\n}\n.fileUploadWrapper label {\n cursor: pointer;\n width: fit-content;\n height: fit-content;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n}\n.fileUploadWrapper label svg {\n height: 18px;\n}\n.fileUploadWrapper label svg path {\n transition: all 0.3s;\n}\n.fileUploadWrapper label svg circle {\n transition: all 0.3s;\n}\n.fileUploadWrapper label:hover svg path {\n stroke: #fff;\n}\n.fileUploadWrapper label:hover svg circle {\n stroke: #fff;\n fill: #3c3c3c;\n}\n.fileUploadWrapper label:hover .tooltip {\n display: block;\n opacity: 1;\n}\n.tooltip {\n position: absolute;\n top: -40px;\n display: none;\n opacity: 0;\n color: white;\n font-size: 10px;\n text-wrap: nowrap;\n background-color: #000;\n padding: 6px 10px;\n border: 1px solid #3c3c3c;\n border-radius: 5px;\n box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.596);\n transition: all 0.3s;\n}\n#messageInput {\n width: 200px;\n height: 100%;\n background-color: transparent;\n outline: none;\n border: none;\n padding-left: 10px;\n color: white;\n}\n#messageInput:focus ~ #sendButton svg path,\n#messageInput:valid ~ #sendButton svg path {\n fill: #3c3c3c;\n stroke: white;\n}\n\n#sendButton {\n width: fit-content;\n height: 100%;\n background-color: transparent;\n outline: none;\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.3s;\n}\n#sendButton svg {\n height: 18px;\n transition: all 0.3s;\n}\n#sendButton svg path {\n transition: all 0.3s;\n}\n#sendButton:hover svg path {\n fill: #3c3c3c;\n stroke: white;\n}\n"},{"created":"2024-01-22T17:15:59.000Z","isPrivate":0,"projectId":"f69570","snapshot":null,"tags":null,"title":"input by alexruix","updated":"2024-01-22T17:15:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":176,"cssLen":660,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Email address\n \n

","css":".input {\n max-width: 190px;\n height: 44px;\n background-color: #05060f0a;\n border-radius: .5rem;\n padding: 0 1rem;\n border: 2px solid transparent;\n font-size: 1rem;\n transition: border-color .3s cubic-bezier(.25,.01,.25,1) 0s, color .3s cubic-bezier(.25,.01,.25,1) 0s,background .2s cubic-bezier(.25,.01,.25,1) 0s;\n}\n\n.label {\n display: block;\n margin-bottom: .3rem;\n font-size: .9rem;\n font-weight: bold;\n color: #05060f99;\n transition: color .3s cubic-bezier(.25,.01,.25,1) 0s;\n}\n\n.input:hover, .input:focus, .input-group:hover .input {\n outline: none;\n border-color: #05060f;\n}\n\n.input-group:hover .label, .input:focus {\n color: #05060fc2;\n}"},{"created":"2024-01-22T17:15:59.000Z","isPrivate":0,"projectId":"04252b","snapshot":null,"tags":null,"title":"input by eslam-hany","updated":"2024-01-22T17:15:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":197,"cssLen":1147,"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 border-bottom: 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:15:59.000Z","isPrivate":0,"projectId":"0b5747","snapshot":null,"tags":null,"title":"input by EddyBel","updated":"2024-01-22T17:15:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":537,"cssLen":1543,"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 background: rgba(255, 255, 255, 0.664);\n padding: 10px 15px;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 5px;\n border-radius: 22px;\n max-width: 300px;\n transition: transform 400ms;\n transform-style: preserve-3d;\n transform: rotateX(15deg) rotateY(-20deg);\n perspective: 500px;\n}\n\n.shadow__input {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n bottom: 0;\n z-index: -1;\n filter: blur(30px);\n border-radius: 20px;\n background-color: #999cff;\n background-image: radial-gradient(at 85% 51%, hsla(60,60%,61%,1) 0px, transparent 50%),\n radial-gradient(at 74% 68%, hsla(235,69%,77%,1) 0px, transparent 50%),\n radial-gradient(at 64% 79%, hsla(284,72%,73%,1) 0px, transparent 50%),\n radial-gradient(at 75% 16%, hsla(283,60%,72%,1) 0px, transparent 50%),\n radial-gradient(at 90% 65%, hsla(153,70%,64%,1) 0px, transparent 50%),\n radial-gradient(at 91% 83%, hsla(283,74%,69%,1) 0px, transparent 50%),\n radial-gradient(at 72% 91%, hsla(213,75%,75%,1) 0px, transparent 50%);\n}\n\n.input__button__shadow {\n cursor: pointer;\n border: none;\n background: none;\n transition: transform 400ms, background 400ms;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 12px;\n padding: 5px;\n}\n\n.input__button__shadow:hover {\n background: rgba(255, 255, 255, 0.411);\n}\n\n.input__search {\n width: 100%;\n border-radius: 20px;\n outline: none;\n border: none;\n padding: 8px;\n position: relative;\n}"},{"created":"2024-01-22T17:15:59.000Z","isPrivate":0,"projectId":"874fb0","snapshot":null,"tags":null,"title":"input by alexruix","updated":"2024-01-22T17:15:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":212,"cssLen":630,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

","css":".input-group {\n display: flex;\n align-items: center;\n}\n\n.input {\n min-height: 50px;\n max-width: 150px;\n padding: 0 1rem;\n color: #fff;\n font-size: 15px;\n border: 1px solid #5e4dcd;\n border-radius: 6px 0 0 6px;\n background-color: transparent;\n}\n\n.button--submit {\n min-height: 50px;\n padding: .5em 1em;\n border: none;\n border-radius: 0 6px 6px 0;\n background-color: #5e4dcd;\n color: #fff;\n font-size: 15px;\n cursor: pointer;\n transition: background-color .3s ease-in-out;\n}\n\n.button--submit:hover {\n background-color: #5e5dcd;\n}\n\n.input:focus, .input:focus-visible {\n border-color: #3898EC;\n outline: none;\n}\n"},{"created":"2024-01-22T17:15:59.000Z","isPrivate":0,"projectId":"3d0533","snapshot":null,"tags":null,"title":"input by Yaseen549","updated":"2024-01-22T17:15:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":78,"cssLen":430,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".input {\n background-color: #212121;\n max-width: 190px;\n height: 40px;\n padding: 10px;\n /* text-align: center; */\n border: 2px solid white;\n border-radius: 5px;\n /* box-shadow: 3px 3px 2px rgb(249, 255, 85); */\n}\n\n.input:focus {\n color: rgb(0, 255, 255);\n background-color: #212121;\n outline-color: rgb(0, 255, 255);\n box-shadow: -3px -3px 15px rgb(0, 255, 255);\n transition: .1s;\n transition-property: box-shadow;\n}"},{"created":"2024-01-22T17:15:59.000Z","isPrivate":0,"projectId":"2f1582","snapshot":null,"tags":null,"title":"input by satyamchaudharydev","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":800,"cssLen":1737,"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/* removing default style of button */\n\n.form button {\n border: none;\n background: none;\n color: #8b8ba7;\n}\n/* styling of whole input container */\n.form {\n --timing: 0.3s;\n --width-of-input: 200px;\n --height-of-input: 40px;\n --border-height: 2px;\n --input-bg: #fff;\n --border-color: #2f2ee9;\n --border-radius: 30px;\n --after-border-radius: 1px;\n position: relative;\n width: var(--width-of-input);\n height: var(--height-of-input);\n display: flex;\n align-items: center;\n padding-inline: 0.8em;\n border-radius: var(--border-radius);\n transition: border-radius 0.5s ease;\n background: var(--input-bg,#fff);\n}\n/* styling of Input */\n.input {\n font-size: 0.9rem;\n background-color: transparent;\n width: 100%;\n height: 100%;\n padding-inline: 0.5em;\n padding-block: 0.7em;\n border: none;\n}\n/* styling of animated border */\n.form:before {\n content: \"\";\n position: absolute;\n background: var(--border-color);\n transform: scaleX(0);\n transform-origin: center;\n width: 100%;\n height: var(--border-height);\n left: 0;\n bottom: 0;\n border-radius: 1px;\n transition: transform var(--timing) ease;\n}\n/* Hover on Input */\n.form:focus-within {\n border-radius: var(--after-border-radius);\n}\n\ninput:focus {\n outline: none;\n}\n/* here is code of animated border */\n.form:focus-within:before {\n transform: scale(1);\n}\n/* styling of close button */\n/* == you can click the close button to remove text == */\n.reset {\n border: none;\n background: none;\n opacity: 0;\n visibility: hidden;\n}\n/* close button shown when typing */\ninput:not(:placeholder-shown) ~ .reset {\n opacity: 1;\n visibility: visible;\n}\n/* sizing svg icons */\n.form svg {\n width: 17px;\n margin-top: 3px;\n}"},{"created":"2024-01-22T17:11:33.000Z","isPrivate":0,"projectId":"53fd7e","snapshot":null,"tags":null,"title":"card by garerim","updated":"2024-01-22T17:11:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":202,"cssLen":1101,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Add to Cart

Lorem ipsum

Price : 15$

\n \n

","css":".card {\n position: relative;\n width: 190px;\n height: 254px;\n background: #fff;\n border: solid 4px #333;\n box-shadow: -5px 5px #333;\n transition: all .2s ease-in-out;\n display: flex;\n justify-content: center;\n cursor: pointer;\n}\n\n.card:hover {\n margin: 10px 10px 0 0;\n box-shadow: 0px 0px #333;\n}\n\n.card .img-card {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: calc(100% - 50px);\n display: flex;\n justify-content: center;\n align-items: center;\n transition: filter .2s 1s ease-in-out;\n}\n\n.card:hover .img-card {\n filter: blur(1px);\n}\n\n.card .add-cart {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: calc(100% - 50px);\n background-color: rgba(0, 0, 0, 0.1);\n text-align: center;\n line-height: 250px;\n font-weight: bold;\n font-size: 19px;\n opacity: 0;\n}\n\n.card:hover .add-cart {\n opacity: 1;\n transition: opacity .3s 1s ease-in-out;\n}\n\n.card .info-card {\n position: absolute;\n height: 50px;\n width: 100%;\n bottom: 0;\n left: 0;\n right: 0;\n border-top: solid 1px #333;\n}\n\n.card .info-card p {\n font-size: 14px;\n margin: 5px;\n}\n\n"}]}},"actionData":null,"errors":null}