Files
vps_web/templates/index.html
ddrwode d29515598d 哈哈
2026-02-10 11:49:01 +08:00

190 lines
10 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.

<!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>{{ site_name }} - 阿里云/腾讯云/DigitalOcean/Vultr 等 VPS 月付价格对比</title>
<meta name="description" content="云服务器 VPS 价格对比表阿里云、腾讯云、华为云、DigitalOcean、Vultr、Linode、AWS Lightsail 等厂商月付价格与配置对比,支持按区域、内存筛选,一键跳转官网。">
<meta name="keywords" content="云服务器价格,VPS价格对比,阿里云价格,腾讯云价格,DigitalOcean,Vultr,Linode,云主机月付">
<link rel="canonical" href="{{ site_url }}/">
<!-- Open Graph / 社交分享 -->
<meta property="og:type" content="website">
<meta property="og:url" content="{{ site_url }}/">
<meta property="og:title" content="{{ site_name }} - 云服务器价格对比">
<meta property="og:description" content="云服务器 VPS 月付价格对比阿里云、腾讯云、DigitalOcean、Vultr 等,支持筛选与官网跳转。">
<meta property="og:locale" content="zh_CN">
<!-- JSON-LD 结构化数据,便于搜索引擎理解 -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "{{ site_name }}",
"description": "云服务器 VPS 月付价格对比表,支持多厂商筛选与官网跳转。",
"url": "{{ site_url }}",
"applicationCategory": "UtilitiesApplication"
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Table",
"about": "云价眼 - 云服务器 VPS 价格对比",
"name": "VPS 价格对比表",
"description": "各云厂商 VPS 方案配置与月付价格"
}
</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;600&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/static/css/style.css">
</head>
<body data-lang="{{ lang }}">
<header class="header">
<div class="header-inner">
<div class="header-brand">
<h1 class="logo">云价眼</h1>
<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 '' }}">中文</a>
<span class="lang-sep">|</span>
<a href="{{ url_for('index', lang='en') }}" class="{{ 'active' if lang == 'en' else '' }}">English</a>
</span>
<a href="{{ url_for('forum_index') }}">论坛</a>
{% if current_user %}
<span class="header-user">你好,{{ current_user.username }}</span>
<a href="{{ url_for('user_profile') }}">个人中心</a>
<a href="{{ url_for('user_notifications') }}" class="nav-link-with-badge">通知{% if notifications_unread_count %}<span class="nav-badge">{{ notifications_unread_count }}</span>{% endif %}</a>
<a href="{{ url_for('user_logout') }}">退出</a>
{% else %}
<a href="{{ url_for('user_login') }}">登录</a>
<a href="{{ url_for('user_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">
<section class="filters">
<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>
<button type="button" class="btn-reset" id="btn-reset">{{ t.btn_reset }}</button>
</section>
<!-- 广告位 2表格上方。可放置矩形或横条广告 -->
<div class="ad-slot ad-slot-inline" id="ad-slot-2">
<!-- 在此处粘贴 Google AdSense 代码 -->
</div>
<!-- 服务器列表 -->
<section class="table-wrap">
<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">
<!-- 由 JS 填充 -->
</tbody>
</table>
</section>
<p class="disclaimer">{{ t.disclaimer }}</p>
</main>
<footer class="footer">
<!-- 广告位 3页脚前 -->
<div class="ad-slot ad-slot-footer" id="ad-slot-3">
<!-- 在此处粘贴 Google AdSense 代码 -->
</div>
<p>{{ t.footer_note }}</p>
<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">
<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 }}
};
</script>
<script src="/static/js/main-simple.js"></script>
</body>
</html>