Skip to content

新增诸多实用功能，优化主题布局 提高性能 #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
pmak404 wants to merge 13 commits into
base: main
Choose a base branch
from
Open

新增诸多实用功能，优化主题布局 提高性能 #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
f22b287
'delete'
yeuxuan Jan 7, 2025
7061661
'updateV2.0.0'
yeuxuan Jan 7, 2025
64d14a7
'updatereadme'
yeuxuan Jan 7, 2025
b29053c
'fix:safe'
yeuxuan Jan 11, 2025
84ea324
'update:docx'
yeuxuan Jan 11, 2025
34abae0
'fix:cache'
yeuxuan Jan 13, 2025
f40dc3a
'update:docx'
yeuxuan Jan 13, 2025
67b0a93
'update:docx'
yeuxuan Jan 13, 2025
aa5f9a3
'update:docx'
yeuxuan Jan 13, 2025
8647631
Create LICENSE
yeuxuan Feb 5, 2025
df852a2
Update README.md
yeuxuan Feb 22, 2025
9fd7198
Update README.md
yeuxuan Jun 7, 2025
1b01ecf
feat(ui): add futuristic tech theme with glassmorphism and admin pane…
pmak404 Oct 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
371 changes: 284 additions & 87 deletions 404.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,91 +1,288 @@
<html xmlns="http://www.w3.org/1999/xhtml">

<!--
* @Author: yihua
* @Date: 2025-01-04 12:25:10
* @LastEditTime: 2025-01-06 15:19:56
* @LastEditors: yihua
* @Description:
* @FilePath: \ccproxy_end\404.html
* 💊物物而不物于物，念念而不念于念🍁
* Copyright (c) 2025 by yihua, All Rights Reserved.
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>该页面不存在</title>



<link rel="stylesheet" href="/assets/404/css/reset.css" />

<link rel="stylesheet" href="/assets/404/css/404.css">



<script src="/assets/js/jquery-3.5.1.min.js"></script>



<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面未找到 - 404</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

:root {
--container-padding: 2rem;
--error-code-size: 120px;
--message-size: 24px;
--countdown-size: 18px;
--button-padding: 12px 24px;
}

body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background: #f5f7fa;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}

.background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: linear-gradient(120deg, #3498db, #2980b9);
opacity: 0.05;
}

.background-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.12'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
animation: moveBackground 30s linear infinite;
}

.container {
text-align: center;
padding: 2rem;
max-width: 600px;
background: rgba(255, 255, 255, 0.95);
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.18);
position: relative;
z-index: 1;
margin: 1rem;
}

.error-code {
font-size: 120px;
font-weight: bold;
background: linear-gradient(45deg, #3498db, #2980b9);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 1rem;
animation: floating 4s ease-in-out infinite;
}

.error-message {
font-size: 24px;
color: #34495e;
margin-bottom: 2rem;
}

.countdown {
font-size: 18px;
color: #7f8c8d;
margin-bottom: 2rem;
}

.buttons {
display: flex;
gap: 1rem;
justify-content: center;
}

.btn {
padding: 12px 24px;
border-radius: 25px;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}

.btn-primary {
background: linear-gradient(45deg, #3498db, #2980b9);
color: white;
}

.btn-secondary {
background: #ecf0f1;
color: #2c3e50;
}

.btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

@keyframes floating {
0% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0px); }
}

@keyframes moveBackground {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 100%;
}
}

@media screen and (max-width: 480px) {
.container {
padding: 1.5rem;
margin: 1rem;
width: calc(100% - 2rem);
}

.error-code {
font-size: 80px;
}

.error-message {
font-size: 20px;
margin-bottom: 1.5rem;
}

.countdown {
font-size: 16px;
margin-bottom: 1.5rem;
}

.buttons {
flex-direction: column;
gap: 0.8rem;
}

.btn {
width: 100%;
margin: 0.5rem 0;
}
}

@media screen and (max-width: 320px) {
.error-code {
font-size: 60px;
}

.error-message {
font-size: 18px;
}

.countdown {
font-size: 14px;
}

.container {
padding: 1rem;
}
}

@media screen and (max-height: 480px) and (orientation: landscape) {
.container {
padding: 1rem;
}

.error-code {
font-size: 60px;
margin-bottom: 0.5rem;
}

.buttons {
flex-direction: row;
justify-content: center;
gap: 1rem;
}

.btn {
width: auto;
min-width: 120px;
}
}

@media (prefers-color-scheme: dark) {
body {
background: #1a1a1a;
}

.container {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.1);
}

.error-message {
color: #ffffff;
}

.countdown {
color: #cccccc;
}

.btn-secondary {
background: #2c2c2c;
color: #ffffff;
}
}

@media (prefers-reduced-motion: reduce) {
.error-code {
animation: none;
}

.background-pattern {
animation: none;
}

.btn:hover {
transform: none;
}
}
</style>
</head>

<body>

<div class="auto">

<div class="container">

<div class="settings">

<i class="icon"></i>

<h4>很抱歉！没有找到您要访问的页面！</h4>

<p><span id="num">5</span> 秒后将自动跳转到首页</p>

<div>

<a href="./index.php" title="返回首页">返回首页</a>

<a href="javascript:;" title="上一步" id="reload-btn">上一步</a>

</div>

</div>

</div>

</div>



<script>
//倒计时跳转到首页的js代码

var $_num = $("#num");

var num = parseInt($_num.html());

var numId = setInterval(function () {

num--;

$_num.html(num);

if (num === 0) {

//跳转地址写在这里

window.location.href = "./index.php";

}

}, 1000);

//返回按钮单击事件

var reloadPage = $("#reload-btn");

reloadPage.click(function (e) {

window.history.back();

});
</script>



<div class="background"></div>
<div class="background-pattern"></div>

<div class="container">
<div class="error-code">404</div>
<h1 class="error-message">抱歉，页面走丢了</h1>
<p class="countdown">将在 <span id="timer">5</span> 秒后返回首页</p>
<div class="buttons">
<a href="/" class="btn btn-primary">返回首页</a>
<button onclick="history.back()" class="btn btn-secondary">返回上一页</button>
</div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
const timerElement = document.getElementById('timer');
let timeLeft = 5;

const countdown = setInterval(() => {
timeLeft--;
timerElement.textContent = timeLeft;

if (timeLeft <= 0) {
clearInterval(countdown);
window.location.href = '/';
}
}, 1000);
});
</script>
</body>

</html>
</html>
Loading