Update index.html

index.html

@@ -1,19 +1,270 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</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 技术支持与问题反馈</title>
+    <style>
+        :root {
+            --primary-color: #3b82f6;
+            --secondary-color: #1e293b;
+            --bg-color: #f8fafc;
+            --card-bg: #ffffff;
+            --text-color: #334155;
+            --text-light: #64748b;
+            --border-color: #e2e8f0;
+        }
+
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            line-height: 1.6;
+        }
+
+        header {
+            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+            color: white;
+            padding: 3rem 1rem;
+            text-align: center;
+            position: relative;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        }
+
+        .lang-switch {
+            position: absolute;
+            top: 1rem;
+            right: 1rem;
+            background: rgba(255, 255, 255, 0.15);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            color: white;
+            padding: 0.4rem 0.8rem;
+            border-radius: 20px;
+            cursor: pointer;
+            font-size: 0.85rem;
+            transition: all 0.3s;
+        }
+
+        .lang-switch:hover {
+            background: rgba(255, 255, 255, 0.3);
+        }
+
+        .container {
+            max-width: 800px;
+            margin: 2rem auto;
+            padding: 0 1rem;
+        }
+
+        .app-title-sub {
+            color: #93c5fd;
+            font-size: 1.1rem;
+            margin-top: 0.6rem;
+            font-weight: 300;
+            letter-spacing: 1px;
+        }
+
+        .section-card {
+            background: var(--card-bg);
+            border-radius: 12px;
+            padding: 2rem;
+            margin-bottom: 1.5rem;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+            border: 1px solid var(--border-color);
+        }
+
+        h2 {
+            color: var(--secondary-color);
+            font-size: 1.4rem;
+            margin-bottom: 1.2rem;
+            border-bottom: 2px solid var(--border-color);
+            padding-bottom: 0.5rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .contact-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+            gap: 1rem;
+            margin-top: 1rem;
+        }
+
+        .contact-item {
+            background: var(--bg-color);
+            padding: 1rem;
+            border-radius: 8px;
+            border: 1px solid var(--border-color);
+        }
+
+        .contact-item strong {
+            color: var(--secondary-color);
+            display: block;
+            margin-bottom: 0.25rem;
+        }
+
+        .contact-item a {
+            color: var(--primary-color);
+            text-decoration: none;
+            word-break: break-all;
+            font-weight: 500;
+        }
+
+        .contact-item a:hover {
+            text-decoration: underline;
+        }
+
+        .faq-item {
+            margin-bottom: 1.5rem;
+        }
+
+        .faq-item:last-child {
+            margin-bottom: 0;
+        }
+
+        .faq-q {
+            font-weight: 600;
+            color: var(--secondary-color);
+            margin-bottom: 0.5rem;
+            display: flex;
+            align-items: flex-start;
+            gap: 0.5rem;
+            font-size: 1.05rem;
+        }
+
+        .faq-a {
+            color: var(--text-light);
+            padding-left: 1.5rem;
+        }
+
+        footer {
+            text-align: center;
+            margin-top: 3rem;
+            padding: 2rem 0;
+            color: var(--text-light);
+            font-size: 0.9rem;
+            border-top: 1px solid var(--border-color);
+        }
+
+        /* 语言切换控制 */
+        .lang-en, .lang-zh {
+            display: none;
+        }
+
+        html[lang="zh-CN"] .lang-zh { display: block; }
+        html[lang="zh-CN"] .lang-zh-inline { display: inline; }
+        html[lang="zh-CN"] .lang-en-inline { display: none; }
+
+        html[lang="en"] .lang-en { display: block; }
+        html[lang="en"] .lang-en-inline { display: inline; }
+        html[lang="en"] .lang-zh-inline { display: none; }
+    </style>
+</head>
+<body>
+
+    <header>
+        <button class="lang-switch" onclick="toggleLanguage()">
+            <span class="lang-zh-inline">English</span>
+            <span class="lang-en-inline">中文</span>
+        </button>
+        
+        <!-- 中文页头 -->
+        <div class="lang-zh">
+            <h1>人工智能大航海 / 全民学AI</h1>
+            <p class="app-title-sub">看得见的算法，玩得懂的人工智能</p>
+        </div>
+
+        <!-- 英文页头 -->
+        <div class="lang-en">
+            <h1>AI Odyssey / AI For Everyone</h1>
+            <p class="app-title-sub">Interactive AI Exploration Playground</p>
+        </div>
+    </header>
+
+    <div class="container">
+        
+        <!-- 欢迎致辞 / Welcome -->
+        <div class="section-card">
+            <p class="lang-zh">欢迎来到人工智能的科普世界！我们致力于消除技术焦虑，通过<b>生动的互动实验、好玩的闯关游戏和大白话原理拆解</b>，让每一个普通人都能轻松玩懂 AI、跟上科技时代的发展步伐。</p>
+            <p class="lang-en">Welcome to the world of AI exploration! We are dedicated to eliminating tech anxiety. Through <b>interactive playgrounds, gamified challenges, and plain-language explanations</b>, we make AI accessible, fun, and easy to understand for everyone.</p>
+        </div>
+
+        <!-- 联系我们 / Contact Us -->
+        <div class="section-card">
+            <h2 class="lang-zh">🚀 交流与反馈</h2>
+            <h2 class="lang-en">🚀 Support & Feedback</h2>
+            <p class="lang-zh" style="color: var(--text-light);">如果您在探索过程中遇到任何程序漏洞 (Bug)、有任何好玩的脑洞建议，欢迎随时联系我们：</p>
+            <p class="lang-en" style="color: var(--text-light);">If you encounter any bugs, have feature requests, or want to share your creative ideas with us, feel free to reach out:</p>
+            
+            <div class="contact-grid">
+                <div class="contact-item">
+                    <strong class="lang-zh">📧 电子邮箱</strong>
+                    <strong class="lang-en">📧 Email</strong>
+                    <a href="mailto:710354687@qq.com">710354687@qq.com</a>
+                </div>
+                <div class="contact-item">
+                    <strong class="lang-zh">🐛 问题反馈 (GitHub)</strong>
+                    <strong class="lang-en">🐛 Issue Tracking</strong>
+                    <span class="lang-zh"><a href="#" target="_blank">提交 Bug 或新功能点子</a></span>
+                    <span class="lang-en"><a href="#" target="_blank">Report bugs on GitHub Issues</a></span>
+                </div>
+            </div>
+        </div>
+
+        <!-- 常见问题 / FAQ -->
+        <div class="section-card">
+            <h2 class="lang-zh">💡 常见问题 FAQ</h2>
+            <h2 class="lang-en">💡 FAQ</h2>
+
+            <!-- FAQ 1 -->
+            <div class="faq-item">
+                <div class="faq-q">
+                    <span>⚡</span>
+                    <span class="lang-zh">这款 App 适合零基础的人玩吗？</span>
+                    <span class="lang-en">Is this App suitable for complete beginners?</span>
+                </div>
+                <div class="faq-a">
+                    <p class="lang-zh">完全适合！这里没有复杂的数学公式，也没有枯燥的代码。你可以通过亲手“调节参数”、观察 AI 的“实时反应”来直观理解机器学习、大语言模型和计算机视觉背后的逻辑。</p>
+                    <p class="lang-en">Absolutely! There are no complex formulas or boring code here. You can intuitively understand the logic behind machine learning, LLMs, and computer vision simply by adjusting parameters and watching the AI react in real-time.</p>
+                </div>
+            </div>
+
+            <!-- FAQ 2 -->
+            <div class="faq-item">
+                <div class="faq-q">
+                    <span>🔒</span>
+                    <span class="lang-zh">我的互动数据和隐私安全吗？</span>
+                    <span class="lang-en">Is my data and privacy secure?</span>
+                </div>
+                <div class="faq-a">
+                    <p class="lang-zh">绝对安全。我们高度重视您的隐私。您的所有实验记录、趣味笔记、闯关进度等数据均仅保存在您本地的手机设备中，App 无需注册账号，绝不会向任何云端服务器上传您的个人数据。</p>
+                    <p class="lang-en">100% secure. We respect your privacy deeply. All your experiment logs, custom notes, and game progress remain strictly on your local device. No account registration is required, and no data is uploaded to any cloud server.</p>
+                </div>
+            </div>
+
+        </div>
+
+    </div>
+
+    <footer>
+        <p>&copy; 2026 AI Playground Support. Built for Everyone.</p>
+    </footer>
+
+    <script>
+        function toggleLanguage() {
+            const html = document.documentElement;
+            if (html.getAttribute('lang') === 'zh-CN') {
+                html.setAttribute('lang', 'en');
+            } else {
+                html.setAttribute('lang', 'zh-CN');
+            }
+        }
+    </script>
+</body>
+</html>