154 lines
5.5 KiB
HTML
154 lines
5.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, maximum-scale=1.0, user-scalable=no">
|
|
<title>可乐Web · 移动端登录/注册模板 v3</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<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:#08080c;color:#fff;
|
|
display:flex;flex-direction:column;align-items:center;
|
|
padding:48px 16px 32px;-webkit-font-smoothing:antialiased;
|
|
}
|
|
body::before{
|
|
content:'';position:fixed;inset:0;z-index:0;
|
|
background:
|
|
radial-gradient(ellipse at 30% 0%,rgba(239,68,68,0.1) 0%,transparent 50%),
|
|
radial-gradient(ellipse at 70% 100%,rgba(168,85,247,0.08) 0%,transparent 50%);
|
|
}
|
|
.badge{
|
|
display:inline-block;padding:6px 16px;border-radius:20px;
|
|
background:rgba(239,68,68,0.15);color:#ef4444;
|
|
font-size:12px;font-weight:600;margin-bottom:20px;
|
|
position:relative;z-index:1;letter-spacing:.5px;
|
|
}
|
|
h1{
|
|
font-size:32px;font-weight:900;letter-spacing:-1px;
|
|
background:linear-gradient(135deg,#fff 25%,#f97316 60%,#ef4444 100%);
|
|
-webkit-background-clip:text;-webkit-text-fill-color:transparent;
|
|
background-clip:text;margin-bottom:6px;position:relative;z-index:1;
|
|
}
|
|
.subtitle{
|
|
font-size:14px;color:rgba(255,255,255,0.35);
|
|
margin-bottom:36px;position:relative;z-index:1;
|
|
}
|
|
.grid{
|
|
display:grid;grid-template-columns:1fr;gap:14px;
|
|
width:100%;max-width:400px;position:relative;z-index:1;
|
|
}
|
|
.card{
|
|
display:block;text-decoration:none;color:#fff;
|
|
border-radius:18px;overflow:hidden;
|
|
background:rgba(255,255,255,0.03);
|
|
border:1px solid rgba(255,255,255,0.06);
|
|
transition:all .35s cubic-bezier(.22,1,.36,1);
|
|
}
|
|
.card:hover{
|
|
transform:translateY(-4px);
|
|
border-color:rgba(255,255,255,0.12);
|
|
box-shadow:0 20px 40px rgba(0,0,0,0.4);
|
|
}
|
|
.card-preview{
|
|
height:80px;display:flex;align-items:center;justify-content:center;
|
|
font-size:32px;transition:transform .4s;
|
|
}
|
|
.card:hover .card-preview{transform:scale(1.03)}
|
|
.p1{background:linear-gradient(135deg,rgba(239,68,68,0.2),rgba(239,68,68,0.05))}
|
|
.p2{background:linear-gradient(135deg,rgba(168,85,247,0.2),rgba(59,130,246,0.1))}
|
|
.p3{background:linear-gradient(135deg,rgba(245,158,11,0.2),rgba(249,115,22,0.1))}
|
|
.p4{background:linear-gradient(135deg,rgba(16,185,129,0.2),rgba(6,182,212,0.1))}
|
|
.p5{background:linear-gradient(135deg,rgba(244,114,182,0.2),rgba(251,113,133,0.1))}
|
|
.card-body{padding:16px 18px 18px}
|
|
.card-body h3{font-size:15px;font-weight:700;margin-bottom:4px;letter-spacing:-.2px}
|
|
.card-body p{font-size:12px;color:rgba(255,255,255,0.35);line-height:1.5}
|
|
.tags{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
|
|
.tag{
|
|
padding:3px 10px;border-radius:6px;font-size:10px;font-weight:600;
|
|
background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.5);
|
|
}
|
|
.tip{
|
|
margin-top:40px;position:relative;z-index:1;
|
|
font-size:12px;color:rgba(255,255,255,0.25);text-align:center;
|
|
line-height:1.8;
|
|
}
|
|
.tip strong{color:rgba(255,255,255,0.45)}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<span class="badge">MOBILE FIRST</span>
|
|
<h1>可乐 移动端模板</h1>
|
|
<p class="subtitle">5 种主流 App 风格 · 专为手机设计</p>
|
|
|
|
<div class="grid">
|
|
<a class="card" href="template1-bottomsheet.html">
|
|
<div class="card-preview p1">📱</div>
|
|
<div class="card-body">
|
|
<h3>模板 1 · 底部弹出式</h3>
|
|
<p>抖音/小红书风格，全屏沉浸式背景 + 底部半屏弹出卡片</p>
|
|
<div class="tags">
|
|
<span class="tag">底部弹窗</span>
|
|
<span class="tag">沉浸式</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="card" href="template2-gradient-card.html">
|
|
<div class="card-preview p2">🎨</div>
|
|
<div class="card-body">
|
|
<h3>模板 2 · 渐变流动卡片</h3>
|
|
<p>Instagram/Spotify 风格，动态渐变背景 + 玻璃拟态表单卡</p>
|
|
<div class="tags">
|
|
<span class="tag">动态渐变</span>
|
|
<span class="tag">毛玻璃</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="card" href="template3-clean-white.html">
|
|
<div class="card-preview p3">✨</div>
|
|
<div class="card-body">
|
|
<h3>模板 3 · 极简白色</h3>
|
|
<p>美团/支付宝风格，纯白干净 + 品牌色点缀 + 行内表单</p>
|
|
<div class="tags">
|
|
<span class="tag">极简</span>
|
|
<span class="tag">行内输入</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="card" href="template4-fullscreen-dark.html">
|
|
<div class="card-preview p4">🌙</div>
|
|
<div class="card-body">
|
|
<h3>模板 4 · 全屏暗黑沉浸</h3>
|
|
<p>Apple 暗色模式风格，深色背景 + 微光边框 + 极致留白</p>
|
|
<div class="tags">
|
|
<span class="tag">暗色</span>
|
|
<span class="tag">沉浸式</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="card" href="template5-playful-colorful.html">
|
|
<div class="card-preview p5">🫧</div>
|
|
<div class="card-body">
|
|
<h3>模板 5 · 活力彩色</h3>
|
|
<p>Gen-Z 社交风格，柔和马卡龙渐变 + 趣味圆角 + 弹性动效</p>
|
|
<div class="tags">
|
|
<span class="tag">马卡龙</span>
|
|
<span class="tag">Gen-Z</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="tip">
|
|
所有模板均为<strong>移动端优先</strong>设计<br>
|
|
建议使用 Chrome DevTools 切换到手机设备查看效果
|
|
+</div>
|
|
+</body>
|
|
</html>
|