105 lines
3.5 KiB
HTML
105 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Life OS - 登录</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
:root {
|
|
--bg-dark: #0F071A;
|
|
--primary: #A855F7;
|
|
--primary-light: #C084FC;
|
|
--accent: #E879F9;
|
|
}
|
|
|
|
body {
|
|
background: linear-gradient(180deg, #0F071A 0%, #1A0B2E 50%, #0F071A 100%);
|
|
min-height: 100vh;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
color: #F3E8FF;
|
|
}
|
|
|
|
.glass-card {
|
|
background: rgba(168, 85, 247, 0.05);
|
|
backdrop-filter: blur(40px);
|
|
border: 1px solid rgba(168, 85, 247, 0.15);
|
|
border-radius: 48rpx;
|
|
}
|
|
|
|
.glass-input {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 24rpx;
|
|
color: #F3E8FF;
|
|
}
|
|
|
|
.glass-input::placeholder {
|
|
color: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, #9333EA 0%, #7C3AED 100%);
|
|
border-radius: 32rpx;
|
|
box-shadow: 0 8px 32px rgba(168, 85, 247, 0.3);
|
|
}
|
|
|
|
.aurora-top {
|
|
position: fixed;
|
|
top: -10%;
|
|
left: -10%;
|
|
width: 120%;
|
|
height: 60%;
|
|
background: rgba(168, 85, 247, 0.08);
|
|
filter: blur(120px);
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.aurora-bottom {
|
|
position: fixed;
|
|
bottom: -10%;
|
|
right: -10%;
|
|
width: 100%;
|
|
height: 50%;
|
|
background: rgba(139, 92, 246, 0.05);
|
|
filter: blur(100px);
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="flex items-center justify-center p-6">
|
|
<div class="aurora-top"></div>
|
|
<div class="aurora-bottom"></div>
|
|
|
|
<div class="glass-card w-full max-w-md p-12 relative z-10">
|
|
<div class="text-center mb-12">
|
|
<h1 class="text-4xl font-light text-white/90 mb-4 tracking-wider">欢迎回来</h1>
|
|
<p class="text-white/40 italic">开启你的数字生命档案</p>
|
|
</div>
|
|
|
|
<div class="space-y-6 mb-8">
|
|
<div>
|
|
<label class="block text-sm text-white/60 mb-3 tracking-widest">手机号码</label>
|
|
<input type="tel" placeholder="输入手机号" class="glass-input w-full h-14 px-6 text-center text-lg tracking-widest">
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm text-white/60 mb-3 tracking-widest">验证码</label>
|
|
<div class="flex gap-3">
|
|
<input type="text" placeholder="六位验证码" class="glass-input flex-1 h-14 px-6 text-center">
|
|
<button class="glass-input h-14 px-6 text-sm text-white/80 whitespace-nowrap">获取</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="btn-primary w-full h-14 text-white font-semibold mb-6">开启旅程</button>
|
|
|
|
<p class="text-xs text-center text-white/25 leading-relaxed">
|
|
登录即代表同意《用户协议》与《隐私政策》
|
|
</p>
|
|
</div>
|
|
</body>
|
|
</html>
|