591 lines
14 KiB
HTML
591 lines
14 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>
|
|
<style>
|
|
:root {
|
|
--bg: #0a0e1a;
|
|
--panel: rgba(17, 22, 42, 0.8);
|
|
--border: rgba(110, 160, 230, 0.2);
|
|
--border-h: rgba(150, 200, 255, 0.45);
|
|
--text: rgba(195, 215, 255, 0.9);
|
|
--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;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* 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; }
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* Right Panel - Preview */
|
|
.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;
|
|
}
|
|
|
|
.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-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); }
|
|
}
|
|
|
|
.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;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<h1>封面工作室</h1>
|
|
<p>语言驱动设计系统 · 意图可追溯 · 设计属于你</p>
|
|
</header>
|
|
|
|
<div class="main">
|
|
|
|
<!-- Left: Intent Chain -->
|
|
<div class="left">
|
|
|
|
<!-- Input Card -->
|
|
<div class="card">
|
|
<div class="card-title">内容输入</div>
|
|
<div class="input-row">
|
|
<select id="preset">
|
|
<option value="tech">🔷 科技蓝</option>
|
|
<option value="warm">🟠 奶油暖调</option>
|
|
<option value="minimal">⬜ 极简黑白</option>
|
|
<option value="rose">🟣 玫瑰粉调</option>
|
|
<option value="green">🟢 文艺绿植</option>
|
|
</select>
|
|
<select id="layout">
|
|
<option value="default">标准排版</option>
|
|
<option value="hero">大标题封面</option>
|
|
<option value="quote">金句居中</option>
|
|
</select>
|
|
</div>
|
|
<input type="text" id="title" placeholder="标题" style="margin-bottom:12px;">
|
|
<textarea id="body" placeholder="正文...
|
|
|
|
- 列表用 - 开头
|
|
## 小标题
|
|
**加粗**文字"></textarea>
|
|
<button class="gen-btn" id="btn" onclick="generate()">执行设计逻辑</button>
|
|
<div class="error" id="err"></div>
|
|
</div>
|
|
|
|
<!-- Design ID Card -->
|
|
<div class="design-id-card" id="idCard" style="display:none;">
|
|
<div class="label">DESIGN ID</div>
|
|
<div class="value" id="designId">---</div>
|
|
<div class="hint">左侧意图链 + 图片水印<br>编号一致 · 证明归属</div>
|
|
</div>
|
|
|
|
<!-- Intent Chain Card -->
|
|
<div class="card" id="chainCard" style="display:none;">
|
|
<div class="card-title">意图链 · 可截图保存</div>
|
|
<div class="intent-list" id="chainList"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Right: Preview -->
|
|
<div class="right">
|
|
<div class="preview-card">
|
|
<div class="card-title">封面预览</div>
|
|
|
|
<div class="preview-area" id="previewArea">
|
|
<div class="empty-hint" id="empty">
|
|
<div class="icon">🎨</div>
|
|
<p>左侧输入内容<br>点击执行<br>生成带编号封面</p>
|
|
</div>
|
|
<div class="loading" id="loading">
|
|
<div class="loading-dots"><span></span><span></span><span></span></div>
|
|
<p style="margin-top:16px;color:var(--text-dim);font-size:13px;">编译中...</p>
|
|
</div>
|
|
<div class="preview-wrap" id="previewWrap">
|
|
<img class="preview-img" id="previewImg" alt="封面">
|
|
<div class="id-watermark" id="watermark">---</div>
|
|
</div>
|
|
</div>
|
|
|
|
<a class="dl-btn" id="dlBtn" href="#" download style="display:none;">下载封面 PNG</a>
|
|
<button class="copy-btn" id="copyBtn" onclick="copyId()" style="display:none;">复制设计编号</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<footer>光湖语言世界 · 人格体的操作系统 · ICE-GL-ZY001</footer>
|
|
|
|
<script>
|
|
let currentId = '';
|
|
|
|
async function generate() {
|
|
const title = document.getElementById('title').value.trim();
|
|
const body = document.getElementById('body').value.trim();
|
|
const preset = document.getElementById('preset').value;
|
|
const layout = document.getElementById('layout').value;
|
|
|
|
if (!title && !body) {
|
|
showErr('请输入标题或正文');
|
|
return;
|
|
}
|
|
|
|
// UI reset
|
|
document.getElementById('err').classList.remove('show');
|
|
document.getElementById('empty').style.display = 'none';
|
|
document.getElementById('previewWrap').classList.remove('show');
|
|
document.getElementById('dlBtn').style.display = 'none';
|
|
document.getElementById('copyBtn').style.display = 'none';
|
|
document.getElementById('idCard').style.display = 'none';
|
|
document.getElementById('chainCard').style.display = 'none';
|
|
document.getElementById('loading').classList.add('show');
|
|
document.getElementById('btn').disabled = true;
|
|
|
|
// Generate ID
|
|
currentId = 'DSG-' + Date.now().toString(36).toUpperCase().slice(-8);
|
|
|
|
try {
|
|
const r = await fetch('/api/generate', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
templateId: 'xiaohongshu',
|
|
presetId: preset,
|
|
title: title,
|
|
body: body,
|
|
layout: layout
|
|
})
|
|
});
|
|
|
|
if (!r.ok) throw new Error('生成失败');
|
|
const d = await r.json();
|
|
|
|
// Show preview
|
|
document.getElementById('loading').classList.remove('show');
|
|
document.getElementById('previewImg').src = d.url;
|
|
document.getElementById('previewWrap').classList.add('show');
|
|
document.getElementById('watermark').textContent = currentId;
|
|
document.getElementById('dlBtn').href = d.url;
|
|
document.getElementById('dlBtn').style.display = 'block';
|
|
document.getElementById('copyBtn').style.display = 'block';
|
|
|
|
// Show ID card
|
|
document.getElementById('designId').textContent = currentId;
|
|
document.getElementById('idCard').style.display = 'block';
|
|
|
|
// Show intent chain
|
|
if (d.intent_chain) {
|
|
document.getElementById('chainCard').style.display = 'block';
|
|
document.getElementById('chainList').innerHTML = d.intent_chain.map(s => `
|
|
<div class="intent-item ${s.who === '用户' ? 'user' : 'system'}">
|
|
<div class="intent-icon">${s.icon}</div>
|
|
<div class="intent-body">
|
|
<div class="intent-who">${s.who}</div>
|
|
<div class="intent-step">${s.step}</div>
|
|
<div class="intent-detail">${s.detail}</div>
|
|
${s.why ? `<div class="intent-why">→ ${s.why}</div>` : ''}
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
} catch (e) {
|
|
document.getElementById('loading').classList.remove('show');
|
|
document.getElementById('empty').style.display = 'block';
|
|
showErr(e.message);
|
|
} finally {
|
|
document.getElementById('btn').disabled = false;
|
|
}
|
|
}
|
|
|
|
function showErr(m) {
|
|
const e = document.getElementById('err');
|
|
e.textContent = m;
|
|
e.classList.add('show');
|
|
setTimeout(() => e.classList.remove('show'), 4000);
|
|
}
|
|
|
|
function copyId() {
|
|
navigator.clipboard.writeText(currentId).then(() => {
|
|
const btn = document.getElementById('copyBtn');
|
|
const old = btn.textContent;
|
|
btn.textContent = '已复制: ' + currentId;
|
|
setTimeout(() => btn.textContent = old, 2000);
|
|
});
|
|
}
|
|
|
|
document.addEventListener('keydown', e => {
|
|
if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') generate();
|
|
});
|
|
|
|
// Prefill
|
|
(function() {
|
|
document.getElementById('title').value = '零基础手搓AI封面生成器';
|
|
document.getElementById('body').value =
|
|
'语言驱动设计 · 意图透明 · 编号可追溯\n\n' +
|
|
'- 零成本 · 无需GPU\n' +
|
|
'- 极轻量 · 一行命令部署\n' +
|
|
'- 意图链可截图保存\n' +
|
|
'- 编号唯一 · 设计属于你';
|
|
})();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|