blog-fuwari/src/pages/friends.astro

---
import MainGridLayout from "@layouts/MainGridLayout.astro";
import { Icon } from "astro-icon/components";
---

<MainGridLayout title="友情链接">
    <div class="card-base p-6 md:p-8">
        <div class="flex items-center gap-2 mb-6">
            <div class="h-8 w-8 rounded-lg bg-[var(--primary)] flex items-center justify-center text-white dark:text-black/70">
                <Icon name="material-symbols:diversity-3" class="text-[1.5rem]">
            </div>
            <h1 class="text-2xl font-bold text-black dark:text-white">友情链接</h1>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            
            <a href="https://www.netlify.com/" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://www.netlify.com/favicon.ico" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">Netlify（主站托管平台）</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">亚马逊 AWS CDN</div>
            </a>

            <a href="https://github.com/saicaca/fuwari" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="/assets/favicon/saicaca.png" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">fuwari（本站使用的模板）</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">使用 Astro 构建的静态博客模板</div>
            </a>
            
            <a href="https://chatgpt.com" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://cdn.oaistatic.com/assets/favicon-l4nq08hd.svg" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">ChatGPT</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">这玩意难道有时候不比脑子好使？</div>
            </a>
            
            <a href="https://code.visualstudio.com" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://code.visualstudio.com/assets/favicon.ico" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">Visual Studio Code</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">编辑器中的真神！</div>
            </a>
            
            <a href="https://github.com" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="/assets/favicon/github.ico" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">GitHub</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">Build and ship software on a single, collaborative platform | 在单一协作平台上构建和交付软件</div>
            </a>

            <a href="https://hitokoto.cn" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://hitokoto.cn/favicon.ico" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">一言</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">把一些句子汇聚起来，形成一言网络，以传递更多的感动</div>
            </a>

            <a href="https://2x.nz" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://q2.qlogo.cn/headimg_dl?dst_uin=2726730791&spec=0" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">AcoFork Blog</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">爱你所爱~ ❤</div>
            </a>


            <a href="https://ansonq.com" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://ansonq.com/src/tx.png" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">Anson主页</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">Anson的国际导航页</div>
            </a>

            <a href="https://bbos.me" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="/assets/favicon/0x4E314E30.jpg" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">五道口宇宙中心</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">什么都想了解一点</div>
            </a>

            <a href="https://blog.mckero.com" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://tuchuang.mckero.top/OIP.jpeg" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">MC_Kero的 blog</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">依稀当年泪目干！</div>
            </a>

            <a href="https://icp.redcha.cn" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://icp.redcha.cn/favicon.ico" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">茶备案</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">茶备案致力于打造一个经典的互联网同盟会，希望可以和站长朋友们一起学习交流</div>
            </a>

            <a href="https://icp.gov.moe" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://icp.gov.moe/images/ico64.png" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">萌国ICP备案</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">嗯，你没看错，这是萌国的ICP备案。萌国在哪呢，听某萌主说，好像是个异次元上的国度。萌主就爱给人组cp,俗称icp我们说的是萌国ICP备案，号称萌ICP备，简称萌备</div>
            </a>
            
            <!--
            <a href="https://caiyifeng.top" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://img.cdn1.vip/i/68bbdee513eb9_1757142757.webp" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">LYEy_isine个人博客</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">花海无一日，少年踏自来</div>
            </a>
            -->

            <a href="https://wyf9.top" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://wyf9.top/favicon.png" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">wyf9's Blog</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">什么都有的个人 blog?</div>
            </a>

            <a href="https://tbmiao.dpdns.org" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="/assets/172878250.png" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">AUNyaの小窝</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">一个热爱二次元的小萌新~</div>
            </a>

            <a href="https://blog.lenmei233.top" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://blog.lenmei233.top/images/avatar.png" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">lenmei233's blog</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">A person who loves coding, Welcome to my blog!</div>
            </a>

            <a href="https://cs.gt.tc" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://weavatar.com/avatar/75f9692805b439a703cabc302b85a47d07a9c67a0879c346aa70342fd5ccc596?s=96&r=g" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">天码行空的小破站</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">To be bright~</div>
            </a>

            <a href="https://blog.yaooa.cn" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://blog.yaooa.cn/_astro/avatar.CKWOOGoY_ZSc86z.webp" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">YaoBlog</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">不知道干什么就只有摆烂了</div>
            </a>

            <a href="https://blog.150191.xyz" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://blog.150191.xyz/_astro/demo-avatar.D3Ssuv2N_2t8ooY.webp" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">Clina's Blog</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">¡El pueblo unido jamás será vencido!</div>
            </a>

            <a href="https://blog.zhongyudata.com" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://zyblog.cn-nb1.rains3.com/zhongyudata.png" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">中域科技</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">技术与生活</div>
            </a>

            <a href="https://xhc861.top" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="/assets/99964145.jpg" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">xhc861's Blog</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">博客，远不止于博客~</div>
            </a>

            <a href="https://blog.hxrch.top" target="_blank" class="friend-card">
                <div class="flex items-center gap-2">
                    <img src="https://img.hxrch.top/bfav256.webp" loading="lazy" class="w-5 h-5 rounded">
                    <div class="font-bold text-black dark:text-white">Horean’s Blog</div>
                </div>
                <div class="text-sm text-black/50 dark:text-white/50">Spread the knowledge wisely & widely.</div>
            </a>
        </div>

        <!-- 申请友链 -->
        <div class="sponsors-section mt-8">
        	<h2 class="text-xl font-bold text-black dark:text-white mb-4 flex items-center gap-2">
        		<Icon name="material-symbols:group" class="text-[1.5rem] text-[var(--primary)]"/>
        		将您的网站加入本站友链
        	</h2>
        	<p class="text-sm text-black/60 dark:text-white/60">
        		请自行提交 Issue ： <a target="_blank" href="https://github.com/Ad-closeNN/blog-friends/issues/new?title=%E5%8F%8B%E9%93%BE%E7%94%B3%E8%AF%B7%EF%BC%9A" class="transition link text-[var(--primary)] font-medium">点击这里提交</a>
        	</p>
        <br>
    </div>

</MainGridLayout>

<style>
    .friend-card {
        @apply flex flex-col gap-1 p-4 rounded-lg bg-[var(--card-bg)] hover:bg-black/5 dark:hover:bg-white/5;
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 0.15s;
    }
    
    .friend-card:active {
        scale: .98;
        background-color: var(--btn-regular-bg-active);
    }
    
    .friend-card:hover {
        background-color: var(--btn-regular-bg-hover);
    }
    
    .friend-card:hover .font-bold {
        color: var(--btn-content);
    }
    
    .friend-card:hover .text-sm {
    @apply text-gray-700 dark:text-white;
    }

    .friend-card .font-bold,
    .friend-card .text-sm {
        transition-property: color;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 0.15s;
    }
</style>