mirror of
https://github.com/baoweise-bot/aimili-vpngate.git
synced 2026-09-05 15:46:45 +08:00
refactor: rename ad-related UI components and styles to vps-recommend naming convention
This commit is contained in:
baoweise-bot
+59
-104
@@ -2076,7 +2076,7 @@ INDEX_HTML = r"""<!doctype html>
|
||||
min-width: 320px;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.vps-promo-tab {
|
||||
.vps-recommend-tab {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
@@ -2103,77 +2103,51 @@ INDEX_HTML = r"""<!doctype html>
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.vps-promo-tab:hover {
|
||||
.vps-recommend-tab:hover {
|
||||
padding-right: 10px;
|
||||
box-shadow: -4px 0 25px rgba(99, 102, 241, 0.5);
|
||||
}
|
||||
|
||||
.ad-section {
|
||||
background: var(--bg-surface);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.ad-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.ad-title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.ad-badge {
|
||||
background: var(--primary-gradient);
|
||||
color: white;
|
||||
font-size: 11px;
|
||||
padding: 3px 8px;
|
||||
border-radius: 6px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);
|
||||
}
|
||||
|
||||
.ad-links {
|
||||
.vps-links {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.ad-item {
|
||||
@media (max-width: 576px) {
|
||||
.vps-links {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.vps-item {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border: 1px solid rgba(255, 255, 255, 0.04);
|
||||
border-radius: 10px;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
gap: 14px;
|
||||
justify-content: space-between;
|
||||
transition: all 0.2s ease;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.ad-item:hover {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border-color: var(--border-color-hover);
|
||||
.vps-item:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-color: rgba(99, 102, 241, 0.3);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 30px rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
|
||||
.ad-tag {
|
||||
.vps-tag {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
padding: 3px 8px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
width: fit-content;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.tag-normal {
|
||||
@@ -2182,47 +2156,41 @@ INDEX_HTML = r"""<!doctype html>
|
||||
border: 1px solid rgba(99, 102, 241, 0.2);
|
||||
}
|
||||
|
||||
.tag-opt {
|
||||
background: rgba(245, 158, 11, 0.15);
|
||||
color: #fde047;
|
||||
border: 1px solid rgba(245, 158, 11, 0.2);
|
||||
}
|
||||
|
||||
.tag-premium {
|
||||
background: rgba(16, 185, 129, 0.15);
|
||||
color: #6ee7b7;
|
||||
border: 1px solid rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.ad-desc {
|
||||
.vps-desc {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.5;
|
||||
line-height: 1.6;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.ad-btn {
|
||||
align-self: flex-start;
|
||||
.vps-btn {
|
||||
align-self: stretch;
|
||||
text-decoration: none;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
color: var(--text-primary);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: 6px 14px;
|
||||
border-radius: 6px;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ad-item:hover .ad-btn {
|
||||
.vps-item:hover .vps-btn {
|
||||
background: var(--primary-gradient);
|
||||
border-color: transparent;
|
||||
color: white;
|
||||
box-shadow: 0 4px 10px rgba(99, 102, 241, 0.2);
|
||||
}
|
||||
|
||||
.ad-footer {
|
||||
.vps-footer {
|
||||
border-top: 1px dashed rgba(255, 255, 255, 0.08);
|
||||
padding-top: 12px;
|
||||
font-size: 13px;
|
||||
@@ -2763,12 +2731,6 @@ INDEX_HTML = r"""<!doctype html>
|
||||
<option value="available">可用节点</option>
|
||||
<option value="unavailable">失效节点</option>
|
||||
</select>
|
||||
<button id="btn_favorites" class="toolbar-btn" type="button" onclick="toggleFavoritesView()" style="gap: 6px;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="width:16px; height:16px;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.907c.961 0 1.371 1.24.588 1.81l-3.97 2.883a1 1 0 00-.364 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.971-2.883a1 1 0 00-1.175 0l-3.97 2.883c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.364-1.118l-3.97-2.883c-.783-.57-.372-1.81.588-1.81h4.906a1 1 0 00.951-.69l1.519-4.674z" />
|
||||
</svg>
|
||||
收藏菜单
|
||||
</button>
|
||||
<select id="country_filter">
|
||||
<option value="">所有国家</option>
|
||||
</select>
|
||||
@@ -2777,7 +2739,12 @@ INDEX_HTML = r"""<!doctype html>
|
||||
<option value="residential">住宅IP</option>
|
||||
<option value="hosting">机房IP</option>
|
||||
</select>
|
||||
<input id="search" placeholder="输入国家、位置、IP、ASN、运营主体等过滤节点..." />
|
||||
<button id="btn_favorites" class="toolbar-btn" type="button" onclick="toggleFavoritesView()" style="margin-left: auto; height: 42px; gap: 6px;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="width:16px; height:16px;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.907c.961 0 1.371 1.24.588 1.81l-3.97 2.883a1 1 0 00-.364 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.971-2.883a1 1 0 00-1.175 0l-3.97 2.883c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.364-1.118l-3.97-2.883c-.783-.57-.372-1.81.588-1.81h4.906a1 1 0 00.951-.69l1.519-4.674z" />
|
||||
</svg>
|
||||
收藏菜单
|
||||
</button>
|
||||
</section>
|
||||
<div id="favorites_panel" style="display: none; background: rgba(22, 30, 49, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--border-color); border-radius: 16px; padding: 20px; margin-bottom: 20px; animation: modalFadeIn 0.25s ease-out;">
|
||||
<div style="display: flex; flex-direction: column; gap: 16px;">
|
||||
@@ -2973,42 +2940,37 @@ INDEX_HTML = r"""<!doctype html>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Ad Modal (VPS 购买推荐) -->
|
||||
<div id="ad_modal" class="modal">
|
||||
<!-- VPS 购买推荐 Modal -->
|
||||
<div id="vps_recommend_modal" class="modal">
|
||||
<div class="modal-content" style="max-width: 640px;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
|
||||
<h3 style="margin: 0; font-size: 18px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 8px;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="width:20px; height:20px; color: var(--warning);" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9.663 17h4.673M12 3v1m6.364.364l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" /></svg>
|
||||
VPS 购买推荐
|
||||
</h3>
|
||||
<button type="button" onclick="closeAdModal()" style="background: transparent; border: none; padding: 4px; cursor: pointer; color: var(--text-secondary); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%;" onmouseover="this.style.background='rgba(255,255,255,0.05)'" onmouseout="this.style.background='transparent'">
|
||||
<button type="button" onclick="closeVpsModal()" style="background: transparent; border: none; padding: 4px; cursor: pointer; color: var(--text-secondary); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%;" onmouseover="this.style.background='rgba(255,255,255,0.05)'" onmouseout="this.style.background='transparent'">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="width:18px; height:18px;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="ad-links" style="grid-template-columns: 1fr; gap: 16px;">
|
||||
<div class="ad-item">
|
||||
<span class="ad-tag tag-normal">普通用户推荐</span>
|
||||
<span class="ad-desc">RackNerd - 超低折扣价格，日常使用实惠方便，海外多机房可选，推荐普通家庭或低频用户。</span>
|
||||
<a href="https://my.racknerd.com/aff.php?aff=18708" target="_blank" class="ad-btn">点击进入官网</a>
|
||||
<div class="vps-links">
|
||||
<div class="vps-item">
|
||||
<span class="vps-tag tag-normal">RNVPS (RackNerd) 推荐</span>
|
||||
<span class="vps-desc">超低折扣价格，性价比极高，日常使用实惠方便，海外多机房可选，非常适合普通大众用户。</span>
|
||||
<a href="https://my.racknerd.com/aff.php?aff=18708" target="_blank" class="vps-btn">点击进入官网</a>
|
||||
</div>
|
||||
<div class="ad-item">
|
||||
<span class="ad-tag tag-opt">网络优化推荐</span>
|
||||
<span class="ad-desc">VMiss - 专线优化网络 (CN2 GIA/9929/CMIN2 等顶级线路)，低延迟不丢包，推荐高网络要求用户。</span>
|
||||
<a href="https://app.vmiss.com/aff.php?aff=4619" target="_blank" class="ad-btn">点击进入官网</a>
|
||||
</div>
|
||||
<div class="ad-item">
|
||||
<span class="ad-tag tag-premium">高端企业推荐</span>
|
||||
<span class="ad-desc">BandwagonHost (搬瓦工) - 直连三网顶级专线，经典高带宽 CN2 GIA 线路，超凡稳定速度。</span>
|
||||
<a href="https://bandwagonhost.com/aff.php?aff=81790" target="_blank" class="ad-btn">点击进入官网</a>
|
||||
<div class="vps-item">
|
||||
<span class="vps-tag tag-premium">搬瓦工 (Bandwagon) 推荐</span>
|
||||
<span class="vps-desc">直连三网顶级专线，经典高带宽 CN2 GIA/9929 优化线路，极致速度且超凡稳定，高端用户首选。</span>
|
||||
<a href="https://bandwagonhost.com/aff.php?aff=81790" target="_blank" class="vps-btn">点击进入官网</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ad-footer" style="margin-top: 20px;">
|
||||
<div class="vps-footer" style="margin-top: 20px;">
|
||||
官方技术支持及优质资源交流论坛：<a href="https://339936.xyz" target="_blank" class="forum-link">339936.xyz</a>
|
||||
</div>
|
||||
|
||||
<div class="ad-footer" style="margin-top: 16px; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 16px; text-align: left; font-size: 13px; color: var(--text-secondary); line-height: 1.6;">
|
||||
<div class="vps-footer" style="margin-top: 16px; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 16px; text-align: left; font-size: 13px; color: var(--text-secondary); line-height: 1.6;">
|
||||
<div style="font-weight: bold; color: var(--text-primary); margin-bottom: 4px; display: flex; align-items: center; gap: 6px;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="width:16px; height:16px; color: var(--primary);" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
||||
🎁 捐赠支持项目开发：
|
||||
@@ -3021,7 +2983,7 @@ INDEX_HTML = r"""<!doctype html>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vps-promo-tab" onclick="openAdModal()">VPS购买推荐</div>
|
||||
<div class="vps-recommend-tab" onclick="openVpsModal()">VPS购买推荐</div>
|
||||
|
||||
<!-- Gateway Modal (网关自检与代理测试) -->
|
||||
<div id="gateway_modal" class="modal">
|
||||
@@ -3256,7 +3218,6 @@ function updateCountryFilter() {
|
||||
}
|
||||
|
||||
function getFilteredNodes() {
|
||||
const q = $("search").value.toLowerCase();
|
||||
const selectedCountry = $("country_filter").value;
|
||||
const selectedIpType = $("ip_type_filter").value;
|
||||
const selectedStatus = $("status_filter").value;
|
||||
@@ -3282,11 +3243,7 @@ function getFilteredNodes() {
|
||||
if (showFavoritesOnly && (!state.favorite_node_ids || !state.favorite_node_ids.includes(n.id))) {
|
||||
return false;
|
||||
}
|
||||
const searchStr = [
|
||||
n.country || "", n.country_short || "", n.ip || "", n.remote_host || "", n.proto || "",
|
||||
translateQuality(n.quality), translateIpType(n.ip_type), n.location || "", n.owner || "", n.as_name || ""
|
||||
].join(" ").toLowerCase();
|
||||
return searchStr.includes(q);
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -3674,8 +3631,6 @@ async function load(){
|
||||
startConnectionPolling();
|
||||
}
|
||||
}
|
||||
|
||||
$("search").oninput=()=>{ currentPage = 1; render(); };
|
||||
$("country_filter").onchange=()=>{ currentPage = 1; render(); };
|
||||
$("ip_type_filter").onchange=()=>{ currentPage = 1; render(); };
|
||||
$("status_filter").onchange=()=>{ currentPage = 1; render(); };
|
||||
@@ -4181,12 +4136,12 @@ async function saveNetwork(e) {
|
||||
|
||||
|
||||
|
||||
function openAdModal() {
|
||||
$("ad_modal").style.display = "flex";
|
||||
function openVpsModal() {
|
||||
$("vps_recommend_modal").style.display = "flex";
|
||||
}
|
||||
|
||||
function closeAdModal() {
|
||||
$("ad_modal").style.display = "none";
|
||||
function closeVpsModal() {
|
||||
$("vps_recommend_modal").style.display = "none";
|
||||
}
|
||||
|
||||
async function logoutAdmin() {
|
||||
|
||||
Reference in New Issue
Block a user