1131 lines
90 KiB
HTML
1131 lines
90 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=5">
|
||
<title>Welcome To mxd's Planet - V5.0</title>
|
||
<meta name="description" content="你好！欢迎来到我的个人主页！我是一个热爱技术的学生，在这里你可以找到我其他小站的链接。本站已用Tailwind CSS 重构。Hello! Welcome to my website! I'm a student who loves technology, and here you can find links to my other sites.">
|
||
<meta name="keywords" content="博客,mxdyeah,mxdabc,免费资源,接口,论坛,blog">
|
||
<meta name="format-detection" content="telephone=no">
|
||
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
|
||
<link href="src/output.css" rel="stylesheet">
|
||
<link href="https://fastly.jsdelivr.net" rel="preconnect" crossorigin>
|
||
<link href="https://gfonts.aby.pub" rel="preconnect" crossorigin>
|
||
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.7.2/css/all.min.css">
|
||
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
|
||
<link rel="stylesheet" href="https://gfonts.aby.pub/css2?family=Pacifico&display=swap">
|
||
<script src="https://fastly.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
|
||
<script src="https://fastly.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
|
||
<!-- <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7916126561134304" crossorigin="anonymous"></script> -->
|
||
</head>
|
||
|
||
<body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-300">
|
||
<nav class="fixed top-0 left-0 w-full bg-glass border-b border-gray-200/50 dark:border-gray-700/50 z-50" id="navbar">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="flex justify-between items-center h-16">
|
||
<div class="flex items-center">
|
||
<div class="text-xl font-bold text-primary dark:text-primary/90 flex items-center">
|
||
<span>mxd's Planet</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hidden md:flex space-x-6 items-center">
|
||
<a href="#home" class="text-sm text-gray-700 dark:text-gray-200 hover:text-primary transition-colors duration-200 flex items-center">
|
||
<i class="fa fa-home mr-1"></i>首页
|
||
</a>
|
||
<a href="#about" class="text-sm text-gray-700 dark:text-gray-200 hover:text-primary transition-colors duration-200 flex items-center">
|
||
<i class="fa fa-user mr-1"></i>关于我
|
||
</a>
|
||
<a href="#links" class="text-sm text-gray-700 dark:text-gray-200 hover:text-primary transition-colors duration-200 flex items-center">
|
||
<i class="fa-solid fa-link mr-1"></i>小站链接
|
||
</a>
|
||
<a href="#own_projects" class="text-sm text-gray-700 dark:text-gray-200 hover:text-primary transition-colors duration-200 flex items-center">
|
||
<i class="fa fa-briefcase mr-1"></i>项目
|
||
</a>
|
||
<a href="#friendship_link" class="text-sm text-gray-700 dark:text-gray-200 hover:text-primary transition-colors duration-200 flex items-center">
|
||
<i class="fa-solid fa-link mr-1"></i>友情链接
|
||
</a>
|
||
<a href="#contact" class="text-sm text-gray-700 dark:text-gray-200 hover:text-primary transition-colors duration-200 flex items-center">
|
||
<i class="fa fa-envelope mr-1"></i>联系
|
||
</a>
|
||
|
||
<a href="/myplanet.html" class="group relative px-3 py-1 text-sm font-medium text-primary dark:text-primary/90 transition-all duration-300">
|
||
<span class="absolute inset-0 border-2 border-dashed border-primary/30 bg-primary/5 rounded-md group-hover:bg-primary/10 dark:border-primary/40"></span>
|
||
<span class="relative z-10 flex items-center"><i class="fa fa-globe mr-1"></i>My Planet</span>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="md:hidden flex items-center">
|
||
<button id="menu-btn" class="text-gray-700 dark:text-gray-200 hover:text-primary dark:hover:text-primary/90 transition-colors duration-200">
|
||
<i class="fa fa-bars"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="mobile-menu" class="hidden md:hidden bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700"><!-- md,ipad怎么兼容 -->
|
||
<div class="px-4 py-3 space-y-2">
|
||
<a href="#home" class="block py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors duration-200 flex items-center">
|
||
<i class="fa-solid fa-house w-5 text-center mr-2"></i>首页
|
||
</a>
|
||
<a href="#about" class="block py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors duration-200 flex items-center">
|
||
<i class="fa fa-user w-5 text-center mr-2"></i>关于我
|
||
</a>
|
||
<a href="#links" class="block py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors duration-200 flex items-center">
|
||
<i class="fa-solid fa-link w-5 text-center mr-2"></i>小站链接
|
||
</a>
|
||
<a href="#own_projects" class="block py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors duration-200 flex items-center">
|
||
<i class="fa fa-briefcase w-5 text-center mr-2"></i>项目
|
||
</a>
|
||
<a href="#friendship_link" class="block py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors duration-200 flex items-center">
|
||
<i class="fa fa-briefcase w-5 text-center mr-2"></i>友情链接
|
||
</a>
|
||
<a href="#contact" class="block py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors duration-200 flex items-center">
|
||
<i class="fa fa-envelope w-5 text-center mr-2"></i>联系
|
||
</a>
|
||
|
||
<a href="/myplanet" class="block py-2 text-sm text-primary dark:text-primary/90 hover:bg-primary/10 dark:hover:bg-primary/20 rounded-md transition-colors duration-200 flex items-center">
|
||
<i class="fa fa-globe w-5 text-center mr-2"></i>My Planet
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
|
||
<div id="content" class="pt-16">
|
||
<section id="home" class="relative overflow-hidden bg-gradient-to-br from-primary/5 to-secondary/5 dark:from-primary/10 dark:to-secondary/10 py-16 md:py-24 min-h-screen flex items-center">
|
||
<div class="absolute inset-0 overflow-hidden">
|
||
<div class="absolute top-0 left-0 w-full h-full">
|
||
<div class="absolute top-10 left-10 w-40 h-40 bg-primary/10 rounded-full filter blur-3xl"></div>
|
||
<div class="absolute bottom-10 right-10 w-60 h-60 bg-secondary/10 rounded-full filter blur-3xl"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||
<div class="text-left md:text-center lg:text-left">
|
||
<h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-gray-900 dark:text-white leading-tight text-shadow mb-4">
|
||
Hello, I'm <span class="pacifico-regular">mxd.</span><br>
|
||
<span class="text-primary text-3xl">一名痴迷技术的学生</span>
|
||
</h1>
|
||
<p class="text-lg md:text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-xl">
|
||
平平无奇的菜鸟，喜欢干点自己喜欢做的事情。<br>ID: mxdyeah / mxdabc<br>努力改变世界(*^_^*)<br>
|
||
</p>
|
||
<meting-js server="netease" type="playlist" id="9108427580" fixed="true"></meting-js>
|
||
<div class="flex flex-wrap justify-center lg:justify-start gap-4">
|
||
<a href="https://blog.mxdyeah.top/" class="px-6 py-3 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 flex items-center">
|
||
<i class="fa fa-book mr-2"></i>Blog
|
||
</a>
|
||
<a href="#contact" class="px-6 py-3 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-800 dark:text-white font-medium rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 flex items-center">
|
||
<i class="fa fa-envelope mr-2"></i>Contact Me
|
||
</a>
|
||
</div>
|
||
<div class="mt-10 flex space-x-4 justify-center lg:justify-start">
|
||
<a href="https://github.com/mxdabc" target="_blank" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary/90 transition-colors duration-200 text-xl">
|
||
<i class="fa-brands fa-github"></i>
|
||
</a>
|
||
<a href="https://x.com/mxdabc" target="_blank" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary/90 transition-colors duration-200 text-xl">
|
||
<i class="fa-brands fa-x-twitter"></i>
|
||
</a>
|
||
<a href="https://instagram.com/mxdabc" target="_blank" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary/90 transition-colors duration-200 text-xl">
|
||
<i class="fa-brands fa-instagram"></i>
|
||
</a>
|
||
<a href="https://www.youtube.com/@mxdabc" target="_blank" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary/90 transition-colors duration-200 text-xl">
|
||
<i class="fa-brands fa-youtube"></i>
|
||
</a>
|
||
<a href="https://space.bilibili.com/402959406" target="_blank" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary/90 transition-colors duration-200 text-xl">
|
||
<i class="fa-brands fa-bilibili"></i>
|
||
</a>
|
||
<a href="https://discordapp.com/users/mxdabc" target="_blank" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary/90 transition-colors duration-200 text-xl">
|
||
<i class="fa-brands fa-discord"></i>
|
||
</a>
|
||
<a href="https://open.spotify.com/user/313s5uqjzo4wbj42h3wjjlw5wbsi" target="_blank" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary/90 transition-colors duration-200 text-xl">
|
||
<i class="fa-brands fa-spotify"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="hidden lg:block">
|
||
<div class="relative">
|
||
<div class="absolute -inset-4 bg-gradient-to-r from-primary to-secondary opacity-20 rounded-full blur-xl animate-float"></div>
|
||
<img src="/src/main.webp" alt="mxd" class="relative z-10 rounded-xl shadow-2xl w-full max-w-md mx-auto animate-float" style="animation-delay: 1s;">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="about" class="py-20 bg-white dark:bg-gray-900">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">About Me</h2>
|
||
<div class="w-20 h-1 bg-primary mx-auto"></div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||
<div class="order-2 lg:order-1">
|
||
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">Hello, I'm <span class="pacifico-regular">mxd.</span> 一名痴迷技术的学生。</h3>
|
||
<p class="text-gray-600 dark:text-gray-300 mb-4">
|
||
写过一些小网站、开发过一些小项目，乐于助人，已通过各种方式帮助过无数人。喜欢泡在论坛、社区网站里。<del>喜欢聊天吹水。</del>
|
||
</p>
|
||
<p class="text-gray-600 dark:text-gray-300 mb-4">
|
||
除了写代码，我还喜欢折腾，特别是折腾一些尚未成熟、新兴的项目或技术。并且我会分享自己猜到的坑以及应对方法，以此帮助他人。
|
||
</p>
|
||
<p class="text-gray-600 dark:text-gray-300 mb-6">
|
||
我相信持续学习和分享是成长的关键，因此我会不定期抽空在博客上分享我的技术见解和其他各种各样的经验。
|
||
</p>
|
||
<p class="text-gray-600 dark:text-gray-300 mb-6">
|
||
有人问我为什么总是把一只小鸡当作我的头像，因为那是我第一次接触“微软画图”画出来的，就索性当作我头像用到了现在。
|
||
</p>
|
||
|
||
<div class="grid grid-cols-2 gap-6 mb-8">
|
||
<div>
|
||
<h4 class="text-lg font-bold text-gray-900 dark:text-white mb-2">技能</h4>
|
||
<ul class="space-y-2">
|
||
<li class="flex items-center">
|
||
<i class="fa fa-check text-primary mr-2"></i>
|
||
<span class="text-gray-600 dark:text-gray-300">HTML5, CSS3, Tailwind CSS...</span>
|
||
</li>
|
||
<li class="flex items-center">
|
||
<i class="fa fa-check text-primary mr-2"></i>
|
||
<span class="text-gray-600 dark:text-gray-300">Linux & *BSD</span>
|
||
</li>
|
||
<li class="flex items-center">
|
||
<i class="fa fa-check text-primary mr-2"></i>
|
||
<span class="text-gray-600 dark:text-gray-300">Markdown & Latex</span>
|
||
</li>
|
||
<li class="flex items-center">
|
||
<i class="fa fa-check text-primary mr-2"></i>
|
||
<span class="text-gray-600 dark:text-gray-300">GIMP & Photoshop</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 class="text-lg font-bold text-gray-900 dark:text-white mb-2">特点</h4>
|
||
<ul class="space-y-2">
|
||
<li class="flex items-center">
|
||
<i class="fa fa-check text-primary mr-2"></i>
|
||
<span class="text-gray-600 dark:text-gray-300">喜欢钻研</span>
|
||
</li>
|
||
<li class="flex items-center">
|
||
<i class="fa fa-check text-primary mr-2"></i>
|
||
<span class="text-gray-600 dark:text-gray-300">帮助他人</span>
|
||
</li>
|
||
<li class="flex items-center">
|
||
<i class="fa fa-check text-primary mr-2"></i>
|
||
<span class="text-gray-600 dark:text-gray-300">保持乐观</span>
|
||
</li>
|
||
<li class="flex items-center">
|
||
<i class="fa fa-check text-primary mr-2"></i>
|
||
<span class="text-gray-600 dark:text-gray-300"><del>喜欢吹水</del></span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<a href="#contact" class="inline-flex items-center text-primary dark:text-primary/90 font-medium hover:underline">
|
||
了解更多 <i class="fa fa-long-arrow-right ml-2"></i>
|
||
</a>
|
||
</div>
|
||
<div class="order-1 lg:order-2">
|
||
<div class="relative">
|
||
<img src="/src/pic1.webp" alt="Working..." class="rounded-xl shadow-xl w-full">
|
||
<div class="absolute -bottom-6 -right-6 bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg border border-gray-100 dark:border-gray-700">
|
||
<div class="flex items-center space-x-2">
|
||
<div class="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
|
||
<p class="text-gray-800 dark:text-gray-200 font-medium">正在工作中...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="links" class="py-20 bg-gray-50 dark:bg-gray-800">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">Links</h2>
|
||
<p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto mb-8">我的小站链接，欢迎到访哦！</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||
<a href="https://blog.mxdyeah.top/" target="_blank" class="bg-white dark:bg-gray-700 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6" data-category="resource">
|
||
<div class="flex items-start mb-4">
|
||
<div class="w-10 h-10 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center mr-4">
|
||
<i class="fa-solid fa-blog text-blue-600 dark:text-blue-400 text-xl"></i>
|
||
</div>
|
||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">mxd's Blog</h3>
|
||
</div>
|
||
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4 line-clamp-2">我会在这里分享自己的最新内容，欢迎收藏关注。</p>
|
||
<div class="flex items-center justify-between">
|
||
<span
|
||
class="text-xs px-2 py-1 bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 rounded-full">blog.mxdyeah.top</span>
|
||
<i class="fa fa-external-link-alt text-gray-400 group-hover:text-blue-500 transition-colors"></i>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="https://oj.mxd.bee-zh.cn/" target="_blank" class="bg-white dark:bg-gray-700 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6" data-category="learning">
|
||
<div class="flex items-start mb-4">
|
||
<div
|
||
class="w-10 h-10 rounded-lg bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center mr-4">
|
||
<i class="fa-solid fa-computer text-purple-600 dark:text-purple-400 text-xl"></i>
|
||
</div>
|
||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">mxd's Online Judge</h3>
|
||
</div>
|
||
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4 line-clamp-2">编程学习平台，在线评测代码。<strong>注意仅支持IPv6网络</strong></p>
|
||
<div class="flex items-center justify-between">
|
||
<span
|
||
class="text-xs px-2 py-1 bg-purple-50 dark:bg-purple-900/20 text-purple-700 dark:text-purple-300 rounded-full">oj.mxd.bee-zh.cn</span>
|
||
<i class="fa fa-external-link-alt text-gray-400 group-hover:text-purple-500 transition-colors"></i>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/pages/music/" target="_blank" class="bg-white dark:bg-gray-700 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6" data-category="learning">
|
||
<div class="flex items-start mb-4">
|
||
<div
|
||
class="w-10 h-10 rounded-lg bg-yellow-100 dark:bg-yellow-900/30 flex items-center justify-center mr-4">
|
||
<i class="fa-solid fa-compact-disc text-yellow-600 dark:text-yellow-400 text-xl"></i>
|
||
</div>
|
||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Tracker/Keygen Music Collection</h3>
|
||
</div>
|
||
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4 line-clamp-2">收集各种注册机音乐和Tracker音乐</p>
|
||
<div class="flex items-center justify-between">
|
||
<span
|
||
class="text-xs px-2 py-1 bg-yellow-50 dark:bg-yellow-900/20 text-yellow-700 dark:text-yellow-300 rounded-full">/pages/music/</span>
|
||
<i class="fa fa-external-link-alt text-gray-400 group-hover:text-yellow-500 transition-colors"></i>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="https://iptv.crestekk.cn/" target="_blank" class="bg-white dark:bg-gray-700 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6" data-category="resource">
|
||
<div class="flex items-start mb-4">
|
||
<div
|
||
class="w-10 h-10 rounded-lg bg-green-100 dark:bg-green-900/30 flex items-center justify-center mr-4">
|
||
<i class="fa-solid fa-tv text-green-600 dark:text-green-400 text-xl"></i>
|
||
</div>
|
||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Crestekk IPTV Project</h3>
|
||
</div>
|
||
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4 line-clamp-2">"智"享视界新天地 - [项目仅限个人使用，用于牟利的请出门左转]</p>
|
||
<div class="flex items-center justify-between">
|
||
<span
|
||
class="text-xs px-2 py-1 bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300 rounded-full">iptv.crestekk.cn</span>
|
||
<i class="fa fa-external-link-alt text-gray-400 group-hover:text-green-500 transition-colors"></i>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="https://freebsd-pkg.mxdyeah.top/" target="_blank" class="bg-white dark:bg-gray-700 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6" data-category="entertainment">
|
||
<div class="flex items-start mb-4">
|
||
<div class="w-10 h-10 rounded-lg bg-cyan-100 dark:bg-cyan-900/30 flex items-center justify-center mr-4">
|
||
<i class="fa-solid fa-download text-cyan-600 dark:text-cyan-400 text-xl"></i>
|
||
</div>
|
||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">FreeBSD Package 镜像服务</h3>
|
||
</div>
|
||
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4 line-clamp-2">个人使用，不保证稳定<br>反向代理至https://pkg.freebsd.org/</p>
|
||
<div class="flex items-center justify-between">
|
||
<span
|
||
class="text-xs px-2 py-1 bg-cyan-50 dark:bg-cyan-900/20 text-cyan-700 dark:text-cyan-300 rounded-full">freebsd-pkg.mxdyeah.top</span>
|
||
<i class="fa fa-external-link-alt text-cyan-400 group-hover:text-cyan-500 transition-colors"></i>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="https://freebsd-ftp.mxdyeah.top/" target="_blank" class="bg-white dark:bg-gray-700 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6" data-category="entertainment">
|
||
<div class="flex items-start mb-4">
|
||
<div class="w-10 h-10 rounded-lg bg-orange-100 dark:bg-orange-900/30 flex items-center justify-center mr-4">
|
||
<i class="fa-solid fa-download text-orange-600 dark:text-orange-400 text-xl"></i>
|
||
</div>
|
||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">FreeBSD FTP 镜像服务</h3>
|
||
</div>
|
||
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4 line-clamp-2">个人使用，不保证稳定<br>反向代理至https://ftp.freebsd.org/</p>
|
||
<div class="flex items-center justify-between">
|
||
<span
|
||
class="text-xs px-2 py-1 bg-orange-50 dark:bg-orange-900/20 text-orange-700 dark:text-orange-300 rounded-full">freebsd-ftp.mxdyeah.top</span>
|
||
<i class="fa fa-external-link-alt text-gray-400 group-hover:text-orange-500 transition-colors"></i>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="https://dev.mxdyeah.top/" target="_blank" class="bg-white dark:bg-gray-700 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6" data-category="entertainment">
|
||
<div class="flex items-start mb-4">
|
||
<div class="w-10 h-10 rounded-lg bg-pink-100 dark:bg-pink-900/30 flex items-center justify-center mr-4">
|
||
<i class="fa-solid fa-flag text-pink-600 dark:text-pink-400 text-xl"></i>
|
||
</div>
|
||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">开发站</h3>
|
||
</div>
|
||
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4 line-clamp-2">测试园地，新项目都会在这里测试。</p>
|
||
<div class="flex items-center justify-between">
|
||
<span
|
||
class="text-xs px-2 py-1 bg-pink-50 dark:bg-pink-900/20 text-pink-700 dark:text-pink-300 rounded-full">dev.mxdyeah.top</span>
|
||
<i class="fa fa-external-link-alt text-gray-400 group-hover:text-pink-500 transition-colors"></i>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="https://status.mxdyeah.top/" target="_blank" class="bg-white dark:bg-gray-700 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6" data-category="entertainment">
|
||
<div class="flex items-start mb-4">
|
||
<div class="w-10 h-10 rounded-lg bg-sky-100 dark:bg-sky-900/30 flex items-center justify-center mr-4">
|
||
<i class="fa-solid fa-circle-up text-sky-600 dark:text-sky-400 text-xl"></i>
|
||
</div>
|
||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Status Panel</h3>
|
||
</div>
|
||
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4 line-clamp-2">服务器监测，状态显示。</p>
|
||
<div class="flex items-center justify-between">
|
||
<span
|
||
class="text-xs px-2 py-1 bg-sky-50 dark:bg-sky-900/20 text-sky-700 dark:text-sky-300 rounded-full">status.mxdyeah.top</span>
|
||
<i class="fa fa-external-link-alt text-gray-400 group-hover:text-sky-500 transition-colors"></i>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="https://git.mxdyeah.top/" target="_blank" class="bg-white dark:bg-gray-700 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6" data-category="entertainment">
|
||
<div class="flex items-start mb-4">
|
||
<div class="w-10 h-10 rounded-lg bg-green-100 dark:bg-green-900/30 flex items-center justify-center mr-4">
|
||
<i class="fa-brands fa-git-alt text-green-600 dark:text-green-400 text-xl"></i>
|
||
</div>
|
||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">mxd's Git</h3>
|
||
</div>
|
||
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4 line-clamp-2">Gitea，代码托管。自己的代码库，安静，轻松。</p>
|
||
<div class="flex items-center justify-between">
|
||
<span
|
||
class="text-xs px-2 py-1 bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300 rounded-full">git.mxdyeah.top</span>
|
||
<i class="fa fa-external-link-alt text-gray-400 group-hover:text-green-500 transition-colors"></i>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- 注意这里去掉了target blank等元素 -->
|
||
<div href="#" class="bg-white dark:bg-gray-700 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6" data-category="entertainment">
|
||
<div class="flex items-start mb-4">
|
||
<div class="w-10 h-10 rounded-lg bg-red-100 dark:bg-red-900/30 flex items-center justify-center mr-4">
|
||
<i class="fa-solid fa-headphones text-red-600 dark:text-red-400 text-xl"></i>
|
||
</div>
|
||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Music Station</h3>
|
||
</div>
|
||
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4 line-clamp-2"><del>听音乐？</del>正在开发</p>
|
||
<div class="flex items-center justify-between">
|
||
</div>
|
||
</div>
|
||
|
||
<span class="bg-white dark:bg-gray-700 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6" data-category="entertainment">
|
||
<div class="flex items-start mb-4">
|
||
<div
|
||
class="w-10 h-10 rounded-lg bg-indigo-100 dark:bg-indigo-900/30 flex items-center justify-center mr-4">
|
||
<i class="fa-solid fa-clock text-indigo-600 dark:text-indigo-400 text-xl"></i>
|
||
</div>
|
||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">NTP 授时服务</h3>
|
||
</div>
|
||
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4 line-clamp-2">请设置为: time.mxdyeah.top </p>
|
||
</span>
|
||
</div>
|
||
|
||
<!-- <div class="text-center mt-12">
|
||
<a href="/pages/mirrorlist/" class="inline-flex items-center justify-center px-6 py-3 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||
镜像加速列表 <i class="fa fa-long-arrow-right ml-2"></i>
|
||
</a>
|
||
</div> -->
|
||
</div>
|
||
</section>
|
||
|
||
<section id="own_projects" class="py-20 bg-white dark:bg-gray-900">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">My Project</h2>
|
||
<p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto mb-8">我的一些个人项目</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
|
||
<div class="bg-gray-50 dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100 dark:border-gray-700">
|
||
<div class="relative h-64 overflow-hidden">
|
||
<img src="https://proxy.mfawa.top/socialify/mxdabc/epg/image?description=1&descriptionEditable=%E6%8A%93%E5%8F%96%E5%A4%9A%E5%B9%B3%E5%8F%B0EPG%EF%BC%8C%E5%B9%B6%E7%94%9F%E6%88%90TVXML%E6%96%87%E4%BB%B6%E5%92%8CDIYP%E6%8E%A5%E5%8F%A3%E3%80%82&font=Jost&forks=1&issues=1&language=1&name=1&owner=1&pattern=Plus&pulls=1&stargazers=1&theme=Auto" alt="EPG System" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
|
||
<div class="p-6">
|
||
<h3 class="text-xl font-bold text-white mb-1">EPG System</h3>
|
||
<p class="text-white/80 text-sm">抓取多平台EPG，并生成TVXML文件和DIYP接口。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-6">
|
||
<p class="text-gray-600 dark:text-gray-300 mb-4">抓取多来源电视节目单(EPG),生成TVXML文件，并提供对外访问接口及后台配置。</p>
|
||
<div class="flex flex-wrap gap-2 mb-6">
|
||
<span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">Python3</span>
|
||
<span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">Django</span>
|
||
<span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">BeautifulSoup</span>
|
||
<span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">Redis</span>
|
||
<span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">MySQL</span>
|
||
</div>
|
||
<div class="flex justify-between items-center">
|
||
<a href="https://github.com/mxdabc/epg" target="_blank" class="text-primary dark:text-primary/90 hover:text-primary/80 dark:hover:text-primary font-medium transition-colors duration-200 flex items-center">
|
||
查看项目 <i class="fa fa-arrow-right ml-1"></i>
|
||
</a>
|
||
<span class="text-sm text-gray-500 dark:text-gray-400">开始时间:2024年2月</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-gray-50 dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100 dark:border-gray-700">
|
||
<div class="relative h-64 overflow-hidden">
|
||
<img src="https://proxy.mfawa.top/socialify/mxdabc/epgphp/image?description=1&descriptionEditable=PHP%20version%20of%20the%20EPG%20service%2C%20more%20lightweight.&font=Jost&forks=1&issues=1&language=1&name=1&owner=1&pulls=1&stargazers=1&theme=Auto" alt="EPGPHP" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
|
||
<div class="p-6">
|
||
<h3 class="text-xl font-bold text-white mb-1">EPGPHP</h3>
|
||
<p class="text-white/80 text-sm">PHP version of the EPG service, more lightweight.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-6">
|
||
<p class="text-gray-600 dark:text-gray-300 mb-4">衍生/二次开发版自taksssss的EPG系统。超轻量，高并发</p>
|
||
<div class="flex flex-wrap gap-2 mb-6">
|
||
<span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">PHP</span>
|
||
<span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">Redis</span>
|
||
<span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">Docker</span>
|
||
<span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">PostgreSQL</span>
|
||
</div>
|
||
<div class="flex justify-between items-center">
|
||
<a href="https://github.com/mxdabc/epgphp" target="_blank" class="text-primary dark:text-primary/90 hover:text-primary/80 dark:hover:text-primary font-medium transition-colors duration-200 flex items-center">
|
||
查看项目 <i class="fa fa-arrow-right ml-1"></i>
|
||
</a>
|
||
<span class="text-sm text-gray-500 dark:text-gray-400">开始时间:2024年8月</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-gray-50 dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100 dark:border-gray-700">
|
||
<div class="relative h-64 overflow-hidden">
|
||
<img src="https://proxy.mfawa.top/socialify/mxdabc/typecho-addons/image?description=1&font=Jost&forks=1&issues=1&language=1&name=1&owner=1&pulls=1&stargazers=1&theme=Auto" alt="typecho-addons" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
|
||
<div class="p-6">
|
||
<h3 class="text-xl font-bold text-white mb-1">Typecho Addons</h3>
|
||
<p class="text-white/80 text-sm">Typecho Addons | Typecho 插件，帮助我们更好建站 </p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-6">
|
||
<p class="text-gray-600 dark:text-gray-300 mb-4">Typecho 插件仓库。</p>
|
||
<div class="flex flex-wrap gap-2 mb-6">
|
||
<span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">PHP</span>
|
||
<span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">Typecho</span>
|
||
<span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">Blog</span>
|
||
<span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">CMS</span>
|
||
</div>
|
||
<div class="flex justify-between items-center">
|
||
<a href="https://github.com/mxdabc/typecho-addons" target="_blank" class="text-primary dark:text-primary/90 hover:text-primary/80 dark:hover:text-primary font-medium transition-colors duration-200 flex items-center">
|
||
查看项目 <i class="fa fa-arrow-right ml-1"></i>
|
||
</a>
|
||
<span class="text-sm text-gray-500 dark:text-gray-400">开始时间:2025年6月</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-gray-50 dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100 dark:border-gray-700">
|
||
<div class="relative h-64 overflow-hidden">
|
||
<img src="https://proxy.mfawa.top/socialify/mxdabc/addons-ua-switcher/image?description=1&font=Jost&forks=1&issues=1&language=1&name=1&owner=1&pulls=1&stargazers=1&theme=Auto" alt="addons-ua-switcher" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
|
||
<div class="p-6">
|
||
<h3 class="text-xl font-bold text-white mb-1">UA Switcher</h3>
|
||
<p class="text-white/80 text-sm">It is easier to test the User Agent. 更方便的测试User Agent。 </p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-6">
|
||
<p class="text-gray-600 dark:text-gray-300 mb-4">Firefox 浏览器插件。</p>
|
||
<div class="flex flex-wrap gap-2 mb-6">
|
||
<span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">JavaScript</span>
|
||
<span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">CSS</span>
|
||
</div>
|
||
<div class="flex justify-between items-center">
|
||
<a href="https://addons.mozilla.org/zh-CN/firefox/addon/useragent-switcher/" target="_blank" class="text-primary dark:text-primary/90 hover:text-primary/80 dark:hover:text-primary font-medium transition-colors duration-200 flex items-center">
|
||
去 Firefox ADD-ONS 下载 <i class="fa fa-arrow-right ml-1"></i>
|
||
</a>
|
||
<span class="text-sm text-gray-500 dark:text-gray-400">开始时间:2025年2月</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="participate_projects" class="py-20 bg-white dark:bg-gray-900">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">Participate Project</h2>
|
||
<p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto mb-8">参与过的一些项目，非本人原创。</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
|
||
<div class="bg-gray-50 dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100 dark:border-gray-700">
|
||
<div class="relative h-64 overflow-hidden">
|
||
<img src="https://proxy.mfawa.top/socialify/zhblue/hustoj/image?custom_description=Simple+OJ+system+for+ACM%2FICPC+and+NOIP+training.&description=1&font=Jost&forks=1&issues=1&language=1&name=1&owner=1&pattern=Plus&pulls=1&stargazers=1&theme=Auto" alt="HUSTOJ" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
|
||
<div class="p-6">
|
||
<h3 class="text-xl font-bold text-white mb-1">HUSTOJ</h3>
|
||
<p class="text-white/80 text-sm">流行的OJ系统，跨平台、易安装、有题库、二次开发门槛低。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-6">
|
||
<p class="text-gray-600 dark:text-gray-300 mb-4">二次开发过并熟练掌握架构，编写过属于自己的前端样式。也帮助过其他朋友解决很多问题。</p>
|
||
<div class="flex flex-wrap gap-2 mb-6">
|
||
<span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">PHP</span>
|
||
<span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">C / C++</span>
|
||
<span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">MySQL</span>
|
||
<span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">Linux</span>
|
||
<span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">ACM / ICPC</span>
|
||
<span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">NOIP</span>
|
||
</div>
|
||
<div class="flex justify-between items-center">
|
||
<a href="https://github.com/zhblue/hustoj" target="_blank" class="text-primary dark:text-primary/90 hover:text-primary/80 dark:hover:text-primary font-medium transition-colors duration-200 flex items-center">
|
||
查看项目 <i class="fa fa-arrow-right ml-1"></i>
|
||
</a>
|
||
<span class="text-sm text-gray-500 dark:text-gray-400">开始参与时间:2022年8月</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-gray-50 dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100 dark:border-gray-700">
|
||
<div class="relative h-64 overflow-hidden">
|
||
<img src="https://proxy.mfawa.top/socialify/FreeBSD-Ask/FreeBSD-Ask/image?description=1&font=Jost&forks=1&issues=1&language=1&name=1&owner=1&pattern=Plus&pulls=1&stargazers=1&theme=Auto" alt="HUSTOJ" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
|
||
<div class="p-6">
|
||
<h3 class="text-xl font-bold text-white mb-1">FreeBSD 操作系统研究导论</h3>
|
||
<p class="text-white/80 text-sm">开源书籍《FreeBSD 操作系统研究导论》 </p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-6">
|
||
<p class="text-gray-600 dark:text-gray-300 mb-4">参与编写文章。</p>
|
||
<div class="flex flex-wrap gap-2 mb-6">
|
||
<span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">Markdown</span>
|
||
<span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">FreeBSD</span>
|
||
<span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">Unix</span>
|
||
</div>
|
||
<div class="flex justify-between items-center">
|
||
<a href="https://github.com/FreeBSD-Ask/FreeBSD-Ask" target="_blank" class="text-primary dark:text-primary/90 hover:text-primary/80 dark:hover:text-primary font-medium transition-colors duration-200 flex items-center">
|
||
查看项目 <i class="fa fa-arrow-right ml-1"></i>
|
||
</a>
|
||
<span class="text-sm text-gray-500 dark:text-gray-400">开始参与时间:2025年7月</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-gray-50 dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100 dark:border-gray-700">
|
||
<div class="relative h-64 overflow-hidden">
|
||
<img src="https://proxy.mfawa.top/socialify/taksssss/EPG-Server/image?description=1&descriptionEditable=Docker%F0%9F%90%B3%E9%83%A8%E7%BD%B2%EF%BC%8C%E5%B8%A6%E8%AE%BE%E7%BD%AE%E7%95%8C%E9%9D%A2%E3%80%81%E5%8F%B0%E6%A0%87%E7%AE%A1%E7%90%86%EF%BC%8C%E6%94%AF%E6%8C%81DIYP%E3%80%81%E8%B6%85%E7%BA%A7%E7%9B%B4%E6%92%AD%E5%8F%8Axmltv%E3%80%82&font=Jost&forks=1&issues=1&language=1&name=1&owner=1&pulls=1&stargazers=1&theme=Auto" alt="EPG-Server" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
|
||
<div class="p-6">
|
||
<h3 class="text-xl font-bold text-white mb-1">EPG-Server</h3>
|
||
<p class="text-white/80 text-sm">用 php 实现的 EPG 服务端， Docker🐳 部署，带设置界面、台标管理、直播源管理，支持 DIYP & 百川 、 超级直播 以及 xmltv 格式。 </p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-6">
|
||
<p class="text-gray-600 dark:text-gray-300 mb-4">参与编写过几行小代码。</p>
|
||
<div class="flex flex-wrap gap-2 mb-6">
|
||
<span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">Docker</span>
|
||
<span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">PHP</span>
|
||
<span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">SQLite</span>
|
||
<span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">Memcached</span>
|
||
</div>
|
||
<div class="flex justify-between items-center">
|
||
<a href="https://github.com/taksssss/EPG-Server" target="_blank" class="text-primary dark:text-primary/90 hover:text-primary/80 dark:hover:text-primary font-medium transition-colors duration-200 flex items-center">
|
||
查看项目 <i class="fa fa-arrow-right ml-1"></i>
|
||
</a>
|
||
<span class="text-sm text-gray-500 dark:text-gray-400">开始参与时间:2024年8月</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center mt-12">
|
||
<a href="https://github.com/mxdabc" target="_blank" class="inline-flex items-center justify-center px-6 py-3 border border-primary text-primary dark:text-primary/90 font-medium rounded-lg hover:bg-primary hover:text-white dark:hover:bg-primary/90 transition-colors duration-300">
|
||
去我的 <i class="fa-brands fa-github"></i> Github 主页 <i class="fa fa-long-arrow-right ml-2"></i>
|
||
</a>
|
||
<a href="https://www.npmjs.com/~mxdyeah" target="_blank" class="inline-flex items-center justify-center px-6 py-3 border border-primary text-primary dark:text-primary/90 font-medium rounded-lg hover:bg-primary hover:text-white dark:hover:bg-primary/90 transition-colors duration-300">
|
||
去我的 <i class="fa-brands fa-npm"></i> NPM 主页 (暂未上传项目)<i class="fa fa-long-arrow-right ml-2"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 友情链接板块 -->
|
||
<section class="py-16 bg-white dark:bg-gray-900">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-12">
|
||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">友情链接</h2>
|
||
<p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">探索更多网站，发现更多精彩内容</p>
|
||
<p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">不分先后，先到的在最前面，如果您是优质网站可以联系我排序</p>
|
||
</div>
|
||
|
||
<!-- 友情链接box - 使用grid布局实现一排3个 动态 -->
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-6 mb-10" id="friend-links-container">
|
||
|
||
<div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-3 shadow-md border border-gray-100 dark:border-gray-700 link-card-hover">
|
||
<div class="flex items-start space-x-4">
|
||
<div class="flex-shrink-0 w-12 h-12 rounded-lg overflow-hidden bg-gray-200 dark:bg-gray-700">
|
||
<img src="https://res.mxdyeah.top/media/images/oh_my_bsd_logo.png" alt="CFC Logo" class="w-full h-full object-cover">
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<h3 class="text-base font-semibold text-gray-900 dark:text-white truncate">FreeBSD 中文社区</h3>
|
||
<p class="text-xs text-gray-500 dark:text-gray-400 mb-2 truncate">bsdcn.org</p>
|
||
<p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-2">欢迎你来到 FreeBSD 的世界！</p>
|
||
</div>
|
||
</div>
|
||
<a href="https://book.bsdcn.org/#gong-xian-zhe" target="_blank" class="mt-3 inline-flex items-center text-primary dark:text-primary/90 text-sm hover:underline">
|
||
访问网站 <i class="fa fa-external-link ml-1 text-xs"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-3 shadow-md border border-gray-100 dark:border-gray-700 link-card-hover">
|
||
<div class="flex items-start space-x-4">
|
||
<div class="flex-shrink-0 w-12 h-12 rounded-lg overflow-hidden bg-gray-200 dark:bg-gray-700">
|
||
<img src="https://blog.furry.ist/img/favicon.ico" alt="MingTone滴小站 Logo" class="w-full h-full object-cover">
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<h3 class="text-base font-semibold text-gray-900 dark:text-white truncate">MingTone滴小站</h3>
|
||
<p class="text-xs text-gray-500 dark:text-gray-400 mb-2 truncate">blog.furry.ist</p>
|
||
<p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-2">热爱·福瑞·咕咕 </p>
|
||
</div>
|
||
</div>
|
||
<a href="https://blog.furry.ist/?ref=www.mxdyeah.top" target="_blank" class="mt-3 inline-flex items-center text-primary dark:text-primary/90 text-sm hover:underline">
|
||
访问网站 <i class="fa fa-external-link ml-1 text-xs"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-3 shadow-md border border-gray-100 dark:border-gray-700 link-card-hover">
|
||
<div class="flex items-start space-x-4">
|
||
<div class="flex-shrink-0 w-12 h-12 rounded-lg overflow-hidden bg-gray-200 dark:bg-gray-700">
|
||
<img src="https://cdn.mfawa.top/image/logo.svg" alt="Mifeng's Home Logo" class="w-full h-full object-cover">
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<h3 class="text-base font-semibold text-gray-900 dark:text-white truncate">Mifeng's Home</h3>
|
||
<p class="text-xs text-gray-500 dark:text-gray-400 mb-2 truncate">imbee.top</p>
|
||
<p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-2">路漫漫其修远兮，吾将上下而求索。</p>
|
||
</div>
|
||
</div>
|
||
<a href="https://imbee.top/?ref=www.mxdyeah.top" target="_blank" class="mt-3 inline-flex items-center text-primary dark:text-primary/90 text-sm hover:underline">
|
||
访问网站 <i class="fa fa-external-link ml-1 text-xs"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-3 shadow-md border border-gray-100 dark:border-gray-700 link-card-hover">
|
||
<div class="flex items-start space-x-4">
|
||
<div class="flex-shrink-0 w-12 h-12 rounded-lg overflow-hidden bg-gray-200 dark:bg-gray-700">
|
||
<img src="https://cdn.mfawa.top/image/xiaolan.webp" alt="Xiaolanの神秘小窝 Logo" class="w-full h-full object-cover">
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<h3 class="text-base font-semibold text-gray-900 dark:text-white truncate">Xiaolanの神秘小窝</h3>
|
||
<p class="text-xs text-gray-500 dark:text-gray-400 mb-2 truncate">www.xiaolan.xin</p>
|
||
<p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-2">海内存知己，天涯若比邻</p>
|
||
</div>
|
||
</div>
|
||
<a href="https://www.xiaolan.xin/?ref=www.mxdyeah.top" target="_blank" rel="noopener" class="mt-3 inline-flex items-center text-primary dark:text-primary/90 text-sm hover:underline">
|
||
访问网站 <i class="fa fa-external-link ml-1 text-xs"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-3 shadow-md border border-gray-100 dark:border-gray-700 link-card-hover">
|
||
<div class="flex items-start space-x-4">
|
||
<div class="flex-shrink-0 w-12 h-12 rounded-lg overflow-hidden bg-gray-200 dark:bg-gray-700">
|
||
<img src="https://cdn.mfawa.top/image/zako.ltd-logo.webp" alt="杂鱼云 Logo" class="w-full h-full object-cover">
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<h3 class="text-base font-semibold text-gray-900 dark:text-white truncate">杂鱼云</h3>
|
||
<p class="text-xs text-gray-500 dark:text-gray-400 mb-2 truncate">cloud.zako.ltd</p>
|
||
<p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-2">为您提供更专业的基础云服务。</p>
|
||
</div>
|
||
</div>
|
||
<a href="https://cloud.zako.ltd/?ref=www.mxdyeah.top" target="_blank" rel="noopener" class="mt-3 inline-flex items-center text-primary dark:text-primary/90 text-sm hover:underline">
|
||
访问网站 <i class="fa fa-external-link ml-1 text-xs"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-5 shadow-md border border-gray-100 dark:border-gray-700 link-card-hover">
|
||
<div class="flex items-start space-x-4">
|
||
<div class="flex-shrink-0 w-12 h-12 rounded-lg overflow-hidden bg-gray-200 dark:bg-gray-700">
|
||
<img src="https://hungryhenry.cn/favicon.webp" alt="HungryHenry 的个人网站 Logo" class="w-full h-full object-cover">
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<h3 class="text-base font-semibold text-gray-900 dark:text-white truncate">HungryHenry 的个人网站</h3>
|
||
<p class="text-xs text-gray-500 dark:text-gray-400 mb-2 truncate">hungryhenry.cn</p>
|
||
<p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-2">不是在写bug，就是在debug🐛</p>
|
||
</div>
|
||
</div>
|
||
<a href="https://hungryhenry.cn/?ref=www.mxdyeah.top" target="_blank" rel="noopener" class="mt-3 inline-flex items-center text-primary dark:text-primary/90 text-sm hover:underline">
|
||
访问网站 <i class="fa fa-external-link ml-1 text-xs"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-5 shadow-md border border-gray-100 dark:border-gray-700 link-card-hover">
|
||
<div class="flex items-start space-x-4">
|
||
<div class="flex-shrink-0 w-12 h-12 rounded-lg overflow-hidden bg-gray-200 dark:bg-gray-700">
|
||
<img src="https://s1.imagehub.cc/images/2025/07/30/93b3e11a33c2741a3e254bccabb47739.jpg" alt="风与路人の主页 Logo" class="w-full h-full object-cover">
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<h3 class="text-base font-semibold text-gray-900 dark:text-white truncate">风与路人の主页</h3>
|
||
<p class="text-xs text-gray-500 dark:text-gray-400 mb-2 truncate">yaten.xyz</p>
|
||
<p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-2">等那场风，等那个你。</p>
|
||
</div>
|
||
</div>
|
||
<a href="https://yaten.xyz/?ref=www.mxdyeah.top" target="_blank" rel="noopener" class="mt-3 inline-flex items-center text-primary dark:text-primary/90 text-sm hover:underline">
|
||
访问网站 <i class="fa fa-external-link ml-1 text-xs"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-5 shadow-md border border-gray-100 dark:border-gray-700 link-card-hover">
|
||
<div class="flex items-start space-x-4">
|
||
<div class="flex-shrink-0 w-12 h-12 rounded-lg overflow-hidden bg-gray-200 dark:bg-gray-700">
|
||
<img src="https://www.shaoxiaoj.com/image/logo.png" alt="少侠编程 Logo" class="w-full h-full object-cover">
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<h3 class="text-base font-semibold text-gray-900 dark:text-white truncate">少侠编程</h3>
|
||
<p class="text-xs text-gray-500 dark:text-gray-400 mb-2 truncate">www.shaoxiaoj.com</p>
|
||
<p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-2">HUSTOJ二次开发系统，功能全，有丰富题库，最牛逼的OJ，欢迎来刷题。</p>
|
||
</div>
|
||
</div>
|
||
<a href="https://www.shaoxiaoj.com/?ref=www.mxdyeah.top" target="_blank" rel="noopener" class="mt-3 inline-flex items-center text-primary dark:text-primary/90 text-sm hover:underline">
|
||
访问网站 <i class="fa fa-external-link ml-1 text-xs"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-5 shadow-md border border-gray-100 dark:border-gray-700 link-card-hover">
|
||
<div class="flex items-start space-x-4">
|
||
<div class="flex-shrink-0 w-12 h-12 rounded-lg overflow-hidden bg-gray-200 dark:bg-gray-700">
|
||
<img src="https://www.akoj.top/image/aklogo.webp" alt="AKOJ判题系统 Logo" class="w-full h-full object-cover">
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<h3 class="text-base font-semibold text-gray-900 dark:text-white truncate">AKOJ判题系统</h3>
|
||
<p class="text-xs text-gray-500 dark:text-gray-400 mb-2 truncate">www.akoj.top</p>
|
||
<p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-2">AKOJ祝您刷题愉快！欢迎各位教师机构入驻！</p>
|
||
</div>
|
||
</div>
|
||
<a href="https://www.akoj.top/?ref=www.mxdyeah.top" target="_blank" rel="noopener" class="mt-3 inline-flex items-center text-primary dark:text-primary/90 text-sm hover:underline">
|
||
访问网站 <i class="fa fa-external-link ml-1 text-xs"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-5 shadow-md border border-gray-100 dark:border-gray-700 link-card-hover">
|
||
<div class="flex items-start space-x-4">
|
||
<div class="flex-shrink-0 w-12 h-12 rounded-lg overflow-hidden bg-gray-200 dark:bg-gray-700">
|
||
<img src="https://q2.qlogo.cn/headimg_dl?dst_uin=2726730791&spec=5" alt="AcoFork Blog Logo" class="w-full h-full object-cover">
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<h3 class="text-base font-semibold text-gray-900 dark:text-white truncate">AcoFork Blog</h3>
|
||
<p class="text-xs text-gray-500 dark:text-gray-400 mb-2 truncate">2x.nz</p>
|
||
<p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-2">爱你所爱~ ❤</p>
|
||
</div>
|
||
</div>
|
||
<a href="https://2x.nz/?ref=www.mxdyeah.top" target="_blank" rel="noopener" class="mt-3 inline-flex items-center text-primary dark:text-primary/90 text-sm hover:underline">
|
||
访问网站 <i class="fa fa-external-link ml-1 text-xs"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-5 shadow-md border border-gray-100 dark:border-gray-700 link-card-hover">
|
||
<div class="flex items-start space-x-4">
|
||
<div class="flex-shrink-0 w-12 h-12 rounded-lg overflow-hidden bg-gray-200 dark:bg-gray-700">
|
||
<img src="https://imgs.sbga.rip/20240429191940.png" alt="小御坂的避难所 Logo" class="w-full h-full object-cover">
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<h3 class="text-base font-semibold text-gray-900 dark:text-white truncate">小御坂的避难所</h3>
|
||
<p class="text-xs text-gray-500 dark:text-gray-400 mb-2 truncate">mikasano.cn</p>
|
||
<p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-2">我累了，休息会吧</p>
|
||
</div>
|
||
</div>
|
||
<a href="https://mikasano.cn/?ref=www.mxdyeah.top" target="_blank" rel="noopener" class="mt-3 inline-flex items-center text-primary dark:text-primary/90 text-sm hover:underline">
|
||
访问网站 <i class="fa fa-external-link ml-1 text-xs"></i>
|
||
</a>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
</div>
|
||
<!-- 添加按钮，没写好，暂时放弃 -->
|
||
<!-- <div class="text-center">
|
||
<button id="add-more-links" class="inline-flex items-center justify-center px-5 py-3 border border-primary text-primary dark:text-primary/90 font-medium rounded-lg hover:bg-primary hover:text-white dark:hover:bg-primary/90 transition-colors duration-300">
|
||
添加更多友情链接 <i class="fa fa-plus ml-2"></i>
|
||
</button>
|
||
</div> -->
|
||
</div>
|
||
</section>
|
||
|
||
<section id="contact" class="py-20 bg-white dark:bg-gray-900">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">Contact Me</h2>
|
||
<p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto mb-8">有任何问题或建议？请随时与我联系</p>
|
||
</div>
|
||
<!-- 调用下PHP实现，看下行不行 -->
|
||
<!-- 待修复 -->
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||
<div>
|
||
<form id="contactForm" action="/src/send_email.php" method="POST" class="bg-gray-50 dark:bg-gray-800 p-8 rounded-xl shadow-lg">
|
||
<div class="mb-6">
|
||
<label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">姓名（暂不可用，等待重构）</label>
|
||
<input type="text" id="name" class="w-full px-4 py-3 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-primary/70 transition-all duration-200" placeholder="请输入你的姓名, 最好不是网名, Github等Nickname、ID不受限制">
|
||
</div>
|
||
<div class="mb-6">
|
||
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">邮箱</label>
|
||
<input type="email" id="email" class="w-full px-4 py-3 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-primary/70 transition-all duration-200" placeholder="请输入你的邮箱">
|
||
</div>
|
||
<div class="mb-6">
|
||
<label for="subject" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">主题</label>
|
||
<input type="text" id="subject" class="w-full px-4 py-3 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-primary/70 transition-all duration-200" placeholder="请输入主题">
|
||
</div>
|
||
<div class="mb-6">
|
||
<label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">消息, 少于五十个字和拦截关键词将无法发送。</label>
|
||
<textarea id="message" rows="5" class="w-full px-4 py-3 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-primary/70 transition-all duration-200" placeholder="请输入你的消息"></textarea>
|
||
</div>
|
||
<button type="submit" disabled class="w-full px-6 py-3 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||
发送消息到我的邮箱，提醒我（暂不可用，等待重构）
|
||
</button>
|
||
</form>
|
||
<div id="formResponse" class="mt-4 hidden"></div>
|
||
</div>
|
||
<div>
|
||
<div class="bg-gray-50 dark:bg-gray-800 p-8 rounded-xl shadow-lg h-full">
|
||
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">联系方式 首选E-Mail</h3>
|
||
<ul class="space-y-6 mb-8">
|
||
<li class="flex items-start">
|
||
<div class="flex-shrink-0 w-10 h-10 bg-primary/10 text-primary rounded-full flex items-center justify-center">
|
||
<i class="fa fa-map-marker"></i>
|
||
</div>
|
||
<div class="ml-4">
|
||
<h4 class="text-lg font-medium text-gray-900 dark:text-white">地址</h4>
|
||
<p class="text-gray-600 dark:text-gray-300">Chongqing, China.</p>
|
||
</div>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<div class="flex-shrink-0 w-10 h-10 bg-primary/10 text-primary rounded-full flex items-center justify-center">
|
||
<i class="fa fa-envelope"></i>
|
||
</div>
|
||
<div class="ml-4">
|
||
<h4 class="text-lg font-medium text-gray-900 dark:text-white">邮箱</h4>
|
||
<p class="text-gray-600 dark:text-gray-300">admin@mxdyeah.anonaddy.com</p>
|
||
</div>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<div class="flex-shrink-0 w-10 h-10 bg-primary/10 text-primary rounded-full flex items-center justify-center">
|
||
<i class="fa-brands fa-telegram"></i>
|
||
</div>
|
||
<div class="ml-4">
|
||
<h4 class="text-lg font-medium text-gray-900 dark:text-white">Telegram</h4>
|
||
<p class="text-gray-600 dark:text-gray-300">@mxdyeah_bot (PM Disabled)</p>
|
||
</div>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<div class="flex-shrink-0 w-10 h-10 bg-primary/10 text-primary rounded-full flex items-center justify-center">
|
||
<i class="fa-brands fa-qq"></i>
|
||
</div>
|
||
<div class="ml-4">
|
||
<h4 class="text-lg font-medium text-gray-900 dark:text-white">QQ</h4>
|
||
<p class="text-gray-600 dark:text-gray-300">2513610934</p>
|
||
</div>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<div class="flex-shrink-0 w-10 h-10 bg-primary/10 text-primary rounded-full flex items-center justify-center">
|
||
<i class="fa-solid fa-clock"></i>
|
||
</div>
|
||
<div class="ml-4">
|
||
<h4 class="text-lg font-medium text-gray-900 dark:text-white">在线时间</h4>
|
||
<p class="text-gray-600 dark:text-gray-300">法定节假日，周末偶尔在线，学业压力大。</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<div>
|
||
<h4 class="text-lg font-medium text-gray-900 dark:text-white mb-4">关注我</h4>
|
||
<div class="flex space-x-4">
|
||
<a href="https://github.com/mxdabc" target="_blank" class="w-10 h-10 bg-gray-200 dark:bg-gray-700 hover:bg-primary hover:text-white text-gray-700 dark:text-gray-300 rounded-full flex items-center justify-center transition-colors duration-300">
|
||
<i class="fa-brands fa-github"></i>
|
||
</a>
|
||
<a href="https://x.com/mxdabc" target="_blank" class="w-10 h-10 bg-gray-200 dark:bg-gray-700 hover:bg-primary hover:text-white text-gray-700 dark:text-gray-300 rounded-full flex items-center justify-center transition-colors duration-300">
|
||
<i class="fa-brands fa-x-twitter"></i>
|
||
</a>
|
||
<a href="https://www.instagram.com/mxdabc" target="_blank" class="w-10 h-10 bg-gray-200 dark:bg-gray-700 hover:bg-primary hover:text-white text-gray-700 dark:text-gray-300 rounded-full flex items-center justify-center transition-colors duration-300">
|
||
<i class="fa-brands fa-instagram"></i>
|
||
</a>
|
||
<a href="https://www.youtube.com/@mxdabc" target="_blank" class="w-10 h-10 bg-gray-200 dark:bg-gray-700 hover:bg-primary hover:text-white text-gray-700 dark:text-gray-300 rounded-full flex items-center justify-center transition-colors duration-300">
|
||
<i class="fa-brands fa-youtube"></i>
|
||
</a>
|
||
<a href="https://space.bilibili.com/402959406" target="_blank" class="w-10 h-10 bg-gray-200 dark:bg-gray-700 hover:bg-primary hover:text-white text-gray-700 dark:text-gray-300 rounded-full flex items-center justify-center transition-colors duration-300">
|
||
<i class="fa-brands fa-bilibili"></i>
|
||
</a>
|
||
<a href="https://discordapp.com/users/mxdabc" target="_blank" class="w-10 h-10 bg-gray-200 dark:bg-gray-700 hover:bg-primary hover:text-white text-gray-700 dark:text-gray-300 rounded-full flex items-center justify-center transition-colors duration-300">
|
||
<i class="fa-brands fa-discord"></i>
|
||
</a>
|
||
<a href="https://open.spotify.com/user/313s5uqjzo4wbj42h3wjjlw5wbsi" target="_blank" class="w-10 h-10 bg-gray-200 dark:bg-gray-700 hover:bg-primary hover:text-white text-gray-700 dark:text-gray-300 rounded-full flex items-center justify-center transition-colors duration-300">
|
||
<i class="fa-brands fa-spotify"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<footer class="bg-gray-900 text-white pt-16 pb-8">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
|
||
<div>
|
||
<h3 class="text-xl font-bold mb-4 flex items-center">
|
||
mxd's HomePage
|
||
</h3>
|
||
<p class="text-gray-400 mb-4">一名痴迷技术的学生</p>
|
||
<p class="text-gray-400 mb-4">努力改变世界(*^_^*)</p>
|
||
<p class="text-gray-400 mb-4">网站已用Tailwind CSS重构</p>
|
||
<p class="text-gray-400 mb-4"><del>告诉你：其实我没打算写footer的，只是感觉没有页脚不完整，所以花几分钟写了个基本的页脚。</del></p>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-lg font-bold mb-4">快速链接</h3>
|
||
<ul class="space-y-2">
|
||
<li><a href="#home" class="text-gray-400 hover:text-white transition-colors duration-200">首页</a></li>
|
||
<li><a href="#about" class="text-gray-400 hover:text-white transition-colors duration-200">关于我</a></li>
|
||
<li><a href="#own_projects" class="text-gray-400 hover:text-white transition-colors duration-200">项目</a></li>
|
||
<li><a href="#links" class="text-gray-400 hover:text-white transition-colors duration-200">小站链接</a></li>
|
||
<li><a href="#contact" class="text-gray-400 hover:text-white transition-colors duration-200">联系</a></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-lg font-bold mb-4">资源</h3>
|
||
<ul class="space-y-2">
|
||
<li><a href="ca.crt" target="_blank" class="text-gray-400 hover:text-white transition-colors duration-200">CA Certificate</a></li>
|
||
<li><a href="vlc://https://www.mxdyeah.top/proxy/radio-paradise" target="_blank" class="text-gray-400 hover:text-white transition-colors duration-200">Radio Paradise (VLC)</a></li>
|
||
<li><a href="/v4.0/" target="_blank" class="text-gray-400 hover:text-white transition-colors duration-200">v4.0</a></li>
|
||
<li><a href="https://t.me/mxdshare" target="_blank" class="text-gray-400 hover:text-white transition-colors duration-200">Channel</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 这一块没调试好，不要了，先空着 -->
|
||
<!-- <div>
|
||
<h3 class="text-lg font-bold mb-4">订阅更新</h3>
|
||
<p class="text-gray-400 mb-4">订阅我的博客，获取最新更新吧！</p>
|
||
<form class="flex">
|
||
<input type="email" placeholder="输入你的邮箱" class="flex-1 px-4 py-2 bg-gray-800 border border-gray-700 rounded-l-lg focus:outline-none focus:ring-1 focus:ring-primary text-white">
|
||
<button type="submit" class="px-4 py-2 bg-primary text-white rounded-r-lg hover:bg-primary/90 transition-colors duration-200">
|
||
<i class="fa fa-paper-plane"></i>
|
||
</button>
|
||
</form>
|
||
</div> -->
|
||
</div>
|
||
<div class="border-t border-gray-800 pt-8 text-center text-gray-500 text-sm">
|
||
<p>Copyright © 2021-2025 mxd. 保留所有权利。</p>
|
||
<p>Made with <i class="fa-solid fa-heart"></i>. 使用热情构建<i class="fa-regular fa-face-smile"></i></p>
|
||
<p><a href="https://icp.gov.moe/?keyword=20251103" target="_blank">萌ICP备20251103号</a></p>
|
||
<p>The server running on the FreeBSD operating system. <i class="fa-solid fa-heart"></i></p>
|
||
<p>Code editing on Fedora 42. <i class="fa-solid fa-heart"></i></p>
|
||
<br>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
document.getElementById('contactForm').addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
|
||
const form = this;
|
||
const formData = new FormData(form);
|
||
const responseElement = document.getElementById('formResponse');
|
||
|
||
responseElement.classList.remove('hidden', 'bg-green-100', 'bg-red-100', 'text-green-700', 'text-red-700');
|
||
responseElement.innerHTML = '<div class="flex items-center justify-center py-4"><i class="fa fa-spinner fa-spin mr-2"></i> 发送中...</div>';
|
||
|
||
fetch(form.action, {
|
||
method: 'POST',
|
||
body: formData
|
||
})
|
||
.then(response => response.text())
|
||
.then(data => {
|
||
responseElement.classList.remove('bg-green-100', 'bg-red-100', 'text-green-700', 'text-red-700');
|
||
|
||
if (data.includes('success')) {
|
||
responseElement.classList.add('bg-green-100', 'text-green-700');
|
||
form.reset();
|
||
} else {
|
||
responseElement.classList.add('bg-red-100', 'text-red-700');
|
||
}
|
||
|
||
responseElement.innerHTML = data;
|
||
})
|
||
.catch(error => {
|
||
responseElement.classList.remove('bg-green-100', 'text-green-700');
|
||
responseElement.classList.add('bg-red-100', 'text-red-700');
|
||
responseElement.innerHTML = '发送失败了哦，可能触发了上限。请稍后再试。';
|
||
});
|
||
});
|
||
function adjustPadding() {
|
||
const navbar = document.getElementById('navbar');
|
||
const content = document.getElementById('content');
|
||
content.style.paddingTop = navbar.offsetHeight + 'px';
|
||
}
|
||
|
||
window.addEventListener('load', adjustPadding);
|
||
window.addEventListener('resize', adjustPadding);
|
||
|
||
// 移动菜单切换，写到我吐血
|
||
const menuBtn = document.getElementById("menu-btn");
|
||
const mobileMenu = document.getElementById("mobile-menu");
|
||
|
||
menuBtn.addEventListener("click", () => {
|
||
mobileMenu.classList.toggle("hidden");
|
||
});
|
||
|
||
// 数字计数动画，不正常
|
||
function animateCounter(elementId, targetValue, duration = 2000) {
|
||
const element = document.getElementById(elementId);
|
||
if (!element) return;
|
||
|
||
let startValue = 0;
|
||
const increment = Math.ceil(targetValue / (duration / 16));
|
||
|
||
const timer = setInterval(() => {
|
||
startValue += increment;
|
||
if (startValue >= targetValue) {
|
||
element.textContent = targetValue.toLocaleString();
|
||
clearInterval(timer);
|
||
} else {
|
||
element.textContent = startValue.toLocaleString();
|
||
}
|
||
}, 16);
|
||
}
|
||
|
||
// 监听元素是否进入视口 tnnd，草，写不好了
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
animateCounter("counter-posts", 128);
|
||
animateCounter("counter-visitors", 567890);
|
||
animateCounter("counter-comments", 3456);
|
||
animateCounter("counter-countries", 64);
|
||
observer.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, { threshold: 0.1 });
|
||
|
||
// 平滑滚动
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
|
||
const targetId = this.getAttribute('href');
|
||
if (targetId === '#') return;
|
||
|
||
const targetElement = document.querySelector(targetId);
|
||
if (targetElement) {
|
||
// 滚得时候，就关闭移动端菜单，让它缩回去
|
||
mobileMenu.classList.add("hidden");
|
||
|
||
// 滚动到目标位置
|
||
window.scrollTo({
|
||
top: targetElement.offsetTop - 80,
|
||
behavior: 'smooth'
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
// 导航栏滚动效果
|
||
window.addEventListener('scroll', () => {
|
||
const navbar = document.getElementById('navbar');
|
||
if (window.scrollY > 50) {
|
||
navbar.classList.add('shadow-md');
|
||
} else {
|
||
navbar.classList.remove('shadow-md');
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |