WebServer/templates/index.html

{% extends "base.html" %}

{% block title %}{{ t('home') }}{% endblock %}

{% block content %}
<!-- Hero Section with Market Ticker -->
<section class="hero">
    <div class="container">
        <div class="hero-content">
            <h1>{{ t('slogan') }}</h1>
            <p class="hero-subtitle">{{ t('hero_subtitle') if t('hero_subtitle') else '专业证券交易与投资平台' }}</p>
            <p class="hero-description">{{ t('hero_description') if t('hero_description') else
                '专注于港股、美股市场股票交易，智能投顾服务，助力您的财富增长' }}</p>
            <div class="hero-buttons">
                <a href="{{ url_for('download') }}" class="btn btn-primary">{{ t('download_app') if t('download_app')
                    else '下载客户端' }}</a>
                <a href="{{ url_for('services') }}" class="btn btn-outline">{{ t('learn_more') if t('learn_more') else
                    '了解更多' }}</a>
            </div>
        </div>
        <div class="hero-image">
            <div class="market-ticker">
                <div class="ticker-header">
                    <h3>{{ t('market_quotes') if t('market_quotes') else '实时行情' }}</h3>
                    <span class="refresh-badge">Live</span>
                </div>
                <div class="ticker-content">
                    <div class="ticker-item">
                        <span class="symbol">HSI</span>
                        <span class="price">16,842.23</span>
                        <span class="change positive">+1.2%</span>
                    </div>
                    <div class="ticker-item">
                        <span class="symbol">AAPL</span>
                        <span class="price">173.45</span>
                        <span class="change positive">+0.8%</span>
                    </div>
                    <div class="ticker-item">
                        <span class="symbol">TSLA</span>
                        <span class="price">245.67</span>
                        <span class="change negative">-0.5%</span>
                    </div>
                    <div class="ticker-item">
                        <span class="symbol">BTC/USD</span>
                        <span class="price">61,234.56</span>
                        <span class="change positive">+2.1%</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Features Section -->
<section class="features-section">
    <div class="container">
        <div class="section-header">
            <h2>{{ t('why_choose_us') if t('why_choose_us') else '为什么选择我们' }}</h2>
            <p>{{ t('features_subtitle') if t('features_subtitle') else '专业、安全、便捷的投资体验' }}</p>
        </div>
        <div class="features-grid">
            <div class="feature-card">
                <div class="feature-icon">📈</div>
                <h3>{{ t('global_markets') if t('global_markets') else '全球市场' }}</h3>
                <p>{{ t('global_markets_desc') if t('global_markets_desc') else '专注港股、美股' }}</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">🔒</div>
                <h3>{{ t('secure_trading') if t('secure_trading') else '安全交易' }}</h3>
                <p>{{ t('secure_trading_desc') if t('secure_trading_desc') else '银行级安全防护，资金隔离保障' }}</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">💡</div>
                <h3>{{ t('smart_investing') if t('smart_investing') else '智能投资' }}</h3>
                <p>{{ t('smart_investing_desc') if t('smart_investing_desc') else 'AI投顾、智能选股、量化策略' }}</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">💰</div>
                <h3>{{ t('low_fees') if t('low_fees') else '低手续费' }}</h3>
                <p>{{ t('low_fees_desc') if t('low_fees_desc') else '灵活佣金方案，透明收费标准' }}</p>
            </div>
        </div>
    </div>
</section>

<!-- Trading Tools Section -->
<section class="trading-tools">
    <div class="container">
        <div class="section-header">
            <h2>{{ t('trading_tools') if t('trading_tools') else '专业交易工具' }}</h2>
            <p>{{ t('trading_tools_subtitle') if t('trading_tools_subtitle') else '丰富的分析工具，助力投资决策' }}</p>
        </div>
        <div class="tools-grid">
            <div class="tool-card">
                <h3>{{ t('realtime_charts') if t('realtime_charts') else '实时图表' }}</h3>
                <p>{{ t('realtime_charts_desc') if t('realtime_charts_desc') else '多时间周期K线图，技术指标分析' }}</p>
            </div>
            <div class="tool-card">
                <h3>{{ t('news_analysis') if t('news_analysis') else '新闻分析' }}</h3>
                <p>{{ t('news_analysis_desc') if t('news_analysis_desc') else '实时财经新闻，市场情绪分析' }}</p>
            </div>
            <div class="tool-card">
                <h3>{{ t('portfolio_management') if t('portfolio_management') else '组合管理' }}</h3>
                <p>{{ t('portfolio_management_desc') if t('portfolio_management_desc') else '投资组合分析，风险控制工具' }}</p>
            </div>
        </div>
    </div>
</section>

<!-- App Download CTA -->
<section class="app-download">
    <div class="container">
        <div class="download-content">
            <h2>{{ t('download_app_cta') if t('download_app_cta') else '立即下载客户端' }}</h2>
            <p>{{ t('download_app_desc') if t('download_app_desc') else '随时随地交易，把握投资机会' }}</p>
            <div class="download-buttons">
                <a href="{{ url_for('download') }}" class="btn btn-primary">
                    <span class="icon">📱</span>
                    {{ t('mobile_app') if t('mobile_app') else '手机客户端' }}
                </a>
                <!-- <a href="{{ url_for('download') }}" class="btn btn-outline">
                    <span class="icon">💻</span>
                    {{ t('desktop_app') if t('desktop_app') else '电脑客户端' }}
                </a> -->
            </div>
        </div>
    </div>
</section>
{% endblock %}