peanut/happy-life-star
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化调整

Browse Source
This commit is contained in:
peanut_hzm
2025-07-26 00:37:18 +08:00
parent 08bbd4df0f
commit 0dfabc35d7
90 changed files with 3594 additions and 2294 deletions
Download Patch File Download Diff File Expand all files Collapse all files
开心APP网页代码v1.1/wnD97OS/index.html
+169
View File
@@ -0,0 +1,169 @@
<html lang="zh-CN" class="scroll-smooth"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>开心APP - 你的情绪陪伴使者</title>
<link rel="icon" href="https://r2.flowith.net/files/o/1752574406770-thoughtful_kaikai_character_generation_index_1@1024x1024.png">
<script src="https://cdn.tailwindcss.com?plugins=typography"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<link rel="stylesheet" href="style.css">
<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&amp;display=swap" rel="stylesheet">
</head>
<body class="bg-light-gray font-sans text-text-dark">
<div id="app-container" class="antialiased">
<!-- Header -->
<header id="main-header" class="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-lg transition-all duration-300">
<div class="container mx-auto px-6 py-4 flex justify-between items-center">
<a href="index.html" class="flex items-center space-x-2">
<svg width="32" height="32" viewBox="0 0 100 100" class="text-tech-blue">
<path fill="currentColor" d="M85.4,37.3C85.4,37.3,85.4,37.3,85.4,37.3c-2.8-9.9-10-17.7-19.1-21.2c-0.2-0.1-0.5-0.1-0.7-0.2c-0.1,0-0.2-0.1-0.3-0.1 c-1.2-0.4-2.5-0.8-3.7-1.1c-1-0.2-2-0.4-3-0.6c-1.1-0.2-2.1-0.3-3.2-0.4c-1.2-0.1-2.4-0.2-3.6-0.2c-0.1,0-0.2,0-0.3,0h-0.1 c-0.1,0-0.2,0-0.3,0c-1.2,0-2.4,0.1-3.6,0.2c-1.1,0.1-2.1,0.2-3.2,0.4c-1,0.2-2,0.4-3,0.6c-1.3,0.3-2.5,0.6-3.7,1.1 c-0.1,0-0.2,0.1-0.3,0.1c-0.2,0.1-0.5,0.1-0.7,0.2C21.6,19.6,14.4,27.4,11.6,37.3c0,0,0,0.1-0.1,0.1C8,47.7,8,58.8,11.5,69.2 c0,0.1,0.1,0.1,0.1,0.2c2.8,9.9,10,17.7,19.1,21.2c0.2,0.1,0.5,0.1,0.7,0.2c0.1,0,0.2,0.1,0.3,0.1c1.2,0.4,2.5,0.8,3.7,1.1 c1,0.2,2,0.4,3,0.6c1.1,0.2,2.1,0.3,3.2,0.4c1.2,0.1,2.4,0.2,3.6,0.2c0.1,0,0.2,0,0.3,0h0.1c0.1,0,0.2,0,0.3,0 c1.2,0,2.4-0.1,3.6-0.2c-1.1-0.1-2.1-0.2-3.2-0.4c1-0.2,2-0.4,3-0.6c1.3-0.3,2.5-0.6,3.7-1.1c0.1,0,0.2-0.1,0.3-0.1 c0.2-0.1,0.5-0.1,0.7-0.2c9.1-3.5,16.3-11.3,19.1-21.2c0-0.1,0.1-0.1,0.1-0.2C89,58.8,89,47.7,85.4,37.3z M50,77.9 c-15.4,0-27.9-12.5-27.9-27.9S34.6,22.1,50,22.1s27.9,12.5,27.9,27.9S65.4,77.9,50,77.9z"></path>
<path fill="var(--warm-orange)" d="M50,88.8c-21.4,0-38.8-17.4-38.8-38.8S28.6,11.2,50,11.2s38.8,17.4,38.8,38.8S71.4,88.8,50,88.8z M50,16.2 c-18.7,0-33.8,15.1-33.8,33.8S31.3,83.8,50,83.8s33.8-15.1,33.8-33.8S68.7,16.2,50,16.2z"></path>
</svg>
<span class="text-2xl font-bold text-tech-blue">开心APP</span>
</a>
<nav class="hidden lg:flex items-center space-x-8" id="nav-menu">
</nav>
<div class="flex items-center space-x-4">
<button id="login-button" class="hidden sm:inline-block text-text-medium hover:text-tech-blue transition-colors">登录</button>
<a href="chat.html" class="bg-tech-blue text-white px-5 py-2.5 rounded-full font-semibold hover:bg-blue-600 transition-all duration-300 transform hover:scale-105 shadow-lg shadow-blue-500/20">免费开始</a>
<button id="mobile-menu-button" class="lg:hidden text-text-dark">
<i data-lucide="menu" class="w-6 h-6"></i>
</button>
</div>
</div>
</header>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden fixed inset-0 bg-white/90 backdrop-blur-xl z-40 p-8 lg:hidden">
<nav class="flex flex-col space-y-6 text-center mt-16" id="mobile-nav-menu">
</nav>
</div>
<main>
<!-- Hero Section -->
<section class="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden bg-white">
<div class="absolute inset-0 z-0 opacity-20">
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
</div>
<div class="container mx-auto px-6 text-center relative z-10">
<div class="max-w-3xl mx-auto">
<h1 class="text-4xl md:text-6xl font-bold text-text-dark leading-tight mb-4 animate-fade-in-up" style="animation-delay: 0.1s;">你好，我是<span class="text-tech-blue">开开</span></h1>
<p class="text-xl md:text-2xl text-text-medium mb-8 animate-fade-in-up" style="animation-delay: 0.3s;">你的情绪陪伴使者</p>
</div>
<div class="mt-12 flex justify-center animate-fade-in-up" style="animation-delay: 0.5s;">
<img src="https://r2.flowith.net/files/1517c93c-849d-4a9b-94b6-d61aa295a8a1/1752600429516-image-1752600425876-cnlfpkbrh@1024x1024.png" alt="欢迎姿态的开开" class="w-full max-w-sm h-auto drop-shadow-2xl" style="object-fit: contain;">
</div>
<div class="mt-8">
<a href="chat.html" class="bg-warm-orange text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-orange-600 transition-all duration-300 transform hover:scale-105 inline-block shadow-lg shadow-orange-500/30 animate-fade-in-up" style="animation-delay: 0.7s;">开始一段对话</a>
</div>
</div>
</section>
<!-- Features Section -->
<section class="py-20 lg:py-32 bg-light-gray">
<div class="container mx-auto px-6">
<div class="text-center max-w-3xl mx-auto mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-text-dark mb-4 scroll-target">核心功能</h2>
<p class="text-lg text-text-medium scroll-target">开开博学多才、可爱治愈，愿意用最温柔的方式，陪伴每一个需要倾听的生命。</p>
</div>
<div id="features-grid" class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-white">
<div class="container mx-auto px-6 py-12">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div class="md:col-span-1">
<a href="index.html" class="flex items-center space-x-2">
<svg width="28" height="28" viewBox="0 0 100 100" class="text-tech-blue">
<path fill="currentColor" d="M85.4,37.3C85.4,37.3,85.4,37.3,85.4,37.3c-2.8-9.9-10-17.7-19.1-21.2c-0.2-0.1-0.5-0.1-0.7-0.2c-0.1,0-0.2-0.1-0.3-0.1 c-1.2-0.4-2.5-0.8-3.7-1.1c-1-0.2-2-0.4-3-0.6c-1.1-0.2-2.1-0.3-3.2-0.4c-1.2-0.1-2.4-0.2-3.6-0.2c-0.1,0-0.2,0-0.3,0h-0.1 c-0.1,0-0.2,0-0.3,0c-1.2,0-2.4,0.1-3.6,0.2c-1.1,0.1-2.1,0.2-3.2,0.4c-1,0.2-2,0.4-3,0.6c-1.3,0.3-2.5,0.6-3.7,1.1 c-0.1,0-0.2,0.1-0.3,0.1c-0.2,0.1-0.5,0.1-0.7,0.2C21.6,19.6,14.4,27.4,11.6,37.3c0,0,0,0.1-0.1,0.1C8,47.7,8,58.8,11.5,69.2 c0,0.1,0.1,0.1,0.1,0.2c2.8,9.9,10,17.7,19.1,21.2c0.2,0.1,0.5,0.1,0.7,0.2c0.1,0,0.2,0.1,0.3,0.1c1.2,0.4,2.5,0.8,3.7,1.1 c1,0.2,2,0.4,3,0.6c1.1,0.2,2.1,0.3,3.2,0.4c1.2,0.1,2.4,0.2,3.6,0.2c0.1,0,0.2,0,0.3,0h0.1c0.1,0,0.2,0,0.3,0 c1.2,0,2.4-0.1,3.6-0.2c-1.1-0.1-2.1-0.2-3.2-0.4c1-0.2,2-0.4,3-0.6c1.3-0.3,2.5-0.6,3.7-1.1c0.1,0,0.2-0.1,0.3-0.1 c0.2-0.1,0.5-0.1,0.7-0.2c9.1-3.5,16.3-11.3,19.1-21.2c0-0.1,0.1-0.1,0.1-0.2C89,58.8,89,47.7,85.4,37.3z M50,77.9 c-15.4,0-27.9-12.5-27.9-27.9S34.6,22.1,50,22.1s27.9,12.5,27.9,27.9S65.4,77.9,50,77.9z"></path>
<path fill="var(--warm-orange)" d="M50,88.8c-21.4,0-38.8-17.4-38.8-38.8S28.6,11.2,50,11.2s38.8,17.4,38.8,38.8S71.4,88.8,50,88.8z M50,16.2 c-18.7,0-33.8,15.1-33.8,33.8S31.3,83.8,50,83.8s33.8-15.1,33.8-33.8S68.7,16.2,50,16.2z"></path>
</svg>
<span class="text-xl font-bold text-tech-blue">开心APP</span>
</a>
<p class="mt-4 text-text-medium">陪伴、理解、记录、共同成长。</p>
</div>
<div>
<h3 class="font-semibold text-text-dark">产品</h3>
<ul class="mt-4 space-y-2">
<li><a href="#features-grid" class="text-text-medium hover:text-tech-blue">功能</a></li>
<li><a href="settings.html" class="text-text-medium hover:text-tech-blue">定价</a></li>
<li><a href="messages.html" class="text-text-medium hover:text-tech-blue">更新日志</a></li>
</ul>
</div>
<div>
<h3 class="font-semibold text-text-dark">公司</h3>
<ul class="mt-4 space-y-2">
<li><a href="personal_dashboard.html" class="text-text-medium hover:text-tech-blue">关于我们</a></li>
<li><a href="messages.html" class="text-text-medium hover:text-tech-blue">联系我们</a></li>
<li><a href="settings.html" class="text-text-medium hover:text-tech-blue">加入我们</a></li>
</ul>
</div>
<div>
<h3 class="font-semibold text-text-dark">法律</h3>
<ul class="mt-4 space-y-2">
<li><a href="settings.html" class="text-text-medium hover:text-tech-blue">隐私政策</a></li>
<li><a href="settings.html" class="text-text-medium hover:text-tech-blue">服务条款</a></li>
</ul>
</div>
</div>
<div class="mt-12 border-t border-gray-200 pt-8 text-center text-text-medium">
<p>© 2025 开心APP. All Rights Reserved. 来自"开心"星球的温柔科技。</p>
</div>
</div>
</footer>
</div>
<!-- Login Modal -->
<div id="login-modal" class="hidden fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-sm">
<div class="bg-white rounded-2xl shadow-2xl w-full max-w-md m-4 p-8">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-text-dark">登录到 开心APP</h2>
<button id="close-modal-button" class="text-gray-400 hover:text-gray-600">
<i data-lucide="x" class="w-6 h-6"></i>
</button>
</div>
<form>
<div class="space-y-4">
<div>
<label for="email" class="block text-sm font-medium text-text-medium mb-1">邮箱地址</label>
<input type="email" id="email" name="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-tech-blue focus:border-transparent transition" placeholder="you@example.com">
</div>
<div>
<label for="password" class="block text-sm font-medium text-text-medium mb-1">密码</label>
<input type="password" id="password" name="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-tech-blue focus:border-transparent transition" placeholder="••••••••">
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-tech-blue focus:ring-tech-blue border-gray-300 rounded">
<label for="remember-me" class="ml-2 block text-sm text-text-medium">记住我</label>
</div>
<a href="#" class="text-sm font-medium text-tech-blue hover:underline">忘记密码?</a>
</div>
<div>
<button type="submit" class="w-full bg-tech-blue text-white px-5 py-3 rounded-lg font-semibold hover:bg-blue-600 transition-all duration-300 transform hover:scale-105 shadow-lg shadow-blue-500/30">
登录
</button>
</div>
</div>
</form>
</div>
</div>
<script type="module" src="js/shared.js"></script>
<script type="module" src="script.js"></script>
</body></html>