You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
242 lines
8.2 KiB
242 lines
8.2 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Anime Style Forge - 风格化生成结果</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
|
|
min-height: 100vh;
|
|
padding: 40px 20px;
|
|
color: #fff;
|
|
}
|
|
|
|
.container { max-width: 1400px; margin: 0 auto; }
|
|
|
|
h1 { text-align: center; margin-bottom: 8px; font-size: 2.2rem; }
|
|
.subtitle { text-align: center; color: #888; margin-bottom: 36px; font-size: 1rem; }
|
|
|
|
.style-badge {
|
|
display: inline-block;
|
|
background: linear-gradient(135deg, #e94560, #c23616);
|
|
padding: 6px 16px;
|
|
border-radius: 20px;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
margin: 4px;
|
|
}
|
|
|
|
.info-panel {
|
|
background: rgba(255,255,255,0.06);
|
|
border-radius: 16px;
|
|
padding: 28px;
|
|
margin-bottom: 32px;
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
}
|
|
|
|
.info-panel h2 {
|
|
font-size: 1.1rem;
|
|
margin-bottom: 16px;
|
|
color: #e94560;
|
|
}
|
|
|
|
.info-row { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 12px; }
|
|
.info-label { color: #888; font-size: 0.85rem; min-width: 80px; }
|
|
.info-value { font-size: 0.95rem; line-height: 1.6; flex: 1; }
|
|
|
|
.prompt-box {
|
|
background: rgba(0,0,0,0.3);
|
|
padding: 14px 18px;
|
|
border-radius: 10px;
|
|
font-size: 0.9rem;
|
|
line-height: 1.7;
|
|
margin-top: 8px;
|
|
word-break: break-word;
|
|
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
|
|
color: #a0e7ff;
|
|
}
|
|
|
|
.neg-prompt { color: #ff8a80; }
|
|
|
|
.comparison {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.comparison .label {
|
|
text-align: center;
|
|
font-size: 0.85rem;
|
|
color: #888;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.comparison img {
|
|
width: 100%;
|
|
border-radius: 12px;
|
|
aspect-ratio: 1;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.gallery {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
.card {
|
|
background: rgba(255,255,255,0.04);
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
border: 1px solid rgba(255,255,255,0.06);
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-6px);
|
|
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
|
|
border-color: rgba(233,69,96,0.3);
|
|
}
|
|
|
|
.card img {
|
|
width: 100%;
|
|
aspect-ratio: 1;
|
|
object-fit: cover;
|
|
display: block;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.card .meta {
|
|
padding: 14px 18px;
|
|
}
|
|
|
|
.card .meta h3 { font-size: 0.95rem; margin-bottom: 6px; }
|
|
.card .meta p { color: #666; font-size: 0.8rem; }
|
|
|
|
.multi-style-section {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.multi-style-section h3 {
|
|
font-size: 1.1rem;
|
|
margin-bottom: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.footer {
|
|
text-align: center;
|
|
margin-top: 48px;
|
|
color: #444;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
/* Lightbox */
|
|
.lightbox {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0; left: 0;
|
|
width: 100%; height: 100%;
|
|
background: rgba(0,0,0,0.9);
|
|
z-index: 1000;
|
|
cursor: pointer;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.lightbox.active { display: flex; }
|
|
.lightbox img {
|
|
max-width: 90%;
|
|
max-height: 90%;
|
|
border-radius: 12px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.comparison { grid-template-columns: 1fr; }
|
|
.gallery { grid-template-columns: 1fr 1fr; }
|
|
.info-row { flex-direction: column; gap: 4px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>🎨 Anime Style Forge</h1>
|
|
<p class="subtitle">动漫 / 角色 / 风格化生成结果</p>
|
|
|
|
<div class="info-panel">
|
|
<h2>📋 生成信息</h2>
|
|
<div class="info-row">
|
|
<span class="info-label">模式</span>
|
|
<span class="info-value" id="mode">-</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">目标风格</span>
|
|
<span class="info-value" id="style">-</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Prompt</span>
|
|
<div class="prompt-box" id="prompt">-</div>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">负向词</span>
|
|
<div class="prompt-box neg-prompt" id="neg-prompt">-</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 style="margin-bottom: 20px;">🖼️ 生成结果</h2>
|
|
<div class="gallery" id="gallery">
|
|
<div style="text-align:center; padding:60px; color:#555; grid-column:1/-1;">
|
|
暂无生成结果。请通过 Skill 执行生成流程。
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<p>Generated by Anime Style Forge Skill 🎨🐱</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lightbox" id="lightbox" onclick="this.classList.remove('active')">
|
|
<img id="lightbox-img" src="">
|
|
</div>
|
|
|
|
<script>
|
|
const params = new URLSearchParams(window.location.search);
|
|
|
|
const mode = params.get('mode') || '';
|
|
const style = params.get('style') || '';
|
|
const prompt = params.get('prompt') || '';
|
|
const negPrompt = params.get('neg') || '';
|
|
const images = params.get('images') ? params.get('images').split(',') : [];
|
|
|
|
if (mode) document.getElementById('mode').textContent = decodeURIComponent(mode);
|
|
if (style) document.getElementById('style').innerHTML = decodeURIComponent(style).split(',').map(s => `<span class="style-badge">${s.trim()}</span>`).join(' ');
|
|
if (prompt) document.getElementById('prompt').textContent = decodeURIComponent(prompt);
|
|
if (negPrompt) document.getElementById('neg-prompt').textContent = decodeURIComponent(negPrompt);
|
|
|
|
const gallery = document.getElementById('gallery');
|
|
if (images.length > 0 && images[0]) {
|
|
gallery.innerHTML = images.map((img, i) => `
|
|
<div class="card">
|
|
<img src="${decodeURIComponent(img)}" alt="Result ${i+1}" onclick="openLightbox(this.src)" onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><rect fill=%22%23222%22 width=%22100%22 height=%22100%22/><text x=%2250%22 y=%2255%22 text-anchor=%22middle%22 fill=%22%23555%22 font-size=%2210%22>加载失败</text></svg>'">
|
|
<div class="meta">
|
|
<h3>生成 #${i+1}</h3>
|
|
<p>${new Date().toLocaleDateString()}</p>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
function openLightbox(src) {
|
|
document.getElementById('lightbox-img').src = src;
|
|
document.getElementById('lightbox').classList.add('active');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|