480 lines
12 KiB
HTML
480 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>闲言 Xianyan — Google Play 置顶大图</title>
|
|
<style>
|
|
/* ============================================================
|
|
* 闲言 APP — Google Play Feature Graphic
|
|
* 尺寸: 1024 x 500 px (PNG/JPEG, ≤15MB)
|
|
* 设计: 白色主题 + iOS 风格 + 毛玻璃效果
|
|
* 创建时间: 2026-06-24
|
|
* 更新时间: 2026-06-24
|
|
* 上次更新: 主题色由紫色渐变改为白色主题，紫色作为点缀色
|
|
* ============================================================ */
|
|
|
|
/* ---- 设计令牌 (与项目 app_colors.dart 对齐) ---- */
|
|
:root {
|
|
--primary: #6C63FF; /* 主色 (点缀用) */
|
|
--primary-light: #8B83FF;
|
|
--primary-dark: #4A42E0;
|
|
--secondary: #FF6B6B; /* 辅助色 珊瑚红 */
|
|
--accent: #4ECDC4; /* 强调色 青色 */
|
|
--ios-blue: #007AFF;
|
|
--ios-pink: #FF2D55;
|
|
--ios-orange: #FF9500;
|
|
--ios-yellow: #FFCC00;
|
|
--ios-mint: #30D158;
|
|
|
|
--text-primary: #1A1A2E; /* 深色文字 */
|
|
--text-secondary: #6B7280;
|
|
--text-tertiary: #9CA3AF;
|
|
--text-inverse: #FFFFFF;
|
|
|
|
--bg-primary: #FFFFFF;
|
|
--bg-secondary: #FAFAFA;
|
|
--bg-card: #FFFFFF;
|
|
|
|
--radius-sm: 8px;
|
|
--radius-md: 12px;
|
|
--radius-lg: 20px;
|
|
--radius-xl: 28px;
|
|
|
|
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
|
|
--shadow-md: 0 8px 24px rgba(108, 99, 255, 0.10);
|
|
--shadow-lg: 0 16px 40px rgba(74, 66, 224, 0.12);
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body {
|
|
width: 1024px;
|
|
height: 500px;
|
|
overflow: hidden;
|
|
font-family: 'Inter', -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* ---- 画布容器 (白色主题) ---- */
|
|
.canvas {
|
|
position: relative;
|
|
width: 1024px;
|
|
height: 500px;
|
|
background:
|
|
radial-gradient(circle at 12% 18%, rgba(139, 131, 255, 0.18) 0%, transparent 40%),
|
|
radial-gradient(circle at 88% 82%, rgba(78, 205, 196, 0.15) 0%, transparent 45%),
|
|
radial-gradient(circle at 50% 50%, rgba(255, 107, 107, 0.06) 0%, transparent 55%),
|
|
linear-gradient(135deg, #FFFFFF 0%, #FAFAFF 50%, #F5F5FF 100%);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ---- 装饰光斑 (淡彩氛围) ---- */
|
|
.blob {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(80px);
|
|
pointer-events: none;
|
|
}
|
|
.blob-1 {
|
|
width: 340px; height: 340px;
|
|
background: radial-gradient(circle, rgba(108, 99, 255, 0.35) 0%, transparent 70%);
|
|
top: -100px; right: -80px;
|
|
}
|
|
.blob-2 {
|
|
width: 280px; height: 280px;
|
|
background: radial-gradient(circle, rgba(78, 205, 196, 0.30) 0%, transparent 70%);
|
|
bottom: -120px; left: 28%;
|
|
}
|
|
.blob-3 {
|
|
width: 220px; height: 220px;
|
|
background: radial-gradient(circle, rgba(255, 204, 0, 0.20) 0%, transparent 70%);
|
|
top: 35%; right: 22%;
|
|
}
|
|
|
|
/* ---- 网格纹理 (细微质感) ---- */
|
|
.grid-texture {
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image:
|
|
linear-gradient(rgba(108, 99, 255, 0.03) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(108, 99, 255, 0.03) 1px, transparent 1px);
|
|
background-size: 40px 40px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* ---- 主内容布局 ---- */
|
|
.content {
|
|
position: relative;
|
|
z-index: 2;
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 48px 56px;
|
|
align-items: center;
|
|
gap: 40px;
|
|
}
|
|
|
|
/* ---- 左侧: 品牌区 ---- */
|
|
.brand {
|
|
flex: 0 0 440px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
}
|
|
|
|
.brand-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 18px;
|
|
}
|
|
|
|
/* ---- App 图标 (使用项目实际图标) ---- */
|
|
.app-icon {
|
|
width: 88px;
|
|
height: 88px;
|
|
border-radius: 22px;
|
|
background: #FFFFFF;
|
|
box-shadow:
|
|
0 10px 28px rgba(108, 99, 255, 0.40),
|
|
0 2px 8px rgba(0, 0, 0, 0.08);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.app-icon-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
/* ---- 标题区 ---- */
|
|
.title-block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
.title-cn {
|
|
font-size: 44px;
|
|
font-weight: 800;
|
|
color: var(--text-primary);
|
|
letter-spacing: 2px;
|
|
line-height: 1.1;
|
|
}
|
|
.title-en {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
color: var(--primary);
|
|
letter-spacing: 4px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* ---- 标语 ---- */
|
|
.tagline {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
margin-top: 4px;
|
|
}
|
|
.tagline-cn {
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
line-height: 1.3;
|
|
}
|
|
.tagline-cn .accent {
|
|
background: linear-gradient(135deg, #6C63FF 0%, #FF6B6B 100%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
.tagline-en {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: var(--text-secondary);
|
|
letter-spacing: 0.5px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
/* ---- 功能标签条 ---- */
|
|
.feature-pills {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-top: 10px;
|
|
}
|
|
.pill {
|
|
padding: 6px 14px;
|
|
border-radius: 100px;
|
|
background: rgba(108, 99, 255, 0.08);
|
|
border: 1px solid rgba(108, 99, 255, 0.20);
|
|
color: var(--primary-dark);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
|
|
/* ---- 右侧: 功能展示卡片群 ---- */
|
|
.showcase {
|
|
flex: 1;
|
|
height: 100%;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: 1fr 1fr;
|
|
gap: 14px;
|
|
padding: 8px 0;
|
|
}
|
|
|
|
/* ---- 白色毛玻璃功能卡 ---- */
|
|
.card {
|
|
position: relative;
|
|
border-radius: var(--radius-lg);
|
|
background: rgba(255, 255, 255, 0.72);
|
|
backdrop-filter: blur(20px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
|
border: 1px solid rgba(255, 255, 255, 0.90);
|
|
box-shadow:
|
|
0 8px 24px rgba(108, 99, 255, 0.10),
|
|
0 2px 8px rgba(0, 0, 0, 0.04),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
|
padding: 18px 18px 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
overflow: hidden;
|
|
}
|
|
.card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0;
|
|
height: 50%;
|
|
background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.card-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 22px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
|
|
}
|
|
.card-icon.purple { background: linear-gradient(135deg, #6C63FF, #8B83FF); }
|
|
.card-icon.coral { background: linear-gradient(135deg, #FF6B6B, #FF8E8E); }
|
|
.card-icon.cyan { background: linear-gradient(135deg, #4ECDC4, #6FE5DC); }
|
|
.card-icon.yellow { background: linear-gradient(135deg, #FF9500, #FFB84D); }
|
|
|
|
.card-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
.card-title-cn {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.card-title-en {
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
color: var(--text-tertiary);
|
|
letter-spacing: 0.8px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* ---- 卡片装饰小元素 ---- */
|
|
.card-deco {
|
|
position: absolute;
|
|
bottom: -20px;
|
|
right: -20px;
|
|
font-size: 80px;
|
|
opacity: 0.10;
|
|
transform: rotate(-15deg);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* ---- 底部信息条 ---- */
|
|
.footer-bar {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 36px;
|
|
background: linear-gradient(180deg, transparent, rgba(108, 99, 255, 0.06));
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 56px;
|
|
z-index: 3;
|
|
}
|
|
.footer-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
color: var(--text-secondary);
|
|
font-size: 11px;
|
|
letter-spacing: 1px;
|
|
font-weight: 500;
|
|
}
|
|
.footer-dot {
|
|
width: 4px; height: 4px;
|
|
border-radius: 50%;
|
|
background: var(--primary);
|
|
opacity: 0.5;
|
|
}
|
|
.footer-right {
|
|
color: var(--primary);
|
|
font-size: 11px;
|
|
letter-spacing: 1.5px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ---- 角标: 多语言 ---- */
|
|
.badge-lang {
|
|
position: absolute;
|
|
top: 24px;
|
|
right: 28px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
z-index: 3;
|
|
}
|
|
.lang-label {
|
|
padding: 4px 10px;
|
|
border-radius: 100px;
|
|
background: rgba(255, 255, 255, 0.80);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(108, 99, 255, 0.20);
|
|
color: var(--primary-dark);
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.3px;
|
|
box-shadow: 0 2px 8px rgba(108, 99, 255, 0.08);
|
|
white-space: nowrap;
|
|
}
|
|
.lang-label.more {
|
|
background: linear-gradient(135deg, #6C63FF, #8B83FF);
|
|
color: #FFFFFF;
|
|
border-color: transparent;
|
|
box-shadow: 0 2px 8px rgba(108, 99, 255, 0.30);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="canvas">
|
|
<!-- 装饰光斑 -->
|
|
<div class="blob blob-1"></div>
|
|
<div class="blob blob-2"></div>
|
|
<div class="blob blob-3"></div>
|
|
<div class="grid-texture"></div>
|
|
|
|
<!-- 多语言角标 -->
|
|
<div class="badge-lang">
|
|
<span class="lang-label">🌐 简体中文</span>
|
|
<span class="lang-label">繁體中文</span>
|
|
<span class="lang-label">English</span>
|
|
<span class="lang-label">日本語</span>
|
|
<span class="lang-label more">+10 种语言</span>
|
|
</div>
|
|
|
|
<!-- 主内容 -->
|
|
<div class="content">
|
|
<!-- 左侧品牌区 -->
|
|
<div class="brand">
|
|
<div class="brand-head">
|
|
<div class="app-icon">
|
|
<img class="app-icon-img" src="icon_88x88.png" alt="闲言">
|
|
</div>
|
|
<div class="title-block">
|
|
<div class="title-cn">闲言</div>
|
|
<div class="title-en">Xianyan</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tagline">
|
|
<div class="tagline-cn">灵感语录 · <span class="accent">更纯粹</span></div>
|
|
<div class="tagline-en">Pure inspiration · Daily quotes & wallpaper creation</div>
|
|
</div>
|
|
|
|
<div class="feature-pills">
|
|
<span class="pill">✨ 每日拾句</span>
|
|
<span class="pill">🎨 壁纸创作</span>
|
|
<span class="pill">📖 灵感语录</span>
|
|
<span class="pill">🔮 每日运势</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧功能展示 -->
|
|
<div class="showcase">
|
|
<!-- 每日卡片 -->
|
|
<div class="card">
|
|
<div class="card-icon purple">📅</div>
|
|
<div class="card-text">
|
|
<div class="card-title-cn">每日拾句</div>
|
|
<div class="card-title-en">Daily Quote</div>
|
|
</div>
|
|
<div class="card-deco">📖</div>
|
|
</div>
|
|
|
|
<!-- 壁纸创作 -->
|
|
<div class="card">
|
|
<div class="card-icon coral">🎨</div>
|
|
<div class="card-text">
|
|
<div class="card-title-cn">壁纸创作</div>
|
|
<div class="card-title-en">Wallpaper Studio</div>
|
|
</div>
|
|
<div class="card-deco">🖼️</div>
|
|
</div>
|
|
|
|
<!-- 发现工具 -->
|
|
<div class="card">
|
|
<div class="card-icon cyan">🔍</div>
|
|
<div class="card-text">
|
|
<div class="card-title-cn">发现工具</div>
|
|
<div class="card-title-en">Discover & Tools</div>
|
|
</div>
|
|
<div class="card-deco">🧭</div>
|
|
</div>
|
|
|
|
<!-- 每日运势 -->
|
|
<div class="card">
|
|
<div class="card-icon yellow">🔮</div>
|
|
<div class="card-text">
|
|
<div class="card-title-cn">每日运势</div>
|
|
<div class="card-title-en">Daily Fortune</div>
|
|
</div>
|
|
<div class="card-deco">⭐</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 底部信息条 -->
|
|
<div class="footer-bar">
|
|
<div class="footer-left">
|
|
<span>每日拾句</span>
|
|
<span class="footer-dot"></span>
|
|
<span>壁纸创作</span>
|
|
<span class="footer-dot"></span>
|
|
<span>灵感语录</span>
|
|
<span class="footer-dot"></span>
|
|
<span>笔记收藏</span>
|
|
<span class="footer-dot"></span>
|
|
<span>跨端同步</span>
|
|
</div>
|
|
<div class="footer-right">v6.6 · 微风暴出品</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|