{"id":19,"date":"2026-03-25T03:06:30","date_gmt":"2026-03-24T19:06:30","guid":{"rendered":"https:\/\/8.155.57.214\/?page_id=19"},"modified":"2026-03-25T04:06:13","modified_gmt":"2026-03-24T20:06:13","slug":"home","status":"publish","type":"page","link":"https:\/\/www.strawmist.fun\/","title":{"rendered":"Home"},"content":{"rendered":"\n<div class=\"wp-block-cover alignfull is-light hestia-clear-top-padding\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-white-background-color has-background-dim-100 has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<div id=\"love-timer-container\" style=\"\n    background: linear-gradient(135deg, #fff5f7 0%, #ffe4e8 100%);\n    padding: 30px 20px;\n    border: 2px solid #ffb6c1;\n    border-radius: 20px;\n    text-align: center;\n    font-family: 'Microsoft YaHei', sans-serif;\n    box-shadow: 0 4px 15px rgba(255, 182, 193, 0.4);\n    max-width: 400px;\n    margin: 20px auto;\n\">\n    <div style=\"font-size: 30px; margin-bottom: 10px;\">\u2764\ufe0f<\/div>\n    \n    <h3 style=\"margin: 0 0 15px 0; color: #d63384; font-size: 20px; letter-spacing: 1px;\">\u8fd9\u662f\u6211\u4eec\u76f8\u7231\u7684\u7b2c<\/h3>\n    \n    <div id=\"love-timer\" style=\"\n        font-size: 22px; \n        font-weight: bold; \n        color: #ff4d6d; \n        text-shadow: 1px 1px 2px rgba(0,0,0,0.05);\n        background: white;\n        padding: 15px;\n        border-radius: 50px;\n        display: inline-block;\n        min-width: 80%;\n    \">\n        \u6b63\u5728\u8ba1\u5fc3\u4e2d&#8230;\n    <\/div>\n    \n    <p style=\"font-size: 13px; color: #999; margin-top: 15px;\">\u8d77\u59cb\u65e5\uff1a2026\u5e743\u670816\u65e50\u70b916\u5206<\/p>\n<\/div>\n\n<script>\nfunction updateLoveTimer() {\n    \/\/ \u8bbe\u7f6e\u8d77\u59cb\u65e5\u671f (2026, 2\u4ee3\u88683\u6708, 16, 0\u70b9, 16\u5206)\n    const startDate = new Date(2026, 2, 16, 0, 16, 0);\n    const now = new Date();\n    const diff = now - startDate;\n\n    if (diff < 0) {\n        document.getElementById('love-timer').innerHTML = \"\u671f\u5f85\u90a3\u4e00\u523b\u7684\u5230\u6765 \u2728\";\n        return;\n    }\n\n    const days = Math.floor(diff \/ (1000 * 60 * 60 * 24));\n    const hours = Math.floor((diff \/ (1000 * 60 * 60)) % 24);\n    const minutes = Math.floor((diff \/ (1000 * 60)) % 60);\n    const seconds = Math.floor((diff \/ 1000) % 60);\n\n    document.getElementById('love-timer').innerHTML = \n        days + \" <span style='font-size:14px; color:#d63384;'>\u5929<\/span> \" + \n        hours + \" <span style='font-size:14px; color:#d63384;'>\u65f6<\/span> \" + \n        minutes + \" <span style='font-size:14px; color:#d63384;'>\u5206<\/span> \" + \n        seconds + \" <span style='font-size:14px; color:#d63384;'>\u79d2<\/span>\";\n}\n\nsetInterval(updateLoveTimer, 1000);\nupdateLoveTimer();\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center has-text-color\" style=\"color:#3c4858\"><\/h2>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"love-message-container\" style=\"\n    background: #fff;\n    padding: 25px;\n    border-radius: 20px;\n    border: 1px solid #ffe4e8;\n    box-shadow: 0 10px 25px rgba(255, 182, 193, 0.2);\n    max-width: 450px;\n    margin: 20px auto;\n    font-family: 'Microsoft YaHei', sans-serif;\n\">\n    <h2 class=\"section-title\" style=\"\n        color: #d63384;\n        font-size: 18px;\n        text-align: center;\n        margin-bottom: 20px;\n        border-bottom: 2px dashed #ffb6c1;\n        padding-bottom: 10px;\n    \">\ud83d\udc8c \u751f\u6d3b\u5373\u6559\u80b2\uff0c\u5f3a\u8c03\u751f\u6d3b\u672c\u8eab\u7684\u6559\u80b2\u610f\u4e49<\/h2>\n\n    <div class=\"message-board\">\n        <div style=\"display: flex; gap: 10px; margin-bottom: 15px;\">\n            <input type=\"text\" id=\"message-input\" placeholder=\"\u8f93\u5165\u60f3\u5bf9TA\u8bf4\u7684\u8bdd...\" style=\"\n                flex: 1;\n                padding: 10px 15px;\n                border: 2px solid #ffe4e8;\n                border-radius: 25px;\n                outline: none;\n                transition: border-color 0.3s;\n            \">\n            <button id=\"send-btn\" style=\"\n                background: #ff4d6d;\n                color: white;\n                border: none;\n                padding: 8px 20px;\n                border-radius: 25px;\n                cursor: pointer;\n                transition: background 0.3s;\n            \">\u53d1\u9001<\/button>\n        <\/div>\n\n        <ul id=\"message-list\" style=\"\n            list-style: none;\n            padding: 0;\n            margin: 0;\n            max-height: 200px;\n            overflow-y: auto;\n        \">\n            <li class=\"message-item\" style=\"\n                background: #fff5f7;\n                padding: 10px 15px;\n                border-radius: 15px;\n                margin-bottom: 8px;\n                color: #8a4a5e;\n                font-size: 14px;\n                border-left: 4px solid #ffb6c1;\n            \">\u751f\u6d3b\u5373\u6559\u80b2\uff1b\u793e\u4f1a\u5373\u5b66\u6821\uff1b\u6559\u5b66\u505a\u5408\u4e00\ud83c\udf39<\/li>\n        <\/ul>\n    <\/div>\n<\/div>\n\n<script>\n(function() {\n    const input = document.getElementById('message-input');\n    const btn = document.getElementById('send-btn');\n    const list = document.getElementById('message-list');\n\n    \/\/ \u60ac\u505c\u4ea4\u4e92\u6548\u679c\n    input.onfocus = () => input.style.borderColor = '#ffb6c1';\n    input.onblur = () => input.style.borderColor = '#ffe4e8';\n    btn.onmouseover = () => btn.style.background = '#d63384';\n    btn.onmouseout = () => btn.style.background = '#ff4d6d';\n\n    \/\/ \u53d1\u9001\u903b\u8f91\n    function sendMessage() {\n        const text = input.value.trim();\n        if (text === \"\") return;\n\n        const li = document.createElement('li');\n        li.className = 'message-item';\n        li.style.cssText = `\n            background: #fff5f7;\n            padding: 10px 15px;\n            border-radius: 15px;\n            margin-bottom: 8px;\n            color: #8a4a5e;\n            font-size: 14px;\n            border-left: 4px solid #ffb6c1;\n            animation: fadeIn 0.4s ease;\n        `;\n        li.textContent = text + \" \u2728\";\n        \n        \/\/ \u63d2\u5165\u5230\u6700\u524d\u9762\n        list.insertBefore(li, list.firstChild);\n        input.value = \"\";\n        \n        \/\/ \u81ea\u52a8\u6eda\u52a8\u5230\u9876\u90e8\n        list.scrollTop = 0;\n    }\n\n    btn.onclick = sendMessage;\n\n    \/\/ \u56de\u8f66\u53d1\u9001\n    input.onkeypress = (e) => {\n        if (e.key === 'Enter') sendMessage();\n    };\n})();\n<\/script>\n\n<style>\n@keyframes fadeIn {\n    from { opacity: 0; transform: translateY(-10px); }\n    to { opacity: 1; transform: translateY(0); }\n}\n\/* \u81ea\u5b9a\u4e49\u6eda\u52a8\u6761\u6837\u5f0f *\/\n#message-list::-webkit-scrollbar { width: 4px; }\n#message-list::-webkit-scrollbar-thumb { background: #ffb6c1; border-radius: 10px; }\n<\/style>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-columns alignwide container is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column col-md-6 col-md-offset1 is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<div id=\"music-pendant\" style=\"\n    position: fixed;\n    bottom: 30px;\n    right: 20px;\n    z-index: 9999;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 50px;\n    height: 50px;\n    background: rgba(255, 255, 255, 0.9);\n    border: 2px solid #ffb6c1;\n    border-radius: 50%;\n    box-shadow: 0 4px 15px rgba(255, 182, 193, 0.6);\n    transition: all 0.3s ease;\n\">\n    <div id=\"music-note\" style=\"font-size: 24px; color: #ff4d6d; transition: all 0.5s;\">\ud83c\udfb5<\/div>\n    \n    <div id=\"music-tooltip\" style=\"\n        position: absolute;\n        right: 60px;\n        background: #ff4d6d;\n        color: white;\n        padding: 5px 12px;\n        border-radius: 15px;\n        font-size: 12px;\n        white-space: nowrap;\n        opacity: 0;\n        visibility: hidden;\n        transition: 0.3s;\n    \">\u70b9\u6211\u64ad\u653e\u6d6a\u6f2b\u97f3\u4e50<\/div>\n\n    <audio id=\"global-bg-music\" loop>\n        <source src=\"https:\/\/www.w3schools.com\/html\/horse.mp3\" type=\"audio\/mpeg\">\n        <\/audio>\n<\/div>\n\n<style>\n\/* \u65cb\u8f6c\u52a8\u753b\uff1a\u97f3\u4e50\u64ad\u653e\u65f6\u89e6\u53d1 *\/\n@keyframes musicRotate {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n}\n\n\/* \u547c\u5438\u706f\u6548\u679c\uff1a\u672a\u64ad\u653e\u65f6\u63d0\u793a *\/\n@keyframes breath {\n    0% { box-shadow: 0 0 5px rgba(255, 182, 193, 0.4); }\n    50% { box-shadow: 0 0 15px rgba(255, 77, 109, 0.7); }\n    100% { box-shadow: 0 0 5px rgba(255, 182, 193, 0.4); }\n}\n\n.music-playing {\n    animation: musicRotate 3s linear infinite !important;\n}\n\n.music-idle {\n    animation: breath 2s infinite ease-in-out;\n}\n\n#music-pendant:hover #music-tooltip {\n    opacity: 1;\n    visibility: visible;\n}\n<\/style>\n\n<script>\n(function() {\n    const pendant = document.getElementById('music-pendant');\n    const audio = document.getElementById('global-bg-music');\n    const note = document.getElementById('music-note');\n    const tooltip = document.getElementById('music-tooltip');\n    \n    pendant.classList.add('music-idle');\n\n    pendant.onclick = function() {\n        if (audio.paused) {\n            audio.play();\n            note.innerHTML = \"\ud83c\udfb6\";\n            note.classList.add('music-playing');\n            pendant.classList.remove('music-idle');\n            tooltip.innerText = \"\u6b63\u5728\u4eab\u53d7\u97f3\u4e50...\";\n            \/\/ \u89e3\u51b3\u67d0\u4e9b\u6d4f\u89c8\u5668\u81ea\u52a8\u64ad\u653e\u9650\u5236\uff0c\u901a\u8fc7\u4ea4\u4e92\u89e6\u53d1\n        } else {\n            audio.pause();\n            note.innerHTML = \"\ud83c\udfb5\";\n            note.classList.remove('music-playing');\n            pendant.classList.add('music-idle');\n            tooltip.innerText = \"\u97f3\u4e50\u5df2\u6682\u505c\";\n        }\n    };\n\n    \/\/ \u9488\u5bf9\u79fb\u52a8\u7aef\u7684\u7279\u6b8a\u5904\u7406\n    document.addEventListener(\"touchstart\", function() {\n        \/\/ \u5982\u679c\u4f60\u5e0c\u671b\u7528\u6237\u70b9\u9875\u9762\u4efb\u4f55\u5730\u65b9\u5c31\u5f00\u59cb\uff0c\u53ef\u4ee5\u53d6\u6d88\u6ce8\u91ca\n        \/\/ if(audio.paused) audio.play();\n    }, { once: true });\n})();\n<\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ud83c\udfb5 \u70b9\u6211\u64ad\u653e\u6d6a\u6f2b\u97f3\u4e50<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-19","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.strawmist.fun\/index.php?rest_route=\/wp\/v2\/pages\/19","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.strawmist.fun\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.strawmist.fun\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.strawmist.fun\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.strawmist.fun\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=19"}],"version-history":[{"count":11,"href":"https:\/\/www.strawmist.fun\/index.php?rest_route=\/wp\/v2\/pages\/19\/revisions"}],"predecessor-version":[{"id":75,"href":"https:\/\/www.strawmist.fun\/index.php?rest_route=\/wp\/v2\/pages\/19\/revisions\/75"}],"wp:attachment":[{"href":"https:\/\/www.strawmist.fun\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=19"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}