144 lines
7.2 KiB
HTML
144 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{$info.title|default='网址详情'} - {$seo.title|default='网址导航'}</title>
|
|
{notempty name="info"}
|
|
<meta name="keywords" content="{$info.keywords|default=''}">
|
|
<meta name="description" content="{$info.description|default=''}">
|
|
<link rel="canonical" href="{$siteUrl|default=''}/haonav/site/{$info.id}.html">
|
|
{/notempty}
|
|
{notempty name="jsonld"}<script type="application/ld+json">{$jsonld|raw}</script>{/notempty}
|
|
<link rel="stylesheet" href="/static/haonav/css/nav.css">
|
|
<style>
|
|
.detail-container {
|
|
background: var(--nav-card); color: var(--nav-card-text); border-radius: 20px; padding: 50px;
|
|
max-width: 600px; width: 100%; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,.3);
|
|
animation: fadeIn .5s ease; margin: 30px auto;
|
|
}
|
|
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
|
|
.website-icon-large { width: 100px; height: 100px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; background: var(--nav-tag-bg); font-size: 44px; overflow: hidden; box-shadow: 0 5px 20px rgba(102,126,234,.4); }
|
|
.website-icon-large img { width: 100%; height: 100%; object-fit: cover; }
|
|
.website-name-large { font-size: 30px; font-weight: bold; margin-bottom: 14px; }
|
|
.website-desc-large { font-size: 15px; color: var(--nav-muted); margin-bottom: 26px; line-height: 1.6; }
|
|
.countdown-box { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 22px; border-radius: 15px; margin: 26px 0; color: #fff; }
|
|
.countdown-number { font-size: 56px; font-weight: bold; margin: 0; animation: pulse 1s infinite; }
|
|
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }
|
|
.action-buttons { display: flex; gap: 14px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
|
|
.btn { padding: 14px 32px; border: none; border-radius: 25px; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block; }
|
|
.btn-primary { background: var(--nav-primary); color: #fff; }
|
|
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-2px); }
|
|
.btn-secondary { background: transparent; color: var(--nav-primary); border: 2px solid var(--nav-primary); }
|
|
.info-text { font-size: 13px; color: var(--nav-muted); margin-top: 18px; line-height: 1.6; }
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="navbar">
|
|
<div class="navbar-content">
|
|
<a href="/haonav/index.html" class="logo">🚀 网址导航</a>
|
|
<div class="nav-actions">
|
|
<div class="nav-links"><a href="/haonav/index.html">首页</a><a href="/haonav/rank.html">排行榜</a><a href="/haonav/submit.html">投稿</a></div>
|
|
<button class="icon-btn" id="themeToggle" title="切换暗黑模式">🌙</button>
|
|
<div class="user-area" id="userArea">
|
|
<button class="nav-btn" id="btnLogin">登录</button>
|
|
<button class="nav-btn nav-btn-primary" id="btnRegister">注册</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="detail-container">
|
|
<img src="{$info.show_icon}" class="website-icon-large" id="websiteIcon" alt="{$info.title}">
|
|
<h1 class="website-name-large" id="websiteName">{$info.title}</h1>
|
|
|
|
<div class="rating-box" id="ratingBox" data-id="{$info.id}">
|
|
<div class="stars" id="rateStars">
|
|
<span class="star" data-score="1">★</span>
|
|
<span class="star" data-score="2">★</span>
|
|
<span class="star" data-score="3">★</span>
|
|
<span class="star" data-score="4">★</span>
|
|
<span class="star" data-score="5">★</span>
|
|
</div>
|
|
<div class="rating-meta">
|
|
<span class="rating-score" id="ratingScore">{$info.rating|default='0.0'}</span>
|
|
<span class="rating-count" id="ratingCount">{$info.rating_count|default='0'} 人评分</span>
|
|
</div>
|
|
</div>
|
|
<p class="rating-tip" id="ratingTip">点击星星即可评分（需登录）</p>
|
|
|
|
<p class="website-desc-large" id="websiteDesc">{$info.description | default='暂无描述'}</p>
|
|
|
|
<!-- 广告位：详情页内联 -->
|
|
{notempty name="ads.detail_inline"}
|
|
<div class="ad-box ad-detail-inline">
|
|
<span class="ad-label">广告</span>
|
|
{volist name="ads.detail_inline" id="ad"}
|
|
{if $ad.type == 1}
|
|
<a class="ad-item" href="/haonav/ad/click?id={$ad.id}" target="_blank" rel="nofollow">
|
|
<img src="{$ad.image}" alt="{$ad.title}" loading="lazy">
|
|
</a>
|
|
{else/}
|
|
{$ad.code|raw}
|
|
{/if}
|
|
{/volist}
|
|
</div>
|
|
{/notempty}
|
|
|
|
<img src="/haonav/snapshot.html?id={$info.id}" alt="网站预览" loading="lazy"
|
|
style="width:100%;border-radius:12px;margin:0 0 22px;display:none;box-shadow:0 4px 16px rgba(0,0,0,.15);"
|
|
onload="if(this.naturalWidth>120){this.style.display='block';}">
|
|
|
|
<div class="countdown-box">
|
|
<div class="countdown-title">⏳ 正在为您跳转到目标网站</div>
|
|
<p class="countdown-number" id="countdown">3</p>
|
|
</div>
|
|
|
|
<div class="action-buttons">
|
|
<a href="{$info.outbound_url | default='/'}" class="btn btn-primary" id="skipBtn">立即跳转</a>
|
|
<a href="index.html" class="btn btn-secondary">返回首页</a>
|
|
<button class="btn btn-secondary js-qr" data-url="{$info.url}" style="cursor:pointer;">分享二维码</button>
|
|
</div>
|
|
|
|
<p class="info-text">⚠️ 温馨提示：如果不想等待，可点击「立即跳转」。如果跳转失败，请检查网络或直接访问目标网址。</p>
|
|
</div>
|
|
|
|
<div class="qr-mask" id="qrMask">
|
|
<div class="qr-box">
|
|
<img id="qrImg" src="" alt="二维码">
|
|
<p id="qrText"></p>
|
|
<span class="close">关闭</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 登录 / 注册 弹层由全局组件 auth.js 自动注入 -->
|
|
|
|
<script src="/static/haonav/js/nav.js"></script>
|
|
<script src="/static/haonav/js/auth.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
var url = document.getElementById('skipBtn').href;
|
|
if (!url) { return; }
|
|
var countdown = 3;
|
|
var el = document.getElementById('countdown');
|
|
var timer = setInterval(function () {
|
|
countdown--;
|
|
el.textContent = countdown;
|
|
if (countdown <= 0) {
|
|
clearInterval(timer);
|
|
window.location.href = url;
|
|
}
|
|
}, 1000);
|
|
document.getElementById('skipBtn').addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
clearInterval(timer);
|
|
window.location.href = url;
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|