{"html":"

\n CARD NUMBER\n
\n 1234 5678 9012 3456\n

\n CARDHOLDER NAME\n JONATHAN DOE\n

\n EXPIRY DATE\n 01/01/25\n

\n","css":".card-container {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.credit-card {\n background: linear-gradient(145deg, #7dbbcc, #aa1100);\n border-radius: 16px;\n box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);\n color: white;\n padding: 0;\n position: relative;\n}\n\n.inner {\n width: 320px;\n height: 150px;\n background: inherit;\n border-radius: 16px;\n box-shadow: inherit;\n color: white;\n padding: 20px;\n position: relative;\n}\n\n.magnetic-strip {\n width: 100%;\n height: 30px;\n margin-top: 20px;\n background: linear-gradient(90deg, #000000, #434343 20%, #000000);\n border-radius: 4px;\n}\n\n.card-number {\n margin-top: -10px;\n font-size: 20px;\n font-weight: 600;\n letter-spacing: 2px;\n}\n\n.card-details {\n display: flex;\n justify-content: space-between;\n margin-top: 14px;\n}\n\n.card-details div {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n}\n\n.card-details label,\n.number-label {\n font-size: 10px;\n color: rgba(255, 255, 255, 0.7);\n margin-bottom: 5px;\n}\n\n.card-name,\n.card-date {\n color: white;\n font-size: 12px;\n font-weight: 900;\n}\n\n.number-label {\n font-size: 10px;\n}\n"}

hard-frog-13

👁 实时预览

📝 源代码