{"loaderData":{"0":null,"0-3":{"total":12191,"projects":[{"created":"2024-01-22T17:11:13.000Z","isPrivate":0,"projectId":"ca91d0","snapshot":null,"tags":null,"title":"card by 1osm","updated":"2024-01-22T17:11:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2149,"cssLen":1362,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n

\n \n 5/5\n This is Descripion of The Game\n

\n\n \n Game Name\n

","css":".card {\n width: 200px;\n height: 250px;\n background: #262626;\n}\n\n.GameIcon {\n transform: translate(-80px,-50px);\n position: absolute;\n width: 200px;\n height: 200px;\n transition: 0.3s;\n}\n\n.GameImg {\n width: 100%;\n height: 100%;\n}\n\n.Gfooter {\n width: 100%;\n height: 0%;\n background-color: #262626;\n border-radius: 10px;\n transition: all 0.3s;\n}\n\n.Name {\n transform: translate(10px,200px);\n position: absolute;\n background-color: transparent;\n font-weight: bold;\n font-size: 18px;\n transition: 0.3s;\n color: #ff5858;\n}\n\n.SmallIcon {\n width: 0px;\n height: 0px;\n transform: translate(10px,10px);\n border-radius: 10px;\n background-color: #ff5858;\n transition: 0.2s;\n}\n\n.Descripion {\n padding: 10px;\n position: absolute;\n transform: translate(0px,20px);\n opacity: 0%;\n color: #ff5858;\n font-weight: bold;\n font-size: 15px;\n}\n\n.StarIcon {\n transform: translate(-0px,25px);\n width: 20px;\n fill: #ebd300;\n}\n\n.Stars {\n position: absolute;\n color: white;\n font-size: 15px;\n font-weight: bold;\n transform: translate(80px,-70px);\n}\n\n.GameImg:hover .Descripion {\n opacity: 100%;\n}\n\n.GameImg:hover .Gfooter {\n width: 100%;\n height: 100%;\n}\n\n.GameImg:hover .SmallIcon {\n width: 60px;\n height: 60px;\n}\n\n.GameImg:hover .Name {\n transform: translate(75px,-235px);\n}\n\n.GameImg:hover .GameIcon {\n transform: translate(100px,-160px);\n}\n"},{"created":"2024-01-22T17:11:13.000Z","isPrivate":0,"projectId":"bb231b","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":857,"cssLen":1316,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: 5em;\n font-weight: 900;\n color: #e10600;\n position: relative;\n transition: all 1s ease;\n text-align: center;\n}\n\n.container__star {\n transition: all .7s ease-in-out;\n}\n\n.first {\n position: absolute;\n top: 20px;\n left: 50px;\n transition: all .7s ease-in-out;\n}\n\n.svg-icon {\n position: absolute;\n fill: #e94822;\n z-index: 1;\n}\n\n.star-eight {\n background: #efd510;\n width: 150px;\n height: 150px;\n position: relative;\n text-align: center;\n animation: rot 3s infinite;\n}\n\n.star-eight::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n height: 150px;\n width: 150px;\n background: #efd510;\n transform: rotate(135deg);\n}\n\n.container:hover .container__star {\n transform: rotateX(70deg) translateY(250px);\n box-shadow: 0px 0px 120px -100px #e4e727;\n}\n\n.container:hover .svg-icon {\n animation: grow 1s linear infinite;\n}\n\n@keyframes rot {\n 0% {\n transform: rotate(0deg);\n }\n\n 50% {\n transform: rotate(340deg);\n }\n\n 100% {\n transform: rotate(0deg);\n }\n}\n\n@keyframes grow {\n 0% {\n transform: rotate(0deg);\n }\n\n 25% {\n transform: rotate(-5deg);\n }\n\n 75% {\n transform: rotate(5deg);\n }\n\n 100% {\n transform: scale(1) rotate(0deg);\n }\n}"},{"created":"2024-01-22T17:11:13.000Z","isPrivate":0,"projectId":"3fac45","snapshot":null,"tags":null,"title":"card by reshades","updated":"2024-01-22T17:11:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1105,"cssLen":1286,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

script.py

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

\n \n import os, sys \n os.system(\"title test script\") \n print(\"Hello UIVERSE.io!\") \n sys.exit() \n #this is a comment.\n\n

","css":".card {\n width: 250px;\n height: 254px;\n background: #121212;\n border-radius: 10px;\n border: 1px #212121 solid;\n}\n\n.card hr {\n color: #313131;\n margin-top: -3.5px\n}\n\n.content {\n color: #8e8e8e;\n margin-left: 0.3em;\n}\n\n.c1 {\n color: rgb(55, 91, 158)\n}\n\n.c2 {\n color: rgb(55, 158, 150)\n}\n\n.c3 {\n color: rgb(158, 151, 55)\n}\n\n.c4 {\n color: rgb(88, 158, 55)\n}\n\n.comment {\n opacity: 50%\n}\n\n.title {\n color: #e8e8e8;\n font-size: small;\n float: left;\n margin-left: 0.6em;\n margin-top: 0.6em;\n}\n\n.top {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n font-size: 21px;\n font-weight: 450;\n background-color: #121212;\n width: 100%;\n text-align: right;\n border-radius: 10px\n}\n\n.topfix {\n background-color: #121212;\n width: 100%;\n height: 1em;\n margin-top: -1em;\n}\n\nbutton {\n width: 40px;\n height: 35px;\n margin-left: -5px;\n border: 0;\n outline: 0;\n background: transparent;\n transition: 0.2s;\n}\n\nbutton svg path, \nbutton svg rect, \nbutton svg polygon {\n fill: #ffffff;\n}\n\nbutton svg {\n width: 10px;\n height: 10px;\n}\n\n.close:hover {\n background-color: #ffffff10;\n}\n\n.maximize:hover {\n background-color: #ffffff10;\n}\n\n.minimize:hover {\n background-color: #ffffff10;\n}"},{"created":"2024-01-22T17:11:13.000Z","isPrivate":0,"projectId":"102bf5","snapshot":null,"tags":null,"title":"card by aadium","updated":"2024-01-22T17:11:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5648,"cssLen":1106,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".social-buttons {\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: #f2f2f2;\n box-shadow: 0px 0px 15px #00000027;\n padding: 15px 10px;\n border-radius: 5em;\n}\n\n.social-button {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n margin: 0 10px;\n background-color: #fff;\n box-shadow: 0px 0px 4px #00000027;\n transition: 0.3s;\n}\n\n.social-button:hover {\n background-color: #f2f2f2;\n box-shadow: 0px 0px 6px 3px #00000027;\n}\n\n.social-buttons svg {\n transition: 0.3s;\n height: 20px;\n}\n\n.facebook {\n background-color: #3b5998;\n}\n\n.facebook svg {\n fill: #f2f2f2;\n}\n\n.facebook:hover svg {\n fill: #3b5998;\n}\n\n.github {\n background-color: #333;\n}\n\n.github svg {\n width: 25px;\n height: 25px;\n fill: #f2f2f2;\n}\n\n.github:hover svg {\n fill: #333;\n}\n\n.linkedin {\n background-color: #0077b5;\n}\n\n.linkedin svg {\n fill: #f2f2f2;\n}\n\n.linkedin:hover svg {\n fill: #0077b5;\n}\n\n.instagram {\n background-color: #c13584;\n}\n\n.instagram svg {\n fill: #f2f2f2;\n}\n\n.instagram:hover svg {\n fill: #c13584;\n}\n"},{"created":"2024-01-22T17:11:13.000Z","isPrivate":0,"projectId":"cb596e","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":802,"cssLen":2534,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n \n \n

\n Tittle\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget\n feugiat orci. Curabitur efficitur elit arcu, a luctus sapien luctus ut.\n

\n\n","css":".absolute{position:absolute}.relative{position:relative}.bottom-4{bottom:1rem}.left-0{left:0px}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.h-44{height:11rem}.h-full{height:100%}.min-h-full{min-height:100%}.w-72{width:18rem}.w-full{width:100%}.-translate-y-2{--tw-translate-y:-0.5rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-6{--tw-translate-y:-1.5rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-skew-x-6{--tw-skew-x:-6deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rounded-lg{border-radius:0.5rem}.border{border-width:1px}.border-opacity-5{--tw-border-opacity:0.05}.bg-neutral-50{--tw-bg-opacity:1;background-color:rgb(250 250 250 / var(--tw-bg-opacity))}.bg-neutral-800{--tw-bg-opacity:1;background-color:rgb(38 38 38 / var(--tw-bg-opacity))}.p-2{padding:0.5rem}.px-4{padding-left:1rem;padding-right:1rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-bold{font-weight:700}.text-neutral-50{--tw-text-opacity:1;color:rgb(250 250 250 / var(--tw-text-opacity))}.opacity-60{opacity:0.6}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-200{transition-duration:200ms}.duration-500{transition-duration:500ms}.\\[box-shadow\\:12px_12px\\]{box-shadow:12px 12px}.hover\\:-translate-x-0:hover{--tw-translate-x:-0px;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:-translate-y-1:hover{--tw-translate-y:-0.25rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:skew-x-0:hover{--tw-skew-x:0deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:\\[box-shadow\\:4px_4px\\]:hover{box-shadow:4px 4px}"},{"created":"2024-01-22T17:11:13.000Z","isPrivate":0,"projectId":"535b95","snapshot":null,"tags":null,"title":"card by andrew-demchenk0","updated":"2024-01-22T17:11:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1297,"cssLen":725,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n \n

lorem ipsum dolor sit amet

","css":".success {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n width: 320px;\n padding: 12px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: start;\n background: #EDFBD8;\n border-radius: 8px;\n box-shadow: 0px 0px 5px -3px #111;\n}\n\n.success__icon {\n width: 20px;\n height: 20px;\n transform: translateY(-2px);\n margin-right: 8px;\n}\n\n.success__icon path {\n fill: #84D65A;\n}\n\n.success__title {\n font-weight: 500;\n font-size: 14px;\n color: #2B641E;\n}\n\n.success__close {\n width: 20px;\n height: 20px;\n cursor: pointer;\n margin-left: auto;\n}\n\n.success__close path {\n fill: #2B641E;\n}"},{"created":"2024-01-22T17:11:13.000Z","isPrivate":0,"projectId":"1f317c","snapshot":null,"tags":null,"title":"card by chethan025","updated":"2024-01-22T17:11:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":993,"cssLen":1014,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

League of legends\n

\n","css":".card {\n display: flex;\n align-items: center;\n text-align: center;\n justify-content: center;\n background: rgba(65, 21, 115, 1);\n box-shadow: 0px 145px 58px rgba(233, 182, 27, 0.01),\n 0px 82px 49px rgba(233, 182, 27, 0.05), \n 0px 36px 36px rgba(233, 182, 27, 0.09), \n 0px 9px 20px rgba(233, 182, 27, 0.1), \n 0px 0px 0px rgba(233, 182, 27, 0.1);\n width: 254px;\n height: 254px;\n margin: 40px;\n border-radius: 28px;\n position: relative;\n font-family: 'Montserrat';\n font-style: italic;\n font-weight: 500;\n font-size: 42px;\n line-height: 28px;\n color: #41157300;\n letter-spacing: 0.1em;\n transition: 300ms ease-in;\n}\n\n.card:hover {\n background: rgba(233, 182, 27, 1);\n box-shadow: 0px 112px 45px rgba(65, 21, 115, 0.01), \n 0px 63px 38px rgba(65, 21, 115, 0.05), \n 0px 28px 28px rgba(65, 21, 115, 0.09), \n 0px 7px 15px rgba(65, 21, 115, 0.1), \n 0px 0px 0px rgba(65, 21, 115, 0.1);\n color: #FFFFFF;\n}\n\n.svg {\n opacity: 80%;\n}\n\n.text {\n margin: auto;\n position: absolute;\n}"},{"created":"2024-01-22T17:11:13.000Z","isPrivate":0,"projectId":"63b4e0","snapshot":null,"tags":null,"title":"card by Yaya12085","updated":"2024-01-22T17:11:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4445,"cssLen":1036,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n $29\n

\n \n Get started\n \n

\n \n Connect 80 websites \n
\n \n Connect up to 5 bank accounts \n
\n \n Track up to 50 credit cards \n
\n \n Analytics support \n
\n \n Export up to 12 months data \n
\n \n Cloud service 24/7 \n

","css":".card {\n max-width: 320px;\n display: flex;\n flex-direction: column;\n border-radius: 1.5rem;\n background-color: rgba(0, 0, 0, 1);\n padding: 1.5rem;\n}\n\n.price {\n font-size: 3rem;\n line-height: 1;\n font-weight: 300;\n letter-spacing: -0.025em;\n color: rgba(255, 255, 255, 1);\n}\n\n.lists {\n margin-top: 2.5rem;\n display: flex;\n flex-direction: column;\n grid-row-gap: 0.75rem;\n row-gap: 0.75rem;\n font-size: 0.875rem;\n line-height: 1.25rem;\n color: rgba(255, 255, 255, 1);\n}\n\n.list {\n display: flex;\n align-items: center;\n}\n\n.list svg {\n height: 1rem;\n width: 1rem;\n}\n\n.list span {\n margin-left: 1rem;\n}\n\n.action {\n margin-top: 2rem;\n width: 100%;\n border: 2px solid rgba(255, 255, 255, 1);\n border-radius: 9999px;\n background-color: rgba(255, 255, 255, 1);\n padding: 0.625rem 1.5rem;\n text-align: center;\n font-size: 0.875rem;\n line-height: 1.25rem;\n color: rgba(0, 0, 0, 1);\n outline: none;\n transition: all .2s ease;\n}\n\n.action:hover {\n color: rgba(255, 255, 255, 1);\n background-color: transparent;\n}"},{"created":"2024-01-22T17:11:13.000Z","isPrivate":0,"projectId":"8e51a9","snapshot":null,"tags":null,"title":"card by arshshaikh06","updated":"2024-01-22T17:11:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1127,"cssLen":2553,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n #CECE5A\n

\n #FFE17B\n

\n #FD8D14\n

\n #C51605\n

\n\n

","css":".container {\n width: 300px;\n height: 340px;\n border-radius: 1em;\n overflow: hidden;\n box-shadow: 0 10px 20px #dbdbdb;\n font-family: sans-serif;\n background: white;\n pointer-events: none;\n}\n\n.palette {\n position: relative;\n width: 300px;\n height: 300px;\n border-radius: 1rem;\n overflow: hidden;\n pointer-events: auto;\n}\n\n.palette:hover > #color-code {\n opacity: 0;\n}\n\n.color {\n position: absolute;\n width: 300px;\n height: 300px;\n transform-origin: center;\n transition: 0.3s ease-in-out;\n box-sizing: inline-block;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.color span {\n color: white;\n font-weight: 600;\n letter-spacing: 1px;\n}\n\n#color1 {\n background: #CECE5A;\n rotate: 45deg;\n translate: 212.13px 0;\n outline: 0 solid #CECE5A;\n z-index: 9;\n}\n\n#color1:hover {\n translate: 0 0;\n rotate: 0deg;\n z-index: 99;\n outline: 20px solid #CECE5A;\n}\n\n#color2 {\n background: #FFE17B;\n rotate: 45deg;\n translate: 0 212.13px;\n outline: 0 solid #FFE17B;\n z-index: 9;\n}\n\n#color2:hover {\n translate: 0 0;\n rotate: 0deg;\n z-index: 99;\n outline: 20px solid #FFE17B;\n}\n\n#color2 span {\n color: #1A1A1A;\n}\n\n#color3 {\n background: #FD8D14;\n rotate: 45deg;\n translate: -212.13px 0;\n outline: 0 solid #FD8D14;\n z-index: 9;\n}\n\n#color3:hover {\n translate: 0 0;\n rotate: 0deg;\n z-index: 99;\n outline: 20px solid #FD8D14;\n}\n\n#color4 {\n background: #C51605;\n rotate: 45deg;\n translate: 0 -212.13px;\n outline: 0 solid #C51605;\n z-index: 9;\n}\n\n#color4:hover {\n translate: 0 0;\n rotate: 0deg;\n z-index: 99;\n outline: 20px solid #C51605;\n}\n\n#color-code {\n position: absolute;\n top: 0;\n left: 0;\n width: 40px;\n height: 40px;\n translate: 130px 130px;\n border-radius: 20px;\n overflow: hidden;\n z-index: 199;\n opacity: 1;\n transition: 0.3s ease-in-out;\n}\n\n#color-code-bg {\n position: absolute;\n width: 40px;\n height: 40px;\n background-color: rgba(255, 255, 255, 0.8);\n filter: blur(10px);\n}\n\n#color-code-text {\n position: absolute;\n width: 40px;\n height: 40px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n#color-code-text::after {\n content: \"v2\";\n font-weight: 600;\n font-family: sans-serif;\n color: #1a1a1a;\n}\n\n#footer {\n height: 12%;\n width: 100%;\n background: white;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 1em;\n box-sizing: border-box;\n color: #bebebe;\n}\n\n#footer svg {\n scale: 0.75;\n}\n\n#footer #bookmarks {\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: smaller;\n}"},{"created":"2024-01-22T17:11:13.000Z","isPrivate":0,"projectId":"05f39a","snapshot":null,"tags":null,"title":"card by carlosepcc","updated":"2024-01-22T17:11:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1141,"cssLen":4605,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n CHAMONILLE\n

\n NATURAL, OIL\n

39.00 MLC

Perfect everywhere

\n \n\n

","css":".absolute {\n position: absolute\n}\n\n.relative {\n position: relative\n}\n\n.bottom-0 {\n bottom: 0px\n}\n\n.m-4 {\n margin: 1rem\n}\n\n.m-auto {\n margin: auto\n}\n\n.mb-4 {\n margin-bottom: 1rem\n}\n\n.mt-8 {\n margin-top: 2rem\n}\n\n.h-0 {\n height: 0px\n}\n\n.h-0\\.5 {\n height: 0.125rem\n}\n\n.h-10 {\n height: 2.5rem\n}\n\n.h-2 {\n height: 0.5rem\n}\n\n.w-10 {\n width: 2.5rem\n}\n\n.w-\\[70\\%\\] {\n width: 70%\n}\n\n.w-\\[clamp\$260px\\2c 80\\%\\2c 300px\$\\] {\n width: clamp(260px,80%,300px)\n}\n\n.w-full {\n width: 100%\n}\n\n.cursor-pointer {\n cursor: pointer\n}\n\n.overflow-hidden {\n overflow: hidden\n}\n\n.rounded {\n border-radius: 0.25rem\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.rounded-lg {\n border-radius: 0.5rem\n}\n\n.rounded-tl-none {\n border-top-left-radius: 0px\n}\n\n.border-r-2 {\n border-right-width: 2px\n}\n\n.border-t-2 {\n border-top-width: 2px\n}\n\n.border-gray-900 {\n --tw-border-opacity: 1;\n border-color: rgb(17 24 39 / var(--tw-border-opacity))\n}\n\n.bg-orange-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(249 115 22 / var(--tw-bg-opacity))\n}\n\n.bg-gradient-to-l {\n background-image: linear-gradient(to left, var(--tw-gradient-stops))\n}\n\n.bg-gradient-to-tl {\n background-image: linear-gradient(to top left, var(--tw-gradient-stops))\n}\n\n.from-gray-900 {\n --tw-gradient-from: #111827 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)\n}\n\n.via-yellow-500 {\n --tw-gradient-to: rgb(234 179 8 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), #eab308 var(--tw-gradient-via-position), var(--tw-gradient-to)\n}\n\n.via-yellow-950 {\n --tw-gradient-to: rgb(66 32 6 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), #422006 var(--tw-gradient-via-position), var(--tw-gradient-to)\n}\n\n.to-gray-950 {\n --tw-gradient-to: #030712 var(--tw-gradient-to-position)\n}\n\n.px-8 {\n padding-left: 2rem;\n padding-right: 2rem\n}\n\n.py-10 {\n padding-top: 2.5rem;\n padding-bottom: 2.5rem\n}\n\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem\n}\n\n.font-bold {\n font-weight: 700\n}\n\n.uppercase {\n text-transform: uppercase\n}\n\n.tracking-widest {\n letter-spacing: 0.1em\n}\n\n.text-gray-300 {\n --tw-text-opacity: 1;\n color: rgb(209 213 219 / var(--tw-text-opacity))\n}\n\n.text-gray-400 {\n --tw-text-opacity: 1;\n color: rgb(156 163 175 / var(--tw-text-opacity))\n}\n\n.blur-2xl {\n --tw-blur: blur(40px);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)\n}\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\n.hover\\:from-gray-800:hover {\n --tw-gradient-from: #1f2937 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)\n}\n\n.hover\\:to-gray-950:hover {\n --tw-gradient-to: #030712 var(--tw-gradient-to-position)\n}\n\n.hover\\:brightness-90:hover {\n --tw-brightness: brightness(.9);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)\n}\n\n.group:hover .group-hover\\:w-full {\n width: 100%\n}\n\n.group:hover .group-hover\\:-translate-y-1 {\n --tw-translate-y: -0.25rem;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))\n}\n\n.group:hover .group-hover\\:via-yellow-500 {\n --tw-gradient-to: rgb(234 179 8 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), #eab308 var(--tw-gradient-via-position), var(--tw-gradient-to)\n}\n\n.group:hover .group-hover\\:shadow-xl {\n --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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.group:hover .group-hover\\:shadow-red-900 {\n --tw-shadow-color: #7f1d1d;\n --tw-shadow: var(--tw-shadow-colored)\n}\n\n.group:hover .group-hover\\:blur-xl {\n --tw-blur: blur(24px);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)\n}"},{"created":"2024-01-22T17:11:12.000Z","isPrivate":0,"projectId":"f911f3","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1716,"cssLen":2515,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n Continue payment\n

Wait! you have NOT finished your purchase, do you want to continue?

\n \n \n

\n \n\n

","css":".absolute {\n position: absolute\n}\n\n.relative {\n position: relative\n}\n\n.right-2 {\n right: 0.5rem\n}\n\n.top-3 {\n top: 0.75rem\n}\n\n.flex {\n display: flex\n}\n\n.h-12 {\n height: 3rem\n}\n\n.h-72 {\n height: 18rem\n}\n\n.w-12 {\n width: 3rem\n}\n\n.w-56 {\n width: 14rem\n}\n\n.w-80 {\n width: 20rem\n}\n\n.flex-row {\n flex-direction: row\n}\n\n.flex-col {\n flex-direction: column\n}\n\n.items-stretch {\n align-items: stretch\n}\n\n.justify-end {\n justify-content: flex-end\n}\n\n.justify-between {\n justify-content: space-between\n}\n\n.gap-2 {\n gap: 0.5rem\n}\n\n.gap-8 {\n gap: 2rem\n}\n\n.rounded {\n border-radius: 0.25rem\n}\n\n.rounded-2xl {\n border-radius: 1rem\n}\n\n.border-2 {\n border-width: 2px\n}\n\n.border-blue-400 {\n --tw-border-opacity: 1;\n border-color: rgb(96 165 250 / var(--tw-border-opacity))\n}\n\n.bg-blue-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(96 165 250 / var(--tw-bg-opacity))\n}\n\n.bg-gray-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(249 250 251 / var(--tw-bg-opacity))\n}\n\n.bg-sky-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(224 242 254 / var(--tw-bg-opacity))\n}\n\n.fill-current {\n fill: currentColor\n}\n\n.stroke-blue-400 {\n stroke: #60a5fa\n}\n\n.p-1 {\n padding: 0.25rem\n}\n\n.p-4 {\n padding: 1rem\n}\n\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem\n}\n\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem\n}\n\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem\n}\n\n.font-semibold {\n font-weight: 600\n}\n\n.text-blue-400 {\n --tw-text-opacity: 1;\n color: rgb(96 165 250 / var(--tw-text-opacity))\n}\n\n.text-gray-50 {\n --tw-text-opacity: 1;\n color: rgb(249 250 251 / var(--tw-text-opacity))\n}\n\n.text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity))\n}\n\n.text-red-300 {\n --tw-text-opacity: 1;\n color: rgb(252 165 165 / var(--tw-text-opacity))\n}\n\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px 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.shadow-sky-800 {\n --tw-shadow-color: #075985;\n --tw-shadow: var(--tw-shadow-colored)\n}\n\n.hover\\:bg-blue-300:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(147 197 253 / var(--tw-bg-opacity))\n}\n\n.hover\\:bg-gray-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity))\n}\n\n.hover\\:text-red-500:hover {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity))\n}"},{"created":"2024-01-22T17:11:12.000Z","isPrivate":0,"projectId":"dc74f3","snapshot":null,"tags":null,"title":"card by escannord","updated":"2024-01-22T17:11:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":18489,"cssLen":6906,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

moov

\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 10:50\n PM
\n Sat, 04 Nov\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

back

\n \n \n \n \n

\n","css":".card {\n perspective: 1000px;\n transform-style: preserve-3d;\n position: relative;\n}\n\n.phone {\n /* transform: rotateX(40deg); */\n position: relative;\n perspective: 1000px;\n width: 150px;\n height: 254px;\n transform-style: preserve-3d;\n transform: rotateX(80deg) rotateY(0deg) rotateZ(30deg);\n transition: all 1s;\n /* animation: rotate 5s linear infinite; */\n}\n\n.phone:hover {\n transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.5);\n}\n.front {\n width: 100%;\n height: 100%;\n background: lightgrey;\n border: solid 5px rgb(0, 0, 0);\n border-radius: 10px;\n border-top: 15px solid;\n border-bottom: 15px solid;\n background: lightblue;\n padding: 0.5rem;\n text-align: center;\n transform: translateY(20px);\n background: radial-gradient(\n circle,\n rgb(170, 162, 162),\n rgb(44, 8, 102) 30%,\n rgba(26, 78, 189, 0.226) 0%\n ),\n radial-gradient(\n circle at 40px 40px,\n rgb(233, 228, 228),\n rgb(41, 35, 49) 30%,\n rgba(88, 84, 84, 0) 0%\n ),\n radial-gradient(\n circle at 600px 200px,\n rgb(233, 228, 228),\n rgb(27, 26, 26) 10%,\n rgba(88, 84, 84, 0) 0%\n ),\n radial-gradient(\n circle at 800px 100px,\n rgb(233, 228, 228),\n #333 10%,\n rgba(88, 84, 84, 0) 0%\n ),\n radial-gradient(\n circle at 700px 500px,\n rgb(233, 228, 228),\n #333 2%,\n rgba(88, 84, 84, 0.123) 0%\n ),\n radial-gradient(\n circle at 200px 400px,\n rgb(233, 228, 228),\n #333 1%,\n rgba(88, 84, 84, 0) 0%\n ),\n radial-gradient(\n circle at 300px 700px,\n rgb(233, 228, 228),\n #333 15%,\n rgba(88, 84, 84, 0) 0%\n ),\n radial-gradient(\n circle at 650px 400px,\n rgb(233, 228, 228),\n #333 10%,\n rgba(88, 84, 84, 0) 0%\n ),\n radial-gradient(\n circle at 600px 600px,\n rgb(233, 228, 228),\n #333 1%,\n rgba(88, 84, 84, 0.959) 0%\n );\n position: absolute;\n top: 0;\n left: 0;\n /* outline: 2px solid rgb(116, 115, 115); */\n}\n.front .home {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n gap: 10px;\n grid-template-rows: repeat(2, 1fr);\n}\n\n.home2 {\n grid-template-rows: repeat(1, 1fr) !important;\n margin-bottom: 0.5rem;\n}\n\n.front .home .app {\n display: inline-block;\n width: 15px;\n height: 15px;\n background-color: rgb(255, 255, 255);\n border-radius: 30%;\n text-align: center;\n position: relative;\n}\n.front .home .app .logo-app {\n width: 70%;\n height: 70%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.full-logo {\n background-color: transparent !important;\n}\n\n.full-logo .logo-app {\n width: 100% !important;\n height: 100% !important;\n}\n\n.search {\n position: relative;\n margin-top: 0.2rem;\n margin-bottom: 1rem;\n}\n\n.logo-google {\n position: absolute;\n width: 10px;\n left: 5px;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.search-google {\n width: 100%;\n border-radius: 20px;\n padding: 0.3rem;\n padding-left: 1rem;\n font-size: 9px;\n height: 1.5rem;\n border: none;\n outline: none;\n}\n\n.date {\n color: white;\n position: relative;\n margin-bottom: 1rem;\n text-align: left;\n}\n\n.date .hour {\n font-size: large;\n}\n\n.date * {\n display: inline-block;\n}\n\n.date .period,\n.date .day {\n font-size: 9px;\n line-height: 10px;\n}\n\n.bullet {\n display: inline-block;\n width: 30%;\n height: 0;\n border-bottom: 5px dotted rgba(255, 255, 255, 0.651);\n}\n\n.navigation {\n display: flex;\n justify-content: space-around;\n}\n\n.navigation .btn {\n display: inline-block;\n width: 10px;\n height: 10px;\n}\n\n.navigation .btn-home {\n border-radius: 50%;\n border: solid 1px white;\n}\n\n.navigation .btn-back {\n border-radius: 35%;\n border: solid 1px white;\n border-left: 1px solid transparent;\n}\n\n.navigation .btn-task {\n border-radius: 35%;\n border: solid 1px white;\n}\n\n.face {\n position: absolute;\n border-radius: 10px;\n width: 100%;\n height: 100%;\n background-color: rgb(24, 23, 24);\n top: 50%;\n left: 50%;\n}\n\n.head {\n font-size: 6px;\n position: absolute;\n width: 100%;\n left: 0;\n top: 0;\n height: 10px;\n display: flex;\n justify-content: space-between;\n}\n\n.head .h-left {\n color: white;\n margin: 0 2px;\n}\n.head .h-right span {\n display: inline-block;\n width: 10px;\n height: 10px;\n margin: 0 1px;\n}\n\n.logo-head {\n width: 100%;\n height: 100%;\n}\n\n.top,\n.bottom {\n width: 150px;\n height: 10px;\n}\n\n.right,\n.left {\n height: 254px;\n width: 10px;\n}\n\n.front {\n transform: translate(-50%, -50%) translateZ(5px);\n}\n.back {\n transform: translate(-50%, -50%) rotateY(180deg) translateZ(5px);\n}\n.left {\n transform: translate(-50%, -50%) rotateY(-90deg) translateZ(75px);\n}\n.right {\n transform: translate(-50%, -50%) rotateY(90deg) translateZ(75px);\n}\n.top {\n transform: translate(-50%, -50%) rotateX(90deg) translateZ(127px);\n}\n.bottom {\n transform: translate(-50%, -50%) rotateX(-90deg) translateZ(127px);\n}\n\n.bottom .elements {\n display: flex;\n justify-content: space-around;\n align-items: center;\n width: 100%;\n height: 100%;\n}\n\n.bottom .elements .headphone {\n display: inline-block;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: #333;\n}\n\n.bottom .elements .microphone {\n display: inline-block;\n width: 3px;\n height: 3px;\n border-radius: 50%;\n background-color: #333;\n}\n\n.bottom .elements .charge {\n display: inline-block;\n width: 20px;\n height: 6px;\n position: relative;\n border-radius: 3px 3px 10px 10px;\n background-color: #333;\n}\n\n.charge::before {\n content: \"\";\n display: inline-block;\n width: 10px;\n height: 2px;\n position: absolute;\n border-radius: 3px 3px 10px 10px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: rgb(26, 25, 25);\n}\n\n.bottom .elements .speaker {\n display: inline-block;\n width: 30px;\n height: 0;\n border-top: #333 dotted 5px;\n}\n\n.front-camera {\n width: 10px;\n height: 10px;\n background-color: rgb(26, 25, 25);\n border-radius: 50%;\n position: absolute;\n top: -11px;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.front-camera::after {\n content: \"\";\n position: absolute;\n border-radius: 50%;\n display: inline-block;\n top: 50%;\n left: 50%;\n width: 50%;\n height: 50%;\n transform: translate(-50%, -50%);\n background: radial-gradient(\n circle at 6px 2px,\n rgba(255, 255, 255, 0.726),\n rgb(0, 0, 0)\n );\n}\n\n.front-camera::before {\n content: \"\";\n position: absolute;\n border-radius: 50%;\n display: inline-block;\n top: 50%;\n left: 50%;\n width: 25%;\n height: 25%;\n z-index: 2;\n transform: translate(-50%, -50%);\n background-color: #212121;\n}\n\n.menu {\n background-color: transparent !important;\n}\n\n.logo-menu {\n width: 100%;\n height: 100%;\n}\n\n.logo-phone {\n background-color: #33ff77 !important;\n}\n\n.message {\n /* background-color: blue!important; */\n}\n\n@keyframes rotate {\n 0% {\n transform: rotateX(0deg) rotateY(0deg);\n }\n 100% {\n transform: rotateX(360deg) rotateY(360deg);\n }\n}\n"}]}},"actionData":null,"errors":null}