index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MindGuard - Intelligent Emotion Management App</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="container">
            <div class="logo">
                <i class="fas fa-brain"></i>
                <span>MindGuard</span>
            </div>
            <ul class="nav-links">
                <li><a href="#features">Features</a></li>
                <li><a href="#screenshots">Screenshots</a></li>
                <li><a href="#how-it-works">How It Works</a></li>
                <li><a href="#about">About Us</a></li>
                <li><a href="PrivacyPolicy.html" target="_blank">Privacy Policy</a></li>
                <li><a href="#download" class="btn-primary">Download Now</a></li>
            </ul>
            <div class="menu-toggle">
                <i class="fas fa-bars"></i>
            </div>
        </div>
    </nav>

    <!-- 英雄区域 -->
    <header class="hero">
        <div class="container">
            <div class="hero-content">
                <h1>🧠 MindGuard</h1>
                <h2>Intelligent Emotion Management App</h2>
                <p>An intelligent emotion management app based on Cognitive Behavioral Therapy (CBT) that helps you identify, analyze, and adjust negative emotions and cognitive distortions to build healthier thinking patterns.</p>
                <div class="hero-buttons">
                    <a href="#download" class="btn-primary">Download Now</a>
                    <a href="#features" class="btn-secondary">Learn More</a>
                </div>
            </div>
        </div>
    </header>

    <!-- 核心价值 -->
    <section class="core-values">
        <div class="container">
            <h2>Core Values</h2>
            <div class="values-grid">
                <div class="value-card">
                    <i class="fas fa-flask"></i>
                    <h3>Scientific & Effective</h3>
                    <p>Based on Cognitive Behavioral Therapy (CBT) theory, validated by psychology experts</p>
                </div>
                <div class="value-card">
                    <i class="fas fa-brain"></i>
                    <h3>Intelligent Analysis</h3>
                    <p>AI-assisted cognitive distortion identification with personalized analysis and suggestions</p>
                </div>
                <div class="value-card">
                    <i class="fas fa-shield-alt"></i>
                    <h3>Privacy & Security</h3>
                    <p>All data stored locally, no server uploads, protecting your privacy</p>
                </div>
                <div class="value-card">
                    <i class="fas fa-chart-line"></i>
                    <h3>Continuous Improvement</h3>
                    <p>Track emotional changes, witness mental growth, and continuously improve mental health</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 功能介绍 -->
    <section id="features" class="features">
        <div class="container">
            <h2>Features</h2>
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-notes-medical"></i>
                    </div>
                    <div class="feature-content">
                        <h3>Emotion Recording & Tracking</h3>
                        <p>Easily record daily emotions and trigger events with rich emotion categories and intensity ratings, visualizing emotional change trends.</p>
                    </div>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-search"></i>
                    </div>
                    <div class="feature-content">
                        <h3>Cognitive Distortion Identification</h3>
                        <p>Based on CBT theory, AI-assisted analysis of negative thinking patterns with detailed distortion type explanations and examples.</p>
                    </div>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-lightbulb"></i>
                    </div>
                    <div class="feature-content">
                        <h3>Positive Thought Reframing</h3>
                        <p>Guides users to challenge and reframe negative thoughts, generate personalized positive responses, and record thought transformation processes.</p>
                    </div>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-chart-bar"></i>
                    </div>
                    <div class="feature-content">
                        <h3>Emotion Assessment & Feedback</h3>
                        <p>Compare before-and-after emotional intensity changes, provide structured assessment reports, and track emotional management progress.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 产品截图 -->
    <section id="screenshots" class="screenshots">
        <div class="container">
            <h2>Screenshots</h2>
            <div class="screenshots-grid">
                <div class="screenshot-item">
                    <img src="1.png" alt="Emotion Recording Page">
                    <p>Emotion Recording Page</p>
                </div>
                <div class="screenshot-item">
                    <img src="2.png" alt="Emotion Category Selection">
                    <p>Emotion Category Selection</p>
                </div>
                <div class="screenshot-item">
                    <img src="3.png" alt="Cognitive Distortion Analysis">
                    <p>Cognitive Distortion Analysis</p>
                </div>
                <div class="screenshot-item">
                    <img src="4.png" alt="Distortion Type Details">
                    <p>Distortion Type Details</p>
                </div>
                <div class="screenshot-item">
                    <img src="5.png" alt="Positive Thought Reframing">
                    <p>Positive Thought Reframing</p>
                </div>
                <div class="screenshot-item">
                    <img src="6.png" alt="Emotion Intensity Rating">
                    <p>Emotion Intensity Rating</p>
                </div>
                <div class="screenshot-item">
                    <img src="7.png" alt="Thought Transformation Record">
                    <p>Thought Transformation Record</p>
                </div>
                <div class="screenshot-item">
                    <img src="8.png" alt="Emotion Assessment Results">
                    <p>Emotion Assessment Results</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 使用流程 -->
    <section id="how-it-works" class="how-it-works">
        <div class="container">
            <h2>How It Works</h2>
            <div class="steps-container">
                <div class="step">
                    <div class="step-number">1</div>
                    <h3>Record Emotions</h3>
                    <p>Describe current emotions, trigger events, and situations</p>
                </div>
                <div class="step-arrow">
                    <i class="fas fa-arrow-right"></i>
                </div>
                <div class="step">
                    <div class="step-number">2</div>
                    <h3>Identify Distortions</h3>
                    <p>AI-assisted analysis of cognitive distortion types</p>
                </div>
                <div class="step-arrow">
                    <i class="fas fa-arrow-right"></i>
                </div>
                <div class="step">
                    <div class="step-number">3</div>
                    <h3>Challenge Thoughts</h3>
                    <p>Deeply understand and challenge negative thoughts</p>
                </div>
                <div class="step-arrow">
                    <i class="fas fa-arrow-right"></i>
                </div>
                <div class="step">
                    <div class="step-number">4</div>
                    <h3>Reframe Thinking</h3>
                    <p>Generate and record positive alternative responses</p>
                </div>
                <div class="step-arrow">
                    <i class="fas fa-arrow-right"></i>
                </div>
                <div class="step">
                    <div class="step-number">5</div>
                    <h3>Evaluate Results</h3>
                    <p>Compare before-and-after emotional changes and track progress</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 下载区域 -->
    <section id="download" class="download">
        <div class="container">
            <div class="download-content">
                <h2>Download MindGuard Now</h2>
                <p>Start your emotional management journey and build healthier thinking patterns</p>
                <a href="https://apps.apple.com" class="app-store-badge">
                    <img src="https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg" alt="Download on the App Store">
                </a>
            </div>
        </div>
    </section>

    <!-- 关于我们 -->
    <section id="about" class="about">
        <div class="container">
            <h2>About Us</h2>
            <div class="about-content">
                <div class="about-text">
                    <p>MindGuard is committed to empowering mental health through technology, helping users build healthy thinking patterns and emotional management skills.</p>
                    <p>Our team consists of psychology experts and technical developers, combining professional CBT theory with advanced AI technology to provide users with scientific, effective emotional management tools.</p>
                    <p>Our mission is to enable everyone to master emotional management methods and live healthier, happier lives.</p>
                </div>
                <div class="about-values">
                    <div class="about-value">
                        <i class="fas fa-heart"></i>
                        <h3>User-Centered</h3>
                        <p>Focused on users' mental health needs</p>
                    </div>
                    <div class="about-value">
                        <i class="fas fa-balance-scale"></i>
                        <h3>Professional & Rigorous</h3>
                        <p>Based on scientific theory, professionally validated</p>
                    </div>
                    <div class="about-value">
                        <i class="fas fa-shield-alt"></i>
                        <h3>Privacy Protection</h3>
                        <p>Strictly protect user privacy, data stored locally</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 隐私保护 -->
    <section class="privacy">
        <div class="container">
            <h2>Privacy Protection</h2>
            <div class="privacy-content">
                <p>We highly value user privacy. All data is stored locally on your device and will not be uploaded to any server.</p>
                <ul>
                    <li>Data stored locally, no server uploads</li>
                    <li>No collection of personal information</li>
                    <li>No user behavior tracking</li>
                    <li>Complete respect for user privacy</li>
                </ul>
                <a href="PrivacyPolicy.html" target="_blank" class="privacy-link">View Full Privacy Policy</a>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <i class="fas fa-brain"></i>
                    <span>MindGuard</span>
                </div>
                <div class="footer-links">
                    <a href="#features">Features</a>
                    <a href="#screenshots">Screenshots</a>
                    <a href="#how-it-works">How It Works</a>
                    <a href="#about">About Us</a>
                    <a href="#download">Download</a>
                </div>
                <!-- <div class="footer-social">
                    <a href="#"><i class="fab fa-weixin"></i></a>
                    <a href="#"><i class="fab fa-weibo"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                </div> -->
            </div>
            <div class="footer-bottom">
                <p>&copy; 2025 MindGuard. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>