美君，週日好。

新店溪畔共學會・下次活動 4/25 (六) 09:00，還有 5 天

{/* quick stats */}

我的團體

1 個・28 人

本月活動

4 次

待回訊息

3 則

onNav('neighbor-upload')}>

AI 工具

上傳活動 →

協會公告

{[ { d:'4/18', t:'五月份主揪共學會報名開放', c:c.primary }, { d:'4/15', t:'新版活動上傳功能上線', c:c.accent }, { d:'4/10', t:'謝謝 33 位主揪填寫季度問卷', c:c.gold }, ].map((n, i) => (

{n.t}

{n.d}

))}

); }; // === Upload activity === const UploadPage = () => { const c = useTokens(); const [submitted, setSubmitted] = useState(false); const [photos, setPhotos] = useState(4); const [date, setDate] = useState('2026-04-19'); const [place, setPlace] = useState('新店溪碧潭段'); const [people, setPeople] = useState('12 組親子'); const [notes, setNotes] = useState('今天天氣很好，翠鳥出現了兩次。小菁媽第一次來，聊得很愉快。'); if (submitted) { return (

收到了，謝謝你。

系統正在幫你產出報導草稿，
約 1 小時內會通知你來看。
你可以先去喝一杯茶。

接下來會發生什麼

① AI 根據你的照片和文字產出 3 個報導版本

② 特派員收到通知，補採訪或直接編修

③ 你會收到完成版，看過後才發佈

); } return (

AI 工具

上傳活動成果

照片和簡單的文字就好，剩下的 AI 跟特派員會處理。

{/* Form */}

setDate(e.target.value)}/> setPeople(e.target.value)} placeholder="例如 12 組親子"/>

setPlace(e.target.value)} icon={}/>

活動照片

setPhotos(p => p + 4)} style={{ border:`2px dashed ${c.primary}60`, background:c.primarySoft+'30', borderRadius:'var(--hl-radius-xl)', padding:'24px', cursor:'pointer', textAlign:'center', }}> {photos === 0 ? ( <>

拖拉照片到這裡，或點擊選擇

可以一次 10+ 張，系統會自動壓縮

) : ( <>

{Array(photos).fill(0).map((_, i) => (

))}

已選 {photos} 張・點擊再加

)}

文字紀錄

setNotes(e.target.value)}
                placeholder="今天發生了什麼？聊天不用完整，AI 會幫你整理。"
                style={{
                  width:'100%', minHeight:120, padding:'12px 14px',
                  border:`1px solid ${c.line}`, borderRadius:'var(--hl-radius-md)',
                  fontSize:14, lineHeight:1.7, color:c.ink,
                  fontFamily:'var(--hl-font-body)', resize:'vertical',
                  outline:'none', background:c.paper,
                }}
              />
              <div style={{fontSize:11, color:c.inkMuted, marginTop:6}}>{notes.length} 字・至少 20 字，AI 才寫得出來</div>
            </div>

<div style={{display:'flex', gap:10, paddingTop:8, borderTop:`1px dashed ${c.line}`}}>
              <Button variant="secondary" style={{flex:1}}>儲存為草稿</Button>
              <Button variant="primary" style={{flex:1}} onClick={()=>setSubmitted(true)}>送出</Button>
            </div>
          </div>
        </Card>

{/* Preview */}
        <div style={{position:'sticky', top:32}}>
          <div style={{fontSize:12, color:c.inkMuted, letterSpacing:'0.08em', marginBottom:10, fontWeight:600}}>預覽</div>
          <Card style={{padding:0, overflow:'hidden'}}>
            <div style={{height:160}}>
              <PhotoPlaceholder width={500} height={160} label="你的活動封面"/>
            </div>
            <div style={{padding:'22px 24px'}}>
              <div style={{display:'flex', gap:8, marginBottom:10}}>
                <Tag tone="primary">育兒共學</Tag>
                <Tag>新北市・新店</Tag>
              </div>
              <h3 style={{fontFamily:'var(--hl-font-heading)', fontSize:19, color:c.ink, margin:'0 0 8px', fontWeight:500}}>新店溪畔共學會 · {date.slice(5).replace('-','/')}</h3>
              <p style={{fontSize:14, color:c.inkSoft, margin:0, lineHeight:1.7}}>
                {people} 在{place}聚會。{notes.slice(0, 40)}{notes.length > 40 ? '⋯⋯' : ''}
              </p>
              <div style={{marginTop:14, paddingTop:14, borderTop:`1px dashed ${c.line}`, fontSize:12, color:c.inkMuted, display:'flex', gap:14}}>
                <span><IconImage size={12} style={{marginRight:4}}/>{photos} 張</span>
                <span><IconCalendar size={12} style={{marginRight:4}}/>{date.replace(/-/g,' / ')}</span>
              </div>
            </div>
          </Card>
          <div style={{marginTop:14, padding:14, background:c.accentSoft, borderRadius:'var(--hl-radius-md)', fontSize:12, color:'#4D6D41', lineHeight:1.7}}>
            <div style={{display:'flex', gap:6, alignItems:'center', marginBottom:4, fontWeight:600}}>
              <IconSparkle size={13}/> 送出後
            </div>
            系統會根據你填的內容，在 1 小時內產出報導草稿。特派員會再聯絡你確認細節。
          </div>
        </div>
      </div>
    </div>
  );
};

// === PAGE 13: Trainee/Neighbor — Support I've Received (我收到的支持) ===
const TraineeSupportPage = ({ onNav }) => {
  const c = useTokens();
  const D = window.HAOLIN_DATA;
  const scores = D.myScores;
  const avg = Object.values(scores).reduce((a,b)=>a+b, 0) / SUPPORT_FACETS.length;
  const ready = avg >= 2;

return (
    <div style={{padding:'32px 40px', background:c.bg, minHeight:'100vh'}}>
      {/* Header */}
      <div style={{marginBottom:24}}>
        <div style={{fontSize:13, color:c.primary, fontWeight:600, letterSpacing:'0.08em'}}>我的同行之路</div>
        <h1 style={{fontFamily:'var(--hl-font-heading)', fontSize:30, color:c.ink, margin:'6px 0 4px', fontWeight:500}}>這是你這三個月收到的支持。</h1>
        <p style={{color:c.inkSoft, fontSize:14, margin:0, lineHeight:1.7, maxWidth:600}}>
          不是你的「完成度」——是我們一起走過的路。每一筆都是真實被人接住的時刻。
        </p>
      </div>

{/* Top: radar + score detail */}
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:18, marginBottom:18}}>
        <Card style={{padding:'28px 32px'}}>
          <div style={{display:'flex', gap:24, alignItems:'center'}}>
            <div style={{flexShrink:0}}><RadarChart scores={scores} size={240} tone="accent"/></div>
            <div style={{flex:1, minWidth:0}}>
              <div style={{fontSize:12, color:c.inkMuted, marginBottom:8}}>你目前的六面向</div>
              <div style={{display:'flex', flexDirection:'column', gap:10}}>
                {SUPPORT_FACETS.map(f => {
                  const v = scores[f.key];
                  return (
                    <div key={f.key} style={{display:'flex', alignItems:'center', gap:10}}>
                      <span style={{fontSize:12, color:c.inkSoft, width:64}}>{f.label}</span>
                      <div style={{flex:1, height:6, background:c.bgAlt, borderRadius:999, overflow:'hidden'}}>
                        <div style={{width:`${(v/3)*100}%`, height:'100%', background:f.color, borderRadius:999, transition:'width 400ms'}}/>
                      </div>
                      <span style={{fontSize:11, color:c.inkMuted, width:28, textAlign:'right'}}>{v}/3</span>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </Card>

{/* Ready-to-open CTA card */}
        <Card style={{
          padding:'28px 32px',
          background: ready ? c.ink : c.bgAlt,
          color: ready ? '#fff' : c.ink,
          border: ready ? 'none' : `1px solid ${c.line}`,
          display:'flex', flexDirection:'column', justifyContent:'space-between',
        }}>
          <div>
            <div style={{fontSize:12, color: ready ? '#D9A84A' : c.inkMuted, letterSpacing:'0.08em', fontWeight:600, marginBottom:10}}>
              {ready ? '開團準備度' : '持續被陪伴中'}
            </div>
            <div style={{fontFamily:'var(--hl-font-heading)', fontSize:26, fontWeight:500, lineHeight:1.45, marginBottom:14}}>
              {ready ? '你準備好了。\n要不要試著開一次自己的團？' : '這段日子，你正在被陪伴。\n不急著開團。'}
            </div>
            <p style={{fontSize:13, lineHeight:1.8, color: ready ? '#C8B9A8' : c.inkSoft, margin:0}}>
              {ready
                ? '你不是要變成完美的主揪。我們會跟你一起準備第一場——文案、報名、保險、現場，都有人接著。'
                : '當六個面向平均 ≥ 2/3，我們會邀請你試看看開團。在那之前，這份支持不會消失。'}
            </p>
          </div>
          <div style={{display:'flex', gap:10, marginTop:22}}>
            {ready ? (
              <>
                <Button variant="primary" style={{flex:1}} onClick={()=>onNav && onNav('neighbor-upload')}><IconPlus size={14}/> 開始準備第一場活動</Button>
                <Button variant="ghost" style={{color:'#C8B9A8'}}>跟小好聊聊</Button>
              </>
            ) : (
              <>
                <Button variant="primary" style={{flex:1}}><IconChat size={14}/> 跟小好聊聊下一步</Button>
                <Button variant="ghost">看支持資源地圖</Button>
              </>
            )}
          </div>
        </Card>
      </div>

{/* Timeline */}
      <Card padding={false} style={{marginBottom:18}}>
        <div style={{padding:'20px 28px', borderBottom:`1px solid ${c.line}`, display:'flex', alignItems:'center', justifyContent:'space-between'}}>
          <div>
            <h3 style={{fontFamily:'var(--hl-font-heading)', fontSize:18, color:c.ink, margin:0, fontWeight:500}}>這陣子，被接住的時刻</h3>
            <p style={{fontSize:12, color:c.inkMuted, margin:'4px 0 0'}}>由新到舊，這三個月一共 {D.mySupportTimeline.length} 次</p>
          </div>
          <Button variant="ghost" size="sm">匯出 PDF <IconArrow size={13}/></Button>
        </div>
        <div style={{padding:'8px 28px 20px'}}>
          {D.mySupportTimeline.map((ev, i) => {
            const f = SUPPORT_FACETS.find(x => x.key === ev.facet);
            const isLast = i === D.mySupportTimeline.length - 1;
            return (
              <div key={i} style={{display:'flex', gap:18, position:'relative', padding:'14px 0'}}>
                {/* timeline line */}
                <div style={{width:72, flexShrink:0, paddingTop:4}}>
                  <div style={{fontSize:12, color:c.inkMuted, fontWeight:500}}>{ev.date}</div>
                  <div style={{fontSize:10, color:f.color, marginTop:3, letterSpacing:'0.05em', fontWeight:600}}>{f.short}</div>
                </div>
                <div style={{position:'relative', width:12, flexShrink:0}}>
                  <div style={{width:12, height:12, borderRadius:'50%', background:f.color, marginTop:6, boxShadow:`0 0 0 4px ${f.bg}`}}/>
                  {!isLast && <div style={{position:'absolute', left:5, top:22, bottom:-16, width:2, background:c.lineSoft}}/>}
                </div>
                <div style={{flex:1, paddingTop:2, paddingBottom:10, borderBottom: isLast ? 'none' : `1px dashed ${c.lineSoft}`}}>
                  <div style={{
                    display:'inline-flex', alignItems:'center', gap:6, padding:'2px 10px',
                    background:f.bg, color:f.color, borderRadius:999, fontSize:11, fontWeight:600, marginBottom:8,
                  }}>
                    <span style={{width:5, height:5, borderRadius:'50%', background:f.color}}/>
                    {f.label}
                  </div>
                  <div style={{fontSize:14, color:c.ink, lineHeight:1.75}}>{ev.text}</div>
                </div>
              </div>
            );
          })}
        </div>
      </Card>

{/* Footer note */}
      <div style={{
        padding:'22px 28px', background:c.paper, border:`1px dashed ${c.line}`,
        borderRadius:'var(--hl-radius-xl)', display:'flex', gap:16, alignItems:'center',
      }}>
        <AvatarGeo size={46} seed={7}/>
        <div style={{flex:1, minWidth:0}}>
          <div style={{fontSize:13, color:c.inkMuted, marginBottom:2}}>你的對接人 · 小好（協會秘書）</div>
          <div style={{fontSize:14, color:c.inkSoft, lineHeight:1.7}}>
            「這不是考試，沒有畢業。只要你願意繼續來，我就在這。」
          </div>
        </div>
        <Button variant="secondary" size="sm"><IconChat size={13}/> 傳訊息給小好</Button>
      </div>
    </div>
  );
};

Object.assign(window, { NeighborHomePage, UploadPage, TraineeSupportPage });

美君，週日好。

最近的活動

協會公告

收到了，謝謝你。

上傳活動成果