{"data":{"content":"<!DOCTYPE html>\n<html lang=\"zh\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Elegant Motto Card</title>\n <style>\n @import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap');\n \n body {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n background-color: #f5f5f5;\n font-family: 'Ma Shan Zheng', cursive;\n }\n \n .card {\n width: 350px;\n height: 350px;\n position: relative;\n background-color: #f9f4e6;\n background-image: \n linear-gradient(to right, rgba(0,0,0,0.1) 1px, transparent 1px),\n linear-gradient(to bottom, rgba(0,0,0,0.1) 1px, transparent 1px);\n background-size: 20px 20px;\n box-shadow: 0 4px 8px rgba(0,0,0,0.2);\n padding: 20px;\n box-sizing: border-box;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n }\n \n .card:before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: \n linear-gradient(135deg, rgba(180, 40, 40, 0.1) 0%, transparent 80%),\n linear-gradient(45deg, rgba(255, 250, 240, 0.3) 0%, transparent 70%);\n z-index: 1;\n pointer-events: none;\n }\n \n .content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n height: 100%;\n z-index: 2;\n text-align: left;\n margin-left: 15px;\n }\n \n .motto {\n font-size: 28px;\n line-height: 1.4;\n color: #333;\n margin-bottom: 15px;\n }\n \n .creator {\n font-size: 18px;\n color: #555;\n margin-top: 5px;\n }\n \n .signature {\n position: absolute;\n bottom: 10px;\n right: 15px;\n font-size: 12px;\n color: #888;\n z-index: 2;\n }\n \n .decoration {\n position: absolute;\n bottom: 20px;\n left: 20px;\n font-size: 100px;\n color: rgba(180, 40, 40, 0.05);\n z-index: 1;\n }\n </style>\n</head>\n<body>\n <div class=\"card\">\n <div class=\"content\">\n <div class=\"motto\">观海者难为水,痴心者难为情呐男女情爱之苦乐,不过是意中人变成了忆中人,或是心上人变成了枕边人</div>\n <div class=\"creator\">- 烽火戏诸侯 《剑来》</div>\n </div>\n <div class=\"decoration\">剑</div>\n <div class=\"signature\">302.AI</div>\n </div>\n</body>\n</html>","ori_content":"```html\n<!DOCTYPE html>\n<html lang=\"zh\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Elegant Motto Card</title>\n <style>\n @import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap');\n \n body {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n background-color: #f5f5f5;\n font-family: 'Ma Shan Zheng', cursive;\n }\n \n .card {\n width: 350px;\n height: 350px;\n position: relative;\n background-color: #f9f4e6;\n background-image: \n linear-gradient(to right, rgba(0,0,0,0.1) 1px, transparent 1px),\n linear-gradient(to bottom, rgba(0,0,0,0.1) 1px, transparent 1px);\n background-size: 20px 20px;\n box-shadow: 0 4px 8px rgba(0,0,0,0.2);\n padding: 20px;\n box-sizing: border-box;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n }\n \n .card:before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: \n linear-gradient(135deg, rgba(180, 40, 40, 0.1) 0%, transparent 80%),\n linear-gradient(45deg, rgba(255, 250, 240, 0.3) 0%, transparent 70%);\n z-index: 1;\n pointer-events: none;\n }\n \n .content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n height: 100%;\n z-index: 2;\n text-align: left;\n margin-left: 15px;\n }\n \n .motto {\n font-size: 28px;\n line-height: 1.4;\n color: #333;\n margin-bottom: 15px;\n }\n \n .creator {\n font-size: 18px;\n color: #555;\n margin-top: 5px;\n }\n \n .signature {\n position: absolute;\n bottom: 10px;\n right: 15px;\n font-size: 12px;\n color: #888;\n z-index: 2;\n }\n \n .decoration {\n position: absolute;\n bottom: 20px;\n left: 20px;\n font-size: 100px;\n color: rgba(180, 40, 40, 0.05);\n z-index: 1;\n }\n </style>\n</head>\n<body>\n <div class=\"card\">\n <div class=\"content\">\n <div class=\"motto\">观海者难为水,痴心者难为情呐男女情爱之苦乐,不过是意中人变成了忆中人,或是心上人变成了枕边人</div>\n <div class=\"creator\">- 烽火戏诸侯 《剑来》</div>\n </div>\n <div class=\"decoration\">剑</div>\n <div class=\"signature\">302.AI</div>\n </div>\n</body>\n</html>\n```","file":{"format":"png","url":"https://file.302.ai/gpt/htmltopng/20250515/c3f12ad4ffa2436d9c93958b90393358.png"}}}