<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Dytchem的订阅 - 高性价比 VPS 与 AI 订阅追踪</title>
<meta name="description" content="Dytchem 的订阅脱敏展示：14个 VPS/AI 订阅的月度合计 ¥161.32、年度预估 ¥1935.80，按续费时间与价格多维排序，托管于 AndNode，数据来自 Wallos + Fixer 实时汇率。">
<meta name="keywords" content="Dytchem,VPS,订阅追踪,Wallos,AndNode,Fixer,云服务器,NAT VPS">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://wallos.dytchem.cn/public/">
<meta property="og:title" content="Dytchem的订阅">
<meta property="og:description" content="14个 VPS/AI 订阅 · 月度 ¥161.32 · 年度 ¥1935.80 · 托管于 AndNode">
<meta property="og:url" content="https://wallos.dytchem.cn/public/">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Dytchem">
<style>
:root{--bg:#0b0e11;--card:#1e2329;--line:#2b3139;--text:#eaecef;--muted:#848e9c;--yellow:#fcd535;--green:#0ecb81}
[data-theme="light"]{--bg:#f5f7fb;--card:#ffffff;--line:#e5e7eb;--text:#111827;--muted:#6b7280}
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text);font-family:BinancePlex,Inter,ui-sans,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
.wrap{max-width:1120px;margin:0 auto;padding:24px 16px 28px}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px} .page-head-actions{display:flex;align-items:center;gap:8px} .refresh-btn{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);background:var(--card);border:1px solid var(--line);padding:7px 12px;border-radius:999px;cursor:pointer} .refresh-btn:hover{border-color:var(--muted);color:var(--text)} .refresh-btn:disabled{opacity:.6;cursor:not-allowed}
.page-head h1{font-size:22px;font-weight:700;margin:0;letter-spacing:.2px}
.theme-switch{display:flex;gap:6px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:3px}
.theme-switch button{width:28px;height:28px;border-radius:50%;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;font-size:13px;line-height:1;display:grid;place-items:center}
.theme-switch button.active{background:var(--text);color:var(--bg);border-color:var(--line)}
.theme-switch button:hover{border-color:var(--line)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.filters{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:16px}
.filter-row{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
#catSelect,#cycleSelect,#sortSelect{text-align:center;text-align-last:center}
.filter-group{display:flex;gap:6px;flex-wrap:wrap}
.filter-group button{font-size:12px;color:var(--muted);background:transparent;border:1px solid var(--line);padding:6px 10px;border-radius:999px;cursor:pointer}
.filter-group button.active{background:var(--text);color:var(--bg);border-color:var(--text)}
.search-wrap{width:100%;margin-left:0;flex:none}
.search-wrap input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:7px 12px;font-size:12px;color:var(--text);outline:none;text-align:center}
.search-wrap input::placeholder{color:var(--muted);text-align:center}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px} .label{display:block;font-size:11px;color:var(--muted);margin-bottom:6px} .value{font-size:18px;font-weight:700}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 14px 12px;position:relative;cursor:pointer;user-select:none;-webkit-user-select:none;transition:border-color .18s,box-shadow .18s} .card.selected{border-color:var(--yellow);box-shadow:0 0 0 1px var(--yellow) inset,0 4px 16px rgba(252,213,53,.15)} .card.selected .dot{background:var(--yellow);box-shadow:0 0 0 6px rgba(252,213,53,.18)} .card .check{position:absolute;top:10px;left:10px;width:20px;height:20px;border-radius:50%;background:var(--yellow);color:#111;display:none;place-items:center;font-size:12px;font-weight:700;line-height:1;z-index:1} .card.selected .check{display:grid} .card-top{display:flex;align-items:center;gap:14px;margin-bottom:8px;padding-right:14px;justify-content:flex-start} .logo-inline{margin-left:0;display:flex;align-items:center;flex:0 0 auto} .cat{font-size:11px;color:var(--muted);background:var(--cat-bg);border:1px solid var(--line);padding:2px 7px;border-radius:999px;min-width:44px;width:44px;flex:0 0 44px;display:inline-flex;justify-content:center;text-align:center} .dot{position:absolute;top:14px;right:14px;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 6px rgba(14,203,129,.14)}
.name{font-size:15.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px} .logo-inline{margin-left:0;display:flex;align-items:center} .logo-img{height:18px;width:auto;max-width:88px;object-fit:contain;background:transparent;padding:0;border:none;display:block;border-radius:4px} .logo-img.logo-wide{height:18px;max-width:88px} .avatar{width:22px;height:22px;border-radius:6px;background:var(--cat-bg);border:1px solid var(--line);display:grid;place-items:center;font-size:11px;font-weight:700;color:#9aa3b8;flex:0 0 22px}
.price-line{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px;flex-wrap:wrap} .price{font-size:14px;font-weight:700} .price .cycle{font-size:12px;font-weight:600;color:var(--muted);margin-left:3px} .approx{font-size:11px;color:var(--muted);margin-left:6px;font-weight:500} .renew{font-size:12px;color:var(--muted)}
.meta{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:4px} .notes{font-size:12px;color:var(--muted);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.9}
.bar{height:3px;background:var(--bar-bg);border-radius:999px;margin-top:10px;overflow:hidden;border:1px solid var(--line)} .bar i{display:block;height:100%;background:var(--yellow);border-radius:999px}
.empty{grid-column:1/-1;background:var(--card);border:1px dashed var(--line);border-radius:12px;padding:28px;text-align:center;color:var(--muted)}
.foot{margin-top:24px;padding:16px 0 8px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;color:var(--muted);font-size:12px}
.foot a:visited{color:var(--muted)}
.foot-main{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.foot-main a{color:var(--muted);text-decoration:none}
.foot-main a:hover{color:var(--text);text-decoration:underline}
.foot-powered{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.foot-powered span{color:var(--muted);opacity:1}
.foot-powered img{height:18px;width:auto;vertical-align:middle;object-fit:contain;border-radius:4px}
.foot-powered .wallos-logo{background:transparent;padding:0}
.foot-links{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.foot-links a{color:var(--muted);text-decoration:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--card);font-size:14px;opacity:1;transition:all .18s}
.foot-links a:hover{color:var(--text);border-color:var(--muted);transform:translateY(-1px)}
@media(max-width:640px){.foot{flex-direction:column;align-items:center;gap:12px;text-align:center} .foot-main{justify-content:center} .foot-powered{justify-content:center} .foot-links{justify-content:center} }
@media(max-width:640px){.stats{grid-template-columns:repeat(3,1fr);gap:8px} .stat{padding:10px 12px} .value{font-size:15px} .filters{padding:10px 12px} .filter-row{gap:6px} #catSelect,#cycleSelect,#sortSelect{padding:6px 8px;font-size:11px;flex:1 1 0;min-width:0;max-width:none} #selectAllBtn,#clearSelectBtn{padding:6px 8px;font-size:11px;white-space:nowrap} }
</style>
</head>
<body>
<div class="wrap">
  <div class="page-head">
    <h1>Dytchem的订阅</h1>
    <div class="page-head-actions">
      <div class="theme-switch" id="themeSwitch">
        <button data-mode="light" title="白天">☀️</button>
        <button data-mode="dark" title="黑夜">🌙</button>
        <button data-mode="auto" title="自动" class="active">A</button>
      </div>
      <button id="hardRefresh" class="refresh-btn" title="强制刷新获取最新数据">⟳ 刷新</button>
    </div>
  </div>
  
<div class="stats" id="statsBar">
  <div class="stat"><span class="label">订阅数</span><span class="value" id="statCount" data-total="15">15</span></div>
  <div class="stat"><span class="label" id="statMonthlyLabel">月度合计</span><span class="value" id="statMonthly" data-total="166.3165291360">¥166.32</span></div>
  <div class="stat"><span class="label" id="statYearlyLabel">年度预估</span><span class="value" id="statYearly" data-total="1995.7983496316">¥1995.80</span></div>
</div>
  <div class="filters">
    <div class="search-wrap" style="margin-bottom:8px">
      <input type="search" id="searchInput" placeholder="搜索" style="text-align:center" autocomplete="off">
    </div>
    <div class="filter-row">
      <div class="filter-group" style="flex:1 1 0;min-width:0">
        <select id="catSelect" style="width:100%;height:32px;font-size:12px;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:0 10px;text-align:center;text-align-last:center;">
          <option value="all">全部分类</option><option value="AI" >AI</option><option value="Net" >Net</option><option value="VPS" >VPS</option>
        </select>
      </div>
      <div class="filter-group" style="flex:1 1 0;min-width:0">
        <select id="cycleSelect" style="width:100%;height:32px;font-size:12px;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:0 10px;text-align:center;text-align-last:center;">
          <option value="all">全部周期</option>
          <option value="月">月付</option>
          <option value="年">年付</option>
        </select>
      </div>
      <div class="filter-group" style="flex:1 1 0;min-width:0">
        <select id="sortSelect" style="width:100%;height:32px;font-size:12px;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:0 10px;text-align:center;text-align-last:center;">
          <option value="next-asc">续费时间↑</option>
          <option value="next-desc">续费时间↓</option>
          <option value="price-asc">价格↑</option>
          <option value="price-desc" selected>价格↓</option>
        </select>
      </div>
      <div class="filter-group" style="flex:1 1 0;min-width:0">
        <button id="selectAllBtn" style="width:100%;height:32px;font-size:12px;padding:0 10px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;white-space:nowrap">全部选中</button>
      </div>
      <div class="filter-group" style="flex:1 1 0;min-width:0">
        <button id="clearSelectBtn" style="width:100%;height:32px;font-size:12px;padding:0 10px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;white-space:nowrap">清除选中</button>
      </div>
    </div>
  </div>
  <div class="grid" id="cardGrid">
    
    <div class="card" data-category="VPS" data-cycle="/月" data-name="tierhive nat机" data-notes="按小时计费nat机 最低$0.1/月 目前au/fr/jp/sg四台$0.2/月" data-price="5.5786369629" data-next="1787932800">
      <span class="check">✓</span><div class="card-top"><span class="cat">VPS</span><span class="logo-inline"><span class="avatar">T</span></span><span class="dot"></span></div>
      <div class="name">TierHive NAT机</div>
      <div class="price-line"><span class="price">0.83 USD<span class="cycle">/月</span><span class="approx">≈ ¥5.58 /月</span></span><span class="renew">6天后 8月29日 续费</span></div>
      <div class="notes">按小时计费NAT机 最低$0.1/月 目前au/fr/jp/sg四台$0.2/月</div>
      <div class="bar"><i style="width:80%"></i></div>
    </div>
    <div class="card" data-category="VPS" data-cycle="/月" data-name="来财云 美国lxc-a" data-notes="1c 256m 0.8g 30g ipv4-nat ipv6 达拉斯" data-price="0.5000000000" data-next="1788019200">
      <span class="check">✓</span><div class="card-top"><span class="cat">VPS</span><span class="logo-inline"><img class="logo-img logo-wide" src="/logos/1787411134--LXCA.jpg" alt=""></span><span class="dot"></span></div>
      <div class="name">来财云 美国LXC-A</div>
      <div class="price-line"><span class="price">0.50 CNY<span class="cycle">/月</span><span class="approx">≈ ¥0.50 /月</span></span><span class="renew">7天后 8月30日 续费</span></div>
      <div class="notes">1C 256M 0.8G 30G ipv4-nat ipv6 达拉斯</div>
      <div class="bar"><i style="width:76%"></i></div>
    </div>
    <div class="card" data-category="VPS" data-cycle="/月" data-name="cloudnium los angeles - kvm vps" data-notes="2c 2g 20g 2t la ccs" data-price="3.6294746506" data-next="1788364800">
      <span class="check">✓</span><div class="card-top"><span class="cat">VPS</span><span class="logo-inline"><img class="logo-img logo-wide" src="/logos/1787405534-Cloudnium-Los-Angeles--KVM-VPS.png" alt=""></span><span class="dot"></span></div>
      <div class="name">Cloudnium Los Angeles - KVM VPS</div>
      <div class="price-line"><span class="price">0.54 USD<span class="cycle">/月</span><span class="approx">≈ ¥3.63 /月</span></span><span class="renew">11天后 9月3日 续费</span></div>
      <div class="notes">2C 2G 20G 2T LA CCS</div>
      <div class="bar"><i style="width:63%"></i></div>
    </div>
    <div class="card" data-category="VPS" data-cycle="/月" data-name="ulzix nat机" data-notes="低价nat鸡，目前hk不同ip有4台" data-price="3.2000000000" data-next="1788364800">
      <span class="check">✓</span><div class="card-top"><span class="cat">VPS</span><span class="logo-inline"><img class="logo-img logo-wide" src="/logos/1787410862-ulzix-nat.webp" alt=""></span><span class="dot"></span></div>
      <div class="name">ulzix NAT机</div>
      <div class="price-line"><span class="price">3.20 CNY<span class="cycle">/月</span><span class="approx">≈ ¥3.20 /月</span></span><span class="renew">11天后 9月3日 续费</span></div>
      <div class="notes">低价NAT鸡，目前hk不同ip有4台</div>
      <div class="bar"><i style="width:63%"></i></div>
    </div>
    <div class="card" data-category="AI" data-cycle="/月" data-name="opencode go" data-notes="5 小时 12 美元额度，每周 30 美元额度，每月 60 美元额度" data-price="67.2124935295" data-next="1788796800">
      <span class="check">✓</span><div class="card-top"><span class="cat">AI</span><span class="logo-inline"><img class="logo-img logo-wide" src="/logos/1787405855-OpenCode-Go.png" alt=""></span><span class="dot"></span></div>
      <div class="name">OpenCode Go</div>
      <div class="price-line"><span class="price">10.00 USD<span class="cycle">/月</span><span class="approx">≈ ¥67.21 /月</span></span><span class="renew">16天后 9月8日 续费</span></div>
      <div class="notes">5 小时 12 美元额度，每周 30 美元额度，每月 60 美元额度</div>
      <div class="bar"><i style="width:46%"></i></div>
    </div>
    <div class="card" data-category="VPS" data-cycle="/月" data-name="wap.ac tw e5 hinet lxc ipv6" data-notes="1c 512m 5g 500g ipv4-nat ipv6 hinet家宽" data-price="7.2400000000" data-next="1788969600">
      <span class="check">✓</span><div class="card-top"><span class="cat">VPS</span><span class="logo-inline"><span class="avatar">W</span></span><span class="dot"></span></div>
      <div class="name">wap.ac TW E5 HINET LXC IPv6</div>
      <div class="price-line"><span class="price">7.24 CNY<span class="cycle">/月</span><span class="approx">≈ ¥7.24 /月</span></span><span class="renew">18天后 9月10日 续费</span></div>
      <div class="notes">1C 512M 5G 500G ipv4-NAT ipv6 HiNet家宽</div>
      <div class="bar"><i style="width:40%"></i></div>
    </div>
    <div class="card" data-category="VPS" data-cycle="/月" data-name="andnode 美国轻量-a型" data-notes="2c 2g 30g 500g 50mbps la netlab 优化线路" data-price="12.8000000000" data-next="1789574400">
      <span class="check">✓</span><div class="card-top"><span class="cat">VPS</span><span class="logo-inline"><img class="logo-img logo-wide" src="/logos/1787405781-AndNode-A.png" alt=""></span><span class="dot"></span></div>
      <div class="name">AndNode 美国轻量-A型</div>
      <div class="price-line"><span class="price">12.80 CNY<span class="cycle">/月</span><span class="approx">≈ ¥12.80 /月</span></span><span class="renew">25天后 9月17日 续费</span></div>
      <div class="notes">2C 2G 30G 500G 50Mbps LA NetLab 优化线路</div>
      <div class="bar"><i style="width:16%"></i></div>
    </div>
    <div class="card" data-category="VPS" data-cycle="/月" data-name="raksmart sv-vps/cloud-vm(shared)" data-notes="2c 4g 50g 1t 硅谷 大陆优化vip" data-price="13.3752862124" data-next="1789920000">
      <span class="check">✓</span><div class="card-top"><span class="cat">VPS</span><span class="logo-inline"><img class="logo-img logo-wide" src="/logos/1787405731-RakSmart-SVVPSCloudVMShared.png" alt=""></span><span class="dot"></span></div>
      <div class="name">RakSmart SV-VPS/Cloud-VM(Shared)</div>
      <div class="price-line"><span class="price">1.99 USD<span class="cycle">/月</span><span class="approx">≈ ¥13.38 /月</span></span><span class="renew">29天后 9月21日 续费</span></div>
      <div class="notes">2C 4G 50G 1T 硅谷 大陆优化VIP</div>
      <div class="bar"><i style="width:3%"></i></div>
    </div>
    <div class="card" data-category="VPS" data-cycle="/月" data-name="vmiss us.la.tri.basic" data-notes="1c 1g 10g 500g la 三网优化" data-price="21.9608745703" data-next="1790006400">
      <span class="check">✓</span><div class="card-top"><span class="cat">VPS</span><span class="logo-inline"><img class="logo-img logo-wide" src="/logos/1787405641-VMISS-USLATRIBasic.png" alt=""></span><span class="dot"></span></div>
      <div class="name">VMISS US.LA.TRI.Basic</div>
      <div class="price-line"><span class="price">4.50 CAD<span class="cycle">/月</span><span class="approx">≈ ¥21.96 /月</span></span><span class="renew">30天后 9月22日 续费</span></div>
      <div class="notes">1C 1G 10G 500G LA 三网优化</div>
      <div class="bar"><i style="width:0%"></i></div>
    </div>
    <div class="card" data-category="Net" data-cycle="/月" data-name="轻连derp 纯ip套餐" data-notes="成都tailscale derper中继 淘宝优惠价约30元/半年" data-price="5.0000000000" data-next="1797609600">
      <span class="check">✓</span><div class="card-top"><span class="cat">Net</span><span class="logo-inline"><span class="avatar">轻</span></span><span class="dot"></span></div>
      <div class="name">轻连DERP 纯IP套餐</div>
      <div class="price-line"><span class="price">5.00 CNY<span class="cycle">/月</span><span class="approx">≈ ¥5.00 /月</span></span><span class="renew">30天后 12月19日 续费</span></div>
      <div class="notes">成都tailscale derper中继 淘宝优惠价约30元/半年</div>
      <div class="bar"><i style="width:0%"></i></div>
    </div>
    <div class="card" data-category="VPS" data-cycle="/年" data-name="cloudcone ssd-vps-4-old" data-notes="4c 4g 55g 4t st. louis, mo - dc1" data-price="13.0318579920" data-next="1813420800">
      <span class="check">✓</span><div class="card-top"><span class="cat">VPS</span><span class="logo-inline"><img class="logo-img logo-wide" src="/logos/1787405677-CloudCone-SSDVPS4OLD.png" alt=""></span><span class="dot"></span></div>
      <div class="name">CloudCone SSD-VPS-4-OLD</div>
      <div class="price-line"><span class="price">23.59 USD<span class="cycle">/年</span><span class="approx">≈ ¥13.03 /月</span></span><span class="renew">301天后 6月20日 续费</span></div>
      <div class="notes">4C 4G 55G 4T St. Louis, MO - DC1</div>
      <div class="bar"><i style="width:17%"></i></div>
    </div>
    <div class="card" data-category="VPS" data-cycle="/年" data-name="dedirock promo vps la" data-notes="1c 2g 30g 4t la ccs" data-price="5.4580227622" data-next="1814198400">
      <span class="check">✓</span><div class="card-top"><span class="cat">VPS</span><span class="logo-inline"><img class="logo-img logo-wide" src="/logos/1787409434-DediRock-PROMO-VPS-LA.png" alt=""></span><span class="dot"></span></div>
      <div class="name">DediRock PROMO VPS LA</div>
      <div class="price-line"><span class="price">9.88 USD<span class="cycle">/年</span><span class="approx">≈ ¥5.46 /月</span></span><span class="renew">310天后 6月29日 续费</span></div>
      <div class="notes">1C 2G 30G 4T LA CCS</div>
      <div class="bar"><i style="width:15%"></i></div>
    </div>
    <div class="card" data-category="VPS" data-cycle="/年" data-name="wawo hk-ipv6only-0.5g-18" data-notes="1c 512m 5g 500g ipv6 移动快乐机" data-price="1.4383561644" data-next="1815926400">
      <span class="check">✓</span><div class="card-top"><span class="cat">VPS</span><span class="logo-inline"><img class="logo-img logo-wide" src="/logos/1787409983-WAWO-HKipv6only05G18.png" alt=""></span><span class="dot"></span></div>
      <div class="name">WAWO HK-ipv6only-0.5G-18</div>
      <div class="price-line"><span class="price">17.50 CNY<span class="cycle">/年</span><span class="approx">≈ ¥1.44 /月</span></span><span class="renew">330天后 7月19日 续费</span></div>
      <div class="notes">1C 512M 5G 500G ipv6 移动快乐机</div>
      <div class="bar"><i style="width:9%"></i></div>
    </div>
    <div class="card" data-category="VPS" data-cycle="/年" data-name="喵云-次元喵 nat 618 限定" data-notes="6c 8g 湖北武汉nat" data-price="5.0794520548" data-next="1816185600">
      <span class="check">✓</span><div class="card-top"><span class="cat">VPS</span><span class="logo-inline"><span class="avatar">喵</span></span><span class="dot"></span></div>
      <div class="name">喵云-次元喵 NAT 618 限定</div>
      <div class="price-line"><span class="price">61.80 CNY<span class="cycle">/年</span><span class="approx">≈ ¥5.08 /月</span></span><span class="renew">333天后 7月22日 续费</span></div>
      <div class="notes">6C 8G 湖北武汉NAT</div>
      <div class="bar"><i style="width:8%"></i></div>
    </div>
    <div class="card" data-category="VPS" data-cycle="/年" data-name="idc.homes 五周年活动款 nat 500" data-notes="1c 512m 10g 512g 美国水牛城 nat" data-price="0.8120742369" data-next="1818345600">
      <span class="check">✓</span><div class="card-top"><span class="cat">VPS</span><span class="logo-inline"><img class="logo-img logo-wide" src="/logos/1787409756-IDCHomes--NAT-500.png" alt=""></span><span class="dot"></span></div>
      <div class="name">IDC.Homes 五周年活动款 NAT 500</div>
      <div class="price-line"><span class="price">1.47 USD<span class="cycle">/年</span><span class="approx">≈ ¥0.81 /月</span></span><span class="renew">358天后 8月16日 续费</span></div>
      <div class="notes">1C 512M 10G 512G 美国水牛城 NAT</div>
      <div class="bar"><i style="width:1%"></i></div>
    </div>
  </div>
  <footer class="foot">
    <div class="foot-main">© 2026 <a href="https://dytchem.cn" target="_blank" rel="noopener">Dytchem</a></div>
    <div class="foot-powered"><span>Powered by</span>
      <a href="https://github.com/ellite/Wallos" target="_blank" rel="noopener" title="Wallos"><img class="wallos-logo" src="/public/assets/wallos.png" alt="Wallos"></a>
      <a href="https://fixer.io" target="_blank" rel="noopener" title="Fixer"><img src="/public/assets/fixer.png" alt="Fixer"></a>
      <a href="https://cloud.andnode.com/aff/ECQEKLVT" target="_blank" rel="noopener" title="AndNode"><img src="/public/assets/andnode.png" alt="AndNode"></a>
    </div>
    <div class="foot-links">
      <a href="https://dytchem.cn" target="_blank" rel="noopener" title="dytchem.cn">🌐</a>
      <a href="https://t.me/Dytchem" target="_blank" rel="noopener" title="Telegram @Dytchem">✈️</a>
      <a href="mailto:admin@dytchem.cn" title="Email">✉️</a>
    </div>
  </footer>
</div>
<script>
(function(){
  const key="wallos-public-theme";
  const mql=window.matchMedia("(prefers-color-scheme: light)");
  function apply(mode){
    let real=mode;
    if(mode==="auto") real=mql.matches?"light":"dark";
    document.documentElement.setAttribute("data-theme", real);
    document.querySelectorAll(".theme-switch button").forEach(b=>b.classList.toggle("active", b.dataset.mode===mode));
    localStorage.setItem(key, mode);
  }
  let init=localStorage.getItem(key)||"auto";
  apply(init);
  mql.addEventListener("change", ()=>{ if((localStorage.getItem(key)||"auto")==="auto") apply("auto"); });
  document.getElementById("themeSwitch").addEventListener("click", e=>{
    const b=e.target.closest("button"); if(!b) return; apply(b.dataset.mode);
  });
  // 强制刷新：先让服务端重新生成 public/index.html，再硬刷新
  document.getElementById("hardRefresh").addEventListener("click", async ()=>{
    const btn=document.getElementById("hardRefresh");
    btn.disabled=true; btn.innerHTML="⟳ 刷新中…";
    try{ await fetch("/api/refresh?t="+Date.now(), {cache:"no-store"}); }catch(e){}
    try{ await fetch(location.href.split("?")[0].split("#")[0]+"?t="+Date.now(), {cache:"no-store", headers:{"Cache-Control":"no-cache","Pragma":"no-cache"}}); }catch(e){}
    location.reload(true);
    setTimeout(()=>{ location.href=location.href.split("?")[0]+"?t="+Date.now(); }, 800);
  });
  // 筛选：分类 / 周期 / 搜索（Binance 面板同款胶囊 + 搜索）
  const catSel=document.getElementById("catSelect");
  const cycleSel=document.getElementById("cycleSelect");
  const search=document.getElementById("searchInput");
  const grid=document.getElementById("cardGrid");
  function applyFilter(){
    const selCat=catSel.value;
    const selCycle=cycleSel.value;
    const q=(search.value||"").toLowerCase().trim();
    grid.querySelectorAll(".card").forEach(card=>{
      const cat=card.dataset.category||"";
      const cyc=card.dataset.cycle||"";
      const name=card.dataset.name||"";
      const notes=card.dataset.notes||"";
      const hitCat= selCat==="all" || cat===selCat;
      const hitCycle= selCycle==="all" || cyc.includes(selCycle);
      const hitSearch= !q || name.includes(q) || cat.toLowerCase().includes(q) || notes.includes(q);
      card.style.display= (hitCat && hitCycle && hitSearch) ? "" : "none";
    });
  }
  catSel.addEventListener("change", applyFilter);
  cycleSel.addEventListener("change", applyFilter);
  search.addEventListener("input", applyFilter);
  // 排序：按价格（月均换算）或按续费时间
  const sortSel=document.getElementById("sortSelect");
  function applySort(){
    const mode=sortSel.value;
    const cards=[...grid.querySelectorAll(".card")];
    cards.sort((a,b)=>{
      if(mode==="price-asc") return parseFloat(a.dataset.price||0)-parseFloat(b.dataset.price||0);
      if(mode==="price-desc") return parseFloat(b.dataset.price||0)-parseFloat(a.dataset.price||0);
      if(mode==="next-desc") return parseInt(b.dataset.next||0)-parseInt(a.dataset.next||0);
      return parseInt(a.dataset.next||0)-parseInt(b.dataset.next||0);
    });
    cards.forEach(c=>grid.appendChild(c));
  }
  sortSel.addEventListener("change", ()=>{ applyFilter(); applySort(); });
  // 初始按续费排序
  applySort();
  // === 长按多选：上方统计联动 ===
  const statCountEl=document.getElementById("statCount");
  const statMonthlyEl=document.getElementById("statMonthly");
  const statYearlyEl=document.getElementById("statYearly");
  const selectAllBtn=document.getElementById("selectAllBtn");
  const clearBtn=document.getElementById("clearSelectBtn");
  const origCount=parseInt(statCountEl?.dataset.total||"0");
  const origMonthly=parseFloat(statMonthlyEl?.dataset.total||"0");
  const origYearly=parseFloat(statYearlyEl?.dataset.total||"0");
  const mainSym="¥";
  let selected=new Set();
  function visibleCards(){ return [...grid.querySelectorAll(".card")].filter(c=>c.style.display!=="none"); }
  function updateSelectionUI(){
    const n=selected.size;
    if(n===0){
      statCountEl.textContent=origCount;
      statMonthlyEl.textContent=mainSym+origMonthly.toFixed(2);
      statYearlyEl.textContent=mainSym+origYearly.toFixed(2);
      document.getElementById("statMonthlyLabel").textContent="月度合计";
      document.getElementById("statYearlyLabel").textContent="年度预估";
      return;
    }
    let sum=0;
    selected.forEach(card=>{ sum+=parseFloat(card.dataset.price||0); });
    if(n===origCount){ sum=origMonthly; statCountEl.textContent=n; statMonthlyEl.textContent=mainSym+sum.toFixed(2); statYearlyEl.textContent=mainSym+origYearly.toFixed(2); document.getElementById("statMonthlyLabel").textContent="选中月度"; document.getElementById("statYearlyLabel").textContent="选中年度"; return; }
    statCountEl.textContent=n;
    statMonthlyEl.textContent=mainSym+sum.toFixed(2);
    statYearlyEl.textContent=mainSym+(sum*12).toFixed(2);
    document.getElementById("statMonthlyLabel").textContent="选中月度";
    document.getElementById("statYearlyLabel").textContent="选中年度";
  }
  function toggleCard(card){ if(selected.has(card)){ selected.delete(card); card.classList.remove("selected"); }else{ selected.add(card); card.classList.add("selected"); } updateSelectionUI(); }
  function clearSelection(){ selected.forEach(c=>c.classList.remove("selected")); selected.clear(); updateSelectionUI(); }
  function selectAll(){
    visibleCards().forEach(c=>{ selected.add(c); c.classList.add("selected"); });
    updateSelectionUI();
  }
  selectAllBtn.addEventListener("click", selectAll);
  clearBtn.addEventListener("click", clearSelection);
  // 长按检测 520ms
  let lpTimer=null, lpFired=false, lpCard=null;
  function startLP(card, e){
    lpFired=false; lpCard=card;
    lpTimer=setTimeout(()=>{ lpFired=true; toggleCard(card); if(navigator.vibrate) navigator.vibrate(30); }, 520);
  }
  function cancelLP(){ clearTimeout(lpTimer); }
  grid.querySelectorAll(".card").forEach(card=>{
    card.addEventListener("touchstart", e=>{ startLP(card,e); }, {passive:true});
    card.addEventListener("touchend", e=>{ cancelLP(); if(lpFired){ e.preventDefault(); } });
    card.addEventListener("touchmove", cancelLP);
    card.addEventListener("mousedown", e=>{ if(e.button!==0) return; startLP(card,e); });
    card.addEventListener("mouseup", cancelLP);
    card.addEventListener("mouseleave", cancelLP);
    card.addEventListener("click", e=>{
      if(lpFired){ lpFired=false; e.preventDefault(); e.stopPropagation(); return; }
      if(selected.size>0){ toggleCard(card); }
    });
    card.addEventListener("contextmenu", e=>{ if(selected.size>0 || lpFired) e.preventDefault(); });
  });
})();
</script>
</body>
</html>
