<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LPXQ.net 网站维护中 · Under Maintenance</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--accent: #6366f1;
}
* { -webkit-tap-highlight-color: transparent; }
body {
font-family: 'Noto Sans SC', 'Space Grotesk', sans-serif;
background: #070a18;
overflow: hidden;
}
.font-en { font-family: 'Space Grotesk', 'Noto Sans SC', sans-serif; }
/* ─── Animated gradient orbs ─── */
.orb {
position: absolute;
border-radius: 50%;
filter: blur(90px);
opacity: 0.55;
will-change: transform;
animation: drift 18s ease-in-out infinite alternate;
}
.orb-1 { width: 480px; height: 480px; background: #4f46e5; top: -120px; left: -100px; }
.orb-2 { width: 420px; height: 420px; background: #7c3aed; bottom: -140px; right: -80px; animation-delay: -6s; }
.orb-3 { width: 360px; height: 360px; background: #0ea5e9; top: 40%; left: 55%; opacity: 0.35; animation-delay: -12s; }
@keyframes drift {
0% { transform: translate(0, 0) scale(1); }
50% { transform: translate(60px, -40px) scale(1.15); }
100% { transform: translate(-50px, 50px) scale(0.95); }
}
/* ─── Subtle grid overlay ─── */
.grid-overlay {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 75%);
}
/* ─── Floating particles ─── */
.particle {
position: absolute;
border-radius: 50%;
background: rgba(255,255,255,0.35);
animation: float linear infinite;
opacity: 0;
}
@keyframes float {
0% { transform: translateY(0); opacity: 0; }
10% { opacity: 0.6; }
90% { opacity: 0.6; }
100% { transform: translateY(-110vh); opacity: 0; }
}
/* ─── Glass card ─── */
.glass {
background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(255,255,255,0.12);
box-shadow:
0 30px 80px -20px rgba(0,0,0,0.7),
inset 0 1px 0 rgba(255,255,255,0.15);
}
/* ─── Gear animation ─── */
.gear-slow { animation: spin 14s linear infinite; transform-origin: center; }
.gear-rev { animation: spin 10s linear infinite reverse; transform-origin: center; }
@keyframes spin { to { transform: rotate(360deg); } }
/* ─── Pulsing status dot ─── */
.status-dot {
width: 10px; height: 10px; border-radius: 50%;
background: #34d399;
position: relative;
}
.status-dot::after {
content: '';
position: absolute; inset: -6px;
border-radius: 50%;
background: rgba(52,211,153,0.4);
animation: pulse-ring 1.8s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}
@keyframes pulse-ring {
0% { transform: scale(0.4); opacity: 1; }
100% { transform: scale(2.1); opacity: 0; }
}
/* ─── Progress shimmer ─── */
.progress-track {
background: rgba(255,255,255,0.08);
border-radius: 999px;
height: 6px;
overflow: hidden;
}
.progress-fill {
height: 100%;
width: 0%;
border-radius: 999px;
background: linear-gradient(90deg, #6366f1, #8b5cf6, #0ea5e9);
background-size: 200% 100%;
animation: shimmer 2.4s linear infinite, grow 6s ease-in-out infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes grow {
0% { width: 0%; }
35% { width: 62%; }
70% { width: 78%; }
100% { width: 92%; }
}
/* ─── Entrance animations ─── */
.fade-up {
opacity: 0;
transform: translateY(24px);
animation: fadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
.delay-1 { animation-delay: 0.15s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.45s; }
.delay-4 { animation-delay: 0.6s; }
.delay-5 { animation-delay: 0.75s; }
/* ─── Gradient text ─── */
.gradient-text {
background: linear-gradient(90deg, #a5b4fc, #e0e7ff, #93c5fd);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ─── Contact button hover ─── */
.btn-ghost {
border: 1px solid rgba(255,255,255,0.18);
transition: all 0.3s ease;
}
.btn-ghost:hover {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.4);
transform: translateY(-2px);
}
/* ─── Scrollbar hidden ─── */
::-webkit-scrollbar { display: none; }
</style>
</head>
<body class="relative min-h-screen flex items-center justify-center text-white selection:bg-indigo-500/30">
<!-- Background layers -->
<div class="fixed inset-0 -z-10 overflow-hidden">
<div class="orb orb-1"></div>
<div class="orb orb-2"></div>
<div class="orb orb-3"></div>
<div class="grid-overlay"></div>
<div id="particles"></div>
</div>
<!-- Main content -->
<main class="relative w-full max-w-2xl px-6 py-16">
<!-- Status badge -->
<div class="flex justify-center mb-8 fade-up">
<div class="glass rounded-full px-5 py-2 flex items-center gap-3">
<span class="status-dot"></span>
<span class="text-sm tracking-widest text-emerald-300">LPXQ.net 维护中 · MAINTENANCE</span>
</div>
</div>
<!-- Animated gears icon -->
<div class="flex justify-center mb-10 fade-up delay-1">
<div class="relative w-32 h-32 flex items-center justify-center">
<!-- Outer ring -->
<svg class="gear-slow absolute inset-0 w-full h-full text-indigo-400/70" viewBox="0 0 100 100" fill="none">
<circle cx="50" cy="50" r="48" stroke="currentColor" stroke-width="1" stroke-dasharray="4 8" opacity="0.5"/>
</svg>
<!-- Gear 1 -->
<svg class="gear-slow w-24 h-24 text-indigo-300/90 drop-shadow-[0_0_18px_rgba(99,102,241,0.45)]" viewBox="0 0 100 100" fill="currentColor">
<path d="M50 8 L56 22 L70 16 L74 30 L89 30 L87 45 L100 50 L87 55 L89 70 L74 70 L70 84 L56 78 L50 92 L44 78 L30 84 L26 70 L11 70 L13 55 L0 50 L13 45 L11 30 L26 30 L30 16 L44 22 Z" opacity="0.9"/>
<circle cx="50" cy="50" r="22" fill="#0b1026"/>
<circle cx="50" cy="50" r="22" stroke="#0b1026" stroke-width="0"/>
</svg>
<!-- Gear 2 (reverse, smaller) -->
<svg class="gear-rev absolute w-14 h-14 text-sky-300/80 translate-x-12 translate-y-12 drop-shadow-[0_0_14px_rgba(14,165,233,0.5)]" viewBox="0 0 100 100" fill="currentColor">
<path d="M50 10 L56 24 L70 18 L74 32 L89 31 L87 46 L100 50 L87 54 L89 69 L74 68 L70 82 L56 76 L50 90 L44 76 L30 82 L26 68 L11 69 L13 54 L0 50 L13 46 L11 31 L26 32 L30 18 L44 24 Z" opacity="0.95"/>
<circle cx="50" cy="50" r="24" fill="#0b1026"/>
</svg>
<!-- Center bolt icon -->
<div class="absolute inset-0 flex items-center justify-center">
<svg class="w-9 h-9 text-indigo-200" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<path d="M13 2 L4.5 13.5 H11 L10 22 L19.5 10.5 H13 Z"/>
</svg>
</div>
</div>
</div>
<!-- Headline -->
<div class="text-center mb-6 fade-up delay-2">
<h1 class="text-5xl sm:text-6xl font-black tracking-tight mb-3">
<span class="gradient-text">LPXQ.net 网站维护中</span>
</h1>
<p class="font-en text-lg sm:text-xl font-medium text-indigo-200/90 tracking-[0.3em] uppercase">
Under Maintenance
</p>
</div>
<!-- Description -->
<div class="text-center max-w-lg mx-auto mb-10 fade-up delay-3">
<p class="text-slate-300/90 leading-relaxed text-[15px] sm:text-base">
我们正在对网站进行升级优化，为您带来更流畅、更精彩的体验。
升级期间网站暂时无法访问，给您带来的不便敬请谅解。
</p>
<p class="font-en text-slate-400/80 leading-relaxed text-sm sm:text-[15px] mt-3">
We're currently upgrading our website to bring you a faster and better experience.
The site will be back online shortly. We apologize for any inconvenience.
</p>
</div>
<!-- Progress bar -->
<div class="max-w-sm mx-auto mb-12 fade-up delay-4">
<div class="progress-track">
<div class="progress-fill"></div>
</div>
<div class="flex justify-between mt-3 text-xs text-slate-400/80">
<span>正在升级优化中 · Upgrading…</span>
<span class="font-en" id="percent">0%</span>
</div>
</div>
<!-- Actions -->
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 fade-up delay-5">
<a href="mailto:support@example.com" class="btn-ghost w-full sm:w-auto px-8 py-3 rounded-xl text-sm tracking-wide backdrop-blur-sm flex items-center justify-center gap-2 group">
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="4" width="20" height="16" rx="2"/>
<path d="m22 7-10 6L2 7"/>
</svg>
<span>联系我们 · Contact Us</span>
</a>
<a href="#" onclick="return false;" class="btn-ghost w-full sm:w-auto px-8 py-3 rounded-xl text-sm tracking-wide backdrop-blur-sm flex items-center justify-center gap-2 group">
<svg class="w-4 h-4 group-hover:rotate-180 transition-transform duration-700" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12a9 9 0 1 1-2.64-6.36"/>
<path d="M21 3v6h-6"/>
</svg>
<span>刷新重试 · Refresh</span>
</a>
</div>
<!-- Footer -->
<footer class="mt-14 text-center text-xs text-slate-500/80 space-y-1 fade-up delay-5">
<p>© <span id="year"></span> 版权所有 · All Rights Reserved</p>
<p class="font-en tracking-widest text-slate-600/80">— 请稍后再来 · Please come back later —</p>
</footer>
</main>
<script>
// ─── Floating particles ───
(function () {
const container = document.getElementById('particles');
for (let i = 0; i < 28; i++) {
const p = document.createElement('div');
p.className = 'particle';
const size = 2 + Math.random() * 4;
p.style.width = size + 'px';
p.style.height = size + 'px';
p.style.left = Math.random() * 100 + 'vw';
p.style.bottom = '-10px';
p.style.animationDuration = (10 + Math.random() * 14) + 's';
p.style.animationDelay = (Math.random() * 12) + 's';
container.appendChild(p);
}
})();
// ─── Animated percentage counter ───
const percentEl = document.getElementById('percent');
let count = 0;
const interval = setInterval(() => {
count = Math.min(count + Math.floor(Math.random() * 3) + 1, 99);
percentEl.textContent = count + '%';
if (count >= 99) clearInterval(interval);
}, 350);
// ─── Current year ───
document.getElementById('year').textContent = new Date().getFullYear();
</script>
</body>
</html>
|
目前所在目录：/