\u6bcd\u4eb2\u8282\u5feb\u4e50 – \u732e\u7ed9\u6700\u7231\u7684\u5988\u5988<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;\n background: linear-gradient(135deg, #ffeef8 0%, #ffe0f0 50%, #ffd4e8 100%);\n min-height: 100vh;\n overflow-x: hidden;\n }\n\n \/* \u98d8\u843d\u7684\u82b1\u74e3\u52a8\u753b *\/\n .petal {\n position: fixed;\n top: -50px;\n font-size: 24px;\n animation: fall linear infinite;\n opacity: 0.8;\n pointer-events: none;\n z-index: 1000;\n }\n\n @keyframes fall {\n 0% {\n transform: translateY(0) rotate(0deg);\n opacity: 1;\n }\n 100% {\n transform: translateY(100vh) rotate(720deg);\n opacity: 0;\n }\n }\n\n \/* \u5934\u90e8\u533a\u57df *\/\n .header {\n text-align: center;\n padding: 60px 20px 40px;\n position: relative;\n }\n\n .header h1 {\n font-size: 3.5rem;\n color: #d63384;\n text-shadow: 2px 2px 4px rgba(214, 51, 132, 0.2);\n animation: fadeInDown 1.5s ease-out;\n margin-bottom: 10px;\n }\n\n .header .subtitle {\n font-size: 1.5rem;\n color: #e85d9a;\n animation: fadeInUp 1.5s ease-out 0.5s both;\n }\n\n .header .date {\n font-size: 1.2rem;\n color: #f06292;\n margin-top: 15px;\n animation: fadeIn 2s ease-out 1s both;\n }\n\n \/* \u4e3b\u5185\u5bb9\u533a\u57df *\/\n .main-content {\n max-width: 900px;\n margin: 0 auto;\n padding: 0 20px 40px;\n }\n\n \/* \u5361\u7247\u6837\u5f0f *\/\n .card {\n background: rgba(255, 255, 255, 0.9);\n border-radius: 20px;\n padding: 40px;\n margin-bottom: 30px;\n box-shadow: 0 10px 40px rgba(214, 51, 132, 0.15);\n animation: fadeInUp 1s ease-out;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n }\n\n .card:hover {\n transform: translateY(-5px);\n box-shadow: 0 15px 50px rgba(214, 51, 132, 0.25);\n }\n\n .card h2 {\n color: #d63384;\n font-size: 1.8rem;\n margin-bottom: 20px;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .card p {\n color: #555;\n line-height: 1.8;\n font-size: 1.1rem;\n }\n\n \/* \u5eb7\u4e43\u99a8\u88c5\u9970 *\/\n .carnation {\n font-size: 2rem;\n }\n\n \/* \u8bd7\u6b4c\u533a\u57df *\/\n .poem {\n text-align: center;\n font-style: italic;\n color: #c2185b;\n font-size: 1.2rem;\n line-height: 2.2;\n padding: 20px 0;\n }\n\n .poem .line {\n margin: 10px 0;\n }\n\n \/* \u611f\u6069\u6e05\u5355 *\/\n .gratitude-list {\n list-style: none;\n padding: 0;\n }\n\n .gratitude-list li {\n padding: 15px 20px;\n margin: 10px 0;\n background: linear-gradient(90deg, #fce4ec 0%, #f8bbd9 100%);\n border-radius: 12px;\n color: #880e4f;\n font-size: 1.1rem;\n display: flex;\n align-items: center;\n gap: 12px;\n transition: transform 0.2s ease;\n }\n\n .gratitude-list li:hover {\n transform: scale(1.02);\n }\n\n .gratitude-list li::before {\n content: \"\ud83d\udc9d\";\n font-size: 1.3rem;\n }\n\n \/* ===== \u6e29\u99a8\u56de\u5fc6\u6a21\u5757 - \u65b0\u7248 ===== *\/\n .memories-intro {\n color: #666;\n margin-bottom: 20px;\n font-size: 1rem;\n }\n\n .add-memory-btn {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 12px 30px;\n background: linear-gradient(135deg, #d63384 0%, #e91e63 100%);\n color: white;\n border: none;\n border-radius: 25px;\n font-size: 1rem;\n cursor: pointer;\n transition: all 0.3s ease;\n margin-bottom: 25px;\n font-family: inherit;\n }\n\n .add-memory-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 25px rgba(214, 51, 132, 0.4);\n }\n\n .memories-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n gap: 20px;\n }\n\n .memory-item {\n background: white;\n border-radius: 15px;\n overflow: hidden;\n box-shadow: 0 5px 20px rgba(0,0,0,0.08);\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n animation: fadeInUp 0.5s ease-out;\n }\n\n .memory-item:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 30px rgba(214, 51, 132, 0.2);\n }\n\n .memory-photo {\n width: 100%;\n height: 200px;\n object-fit: cover;\n display: block;\n }\n\n .memory-placeholder {\n width: 100%;\n height: 200px;\n background: linear-gradient(135deg, #f8bbd9 0%, #f48fb1 100%);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 4rem;\n }\n\n .memory-content {\n padding: 15px;\n }\n\n .memory-text {\n color: #555;\n font-size: 0.95rem;\n line-height: 1.6;\n word-break: break-word;\n }\n\n .memory-date {\n color: #999;\n font-size: 0.8rem;\n margin-top: 8px;\n }\n\n .memory-delete {\n float: right;\n background: none;\n border: none;\n color: #ccc;\n cursor: pointer;\n font-size: 1rem;\n padding: 0;\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n transition: all 0.2s;\n }\n\n .memory-delete:hover {\n color: #e91e63;\n background: #fce4ec;\n }\n\n \/* \u6a21\u6001\u6846 *\/\n .modal-overlay {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0,0,0,0.5);\n z-index: 2000;\n align-items: center;\n justify-content: center;\n backdrop-filter: blur(3px);\n }\n\n .modal-overlay.active {\n display: flex;\n }\n\n .modal {\n background: white;\n border-radius: 20px;\n padding: 30px;\n width: 90%;\n max-width: 450px;\n animation: popIn 0.3s ease-out;\n max-height: 90vh;\n overflow-y: auto;\n }\n\n .modal h3 {\n color: #d63384;\n margin-bottom: 20px;\n font-size: 1.3rem;\n }\n\n .modal-close {\n float: right;\n background: none;\n border: none;\n font-size: 1.5rem;\n color: #999;\n cursor: pointer;\n line-height: 1;\n }\n\n .modal-close:hover {\n color: #d63384;\n }\n\n .upload-area {\n border: 2px dashed #f48fb1;\n border-radius: 15px;\n padding: 30px;\n text-align: center;\n cursor: pointer;\n transition: all 0.3s;\n margin-bottom: 20px;\n background: #fff5f8;\n }\n\n .upload-area:hover {\n border-color: #d63384;\n background: #fce4ec;\n }\n\n .upload-area.has-image {\n border-style: solid;\n border-color: #d63384;\n padding: 10px;\n }\n\n .upload-preview {\n max-width: 100%;\n max-height: 200px;\n border-radius: 10px;\n }\n\n .upload-placeholder {\n color: #999;\n }\n\n .upload-placeholder .icon {\n font-size: 3rem;\n margin-bottom: 10px;\n }\n\n .modal-input {\n width: 100%;\n padding: 12px 15px;\n border: 2px solid #f48fb1;\n border-radius: 12px;\n font-size: 1rem;\n font-family: inherit;\n outline: none;\n resize: vertical;\n min-height: 80px;\n margin-bottom: 20px;\n }\n\n .modal-input:focus {\n border-color: #d63384;\n box-shadow: 0 0 10px rgba(214, 51, 132, 0.2);\n }\n\n .modal-btns {\n display: flex;\n gap: 10px;\n justify-content: flex-end;\n }\n\n .modal-btn {\n padding: 10px 25px;\n border-radius: 20px;\n border: none;\n font-size: 0.95rem;\n cursor: pointer;\n transition: all 0.3s;\n font-family: inherit;\n }\n\n .modal-btn-cancel {\n background: #f5f5f5;\n color: #666;\n }\n\n .modal-btn-cancel:hover {\n background: #e0e0e0;\n }\n\n .modal-btn-save {\n background: linear-gradient(135deg, #d63384 0%, #e91e63 100%);\n color: white;\n }\n\n .modal-btn-save:hover {\n transform: translateY(-2px);\n box-shadow: 0 5px 15px rgba(214, 51, 132, 0.4);\n }\n\n .modal-btn-save:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n }\n\n \/* \u7a7a\u72b6\u6001 *\/\n .memories-empty {\n text-align: center;\n padding: 40px;\n color: #999;\n }\n\n .memories-empty .icon {\n font-size: 4rem;\n margin-bottom: 15px;\n }\n\n \/* \u795d\u798f\u8bed\u8f93\u5165\u533a *\/\n .wish-section {\n text-align: center;\n padding: 30px 0;\n }\n\n .wish-input {\n width: 100%;\n max-width: 500px;\n padding: 15px 20px;\n border: 2px solid #f48fb1;\n border-radius: 30px;\n font-size: 1rem;\n outline: none;\n transition: box-shadow 0.3s ease;\n font-family: inherit;\n }\n\n .wish-input:focus {\n box-shadow: 0 0 15px rgba(244, 143, 177, 0.4);\n }\n\n .wish-btn {\n margin-top: 20px;\n padding: 15px 50px;\n background: linear-gradient(135deg, #d63384 0%, #e91e63 100%);\n color: white;\n border: none;\n border-radius: 30px;\n font-size: 1.1rem;\n cursor: pointer;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n font-family: inherit;\n }\n\n .wish-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 10px 30px rgba(214, 51, 132, 0.4);\n }\n\n \/* \u663e\u793a\u7684\u795d\u798f\u8bed *\/\n .wishes-display {\n margin-top: 30px;\n display: flex;\n flex-wrap: wrap;\n gap: 15px;\n justify-content: center;\n }\n\n .wish-tag {\n background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%);\n color: #880e4f;\n padding: 10px 20px;\n border-radius: 20px;\n font-size: 0.95rem;\n animation: popIn 0.5s ease-out;\n }\n\n \/* \u5e95\u90e8 *\/\n .footer {\n text-align: center;\n padding: 40px 20px;\n color: #d63384;\n font-size: 1.1rem;\n }\n\n .footer .heart {\n display: inline-block;\n animation: heartbeat 1.5s ease-in-out infinite;\n }\n\n \/* \u52a8\u753b\u5b9a\u4e49 *\/\n @keyframes fadeInDown {\n from {\n opacity: 0;\n transform: translateY(-30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n @keyframes popIn {\n 0% { transform: scale(0); opacity: 0; }\n 80% { transform: scale(1.1); }\n 100% { transform: scale(1); opacity: 1; }\n }\n\n @keyframes heartbeat {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.2); }\n }\n\n \/* \u54cd\u5e94\u5f0f\u8bbe\u8ba1 *\/\n @media (max-width: 768px) {\n .header h1 {\n font-size: 2.5rem;\n }\n .header .subtitle {\n font-size: 1.2rem;\n }\n .card {\n padding: 25px;\n }\n .card h2 {\n font-size: 1.5rem;\n }\n .memories-grid {\n grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n }\n }\n <\/style>\n<\/head>\n<body>\n \n <div id=\"petals-container\"><\/div>\n\n \n <header class=\"header\">\n <h1>\ud83c\udf38 \u6bcd\u4eb2\u8282\u5feb\u4e50 \ud83c\udf38<\/h1>\n <p class=\"subtitle\">\u732e\u7ed9\u4e16\u754c\u4e0a\u6700\u4f1f\u5927\u7684\u5988\u5988<\/p>\n <p class=\"date\">2025\u5e745\u670810\u65e5 \u00b7 \u661f\u671f\u65e5<\/p>\n <\/header>\n\n \n <main class=\"main-content\">\n \n <div class=\"card\">\n <h2><span class=\"carnation\">\ud83c\udf3a<\/span> \u732e\u7ed9\u6bcd\u4eb2\u7684\u8bd7<\/h2>\n <div class=\"poem\">\n <p class=\"line\">\u60a8\u7684\u53cc\u624b\uff0c\u7f16\u7ec7\u4e86\u6211\u7ae5\u5e74\u7684\u68a6<\/p>\n <p class=\"line\">\u60a8\u7684\u76ee\u5149\uff0c\u7167\u4eae\u6211\u524d\u884c\u7684\u8def<\/p>\n <p class=\"line\">\u60a8\u7684\u6000\u62b1\uff0c\u662f\u6211\u6c38\u8fdc\u7684\u6e2f\u6e7e<\/p>\n <p class=\"line\">\u60a8\u7684\u7231\uff0c\u5982\u6625\u98ce\u5316\u96e8\uff0c\u6da6\u7269\u65e0\u58f0<\/p>\n <br>\n <p class=\"line\">\u5c81\u6708\u67d3\u767d\u4e86\u60a8\u7684\u53d1\u4e1d<\/p>\n <p class=\"line\">\u65f6\u5149\u523b\u4e0b\u4e86\u60a8\u7684\u76b1\u7eb9<\/p>\n <p class=\"line\">\u4f46\u5728\u6211\u5fc3\u4e2d<\/p>\n <p class=\"line\">\u60a8\u6c38\u8fdc\u662f\u6700\u7f8e\u7684\u6a21\u6837<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"card\">\n <h2><span class=\"carnation\">\ud83c\udf37<\/span> \u611f\u6069\u6709\u60a8<\/h2>\n <ul class=\"gratitude-list\">\n <li>\u611f\u8c22\u60a8\u7ed9\u4e88\u6211\u751f\u547d\uff0c\u8ba9\u6211\u770b\u89c1\u8fd9\u4e16\u754c\u7684\u7f8e\u597d<\/li>\n <li>\u611f\u8c22\u60a8\u65e0\u6570\u4e2a\u65e5\u591c\u7684\u5b88\u62a4\u4e0e\u966a\u4f34<\/li>\n <li>\u611f\u8c22\u60a8\u5728\u6211\u8dcc\u5012\u65f6\u7ed9\u4e88\u7684\u9f13\u52b1\u4e0e\u62e5\u62b1<\/li>\n <li>\u611f\u8c22\u60a8\u7528\u667a\u6167\u6559\u4f1a\u6211\u505a\u4eba\u7684\u9053\u7406<\/li>\n <li>\u611f\u8c22\u60a8\u65e0\u79c1\u7684\u7231\uff0c\u4ece\u4e0d\u6c42\u56de\u62a5<\/li>\n <li>\u611f\u8c22\u60a8\u8ba9\u6211\u660e\u767d\uff0c\u7231\u662f\u4e16\u754c\u4e0a\u6700\u5f3a\u5927\u7684\u529b\u91cf<\/li>\n <\/ul>\n <\/div>\n\n \n <div class=\"card\">\n <h2><span class=\"carnation\">\ud83d\udcf8<\/span> \u6e29\u99a8\u56de\u5fc6<\/h2>\n <p class=\"memories-intro\">\u4e0a\u4f20\u7167\u7247\uff0c\u8bb0\u5f55\u4e0e\u5988\u5988\u7684\u7f8e\u597d\u77ac\u95f4\uff0c\u6dfb\u52a0\u795d\u798f\u8bed\u4fdd\u5b58\u8fd9\u4efd\u73cd\u8d35\u7684\u56de\u5fc6 \ud83d\udc95<\/p>\n <button class=\"add-memory-btn\" onclick=\"openModal()\">\n <span>\ud83d\udcf7<\/span> \u6dfb\u52a0\u7f8e\u597d\u56de\u5fc6\n <\/button>\n <div class=\"memories-grid\" id=\"memoriesGrid\">\n \n <\/div>\n <\/div>\n\n \n <div class=\"card\">\n <h2><span class=\"carnation\">\ud83d\udc8c<\/span> \u5199\u4e0b\u795d\u798f<\/h2>\n <div class=\"wish-section\">\n <input type=\"text\" class=\"wish-input\" id=\"wishInput\" placeholder=\"\u5199\u4e0b\u60a8\u5bf9\u5988\u5988\u7684\u795d\u798f...\" maxlength=\"100\">\n <br>\n <button class=\"wish-btn\" onclick=\"addWish()\">\u53d1\u9001\u795d\u798f \ud83d\udc95<\/button>\n <\/div>\n <div class=\"wishes-display\" id=\"wishesDisplay\">\n <div class=\"wish-tag\">\u5988\u5988\uff0c\u6211\u7231\u60a8\uff01\u2764\ufe0f<\/div>\n <div class=\"wish-tag\">\u613f\u60a8\u6c38\u8fdc\u5065\u5eb7\u7f8e\u4e3d \ud83c\udf39<\/div>\n <div class=\"wish-tag\">\u60a8\u662f\u4e16\u754c\u4e0a\u6700\u597d\u7684\u5988\u5988 \ud83c\udf1f<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"card\">\n <h2><span class=\"carnation\">\ud83d\udcd6<\/span> \u6bcd\u4eb2\u8282\u7684\u7531\u6765<\/h2>\n <p>\n \u6bcd\u4eb2\u8282\u8d77\u6e90\u4e8e\u7f8e\u56fd\uff0c\u7531\u5b89\u5a1c\u00b7\u8d3e\u7ef4\u65af\u53d1\u8d77\uff0c\u4ee5\u7eaa\u5ff5\u5979\u5df2\u6545\u7684\u6bcd\u4eb2\u30021914\u5e74\uff0c\u7f8e\u56fd\u56fd\u4f1a\u6b63\u5f0f\u5c06\u6bcf\u5e745\u6708\u7684\u7b2c\u4e8c\u4e2a\u661f\u671f\u65e5\u5b9a\u4e3a\u6bcd\u4eb2\u8282\u3002\n \u5eb7\u4e43\u99a8\u88ab\u89c6\u4e3a\u732e\u7ed9\u6bcd\u4eb2\u7684\u82b1\uff0c\u8c61\u5f81\u7740\u6bcd\u7231\u3001\u6e29\u99a8\u4e0e\u611f\u6069\u3002\u5728\u4e2d\u56fd\uff0c\u4eba\u4eec\u4e5f\u4f1a\u8d60\u9001\u5eb7\u4e43\u99a8\u6216\u8431\u8349\u82b1\uff08\u5fd8\u5fe7\u8349\uff09\u6765\u8868\u8fbe\u5bf9\u6bcd\u4eb2\u7684\u7231\u4e0e\u795d\u798f\u3002\n <\/p>\n <p style=\"margin-top: 15px;\">\n 2025\u5e74\u7684\u6bcd\u4eb2\u8282\u662f5\u670810\u65e5\uff0c\u8ba9\u6211\u4eec\u4e00\u8d77\u5411\u5168\u5929\u4e0b\u7684\u6bcd\u4eb2\u9053\u4e00\u58f0\uff1a\u5988\u5988\uff0c\u60a8\u8f9b\u82e6\u4e86\uff01\n <\/p>\n <\/div>\n <\/main>\n\n \n <footer class=\"footer\">\n <p>\u613f\u5929\u4e0b\u6240\u6709\u7684\u6bcd\u4eb2 <span class=\"heart\">\u2764\ufe0f<\/span> \u5e78\u798f\u5b89\u5eb7<\/p>\n <p style=\"margin-top: 10px; font-size: 0.9rem; opacity: 0.8;\">Made with love for Mother’s Day 2025<\/p>\n <\/footer>\n\n \n <div class=\"modal-overlay\" id=\"modalOverlay\" onclick=\"closeModalOnOverlay(event)\">\n <div class=\"modal\" onclick=\"event.stopPropagation()\">\n <button class=\"modal-close\" onclick=\"closeModal()\">×<\/button>\n <h3>\ud83c\udf38 \u6dfb\u52a0\u7f8e\u597d\u56de\u5fc6<\/h3>\n \n <div class=\"upload-area\" id=\"uploadArea\" onclick=\"document.getElementById('fileInput').click()\">\n <div class=\"upload-placeholder\" id=\"uploadPlaceholder\">\n <div class=\"icon\">\ud83d\udcf7<\/div>\n <div>\u70b9\u51fb\u4e0a\u4f20\u7167\u7247<\/div>\n <div style=\"font-size: 0.85rem; margin-top: 5px;\">\u652f\u6301 JPG\u3001PNG \u683c\u5f0f<\/div>\n <\/div>\n <img class=\"upload-preview\" id=\"uploadPreview\" style=\"display: none;\">\n <\/div>\n <input type=\"file\" id=\"fileInput\" accept=\"image\/*\" style=\"display: none;\" onchange=\"handleFileSelect(event)\">\n \n <textarea class=\"modal-input\" id=\"memoryText\" placeholder=\"\u5199\u4e0b\u8fd9\u6bb5\u56de\u5fc6\u7684\u795d\u798f\u8bed\u6216\u5fc3\u60c5...\uff08\u9009\u586b\uff09\"><\/textarea>\n \n <div class=\"modal-btns\">\n <button class=\"modal-btn modal-btn-cancel\" onclick=\"closeModal()\">\u53d6\u6d88<\/button>\n <button class=\"modal-btn modal-btn-save\" id=\"saveBtn\" onclick=\"saveMemory()\">\u4fdd\u5b58\u56de\u5fc6<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ ========== \u98d8\u843d\u82b1\u74e3 ==========\n function createPetal() {\n const petal = document.createElement('div');\n petal.className = 'petal';\n petal.innerHTML = ['\ud83c\udf38', '\ud83c\udf3a', '\ud83c\udf37', '\ud83d\udcae', '\ud83c\udff5\ufe0f'][Math.floor(Math.random() * 5)];\n petal.style.left = Math.random() * 100 + 'vw';\n petal.style.animationDuration = (Math.random() * 5 + 5) + 's';\n petal.style.animationDelay = Math.random() * 5 + 's';\n petal.style.fontSize = (Math.random() * 15 + 15) + 'px';\n document.getElementById('petals-container').appendChild(petal);\n setTimeout(() => petal.remove(), 10000);\n }\n setInterval(createPetal, 800);\n for (let i = 0; i < 10; i++) {\n setTimeout(createPetal, i * 300);\n }\n\n \/\/ ========== \u6e29\u99a8\u56de\u5fc6\u6a21\u5757 ==========\n const STORAGE_KEY = 'mothers_day_memories';\n let currentImageData = null;\n\n \/\/ \u52a0\u8f7d\u4fdd\u5b58\u7684\u56de\u5fc6\n function loadMemories() {\n const grid = document.getElementById('memoriesGrid');\n const memories = getMemories();\n \n if (memories.length === 0) {\n grid.innerHTML = `\n <div class=\"memories-empty\" style=\"grid-column: 1 \/ -1;\">\n <div class=\"icon\">\ud83d\udcf8<\/div>\n <div>\u8fd8\u6ca1\u6709\u56de\u5fc6\u54e6<\/div>\n <div style=\"font-size: 0.9rem; margin-top: 5px;\">\u70b9\u51fb\u4e0a\u65b9\u6309\u94ae\u6dfb\u52a0\u7b2c\u4e00\u5f20\u4e0e\u5988\u5988\u7684\u5408\u5f71\u5427 \ud83d\udc95<\/div>\n <\/div>\n `;\n return;\n }\n \n grid.innerHTML = memories.map((memory, index) => `\n <div class=\"memory-item\">\n ${memory.image \n ? `<img decoding=\"async\" src=\"${memory.image}\" class=\"memory-photo\" alt=\"\u56de\u5fc6\u7167\u7247\">`\n : `<div class=\"memory-placeholder\">${memory.emoji || '\ud83d\udc9d'}<\/div>`\n }\n <div class=\"memory-content\">\n <button class=\"memory-delete\" onclick=\"deleteMemory(${index})\" title=\"\u5220\u9664\">×<\/button>\n <div class=\"memory-text\">${escapeHtml(memory.text) || '\u7f8e\u597d\u7684\u56de\u5fc6 \ud83d\udc95'}<\/div>\n <div class=\"memory-date\">${memory.date}<\/div>\n <\/div>\n <\/div>\n `).join('');\n }\n\n \/\/ \u83b7\u53d6\u4fdd\u5b58\u7684\u56de\u5fc6\n function getMemories() {\n try {\n const data = localStorage.getItem(STORAGE_KEY);\n return data ? JSON.parse(data) : [];\n } catch (e) {\n return [];\n }\n }\n\n \/\/ \u4fdd\u5b58\u56de\u5fc6\n function saveMemory() {\n const text = document.getElementById('memoryText').value.trim();\n \n if (!currentImageData && !text) {\n alert('\u8bf7\u81f3\u5c11\u4e0a\u4f20\u4e00\u5f20\u7167\u7247\u6216\u5199\u4e0b\u795d\u798f\u8bed \ud83d\ude0a');\n return;\n }\n \n const memories = getMemories();\n memories.unshift({\n image: currentImageData,\n text: text,\n emoji: '\ud83d\udc9d',\n date: new Date().toLocaleString('zh-CN')\n });\n \n localStorage.setItem(STORAGE_KEY, JSON.stringify(memories));\n closeModal();\n loadMemories();\n }\n\n \/\/ \u5220\u9664\u56de\u5fc6\n function deleteMemory(index) {\n if (!confirm('\u786e\u5b9a\u8981\u5220\u9664\u8fd9\u6761\u56de\u5fc6\u5417\uff1f')) return;\n const memories = getMemories();\n memories.splice(index, 1);\n localStorage.setItem(STORAGE_KEY, JSON.stringify(memories));\n loadMemories();\n }\n\n \/\/ \u6587\u4ef6\u9009\u62e9\u5904\u7406\n function handleFileSelect(event) {\n const file = event.target.files[0];\n if (!file) return;\n \n if (!file.type.startsWith('image\/')) {\n alert('\u8bf7\u9009\u62e9\u56fe\u7247\u6587\u4ef6 \ud83d\udcf7');\n return;\n }\n \n if (file.size > 5 * 1024 * 1024) {\n alert('\u56fe\u7247\u5927\u5c0f\u4e0d\u80fd\u8d85\u8fc7 5MB');\n return;\n }\n \n const reader = new FileReader();\n reader.onload = function(e) {\n currentImageData = e.target.result;\n document.getElementById('uploadPreview').src = currentImageData;\n document.getElementById('uploadPreview').style.display = 'block';\n document.getElementById('uploadPlaceholder').style.display = 'none';\n document.getElementById('uploadArea').classList.add('has-image');\n };\n reader.readAsDataURL(file);\n }\n\n \/\/ \u6a21\u6001\u6846\u63a7\u5236\n function openModal() {\n document.getElementById('modalOverlay').classList.add('active');\n document.body.style.overflow = 'hidden';\n }\n\n function closeModal() {\n document.getElementById('modalOverlay').classList.remove('active');\n document.body.style.overflow = '';\n \/\/ \u91cd\u7f6e\u8868\u5355\n setTimeout(() => {\n currentImageData = null;\n document.getElementById('fileInput').value = '';\n document.getElementById('memoryText').value = '';\n document.getElementById('uploadPreview').style.display = 'none';\n document.getElementById('uploadPlaceholder').style.display = 'block';\n document.getElementById('uploadArea').classList.remove('has-image');\n }, 300);\n }\n\n function closeModalOnOverlay(event) {\n if (event.target === event.currentTarget) {\n closeModal();\n }\n }\n\n \/\/ ESC \u5173\u95ed\u6a21\u6001\u6846\n document.addEventListener('keydown', function(e) {\n if (e.key === 'Escape') closeModal();\n });\n\n \/\/ HTML \u8f6c\u4e49\n function escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n\n \/\/ ========== \u795d\u798f\u8bed ==========\n function addWish() {\n const input = document.getElementById('wishInput');\n const wish = input.value.trim();\n \n if (wish) {\n const display = document.getElementById('wishesDisplay');\n const tag = document.createElement('div');\n tag.className = 'wish-tag';\n tag.textContent = wish + ' \ud83d\udc95';\n display.appendChild(tag);\n input.value = '';\n tag.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }\n }\n\n document.getElementById('wishInput').addEventListener('keypress', function(e) {\n if (e.key === 'Enter') addWish();\n });\n\n \/\/ ========== \u521d\u59cb\u5316 ==========\n document.addEventListener('DOMContentLoaded', function() {\n loadMemories();\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u6bcd\u4eb2\u8282\u5feb\u4e50 – \u732e\u7ed9\u6700\u7231\u7684\u5988\u5988 \ud83c\udf38 \u6bcd\u4eb2\u8282\u5feb\u4e50 \ud83c\udf38 \u732e\u7ed9\u4e16\u754c\u4e0a\u6700\u4f1f\u5927\u7684\u5988\u5988 2025\u5e745\u670810\u65e5 […]<\/p>\n","protected":false},"author":1,"featured_media":1188,"comment_status":"open","ping_status":"open","sticky":false,"template":"wp-custom-template","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-1187","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-10"],"brizy_media":[],"_links":{"self":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts\/1187","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/comments?post=1187"}],"version-history":[{"count":2,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts\/1187\/revisions"}],"predecessor-version":[{"id":1283,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts\/1187\/revisions\/1283"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/media\/1188"}],"wp:attachment":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/media?parent=1187"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/categories?post=1187"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/tags?post=1187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1187,"date":"2026-05-10T01:40:00","date_gmt":"2026-05-09T17:40:00","guid":{"rendered":"https:\/\/www.365ycs.com\/?p=1187"},"modified":"2026-05-08T17:33:23","modified_gmt":"2026-05-08T09:33:23","slug":"1187","status":"publish","type":"post","link":"https:\/\/www.365ycs.com\/index.php\/2026\/05\/10\/1187\/","title":{"rendered":"\u6bcd\u4eb2\u8282\u5feb\u4e50 – \u732e\u7ed9\u6700\u7231\u7684\u5988\u5988"},"content":{"rendered":"\n\n\n\n\n \n \n \u6bcd\u4eb2\u8282\u5feb\u4e50 – \u732e\u7ed9\u6700\u7231\u7684\u5988\u5988<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;\n background: linear-gradient(135deg, #ffeef8 0%, #ffe0f0 50%, #ffd4e8 100%);\n min-height: 100vh;\n overflow-x: hidden;\n }\n\n \/* \u98d8\u843d\u7684\u82b1\u74e3\u52a8\u753b *\/\n .petal {\n position: fixed;\n top: -50px;\n font-size: 24px;\n animation: fall linear infinite;\n opacity: 0.8;\n pointer-events: none;\n z-index: 1000;\n }\n\n @keyframes fall {\n 0% {\n transform: translateY(0) rotate(0deg);\n opacity: 1;\n }\n 100% {\n transform: translateY(100vh) rotate(720deg);\n opacity: 0;\n }\n }\n\n \/* \u5934\u90e8\u533a\u57df *\/\n .header {\n text-align: center;\n padding: 60px 20px 40px;\n position: relative;\n }\n\n .header h1 {\n font-size: 3.5rem;\n color: #d63384;\n text-shadow: 2px 2px 4px rgba(214, 51, 132, 0.2);\n animation: fadeInDown 1.5s ease-out;\n margin-bottom: 10px;\n }\n\n .header .subtitle {\n font-size: 1.5rem;\n color: #e85d9a;\n animation: fadeInUp 1.5s ease-out 0.5s both;\n }\n\n .header .date {\n font-size: 1.2rem;\n color: #f06292;\n margin-top: 15px;\n animation: fadeIn 2s ease-out 1s both;\n }\n\n \/* \u4e3b\u5185\u5bb9\u533a\u57df *\/\n .main-content {\n max-width: 900px;\n margin: 0 auto;\n padding: 0 20px 40px;\n }\n\n \/* \u5361\u7247\u6837\u5f0f *\/\n .card {\n background: rgba(255, 255, 255, 0.9);\n border-radius: 20px;\n padding: 40px;\n margin-bottom: 30px;\n box-shadow: 0 10px 40px rgba(214, 51, 132, 0.15);\n animation: fadeInUp 1s ease-out;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n }\n\n .card:hover {\n transform: translateY(-5px);\n box-shadow: 0 15px 50px rgba(214, 51, 132, 0.25);\n }\n\n .card h2 {\n color: #d63384;\n font-size: 1.8rem;\n margin-bottom: 20px;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .card p {\n color: #555;\n line-height: 1.8;\n font-size: 1.1rem;\n }\n\n \/* \u5eb7\u4e43\u99a8\u88c5\u9970 *\/\n .carnation {\n font-size: 2rem;\n }\n\n \/* \u8bd7\u6b4c\u533a\u57df *\/\n .poem {\n text-align: center;\n font-style: italic;\n color: #c2185b;\n font-size: 1.2rem;\n line-height: 2.2;\n padding: 20px 0;\n }\n\n .poem .line {\n margin: 10px 0;\n }\n\n \/* \u611f\u6069\u6e05\u5355 *\/\n .gratitude-list {\n list-style: none;\n padding: 0;\n }\n\n .gratitude-list li {\n padding: 15px 20px;\n margin: 10px 0;\n background: linear-gradient(90deg, #fce4ec 0%, #f8bbd9 100%);\n border-radius: 12px;\n color: #880e4f;\n font-size: 1.1rem;\n display: flex;\n align-items: center;\n gap: 12px;\n transition: transform 0.2s ease;\n }\n\n .gratitude-list li:hover {\n transform: scale(1.02);\n }\n\n .gratitude-list li::before {\n content: \"\ud83d\udc9d\";\n font-size: 1.3rem;\n }\n\n \/* ===== \u6e29\u99a8\u56de\u5fc6\u6a21\u5757 - \u65b0\u7248 ===== *\/\n .memories-intro {\n color: #666;\n margin-bottom: 20px;\n font-size: 1rem;\n }\n\n .add-memory-btn {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 12px 30px;\n background: linear-gradient(135deg, #d63384 0%, #e91e63 100%);\n color: white;\n border: none;\n border-radius: 25px;\n font-size: 1rem;\n cursor: pointer;\n transition: all 0.3s ease;\n margin-bottom: 25px;\n font-family: inherit;\n }\n\n .add-memory-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 25px rgba(214, 51, 132, 0.4);\n }\n\n .memories-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n gap: 20px;\n }\n\n .memory-item {\n background: white;\n border-radius: 15px;\n overflow: hidden;\n box-shadow: 0 5px 20px rgba(0,0,0,0.08);\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n animation: fadeInUp 0.5s ease-out;\n }\n\n .memory-item:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 30px rgba(214, 51, 132, 0.2);\n }\n\n .memory-photo {\n width: 100%;\n height: 200px;\n object-fit: cover;\n display: block;\n }\n\n .memory-placeholder {\n width: 100%;\n height: 200px;\n background: linear-gradient(135deg, #f8bbd9 0%, #f48fb1 100%);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 4rem;\n }\n\n .memory-content {\n padding: 15px;\n }\n\n .memory-text {\n color: #555;\n font-size: 0.95rem;\n line-height: 1.6;\n word-break: break-word;\n }\n\n .memory-date {\n color: #999;\n font-size: 0.8rem;\n margin-top: 8px;\n }\n\n .memory-delete {\n float: right;\n background: none;\n border: none;\n color: #ccc;\n cursor: pointer;\n font-size: 1rem;\n padding: 0;\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n transition: all 0.2s;\n }\n\n .memory-delete:hover {\n color: #e91e63;\n background: #fce4ec;\n }\n\n \/* \u6a21\u6001\u6846 *\/\n .modal-overlay {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0,0,0,0.5);\n z-index: 2000;\n align-items: center;\n justify-content: center;\n backdrop-filter: blur(3px);\n }\n\n .modal-overlay.active {\n display: flex;\n }\n\n .modal {\n background: white;\n border-radius: 20px;\n padding: 30px;\n width: 90%;\n max-width: 450px;\n animation: popIn 0.3s ease-out;\n max-height: 90vh;\n overflow-y: auto;\n }\n\n .modal h3 {\n color: #d63384;\n margin-bottom: 20px;\n font-size: 1.3rem;\n }\n\n .modal-close {\n float: right;\n background: none;\n border: none;\n font-size: 1.5rem;\n color: #999;\n cursor: pointer;\n line-height: 1;\n }\n\n .modal-close:hover {\n color: #d63384;\n }\n\n .upload-area {\n border: 2px dashed #f48fb1;\n border-radius: 15px;\n padding: 30px;\n text-align: center;\n cursor: pointer;\n transition: all 0.3s;\n margin-bottom: 20px;\n background: #fff5f8;\n }\n\n .upload-area:hover {\n border-color: #d63384;\n background: #fce4ec;\n }\n\n .upload-area.has-image {\n border-style: solid;\n border-color: #d63384;\n padding: 10px;\n }\n\n .upload-preview {\n max-width: 100%;\n max-height: 200px;\n border-radius: 10px;\n }\n\n .upload-placeholder {\n color: #999;\n }\n\n .upload-placeholder .icon {\n font-size: 3rem;\n margin-bottom: 10px;\n }\n\n .modal-input {\n width: 100%;\n padding: 12px 15px;\n border: 2px solid #f48fb1;\n border-radius: 12px;\n font-size: 1rem;\n font-family: inherit;\n outline: none;\n resize: vertical;\n min-height: 80px;\n margin-bottom: 20px;\n }\n\n .modal-input:focus {\n border-color: #d63384;\n box-shadow: 0 0 10px rgba(214, 51, 132, 0.2);\n }\n\n .modal-btns {\n display: flex;\n gap: 10px;\n justify-content: flex-end;\n }\n\n .modal-btn {\n padding: 10px 25px;\n border-radius: 20px;\n border: none;\n font-size: 0.95rem;\n cursor: pointer;\n transition: all 0.3s;\n font-family: inherit;\n }\n\n .modal-btn-cancel {\n background: #f5f5f5;\n color: #666;\n }\n\n .modal-btn-cancel:hover {\n background: #e0e0e0;\n }\n\n .modal-btn-save {\n background: linear-gradient(135deg, #d63384 0%, #e91e63 100%);\n color: white;\n }\n\n .modal-btn-save:hover {\n transform: translateY(-2px);\n box-shadow: 0 5px 15px rgba(214, 51, 132, 0.4);\n }\n\n .modal-btn-save:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n }\n\n \/* \u7a7a\u72b6\u6001 *\/\n .memories-empty {\n text-align: center;\n padding: 40px;\n color: #999;\n }\n\n .memories-empty .icon {\n font-size: 4rem;\n margin-bottom: 15px;\n }\n\n \/* \u795d\u798f\u8bed\u8f93\u5165\u533a *\/\n .wish-section {\n text-align: center;\n padding: 30px 0;\n }\n\n .wish-input {\n width: 100%;\n max-width: 500px;\n padding: 15px 20px;\n border: 2px solid #f48fb1;\n border-radius: 30px;\n font-size: 1rem;\n outline: none;\n transition: box-shadow 0.3s ease;\n font-family: inherit;\n }\n\n .wish-input:focus {\n box-shadow: 0 0 15px rgba(244, 143, 177, 0.4);\n }\n\n .wish-btn {\n margin-top: 20px;\n padding: 15px 50px;\n background: linear-gradient(135deg, #d63384 0%, #e91e63 100%);\n color: white;\n border: none;\n border-radius: 30px;\n font-size: 1.1rem;\n cursor: pointer;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n font-family: inherit;\n }\n\n .wish-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 10px 30px rgba(214, 51, 132, 0.4);\n }\n\n \/* \u663e\u793a\u7684\u795d\u798f\u8bed *\/\n .wishes-display {\n margin-top: 30px;\n display: flex;\n flex-wrap: wrap;\n gap: 15px;\n justify-content: center;\n }\n\n .wish-tag {\n background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%);\n color: #880e4f;\n padding: 10px 20px;\n border-radius: 20px;\n font-size: 0.95rem;\n animation: popIn 0.5s ease-out;\n }\n\n \/* \u5e95\u90e8 *\/\n .footer {\n text-align: center;\n padding: 40px 20px;\n color: #d63384;\n font-size: 1.1rem;\n }\n\n .footer .heart {\n display: inline-block;\n animation: heartbeat 1.5s ease-in-out infinite;\n }\n\n \/* \u52a8\u753b\u5b9a\u4e49 *\/\n @keyframes fadeInDown {\n from {\n opacity: 0;\n transform: translateY(-30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n @keyframes popIn {\n 0% { transform: scale(0); opacity: 0; }\n 80% { transform: scale(1.1); }\n 100% { transform: scale(1); opacity: 1; }\n }\n\n @keyframes heartbeat {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.2); }\n }\n\n \/* \u54cd\u5e94\u5f0f\u8bbe\u8ba1 *\/\n @media (max-width: 768px) {\n .header h1 {\n font-size: 2.5rem;\n }\n .header .subtitle {\n font-size: 1.2rem;\n }\n .card {\n padding: 25px;\n }\n .card h2 {\n font-size: 1.5rem;\n }\n .memories-grid {\n grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n }\n }\n <\/style>\n<\/head>\n<body>\n \n <div id=\"petals-container\"><\/div>\n\n \n <header class=\"header\">\n <h1>\ud83c\udf38 \u6bcd\u4eb2\u8282\u5feb\u4e50 \ud83c\udf38<\/h1>\n <p class=\"subtitle\">\u732e\u7ed9\u4e16\u754c\u4e0a\u6700\u4f1f\u5927\u7684\u5988\u5988<\/p>\n <p class=\"date\">2025\u5e745\u670810\u65e5 \u00b7 \u661f\u671f\u65e5<\/p>\n <\/header>\n\n \n <main class=\"main-content\">\n \n <div class=\"card\">\n <h2><span class=\"carnation\">\ud83c\udf3a<\/span> \u732e\u7ed9\u6bcd\u4eb2\u7684\u8bd7<\/h2>\n <div class=\"poem\">\n <p class=\"line\">\u60a8\u7684\u53cc\u624b\uff0c\u7f16\u7ec7\u4e86\u6211\u7ae5\u5e74\u7684\u68a6<\/p>\n <p class=\"line\">\u60a8\u7684\u76ee\u5149\uff0c\u7167\u4eae\u6211\u524d\u884c\u7684\u8def<\/p>\n <p class=\"line\">\u60a8\u7684\u6000\u62b1\uff0c\u662f\u6211\u6c38\u8fdc\u7684\u6e2f\u6e7e<\/p>\n <p class=\"line\">\u60a8\u7684\u7231\uff0c\u5982\u6625\u98ce\u5316\u96e8\uff0c\u6da6\u7269\u65e0\u58f0<\/p>\n <br>\n <p class=\"line\">\u5c81\u6708\u67d3\u767d\u4e86\u60a8\u7684\u53d1\u4e1d<\/p>\n <p class=\"line\">\u65f6\u5149\u523b\u4e0b\u4e86\u60a8\u7684\u76b1\u7eb9<\/p>\n <p class=\"line\">\u4f46\u5728\u6211\u5fc3\u4e2d<\/p>\n <p class=\"line\">\u60a8\u6c38\u8fdc\u662f\u6700\u7f8e\u7684\u6a21\u6837<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"card\">\n <h2><span class=\"carnation\">\ud83c\udf37<\/span> \u611f\u6069\u6709\u60a8<\/h2>\n <ul class=\"gratitude-list\">\n <li>\u611f\u8c22\u60a8\u7ed9\u4e88\u6211\u751f\u547d\uff0c\u8ba9\u6211\u770b\u89c1\u8fd9\u4e16\u754c\u7684\u7f8e\u597d<\/li>\n <li>\u611f\u8c22\u60a8\u65e0\u6570\u4e2a\u65e5\u591c\u7684\u5b88\u62a4\u4e0e\u966a\u4f34<\/li>\n <li>\u611f\u8c22\u60a8\u5728\u6211\u8dcc\u5012\u65f6\u7ed9\u4e88\u7684\u9f13\u52b1\u4e0e\u62e5\u62b1<\/li>\n <li>\u611f\u8c22\u60a8\u7528\u667a\u6167\u6559\u4f1a\u6211\u505a\u4eba\u7684\u9053\u7406<\/li>\n <li>\u611f\u8c22\u60a8\u65e0\u79c1\u7684\u7231\uff0c\u4ece\u4e0d\u6c42\u56de\u62a5<\/li>\n <li>\u611f\u8c22\u60a8\u8ba9\u6211\u660e\u767d\uff0c\u7231\u662f\u4e16\u754c\u4e0a\u6700\u5f3a\u5927\u7684\u529b\u91cf<\/li>\n <\/ul>\n <\/div>\n\n \n <div class=\"card\">\n <h2><span class=\"carnation\">\ud83d\udcf8<\/span> \u6e29\u99a8\u56de\u5fc6<\/h2>\n <p class=\"memories-intro\">\u4e0a\u4f20\u7167\u7247\uff0c\u8bb0\u5f55\u4e0e\u5988\u5988\u7684\u7f8e\u597d\u77ac\u95f4\uff0c\u6dfb\u52a0\u795d\u798f\u8bed\u4fdd\u5b58\u8fd9\u4efd\u73cd\u8d35\u7684\u56de\u5fc6 \ud83d\udc95<\/p>\n <button class=\"add-memory-btn\" onclick=\"openModal()\">\n <span>\ud83d\udcf7<\/span> \u6dfb\u52a0\u7f8e\u597d\u56de\u5fc6\n <\/button>\n <div class=\"memories-grid\" id=\"memoriesGrid\">\n \n <\/div>\n <\/div>\n\n \n <div class=\"card\">\n <h2><span class=\"carnation\">\ud83d\udc8c<\/span> \u5199\u4e0b\u795d\u798f<\/h2>\n <div class=\"wish-section\">\n <input type=\"text\" class=\"wish-input\" id=\"wishInput\" placeholder=\"\u5199\u4e0b\u60a8\u5bf9\u5988\u5988\u7684\u795d\u798f...\" maxlength=\"100\">\n <br>\n <button class=\"wish-btn\" onclick=\"addWish()\">\u53d1\u9001\u795d\u798f \ud83d\udc95<\/button>\n <\/div>\n <div class=\"wishes-display\" id=\"wishesDisplay\">\n <div class=\"wish-tag\">\u5988\u5988\uff0c\u6211\u7231\u60a8\uff01\u2764\ufe0f<\/div>\n <div class=\"wish-tag\">\u613f\u60a8\u6c38\u8fdc\u5065\u5eb7\u7f8e\u4e3d \ud83c\udf39<\/div>\n <div class=\"wish-tag\">\u60a8\u662f\u4e16\u754c\u4e0a\u6700\u597d\u7684\u5988\u5988 \ud83c\udf1f<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"card\">\n <h2><span class=\"carnation\">\ud83d\udcd6<\/span> \u6bcd\u4eb2\u8282\u7684\u7531\u6765<\/h2>\n <p>\n \u6bcd\u4eb2\u8282\u8d77\u6e90\u4e8e\u7f8e\u56fd\uff0c\u7531\u5b89\u5a1c\u00b7\u8d3e\u7ef4\u65af\u53d1\u8d77\uff0c\u4ee5\u7eaa\u5ff5\u5979\u5df2\u6545\u7684\u6bcd\u4eb2\u30021914\u5e74\uff0c\u7f8e\u56fd\u56fd\u4f1a\u6b63\u5f0f\u5c06\u6bcf\u5e745\u6708\u7684\u7b2c\u4e8c\u4e2a\u661f\u671f\u65e5\u5b9a\u4e3a\u6bcd\u4eb2\u8282\u3002\n \u5eb7\u4e43\u99a8\u88ab\u89c6\u4e3a\u732e\u7ed9\u6bcd\u4eb2\u7684\u82b1\uff0c\u8c61\u5f81\u7740\u6bcd\u7231\u3001\u6e29\u99a8\u4e0e\u611f\u6069\u3002\u5728\u4e2d\u56fd\uff0c\u4eba\u4eec\u4e5f\u4f1a\u8d60\u9001\u5eb7\u4e43\u99a8\u6216\u8431\u8349\u82b1\uff08\u5fd8\u5fe7\u8349\uff09\u6765\u8868\u8fbe\u5bf9\u6bcd\u4eb2\u7684\u7231\u4e0e\u795d\u798f\u3002\n <\/p>\n <p style=\"margin-top: 15px;\">\n 2025\u5e74\u7684\u6bcd\u4eb2\u8282\u662f5\u670810\u65e5\uff0c\u8ba9\u6211\u4eec\u4e00\u8d77\u5411\u5168\u5929\u4e0b\u7684\u6bcd\u4eb2\u9053\u4e00\u58f0\uff1a\u5988\u5988\uff0c\u60a8\u8f9b\u82e6\u4e86\uff01\n <\/p>\n <\/div>\n <\/main>\n\n \n <footer class=\"footer\">\n <p>\u613f\u5929\u4e0b\u6240\u6709\u7684\u6bcd\u4eb2 <span class=\"heart\">\u2764\ufe0f<\/span> \u5e78\u798f\u5b89\u5eb7<\/p>\n <p style=\"margin-top: 10px; font-size: 0.9rem; opacity: 0.8;\">Made with love for Mother’s Day 2025<\/p>\n <\/footer>\n\n \n <div class=\"modal-overlay\" id=\"modalOverlay\" onclick=\"closeModalOnOverlay(event)\">\n <div class=\"modal\" onclick=\"event.stopPropagation()\">\n <button class=\"modal-close\" onclick=\"closeModal()\">×<\/button>\n <h3>\ud83c\udf38 \u6dfb\u52a0\u7f8e\u597d\u56de\u5fc6<\/h3>\n \n <div class=\"upload-area\" id=\"uploadArea\" onclick=\"document.getElementById('fileInput').click()\">\n <div class=\"upload-placeholder\" id=\"uploadPlaceholder\">\n <div class=\"icon\">\ud83d\udcf7<\/div>\n <div>\u70b9\u51fb\u4e0a\u4f20\u7167\u7247<\/div>\n <div style=\"font-size: 0.85rem; margin-top: 5px;\">\u652f\u6301 JPG\u3001PNG \u683c\u5f0f<\/div>\n <\/div>\n <img class=\"upload-preview\" id=\"uploadPreview\" style=\"display: none;\">\n <\/div>\n <input type=\"file\" id=\"fileInput\" accept=\"image\/*\" style=\"display: none;\" onchange=\"handleFileSelect(event)\">\n \n <textarea class=\"modal-input\" id=\"memoryText\" placeholder=\"\u5199\u4e0b\u8fd9\u6bb5\u56de\u5fc6\u7684\u795d\u798f\u8bed\u6216\u5fc3\u60c5...\uff08\u9009\u586b\uff09\"><\/textarea>\n \n <div class=\"modal-btns\">\n <button class=\"modal-btn modal-btn-cancel\" onclick=\"closeModal()\">\u53d6\u6d88<\/button>\n <button class=\"modal-btn modal-btn-save\" id=\"saveBtn\" onclick=\"saveMemory()\">\u4fdd\u5b58\u56de\u5fc6<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ ========== \u98d8\u843d\u82b1\u74e3 ==========\n function createPetal() {\n const petal = document.createElement('div');\n petal.className = 'petal';\n petal.innerHTML = ['\ud83c\udf38', '\ud83c\udf3a', '\ud83c\udf37', '\ud83d\udcae', '\ud83c\udff5\ufe0f'][Math.floor(Math.random() * 5)];\n petal.style.left = Math.random() * 100 + 'vw';\n petal.style.animationDuration = (Math.random() * 5 + 5) + 's';\n petal.style.animationDelay = Math.random() * 5 + 's';\n petal.style.fontSize = (Math.random() * 15 + 15) + 'px';\n document.getElementById('petals-container').appendChild(petal);\n setTimeout(() => petal.remove(), 10000);\n }\n setInterval(createPetal, 800);\n for (let i = 0; i < 10; i++) {\n setTimeout(createPetal, i * 300);\n }\n\n \/\/ ========== \u6e29\u99a8\u56de\u5fc6\u6a21\u5757 ==========\n const STORAGE_KEY = 'mothers_day_memories';\n let currentImageData = null;\n\n \/\/ \u52a0\u8f7d\u4fdd\u5b58\u7684\u56de\u5fc6\n function loadMemories() {\n const grid = document.getElementById('memoriesGrid');\n const memories = getMemories();\n \n if (memories.length === 0) {\n grid.innerHTML = `\n <div class=\"memories-empty\" style=\"grid-column: 1 \/ -1;\">\n <div class=\"icon\">\ud83d\udcf8<\/div>\n <div>\u8fd8\u6ca1\u6709\u56de\u5fc6\u54e6<\/div>\n <div style=\"font-size: 0.9rem; margin-top: 5px;\">\u70b9\u51fb\u4e0a\u65b9\u6309\u94ae\u6dfb\u52a0\u7b2c\u4e00\u5f20\u4e0e\u5988\u5988\u7684\u5408\u5f71\u5427 \ud83d\udc95<\/div>\n <\/div>\n `;\n return;\n }\n \n grid.innerHTML = memories.map((memory, index) => `\n <div class=\"memory-item\">\n ${memory.image \n ? `<img decoding=\"async\" src=\"${memory.image}\" class=\"memory-photo\" alt=\"\u56de\u5fc6\u7167\u7247\">`\n : `<div class=\"memory-placeholder\">${memory.emoji || '\ud83d\udc9d'}<\/div>`\n }\n <div class=\"memory-content\">\n <button class=\"memory-delete\" onclick=\"deleteMemory(${index})\" title=\"\u5220\u9664\">×<\/button>\n <div class=\"memory-text\">${escapeHtml(memory.text) || '\u7f8e\u597d\u7684\u56de\u5fc6 \ud83d\udc95'}<\/div>\n <div class=\"memory-date\">${memory.date}<\/div>\n <\/div>\n <\/div>\n `).join('');\n }\n\n \/\/ \u83b7\u53d6\u4fdd\u5b58\u7684\u56de\u5fc6\n function getMemories() {\n try {\n const data = localStorage.getItem(STORAGE_KEY);\n return data ? JSON.parse(data) : [];\n } catch (e) {\n return [];\n }\n }\n\n \/\/ \u4fdd\u5b58\u56de\u5fc6\n function saveMemory() {\n const text = document.getElementById('memoryText').value.trim();\n \n if (!currentImageData && !text) {\n alert('\u8bf7\u81f3\u5c11\u4e0a\u4f20\u4e00\u5f20\u7167\u7247\u6216\u5199\u4e0b\u795d\u798f\u8bed \ud83d\ude0a');\n return;\n }\n \n const memories = getMemories();\n memories.unshift({\n image: currentImageData,\n text: text,\n emoji: '\ud83d\udc9d',\n date: new Date().toLocaleString('zh-CN')\n });\n \n localStorage.setItem(STORAGE_KEY, JSON.stringify(memories));\n closeModal();\n loadMemories();\n }\n\n \/\/ \u5220\u9664\u56de\u5fc6\n function deleteMemory(index) {\n if (!confirm('\u786e\u5b9a\u8981\u5220\u9664\u8fd9\u6761\u56de\u5fc6\u5417\uff1f')) return;\n const memories = getMemories();\n memories.splice(index, 1);\n localStorage.setItem(STORAGE_KEY, JSON.stringify(memories));\n loadMemories();\n }\n\n \/\/ \u6587\u4ef6\u9009\u62e9\u5904\u7406\n function handleFileSelect(event) {\n const file = event.target.files[0];\n if (!file) return;\n \n if (!file.type.startsWith('image\/')) {\n alert('\u8bf7\u9009\u62e9\u56fe\u7247\u6587\u4ef6 \ud83d\udcf7');\n return;\n }\n \n if (file.size > 5 * 1024 * 1024) {\n alert('\u56fe\u7247\u5927\u5c0f\u4e0d\u80fd\u8d85\u8fc7 5MB');\n return;\n }\n \n const reader = new FileReader();\n reader.onload = function(e) {\n currentImageData = e.target.result;\n document.getElementById('uploadPreview').src = currentImageData;\n document.getElementById('uploadPreview').style.display = 'block';\n document.getElementById('uploadPlaceholder').style.display = 'none';\n document.getElementById('uploadArea').classList.add('has-image');\n };\n reader.readAsDataURL(file);\n }\n\n \/\/ \u6a21\u6001\u6846\u63a7\u5236\n function openModal() {\n document.getElementById('modalOverlay').classList.add('active');\n document.body.style.overflow = 'hidden';\n }\n\n function closeModal() {\n document.getElementById('modalOverlay').classList.remove('active');\n document.body.style.overflow = '';\n \/\/ \u91cd\u7f6e\u8868\u5355\n setTimeout(() => {\n currentImageData = null;\n document.getElementById('fileInput').value = '';\n document.getElementById('memoryText').value = '';\n document.getElementById('uploadPreview').style.display = 'none';\n document.getElementById('uploadPlaceholder').style.display = 'block';\n document.getElementById('uploadArea').classList.remove('has-image');\n }, 300);\n }\n\n function closeModalOnOverlay(event) {\n if (event.target === event.currentTarget) {\n closeModal();\n }\n }\n\n \/\/ ESC \u5173\u95ed\u6a21\u6001\u6846\n document.addEventListener('keydown', function(e) {\n if (e.key === 'Escape') closeModal();\n });\n\n \/\/ HTML \u8f6c\u4e49\n function escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n\n \/\/ ========== \u795d\u798f\u8bed ==========\n function addWish() {\n const input = document.getElementById('wishInput');\n const wish = input.value.trim();\n \n if (wish) {\n const display = document.getElementById('wishesDisplay');\n const tag = document.createElement('div');\n tag.className = 'wish-tag';\n tag.textContent = wish + ' \ud83d\udc95';\n display.appendChild(tag);\n input.value = '';\n tag.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }\n }\n\n document.getElementById('wishInput').addEventListener('keypress', function(e) {\n if (e.key === 'Enter') addWish();\n });\n\n \/\/ ========== \u521d\u59cb\u5316 ==========\n document.addEventListener('DOMContentLoaded', function() {\n loadMemories();\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u6bcd\u4eb2\u8282\u5feb\u4e50 – \u732e\u7ed9\u6700\u7231\u7684\u5988\u5988 \ud83c\udf38 \u6bcd\u4eb2\u8282\u5feb\u4e50 \ud83c\udf38 \u732e\u7ed9\u4e16\u754c\u4e0a\u6700\u4f1f\u5927\u7684\u5988\u5988 2025\u5e745\u670810\u65e5 […]<\/p>\n","protected":false},"author":1,"featured_media":1188,"comment_status":"open","ping_status":"open","sticky":false,"template":"wp-custom-template","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-1187","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-10"],"brizy_media":[],"_links":{"self":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts\/1187","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/comments?post=1187"}],"version-history":[{"count":2,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts\/1187\/revisions"}],"predecessor-version":[{"id":1283,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts\/1187\/revisions\/1283"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/media\/1188"}],"wp:attachment":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/media?parent=1187"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/categories?post=1187"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/tags?post=1187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}