{"id":1298,"date":"2026-03-09T13:01:50","date_gmt":"2026-03-09T05:01:50","guid":{"rendered":"https:\/\/wmea.charity\/?page_id=1298"},"modified":"2026-03-16T14:13:36","modified_gmt":"2026-03-16T06:13:36","slug":"elite-training-class-rules","status":"publish","type":"page","link":"https:\/\/wmea.charity\/index.php\/elite-training-class-rules\/","title":{"rendered":"Elite Training Class Rules"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1298\" class=\"elementor elementor-1298\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8267e78 e-flex e-con-boxed e-con e-parent\" data-id=\"8267e78\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a333d16 elementor-widget elementor-widget-html\" data-id=\"a333d16\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"zh-HK\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>\u535a\u96c5\u9818\u8896\u734e\u5b78\u91d1\u8a08\u5283 \u53ca SOGO \u51a0\u540d\u8d0a\u52a9 - \u5bb6\u9577\u6307\u5357<\/title>\n    \n    <!-- Tailwind CSS -->\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    \n    <!-- Chart.js -->\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n\n    <!-- Placeholder Comments Required by Prompt -->\n    <!-- Chosen Palette: Sky Blue (#77BFDB) & Cream (#FEFACE). -->\n    <!-- Application Structure Plan: The SPA is divided into two primary initial sections: the Branding\/Welcome Header and the Actionable Checklist. Following this, an accordion-based \"Information Hub\" organizes the report's details (Attendance, Scholarship, Materials). This separation ensures the parent first understands the context before being prompted for action. -->\n    <!-- Visualization & Content Choices: \n         1. Hero Section -> Goal: Inform\/Contextualize -> Styled HTML -> Professional Welcome.\n         2. Action Checklist -> Goal: Action\/Onboarding -> Interactive JS list -> Immediate parent engagement.\n         3. Attendance Doughnut -> Goal: Compare\/Warn -> Chart.js -> Visualizing the strict 10\/12 rule.\n         4. Info Cards -> Goal: Organize -> Responsive Grid -> Clean data presentation.\n         5. NO SVG\/Mermaid used. -->\n    <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->\n\n    <style>\n        :root {\n            --brand-blue: #77bfdb;\n            --brand-cream: #feface;\n            --text-main: #1e293b;\n        }\n\n        body {\n            font-family: 'Noto Sans TC', sans-serif;\n            background-color: #fbfcfc;\n            color: var(--text-main);\n        }\n        \n        \/* Utility Classes *\/\n        .bg-brand-blue { background-color: var(--brand-blue); }\n        .text-brand-blue { color: var(--brand-blue); }\n        .bg-brand-cream { background-color: var(--brand-cream); }\n        .border-brand-blue { border-color: var(--brand-blue); }\n\n        \/* Chart constraints *\/\n        .chart-container {\n            position: relative;\n            width: 100%;\n            max-width: 280px;\n            margin: auto;\n            height: 220px;\n        }\n\n        \/* Animation & Interaction *\/\n        .accordion-content {\n            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n            max-height: 0;\n            opacity: 0;\n            overflow: hidden;\n        }\n        \n        .accordion-content.active {\n            max-height: 1200px;\n            opacity: 1;\n            padding-bottom: 2rem;\n        }\n\n        .check-item:checked + .check-visual {\n            background-color: var(--brand-blue);\n            border-color: var(--brand-blue);\n        }\n\n        .check-item:checked + .check-visual::after {\n            content: '\u2713';\n            color: white;\n            position: absolute;\n            font-size: 10px;\n            font-weight: bold;\n        }\n\n        .section-card {\n            background: white;\n            border-radius: 1.5rem;\n            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\n            border: 1px solid rgba(119, 191, 219, 0.2);\n        }\n    <\/style>\n<\/head>\n<body class=\"antialiased pb-12\">\n\n    <!-- PART 1: WELCOME & BRANDING HEADER -->\n    <header class=\"bg-brand-blue text-white pt-12 pb-14 px-6 rounded-b-[2.5rem] shadow-lg relative overflow-hidden\">\n        <div class=\"max-w-3xl mx-auto relative z-10\">\n            <div class=\"inline-block px-3 py-1 bg-white\/30 backdrop-blur-sm rounded-md text-[10px] font-bold mb-4 tracking-widest uppercase\">\n                Official Parent Guide 2025\n            <\/div>\n            <div class=\"space-y-1\">\n                <p class=\"text-sm opacity-90 font-medium\">2026 \u5165\u5b78\u6307\u5357 <\/p> <a href=\"https:\/\/wmea.charity\/index.php\/school-rules-english\/\" <span class=\"text-sm font-bold text-slate-600\"> <p class=\"text-sm opacity-90 font-medium\">| Eng<\/p><\/a>\n                <h1 class=\"text-3xl md:text-5xl font-black leading-tight\">\u535a\u96c5\u9818\u8896\u734e\u5b78\u91d1\u8a08\u5283<br><span class=\"text-white\/80\">& SOGO \u51a0\u540d\u8d0a\u52a9<\/span><\/h1>\n            <\/div>\n            <div class=\"mt-6 p-4 bg-white\/10 rounded-2xl border border-white\/20\">\n                <p class=\"text-sm md:text-base leading-relaxed\">\n                    \u5bb6\u9577\u60a8\u597d\uff0c\u70ba\u4e86\u5b69\u5b50\u80fd\u7372\u5f97\u6700\u4f73\u5b78\u7fd2\u9ad4\u9a57\uff0c\u8acb\u4ed4\u7d30\u95b1\u8b80\u4ee5\u4e0b\u6709\u95dc<strong>\u8acb\u5047\u3001\u734e\u5b78\u91d1\u53ca\u8ab2\u7a0b\u898f\u5247<\/strong>\u7684\u4e92\u52d5\u8aaa\u660e\u3002\n                <\/p>\n            <\/div>\n        <\/div>\n        <!-- Decorative abstract shape -->\n        <div class=\"absolute -bottom-10 -right-10 w-40 h-40 bg-white\/10 rounded-full blur-3xl\"><\/div>\n    <\/header>\n\n    <main class=\"max-w-3xl mx-auto px-4 mt-8 space-y-8\">\n\n        <!-- PART 2: INITIAL TASK CHECKLIST (SEPARATED) -->\n        <section class=\"section-card p-6 border-2 border-brand-cream bg-white\">\n            <div class=\"flex items-center gap-3 mb-5\">\n                <div class=\"w-10 h-10 bg-brand-cream rounded-xl flex items-center justify-center text-xl\">\ud83d\ude80<\/div>\n                <div>\n                    <h2 class=\"text-lg font-black text-slate-800\">\u5165\u5b78\u9996\u65e5\u6aa2\u67e5\u6e05\u55ae<\/h2>\n                    <p class=\"text-xs text-slate-400\">\u8acb\u78ba\u8a8d\u60a8\u5df2\u5b8c\u6210\u4ee5\u4e0b\u95dc\u9375\u884c\u653f\u6b65\u9a5f<\/p>\n                <\/div>\n            <\/div>\n\n            <div class=\"space-y-3\" id=\"checklist-root\">\n                <!-- Checkbox items -->\n                <label class=\"flex items-center gap-4 p-4 rounded-xl border border-slate-100 hover:bg-slate-50 cursor-pointer transition-all\">\n                    <div class=\"relative w-6 h-6 flex items-center justify-center shrink-0\">\n                        <input type=\"checkbox\" class=\"sr-only check-item\" onchange=\"updateProgress()\">\n                        <div class=\"check-visual w-5 h-5 border-2 border-slate-200 rounded-md transition-all flex items-center justify-center\"><\/div>\n                    <\/div>\n                         <a href=\"https:\/\/wa.link\/xh1v4c\" <span class=\"text-sm font-bold text-slate-600\">\u63d0\u4f9b Gmail \u5730\u5740\u4ee5\u4fbf\u63a5\u6536\u96f2\u7aef\u5b78\u7fd2\u8cc7\u6e90(\u9ede\u64ca\u9019\u88e1)<\/span>    <\/a>\n                <\/label>\n                \n                <label class=\"flex items-center gap-4 p-4 rounded-xl border border-slate-100 hover:bg-slate-50 cursor-pointer transition-all\">\n                    <div class=\"relative w-6 h-6 flex items-center justify-center shrink-0\">\n                        <input type=\"checkbox\" class=\"sr-only check-item\" onchange=\"updateProgress()\">\n                        <div class=\"check-visual w-5 h-5 border-2 border-slate-200 rounded-md transition-all flex items-center justify-center\"><\/div>\n                    <\/div>\n                    <span class=\"text-sm font-bold text-slate-600\">\u6b63\u5f0f\u52a0\u5165 WhatsApp Community \u63a5\u6536\u5bb6\u9577\u901a\u77e5<\/span>\n                <\/label>\n\n                <label class=\"flex items-center gap-4 p-4 rounded-xl border border-slate-100 hover:bg-slate-50 cursor-pointer transition-all\">\n                    <div class=\"relative w-6 h-6 flex items-center justify-center shrink-0\">\n                        <input type=\"checkbox\" class=\"sr-only check-item\" onchange=\"updateProgress()\">\n                        <div class=\"check-visual w-5 h-5 border-2 border-slate-200 rounded-md transition-all flex items-center justify-center\"><\/div>\n                    <\/div>\n                    <span class=\"text-sm font-bold text-slate-600\">\u78ba\u8a8d\u5b69\u5b50\u5df2\u5099\u59a5\u6821\u5fbd\u53ca\u9818\u8896\u8b77\u7167 (Leader Passport)<\/span>\n                <\/label>\n            <\/div>\n\n            <!-- Progress Meter -->\n            <div class=\"mt-6 pt-4 border-t border-slate-50 flex items-center gap-4\">\n                <div class=\"flex-1 h-2 bg-slate-100 rounded-full overflow-hidden\">\n                    <div id=\"pb-fill\" class=\"h-full bg-brand-blue transition-all duration-500 w-0\"><\/div>\n                <\/div>\n                <span id=\"pb-text\" class=\"text-xs font-black text-brand-blue tracking-tighter\">0%<\/span>\n            <\/div>\n        <\/section>\n\n        <!-- PART 3: DETAILED CATEGORIES (ACCORDIONS) -->\n        <div class=\"space-y-4\">\n            <h3 class=\"text-xs font-black text-slate-400 uppercase tracking-widest px-2 mb-2\">\u8ab2\u7a0b\u8a73\u7d30\u898f\u7bc4<\/h3>\n\n            <!-- Category: Materials -->\n            <div class=\"section-card overflow-hidden\">\n                <button class=\"w-full p-6 text-left flex justify-between items-center group accordion-btn\">\n                    <div class=\"flex items-center gap-4\">\n                        <div class=\"w-12 h-12 bg-brand-cream rounded-2xl flex items-center justify-center text-2xl group-hover:rotate-12 transition-transform\">\ud83c\udf92<\/div>\n                        <div>\n                            <h4 class=\"font-black text-slate-800\">\u91cd\u8981\u7269\u54c1\u8207\u65e5\u5e38\u7d00\u5f8b<\/h4>\n                            <p class=\"text-[10px] text-slate-400 uppercase font-bold mt-0.5\">Passport, Recording, Stationery<\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"acc-icon w-8 h-8 rounded-full border border-slate-100 flex items-center justify-center text-slate-300\">\u25bc<\/div>\n                <\/button>\n                <div class=\"accordion-content px-6\">\n                    <div class=\"space-y-4\">\n                        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n                            <div class=\"p-4 bg-slate-50 rounded-2xl border-l-4 border-brand-blue\">\n                                <h5 class=\"text-sm font-black mb-2 flex items-center gap-2\">\ud83c\udf99\ufe0f \u9304\u97f3\u63d0\u4ea4 (\u9031\u4e00\u81f3\u4e94)<\/h5>\n                                <p class=\"text-xs text-slate-500 mb-3 leading-relaxed\">\u5bb6\u9577\u9700\u6bcf\u5929\u5354\u52a9\u5b69\u5b50\u9304\u97f3\u53ca\u6717\u8b80\u7df4\u7fd2\u3002<\/p>\n                                <a href=\"https:\/\/wa.link\/4lmfnf\" target=\"_blank\" class=\"inline-flex items-center gap-2 bg-[#25D366] text-white text-[10px] font-bold py-1.5 px-3 rounded-full hover:opacity-90 transition-opacity\">\n                                    <span>\u50b3\u9001\u81f3 WhatsApp 91519368<\/span>\n                                <\/a>\n                            <\/div>\n                            <div class=\"p-4 bg-slate-50 rounded-2xl border-l-4 border-brand-blue\">\n                                <h5 class=\"text-sm font-black mb-2 flex items-center gap-2\">\u270f\ufe0f \u6587\u5177\u5b89\u6392<\/h5>\n                                <p class=\"text-xs text-slate-500 leading-relaxed\"><strong>\u4e0a\u5802\u7121\u9700\u81ea\u5099\u6587\u5177<\/strong>\uff0c\u672c\u6821\u6703\u5168\u9762\u63d0\u4f9b\u6240\u9700\u5b78\u7fd2\u5de5\u5177\u3002<\/p>\n                            <\/div>\n                        <\/div>\n                        <div class=\"p-4 bg-brand-cream\/30 rounded-2xl\">\n                            <h5 class=\"text-sm font-black mb-1\">\u6821\u5fbd\u8207\u8b77\u7167\uff1a\u6bcf\u5802\u5fc5\u9700\u5e36<\/h5>\n                            <ul class=\"text-xs text-slate-600 space-y-1 mt-2\">\n                                <li>\u2022 \u6821\u5fbd\u907a\u5931\u88dc\u9818\u8cbb\u7528\uff1a$20<\/li>\n                                <li>\u2022 \u8b77\u7167\u907a\u5931\u88dc\u9818\u8cbb\u7528\uff1a$30 (\u4e14\u4e0d\u88dc\u767c\u820a\u5370\u7ae0)<\/li>\n                            <\/ul>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Category: Attendance -->\n            <div class=\"section-card overflow-hidden\">\n                <button class=\"w-full p-6 text-left flex justify-between items-center group accordion-btn\">\n                    <div class=\"flex items-center gap-4\">\n                        <div class=\"w-12 h-12 bg-brand-cream rounded-2xl flex items-center justify-center text-2xl group-hover:rotate-12 transition-transform\">\ud83d\udcc5<\/div>\n                        <div>\n                            <h4 class=\"font-black text-slate-800\">\u51fa\u5e2d\u898f\u5247\u8207\u8acb\u5047\u5236\u5ea6<\/h4>\n                            <p class=\"text-[10px] text-slate-400 uppercase font-bold mt-0.5\">10\/12 Rule, Sick Leave Policy<\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"acc-icon w-8 h-8 rounded-full border border-slate-100 flex items-center justify-center text-slate-300\">\u25bc<\/div>\n                <\/button>\n                <div class=\"accordion-content px-6\">\n                    <div class=\"flex flex-col md:flex-row gap-8 items-center\">\n                        <div class=\"flex-1 space-y-4\">\n                            <div class=\"p-4 bg-red-50 rounded-xl text-red-600 font-bold text-xs border border-red-100\">\n                                \ud83d\udce2 \u6ce8\u610f\uff1a\u672c\u8ab2\u7a0b\u300c\u4e0d\u8a2d\u88dc\u5802\u300d\u6a5f\u5236\u3002\n                            <\/div>\n                            <ul class=\"space-y-3 text-sm\">\n                                <li class=\"flex items-start gap-3\">\n                                    <span class=\"w-1.5 h-1.5 bg-brand-blue rounded-full mt-1.5 shrink-0\"><\/span>\n                                    <span><strong>\u75c5\u5047\uff1a<\/strong>\u5fc5\u9808\u5411\u884c\u653f\u7d44\u63d0\u4ea4\u6709\u6548<strong>\u91ab\u751f\u7d19<\/strong>\u3002<\/span>\n                                <\/li>\n                                <li class=\"flex items-start gap-3\">\n                                    <span class=\"w-1.5 h-1.5 bg-brand-blue rounded-full mt-1.5 shrink-0\"><\/span>\n                                    <span><strong>\u4e8b\u5047\uff1a<\/strong>\u9700\u6700\u5c11\u65bc<strong>\u4e00\u661f\u671f\u524d<\/strong>\u63d0\u524d\u7533\u8acb\u3002<\/span>\n                                <\/li>\n                            <\/ul>\n                            <p class=\"text-xs text-slate-400 italic\">\n                                * \u5b78\u54e1\u5fc5\u9808\u5728 12 \u5802\u4e2d\u51fa\u5e2d\u6700\u5c11 10 \u5802\uff0c\u65b9\u7b26\u5408\u9818\u53d6\u8b49\u66f8\u53ca\u734e\u5b78\u91d1\u7684\u57fa\u672c\u689d\u4ef6\u3002\uff08\u9664\u7279\u5225\u39d7\u6838\uff09\n                            <\/p>\n                        <\/div>\n                        <div class=\"w-full md:w-auto flex flex-col items-center\">\n                            <div class=\"chart-container\">\n                                <canvas id=\"attendanceChart\"><\/canvas>\n                            <\/div>\n                            <span class=\"text-[10px] font-bold text-slate-300 mt-2 uppercase tracking-widest\">Attendance Safety Margin<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Category: Scholarship -->\n            <div class=\"section-card overflow-hidden\">\n                <button class=\"w-full p-6 text-left flex justify-between items-center group accordion-btn\">\n                    <div class=\"flex items-center gap-4\">\n                        <div class=\"w-12 h-12 bg-brand-cream rounded-2xl flex items-center justify-center text-2xl group-hover:rotate-12 transition-transform\">\ud83d\udc8e<\/div>\n                        <div>\n                            <h4 class=\"font-black text-slate-800\">\u300e\u535a\u96c5\u300f \u734e\u5b78\u91d1\u8a08\u5283<\/h4>\n                            <p class=\"text-[10px] text-slate-400 uppercase font-bold mt-0.5\">Evaluation, Goals, Excellence<\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"acc-icon w-8 h-8 rounded-full border border-slate-100 flex items-center justify-center text-slate-300\">\u25bc<\/div>\n                <\/button>\n                <div class=\"accordion-content px-6\">\n                    <div class=\"space-y-4\">\n                        <div class=\"bg-brand-cream p-6 rounded-3xl relative overflow-hidden\">\n                            <div class=\"relative z-10\">\n                                <h5 class=\"text-xs font-black text-slate-500 uppercase tracking-widest mb-1\">Scholarship Award<\/h5>\n                                <div class=\"text-4xl font-black text-slate-800 mb-2\">\u6700\u9ad8HKD $1,000<\/div>\n                                <p class=\"text-sm text-slate-600 leading-relaxed\">\n                                    \u7b26\u5408\u51fa\u5e2d\u8981\u6c42\u7684\u5091\u51fa\u5b78\u54e1\u5c07\u6709\u6a5f\u6703\u7372\u9812\u734e\u5b78\u91d1\uff0c\u4ee5\u9f13\u52f5\u5176\u9818\u8896\u7279\u8cea\u4e4b\u5c55\u73fe\u3002\n                                <\/p>\n                            <\/div>\n                            <div class=\"absolute -right-5 -bottom-5 text-8xl opacity-10 grayscale\">\ud83e\udd47<\/div>\n                        <\/div>\n                        \n                        <div class=\"bg-slate-50 p-4 rounded-2xl\">\n                            <h5 class=\"text-xs font-black text-slate-800 mb-2\">\u7504\u9078\u6a19\u6e96 (Criteria)<\/h5>\n                            <ol class=\"space-y-2\">\n                                <li class=\"text-sm flex items-center gap-2\">\n                                    <span class=\"w-5 h-5 bg-white rounded-md flex items-center justify-center text-[10px] font-bold text-brand-blue shadow-sm\">1<\/span>\n                                    \u5b78\u54e1\u4e0a\u8ab2\u7684\u6574\u9ad4\u4e3b\u52d5\u6027\u8207\u8868\u73fe\u3002\n                                <\/li>\n                                <li class=\"text-sm flex items-center gap-2\">\n                                    <span class=\"w-5 h-5 bg-white rounded-md flex items-center justify-center text-[10px] font-bold text-brand-blue shadow-sm\">2<\/span>\n                                    \u6bcf\u671f\u9810\u8a2d\u5b78\u7fd2\u76ee\u6a19\u7684\u9054\u6210\u5ea6\u3002\n                                <\/li>\n                            <\/ol>\n                            <p class=\"text-[10px] text-red-400 font-bold mt-3\">\u203b \u6240\u6709\u5b78\u7fd2\u76ee\u6a19\u5fc5\u9808\u5728\u9650\u671f\u524d\u5b8c\u6210\uff0c\u4e0d\u5f97\u5f8c\u88dc\u3002<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\u2028\u2028  \n        <!-- NEW: Full Notice Drop-down -->\n            <div class=\"section-card overflow-hidden border-2 border-brand-blue\/30\">\n                <button class=\"w-full p-6 text-left flex justify-between items-center group accordion-btn\">\n                    <div class=\"flex items-center gap-4\">\n                        <div class=\"w-12 h-12 bg-brand-blue rounded-2xl flex items-center justify-center text-2xl group-hover:scale-110 transition-transform\">\ud83d\udcc4<\/div>\n                        <div>\n                            <h4 class=\"font-black text-slate-800\">\u6eab\u99a8\u63d0\u793a\u5168\u6587<\/h4>\n                            <p class=\"text-[10px] text-brand-blue uppercase font-bold mt-0.5\">Full Document Notice<\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"acc-icon w-8 h-8 rounded-full border border-slate-100 flex items-center justify-center text-slate-300\">\u25bc<\/div>\n                <\/button>\n                <div class=\"accordion-content px-6\">\n                    <div class=\"p-6 bg-slate-50 rounded-2xl text-sm leading-relaxed text-slate-700 space-y-4\">\n                        <div class=\"border-b border-slate-200 pb-2\">\n                            <h5 class=\"font-black text-lg\">\u535a\u96c5\u9818\u8896\u734e\u5b78\u91d1\u8a08\u5283\u53ca SOGO \u51a0\u540d\u8d0a\u52a9<\/h5>\n                            <p class=\"font-bold\">\u3010\u9996\u5802\u5bb6\u9577\u6ce8\u610f\u4e8b\u9805\uff1a\u7d66\u5bb6\u9577\u7684\u6eab\u99a8\u63d0\u793a\u3011<\/p>\n                        <\/div>\n                        <p>\u5404\u4f4d\u5bb6\u9577\uff1a<br>\u6b61\u8fce\u53c3\u52a0\u300c\u535a\u96c5\u9818\u8896\u734e\u5b78\u91d1\u8a08\u5283\u53ca SOGO \u51a0\u540d\u8d0a\u52a9\u300d\u3002\u70ba\u4e86\u8b93\u5b78\u751f\u80fd\u66f4\u9806\u66a2\u5730\u6295\u5165\u5b78\u7fd2\uff0c\u4e26\u7372\u53d6\u6700\u4f73\u7684\u5b78\u7fd2\u6210\u679c\uff0c\u8acb\u5bb6\u9577\u7279\u5225\u7559\u610f\u4ee5\u4e0b\u9996\u5802\u53ca\u65e5\u5e38\u5b78\u7fd2\u7684\u5404\u9805\u7d30\u7bc0\uff0c\u5305\u62ec\u8acb\u5047\u5236\u5ea6\u53ca\u734e\u5b78\u91d1\u76f8\u95dc\u689d\u6b3e\uff1a<\/p>\n                        \n                        <div class=\"space-y-3\">\n                            <p><strong>1. \u65e5\u5e38\u5b78\u7fd2\u8207\u6e96\u5099<\/strong><br>\n                            \u6bcf\u5929\u9304\u97f3\u8207\u6717\u8b80\uff1a \u9818\u8896\u990a\u6210\u9700\u8981\u6301\u7e8c\u7df4\u7fd2\u3002\u8acb\u5bb6\u9577\u5354\u52a9\u5b69\u5b50\u6bcf\u5929\u9032\u884c\u9304\u97f3\u4efb\u52d9\u53ca\u6717\u8b80\u7df4\u7fd2\uff0c\u5efa\u7acb\u7a69\u56fa\u7684\u8a9e\u8a00\u57fa\u790e\u3002 (\u661f\u671f\u4e00\u81f3\u4e94\u9304\u97f3\u50b3\u81f3 WhatsApp 91519368)<br>\n                            \u8046\u807d\u7df4\u7fd2\uff1a \u8ab2\u7a0b\u91cd\u8996\u807d\u529b\u767c\u5c55\uff0c\u8acb\u5728\u5bb6\u4e2d\u591a\u5229\u7528\u6559\u5b78\u8cc7\u6e90\u9032\u884c\u8046\u807d\u8a13\u7df4\u3002<br>\n                            \u4f69\u6234\u6821\u5fbd\uff1a \u4e0a\u8ab2\u6642\u5fc5\u9808\u4f69\u6234\u6821\u5fbd\u3002\u6821\u5fbd\u662f\u5b78\u54e1\u8eab\u4efd\u7684\u8c61\u5fb5\uff0c\u82e5\u907a\u5931\u6821\u5fbd\u9700\u53e6\u4ed8 $20 \u88dc\u9818\u8cbb\u7528\u3002<br>\n                            <strong>\u6587\u5177\u63d0\u4f9b\uff1a<\/strong> \u4e0a\u5802\u7121\u9700\u81ea\u5e36\u6587\u5177\uff0c\u672c\u6821\u6703\u63d0\u4f9b\u3002<\/p>\n                            \n                            <p><strong>2. \u91cd\u8981\u624b\u518a\uff1aLeader Passport (\u9818\u8896\u8b77\u7167)<\/strong><br>\n                            \u651c\u5e36\u8981\u6c42\uff1a \u5b78\u751f\u5fc5\u9808\u6bcf\u5802\u651c\u5e36 Leader Passport \u4ee5\u8a18\u9304\u8868\u73fe\u8207\u5206\u6578\u3002<br>\n                            \u907a\u5931\u8655\u7406\uff1a \u9818\u8896\u8b77\u7167\u4e0d\u8a2d\u5f8c\u88dc\u3002\u4e00\u7d93\u907a\u5931\uff0c\u8b77\u7167\u5167\u6240\u6709\u7d2f\u7a4d\u5206\u6578\u4ea6\u6703\u540c\u6642\u907a\u5931\u3002<br>\n                            \u88dc\u9818\u8cbb\u7528\uff1a \u5982\u9700\u88dc\u9818\uff0c\u5bb6\u9577\u9700\u652f\u4ed8 $30 \u884c\u653f\u8cbb\u7528\uff0c\u4e14\u4e0d\u7372\u88dc\u767c\u4e4b\u524d\u5df2\u84cb\u4e4b\u5370\u7ae0\u3002<br>\n                            \u5370\u7ae0\u898f\u5247\uff1a \u6240\u6709\u5370\u7ae0\u5747\u4e0d\u8a2d\u88dc\u5370\uff0c\u8acb\u52d9\u5fc5\u63d0\u9192\u5b69\u5b50\u59a5\u5584\u4fdd\u7ba1\u3002<\/p>\n                            \n                            <p><strong>3. \u51fa\u5e2d\u8207\u8acb\u5047\u5236\u5ea6<\/strong><br>\n                            \u4e0d\u8a2d\u88dc\u5802\uff1a \u672c\u8a08\u5283\u6240\u6709\u8ab2\u7a0b\u5747\u4e0d\u8a2d\u88dc\u5802\u3002<br>\n                            \u8acb\u5047\u7a0b\u5e8f\uff1a<br>\n                            \u4e8b\u5047\uff1a \u5fc5\u9808\u65bc\u4e00\u661f\u671f\u524d\u63d0\u51fa\u7533\u8acb\u3002<br>\n                            \u75c5\u5047\uff1a \u5fc5\u9808\u63d0\u4ea4\u6709\u6548\u4e4b\u91ab\u751f\u8b49\u660e\u6587\u4ef6 (\u91ab\u751f\u7d19)\u3002<br>\n                            \u51fa\u5e2d\u7387\u8981\u6c42\uff1a \u5b78\u54e1\u65bc 12 \u5802\u8ab2\u7a0b\u4e2d\uff0c\u51fa\u5e2d\u7387\u5fc5\u9808\u9054 10 \u5802\u6216\u4ee5\u4e0a\uff0c\u65b9\u6709\u6a5f\u6703\u9032\u5165\u7b2c\u4e8c\u671f\u8a08\u5283\uff0c\u4e26\u65bc\u5169\u671f\u5b8c\u7d50\u5f8c\u7372\u63d0\u540d\u722d\u53d6 SOGO \u51a0\u540d\u8d0a\u52a9\u7684\u300e\u535a\u96c5\u300f \u734e\u5b78\u91d1\u3002<\/p>\n                            \n                            <p><strong>4. \u734e\u5b78\u91d1\u53ca\u76ee\u6a19\u5b8c\u6210<\/strong><br>\n                            \u7504\u9078\u6e96\u5247\uff1a \u734e\u5b78\u91d1\u7684\u7504\u9078\u5c07\u8996\u4e4e\u5b78\u54e1\u7684\u4e0a\u8ab2\u8868\u73fe\u53ca\u9810\u8a2d\u76ee\u6a19\u7684\u5b8c\u6210\u7a0b\u5ea6\u3002<br>\n                            \u734e\u52f5\u5236\u5ea6\uff1a \u8868\u73fe\u512a\u79c0\u4e4b\u5b78\u54e1\u6700\u9ad8\u53ef\u7372 $1000 \u734e\u5b78\u91d1\u53ca\u8b49\u66f8\u8868\u63da\u3002<br>\n                            \u76ee\u6a19\u9650\u671f\uff1a \u6240\u6709\u9810\u8a2d\u76ee\u6a19\u5fc5\u9808\u65bc\u9650\u671f\u524d\u5b8c\u6210\u3002\u9664\u7279\u5225\u7533\u8acb\u4e26\u7372\u6279\u5916\uff0c\u4e00\u5f8b\u4e0d\u53ef\u5f8c\u88dc\u3002\u907a\u5931\u8b77\u7167\u6216\u56b4\u91cd\u7f3a\u5e2d\u5c07\u76f4\u63a5\u5f71\u97ff\u734e\u5b78\u91d1\u8cc7\u683c\u3002<\/p>\n                            \n                            <p><strong>5. \u5e33\u865f\u767b\u8a18\u8207\u6e9d\u901a<\/strong><br>\n                            Gmail \u96fb\u90f5\u767b\u8a18\uff1a \u8acb\u63d0\u4f9b\u6709\u6548\u7684 Gmail \u5730\u5740 \u9032\u884c\u767b\u8a18\uff0c\u4ee5\u4fbf\u63a5\u6536\u96f2\u7aef\u8cc7\u6e90\u3002<br>\n                            WhatsApp Community\uff1a \u8acb\u52d9\u5fc5\u52a0\u5165\u5b98\u65b9 WhatsApp Community\uff0c\u7559\u610f\u6700\u65b0\u7684\u5bb6\u9577\u901a\u544a\u8207\u8a0a\u606f\u3002<\/p>\n                            \n                            <p><strong>6. \u8ab2\u7a0b\u67b6\u69cb\u8207\u8cc7\u6e90<\/strong><br>\n                            \u4e86\u89e3\u67b6\u69cb\uff1a \u5efa\u8b70\u5bb6\u9577\u521d\u6b65\u4e86\u89e3\u8ab2\u7a0b\u67b6\u69cb\uff0c\u5354\u52a9\u5b69\u5b50\u8ddf\u9032\u5b78\u7fd2\u9032\u5ea6\u3002<br>\n                            \u6545\u4e8b\u6709\u8072\u66f8\uff1a \u8acb\u5f15\u5c0e\u5b69\u5b50\u5584\u7528\u6545\u4e8b\u6709\u8072\u66f8\u9032\u884c\u81ea\u4e3b\u5b78\u7fd2\u3002<br>\n                            \u5206\u7d44\u5236\u5ea6\uff1a \u5b78\u751f\u5c07\u7de8\u5165\u4e0d\u540c\u7d44\u5225\u9032\u884c\u5354\u4f5c\u5b78\u7fd2\u3002<\/p>\n                        <\/div>\n                        <p class=\"pt-4 font-bold border-t border-slate-200 text-right\">\u535a\u96c5\u9818\u8896\u734e\u5b78\u91d1\u8a08\u5283 \u8ab2\u7a0b\u884c\u653f\u7d44<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n        \n\n\n        <!-- FINAL ACTION -->\n        <section class=\"text-center py-10 space-y-4\">\n            <button id=\"main-ack-btn\" class=\"bg-brand-blue hover:scale-105 active:scale-95 text-white font-black py-4 px-12 rounded-2xl shadow-xl shadow-brand-blue\/20 transition-all uppercase tracking-widest text-sm\">\n                \u78ba\u8a8d\u660e\u767d\u4e0a\u8ff0\u4e8b\u9805\n            <\/button>\n            <div id=\"success-indicator\" class=\"hidden opacity-0 transform translate-y-4 transition-all duration-500\">\n                <div class=\"flex items-center justify-center gap-2 text-brand-blue font-black\">\n                    <span class=\"text-2xl\">\u2728<\/span>\n                    <span>\u611f\u8b1d\u5bb6\u9577\u7684\u914d\u5408\uff0c\u671f\u5f85\u5b69\u5b50\u7684\u6210\u9577\uff01<\/span>\n                <\/div>\n            <\/div>\n        <\/section>\n\n    <\/main>\n\n    <script>\n        \/\/ --- 1. Checklist Logic ---\n        function updateProgress() {\n            const checks = document.querySelectorAll('.check-item');\n            const total = checks.length;\n            const checkedCount = Array.from(checks).filter(c => c.checked).length;\n            const percentage = Math.round((checkedCount \/ total) * 100);\n            \n            document.getElementById('pb-fill').style.width = percentage + '%';\n            document.getElementById('pb-text').innerText = percentage + '%';\n\n            if (percentage === 100) {\n                document.getElementById('pb-fill').classList.replace('bg-brand-blue', 'bg-green-400');\n            } else {\n                document.getElementById('pb-fill').classList.replace('bg-green-400', 'bg-brand-blue');\n            }\n        }\n\n        \/\/ --- 2. Accordion Logic ---\n        const accBtns = document.querySelectorAll('.accordion-btn');\n        accBtns.forEach(btn => {\n            btn.addEventListener('click', () => {\n                const content = btn.nextElementSibling;\n                const icon = btn.querySelector('.acc-icon');\n                const isOpen = content.classList.contains('active');\n\n                \/\/ Toggle logic\n                if (isOpen) {\n                    content.classList.remove('active');\n                    icon.style.transform = 'rotate(0deg)';\n                } else {\n                    content.classList.add('active');\n                    icon.style.transform = 'rotate(180deg)';\n                    \/\/ Trigger chart if it's the attendance section\n                    if (content.querySelector('#attendanceChart')) {\n                        initChart();\n                    }\n                }\n            });\n        });\n\n        \/\/ Initialize first section\n        accBtns[0].click();\n\n        \/\/ --- 3. Chart.js Visualization ---\n        let chartInstance = null;\n        function initChart() {\n            if (chartInstance) return;\n            const ctx = document.getElementById('attendanceChart').getContext('2d');\n            chartInstance = new Chart(ctx, {\n                type: 'doughnut',\n                data: {\n                    labels: ['\u5fc5\u9808\u51fa\u5e2d\u5802\u6578', '\u5bb9\u8a31\u7f3a\u5e2d\u9650\u984d'],\n                    datasets: [{\n                        data: [10, 2],\n                        backgroundColor: ['#77bfdb', '#feface'],\n                        borderWidth: 0,\n                        hoverOffset: 12\n                    }]\n                },\n                options: {\n                    responsive: true,\n                    maintainAspectRatio: false,\n                    cutout: '80%',\n                    plugins: {\n                        legend: { display: false },\n                        tooltip: {\n                            callbacks: {\n                                label: (ctx) => ` ${ctx.label}: ${ctx.raw} \u5802`\n                            }\n                        }\n                    }\n                },\n                plugins: [{\n                    id: 'centerLabel',\n                    afterDraw: (chart) => {\n                        const { ctx, width, height } = chart;\n                        ctx.save();\n                        ctx.textAlign = 'center';\n                        ctx.textBaseline = 'middle';\n                        ctx.font = 'bold 1.8rem sans-serif';\n                        ctx.fillStyle = '#1e293b';\n                        ctx.fillText('10\/12', width \/ 2, height \/ 2 - 5);\n                        ctx.font = 'bold 0.6rem sans-serif';\n                        ctx.fillStyle = '#94a3b8';\n                        ctx.fillText('\u5b89\u5168\u51fa\u5e2d\u7dda', width \/ 2, height \/ 2 + 18);\n                        ctx.restore();\n                    }\n                }]\n            });\n        }\n\n        \/\/ --- 4. Final Interaction ---\n        document.getElementById('main-ack-btn').addEventListener('click', function() {\n            this.classList.add('hidden');\n            const success = document.getElementById('success-indicator');\n            success.classList.remove('hidden');\n            setTimeout(() => {\n                success.classList.add('opacity-100', 'translate-y-0');\n            }, 50);\n            \n            \/\/ Expand all info for final review\n            accBtns.forEach(btn => {\n                if(!btn.nextElementSibling.classList.contains('active')) btn.click();\n            });\n        });\n    <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-dade71b e-flex e-con-boxed e-con e-parent\" data-id=\"dade71b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9ad9cb5 elementor-widget elementor-widget-spacer\" data-id=\"9ad9cb5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u535a\u96c5\u9818\u8896\u734e\u5b78\u91d1\u8a08\u5283 \u53ca SOGO \u51a0\u540d\u8d0a\u52a9 &#8211; \u5bb6\u9577\u6307\u5357 Official Parent Guide 2025 2026 \u5165\u5b78\u6307\u5357<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"postBodyCss":"","postBodyMargin":[],"postBodyPadding":[],"postBodyBackground":{"backgroundType":"classic","gradient":""},"footnotes":""},"class_list":["post-1298","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wmea.charity\/index.php\/wp-json\/wp\/v2\/pages\/1298","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wmea.charity\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wmea.charity\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wmea.charity\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wmea.charity\/index.php\/wp-json\/wp\/v2\/comments?post=1298"}],"version-history":[{"count":61,"href":"https:\/\/wmea.charity\/index.php\/wp-json\/wp\/v2\/pages\/1298\/revisions"}],"predecessor-version":[{"id":1477,"href":"https:\/\/wmea.charity\/index.php\/wp-json\/wp\/v2\/pages\/1298\/revisions\/1477"}],"wp:attachment":[{"href":"https:\/\/wmea.charity\/index.php\/wp-json\/wp\/v2\/media?parent=1298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}