301 lines
17 KiB
HTML
301 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="{{ 'zh-CN' if lang == 'zh' else 'en' }}">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>{{ seo.title }}</title>
|
||
<link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='img/site-logo-mark.svg') }}">
|
||
<meta name="description" content="{{ seo.description }}">
|
||
<meta name="keywords" content="{{ seo.keywords }}">
|
||
<meta name="robots" content="{{ seo.robots }}">
|
||
<meta name="theme-color" content="#0F172A">
|
||
<link rel="canonical" href="{{ seo.canonical_url }}">
|
||
{% for hreflang, href in seo.alternate_links.items() %}
|
||
<link rel="alternate" hreflang="{{ hreflang }}" href="{{ href }}">
|
||
{% endfor %}
|
||
<meta property="og:type" content="{{ seo.og_type }}">
|
||
<meta property="og:url" content="{{ seo.og_url }}">
|
||
<meta property="og:title" content="{{ seo.og_title }}">
|
||
<meta property="og:description" content="{{ seo.og_description }}">
|
||
<meta property="og:image" content="{{ seo.og_image }}">
|
||
<meta property="og:site_name" content="{{ site_name }}">
|
||
<meta property="og:locale" content="{{ t.og_locale }}">
|
||
<meta name="twitter:card" content="{{ seo.twitter_card }}">
|
||
<meta name="twitter:title" content="{{ seo.twitter_title }}">
|
||
<meta name="twitter:description" content="{{ seo.twitter_description }}">
|
||
<meta name="twitter:image" content="{{ seo.og_image }}">
|
||
<script type="application/ld+json">{{ seo_schema | tojson }}</script>
|
||
<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=JetBrains+Mono:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="/static/css/style.css">
|
||
</head>
|
||
<body data-lang="{{ lang }}" class="homepage-body">
|
||
<header class="header">
|
||
<div class="header-inner">
|
||
<div class="header-brand">
|
||
<a href="{{ url_for('index', lang=lang) }}" class="site-logo-link" aria-label="{{ site_name }}">
|
||
<img src="{{ url_for('static', filename='img/site-logo.svg') }}" alt="{{ site_name }} Logo" class="site-logo" loading="eager" fetchpriority="high">
|
||
</a>
|
||
<p class="tagline">{{ t.tagline }}</p>
|
||
</div>
|
||
<nav class="header-nav">
|
||
<span class="lang-switch">
|
||
<a href="{{ url_for('index', lang='zh') }}" class="{{ 'active' if lang == 'zh' else '' }}" title="切换到中文">中文</a>
|
||
<span class="lang-sep">|</span>
|
||
<a href="{{ url_for('index', lang='en') }}" class="{{ 'active' if lang == 'en' else '' }}" title="Switch to English">English</a>
|
||
</span>
|
||
<a href="{{ url_for('forum_index') }}">{{ '论坛' if lang == 'zh' else 'Forum' }}</a>
|
||
{% if current_user %}
|
||
<span class="header-user">{{ ('你好' if lang == 'zh' else 'Hello') }}，{{ current_user.username }}</span>
|
||
<a href="{{ url_for('user_profile') }}">{{ '个人中心' if lang == 'zh' else 'Profile' }}</a>
|
||
<a href="{{ url_for('user_notifications') }}" class="nav-link-with-badge">{{ '通知' if lang == 'zh' else 'Notifications' }}{% if notifications_unread_count %}<span class="nav-badge">{{ notifications_unread_count }}</span>{% endif %}</a>
|
||
<a href="{{ url_for('user_logout') }}">{{ '退出' if lang == 'zh' else 'Logout' }}</a>
|
||
{% else %}
|
||
<a href="{{ url_for('user_login') }}">{{ '登录' if lang == 'zh' else 'Login' }}</a>
|
||
<a href="{{ url_for('user_register') }}">{{ '注册' if lang == 'zh' else 'Register' }}</a>
|
||
{% endif %}
|
||
</nav>
|
||
</div>
|
||
<!-- 广告位 1：页头横幅。接入 Google AdSense 时，将下方注释替换为您的广告代码 -->
|
||
<div class="ad-slot ad-slot-header" id="ad-slot-1">
|
||
<!-- 示例：Google AdSense 横幅
|
||
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXX" crossorigin="anonymous"></script>
|
||
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-XXXXXX" data-ad-slot="XXXXXX" data-ad-format="auto"></ins>
|
||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||
-->
|
||
</div>
|
||
</header>
|
||
|
||
<main class="main homepage-main">
|
||
<section class="hero-panel">
|
||
<div class="hero-copy">
|
||
<p class="hero-kicker">{{ t.hero_kicker }}</p>
|
||
<h1 class="hero-title">{{ t.hero_title }}</h1>
|
||
<p class="hero-lede">{{ t.hero_lede }}</p>
|
||
<div class="hero-trust-row">
|
||
<span>{{ t.hero_trust_1 }}</span>
|
||
<span>{{ t.hero_trust_2 }}</span>
|
||
<span>{{ t.hero_trust_3 }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="hero-metrics">
|
||
<article class="metric-card">
|
||
<p class="metric-label">{{ t.metric_total_plans }}</p>
|
||
<p class="metric-value" id="metric-total-plans">--</p>
|
||
</article>
|
||
<article class="metric-card">
|
||
<p class="metric-label">{{ t.metric_providers }}</p>
|
||
<p class="metric-value" id="metric-providers">--</p>
|
||
</article>
|
||
<article class="metric-card">
|
||
<p class="metric-label">{{ t.metric_regions }}</p>
|
||
<p class="metric-value" id="metric-regions">--</p>
|
||
</article>
|
||
<article class="metric-card">
|
||
<p class="metric-label">{{ t.metric_lowest }}</p>
|
||
<p class="metric-value" id="metric-lowest">--</p>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="filters">
|
||
<div class="filters-head">
|
||
<div>
|
||
<h2 class="filters-title">{{ t.filters_title }}</h2>
|
||
<p class="filters-subtitle">{{ t.filters_subtitle }}</p>
|
||
</div>
|
||
<div class="filters-head-meta">
|
||
<p class="result-count" id="result-count">--</p>
|
||
<p class="filter-source-hint" id="filter-source-hint" hidden></p>
|
||
</div>
|
||
</div>
|
||
<div class="filter-grid">
|
||
<div class="filter-group">
|
||
<label for="filter-provider">{{ t.filter_provider }}</label>
|
||
<select id="filter-provider">
|
||
<option value="">{{ t.all }}</option>
|
||
</select>
|
||
</div>
|
||
<div class="filter-group">
|
||
<label for="filter-region">{{ t.filter_region }}</label>
|
||
<select id="filter-region">
|
||
<option value="">{{ t.all }}</option>
|
||
</select>
|
||
</div>
|
||
<div class="filter-group">
|
||
<label for="filter-memory">{{ t.filter_memory }}</label>
|
||
<select id="filter-memory">
|
||
<option value="0">{{ t.unlimited }}</option>
|
||
<option value="1">1 GB</option>
|
||
<option value="2">2 GB</option>
|
||
<option value="4">4 GB</option>
|
||
<option value="8">8 GB</option>
|
||
</select>
|
||
</div>
|
||
<div class="filter-group">
|
||
<label for="filter-price">{{ t.filter_price }}</label>
|
||
<select id="filter-price">
|
||
<option value="0">{{ t.unlimited }}</option>
|
||
<option value="0-50">{{ t.price_under50 }}</option>
|
||
<option value="50-100">{{ t.price_50_100 }}</option>
|
||
<option value="100-300">{{ t.price_100_300 }}</option>
|
||
<option value="300-500">{{ t.price_300_500 }}</option>
|
||
<option value="500-99999">{{ t.price_over500 }}</option>
|
||
</select>
|
||
</div>
|
||
<div class="filter-group">
|
||
<label for="filter-currency">{{ t.filter_currency }}</label>
|
||
<select id="filter-currency">
|
||
<option value="CNY">{{ t.cny }}</option>
|
||
<option value="USD">{{ t.usd }}</option>
|
||
</select>
|
||
</div>
|
||
<div class="filter-group filter-group-search">
|
||
<label for="search-input">{{ t.search_label }}</label>
|
||
<input type="text" id="search-input" placeholder="{{ t.search_placeholder }}" />
|
||
</div>
|
||
<div class="filter-actions">
|
||
<button type="button" class="btn-reset" id="btn-reset">{{ t.btn_reset }}</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 广告位 2：表格上方。可放置矩形或横条广告 -->
|
||
<div class="ad-slot ad-slot-inline" id="ad-slot-2">
|
||
<!-- 在此处粘贴 Google AdSense 代码 -->
|
||
</div>
|
||
|
||
<!-- 服务器列表 -->
|
||
<section class="table-wrap">
|
||
<div class="table-wrap-head">
|
||
<p class="table-caption">{{ t.table_caption }}</p>
|
||
</div>
|
||
<table class="price-table">
|
||
<thead>
|
||
<tr>
|
||
<th>{{ t.th_provider }}</th>
|
||
<th>{{ t.th_country }}</th>
|
||
<th>{{ t.th_config }}</th>
|
||
<th data-sort="vcpu" class="sortable">vCPU <span class="sort-icon"></span></th>
|
||
<th data-sort="memory_gb" class="sortable">{{ t.th_memory }} <span class="sort-icon"></span></th>
|
||
<th data-sort="storage_gb" class="sortable">{{ t.th_storage }} <span class="sort-icon"></span></th>
|
||
<th>{{ t.th_bandwidth }}</th>
|
||
<th>{{ t.th_traffic }}</th>
|
||
<th data-sort="price" class="col-price sortable">{{ t.th_price }} <span class="sort-icon"></span></th>
|
||
<th class="col-link">{{ t.th_action }}</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="table-body">
|
||
{% if initial_plans_json %}
|
||
{% for plan in initial_plans_json %}
|
||
<tr>
|
||
<td>{{ plan.provider or '-' }}</td>
|
||
<td>{{ plan.countries or '-' }}</td>
|
||
<td>{{ plan.name or '-' }}</td>
|
||
<td>{{ plan.vcpu if plan.vcpu is not none else '-' }}</td>
|
||
<td>{{ (plan.memory_gb ~ ' GB') if plan.memory_gb is not none else '-' }}</td>
|
||
<td>{{ (plan.storage_gb ~ ' GB') if plan.storage_gb is not none else '-' }}</td>
|
||
<td>{{ (plan.bandwidth_mbps ~ ' Mbps') if plan.bandwidth_mbps is not none else '-' }}</td>
|
||
<td>{{ plan.traffic or '-' }}</td>
|
||
<td class="col-price">
|
||
{% if plan.price_cny is not none %}
|
||
¥{{ '%.2f'|format(plan.price_cny) }}
|
||
{% elif plan.price_usd is not none %}
|
||
${{ '%.2f'|format(plan.price_usd) }}
|
||
{% else %}
|
||
—
|
||
{% endif %}
|
||
</td>
|
||
<td class="col-link">
|
||
{% if plan.official_url %}
|
||
<a href="{{ plan.official_url }}" target="_blank" rel="noopener noreferrer nofollow" class="btn-link">{{ t.btn_visit }}</a>
|
||
{% else %}
|
||
—
|
||
{% endif %}
|
||
</td>
|
||
</tr>
|
||
{% endfor %}
|
||
{% else %}
|
||
<tr>
|
||
<td colspan="10" style="text-align:center; padding: 2rem; color: var(--text-muted);">{{ t.empty_state }}</td>
|
||
</tr>
|
||
{% endif %}
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
|
||
<noscript>
|
||
<p class="no-js-note">{{ t.no_js_note }}</p>
|
||
</noscript>
|
||
<p class="disclaimer">{{ t.disclaimer }}</p>
|
||
|
||
<section class="seo-faq" aria-labelledby="faq-title">
|
||
<div class="section-head">
|
||
<h2 id="faq-title">{{ t.faq_title }}</h2>
|
||
<p>{{ t.faq_intro }}</p>
|
||
</div>
|
||
<div class="faq-grid">
|
||
{% for item in faq_items %}
|
||
<details class="faq-item" {% if loop.first %}open{% endif %}>
|
||
<summary>{{ item.question }}</summary>
|
||
<p>{{ item.answer }}</p>
|
||
</details>
|
||
{% endfor %}
|
||
</div>
|
||
</section>
|
||
|
||
<section class="commercial-cta" aria-label="{{ t.cta_title }}">
|
||
<h2>{{ t.cta_title }}</h2>
|
||
<p>{{ t.cta_lede }}</p>
|
||
<div class="cta-actions">
|
||
<a href="{{ url_for('forum_index') }}" class="cta-btn cta-btn-primary">{{ t.cta_primary }}</a>
|
||
<a href="https://t.me/dockerse" target="_blank" rel="noopener noreferrer" class="cta-btn cta-btn-secondary">{{ t.cta_secondary }}</a>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="footer">
|
||
<!-- 广告位 3：页脚前 -->
|
||
<div class="ad-slot ad-slot-footer" id="ad-slot-3">
|
||
<!-- 在此处粘贴 Google AdSense 代码 -->
|
||
</div>
|
||
<p>{{ t.footer_note }}</p>
|
||
<nav class="footer-links" aria-label="{{ l('站点链接', 'Site links') }}">
|
||
<a href="{{ url_for('privacy_policy') }}">{{ l('隐私政策', 'Privacy Policy') }}</a>
|
||
<a href="{{ url_for('terms_of_service') }}">{{ l('服务条款', 'Terms of Service') }}</a>
|
||
<a href="{{ url_for('forum_index') }}">{{ l('社区论坛', 'Community Forum') }}</a>
|
||
</nav>
|
||
<div class="contact-section">
|
||
<p class="contact-label">{{ t.contact_label }}</p>
|
||
<a href="https://t.me/dockerse" target="_blank" rel="noopener" class="contact-link">
|
||
<svg class="contact-icon" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.562 8.161c-.18 1.897-.962 6.502-1.359 8.627-.168.9-.5 1.201-.82 1.23-.697.064-1.226-.461-1.901-.903-1.056-.692-1.653-1.123-2.678-1.799-1.185-.781-.417-1.21.258-1.911.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.139-5.062 3.345-.479.329-.913.489-1.302.481-.428-.009-1.252-.242-1.865-.442-.752-.244-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.831-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635.099-.002.321.023.465.141.121.099.155.232.171.326.016.094.036.308.02.475z"/>
|
||
</svg>
|
||
<span>@dockerse</span>
|
||
</a>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- 浮动联系按钮 -->
|
||
<a href="https://t.me/dockerse" target="_blank" rel="noopener" class="floating-contact-btn" title="{{ ('联系我们 - Telegram' if lang == 'zh' else 'Contact us - Telegram') }}">
|
||
<svg class="floating-contact-icon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.562 8.161c-.18 1.897-.962 6.502-1.359 8.627-.168.9-.5 1.201-.82 1.23-.697.064-1.226-.461-1.901-.903-1.056-.692-1.653-1.123-2.678-1.799-1.185-.781-.417-1.21.258-1.911.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.139-5.062 3.345-.479.329-.913.489-1.302.481-.428-.009-1.252-.242-1.865-.442-.752-.244-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.831-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635.099-.002.321.023.465.141.121.099.155.232.171.326.016.094.036.308.02.475z"/>
|
||
</svg>
|
||
</a>
|
||
|
||
<script>
|
||
window.LANG = {{ lang|tojson }};
|
||
window.I18N_JS = {
|
||
empty_state: {{ t.empty_state|tojson }},
|
||
load_error: {{ t.load_error|tojson }},
|
||
btn_visit: {{ t.btn_visit|tojson }},
|
||
result_count_pattern: {{ t.result_count_pattern|tojson }}
|
||
};
|
||
// 首屏直出数据，避免等待 /api/plans 再渲染表格，加快首屏
|
||
window.__INITIAL_PLANS__ = {{ initial_plans_json|tojson }};
|
||
</script>
|
||
<script src="/static/js/main-simple.js" defer></script>
|
||
</body>
|
||
</html>
|