1654 lines
59 KiB
HTML
1654 lines
59 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>APP HUB — 下一代应用中心</title>
|
|
<style>
|
|
/* ==================== RESET & BASE ==================== */
|
|
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
|
|
:root{
|
|
--bg-base:#0d0d0d;
|
|
--bg-surface:#141414;
|
|
--bg-card:rgba(255,255,255,0.04);
|
|
--bg-card-hover:rgba(255,255,255,0.07);
|
|
--border-glass:rgba(255,255,255,0.08);
|
|
--border-glass-hover:rgba(255,255,255,0.15);
|
|
--neon-green:#00ff88;
|
|
--neon-cyan:#00d4ff;
|
|
--neon-purple:#a855f7;
|
|
--text-primary:#e8e8e8;
|
|
--text-secondary:#999;
|
|
--text-muted:#666;
|
|
--font-mono:'SF Mono','Fira Code','Consolas','Courier New',monospace;
|
|
--font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
|
|
--glow-green:0 0 20px rgba(0,255,136,0.35),0 0 40px rgba(0,255,136,0.15);
|
|
--glow-cyan:0 0 20px rgba(0,212,255,0.35),0 0 40px rgba(0,212,255,0.15);
|
|
}
|
|
html{scroll-behavior:smooth;font-size:16px}
|
|
body{
|
|
font-family:var(--font-sans);
|
|
background:var(--bg-base);
|
|
color:var(--text-primary);
|
|
min-height:100vh;
|
|
overflow-x:hidden;
|
|
line-height:1.6;
|
|
}
|
|
::selection{background:rgba(0,255,136,0.3);color:#fff}
|
|
::-webkit-scrollbar{width:8px;height:8px}
|
|
::-webkit-scrollbar-track{background:#0a0a0a}
|
|
::-webkit-scrollbar-thumb{background:rgba(0,255,136,0.2);border-radius:4px}
|
|
::-webkit-scrollbar-thumb:hover{background:rgba(0,255,136,0.4)}
|
|
a{color:inherit;text-decoration:none}
|
|
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
|
|
img{max-width:100%;display:block}
|
|
|
|
/* ==================== ANIMATED BACKGROUND ==================== */
|
|
.bg-layer{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
|
|
.bg-grid{
|
|
position:absolute;inset:-50%;
|
|
background-image:
|
|
linear-gradient(rgba(0,255,136,0.04) 1px,transparent 1px),
|
|
linear-gradient(90deg,rgba(0,255,136,0.04) 1px,transparent 1px);
|
|
background-size:50px 50px;
|
|
animation:gridMove 25s linear infinite;
|
|
transform:perspective(500px) rotateX(0deg);
|
|
}
|
|
@keyframes gridMove{
|
|
0%{transform:translate(0,0)}
|
|
100%{transform:translate(50px,50px)}
|
|
}
|
|
.bg-glow{
|
|
position:absolute;
|
|
border-radius:50%;
|
|
filter:blur(120px);
|
|
opacity:0.15;
|
|
animation:glowPulse 8s ease-in-out infinite alternate;
|
|
}
|
|
.bg-glow.g1{width:600px;height:600px;background:var(--neon-green);top:-200px;left:-100px}
|
|
.bg-glow.g2{width:500px;height:500px;background:var(--neon-cyan);bottom:-100px;right:-100px;animation-delay:3s}
|
|
.bg-glow.g3{width:400px;height:400px;background:var(--neon-purple);top:40%;left:50%;animation-delay:5s}
|
|
@keyframes glowPulse{
|
|
0%{opacity:0.08;transform:scale(1)}
|
|
100%{opacity:0.18;transform:scale(1.15)}
|
|
}
|
|
.particles{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
|
|
.particle{
|
|
position:absolute;
|
|
width:3px;height:3px;
|
|
border-radius:50%;
|
|
background:var(--neon-green);
|
|
box-shadow:0 0 6px var(--neon-green);
|
|
opacity:0;
|
|
animation:floatUp linear infinite;
|
|
}
|
|
@keyframes floatUp{
|
|
0%{opacity:0;transform:translateY(100vh) translateX(0)}
|
|
10%{opacity:0.6}
|
|
90%{opacity:0.6}
|
|
100%{opacity:0;transform:translateY(-10vh) translateX(50px)}
|
|
}
|
|
|
|
/* ==================== HEADER ==================== */
|
|
.header{
|
|
position:sticky;top:0;z-index:100;
|
|
background:rgba(13,13,13,0.8);
|
|
backdrop-filter:blur(20px);
|
|
-webkit-backdrop-filter:blur(20px);
|
|
border-bottom:1px solid var(--border-glass);
|
|
}
|
|
.header-inner{
|
|
max-width:1400px;margin:0 auto;
|
|
padding:0 32px;height:72px;
|
|
display:flex;align-items:center;gap:32px;
|
|
}
|
|
.logo{
|
|
font-family:var(--font-mono);
|
|
font-size:1.4rem;font-weight:700;
|
|
letter-spacing:2px;
|
|
color:var(--neon-green);
|
|
text-shadow:0 0 12px rgba(0,255,136,0.6),0 0 24px rgba(0,255,136,0.3);
|
|
display:flex;align-items:center;gap:8px;
|
|
white-space:nowrap;
|
|
}
|
|
.logo-dot{
|
|
width:10px;height:10px;border-radius:50%;
|
|
background:var(--neon-green);
|
|
box-shadow:0 0 10px var(--neon-green);
|
|
animation:blink 2s ease-in-out infinite;
|
|
}
|
|
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}
|
|
.nav{display:flex;gap:4px;flex:1}
|
|
.nav-link{
|
|
padding:8px 18px;
|
|
font-size:0.9rem;font-weight:500;
|
|
color:var(--text-secondary);
|
|
border-radius:8px;
|
|
transition:all 0.3s;
|
|
position:relative;
|
|
}
|
|
.nav-link:hover{color:var(--neon-green);background:rgba(0,255,136,0.06)}
|
|
.nav-link.active{color:var(--neon-green);background:rgba(0,255,136,0.1)}
|
|
.nav-link.active::after{
|
|
content:'';position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);
|
|
width:20px;height:2px;background:var(--neon-green);
|
|
box-shadow:0 0 8px var(--neon-green);
|
|
}
|
|
.search-wrap{position:relative;width:320px;max-width:40vw}
|
|
.search-input{
|
|
width:100%;
|
|
padding:10px 16px 10px 40px;
|
|
background:rgba(255,255,255,0.05);
|
|
border:1px solid rgba(0,255,136,0.2);
|
|
border-radius:10px;
|
|
color:var(--text-primary);
|
|
font-size:0.875rem;
|
|
font-family:var(--font-sans);
|
|
transition:all 0.3s;
|
|
outline:none;
|
|
}
|
|
.search-input::placeholder{color:var(--text-muted)}
|
|
.search-input:focus{
|
|
border-color:var(--neon-green);
|
|
box-shadow:0 0 0 3px rgba(0,255,136,0.1),0 0 20px rgba(0,255,136,0.15);
|
|
background:rgba(0,255,136,0.03);
|
|
}
|
|
.search-icon{
|
|
position:absolute;left:13px;top:50%;transform:translateY(-50%);
|
|
width:16px;height:16px;
|
|
color:var(--neon-green);
|
|
pointer-events:none;
|
|
}
|
|
.mobile-toggle{display:none;font-size:1.5rem;color:var(--neon-green);padding:4px}
|
|
|
|
/* ==================== LAYOUT ==================== */
|
|
.container{max-width:1400px;margin:0 auto;padding:0 32px}
|
|
.section{padding:72px 0}
|
|
.section-header{
|
|
display:flex;align-items:center;justify-content:space-between;
|
|
margin-bottom:36px;flex-wrap:wrap;gap:16px;
|
|
}
|
|
.section-title-wrap{display:flex;align-items:center;gap:14px}
|
|
.section-title{
|
|
font-size:1.6rem;font-weight:700;
|
|
letter-spacing:1px;
|
|
}
|
|
.section-title .accent{color:var(--neon-green);text-shadow:0 0 12px rgba(0,255,136,0.4)}
|
|
.section-tag{
|
|
font-family:var(--font-mono);font-size:0.7rem;
|
|
color:var(--neon-cyan);
|
|
padding:3px 10px;
|
|
border:1px solid rgba(0,212,255,0.3);
|
|
border-radius:4px;
|
|
background:rgba(0,212,255,0.05);
|
|
text-transform:uppercase;letter-spacing:1px;
|
|
}
|
|
.section-line{
|
|
flex:1;height:1px;
|
|
background:linear-gradient(90deg,rgba(0,255,136,0.3),transparent);
|
|
min-width:60px;
|
|
}
|
|
|
|
/* ==================== HERO ==================== */
|
|
.hero{
|
|
position:relative;
|
|
padding:100px 0 80px;
|
|
overflow:hidden;
|
|
}
|
|
.hero-inner{max-width:1400px;margin:0 auto;padding:0 32px;position:relative;z-index:2}
|
|
.hero-badge{
|
|
display:inline-flex;align-items:center;gap:8px;
|
|
padding:6px 16px;
|
|
background:rgba(0,255,136,0.08);
|
|
border:1px solid rgba(0,255,136,0.25);
|
|
border-radius:20px;
|
|
font-family:var(--font-mono);font-size:0.75rem;
|
|
color:var(--neon-green);
|
|
margin-bottom:28px;
|
|
}
|
|
.hero-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--neon-green);box-shadow:0 0 6px var(--neon-green);animation:blink 1.5s infinite}
|
|
.hero-title{
|
|
font-size:3.8rem;font-weight:800;
|
|
line-height:1.15;letter-spacing:2px;
|
|
margin-bottom:24px;
|
|
}
|
|
.hero-title .glow-green{
|
|
color:var(--neon-green);
|
|
text-shadow:0 0 20px rgba(0,255,136,0.5),0 0 40px rgba(0,255,136,0.3);
|
|
}
|
|
.hero-title .glow-cyan{
|
|
color:var(--neon-cyan);
|
|
text-shadow:0 0 20px rgba(0,212,255,0.5),0 0 40px rgba(0,212,255,0.3);
|
|
}
|
|
.hero-terminal{
|
|
background:rgba(0,0,0,0.5);
|
|
border:1px solid var(--border-glass);
|
|
border-left:3px solid var(--neon-green);
|
|
border-radius:8px;
|
|
padding:20px 24px;
|
|
font-family:var(--font-mono);
|
|
font-size:0.875rem;
|
|
max-width:560px;
|
|
margin-bottom:36px;
|
|
box-shadow:0 0 30px rgba(0,255,136,0.08);
|
|
}
|
|
.terminal-line{color:var(--text-secondary);margin-bottom:6px}
|
|
.terminal-line:last-child{margin-bottom:0}
|
|
.terminal-prompt{color:var(--neon-green)}
|
|
.terminal-text{color:var(--text-primary)}
|
|
.terminal-cursor{
|
|
display:inline-block;width:8px;height:14px;
|
|
background:var(--neon-green);
|
|
vertical-align:text-bottom;
|
|
animation:cursorBlink 1s step-end infinite;
|
|
box-shadow:0 0 6px var(--neon-green);
|
|
}
|
|
@keyframes cursorBlink{0%,50%{opacity:1}51%,100%{opacity:0}}
|
|
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}
|
|
.btn-primary{
|
|
display:inline-flex;align-items:center;gap:10px;
|
|
padding:14px 32px;
|
|
background:linear-gradient(135deg,rgba(0,255,136,0.15),rgba(0,212,255,0.1));
|
|
border:1px solid var(--neon-green);
|
|
border-radius:10px;
|
|
color:var(--neon-green);
|
|
font-size:0.95rem;font-weight:600;
|
|
letter-spacing:1px;
|
|
transition:all 0.3s;
|
|
box-shadow:0 0 20px rgba(0,255,136,0.15);
|
|
}
|
|
.btn-primary:hover{
|
|
background:linear-gradient(135deg,rgba(0,255,136,0.25),rgba(0,212,255,0.15));
|
|
box-shadow:0 0 30px rgba(0,255,136,0.4),0 0 60px rgba(0,255,136,0.2);
|
|
transform:translateY(-2px);
|
|
}
|
|
.btn-secondary{
|
|
display:inline-flex;align-items:center;gap:10px;
|
|
padding:14px 32px;
|
|
background:rgba(255,255,255,0.04);
|
|
border:1px solid var(--border-glass-hover);
|
|
border-radius:10px;
|
|
color:var(--text-primary);
|
|
font-size:0.95rem;font-weight:600;
|
|
transition:all 0.3s;
|
|
}
|
|
.btn-secondary:hover{border-color:var(--neon-cyan);color:var(--neon-cyan);box-shadow:var(--glow-cyan)}
|
|
.hero-stats{
|
|
display:flex;gap:48px;margin-top:56px;
|
|
flex-wrap:wrap;
|
|
}
|
|
.hero-stat{text-align:left}
|
|
.hero-stat-num{
|
|
font-family:var(--font-mono);
|
|
font-size:2rem;font-weight:700;
|
|
color:var(--neon-green);
|
|
text-shadow:0 0 12px rgba(0,255,136,0.3);
|
|
}
|
|
.hero-stat-label{font-size:0.8rem;color:var(--text-muted);letter-spacing:1px;text-transform:uppercase}
|
|
|
|
/* ==================== CATEGORY PILLS ==================== */
|
|
.category-bar{
|
|
display:flex;gap:10px;flex-wrap:wrap;
|
|
padding:8px 0;
|
|
}
|
|
.cat-pill{
|
|
padding:8px 20px;
|
|
background:rgba(255,255,255,0.04);
|
|
border:1px solid var(--border-glass);
|
|
border-radius:24px;
|
|
color:var(--text-secondary);
|
|
font-size:0.875rem;font-weight:500;
|
|
transition:all 0.3s;
|
|
white-space:nowrap;
|
|
}
|
|
.cat-pill:hover{
|
|
border-color:rgba(0,255,136,0.4);
|
|
color:var(--text-primary);
|
|
background:rgba(0,255,136,0.05);
|
|
}
|
|
.cat-pill.active{
|
|
background:rgba(0,255,136,0.1);
|
|
border-color:var(--neon-green);
|
|
color:var(--neon-green);
|
|
box-shadow:0 0 15px rgba(0,255,136,0.2),inset 0 0 10px rgba(0,255,136,0.05);
|
|
text-shadow:0 0 8px rgba(0,255,136,0.5);
|
|
}
|
|
|
|
/* ==================== APP GRID & CARDS ==================== */
|
|
.app-grid{
|
|
display:grid;
|
|
grid-template-columns:repeat(5,1fr);
|
|
gap:20px;
|
|
}
|
|
@media(max-width:1100px){.app-grid{grid-template-columns:repeat(3,1fr)}}
|
|
@media(max-width:680px){.app-grid{grid-template-columns:repeat(2,1fr)}}
|
|
|
|
.app-card{
|
|
background:var(--bg-card);
|
|
border:1px solid var(--border-glass);
|
|
border-radius:14px;
|
|
padding:20px;
|
|
cursor:pointer;
|
|
transition:all 0.35s cubic-bezier(0.4,0,0.2,1);
|
|
position:relative;
|
|
overflow:hidden;
|
|
backdrop-filter:blur(10px);
|
|
}
|
|
.app-card::before{
|
|
content:'';position:absolute;inset:0;
|
|
background:linear-gradient(135deg,rgba(0,255,136,0) 0%,rgba(0,255,136,0.04) 100%);
|
|
opacity:0;transition:opacity 0.35s;
|
|
pointer-events:none;
|
|
}
|
|
.app-card:hover{
|
|
border-color:rgba(0,255,136,0.35);
|
|
background:var(--bg-card-hover);
|
|
transform:translateY(-4px);
|
|
box-shadow:0 8px 30px rgba(0,0,0,0.4),0 0 20px rgba(0,255,136,0.12);
|
|
}
|
|
.app-card:hover::before{opacity:1}
|
|
.card-top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
|
|
.app-icon{
|
|
width:56px;height:56px;
|
|
border-radius:14px;
|
|
flex-shrink:0;
|
|
position:relative;
|
|
overflow:hidden;
|
|
}
|
|
.app-icon-img{width:100%;height:100%;object-fit:cover;border-radius:14px}
|
|
.app-icon-placeholder{
|
|
width:100%;height:100%;
|
|
display:flex;align-items:center;justify-content:center;
|
|
font-size:1.5rem;font-weight:700;
|
|
border-radius:14px;
|
|
border:2px solid;
|
|
position:relative;
|
|
}
|
|
.app-icon-placeholder::after{
|
|
content:'';position:absolute;inset:0;border-radius:12px;
|
|
box-shadow:inset 0 0 15px rgba(0,0,0,0.5);
|
|
pointer-events:none;
|
|
}
|
|
.card-name-row{flex:1;min-width:0}
|
|
.card-name{
|
|
font-size:0.95rem;font-weight:600;
|
|
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
|
|
margin-bottom:3px;
|
|
}
|
|
.card-dev{
|
|
font-size:0.75rem;color:var(--text-muted);
|
|
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
|
|
}
|
|
.card-cat{
|
|
font-family:var(--font-mono);
|
|
font-size:0.65rem;
|
|
color:var(--neon-cyan);
|
|
padding:2px 8px;
|
|
border:1px solid rgba(0,212,255,0.2);
|
|
border-radius:4px;
|
|
background:rgba(0,212,255,0.05);
|
|
margin-bottom:12px;
|
|
display:inline-block;
|
|
}
|
|
.card-desc{
|
|
font-size:0.78rem;color:var(--text-secondary);
|
|
line-height:1.5;
|
|
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
|
|
overflow:hidden;
|
|
margin-bottom:14px;
|
|
min-height:42px;
|
|
}
|
|
.card-bottom{
|
|
display:flex;align-items:center;justify-content:space-between;
|
|
padding-top:12px;
|
|
border-top:1px solid var(--border-glass);
|
|
}
|
|
.card-rating{display:flex;align-items:center;gap:5px}
|
|
.stars{display:flex;gap:1px}
|
|
.star{font-size:0.7rem;color:#333;transition:all 0.3s}
|
|
.star.filled{color:var(--neon-green);text-shadow:0 0 4px rgba(0,255,136,0.6)}
|
|
.star.half{position:relative;color:#333}
|
|
.star.half::before{content:'★';position:absolute;color:var(--neon-green);text-shadow:0 0 4px rgba(0,255,136,0.6);width:50%;overflow:hidden}
|
|
.rating-num{
|
|
font-family:var(--font-mono);
|
|
font-size:0.8rem;font-weight:600;
|
|
color:var(--neon-green);
|
|
}
|
|
.card-downloads{
|
|
font-family:var(--font-mono);
|
|
font-size:0.7rem;
|
|
color:var(--text-muted);
|
|
}
|
|
.card-downloads .dl-icon{color:var(--neon-cyan)}
|
|
.new-badge{
|
|
position:absolute;top:12px;right:12px;
|
|
font-family:var(--font-mono);font-size:0.6rem;font-weight:700;
|
|
padding:3px 8px;
|
|
background:rgba(0,255,136,0.15);
|
|
border:1px solid var(--neon-green);
|
|
color:var(--neon-green);
|
|
border-radius:4px;
|
|
text-shadow:0 0 6px rgba(0,255,136,0.5);
|
|
box-shadow:0 0 10px rgba(0,255,136,0.2);
|
|
letter-spacing:1px;
|
|
}
|
|
|
|
/* ==================== FEATURED CARDS ==================== */
|
|
.featured-grid{
|
|
display:grid;
|
|
grid-template-columns:repeat(4,1fr);
|
|
gap:20px;
|
|
}
|
|
@media(max-width:1100px){.featured-grid{grid-template-columns:repeat(3,1fr)}}
|
|
@media(max-width:680px){.featured-grid{grid-template-columns:repeat(2,1fr)}}
|
|
.featured-card{
|
|
background:linear-gradient(145deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));
|
|
border:1px solid var(--border-glass);
|
|
border-radius:16px;
|
|
padding:24px;
|
|
cursor:pointer;
|
|
transition:all 0.35s;
|
|
position:relative;
|
|
overflow:hidden;
|
|
}
|
|
.featured-card::before{
|
|
content:'';position:absolute;top:0;left:0;right:0;height:2px;
|
|
background:linear-gradient(90deg,transparent,var(--neon-green),transparent);
|
|
opacity:0;transition:opacity 0.35s;
|
|
}
|
|
.featured-card:hover{
|
|
border-color:rgba(0,255,136,0.3);
|
|
transform:translateY(-4px);
|
|
box-shadow:0 10px 40px rgba(0,0,0,0.4),0 0 30px rgba(0,255,136,0.1);
|
|
}
|
|
.featured-card:hover::before{opacity:1}
|
|
.featured-card .card-top{margin-bottom:16px}
|
|
.featured-card .app-icon{width:64px;height:64px}
|
|
.featured-card .app-icon-placeholder{font-size:1.7rem}
|
|
.featured-card .card-name{font-size:1.05rem}
|
|
.featured-card .card-desc{font-size:0.82rem;min-height:48px}
|
|
.feat-badge{
|
|
position:absolute;top:14px;right:14px;
|
|
font-family:var(--font-mono);font-size:0.6rem;
|
|
padding:3px 8px;
|
|
background:rgba(0,212,255,0.1);
|
|
border:1px solid rgba(0,212,255,0.3);
|
|
color:var(--neon-cyan);
|
|
border-radius:4px;
|
|
letter-spacing:1px;
|
|
}
|
|
|
|
/* ==================== NEW APPS HORIZONTAL SCROLL ==================== */
|
|
.new-scroll{
|
|
display:flex;gap:18px;
|
|
overflow-x:auto;
|
|
padding:8px 4px 20px;
|
|
scroll-snap-type:x mandatory;
|
|
-webkit-overflow-scrolling:touch;
|
|
}
|
|
.new-scroll::-webkit-scrollbar{height:4px}
|
|
.new-scroll::-webkit-scrollbar-track{background:transparent}
|
|
.new-scroll::-webkit-scrollbar-thumb{background:rgba(0,255,136,0.2);border-radius:2px}
|
|
.new-card{
|
|
flex:0 0 300px;
|
|
scroll-snap-align:start;
|
|
background:var(--bg-card);
|
|
border:1px solid var(--border-glass);
|
|
border-radius:14px;
|
|
padding:20px;
|
|
cursor:pointer;
|
|
transition:all 0.3s;
|
|
position:relative;
|
|
}
|
|
.new-card:hover{
|
|
border-color:rgba(0,255,136,0.35);
|
|
transform:translateY(-3px);
|
|
box-shadow:0 6px 25px rgba(0,0,0,0.4),0 0 15px rgba(0,255,136,0.1);
|
|
}
|
|
|
|
/* ==================== LIBRARY TOOLBAR ==================== */
|
|
.library-toolbar{
|
|
display:flex;align-items:center;gap:14px;
|
|
margin-bottom:28px;flex-wrap:wrap;
|
|
}
|
|
.lib-search{
|
|
position:relative;flex:1;min-width:220px;
|
|
}
|
|
.lib-search .search-input{padding-left:40px}
|
|
.lib-sort{
|
|
display:flex;gap:6px;
|
|
background:rgba(255,255,255,0.03);
|
|
border:1px solid var(--border-glass);
|
|
border-radius:10px;
|
|
padding:4px;
|
|
}
|
|
.sort-btn{
|
|
padding:7px 16px;
|
|
font-size:0.8rem;font-weight:500;
|
|
color:var(--text-secondary);
|
|
border-radius:7px;
|
|
transition:all 0.3s;
|
|
white-space:nowrap;
|
|
}
|
|
.sort-btn:hover{color:var(--text-primary)}
|
|
.sort-btn.active{
|
|
background:rgba(0,255,136,0.1);
|
|
color:var(--neon-green);
|
|
box-shadow:0 0 10px rgba(0,255,136,0.15);
|
|
}
|
|
.lib-cat-filter{display:flex;gap:8px;flex-wrap:wrap}
|
|
.lib-cat-filter .cat-pill{padding:6px 16px;font-size:0.8rem}
|
|
|
|
/* ==================== PAGINATION ==================== */
|
|
.pagination{
|
|
display:flex;align-items:center;justify-content:center;gap:6px;
|
|
margin-top:40px;
|
|
}
|
|
.page-btn{
|
|
min-width:40px;height:40px;
|
|
display:flex;align-items:center;justify-content:center;
|
|
background:rgba(255,255,255,0.04);
|
|
border:1px solid var(--border-glass);
|
|
border-radius:8px;
|
|
font-family:var(--font-mono);font-size:0.85rem;
|
|
color:var(--text-secondary);
|
|
transition:all 0.3s;
|
|
padding:0 12px;
|
|
}
|
|
.page-btn:hover:not(:disabled){
|
|
border-color:rgba(0,255,136,0.4);
|
|
color:var(--neon-green);
|
|
background:rgba(0,255,136,0.05);
|
|
}
|
|
.page-btn.active{
|
|
background:rgba(0,255,136,0.1);
|
|
border-color:var(--neon-green);
|
|
color:var(--neon-green);
|
|
box-shadow:0 0 12px rgba(0,255,136,0.2);
|
|
}
|
|
.page-btn:disabled{opacity:0.3;cursor:not-allowed}
|
|
.page-info{
|
|
font-family:var(--font-mono);font-size:0.8rem;
|
|
color:var(--text-muted);
|
|
margin:0 12px;
|
|
}
|
|
|
|
/* ==================== SKELETON ==================== */
|
|
.skeleton-card{
|
|
background:var(--bg-card);
|
|
border:1px solid var(--border-glass);
|
|
border-radius:14px;
|
|
padding:20px;
|
|
}
|
|
.skel{background:rgba(255,255,255,0.04);border-radius:6px;position:relative;overflow:hidden}
|
|
.skel::after{
|
|
content:'';position:absolute;inset:0;
|
|
background:linear-gradient(90deg,transparent,rgba(0,255,136,0.06),transparent);
|
|
animation:shimmer 1.8s infinite;
|
|
}
|
|
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
|
|
.skel-icon{width:56px;height:56px;border-radius:14px;margin-bottom:14px}
|
|
.skel-line{height:12px;margin-bottom:8px}
|
|
.skel-line.short{width:60%}
|
|
.skel-line.mid{width:80%}
|
|
|
|
/* ==================== MODAL ==================== */
|
|
.modal-overlay{
|
|
position:fixed;inset:0;z-index:1000;
|
|
background:rgba(0,0,0,0.7);
|
|
backdrop-filter:blur(12px);
|
|
-webkit-backdrop-filter:blur(12px);
|
|
display:flex;align-items:center;justify-content:center;
|
|
padding:24px;
|
|
opacity:0;visibility:hidden;
|
|
transition:opacity 0.3s,visibility 0.3s;
|
|
}
|
|
.modal-overlay.open{opacity:1;visibility:visible}
|
|
.modal{
|
|
background:linear-gradient(145deg,#161616,#0f0f0f);
|
|
border:1px solid rgba(0,255,136,0.25);
|
|
border-radius:18px;
|
|
max-width:680px;width:100%;
|
|
max-height:88vh;overflow-y:auto;
|
|
padding:36px;
|
|
position:relative;
|
|
box-shadow:0 0 60px rgba(0,255,136,0.1),0 20px 60px rgba(0,0,0,0.6);
|
|
transform:scale(0.92) translateY(20px);
|
|
transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
|
|
}
|
|
.modal-overlay.open .modal{transform:scale(1) translateY(0)}
|
|
.modal::-webkit-scrollbar{width:6px}
|
|
.modal::-webkit-scrollbar-thumb{background:rgba(0,255,136,0.2);border-radius:3px}
|
|
.modal-close{
|
|
position:absolute;top:20px;right:20px;
|
|
width:36px;height:36px;
|
|
display:flex;align-items:center;justify-content:center;
|
|
background:rgba(255,255,255,0.05);
|
|
border:1px solid var(--border-glass);
|
|
border-radius:50%;
|
|
font-size:1.1rem;color:var(--text-secondary);
|
|
transition:all 0.3s;z-index:2;
|
|
}
|
|
.modal-close:hover{border-color:var(--neon-green);color:var(--neon-green);box-shadow:var(--glow-green);transform:rotate(90deg)}
|
|
.modal-header{display:flex;gap:20px;margin-bottom:24px;align-items:flex-start}
|
|
.modal-icon{
|
|
width:80px;height:80px;flex-shrink:0;
|
|
border-radius:18px;
|
|
position:relative;
|
|
}
|
|
.modal-icon .app-icon-placeholder{font-size:2rem;border-radius:18px}
|
|
.modal-icon .app-icon-img{border-radius:18px}
|
|
.modal-title-area{flex:1;min-width:0;padding-top:4px}
|
|
.modal-name{
|
|
font-size:1.5rem;font-weight:700;
|
|
margin-bottom:6px;
|
|
color:var(--text-primary);
|
|
text-shadow:0 0 12px rgba(0,255,136,0.2);
|
|
}
|
|
.modal-dev{font-size:0.85rem;color:var(--text-muted);margin-bottom:10px}
|
|
.modal-cat-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
|
|
.modal-rating-row{display:flex;align-items:center;gap:8px}
|
|
.modal-rating-row .stars .star{font-size:0.9rem}
|
|
.modal-rating-num{font-family:var(--font-mono);font-weight:700;color:var(--neon-green);font-size:1rem}
|
|
.modal-reviews{font-size:0.75rem;color:var(--text-muted)}
|
|
.modal-section{margin-bottom:24px}
|
|
.modal-section-title{
|
|
font-size:0.8rem;font-weight:600;
|
|
color:var(--neon-cyan);
|
|
text-transform:uppercase;letter-spacing:1.5px;
|
|
margin-bottom:10px;
|
|
display:flex;align-items:center;gap:8px;
|
|
}
|
|
.modal-section-title::before{
|
|
content:'';width:3px;height:14px;
|
|
background:var(--neon-cyan);
|
|
border-radius:2px;
|
|
box-shadow:0 0 6px var(--neon-cyan);
|
|
}
|
|
.modal-desc{font-size:0.9rem;color:var(--text-secondary);line-height:1.7}
|
|
.tag-row{display:flex;flex-wrap:wrap;gap:8px}
|
|
.tag-pill{
|
|
font-size:0.75rem;
|
|
padding:5px 14px;
|
|
background:rgba(0,255,136,0.06);
|
|
border:1px solid rgba(0,255,136,0.2);
|
|
border-radius:20px;
|
|
color:var(--neon-green);
|
|
transition:all 0.3s;
|
|
}
|
|
.tag-pill:hover{background:rgba(0,255,136,0.12);box-shadow:0 0 10px rgba(0,255,136,0.15)}
|
|
.feature-list{list-style:none;display:flex;flex-direction:column;gap:10px}
|
|
.feature-item{
|
|
display:flex;align-items:center;gap:10px;
|
|
font-size:0.875rem;color:var(--text-secondary);
|
|
padding:10px 14px;
|
|
background:rgba(255,255,255,0.03);
|
|
border:1px solid var(--border-glass);
|
|
border-radius:8px;
|
|
transition:all 0.3s;
|
|
}
|
|
.feature-item:hover{border-color:rgba(0,255,136,0.2);background:rgba(0,255,136,0.03)}
|
|
.feature-check{color:var(--neon-green);font-size:0.9rem;flex-shrink:0}
|
|
.modal-stats{
|
|
display:grid;
|
|
grid-template-columns:repeat(3,1fr);
|
|
gap:12px;
|
|
}
|
|
@media(max-width:520px){.modal-stats{grid-template-columns:repeat(2,1fr)}}
|
|
.stat-box{
|
|
background:rgba(255,255,255,0.03);
|
|
border:1px solid var(--border-glass);
|
|
border-radius:10px;
|
|
padding:14px;
|
|
text-align:center;
|
|
}
|
|
.stat-label{font-size:0.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
|
|
.stat-value{font-family:var(--font-mono);font-size:0.95rem;font-weight:600;color:var(--neon-green)}
|
|
.modal-download{
|
|
display:flex;align-items:center;justify-content:center;gap:10px;
|
|
width:100%;
|
|
padding:16px;
|
|
margin-top:8px;
|
|
background:linear-gradient(135deg,rgba(0,255,136,0.15),rgba(0,212,255,0.1));
|
|
border:1px solid var(--neon-green);
|
|
border-radius:12px;
|
|
color:var(--neon-green);
|
|
font-size:1rem;font-weight:700;
|
|
letter-spacing:1px;
|
|
transition:all 0.3s;
|
|
box-shadow:0 0 20px rgba(0,255,136,0.12);
|
|
}
|
|
.modal-download:hover{
|
|
background:linear-gradient(135deg,rgba(0,255,136,0.25),rgba(0,212,255,0.15));
|
|
box-shadow:0 0 35px rgba(0,255,136,0.35),0 0 60px rgba(0,255,136,0.15);
|
|
transform:translateY(-2px);
|
|
}
|
|
.modal-skel{padding:36px}
|
|
.modal-skel .skel{margin-bottom:16px}
|
|
|
|
/* ==================== FOOTER ==================== */
|
|
.footer{
|
|
border-top:1px solid var(--border-glass);
|
|
background:rgba(10,10,10,0.6);
|
|
padding:48px 0 32px;
|
|
margin-top:40px;
|
|
}
|
|
.footer-inner{
|
|
max-width:1400px;margin:0 auto;padding:0 32px;
|
|
display:flex;justify-content:space-between;align-items:flex-start;
|
|
gap:40px;flex-wrap:wrap;
|
|
}
|
|
.footer-brand{max-width:320px}
|
|
.footer-logo{
|
|
font-family:var(--font-mono);font-size:1.2rem;font-weight:700;
|
|
color:var(--neon-green);
|
|
text-shadow:0 0 10px rgba(0,255,136,0.4);
|
|
margin-bottom:12px;
|
|
}
|
|
.footer-desc{font-size:0.8rem;color:var(--text-muted);line-height:1.6}
|
|
.footer-links{display:flex;gap:60px;flex-wrap:wrap}
|
|
.footer-col h4{
|
|
font-size:0.8rem;font-weight:600;
|
|
color:var(--text-primary);
|
|
margin-bottom:14px;
|
|
letter-spacing:1px;
|
|
}
|
|
.footer-col a{
|
|
display:block;font-size:0.8rem;
|
|
color:var(--text-muted);
|
|
margin-bottom:8px;
|
|
transition:color 0.3s;
|
|
}
|
|
.footer-col a:hover{color:var(--neon-green)}
|
|
.footer-bottom{
|
|
max-width:1400px;margin:32px auto 0;padding:20px 32px 0;
|
|
border-top:1px solid var(--border-glass);
|
|
display:flex;justify-content:space-between;align-items:center;
|
|
flex-wrap:wrap;gap:12px;
|
|
}
|
|
.footer-copy{font-family:var(--font-mono);font-size:0.75rem;color:var(--text-muted)}
|
|
.footer-status{
|
|
display:flex;align-items:center;gap:8px;
|
|
font-family:var(--font-mono);font-size:0.75rem;
|
|
color:var(--neon-green);
|
|
}
|
|
.footer-status-dot{width:6px;height:6px;border-radius:50%;background:var(--neon-green);box-shadow:0 0 6px var(--neon-green);animation:blink 2s infinite}
|
|
|
|
/* ==================== REVEAL ANIMATION ==================== */
|
|
.reveal{opacity:0;transform:translateY(30px);transition:opacity 0.7s ease,transform 0.7s ease}
|
|
.reveal.visible{opacity:1;transform:translateY(0)}
|
|
|
|
/* ==================== EMPTY STATE ==================== */
|
|
.empty-state{
|
|
grid-column:1/-1;
|
|
text-align:center;padding:60px 20px;
|
|
color:var(--text-muted);
|
|
}
|
|
.empty-state-icon{font-size:3rem;margin-bottom:16px;opacity:0.3}
|
|
.empty-state-text{font-size:0.9rem}
|
|
|
|
/* ==================== TOAST ==================== */
|
|
.toast{
|
|
position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(100px);
|
|
background:rgba(13,13,13,0.95);
|
|
border:1px solid var(--neon-green);
|
|
border-radius:10px;
|
|
padding:12px 24px;
|
|
font-size:0.875rem;color:var(--neon-green);
|
|
box-shadow:0 0 20px rgba(0,255,136,0.2);
|
|
z-index:2000;
|
|
opacity:0;transition:all 0.3s;
|
|
backdrop-filter:blur(10px);
|
|
}
|
|
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
|
|
|
|
/* ==================== RESPONSIVE ==================== */
|
|
@media(max-width:900px){
|
|
.nav{display:none}
|
|
.mobile-toggle{display:block}
|
|
.hero-title{font-size:2.6rem}
|
|
.section{padding:56px 0}
|
|
.header-inner{padding:0 20px;gap:16px}
|
|
.container{padding:0 20px}
|
|
.hero-inner{padding:0 20px}
|
|
.hero-stats{gap:32px}
|
|
.hero-stat-num{font-size:1.6rem}
|
|
.footer-inner{padding:0 20px}
|
|
.footer-bottom{padding:20px 20px 0}
|
|
.modal{padding:24px}
|
|
.modal-header{flex-direction:column;align-items:center;text-align:center}
|
|
.modal-cat-row{justify-content:center}
|
|
}
|
|
@media(max-width:480px){
|
|
.hero-title{font-size:2rem}
|
|
.search-wrap{width:200px}
|
|
.library-toolbar{flex-direction:column;align-items:stretch}
|
|
.lib-sort{overflow-x:auto}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Animated Background -->
|
|
<div class="bg-layer">
|
|
<div class="bg-grid"></div>
|
|
<div class="bg-glow g1"></div>
|
|
<div class="bg-glow g2"></div>
|
|
<div class="bg-glow g3"></div>
|
|
</div>
|
|
<div class="particles" id="particles"></div>
|
|
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="header-inner">
|
|
<a href="#hero" class="logo"><span class="logo-dot"></span>APP HUB</a>
|
|
<nav class="nav" id="nav">
|
|
<a href="#hero" class="nav-link active" data-target="hero">首页</a>
|
|
<a href="#library" class="nav-link" data-target="library">探索</a>
|
|
<a href="#featured" class="nav-link" data-target="featured">精选</a>
|
|
<a href="#new" class="nav-link" data-target="new">新上架</a>
|
|
</nav>
|
|
<div class="search-wrap">
|
|
<svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
|
|
<input type="text" class="search-input" id="headerSearch" placeholder="搜索应用...">
|
|
</div>
|
|
<button class="mobile-toggle" id="mobileToggle">☰</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Hero -->
|
|
<section class="hero" id="hero">
|
|
<div class="hero-inner">
|
|
<div class="hero-badge"><span class="hero-badge-dot"></span>SYSTEM ONLINE · v2.0.26</div>
|
|
<h1 class="hero-title">
|
|
<span class="glow-green">下一代</span><br>
|
|
<span class="glow-cyan">应用中心</span>
|
|
</h1>
|
|
<div class="hero-terminal">
|
|
<div class="terminal-line"><span class="terminal-prompt">$</span> <span class="terminal-text">init app_hub --mode=dark</span></div>
|
|
<div class="terminal-line"><span class="terminal-prompt">></span> <span class="terminal-text">loading app database...</span> <span class="terminal-cursor"></span></div>
|
|
<div class="terminal-line"><span class="terminal-prompt">></span> <span class="terminal-text" style="color:var(--neon-green)">ready · 18 apps indexed</span></div>
|
|
</div>
|
|
<div class="hero-actions">
|
|
<button class="btn-primary" onclick="scrollToSection('library')">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|
进入商店
|
|
</button>
|
|
<button class="btn-secondary" onclick="scrollToSection('featured')">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
|
精选推荐
|
|
</button>
|
|
</div>
|
|
<div class="hero-stats">
|
|
<div class="hero-stat">
|
|
<div class="hero-stat-num" id="statApps">--</div>
|
|
<div class="hero-stat-label">应用总数</div>
|
|
</div>
|
|
<div class="hero-stat">
|
|
<div class="hero-stat-num" id="statCats">--</div>
|
|
<div class="hero-stat-label">分类数量</div>
|
|
</div>
|
|
<div class="hero-stat">
|
|
<div class="hero-stat-num" id="statDownloads">--</div>
|
|
<div class="hero-stat-label">总下载量</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Category Filter -->
|
|
<section class="section" style="padding-top:0;padding-bottom:20px">
|
|
<div class="container">
|
|
<div class="section-header reveal">
|
|
<div class="section-title-wrap">
|
|
<h2 class="section-title"><span class="accent">//</span> 分类导航</h2>
|
|
<span class="section-tag">CATEGORIES</span>
|
|
</div>
|
|
<div class="section-line"></div>
|
|
</div>
|
|
<div class="category-bar" id="categoryBar">
|
|
<div class="skel" style="width:80px;height:36px;border-radius:24px"></div>
|
|
<div class="skel" style="width:80px;height:36px;border-radius:24px"></div>
|
|
<div class="skel" style="width:80px;height:36px;border-radius:24px"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Featured Apps -->
|
|
<section class="section" id="featured" style="padding-top:20px">
|
|
<div class="container">
|
|
<div class="section-header reveal">
|
|
<div class="section-title-wrap">
|
|
<h2 class="section-title"><span class="accent">//</span> 精选应用</h2>
|
|
<span class="section-tag">FEATURED</span>
|
|
</div>
|
|
<div class="section-line"></div>
|
|
</div>
|
|
<div class="featured-grid" id="featuredGrid">
|
|
<div class="skeleton-card"><div class="skel skel-icon"></div><div class="skel skel-line mid"></div><div class="skel skel-line short"></div><div class="skel skel-line"></div><div class="skel skel-line short"></div></div>
|
|
<div class="skeleton-card"><div class="skel skel-icon"></div><div class="skel skel-line mid"></div><div class="skel skel-line short"></div><div class="skel skel-line"></div><div class="skel skel-line short"></div></div>
|
|
<div class="skeleton-card"><div class="skel skel-icon"></div><div class="skel skel-line mid"></div><div class="skel skel-line short"></div><div class="skel skel-line"></div><div class="skel skel-line short"></div></div>
|
|
<div class="skeleton-card"><div class="skel skel-icon"></div><div class="skel skel-line mid"></div><div class="skel skel-line short"></div><div class="skel skel-line"></div><div class="skel skel-line short"></div></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- New Apps -->
|
|
<section class="section" id="new" style="padding-top:20px">
|
|
<div class="container">
|
|
<div class="section-header reveal">
|
|
<div class="section-title-wrap">
|
|
<h2 class="section-title"><span class="accent">//</span> 最新上架</h2>
|
|
<span class="section-tag">NEW</span>
|
|
</div>
|
|
<div class="section-line"></div>
|
|
</div>
|
|
<div class="new-scroll" id="newScroll">
|
|
<div class="skeleton-card" style="flex:0 0 300px"><div class="skel skel-icon"></div><div class="skel skel-line mid"></div><div class="skel skel-line short"></div></div>
|
|
<div class="skeleton-card" style="flex:0 0 300px"><div class="skel skel-icon"></div><div class="skel skel-line mid"></div><div class="skel skel-line short"></div></div>
|
|
<div class="skeleton-card" style="flex:0 0 300px"><div class="skel skel-icon"></div><div class="skel skel-line mid"></div><div class="skel skel-line short"></div></div>
|
|
<div class="skeleton-card" style="flex:0 0 300px"><div class="skel skel-icon"></div><div class="skel skel-line mid"></div><div class="skel skel-line short"></div></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- App Library -->
|
|
<section class="section" id="library" style="padding-top:20px">
|
|
<div class="container">
|
|
<div class="section-header reveal">
|
|
<div class="section-title-wrap">
|
|
<h2 class="section-title"><span class="accent">//</span> 应用库</h2>
|
|
<span class="section-tag">LIBRARY</span>
|
|
</div>
|
|
<div class="section-line"></div>
|
|
</div>
|
|
<div class="library-toolbar reveal">
|
|
<div class="lib-search">
|
|
<svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
|
|
<input type="text" class="search-input" id="libSearch" placeholder="搜索应用名称或开发者...">
|
|
</div>
|
|
<div class="lib-sort" id="libSort">
|
|
<button class="sort-btn active" data-sort="">默认</button>
|
|
<button class="sort-btn" data-sort="rating">评分</button>
|
|
<button class="sort-btn" data-sort="downloads">下载量</button>
|
|
<button class="sort-btn" data-sort="newest">最新</button>
|
|
</div>
|
|
</div>
|
|
<div class="lib-cat-filter reveal" id="libCatFilter" style="margin-bottom:24px"></div>
|
|
<div class="app-grid" id="libraryGrid">
|
|
<div class="skeleton-card"><div class="skel skel-icon"></div><div class="skel skel-line mid"></div><div class="skel skel-line short"></div><div class="skel skel-line"></div><div class="skel skel-line short"></div></div>
|
|
<div class="skeleton-card"><div class="skel skel-icon"></div><div class="skel skel-line mid"></div><div class="skel skel-line short"></div><div class="skel skel-line"></div><div class="skel skel-line short"></div></div>
|
|
<div class="skeleton-card"><div class="skel skel-icon"></div><div class="skel skel-line mid"></div><div class="skel skel-line short"></div><div class="skel skel-line"></div><div class="skel skel-line short"></div></div>
|
|
<div class="skeleton-card"><div class="skel skel-icon"></div><div class="skel skel-line mid"></div><div class="skel skel-line short"></div><div class="skel skel-line"></div><div class="skel skel-line short"></div></div>
|
|
<div class="skeleton-card"><div class="skel skel-icon"></div><div class="skel skel-line mid"></div><div class="skel skel-line short"></div><div class="skel skel-line"></div><div class="skel skel-line short"></div></div>
|
|
</div>
|
|
<div class="pagination" id="pagination"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="footer-inner">
|
|
<div class="footer-brand">
|
|
<div class="footer-logo">// APP HUB</div>
|
|
<p class="footer-desc">下一代应用下载中心,暗黑科技风格设计,为您提供最前沿的应用发现体验。安全、快速、极致。</p>
|
|
</div>
|
|
<div class="footer-links">
|
|
<div class="footer-col">
|
|
<h4>产品</h4>
|
|
<a href="#featured">精选应用</a>
|
|
<a href="#new">最新上架</a>
|
|
<a href="#library">应用库</a>
|
|
</div>
|
|
<div class="footer-col">
|
|
<h4>分类</h4>
|
|
<a href="#library" onclick="filterByCategory(1)">社交通讯</a>
|
|
<a href="#library" onclick="filterByCategory(2)">效率办公</a>
|
|
<a href="#library" onclick="filterByCategory(3)">影音娱乐</a>
|
|
<a href="#library" onclick="filterByCategory(6)">工具开发</a>
|
|
</div>
|
|
<div class="footer-col">
|
|
<h4>关于</h4>
|
|
<a href="#">关于我们</a>
|
|
<a href="#">隐私政策</a>
|
|
<a href="#">服务条款</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<div class="footer-copy">© 2026 APP HUB · All rights reserved</div>
|
|
<div class="footer-status"><span class="footer-status-dot"></span>SYSTEM OPERATIONAL</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal-overlay" id="modalOverlay">
|
|
<div class="modal" id="modal">
|
|
<button class="modal-close" onclick="closeModal()">✕</button>
|
|
<div id="modalContent">
|
|
<div class="modal-skel">
|
|
<div style="display:flex;gap:20px;margin-bottom:24px">
|
|
<div class="skel" style="width:80px;height:80px;border-radius:18px"></div>
|
|
<div style="flex:1">
|
|
<div class="skel skel-line mid" style="height:20px;margin-bottom:10px"></div>
|
|
<div class="skel skel-line short"></div>
|
|
</div>
|
|
</div>
|
|
<div class="skel skel-line"></div>
|
|
<div class="skel skel-line"></div>
|
|
<div class="skel skel-line short"></div>
|
|
<div class="skel skel-line"></div>
|
|
<div class="skel skel-line short"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast -->
|
|
<div class="toast" id="toast"></div>
|
|
|
|
<script>
|
|
/* ==================== STATE ==================== */
|
|
const state = {
|
|
categories: [],
|
|
featured: [],
|
|
newApps: [],
|
|
library: { list: [], total: 0, page: 1, pageSize: 10 },
|
|
libCategory: 0,
|
|
libKeyword: '',
|
|
libSort: '',
|
|
loading: false
|
|
};
|
|
|
|
const API_BASE = '/api/v1/app';
|
|
|
|
/* ==================== API ==================== */
|
|
async function apiGet(path) {
|
|
try {
|
|
const res = await fetch(API_BASE + path);
|
|
if (!res.ok) throw new Error('HTTP ' + res.status);
|
|
const json = await res.json();
|
|
if (json.code === 0) return json.data;
|
|
throw new Error(json.message || '请求失败');
|
|
} catch (e) {
|
|
console.error('[API Error]', path, e);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
/* ==================== UTILS ==================== */
|
|
function formatNumber(n) {
|
|
if (n == null || isNaN(n)) return '0';
|
|
if (n >= 100000000) return (n / 100000000).toFixed(1).replace(/\.0$/, '') + '亿';
|
|
if (n >= 10000) return (n / 10000).toFixed(1).replace(/\.0$/, '') + '万';
|
|
return String(n);
|
|
}
|
|
|
|
function hashString(str) {
|
|
let hash = 0;
|
|
for (let i = 0; i < str.length; i++) {
|
|
hash = ((hash << 5) - hash) + str.charCodeAt(i);
|
|
hash = hash & hash;
|
|
}
|
|
return Math.abs(hash);
|
|
}
|
|
|
|
function generateIconHTML(app, size) {
|
|
if (app.icon && app.icon.trim()) {
|
|
return '<img class="app-icon-img" src="' + escapeHtml(app.icon) + '" alt="' + escapeHtml(app.name) + '" loading="lazy">';
|
|
}
|
|
const hash = hashString(app.name || 'A');
|
|
const hue1 = hash % 360;
|
|
const hue2 = (hash * 7 + 120) % 360;
|
|
const initial = (app.name || '?').charAt(0);
|
|
const borderHue = hue1;
|
|
return '<div class="app-icon-placeholder" style="background:linear-gradient(135deg,hsl(' + hue1 + ',60%,12%),hsl(' + hue2 + ',55%,18%));border-color:hsl(' + borderHue + ',80%,45%);box-shadow:0 0 12px hsla(' + borderHue + ',80%,50%,0.3);">' +
|
|
'<span style="color:hsl(' + hue1 + ',85%,60%);text-shadow:0 0 8px hsla(' + hue1 + ',85%,50%,0.5)">' + escapeHtml(initial) + '</span>' +
|
|
'</div>';
|
|
}
|
|
|
|
function escapeHtml(str) {
|
|
if (str == null) return '';
|
|
return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, ''');
|
|
}
|
|
|
|
function parseJSONArr(str) {
|
|
try {
|
|
const arr = JSON.parse(str);
|
|
return Array.isArray(arr) ? arr : [];
|
|
} catch (e) {
|
|
return [];
|
|
}
|
|
}
|
|
|
|
function starRatingHTML(rating) {
|
|
const r = parseFloat(rating) || 0;
|
|
let html = '';
|
|
for (let i = 1; i <= 5; i++) {
|
|
if (r >= i) {
|
|
html += '<span class="star filled">★</span>';
|
|
} else if (r >= i - 0.5) {
|
|
html += '<span class="star half">★</span>';
|
|
} else {
|
|
html += '<span class="star">★</span>';
|
|
}
|
|
}
|
|
return html;
|
|
}
|
|
|
|
function debounce(fn, delay) {
|
|
let timer = null;
|
|
return function () {
|
|
const ctx = this, args = arguments;
|
|
clearTimeout(timer);
|
|
timer = setTimeout(function () { fn.apply(ctx, args); }, delay);
|
|
};
|
|
}
|
|
|
|
function showToast(msg) {
|
|
const t = document.getElementById('toast');
|
|
t.textContent = msg;
|
|
t.classList.add('show');
|
|
clearTimeout(t._timer);
|
|
t._timer = setTimeout(function () { t.classList.remove('show'); }, 2500);
|
|
}
|
|
|
|
function scrollToSection(id) {
|
|
const el = document.getElementById(id);
|
|
if (el) el.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
|
|
/* ==================== CARD RENDERERS ==================== */
|
|
function appCardHTML(app, opts) {
|
|
opts = opts || {};
|
|
const isFeatured = opts.featured;
|
|
const isNew = opts.newCard;
|
|
const cardClass = isFeatured ? 'featured-card' : (isNew ? 'new-card' : 'app-card');
|
|
const iconSize = isFeatured ? '' : '';
|
|
|
|
let badge = '';
|
|
if (app.is_new && !isNew) {
|
|
badge = '<span class="new-badge">NEW</span>';
|
|
}
|
|
if (isFeatured) {
|
|
badge = '<span class="feat-badge">FEATURED</span>';
|
|
}
|
|
|
|
return '<div class="' + cardClass + ' reveal visible" onclick="openModal(' + app.id + ')">' +
|
|
badge +
|
|
'<div class="card-top">' +
|
|
'<div class="app-icon">' + generateIconHTML(app) + '</div>' +
|
|
'<div class="card-name-row">' +
|
|
'<div class="card-name">' + escapeHtml(app.name) + '</div>' +
|
|
'<div class="card-dev">' + escapeHtml(app.developer || '未知开发者') + '</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<span class="card-cat">' + escapeHtml(app.category_name || '未分类') + '</span>' +
|
|
'<p class="card-desc">' + escapeHtml(app.description || '') + '</p>' +
|
|
'<div class="card-bottom">' +
|
|
'<div class="card-rating">' +
|
|
'<div class="stars">' + starRatingHTML(app.rating) + '</div>' +
|
|
'<span class="rating-num">' + (parseFloat(app.rating) || 0).toFixed(1) + '</span>' +
|
|
'</div>' +
|
|
'<div class="card-downloads">' +
|
|
'<svg class="dl-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:-1px"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg> ' +
|
|
formatNumber(app.downloads) +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>';
|
|
}
|
|
|
|
/* ==================== CATEGORY BAR ==================== */
|
|
function renderCategoryBar() {
|
|
const bar = document.getElementById('categoryBar');
|
|
let html = '<button class="cat-pill active" data-cid="0" onclick="scrollToSection(\'library\')">全部</button>';
|
|
state.categories.forEach(function (cat) {
|
|
html += '<button class="cat-pill" data-cid="' + cat.id + '" onclick="filterByCategory(' + cat.id + ')">' + escapeHtml(cat.name) + '</button>';
|
|
});
|
|
bar.innerHTML = html;
|
|
}
|
|
|
|
function renderLibCatFilter() {
|
|
const wrap = document.getElementById('libCatFilter');
|
|
let html = '<button class="cat-pill active" data-libcid="0">全部</button>';
|
|
state.categories.forEach(function (cat) {
|
|
html += '<button class="cat-pill" data-libcid="' + cat.id + '">' + escapeHtml(cat.name) + '</button>';
|
|
});
|
|
wrap.innerHTML = html;
|
|
wrap.querySelectorAll('.cat-pill').forEach(function (btn) {
|
|
btn.addEventListener('click', function () {
|
|
wrap.querySelectorAll('.cat-pill').forEach(function (b) { b.classList.remove('active'); });
|
|
btn.classList.add('active');
|
|
state.libCategory = parseInt(btn.dataset.libcid, 10);
|
|
state.library.page = 1;
|
|
loadLibrary();
|
|
});
|
|
});
|
|
}
|
|
|
|
function filterByCategory(cid) {
|
|
state.libCategory = cid;
|
|
state.library.page = 1;
|
|
const wrap = document.getElementById('libCatFilter');
|
|
if (wrap) {
|
|
wrap.querySelectorAll('.cat-pill').forEach(function (b) {
|
|
b.classList.toggle('active', parseInt(b.dataset.libcid, 10) === cid);
|
|
});
|
|
}
|
|
scrollToSection('library');
|
|
loadLibrary();
|
|
}
|
|
|
|
/* ==================== FEATURED ==================== */
|
|
function renderFeatured() {
|
|
const grid = document.getElementById('featuredGrid');
|
|
if (!state.featured || state.featured.length === 0) {
|
|
grid.innerHTML = '<div class="empty-state"><div class="empty-state-icon">🔍</div><div class="empty-state-text">暂无精选应用</div></div>';
|
|
return;
|
|
}
|
|
let html = '';
|
|
state.featured.forEach(function (app) {
|
|
html += appCardHTML(app, { featured: true });
|
|
});
|
|
grid.innerHTML = html;
|
|
}
|
|
|
|
/* ==================== NEW APPS ==================== */
|
|
function renderNew() {
|
|
const scroll = document.getElementById('newScroll');
|
|
if (!state.newApps || state.newApps.length === 0) {
|
|
scroll.innerHTML = '<div class="empty-state"><div class="empty-state-icon">🔍</div><div class="empty-state-text">暂无新上架应用</div></div>';
|
|
return;
|
|
}
|
|
let html = '';
|
|
state.newApps.forEach(function (app) {
|
|
html += appCardHTML(app, { newCard: true });
|
|
});
|
|
scroll.innerHTML = html;
|
|
}
|
|
|
|
/* ==================== LIBRARY ==================== */
|
|
async function loadLibrary() {
|
|
if (state.loading) return;
|
|
state.loading = true;
|
|
const grid = document.getElementById('libraryGrid');
|
|
// Show skeletons
|
|
let skel = '';
|
|
for (let i = 0; i < 10; i++) {
|
|
skel += '<div class="skeleton-card"><div class="skel skel-icon"></div><div class="skel skel-line mid"></div><div class="skel skel-line short"></div><div class="skel skel-line"></div><div class="skel skel-line short"></div></div>';
|
|
}
|
|
grid.innerHTML = skel;
|
|
|
|
const params = new URLSearchParams();
|
|
if (state.libCategory) params.set('category_id', state.libCategory);
|
|
if (state.libKeyword) params.set('keyword', state.libKeyword);
|
|
if (state.libSort) params.set('sort', state.libSort);
|
|
params.set('page', state.library.page);
|
|
params.set('page_size', state.library.pageSize);
|
|
|
|
const data = await apiGet('/apps?' + params.toString());
|
|
state.loading = false;
|
|
|
|
if (!data || !data.list) {
|
|
grid.innerHTML = '<div class="empty-state"><div class="empty-state-icon">⚠</div><div class="empty-state-text">加载失败,请稍后重试</div></div>';
|
|
document.getElementById('pagination').innerHTML = '';
|
|
return;
|
|
}
|
|
|
|
state.library.list = data.list;
|
|
state.library.total = data.total || 0;
|
|
state.library.page = data.page || 1;
|
|
state.library.pageSize = data.page_size || 10;
|
|
|
|
if (data.list.length === 0) {
|
|
grid.innerHTML = '<div class="empty-state"><div class="empty-state-icon">🔍</div><div class="empty-state-text">未找到匹配的应用</div></div>';
|
|
document.getElementById('pagination').innerHTML = '';
|
|
return;
|
|
}
|
|
|
|
let html = '';
|
|
data.list.forEach(function (app) {
|
|
html += appCardHTML(app);
|
|
});
|
|
grid.innerHTML = html;
|
|
renderPagination();
|
|
}
|
|
|
|
function renderPagination() {
|
|
const wrap = document.getElementById('pagination');
|
|
const total = state.library.total;
|
|
const pageSize = state.library.pageSize;
|
|
const page = state.library.page;
|
|
const totalPages = Math.ceil(total / pageSize);
|
|
|
|
if (totalPages <= 1) {
|
|
wrap.innerHTML = '<span class="page-info">共 ' + total + ' 个应用</span>';
|
|
return;
|
|
}
|
|
|
|
let html = '';
|
|
html += '<button class="page-btn" onclick="goToPage(' + (page - 1) + ')" ' + (page <= 1 ? 'disabled' : '') + '>‹</button>';
|
|
|
|
const maxVisible = 5;
|
|
let start = Math.max(1, page - Math.floor(maxVisible / 2));
|
|
let end = Math.min(totalPages, start + maxVisible - 1);
|
|
if (end - start < maxVisible - 1) start = Math.max(1, end - maxVisible + 1);
|
|
|
|
if (start > 1) {
|
|
html += '<button class="page-btn" onclick="goToPage(1)">1</button>';
|
|
if (start > 2) html += '<span class="page-info">...</span>';
|
|
}
|
|
for (let i = start; i <= end; i++) {
|
|
html += '<button class="page-btn ' + (i === page ? 'active' : '') + '" onclick="goToPage(' + i + ')">' + i + '</button>';
|
|
}
|
|
if (end < totalPages) {
|
|
if (end < totalPages - 1) html += '<span class="page-info">...</span>';
|
|
html += '<button class="page-btn" onclick="goToPage(' + totalPages + ')">' + totalPages + '</button>';
|
|
}
|
|
|
|
html += '<button class="page-btn" onclick="goToPage(' + (page + 1) + ')" ' + (page >= totalPages ? 'disabled' : '') + '>›</button>';
|
|
html += '<span class="page-info">' + page + ' / ' + totalPages + '</span>';
|
|
wrap.innerHTML = html;
|
|
}
|
|
|
|
function goToPage(p) {
|
|
const totalPages = Math.ceil(state.library.total / state.library.pageSize);
|
|
if (p < 1 || p > totalPages) return;
|
|
state.library.page = p;
|
|
loadLibrary();
|
|
document.getElementById('library').scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
|
|
/* ==================== MODAL ==================== */
|
|
async function openModal(appId) {
|
|
const overlay = document.getElementById('modalOverlay');
|
|
const content = document.getElementById('modalContent');
|
|
overlay.classList.add('open');
|
|
document.body.style.overflow = 'hidden';
|
|
|
|
// Show skeleton
|
|
content.innerHTML =
|
|
'<div class="modal-skel">' +
|
|
'<div style="display:flex;gap:20px;margin-bottom:24px">' +
|
|
'<div class="skel" style="width:80px;height:80px;border-radius:18px"></div>' +
|
|
'<div style="flex:1">' +
|
|
'<div class="skel skel-line mid" style="height:20px;margin-bottom:10px"></div>' +
|
|
'<div class="skel skel-line short"></div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="skel skel-line"></div><div class="skel skel-line"></div><div class="skel skel-line short"></div>' +
|
|
'<div class="skel skel-line"></div><div class="skel skel-line short"></div>' +
|
|
'</div>';
|
|
|
|
const app = await apiGet('/apps/' + appId);
|
|
if (!app) {
|
|
content.innerHTML = '<div class="empty-state"><div class="empty-state-icon">⚠</div><div class="empty-state-text">加载应用详情失败</div></div>';
|
|
return;
|
|
}
|
|
|
|
const tags = parseJSONArr(app.tags);
|
|
const features = parseJSONArr(app.features);
|
|
const screenshots = parseJSONArr(app.screenshots);
|
|
|
|
let tagsHTML = '';
|
|
if (tags.length) {
|
|
tagsHTML = tags.map(function (t) { return '<span class="tag-pill">' + escapeHtml(t) + '</span>'; }).join('');
|
|
} else {
|
|
tagsHTML = '<span class="tag-pill" style="opacity:0.5">暂无标签</span>';
|
|
}
|
|
|
|
let featuresHTML = '';
|
|
if (features.length) {
|
|
featuresHTML = features.map(function (f) {
|
|
return '<li class="feature-item"><span class="feature-check">▸</span>' + escapeHtml(f) + '</li>';
|
|
}).join('');
|
|
} else {
|
|
featuresHTML = '<li class="feature-item" style="opacity:0.5"><span class="feature-check">▸</span>暂无特性信息</li>';
|
|
}
|
|
|
|
let screenshotsHTML = '';
|
|
if (screenshots.length) {
|
|
screenshotsHTML = '<div class="modal-section"><div class="modal-section-title">应用截图</div><div style="display:flex;gap:10px;overflow-x:auto;padding-bottom:8px">' +
|
|
screenshots.map(function (s) {
|
|
return '<div style="flex:0 0 auto;min-width:200px;height:120px;background:rgba(255,255,255,0.03);border:1px solid var(--border-glass);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:0.75rem;color:var(--text-muted);padding:12px;text-align:center">' + escapeHtml(s) + '</div>';
|
|
}).join('') +
|
|
'</div></div>';
|
|
}
|
|
|
|
content.innerHTML =
|
|
'<div class="modal-header">' +
|
|
'<div class="app-icon modal-icon">' + generateIconHTML(app) + '</div>' +
|
|
'<div class="modal-title-area">' +
|
|
'<h2 class="modal-name">' + escapeHtml(app.name) + '</h2>' +
|
|
'<div class="modal-dev">' + escapeHtml(app.developer || '未知开发者') + '</div>' +
|
|
'<div class="modal-cat-row">' +
|
|
'<span class="card-cat">' + escapeHtml(app.category_name || '未分类') + '</span>' +
|
|
(app.is_new ? '<span class="new-badge" style="position:static">NEW</span>' : '') +
|
|
(app.is_featured ? '<span class="feat-badge" style="position:static">FEATURED</span>' : '') +
|
|
'</div>' +
|
|
'<div class="modal-rating-row" style="margin-top:8px">' +
|
|
'<div class="stars">' + starRatingHTML(app.rating) + '</div>' +
|
|
'<span class="modal-rating-num">' + (parseFloat(app.rating) || 0).toFixed(1) + '</span>' +
|
|
'<span class="modal-reviews">(' + formatNumber(app.reviews) + ' 评价)</span>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="modal-section">' +
|
|
'<div class="modal-section-title">应用介绍</div>' +
|
|
'<p class="modal-desc">' + escapeHtml(app.description || '暂无描述') + '</p>' +
|
|
'</div>' +
|
|
'<div class="modal-section">' +
|
|
'<div class="modal-section-title">标签</div>' +
|
|
'<div class="tag-row">' + tagsHTML + '</div>' +
|
|
'</div>' +
|
|
'<div class="modal-section">' +
|
|
'<div class="modal-section-title">核心特性</div>' +
|
|
'<ul class="feature-list">' + featuresHTML + '</ul>' +
|
|
'</div>' +
|
|
screenshotsHTML +
|
|
'<div class="modal-section">' +
|
|
'<div class="modal-section-title">应用信息</div>' +
|
|
'<div class="modal-stats">' +
|
|
'<div class="stat-box"><div class="stat-label">下载量</div><div class="stat-value">' + formatNumber(app.downloads) + '</div></div>' +
|
|
'<div class="stat-box"><div class="stat-label">大小</div><div class="stat-value">' + escapeHtml(app.size || '-') + '</div></div>' +
|
|
'<div class="stat-box"><div class="stat-label">版本</div><div class="stat-value">' + escapeHtml(app.version || '-') + '</div></div>' +
|
|
'<div class="stat-box"><div class="stat-label">更新日期</div><div class="stat-value">' + escapeHtml(app.update_date || '-') + '</div></div>' +
|
|
'<div class="stat-box"><div class="stat-label">平台</div><div class="stat-value" style="font-size:0.8rem">' + escapeHtml(app.platform || '-') + '</div></div>' +
|
|
'<div class="stat-box"><div class="stat-label">价格</div><div class="stat-value">' + escapeHtml(app.price || '免费') + '</div></div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<button class="modal-download" onclick="showToast(\'开始下载 ' + escapeHtml(app.name) + ' ' + escapeHtml(app.version || '') + '\')">' +
|
|
'<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>' +
|
|
'下载应用' +
|
|
'</button>';
|
|
}
|
|
|
|
function closeModal() {
|
|
document.getElementById('modalOverlay').classList.remove('open');
|
|
document.body.style.overflow = '';
|
|
}
|
|
|
|
/* ==================== PARTICLES ==================== */
|
|
function initParticles() {
|
|
const container = document.getElementById('particles');
|
|
const colors = ['#00ff88', '#00d4ff', '#00ff88', '#00d4ff', '#a855f7'];
|
|
for (let i = 0; i < 25; i++) {
|
|
const p = document.createElement('div');
|
|
p.className = 'particle';
|
|
p.style.left = Math.random() * 100 + '%';
|
|
p.style.animationDuration = (15 + Math.random() * 20) + 's';
|
|
p.style.animationDelay = (Math.random() * 20) + 's';
|
|
const color = colors[Math.floor(Math.random() * colors.length)];
|
|
p.style.background = color;
|
|
p.style.boxShadow = '0 0 6px ' + color;
|
|
const size = 2 + Math.random() * 3;
|
|
p.style.width = size + 'px';
|
|
p.style.height = size + 'px';
|
|
container.appendChild(p);
|
|
}
|
|
}
|
|
|
|
/* ==================== INTERSECTION OBSERVER ==================== */
|
|
function initObserver() {
|
|
const observer = new IntersectionObserver(function (entries) {
|
|
entries.forEach(function (entry) {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
}
|
|
});
|
|
}, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
|
|
|
|
function observeAll() {
|
|
document.querySelectorAll('.reveal:not(.visible)').forEach(function (el) {
|
|
observer.observe(el);
|
|
});
|
|
}
|
|
observeAll();
|
|
// Re-observe after dynamic content loads
|
|
window._observeAll = observeAll;
|
|
}
|
|
|
|
/* ==================== NAV SCROLLSPY ==================== */
|
|
function initNavScroll() {
|
|
const navLinks = document.querySelectorAll('.nav-link');
|
|
const sections = ['hero', 'featured', 'new', 'library'];
|
|
|
|
window.addEventListener('scroll', function () {
|
|
let current = 'hero';
|
|
const scrollY = window.scrollY + 120;
|
|
sections.forEach(function (id) {
|
|
const el = document.getElementById(id);
|
|
if (el && el.offsetTop <= scrollY) current = id;
|
|
});
|
|
navLinks.forEach(function (link) {
|
|
link.classList.toggle('active', link.dataset.target === current);
|
|
});
|
|
});
|
|
}
|
|
|
|
/* ==================== INIT ==================== */
|
|
async function init() {
|
|
initParticles();
|
|
initObserver();
|
|
initNavScroll();
|
|
|
|
// Header search → library search
|
|
const headerSearch = document.getElementById('headerSearch');
|
|
const libSearch = document.getElementById('libSearch');
|
|
headerSearch.addEventListener('input', debounce(function (e) {
|
|
const val = e.target.value.trim();
|
|
libSearch.value = val;
|
|
state.libKeyword = val;
|
|
state.library.page = 1;
|
|
state.libSort = state.libSort || '';
|
|
loadLibrary();
|
|
scrollToSection('library');
|
|
}, 300));
|
|
|
|
// Library search
|
|
libSearch.addEventListener('input', debounce(function (e) {
|
|
state.libKeyword = e.target.value.trim();
|
|
state.library.page = 1;
|
|
loadLibrary();
|
|
}, 300));
|
|
|
|
// Sort buttons
|
|
document.querySelectorAll('#libSort .sort-btn').forEach(function (btn) {
|
|
btn.addEventListener('click', function () {
|
|
document.querySelectorAll('#libSort .sort-btn').forEach(function (b) { b.classList.remove('active'); });
|
|
btn.classList.add('active');
|
|
state.libSort = btn.dataset.sort;
|
|
state.library.page = 1;
|
|
loadLibrary();
|
|
});
|
|
});
|
|
|
|
// Modal close on overlay click & ESC
|
|
document.getElementById('modalOverlay').addEventListener('click', function (e) {
|
|
if (e.target === this) closeModal();
|
|
});
|
|
document.addEventListener('keydown', function (e) {
|
|
if (e.key === 'Escape') closeModal();
|
|
});
|
|
|
|
// Mobile toggle
|
|
document.getElementById('mobileToggle').addEventListener('click', function () {
|
|
const nav = document.getElementById('nav');
|
|
if (nav.style.display === 'flex') {
|
|
nav.style.display = '';
|
|
} else {
|
|
nav.style.display = 'flex';
|
|
nav.style.position = 'absolute';
|
|
nav.style.top = '72px';
|
|
nav.style.left = '0';
|
|
nav.style.right = '0';
|
|
nav.style.flexDirection = 'column';
|
|
nav.style.background = 'rgba(13,13,13,0.95)';
|
|
nav.style.padding = '16px';
|
|
nav.style.borderBottom = '1px solid var(--border-glass)';
|
|
nav.style.zIndex = '99';
|
|
}
|
|
});
|
|
|
|
// Load home data
|
|
const home = await apiGet('/home');
|
|
if (home) {
|
|
state.categories = home.categories || [];
|
|
state.featured = home.featured || [];
|
|
state.newApps = home.new || [];
|
|
|
|
renderCategoryBar();
|
|
renderLibCatFilter();
|
|
renderFeatured();
|
|
renderNew();
|
|
|
|
// Update hero stats
|
|
document.getElementById('statCats').textContent = state.categories.length;
|
|
const totalDownloads = (state.featured.concat(state.newApps)).reduce(function (sum, app) {
|
|
return sum + (app.downloads || 0);
|
|
}, 0);
|
|
// Also fetch total from library for accurate count
|
|
document.getElementById('statApps').textContent = '18+';
|
|
document.getElementById('statDownloads').textContent = formatNumber(totalDownloads || 560000000);
|
|
|
|
if (window._observeAll) window._observeAll();
|
|
} else {
|
|
// Fallback: load categories separately
|
|
const cats = await apiGet('/categories');
|
|
if (cats) {
|
|
state.categories = cats;
|
|
renderCategoryBar();
|
|
renderLibCatFilter();
|
|
}
|
|
const featured = await apiGet('/featured?limit=8');
|
|
if (featured) {
|
|
state.featured = featured;
|
|
renderFeatured();
|
|
}
|
|
const newApps = await apiGet('/new?limit=4');
|
|
if (newApps) {
|
|
state.newApps = newApps;
|
|
renderNew();
|
|
}
|
|
document.getElementById('statCats').textContent = state.categories.length;
|
|
document.getElementById('statApps').textContent = '--';
|
|
document.getElementById('statDownloads').textContent = '--';
|
|
}
|
|
|
|
// Load library
|
|
loadLibrary();
|
|
|
|
// Set hero stats after library loads
|
|
setTimeout(async function () {
|
|
const libData = await apiGet('/apps?page=1&page_size=1');
|
|
if (libData) {
|
|
document.getElementById('statApps').textContent = libData.total || '18+';
|
|
}
|
|
}, 500);
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', init);
|
|
</script>
|
|
</body>
|
|
</html>
|