163 lines
11 KiB
HTML
163 lines
11 KiB
HTML
<!doctype html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"><title>片库 · 导航</title><style>
|
|
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
|
|
html{font-size:16px;-webkit-text-size-adjust:100%}
|
|
|
|
body{
|
|
font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,PingFang SC,Microsoft YaHei,sans-serif;
|
|
min-height:100vh;padding:28px 12px 48px;
|
|
color:#1a1a1a;
|
|
background:#c8bca8;
|
|
background-image:
|
|
linear-gradient(180deg, rgba(99,102,241,.10) 0%, transparent 35%, transparent 65%, rgba(139,92,246,.08) 100%),
|
|
radial-gradient(ellipse 50% 40% at 15% 5%, rgba(99,102,241,.28) 0%, rgba(99,102,241,.08) 40%, transparent 60%),
|
|
radial-gradient(ellipse 45% 50% at 85% 88%, rgba(139,92,246,.28) 0%, rgba(139,92,246,.08) 40%, transparent 60%),
|
|
radial-gradient(ellipse 30% 30% at 50% 45%, rgba(251,191,36,.15) 0%, transparent 55%);
|
|
-webkit-font-smoothing:antialiased
|
|
}
|
|
.container{max-width:560px;margin:0 auto}
|
|
|
|
/* █ header */
|
|
.header{display:flex;align-items:center;gap:10px;margin-bottom:20px;padding:0 4px}
|
|
.header .logo{
|
|
width:44px;height:44px;border-radius:12px;
|
|
background:linear-gradient(135deg,#6366f1,#8b5cf6);
|
|
display:flex;align-items:center;justify-content:center;
|
|
font-size:18px;font-weight:700;color:#fff;flex-shrink:0;
|
|
box-shadow:0 3px 12px rgba(99,102,241,.25);
|
|
position:relative;overflow:hidden
|
|
}
|
|
.header .logo::after{
|
|
content:'';position:absolute;inset:0;
|
|
background:linear-gradient(135deg,rgba(255,255,255,.3),transparent 50%);
|
|
border-radius:inherit
|
|
}
|
|
.header .info{flex:1;min-width:0}
|
|
.header .info .name{font-size:17px;font-weight:700;letter-spacing:2px;margin-bottom:2px}
|
|
.header .info .sub{font-size:11px;color:#444;letter-spacing:.5px}
|
|
|
|
/* █ search */
|
|
.search-wrap{position:relative;flex:1;max-width:200px;margin-left:auto}
|
|
.search-wrap input{
|
|
width:100%;height:42px;padding:0 36px 0 36px;
|
|
border-radius:12px;
|
|
background:rgba(255,255,255,.40);
|
|
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
|
|
border:1px solid rgba(255,255,255,.55);
|
|
font-size:13px;color:#1a1a1a;outline:none;
|
|
box-shadow:0 2px 8px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.4);
|
|
transition:all .3s;
|
|
-webkit-appearance:none
|
|
}
|
|
.search-wrap input:focus{
|
|
border-color:rgba(99,102,241,.3);
|
|
box-shadow:0 4px 16px rgba(99,102,241,.1),inset 0 1px 0 rgba(255,255,255,.4);
|
|
background:rgba(255,255,255,.55)
|
|
}
|
|
.search-wrap input::placeholder{color:#444;font-size:12px}
|
|
.search-wrap .icon{
|
|
position:absolute;left:14px;top:50%;transform:translateY(-50%);
|
|
font-size:13px;color:#aaa;pointer-events:none;transition:color .3s
|
|
}
|
|
.search-wrap input:focus~.icon{color:#6366f1}
|
|
.search-wrap .clear{
|
|
position:absolute;right:10px;top:50%;transform:translateY(-50%);
|
|
background:none;border:none;font-size:12px;color:#ccc;cursor:pointer;
|
|
display:none;padding:4px;line-height:1;border-radius:4px
|
|
}
|
|
.search-wrap .clear:hover{color:#888}
|
|
.search-wrap .clear.show{display:block}
|
|
|
|
/* █ groups */
|
|
.grid-sect{margin-bottom:28px}
|
|
.grid-sect .panel{
|
|
border-radius:16px;padding:14px 12px 16px;position:relative;
|
|
background:rgba(255,255,255,.25);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
|
|
border:1px solid rgba(255,255,255,.35);box-shadow:0 1px 4px rgba(0,0,0,.03)
|
|
}
|
|
.group-label{
|
|
font-size:12px;font-weight:600;color:#888;letter-spacing:1px;
|
|
padding:0 4px 12px;text-transform:uppercase
|
|
}
|
|
|
|
/* █ entry list */
|
|
.site-list{display:flex;flex-direction:column;gap:2px}
|
|
.site-pair{display:flex;flex-direction:column;gap:2px}
|
|
.site-pair a,.site-single a{
|
|
display:flex;align-items:center;padding:12px 14px;gap:10px;
|
|
background:rgba(255,255,255,.35);text-decoration:none;color:#1a1a1a;
|
|
min-height:46px;border-radius:12px;
|
|
-webkit-tap-highlight-color:transparent;
|
|
transition:background .2s
|
|
}
|
|
.site-pair a:active,.site-single a:active{background:rgba(255,255,255,.55)}
|
|
.site-pair a:first-child{border-radius:12px 12px 4px 4px}
|
|
.site-pair a:last-child{border-radius:4px 4px 12px 12px}
|
|
.site-pair a:only-child{border-radius:12px}
|
|
.site-pair a .ico,.site-single a .ico{
|
|
width:34px;height:34px;border-radius:9px;
|
|
display:flex;align-items:center;justify-content:center;
|
|
font-size:14px;font-weight:700;color:#fff;flex-shrink:0;
|
|
position:relative;overflow:hidden;
|
|
box-shadow:0 1px 4px rgba(0,0,0,.08)
|
|
}
|
|
.site-pair a .ico::after,.site-single a .ico::after{
|
|
content:'';position:absolute;inset:0;
|
|
background:linear-gradient(135deg,rgba(255,255,255,.3),transparent 55%);
|
|
border-radius:inherit
|
|
}
|
|
.site-pair a .nm,.site-single a .nm{font-size:13px;font-weight:600;flex:1;min-width:0}
|
|
.tag-local{
|
|
background:rgba(34,197,94,.12);color:#16a34a;
|
|
font-size:10px;padding:2px 8px;border-radius:4px;font-weight:500;flex-shrink:0
|
|
}
|
|
.tag-remote{
|
|
background:rgba(234,179,8,.15);color:#b45309;
|
|
font-size:10px;padding:2px 8px;border-radius:4px;font-weight:500;flex-shrink:0
|
|
}
|
|
|
|
/* color themes */
|
|
.c-eclipse .ico{background:linear-gradient(135deg,#6366f1,#818cf8)}
|
|
.c-nostr .ico{background:linear-gradient(135deg,#22c55e,#4ade80)}
|
|
.c-nostrtv .ico{background:linear-gradient(135deg,#eab308,#facc15);color:#1a1a1a}
|
|
.c-nostrtv .ico::after{background:linear-gradient(135deg,rgba(255,255,255,.5),transparent 55%)}
|
|
.c-wogg .ico{background:linear-gradient(135deg,#ec4899,#f472b6)}
|
|
.c-pomo .ico{background:linear-gradient(135deg,#8b5cf6,#a78bfa)}
|
|
|
|
/* █ footer */
|
|
.footer{text-align:center;font-size:10px;color:#bbb;margin-top:28px;padding-top:14px;border-top:1px solid rgba(0,0,0,.06)}
|
|
.footer .clk{color:#ccc;margin-top:4px;font-size:9px;font-variant-numeric:tabular-nums}
|
|
|
|
/* entry animation */
|
|
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
|
|
.group-label,.site-list{animation:fadeUp .4s cubic-bezier(.22,1,.36,1) both}
|
|
.grid-sect:nth-child(1) .site-list{animation-delay:.04s}
|
|
.grid-sect:nth-child(2) .site-list{animation-delay:.08s}
|
|
.grid-sect:nth-child(3) .site-list{animation-delay:.12s}
|
|
.grid-sect:nth-child(4) .site-list{animation-delay:.16s}
|
|
.grid-sect:nth-child(5) .site-list{animation-delay:.2s}
|
|
</style></head><body><div class="container"><div class="header"><div class="logo">搜</div><div class="info"><div class="name">Nostr聚合</div><div class="sub">影视•NOSTR•聚合导航</div></div><div class="search-wrap"><input type="search" id="search" placeholder="搜索站点…" autocomplete="off"><span class="icon">🔍</span><button class="clear" id="clearBtn" aria-label="清除">✕</button></div></div><!-- 搜片库 --><div class="grid-sect" data-tags="搜片库"><div class="panel"><div class="group-label">搜·片库</div><div class="site-list"><div class="site-pair c-pomo" data-search="搜 片库"><a href="pomo-cyberpunk.html"><span class="ico">目</span><span class="nm">片库</span><span class="tag-local">本地</span></a><a href="https://18746.kstore.space/pomo-cyberpunk.html" target="_blank" rel="noopener"><span class="ico">目</span><span class="nm">片库</span><span class="tag-remote">在线</span></a></div><div class="site-pair c-pomo" data-search="搜 赛博 cyber"><a href="pomo-cyber-mirror.html"><span class="ico">PC</span><span class="nm">搜·赛博</span><span class="tag-local">本地</span></a><a href="https://cyber.920410.xyz/" target="_blank" rel="noopener"><span class="ico">PC</span><span class="nm">搜·赛博</span><span class="tag-remote">在线</span></a></div></div></div></div><div class="footer"><div class="clk" id="clock"></div></div></div><!-- 玩偶 --><div class="grid-sect" data-tags="wogg 玩偶 聚合"><div class="panel"><div class="group-label">玩偶聚合</div><div class="site-list"><div class="site-pair c-wogg" data-search="玩偶"><a href="wo.html"><span class="ico">WO</span><span class="nm">玩偶</span><span class="tag-local">本地</span></a><a href="https://wo.vivas.cc.cd" target="_blank" rel="noopener"><span class="ico">WO</span><span class="nm">玩偶</span><span class="tag-remote">在线</span></a></div><div class="site-pair c-wogg" data-search="wogg 26"><a href="wogg-26.html"><span class="ico">W6</span><span class="nm">Wogg IOS26</span><span class="tag-local">本地</span></a><a href="https://wo26.vivas.cc.cd" target="_blank" rel="noopener"><span class="ico">W6</span><span class="nm">Wogg IOS26</span><span class="tag-remote">在线</span></a></div></div></div></div><!-- Eclipse --><div class="grid-sect" data-tags="eclipse"><div class="panel"><div class="group-label">Eclipse</div><div class="site-list"><div class="site-pair c-eclipse" data-search="eclipse"><a href="eclipse.html"><span class="ico">Ec</span><span class="nm">Eclipse · kstore</span><span class="tag-local">本地</span></a><a href="https://18746.kstore.space/eclipse.html" target="_blank" rel="noopener"><span class="ico">Ec</span><span class="nm">Eclipse · kstore</span><span class="tag-remote">在线</span></a></div><div class="site-pair c-eclipse" data-search="eclipse vvee"><a href="eclipse-vvee.html"><span class="ico">Ec</span><span class="nm">Eclipse · vvee</span><span class="tag-local">本地</span></a><a href="https://vvee.ccwu.cc/" target="_blank" rel="noopener"><span class="ico">Ec</span><span class="nm">Eclipse · vvee</span><span class="tag-remote">在线</span></a></div></div></div></div><!-- Nostr --><div class="grid-sect" data-tags="nostr emby"><div class="panel"><div class="group-label">Nostr·Emby</div><div class="site-list"><div class="site-pair c-nostr" data-search="nostr emby"><a href="nostr-emby.html"><span class="ico">Ne</span><span class="nm">Nostr·Emby</span><span class="tag-local">本地</span></a><a href="https://nostr.aws.dpdns.org/" target="_blank" rel="noopener"><span class="ico">Ne</span><span class="nm">Nostr·Emby</span><span class="tag-remote">在线</span></a><a href="nostr-embytv.html"><span class="ico">NT</span><span class="nm">Nostr·Emby TV</span><span class="tag-local">本地</span></a><a href="https://nostrtv.aws.dpdns.org/" target="_blank" rel="noopener"><span class="ico">NT</span><span class="nm">Nostr·Emby TV</span><span class="tag-remote">在线</span></a></div></div></div></div><script>
|
|
(function(){
|
|
var s=document.getElementById('search'),c=document.getElementById('clearBtn');
|
|
var items=document.querySelectorAll('.site-pair,.site-single'),sects=document.querySelectorAll('.grid-sect');
|
|
function filter(){
|
|
var kw=s.value.trim().toLowerCase();
|
|
c.classList.toggle('show',!!kw);
|
|
items.forEach(function(e){
|
|
var txt=e.getAttribute('data-search')||'';
|
|
e.style.display=(!kw||txt.indexOf(kw)>-1)?'':'none';
|
|
});
|
|
sects.forEach(function(g){
|
|
var vis=Array.from(g.querySelectorAll('.site-pair,.site-single')).some(function(e){return e.style.display!=='none'});
|
|
g.style.display=vis?'':'none';
|
|
});
|
|
}
|
|
s.addEventListener('input',filter);
|
|
c.addEventListener('click',function(){s.value='';filter();s.focus()});
|
|
function tick(){
|
|
var d=new Date();
|
|
document.getElementById('clock').textContent=
|
|
d.getHours().toString().padStart(2,'0')+':'+d.getMinutes().toString().padStart(2,'0');
|
|
}
|
|
tick();setInterval(tick,60000);
|
|
})();
|
|
</script></body></html> |