146 lines
5.4 KiB
HTML
146 lines
5.4 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>可乐登录模板预览</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=Outfit:wght@600;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
|
|
|
|
body{
|
|
font-family:'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;
|
|
}
|
|
|
|
/* 动态背景 */
|
|
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-family:'Outfit','Noto Sans SC',sans-serif;
|
|
font-size:40px;font-weight:800;letter-spacing:-1px;
|
|
background:linear-gradient(135deg,#fff 30%,#f953c6 60%,#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:14px;color:rgba(255,255,255,0.4);margin-bottom:48px;position:relative;z-index:1}
|
|
|
|
.grid{
|
|
display:grid;
|
|
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
|
|
gap:24px;width:100%;max-width:1100px;
|
|
position:relative;z-index:1;
|
|
}
|
|
|
|
.card{
|
|
border-radius:16px;overflow:hidden;
|
|
background:rgba(255,255,255,0.04);
|
|
border:1px solid rgba(255,255,255,0.08);
|
|
transition:all .3s cubic-bezier(.22,1,.36,1);
|
|
cursor:pointer;text-decoration:none;color:#fff;
|
|
display:block;
|
|
}
|
|
.card:hover{
|
|
transform:translateY(-6px);
|
|
border-color:rgba(255,255,255,0.15);
|
|
box-shadow:0 24px 48px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.card-preview{
|
|
width:100%;aspect-ratio:16/10;overflow:hidden;position:relative;
|
|
}
|
|
.card-preview img{
|
|
width:100%;height:100%;object-fit:cover;
|
|
transition:transform .4s;
|
|
}
|
|
.card:hover .card-preview img{transform:scale(1.03)}
|
|
|
|
.card-info{padding:20px 24px}
|
|
.card-info h3{font-size:16px;font-weight:600;margin-bottom:6px}
|
|
.card-info p{font-size:13px;color:rgba(255,255,255,0.45);line-height:1.5}
|
|
.card-info .tag{
|
|
display:inline-block;margin-top:10px;
|
|
padding:4px 10px;border-radius:6px;font-size:11px;font-weight:500;
|
|
background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.5);
|
|
}
|
|
|
|
.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.6)}
|
|
|
|
@media(max-width:640px){
|
|
h1{font-size:28px}
|
|
.grid{grid-template-columns:1fr}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>可乐 登录/注册模板</h1>
|
|
<p class="subtitle">4 种风格，点击卡片直接预览</p>
|
|
|
|
<div class="grid">
|
|
<a class="card" href="template1-glassmorphism.html">
|
|
<div class="card-preview">
|
|
<img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=glassmorphism%20login%20page%20UI%20design%20with%20gradient%20purple%20pink%20background%20frosted%20glass%20card%20modern%20web%20design&image_size=landscape_16_9" alt="玻璃拟态">
|
|
</div>
|
|
<div class="card-info">
|
|
<h3>模板 1: 玻璃拟态风格</h3>
|
|
<p>毛玻璃质感 + 渐变动态背景 + 浮动光球，视觉冲击力强，适合年轻化产品</p>
|
|
<span class="tag">Glassmorphism</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="card" href="template2-split-brand.html">
|
|
<div class="card-preview">
|
|
<img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=split%20screen%20login%20page%20dark%20blue%20brand%20panel%20on%20left%20white%20form%20on%20right%20professional%20SaaS%20web%20design&image_size=landscape_16_9" alt="分栏品牌">
|
|
</div>
|
|
<div class="card-info">
|
|
<h3>模板 2: 左右分栏品牌展示</h3>
|
|
<p>左侧深色品牌故事区 + 右侧白色表单，类 Linear/Stripe 风格，商务感强</p>
|
|
<span class="tag">Split Layout</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="card" href="template3-dark-minimal.html">
|
|
<div class="card-preview">
|
|
<img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=dark%20minimal%20login%20page%20GitHub%20Vercel%20style%20developer%20tool%20black%20background%20subtle%20grid%20blue%20accent&image_size=landscape_16_9" alt="暗色极简">
|
|
</div>
|
|
<div class="card-info">
|
|
<h3>模板 3: 暗色极简科技风</h3>
|
|
<p>GitHub/Vercel 风格的深色设计，JetBrains Mono 字体，Ghost 按钮，适合技术产品</p>
|
|
<span class="tag">Dark Minimal</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="card" href="template4-brand-orange.html">
|
|
<div class="card-preview">
|
|
<img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=warm%20orange%20red%20gradient%20login%20page%20split%20screen%20friendly%20brand%20cola%20style%20modern%20SaaS%20web%20design&image_size=landscape_16_9" alt="品牌橙红">
|
|
</div>
|
|
<div class="card-info">
|
|
<h3>模板 4: 品牌橙红活力风</h3>
|
|
<p>暖色渐变 + 数据统计展示 + 胶囊 Tab，活泼有生命力，贴合"可乐"品牌调性</p>
|
|
<span class="tag">Brand Warm</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="tip">
|
|
点击上方卡片在新标签页打开对应模板<br>
|
|
所有模板均已适配 <strong>移动端</strong>，可按 F12 切换设备查看响应式效果
|
|
</div>
|
|
|
|
</body>
|
|
</html> |