MindSpring \u5f71\u97f3\u9023\u7d50<\/title>\n\n <link href=\"https:\/\/fonts.googleapis.com\" rel=\"preconnect\" \/>\n <link crossorigin=\"\" href=\"https:\/\/fonts.gstatic.com\" rel=\"preconnect\" \/>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;700;900&display=swap\" rel=\"stylesheet\" \/>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap\"\n rel=\"stylesheet\" \/>\n\n <script src=\"https:\/\/cdn.tailwindcss.com?plugins=forms,container-queries\"><\/script>\n <script id=\"tailwind-config\">\n tailwind.config = {\n darkMode: \"class\",\n theme: {\n extend: {\n colors: {\n primary: \"rgb(98,178,178)\",\n \"primary-weak\": \"rgb(204,229,229)\",\n\n \"background-light\": \"#f6f7f8\",\n \"background-dark\": \"#101922\",\n \"surface-light\": \"#ffffff\",\n \"surface-dark\": \"#1a2632\",\n \"text-main\": \"#111418\",\n \"text-secondary\": \"#617589\",\n },\n fontFamily: {\n display: [\"Inter\", \"sans-serif\"],\n },\n borderRadius: {\n DEFAULT: \"0.25rem\",\n lg: \"0.5rem\",\n xl: \"0.75rem\",\n full: \"9999px\",\n },\n },\n },\n };\n <\/script>\n\n <style>\n body {\n font-family: \"Inter\", \"Noto Sans\", sans-serif;\n }\n\n .material-symbols-outlined {\n font-variation-settings: \"FILL\" 0, \"wght\" 420, \"GRAD\" 0, \"opsz\" 24;\n }\n\n .icon-filled {\n font-variation-settings: \"FILL\" 1, \"wght\" 520, \"GRAD\" 0, \"opsz\" 24;\n }\n <\/style>\n<\/head>\n\n<body\n class=\"relative flex min-h-screen w-full flex-col bg-background-light dark:bg-background-dark overflow-x-hidden font-display\">\n <div class=\"flex-1 px-4 md:px-10 lg:px-40 py-8 flex justify-center\">\n <div class=\"flex flex-col max-w-[960px] w-full gap-6\">\n \n <div class=\"flex flex-col gap-4 pt-4\">\n <div class=\"flex flex-col gap-2\">\n <h1 class=\"text-text-main dark:text-white text-3xl md:text-4xl font-black leading-tight tracking-[-0.033em]\">\n MindSpring \u7b2c\u4e00\u518a \u5f71\u97f3\u8cc7\u6e90\u5eab\n <\/h1>\n <p class=\"text-text-secondary dark:text-gray-400 text-s md:text-base font-normal leading-normal max-w-[700px]\">\n \u4f9d\u7d19\u672c\u9801\u78bc\u8207\u55ae\u5143\u5f59\u6574\u6559\u5b78\u5f71\u7247\u3001\u97f3\u6a94\u7df4\u7fd2\u8207\u4e92\u52d5\u904a\u6232\u3002\n <br \/>\n \u53ef\u7528\u4e0a\u65b9\u6309\u9215\u7be9\u9078\u985e\u578b\uff0c\u4e26\u5c55\u958b\u67e5\u770b\u6bcf\u500b\u55ae\u5143\u7684\u8cc7\u6e90\u6e05\u55ae\u3002\n <\/p>\n\n \n <div class=\"mt-2 flex flex-wrap gap-2 items-center\">\n <div\n class=\"inline-flex items-center gap-2 rounded-full bg-surface-light dark:bg-surface-dark border border-gray-100 dark:border-[#2a3642] px-3 py-1.5 text-sm\">\n <span class=\"material-symbols-outlined text-[18px] text-text-secondary dark:text-gray-400\">database<\/span>\n <span class=\"text-text-secondary dark:text-gray-400\">\u8cc7\u6e90\u7e3d\u6578\uff1a<\/span>\n <span id=\"metaTotal\" class=\"font-semibold text-text-main dark:text-white\">–<\/span>\n <\/div>\n\n <div\n class=\"inline-flex items-center gap-2 rounded-full bg-surface-light dark:bg-surface-dark border border-gray-100 dark:border-[#2a3642] px-3 py-1.5 text-sm\">\n <span class=\"material-symbols-outlined text-[18px] text-text-secondary dark:text-gray-400\">view_list<\/span>\n <span class=\"text-text-secondary dark:text-gray-400\">\u55ae\u5143\u6578\uff1a<\/span>\n <span id=\"metaUnits\" class=\"font-semibold text-text-main dark:text-white\">–<\/span>\n <\/div>\n\n \n <div id=\"metaFilter\"\n class=\"hidden w-full md:w-auto flex md:inline-flex justify-center md:justify-start mt-4 md:mt-0\">\n <div\n class=\"inline-flex items-center gap-2 rounded-full bg-primary-weak dark:bg-white\/5 ring-1 ring-inset ring-black\/5 dark:ring-white\/10 px-3 py-1.5 text-sm\">\n <span class=\"material-symbols-outlined text-[18px]\" style=\"color: rgb(38, 98, 98)\">filter_alt<\/span>\n <span class=\"font-semibold\" style=\"color: rgb(38, 98, 98)\">\u76ee\u524d\u7be9\u9078\uff1a\u5168\u90e8\u8cc7\u6e90<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"flex gap-3 pb-2 flex-wrap items-center\">\n <button data-filter=\"all\"\n class=\"filter-btn group flex h-9 shrink-0 items-center justify-center gap-x-2 rounded-full bg-primary pl-3 pr-4 shadow-sm transition-all hover:shadow-md\">\n <span class=\"material-symbols-outlined text-white text-[20px]\">grid_view<\/span>\n <p class=\"text-white text-sm font-medium\">\u5168\u90e8\u8cc7\u6e90<\/p>\n <\/button>\n\n <button data-filter=\"video\"\n class=\"filter-btn group flex h-9 shrink-0 items-center justify-center gap-x-2 rounded-full bg-surface-light dark:bg-surface-dark border border-transparent hover:border-gray-200 dark:hover:border-gray-700 pl-3 pr-4 transition-all hover:bg-gray-50 dark:hover:bg-[#22303c]\">\n <span class=\"material-symbols-outlined text-text-main dark:text-white text-[20px]\">movie<\/span>\n <p class=\"text-text-main dark:text-white text-sm font-medium\">\n \u6559\u5b78\u5f71\u7247\n <\/p>\n <\/button>\n\n <button data-filter=\"audio\"\n class=\"filter-btn group flex h-9 shrink-0 items-center justify-center gap-x-2 rounded-full bg-surface-light dark:bg-surface-dark border border-transparent hover:border-gray-200 dark:hover:border-gray-700 pl-3 pr-4 transition-all hover:bg-gray-50 dark:hover:bg-[#22303c]\">\n <span class=\"material-symbols-outlined text-text-main dark:text-white text-[20px]\">headphones<\/span>\n <p class=\"text-text-main dark:text-white text-sm font-medium\">\n \u7df4\u7fd2\u97f3\u6a94\n <\/p>\n <\/button>\n\n <button data-filter=\"game\"\n class=\"filter-btn group flex h-9 shrink-0 items-center justify-center gap-x-2 rounded-full bg-surface-light dark:bg-surface-dark border border-transparent hover:border-gray-200 dark:hover:border-gray-700 pl-3 pr-4 transition-all hover:bg-gray-50 dark:hover:bg-[#22303c]\">\n <span class=\"material-symbols-outlined text-text-main dark:text-white text-[20px]\">sports_esports<\/span>\n <p class=\"text-text-main dark:text-white text-sm font-medium\">\n \u4e92\u52d5\u904a\u6232\n <\/p>\n <\/button>\n\n \n <\/div>\n\n \n <div class=\"flex flex-col gap-5\" id=\"unitList\"><\/div>\n\n \n <div id=\"emptyState\"\n class=\"hidden rounded-xl bg-surface-light dark:bg-surface-dark border border-gray-100 dark:border-[#2a3642] p-6\">\n <div class=\"flex items-start gap-3\">\n <div class=\"size-10 rounded-full bg-primary\/15 flex items-center justify-center\"\n style=\"color: rgb(38, 98, 98)\">\n <span class=\"material-symbols-outlined\">search_off<\/span>\n <\/div>\n <div class=\"flex-1\">\n <p class=\"text-text-main dark:text-white font-bold\">\n \u6c92\u6709\u7b26\u5408\u689d\u4ef6\u7684\u8cc7\u6e90\n <\/p>\n <p class=\"text-text-secondary dark:text-gray-400 text-sm mt-1\">\n \u8acb\u5207\u63db\u7be9\u9078\u689d\u4ef6\uff08\u4f8b\u5982\u300c\u5168\u90e8\u8cc7\u6e90\u300d\uff09\u6216\u78ba\u8a8d\u8cc7\u6599\u662f\u5426\u5b8c\u6574\u3002\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"mt-4 flex items-center justify-center py-4\">\n <button id=\"loadMoreBtn\"\n class=\"text-text-secondary dark:text-gray-400 text-sm font-medium hover:text-primary transition-colors flex items-center gap-2\">\n \u986f\u793a\u66f4\u591a\u8cc7\u6e90\n <span class=\"material-symbols-outlined text-[18px]\">expand_more<\/span>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ \u5df2\u4f9d\u9644\u4ef6 xlsx\uff08Sheet: \u5f71\u97f3\u9023\u7d50\uff09\u6821\u6b63\u6240\u6709\u9023\u7d50\u8207\u9801\u78bc\n const RAW_ROWS = [\n { page: \"73\", unit: \"1-7 \u8eab\u9ad4\u89ba\u5bdf\u975c\u5fc3\u74f6\", category: \"\u5f71\u7247\", title: \"\u975c\u5fc3\u74f6DIY\u5f71\u7247\uff08\u6b63\u5ff5\u6e1b\u58d3\u3001\u7642\u7652\u74f6\uff09\", url: \"https:\/\/www.youtube.com\/watch?v=2bolRFwEp-A\", note: \"\" },\n\n { page: \"78\", unit: \"1-8 \u597d\u6162\u597d\u6162\u7684\u6a39\u61f6\", category: \"\u5f71\u7247\", title: \"\u3010\u52d5\u7269\u65b9\u57ce\u5e02\u3011\u9996\u652f\u9810\u544a 2016.2.26 \u90fd\u5e02\u53e2\u6797\u6b61\u8fce\u60a8\", url: \"https:\/\/www.youtube.com\/watch?v=w_1N-k53PX8&t=2s\", note: \"\" },\n { page: \"78\", unit: \"1-8 \u597d\u6162\u597d\u6162\u7684\u6a39\u61f6\", category: \"\u97f3\u6a94\", title: \"\u597d\u6162\u597d\u6162\u7684\u6a39\u61f6\u7df4\u7fd2\", url: \"http:\/\/humoref.epc.ntnu.edu.tw:61216\/sharing\/bL6OBYGLG\", note: \"\" },\n\n { page: \"84\", unit: \"1-9 \u795e\u5947\u7684\u547c\u5438\", category: \"\u5f71\u7247\", title: \"\u3010\u767c\u73fe\u3011\u7cbe\u83ef\u5f71\u7247 - 20131221 - \u4eba\u9ad4\u5967\u79d8\u7cfb\u5217 - \u547c\u5438\u4e4b\u9593 - \u80ba\u81df\", url: \"https:\/\/www.youtube.com\/watch?v=XZFKl9sIbIU\", note: \"\" },\n\n { page: \"90\", unit: \"1-10 \u6b63\u5ff5\u547c\u5438\", category: \"\u5f71\u7247\", title: \"LEBRON JAMES CAUGHT MEDITATING AFTER SENSING THAT LAKERS ARE BEATING THE JAZZ I CRUCIAL BASKETS\", url: \"http:\/\/humoref.epc.ntnu.edu.tw:61216\/sharing\/mfvul7vTV\", note: \"\" },\n { page: \"92\", unit: \"1-10 \u6b63\u5ff5\u547c\u5438\", category: \"\u97f3\u6a94\", title: \"\u6b63\u5ff5\u6c23\u7403\u547c\u5438\", url: \"http:\/\/humoref.epc.ntnu.edu.tw:61216\/sharing\/QHLiQBr0B\", note: \"\" },\n\n { page: \"97\", unit: \"1-11 \u638c\u63e1\u6ce8\u610f\u529b\", category: \"\u97f3\u6a94\", title: \"\u93e1\u982d\u8207\u6ce8\u610f\u529b(\u4e09\u5206\u9418)\", url: \"http:\/\/humoref.epc.ntnu.edu.tw:61216\/sharing\/FovVmr3wc\", note: \"\" },\n { page: \"97\", unit: \"1-11 \u638c\u63e1\u6ce8\u610f\u529b\", category: \"\u97f3\u6a94\", title: \"\u6ce8\u610f\u529b\u89c0\u5bdf(\u516d\u5206\u9418)\", url: \"http:\/\/humoref.epc.ntnu.edu.tw:61216\/sharing\/4geHPkVUl\", note: \"\" },\n { page: \"98\", unit: \"1-11 \u638c\u63e1\u6ce8\u610f\u529b\", category: \"\u4e92\u52d5\u904a\u6232\", title: \"\u6578\u5b78\u7df4\u7fd2\u5c0f\u7a0b\u5f0f\", url: \"https:\/\/math-exercise.johnwu.cc\/zh-tw\/schule-table\/\", note: \"\" },\n\n { page: \"102\", unit: \"1-12 \u8eab\u9ad4\u6383\u63cf\", category: \"\u5f71\u7247\", title: \"\u963f\u666e\u7684\u60c5\u7dd2\u8207\u8eab\u9ad4\/\u4f60\u8981\u662f\u80fd\u770b\u5230\u81ea\u5df1\u7684\u60c5\u7dd2...\u5728\u8eab\u9ad4\u88e1\u9762\", url: \"https:\/\/www.youtube.com\/watch?v=CGbFQ4vjO0s\", note: \"\" },\n { page: \"102\", unit: \"1-12 \u8eab\u9ad4\u6383\u63cf\", category: \"\u97f3\u6a94\", title: \"\u5341\u5206\u9418\u8eab\u9ad4\u6383\u63cf\", url: \"http:\/\/humoref.epc.ntnu.edu.tw:61216\/sharing\/J65OPnqaa\", note: \"\" },\n\n { page: \"117\", unit: \"2-2 \u60c5\u7dd2\u7684\u8eab\u9ad4\u5730\u5716\", category: \"\u97f3\u6a94\", title: \"\u60c5\u7dd2\u6383\u63cf\", url: \"http:\/\/humoref.epc.ntnu.edu.tw:61216\/sharing\/UrwQx5eP6\", note: \"\" },\n\n { page: \"124\", unit: \"2-3 \u6253\u7834\u8ff7\u601d\", category: \"\u5f71\u7247\", title: \"Joe Hisaishi - Asian Dream Song\", url: \"https:\/\/www.youtube.com\/watch?v=FgauxE4BtpQ\", note: \"\" },\n { page: \"125\", unit: \"2-3 \u6253\u7834\u8ff7\u601d\", category: \"\u5f71\u7247\", title: \"Joe Hisaishi - Spring\", url: \"https:\/\/www.youtube.com\/watch?v=_7jTnc-LUg0\", note: \"\" },\n\n { page: \"128\", unit: \"2-4 \u8212\u5fc33A\u7df4\u7fd2\", category: \"\u97f3\u6a94\", title: \"\u8212\u5fc33A\u547c\u5438\u7a7a\u9593\", url: \"http:\/\/humoref.epc.ntnu.edu.tw:61216\/sharing\/Q1LxD4qoG\", note: \"\" },\n\n { page: \"148\", unit: \"3-3 \u8010\u5fc3\u8a8d\u8b58\u5f7c\u6b64\", category: \"\u5f71\u7247\", title: \"\u7b2c\u4e8c\u968e\u6bb5 \u967d\u5149\u57fa\u91d1\u6703\u81c9\u90e8\u5e73\u6b0a\u5f71\u7247\", url: \"https:\/\/www.youtube.com\/watch?v=2xgfpWBJQCM\", note: \"\" },\n\n { page: \"154\", unit: \"3-4 \u6b63\u5ff5\u8010\u5fc3\u7df4\u7fd2\", category: \"\u97f3\u6a94\", title: \"\u6b63\u5ff5\u8010\u5fc3\u97f3\u6a94\", url: \"http:\/\/humoref.epc.ntnu.edu.tw:61216\/sharing\/KBoPq17Z1\", note: \"\" },\n\n { page: \"175\", unit: \"3-8 \u793e\u6703\u884c\u52d5\u5bb6\", category: \"\u5f71\u7247\", title: \"\ud83d\udca8 Let's Choose to CLEAN OUR AIR \ud83d\udca8 | \u202a@EarthshotPrize\", url: \"https:\/\/www.youtube.com\/watch?v=l73lkQS8lto\", note: \"\" },\n\n { page: \"182\", unit: \"Unit3 \u52d5\u614b\u975c\u5fc3\u7df4\u7fd2-\u52d5\u52d5\u8eab\u9ad4\uff0c\u7528\u300c\u5fc3\u300d\u9ad4\u6703\", category: \"\u97f3\u6a94\", title: \"\u52d5\u4e2d\u89ba\u5bdf\", url: \"http:\/\/humoref.epc.ntnu.edu.tw:61216\/sharing\/PfN9WdK8M\", note: \"\" },\n { page: \"182\", unit: \"Unit3 \u52d5\u614b\u975c\u5fc3\u7df4\u7fd2-\u52d5\u52d5\u8eab\u9ad4\uff0c\u7528\u300c\u5fc3\u300d\u9ad4\u6703\", category: \"\u97f3\u6a94\", title: \"\u6b63\u5ff5\u7acb\u59ff\u4f38\u5c551\", url: \"http:\/\/humoref.epc.ntnu.edu.tw:61216\/sharing\/y4bQ1VPkF\", note: \"\" },\n { page: \"183\", unit: \"Unit3 \u52d5\u614b\u975c\u5fc3\u7df4\u7fd2-\u52d5\u52d5\u8eab\u9ad4\uff0c\u7528\u300c\u5fc3\u300d\u9ad4\u6703\", category: \"\u97f3\u6a94\", title: \"\u6b63\u5ff5\u975c\u5fc3\u8207\u6b65\u884c\", url: \"https:\/\/www.youtube.com\/watch?v=pYCUIQVxllU\", note: \"\" },\n\n { page: \"188\", unit: \"Unit3 \u52d5\u614b\u975c\u5fc3\u7df4\u7fd2-\u610f\u8b58\u4f60\u7684\u547c\u8207\u5438\", category: \"\u97f3\u6a94\", title: \"\u547c\u5438\u89ba\u5bdf\u7684\u975c\u5750\", url: \"http:\/\/humoref.epc.ntnu.edu.tw:61216\/sharing\/B5JZO3RZ6\", note: \"\" },\n { page: \"188\", unit: \"Unit3 \u52d5\u614b\u975c\u5fc3\u7df4\u7fd2-\u610f\u8b58\u4f60\u7684\u547c\u8207\u5438\", category: \"\u97f3\u6a94\", title: \"\u89ba\u5bdf\u8eab\u9ad4\u8207\u611f\u53d7\u7684\u975c\u5750\", url: \"http:\/\/humoref.epc.ntnu.edu.tw:61216\/sharing\/gkWOrs9yN\", note: \"\" },\n { page: \"189\", unit: \"Unit3 \u52d5\u614b\u975c\u5fc3\u7df4\u7fd2-\u610f\u8b58\u4f60\u7684\u547c\u8207\u5438\", category: \"\u97f3\u6a94\", title: \"\u547c\u5438\u7a7a\u9593\u7df4\u7fd2\", url: \"http:\/\/humoref.epc.ntnu.edu.tw:61216\/sharing\/19kodVzwe\", note: \"\" },\n ];\n\n function normalizeType(category) {\n if (category === \"\u5f71\u7247\") return \"video\";\n if (category === \"\u97f3\u6a94\") return \"audio\";\n if (category === \"\u4e92\u52d5\u904a\u6232\") return \"game\";\n if (category === \"\u7c21\u5831\" || category === \"\u8ab2\u7a0b\u7c21\u5831\") return \"slides\";\n return \"other\";\n }\n\n function typeUI(type) {\n switch (type) {\n case \"video\":\n return {\n badge: \"\u5f71\u7247\",\n badgeClass:\n \"bg-blue-50 dark:bg-blue-900\/30 text-[rgb(38,98,98)] ring-blue-700\/10 dark:ring-blue-700\/30\",\n icon: \"play_circle\",\n iconStyle: \"color: rgb(98,178,178)\",\n action: \"\u524d\u5f80\u89c0\u770b\",\n actionIcon: \"arrow_forward\",\n };\n case \"audio\":\n return {\n badge: \"\u97f3\u6a94\",\n badgeClass:\n \"bg-purple-50 dark:bg-purple-900\/30 text-purple-600 dark:text-purple-400 ring-purple-700\/10 dark:ring-purple-700\/30\",\n icon: \"headphones\",\n iconStyle: \"color: rgb(98,178,178)\",\n action: \"\u7acb\u5373\u6536\u807d\",\n actionIcon: \"headphones\",\n };\n case \"game\":\n return {\n badge: \"\u4e92\u52d5\u904a\u6232\",\n badgeClass:\n \"bg-emerald-50 dark:bg-emerald-900\/30 text-emerald-700 dark:text-emerald-300 ring-emerald-700\/10 dark:ring-emerald-700\/30\",\n icon: \"sports_esports\",\n iconStyle: \"color: rgb(98,178,178)\",\n action: \"\u958b\u555f\u7df4\u7fd2\",\n actionIcon: \"open_in_new\",\n };\n case \"slides\":\n return {\n badge: \"\u8ab2\u7a0b\u7c21\u5831\",\n badgeClass:\n \"bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 ring-gray-500\/10 dark:ring-gray-500\/20\",\n icon: \"description\",\n iconStyle: \"color: rgb(98,178,178)\",\n action: \"\u4e0b\u8f09\/\u958b\u555f\",\n actionIcon: \"download\",\n };\n default:\n return {\n badge: \"\u5176\u4ed6\",\n badgeClass:\n \"bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 ring-gray-500\/10 dark:ring-gray-500\/20\",\n icon: \"link\",\n iconStyle: \"color: rgb(98,178,178)\",\n action: \"\u958b\u555f\u9023\u7d50\",\n actionIcon: \"open_in_new\",\n };\n }\n }\n\n function escapeHTML(str) {\n return String(str)\n .replaceAll(\"&\", \"&\")\n .replaceAll(\"<\", \"<\")\n .replaceAll(\">\", \">\")\n .replaceAll('\"', \""\")\n .replaceAll(\"'\", \"'\");\n }\n\n function groupByUnit(rows) {\n const map = new Map();\n for (const r of rows) {\n const key = r.unit;\n if (!map.has(key)) {\n map.set(key, { unit: r.unit, pages: new Set(), resources: [] });\n }\n const u = map.get(key);\n u.pages.add(r.page);\n u.resources.push({\n type: normalizeType(r.category),\n category: r.category,\n title: r.title,\n url: r.url,\n note: r.note || \"\",\n page: r.page,\n });\n }\n return Array.from(map.values()).map((u) => ({\n ...u,\n pageText: Array.from(u.pages)\n .sort((a, b) => Number(a) - Number(b))[0] || \"\",\n }));\n }\n\n const UNITS = groupByUnit(RAW_ROWS);\n const state = {\n filter: \"all\",\n visibleCount: 6,\n expanded: new Set(),\n };\n\n const unitListEl = document.getElementById(\"unitList\");\n const emptyStateEl = document.getElementById(\"emptyState\");\n const loadMoreBtn = document.getElementById(\"loadMoreBtn\");\n\n function computeStats() {\n document.getElementById(\"metaTotal\").textContent = RAW_ROWS.length;\n document.getElementById(\"metaUnits\").textContent = UNITS.length;\n }\n\n function setFilterLabel() {\n const map = {\n all: \"\u5168\u90e8\u8cc7\u6e90\",\n video: \"\u6559\u5b78\u5f71\u7247\",\n audio: \"\u97f3\u983b\u8a2a\u8ac7\",\n game: \"\u4e92\u52d5\u904a\u6232\",\n slides: \"\u8ab2\u7a0b\u7c21\u5831\",\n };\n const label = map[state.filter] || \"\u5168\u90e8\u8cc7\u6e90\";\n const meta = document.getElementById(\"metaFilter\");\n meta.classList.remove(\"hidden\");\n meta.querySelector(\"span.font-semibold\").textContent = `\u76ee\u524d\u7be9\u9078\uff1a${label}`;\n }\n\n function filteredUnits() {\n if (state.filter === \"all\") return UNITS;\n return UNITS\n .map((u) => ({\n ...u,\n resources: u.resources.filter((res) => res.type === state.filter),\n }))\n .filter((u) => u.resources.length > 0);\n }\n\n function render() {\n setFilterLabel();\n\n const units = filteredUnits();\n const visibleUnits = units.slice(0, state.visibleCount);\n\n if (units.length === 0) {\n unitListEl.innerHTML = \"\";\n emptyStateEl.classList.remove(\"hidden\");\n loadMoreBtn.classList.add(\"hidden\");\n return;\n } else {\n emptyStateEl.classList.add(\"hidden\");\n }\n\n if (state.visibleCount >= units.length) {\n loadMoreBtn.classList.add(\"hidden\");\n } else {\n loadMoreBtn.classList.remove(\"hidden\");\n }\n\n unitListEl.innerHTML = visibleUnits\n .map((u, idx) => {\n const unitIndex = idx;\n const expanded = state.expanded.has(unitIndex);\n const count = u.resources.length;\n\n const resourcesHTML = u.resources\n .map((res) => {\n const ui = typeUI(res.type);\n const noteHTML = \"\";\n\n return `\n <a href=\"${escapeHTML(res.url)}\" target=\"_blank\" rel=\"noopener noreferrer\"\n class=\"group\/resource flex items-center justify-between gap-3 rounded-lg border border-gray-100 dark:border-[#2a3642] bg-white\/60 dark:bg-transparent px-4 py-3 hover:bg-gray-50 dark:hover:bg-[#22303c] transition-colors\"\n title=\"\u958b\u555f\u9023\u7d50\uff08\u65b0\u5206\u9801\uff09\"\n >\n <div class=\"flex items-start gap-3 min-w-0\">\n <div class=\"mt-0.5 size-9 rounded-full bg-primary\/15 dark:bg-white\/5 flex items-center justify-center shrink-0\">\n <span class=\"material-symbols-outlined icon-filled text-[20px]\" style=\"${ui.iconStyle}\">${ui.icon}<\/span>\n <\/div>\n\n <div class=\"min-w-0\">\n <div class=\"flex flex-wrap items-center gap-2\">\n <span class=\"inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ${ui.badgeClass}\">\n ${escapeHTML(ui.badge)}\n <\/span>\n <span class=\"text-text-secondary dark:text-gray-500 text-xs font-medium\">\n \u9801\u78bc ${escapeHTML(res.page)}\n <\/span>\n ${noteHTML}\n <\/div>\n <p class=\"mt-1 text-text-main dark:text-white text-sm md:text-[15px] font-semibold leading-snug break-words\">\n ${escapeHTML(res.title)}\n <\/p>\n\n <\/div>\n <\/div>\n\n <div class=\"shrink-0\">\n <span class=\"inline-flex items-center gap-1.5 text-sm font-bold hover:opacity-90 transition-opacity\" style=\"color: rgb(38, 98, 98)\">\n <span>${escapeHTML(ui.action)}<\/span>\n <span class=\"material-symbols-outlined text-[18px]\">${ui.actionIcon}<\/span>\n <\/span>\n <\/div>\n <\/a>\n `;\n })\n .join(\"\");\n\n return `\n <section\n class=\"group flex flex-col gap-4 rounded-xl bg-surface-light dark:bg-surface-dark p-5 shadow-[0_2px_8px_rgba(0,0,0,0.04)] dark:shadow-none hover:shadow-[0_8px_24px_rgba(0,0,0,0.08)] transition-all duration-300 border border-transparent dark:border-[#2a3642]\"\n data-unit-index=\"${unitIndex}\"\n >\n <div class=\"flex items-start justify-between gap-3\">\n <div class=\"min-w-0\">\n <p class=\"text-text-main dark:text-white text-lg font-bold leading-tight\">\n ${escapeHTML(u.unit)}\n <\/p>\n <p class=\"mt-1 text-text-secondary dark:text-gray-400 text-sm\">\n \u7b2c ${escapeHTML(u.pageText)} \u9801 \u00b7 ${count} \u500b\u8cc7\u6e90\n <\/p>\n <\/div>\n\n <button\n class=\"toggle-btn inline-flex items-center justify-center size-10 rounded-full bg-white\/60 dark:bg-white\/5 border border-gray-100 dark:border-[#2a3642] hover:bg-gray-50 dark:hover:bg-[#22303c] transition-colors shrink-0\"\n aria-expanded=\"${expanded ? \"true\" : \"false\"}\"\n title=\"${expanded ? \"\u6536\u5408\" : \"\u5c55\u958b\"}\"\n data-unit-index=\"${unitIndex}\"\n >\n <span class=\"material-symbols-outlined text-text-main dark:text-white\">\n ${expanded ? \"expand_less\" : \"expand_more\"}\n <\/span>\n <\/button>\n <\/div>\n\n <div class=\"${expanded ? \"block\" : \"hidden\"}\" data-unit-body=\"${unitIndex}\">\n <div class=\"flex flex-col gap-3\">\n ${resourcesHTML}\n <\/div>\n <\/div>\n <\/section>\n `;\n })\n .join(\"\");\n\n unitListEl.querySelectorAll(\".toggle-btn\").forEach((btn) => {\n btn.addEventListener(\"click\", (e) => {\n e.preventDefault();\n e.stopPropagation();\n const i = Number(btn.getAttribute(\"data-unit-index\"));\n if (state.expanded.has(i)) state.expanded.delete(i);\n else state.expanded.add(i);\n render();\n });\n });\n }\n\n document.querySelectorAll(\".filter-btn\").forEach((btn) => {\n btn.addEventListener(\"click\", () => {\n const filter = btn.getAttribute(\"data-filter\");\n\n state.filter = filter;\n state.visibleCount = 6;\n state.expanded = new Set();\n\n document.querySelectorAll(\".filter-btn\").forEach((b) => {\n const isActive = b.getAttribute(\"data-filter\") === filter;\n\n if (isActive) {\n b.classList.remove(\n \"bg-surface-light\",\n \"dark:bg-surface-dark\",\n \"hover:bg-gray-50\",\n \"dark:hover:bg-[#22303c]\"\n );\n b.classList.add(\"bg-primary\", \"shadow-sm\");\n b.querySelectorAll(\"p\").forEach((p) => {\n p.classList.remove(\"text-text-main\", \"dark:text-white\");\n p.classList.add(\"text-white\");\n });\n b.querySelectorAll(\"span.material-symbols-outlined\").forEach((s) => {\n s.classList.remove(\"text-text-main\", \"dark:text-white\");\n s.classList.add(\"text-white\");\n });\n } else {\n b.classList.remove(\"bg-primary\", \"shadow-sm\");\n b.classList.add(\n \"bg-surface-light\",\n \"dark:bg-surface-dark\",\n \"hover:bg-gray-50\",\n \"dark:hover:bg-[#22303c]\"\n );\n b.querySelectorAll(\"p\").forEach((p) => {\n p.classList.remove(\"text-white\");\n p.classList.add(\"text-text-main\", \"dark:text-white\");\n });\n b.querySelectorAll(\"span.material-symbols-outlined\").forEach((s) => {\n s.classList.remove(\"text-white\");\n s.classList.add(\"text-text-main\", \"dark:text-white\");\n });\n }\n });\n\n render();\n });\n });\n\n loadMoreBtn.addEventListener(\"click\", () => {\n state.visibleCount += 6;\n render();\n });\n\n computeStats();\n render();\n <\/script>\n<\/body>\n\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>MindSpring \u5f71\u97f3\u9023\u7d50 MindSpring \u7b2c\u4e00\u518a \u5f71\u97f3\u8cc7\u6e90\u5eab \u4f9d\u7d19\u672c\u9801\u78bc\u8207\u55ae\u5143\u5f59\u6574\u6559\u5b78\u5f71\u7247\u3001\u97f3\u6a94\u7df4\u7fd2\u8207\u4e92\u52d5\u904a\u6232\u3002 \u53ef\u7528\u4e0a\u65b9\u6309\u9215\u7be9\u9078\u985e\u578b\uff0c\u4e26\u5c55\u958b\u67e5\u770b\u6bcf\u500b\u55ae\u5143\u7684\u8cc7\u6e90\u6e05\u55ae\u3002 database \u8cc7\u6e90\u7e3d\u6578\uff1a – view_list \u55ae\u5143\u6578\uff1a – filter_alt \u76ee\u524d\u7be9\u9078\uff1a\u5168\u90e8\u8cc7\u6e90 grid_view \u5168\u90e8\u8cc7\u6e90 movie \u6559\u5b78\u5f71\u7247 headphones \u7df4\u7fd2\u97f3\u6a94 sports_esports \u4e92\u52d5\u904a\u6232 search_off \u6c92\u6709\u7b26\u5408\u689d\u4ef6\u7684\u8cc7\u6e90 \u8acb\u5207\u63db\u7be9\u9078\u689d\u4ef6\uff08\u4f8b\u5982\u300c\u5168\u90e8\u8cc7\u6e90\u300d\uff09\u6216\u78ba\u8a8d\u8cc7\u6599\u662f\u5426\u5b8c\u6574\u3002 \u986f\u793a\u66f4\u591a\u8cc7\u6e90 expand_more<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-no-title","meta":{"footnotes":""},"class_list":["post-1036","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/seedcenter.tw\/care.org\/index.php?rest_route=\/wp\/v2\/pages\/1036","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/seedcenter.tw\/care.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/seedcenter.tw\/care.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/seedcenter.tw\/care.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/seedcenter.tw\/care.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1036"}],"version-history":[{"count":17,"href":"https:\/\/seedcenter.tw\/care.org\/index.php?rest_route=\/wp\/v2\/pages\/1036\/revisions"}],"predecessor-version":[{"id":1117,"href":"https:\/\/seedcenter.tw\/care.org\/index.php?rest_route=\/wp\/v2\/pages\/1036\/revisions\/1117"}],"wp:attachment":[{"href":"https:\/\/seedcenter.tw\/care.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1036"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1036,"date":"2026-01-08T20:26:54","date_gmt":"2026-01-08T12:26:54","guid":{"rendered":"https:\/\/seedcenter.tw\/care.org\/?page_id=1036"},"modified":"2026-01-21T14:42:29","modified_gmt":"2026-01-21T06:42:29","slug":"test","status":"publish","type":"page","link":"https:\/\/seedcenter.tw\/care.org\/?page_id=1036","title":{"rendered":"MindSpring \u6b63\u5ff5\u793e\u6703\u60c5\u7dd2\u5b78\u7fd2 \u7b2c\u4e00\u518a \u5f71\u97f3\u8cc7\u6e90"},"content":{"rendered":"\n\n\n\n\n \n \n MindSpring \u5f71\u97f3\u9023\u7d50<\/title>\n\n <link href=\"https:\/\/fonts.googleapis.com\" rel=\"preconnect\" \/>\n <link crossorigin=\"\" href=\"https:\/\/fonts.gstatic.com\" rel=\"preconnect\" \/>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;700;900&display=swap\" rel=\"stylesheet\" \/>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap\"\n rel=\"stylesheet\" \/>\n\n <script src=\"https:\/\/cdn.tailwindcss.com?plugins=forms,container-queries\"><\/script>\n <script id=\"tailwind-config\">\n tailwind.config = {\n darkMode: \"class\",\n theme: {\n extend: {\n colors: {\n primary: \"rgb(98,178,178)\",\n \"primary-weak\": \"rgb(204,229,229)\",\n\n \"background-light\": \"#f6f7f8\",\n \"background-dark\": \"#101922\",\n \"surface-light\": \"#ffffff\",\n \"surface-dark\": \"#1a2632\",\n \"text-main\": \"#111418\",\n \"text-secondary\": \"#617589\",\n },\n fontFamily: {\n display: [\"Inter\", \"sans-serif\"],\n },\n borderRadius: {\n DEFAULT: \"0.25rem\",\n lg: \"0.5rem\",\n xl: \"0.75rem\",\n full: \"9999px\",\n },\n },\n },\n };\n <\/script>\n\n <style>\n body {\n font-family: \"Inter\", \"Noto Sans\", sans-serif;\n }\n\n .material-symbols-outlined {\n font-variation-settings: \"FILL\" 0, \"wght\" 420, \"GRAD\" 0, \"opsz\" 24;\n }\n\n .icon-filled {\n font-variation-settings: \"FILL\" 1, \"wght\" 520, \"GRAD\" 0, \"opsz\" 24;\n }\n <\/style>\n<\/head>\n\n<body\n class=\"relative flex min-h-screen w-full flex-col bg-background-light dark:bg-background-dark overflow-x-hidden font-display\">\n <div class=\"flex-1 px-4 md:px-10 lg:px-40 py-8 flex justify-center\">\n <div class=\"flex flex-col max-w-[960px] w-full gap-6\">\n \n <div class=\"flex flex-col gap-4 pt-4\">\n <div class=\"flex flex-col gap-2\">\n <h1 class=\"text-text-main dark:text-white text-3xl md:text-4xl font-black leading-tight tracking-[-0.033em]\">\n MindSpring \u7b2c\u4e00\u518a \u5f71\u97f3\u8cc7\u6e90\u5eab\n <\/h1>\n <p class=\"text-text-secondary dark:text-gray-400 text-s md:text-base font-normal leading-normal max-w-[700px]\">\n \u4f9d\u7d19\u672c\u9801\u78bc\u8207\u55ae\u5143\u5f59\u6574\u6559\u5b78\u5f71\u7247\u3001\u97f3\u6a94\u7df4\u7fd2\u8207\u4e92\u52d5\u904a\u6232\u3002\n <br \/>\n \u53ef\u7528\u4e0a\u65b9\u6309\u9215\u7be9\u9078\u985e\u578b\uff0c\u4e26\u5c55\u958b\u67e5\u770b\u6bcf\u500b\u55ae\u5143\u7684\u8cc7\u6e90\u6e05\u55ae\u3002\n <\/p>\n\n \n <div class=\"mt-2 flex flex-wrap gap-2 items-center\">\n <div\n class=\"inline-flex items-center gap-2 rounded-full bg-surface-light dark:bg-surface-dark border border-gray-100 dark:border-[#2a3642] px-3 py-1.5 text-sm\">\n <span class=\"material-symbols-outlined text-[18px] text-text-secondary dark:text-gray-400\">database<\/span>\n <span class=\"text-text-secondary dark:text-gray-400\">\u8cc7\u6e90\u7e3d\u6578\uff1a<\/span>\n <span id=\"metaTotal\" class=\"font-semibold text-text-main dark:text-white\">–<\/span>\n <\/div>\n\n <div\n class=\"inline-flex items-center gap-2 rounded-full bg-surface-light dark:bg-surface-dark border border-gray-100 dark:border-[#2a3642] px-3 py-1.5 text-sm\">\n <span class=\"material-symbols-outlined text-[18px] text-text-secondary dark:text-gray-400\">view_list<\/span>\n <span class=\"text-text-secondary dark:text-gray-400\">\u55ae\u5143\u6578\uff1a<\/span>\n <span id=\"metaUnits\" class=\"font-semibold text-text-main dark:text-white\">–<\/span>\n <\/div>\n\n \n <div id=\"metaFilter\"\n class=\"hidden w-full md:w-auto flex md:inline-flex justify-center md:justify-start mt-4 md:mt-0\">\n <div\n class=\"inline-flex items-center gap-2 rounded-full bg-primary-weak dark:bg-white\/5 ring-1 ring-inset ring-black\/5 dark:ring-white\/10 px-3 py-1.5 text-sm\">\n <span class=\"material-symbols-outlined text-[18px]\" style=\"color: rgb(38, 98, 98)\">filter_alt<\/span>\n <span class=\"font-semibold\" style=\"color: rgb(38, 98, 98)\">\u76ee\u524d\u7be9\u9078\uff1a\u5168\u90e8\u8cc7\u6e90<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"flex gap-3 pb-2 flex-wrap items-center\">\n <button data-filter=\"all\"\n class=\"filter-btn group flex h-9 shrink-0 items-center justify-center gap-x-2 rounded-full bg-primary pl-3 pr-4 shadow-sm transition-all hover:shadow-md\">\n <span class=\"material-symbols-outlined text-white text-[20px]\">grid_view<\/span>\n <p class=\"text-white text-sm font-medium\">\u5168\u90e8\u8cc7\u6e90<\/p>\n <\/button>\n\n <button data-filter=\"video\"\n class=\"filter-btn group flex h-9 shrink-0 items-center justify-center gap-x-2 rounded-full bg-surface-light dark:bg-surface-dark border border-transparent hover:border-gray-200 dark:hover:border-gray-700 pl-3 pr-4 transition-all hover:bg-gray-50 dark:hover:bg-[#22303c]\">\n <span class=\"material-symbols-outlined text-text-main dark:text-white text-[20px]\">movie<\/span>\n <p class=\"text-text-main dark:text-white text-sm font-medium\">\n \u6559\u5b78\u5f71\u7247\n <\/p>\n <\/button>\n\n <button data-filter=\"audio\"\n class=\"filter-btn group flex h-9 shrink-0 items-center justify-center gap-x-2 rounded-full bg-surface-light dark:bg-surface-dark border border-transparent hover:border-gray-200 dark:hover:border-gray-700 pl-3 pr-4 transition-all hover:bg-gray-50 dark:hover:bg-[#22303c]\">\n <span class=\"material-symbols-outlined text-text-main dark:text-white text-[20px]\">headphones<\/span>\n <p class=\"text-text-main dark:text-white text-sm font-medium\">\n \u7df4\u7fd2\u97f3\u6a94\n <\/p>\n <\/button>\n\n <button data-filter=\"game\"\n class=\"filter-btn group flex h-9 shrink-0 items-center justify-center gap-x-2 rounded-full bg-surface-light dark:bg-surface-dark border border-transparent hover:border-gray-200 dark:hover:border-gray-700 pl-3 pr-4 transition-all hover:bg-gray-50 dark:hover:bg-[#22303c]\">\n <span class=\"material-symbols-outlined text-text-main dark:text-white text-[20px]\">sports_esports<\/span>\n <p class=\"text-text-main dark:text-white text-sm font-medium\">\n \u4e92\u52d5\u904a\u6232\n <\/p>\n <\/button>\n\n \n <\/div>\n\n \n <div class=\"flex flex-col gap-5\" id=\"unitList\"><\/div>\n\n \n <div id=\"emptyState\"\n class=\"hidden rounded-xl bg-surface-light dark:bg-surface-dark border border-gray-100 dark:border-[#2a3642] p-6\">\n <div class=\"flex items-start gap-3\">\n <div class=\"size-10 rounded-full bg-primary\/15 flex items-center justify-center\"\n style=\"color: rgb(38, 98, 98)\">\n <span class=\"material-symbols-outlined\">search_off<\/span>\n <\/div>\n <div class=\"flex-1\">\n <p class=\"text-text-main dark:text-white font-bold\">\n \u6c92\u6709\u7b26\u5408\u689d\u4ef6\u7684\u8cc7\u6e90\n <\/p>\n <p class=\"text-text-secondary dark:text-gray-400 text-sm mt-1\">\n \u8acb\u5207\u63db\u7be9\u9078\u689d\u4ef6\uff08\u4f8b\u5982\u300c\u5168\u90e8\u8cc7\u6e90\u300d\uff09\u6216\u78ba\u8a8d\u8cc7\u6599\u662f\u5426\u5b8c\u6574\u3002\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"mt-4 flex items-center justify-center py-4\">\n <button id=\"loadMoreBtn\"\n class=\"text-text-secondary dark:text-gray-400 text-sm font-medium hover:text-primary transition-colors flex items-center gap-2\">\n \u986f\u793a\u66f4\u591a\u8cc7\u6e90\n <span class=\"material-symbols-outlined text-[18px]\">expand_more<\/span>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ \u5df2\u4f9d\u9644\u4ef6 xlsx\uff08Sheet: \u5f71\u97f3\u9023\u7d50\uff09\u6821\u6b63\u6240\u6709\u9023\u7d50\u8207\u9801\u78bc\n const RAW_ROWS = [\n { page: \"73\", unit: \"1-7 \u8eab\u9ad4\u89ba\u5bdf\u975c\u5fc3\u74f6\", category: \"\u5f71\u7247\", title: \"\u975c\u5fc3\u74f6DIY\u5f71\u7247\uff08\u6b63\u5ff5\u6e1b\u58d3\u3001\u7642\u7652\u74f6\uff09\", url: \"https:\/\/www.youtube.com\/watch?v=2bolRFwEp-A\", note: \"\" },\n\n { page: \"78\", unit: \"1-8 \u597d\u6162\u597d\u6162\u7684\u6a39\u61f6\", category: \"\u5f71\u7247\", title: \"\u3010\u52d5\u7269\u65b9\u57ce\u5e02\u3011\u9996\u652f\u9810\u544a 2016.2.26 \u90fd\u5e02\u53e2\u6797\u6b61\u8fce\u60a8\", url: \"https:\/\/www.youtube.com\/watch?v=w_1N-k53PX8&t=2s\", note: \"\" },\n { page: \"78\", unit: \"1-8 \u597d\u6162\u597d\u6162\u7684\u6a39\u61f6\", category: \"\u97f3\u6a94\", title: \"\u597d\u6162\u597d\u6162\u7684\u6a39\u61f6\u7df4\u7fd2\", url: \"http:\/\/humoref.epc.ntnu.edu.tw:61216\/sharing\/bL6OBYGLG\", note: \"\" },\n\n { page: \"84\", unit: \"1-9 \u795e\u5947\u7684\u547c\u5438\", category: \"\u5f71\u7247\", title: \"\u3010\u767c\u73fe\u3011\u7cbe\u83ef\u5f71\u7247 - 20131221 - \u4eba\u9ad4\u5967\u79d8\u7cfb\u5217 - \u547c\u5438\u4e4b\u9593 - \u80ba\u81df\", url: \"https:\/\/www.youtube.com\/watch?v=XZFKl9sIbIU\", note: \"\" },\n\n { page: \"90\", unit: \"1-10 \u6b63\u5ff5\u547c\u5438\", category: \"\u5f71\u7247\", title: \"LEBRON JAMES CAUGHT MEDITATING AFTER SENSING THAT LAKERS ARE BEATING THE JAZZ I CRUCIAL BASKETS\", url: \"http:\/\/humoref.epc.ntnu.edu.tw:61216\/sharing\/mfvul7vTV\", note: \"\" },\n { page: \"92\", unit: \"1-10 \u6b63\u5ff5\u547c\u5438\", category: \"\u97f3\u6a94\", title: \"\u6b63\u5ff5\u6c23\u7403\u547c\u5438\", url: \"http:\/\/humoref.epc.ntnu.edu.tw:61216\/sharing\/QHLiQBr0B\", note: \"\" },\n\n { page: \"97\", unit: \"1-11 \u638c\u63e1\u6ce8\u610f\u529b\", category: \"\u97f3\u6a94\", title: \"\u93e1\u982d\u8207\u6ce8\u610f\u529b(\u4e09\u5206\u9418)\", url: \"http:\/\/humoref.epc.ntnu.edu.tw:61216\/sharing\/FovVmr3wc\", note: \"\" },\n { page: \"97\", unit: \"1-11 \u638c\u63e1\u6ce8\u610f\u529b\", category: \"\u97f3\u6a94\", title: \"\u6ce8\u610f\u529b\u89c0\u5bdf(\u516d\u5206\u9418)\", url: \"http:\/\/humoref.epc.ntnu.edu.tw:61216\/sharing\/4geHPkVUl\", note: \"\" },\n { page: \"98\", unit: \"1-11 \u638c\u63e1\u6ce8\u610f\u529b\", category: \"\u4e92\u52d5\u904a\u6232\", title: \"\u6578\u5b78\u7df4\u7fd2\u5c0f\u7a0b\u5f0f\", url: \"https:\/\/math-exercise.johnwu.cc\/zh-tw\/schule-table\/\", note: \"\" },\n\n { page: \"102\", unit: \"1-12 \u8eab\u9ad4\u6383\u63cf\", category: \"\u5f71\u7247\", title: \"\u963f\u666e\u7684\u60c5\u7dd2\u8207\u8eab\u9ad4\/\u4f60\u8981\u662f\u80fd\u770b\u5230\u81ea\u5df1\u7684\u60c5\u7dd2...\u5728\u8eab\u9ad4\u88e1\u9762\", url: \"https:\/\/www.youtube.com\/watch?v=CGbFQ4vjO0s\", note: \"\" },\n { page: \"102\", unit: \"1-12 \u8eab\u9ad4\u6383\u63cf\", category: \"\u97f3\u6a94\", title: \"\u5341\u5206\u9418\u8eab\u9ad4\u6383\u63cf\", url: \"http:\/\/humoref.epc.ntnu.edu.tw:61216\/sharing\/J65OPnqaa\", note: \"\" },\n\n { page: \"117\", unit: \"2-2 \u60c5\u7dd2\u7684\u8eab\u9ad4\u5730\u5716\", category: \"\u97f3\u6a94\", title: \"\u60c5\u7dd2\u6383\u63cf\", url: \"http:\/\/humoref.epc.ntnu.edu.tw:61216\/sharing\/UrwQx5eP6\", note: \"\" },\n\n { page: \"124\", unit: \"2-3 \u6253\u7834\u8ff7\u601d\", category: \"\u5f71\u7247\", title: \"Joe Hisaishi - Asian Dream Song\", url: \"https:\/\/www.youtube.com\/watch?v=FgauxE4BtpQ\", note: \"\" },\n { page: \"125\", unit: \"2-3 \u6253\u7834\u8ff7\u601d\", category: \"\u5f71\u7247\", title: \"Joe Hisaishi - Spring\", url: \"https:\/\/www.youtube.com\/watch?v=_7jTnc-LUg0\", note: \"\" },\n\n { page: \"128\", unit: \"2-4 \u8212\u5fc33A\u7df4\u7fd2\", category: \"\u97f3\u6a94\", title: \"\u8212\u5fc33A\u547c\u5438\u7a7a\u9593\", url: \"http:\/\/humoref.epc.ntnu.edu.tw:61216\/sharing\/Q1LxD4qoG\", note: \"\" },\n\n { page: \"148\", unit: \"3-3 \u8010\u5fc3\u8a8d\u8b58\u5f7c\u6b64\", category: \"\u5f71\u7247\", title: \"\u7b2c\u4e8c\u968e\u6bb5 \u967d\u5149\u57fa\u91d1\u6703\u81c9\u90e8\u5e73\u6b0a\u5f71\u7247\", url: \"https:\/\/www.youtube.com\/watch?v=2xgfpWBJQCM\", note: \"\" },\n\n { page: \"154\", unit: \"3-4 \u6b63\u5ff5\u8010\u5fc3\u7df4\u7fd2\", category: \"\u97f3\u6a94\", title: \"\u6b63\u5ff5\u8010\u5fc3\u97f3\u6a94\", url: \"http:\/\/humoref.epc.ntnu.edu.tw:61216\/sharing\/KBoPq17Z1\", note: \"\" },\n\n { page: \"175\", unit: \"3-8 \u793e\u6703\u884c\u52d5\u5bb6\", category: \"\u5f71\u7247\", title: \"\ud83d\udca8 Let's Choose to CLEAN OUR AIR \ud83d\udca8 | \u202a@EarthshotPrize\", url: \"https:\/\/www.youtube.com\/watch?v=l73lkQS8lto\", note: \"\" },\n\n { page: \"182\", unit: \"Unit3 \u52d5\u614b\u975c\u5fc3\u7df4\u7fd2-\u52d5\u52d5\u8eab\u9ad4\uff0c\u7528\u300c\u5fc3\u300d\u9ad4\u6703\", category: \"\u97f3\u6a94\", title: \"\u52d5\u4e2d\u89ba\u5bdf\", url: \"http:\/\/humoref.epc.ntnu.edu.tw:61216\/sharing\/PfN9WdK8M\", note: \"\" },\n { page: \"182\", unit: \"Unit3 \u52d5\u614b\u975c\u5fc3\u7df4\u7fd2-\u52d5\u52d5\u8eab\u9ad4\uff0c\u7528\u300c\u5fc3\u300d\u9ad4\u6703\", category: \"\u97f3\u6a94\", title: \"\u6b63\u5ff5\u7acb\u59ff\u4f38\u5c551\", url: \"http:\/\/humoref.epc.ntnu.edu.tw:61216\/sharing\/y4bQ1VPkF\", note: \"\" },\n { page: \"183\", unit: \"Unit3 \u52d5\u614b\u975c\u5fc3\u7df4\u7fd2-\u52d5\u52d5\u8eab\u9ad4\uff0c\u7528\u300c\u5fc3\u300d\u9ad4\u6703\", category: \"\u97f3\u6a94\", title: \"\u6b63\u5ff5\u975c\u5fc3\u8207\u6b65\u884c\", url: \"https:\/\/www.youtube.com\/watch?v=pYCUIQVxllU\", note: \"\" },\n\n { page: \"188\", unit: \"Unit3 \u52d5\u614b\u975c\u5fc3\u7df4\u7fd2-\u610f\u8b58\u4f60\u7684\u547c\u8207\u5438\", category: \"\u97f3\u6a94\", title: \"\u547c\u5438\u89ba\u5bdf\u7684\u975c\u5750\", url: \"http:\/\/humoref.epc.ntnu.edu.tw:61216\/sharing\/B5JZO3RZ6\", note: \"\" },\n { page: \"188\", unit: \"Unit3 \u52d5\u614b\u975c\u5fc3\u7df4\u7fd2-\u610f\u8b58\u4f60\u7684\u547c\u8207\u5438\", category: \"\u97f3\u6a94\", title: \"\u89ba\u5bdf\u8eab\u9ad4\u8207\u611f\u53d7\u7684\u975c\u5750\", url: \"http:\/\/humoref.epc.ntnu.edu.tw:61216\/sharing\/gkWOrs9yN\", note: \"\" },\n { page: \"189\", unit: \"Unit3 \u52d5\u614b\u975c\u5fc3\u7df4\u7fd2-\u610f\u8b58\u4f60\u7684\u547c\u8207\u5438\", category: \"\u97f3\u6a94\", title: \"\u547c\u5438\u7a7a\u9593\u7df4\u7fd2\", url: \"http:\/\/humoref.epc.ntnu.edu.tw:61216\/sharing\/19kodVzwe\", note: \"\" },\n ];\n\n function normalizeType(category) {\n if (category === \"\u5f71\u7247\") return \"video\";\n if (category === \"\u97f3\u6a94\") return \"audio\";\n if (category === \"\u4e92\u52d5\u904a\u6232\") return \"game\";\n if (category === \"\u7c21\u5831\" || category === \"\u8ab2\u7a0b\u7c21\u5831\") return \"slides\";\n return \"other\";\n }\n\n function typeUI(type) {\n switch (type) {\n case \"video\":\n return {\n badge: \"\u5f71\u7247\",\n badgeClass:\n \"bg-blue-50 dark:bg-blue-900\/30 text-[rgb(38,98,98)] ring-blue-700\/10 dark:ring-blue-700\/30\",\n icon: \"play_circle\",\n iconStyle: \"color: rgb(98,178,178)\",\n action: \"\u524d\u5f80\u89c0\u770b\",\n actionIcon: \"arrow_forward\",\n };\n case \"audio\":\n return {\n badge: \"\u97f3\u6a94\",\n badgeClass:\n \"bg-purple-50 dark:bg-purple-900\/30 text-purple-600 dark:text-purple-400 ring-purple-700\/10 dark:ring-purple-700\/30\",\n icon: \"headphones\",\n iconStyle: \"color: rgb(98,178,178)\",\n action: \"\u7acb\u5373\u6536\u807d\",\n actionIcon: \"headphones\",\n };\n case \"game\":\n return {\n badge: \"\u4e92\u52d5\u904a\u6232\",\n badgeClass:\n \"bg-emerald-50 dark:bg-emerald-900\/30 text-emerald-700 dark:text-emerald-300 ring-emerald-700\/10 dark:ring-emerald-700\/30\",\n icon: \"sports_esports\",\n iconStyle: \"color: rgb(98,178,178)\",\n action: \"\u958b\u555f\u7df4\u7fd2\",\n actionIcon: \"open_in_new\",\n };\n case \"slides\":\n return {\n badge: \"\u8ab2\u7a0b\u7c21\u5831\",\n badgeClass:\n \"bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 ring-gray-500\/10 dark:ring-gray-500\/20\",\n icon: \"description\",\n iconStyle: \"color: rgb(98,178,178)\",\n action: \"\u4e0b\u8f09\/\u958b\u555f\",\n actionIcon: \"download\",\n };\n default:\n return {\n badge: \"\u5176\u4ed6\",\n badgeClass:\n \"bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 ring-gray-500\/10 dark:ring-gray-500\/20\",\n icon: \"link\",\n iconStyle: \"color: rgb(98,178,178)\",\n action: \"\u958b\u555f\u9023\u7d50\",\n actionIcon: \"open_in_new\",\n };\n }\n }\n\n function escapeHTML(str) {\n return String(str)\n .replaceAll(\"&\", \"&\")\n .replaceAll(\"<\", \"<\")\n .replaceAll(\">\", \">\")\n .replaceAll('\"', \""\")\n .replaceAll(\"'\", \"'\");\n }\n\n function groupByUnit(rows) {\n const map = new Map();\n for (const r of rows) {\n const key = r.unit;\n if (!map.has(key)) {\n map.set(key, { unit: r.unit, pages: new Set(), resources: [] });\n }\n const u = map.get(key);\n u.pages.add(r.page);\n u.resources.push({\n type: normalizeType(r.category),\n category: r.category,\n title: r.title,\n url: r.url,\n note: r.note || \"\",\n page: r.page,\n });\n }\n return Array.from(map.values()).map((u) => ({\n ...u,\n pageText: Array.from(u.pages)\n .sort((a, b) => Number(a) - Number(b))[0] || \"\",\n }));\n }\n\n const UNITS = groupByUnit(RAW_ROWS);\n const state = {\n filter: \"all\",\n visibleCount: 6,\n expanded: new Set(),\n };\n\n const unitListEl = document.getElementById(\"unitList\");\n const emptyStateEl = document.getElementById(\"emptyState\");\n const loadMoreBtn = document.getElementById(\"loadMoreBtn\");\n\n function computeStats() {\n document.getElementById(\"metaTotal\").textContent = RAW_ROWS.length;\n document.getElementById(\"metaUnits\").textContent = UNITS.length;\n }\n\n function setFilterLabel() {\n const map = {\n all: \"\u5168\u90e8\u8cc7\u6e90\",\n video: \"\u6559\u5b78\u5f71\u7247\",\n audio: \"\u97f3\u983b\u8a2a\u8ac7\",\n game: \"\u4e92\u52d5\u904a\u6232\",\n slides: \"\u8ab2\u7a0b\u7c21\u5831\",\n };\n const label = map[state.filter] || \"\u5168\u90e8\u8cc7\u6e90\";\n const meta = document.getElementById(\"metaFilter\");\n meta.classList.remove(\"hidden\");\n meta.querySelector(\"span.font-semibold\").textContent = `\u76ee\u524d\u7be9\u9078\uff1a${label}`;\n }\n\n function filteredUnits() {\n if (state.filter === \"all\") return UNITS;\n return UNITS\n .map((u) => ({\n ...u,\n resources: u.resources.filter((res) => res.type === state.filter),\n }))\n .filter((u) => u.resources.length > 0);\n }\n\n function render() {\n setFilterLabel();\n\n const units = filteredUnits();\n const visibleUnits = units.slice(0, state.visibleCount);\n\n if (units.length === 0) {\n unitListEl.innerHTML = \"\";\n emptyStateEl.classList.remove(\"hidden\");\n loadMoreBtn.classList.add(\"hidden\");\n return;\n } else {\n emptyStateEl.classList.add(\"hidden\");\n }\n\n if (state.visibleCount >= units.length) {\n loadMoreBtn.classList.add(\"hidden\");\n } else {\n loadMoreBtn.classList.remove(\"hidden\");\n }\n\n unitListEl.innerHTML = visibleUnits\n .map((u, idx) => {\n const unitIndex = idx;\n const expanded = state.expanded.has(unitIndex);\n const count = u.resources.length;\n\n const resourcesHTML = u.resources\n .map((res) => {\n const ui = typeUI(res.type);\n const noteHTML = \"\";\n\n return `\n <a href=\"${escapeHTML(res.url)}\" target=\"_blank\" rel=\"noopener noreferrer\"\n class=\"group\/resource flex items-center justify-between gap-3 rounded-lg border border-gray-100 dark:border-[#2a3642] bg-white\/60 dark:bg-transparent px-4 py-3 hover:bg-gray-50 dark:hover:bg-[#22303c] transition-colors\"\n title=\"\u958b\u555f\u9023\u7d50\uff08\u65b0\u5206\u9801\uff09\"\n >\n <div class=\"flex items-start gap-3 min-w-0\">\n <div class=\"mt-0.5 size-9 rounded-full bg-primary\/15 dark:bg-white\/5 flex items-center justify-center shrink-0\">\n <span class=\"material-symbols-outlined icon-filled text-[20px]\" style=\"${ui.iconStyle}\">${ui.icon}<\/span>\n <\/div>\n\n <div class=\"min-w-0\">\n <div class=\"flex flex-wrap items-center gap-2\">\n <span class=\"inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ${ui.badgeClass}\">\n ${escapeHTML(ui.badge)}\n <\/span>\n <span class=\"text-text-secondary dark:text-gray-500 text-xs font-medium\">\n \u9801\u78bc ${escapeHTML(res.page)}\n <\/span>\n ${noteHTML}\n <\/div>\n <p class=\"mt-1 text-text-main dark:text-white text-sm md:text-[15px] font-semibold leading-snug break-words\">\n ${escapeHTML(res.title)}\n <\/p>\n\n <\/div>\n <\/div>\n\n <div class=\"shrink-0\">\n <span class=\"inline-flex items-center gap-1.5 text-sm font-bold hover:opacity-90 transition-opacity\" style=\"color: rgb(38, 98, 98)\">\n <span>${escapeHTML(ui.action)}<\/span>\n <span class=\"material-symbols-outlined text-[18px]\">${ui.actionIcon}<\/span>\n <\/span>\n <\/div>\n <\/a>\n `;\n })\n .join(\"\");\n\n return `\n <section\n class=\"group flex flex-col gap-4 rounded-xl bg-surface-light dark:bg-surface-dark p-5 shadow-[0_2px_8px_rgba(0,0,0,0.04)] dark:shadow-none hover:shadow-[0_8px_24px_rgba(0,0,0,0.08)] transition-all duration-300 border border-transparent dark:border-[#2a3642]\"\n data-unit-index=\"${unitIndex}\"\n >\n <div class=\"flex items-start justify-between gap-3\">\n <div class=\"min-w-0\">\n <p class=\"text-text-main dark:text-white text-lg font-bold leading-tight\">\n ${escapeHTML(u.unit)}\n <\/p>\n <p class=\"mt-1 text-text-secondary dark:text-gray-400 text-sm\">\n \u7b2c ${escapeHTML(u.pageText)} \u9801 \u00b7 ${count} \u500b\u8cc7\u6e90\n <\/p>\n <\/div>\n\n <button\n class=\"toggle-btn inline-flex items-center justify-center size-10 rounded-full bg-white\/60 dark:bg-white\/5 border border-gray-100 dark:border-[#2a3642] hover:bg-gray-50 dark:hover:bg-[#22303c] transition-colors shrink-0\"\n aria-expanded=\"${expanded ? \"true\" : \"false\"}\"\n title=\"${expanded ? \"\u6536\u5408\" : \"\u5c55\u958b\"}\"\n data-unit-index=\"${unitIndex}\"\n >\n <span class=\"material-symbols-outlined text-text-main dark:text-white\">\n ${expanded ? \"expand_less\" : \"expand_more\"}\n <\/span>\n <\/button>\n <\/div>\n\n <div class=\"${expanded ? \"block\" : \"hidden\"}\" data-unit-body=\"${unitIndex}\">\n <div class=\"flex flex-col gap-3\">\n ${resourcesHTML}\n <\/div>\n <\/div>\n <\/section>\n `;\n })\n .join(\"\");\n\n unitListEl.querySelectorAll(\".toggle-btn\").forEach((btn) => {\n btn.addEventListener(\"click\", (e) => {\n e.preventDefault();\n e.stopPropagation();\n const i = Number(btn.getAttribute(\"data-unit-index\"));\n if (state.expanded.has(i)) state.expanded.delete(i);\n else state.expanded.add(i);\n render();\n });\n });\n }\n\n document.querySelectorAll(\".filter-btn\").forEach((btn) => {\n btn.addEventListener(\"click\", () => {\n const filter = btn.getAttribute(\"data-filter\");\n\n state.filter = filter;\n state.visibleCount = 6;\n state.expanded = new Set();\n\n document.querySelectorAll(\".filter-btn\").forEach((b) => {\n const isActive = b.getAttribute(\"data-filter\") === filter;\n\n if (isActive) {\n b.classList.remove(\n \"bg-surface-light\",\n \"dark:bg-surface-dark\",\n \"hover:bg-gray-50\",\n \"dark:hover:bg-[#22303c]\"\n );\n b.classList.add(\"bg-primary\", \"shadow-sm\");\n b.querySelectorAll(\"p\").forEach((p) => {\n p.classList.remove(\"text-text-main\", \"dark:text-white\");\n p.classList.add(\"text-white\");\n });\n b.querySelectorAll(\"span.material-symbols-outlined\").forEach((s) => {\n s.classList.remove(\"text-text-main\", \"dark:text-white\");\n s.classList.add(\"text-white\");\n });\n } else {\n b.classList.remove(\"bg-primary\", \"shadow-sm\");\n b.classList.add(\n \"bg-surface-light\",\n \"dark:bg-surface-dark\",\n \"hover:bg-gray-50\",\n \"dark:hover:bg-[#22303c]\"\n );\n b.querySelectorAll(\"p\").forEach((p) => {\n p.classList.remove(\"text-white\");\n p.classList.add(\"text-text-main\", \"dark:text-white\");\n });\n b.querySelectorAll(\"span.material-symbols-outlined\").forEach((s) => {\n s.classList.remove(\"text-white\");\n s.classList.add(\"text-text-main\", \"dark:text-white\");\n });\n }\n });\n\n render();\n });\n });\n\n loadMoreBtn.addEventListener(\"click\", () => {\n state.visibleCount += 6;\n render();\n });\n\n computeStats();\n render();\n <\/script>\n<\/body>\n\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>MindSpring \u5f71\u97f3\u9023\u7d50 MindSpring \u7b2c\u4e00\u518a \u5f71\u97f3\u8cc7\u6e90\u5eab \u4f9d\u7d19\u672c\u9801\u78bc\u8207\u55ae\u5143\u5f59\u6574\u6559\u5b78\u5f71\u7247\u3001\u97f3\u6a94\u7df4\u7fd2\u8207\u4e92\u52d5\u904a\u6232\u3002 \u53ef\u7528\u4e0a\u65b9\u6309\u9215\u7be9\u9078\u985e\u578b\uff0c\u4e26\u5c55\u958b\u67e5\u770b\u6bcf\u500b\u55ae\u5143\u7684\u8cc7\u6e90\u6e05\u55ae\u3002 database \u8cc7\u6e90\u7e3d\u6578\uff1a – view_list \u55ae\u5143\u6578\uff1a – filter_alt \u76ee\u524d\u7be9\u9078\uff1a\u5168\u90e8\u8cc7\u6e90 grid_view \u5168\u90e8\u8cc7\u6e90 movie \u6559\u5b78\u5f71\u7247 headphones \u7df4\u7fd2\u97f3\u6a94 sports_esports \u4e92\u52d5\u904a\u6232 search_off \u6c92\u6709\u7b26\u5408\u689d\u4ef6\u7684\u8cc7\u6e90 \u8acb\u5207\u63db\u7be9\u9078\u689d\u4ef6\uff08\u4f8b\u5982\u300c\u5168\u90e8\u8cc7\u6e90\u300d\uff09\u6216\u78ba\u8a8d\u8cc7\u6599\u662f\u5426\u5b8c\u6574\u3002 \u986f\u793a\u66f4\u591a\u8cc7\u6e90 expand_more<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-no-title","meta":{"footnotes":""},"class_list":["post-1036","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/seedcenter.tw\/care.org\/index.php?rest_route=\/wp\/v2\/pages\/1036","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/seedcenter.tw\/care.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/seedcenter.tw\/care.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/seedcenter.tw\/care.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/seedcenter.tw\/care.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1036"}],"version-history":[{"count":17,"href":"https:\/\/seedcenter.tw\/care.org\/index.php?rest_route=\/wp\/v2\/pages\/1036\/revisions"}],"predecessor-version":[{"id":1117,"href":"https:\/\/seedcenter.tw\/care.org\/index.php?rest_route=\/wp\/v2\/pages\/1036\/revisions\/1117"}],"wp:attachment":[{"href":"https:\/\/seedcenter.tw\/care.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1036"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}