62 lines
3.4 KiB
HTML
62 lines
3.4 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>人生轨迹 | Life Trajectory</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body class="overflow-hidden bg-[#0a0c10] text-slate-100 font-sans selection:bg-orange-200/30">
|
|
<!-- Dynamic Fluid Background -->
|
|
<div id="app-bg" class="fixed inset-0 z-[-1]">
|
|
<div class="absolute inset-0 bg-gradient-to-br from-[#1a1c2c] via-[#0a0c10] to-[#2d1b10] opacity-80"></div>
|
|
<div class="absolute top-[-10%] left-[-10%] w-[60%] h-[60%] bg-blue-900/20 blur-[120px] rounded-full animate-float"></div>
|
|
<div class="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] bg-orange-900/10 blur-[120px] rounded-full animate-float-delayed"></div>
|
|
<img src="https://r2-bucket.flowith.net/f/845b300ff0a2b36e/digital_healing_background_design_index_1%401024x1024.jpeg"
|
|
alt="texture" class="w-full h-full object-cover mix-blend-overlay opacity-30">
|
|
</div>
|
|
|
|
<!-- Header -->
|
|
<header class="fixed top-0 left-0 p-6 z-50 w-full flex justify-between items-center pointer-events-none">
|
|
<div class="flex items-center gap-3 pointer-events-auto cursor-pointer" onclick="location.reload()">
|
|
<img src="https://r2-bucket.flowith.net/f/cf8c6e7c020409c9/lifeline_app_logo_design_index_0%401024x1024.jpeg"
|
|
alt="logo" class="w-10 h-10 rounded-full shadow-2xl border border-white/10">
|
|
<h1 class="text-xl font-serif tracking-[0.2em] bg-clip-text text-transparent bg-gradient-to-r from-white to-white/50">人生轨迹</h1>
|
|
</div>
|
|
<nav id="top-nav" class="hidden pointer-events-auto">
|
|
<button id="user-profile-btn" class="glass-btn p-2.5 rounded-full hover:shadow-orange-200/10 shadow-lg">
|
|
<i data-lucide="user" class="w-5 h-5"></i>
|
|
</button>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- Main Container -->
|
|
<main id="app-root" class="w-full h-screen flex items-center justify-center p-4">
|
|
<div id="view-container" class="w-full max-w-5xl h-[85vh] relative rounded-[32px] overflow-hidden">
|
|
<!-- Content Injected Here -->
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Loader -->
|
|
<div id="loader" class="fixed inset-0 flex flex-col items-center justify-center z-[200] bg-[#0a0c10] hidden">
|
|
<div class="w-16 h-16 border-2 border-orange-200/20 border-t-orange-200 rounded-full animate-spin mb-4"></div>
|
|
<p class="text-xs tracking-[0.3em] text-white/40 uppercase">载入生命序列...</p>
|
|
</div>
|
|
|
|
<!-- Global Modals -->
|
|
<div id="modal-overlay" class="fixed inset-0 bg-black/60 backdrop-blur-xl z-[100] hidden flex items-center justify-center p-4">
|
|
<div id="modal-content" class="glass-card max-w-lg w-full p-8 relative border border-white/10 shadow-2xl">
|
|
<button id="close-modal" class="absolute top-6 right-6 text-white/40 hover:text-white transition-colors">
|
|
<i data-lucide="x" class="w-5 h-5"></i>
|
|
</button>
|
|
<div id="modal-body" class="max-h-[70vh] overflow-y-auto pr-2 custom-scrollbar"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="index.js"></script>
|
|
</body>
|
|
</html>
|