192 lines
6.5 KiB
HTML
192 lines
6.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>可乐Web · 登录/注册模板 v2</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
|
|
|
|
body{
|
|
font-family:'Inter','Noto Sans SC',system-ui,sans-serif;
|
|
min-height:100vh;background:#0c0c14;color:#fff;
|
|
display:flex;flex-direction:column;align-items:center;
|
|
padding:60px 20px;
|
|
-webkit-font-smoothing:antialiased;
|
|
}
|
|
|
|
body::before{
|
|
content:'';position:fixed;inset:0;z-index:0;
|
|
background:radial-gradient(ellipse at 20% 50%,rgba(102,126,234,0.12) 0%,transparent 50%),
|
|
radial-gradient(ellipse at 80% 20%,rgba(249,83,198,0.1) 0%,transparent 50%),
|
|
radial-gradient(ellipse at 50% 80%,rgba(185,29,115,0.08) 0%,transparent 50%);
|
|
}
|
|
|
|
h1{
|
|
font-size:44px;font-weight:900;letter-spacing:-1.5px;
|
|
background:linear-gradient(135deg,#fff 20%,#f953c6 55%,#667eea 100%);
|
|
-webkit-background-clip:text;-webkit-text-fill-color:transparent;
|
|
background-clip:text;
|
|
margin-bottom:8px;position:relative;z-index:1;
|
|
}
|
|
.subtitle{font-size:15px;color:rgba(255,255,255,0.4);margin-bottom:48px;position:relative;z-index:1;font-weight:400}
|
|
|
|
.grid{
|
|
display:grid;
|
|
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
|
|
gap:24px;width:100%;max-width:1200px;
|
|
position:relative;z-index:1;
|
|
}
|
|
|
|
.card{
|
|
border-radius:20px;overflow:hidden;
|
|
background:rgba(255,255,255,0.04);
|
|
border:1px solid rgba(255,255,255,0.08);
|
|
transition:all 0.4s cubic-bezier(.22,1,.36,1);
|
|
cursor:pointer;text-decoration:none;color:#fff;
|
|
display:block;
|
|
}
|
|
.card:hover{
|
|
transform:translateY(-8px);
|
|
border-color:rgba(255,255,255,0.15);
|
|
box-shadow:0 30px 60px rgba(0,0,0,0.35);
|
|
}
|
|
|
|
.card-preview{
|
|
width:100%;aspect-ratio:16/10;overflow:hidden;position:relative;
|
|
}
|
|
.card-preview img{
|
|
width:100%;height:100%;object-fit:cover;
|
|
transition:transform 0.5s cubic-bezier(.22,1,.36,1);
|
|
}
|
|
.card:hover .card-preview img{transform:scale(1.05)}
|
|
|
|
/* 预览色块替代图片 */
|
|
.card-preview .color-preview{
|
|
width:100%;height:100%;
|
|
display:flex;align-items:center;justify-content:center;
|
|
font-size:48px;
|
|
transition:transform 0.5s cubic-bezier(.22,1,.36,1);
|
|
}
|
|
.card:hover .card-preview .color-preview{transform:scale(1.05)}
|
|
|
|
.preview-1{background:linear-gradient(135deg,#f5f5f7 0%,#e8e8ed 100%)}
|
|
.preview-2{background:linear-gradient(135deg,#667eea,#764ba2,#f093fb)}
|
|
.preview-3{background:linear-gradient(135deg,#FFE500 30%,#FF6B6B 60%,#4ECDC4 100%)}
|
|
.preview-4{background:linear-gradient(135deg,#0a0a0a 0%,#1a1a2e 50%,#2d1b00 100%)}
|
|
.preview-5{background:linear-gradient(160deg,#e8d5f5 0%,#fde2e4 40%,#d4f0f0 100%)}
|
|
|
|
.card-info{padding:22px 24px}
|
|
.card-info h3{font-size:17px;font-weight:700;margin-bottom:6px;letter-spacing:-0.2px}
|
|
.card-info p{font-size:13px;color:rgba(255,255,255,0.4);line-height:1.6}
|
|
.card-info .tags{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
|
|
.card-info .tag{
|
|
display:inline-block;
|
|
padding:4px 12px;border-radius:8px;font-size:11px;font-weight:600;
|
|
}
|
|
.tag-white{background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.6)}
|
|
.tag-purple{background:rgba(167,139,250,0.15);color:#a78bfa}
|
|
.tag-yellow{background:rgba(255,229,0,0.15);color:#ffe500}
|
|
.tag-gold{background:rgba(245,166,35,0.15);color:#f5a623}
|
|
.tag-pink{background:rgba(244,114,182,0.15);color:#f472b6}
|
|
|
|
.tip{
|
|
margin-top:48px;position:relative;z-index:1;
|
|
font-size:13px;color:rgba(255,255,255,0.3);text-align:center;
|
|
line-height:1.8;
|
|
}
|
|
.tip strong{color:rgba(255,255,255,0.5)}
|
|
|
|
@media(max-width:640px){
|
|
h1{font-size:28px}
|
|
.grid{grid-template-columns:1fr}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>可乐 登录/注册模板 v2</h1>
|
|
<p class="subtitle">5 种主流 App 风格，点击卡片直接预览</p>
|
|
|
|
<div class="grid">
|
|
<a class="card" href="template1-apple-clean.html">
|
|
<div class="card-preview">
|
|
<div class="color-preview preview-1">🍎</div>
|
|
</div>
|
|
<div class="card-info">
|
|
<h3>模板 1 · Apple 极简白</h3>
|
|
<p>纯白背景 + 大留白 + 细腻阴影，模仿 iOS 原生登录体验，干净克制</p>
|
|
<div class="tags">
|
|
<span class="tag tag-white">极简</span>
|
|
<span class="tag tag-white">iOS 风格</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="card" href="template2-gradient-wave.html">
|
|
<div class="card-preview">
|
|
<div class="color-preview preview-2">🌊</div>
|
|
</div>
|
|
<div class="card-info">
|
|
<h3>模板 2 · 渐变波浪动态</h3>
|
|
<p>全屏流动渐变 + 浮动光斑 + 毛玻璃卡片，Instagram/TikTok 质感</p>
|
|
<div class="tags">
|
|
<span class="tag tag-purple">动态渐变</span>
|
|
<span class="tag tag-purple">毛玻璃</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="card" href="template3-neobrutalism.html">
|
|
<div class="card-preview">
|
|
<div class="color-preview preview-3">⚡</div>
|
|
</div>
|
|
<div class="card-info">
|
|
<h3>模板 3 · 新粗野主义</h3>
|
|
<p>粗黑边框 + 高饱和撞色 + 硬阴影，Duolingo 式大胆叛逆风格</p>
|
|
<div class="tags">
|
|
<span class="tag tag-yellow">粗野主义</span>
|
|
<span class="tag tag-yellow">撞色</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="card" href="template4-dark-premium.html">
|
|
<div class="card-preview">
|
|
<div class="color-preview preview-4">✨</div>
|
|
</div>
|
|
<div class="card-info">
|
|
<h3>模板 4 · 暗色高级感</h3>
|
|
<p>深邃黑底 + 金色点缀 + 底线输入框，高端银行/奢侈品级质感</p>
|
|
<div class="tags">
|
|
<span class="tag tag-gold">暗色</span>
|
|
<span class="tag tag-gold">高端</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="card" href="template5-bubble-playful.html">
|
|
<div class="card-preview">
|
|
<div class="color-preview preview-5">🫧</div>
|
|
</div>
|
|
<div class="card-info">
|
|
<h3>模板 5 · 气泡活泼风</h3>
|
|
<p>柔和粉彩渐变 + 浮动气泡 + 弹性动画，年轻化 Gen-Z 社交风格</p>
|
|
<div class="tags">
|
|
<span class="tag tag-pink">活泼</span>
|
|
<span class="tag tag-pink">Gen-Z</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="tip">
|
|
点击上方卡片在新标签页打开对应模板<br>
|
|
所有模板均为<strong>纯静态 HTML</strong>，直接浏览器打开即可预览<br>
|
|
每个模板都包含<strong>登录 + 注册</strong>双视图，支持 Tab 切换
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|