{"loaderData":{"0":null,"0-2":{"total":6509,"projects":[{"created":"2024-01-22T17:22:21.000Z","isPrivate":0,"projectId":"bc375c","snapshot":"https://s1.qingting.work/runjs/889b117ba454.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by mobinkakei","updated":"2024-01-22T19:24:20.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":30,"cssLen":491,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".container {\n width: 100%;\n height: 100%;\n /* Add your background pattern here */\n --s: 25px; /* control the size */\n --c1: #1eaaee;\n --c2: #171717;\n\n --c: #0000 71%, var(--c1) 0 79%, #0000 0;\n --_s: calc(var(--s) / 2) / calc(2 * var(--s)) calc(2 * var(--s));\n background: linear-gradient(45deg, var(--c)) calc(var(--s) / -2) var(--_s),\n linear-gradient(135deg, var(--c)) calc(var(--s) / 2) var(--_s),\n radial-gradient(var(--c1) 35%, var(--c2) 37%) 0 0 / var(--s) var(--s);\n}\n"},{"created":"2024-01-22T17:22:21.000Z","isPrivate":0,"projectId":"aa76b5","snapshot":"https://s1.qingting.work/runjs/1cbf5dc830f3.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by theleaderofenemy","updated":"2024-01-22T19:24:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":30,"cssLen":989,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".container {\n width: 100%;\n height: 100%;\n --s: 84px;\n --c1: #79994f;\n --c2: #717246;\n --c3: #3b3b06;\n\n --_g: 0 120deg, #0000 0;\n background: conic-gradient(\n from 0deg at calc(500% / 6) calc(100% / 3),\n var(--c3) var(--_g)\n ),\n conic-gradient(\n from -120deg at calc(100% / 6) calc(100% / 3),\n var(--c2) var(--_g)\n ),\n conic-gradient(\n from 120deg at calc(100% / 3) calc(500% / 6),\n var(--c1) var(--_g)\n ),\n conic-gradient(\n from 120deg at calc(200% / 3) calc(500% / 6),\n var(--c1) var(--_g)\n ),\n conic-gradient(\n from -180deg at calc(100% / 3) 50%,\n var(--c2) 60deg,\n var(--c1) var(--_g)\n ),\n conic-gradient(\n from 60deg at calc(200% / 3) 50%,\n var(--c1) 60deg,\n var(--c3) var(--_g)\n ),\n conic-gradient(\n from -60deg at 50% calc(100% / 3),\n var(--c1) 120deg,\n var(--c2) 0 240deg,\n var(--c3) 0\n );\n background-size: calc(var(--s) * 1.732) var(--s);\n}\n"},{"created":"2024-01-22T17:22:21.000Z","isPrivate":0,"projectId":"ef2031","snapshot":"https://s1.qingting.work/runjs/2146baa013b5.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by PriyanshuGupta28","updated":"2024-01-22T19:24:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":30,"cssLen":473,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".container {\n width: 100%;\n height: 100%;\n background: repeating-linear-gradient(\n 45deg,\n #e74c3c,\n #e74c3c 10px,\n transparent 10px,\n transparent 20px\n ),\n repeating-linear-gradient(\n -45deg,\n #f39c12,\n #f39c12 10px,\n transparent 10px,\n transparent 20px\n );\n background-size: 100% 100%, 100% 100%, 10px 10px, 10px 10px;\n background-position: center center, center center, center center,\n center center;\n}\n"},{"created":"2024-01-22T17:22:21.000Z","isPrivate":0,"projectId":"fb6459","snapshot":"https://s1.qingting.work/runjs/b2977a176151.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by aadium","updated":"2024-01-22T19:24:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":444,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".container {\n --color1: rgb(179, 255, 226);\n --color2: rgb(39, 0, 148);\n width: 100%;\n height: 100%;\n background-image: linear-gradient(45deg, var(--color1) 25%, transparent 25%, transparent 75%, var(--color1) 75%, var(--color1)),\n linear-gradient(45deg, var(--color2) 25%, var(--color1) 25%, var(--color1) 75%, var(--color2) 75%, var(--color2));\n background-size: 95px 15px;\n background-position: 0 0, 135px 135px;\n}\n"},{"created":"2024-01-22T17:22:21.000Z","isPrivate":0,"projectId":"e819fe","snapshot":"https://s1.qingting.work/runjs/869eb4b1d13e.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by AspenBranch","updated":"2024-01-22T19:24:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":30,"cssLen":441,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".container {\n width: 100%;\n height: 100%;\n /* Add your background pattern here */\n background-color: white;\n background-image: linear-gradient(45deg, #ccc 25%, transparent 25%),\n linear-gradient(-45deg, #ccc 25%, transparent 25%),\n linear-gradient(45deg, transparent 75%, #ccc 75%),\n linear-gradient(-45deg, transparent 75%, #ccc 75%);\n background-size: 20px 20px;\n background-position: 0 0, 0 10px, 10px -10px, -10px 0px;\n}\n"},{"created":"2024-01-22T17:22:21.000Z","isPrivate":0,"projectId":"eece4c","snapshot":"https://s1.qingting.work/runjs/13012f88f5f6.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by csemszepp","updated":"2024-01-22T19:24:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":30,"cssLen":574,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".container {\n width: 100%;\n height: 100%;\n --s: 150px; /* control the size */\n --c1: #ff847c;\n --c2: #e84a5f;\n --c3: #fecea8;\n --c4: #99b898;\n\n background: conic-gradient(\n from 45deg at 75% 75%,\n var(--c3) 90deg,\n var(--c1) 0 180deg,\n #0000 0\n ),\n conic-gradient(from -45deg at 25% 25%, var(--c3) 90deg, #0000 0),\n conic-gradient(from -45deg at 50% 100%, #0000 180deg, var(--c3) 0),\n conic-gradient(\n from -45deg,\n var(--c1) 90deg,\n var(--c2) 0 225deg,\n var(--c4) 0\n );\n background-size: var(--s) var(--s);\n}\n"},{"created":"2024-01-22T17:22:21.000Z","isPrivate":0,"projectId":"595289","snapshot":"https://s1.qingting.work/runjs/1fa64222f589.png?x-oss-process=style/webp-w-500","tags":null,"title":"pattern by vnuny","updated":"2024-01-22T19:24:20.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":30,"cssLen":255,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".container {\n background-color: #e5e5f7;\n opacity: 1;\n width: 100%;\n height: 100%;\n background-image: repeating-radial-gradient(\n circle at 0 0,\n transparent 0,\n #e5e5f7 30px\n ),\n repeating-linear-gradient(#ffb5b58a, #ffb8b8);\n}\n"},{"created":"2024-01-22T17:20:18.000Z","isPrivate":0,"projectId":"267641","snapshot":null,"tags":null,"title":"form by Piyush831","updated":"2024-01-22T17:20:18.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":422,"cssLen":906,"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: linear-gradient(to right ,grey,silver);\n padding: 40px;\n border-radius: 10px;\n}\n\n.login {\n font-size: 25px;\n font-weight: bold;\n text-align: center;\n margin-bottom: 20px;\n}\n\n.flex {\n display: flex;\n flex-direction: column;\n}\n\n.form button {\n margin-top: 25px;\n margin-bottom: 6px;\n border-radius: 10px;\n border: none;\n padding-top: 4px;\n padding-bottom: 4px;\n font-size: 19px;\n font-weight: bold;\n color: grey;\n}\n\n.form label {\n margin-top: 20px;\n margin-bottom: 5px;\n}\n\n.form button:hover {\n box-shadow: 2px 2px 12px white;\n}\n\n.input {\n height: 30px;\n outline: none;\n padding: 15px;\n border-radius: 10px;\n border: none;\n font-weight: bold;\n font-size: 15px;\n box-shadow: 2px 2px 12px inset black;\n}\n\n.span:hover {\n font-weight: bold;\n}\n\n.color {\n color: white;\n}\n\n.align {\n text-align: center;\n}\n"},{"created":"2024-01-22T17:20:18.000Z","isPrivate":0,"projectId":"f23dde","snapshot":null,"tags":null,"title":"form by mahbowal","updated":"2024-01-22T17:20:18.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:18.000Z","isPrivate":0,"projectId":"82a248","snapshot":null,"tags":null,"title":"form by HoseinParvaresh","updated":"2024-01-22T17:20:18.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":354,"cssLen":1195,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":"::selection {\n background-color: gray;\n}\n\n.container {\n margin: 0 auto;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.form {\n width: 400px;\n height: 400px;\n background-image: linear-gradient(to bottom, #424242,#212121);\n display: flex;\n align-items: center;\n flex-direction: column;\n border-radius: 0.5rem;\n}\n\n.title {\n color: wheat;\n margin: 3rem 0;\n font-size: 2rem;\n}\n\n.input {\n margin: 0.5rem 0;\n padding: 1rem 0.5rem;\n width: 20rem;\n background-color: inherit;\n color: wheat;\n border: none;\n outline: none;\n}\n\n.username {\n border-bottom: 1px solid wheat;\n transition: all 400ms;\n}\n\n.username:hover {\n background-color: #424242;\n border: none;\n border-radius: 0.5rem;\n}\n\n.password {\n border-bottom: 1px solid wheat;\n transition: all 400ms;\n}\n\n.password:hover {\n background-color: #424242;\n border: none;\n border-radius: 0.5rem;\n}\n\n.btn {\n height: 3rem;\n width: 20rem;\n margin-top: 3rem;\n background-color: wheat;\n border-radius: 0.5rem;\n border: none;\n font-size: 1.2rem;\n transition: all 400ms;\n box-shadow: 0 0 10px antiquewhite, 0 0 10px antiquewhite;\n}\n\n.btn:hover {\n background-color: antiquewhite;\n box-shadow: none;\n}\n"},{"created":"2024-01-22T17:20:18.000Z","isPrivate":0,"projectId":"559831","snapshot":null,"tags":null,"title":"form by iamriishav","updated":"2024-01-22T17:20:18.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":368,"cssLen":1410,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".form {\n width: 300px;\n background-color: rgba(255, 255, 255, 1);\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 20px;\n box-shadow: 0 0 5px rgba(0, 0, 0, .2);\n border-radius: 5px;\n font-family: inherit;\n}\n\n.input {\n font-size: 15px;\n padding: 15px 10px;\n border-radius: 5px;\n border: none;\n margin-top: 10px;\n box-shadow: inset 0 1px 1px rgba(0, 0, 0, .2), 0 .5px .5px rgba(0, 0, 0, .2);\n outline: none;\n}\n\n.input:focus {\n outline: 1.2px solid #1877f2;\n}\n\n#loginBtn {\n margin-top: 10px;\n width: 100%;\n padding: 10px 20px;\n align-self: center;\n background: #1877f2;\n border: none;\n border-radius: 5px;\n color: #fff;\n font-size: 1.3rem;\n font-weight: bold;\n}\n\n#loginBtn:hover {\n background: #196fe0;\n}\n\n#forgotPassword {\n text-align: center;\n position: relative;\n margin-top: 10px;\n width: 100%;\n font-size: 13px;\n align-self: center;\n font-weight: bold;\n color: #1877f2;\n}\n\n#forgotPassword::after {\n position: absolute;\n content: '';\n width: 100%;\n height: .5px;\n bottom: -25px;\n left: 0;\n background: #dadde1;\n}\n\n#forgotPassword:hover {\n text-decoration: underline;\n}\n\n#createAccountBtn {\n margin-top: 40px;\n margin-bottom: 10px;\n padding: 15px 15px;\n align-self: center;\n background: #42b72a;\n border: none;\n border-radius: 5px;\n color: #fff;\n font-size: 1rem;\n font-weight: bold;\n}\n\n#createAccountBtn:hover {\n background: #34a61d;\n}"},{"created":"2024-01-22T17:20:18.000Z","isPrivate":0,"projectId":"f4b8e4","snapshot":null,"tags":null,"title":"form by yashasvi9199","updated":"2024-01-22T17:20:18.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2003,"cssLen":1992,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n","css":".form {\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding-left: 2em;\n padding-right: 2em;\n padding-bottom: 0.4em;\n background-color: #171717;\n border-radius: 25px;\n transition: 0.4s ease-in-out;\n}\n\n.card {\n background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%);\n border-radius: 22px;\n transition: all 0.3s;\n}\n\n.card2 {\n border-radius: 0;\n transition: all 0.2s;\n}\n\n.card2:hover {\n transform: scale(0.98);\n border-radius: 20px;\n}\n\n.card:hover {\n box-shadow: 0px 0px 30px 1px rgba(0, 255, 117, 0.3);\n}\n\n#heading {\n text-align: center;\n margin: 2em;\n color: rgb(255, 255, 255);\n font-size: 1.2em;\n}\n\n.field {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5em;\n border-radius: 25px;\n padding: 0.6em;\n border: none;\n outline: none;\n color: white;\n background-color: #171717;\n box-shadow: inset 2px 5px 10px rgb(5, 5, 5);\n}\n\n.input-icon {\n height: 1.3em;\n width: 1.3em;\n fill: white;\n}\n\n.input-field {\n background: none;\n border: none;\n outline: none;\n width: 100%;\n color: #d3d3d3;\n}\n\n.form .btn {\n display: flex;\n justify-content: center;\n flex-direction: row;\n margin-top: 2.5em;\n}\n\n.button1 {\n padding: 0.5em;\n padding-left: 1.1em;\n padding-right: 1.1em;\n border-radius: 5px;\n margin-right: 0.5em;\n border: none;\n outline: none;\n transition: 0.4s ease-in-out;\n background-color: #252525;\n color: white;\n}\n\n.button1:hover {\n background-color: black;\n color: white;\n}\n\n.button2 {\n padding: 0.5em;\n padding-left: 2.3em;\n padding-right: 2.3em;\n border-radius: 5px;\n border: none;\n outline: none;\n transition: 0.4s ease-in-out;\n background-color: #252525;\n color: white;\n}\n\n.button2:hover {\n background-color: black;\n color: white;\n}\n\n.button3 {\n margin-bottom: 3em;\n padding: 0.5em;\n border-radius: 5px;\n border: none;\n outline: none;\n transition: 0.4s ease-in-out;\n background-color: #252525;\n color: white;\n}\n\n.button3:hover {\n background-color: red;\n color: white;\n}\n"}]}},"actionData":null,"errors":null}