自用好看的404页面，做了个帮我工作的程序，懒得写首页，干脆做个404页面来做首页吧，反正也没啥人看😂，仿Visual Studio编辑器界面做的
源代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>404 Not Found</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:Consolas,"Microsoft YaHei",monospace;}
body{background:#1e1e1e;color:#d4d4d3;display:flex;height:100vh;overflow:hidden;}
.editor-container{flex:1;display:flex;flex-direction:column;}
.tab-bar{height:35px;background:#2d2d2d;padding:0 10px;display:flex;align-items:center;border-bottom:1px solid #1a1a1a;}
.tab{padding:0 12px;height:100%;display:flex;align-items:center;font-size:13px;color:#858585;}
.tab.active{background:#1e1e1e;color:#fff;}
.editor{flex:1;padding:10px;display:flex;overflow:hidden;}
.line-numbers{color:#858585;padding-right:12px;text-align:right;user-select:none;min-width:40px;line-height:1.6;}
.code-content{line-height:1.6;font-size:14px;white-space:pre;overflow:hidden;}
.cm-comment{color:#6A9955;}
.cm-keyword{color:#569CD6;}
.cm-type{color:#4EC9B0;}
.cm-string{color:#CE9178;}
.cm-number{color:#B5CEA8;}
.cm-operator{color:#D4D4D4;}
.sidebar{width:340px;background:#252526;border-left:1px solid #1a1a1a;display:flex;flex-direction:column;}
.sidebar-header{height:35px;padding:0 10px;display:flex;align-items:center;color:#ccc;border-bottom:1px solid #1a1a1a;font-size:13px;}
.sidebar-content{flex:1;padding:10px;overflow:hidden;font-size:13px;}
.solution-item{padding:3px 0;}
.indent1{padding-left:16px;}
.indent2{padding-left:32px;}
.indent3{padding-left:48px;}
.active{background:#094771;color:#fff;}
#hackModal{
position:fixed;inset:0;background:#000;color:#0f0;font-size:46px;font-weight:bold;
display:flex;align-items:center;justify-content:center;flex-direction:column;
z-index:9999;display:none;text-align:center;line-height:1.8;
}
.flash{animation:flash 0.15s infinite alternate;}
@keyframes flash{
0%{background:#000;color:#0f0;}
100%{background:#ff0000;color:#fff;}
}
</style>
</head>
<body>
<div class="editor-container">
<div class="tab-bar">
<div class="tab active">RequestManager.cs</div>
</div>
<div class="editor">
<div class="line-numbers">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>31<br>32<br>33<br>34<br>35<br>36<br>37<br>38<br>39<br>40<br>41<br>42<br>43<br>44<br>45</div>
<div class="code-content" id="code"></div>
</div>
</div>
<div class="sidebar">
<div class="sidebar-header">解决方案资源管理器</div>
<div class="sidebar-content">
<div class="solution-item indent1">▶ 解决方案 WebErrorSystem (1 个项目)</div>
<div class="solution-item indent1">▼ WebErrorSystem</div>
<div class="solution-item indent2">▼ Properties</div>
<div class="solution-item indent3">AssemblyInfo.cs</div>
<div class="solution-item indent3">Resources.resx</div>
<div class="solution-item indent3">Settings.settings</div>
<div class="solution-item indent2">▼ References</div>
<div class="solution-item indent3">System.Net</div>
<div class="solution-item indent3">System.Core</div>
<div class="solution-item indent3">System.Web</div>
<div class="solution-item indent2">▼ Network</div>
<div class="solution-item indent3 active">RequestManager.cs</div>
<div class="solution-item indent3">HttpHelper.cs</div>
<div class="solution-item indent3">ResponseParser.cs</div>
<div class="solution-item indent3">NetConfig.cs</div>
<div class="solution-item indent2">▼ Models</div>
<div class="solution-item indent3">ApiResult.cs</div>
<div class="solution-item indent3">ErrorInfo.cs</div>
<div class="solution-item indent2">▼ Utils</div>
<div class="solution-item indent3">LogHelper.cs</div>
<div class="solution-item indent3">JsonUtil.cs</div>
<div class="solution-item indent2">App.config</div>
<div class="solution-item indent2">Program.cs</div>
<div class="solution-item indent2">WebErrorSystem.csproj</div>
</div>
<div class="sidebar-header">属性</div>
<div class="sidebar-content">
<div class="solution-item"><b>文件属性</b></div>
<div class="solution-item">文件名: RequestManager.cs</div>
<div class="solution-item">完整路径: D:\Projects\WebErrorSystem\Network\</div>
<div class="solution-item">文件大小: 5.87 KB</div>
<div class="solution-item">创建时间: 2026-03-10 10:25:33</div>
<div class="solution-item">修改时间: 2026-03-10 11:12:49</div>
<div class="solution-item">访问时间: 2026-03-10 11:12:49</div>
<div class="solution-item">只读: 否</div>
<div class="solution-item">隐藏: 否</div>
<div style="height:10px;"></div>
<div class="solution-item"><b>高级属性</b></div>
<div class="solution-item">生成操作: 编译</div>
<div class="solution-item">复制到输出目录: 不复制</div>
<div class="solution-item">自定义工具: 无</div>
<div class="solution-item">文件格式: UTF-8</div>
<div style="height:10px;"></div>
<div class="solution-item"><b>代码属性</b></div>
<div class="solution-item">命名空间: WebErrorSystem.Network</div>
<div class="solution-item">类名: RequestManager</div>
<div class="solution-item">行数: 89</div>
<div class="solution-item">错误计数: 3</div>
<div class="solution-item">警告计数: 0</div>
</div>
</div>
<div id="hackModal">
⚠️ 网页无法打开 ⚠️
<br>
目标服务器拒绝连接
<br>
请求超时 · 主机不可达
<br><br>
404 Not Found
</div>
<script>
const code = `// 尝试打开目标网页
try {
string url = "http://liuxingxiaowu.top/";
HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url);
request.Timeout = 3000;
request.Method = "GET";
// 尝试获取响应
using (HttpWebResponse response = (HttpWebResponse)request.GetResponse()) {
if (response.StatusCode != HttpStatusCode.OK) {
throw new WebException("网页打开失败");
}
}
}
catch (WebException) {
// 服务器无响应 / 网页无法访问
Environment.FailFast("致命错误：网络连接失败，目标主机不可达");
}`;
const codeEl = document.getElementById("code");
let i = 0;
function type() {
if (i < code.length) {
let txt = code.slice(0, i + 1);
codeEl.innerHTML = highlight(txt);
i++;
setTimeout(type, 40);
} else {
let modal = document.getElementById("hackModal");
modal.style.display = "flex";
modal.classList.add("flash");
}
}
function highlight(text) {
return text
.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">")
.replace(/ /g, " ")
.replace(/\/\/.*/g, m => `<span class=cm-comment>${m}</span>`)
.replace(/".*?"/g, m => `<span class=cm-string>${m}</span>`)
.replace(/\b(try|catch|string|if|throw|using)\b/g, m => `<span class=cm-keyword>${m}</span>`)
.replace(/\b(HttpWebRequest|WebRequest|Create|HttpWebResponse|GetResponse|HttpStatusCode|WebException|Environment|FailFast)\b/g, m => `<span class=cm-type>${m}</span>`)
.replace(/\d+/g, m => `<span class=cm-number>${m}</span>`);
}
window.onload = type;
</script>
</body>
</html>