{"loaderData":{"0":null,"0-2":{"total":7177,"projects":[{"created":"2024-01-22T17:20:12.000Z","isPrivate":0,"projectId":"2cf038","snapshot":null,"tags":null,"title":"form by vinodjangid07","updated":"2024-01-22T17:20:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1595,"cssLen":2058,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".form_main {\n width: 280px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background-color: rgb(255, 255, 255);\n padding: 30px 30px 30px 30px;\n border-radius: 30px;\n box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.062);\n}\n\n.heading {\n font-size: 2.5em;\n color: #2e2e2e;\n font-weight: 700;\n margin: 15px 0 30px 0;\n}\n\n.inputContainer {\n width: 100%;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.inputIcon {\n position: absolute;\n left: 10px;\n}\n\n.inputField {\n width: 100%;\n height: 40px;\n background-color: transparent;\n border: none;\n border-bottom: 2px solid rgb(173, 173, 173);\n border-radius: 30px;\n margin: 10px 0;\n color: black;\n font-size: .8em;\n font-weight: 500;\n box-sizing: border-box;\n padding-left: 30px;\n}\n\n.inputField:focus {\n outline: none;\n border-bottom: 2px solid rgb(199, 114, 255);\n}\n\n.inputField::placeholder {\n color: rgb(80, 80, 80);\n font-size: 1em;\n font-weight: 500;\n}\n\n#button {\n position: relative;\n width: 100%;\n border: 2px solid #8000ff;\n background-color: #8000ff;\n height: 40px;\n color: white;\n font-size: .8em;\n font-weight: 500;\n letter-spacing: 1px;\n border-radius: 30px;\n margin: 10px;\n cursor: pointer;\n overflow: hidden;\n}\n\n#button::after {\n content: \"\";\n position: absolute;\n background-color: rgba(255, 255, 255, 0.253);\n height: 100%;\n width: 150px;\n top: 0;\n left: -200px;\n border-bottom-right-radius: 100px;\n border-top-left-radius: 100px;\n filter: blur(10px);\n transition-duration: .5s;\n}\n\n#button:hover::after {\n transform: translateX(600px);\n transition-duration: .5s;\n}\n\n.signupContainer {\n margin: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 20px;\n}\n\n.signupContainer p {\n font-size: .9em;\n font-weight: 500;\n color: black;\n}\n\n.signupContainer a {\n font-size: .7em;\n font-weight: 500;\n background-color: #2e2e2e;\n color: white;\n text-decoration: none;\n padding: 8px 15px;\n border-radius: 20px;\n}\n\n"},{"created":"2024-01-22T17:20:12.000Z","isPrivate":0,"projectId":"022625","snapshot":null,"tags":null,"title":"form by vinodjangid07","updated":"2024-01-22T17:20:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":427,"cssLen":1225,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n\n","css":".discountForm {\n width: 250px;\n height: 300px;\n background-color: rgb(255, 255, 255);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 20px 30px;\n gap: 20px;\n position: relative;\n box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.082);\n}\n\n.DiscountHeading {\n font-size: 1.5em;\n color: rgb(15, 15, 15);\n font-weight: 700;\n}\n\n.DiscountSubheading {\n font-size: 0.8em;\n color: black;\n text-align: center;\n}\n\n.inputContainer {\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n#email-address {\n height: 30px;\n width: 100%;\n border: 1px solid rgb(228, 228, 228);\n background-color: white;\n padding: 0px 10px;\n outline: none;\n text-align: center;\n}\n\n.submitButton {\n width: 100%;\n height: 30px;\n border: none;\n background-color: rgb(15, 15, 15);\n color: white;\n font-weight: 600;\n cursor: pointer;\n}\n\n.submitButton:hover {\n background-color: rgb(36, 36, 36);\n}\n\n.exitBtn {\n position: absolute;\n top: 5px;\n right: 5px;\n box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.171);\n background-color: rgb(255, 255, 255);\n border-radius: 50%;\n width: 25px;\n height: 25px;\n border: none;\n color: black;\n font-size: 1.1em;\n cursor: pointer;\n}"},{"created":"2024-01-22T17:20:12.000Z","isPrivate":0,"projectId":"435bd3","snapshot":null,"tags":null,"title":"form by Rohankumar620","updated":"2024-01-22T17:20:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1215,"cssLen":2586,"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}\n\n.form {\n display: flex;\n justify-content: center;\n align-items: center;\n transform-style: preserve-3d;\n transition: all 1s ease;\n}\n\n.form .form_front {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 20px;\n position: absolute;\n backface-visibility: hidden;\n padding: 65px 45px;\n border-radius: 15px;\n box-shadow: inset 2px 2px 10px rgba(0,0,0,1),\n inset -1px -1px 5px rgba(255, 255, 255, 0.6);\n}\n\n.form .form_back {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 20px;\n position: absolute;\n backface-visibility: hidden;\n transform: rotateY(-180deg);\n padding: 65px 45px;\n border-radius: 15px;\n box-shadow: inset 2px 2px 10px rgba(0,0,0,1),\n inset -1px -1px 5px rgba(255, 255, 255, 0.6);\n}\n\n.form_details {\n font-size: 25px;\n font-weight: 600;\n padding-bottom: 10px;\n color: white;\n}\n\n.input {\n width: 245px;\n min-height: 45px;\n color: #fff;\n outline: none;\n transition: 0.35s;\n padding: 0px 7px;\n background-color: #212121;\n border-radius: 6px;\n border: 2px solid #212121;\n box-shadow: 6px 6px 10px rgba(0,0,0,1),\n 1px 1px 10px rgba(255, 255, 255, 0.6);\n}\n\n.input::placeholder {\n color: #999;\n}\n\n.input:focus.input::placeholder {\n transition: 0.3s;\n opacity: 0;\n}\n\n.input:focus {\n transform: scale(1.05);\n box-shadow: 6px 6px 10px rgba(0,0,0,1),\n 1px 1px 10px rgba(255, 255, 255, 0.6),\n inset 2px 2px 10px rgba(0,0,0,1),\n inset -1px -1px 5px rgba(255, 255, 255, 0.6);\n}\n\n.btn {\n padding: 10px 35px;\n cursor: pointer;\n background-color: #212121;\n border-radius: 6px;\n border: 2px solid #212121;\n box-shadow: 6px 6px 10px rgba(0,0,0,1),\n 1px 1px 10px rgba(255, 255, 255, 0.6);\n color: #fff;\n font-size: 15px;\n font-weight: bold;\n transition: 0.35s;\n}\n\n.btn:hover {\n transform: scale(1.05);\n box-shadow: 6px 6px 10px rgba(0,0,0,1),\n 1px 1px 10px rgba(255, 255, 255, 0.6),\n inset 2px 2px 10px rgba(0,0,0,1),\n inset -1px -1px 5px rgba(255, 255, 255, 0.6);\n}\n\n.btn:focus {\n transform: scale(1.05);\n box-shadow: 6px 6px 10px rgba(0,0,0,1),\n 1px 1px 10px rgba(255, 255, 255, 0.6),\n inset 2px 2px 10px rgba(0,0,0,1),\n inset -1px -1px 5px rgba(255, 255, 255, 0.6);\n}\n\n.form .switch {\n font-size: 13px;\n color: white;\n}\n\n.form .switch .signup_tog {\n font-weight: 700;\n cursor: pointer;\n text-decoration: underline;\n}\n\n.container #signup_toggle {\n display: none;\n}\n\n.container #signup_toggle:checked + .form {\n transform: rotateY(-180deg);\n}"},{"created":"2024-01-22T17:20:12.000Z","isPrivate":0,"projectId":"d2da31","snapshot":null,"tags":null,"title":"form by kennyotsu","updated":"2024-01-22T17:20:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":24617,"cssLen":5659,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

+1 555 773-

unknown caller

\n\n

\n \n

\n \n \n

","css":".design-container {\n position: relative;\n font-family: Arial, Helvetica, sans-serif;\n}\n\n.design-wrapper {\n position: absolute;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n gap: 0.8rem;\n height: 100%;\n width: 100%;\n}\n\n.call {\n width: 280px;\n height: 90px;\n border-radius: 1.2rem;\n background: rgba(19, 19, 19, 0.836);\n overflow: hidden;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-direction: row;\n flex-direction: row;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-backdrop-filter: blur(15px);\n backdrop-filter: blur(15px);\n padding: 1rem;\n color: #fff;\n font-size: large;\n font-weight: bold;\n -webkit-box-shadow: 0px 0.2rem 0.5rem rgba(20, 20, 20, 0.322);\n box-shadow: 0px 0.2rem 0.5rem rgba(20, 20, 20, 0.322);\n -webkit-perspective: 800px;\n perspective: 800px;\n -webkit-animation: scale-out 10s infinite;\n animation: scale-out 10s infinite;\n position: relative;\n}\n\n.call::before {\n content: '';\n background-color: #111111e3;\n -webkit-filter: blur(5px);\n filter: blur(5px);\n inset: 0;\n position: absolute;\n z-index: -1;\n text-align: center;\n}\n\n.phone-number::after {\n content: \"1234\";\n background: -webkit-gradient(linear, left top, right top, color-stop(20%, rgb(206, 206, 206)), color-stop(40%, rgb(255, 255, 255)), color-stop(60%, rgb(255, 255, 255)), color-stop(80%, rgb(206, 206, 206)));\n background: linear-gradient(to right, rgb(206, 206, 206) 20%, rgb(255, 255, 255) 40%, rgb(255, 255, 255) 60%, rgb(206, 206, 206) 80%);\n background-size: 200% auto;\n color: #000;\n background-clip: text;\n text-fill-color: transparent;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n -webkit-animation: shine 1.5s linear infinite;\n animation: shine 1.5s linear infinite;\n}\n\n.phone-desc {\n font-weight: normal;\n font-size: 14px;\n color: #727272;\n}\n\n.button-wrapper {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: reverse;\n -ms-flex-direction: row-reverse;\n flex-direction: row-reverse;\n gap: 0.5rem;\n}\n\n.button {\n height: 40px;\n width: 40px;\n max-width: 40px;\n max-height: 40px;\n position: relative;\n border-radius: 100%;\n}\n\n.button:hover {\n cursor: auto;\n}\n\n.button svg {\n height: 20px;\n width: 20px;\n margin: auto;\n transform: translateX(10px)translateY(10px);\n fill: #fff;\n}\n\n.deny {\n background-color: #ec5445;\n}\n\n.deny svg {\n -webkit-transform: translateX(7px)translateY(10px) rotate(136deg) translate(-10%, -15%);\n -ms-transform: translateX(7px)translateY(10px) rotate(136deg) translate(-10%, -15%);\n transform: translateX(7px)translateY(10px) rotate(136deg) translate(-10%, -15%);\n}\n\n.allow {\n background-color: #68cd66;\n}\n\n.form-card {\n width: 280px;\n height: 350px;\n border-radius: 1.2rem;\n background-color: #fff;\n padding: 1.3rem;\n color: #212121;\n text-align: center;\n position: relative;\n}\n\n.form-card-title {\n font-size: 1.6rem;\n margin-bottom: 0.6rem;\n margin-top: 0.2rem;\n}\n\n.form-card-prompt {\n margin-bottom: 2rem;\n font-size: 14px;\n}\n/* hard reset */\n.form-card-input {\n all: unset;\n}\n\n.form-card-input-wrapper {\n position: relative;\n width: 100%;\n height: 3rem;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n margin-bottom: 1rem;\n}\n\n.form-card-input {\n font-size: 2rem;\n font-weight: bold;\n letter-spacing: 2rem;\n text-align: start;\n -webkit-transform: translateX(36px);\n -ms-transform: translateX(36px);\n transform: translateX(36px);\n position: absolute;\n z-index: 3;\n background-color: transparent;\n}\n\n.form-card-input-bg {\n content: '';\n width: 240px;\n height: 60px;\n margin: auto;\n inset: 0;\n bottom: 10px;\n position: absolute;\n z-index: 1;\n border-radius: 12px;\n background-color: rgba(206, 206, 206, 0.664);\n}\n\n.call-again {\n color: #5e5e5e;\n font-size: 14px;\n}\n\n.call-again:hover {\n cursor: pointer;\n}\n\n.underlined {\n text-decoration: underline;\n}\n\n.form-card-submit {\n position: absolute;\n width: 180px;\n margin: auto;\n color: white;\n border: none;\n background-color: #212121;\n font-size: 1.2rem;\n border-radius: 0.8rem;\n padding: 0.8rem 3.5rem;\n bottom: 2rem;\n left: 0;\n right: 0;\n -webkit-transition: 200ms ease-in-out;\n transition: 200ms ease-in-out;\n}\n\n.form-card-submit:hover {\n cursor: pointer;\n opacity: 0.8;\n}\n\n.form-card-submit:active {\n opacity: 0.9;\n -webkit-transform: scale(95%);\n -ms-transform: scale(95%);\n transform: scale(95%);\n}\n\n#uuid-d8a0d861-3741-4013 {\n width: auto;\n height: 500px;\n}\n\n@-webkit-keyframes scale-out {\n 0%, 15%, 100% {\n color: #fff;\n -webkit-transform: scale(72%);\n transform: scale(72%);\n }\n\n 16%, 98% {\n color: rgba(255, 255, 255, 0.295);\n -webkit-transform: scale(100%);\n transform: scale(100%);\n }\n}\n\n@keyframes scale-out {\n 0%, 15%, 100% {\n color: #fff;\n -webkit-transform: scale(72%);\n transform: scale(72%);\n }\n\n 16%, 98% {\n color: rgba(255, 255, 255, 0.295);\n -webkit-transform: scale(100%);\n transform: scale(100%);\n }\n}\n\n@-webkit-keyframes shine {\n to {\n background-position: 200% center;\n }\n}\n\n@keyframes shine {\n to {\n background-position: 200% center;\n }\n}"},{"created":"2024-01-22T17:20:12.000Z","isPrivate":0,"projectId":"1c6bf8","snapshot":null,"tags":null,"title":"form by themrsami","updated":"2024-01-22T17:20:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1423,"cssLen":3451,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Login

\n \n

\n","css":".mb-0{margin-bottom:0px}.mb-0\\.5{margin-bottom:0.125rem}.mb-4{margin-bottom:1rem}.mr-2{margin-right:0.5rem}.mt-4{margin-top:1rem}.flex{display:flex}.h-screen{height:100vh}.w-full{width:100%}.max-w-md{max-width:28rem}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.border-0{border-width:0px}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-indigo-500{--tw-gradient-from:#6366f1 var(--tw-gradient-from-position);--tw-gradient-to:rgb(99 102 241 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-blue-500{--tw-gradient-to:#3b82f6 var(--tw-gradient-to-position)}.p-2{padding:0.5rem}.p-6{padding:1.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-bold{font-weight:700}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246 / var(--tw-text-opacity))}.text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.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}.duration-150{transition-duration:150ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.hover\\:bg-indigo-600:hover{--tw-bg-opacity:1;background-color:rgb(79 70 229 / var(--tw-bg-opacity))}.hover\\:to-blue-600:hover{--tw-gradient-to:#2563eb var(--tw-gradient-to-position)}.hover\\:underline:hover{-webkit-text-decoration-line:underline;text-decoration-line:underline}.focus\\:bg-gray-600:focus{--tw-bg-opacity:1;background-color:rgb(75 85 99 / var(--tw-bg-opacity))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-1:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.focus\\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246 / var(--tw-ring-opacity))}"},{"created":"2024-01-22T17:20:12.000Z","isPrivate":0,"projectId":"856a39","snapshot":null,"tags":null,"title":"form by Yaya12085","updated":"2024-01-22T17:20:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":532,"cssLen":966,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".form {\n max-width: 320px;\n width: 100%;\n background-color: #fff;\n padding: 20px;\n box-shadow: 0px 0px 0px 4px rgba(52, 52, 53, 0.185);\n display: flex;\n flex-direction: column;\n border-radius: 10px;\n}\n\n.title {\n text-align: center;\n font-size: 2rem;\n margin-bottom: 20px;\n color: #1a202c;\n}\n\n.label {\n color: rgb(0, 0, 0);\n margin-bottom: 4px;\n}\n\n.input {\n padding: 10px;\n margin-bottom: 20px;\n width: 100%;\n font-size: 1rem;\n color: #4a5568;\n outline: none;\n border: 1px solid transparent;\n border-radius: 4px;\n transition: all 0.2s ease-in-out;\n}\n\n.input:focus {\n background-color: #fff;\n box-shadow: 0 0 0 2px #cbd5e0;\n}\n\n.input:valid {\n border: 1px solid green;\n}\n\n.input:invalid {\n border: 1px solid rgba(14, 14, 14, 0.205);\n}\n\n.submit {\n background-color: #1a202c;\n color: #fff;\n border: none;\n border-radius: 4px;\n padding: 10px 20px;\n font-size: 1.2rem;\n cursor: pointer;\n transition: all 0.2s ease-in-out;\n}\n \n \n "},{"created":"2024-01-22T17:20:12.000Z","isPrivate":0,"projectId":"59a8c7","snapshot":null,"tags":null,"title":"form by JkHuger","updated":"2024-01-22T17:20:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":630,"cssLen":2036,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Sign Up\n

\n \n Email\n

\n\n

\n \n Username\n

\n\n

\n \n Password\n

\n\n \n\n

","css":".singup {\n color: #000;\n text-transform: uppercase;\n letter-spacing: 2px;\n display: block;\n font-weight: bold;\n font-size: x-large;\n margin-top: 1.5em;\n}\n\n.card {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 350px;\n width: 300px;\n flex-direction: column;\n gap: 35px;\n border-radius: 15px;\n background: #e3e3e3;\n box-shadow: 16px 16px 32px #c8c8c8,\n -16px -16px 32px #fefefe;\n border-radius: 8px;\n}\n\n.inputBox,\n.inputBox1 {\n position: relative;\n width: 250px;\n}\n\n.inputBox input,\n.inputBox1 input {\n width: 100%;\n padding: 10px;\n outline: none;\n border: none;\n color: #000;\n font-size: 1em;\n background: transparent;\n border-left: 2px solid #000;\n border-bottom: 2px solid #000;\n transition: 0.1s;\n border-bottom-left-radius: 8px;\n}\n\n.inputBox span,\n.inputBox1 span {\n margin-top: 5px;\n position: absolute;\n left: 0;\n transform: translateY(-4px);\n margin-left: 10px;\n padding: 10px;\n pointer-events: none;\n font-size: 12px;\n color: #000;\n text-transform: uppercase;\n transition: 0.5s;\n letter-spacing: 3px;\n border-radius: 8px;\n}\n\n.inputBox input:valid~span,\n.inputBox input:focus~span {\n transform: translateX(113px) translateY(-15px);\n font-size: 0.8em;\n padding: 5px 10px;\n background: #000;\n letter-spacing: 0.2em;\n color: #fff;\n border: 2px;\n}\n\n.inputBox1 input:valid~span,\n.inputBox1 input:focus~span {\n transform: translateX(156px) translateY(-15px);\n font-size: 0.8em;\n padding: 5px 10px;\n background: #000;\n letter-spacing: 0.2em;\n color: #fff;\n border: 2px;\n}\n\n.inputBox input:valid,\n.inputBox input:focus,\n.inputBox1 input:valid,\n.inputBox1 input:focus {\n border: 2px solid #000;\n border-radius: 8px;\n}\n\n.enter {\n height: 45px;\n width: 100px;\n border-radius: 5px;\n border: 2px solid #000;\n cursor: pointer;\n background-color: transparent;\n transition: 0.5s;\n text-transform: uppercase;\n font-size: 10px;\n letter-spacing: 2px;\n margin-bottom: 3em;\n}\n\n.enter:hover {\n background-color: rgb(0, 0, 0);\n color: white;\n}"},{"created":"2024-01-22T17:20:12.000Z","isPrivate":0,"projectId":"e23602","snapshot":null,"tags":null,"title":"form by VitorBaraoDias","updated":"2024-01-22T17:20:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":451,"cssLen":1438,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".form-control {\n margin: 20px;\n background-color: #ffffff;\n box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);\n width: 400px;\n display: flex;\n justify-content: center;\n flex-direction: column;\n gap: 10px;\n padding: 25px;\n border-radius: 8px;\n}\n.title {\n font-size: 28px;\n font-weight: 800;\n}\n.input-field {\n position: relative;\n width: 100%;\n}\n\n.input {\n margin-top: 15px;\n width: 100%;\n outline: none;\n border-radius: 8px;\n height: 45px;\n border: 1.5px solid #ecedec;\n background: transparent;\n padding-left: 10px;\n}\n.input:focus {\n border: 1.5px solid #2d79f3;\n}\n.input-field .label {\n position: absolute;\n top: 25px;\n left: 15px;\n color: #ccc;\n transition: all 0.3s ease;\n pointer-events: none;\n z-index: 2;\n}\n.input-field .input:focus ~ .label,\n.input-field .input:valid ~ .label {\n top: 5px;\n left: 5px;\n font-size: 12px;\n color: #2d79f3;\n background-color: #ffffff;\n padding-left: 5px;\n padding-right: 5px;\n}\n.submit-btn {\n margin-top: 30px;\n height: 55px;\n background: #f2f2f2;\n border-radius: 11px;\n border: 0;\n outline: none;\n color: #ffffff;\n font-size: 18px;\n font-weight: 700;\n background: linear-gradient(180deg, #363636 0%, #1b1b1b 50%, #000000 100%);\n box-shadow: 0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #000000;\n transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);\n cursor: pointer;\n}\n\n.submit-btn:hover {\n box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #0000003a;\n}\n"},{"created":"2024-01-22T17:20:12.000Z","isPrivate":0,"projectId":"412582","snapshot":null,"tags":null,"title":"form by MikeAndrewDesigner","updated":"2024-01-22T17:20:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":384,"cssLen":2203,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".login {\n width: 340px;\n height: 400px;\n background: #2c2c2c;\n padding: 47px;\n padding-bottom: 57px;\n color: #fff;\n border-radius: 17px;\n padding-bottom: 50px;\n font-size: 1.3em;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n}\n\n.login input[type=\"text\"],\n.login input[type=\"password\"] {\n opacity: 1;\n display: block;\n border: none;\n outline: none;\n width: 100%;\n padding: 13px 18px;\n margin: 20px 0 0 0;\n font-size: 0.8em;\n border-radius: 100px;\n background: #3c3c3c;\n color: #fff;\n}\n\n.login input:focus {\n animation: bounce 1s;\n -webkit-appearance: none;\n}\n\n.login input[type=submit],\n.login input[type=button],\n.h1 {\n border: 0;\n outline: 0;\n width: 100%;\n padding: 13px;\n margin: 40px 0 0 0;\n border-radius: 500px;\n font-weight: 600;\n animation: bounce2 1.6s;\n}\n\n.h1 {\n padding: 0;\n position: relative;\n top: -35px;\n display: block;\n margin-bottom: -0px;\n font-size: 1.3em;\n}\n\n.btn {\n background: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb);\n color: #fff;\n padding: 16px !important;\n}\n\n.btn:hover {\n background: linear-gradient(144deg, #1e1e1e , 20%,#1e1e1e 50%,#1e1e1e );\n color: rgb(255, 255, 255);\n padding: 16px !important;\n cursor: pointer;\n transition: all 0.4s ease;\n}\n\n.login input[type=text] {\n animation: bounce 1s;\n -webkit-appearance: none;\n}\n\n.login input[type=password] {\n animation: bounce1 1.3s;\n}\n\n.ui {\n font-weight: bolder;\n background: -webkit-linear-gradient(#B563FF, #535EFC, #0EC8EE);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n border-bottom: 4px solid transparent;\n border-image: linear-gradient(0.25turn, #535EFC, #0EC8EE, #0EC8EE);\n border-image-slice: 1;\n display: inline;\n}\n\n@media only screen and (max-width: 600px) {\n .login {\n width: 70%;\n padding: 3em;\n }\n}\n\n@keyframes bounce {\n 0% {\n transform: translateY(-250px);\n opacity: 0;\n }\n}\n\n@keyframes bounce1 {\n 0% {\n opacity: 0;\n }\n\n 40% {\n transform: translateY(-100px);\n opacity: 0;\n }\n}\n\n@keyframes bounce2 {\n 0% {\n opacity: 0;\n }\n\n 70% {\n transform: translateY(-20px);\n opacity: 0;\n }\n}"},{"created":"2024-01-22T17:20:12.000Z","isPrivate":0,"projectId":"6c8336","snapshot":null,"tags":null,"title":"form by JohnnyCSilva","updated":"2024-01-22T17:20:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4564,"cssLen":1895,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".form {\n display: flex;\n flex-direction: column;\n gap: 10px;\n background-color: #ffffff;\n padding: 30px;\n width: 450px;\n border-radius: 20px;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n}\n\n::placeholder {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n}\n\n.form button {\n align-self: flex-end;\n}\n\n.flex-column > label {\n color: #151717;\n font-weight: 600;\n}\n\n.inputForm {\n border: 1.5px solid #ecedec;\n border-radius: 10px;\n height: 50px;\n display: flex;\n align-items: center;\n padding-left: 10px;\n transition: 0.2s ease-in-out;\n}\n\n.input {\n margin-left: 10px;\n border-radius: 10px;\n border: none;\n width: 100%;\n height: 100%;\n}\n\n.input:focus {\n outline: none;\n}\n\n.inputForm:focus-within {\n border: 1.5px solid #2d79f3;\n}\n\n.flex-row {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 10px;\n justify-content: space-between;\n}\n\n.flex-row > div > label {\n font-size: 14px;\n color: black;\n font-weight: 400;\n}\n\n.span {\n font-size: 14px;\n margin-left: 5px;\n color: #2d79f3;\n font-weight: 500;\n cursor: pointer;\n}\n\n.button-submit {\n margin: 20px 0 10px 0;\n background-color: #151717;\n border: none;\n color: white;\n font-size: 15px;\n font-weight: 500;\n border-radius: 10px;\n height: 50px;\n width: 100%;\n cursor: pointer;\n}\n\n.p {\n text-align: center;\n color: black;\n font-size: 14px;\n margin: 5px 0;\n}\n\n.btn {\n margin-top: 10px;\n width: 100%;\n height: 50px;\n border-radius: 10px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-weight: 500;\n gap: 10px;\n border: 1px solid #ededef;\n background-color: white;\n cursor: pointer;\n transition: 0.2s ease-in-out;\n}\n\n.btn:hover {\n border: 1px solid #2d79f3;\n ;\n}\n\n "},{"created":"2024-01-22T17:20:12.000Z","isPrivate":0,"projectId":"c0e05a","snapshot":null,"tags":null,"title":"form by themrsami","updated":"2024-01-22T17:20:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3010,"cssLen":3522,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Sign Up

\n","css":".mb-2{margin-bottom:0.5rem}.mb-4{margin-bottom:1rem}.mt-4{margin-top:1rem}.flex{display:flex}.h-screen{height:100vh}.w-1\\/2{width:50%}.w-full{width:100%}.max-w-md{max-width:28rem}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.space-x-4 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.border-0{border-width:0px}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-indigo-500{--tw-gradient-from:#6366f1 var(--tw-gradient-from-position);--tw-gradient-to:rgb(99 102 241 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-blue-500{--tw-gradient-to:#3b82f6 var(--tw-gradient-to-position)}.p-2{padding:0.5rem}.p-6{padding:1.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-bold{font-weight:700}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246 / var(--tw-text-opacity))}.text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.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}.duration-150{transition-duration:150ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.hover\\:bg-indigo-600:hover{--tw-bg-opacity:1;background-color:rgb(79 70 229 / var(--tw-bg-opacity))}.hover\\:to-blue-600:hover{--tw-gradient-to:#2563eb var(--tw-gradient-to-position)}.hover\\:underline:hover{-webkit-text-decoration-line:underline;text-decoration-line:underline}.focus\\:bg-gray-600:focus{--tw-bg-opacity:1;background-color:rgb(75 85 99 / var(--tw-bg-opacity))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-1:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.focus\\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246 / var(--tw-ring-opacity))}"},{"created":"2024-01-22T17:20:12.000Z","isPrivate":0,"projectId":"b57285","snapshot":null,"tags":null,"title":"form by eslam-hany","updated":"2024-01-22T17:20:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":253,"cssLen":1967,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".form {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 50px 30px;\n background: #0b2447;\n border-radius: 10px;\n overflow: hidden;\n perspective: 1000px;\n transform-style: preserve-3d;\n transform: rotateX(-10deg);\n transition: all 0.3s ease-in-out;\n box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;\n animation: form-animation 0.5s ease-in-out;\n}\n\n@keyframes form-animation {\n from {\n transform: rotateX(-30deg);\n opacity: 0;\n }\n\n to {\n transform: rotateX(0deg);\n opacity: 1;\n }\n}\n\n.input {\n padding: 15px 10px;\n border-radius: 5px;\n margin-bottom: 10px;\n background-color: transparent;\n transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out, transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;\n transform-style: preserve-3d;\n color: rgb(255, 255, 255);\n border: 2px solid #3b8df2;\n box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;\n}\n\n.input::placeholder {\n color: #fff;\n}\n\n.input:hover,\n.input:focus {\n border-color: #3b8df2;\n background-color: transparent;\n transform: scale(1.05) rotateY(20deg);\n box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);\n outline: none;\n}\n\nbutton {\n padding: 10px 20px;\n border: none;\n border-radius: 5px;\n background-color: transparent;\n color: #fff;\n font-size: 16px;\n cursor: pointer;\n transform-style: preserve-3d;\n backface-visibility: hidden;\n transform: rotateX(-10deg);\n transition: all 0.3s ease-in-out;\n box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;\n}\n\nbutton:hover {\n background-color: #0077be;\n font-size: 17px;\n transform: scale(1.05) rotateY(20deg) rotateX(10deg);\n box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;\n}\n"}]}},"actionData":null,"errors":null}