1018 lines
27 KiB
HTML
1018 lines
27 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
|
<title>QuickCardSheet 可视化预览</title>
|
|
<style>
|
|
:root {
|
|
--primary: #6C63FF;
|
|
--primary-light: #8B83FF;
|
|
--accent: #4ECDC4;
|
|
--bg-dark: #0A0A1A;
|
|
--bg-sheet: rgba(28, 28, 40, 0.92);
|
|
--bg-card: rgba(255,255,255,0.06);
|
|
--bg-card-hover: rgba(255,255,255,0.10);
|
|
--text-primary: #F0F0F8;
|
|
--text-secondary: rgba(240,240,248,0.55);
|
|
--text-hint: rgba(240,240,248,0.3);
|
|
--border: rgba(255,255,255,0.08);
|
|
--glass-blur: 40px;
|
|
--radius-sm: 8px;
|
|
--radius-md: 14px;
|
|
--radius-lg: 20px;
|
|
--radius-xl: 28px;
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: -apple-system, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif;
|
|
background: var(--bg-dark);
|
|
color: var(--text-primary);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.phone-frame {
|
|
width: 390px;
|
|
height: 844px;
|
|
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 44px;
|
|
border: 3px solid rgba(255,255,255,0.1);
|
|
box-shadow: 0 40px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.home-content {
|
|
padding: 60px 24px 24px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.home-title {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
color: white;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.home-subtitle {
|
|
font-size: 14px;
|
|
color: rgba(255,255,255,0.5);
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.sentence-card {
|
|
background: rgba(255,255,255,0.06);
|
|
backdrop-filter: blur(20px);
|
|
border-radius: 20px;
|
|
padding: 28px 24px;
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.sentence-text {
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
color: white;
|
|
line-height: 1.6;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.sentence-author {
|
|
font-size: 13px;
|
|
color: rgba(255,255,255,0.4);
|
|
}
|
|
|
|
.home-buttons {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.home-btn {
|
|
flex: 1;
|
|
padding: 14px;
|
|
border-radius: 16px;
|
|
border: none;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.home-btn-create {
|
|
background: linear-gradient(135deg, var(--primary), var(--primary-light));
|
|
color: white;
|
|
box-shadow: 0 4px 16px rgba(108,99,255,0.3);
|
|
}
|
|
|
|
.home-btn-create:hover {
|
|
transform: scale(1.02);
|
|
box-shadow: 0 6px 24px rgba(108,99,255,0.4);
|
|
}
|
|
|
|
.home-btn-edit {
|
|
background: rgba(255,255,255,0.08);
|
|
color: white;
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
}
|
|
|
|
/* Sheet Overlay */
|
|
.sheet-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(0,0,0,0.5);
|
|
backdrop-filter: blur(8px);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.35s ease;
|
|
z-index: 10;
|
|
}
|
|
|
|
.sheet-overlay.active {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* Sheet */
|
|
.sheet {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
max-height: 88%;
|
|
background: var(--bg-sheet);
|
|
backdrop-filter: blur(var(--glass-blur));
|
|
-webkit-backdrop-filter: blur(var(--glass-blur));
|
|
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
|
|
border-top: 1px solid rgba(255,255,255,0.12);
|
|
transform: translateY(100%);
|
|
transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
|
|
z-index: 20;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sheet.active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.sheet-handle {
|
|
width: 36px;
|
|
height: 5px;
|
|
background: rgba(255,255,255,0.25);
|
|
border-radius: 3px;
|
|
margin: 10px auto 6px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.sheet-scroll {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 0 20px 16px;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.sheet-scroll::-webkit-scrollbar { display: none; }
|
|
|
|
/* Preview Area */
|
|
.preview-area {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.preview-card {
|
|
width: 100%;
|
|
aspect-ratio: 9/16;
|
|
max-height: 180px;
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
position: relative;
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
|
|
cursor: pointer;
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.preview-card:hover { transform: scale(1.01); }
|
|
|
|
.preview-bg {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(135deg, #6C63FF, #4A42E0, #3B82F6);
|
|
}
|
|
|
|
.preview-bar-top, .preview-bar-bottom {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
height: 28px;
|
|
background: rgba(255,255,255,0.08);
|
|
backdrop-filter: blur(12px);
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 12px;
|
|
font-size: 9px;
|
|
color: rgba(255,255,255,0.5);
|
|
}
|
|
|
|
.preview-bar-top { top: 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
|
|
.preview-bar-bottom { bottom: 0; border-top: 1px solid rgba(255,255,255,0.06); }
|
|
|
|
.preview-text {
|
|
position: absolute;
|
|
inset: 36px 20px 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: white;
|
|
line-height: 1.5;
|
|
text-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.preview-pinyin {
|
|
position: absolute;
|
|
top: 36px;
|
|
left: 20px;
|
|
right: 20px;
|
|
text-align: center;
|
|
font-size: 8px;
|
|
color: rgba(255,255,255,0.4);
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
/* Style Rows */
|
|
.style-row {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid var(--border);
|
|
gap: 12px;
|
|
}
|
|
|
|
.style-row-label {
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
width: 72px;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.style-row-label .emoji {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.style-row-content {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
scrollbar-width: none;
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.style-row-content::-webkit-scrollbar { display: none; }
|
|
|
|
/* Slider */
|
|
.slider-track {
|
|
flex: 1;
|
|
height: 4px;
|
|
background: rgba(255,255,255,0.1);
|
|
border-radius: 2px;
|
|
position: relative;
|
|
min-width: 120px;
|
|
}
|
|
|
|
.slider-fill {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
background: var(--primary);
|
|
border-radius: 2px;
|
|
transition: width 0.15s;
|
|
}
|
|
|
|
.slider-thumb {
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: white;
|
|
border-radius: 50%;
|
|
transform: translate(-50%, -50%);
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
|
cursor: grab;
|
|
transition: left 0.15s;
|
|
}
|
|
|
|
.slider-value {
|
|
font-size: 11px;
|
|
color: var(--text-hint);
|
|
min-width: 36px;
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* Chip selector */
|
|
.chip {
|
|
padding: 6px 14px;
|
|
border-radius: 10px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
border: 1px solid transparent;
|
|
background: var(--bg-card);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.chip.active {
|
|
background: rgba(108,99,255,0.2);
|
|
color: var(--primary-light);
|
|
border-color: rgba(108,99,255,0.4);
|
|
}
|
|
|
|
.chip:hover:not(.active) {
|
|
background: var(--bg-card-hover);
|
|
}
|
|
|
|
/* Color dots */
|
|
.color-dot {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
border: 2px solid transparent;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.color-dot.active {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 3px rgba(108,99,255,0.3);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.color-dot:hover:not(.active) {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Toggle Row */
|
|
.toggle-section {
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.toggle-section-title {
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 10px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.toggle-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 8px;
|
|
}
|
|
|
|
.toggle-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 8px 10px;
|
|
background: var(--bg-card);
|
|
border-radius: var(--radius-sm);
|
|
gap: 6px;
|
|
}
|
|
|
|
.toggle-label {
|
|
font-size: 12px;
|
|
color: var(--text-primary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.toggle-switch {
|
|
width: 36px;
|
|
height: 22px;
|
|
border-radius: 11px;
|
|
background: rgba(255,255,255,0.15);
|
|
position: relative;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.toggle-switch.on {
|
|
background: var(--primary);
|
|
}
|
|
|
|
.toggle-switch::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 50%;
|
|
background: white;
|
|
top: 2px;
|
|
left: 2px;
|
|
transition: transform 0.2s;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.toggle-switch.on::after {
|
|
transform: translateX(14px);
|
|
}
|
|
|
|
/* Preset Row */
|
|
.preset-section {
|
|
padding: 12px 0 16px;
|
|
}
|
|
|
|
.preset-section-title {
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 10px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.preset-list {
|
|
display: flex;
|
|
gap: 10px;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
scrollbar-width: none;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.preset-list::-webkit-scrollbar { display: none; }
|
|
|
|
.preset-card {
|
|
width: 80px;
|
|
height: 100px;
|
|
border-radius: var(--radius-md);
|
|
flex-shrink: 0;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: 2px solid transparent;
|
|
}
|
|
|
|
.preset-card.active {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 3px rgba(108,99,255,0.25);
|
|
}
|
|
|
|
.preset-card:hover:not(.active) {
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
.preset-card-bg {
|
|
position: absolute;
|
|
inset: 0;
|
|
}
|
|
|
|
.preset-card-label {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 4px;
|
|
text-align: center;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
color: white;
|
|
background: rgba(0,0,0,0.4);
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
/* Frosted glass preset */
|
|
.preset-frosted .preset-card-bg {
|
|
background: rgba(255,255,255,0.15);
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
|
|
/* Liquid glass preset */
|
|
.preset-liquid .preset-card-bg {
|
|
background: linear-gradient(135deg, rgba(108,99,255,0.3), rgba(78,205,196,0.3));
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
|
|
/* Gradient preset */
|
|
.preset-gradient .preset-card-bg {
|
|
background: linear-gradient(135deg, #6C63FF, #4ECDC4);
|
|
}
|
|
|
|
/* Meteor preset */
|
|
.preset-meteor .preset-card-bg {
|
|
background: linear-gradient(180deg, #0f0c29, #302b63, #24243e);
|
|
}
|
|
|
|
.preset-meteor .meteor-line {
|
|
position: absolute;
|
|
width: 40px;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
|
|
transform: rotate(-30deg);
|
|
animation: meteor 2s infinite;
|
|
}
|
|
|
|
.meteor-line:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
|
|
.meteor-line:nth-child(2) { top: 40%; left: 50%; animation-delay: 0.7s; }
|
|
.meteor-line:nth-child(3) { top: 60%; left: 30%; animation-delay: 1.4s; }
|
|
|
|
@keyframes meteor {
|
|
0% { opacity: 0; transform: rotate(-30deg) translateX(-20px); }
|
|
50% { opacity: 1; }
|
|
100% { opacity: 0; transform: rotate(-30deg) translateX(20px); }
|
|
}
|
|
|
|
/* Pure white preset */
|
|
.preset-white .preset-card-bg {
|
|
background: #F8F8FA;
|
|
}
|
|
|
|
.preset-white .preset-card-label {
|
|
color: #1A1A2E;
|
|
background: rgba(255,255,255,0.8);
|
|
}
|
|
|
|
/* Action Bar */
|
|
.action-bar {
|
|
display: flex;
|
|
gap: 10px;
|
|
padding: 12px 20px;
|
|
padding-bottom: calc(12px + env(safe-area-inset-bottom, 8px));
|
|
background: rgba(20,20,32,0.95);
|
|
backdrop-filter: blur(20px);
|
|
border-top: 1px solid var(--border);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.action-btn {
|
|
flex: 1;
|
|
padding: 12px;
|
|
border-radius: var(--radius-md);
|
|
border: none;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.action-btn-share {
|
|
background: var(--primary);
|
|
color: white;
|
|
box-shadow: 0 2px 12px rgba(108,99,255,0.3);
|
|
}
|
|
|
|
.action-btn-share:hover {
|
|
background: var(--primary-light);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.action-btn-save {
|
|
background: rgba(78,205,196,0.15);
|
|
color: var(--accent);
|
|
border: 1px solid rgba(78,205,196,0.3);
|
|
}
|
|
|
|
.action-btn-save:hover {
|
|
background: rgba(78,205,196,0.25);
|
|
}
|
|
|
|
.action-btn-more {
|
|
background: var(--bg-card);
|
|
color: var(--text-secondary);
|
|
width: 48px;
|
|
flex: none;
|
|
}
|
|
|
|
.action-btn-more:hover {
|
|
background: var(--bg-card-hover);
|
|
}
|
|
|
|
/* Section label */
|
|
.section-label {
|
|
font-size: 11px;
|
|
color: var(--text-hint);
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
margin: 16px 0 8px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Interactive demo */
|
|
.interactive-hint {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: rgba(0,0,0,0.7);
|
|
backdrop-filter: blur(10px);
|
|
padding: 16px 24px;
|
|
border-radius: 16px;
|
|
color: white;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
z-index: 5;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
.phone-frame:not(.sheet-open) .interactive-hint {
|
|
opacity: 1;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 0.8; }
|
|
50% { opacity: 1; }
|
|
}
|
|
|
|
/* Font selector chips */
|
|
.font-chip {
|
|
font-size: 12px;
|
|
padding: 6px 12px;
|
|
border-radius: 8px;
|
|
background: var(--bg-card);
|
|
color: var(--text-secondary);
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.font-chip.active {
|
|
background: rgba(108,99,255,0.2);
|
|
color: var(--primary-light);
|
|
border-color: rgba(108,99,255,0.4);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="phone-frame" id="phoneFrame">
|
|
<!-- Home Content (background) -->
|
|
<div class="home-content">
|
|
<div class="home-title">闲言</div>
|
|
<div class="home-subtitle">每日一句 · 温暖心灵</div>
|
|
<div class="sentence-card">
|
|
<div class="sentence-text">生活不是等待暴风雨过去，而是学会在雨中翩翩起舞。</div>
|
|
<div class="sentence-author">—— 维维安·格林</div>
|
|
</div>
|
|
<div class="home-buttons">
|
|
<button class="home-btn home-btn-create" onclick="openSheet()">🎨 创作卡片</button>
|
|
<button class="home-btn home-btn-edit">📝 编辑此句</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Interactive Hint -->
|
|
<div class="interactive-hint">👆 点击「创作卡片」查看 Sheet</div>
|
|
|
|
<!-- Sheet Overlay -->
|
|
<div class="sheet-overlay" id="sheetOverlay" onclick="closeSheet()"></div>
|
|
|
|
<!-- Sheet -->
|
|
<div class="sheet" id="sheet">
|
|
<div class="sheet-handle"></div>
|
|
|
|
<div class="sheet-scroll">
|
|
<!-- Preview -->
|
|
<div class="preview-area">
|
|
<div class="preview-card" id="previewCard">
|
|
<div class="preview-bg" id="previewBg"></div>
|
|
<div class="preview-bar-top" id="barTop">闲言 · 每日一句</div>
|
|
<div class="preview-pinyin" id="pinyinLine">shēng huó bù shì děng dài bào fēng yǔ guò qù</div>
|
|
<div class="preview-text" id="previewText">生活不是等待暴风雨过去，而是学会在雨中翩翩起舞。</div>
|
|
<div class="preview-bar-bottom" id="barBottom">—— 维维安·格林</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Style Rows -->
|
|
<div class="section-label">样式调整</div>
|
|
|
|
<!-- 上下栏样式 -->
|
|
<div class="style-row">
|
|
<div class="style-row-label"><span class="emoji">📐</span>栏样式</div>
|
|
<div class="style-row-content">
|
|
<div class="chip" data-bar="none" onclick="setBarStyle('none', this)">无</div>
|
|
<div class="chip" data-bar="top" onclick="setBarStyle('top', this)">仅上方</div>
|
|
<div class="chip" data-bar="bottom" onclick="setBarStyle('bottom', this)">仅下方</div>
|
|
<div class="chip active" data-bar="both" onclick="setBarStyle('both', this)">上下双栏</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 字体 -->
|
|
<div class="style-row">
|
|
<div class="style-row-label"><span class="emoji">🔤</span>字体</div>
|
|
<div class="style-row-content">
|
|
<div class="font-chip active" onclick="setFont('Inter', this)">Inter</div>
|
|
<div class="font-chip" onclick="setFont('serif', this)">宋体</div>
|
|
<div class="font-chip" onclick="setFont('cursive', this)">手写体</div>
|
|
<div class="font-chip" onclick="setFont('monospace', this)">等宽体</div>
|
|
<div class="font-chip" onclick="setFont('fantasy', this)">艺术体</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 色深 -->
|
|
<div class="style-row">
|
|
<div class="style-row-label"><span class="emoji">🎨</span>色深</div>
|
|
<div class="style-row-content" style="gap: 10px;">
|
|
<div class="slider-track" id="depthSlider">
|
|
<div class="slider-fill" id="depthFill" style="width: 50%"></div>
|
|
<div class="slider-thumb" id="depthThumb" style="left: 50%"></div>
|
|
</div>
|
|
<div class="slider-value" id="depthValue">0.5</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 卡片大小 -->
|
|
<div class="style-row">
|
|
<div class="style-row-label"><span class="emoji">📏</span>大小</div>
|
|
<div class="style-row-content">
|
|
<div class="chip" onclick="setSize('square', this)">1:1</div>
|
|
<div class="chip active" onclick="setSize('portrait', this)">4:3</div>
|
|
<div class="chip" onclick="setSize('wide', this)">16:9</div>
|
|
<div class="chip" onclick="setSize('story', this)">9:16</div>
|
|
<div class="chip" onclick="setSize('a4', this)">A4</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 颜色 -->
|
|
<div class="style-row">
|
|
<div class="style-row-label"><span class="emoji">🖌️</span>颜色</div>
|
|
<div class="style-row-content">
|
|
<div class="color-dot active" style="background:#FFFFFF" onclick="setColor('#FFFFFF', this)"></div>
|
|
<div class="color-dot" style="background:#F0F0F8" onclick="setColor('#F0F0F8', this)"></div>
|
|
<div class="color-dot" style="background:#FFD700" onclick="setColor('#FFD700', this)"></div>
|
|
<div class="color-dot" style="background:#FF6B6B" onclick="setColor('#FF6B6B', this)"></div>
|
|
<div class="color-dot" style="background:#4ECDC4" onclick="setColor('#4ECDC4', this)"></div>
|
|
<div class="color-dot" style="background:#6C63FF" onclick="setColor('#6C63FF', this)"></div>
|
|
<div class="color-dot" style="background:#1A1A2E" onclick="setColor('#1A1A2E', this)"></div>
|
|
<div class="color-dot" style="background:linear-gradient(135deg,#FF6B6B,#6C63FF)" onclick="setColor('gradient1', this)"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toggles -->
|
|
<div class="toggle-section">
|
|
<div class="toggle-section-title">功能开关</div>
|
|
<div class="toggle-grid">
|
|
<div class="toggle-item">
|
|
<span class="toggle-label">拼音</span>
|
|
<div class="toggle-switch on" onclick="toggleSwitch(this)" data-key="pinyin"></div>
|
|
</div>
|
|
<div class="toggle-item">
|
|
<span class="toggle-label">震动</span>
|
|
<div class="toggle-switch" onclick="toggleSwitch(this)" data-key="haptic"></div>
|
|
</div>
|
|
<div class="toggle-item">
|
|
<span class="toggle-label">自动</span>
|
|
<div class="toggle-switch" onclick="toggleSwitch(this)" data-key="auto"></div>
|
|
</div>
|
|
<div class="toggle-item">
|
|
<span class="toggle-label">常亮</span>
|
|
<div class="toggle-switch" onclick="toggleSwitch(this)" data-key="alwayson"></div>
|
|
</div>
|
|
<div class="toggle-item">
|
|
<span class="toggle-label">声音</span>
|
|
<div class="toggle-switch" onclick="toggleSwitch(this)" data-key="sound"></div>
|
|
</div>
|
|
<div class="toggle-item">
|
|
<span class="toggle-label">朗读</span>
|
|
<div class="toggle-switch" onclick="toggleSwitch(this)" data-key="tts"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Presets -->
|
|
<div class="preset-section">
|
|
<div class="preset-section-title">预设样式</div>
|
|
<div class="preset-list">
|
|
<div class="preset-card preset-frosted" onclick="setPreset('frosted', this)">
|
|
<div class="preset-card-bg"></div>
|
|
<div class="preset-card-label">毛玻璃</div>
|
|
</div>
|
|
<div class="preset-card preset-liquid active" onclick="setPreset('liquid', this)">
|
|
<div class="preset-card-bg"></div>
|
|
<div class="preset-card-label">液态玻璃</div>
|
|
</div>
|
|
<div class="preset-card preset-gradient" onclick="setPreset('gradient', this)">
|
|
<div class="preset-card-bg"></div>
|
|
<div class="preset-card-label">渐变色</div>
|
|
</div>
|
|
<div class="preset-card preset-meteor" onclick="setPreset('meteor', this)">
|
|
<div class="preset-card-bg">
|
|
<div class="meteor-line"></div>
|
|
<div class="meteor-line"></div>
|
|
<div class="meteor-line"></div>
|
|
</div>
|
|
<div class="preset-card-label">流星</div>
|
|
</div>
|
|
<div class="preset-card preset-white" onclick="setPreset('white', this)">
|
|
<div class="preset-card-bg"></div>
|
|
<div class="preset-card-label">纯白</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Bar -->
|
|
<div class="action-bar">
|
|
<button class="action-btn action-btn-share">📤 分享</button>
|
|
<button class="action-btn action-btn-save">💾 保存</button>
|
|
<button class="action-btn action-btn-more">⋯</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const frame = document.getElementById('phoneFrame');
|
|
const overlay = document.getElementById('sheetOverlay');
|
|
const sheet = document.getElementById('sheet');
|
|
const previewBg = document.getElementById('previewBg');
|
|
const previewText = document.getElementById('previewText');
|
|
const barTop = document.getElementById('barTop');
|
|
const barBottom = document.getElementById('barBottom');
|
|
const pinyinLine = document.getElementById('pinyinLine');
|
|
const depthFill = document.getElementById('depthFill');
|
|
const depthThumb = document.getElementById('depthThumb');
|
|
const depthValue = document.getElementById('depthValue');
|
|
|
|
let currentBarStyle = 'both';
|
|
let currentPinyin = true;
|
|
|
|
function openSheet() {
|
|
frame.classList.add('sheet-open');
|
|
overlay.classList.add('active');
|
|
sheet.classList.add('active');
|
|
}
|
|
|
|
function closeSheet() {
|
|
frame.classList.remove('sheet-open');
|
|
overlay.classList.remove('active');
|
|
sheet.classList.remove('active');
|
|
}
|
|
|
|
function setBarStyle(style, el) {
|
|
currentBarStyle = style;
|
|
document.querySelectorAll('.style-row:first-of-type .chip').forEach(c => c.classList.remove('active'));
|
|
el.classList.add('active');
|
|
|
|
barTop.style.display = (style === 'top' || style === 'both') ? 'flex' : 'none';
|
|
barBottom.style.display = (style === 'bottom' || style === 'both') ? 'flex' : 'none';
|
|
}
|
|
|
|
function setFont(font, el) {
|
|
document.querySelectorAll('.font-chip').forEach(c => c.classList.remove('active'));
|
|
el.classList.add('active');
|
|
previewText.style.fontFamily = font;
|
|
}
|
|
|
|
function setColor(color, el) {
|
|
document.querySelectorAll('.color-dot').forEach(c => c.classList.remove('active'));
|
|
el.classList.add('active');
|
|
if (color === 'gradient1') {
|
|
previewText.style.color = '';
|
|
previewText.style.background = 'linear-gradient(135deg, #FF6B6B, #6C63FF)';
|
|
previewText.style.webkitBackgroundClip = 'text';
|
|
previewText.style.webkitTextFillColor = 'transparent';
|
|
} else {
|
|
previewText.style.background = 'none';
|
|
previewText.style.webkitBackgroundClip = '';
|
|
previewText.style.webkitTextFillColor = '';
|
|
previewText.style.color = color;
|
|
}
|
|
}
|
|
|
|
function setSize(size, el) {
|
|
const card = document.getElementById('previewCard');
|
|
document.querySelectorAll('.style-row:nth-child(5) .chip').forEach(c => c.classList.remove('active'));
|
|
el.classList.add('active');
|
|
|
|
const ratios = {
|
|
square: '1/1',
|
|
portrait: '9/16',
|
|
wide: '16/9',
|
|
story: '9/16',
|
|
a4: '1/1.414'
|
|
};
|
|
card.style.aspectRatio = ratios[size] || '9/16';
|
|
card.style.maxHeight = size === 'wide' ? '120px' : '180px';
|
|
}
|
|
|
|
function toggleSwitch(el) {
|
|
el.classList.toggle('on');
|
|
const key = el.dataset.key;
|
|
if (key === 'pinyin') {
|
|
currentPinyin = el.classList.contains('on');
|
|
pinyinLine.style.display = currentPinyin ? 'block' : 'none';
|
|
}
|
|
}
|
|
|
|
function setPreset(preset, el) {
|
|
document.querySelectorAll('.preset-card').forEach(c => c.classList.remove('active'));
|
|
el.classList.add('active');
|
|
|
|
const presets = {
|
|
frosted: {
|
|
bg: 'rgba(255,255,255,0.15)',
|
|
textColor: '#FFFFFF',
|
|
depth: 0.3,
|
|
bar: 'both'
|
|
},
|
|
liquid: {
|
|
bg: 'linear-gradient(135deg, rgba(108,99,255,0.4), rgba(78,205,196,0.4))',
|
|
textColor: '#FFFFFF',
|
|
depth: 0.5,
|
|
bar: 'both'
|
|
},
|
|
gradient: {
|
|
bg: 'linear-gradient(135deg, #6C63FF, #4ECDC4)',
|
|
textColor: '#FFFFFF',
|
|
depth: 0.7,
|
|
bar: 'bottom'
|
|
},
|
|
meteor: {
|
|
bg: 'linear-gradient(180deg, #0f0c29, #302b63, #24243e)',
|
|
textColor: '#E0E0FF',
|
|
depth: 0.8,
|
|
bar: 'none'
|
|
},
|
|
white: {
|
|
bg: '#F8F8FA',
|
|
textColor: '#1A1A2E',
|
|
depth: 0.0,
|
|
bar: 'bottom'
|
|
}
|
|
};
|
|
|
|
const p = presets[preset];
|
|
if (!p) return;
|
|
|
|
previewBg.style.background = p.bg;
|
|
previewBg.style.backdropFilter = p.bg.includes('rgba') ? 'blur(20px)' : '';
|
|
previewText.style.color = p.textColor;
|
|
previewText.style.background = 'none';
|
|
previewText.style.webkitBackgroundClip = '';
|
|
previewText.style.webkitTextFillColor = '';
|
|
|
|
const pct = (p.depth * 100) + '%';
|
|
depthFill.style.width = pct;
|
|
depthThumb.style.left = pct;
|
|
depthValue.textContent = p.depth.toFixed(1);
|
|
|
|
barTop.style.display = (p.bar === 'top' || p.bar === 'both') ? 'flex' : 'none';
|
|
barBottom.style.display = (p.bar === 'bottom' || p.bar === 'both') ? 'flex' : 'none';
|
|
}
|
|
|
|
// Depth slider interaction
|
|
const depthSlider = document.getElementById('depthSlider');
|
|
let isDragging = false;
|
|
|
|
function updateDepth(e) {
|
|
const rect = depthSlider.getBoundingClientRect();
|
|
const x = (e.clientX || e.touches[0].clientX) - rect.left;
|
|
const pct = Math.max(0, Math.min(1, x / rect.width));
|
|
depthFill.style.width = (pct * 100) + '%';
|
|
depthThumb.style.left = (pct * 100) + '%';
|
|
depthValue.textContent = pct.toFixed(1);
|
|
}
|
|
|
|
depthSlider.addEventListener('mousedown', (e) => { isDragging = true; updateDepth(e); });
|
|
depthSlider.addEventListener('touchstart', (e) => { isDragging = true; updateDepth(e); }, { passive: true });
|
|
document.addEventListener('mousemove', (e) => { if (isDragging) updateDepth(e); });
|
|
document.addEventListener('touchmove', (e) => { if (isDragging) updateDepth(e); }, { passive: true });
|
|
document.addEventListener('mouseup', () => { isDragging = false; });
|
|
document.addEventListener('touchend', () => { isDragging = false; });
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|