beihaili
diff --git a/‎.gitignore‎
Lines changed: 21 additions & 2 deletions b/‎.gitignore‎
Lines changed: 21 additions & 2 deletions
diff --git a/‎README.md‎
Lines changed: 20 additions & 1 deletion b/‎README.md‎
Lines changed: 20 additions & 1 deletion
diff --git a/‎archive/_config.yml‎
Lines changed: 13 additions & 0 deletions b/‎archive/_config.yml‎
Lines changed: 13 additions & 0 deletions
diff --git a/‎archive/book.json‎
Lines changed: 9 additions & 0 deletions b/‎archive/book.json‎
Lines changed: 9 additions & 0 deletions
diff --git a/‎index.html‎
Lines changed: 10 additions & 272 deletions b/‎index.html‎
Lines changed: 10 additions & 272 deletions
@@ -4,17 +4,36 @@
 05_GetStartedWithDAO
 06_GetStartedWithNFT
 
-# GitBook 相关文件
-_book/
+# Dependencies
 node_modules/
 **/node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Build outputs (React/Vite)
+dist/
+build/
+_book/
+
+# Environment files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# GitBook 相关文件
 gitbook/
 gitbook-temp/
 *.log
 *.epub
 *.mobi
 *.pdf
 
+# Vite
+.vite/
+
 # Python 缓存文件
 __pycache__/
 **/__pycache__/
 
@@ -26,10 +26,20 @@
 
 ## 📖 About This Project
 
-**Get Started With Web3** is a comprehensive, open-source learning resource designed to guide newcomers through the exciting world of Web3, blockchain technology, and Bitcoin.
+**Get Started With Web3** is a comprehensive, open-source learning resource designed to guide newcomers through the exciting world of Web3, blockchain technology, and Bitcoin. 
+
+🎉 **NEW: Modern React Interface!** - Experience our brand new interactive learning platform with AI-powered assistance, beautiful animations, and Web3 wallet integration.
 
 **《Web3入门指南》** 是一个全面的开源学习资源，旨在引导新人进入激动人心的Web3、区块链技术和比特币世界。
 
+🎉 **全新：现代化React界面！** - 体验全新的交互式学习平台，支持AI助教、精美动画和Web3钱包集成。
+
+### 🌐 Access Options | 访问方式
+
+- **🚀 [Modern React App (Recommended)](https://beihaili.github.io/GetStartedWithWeb3/)** - Interactive learning platform with AI features
+- **📚 [Traditional GitBook](./zh/)** - Classic text-based tutorials
+- **🌍 [English Version](./en/)** - English language support
+
 ### 🎯 What You'll Learn | 你将学到什么
 
 **🔰 Web3 Fundamentals**
@@ -60,6 +70,15 @@
 
 ### 🌟 Features | 特色功能
 
+**React App Features:**
+- ⚡ **Modern Tech Stack** - React 19, Vite, Tailwind CSS
+- 🎨 **Beautiful UI** - Cyberpunk-style dark theme with animations
+- 🔗 **Wallet Integration** - Connect MetaMask and track progress on-chain
+- 🤖 **AI Assistant** - Powered by Gemini AI (coming soon)
+- 🎮 **Interactive Demos** - Web3 Oracle, Wallet Simulator, Hash Visualizer
+- 📱 **Responsive Design** - Works perfectly on mobile and desktop
+
+**Content Features:**
 - ✅ **Beginner-friendly** | 新手友好
 - ✅ **Code examples** | 代码示例
 - ✅ **Interactive tutorials** | 互动教程
 
@@ -0,0 +1,13 @@
+# GitHub Pages configuration for HonKit
+title: "Get Started with Web3"
+description: "Comprehensive Web3, blockchain and cryptocurrency tutorial | 全面的Web3、区块链和加密货币教程"
+url: "https://beihaili.github.io"
+baseurl: "/Get-Started-with-Web3"
+
+# HonKit settings
+markdown: kramdown
+highlighter: rouge
+
+# Social links
+github_username: beihaili
+twitter_username: bhbtc1337
@@ -0,0 +1,9 @@
+{
+  "title": "Get Started with Web3",
+  "author": "beihaili",
+  "description": "Web3、区块链和加密货币入门指南",
+  "language": "zh-hans",
+  "structure": {
+    "readme": "README.md"
+  }
+}
@@ -1,274 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Get Started with Web3 | Web3入门指南</title>
-    <meta name="description" content="Comprehensive Web3, blockchain and cryptocurrency tutorial for beginners | 全面的Web3、区块链和加密货币入门教程">
-    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌐</text></svg>">
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            min-height: 100vh;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: white;
-        }
-        
-        .container {
-            text-align: center;
-            max-width: 1000px;
-            padding: 2rem;
-            width: 100%;
-        }
-        
-        .logo {
-            font-size: 4rem;
-            margin-bottom: 1rem;
-            animation: float 3s ease-in-out infinite;
-        }
-        
-        @keyframes float {
-            0%, 100% { transform: translateY(0px); }
-            50% { transform: translateY(-10px); }
-        }
-        
-        h1 {
-            font-size: 2.5rem;
-            margin-bottom: 0.5rem;
-            font-weight: 300;
-        }
-        
-        .subtitle {
-            font-size: 1.2rem;
-            margin-bottom: 3rem;
-            opacity: 0.9;
-            line-height: 1.6;
-        }
-        
-        .language-options {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 2rem;
-            max-width: 800px;
-            margin: 0 auto;
-        }
-        
-        .language-card {
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 20px;
-            padding: 2.5rem;
-            backdrop-filter: blur(15px);
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            transition: all 0.3s ease;
-            text-decoration: none;
-            color: white;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            min-height: 280px;
-            position: relative;
-            overflow: hidden;
-        }
-        
-        .language-card::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
-            opacity: 0;
-            transition: opacity 0.3s ease;
-        }
-        
-        .language-card:hover::before {
-            opacity: 1;
-        }
-        
-        .language-card:hover {
-            transform: translateY(-8px) scale(1.02);
-            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
-        }
-        
-        .flag {
-            font-size: 4rem;
-            margin-bottom: 1.5rem;
-            display: block;
-            position: relative;
-            z-index: 1;
-        }
-        
-        .language-name {
-            font-size: 1.8rem;
-            font-weight: 700;
-            margin-bottom: 1rem;
-            position: relative;
-            z-index: 1;
-        }
-        
-        .language-desc {
-            font-size: 1rem;
-            opacity: 0.9;
-            line-height: 1.5;
-            position: relative;
-            z-index: 1;
-        }
-        
-        .footer {
-            position: fixed;
-            bottom: 2rem;
-            left: 50%;
-            transform: translateX(-50%);
-            display: flex;
-            gap: 1rem;
-            opacity: 0.7;
-        }
-        
-        .footer a {
-            color: white;
-            text-decoration: none;
-            font-size: 0.9rem;
-            transition: opacity 0.3s ease;
-        }
-        
-        .footer a:hover {
-            opacity: 1;
-        }
-        
-        .stats {
-            margin-top: 2rem;
-            display: flex;
-            justify-content: center;
-            gap: 2rem;
-            flex-wrap: wrap;
-        }
-        
-        .stat {
-            text-align: center;
-        }
-        
-        .stat-number {
-            font-size: 1.5rem;
-            font-weight: bold;
-            color: #ffd700;
-        }
-        
-        .stat-label {
-            font-size: 0.8rem;
-            opacity: 0.8;
-        }
-        
-        @media (max-width: 768px) {
-            h1 { font-size: 2rem; }
-            .subtitle { font-size: 1rem; }
-            .language-options { 
-                grid-template-columns: 1fr; 
-                gap: 1.5rem;
-                max-width: 400px;
-            }
-            .language-card { 
-                min-height: 220px;
-                padding: 2rem;
-            }
-            .flag { font-size: 3rem; }
-            .language-name { font-size: 1.5rem; }
-            .stats { gap: 1rem; }
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <div class="logo">🌐</div>
-        <h1>Get Started with Web3</h1>
-        <p class="subtitle">
-            Comprehensive guide to Web3, blockchain, and cryptocurrency<br>
-            全面的Web3、区块链和加密货币学习指南
-        </p>
-        
-        <div class="language-options">
-            <a href="./zh/" class="language-card">
-                <span class="flag">🇨🇳</span>
-                <div class="language-name">中文版</div>
-                <div class="language-desc">
-                    完整的中文教程<br>
-                    包含21讲比特币技术详解
-                </div>
-            </a>
-            
-            <a href="./en/" class="language-card">
-                <span class="flag">🇺🇸</span>
-                <div class="language-name">English</div>
-                <div class="language-desc">
-                    Complete English Tutorial<br>
-                    21 Chapters of Bitcoin Technology
-                </div>
-            </a>
-        </div>
-        
-        <div class="stats">
-            <div class="stat">
-                <div class="stat-number">21+</div>
-                <div class="stat-label">Chapters</div>
-            </div>
-            <div class="stat">
-                <div class="stat-number">50+</div>
-                <div class="stat-label">Code Examples</div>
-            </div>
-            <div class="stat">
-                <div class="stat-number">100%</div>
-                <div class="stat-label">Open Source</div>
-            </div>
-        </div>
-    </div>
-    
-    <div class="footer">
-        <a href="https://github.com/beihaili/Get-Started-with-Web3" target="_blank">🐙 GitHub</a>
-        <a href="https://twitter.com/bhbtc1337" target="_blank">🐦 Twitter</a>
-        <a href="https://forms.gle/QMBwL6LwZyQew1tX8" target="_blank">💬 Community</a>
-    </div>
-    
-    <script>
-        // 记录用户语言偏好
-        function setLanguagePreference(lang) {
-            localStorage.setItem('preferredLanguage', lang);
-        }
-        
-        // 智能推荐逻辑（不自动跳转）
-        function showLanguageRecommendation() {
-            const preferred = localStorage.getItem('preferredLanguage');
-            const browserLang = navigator.language || navigator.userLanguage;
-            
-            // 根据浏览器语言显示推荐提示
-            if (browserLang.startsWith('zh')) {
-                console.log('检测到中文环境，推荐中文版');
-                // 可以在这里添加视觉提示，但不自动跳转
-            } else {
-                console.log('检测到英文环境，推荐英文版');
-            }
-        }
-        
-        // 为语言卡片添加点击事件
-        document.querySelectorAll('.language-card').forEach(card => {
-            card.addEventListener('click', function(e) {
-                const href = this.getAttribute('href');
-                const lang = href.includes('/zh/') ? 'zh' : 'en';
-                setLanguagePreference(lang);
-            });
-        });
-        
-        // 页面加载完成后执行
-        document.addEventListener('DOMContentLoaded', showLanguageRecommendation);
-    </script>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Web3 Starter - 从入门到精通</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
 </html>