左侧输入内容
点击执行
生成带编号封面
编译中...
-左侧输入内容
点击执行
生成带编号封面
编译中...
diff --git a/image-studio/public/index.html b/image-studio/public/index.html index 5b53e3b..e99cd7c 100644 --- a/image-studio/public/index.html +++ b/image-studio/public/index.html @@ -14,379 +14,76 @@ --text-dim: rgba(155, 195, 235, 0.55); --accent: rgba(100, 160, 220, 0.9); --green: rgba(140, 220, 180, 0.9); - --gold: rgba(220, 200, 140, 0.9); } * { margin: 0; padding: 0; box-sizing: border-box; } -body { - background: var(--bg); - color: var(--text); - font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif; - min-height: 100vh; - line-height: 1.6; -} +body { background: var(--bg); color: var(--text); font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif; min-height: 100vh; line-height: 1.6; } -/* Header */ -header { - text-align: center; - padding: 32px 20px 24px; -} -header h1 { - font-size: 28px; - font-weight: 700; - background: linear-gradient(90deg, #3b82f6, #60a5fa); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - margin-bottom: 6px; - letter-spacing: 4px; -} -header p { - font-size: 13px; - color: var(--text-dim); - letter-spacing: 2px; -} +header { text-align: center; padding: 32px 20px 24px; } +header h1 { font-size: 28px; font-weight: 700; background: linear-gradient(90deg, #3b82f6, #60a5fa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 6px; letter-spacing: 4px; } +header p { font-size: 13px; color: var(--text-dim); letter-spacing: 2px; } -/* Main */ -.main { - max-width: 1200px; - margin: 0 auto; - padding: 0 24px 60px; - display: grid; - grid-template-columns: 1fr 400px; - gap: 24px; -} -@media (max-width: 900px) { - .main { grid-template-columns: 1fr; } -} +.main { max-width: 1200px; margin: 0 auto; padding: 0 24px 60px; display: grid; grid-template-columns: 1fr 400px; gap: 24px; } +@media (max-width: 900px) { .main { grid-template-columns: 1fr; } } -/* Cards - 参考主域名风格 */ -.card { - background: var(--panel); - border: 1px solid var(--border); - border-radius: 18px; - padding: 24px; - margin-bottom: 16px; - transition: all 0.3s; -} -.card:hover { - border-color: var(--border-h); - background: rgba(20, 35, 70, 0.85); -} -.card-title { - font-size: 14px; - font-weight: 600; - letter-spacing: 3px; - color: var(--text-dim); - text-transform: uppercase; - margin-bottom: 16px; - display: flex; - align-items: center; - gap: 8px; -} -.card-title::before { - content: ''; - width: 4px; - height: 16px; - background: var(--accent); - border-radius: 2px; -} +.card { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 24px; margin-bottom: 16px; } +.card:hover { border-color: var(--border-h); background: rgba(20,35,70,0.85); } +.card-title { font-size: 14px; font-weight: 600; letter-spacing: 3px; color: var(--text-dim); text-transform: uppercase; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } +.card-title::before { content: ''; width: 4px; height: 16px; background: var(--accent); border-radius: 2px; } -/* Input */ -.input-row { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 12px; - margin-bottom: 12px; -} -select, input, textarea { - padding: 12px 16px; - background: rgba(10, 14, 26, 0.6); - border: 1px solid var(--border); - border-radius: 12px; - color: var(--text); - font-size: 14px; - outline: none; - width: 100%; - font-family: inherit; -} -select:focus, input:focus, textarea:focus { - border-color: var(--accent); -} -textarea { - min-height: 100px; - resize: vertical; - line-height: 1.8; -} +.input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; } +select, input, textarea { padding: 12px 16px; background: rgba(10,14,26,0.6); border: 1px solid var(--border); border-radius: 12px; color: var(--text); font-size: 14px; outline: none; width: 100%; font-family: inherit; } +select:focus, input:focus, textarea:focus { border-color: var(--accent); } +textarea { min-height: 100px; resize: vertical; line-height: 1.8; } -.gen-btn { - width: 100%; - padding: 14px; - background: linear-gradient(135deg, rgba(100,160,220,0.3), rgba(130,100,200,0.2)); - border: 1px solid var(--border); - border-radius: 12px; - color: var(--accent); - font-size: 15px; - font-weight: 600; - cursor: pointer; - letter-spacing: 2px; - transition: all 0.25s; - margin-top: 8px; -} -.gen-btn:hover { - border-color: var(--border-h); - background: linear-gradient(135deg, rgba(100,160,220,0.5), rgba(130,100,200,0.35)); - transform: translateY(-1px); -} -.gen-btn:disabled { - opacity: 0.5; - cursor: not-allowed; -} +.gen-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, rgba(100,160,220,0.3), rgba(130,100,200,0.2)); border: 1px solid var(--border); border-radius: 12px; color: var(--accent); font-size: 15px; font-weight: 600; cursor: pointer; letter-spacing: 2px; margin-top: 8px; } +.gen-btn:hover { border-color: var(--border-h); background: linear-gradient(135deg, rgba(100,160,220,0.5), rgba(130,100,200,0.35)); transform: translateY(-1px); } +.gen-btn:disabled { opacity: 0.5; cursor: not-allowed; } -/* Intent Chain Cards */ -.intent-list { - display: flex; - flex-direction: column; - gap: 12px; -} -.intent-item { - display: flex; - gap: 14px; - padding: 16px; - background: rgba(10, 14, 26, 0.4); - border: 1px solid var(--border); - border-radius: 12px; - transition: all 0.2s; -} -.intent-item:hover { - border-color: var(--border-h); -} -.intent-item.user { - border-left: 3px solid var(--green); -} -.intent-item.system { - border-left: 3px solid var(--accent); -} -.intent-icon { - width: 36px; - height: 36px; - border-radius: 50%; - background: rgba(100, 160, 220, 0.1); - display: flex; - align-items: center; - justify-content: center; - font-size: 16px; - flex-shrink: 0; -} -.intent-item.user .intent-icon { - background: rgba(140, 220, 180, 0.1); -} -.intent-body { - flex: 1; -} -.intent-who { - font-size: 11px; - font-weight: 600; - letter-spacing: 1.5px; - text-transform: uppercase; - margin-bottom: 4px; -} -.intent-item.user .intent-who { - color: var(--green); -} -.intent-item.system .intent-who { - color: var(--accent); -} -.intent-step { - font-size: 15px; - font-weight: 600; - color: var(--text); - margin-bottom: 4px; -} -.intent-detail { - font-size: 13px; - color: var(--text-dim); - line-height: 1.6; -} -.intent-why { - font-size: 12px; - color: rgba(155, 195, 235, 0.35); - margin-top: 6px; - font-style: italic; -} +.intent-list { display: flex; flex-direction: column; gap: 12px; } +.intent-item { display: flex; gap: 14px; padding: 16px; background: rgba(10,14,26,0.4); border: 1px solid var(--border); border-radius: 12px; } +.intent-item:hover { border-color: var(--border-h); } +.intent-item.user { border-left: 3px solid var(--green); } +.intent-item.system { border-left: 3px solid var(--accent); } +.intent-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(100,160,220,0.1); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } +.intent-item.user .intent-icon { background: rgba(140,220,180,0.1); } +.intent-body { flex: 1; } +.intent-who { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 4px; } +.intent-item.user .intent-who { color: var(--green); } +.intent-item.system .intent-who { color: var(--accent); } +.intent-step { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 4px; } +.intent-detail { font-size: 13px; color: var(--text-dim); line-height: 1.6; } +.intent-why { font-size: 12px; color: rgba(155,195,235,0.35); margin-top: 6px; font-style: italic; } -/* Design ID Badge */ -.design-id-card { - text-align: center; - padding: 20px; - background: rgba(140, 220, 180, 0.06); - border: 1px solid rgba(140, 220, 180, 0.15); - border-radius: 12px; - margin-bottom: 16px; -} -.design-id-card .label { - font-size: 11px; - color: var(--text-dim); - letter-spacing: 2px; - margin-bottom: 8px; -} -.design-id-card .value { - font-size: 20px; - font-weight: 700; - color: var(--green); - font-family: 'SF Mono', monospace; - letter-spacing: 2px; -} -.design-id-card .hint { - font-size: 12px; - color: var(--text-dim); - margin-top: 8px; -} +.design-id-card { text-align: center; padding: 20px; background: rgba(140,220,180,0.06); border: 1px solid rgba(140,220,180,0.15); border-radius: 12px; margin-bottom: 16px; } +.design-id-card .label { font-size: 11px; color: var(--text-dim); letter-spacing: 2px; margin-bottom: 8px; } +.design-id-card .value { font-size: 20px; font-weight: 700; color: var(--green); font-family: 'SF Mono', monospace; letter-spacing: 2px; } +.design-id-card .hint { font-size: 12px; color: var(--text-dim); margin-top: 8px; } -/* Right Panel - Preview */ -.preview-card { - position: sticky; - top: 24px; -} +.preview-card { position: sticky; top: 24px; } +.preview-area { min-height: 300px; display: flex; align-items: center; justify-content: center; background: rgba(10,14,26,0.4); border-radius: 12px; border: 1px dashed var(--border); margin-bottom: 16px; } +.empty-hint { text-align: center; color: var(--text-dim); } +.empty-hint .icon { font-size: 48px; margin-bottom: 12px; opacity: 0.3; } +.empty-hint p { font-size: 14px; line-height: 2; } +.preview-img { max-width: 100%; border-radius: 8px; display: none; } +.preview-img.show { display: block; } +.preview-wrap { position: relative; display: none; } +.preview-wrap.show { display: block; } +.id-watermark { position: absolute; bottom: 12px; right: 12px; background: rgba(0,0,0,0.7); padding: 6px 12px; border-radius: 16px; font-size: 11px; font-family: 'SF Mono', monospace; color: var(--accent); border: 1px solid rgba(100,160,220,0.4); letter-spacing: 1px; } -.preview-area { - min-height: 300px; - display: flex; - align-items: center; - justify-content: center; - background: rgba(10, 14, 26, 0.4); - border-radius: 12px; - border: 1px dashed var(--border); - margin-bottom: 16px; -} +.dl-btn, .copy-btn { display: block; width: 100%; padding: 14px; background: linear-gradient(135deg, rgba(100,160,220,0.3), rgba(130,100,200,0.2)); border: 1px solid var(--border); border-radius: 12px; color: var(--accent); text-align: center; text-decoration: none; font-size: 15px; font-weight: 600; letter-spacing: 2px; cursor: pointer; } +.dl-btn:hover, .copy-btn:hover { border-color: var(--border-h); background: linear-gradient(135deg, rgba(100,160,220,0.5), rgba(130,100,200,0.35)); } -.empty-hint { - text-align: center; - color: var(--text-dim); -} -.empty-hint .icon { - font-size: 48px; - margin-bottom: 12px; - opacity: 0.3; -} -.empty-hint p { - font-size: 14px; - line-height: 2; -} - -.preview-img { - max-width: 100%; - border-radius: 8px; - display: none; -} -.preview-img.show { - display: block; -} - -.preview-wrap { - position: relative; - display: none; -} -.preview-wrap.show { - display: block; -} - -.id-watermark { - position: absolute; - bottom: 12px; - right: 12px; - background: rgba(0, 0, 0, 0.7); - padding: 6px 12px; - border-radius: 16px; - font-size: 11px; - font-family: 'SF Mono', monospace; - color: var(--accent); - border: 1px solid rgba(100, 160, 220, 0.4); - letter-spacing: 1px; -} - -.dl-btn { - display: block; - width: 100%; - padding: 14px; - background: linear-gradient(135deg, rgba(100,160,220,0.3), rgba(130,100,200,0.2)); - border: 1px solid var(--border); - border-radius: 12px; - color: var(--accent); - text-align: center; - text-decoration: none; - font-size: 15px; - font-weight: 600; - letter-spacing: 2px; - transition: all 0.25s; -} -.dl-btn:hover { - border-color: var(--border-h); - background: linear-gradient(135deg, rgba(100,160,220,0.5), rgba(130,100,200,0.35)); -} - -.copy-btn { - display: block; - width: 100%; - padding: 12px; - background: rgba(10, 14, 26, 0.6); - border: 1px solid var(--border); - border-radius: 12px; - color: var(--text-dim); - text-align: center; - font-size: 13px; - cursor: pointer; - margin-top: 10px; - transition: all 0.2s; -} -.copy-btn:hover { - border-color: var(--accent); - color: var(--accent); -} - -.loading { - display: none; - text-align: center; - padding: 40px; -} -.loading.show { - display: block; -} -.loading-dots span { - display: inline-block; - width: 8px; - height: 8px; - background: var(--accent); - border-radius: 50%; - margin: 0 4px; - animation: bounce 1.4s infinite; -} +.loading { display: none; text-align: center; padding: 40px; } +.loading.show { display: block; } +.loading-dots span { display: inline-block; width: 8px; height: 8px; background: var(--accent); border-radius: 50%; margin: 0 4px; animation: bounce 1.4s infinite; } .loading-dots span:nth-child(1) { animation-delay: -0.32s; } .loading-dots span:nth-child(2) { animation-delay: -0.16s; } -@keyframes bounce { - 0%, 80%, 100% { transform: scale(0); } - 40% { transform: scale(1); } -} +@keyframes bounce { 0%,80%,100% { transform: scale(0); } 40% { transform: scale(1); } } -.error { - display: none; - padding: 12px; - background: rgba(255, 100, 100, 0.1); - border: 1px solid rgba(255, 100, 100, 0.2); - border-radius: 12px; - color: rgba(255, 140, 140, 0.9); - font-size: 13px; - margin-top: 12px; -} -.error.show { - display: block; -} +.error { display: none; padding: 12px; background: rgba(255,100,100,0.1); border: 1px solid rgba(255,100,100,0.2); border-radius: 12px; color: rgba(255,140,140,0.9); font-size: 13px; margin-top: 12px; } +.error.show { display: block; } -footer { - text-align: center; - padding: 40px 20px; - font-size: 13px; - color: var(--text-dim); - letter-spacing: 2px; -} +footer { text-align: center; padding: 40px 20px; font-size: 13px; color: var(--text-dim); letter-spacing: 2px; }
@@ -397,193 +94,83 @@ footer {左侧输入内容
点击执行
生成带编号封面
编译中...
-左侧输入内容
点击执行
生成带编号封面
编译中...