Files
pangolin/design/ui_kits/website/index.html
T
wangjia a642bf16a2 feat: 同步 design/ 设计系统(含 iPad tablet kit) + 架构任务拆分(todo/)
design/ 同步自最新设计导出,新增 ui_kits/tablet/ 平板分栏布局;todo/ 录入 18 个并行实施任务。

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-06-11 23:57:57 +08:00

379 lines
22 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!-- @dsCard group="UI Kit — Website" name="UI Kit · 官网宣传页" subtitle="产品/定价/下载/文档/Blog · 暖大地色 · 中英切换" viewport="1140x720" -->
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>穿山甲 · Pangolin — 极速 · 稳定 · 省心</title>
<link rel="stylesheet" href="../../colors_and_type.css">
<link rel="stylesheet" href="website.css?v=quota1">
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
</head>
<body>
<!-- ===== Announcement bar (A) ===== -->
<div class="ann" id="ann">
<div class="wrap ann-in">
<i data-lucide="gift"></i>
<span data-i18n="ann.txt">新用户注册即享 7 天免费试用</span>
<a href="#signup" data-i18n="ann.cta">立即注册 →</a>
<button class="ann-x" onclick="__closeAnn()" aria-label="close"><i data-lucide="x"></i></button>
</div>
</div>
<!-- ===== Header ===== -->
<header class="hdr">
<div class="wrap row">
<a class="brand" href="#top">
<svg width="30" height="30" viewBox="0 0 96 96" fill="none"><g transform="translate(96,0) scale(-1,1)"><path d="M16 59 Q17 51 26 50 Q34 31 45 30 Q55 30 62 37 Q69 41 75 45 Q85 49 89 44 Q92 50 84 52 Q75 53 67 53 Q66 62 60 62 L56 62 Q54 55 49 55 Q47 62 37 62 L33 62 Q31 56 26 56 Q20 59 16 59 Z" fill="#B96A3D"/><g stroke="#FAF3ED" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.85"><path d="M26 50 Q34 43 42 50"/><path d="M36 48 Q44 41 52 48"/><path d="M46 48 Q54 41 62 49"/></g><circle cx="23" cy="55" r="2.2" fill="#FAF3ED"/></g></svg>
<span class="nm">穿山甲</span>
</a>
<nav class="nav">
<a href="#product" data-i18n="nav.product">产品</a>
<a href="#pricing" data-i18n="nav.pricing">定价</a>
<a href="#download" data-i18n="nav.download">下载</a>
<a href="#docs" data-i18n="nav.docs">文档</a>
<a href="#blog" data-i18n="nav.blog">Blog</a>
</nav>
<div class="right">
<div class="langseg">
<button data-lang="zh" onclick="__setLang('zh')">中文</button>
<button data-lang="en" onclick="__setLang('en')">EN</button>
</div>
<span class="linklogin" data-i18n="nav.login">登录</span>
<a class="btn btn-primary" href="#download"><i data-lucide="download"></i><span data-i18n="nav.get">立即下载</span></a>
<button class="menu-btn" onclick="__toggleMenu()" aria-label="menu"><i data-lucide="menu"></i></button>
</div>
</div>
<!-- mobile dropdown nav -->
<div class="mnav" id="mnav">
<a href="#product" data-i18n="nav.product">产品</a>
<a href="#pricing" data-i18n="nav.pricing">定价</a>
<a href="#download" data-i18n="nav.download">下载</a>
<a href="#docs" data-i18n="nav.docs">文档</a>
<a href="#blog" data-i18n="nav.blog">Blog</a>
<a class="btn btn-primary" href="#signup"><span data-i18n="su.btn">免费注册</span></a>
</div>
</header>
<a id="top"></a>
<!-- ===== Hero ===== -->
<section class="hero">
<div class="wrap grid">
<div>
<div class="eyebrow" data-i18n="hero.eyebrow">极速 · 稳定 · 省心</div>
<h1 style="white-space:pre-line" data-i18n="hero.h1">极速畅连,
网络如丝顺滑</h1>
<p class="lede" data-i18n="hero.lede">轻盈、亲和、即开即用的跨平台网络加速应用。一键连接,智能选线,稳定不掉线。</p>
<!-- inline signup (B) -->
<form class="signup" id="signup" onsubmit="return __signup(event)">
<div class="su-row">
<div class="su-field">
<i data-lucide="mail"></i>
<input type="email" id="su-email" placeholder="输入邮箱,免费注册" data-i18n-ph="su.ph" required>
</div>
<button class="btn btn-primary btn-lg su-btn" type="submit"><span data-i18n="su.btn">免费注册</span></button>
</div>
<div class="su-ok" id="su-ok" hidden>
<i data-lucide="check-circle"></i>
<span data-i18n="su.ok">验证码已发送!下载 App 并用同一邮箱继续完成注册。</span>
</div>
<div class="su-hint">
<span data-i18n="su.hint">免费注册 · 无需付款 · 7 天免费试用</span>
<a class="su-dl" href="#download"><i data-lucide="download"></i><span data-i18n="su.dl">或直接下载 App</span></a>
</div>
</form>
<div class="trust">
<span><i data-lucide="check"></i><span data-i18n="hero.t1">80+ 全球加速线路</span></span>
<span><i data-lucide="check"></i><span data-i18n="hero.t2">严格无日志</span></span>
<span><i data-lucide="check"></i><span data-i18n="hero.t3">端到端加密</span></span>
</div>
</div>
<div class="orb-wrap">
<div class="orb-card">
<div class="orb">
<svg class="ring" viewBox="0 0 184 184"><circle cx="92" cy="92" r="85" fill="none" stroke="rgba(255,255,255,.85)" stroke-width="4" stroke-linecap="round"/></svg>
<i data-lucide="shield-check" class="ic"></i>
<span class="tm">02:14:08</span>
<span class="sf" data-i18n="orb.cap">已连接</span>
</div>
<div class="orb-meta">
<div class="m"><div class="k"><i data-lucide="arrow-down"></i><span data-i18n="orb.down">下载</span></div><div class="v">86.4<span style="font-size:10px;color:var(--fg3)"> Mb/s</span></div></div>
<div class="m"><div class="k"><i data-lucide="arrow-up"></i><span data-i18n="orb.up">上传</span></div><div class="v">12.1<span style="font-size:10px;color:var(--fg3)"> Mb/s</span></div></div>
</div>
<div class="orb-node">
<div class="cc">HK</div>
<div style="flex:1"><div class="nn" data-i18n="orb.node">香港 · 流媒体</div><div class="ns" data-i18n="orb.nodesub">延迟 18ms · 已连接</div></div>
<i data-lucide="chevron-right" style="width:18px;height:18px;color:var(--fg3)"></i>
</div>
</div>
</div>
</div>
<div class="wrap strip">
<span data-i18n="strip.txt">已支持</span>
<span><i data-lucide="smartphone"></i>iOS</span>
<span><i data-lucide="smartphone"></i>Android</span>
<span><i data-lucide="laptop"></i>macOS</span>
<span><i data-lucide="monitor"></i>Windows</span>
<span><i data-lucide="terminal"></i>Linux</span>
</div>
</section>
<!-- ===== Product / Features ===== -->
<section id="product" class="sec-tan">
<div class="wrap center">
<div class="eyebrow" data-i18n="feat.eyebrow">产品</div>
<h2 class="h-sec" data-i18n="feat.h">为日常而生的连接体验</h2>
<p class="sub-sec" data-i18n="feat.sub">没有复杂配置,没有技术门槛。打开就用,把安全留给我们。</p>
</div>
<div class="wrap">
<div class="feat-grid">
<div class="feat"><div class="ico"><i data-lucide="power"></i></div><h3 data-i18n="feat.1t">一键连接</h3><p data-i18n="feat.1d"></p></div>
<div class="feat"><div class="ico"><i data-lucide="zap"></i></div><h3 data-i18n="feat.2t">智能分流</h3><p data-i18n="feat.2d"></p></div>
<div class="feat"><div class="ico"><i data-lucide="globe"></i></div><h3 data-i18n="feat.3t">80+ 全球加速线路</h3><p data-i18n="feat.3d"></p></div>
<div class="feat"><div class="ico"><i data-lucide="eye-off"></i></div><h3 data-i18n="feat.4t">严格无日志</h3><p data-i18n="feat.4d"></p></div>
<div class="feat"><div class="ico"><i data-lucide="shield"></i></div><h3 data-i18n="feat.5t">Kill Switch</h3><p data-i18n="feat.5d"></p></div>
<div class="feat"><div class="ico"><i data-lucide="monitor-smartphone"></i></div><h3 data-i18n="feat.6t">多端同步</h3><p data-i18n="feat.6d"></p></div>
</div>
</div>
</section>
<!-- ===== Why sign up (C) ===== -->
<section id="why-signup">
<div class="wrap center">
<div class="eyebrow" data-i18n="why.eyebrow">免费注册</div>
<h2 class="h-sec" data-i18n="why.h">注册一次,处处可用</h2>
<p class="sub-sec" data-i18n="why.sub">一个邮箱就能开始。注册免费,不需要任何付款信息。</p>
</div>
<div class="wrap">
<div class="why-grid">
<div class="why"><div class="ico"><i data-lucide="gift"></i></div><h3 data-i18n="why.1t">7 天免费试用</h3><p data-i18n="why.1d">新用户注册即享 7 天免费使用,无需任何付款信息。</p></div>
<div class="why"><div class="ico"><i data-lucide="monitor-smartphone"></i></div><h3 data-i18n="why.2t">多端同步</h3><p data-i18n="why.2d">手机、平板、电脑共用一个账户,套餐与设置随身走。</p></div>
<div class="why"><div class="ico"><i data-lucide="badge-check"></i></div><h3 data-i18n="why.3t">无需付款信息</h3><p data-i18n="why.3d">注册只要邮箱。想升级时,再通过外部渠道兑换激活码。</p></div>
</div>
<div class="steps">
<div class="step"><span class="n">1</span><i data-lucide="mail"></i><span class="t" data-i18n="why.s1">填写邮箱</span></div>
<span class="step-arr"><i data-lucide="arrow-right"></i></span>
<div class="step"><span class="n">2</span><i data-lucide="shield-check"></i><span class="t" data-i18n="why.s2">输入验证码</span></div>
<span class="step-arr"><i data-lucide="arrow-right"></i></span>
<div class="step"><span class="n">3</span><i data-lucide="power"></i><span class="t" data-i18n="why.s3">开始畅连</span></div>
</div>
<div class="why-cta">
<a class="btn btn-primary btn-lg" href="#signup"><span data-i18n="why.cta">立即免费注册</span></a>
</div>
</div>
</section>
<!-- ===== Pricing ===== -->
<section id="pricing">
<div class="wrap center">
<div class="eyebrow" data-i18n="price.eyebrow">定价</div>
<h2 class="h-sec" data-i18n="price.h">简单透明的价格</h2>
<p class="sub-sec" data-i18n="price.sub">随时升级或取消。所有套餐均含核心加密与无日志承诺。</p>
<div class="price-toggle">
<button class="on" data-cycle="monthly" onclick="__setCycle('monthly')" data-i18n="price.monthly">按月</button>
<button data-cycle="yearly" onclick="__setCycle('yearly')"><span data-i18n="price.yearly">按年</span><span class="save" data-i18n="price.save">省 20%</span></button>
</div>
</div>
<div class="wrap">
<div class="price-grid">
<!-- Free -->
<div class="plan">
<div class="pname" data-i18n="price.free">免费版</div>
<div class="price" data-price="free">¥0<small data-i18n="price.permo">/月</small></div>
<div class="pdesc" data-i18n="price.freedesc">适合轻度使用与尝鲜</div>
<ul class="feats">
<li><i data-lucide="check"></i><span data-i18n="pf.free1">每日 10 分钟时长</span></li>
<li><i data-lucide="check"></i><span data-i18n="pf.free2">仅 1 个基础节点</span></li>
<li><i data-lucide="check"></i><span data-i18n="pf.free3">使用前观看广告</span></li>
<li><i data-lucide="check"></i><span data-i18n="pf.free4">核心加密 · 无日志</span></li>
</ul>
<button class="pcta pcta-out" data-i18n="price.cta_free">免费下载</button>
</div>
<!-- Pro -->
<div class="plan feat-plan">
<div class="pop" data-i18n="price.popular">最受欢迎</div>
<div class="pname" data-i18n="price.pro">专业版</div>
<div class="price" data-price="pro">¥25<small data-i18n="price.permo">/月</small></div>
<div class="pdesc" data-i18n="price.prodesc">个人用户的最佳选择</div>
<ul class="feats">
<li><i data-lucide="check"></i><span data-i18n="pf.pro1">80+ 全球加速线路</span></li>
<li><i data-lucide="check"></i><span data-i18n="pf.pro2">无限流量 · 极速</span></li>
<li><i data-lucide="check"></i><span data-i18n="pf.pro3">5 台设备同时在线</span></li>
<li><i data-lucide="check"></i><span data-i18n="pf.pro4">流媒体 & P2P 优化</span></li>
<li><i data-lucide="check"></i><span data-i18n="pf.pro5">Kill Switch · 智能分流</span></li>
</ul>
<button class="pcta pcta-white" data-i18n="price.cta_pro">获取激活码</button>
</div>
<!-- Team -->
<div class="plan">
<div class="pname" data-i18n="price.team">团队版</div>
<div class="price" data-price="team">¥99<small data-i18n="price.permo">/月</small></div>
<div class="pdesc" data-i18n="price.teamdesc">小团队集中管理</div>
<ul class="feats">
<li><i data-lucide="check"></i><span data-i18n="pf.team1">专业版全部功能</span></li>
<li><i data-lucide="check"></i><span data-i18n="pf.team2">10 个成员席位</span></li>
<li><i data-lucide="check"></i><span data-i18n="pf.team3">集中计费与管理</span></li>
<li><i data-lucide="check"></i><span data-i18n="pf.team4">优先客服</span></li>
</ul>
<button class="pcta pcta-fill" data-i18n="price.cta_team">获取激活码</button>
</div>
</div>
<!-- payment note -->
<div class="pay-note">
<i data-lucide="shield-check"></i>
<div>
<b data-i18n="pay.title">为什么网页上没有支付按钮?</b><br>
<span data-i18n="pay.body">出于风控与隐私考虑,穿山甲不在网页或 App 内直接收款。你可以通过以下任一渠道获取激活码,在客户端内兑换即可开通。</span>
<div class="chips">
<span class="chip"><i data-lucide="shopping-bag"></i><span data-i18n="pay.store">自助发卡商店</span></span>
<span class="chip"><i data-lucide="credit-card"></i><span data-i18n="pay.usdt">USDT (TRC20) · 最隐私</span></span>
<span class="chip"><i data-lucide="send"></i>Telegram @PangolinVPN_bot</span>
<span class="chip"><i data-lucide="message-circle"></i>LINE @pangolinvpn</span>
<span class="chip"><i data-lucide="mail"></i>buy@pangolin.vpn</span>
</div>
</div>
</div>
<!-- comparison table -->
<h3 style="font-family:var(--font-display);font-weight:700;font-size:22px;margin:46px 0 0;text-align:center" data-i18n="cmp.h">功能对比</h3>
<div class="cmp">
<table>
<thead><tr>
<th data-i18n="cmp.feature">功能</th>
<th data-i18n="price.free">免费版</th>
<th data-i18n="price.pro">专业版</th>
<th data-i18n="price.team">团队版</th>
</tr></thead>
<tbody>
<tr><td data-i18n="cmp.locations">可用线路</td><td class="tx">1</td><td class="tx">80+</td><td class="tx">80+</td></tr>
<tr><td data-i18n="cmp.data">流量</td><td class="tx" data-i18n="cmp.daily">不限</td><td class="tx" data-i18n="cmp.unlimited">无限</td><td class="tx" data-i18n="cmp.unlimited">无限</td></tr>
<tr><td data-i18n="cmp.time">每日时长</td><td class="tx" data-i18n="cmp.time_free">10 分钟/天(试用期不限)</td><td class="tx" data-i18n="cmp.unlimited">无限</td><td class="tx" data-i18n="cmp.unlimited">无限</td></tr>
<tr><td data-i18n="cmp.devices">设备数</td><td class="tx">1</td><td class="tx">5</td><td class="tx">10</td></tr>
<tr><td data-i18n="cmp.speed">极速线路</td><td class="no"></td><td class="yes"><i data-lucide="check"></i></td><td class="yes"><i data-lucide="check"></i></td></tr>
<tr><td data-i18n="cmp.stream">流媒体优化</td><td class="no"></td><td class="yes"><i data-lucide="check"></i></td><td class="yes"><i data-lucide="check"></i></td></tr>
<tr><td data-i18n="cmp.kill">Kill Switch</td><td class="no"></td><td class="yes"><i data-lucide="check"></i></td><td class="yes"><i data-lucide="check"></i></td></tr>
<tr><td data-i18n="cmp.support">客服</td><td class="tx" data-i18n="cmp.basic">标准</td><td class="tx" data-i18n="cmp.basic">标准</td><td class="tx" data-i18n="cmp.priority">优先</td></tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- ===== Download ===== -->
<section id="download" class="sec-tan">
<div class="wrap center">
<div class="eyebrow" data-i18n="dl.eyebrow">下载</div>
<h2 class="h-sec" data-i18n="dl.h">全平台,随处可用</h2>
<p class="sub-sec" data-i18n="dl.sub">一个账户,所有设备同步。下载即用,无需配置。</p>
</div>
<div class="wrap">
<div class="dl-grid">
<div class="dl"><div class="ico"><i data-lucide="smartphone"></i></div><div class="pn">iOS</div><div class="pv">iOS 16+</div><a class="gb"><i data-lucide="download"></i><span data-i18n="dl.get">下载</span></a></div>
<div class="dl"><div class="ico"><i data-lucide="smartphone"></i></div><div class="pn">Android</div><div class="pv">Android 9+</div><a class="gb"><i data-lucide="download"></i><span data-i18n="dl.get">下载</span></a></div>
<div class="dl"><div class="ico"><i data-lucide="laptop"></i></div><div class="pn">macOS</div><div class="pv">macOS 12+</div><a class="gb"><i data-lucide="download"></i><span data-i18n="dl.get">下载</span></a></div>
<div class="dl"><div class="ico"><i data-lucide="monitor"></i></div><div class="pn">Windows</div><div class="pv">Win 10/11</div><a class="gb"><i data-lucide="download"></i><span data-i18n="dl.get">下载</span></a></div>
<div class="dl"><div class="ico"><i data-lucide="terminal"></i></div><div class="pn">Linux</div><div class="pv">deb / rpm</div><a class="gb"><i data-lucide="download"></i><span data-i18n="dl.get">下载</span></a></div>
</div>
</div>
</section>
<!-- ===== Docs ===== -->
<section id="docs">
<div class="wrap center">
<div class="eyebrow" data-i18n="docs.eyebrow">文档</div>
<h2 class="h-sec" data-i18n="docs.h">需要帮助?都在这里</h2>
<p class="sub-sec" data-i18n="docs.sub">从快速上手到协议细节,清晰直接。</p>
</div>
<div class="wrap">
<div class="docs-grid">
<a class="doc"><div class="ico"><i data-lucide="rocket"></i></div><h3 data-i18n="docs.1t">快速开始</h3><p data-i18n="docs.1d"></p><span class="ln" data-i18n="docs.read">阅读</span></a>
<a class="doc"><div class="ico"><i data-lucide="circle-help"></i></div><h3 data-i18n="docs.2t">常见问题</h3><p data-i18n="docs.2d"></p><span class="ln" data-i18n="docs.read">阅读</span></a>
<a class="doc"><div class="ico"><i data-lucide="shield-check"></i></div><h3 data-i18n="docs.3t">协议与安全</h3><p data-i18n="docs.3d"></p><span class="ln" data-i18n="docs.read">阅读</span></a>
<a class="doc"><div class="ico"><i data-lucide="lock"></i></div><h3 data-i18n="docs.4t">隐私政策</h3><p data-i18n="docs.4d"></p><span class="ln" data-i18n="docs.read">阅读</span></a>
</div>
</div>
</section>
<!-- ===== Blog ===== -->
<section id="blog" class="sec-tan">
<div class="wrap center">
<div class="eyebrow" data-i18n="blog.eyebrow">Blog</div>
<h2 class="h-sec" data-i18n="blog.h">来自团队的最新动态</h2>
<p class="sub-sec" data-i18n="blog.sub">产品更新、安全科普与节点公告。</p>
</div>
<div class="wrap">
<div class="blog-grid">
<a class="post"><div class="cover"><span class="tag" data-i18n="blog.1tag">产品更新</span></div><div class="body"><div class="date">2026-05-28</div><h3 data-i18n="blog.1t"></h3><p data-i18n="blog.1d"></p></div></a>
<a class="post"><div class="cover c2"><span class="tag" data-i18n="blog.2tag">安全</span></div><div class="body"><div class="date">2026-05-12</div><h3 data-i18n="blog.2t"></h3><p data-i18n="blog.2d"></p></div></a>
<a class="post"><div class="cover c3"><span class="tag" data-i18n="blog.3tag">公告</span></div><div class="body"><div class="date">2026-04-30</div><h3 data-i18n="blog.3t"></h3><p data-i18n="blog.3d"></p></div></a>
</div>
</div>
</section>
<!-- ===== CTA band ===== -->
<section>
<div class="wrap">
<div class="cta-band">
<h2 data-i18n="cta.h">准备好体验极速畅连了吗?</h2>
<p data-i18n="cta.p">免费下载,数分钟内开始你的第一次极速连接。</p>
<div class="cta-actions">
<a class="btn btn-white btn-lg" href="#signup"><span data-i18n="cta.btn2">免费注册</span></a>
<a class="btn btn-lg cta-ghost" href="#download"><i data-lucide="download"></i><span data-i18n="cta.btn">免费下载</span></a>
</div>
</div>
</div>
</section>
<!-- ===== Footer ===== -->
<footer class="ftr">
<div class="wrap">
<div class="top">
<div>
<div class="nm">
<svg width="28" height="28" viewBox="0 0 96 96" fill="none"><g transform="translate(96,0) scale(-1,1)"><path d="M16 59 Q17 51 26 50 Q34 31 45 30 Q55 30 62 37 Q69 41 75 45 Q85 49 89 44 Q92 50 84 52 Q75 53 67 53 Q66 62 60 62 L56 62 Q54 55 49 55 Q47 62 37 62 L33 62 Q31 56 26 56 Q20 59 16 59 Z" fill="#F4EFE8"/><circle cx="23" cy="55" r="2.2" fill="#9E5630"/></g></svg>
穿山甲
</div>
<p class="tag" data-i18n="ft.tag">极简、轻量、亲和的跨平台网络加速应用。守护你的每一次连接。</p>
</div>
<div>
<h4 data-i18n="ft.product">产品</h4>
<ul>
<li><a href="#product" data-i18n="ft.features">功能</a></li>
<li><a href="#pricing" data-i18n="ft.pricing">定价</a></li>
<li><a href="#download" data-i18n="ft.download">下载</a></li>
</ul>
</div>
<div>
<h4 data-i18n="ft.resources">资源</h4>
<ul>
<li><a href="#docs" data-i18n="ft.docs">文档</a></li>
<li><a href="#blog" data-i18n="ft.blog">Blog</a></li>
<li><a href="#docs" data-i18n="ft.faq">常见问题</a></li>
<li><a href="#docs" data-i18n="ft.privacy">隐私政策</a></li>
</ul>
</div>
<div>
<h4 data-i18n="ft.contact">联系与渠道</h4>
<ul>
<li><a class="mono">shop.pangolin.vpn</a></li>
<li><a class="mono">Telegram @PangolinVPN_bot</a></li>
<li><a class="mono">LINE @pangolinvpn</a></li>
<li><a class="mono">support@pangolin.vpn</a></li>
</ul>
</div>
</div>
<div class="bot">
<span data-i18n="ft.copy">© 2026 穿山甲 · Pangolin</span>
<span data-i18n="ft.madenote">App 内不支持直接支付 · 资金流全走外部渠道</span>
<span data-i18n="ft.hours">服务时间 每日 9:0024:00 (GMT+8)</span>
</div>
</div>
</footer>
<script src="site.js?v=plan7"></script>
</body>
</html>