243 lines
38 KiB
HTML
243 lines
38 KiB
HTML
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>可乐 - 登录注册模板预览</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com"><link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Noto+Sans+SC:wght@300;400;500;600;700;900&display=swap" rel="stylesheet">
|
|
<style>
|
|
@keyframes dp{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
|
|
@keyframes wbn{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
|
|
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
|
|
body{font-family:'Inter','Noto Sans SC',system-ui,sans-serif;background:#f0f2f5;color:#333;-webkit-font-smoothing:antialiased}
|
|
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(255,255,255,0.92);backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,0,0,0.06)}
|
|
.nav-in{display:flex;align-items:center;padding:14px 20px;gap:12px;max-width:1400px;margin:0 auto}
|
|
.nav h1{font-size:17px;font-weight:700;color:#1d1d1f;white-space:nowrap}
|
|
.nav h1 span{background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
|
|
.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1}
|
|
.tabs::-webkit-scrollbar{display:none}
|
|
.tab{padding:8px 18px;border-radius:20px;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;border:none;transition:all .25s;font-family:inherit;background:#f0f0f2;color:#86868b}
|
|
.tab:hover{background:#e8e8ea;color:#555}.tab.active{background:#1d1d1f;color:#fff}
|
|
.wrap{padding-top:70px;display:flex;justify-content:center;align-items:flex-start;min-height:100vh}
|
|
.gp{display:none}.gp.show{display:flex;justify-content:center;width:100%;flex-wrap:nowrap}
|
|
.phone{position:relative;width:390px;min-height:760px;border-radius:48px;overflow:hidden;box-shadow:0 0 0 2px #1a1a1a,0 0 0 6px #333,0 0 0 8px #1a1a1a,0 25px 80px rgba(0,0,0,0.35);margin:30px 0 100px;flex-shrink:0}
|
|
.notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:130px;height:30px;background:#000;border-radius:0 0 20px 20px;z-index:100}
|
|
.scr{width:100%;min-height:760px;position:relative;overflow:hidden}
|
|
.info{margin:30px 0 50px 30px;max-width:400px;position:sticky;top:90px;align-self:flex-start;flex-shrink:0}
|
|
.ic{background:#fff;border-radius:16px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.06)}
|
|
.ic h2{font-size:20px;font-weight:700;margin-bottom:8px;color:#1d1d1f}
|
|
.tag{display:inline-block;padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600;margin-right:6px;margin-bottom:6px}
|
|
.tc{background:#e8f5e9;color:#2e7d32}.td{background:#333;color:#fff}.tg{background:#f3e5f5;color:#7b1fa2}.tm{background:#e3f2fd;color:#1565c0}.tw{background:#fff3e0;color:#e65100}
|
|
.ic p{font-size:13px;color:#666;line-height:1.7;margin-top:12px}
|
|
.ft{margin-top:12px}.ft li{font-size:13px;color:#555;line-height:1.8;list-style:none;padding-left:16px;position:relative}
|
|
.ft li::before{content:"\2713";position:absolute;left:0;color:#667eea;font-weight:700}
|
|
@media(max-width:900px){.gp.show{flex-direction:column;align-items:center}.info{margin:20px auto;position:static;max-width:100%}}
|
|
@media(max-width:440px){.phone{width:100%;border-radius:0;box-shadow:0 0 0 1px #ddd;margin:0;min-height:100vh}.notch{display:none}.wrap{padding-top:60px}}
|
|
</style></head>
|
|
<body>
|
|
<nav class="nav"><div class="nav-in">
|
|
<h1>🥤 可乐 <span>Templates</span></h1>
|
|
<div class="tabs">
|
|
<button class="tab active" onclick="sw('A')">A. 微信极简</button>
|
|
<button class="tab" onclick="sw('B')">B. 渐变卡片</button>
|
|
<button class="tab" onclick="sw('C')">C. 暗黑沉浸</button>
|
|
<button class="tab" onclick="sw('D')">D. Apple风</button>
|
|
<button class="tab" onclick="sw('E')">E. 暖色活力</button>
|
|
</div></div></nav>
|
|
<div class="wrap">
|
|
<div class="gp show" data-t="A">
|
|
<div class="phone"><div class="notch"></div><div class="scr">
|
|
<div style="width:100%;min-height:760px;background:#ededed">
|
|
<div style="height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(180deg,#e8e8e8,#ededed);padding-top:40px">
|
|
<div style="width:80px;height:80px;border-radius:22px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 30px rgba(102,126,234,0.3);margin-bottom:20px;font-size:36px">🥤</div>
|
|
<h1 style="font-size:24px;font-weight:700;color:#1d1d1f;margin-bottom:6px">可乐</h1>
|
|
<p style="font-size:13px;color:#999">ChunYu · 发现更多精彩</p></div>
|
|
<div style="padding:0 32px;margin-top:-20px">
|
|
<div style="display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;background:#fff;border:1px solid #e8e8e8;margin-bottom:14px"><span style="font-size:18px;opacity:0.5">👤</span><input type="text" placeholder="手机号 / 邮箱" style="flex:1;border:none;outline:none;background:none;font-size:15px;color:#333;font-family:inherit"></div>
|
|
<div style="display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;background:#fff;border:1px solid #e8e8e8;margin-bottom:14px"><span style="font-size:18px;opacity:0.5">🔒</span><input type="password" placeholder="密码" style="flex:1;border:none;outline:none;background:none;font-size:15px;color:#333;font-family:inherit"><button style="background:none;border:none;color:#ccc;cursor:pointer;font-size:16px">👁</button></div>
|
|
<div style="display:flex;justify-content:space-between;margin:16px 0 20px"><a href="#" style="font-size:13px;color:#667eea;text-decoration:none;font-weight:500">验证码登录</a><a href="#" style="font-size:13px;color:#667eea;text-decoration:none;font-weight:500">忘记密码？</a></div>
|
|
<button style="width:100%;height:50px;border-radius:25px;border:none;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:0 6px 20px rgba(102,126,234,0.35)">登录</button>
|
|
<div style="display:flex;align-items:center;gap:14px;margin:28px 0 20px"><div style="flex:1;height:0.5px;background:#d0d0d0"></div><span style="font-size:12px;color:#bbb;font-weight:500">其他登录方式</span><div style="flex:1;height:0.5px;background:#d0d0d0"></div></div>
|
|
<div style="display:flex;justify-content:center;gap:20px">
|
|
<div style="width:56px;height:56px;border-radius:16px;background:#fff;border:1px solid #e8e8e8;display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer">💬</div>
|
|
<div style="width:56px;height:56px;border-radius:16px;background:#fff;border:1px solid #e8e8e8;display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer">🐧</div>
|
|
<div style="width:56px;height:56px;border-radius:16px;background:#fff;border:1px solid #e8e8e8;display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer">🔴</div>
|
|
<div style="width:56px;height:56px;border-radius:16px;background:#fff;border:1px solid #e8e8e8;display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer">🍎</div></div>
|
|
<div style="text-align:center;margin-top:28px;padding-bottom:40px"><a href="#" style="font-size:14px;color:#667eea;text-decoration:none;font-weight:600">还没有账号？立即注册 →</a></div>
|
|
</div></div></div></div>
|
|
<div class="info"><div class="ic">
|
|
<h2>A. 微信极简风</h2>
|
|
<div><span class="tag tc">极简</span><span class="tag tc">高留白</span><span class="tag tm">白色系</span></div>
|
|
<p>参考微信登录的极简设计语言，大面积留白配合轻量输入框，信息层级清晰。适合追求简洁高效体验的工具类产品。</p>
|
|
<ul class="ft"><li>灰白渐变背景，柔和不刺眼</li><li>圆角白色输入框，聚焦时边框变色</li><li>渐变胶囊主按钮</li><li>第三方登录入口</li><li>登录/注册分离页面</li></ul>
|
|
</div></div></div>
|
|
|
|
<div class="gp" data-t="B">
|
|
<div class="phone"><div class="notch"></div><div class="scr">
|
|
<div style="width:100%;min-height:760px;background:linear-gradient(160deg,#667eea 0%,#764ba2 40%,#f093fb 100%);overflow:hidden;position:relative">
|
|
<div style="position:absolute;width:200px;height:200px;border-radius:50%;background:#a78bfa;filter:blur(80px);opacity:0.4;top:-40px;right:-60px"></div>
|
|
<div style="position:absolute;width:160px;height:160px;border-radius:50%;background:#f472b6;filter:blur(80px);opacity:0.4;bottom:100px;left:-50px"></div>
|
|
<div style="position:relative;z-index:2;padding:60px 28px 40px;min-height:760px;display:flex;flex-direction:column">
|
|
<div style="margin-bottom:auto"><h1 style="font-size:32px;font-weight:800;color:#fff;line-height:1.2;margin-bottom:8px">欢迎回来<br>可乐用户 ☕</h1><p style="font-size:14px;color:rgba(255,255,255,0.7)">登录即可同步数据，体验全部功能</p></div>
|
|
<div style="background:rgba(255,255,255,0.95);backdrop-filter:blur(20px);border-radius:28px;padding:28px 24px;box-shadow:0 20px 60px rgba(0,0,0,0.15)">
|
|
<div style="display:flex;background:rgba(102,126,234,0.08);border-radius:14px;padding:4px;margin-bottom:24px">
|
|
<button onclick="gSw('login',this)" style="flex:1;padding:11px 0;text-align:center;font-size:14px;font-weight:600;border-radius:11px;border:none;cursor:pointer;background:#fff;color:#667eea;box-shadow:0 2px 8px rgba(0,0,0,0.06);font-family:inherit">登录</button>
|
|
<button onclick="gSw('register',this)" style="flex:1;padding:11px 0;text-align:center;font-size:14px;font-weight:600;border-radius:11px;border:none;cursor:pointer;background:transparent;color:#999;font-family:inherit">注册</button></div>
|
|
<div id="g-login">
|
|
<div style="display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:#f8f9fa;border:1.5px solid transparent;margin-bottom:14px"><span style="font-size:18px;opacity:0.5">📧</span><input type="email" placeholder="邮箱地址" style="flex:1;border:none;outline:none;background:none;font-size:15px;color:#333;font-family:inherit"></div>
|
|
<div style="display:flex;gap:10px;align-items:center"><div style="display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:#f8f9fa;border:1.5px solid transparent;flex:1"><span style="font-size:18px;opacity:0.5">🔑</span><input type="password" placeholder="密码" style="flex:1;border:none;outline:none;background:none;font-size:15px;color:#333;font-family:inherit"><button style="background:none;border:none;color:#ccc;cursor:pointer;font-size:16px">👁</button></div></div>
|
|
<div style="display:flex;justify-content:flex-end;margin:4px 0 20px"><a href="#" style="font-size:13px;color:#667eea;text-decoration:none;font-weight:500">忘记密码？</a></div>
|
|
<button style="width:100%;height:52px;border-radius:16px;border:none;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:0 6px 20px rgba(102,126,234,0.35)">登 录</button></div>
|
|
<div id="g-register" style="display:none">
|
|
<div style="display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:#f8f9fa;border:1.5px solid transparent;margin-bottom:14px"><span style="font-size:18px;opacity:0.5">👤</span><input type="text" placeholder="用户名" style="flex:1;border:none;outline:none;background:none;font-size:15px;color:#333;font-family:inherit"></div>
|
|
<div style="display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:#f8f9fa;border:1.5px solid transparent;margin-bottom:14px"><span style="font-size:18px;opacity:0.5">📧</span><input type="email" placeholder="邮箱地址" style="flex:1;border:none;outline:none;background:none;font-size:15px;color:#333;font-family:inherit"></div>
|
|
<div style="display:flex;gap:10px;align-items:center"><div style="display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:#f8f9fa;border:1.5px solid transparent;flex:1"><span style="font-size:18px;opacity:0.5">📱</span><input type="text" placeholder="验证码" maxlength="6" style="flex:1;border:none;outline:none;background:none;font-size:15px;color:#333;font-family:inherit"></div><button onclick="gCd(this)" style="height:48px;padding:0 16px;border-radius:12px;border:1.5px solid rgba(102,126,234,0.3);background:rgba(102,126,234,0.06);color:#667eea;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap">获取验证码</button></div>
|
|
<div style="display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:#f8f9fa;border:1.5px solid transparent;margin:14px 0"><span style="font-size:18px;opacity:0.5">🔒</span><input type="password" placeholder="设置密码（至少6位）" style="flex:1;border:none;outline:none;background:none;font-size:15px;color:#333;font-family:inherit"><button style="background:none;border:none;color:#ccc;cursor:pointer;font-size:16px">👁</button></div>
|
|
<div style="display:flex;align-items:flex-start;gap:8px;margin-top:16px;font-size:11px;color:#bbb;line-height:1.5"><input type="checkbox" checked style="accent-color:#667eea;margin-top:3px"><span>注册即同意 <a href="#" style="color:#888;text-decoration:none">用户协议</a> 和 <a href="#" style="color:#888;text-decoration:none">隐私政策</a></span></div>
|
|
<button style="width:100%;height:52px;border-radius:16px;border:none;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:0 6px 20px rgba(102,126,234,0.35);margin-top:12px">注 册</button></div>
|
|
<div style="display:flex;align-items:center;gap:14px;margin:22px 0 18px"><div style="flex:1;height:0.5px;background:#e0e0e0"></div><span style="font-size:12px;color:#bbb">其他方式</span><div style="flex:1;height:0.5px;background:#e0e0e0"></div></div>
|
|
<div style="display:flex;justify-content:center;gap:16px">
|
|
<div style="width:50px;height:50px;border-radius:14px;background:#f5f5f5;border:1px solid #eee;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer">💬</div>
|
|
<div style="width:50px;height:50px;border-radius:14px;background:#f5f5f5;border:1px solid #eee;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer">🐧</div>
|
|
<div style="width:50px;height:50px;border-radius:14px;background:#f5f5f5;border:1px solid #eee;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer">🍎</div></div>
|
|
</div></div></div></div>
|
|
<div class="info"><div class="ic">
|
|
<h2>B. 渐变卡片风</h2>
|
|
<div><span class="tag tg">渐变</span><span class="tag tg">毛玻璃</span><span class="tag tc">现代</span></div>
|
|
<p>紫色渐变背景 + 毛玻璃卡片，类似支付宝/抖音的视觉风格。底部卡片承载表单，上方留出品牌空间，视觉冲击力强。</p>
|
|
<ul class="ft"><li>全屏渐变背景 + 模糊光球装饰</li><li>毛玻璃（glassmorphism）卡片容器</li><li>登录/注册 Tab 切换，同卡片内完成</li><li>圆角输入框带 focus 动效</li><li>第三方登录 + 协议勾选</li></ul>
|
|
</div></div></div>
|
|
|
|
<div class="gp" data-t="C">
|
|
<div class="phone"><div class="notch"></div><div class="scr">
|
|
<div style="width:100%;min-height:760px;background:#0a0a0f;overflow:hidden;position:relative">
|
|
<div style="position:absolute;width:300px;height:300px;border-radius:50%;background:#ef4444;filter:blur(100px);opacity:0.15;top:-80px;left:-60px"></div>
|
|
<div style="position:absolute;width:300px;height:300px;border-radius:50%;background:#667eea;filter:blur(100px);opacity:0.15;bottom:80px;right:-80px"></div>
|
|
<div style="position:relative;z-index:2;height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:40px">
|
|
<div style="font-size:64px;filter:drop-shadow(0 4px 30px rgba(239,68,68,0.4));margin-bottom:20px;animation:dp 3s ease-in-out infinite">🥤</div>
|
|
<h1 style="font-size:30px;font-weight:800;color:#fff;letter-spacing:1px;margin-bottom:8px">可乐</h1>
|
|
<p style="font-size:13px;color:rgba(255,255,255,0.4);font-weight:300;letter-spacing:0.5px">ChunYu · 发现更多精彩</p></div>
|
|
<div style="position:relative;z-index:2;background:#fff;border-radius:28px 28px 0 0;padding:12px 28px 40px;min-height:440px">
|
|
<div style="width:36px;height:4px;border-radius:2px;background:#e5e5e5;margin:0 auto 20px"></div>
|
|
<div style="display:flex;background:#f5f5f5;border-radius:14px;padding:4px;margin-bottom:22px">
|
|
<button onclick="dSw('login',this)" style="flex:1;padding:11px 0;text-align:center;font-size:14px;font-weight:600;border-radius:11px;border:none;cursor:pointer;background:#fff;color:#111;box-shadow:0 2px 8px rgba(0,0,0,0.06);font-family:inherit">登录</button>
|
|
<button onclick="dSw('register',this)" style="flex:1;padding:11px 0;text-align:center;font-size:14px;font-weight:600;border-radius:11px;border:none;cursor:pointer;background:transparent;color:#999;font-family:inherit">注册</button></div>
|
|
<div id="d-login">
|
|
<div style="display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:#f7f7f7;border:1.5px solid transparent;margin-bottom:14px"><span style="font-size:18px">👤</span><input type="text" placeholder="手机号 / 邮箱" style="flex:1;border:none;outline:none;background:none;font-size:15px;color:#111;font-family:inherit"></div>
|
|
<div style="display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:#f7f7f7;border:1.5px solid transparent;margin-bottom:14px"><span style="font-size:18px">🔒</span><input type="password" placeholder="密码" style="flex:1;border:none;outline:none;background:none;font-size:15px;color:#111;font-family:inherit"><button style="background:none;border:none;color:#ccc;cursor:pointer;font-size:16px">👁</button></div>
|
|
<div style="display:flex;justify-content:flex-end;margin:4px 0 18px"><a href="#" style="font-size:13px;color:#ef4444;text-decoration:none;font-weight:500">忘记密码？</a></div>
|
|
<button style="width:100%;padding:15px;border:none;border-radius:14px;background:linear-gradient(135deg,#ef4444,#f97316);color:#fff;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:0 6px 20px rgba(239,68,68,0.3)">登录</button></div>
|
|
<div id="d-register" style="display:none">
|
|
<div style="display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:#f7f7f7;border:1.5px solid transparent;margin-bottom:14px"><span style="font-size:18px">👤</span><input type="text" placeholder="用户名" style="flex:1;border:none;outline:none;background:none;font-size:15px;color:#111;font-family:inherit"></div>
|
|
<div style="display:flex;gap:10px;align-items:center"><div style="display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:#f7f7f7;border:1.5px solid transparent;flex:1"><span style="font-size:18px">📱</span><input type="text" placeholder="验证码" maxlength="6" style="flex:1;border:none;outline:none;background:none;font-size:15px;color:#111;font-family:inherit"></div><button onclick="dCd(this)" style="height:48px;padding:0 16px;border-radius:12px;border:none;background:linear-gradient(135deg,#ef4444,#f97316);color:#fff;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap">获取验证码</button></div>
|
|
<div style="display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:#f7f7f7;border:1.5px solid transparent;margin:14px 0"><span style="font-size:18px">🔒</span><input type="password" placeholder="设置密码（至少6位）" style="flex:1;border:none;outline:none;background:none;font-size:15px;color:#111;font-family:inherit"><button style="background:none;border:none;color:#ccc;cursor:pointer;font-size:16px">👁</button></div>
|
|
<div style="display:flex;align-items:flex-start;gap:8px;margin:16px 0 0;font-size:11px;color:#bbb;line-height:1.5"><input type="checkbox" checked style="accent-color:#ef4444;margin-top:3px"><span>注册即同意 <a href="#" style="color:#999;text-decoration:none">用户协议</a> 和 <a href="#" style="color:#999;text-decoration:none">隐私政策</a></span></div>
|
|
<button style="width:100%;padding:15px;border:none;border-radius:14px;background:linear-gradient(135deg,#ef4444,#f97316);color:#fff;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:0 6px 20px rgba(239,68,68,0.3);margin-top:14px">注册</button></div>
|
|
<div style="display:flex;align-items:center;gap:16px;margin:22px 0 18px"><div style="flex:1;height:1px;background:#eee"></div><span style="font-size:12px;color:#ccc">其他登录方式</span><div style="flex:1;height:1px;background:#eee"></div></div>
|
|
<div style="display:flex;justify-content:center;gap:14px">
|
|
<div style="width:52px;height:52px;border-radius:16px;border:1.5px solid #eee;background:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer">💬</div>
|
|
<div style="width:52px;height:52px;border-radius:16px;border:1.5px solid #eee;background:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer">🐧</div>
|
|
<div style="width:52px;height:52px;border-radius:16px;border:1.5px solid #eee;background:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer">🔴</div>
|
|
<div style="width:52px;height:52px;border-radius:16px;border:1.5px solid #eee;background:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer">🍎</div></div>
|
|
</div></div></div></div>
|
|
<div class="info"><div class="ic">
|
|
<h2>C. 暗黑沉浸风</h2>
|
|
<div><span class="tag td">暗黑</span><span class="tag td">沉浸式</span><span class="tag tw">橙红渐变</span></div>
|
|
<p>上半部暗色沉浸式品牌展示 + 下半部白色底部弹出卡片。参考抖音/小红书的登录页设计，品牌感强，用户进入时有仪式感。</p>
|
|
<ul class="ft"><li>暗色全屏背景 + 发光色块装饰</li><li>底部弹出式（Bottom Sheet）白色卡片</li><li>品牌 icon 呼吸动画</li><li>橙红渐变主按钮，视觉冲击力</li><li>Tab 切换登录/注册，同页完成</li></ul>
|
|
</div></div></div>
|
|
|
|
<div class="gp" data-t="D">
|
|
<div class="phone"><div class="notch"></div><div class="scr">
|
|
<div style="width:100%;min-height:760px;background:#f5f5f7">
|
|
<div style="padding:80px 32px 0;text-align:center">
|
|
<div style="width:72px;height:72px;border-radius:20px;background:#1d1d1f;display:inline-flex;align-items:center;justify-content:center;margin-bottom:24px;box-shadow:0 4px 20px rgba(0,0,0,0.12);font-size:32px">🥤</div>
|
|
<h1 style="font-size:28px;font-weight:800;color:#1d1d1f;letter-spacing:-0.5px;margin-bottom:8px">可乐</h1>
|
|
<p style="font-size:14px;color:#86868b;line-height:1.5">登录以同步您的数据</p></div>
|
|
<div style="padding:40px 28px 32px">
|
|
<div style="display:flex;border-bottom:1px solid #e5e5ea;margin-bottom:20px">
|
|
<button onclick="aSw('pwd',this)" style="flex:1;text-align:center;font-size:14px;padding:12px 0;border:none;border-bottom:2px solid #1d1d1f;background:none;cursor:pointer;color:#1d1d1f;font-weight:700;font-family:inherit">密码登录</button>
|
|
<button onclick="aSw('email',this)" style="flex:1;text-align:center;font-size:14px;padding:12px 0;border:none;border-bottom:2px solid transparent;background:none;cursor:pointer;color:#86868b;font-weight:500;font-family:inherit">验证码登录</button></div>
|
|
<div id="a-pwd">
|
|
<input type="text" placeholder="手机号 / 邮箱" style="width:100%;height:52px;border-radius:12px;border:1.5px solid #e5e5ea;background:#fff;padding:0 16px;font-size:16px;color:#1d1d1f;outline:none;margin-bottom:12px;font-family:inherit">
|
|
<input type="password" placeholder="密码" style="width:100%;height:52px;border-radius:12px;border:1.5px solid #e5e5ea;background:#fff;padding:0 16px;font-size:16px;color:#1d1d1f;outline:none;margin-bottom:12px;font-family:inherit">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;margin:12px 0 20px">
|
|
<label style="display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:#86868b;font-size:13px"><input type="checkbox" style="accent-color:#1d1d1f"> 记住我</label>
|
|
<button style="background:none;border:none;color:#667eea;font-size:14px;cursor:pointer;font-weight:500;font-family:inherit">忘记密码？</button></div>
|
|
<button style="width:100%;height:54px;border-radius:14px;border:none;background:#1d1d1f;color:#fff;font-size:17px;font-weight:600;cursor:pointer;font-family:inherit;letter-spacing:0.2px">登 录</button>
|
|
<button style="width:100%;height:54px;border-radius:14px;border:1.5px solid #e5e5ea;background:#fff;color:#1d1d1f;font-size:15px;font-weight:600;cursor:pointer;margin-top:12px;font-family:inherit">创建新账号</button></div>
|
|
<div id="a-email" style="display:none">
|
|
<input type="email" placeholder="邮箱地址" style="width:100%;height:52px;border-radius:12px;border:1.5px solid #e5e5ea;background:#fff;padding:0 16px;font-size:16px;color:#1d1d1f;outline:none;margin-bottom:12px;font-family:inherit">
|
|
<div style="display:flex;gap:10px;align-items:center">
|
|
<input type="text" placeholder="验证码" maxlength="6" style="flex:1;height:52px;border-radius:12px;border:1.5px solid #e5e5ea;background:#fff;padding:0 16px;font-size:16px;color:#1d1d1f;outline:none;font-family:inherit">
|
|
<button onclick="aCd(this)" style="flex-shrink:0;height:52px;padding:0 18px;border-radius:12px;border:1.5px solid #e5e5ea;background:#fafafa;color:#667eea;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap">发送验证码</button></div>
|
|
<div style="margin-top:16px"><button style="width:100%;height:54px;border-radius:14px;border:none;background:#1d1d1f;color:#fff;font-size:17px;font-weight:600;cursor:pointer;font-family:inherit;letter-spacing:0.2px">登 录</button></div>
|
|
<button style="width:100%;height:54px;border-radius:14px;border:1.5px solid #e5e5ea;background:#fff;color:#1d1d1f;font-size:15px;font-weight:600;cursor:pointer;margin-top:12px;font-family:inherit">创建新账号</button></div>
|
|
</div>
|
|
<div style="display:flex;align-items:center;gap:16px;margin:0 32px 24px">
|
|
<div style="flex:1;height:0.5px;background:#d2d2d7"></div>
|
|
<span style="font-size:13px;color:#86868b;white-space:nowrap;font-weight:500">或通过以下方式登录</span>
|
|
<div style="flex:1;height:0.5px;background:#d2d2d7"></div></div>
|
|
<div style="display:flex;justify-content:center;gap:16px;padding:0 28px">
|
|
<div style="display:flex;flex-direction:column;align-items:center;gap:6px"><div style="width:52px;height:52px;border-radius:16px;background:#fff;border:1.5px solid #e5e5ea;display:flex;align-items:center;justify-content:center;font-size:22px">💬</div><span style="font-size:11px;color:#86868b">微信</span></div>
|
|
<div style="display:flex;flex-direction:column;align-items:center;gap:6px"><div style="width:52px;height:52px;border-radius:16px;background:#fff;border:1.5px solid #e5e5ea;display:flex;align-items:center;justify-content:center;font-size:22px">🐧</div><span style="font-size:11px;color:#86868b">QQ</span></div>
|
|
<div style="display:flex;flex-direction:column;align-items:center;gap:6px"><div style="width:52px;height:52px;border-radius:16px;background:#fff;border:1.5px solid #e5e5ea;display:flex;align-items:center;justify-content:center;font-size:22px">🍎</div><span style="font-size:11px;color:#86868b">Apple</span></div>
|
|
<div style="display:flex;flex-direction:column;align-items:center;gap:6px"><div style="width:52px;height:52px;border-radius:16px;background:#fff;border:1.5px solid #e5e5ea;display:flex;align-items:center;justify-content:center;font-size:22px">🔴</div><span style="font-size:11px;color:#86868b">微博</span></div></div>
|
|
<div style="text-align:center;margin-top:20px;font-size:11px;color:#bbb;line-height:1.6">登录/注册即表示同意 <a href="#" style="color:#999;text-decoration:none">用户协议</a> 和 <a href="#" style="color:#999;text-decoration:none">隐私政策</a></div>
|
|
</div></div></div>
|
|
<div class="info"><div class="ic">
|
|
<h2>D. Apple 极简风</h2>
|
|
<div><span class="tag tm">极简</span><span class="tag tc">黑白</span><span class="tag tc">高端</span></div>
|
|
<p>参考 Apple 登录页的极致克制设计。黑白为主色调，排版疏朗，交互微动效。适合面向中高端用户的工具类产品。</p>
|
|
<ul class="ft"><li>Apple 标志性灰色背景 #f5f5f7</li><li>密码登录 / 验证码登录 子 Tab 切换</li><li>黑色主按钮 + 白色 Ghost 按钮</li><li>"记住我" 复选框</li><li>社交登录带图标+标签</li></ul>
|
|
</div></div></div>
|
|
|
|
<div class="gp" data-t="E">
|
|
<div class="phone"><div class="notch"></div><div class="scr">
|
|
<div style="width:100%;min-height:760px;background:linear-gradient(170deg,#ffecd2 0%,#fcb69f 50%,#ff9a9e 100%);overflow:hidden;position:relative">
|
|
<div style="position:absolute;width:180px;height:180px;border-radius:50%;background:#fff;opacity:0.3;top:-30px;right:-40px"></div>
|
|
<div style="position:absolute;width:140px;height:140px;border-radius:50%;background:#fff;opacity:0.3;bottom:120px;left:-50px"></div>
|
|
<div style="position:relative;z-index:2;padding:60px 28px 40px;min-height:760px;display:flex;flex-direction:column">
|
|
<div style="text-align:center;margin-bottom:36px;padding-top:20px">
|
|
<div style="font-size:56px;display:inline-block;margin-bottom:16px;animation:wbn 2s ease-in-out infinite">🥤</div>
|
|
<h1 style="font-size:28px;font-weight:800;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,0.1);margin-bottom:8px">可乐</h1>
|
|
<p style="font-size:14px;color:rgba(255,255,255,0.85)">温暖每一天，从登录开始</p></div>
|
|
<div style="background:#fff;border-radius:24px;padding:28px 24px;box-shadow:0 12px 40px rgba(0,0,0,0.08);flex:1">
|
|
<div style="display:flex;background:#f8f8f8;border-radius:14px;padding:4px;margin-bottom:24px">
|
|
<button onclick="wrSw('login',this)" style="flex:1;padding:11px 0;text-align:center;font-size:14px;font-weight:600;border-radius:11px;border:none;cursor:pointer;background:#fff;color:#e65100;box-shadow:0 2px 8px rgba(0,0,0,0.06);font-family:inherit">登录</button>
|
|
<button onclick="wrSw('register',this)" style="flex:1;padding:11px 0;text-align:center;font-size:14px;font-weight:600;border-radius:11px;border:none;cursor:pointer;background:transparent;color:#999;font-family:inherit">注册</button></div>
|
|
<div id="wr-login">
|
|
<div style="display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:#fafafa;border:1.5px solid transparent;margin-bottom:14px"><span style="font-size:18px;opacity:0.5">👤</span><input type="text" placeholder="手机号 / 邮箱" style="flex:1;border:none;outline:none;background:none;font-size:15px;color:#333;font-family:inherit"></div>
|
|
<div style="display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:#fafafa;border:1.5px solid transparent;margin-bottom:14px"><span style="font-size:18px;opacity:0.5">🔒</span><input type="password" placeholder="密码" style="flex:1;border:none;outline:none;background:none;font-size:15px;color:#333;font-family:inherit"><button style="background:none;border:none;color:#ccc;cursor:pointer;font-size:16px">👁</button></div>
|
|
<div style="display:flex;justify-content:flex-end;margin:4px 0 18px"><a href="#" style="font-size:13px;color:#f97316;text-decoration:none;font-weight:500">忘记密码？</a></div>
|
|
<button style="width:100%;padding:15px;border:none;border-radius:14px;background:linear-gradient(135deg,#f97316,#ef4444);color:#fff;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:0 6px 20px rgba(249,115,22,0.35)">登录</button></div>
|
|
<div id="wr-register" style="display:none">
|
|
<div style="display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:#fafafa;border:1.5px solid transparent;margin-bottom:14px"><span style="font-size:18px;opacity:0.5">👤</span><input type="text" placeholder="用户名" style="flex:1;border:none;outline:none;background:none;font-size:15px;color:#333;font-family:inherit"></div>
|
|
<div style="display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:#fafafa;border:1.5px solid transparent;margin-bottom:14px"><span style="font-size:18px;opacity:0.5">📧</span><input type="email" placeholder="邮箱地址" style="flex:1;border:none;outline:none;background:none;font-size:15px;color:#333;font-family:inherit"></div>
|
|
<div style="display:flex;gap:10px;align-items:center"><div style="display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:#fafafa;border:1.5px solid transparent;flex:1"><span style="font-size:18px;opacity:0.5">📱</span><input type="text" placeholder="验证码" maxlength="6" style="flex:1;border:none;outline:none;background:none;font-size:15px;color:#333;font-family:inherit"></div><button onclick="wrCd(this)" style="height:48px;padding:0 16px;border-radius:12px;border:none;background:linear-gradient(135deg,#f97316,#ef4444);color:#fff;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap">获取验证码</button></div>
|
|
<div style="display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:#fafafa;border:1.5px solid transparent;margin:14px 0"><span style="font-size:18px;opacity:0.5">🔒</span><input type="password" placeholder="设置密码（至少6位）" style="flex:1;border:none;outline:none;background:none;font-size:15px;color:#333;font-family:inherit"><button style="background:none;border:none;color:#ccc;cursor:pointer;font-size:16px">👁</button></div>
|
|
<div style="display:flex;align-items:flex-start;gap:8px;margin:16px 0 0;font-size:11px;color:#bbb;line-height:1.5"><input type="checkbox" checked style="accent-color:#f97316;margin-top:3px"><span>注册即同意 <a href="#" style="color:#888;text-decoration:none">用户协议</a> 和 <a href="#" style="color:#888;text-decoration:none">隐私政策</a></span></div>
|
|
<button style="width:100%;padding:15px;border:none;border-radius:14px;background:linear-gradient(135deg,#f97316,#ef4444);color:#fff;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:0 6px 20px rgba(249,115,22,0.35);margin-top:14px">注册</button></div>
|
|
<div style="display:flex;align-items:center;gap:16px;margin:22px 0 18px"><div style="flex:1;height:1px;background:#eee"></div><span style="font-size:12px;color:#ccc">其他登录方式</span><div style="flex:1;height:1px;background:#eee"></div></div>
|
|
<div style="display:flex;justify-content:center;gap:14px">
|
|
<div style="width:52px;height:52px;border-radius:16px;border:1.5px solid #eee;background:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer">💬</div>
|
|
<div style="width:52px;height:52px;border-radius:16px;border:1.5px solid #eee;background:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer">🐧</div>
|
|
<div style="width:52px;height:52px;border-radius:16px;border:1.5px solid #eee;background:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer">🍎</div>
|
|
<div style="width:52px;height:52px;border-radius:16px;border:1.5px solid #eee;background:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer">🔴</div></div></div>
|
|
<div style="text-align:center;margin-top:20px;padding-bottom:40px"><a href="#" style="font-size:14px;color:#f97316;text-decoration:none;font-weight:600">新用户？点击注册 →</a></div>
|
|
</div></div></div></div>
|
|
<div class="info"><div class="ic">
|
|
<h2>E. 暖色活力风</h2>
|
|
<div><span class="tag tw">暖色</span><span class="tag tg">渐变</span><span class="tag tc">活力</span></div>
|
|
<p>珊瑚粉 + 蜜桃色暖系渐变，参考小红书/美团的设计风格。温馨有活力，适合生活服务类和社区类产品。</p>
|
|
<ul class="ft"><li>蜜桃粉暖色渐变背景</li><li>白色卡片承载表单</li><li>橙红渐变主按钮</li><li>品牌 icon 弹跳动画</li><li>Tab 切换登录/注册</li></ul>
|
|
</div></div></div>
|
|
</div>
|
|
<script>
|
|
function sw(t){document.querySelectorAll('.gp').forEach(function(g){g.classList.remove('show')});var el=document.querySelector('[data-t="'+t+'"]');if(el)el.classList.add('show');document.querySelectorAll('.tab').forEach(function(b){b.classList.toggle('active',b.textContent.charAt(0)===t)})}
|
|
function gSw(t,b){document.querySelectorAll('[onclick^="gSw"]').forEach(function(x){x.style.background='transparent';x.style.color='#999';x.style.boxShadow='none'});b.style.background='#fff';b.style.color='#667eea';b.style.boxShadow='0 2px 8px rgba(0,0,0,0.06)';document.getElementById('g-login').style.display=t==='login'?'block':'none';document.getElementById('g-register').style.display=t==='register'?'block':'none'}
|
|
function gCd(b){var s=60;b.disabled=true;var tk=function(){b.textContent=s+'s';if(--s<0){b.disabled=false;b.textContent='获取验证码'}};tk();setInterval(tk,1000)}
|
|
function dSw(t,b){document.querySelectorAll('[onclick^="dSw"]').forEach(function(x){x.style.background='transparent';x.style.color='#999';x.style.boxShadow='none'});b.style.background='#fff';b.style.color='#111';b.style.boxShadow='0 2px 8px rgba(0,0,0,0.06)';document.getElementById('d-login').style.display=t==='login'?'block':'none';document.getElementById('d-register').style.display=t==='register'?'block':'none'}
|
|
function dCd(b){var s=60;b.disabled=true;var tk=function(){b.textContent=s+'s';if(--s<0){b.disabled=false;b.textContent='获取验证码'}};tk();setInterval(tk,1000)}
|
|
function aSw(t,b){document.querySelectorAll('[onclick^="aSw"]').forEach(function(x){x.style.borderBottomColor='transparent';x.style.color='#86868b';x.style.fontWeight='500'});b.style.borderBottomColor='#1d1d1f';b.style.color='#1d1d1f';b.style.fontWeight='700';document.getElementById('a-pwd').style.display=t==='pwd'?'block':'none';document.getElementById('a-email').style.display=t==='email'?'block':'none'}
|
|
function aCd(b){var s=60;b.disabled=true;var tk=function(){b.textContent=s+'s';if(--s<0){b.disabled=false;b.textContent='发送验证码'}};tk();setInterval(tk,1000)}
|
|
function wrSw(t,b){document.querySelectorAll('[onclick^="wrSw"]').forEach(function(x){x.style.background='transparent';x.style.color='#999';x.style.boxShadow='none'});b.style.background='#fff';b.style.color='#e65100';b.style.boxShadow='0 2px 8px rgba(0,0,0,0.06)';document.getElementById('wr-login').style.display=t==='login'?'block':'none';document.getElementById('wr-register').style.display=t==='register'?'block':'none'}
|
|
function wrCd(b){var s=60;b.disabled=true;var tk=function(){b.textContent=s+'s';if(--s<0){b.disabled=false;b.textContent='获取验证码'}};tk();setInterval(tk,1000)}
|
|
</script>
|
|
</body></html>
|