assets

{"loaderData":{"0":null,"0-3":{"total":7437,"projects":[{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"f1f830","snapshot":null,"tags":null,"title":"form by jeel-sardhara","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2411,"cssLen":2844,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".container {\n max-width: 350px;\n background: #f8f9fd;\n background: linear-gradient(\n 0deg,\n rgb(255, 255, 255) 0%,\n rgb(244, 247, 251) 100%\n );\n border-radius: 40px;\n padding: 25px 35px;\n border: 5px solid rgb(255, 255, 255);\n box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 30px 30px -20px;\n margin: 20px;\n}\n\n.heading {\n text-align: center;\n font-weight: 900;\n font-size: 30px;\n color: rgb(16, 137, 211);\n}\n\n.form {\n margin-top: 20px;\n}\n\n.form .input {\n width: 100%;\n background: white;\n border: none;\n padding: 15px 20px;\n border-radius: 20px;\n margin-top: 15px;\n box-shadow: #cff0ff 0px 10px 10px -5px;\n border-inline: 2px solid transparent;\n}\n\n.form .input::-moz-placeholder {\n color: rgb(170, 170, 170);\n}\n\n.form .input::placeholder {\n color: rgb(170, 170, 170);\n}\n\n.form .input:focus {\n outline: none;\n border-inline: 2px solid #12b1d1;\n}\n\n.form .forgot-password {\n display: block;\n margin-top: 10px;\n margin-left: 10px;\n}\n\n.form .forgot-password a {\n font-size: 11px;\n color: #0099ff;\n text-decoration: none;\n}\n\n.form .login-button {\n display: block;\n width: 100%;\n font-weight: bold;\n background: linear-gradient(\n 45deg,\n rgb(16, 137, 211) 0%,\n rgb(18, 177, 209) 100%\n );\n color: white;\n padding-block: 15px;\n margin: 20px auto;\n border-radius: 20px;\n box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 20px 10px -15px;\n border: none;\n transition: all 0.2s ease-in-out;\n}\n\n.form .login-button:hover {\n transform: scale(1.03);\n box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 23px 10px -20px;\n}\n\n.form .login-button:active {\n transform: scale(0.95);\n box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 15px 10px -10px;\n}\n\n.social-account-container {\n margin-top: 25px;\n}\n\n.social-account-container .title {\n display: block;\n text-align: center;\n font-size: 10px;\n color: rgb(170, 170, 170);\n}\n\n.social-account-container .social-accounts {\n width: 100%;\n display: flex;\n justify-content: center;\n gap: 15px;\n margin-top: 5px;\n}\n\n.social-account-container .social-accounts .social-button {\n background: linear-gradient(45deg, rgb(0, 0, 0) 0%, rgb(112, 112, 112) 100%);\n border: 5px solid white;\n padding: 5px;\n border-radius: 50%;\n width: 40px;\n aspect-ratio: 1;\n display: grid;\n place-content: center;\n box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 12px 10px -8px;\n transition: all 0.2s ease-in-out;\n}\n\n.social-account-container .social-accounts .social-button .svg {\n fill: white;\n margin: auto;\n}\n\n.social-account-container .social-accounts .social-button:hover {\n transform: scale(1.2);\n}\n\n.social-account-container .social-accounts .social-button:active {\n transform: scale(0.9);\n}\n\n.agreement {\n display: block;\n text-align: center;\n margin-top: 15px;\n}\n\n.agreement a {\n text-decoration: none;\n color: #0099ff;\n font-size: 9px;\n}\n"},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"8bd044","snapshot":null,"tags":null,"title":"form by Galahhad","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":6296,"cssLen":3544,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

","css":".form-container__sign-app-buttons svg {\n width: 22px;\n height: auto;\n}\n\n.google svg {\n width: 18px;\n height: auto;\n}\n\n.form-container {\n min-width: 350px;\n box-sizing: border-box;\n font-family: sans-serif;\n color: #4b4b4b;\n min-height: 20px;\n padding: 19px;\n margin-bottom: 20px;\n background-color: #f5f5f5;\n}\n\n.form-container:focus-within:not(:focus) {\n box-shadow: 0 0 6px 3px #caedff;\n -webkit-box-shadow: 0 0 6px 3px #caedff;\n outline: 1px solid #97dbff;\n}\n\n.form-container p {\n font-size: 14px;\n font-weight: bold;\n margin-bottom: 14px;\n}\n\n.top-line {\n padding-top: 12px;\n}\n\n.form-container__form {\n display: flex;\n flex-direction: column;\n row-gap: 16px;\n}\n\n.form-container__form input {\n height: 31px;\n border: 1px solid #d9d9d9;\n padding: 4px;\n font-size: 14px;\n line-height: 1.65;\n -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);\n box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);\n -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;\n -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;\n transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;\n}\n\n.form-container__form input:focus {\n border-color: #00a6fd;\n outline: 0;\n box-shadow: none;\n}\n\n.form-container__register-buttons {\n display: flex;\n column-gap: 10px;\n}\n\n.form-container__sign {\n padding: 8px 20px;\n font-size: 14px;\n line-height: 1.65;\n border-radius: 20px;\n width: 110px;\n white-space: nowrap;\n background-color: #00a6fd;\n border: none;\n color: white;\n font-weight: bold;\n cursor: pointer;\n}\n\n.form-container__sign:first-child:active,\n.form-container__sign:first-child:hover {\n background-color: #0099e9;\n}\n\n.form-container__sign:focus {\n outline-offset: -2px;\n outline: none;\n -webkit-box-shadow: inset 0 0 3px 1px #97dbff;\n box-shadow: inset 0 0 3px 1px #97dbff;\n}\n\n.forgot {\n width: auto;\n padding: 8px 0;\n background: none;\n font-weight: 400;\n color: #428bca;\n text-decoration: none;\n}\n\n.forgot:hover {\n text-decoration: underline;\n color: #4c9dd0;\n}\n\n.form-container__header {\n padding-bottom: 16px;\n}\n\n.form-container__footer {\n padding-top: 12px;\n border-top: 1px solid #cacaca;\n}\n\n.form-container__sign-app-buttons {\n display: flex;\n column-gap: 24px;\n}\n\n.form-container__sign-app-buttons button:not(:first-child) {\n border: none;\n background: none;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.form-container__sign-app-buttons button:not(:first-child)::before {\n position: absolute;\n content: '';\n width: 120%;\n height: 2px;\n background: rgb(187, 187, 187);\n bottom: 0;\n opacity: 0;\n}\n\n.form-container__sign-app-buttons button:not(:first-child):hover::before {\n opacity: 1;\n transition: 1s;\n}\n\n.form-container__sign-app-buttons button:not(:first-child):focus::before {\n opacity: 1;\n background-color: #4b4b4b;\n}\n\n.form-container__sign-app-buttons button:first-child {\n justify-content: center;\n min-width: 110px;\n height: 40px;\n border: none;\n background: white;\n border-radius: 2px;\n box-shadow: 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 1px #b7b7b7;\n display: flex;\n align-items: center;\n color: #4b4b4b;\n font-size: 13px;\n column-gap: 15px;\n cursor: pointer;\n}\n\n.form-container__sign-app-buttons button:first-child:active {\n background: #eeeeee;\n}\n\n.form-container__sign-app-buttons button:first-child:focus:not(:active) {\n outline: none;\n -webkit-box-shadow: inset 0 0 3px 1px #97dbff;\n box-shadow: inset 0 0 3px 1px #97dbff;\n}"},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"e9919b","snapshot":null,"tags":null,"title":"form by andrew-demchenk0","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2353,"cssLen":1870,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".form {\n --input-focus: #2d8cf0;\n --font-color: #fefefe;\n --font-color-sub: #7e7e7e;\n --bg-color: #111;\n --main-color: #fefefe;\n padding: 20px;\n background: var(--bg-color);\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n gap: 20px;\n border-radius: 5px;\n border: 2px solid var(--main-color);\n box-shadow: 4px 4px var(--main-color);\n}\n\n.title {\n color: var(--font-color);\n font-weight: 900;\n font-size: 20px;\n margin-bottom: 25px;\n}\n\n.title span {\n color: var(--font-color-sub);\n font-weight: 600;\n font-size: 17px;\n}\n\n.input {\n width: 250px;\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}\n\n.login-with {\n display: flex;\n gap: 20px;\n}\n\n.button-log {\n cursor: pointer;\n width: 40px;\n height: 40px;\n border-radius: 100%;\n border: 2px solid var(--main-color);\n background-color: var(--bg-color);\n box-shadow: 4px 4px var(--main-color);\n color: var(--font-color);\n font-size: 25px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.icon {\n width: 24px;\n height: 24px;\n fill: var(--main-color);\n}\n\n.button-log:active, .button-confirm:active {\n box-shadow: 0px 0px var(--main-color);\n transform: translate(3px, 3px);\n}\n\n.button-confirm {\n margin: 50px auto 0 auto;\n width: 120px;\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: 17px;\n font-weight: 600;\n color: var(--font-color);\n cursor: pointer;\n}\n"},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"4f8f0e","snapshot":null,"tags":null,"title":"form by SmookyDev","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3014,"cssLen":5877,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n Welcome\n

\n\n

Create Your Account

\n \n

\n\n","css":".absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.right-0 {\n right: 0px;\n}\n.z-\\[100\\] {\n z-index: 100;\n}\n.flex {\n display: flex;\n}\n.inline-flex {\n display: inline-flex;\n}\n.h-3 {\n height: 0.75rem;\n}\n.w-3 {\n width: 0.75rem;\n}\n.w-\\[300px\\] {\n width: 300px;\n}\n.w-full {\n width: 100%;\n}\n.shrink-0 {\n flex-shrink: 0;\n}\n.-translate-y-1\\/2 {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.translate-x-\\[46\\%\\] {\n --tw-translate-x: 46%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.-rotate-90 {\n --tw-rotate: -90deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.snap-start {\n scroll-snap-align: start;\n}\n.flex-col {\n flex-direction: column;\n}\n.items-start {\n align-items: flex-start;\n}\n.items-center {\n align-items: center;\n}\n.justify-center {\n justify-content: center;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.gap-3 {\n gap: 0.75rem;\n}\n.gap-5 {\n gap: 1.25rem;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.rounded-\\[5px\\] {\n border-radius: 5px;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.border-0 {\n border-width: 0px;\n}\n.border-b-2 {\n border-bottom-width: 2px;\n}\n.border-\\[\\#7F3D27\\] {\n --tw-border-opacity: 1;\n border-color: rgb(127 61 39 / var(--tw-border-opacity));\n}\n.bg-\\[\\#7F3D27\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(127 61 39 / var(--tw-bg-opacity));\n}\n.bg-\\[\\#D9D9D9\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(217 217 217 / var(--tw-bg-opacity));\n}\n.bg-\\[\\#DFA16A\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(223 161 106 / var(--tw-bg-opacity));\n}\n.bg-transparent {\n background-color: transparent;\n}\n.px-1 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.py-5 {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n.py-px {\n padding-top: 1px;\n padding-bottom: 1px;\n}\n.pb-5 {\n padding-bottom: 1.25rem;\n}\n.pl-0 {\n padding-left: 0px;\n}\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.font-semibold {\n font-weight: 600;\n}\n.capitalize {\n text-transform: capitalize;\n}\n.tracking-\\[20px\\] {\n letter-spacing: 20px;\n}\n.text-\\[\\#7F3D27\\] {\n --tw-text-opacity: 1;\n color: rgb(127 61 39 / var(--tw-text-opacity));\n}\n.text-\\[\\#A15A3E\\] {\n --tw-text-opacity: 1;\n color: rgb(161 90 62 / var(--tw-text-opacity));\n}\n.text-\\[\\#D9D9D9\\] {\n --tw-text-opacity: 1;\n color: rgb(217 217 217 / var(--tw-text-opacity));\n}\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),\n 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),\n 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-xl {\n --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),\n 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),\n 0 8px 10px -6px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-\\[\\#7F3D27\\] {\n --tw-shadow-color: #7f3d27;\n --tw-shadow: var(--tw-shadow-colored);\n}\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.placeholder\\:text-xs::placeholder {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.placeholder\\:text-\\[\\#A15A3E\\]::placeholder {\n --tw-text-opacity: 1;\n color: rgb(161 90 62 / var(--tw-text-opacity));\n}\n.checked\\:text-\\[\\#A15A3E\\]:checked {\n --tw-text-opacity: 1;\n color: rgb(161 90 62 / var(--tw-text-opacity));\n}\n.checked\\:accent-\\[\\#A15A3E\\]:checked {\n accent-color: #a15a3e;\n}\n.hover\\:translate-x-\\[50\\%\\]:hover {\n --tw-translate-x: 50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.hover\\:scale-110:hover {\n --tw-scale-x: 1.1;\n --tw-scale-y: 1.1;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.focus\\:scale-110:focus {\n --tw-scale-x: 1.1;\n --tw-scale-y: 1.1;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.focus\\:border-0:focus {\n border-width: 0px;\n}\n.focus\\:accent-\\[\\#7F3D27\\]:focus {\n accent-color: #7f3d27;\n}\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.focus\\:ring-0:focus {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0\n var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0\n calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),\n var(--tw-shadow, 0 0 #0000);\n}\n"},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"857c6a","snapshot":null,"tags":null,"title":"form by themrsami","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1418,"cssLen":3900,"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 {\n margin-bottom: 0px\n}\n\n.mb-0\\.5 {\n margin-bottom: 0.125rem\n}\n\n.mb-4 {\n margin-bottom: 1rem\n}\n\n.mr-2 {\n margin-right: 0.5rem\n}\n\n.mt-4 {\n margin-top: 1rem\n}\n\n.flex {\n display: flex\n}\n\n.h-screen {\n height: 100vh\n}\n\n.w-full {\n width: 100%\n}\n\n.max-w-md {\n max-width: 28rem\n}\n\n.cursor-pointer {\n cursor: pointer\n}\n\n.flex-col {\n flex-direction: column\n}\n\n.flex-wrap {\n flex-wrap: wrap\n}\n\n.items-center {\n align-items: center\n}\n\n.justify-center {\n justify-content: center\n}\n\n.justify-between {\n justify-content: space-between\n}\n\n.rounded-lg {\n border-radius: 0.5rem\n}\n\n.rounded-md {\n border-radius: 0.375rem\n}\n\n.border-0 {\n border-width: 0px\n}\n\n.bg-gray-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity))\n}\n\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity))\n}\n\n.bg-gradient-to-r {\n background-image: linear-gradient(to right, var(--tw-gradient-stops))\n}\n\n.from-indigo-500 {\n --tw-gradient-from: #6366f1 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)\n}\n\n.to-blue-500 {\n --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position)\n}\n\n.p-2 {\n padding: 0.5rem\n}\n\n.p-6 {\n padding: 1.5rem\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem\n}\n\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem\n}\n\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem\n}\n\n.font-bold {\n font-weight: 700\n}\n\n.text-blue-500 {\n --tw-text-opacity: 1;\n color: rgb(59 130 246 / var(--tw-text-opacity))\n}\n\n.text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity))\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity))\n}\n\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\n\n.transition {\n transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n 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;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms\n}\n\n.duration-150 {\n transition-duration: 150ms\n}\n\n.ease-in-out {\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)\n}\n\n.hover\\:bg-indigo-600:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(79 70 229 / var(--tw-bg-opacity))\n}\n\n.hover\\:to-blue-600:hover {\n --tw-gradient-to: #2563eb var(--tw-gradient-to-position)\n}\n\n.hover\\:underline:hover {\n -webkit-text-decoration-line: underline;\n text-decoration-line: underline\n}\n\n.focus\\:bg-gray-200:focus {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235 / var(--tw-bg-opacity))\n}\n\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px\n}\n\n.focus\\:ring-1:focus {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)\n}\n\n.focus\\:ring-blue-500:focus {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity))\n}"},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"175c23","snapshot":null,"tags":null,"title":"form by csozidev","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4075,"cssLen":2636,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"/* Microsoft log in page made by: csozi | Website: english.csozi.hu*/\n\n.form {\n/*Scale only to make it look right on the preview*/\n scale: 0.8;\n background-color: #ffffff;\n height: 250px;\n width: 352px;\n box-sizing: content-box;\n padding: 44px;\n}\n\n.form .title {\n color: #1b1b1b;\n font-size: 1.5rem;\n font-weight: 600;\n padding: 0;\n margin-top: 16px;\n margin-bottom: 12px;\n font-family: \"Segoe UI\",\"Helvetica Neue\",\"Lucida Grande\",\"Roboto\",\"Ebrima\",\"Nirmala UI\",\"Gadugi\",\"Segoe Xbox Symbol\",\"Segoe UI Symbol\",\"Meiryo UI\",\"Khmer UI\",\"Tunga\",\"Lao UI\",\"Raavi\",\"Iskoola Pota\",\"Latha\",\"Leelawadee\",\"Microsoft YaHei UI\",\"Microsoft JhengHei UI\",\"Malgun Gothic\",\"Estrangelo Edessa\",\"Microsoft Himalaya\",\"Microsoft New Tai Lue\",\"Microsoft PhagsPa\",\"Microsoft Tai Le\",\"Microsoft Yi Baiti\",\"Mongolian Baiti\",\"MV Boli\",\"Myanmar Text\",\"Cambria Math\";\n}\n\n.form .email {\n width: 100%;\n padding: 6px 10px 6px 0px;\n border-style: solid;\n border-width: 0px;\n border-bottom-width: 1px;\n border-color: rgba(0, 0, 0, 0.6);\n height: 36px;\n outline: none;\n background-color: transparent;\n padding-left: 0;\n color: #000000;\n margin-bottom: 16px;\n}\n\n.form .email {\n border-color: rgba(0, 0, 0, 0.8);\n}\n\n.form .text {\n color: #1b1b1b;\n font-family: \"Segoe UI Webfont\",-apple-system,\"Helvetica Neue\",\"Lucida Grande\",\"Roboto\",\"Ebrima\",\"Nirmala UI\",\"Gadugi\",\"Segoe Xbox Symbol\",\"Segoe UI Symbol\",\"Meiryo UI\",\"Khmer UI\",\"Tunga\",\"Lao UI\",\"Raavi\",\"Iskoola Pota\",\"Latha\",\"Leelawadee\",\"Microsoft YaHei UI\",\"Microsoft JhengHei UI\",\"Malgun Gothic\",\"Estrangelo Edessa\",\"Microsoft Himalaya\",\"Microsoft New Tai Lue\",\"Microsoft PhagsPa\",\"Microsoft Tai Le\",\"Microsoft Yi Baiti\",\"Mongolian Baiti\",\"MV Boli\",\"Myanmar Text\",\"Cambria Math\";\n font-weight: 400;\n line-height: 1.25rem;\n margin-bottom: 16px;\n font-size: .8125rem;\n}\n\n.form .text a {\n color: #0067B8;\n}\n\n.form .button_row {\n width: 100%;\n display: flex;\n justify-content: end;\n height: fit-content;\n gap: 4px;\n}\n\n.form .button_row .button {\n width: 108px;\n height: 32px;\n box-sizing: content-box;\n padding: 4 12 4 12;\n border: none;\n font-size: 15px;\n}\n\n.form .button_row .secondary_button {\n background-color: rgba(0,0,0,0.2);\n text-align: center;\n white-space: nowrap;\n overflow: hidden;\n vertical-align: middle;\n text-overflow: ellipsis;\n touch-action: manipulation;\n color: #000;\n cursor: pointer;\n}\n\n.form .button_row .secondary_button:hover {\n background-color: rgba(0,0,0,0.3);\n}\n\n.form .button_row .primary_button {\n background-color: #0067b8;\n color: #ffffff;\n cursor: pointer;\n}\n\n.form .button_row .primary_button:hover {\n background-color: #005da6;\n}"},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"2849cc","snapshot":null,"tags":null,"title":"form by ahmed150up","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1065,"cssLen":1263,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Song Title

Artist

\n \n \n

\n","css":".audio-player {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 300px;\n height: 80px;\n background-color: #282828;\n border-radius: 8px;\n padding: 8px;\n box-sizing: border-box;\n}\n\n.album-cover {\n width: 64px;\n height: 64px;\n background-color: #fff;\n border-radius: 50%;\n margin-right: 12px;\n}\n\n.player-controls {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n}\n\n.song-info {\n margin-bottom: 4px;\n}\n\n.song-title {\n font-size: 16px;\n color: #fff;\n margin: 0;\n}\n\n.artist {\n font-size: 12px;\n color: #b3b3b3;\n margin: 0;\n}\n\n.progress-bar {\n width: 100%;\n height: 4px;\n background-color: #4f4f4f;\n border-radius: 2px;\n overflow: hidden;\n}\n\n.progress {\n width: 50%;\n height: 100%;\n background-color: #1db954;\n transform-origin: left;\n animation: progress-animation 10s linear infinite;\n}\n\n.buttons {\n display: flex;\n}\n\nbutton {\n background: none;\n border: none;\n cursor: pointer;\n outline: none;\n}\n\n.play-btn,\n.pause-btn {\n font-size: 16px;\n color: #fff;\n margin-right: 8px;\n transition: transform 0.2s ease-in-out;\n}\n\n.play-btn:hover,\n.pause-btn:hover {\n transform: scale(1.2);\n}\n\n@keyframes progress-animation {\n 0% {\n transform: scaleX(0);\n }\n\n 100% {\n transform: scaleX(1);\n }\n}\n"},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"895b4e","snapshot":null,"tags":null,"title":"form by John-CFO","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":838,"cssLen":5002,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n","css":".form {\n position: relative;\n display: block;\n padding: 2.2rem;\n max-width: 350px;\n background: linear-gradient(14deg, rgba(2,0,36, 0.8) 0%, rgba(24, 24, 65, 0.7) 66%, \n rgb(20, 76, 99) 100%), radial-gradient(circle, rgba(2,0,36, 0.5) 0%, \n rgba(32, 15, 53, 0.2) 65%, rgba(14, 29, 28, 0.9) 100%);\n border: 2px solid #fff;\n -webkit-box-shadow: rgba(0,212,255) 0px 0px 50px -15px;\n box-shadow: rgba(0,212,255) 0px 0px 50px -15px;\n overflow: hidden;\n z-index: +1;\n}\n\n/*------input and submit section-------*/\n\n.input-container {\n position: relative;\n}\n\n.input-container input, .form button {\n outline: none;\n border: 2px solid #ffffff;\n margin: 8px 0;\n font-family: monospace;\n}\n\n.input-container input {\n background-color: #fff;\n padding: 6px;\n font-size: 0.875rem;\n line-height: 1.25rem;\n width: 250px;\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n}\n\n.input-mail:focus::placeholder {\n opacity: 0;\n transition: opacity .9s;\n}\n\n.input-pwd:focus::placeholder {\n opacity: 0;\n transition: opacity .9s;\n}\n\n.submit {\n position: relative;\n display: block;\n padding: 8px;\n background-color: #c0c0c0;\n color: #ffffff;\n text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 500;\n width: 100%;\n text-transform: uppercase;\n overflow: hidden;\n}\n\n.submit:hover {\n -webkit-transition: all 0.2s ease-out;\n -moz-transition: all 0.2s ease-out;\n transition: all 0.2s ease-out;\n border-radius: 3.9px;\n box-shadow: 4px 5px 17px -4px #ffffff;\n cursor: pointer;\n}\n\n.submit:hover::before {\n -webkit-animation: sh02 0.5s 0s linear;\n -moz-animation: sh02 0.5s 0s linear;\n animation: sh02 .5s 0s linear;\n}\n\n.submit::before {\n content: '';\n display: block;\n width: 0px;\n height: 85%;\n position: absolute;\n top: 50%;\n left: 0%;\n opacity: 0;\n background: #fff;\n box-shadow: 0 0 50px 30px #fff;\n -webkit-transform: skewX(-20deg);\n -moz-transform: skewX(-20deg);\n -ms-transform: skewX(-20deg);\n -o-transform: skewX(-20deg);\n transform: skewX(-20deg);\n}\n\n@keyframes sh02 {\n from {\n opacity: 0;\n left: 0%;\n }\n\n 50% {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n left: 100%;\n }\n}\n\n/*--------signup section---------*/\n\n.signup-link {\n color: #c0c0c0;\n font-size: 0.875rem;\n line-height: 1.25rem;\n text-align: center;\n font-family: monospace;\n}\n\n.signup-link a {\n color: #fff;\n text-decoration: none;\n}\n\n.up:hover {\n text-decoration: underline;\n}\n\n\n/*--------header section-----------*/\n\n.form-title {\n font-size: 1.25rem;\n line-height: 1.75rem;\n font-family: monospace;\n font-weight: 600;\n text-align: center;\n color: #fff;\n text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);\n animation-duration: 1.5s;\n overflow: hidden;\n transition: .12s;\n}\n\n.form-title span {\n animation: flickering 2s linear infinite both;\n}\n\n.title-2 {\n display: block;\n margin-top: -0.5rem;\n font-size: 2.1rem;\n font-weight: 800;\n font-family: Arial, Helvetica, sans-serif;\n text-align: center;\n -webkit-text-stroke: #fff 0.1rem;\n letter-spacing: 0.2rem;\n color: transparent;\n position: relative;\n text-shadow: 0px 0px 16px #CECECE;\n}\n\n.title-2 span::before,\n.title-2 span::after {\n content: '—';\n}\n\n@keyframes flickering {\n 0%,\n 100% {\n opacity: 1;\n }\n\n 41.99% {\n opacity: 1;\n }\n\n 42% {\n opacity: 0;\n }\n\n 43% {\n opacity: 0;\n }\n\n 43.01% {\n opacity: 1;\n }\n\n 47.99% {\n opacity: 1;\n }\n\n 48% {\n opacity: 0;\n }\n\n 49% {\n opacity: 0;\n }\n\n 49.01% {\n opacity: 1;\n }\n}\n\n/*---------shooting stars-----------*/\n\n\n.bg-stars {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: -2;\n background-size: cover;\n animation: animateBg 50s linear infinite;\n}\n\n@keyframes animateBg {\n 0%,100% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(1.2);\n }\n}\n\n.star {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 4px;\n height: 4px;\n background: #fff;\n border-radius: 50%;\n box-shadow: 0 0 0 4px rgba(255,255,255,0.1),0 0 0 8px rgba(255,255,255,0.1),0 0 20px rgba(255,255,255,0.1);\n animation: animate 3s linear infinite;\n}\n\n.star::before {\n content: '';\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 300px;\n height: 1px;\n background: linear-gradient(90deg,#fff,transparent);\n}\n\n@keyframes animate {\n 0% {\n transform: rotate(315deg) translateX(0);\n opacity: 1;\n }\n\n 70% {\n opacity: 1;\n }\n\n 100% {\n transform: rotate(315deg) translateX(-1000px);\n opacity: 0;\n }\n}\n\n.star:nth-child(1) {\n top: 0;\n right: 0;\n left: initial;\n animation-delay: 0s;\n animation-duration: 1s;\n}\n\n.star:nth-child(2) {\n top: 0;\n right: 100px;\n left: initial;\n animation-delay: 0.2s;\n animation-duration: 3s;\n}\n\n.star:nth-child(3) {\n top: 0;\n right: 220px;\n left: initial;\n animation-delay: 2.75s;\n animation-duration: 2.75s;\n}\n\n.star:nth-child(4) {\n top: 0;\n right: -220px;\n left: initial;\n animation-delay: 1.6s;\n animation-duration: 1.6s;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n\n\n\n"},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"295237","snapshot":null,"tags":null,"title":"form by KhelVers","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":8727,"cssLen":2098,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n\n

\n \n \n \n \n \n \n \n \n \n

\n\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n","css":"#Container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-end;\n height: 100%;\n}\n\n#rays {\n z-index: 2;\n position: relative;\n bottom: -1.5em;\n animation: rays 2s ease-in-out infinite;\n}\n\n.form {\n position: relative;\n top: 5em;\n padding: 4%;\n z-index: 3;\n display: flex;\n flex-direction: column;\n border-radius: 0.5rem;\n border: 4px solid #fff;\n background: rgba(0, 255, 240, 0.52);\n box-shadow: 0px 0px 64px 0px #82e1ff inset, 0px 0px 16px #a8fffaa6;\n backdrop-filter: blur(3.5px);\n gap: 1em;\n animation: float 2s ease-in-out infinite;\n}\n\n#login-lable {\n text-align: center;\n color: white;\n font-size: 2rem;\n font-weight: 600;\n letter-spacing: 8px;\n text-shadow: 0px 0px 16px rgb(243, 243, 243);\n}\n\n.form-content {\n height: 3em;\n padding: 1px 8px;\n color: white;\n text-decoration: none;\n letter-spacing: 1px;\n font-weight: bold;\n border-radius: 6px;\n border: 2px solid #fff;\n background: rgba(139, 255, 247, 0.486);\n box-shadow: 0px 0px 1px 3px #9ee5e3 inset, 0px 4px 4px 0px #181a6040;\n text-shadow: 0px 1px 4px rgb(243, 243, 243);\n}\n\n.form-content:focus-visible {\n outline: none;\n text-decoration: none;\n background: rgba(139, 189, 255, 0.59);\n box-shadow: 0px 0px 1px 4px #9ee5e3;\n}\n\n.form-content:hover {\n background: rgba(139, 189, 255, 0.59);\n}\n\n::placeholder {\n font-weight: 300;\n color: white;\n letter-spacing: 0.1rem;\n text-shadow: 0px 1px 5px rgb(66, 66, 66);\n}\n\n.form button {\n cursor: pointer;\n height: 3.5rem;\n padding: 0%;\n color: white;\n font-size: 1.5em;\n letter-spacing: 0.3rem;\n border: 2px solid white;\n background: linear-gradient(144deg, #9c11ffce, #2000eeb6 50%, #15efffbb);\n}\n\n.form button:hover {\n position: relative;\n bottom: 4px;\n background: linear-gradient(144deg, #9c11ff, #2000ee 50%, #15fff3);\n box-shadow: 0px 0px 2px 2px #ffffff;\n}\n\n@keyframes float {\n 0% {\n position: relative;\n }\n\n 50% {\n top: 50px;\n }\n\n 100% {\n position: relative;\n }\n}\n\n@keyframes rays {\n 0% {\n opacity: 0.6;\n }\n\n 50% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0.6;\n }\n}\n"},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"7fb175","snapshot":null,"tags":null,"title":"form by andrew-demchenk0","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1453,"cssLen":3704,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n \n

\n \n

","css":".wrapper {\n --input-focus: #2d8cf0;\n --font-color: #fefefe;\n --font-color-sub: #7e7e7e;\n --bg-color: #111;\n --bg-color-alt: #7e7e7e;\n --main-color: #fefefe;\n /* display: flex; */\n /* flex-direction: column; */\n /* align-items: center; */\n}\n/* switch card */\n.switch {\n transform: translateY(-200px);\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 30px;\n width: 50px;\n height: 20px;\n}\n\n.card-side::before {\n position: absolute;\n content: 'Log in';\n left: -70px;\n top: 0;\n width: 100px;\n text-decoration: underline;\n color: var(--font-color);\n font-weight: 600;\n}\n\n.card-side::after {\n position: absolute;\n content: 'Sign up';\n left: 70px;\n top: 0;\n width: 100px;\n text-decoration: none;\n color: var(--font-color);\n font-weight: 600;\n}\n\n.toggle {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.slider {\n box-sizing: border-box;\n border-radius: 5px;\n border: 2px solid var(--main-color);\n box-shadow: 4px 4px var(--main-color);\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: var(--bg-color);\n transition: 0.3s;\n}\n\n.slider:before {\n box-sizing: border-box;\n position: absolute;\n content: \"\";\n height: 20px;\n width: 20px;\n border: 2px solid var(--main-color);\n border-radius: 5px;\n left: -2px;\n bottom: 2px;\n background-color: var(--bg-color);\n box-shadow: 0 3px 0 var(--main-color);\n transition: 0.3s;\n}\n\n.toggle:checked + .slider {\n background-color: var(--input-focus);\n}\n\n.toggle:checked + .slider:before {\n transform: translateX(30px);\n}\n\n.toggle:checked ~ .card-side:before {\n text-decoration: none;\n}\n\n.toggle:checked ~ .card-side:after {\n text-decoration: underline;\n}\n\n/* card */ \n\n.flip-card__inner {\n width: 300px;\n height: 350px;\n position: relative;\n background-color: transparent;\n perspective: 1000px;\n /* width: 100%;\n height: 100%; */\n text-align: center;\n transition: transform 0.8s;\n transform-style: preserve-3d;\n}\n\n.toggle:checked ~ .flip-card__inner {\n transform: rotateY(180deg);\n}\n\n.toggle:checked ~ .flip-card__front {\n box-shadow: none;\n}\n\n.flip-card__front, .flip-card__back {\n padding: 20px;\n position: absolute;\n display: flex;\n flex-direction: column;\n justify-content: center;\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n background: var(--bg-color);\n gap: 20px;\n border-radius: 5px;\n border: 2px solid var(--main-color);\n box-shadow: 4px 4px var(--main-color);\n}\n\n.flip-card__back {\n width: 100%;\n transform: rotateY(180deg);\n}\n\n.flip-card__form {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 20px;\n}\n\n.title {\n margin: 20px 0 20px 0;\n font-size: 25px;\n font-weight: 900;\n text-align: center;\n color: var(--main-color);\n}\n\n.flip-card__input {\n width: 250px;\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.flip-card__input::placeholder {\n color: var(--font-color-sub);\n opacity: 0.8;\n}\n\n.flip-card__input:focus {\n border: 2px solid var(--input-focus);\n}\n\n.flip-card__btn:active, .button-confirm:active {\n box-shadow: 0px 0px var(--main-color);\n transform: translate(3px, 3px);\n}\n\n.flip-card__btn {\n margin: 20px 0 20px 0;\n width: 120px;\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: 17px;\n font-weight: 600;\n color: var(--font-color);\n cursor: pointer;\n} "},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"55efae","snapshot":null,"tags":null,"title":"form by ahmed150up","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":990,"cssLen":1025,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n","css":".card {\n width: 350px;\n border: 1px solid #ccc;\n border-radius: 4px;\n box-shadow: 2px 2px 8px rgba(0,0,0,0.1);\n overflow: hidden;\n margin: 10px;\n}\n\n.card-header {\n background-color: #333;\n padding: 16px;\n text-align: center;\n}\n\n.card-header .text-header {\n margin: 0;\n font-size: 18px;\n color: rgb(255, 255, 255);\n}\n\n.card-body {\n padding: 16px;\n}\n\n.form-group {\n margin-bottom: 10px;\n}\n\n.form-group label {\n display: block;\n font-size: 14px;\n color: #333;\n font-weight: bold;\n margin-bottom: 1px;\n}\n\n.form-group input[type=\"text\"],\n.form-group input[type=\"email\"],\n.form-group input[type=\"password\"] {\n width: 100%;\n padding: 8px;\n font-size: 14px;\n border: 1px solid #ccc;\n border-radius: 4px;\n}\n\n.btn {\n padding: 12px 24px;\n margin-left: 13px;\n font-size: 16px;\n border: none;\n border-radius: 4px;\n background-color: #333;\n color: #fff;\n text-transform: uppercase;\n transition: background-color 0.2s ease-in-out;\n cursor: pointer\n}\n\n.btn:hover {\n background-color: #ccc;\n color: #333;\n}"},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"209219","snapshot":null,"tags":null,"title":"form by zanina-yassine","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5681,"cssLen":4173,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Comments\n

\n \n

\n 14\n

\n \n

\n Yassine Zanina\n

Wednesday, March 13th at 2:45pm

\n I've been using this product for a few days now and I'm really impressed! The interface is intuitive and easy to\n use, and the features are exactly what I need to streamline my workflow.\n

\n\n

\n \n

\n \n \n \n \n \n \n

","css":".card {\n width: 450px;\n height: fit-content;\n background-color: white;\n box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);\n border-radius: 17px 17px 27px 27px;\n}\n\n.title {\n width: 100%;\n height: 50px;\n position: relative;\n display: flex;\n align-items: center;\n padding-left: 20px;\n border-bottom: 1px solid #f1f1f1;\n font-weight: 700;\n font-size: 13px;\n color: #47484b;\n}\n\n.title::after {\n content: '';\n width: 8ch;\n height: 1px;\n position: absolute;\n bottom: -1px;\n background-color: #47484b;\n}\n\n.comments {\n display: grid;\n grid-template-columns: 35px 1fr;\n gap: 20px;\n padding: 20px;\n}\n\n.comment-react {\n width: 35px;\n height: fit-content;\n display: grid;\n grid-template-columns: auto;\n margin: 0;\n background-color: #f1f1f1;\n border-radius: 5px;\n}\n\n.comment-react button {\n width: 35px;\n height: 35px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: transparent;\n border: 0;\n outline: none;\n}\n\n.comment-react button:after {\n content: '';\n width: 40px;\n height: 40px;\n position: absolute;\n left: -2.5px;\n top: -2.5px;\n background-color: #f5356e;\n border-radius: 50%;\n z-index: 0;\n transform: scale(0);\n}\n\n.comment-react button svg {\n position: relative;\n z-index: 9;\n}\n\n.comment-react button:hover:after {\n animation: ripple 0.6s ease-in-out forwards;\n}\n\n.comment-react button:hover svg {\n fill: #f5356e;\n}\n\n.comment-react button:hover svg path {\n stroke: #f5356e;\n fill: #f5356e;\n}\n\n.comment-react hr {\n width: 80%;\n height: 1px;\n background-color: #dfe1e6;\n margin: auto;\n border: 0;\n}\n\n.comment-react span {\n height: 35px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: auto;\n font-size: 13px;\n font-weight: 600;\n color: #707277;\n}\n\n.comment-container {\n display: flex;\n flex-direction: column;\n gap: 15px;\n padding: 0;\n margin: 0;\n}\n\n.comment-container .user {\n display: grid;\n grid-template-columns: 40px 1fr;\n gap: 10px;\n}\n\n.comment-container .user .user-pic {\n width: 40px;\n height: 40px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #f1f1f1;\n border-radius: 50%;\n}\n\n.comment-container .user .user-pic:after {\n content: '';\n width: 9px;\n height: 9px;\n position: absolute;\n right: 0px;\n bottom: 0px;\n border-radius: 50%;\n background-color: #0fc45a;\n border: 2px solid #ffffff;\n}\n\n.comment-container .user .user-info {\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n gap: 3px;\n}\n\n.comment-container .user .user-info span {\n font-weight: 700;\n font-size: 12px;\n color: #47484b;\n}\n\n.comment-container .user .user-info p {\n font-weight: 600;\n font-size: 10px;\n color: #acaeb4;\n}\n\n.comment-container .comment-content {\n font-size: 12px;\n line-height: 16px;\n font-weight: 600;\n color: #5f6064;\n}\n\n.text-box {\n width: 100%;\n height: fit-content;\n background-color: #f1f1f1;\n padding: 8px;\n}\n\n.text-box .box-container {\n background-color: #ffffff;\n border-radius: 8px 8px 21px 21px;\n padding: 8px;\n}\n\n.text-box textarea {\n width: 100%;\n height: 40px;\n resize: none;\n border: 0;\n border-radius: 6px;\n padding: 12px 12px 10px 12px;\n font-size: 13px;\n outline: none;\n caret-color: #0a84ff;\n}\n\n.text-box .formatting {\n display: grid;\n grid-template-columns: auto auto auto auto auto 1fr;\n}\n\n.text-box .formatting button {\n width: 30px;\n height: 30px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: transparent;\n border-radius: 50%;\n border: 0;\n outline: none;\n}\n\n.text-box .formatting button:hover {\n background-color: #f1f1f1;\n}\n\n.text-box .formatting .send {\n width: 30px;\n height: 30px;\n background-color: #0a84ff;\n margin: 0 0 0 auto;\n}\n\n.text-box .formatting .send:hover {\n background-color: #026eda;\n}\n\n@keyframes ripple {\n 0% {\n transform: scale(0);\n opacity: 0.6;\n }\n\n 100% {\n transform: scale(1);\n opacity: 0;\n }\n}"}]}},"actionData":null,"errors":null}