给网站设置了一个反诈宣传的404页面
今天进入网站，网址输入错误导致404无法访问。但是还是宝塔面板默认的404页面，不光丑不说，感觉还浪费了。我知道站长们都喜欢设置各种炫酷的404页面。我也去网上百度了一些关于404的源代码，但是都不是我想要的。
但是我是小白，简单的html都只懂皮毛，于是我让豆包帮我来全新生成一个符合我的404。经过豆包3次改版，最终有了如今的模样，好奇的小伙伴可以尝试看看。
为什么要加上反诈宣传？虽然网站目前基本没啥浏览，但我也希望能尽一点绵薄之力来宣传反诈，希望人们不再上当受骗。
我把源码放在下面，如果有人需要可以自取。
<!DOCTYPE html>
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404 - 页面未找到</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#165DFF',
secondary: '#FF7D00',
dark: '#1D2939',
light: '#F9FAFB'
},
fontFamily: {
inter: ['Inter', 'system-ui', 'sans-serif'],
},
},
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-shadow {
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-pulse-slow {
animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.alert-shine {
animation: shine 2s ease-in-out infinite;
}
@keyframes shine {
0% { box-shadow: 0 0 5px rgba(255, 125, 0, 0.5); }
50% { box-shadow: 0 0 20px rgba(255, 125, 0, 0.8); }
100% { box-shadow: 0 0 5px rgba(255, 125, 0, 0.5); }
}
}
</style>
</head>
<body class="bg-gradient-to-br from-light to-blue-50 min-h-screen font-inter text-dark flex flex-col items-center justify-center p-4">
<div class="max-w-6xl w-full">
<!-- 主要内容 -->
<div class="flex flex-col md:flex-row items-center gap-8"> <!-- 增加左右两部分之间的间距 -->
<!-- 左侧404错误展示 -->
<div class="w-full md:w-1/2 text-center md:text-left mb-12 md:mb-0">
<h1 class="text-[clamp(5rem,15vw,10rem)] font-bold text-primary mb-4 leading-tight text-shadow">
404
</h1>
<p class="text-[clamp(1.5rem,3vw,2.5rem)] font-semibold mb-6">页面好像去火星了</p>
<p class="text-gray-600 text-lg mb-8 max-w-lg mx-auto md:mx-0">
抱歉，您访问的页面不存在或已被删除。在此期间，请了解一些反诈知识，保护您的财产安全。
</p>
<!-- 特别提醒 - 调整宽度并居中显示 -->
<div class="bg-red-50 border border-red-200 rounded-lg p-4 mb-8 mx-auto md:mx-0 alert-shine max-w-lg">
<div class="flex items-start">
<div class="bg-red-100 p-2 rounded-full mr-3 mt-1">
<i class="fa-solid fa-exclamation-circle text-red-500"></i>
</div>
<div>
<h3 class="font-bold text-red-600 mb-1">特别提醒</h3>
<p class="text-red-700">
96110是反诈预警劝阻专线，如果看到96110号码来电，请一定要接听，并务必配合警方做好防范，避免财产损失。
</p>
</div>
</div>
</div>
<div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
<a href="https://xiejunhao.com/" class="bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg transition-all shadow-lg hover:shadow-primary/20 flex items-center justify-center">
<i class="fa-solid fa-arrow-left mr-2"></i> 返回首页
</a>
<!-- <a href="#" class="bg-white hover:bg-gray-50 text-primary border border-primary font-medium py-3 px-6 rounded-lg transition-all shadow-md flex items-center justify-center">
<i class="fa-solid fa-info-circle mr-2"></i> 了解更多
</a> -->
</div>
</div>
<!-- 右侧反诈宣传 -->
<div class="w-full md:w-1/2">
<div class="bg-white rounded-2xl shadow-xl p-8 card-hover">
<div class="flex items-center mb-6">
<div class="bg-secondary/10 p-3 rounded-full mr-4">
<i class="fa-solid fa-exclamation-triangle text-secondary text-xl"></i>
</div>
<h2 class="text-xl font-bold">反诈提醒</h2>
</div>
<div class="space-y-4">
<div class="flex items-start">
<div class="bg-primary/10 p-2 rounded-full mr-3 mt-1">
<i class="fa-solid fa-user text-primary"></i>
</div>
<p class="text-gray-700">
<span class="font-semibold">不轻信：</span>
不要轻易相信陌生人的电话、短信和网络消息，尤其是涉及金钱和个人信息的内容。
</p>
</div>
<div class="flex items-start">
<div class="bg-primary/10 p-2 rounded-full mr-3 mt-1">
<i class="fa-solid fa-lock text-primary"></i>
</div>
<p class="text-gray-700">
<span class="font-semibold">不点击：</span>
切勿随意点击短信里的链接和扫描未知的二维码，不要随意安装未确认安全性的app软件。
</p>
</div>
<div class="flex items-start">
<div class="bg-primary/10 p-2 rounded-full mr-3 mt-1">
<i class="fa-solid fa-lock text-primary"></i>
</div>
<p class="text-gray-700">
<span class="font-semibold">不透露：</span>
切勿随意透露银行卡号、密码、短信验证码、身份证号码等重要信息，谨防信息泄露。
</p>
</div>
<div class="flex items-start">
<div class="bg-primary/10 p-2 rounded-full mr-3 mt-1">
<i class="fa-solid fa-ban text-primary"></i>
</div>
<p class="text-gray-700">
<span class="font-semibold">不转账：</span>
任何要求直接转账的行为都要高度警惕，务必通过官方渠道核实信息。
</p>
</div>
<div class="flex items-start">
<div class="bg-primary/10 p-2 rounded-full mr-3 mt-1">
<i class="fa-solid fa-shield text-primary"></i>
</div>
<p class="text-gray-700">
<span class="font-semibold">及时举报：</span>
如遇可疑情况，及时联系警方或相关机构进行举报。
</p>
</div>
</div>
<div class="mt-8 p-4 bg-secondary/5 rounded-lg border border-secondary/20">
<h3 class="font-semibold text-secondary mb-2 flex items-center">
<i class="fa-solid fa-bell mr-2"></i> 常见诈骗类型
</h3>
<ul class="grid grid-cols-1 sm:grid-cols-2 gap-2 text-gray-700">
<li class="flex items-center">
<i class="fa-solid fa-circle text-xs text-secondary mr-2"></i> 网络刷单
</li>
<li class="flex items-center">
<i class="fa-solid fa-circle text-xs text-secondary mr-2"></i> 冒充公检法
</li>
<li class="flex items-center">
<i class="fa-solid fa-circle text-xs text-secondary mr-2"></i> 虚假投资理财
</li>
<li class="flex items-center">
<i class="fa-solid fa-circle text-xs text-secondary mr-2"></i> 交友诈骗
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
给网站设置了一个反诈宣传的404页面
https://xiejunhao.com/code/404.html
我特意测试了一下，界面很不错，值得借鉴。
就是用豆包生成的，现在的AI太强大了。生活中已经离不开各种AI了。
是的，不管是工作还是生活，都在用AI来提高效率。