84 lines
4.9 KiB
HTML
84 lines
4.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, maximum-scale=1.0, user-scalable=no">
|
|
<title>Life OS | 人生系统 - 紫禁之巅</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body class="bg-[#0F071A] text-purple-50 overflow-hidden">
|
|
<div id="app-container" class="relative mx-auto h-screen max-w-[375px] w-full overflow-hidden flex flex-col shadow-2xl border-x border-purple-900/20">
|
|
|
|
<!-- Background Elements -->
|
|
<div class="background-wrap fixed inset-0 -z-10 pointer-events-none bg-[#0F071A]">
|
|
<div class="absolute inset-0 bg-gradient-to-b from-[#1A0B2E] via-[#0F071A] to-[#050208]"></div>
|
|
<div id="stars"></div>
|
|
<!-- Decorative Aurora/Glow -->
|
|
<div class="absolute top-[-10%] left-[-10%] w-[120%] h-[60%] bg-purple-600/10 blur-[120px] rounded-full animate-pulse-slow"></div>
|
|
<div class="absolute bottom-[-10%] right-[-10%] w-[100%] h-[50%] bg-violet-600/5 blur-[100px] rounded-full"></div>
|
|
</div>
|
|
|
|
<!-- Onboarding Overlay -->
|
|
<div id="onboarding" class="absolute inset-0 z-50 bg-[#0F071A]/95 backdrop-blur-3xl transition-all duration-700">
|
|
<div id="wizard-content" class="h-full flex flex-col p-8 pt-16">
|
|
<!-- Content injected by JS -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content Area -->
|
|
<main id="main-content" class="hidden flex-1 flex flex-col overflow-y-auto pb-24 scroll-smooth">
|
|
<header class="p-6 flex justify-between items-center sticky top-0 bg-[#0F071A]/60 backdrop-blur-xl z-30 border-b border-white/5">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-purple-400 to-violet-600 p-[1px] shadow-lg shadow-purple-500/10">
|
|
<img src="https://r2-bucket.flowith.net/f/f7a4832f24552794/life_os_app_icon_index_1%401024x1024.jpeg" class="w-full h-full rounded-xl object-cover mix-blend-screen opacity-80" alt="logo">
|
|
</div>
|
|
<div>
|
|
<h1 class="text-sm font-bold tracking-[0.4em] text-purple-100 uppercase">人生OS</h1>
|
|
<p class="text-[8px] text-purple-400/60 tracking-widest">LIFE HARMONY v3.1</p>
|
|
</div>
|
|
</div>
|
|
<button id="profile-btn" class="p-2.5 bg-white/5 rounded-full backdrop-blur-md border border-white/10 hover:bg-white/10 transition-colors group">
|
|
<i data-lucide="user-cog" class="w-5 h-5 text-purple-200 group-active:rotate-90 transition-transform"></i>
|
|
</button>
|
|
</header>
|
|
|
|
<div id="page-render" class="flex-1 px-5 pt-4">
|
|
<!-- Dynamic Pages -->
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Bottom Navigation -->
|
|
<nav id="bottom-nav" class="hidden absolute bottom-0 left-0 right-0 h-20 bg-[#0F071A]/80 backdrop-blur-3xl border-t border-white/5 flex items-center justify-around px-4 z-40">
|
|
<button data-tab="record" class="nav-item flex flex-col items-center gap-1 active">
|
|
<i data-lucide="book-open" class="w-6 h-6"></i>
|
|
<span class="text-[8px] uppercase tracking-widest font-bold">回溯过去</span>
|
|
</button>
|
|
<button data-tab="script" class="nav-item flex flex-col items-center gap-1">
|
|
<i data-lucide="sparkles" class="w-6 h-6"></i>
|
|
<span class="text-[8px] uppercase tracking-widest font-bold">创造未来</span>
|
|
</button>
|
|
<button data-tab="path" class="nav-item flex flex-col items-center gap-1">
|
|
<i data-lucide="map" class="w-6 h-6"></i>
|
|
<span class="text-[8px] uppercase tracking-widest font-bold">路径实现</span>
|
|
</button>
|
|
</nav>
|
|
|
|
<!-- Global Music Player -->
|
|
<div id="music-player" class="fixed bottom-24 right-4 z-40">
|
|
<button id="music-toggle" class="w-11 h-11 rounded-full bg-white/5 border border-white/10 backdrop-blur-xl flex items-center justify-center shadow-lg transition-all opacity-40">
|
|
<div id="music-disc" class="absolute inset-0 rounded-full border border-purple-500/10 pointer-events-none"></div>
|
|
<i data-lucide="music-4" class="w-5 h-5 text-purple-300"></i>
|
|
</button>
|
|
<audio id="bg-music" loop>
|
|
<source src="https://v3b.fal.media/files/b/0a8c9a0b/rStj8V-2tCe6bVYpCCcLN_output.mp3" type="audio/mpeg">
|
|
</audio>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="app.js"></script>
|
|
</body>
|
|
</html>
|