<!DOCTYPE html>
<html class="dark" lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}ZJPB - 焦提示词{% endblock %}</title>
    <meta name="description" content="{% block description %}焦提示词 - 精选AI工具和产品导航，发现最新最好用的人工智能应用{% endblock %}">
    <meta name="keywords" content="{% block keywords %}ZJPB,焦提示词,AI工具,人工智能,ChatGPT,AI导航{% endblock %}">

    <!-- Google Fonts -->
    <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=Space+Grotesk:wght@300;400;500;600;700&family=Noto+Sans:wght@400;500;700&display=swap" rel="stylesheet">

    <!-- Material Symbols -->
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
    <script>
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        primary: "#25c0f4",
                        secondary: "#7c3aed",
                        "background-light": "#f5f8f8",
                        "background-dark": "#111618",
                        "surface-dark": "#1b2427",
                        "border-dark": "#283539",
                    },
                    fontFamily: {
                        "display": ["Space Grotesk", "sans-serif"],
                        "body": ["Noto Sans", "sans-serif"],
                    },
                    backgroundImage: {
                        'gradient-tech': 'linear-gradient(135deg, #25c0f4 0%, #7c3aed 100%)',
                        'gradient-text': 'linear-gradient(to right, #25c0f4, #a855f7)',
                    }
                },
            },
        }
    </script>
    <style>
        body {
            font-family: 'Space Grotesk', sans-serif;
        }
        .text-gradient {
            background: linear-gradient(to right, #25c0f4, #c084fc);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .card-hover:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 30px -10px rgba(37, 192, 244, 0.15);
            border-color: #25c0f4;
        }
        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
    </style>
    {% block extra_css %}{% endblock %}
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-white antialiased selection:bg-primary selection:text-black">
    <div class="relative flex min-h-screen w-full flex-col overflow-x-hidden">
        <!-- Background Gradient Elements -->
        <div class="fixed top-0 left-0 w-full h-96 bg-primary/5 blur-[120px] rounded-full pointer-events-none -translate-y-1/2"></div>
        <div class="fixed top-20 right-0 w-96 h-96 bg-secondary/10 blur-[100px] rounded-full pointer-events-none translate-x-1/3"></div>

        <!-- Top Navigation -->
        <header class="sticky top-0 z-50 w-full border-b border-solid border-border-dark bg-background-dark/80 backdrop-blur-md">
            <div class="mx-auto flex h-16 max-w-[1440px] items-center justify-between px-6 lg:px-10">
                <div class="flex items-center gap-8">
                    <!-- Logo -->
                    <a class="flex items-center gap-3 text-white hover:opacity-90 transition-opacity" href="{{ url_for('index') }}">
                        <div class="flex items-center justify-center size-8 rounded-lg bg-gradient-tech text-black">
                            <span class="material-symbols-outlined" style="font-size: 20px; font-weight: 700;">bolt</span>
                        </div>
                        <h2 class="text-white text-lg font-bold leading-tight tracking-tight">ZJPB</h2>
                    </a>
                    <!-- Desktop Nav -->
                    <nav class="hidden md:flex items-center gap-8">
                        <a class="text-gray-300 hover:text-primary text-sm font-medium transition-colors" href="{{ url_for('index') }}">首页</a>
                        {% if current_user.is_authenticated %}
                        <a class="text-gray-300 hover:text-primary text-sm font-medium transition-colors" href="{{ url_for('admin.index') }}">后台管理</a>
                        {% endif %}
                    </nav>
                </div>

                <!-- Actions -->
                <div class="flex items-center gap-4">
                    {% if current_user.is_authenticated %}
                    <button onclick="window.location.href='{{ url_for('admin_logout') }}'" class="hidden sm:flex h-9 px-4 items-center justify-center rounded-lg text-sm font-bold text-white hover:bg-white/5 transition-colors">
                        退出
                    </button>
                    {% else %}
                    <button onclick="window.location.href='{{ url_for('admin_login') }}'" class="hidden sm:flex h-9 px-4 items-center justify-center rounded-lg text-sm font-bold text-white hover:bg-white/5 transition-colors">
                        登录
                    </button>
                    {% endif %}
                </div>
            </div>
        </header>

        <!-- Main Content -->
        <main class="flex-1">
            {% block content %}{% endblock %}
        </main>

        <!-- Footer -->
        <footer class="w-full border-t border-border-dark bg-background-dark py-8 mt-auto">
            <div class="mx-auto max-w-[1200px] flex flex-col md:flex-row items-center justify-between gap-6 px-6 lg:px-10">
                <div class="flex items-center gap-2 text-gray-400 text-sm">
                    <span>© 2024 ZJPB - 焦提示词. All rights reserved.</span>
                </div>
                <div class="flex gap-6">
                    <a class="text-gray-500 hover:text-primary transition-colors text-sm" href="#">
                        发现最好用的AI工具
                    </a>
                </div>
            </div>
        </footer>
    </div>

    {% block extra_js %}{% endblock %}
</body>
</html>
