image.html

<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 绘图 - AI Hub</title>
    <link rel="stylesheet" href="styles/home.css">
    <style>
        /* Page Specific Overrides */
        body {
            padding-top: 80px;
        }

        .page-header {
            text-align: center;
            padding: 60px 20px 40px;
            animation: fadeInDown 0.8s ease-out;
        }

        .page-header h1 {
            font-size: 56px;
            line-height: 1.07143;
            font-weight: 600;
            letter-spacing: -0.005em;
            margin-bottom: 6px;
            background: var(--hero-gradient-text);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .page-header p {
            font-size: 28px;
            line-height: 1.14286;
            font-weight: 400;
            letter-spacing: .007em;
            color: var(--text-secondary);
        }

        .ai-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 24px;
            padding: 20px 40px 80px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .tool-card {
            background: var(--card-bg);
            backdrop-filter: saturate(180%) blur(20px);
            -webkit-backdrop-filter: saturate(180%) blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 24px;
            padding: 32px;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
            height: 100%;
            box-shadow: 0 4px 24px -1px rgba(0, 0, 0, 0.1), 0 0 20px -5px var(--glow-color);
        }

        [data-theme="light"] .tool-card {
            border: 1px solid rgba(0, 0, 0, 0.05);
            background: rgba(255, 255, 255, 0.65);
        }

        .tool-card:hover {
            transform: translateY(-5px);
            background: var(--card-hover);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }

        .card-icon {
            font-size: 40px;
            margin-bottom: 20px;
        }

        .card-title {
            font-size: 20px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .card-company {
            font-size: 13px;
            color: var(--text-secondary);
            font-weight: 500;
            background: rgba(128, 128, 128, 0.1);
            padding: 4px 10px;
            border-radius: 20px;
        }

        .card-desc {
            font-size: 15px;
            color: var(--text-secondary);
            line-height: 1.6;
            margin-bottom: 24px;
            flex-grow: 1;
        }

        .card-features {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 24px;
        }

        .feature-tag {
            font-size: 12px;
            padding: 4px 10px;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-secondary);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        [data-theme="light"] .feature-tag {
            background: rgba(0, 0, 0, 0.03);
            border: 1px solid rgba(0, 0, 0, 0.03);
        }

        .card-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 12px 20px;
            border-radius: 980px;
            background: var(--bg-color);
            color: var(--text-primary);
            font-weight: 600;
            font-size: 14px;
            text-decoration: none;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.2s;
        }

        .card-btn:hover {
            background: var(--text-primary);
            color: var(--bg-color);
        }

        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>

<body>

    <!-- Unified Navbar -->
    <nav class="navbar">
        <div class="nav-content">
            <a href="index.html" style="font-weight: 600; font-size: 16px;">AI Hub</a>
            <div class="nav-links">
                <a href="index.html">首页</a>
                <a href="chat.html">对话</a>
                <a href="image.html" class="active">绘图</a>
                <a href="music.html">音乐</a>
                <a href="video.html">视频</a>
                <a href="forum.html">社区</a>
            </div>
            <div class="nav-actions" style="display: flex; align-items: center; gap: 15px;">
                <button class="theme-toggle" id="themeToggle" title="切换主题"
                    style="display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;"></button>
                <a href="login.html" id="loginBtn" class="btn btn-primary"
                    style="padding: 6px 16px; font-size: 12px; text-decoration: none;">登录</a>
                <div id="userArea"
                    style="display: none; font-size: 12px; align-items: center; gap: 10px; color: var(--text-primary);">
                    <span id="userName">User</span>
                </div>
            </div>
        </div>
    </nav>

    <section class="page-header">
        <h1>AI 绘图工具</h1>
        <p>激发无限创意，将想象力转化为视觉盛宴</p>
    </section>

    <div class="ai-list">
        <!-- MJ -->
        <div class="tool-card">
            <div class="card-icon"></div>
            <div class="card-title">
                Midjourney
                <span class="card-company">Midjourney Inc.</span>
            </div>
            <p class="card-desc">目前公认效果最强的AI绘图工具，画面精美度、艺术性极高，适合专业创作。</p>
            <div class="card-features">
                <span class="feature-tag">艺术级画质</span>
                <span class="feature-tag">Discord生态</span>
                <span class="feature-tag">风格多样</span>
            </div>
            <a href="https://www.midjourney.com" target="_blank" class="card-btn">访问 Midjourney</a>
        </div>

        <!-- SD -->
        <div class="tool-card">
            <div class="card-icon"></div>
            <div class="card-title">
                Stable Diffusion
                <span class="card-company">Stability AI</span>
            </div>
            <p class="card-desc">最强大的开源绘图模型，支持本地部署，拥有海量社区模型和插件，可控性极佳。</p>
            <div class="card-features">
                <span class="feature-tag">开源免费</span>
                <span class="feature-tag">本地部署</span>
                <span class="feature-tag">高度可控</span>
            </div>
            <a href="https://stability.ai" target="_blank" class="card-btn">访问官网</a>
        </div>

        <!-- DALL-E 3 -->
        <div class="tool-card">
            <div class="card-icon"></div>
            <div class="card-title">
                DALL·E 3
                <span class="card-company">OpenAI</span>
            </div>
            <p class="card-desc">集成于 ChatGPT Plus，语义理解能力极强，能精准还原复杂的提示词描述。</p>
            <div class="card-features">
                <span class="feature-tag">语义精准</span>
                <span class="feature-tag">对话式绘图</span>
                <span class="feature-tag">简单易用</span>
            </div>
            <a href="https://chat.openai.com" target="_blank" class="card-btn">访问 DALL·E 3</a>
        </div>

        <!-- Flux -->
        <div class="tool-card">
            <div class="card-icon"></div>
            <div class="card-title">
                Flux
                <span class="card-company">Black Forest Labs</span>
            </div>
            <p class="card-desc">新晋最强开源模型，由原SD团队成员开发，在文字生成和人体结构上表现极其出色。</p>
            <div class="card-features">
                <span class="feature-tag">顶级画质</span>
                <span class="feature-tag">文字渲染</span>
                <span class="feature-tag">开源</span>
            </div>
            <a href="https://blackforestlabs.ai" target="_blank" class="card-btn">访问 Flux</a>
        </div>

        <!-- Ideogram -->
        <div class="tool-card">
            <div class="card-icon"></div>
            <div class="card-title">
                Ideogram
                <span class="card-company">Ideogram AI</span>
            </div>
            <p class="card-desc">以强大的文字渲染能力出名，可在图片中生成清晰可读的任何字体和语言文本。</p>
            <div class="card-features">
                <span class="feature-tag">超强文字</span>
                <span class="feature-tag">免费使用</span>
                <span class="feature-tag">特色风格</span>
            </div>
            <a href="https://ideogram.ai" target="_blank" class="card-btn">访问 Ideogram</a>
        </div>

        <!-- Leonardo -->
        <div class="tool-card">
            <div class="card-icon"></div>
            <div class="card-title">
                Leonardo.AI
                <span class="card-company">Leonardo Inc.</span>
            </div>
            <p class="card-desc">功能强大的在线AI绘图平台，内置多种模型，支持游戏资产、概念艺术等专业场景。</p>
            <div class="card-features">
                <span class="feature-tag">游戏资产</span>
                <span class="feature-tag">多模型</span>
                <span class="feature-tag">免费额度</span>
            </div>
            <a href="https://leonardo.ai" target="_blank" class="card-btn">访问 Leonardo</a>
        </div>
    </div>

    <script src="scripts/layout.js"></script>
</body>

</html>