init: Upload Code
要提交的变更： 修改： README.md 新文件： favicon.ico 新文件： index.html 新文件： package-lock.json 新文件： package.json 新文件： src/input.css 新文件： src/main.png 新文件： src/main.webp 新文件： src/output.css 新文件： src/pic1.webp 新文件： src/send_email.php 新文件： tailwind.config.js
This commit is contained in:
@@ -1,3 +1,3 @@
|
|||||||
# homepage
|
# HomePage
|
||||||
|
|
||||||
mxd's HomePage Source Code.
|
mxd's HomePage Source Code.
|
||||||
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
914
index.html
Normal file
914
index.html
Normal file
@@ -0,0 +1,914 @@
|
|||||||
|
<!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="#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="#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="#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="#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="#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="#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="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 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>
|
||||||
|
|
||||||
|
<!-- 注意这里去掉了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="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="https://imbee.top/" target="_blank" class="text-gray-400 hover:text-white transition-colors duration-200">Mifeng's Home</a></li>
|
||||||
|
<li><a href="https://www.xiaolan.xin/" target="_blank" class="text-gray-400 hover:text-white transition-colors duration-200">Xiaolan's Home</a></li>
|
||||||
|
<li><a href="https://cloud.zako.ltd/" target="_blank" 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>
|
||||||
|
</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 runs on the FreeBSD operating system. <i class="fa-solid fa-heart"></i></p>
|
||||||
|
</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>
|
||||||
1493
package-lock.json
generated
Normal file
1493
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
5
package.json
Normal file
5
package.json
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"devDependencies": {
|
||||||
|
"tailwindcss": "^3.4.17"
|
||||||
|
}
|
||||||
|
}
|
||||||
46
src/input.css
Normal file
46
src/input.css
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@layer utilities {
|
||||||
|
.content-auto {
|
||||||
|
content-visibility: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-shadow {
|
||||||
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-glass {
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
background-color: rgba(255, 255, 255, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .bg-glass {
|
||||||
|
background-color: rgba(15, 23, 42, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-float {
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float {
|
||||||
|
0% {
|
||||||
|
transform: translateY(0px);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: translateY(-15px);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateY(0px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pacifico-regular {
|
||||||
|
font-family: "Pacifico", cursive;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
BIN
src/main.png
Normal file
BIN
src/main.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 786 KiB |
BIN
src/main.webp
Normal file
BIN
src/main.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
1
src/output.css
Normal file
1
src/output.css
Normal file
File diff suppressed because one or more lines are too long
BIN
src/pic1.webp
Normal file
BIN
src/pic1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
141
src/send_email.php
Normal file
141
src/send_email.php
Normal file
@@ -0,0 +1,141 @@
|
|||||||
|
<?php
|
||||||
|
// 接收表单数据
|
||||||
|
$name = filter_input(INPUT_POST, 'name', FILTER_SANITIZE_STRING);
|
||||||
|
$email = filter_input(INPUT_POST, 'email', FILTER_SANITIZE_EMAIL);
|
||||||
|
$subject = filter_input(INPUT_POST, 'subject', FILTER_SANITIZE_STRING);
|
||||||
|
$message = filter_input(INPUT_POST, 'message', FILTER_SANITIZE_STRING);
|
||||||
|
|
||||||
|
// 验证数据
|
||||||
|
$errors = [];
|
||||||
|
if (empty($name)) {
|
||||||
|
$errors[] = '姓名不能为空';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 严格的邮箱格式验证
|
||||||
|
if (empty($email)) {
|
||||||
|
$errors[] = '邮箱不能为空';
|
||||||
|
} elseif (!preg_match('/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/', $email)) {
|
||||||
|
$errors[] = '请输入有效的邮箱地址';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (empty($subject)) {
|
||||||
|
$errors[] = '主题不能为空';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (empty($message)) {
|
||||||
|
$errors[] = '消息不能为空';
|
||||||
|
} elseif (mb_strlen($message, 'UTF-8') < 50) {
|
||||||
|
$errors[] = '消息长度不能少于50个字符';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查垃圾消息（简单的垃圾词过滤）
|
||||||
|
$spamKeywords = [
|
||||||
|
'发票', '贷款', '赚钱', '投资', '优惠', '促销', '暴利', '提现', '赌博', '色情',
|
||||||
|
'viagra', 'cialis', 'casino', 'gambling', 'porn', 'sex', 'loan', 'money'
|
||||||
|
];
|
||||||
|
foreach ($spamKeywords as $keyword) {
|
||||||
|
if (stripos($message, $keyword) !== false) {
|
||||||
|
$errors[] = '消息包含不适当内容，请修改后再提交';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果有错误，返回错误信息
|
||||||
|
if (!empty($errors)) {
|
||||||
|
echo '<div class="p-4 rounded-lg bg-red-50 border border-red-200">';
|
||||||
|
echo '<div class="flex items-center text-red-700"><i class="fa fa-exclamation-circle mr-2"></i> 提交失败：</div>';
|
||||||
|
echo '<ul class="mt-2 list-disc list-inside text-red-600">';
|
||||||
|
foreach ($errors as $error) {
|
||||||
|
echo '<li>' . htmlspecialchars($error) . '</li>';
|
||||||
|
}
|
||||||
|
echo '</ul>';
|
||||||
|
echo '</div>';
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
// SMTP配置
|
||||||
|
// 第一次上传忘记删了，现在删掉哈哈哈
|
||||||
|
$smtpConfig = [
|
||||||
|
'host' => 'smtp.example.com',
|
||||||
|
'port' => 587,
|
||||||
|
'username' => 'mxd@example.com',
|
||||||
|
'password' => 'aabbccdd',
|
||||||
|
'secure' => 'tls',
|
||||||
|
'fromEmail' => 'mxd@example.com',
|
||||||
|
'fromName' => '网站联系表单'
|
||||||
|
];
|
||||||
|
|
||||||
|
// 邮件内容
|
||||||
|
$emailSubject = "来自网站的新消息: $subject";
|
||||||
|
$emailBody = "
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>新的联系表单提交</title>
|
||||||
|
</head>
|
||||||
|
<body style=\"font-family: Arial, sans-serif;\">
|
||||||
|
<div style=\"max-width: 600px; margin: 0 auto; padding: 20px; border: 1px solid #e0e0e0; border-radius: 8px;\">
|
||||||
|
<h3 style=\"color: #333;\">新消息来自: $name</h3>
|
||||||
|
<div style=\"margin-top: 15px; padding: 15px; background-color: #f9f9f9; border-radius: 4px;\">
|
||||||
|
<p><strong style=\"color: #555;\">邮箱:</strong> $email</p>
|
||||||
|
<p><strong style=\"color: #555;\">主题:</strong> $subject</p>
|
||||||
|
<p><strong style=\"color: #555;\">消息内容:</strong></p>
|
||||||
|
<p style=\"white-space: pre-wrap; line-height: 1.6;\">$message</p>
|
||||||
|
</div>
|
||||||
|
<p style=\"margin-top: 20px; color: #777; font-size: 14px;\">此邮件由网站自动发送，请直接回复此邮件联系发件人。</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
";
|
||||||
|
|
||||||
|
// 引入PHPMailer库
|
||||||
|
require 'vendor/autoload.php';
|
||||||
|
|
||||||
|
use PHPMailer\PHPMailer\PHPMailer;
|
||||||
|
use PHPMailer\PHPMailer\Exception;
|
||||||
|
|
||||||
|
// 创建邮件实例
|
||||||
|
$mail = new PHPMailer(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 服务器设置
|
||||||
|
$mail->SMTPDebug = 0; // 禁用调试输出
|
||||||
|
$mail->isSMTP(); // 使用SMTP发送
|
||||||
|
$mail->Host = $smtpConfig['host']; // SMTP服务器地址
|
||||||
|
$mail->SMTPAuth = true; // 启用SMTP认证
|
||||||
|
$mail->Username = $smtpConfig['username']; // SMTP用户名
|
||||||
|
$mail->Password = $smtpConfig['password']; // SMTP密码
|
||||||
|
$mail->SMTPSecure = $smtpConfig['secure']; // 启用TLS加密
|
||||||
|
$mail->Port = $smtpConfig['port']; // 端口号
|
||||||
|
|
||||||
|
// 发件人
|
||||||
|
$mail->setFrom($smtpConfig['fromEmail'], $smtpConfig['fromName']);
|
||||||
|
$mail->addReplyTo($email, $name);
|
||||||
|
|
||||||
|
// 收件人
|
||||||
|
$mail->addAddress('i@mxdyeah.top'); // 收件人邮箱
|
||||||
|
|
||||||
|
// 内容设置
|
||||||
|
$mail->isHTML(true); // 设置邮件格式为HTML
|
||||||
|
$mail->Subject = $emailSubject;
|
||||||
|
$mail->Body = $emailBody;
|
||||||
|
$mail->AltBody = "新消息来自: $name\n邮箱: $email\n主题: $subject\n\n$message"; // 纯文本备用内容
|
||||||
|
|
||||||
|
// 发送邮件
|
||||||
|
$mail->send();
|
||||||
|
|
||||||
|
// 返回成功信息
|
||||||
|
echo '<div class="p-4 rounded-lg bg-green-50 border border-green-200">
|
||||||
|
<div class="flex items-center text-green-700">
|
||||||
|
<i class="fa fa-check-circle mr-2"></i> 消息已成功发送，我会尽快回复你！
|
||||||
|
</div>
|
||||||
|
</div>';
|
||||||
|
} catch (Exception $e) {
|
||||||
|
// 返回失败信息
|
||||||
|
echo '<div class="p-4 rounded-lg bg-red-50 border border-red-200">
|
||||||
|
<div class="flex items-center text-red-700">
|
||||||
|
<i class="fa fa-exclamation-circle mr-2"></i> 发送失败: ' . htmlspecialchars($mail->ErrorInfo) . '
|
||||||
|
</div>
|
||||||
|
</div>';
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
|
||||||
18
tailwind.config.js
Normal file
18
tailwind.config.js
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: ["./index.html"],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#165DFF',
|
||||||
|
secondary: '#FF7D00',
|
||||||
|
accent: '#722ED1',
|
||||||
|
dark: '#1E293B',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Inter', 'system-ui', 'sans-serif'],
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user