// 幾何圓形/橢圓拼出人物剪影 - SVG illustrations
// Keep STRICTLY geometric: circles, ellipses, stacked rects. No hand-drawn curves.
const PeopleGathering = ({ size = 280, palette }) => {
const p = palette || window.HAOLIN_TOKENS.colors;
return (
);
};
const HomePlate = ({ size = 200, palette }) => {
const p = palette || window.HAOLIN_TOKENS.colors;
return (
);
};
const HandsCircle = ({ size = 200, palette }) => {
const p = palette || window.HAOLIN_TOKENS.colors;
return (
);
};
const ChatBubbles = ({ size = 200, palette }) => {
const p = palette || window.HAOLIN_TOKENS.colors;
return (
);
};
const EmptyIllustration = ({ size = 160, palette }) => {
const p = palette || window.HAOLIN_TOKENS.colors;
return (
);
};
// Small avatar (for 主揪 profile images) - geometric head+shoulders in a circle
const AvatarGeo = ({ size = 48, seed = 0, palette }) => {
const p = palette || window.HAOLIN_TOKENS.colors;
const tones = [p.primary, p.accent, p.gold, p.warm, p.info];
const bgs = [p.primarySoft, p.accentSoft, p.bgAlt, p.lineSoft];
const tone = tones[seed % tones.length];
const bg = bgs[(seed*3) % bgs.length];
return (
);
};
// Subtly-striped placeholder for real photos
const PhotoPlaceholder = ({ width=300, height=200, label='社區照片', src, palette, style }) => {
if (src) {
return (
);
}
const p = palette || window.HAOLIN_TOKENS.colors;
const stripeId = 'ph_' + Math.random().toString(36).slice(2,8);
return (
);
};
// === New: hand-drawn-ish supportive illustrations (still stylized) ===
// Two hands overlapping / holding — softer curves, but kept geometric
const HandsOverlap = ({ size = 180, palette }) => {
const p = palette || window.HAOLIN_TOKENS.colors;
return (
);
};
// Side-by-side walking figures
const SideBySide = ({ size = 200, palette }) => {
const p = palette || window.HAOLIN_TOKENS.colors;
return (
);
};
// === Six facet icons (~80x80 illustrations) ===
const FacetMegaphone = ({ size = 80, color, bg }) => {
const p = window.HAOLIN_TOKENS.colors;
const tone = color || p.primary;
const sft = bg || p.primarySoft;
return (
);
};
const FacetClipboard = ({ size = 80, color, bg }) => {
const p = window.HAOLIN_TOKENS.colors;
const tone = color || p.gold;
const sft = bg || p.bgAlt;
return (
);
};
const FacetGear = ({ size = 80, color, bg }) => {
const p = window.HAOLIN_TOKENS.colors;
const tone = color || p.info;
const sft = bg || '#E2EBF1';
return (
);
};
const FacetTwoChairs = ({ size = 80, color, bg }) => {
const p = window.HAOLIN_TOKENS.colors;
const tone = color || p.accent;
const sft = bg || p.accentSoft;
return (
);
};
const FacetThreePeople = ({ size = 80, color, bg }) => {
const p = window.HAOLIN_TOKENS.colors;
const tone = color || p.warm;
const sft = bg || '#F7E3D2';
return (
);
};
const FacetCandle = ({ size = 80, color, bg }) => {
const p = window.HAOLIN_TOKENS.colors;
const tone = color || p.gold;
const sft = bg || p.bgAlt;
return (
);
};
Object.assign(window, {
PeopleGathering, HomePlate, HandsCircle, ChatBubbles,
EmptyIllustration, AvatarGeo, PhotoPlaceholder,
HandsOverlap, SideBySide,
FacetMegaphone, FacetClipboard, FacetGear, FacetTwoChairs, FacetThreePeople, FacetCandle,
});