110 lines
5.9 KiB
HTML
110 lines
5.9 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>{$shareTitle|default='收藏夹分享'} - {$seo.title|default='网址导航'}</title>
|
|
<meta name="keywords" content="{$seo.keywords|default=''}">
|
|
<meta name="description" content="{$seo.description|default=''}">
|
|
<meta name="robots" content="noindex,nofollow">
|
|
<link rel="stylesheet" href="/static/haonav/css/nav.css">
|
|
<style>
|
|
.share-wrap { max-width: 960px; margin: 30px auto; padding: 0 16px; }
|
|
.share-head { background: var(--nav-card); color: var(--nav-card-text); border-radius: 18px; padding: 30px; text-align: center; box-shadow: 0 8px 30px rgba(0,0,0,.15); }
|
|
.share-head h1 { font-size: 26px; margin: 0 0 10px; }
|
|
.share-head .meta { color: var(--nav-muted); font-size: 13px; }
|
|
.share-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-top: 22px; }
|
|
.share-card { display: flex; align-items: center; gap: 10px; background: var(--nav-card); color: var(--nav-card-text); border-radius: 12px; padding: 14px; text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,.08); transition: transform .15s, box-shadow .15s; }
|
|
.share-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,.16); }
|
|
.share-card img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; background: var(--nav-tag-bg); flex-shrink: 0; }
|
|
.share-card .t { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.share-empty, .share-invalid { background: var(--nav-card); color: var(--nav-card-text); border-radius: 18px; padding: 60px 30px; text-align: center; box-shadow: 0 8px 30px rgba(0,0,0,.15); margin-top: 22px; }
|
|
.share-invalid .big { font-size: 48px; margin-bottom: 14px; }
|
|
.share-actions { text-align: center; margin-top: 24px; }
|
|
.btn { padding: 12px 28px; border: none; border-radius: 22px; 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); }
|
|
.btn-secondary { background: transparent; color: var(--nav-primary); border: 2px solid var(--nav-primary); margin-left: 10px; }
|
|
#cloneTip { font-size: 13px; color: var(--nav-muted); margin-top: 12px; }
|
|
</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>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="share-wrap">
|
|
{if $valid}
|
|
<div class="share-head">
|
|
<h1>⭐ {$shareTitle}</h1>
|
|
<p class="meta">好友分享的收藏夹 · 共 {$count} 个网站</p>
|
|
</div>
|
|
|
|
{if $count > 0}
|
|
<div class="share-grid" id="shareGrid">
|
|
{volist name="list" id="it"}
|
|
<a class="share-card" href="{$it.url}" target="_blank" rel="noopener nofollow"
|
|
data-title="{$it.title}" data-url="{$it.url}" data-icon="{$it.icon}">
|
|
<img src="{$it.icon|default='/static/haonav/img/default.png'}" alt="" onerror="this.src='/static/haonav/img/default.png'">
|
|
<span class="t">{$it.title}</span>
|
|
</a>
|
|
{/volist}
|
|
</div>
|
|
|
|
<div class="share-actions">
|
|
<button class="btn btn-primary" id="cloneBtn">📥 一键收藏到我的导航</button>
|
|
<a class="btn btn-secondary" href="/haonav/index.html">去我的导航</a>
|
|
<p id="cloneTip"></p>
|
|
</div>
|
|
{else/}
|
|
<div class="share-empty">这个收藏夹还是空的～</div>
|
|
{/if}
|
|
|
|
{else/}
|
|
<div class="share-invalid">
|
|
<div class="big">🔒</div>
|
|
<h2>{$shareTitle}</h2>
|
|
<p style="color:var(--nav-muted);margin-top:10px;">链接可能已被关闭分享或不存在。</p>
|
|
<div class="share-actions"><a class="btn btn-primary" href="/haonav/index.html">返回首页</a></div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<script src="/static/haonav/js/nav.js"></script>
|
|
<script>
|
|
// 一键把分享的收藏夹合并到本机「我的导航」(localStorage)，回首页后 nav.js 会自动上云
|
|
(function () {
|
|
var btn = document.getElementById('cloneBtn');
|
|
if (!btn) { return; }
|
|
btn.addEventListener('click', function () {
|
|
var FAV_KEY = 'haonav_fav';
|
|
var cur = [];
|
|
try { cur = JSON.parse(localStorage.getItem(FAV_KEY)) || []; } catch (e) { cur = []; }
|
|
var seen = {};
|
|
cur.forEach(function (x) { seen[x.url] = 1; });
|
|
var added = 0;
|
|
Array.prototype.forEach.call(document.querySelectorAll('.share-card'), function (el) {
|
|
var url = el.getAttribute('data-url');
|
|
if (!url || seen[url]) { return; }
|
|
seen[url] = 1;
|
|
cur.push({ id: 0, title: el.getAttribute('data-title'), url: url, icon: el.getAttribute('data-icon') });
|
|
added++;
|
|
});
|
|
localStorage.setItem(FAV_KEY, JSON.stringify(cur));
|
|
var tip = document.getElementById('cloneTip');
|
|
tip.textContent = added > 0 ? ('已添加 ' + added + ' 个到本机，去首页即可同步～') : '这些网站都已在你的收藏中';
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|