index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>OpenCesium 社区</title>
  <meta name="description" content="OpenCesium 社区主页：成员与项目" />
  <link rel="icon" href="https://jiawanlong.github.io/imgs/logo.svg" type="image/svg+xml" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Noto+Sans+SC:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
  <style>
    :root {
      --bg: #f7f8fb;
      --surface: #ffffff;
      --ink: #1a1d24;
      --muted: #6b7280;
      --line: #e8ebf0;
      --accent: #1f6feb;
      --accent-soft: rgba(31, 111, 235, 0.08);
      --shadow: 0 12px 40px rgba(26, 40, 70, 0.08);
      --font: "Manrope", "Noto Sans SC", system-ui, sans-serif;
      --mono: "JetBrains Mono", ui-monospace, monospace;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font);
      background:
        radial-gradient(900px 520px at 88% 8%, rgba(120, 160, 255, 0.22), transparent 58%),
        radial-gradient(700px 420px at 8% 0%, rgba(31, 111, 235, 0.06), transparent 50%),
        var(--bg);
      color: var(--ink);
      min-height: 100vh;
      line-height: 1.6;
    }

    a { color: inherit; text-decoration: none; }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 20;
      backdrop-filter: blur(14px);
      background: rgba(247, 248, 251, 0.86);
      border-bottom: 1px solid rgba(232, 235, 240, 0.9);
    }

    .topbar-inner {
      width: min(1200px, calc(100% - 2.5rem));
      margin: 0 auto;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 0.55rem;
      font-weight: 800;
      font-size: 1.05rem;
      letter-spacing: -0.02em;
    }

    .logo img {
      width: 28px;
      height: 28px;
      display: block;
      border-radius: 6px;
    }

    .top-actions {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-left: auto;
    }

    .ghost-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      color: var(--ink);
      background: transparent;
      border: 1px solid var(--line);
      border-radius: 999px;
      transition: 0.2s ease;
    }

    .ghost-btn svg {
      display: block;
    }

    .ghost-btn:hover {
      border-color: rgba(31, 111, 235, 0.35);
      background: var(--accent-soft);
      color: var(--accent);
    }

    main {
      width: min(1200px, calc(100% - 2.5rem));
      margin: 0 auto;
      padding: 1.75rem 0 3rem;
    }

    .intro {
      margin-bottom: 1.5rem;
      padding-bottom: 1.4rem;
      border-bottom: 1px solid var(--line);
      animation: rise 0.7s ease both;
    }

    .intro h1 {
      font-size: clamp(1.7rem, 3vw, 2.1rem);
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.2;
      margin-bottom: 0.55rem;
      color: var(--accent);
    }

    .intro-desc {
      color: var(--muted);
      font-size: clamp(1.05rem, 2vw, 1.2rem);
      line-height: 1.55;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.85rem;
      margin-bottom: 2.35rem;
      animation: rise 0.75s ease both;
      animation-delay: 0.04s;
    }

    .stat {
      background: var(--surface);
      border: 1px solid rgba(232, 235, 240, 0.9);
      border-radius: 18px;
      box-shadow: var(--shadow);
      padding: 1.15rem 1rem;
      text-align: center;
    }

    .stat-apply {
      cursor: pointer;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
      font: inherit;
      color: inherit;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .stat-apply:hover {
      border-color: rgba(31, 111, 235, 0.35);
      box-shadow: 0 12px 28px rgba(31, 111, 235, 0.1);
      transform: translateY(-2px);
    }

    .toast {
      position: fixed;
      left: 50%;
      bottom: 1.75rem;
      transform: translateX(-50%) translateY(120%);
      z-index: 50;
      background: #111827;
      color: #fff;
      border-radius: 12px;
      padding: 0.85rem 1.1rem;
      font-size: 0.92rem;
      font-weight: 600;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
      opacity: 0;
      pointer-events: none;
      transition: transform 0.25s ease, opacity 0.25s ease;
      max-width: calc(100% - 2rem);
      text-align: center;
    }

    .toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
      pointer-events: auto;
    }

    .toast code {
      font-family: var(--mono);
      color: #93c5fd;
      margin: 0 0.15rem;
    }

    .stat strong {
      display: block;
      font-size: 1.7rem;
      font-weight: 800;
      letter-spacing: -0.03em;
      color: var(--ink);
      font-variant-numeric: tabular-nums;
      line-height: 1.1;
    }

    .stat span {
      display: block;
      margin-top: 0.3rem;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--muted);
    }

    .stat-apply strong {
      color: var(--accent);
      font-size: 1.35rem;
      margin: 0;
    }

    .section-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 1rem;
      animation: rise 0.75s ease both;
      animation-delay: 0.06s;
    }

    .section-head h2 {
      font-size: 1.4rem;
      font-weight: 800;
      letter-spacing: -0.02em;
    }

    .section-head p {
      color: var(--muted);
      font-size: 0.92rem;
      font-weight: 600;
    }

    .card {
      background: var(--surface);
      border-radius: 22px;
      box-shadow: var(--shadow);
      border: 1px solid rgba(232, 235, 240, 0.9);
      padding: 1.15rem;
      margin-bottom: 1rem;
      animation: rise 0.8s ease both;
      animation-delay: 0.1s;
    }

    .wall {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
      gap: 0.65rem;
    }

    .member {
      text-align: center;
      padding: 1rem 0.65rem 0.9rem;
      border-radius: 16px;
      border: 1px solid transparent;
      transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .member:hover {
      transform: translateY(-3px);
      background: #f8fafc;
      border-color: var(--line);
      box-shadow: 0 10px 24px rgba(26, 40, 70, 0.06);
    }

    .member img {
      width: 68px;
      height: 68px;
      border-radius: 50%;
      object-fit: cover;
      background: #eef2f7;
      border: 3px solid #fff;
      box-shadow: 0 0 0 1px rgba(31, 111, 235, 0.12), 0 8px 18px rgba(26, 40, 70, 0.1);
    }

    .member:hover img {
      box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.28), 0 10px 22px rgba(31, 111, 235, 0.16);
    }

    .member .name {
      margin-top: 0.65rem;
      font-size: 0.88rem;
      font-weight: 700;
      line-height: 1.25;
      word-break: break-word;
    }

    .member .handle {
      margin-top: 0.15rem;
      font-size: 0.72rem;
      color: var(--muted);
      font-family: var(--mono);
    }

    .empty {
      grid-column: 1 / -1;
      text-align: center;
      color: var(--muted);
      padding: 2rem 1rem;
    }

    .projects {
      display: grid;
      gap: 0.75rem;
    }

    .project {
      display: block;
      padding: 1.2rem 1.2rem;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, #ffffff, #f8fafc);
      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .project:hover {
      transform: translateY(-2px);
      border-color: rgba(31, 111, 235, 0.35);
      box-shadow: 0 12px 28px rgba(31, 111, 235, 0.08);
    }

    .project-top {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 0.4rem;
    }

    .project h3 {
      font-size: 1.08rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--accent);
    }

    .project .meta {
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--muted);
      background: #eef2f7;
      border-radius: 999px;
      padding: 0.2rem 0.65rem;
      white-space: nowrap;
    }

    .project p {
      color: var(--muted);
      font-size: 0.92rem;
      line-height: 1.55;
    }

    .note {
      margin: 0 0 2.35rem;
      color: var(--muted);
      font-size: 0.88rem;
    }

    .note a {
      color: var(--accent);
      font-weight: 700;
    }

    footer {
      width: min(1200px, calc(100% - 2.5rem));
      margin: 0 auto 2.5rem;
      text-align: center;
      color: var(--muted);
      font-size: 0.88rem;
    }

    footer a {
      color: var(--accent);
      font-weight: 700;
    }

    @keyframes rise {
      from { opacity: 0; transform: translateY(14px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @media (max-width: 760px) {
      main { padding-top: 1.25rem; }
      .stats { grid-template-columns: 1fr 1fr; }
      .wall { grid-template-columns: repeat(3, 1fr); gap: 0.45rem; }
      .member { padding: 0.75rem 0.35rem; }
      .member img { width: 56px; height: 56px; }
    }
  </style>
</head>
<body>
  <header class="topbar">
    <div class="topbar-inner">
      <a class="logo" href="./index.html">
        <img src="https://jiawanlong.github.io/imgs/logo.svg" alt="" width="28" height="28" />
        OpenCesium
      </a>
      <div class="top-actions">
        <a class="ghost-btn" href="https://github.com/OpenCesium" target="_blank" rel="noopener" aria-label="GitHub" title="GitHub">
          <svg width="18" height="18" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
            <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
          </svg>
        </a>
      </div>
    </div>
  </header>

  <main>
    <section class="intro">
      <h1>OpenCesium 社区</h1>
      <p class="intro-desc">打造中国 Cesium 开源生态的核心力量，以 AI 驱动三维地理的下一代基础设施。</p>
    </section>

    <div class="stats">
      <div class="stat"><strong id="stat-members">—</strong><span>公开成员</span></div>
      <div class="stat"><strong id="stat-repos">—</strong><span>仓库</span></div>
      <div class="stat"><strong id="stat-stars">—</strong><span>Stars</span></div>
      <button type="button" class="stat stat-apply" id="join-apply" aria-label="申请加入">
        <strong>申请加入</strong>
      </button>
    </div>

    <div class="section-head">
      <h2>公开成员</h2>
      <p id="member-sub">正在加载…</p>
    </div>

    <section class="card">
      <div class="wall" id="wall">
        <div class="empty">加载中…</div>
      </div>
    </section>
    <p class="note">
      若要出现在列表中，请在
      <a href="https://github.com/orgs/OpenCesium/people" target="_blank" rel="noopener">People</a>
      将自己的 Membership 设为 Public。
    </p>

    <div class="section-head">
      <h2>项目</h2>
      <p>公开仓库</p>
    </div>

    <section class="card">
      <div class="projects" id="projects">
        <div class="empty">加载中…</div>
      </div>
    </section>
  </main>

  <div class="toast" id="wechat-toast" role="status" aria-live="polite"></div>

  <footer>
    <a href="https://github.com/OpenCesium" target="_blank" rel="noopener">OpenCesium</a>
    ·
    <a href="https://opencesium.github.io/Cesium-Skills/">Cesium Skills</a>
  </footer>

  <script>
    const ORG = "OpenCesium";
    const GH = "https://api.github.com";
    const TIMEOUT = 4500;
    const HIDE_REPOS = new Set(["OpenCesium.github.io"]);
    const REPO_LINKS = {
      "Cesium-Skills": "https://opencesium.github.io/Cesium-Skills/",
    };

    function esc(s) {
      return String(s)
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;");
    }

    function withTimeout(ms, controller) {
      return setTimeout(() => controller.abort(), ms);
    }

    async function raceJson(urls, headers) {
      const controllers = urls.map(() => new AbortController());
      const timers = controllers.map((c) => withTimeout(TIMEOUT, c));
      const tasks = urls.map(async (url, i) => {
        const res = await fetch(url, { headers, signal: controllers[i].signal, cache: "no-store" });
        if (!res.ok) throw new Error(String(res.status));
        const data = await res.json();
        controllers.forEach((c, j) => { if (j !== i) c.abort(); });
        return data;
      });
      try {
        return await Promise.any(tasks);
      } finally {
        timers.forEach(clearTimeout);
      }
    }

    function memberUrls() {
      const target = `${GH}/orgs/${ORG}/public_members?per_page=100`;
      return [
        target,
        `https://ghfast.top/${target}`,
        `https://api.allorigins.win/raw?url=${encodeURIComponent(target)}`,
      ];
    }

    function repoUrls() {
      const target = `${GH}/orgs/${ORG}/repos?per_page=100&sort=updated`;
      return [
        `https://ungh.cc/orgs/${ORG}/repos`,
        target,
        `https://ghfast.top/${target}`,
      ];
    }

    function normalizeMembers(data) {
      let list = Array.isArray(data) ? data : data?.members || data?.contents || [];
      if (typeof list === "string") list = JSON.parse(list);
      if (!Array.isArray(list)) list = [];
      return list.map((m) => {
        const login = m.login || m.username;
        return {
          login,
          name: m.name || login,
          html_url: m.html_url || `https://github.com/${login}`,
          avatar_url: `https://github.com/${login}.png?size=160`,
        };
      }).filter((m) => m.login);
    }

    function normalizeRepos(data) {
      let arr = [];
      if (Array.isArray(data)) arr = data;
      else if (Array.isArray(data?.repos)) arr = data.repos;
      else if (typeof data?.contents === "string") arr = JSON.parse(data.contents);
      else if (Array.isArray(data?.contents)) arr = data.contents;

      return arr.map((r) => ({
        name: r.name,
        description: r.description,
        html_url: REPO_LINKS[r.name]
          || r.html_url
          || (r.repo ? `https://github.com/${r.repo}` : `https://github.com/${ORG}/${r.name}`),
        stargazers_count: r.stargazers_count ?? r.stars ?? 0,
        fork: !!r.fork,
      })).filter((r) => r.name && !r.fork && !HIDE_REPOS.has(r.name));
    }

    function renderMembers(members) {
      const wall = document.getElementById("wall");
      members = members.slice().sort((a, b) => a.login.localeCompare(b.login));
      document.getElementById("stat-members").textContent = members.length;
      document.getElementById("member-sub").textContent = `共 ${members.length} 人`;
      wall.innerHTML = members.length
        ? members.map((u) => `
            <a class="member" href="${u.html_url}" target="_blank" rel="noopener">
              <img src="${u.avatar_url}" alt="" loading="lazy" decoding="async" width="68" height="68" />
              <div class="name">${esc(u.name || u.login)}</div>
              <div class="handle">@${esc(u.login)}</div>
            </a>`).join("")
        : `<div class="empty">暂无公开成员</div>`;
    }

    function renderRepos(repos) {
      const projects = document.getElementById("projects");
      repos = repos.slice().sort((a, b) => b.stargazers_count - a.stargazers_count);
      document.getElementById("stat-repos").textContent = repos.length;
      document.getElementById("stat-stars").textContent = repos.reduce((s, r) => s + r.stargazers_count, 0);
      projects.innerHTML = repos.length
        ? repos.map((r) => `
            <a class="project" href="${r.html_url}" target="_blank" rel="noopener">
              <div class="project-top">
                <h3>${esc(r.name)}</h3>
                <span class="meta">★ ${r.stargazers_count}</span>
              </div>
              <p>${esc(r.description || "暂无描述")}</p>
            </a>`).join("")
        : `<div class="empty">暂无仓库</div>`;
    }

    function showError(el, msg) {
      document.getElementById(el).innerHTML = `<div class="empty">${esc(msg)}</div>`;
    }

    async function main() {
      if (location.protocol === "file:") {
        showError("wall", "请用本地服务或 GitHub Pages 打开");
        showError("projects", "请用本地服务或 GitHub Pages 打开");
        document.getElementById("member-sub").textContent = "无法加载";
        return;
      }

      const headers = { Accept: "application/vnd.github+json" };

      const membersTask = raceJson(memberUrls(), headers)
        .then((raw) => renderMembers(normalizeMembers(raw)))
        .catch((e) => {
          console.error("members", e);
          document.getElementById("member-sub").textContent = "加载失败";
          showError("wall", "成员列表读取失败，请稍后刷新");
        });

      const reposTask = raceJson(repoUrls(), headers)
        .then((raw) => renderRepos(normalizeRepos(raw)))
        .catch((e) => {
          console.error("repos", e);
          showError("projects", "仓库列表读取失败，请稍后刷新");
        });

      await Promise.all([membersTask, reposTask]);
    }

    const WECHAT = "trampjwl";
    let toastTimer = null;

    async function showWechat() {
      const toast = document.getElementById("wechat-toast");
      let copied = false;
      try {
        await navigator.clipboard.writeText(WECHAT);
        copied = true;
      } catch (_) { /* ignore */ }
      toast.innerHTML = copied
        ? `微信号 <code>${WECHAT}</code> 已复制`
        : `添加微信 <code>${WECHAT}</code> 申请加入`;
      toast.classList.add("show");
      clearTimeout(toastTimer);
      toastTimer = setTimeout(() => toast.classList.remove("show"), 3200);
    }

    document.getElementById("join-apply").addEventListener("click", showWechat);

    main();
  </script>
</body>
</html>