{"html":"

Current Balance

$12,345.67

\n \n \n \n \n Account: **** **** **** 1234\n

\n \n \n \n \n Transfer\n \n \n \n \n \n \n \n Save\n \n

\n \n \n \n

\n","css":".card {\n font-family: Arial, sans-serif;\n width: 310px;\n padding: 32px;\n border-radius: 24px;\n background: linear-gradient(to bottom right, #60a5fa, #a78bfa);\n box-shadow:\n 0 10px 15px -3px rgba(0, 0, 0, 0.1),\n 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n position: relative;\n overflow: hidden;\n color: white;\n}\n\n.card::before,\n.card::after {\n content: \"\";\n position: absolute;\n border-radius: 50%;\n background-color: rgba(255, 255, 255, 0.1);\n z-index: 1;\n}\n\n.card::before {\n width: 160px;\n height: 160px;\n top: -80px;\n right: -80px;\n}\n\n.card::after {\n width: 128px;\n height: 128px;\n bottom: -64px;\n left: -64px;\n}\n\n.card-title {\n font-size: 1.2em;\n font-weight: bold;\n}\n\n.balance {\n font-size: 2em;\n font-weight: bold;\n margin: 0 0 12px 0;\n text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n.account {\n display: flex;\n align-items: center;\n font-size: 14px;\n margin-bottom: 22px;\n}\n\n.account svg {\n margin-right: 8px;\n}\n\n.buttons {\n display: flex;\n justify-content: space-between;\n}\n\n.button {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 12px;\n border-radius: 12px;\n font-size: 14px;\n font-weight: 500;\n text-decoration: none;\n transition:\n transform 0.3s,\n box-shadow 0.3s;\n}\n\n.button:hover {\n transform: translateY(-2px);\n box-shadow:\n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n}\n\n.button svg {\n margin-right: 8px;\n}\n\n.button-transfer {\n background-color: rgb(253, 253, 253);\n color: #3b82f6;\n margin-right: 16px;\n z-index: 2;\n}\n\n.button-save {\n background-color: #7e4ed1;\n color: white;\n}\n\n.dollar-sign {\n position: absolute;\n top: 24px;\n right: 24px;\n opacity: 0.5;\n}\n"}

clever-yak-57

👁 实时预览

📝 源代码