mirror of https://github.com/veypi/OneAuth.git
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
238 lines
5.0 KiB
HTML
238 lines
5.0 KiB
HTML
7 months ago
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<title>404 Galaxy Lost</title>
|
||
|
|
</head>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
--primary-color: #ff6f61;
|
||
|
|
--nebula-color: rgba(195, 207, 226, 0.1);
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
height: 100vh;
|
||
|
|
background: linear-gradient(135deg, #0b0b2a, #1a1a4a);
|
||
|
|
font-family: 'Arial', sans-serif;
|
||
|
|
overflow: hidden;
|
||
|
|
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="%23fff" opacity="0.5"/></svg>') 12 12, auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
position: relative;
|
||
|
|
z-index: 2;
|
||
|
|
text-align: center;
|
||
|
|
color: white;
|
||
|
|
perspective: 1000px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.error-code {
|
||
|
|
font-size: 20rem;
|
||
|
|
font-weight: 900;
|
||
|
|
margin: 0;
|
||
|
|
text-shadow: 0 0 30px var(--primary-color);
|
||
|
|
transform-style: preserve-3d;
|
||
|
|
animation: float 4s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
.message {
|
||
|
|
font-size: 2rem;
|
||
|
|
margin: 2rem 0;
|
||
|
|
opacity: 0.8;
|
||
|
|
transform: translateZ(50px);
|
||
|
|
animation: textGlow 2s alternate infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button {
|
||
|
|
position: relative;
|
||
|
|
padding: 1rem 3rem;
|
||
|
|
font-size: 1.2rem;
|
||
|
|
background: transparent;
|
||
|
|
border: 2px solid var(--primary-color);
|
||
|
|
border-radius: 50px;
|
||
|
|
color: white;
|
||
|
|
cursor: pointer;
|
||
|
|
overflow: hidden;
|
||
|
|
transition: 0.3s all ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button:hover {
|
||
|
|
background: var(--primary-color);
|
||
|
|
box-shadow: 0 0 30px var(--primary-color);
|
||
|
|
transform: translateY(-3px);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 新增太空元素样式 */
|
||
|
|
.planet {
|
||
|
|
position: absolute;
|
||
|
|
width: 300px;
|
||
|
|
height: 300px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: linear-gradient(45deg, #3a1c71, #d76d77, #ffaf7b);
|
||
|
|
filter: drop-shadow(0 0 50px rgba(255, 175, 123, 0.5));
|
||
|
|
animation: rotate 30s linear infinite;
|
||
|
|
left: 20%;
|
||
|
|
top: 30%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.meteor {
|
||
|
|
position: absolute;
|
||
|
|
width: 2px;
|
||
|
|
height: 30px;
|
||
|
|
background: linear-gradient(to bottom, white, var(--primary-color));
|
||
|
|
animation: meteorFall 3s linear infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 关键帧动画 */
|
||
|
|
@keyframes float {
|
||
|
|
|
||
|
|
0%,
|
||
|
|
100% {
|
||
|
|
transform: translateY(0) rotateX(10deg) rotateY(10deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
transform: translateY(-20px) rotateX(-10deg) rotateY(-10deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rotate {
|
||
|
|
to {
|
||
|
|
transform: rotate(360deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes meteorFall {
|
||
|
|
from {
|
||
|
|
transform: translate(-100vw, -100vh) rotate(-45deg);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
to {
|
||
|
|
transform: translate(100vw, 100vh) rotate(-45deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes textGlow {
|
||
|
|
from {
|
||
|
|
text-shadow: 0 0 10px white;
|
||
|
|
}
|
||
|
|
|
||
|
|
to {
|
||
|
|
text-shadow: 0 0 30px var(--primary-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.particle {
|
||
|
|
position: absolute;
|
||
|
|
width: 10px;
|
||
|
|
height: 10px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: white;
|
||
|
|
animation: particleMove 2s linear;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes particleMove {
|
||
|
|
from {
|
||
|
|
transform: translate(-50%, -50%) scale(1);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
to {
|
||
|
|
transform: translate(-50%, -50%) scale(0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<h1 class="error-code">404</h1>
|
||
|
|
<p class="message">Warp Drive Malfunction!</p>
|
||
|
|
<button class="button" @click="goHome" @mousemove="createRipple">
|
||
|
|
Beam Me Home
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<!-- 新增太空元素 -->
|
||
|
|
<div class="planet"></div>
|
||
|
|
<div v-for="(meteor, index) in meteors" :key="'meteor-'+index" class="meteor" :style="meteor.style"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 新增交互粒子 -->
|
||
|
|
<div class="particles">
|
||
|
|
<!-- <div v-for="(particle, index) in particles" :key="'particle-'+index" class="particle" :style="particle.style"></div> -->
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
// 响应式数据
|
||
|
|
meteors = Array.from({length: 5}).map(() => ({
|
||
|
|
style: {
|
||
|
|
top: `${Math.random() * 100}vh`,
|
||
|
|
left: `${Math.random() * 100}vw`,
|
||
|
|
animationDelay: `${Math.random() * 3}s`
|
||
|
|
}
|
||
|
|
}));
|
||
|
|
|
||
|
|
particles = [];
|
||
|
|
maxParticles = 150;
|
||
|
|
|
||
|
|
// 返回首页方法
|
||
|
|
goHome = () => {
|
||
|
|
$data.particles = [];
|
||
|
|
window.location.href = '/';
|
||
|
|
};
|
||
|
|
|
||
|
|
// 创建粒子效果
|
||
|
|
createRipple = (e) => {
|
||
|
|
if ($data.particles.length < $data.maxParticles) {
|
||
|
|
$data.particles = [...$data.particles, {
|
||
|
|
style: {
|
||
|
|
left: `${e.clientX}px`,
|
||
|
|
top: `${e.clientY}px`,
|
||
|
|
background: `hsl(${Math.random() * 360}, 70%, 50%)`
|
||
|
|
}
|
||
|
|
}];
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// 鼠标跟随效果
|
||
|
|
let mouseX = 0;
|
||
|
|
let mouseY = 0;
|
||
|
|
|
||
|
|
document.addEventListener('mousemove', (e) => {
|
||
|
|
mouseX = e.clientX;
|
||
|
|
mouseY = e.clientY;
|
||
|
|
|
||
|
|
// 创建轨迹粒子
|
||
|
|
if ($data.particles.length < $data.maxParticles) {
|
||
|
|
$data.particles.push({
|
||
|
|
style: {
|
||
|
|
left: `${mouseX}px`,
|
||
|
|
top: `${mouseY}px`,
|
||
|
|
background: `rgba(255,255,255,1)`,
|
||
|
|
// transform: `scale(${Math.random()})`
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 自动清理旧粒子
|
||
|
|
setInterval(() => {
|
||
|
|
let l = $data.particles.length;
|
||
|
|
if (l > 30) {
|
||
|
|
l = 30
|
||
|
|
}
|
||
|
|
if (l > 0) {
|
||
|
|
$data.particles = $data.particles.slice(l);
|
||
|
|
}
|
||
|
|
}, 300);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</html>
|