<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>万有贝果 EverythingBagel</title>
    
    <!-- 移除之前的不工作的IconPark引用 -->
    <!-- 添加新的引用方式：通过CDN直接使用图标 -->
    <script src="https://unpkg.com/@icon-park/svg@latest/runtime.min.js"></script>
    
    <!-- 添加字体链接 -->
    <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=Noto+Sans+SC:wght@400;700&family=Poppins:wght@600&display=swap" rel="stylesheet">
    
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }
        
        body {
            background-color: #fff;
            color: #333;
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        header {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
        }
        
        .logo {
            display: flex;
            align-items: center;
        }
        
        .logo svg {
            width: 40px;
            height: 40px;
            margin-right: 10px;
        }
        
        /* 修改标题样式，让标题在一行展示 */
        h1 {
            font-size: 24px;
            font-weight: 100;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 12px;
        }
        
        .title-cn {
            font-family: 'YouSheBiaoTiHei', 'Noto Sans SC', sans-serif;
            font-weight: 100;
            color: #333;
            font-size: 24px;
            line-height: 1.2;
        }
        
        .title-en {
            font-family: 'Poppins thin', sans-serif;
            font-weight: 100;  /* 使用最细的字重 */
            color: #999;
            font-size: 20px;
            line-height: 1.2;
            position: relative;
            padding-left: 12px;
        }
        
        /* 添加分隔符 */
        .title-en::before {
            content: "|";
            position: absolute;
            left: 0;
            color: #ddd;
            font-weight: 300;
        }
        
        h2 {
            font-size: 20px;
            margin: 30px 0 20px 0;
            font-weight: bold;
        }
        
        .category {
            margin-bottom: 40px;
        }
        
        /* 1. 卡片网格布局的核心设置 */
        .tools-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);    /* 控制每行显示5个卡片 */
            gap: 20px;                                /* 控制卡片之间的间距，改为正常的小间距 */
            padding: 10px;                            /* 整个网格区域的内边距 */
        }
        
        /* 3. 响应式布局中的间距调整 */
        @media (max-width: 1200px) {
            .tools-grid {
                gap: 10px;                            /* 大屏幕下的卡片间距 */
            }
        }
        
        @media (max-width: 992px) {
            .tools-grid {
                grid-template-columns: repeat(4, 1fr); /* 中等屏幕下显示4列 */
            }
        }
        
        @media (max-width: 768px) {
            .tools-grid {
                grid-template-columns: repeat(3, 1fr); /* 平板下显示3列 */
            }
            
            /* 在较小屏幕上标题改为垂直排列 */
            h1 {
                flex-direction: column;
                align-items: flex-start;
                gap: 4px;
            }
            
            .title-en {
                padding-left: 0;
            }
            
            .title-en::before {
                display: none;
            }
        }
        
        @media (max-width: 480px) {
            .tools-grid {
                grid-template-columns: repeat(2, 1fr); /* 手机下显示2列 */
                gap: 8px;                             /* 手机下的卡片间距 */
            }
            
            .tool-icon {
                width: 100%;                           /* 手机下卡片宽度占满 */
            }
        }
        
        .tool-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            color: #333;
            transition: all 0.3s ease;
        }
        
        .tool-icon {
            width: 220px;     /* 增加宽度从180px到200px */
            height: 240px;    /* 增加高度从200px到220px */
            background-color: rgb(247, 249, 250);
            border-radius: 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 25px;       /* 减小内部间距从20px到16px */
            transition: all 0.3s ease;
            position: relative;
            padding: 16px 10px;  /* 调整内边距 */
        }
        
        /* 响应式布局也相应调整 */
        @media (max-width: 1200px) {
            .tools-grid {
                gap: 8px;  /* 在小屏幕上进一步减小间距 */
            }
        }
        
        /* 修改图标样式 */
        .tool-icon svg {
            width: 66px;  /* 图标大小增加到3倍 */
            height: 72px;
            fill: none;
            stroke: #333;
            stroke-width: 2;
            transition: all 0.3s ease;
        }

        /* 确保所有SVG内部的路径和元素都继承父元素的颜色 */
        .tool-icon svg * {
            stroke: inherit;
            transition: all 0.3s ease;
        }
        
        .tool-item:hover .tool-icon {
            background-color: #D70050;
        }
        
        /* 修复悬浮时图标反白问题 - 处理整个SVG而不是单独的路径 */
        .tool-item:hover .tool-icon svg {
            stroke: white !important;  /* 使用!important确保覆盖其他样式 */
        }
        
        .tool-item:hover .tool-name-cn,
        .tool-item:hover .tool-name-en {
            color: white !important;  /* 使用!important确保覆盖其他样式 */
        }
        
        .tool-name {
            text-align: center;
            width: 100%;
        }
        
        .tool-name-cn {
            font-weight: bold;
            margin-bottom: 4px;
            font-size: 18px;
        }
        
        .tool-name-en {
            font-size: 15px;
            color: #666;
        }
        
        .new-tag {
            position: absolute;
            top: -5px;
            right: -10px;
            background-color: #FFD700;
            color: #333;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: bold;
            transform: rotate(20deg);
        }
        
        footer {
            margin-top: 50px;
            text-align: center;
            color: #888;
            font-size: 12px;
            padding: 20px 0;
            border-top: 1px solid #eee;
        }
    </style>
</head>
<body>
    <!-- 修改标题HTML结构 -->
    <header>
        <div class="logo">
            <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                <defs>
                    <!-- 贝果主体渐变 -->
                    <linearGradient id="bagel-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
                        <stop offset="0%" style="stop-color:#FF6B6B"/>
                        <stop offset="100%" style="stop-color:#D70050"/>
                    </linearGradient>
                    <!-- 星空背景 -->
                    <radialGradient id="space" cx="50%" cy="50%" r="50%">
                        <stop offset="0%" style="stop-color:#1a1a2e"/>
                        <stop offset="100%" style="stop-color:#16213e" stop-opacity="0"/>
                    </radialGradient>
                </defs>
            
                <!-- 贝结果体 -->
                <g transform="translate(0, -10)">  <!-- 添加整体下移 -->
                    <g transform="rotate(-15, 50, 60)">  <!-- 调整旋转中心点 -->
                        <!-- 下层圆环 -->
                        <ellipse cx="50" cy="60" rx="35" ry="25" fill="url(#bagel-gradient)" opacity="0.9"/>
                        <!-- 上层圆环 -->
                        <ellipse cx="50" cy="60" rx="35" ry="15" fill="url(#bagel-gradient)"/>
                        <!-- 中心孔 -->
                        <ellipse cx="50" cy="60" rx="15" ry="8" fill="#FFFFFF"/>
                    </g>
                </g>
            </svg>
            <h1>
                <span class="title-cn">万有贝果</span>
                <span class="title-en">Everything Bagel</span>
            </h1>
        </div>
    </header>

    <main>
        <!-- 移动视频工具到最上方 -->
        <section class="category">
            <h2>行业100 | LifeAI 工具库</h2>
            <!-- 工具卡片网格布局 -->
            <div class="tools-grid">
                <a href="bibi.alexdbg.com" class="tool-item">
                    <div class="tool-icon">
                        <?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M39 6H9C7.34315 6 6 7.34315 6 9V39C6 40.6569 7.34315 42 9 42H39C40.6569 42 42 40.6569 42 39V9C42 7.34315 40.6569 6 39 6Z" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M20.5 28V21.9378L25.75 24.9689L31 28L25.75 31.0311L20.5 34.0622V28Z" fill="none" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 15H42" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M33 6L27 15" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M21 6L15 15" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        <span class="new-tag">NEW</span>
                        <div class="tool-name">
                            <div class="tool-name-cn">Bilibili下载器</div>
                            <div class="tool-name-en">BiBiDown</div>
                        </div>
                    </div>
                </a>
                <a href="https://www.lifequote.club/" class="tool-item">
                    <div class="tool-icon">
                        <?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M34 10V4H8V38L14 35" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M14 44V10H40V44L27 37.7273L14 44Z" fill="none" stroke="#333" stroke-width="1" stroke-linejoin="round"/></svg>
                        <div class="tool-name">
                            <div class="tool-name-cn">人生一句</div>
                            <div class="tool-name-en">LifeQuotes</div>
                        </div>
                    </div>
                </a>
                <a href="https://www.lifewallpapers.org/" class="tool-item">
                    <div class="tool-icon">
                        <?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M39 6H9C7.34315 6 6 7.34315 6 9V39C6 40.6569 7.34315 42 9 42H39C40.6569 42 42 40.6569 42 39V9C42 7.34315 40.6569 6 39 6Z" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 23C20.7614 23 23 20.7614 23 18C23 15.2386 20.7614 13 18 13C15.2386 13 13 15.2386 13 18C13 20.7614 15.2386 23 18 23Z" fill="none" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M42 36L31 26L21 35L14 29L6 35" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        <div class="tool-name">
                            <div class="tool-name-cn">人生壁纸</div>
                            <div class="tool-name-en">LifeWallpaper</div>
                        </div>
                    </div>
                </a>
                <a href="https://lifeprompts.vercel.app/" class="tool-item">
                    <div class="tool-icon">
                        <?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 6C8 4.89543 8.89543 4 10 4H38C39.1046 4 40 4.89543 40 6V42C40 43.1046 39.1046 44 38 44H10C8.89543 44 8 43.1046 8 42V6Z" fill="none" stroke="#333" stroke-width="1" stroke-linejoin="round"/><path d="M16 4V44" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M24 12H32" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M24 20H32" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 4H22" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 44H22" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        <div class="tool-name">
                            <div class="tool-name-cn">人生提示词</div>
                            <div class="tool-name-en">LifePrompt</div>
                        </div>
                    </div>
                </a>
                <a href="https://lifecard-hazel.vercel.app/" class="tool-item">
                    <div class="tool-icon">
                        <?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M28 12V4L8 14V42L20 36" stroke="#333" stroke-width="1" stroke-linejoin="round"/><path d="M20 16L40 6V34L20 44V16Z" fill="none" stroke="#333" stroke-width="1" stroke-linejoin="round"/></svg>
                        <div class="tool-name">
                            <div class="tool-name-cn">人生卡片</div>
                            <div class="tool-name-en">LifeCard</div>
                        </div>
                    </div>
                </a>
            </div>
        </section>

        <section class="category">
            <h2>金融100 | 金融商业工具库</h2>
            <!-- 工具卡片网格布局 -->
            <div class="tools-grid">
                <a href="https://everythingbagel.cn" class="tool-item">
                    <div class="tool-icon">
                        <?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="4" y="15" width="40" height="26" rx="2" fill="none" stroke="#333" stroke-width="1" stroke-linejoin="round"/><path d="M24 7L16 15H32L24 7Z" fill="none" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 24H30" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 32H20" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        <span class="new-tag">NEW</span>
                        <div class="tool-name">
                            <div class="tool-name-cn">股市公告分析</div>
                            <div class="tool-name-en">Announcements</div>
                        </div>
                    </div>
                </a>
                <a href="https://everythingbagel.cn" class="tool-item">
                    <div class="tool-icon">
                        <?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="24" cy="24" r="20" fill="none" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M20 16H25H27C29.2091 16 31 17.7909 31 20C31 22.2091 29.2091 24 27 24H20V16Z" fill="none"/><path d="M20 16V24H27C29.2091 24 31 22.2091 31 20V20C31 17.7909 29.2091 16 27 16H25M20 16H16M20 16V12M20 16H25M25 16V12" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M20 24H29C31.2091 24 33 25.7909 33 28C33 30.2091 31.2091 32 29 32H25H20V24Z" fill="none"/><path d="M20 32V24H29C31.2091 24 33 25.7909 33 28V28C33 30.2091 31.2091 32 29 32H25M20 32V36M20 32H16H25M20 32H25M25 32V36" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        <div class="tool-name">
                            <div class="tool-name-cn">加密货币资讯分析</div>
                            <div class="tool-name-en">Web3 Asset Analysis</div>
                        </div>
                    </div>
                </a>
                <a href="https://everythingbagel.cn" class="tool-item">
                    <div class="tool-icon">
                        <?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M40 30V15L27.5 7.96875M20.5 7.96875L8 15V30M11 34.6875L24 42L32 37.5L37 34.6875" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M21 18.75L18 20.5V24V27.5L21 29.25L24 31L27 29.25L30 27.5V24V20.5L27 18.75L24 17L21 18.75Z" fill="none" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M24 17V10" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M30 27L37 31" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 27L11 31" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><circle cx="24" cy="7" r="3" fill="none" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><circle cx="8" cy="33" r="3" fill="none" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><circle cx="40" cy="33" r="3" fill="none" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        <div class="tool-name">
                            <div class="tool-name-cn">区块链</div>
                            <div class="tool-name-en">Blockchain</div>
                        </div>
                    </div>
                </a>
                <a href="https://everythingbagel.cn" class="tool-item">
                    <div class="tool-icon">
                        <?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><ellipse cx="14" cy="10" rx="10" ry="5" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 10C4 10 4 14.2386 4 17C4 19.7614 8.47715 22 14 22C19.5228 22 24 19.7614 24 17C24 15.3644 24 10 24 10" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 17C4 17 4 21.2386 4 24C4 26.7614 8.47715 29 14 29C19.5228 29 24 26.7614 24 24C24 22.3644 24 17 24 17" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 24C4 24 4 28.2386 4 31C4 33.7614 8.47715 36 14 36C19.5228 36 24 33.7614 24 31C24 29.3644 24 24 24 24" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 31C4 31 4 35.2386 4 38C4 40.7614 8.47715 43 14 43C19.5228 43 24 40.7614 24 38C24 36.3644 24 31 24 31" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><ellipse cx="34" cy="24" rx="10" ry="5" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M24 24C24 24 24 28.2386 24 31C24 33.7614 28.4772 36 34 36C39.5228 36 44 33.7614 44 31C44 29.3644 44 24 44 24" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M24 31C24 31 24 35.2386 24 38C24 40.7614 28.4772 43 34 43C39.5228 43 44 40.7614 44 38C44 36.3644 44 31 44 31" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        <div class="tool-name">
                            <div class="tool-name-cn">基金筛选</div>
                            <div class="tool-name-en">Fund Screening</div>
                        </div>
                    </div>
                </a>
                <a href="https://everythingbagel.cn" class="tool-item">
                    <div class="tool-icon">
                        <?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 17V44H38V17" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M5 22L10 17L24 4L38 17L43 22" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M19 19L24 25L29 19" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 31H30" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 25H30" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M24 25V37" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        <div class="tool-name">
                            <div class="tool-name-cn">财富管理</div>
                            <div class="tool-name-en">Wealth Management</div>
                        </div>
                    </div>
                </a>
            </div>
        </section>
    </main>

    <footer>
        <div class="container">
            <p>© 2025 万有贝果 EverythingBagel. 保留所有权利。</p>
        </div>
    </footer>
</body>
</html>