<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>無損 LOSSLESS LIFE | Coming Soon</title>
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: #000;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
overflow: hidden;
}
.container {
text-align: center;
z-index: 1;
}
h1 {
font-size: 2.5rem;
letter-spacing: 0.5rem;
font-weight: 300;
margin-bottom: 1rem;
text-transform: uppercase;
animation: breathe 4s ease-in-out infinite;
}
.brand-zh {
font-weight: 600;
margin-right: 1rem;
}
p {
font-size: 0.9rem;
color: #666;
letter-spacing: 0.2rem;
text-transform: uppercase;
}
.domain {
margin-top: 2rem;
font-size: 1.1rem;
color: #999;
border-top: 1px solid #333;
padding-top: 1rem;
display: inline-block;
}
@keyframes breathe {
0%, 100% { opacity: 0.4; transform: scale(0.98); }
50% { opacity: 1; transform: scale(1); }
}
/* 简单的点阵装饰 */
#canvas {
position: absolute;
top: 0;
left: 0;
opacity: 0.3;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div class="container">
<h1><span class="brand-zh">無損</span>LOSSLESS LIFE</h1>
<p>The absolute standard is loading...</p>
<div class="domain">lossless.life</div>
</div>
<script>
// 极简点阵背景脚本
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const dots = [];
for (let i = 0; i < 50; i++) {
dots.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
size: Math.random() * 2,
speed: Math.random() * 0.5
});
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#fff';
dots.forEach(dot => {
ctx.beginPath();
ctx.arc(dot.x, dot.y, dot.size, 0, Math.PI * 2);
ctx.fill();
dot.y -= dot.speed;
if (dot.y < 0) dot.y = canvas.height;
});
requestAnimationFrame(draw);
}
draw();
</script>
</body>
</html>