640 lines
40 KiB
HTML
640 lines
40 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>LemonSpace — Wireframes v1</title>
|
||
<style>
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
:root {
|
||
--color-background-primary: #ffffff;
|
||
--color-background-secondary: #f5f5f3;
|
||
--color-background-tertiary: #ebebea;
|
||
--color-background-info: #e6f1fb;
|
||
--color-background-success: #eaf3de;
|
||
--color-background-warning: #faeeda;
|
||
--color-background-danger: #fcebeb;
|
||
--color-text-primary: #1a1a18;
|
||
--color-text-secondary: #6b6b68;
|
||
--color-text-info: #185fa5;
|
||
--color-text-success: #3b6d11;
|
||
--color-text-warning: #854f0b;
|
||
--color-text-danger: #a32d2d;
|
||
--color-border-tertiary: rgba(0,0,0,0.12);
|
||
--color-border-secondary: rgba(0,0,0,0.22);
|
||
--color-border-info: rgba(24,95,165,0.4);
|
||
--color-border-success: rgba(59,109,17,0.4);
|
||
--color-border-warning: rgba(133,79,11,0.4);
|
||
--color-border-danger: rgba(163,45,45,0.4);
|
||
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
--border-radius-md: 8px;
|
||
--border-radius-lg: 12px;
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--color-background-primary: #1e1e1c;
|
||
--color-background-secondary: #2a2a28;
|
||
--color-background-tertiary: #333331;
|
||
--color-background-info: #042c53;
|
||
--color-background-success: #173404;
|
||
--color-background-warning: #412402;
|
||
--color-background-danger: #501313;
|
||
--color-text-primary: #f0efe8;
|
||
--color-text-secondary: #9b9b96;
|
||
--color-text-info: #85b7eb;
|
||
--color-text-success: #97c459;
|
||
--color-text-warning: #ef9f27;
|
||
--color-text-danger: #f09595;
|
||
--color-border-tertiary: rgba(255,255,255,0.1);
|
||
--color-border-secondary: rgba(255,255,255,0.2);
|
||
--color-border-info: rgba(133,183,235,0.35);
|
||
--color-border-success: rgba(151,196,89,0.35);
|
||
--color-border-warning: rgba(239,159,39,0.35);
|
||
--color-border-danger: rgba(240,149,149,0.35);
|
||
}
|
||
}
|
||
|
||
body {
|
||
font-family: var(--font-sans);
|
||
background: var(--color-background-tertiary);
|
||
color: var(--color-text-primary);
|
||
padding: 24px;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.page-header {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
margin-bottom: 20px;
|
||
}
|
||
.page-header h1 { font-size: 18px; font-weight: 500; }
|
||
.page-header span { font-size: 12px; color: var(--color-text-secondary); }
|
||
|
||
.nav {
|
||
display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap;
|
||
}
|
||
.nav-btn {
|
||
padding: 5px 14px; font-size: 12px; border-radius: var(--border-radius-md);
|
||
border: 0.5px solid var(--color-border-secondary);
|
||
background: var(--color-background-primary);
|
||
color: var(--color-text-secondary); cursor: pointer;
|
||
font-family: var(--font-sans);
|
||
}
|
||
.nav-btn.sel {
|
||
background: var(--color-background-info);
|
||
color: var(--color-text-info);
|
||
border-color: transparent; font-weight: 500;
|
||
}
|
||
|
||
.wf { display: none; }
|
||
.wf.active { display: block; }
|
||
|
||
.screen-wrap {
|
||
border: 0.5px solid var(--color-border-tertiary);
|
||
border-radius: var(--border-radius-lg);
|
||
overflow: hidden;
|
||
background: var(--color-background-secondary);
|
||
}
|
||
|
||
.topbar {
|
||
display: flex; align-items: center; gap: 8px;
|
||
padding: 8px 12px;
|
||
background: var(--color-background-primary);
|
||
border-bottom: 0.5px solid var(--color-border-tertiary);
|
||
font-size: 12px;
|
||
}
|
||
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
|
||
.dot-r { background: #e05a4e; }
|
||
.dot-y { background: #e8b84b; }
|
||
.dot-g { background: #59b96f; }
|
||
.tb-title { margin-left: 8px; font-size: 12px; color: var(--color-text-secondary); }
|
||
|
||
.pill {
|
||
display: inline-flex; align-items: center; padding: 2px 8px;
|
||
border-radius: 99px; font-size: 11px; font-weight: 500;
|
||
border: 0.5px solid var(--color-border-tertiary);
|
||
background: var(--color-background-secondary);
|
||
color: var(--color-text-secondary);
|
||
}
|
||
.pill.active { background: var(--color-background-info); color: var(--color-text-info); border-color: transparent; }
|
||
.pill.success { background: var(--color-background-success); color: var(--color-text-success); border-color: transparent; }
|
||
.pill.warn { background: var(--color-background-warning); color: var(--color-text-warning); border-color: transparent; }
|
||
.pill.danger { background: var(--color-background-danger); color: var(--color-text-danger); border-color: transparent; }
|
||
|
||
.node-card {
|
||
background: var(--color-background-primary);
|
||
border: 0.5px solid var(--color-border-secondary);
|
||
border-radius: var(--border-radius-md);
|
||
padding: 10px 12px;
|
||
font-size: 12px;
|
||
}
|
||
.node-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
|
||
.node-label { font-size: 11px; font-weight: 500; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
|
||
.node-thumb {
|
||
border-radius: 4px;
|
||
background: var(--color-background-tertiary);
|
||
border: 0.5px solid var(--color-border-tertiary);
|
||
}
|
||
.connector-dot {
|
||
width: 10px; height: 10px; border-radius: 50%;
|
||
background: var(--color-background-primary);
|
||
border: 1.5px solid var(--color-border-secondary);
|
||
position: absolute;
|
||
}
|
||
.divider { border: none; border-top: 0.5px solid var(--color-border-tertiary); margin: 12px 0; }
|
||
.label-row { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--color-text-secondary); margin-bottom: 4px; }
|
||
.label-row strong { color: var(--color-text-primary); font-weight: 500; }
|
||
|
||
.shimmer {
|
||
background: linear-gradient(90deg, var(--color-background-tertiary) 25%, var(--color-background-secondary) 50%, var(--color-background-tertiary) 75%);
|
||
background-size: 200% 100%;
|
||
animation: shimmer 1.6s infinite;
|
||
border-radius: 4px;
|
||
}
|
||
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
|
||
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } }
|
||
|
||
input, select, textarea, button {
|
||
font-family: var(--font-sans);
|
||
color: var(--color-text-primary);
|
||
background: var(--color-background-secondary);
|
||
border: 0.5px solid var(--color-border-tertiary);
|
||
border-radius: var(--border-radius-md);
|
||
padding: 5px 8px;
|
||
font-size: 12px;
|
||
outline: none;
|
||
}
|
||
button { cursor: pointer; }
|
||
textarea { resize: none; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="page-header">
|
||
<h1>🍋 LemonSpace — Wireframes</h1>
|
||
<span>Mid-Fi · v1 · März 2026</span>
|
||
</div>
|
||
|
||
<div class="nav" id="nav">
|
||
<button class="nav-btn sel" data-screen="0">1 — Canvas interface</button>
|
||
<button class="nav-btn" data-screen="1">2 — Node status & skeletons</button>
|
||
<button class="nav-btn" data-screen="2">3 — Agent clarification UX</button>
|
||
<button class="nav-btn" data-screen="3">4 — Dashboard</button>
|
||
</div>
|
||
|
||
<!-- SCREEN 1: Canvas Interface -->
|
||
<div class="wf active" id="wf-0">
|
||
<div class="screen-wrap">
|
||
<div class="topbar">
|
||
<div class="dot dot-r"></div><div class="dot dot-y"></div><div class="dot dot-g"></div>
|
||
<span class="tb-title">LemonSpace — Brand Campaign Q2</span>
|
||
<div style="margin-left: auto; display:flex; gap:6px; align-items:center;">
|
||
<span class="pill active">Autosaved</span>
|
||
<span class="pill">Share</span>
|
||
<div style="width:22px;height:22px;border-radius:50%;background:var(--color-background-info);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--color-text-info);font-weight:500;">MH</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display: flex; height: 560px;">
|
||
|
||
<!-- Left sidebar -->
|
||
<div style="width: 200px; flex-shrink:0; background:var(--color-background-primary); border-right:0.5px solid var(--color-border-tertiary); padding:12px; overflow-y:auto; display:flex;flex-direction:column;gap:12px;">
|
||
<div>
|
||
<div class="label-row" style="margin-bottom:8px;"><strong>Quelle</strong></div>
|
||
<div style="display:flex;flex-direction:column;gap:4px;">
|
||
<div class="node-card" style="padding:7px 10px; cursor:grab;">
|
||
<div style="display:flex;align-items:center;gap:6px;">
|
||
<svg width="13" height="13" viewBox="0 0 16 16" fill="none"><rect x="1" y="1" width="14" height="14" rx="2" stroke="currentColor" stroke-width="1.2"/><path d="M1 11l4-4 3 3 2-2 4 4" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/></svg>
|
||
<span style="font-size:12px;">Bild</span>
|
||
</div>
|
||
</div>
|
||
<div class="node-card" style="padding:7px 10px; cursor:grab;">
|
||
<div style="display:flex;align-items:center;gap:6px;">
|
||
<svg width="13" height="13" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" rx="1" fill="currentColor" opacity=".5"/><rect x="1" y="7" width="10" height="2" rx="1" fill="currentColor" opacity=".5"/><rect x="1" y="11" width="12" height="2" rx="1" fill="currentColor" opacity=".5"/></svg>
|
||
<span style="font-size:12px;">Text</span>
|
||
</div>
|
||
</div>
|
||
<div class="node-card" style="padding:7px 10px; cursor:grab; opacity:.5;">
|
||
<div style="display:flex;align-items:center;gap:6px;">
|
||
<svg width="13" height="13" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.2"/><path d="M6 8l2-3 2 3H6z" fill="currentColor" opacity=".5"/></svg>
|
||
<span style="font-size:12px;">Prompt <span style="font-size:10px;opacity:.6;">Phase 2</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<hr class="divider">
|
||
<div>
|
||
<div class="label-row" style="margin-bottom:8px;"><strong>KI-Ausgabe</strong></div>
|
||
<div style="display:flex;flex-direction:column;gap:4px;">
|
||
<div class="node-card" style="padding:7px 10px; cursor:grab;">
|
||
<div style="display:flex;align-items:center;gap:6px;">
|
||
<svg width="13" height="13" viewBox="0 0 16 16" fill="none"><path d="M8 2L9.6 6.4H14L10.4 9 11.6 14 8 11.2 4.4 14 5.6 9 2 6.4H6.4L8 2z" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/></svg>
|
||
<span style="font-size:12px;">KI-Bild</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<hr class="divider">
|
||
<div>
|
||
<div class="label-row" style="margin-bottom:8px;"><strong>Canvas & Layout</strong></div>
|
||
<div style="display:flex;flex-direction:column;gap:4px;">
|
||
<div class="node-card" style="padding:7px 10px; cursor:grab;">
|
||
<div style="display:flex;align-items:center;gap:6px;">
|
||
<svg width="13" height="13" viewBox="0 0 16 16" fill="none"><rect x="1" y="1" width="14" height="14" rx="2" stroke="currentColor" stroke-width="1.2" stroke-dasharray="3 2"/></svg>
|
||
<span style="font-size:12px;">Frame</span>
|
||
</div>
|
||
</div>
|
||
<div class="node-card" style="padding:7px 10px; cursor:grab;">
|
||
<div style="display:flex;align-items:center;gap:6px;">
|
||
<svg width="13" height="13" viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.2"/><rect x="9" y="2" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.2"/><rect x="2" y="9" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.2"/></svg>
|
||
<span style="font-size:12px;">Gruppe</span>
|
||
</div>
|
||
</div>
|
||
<div class="node-card" style="padding:7px 10px; cursor:grab;">
|
||
<div style="display:flex;align-items:center;gap:6px;">
|
||
<svg width="13" height="13" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="10" rx="2" stroke="currentColor" stroke-width="1.2"/><path d="M5 7h6M5 9.5h4" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>
|
||
<span style="font-size:12px;">Notiz</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Canvas area -->
|
||
<div style="flex:1; position:relative; overflow:hidden; background: radial-gradient(circle, var(--color-border-tertiary) 1px, transparent 1px); background-size: 24px 24px;">
|
||
<svg style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;">
|
||
<path d="M 222 130 C 270 130, 270 200, 320 200" stroke="var(--color-border-secondary)" stroke-width="1.5" fill="none"/>
|
||
<path d="M 222 130 C 270 130, 270 300, 320 300" stroke="var(--color-border-secondary)" stroke-width="1.5" fill="none"/>
|
||
<path d="M 490 200 C 540 200, 540 250, 590 250" stroke="var(--color-border-secondary)" stroke-width="1.5" fill="none"/>
|
||
</svg>
|
||
|
||
<div class="node-card" style="position:absolute; left:80px; top:96px; width:150px;">
|
||
<div class="node-header">
|
||
<span class="node-label">Quelle</span>
|
||
<span class="pill success" style="font-size:10px; padding:1px 6px;">Bild</span>
|
||
</div>
|
||
<div class="node-thumb" style="height:80px;display:flex;align-items:center;justify-content:center;">
|
||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none"><rect x="1" y="1" width="26" height="26" rx="3" stroke="var(--color-border-secondary)" stroke-width="1.2"/><path d="M1 19l7-7 5 5 4-4 9 9" stroke="var(--color-border-secondary)" stroke-width="1.5" stroke-linejoin="round"/></svg>
|
||
</div>
|
||
<div style="margin-top:6px;font-size:11px;color:var(--color-text-secondary);">product-hero.jpg</div>
|
||
<div class="connector-dot" style="right:-5px;top:50%;transform:translateY(-50%);"></div>
|
||
</div>
|
||
|
||
<div class="node-card" style="position:absolute; left:320px; top:170px; width:170px;">
|
||
<div class="node-header">
|
||
<span class="node-label">KI-Ausgabe</span>
|
||
<span class="pill active" style="font-size:10px; padding:1px 6px;">KI-Bild</span>
|
||
</div>
|
||
<div class="node-thumb" style="height:90px;display:flex;align-items:center;justify-content:center;">
|
||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M14 4L16.8 11.2H24L18 15.6 20.4 24 14 19.6 7.6 24 10 15.6 4 11.2H11.2L14 4z" stroke="var(--color-border-info)" stroke-width="1.2" stroke-linejoin="round" fill="var(--color-background-info)"/></svg>
|
||
</div>
|
||
<div style="margin-top:6px;font-size:11px;color:var(--color-text-secondary);">Gemini 2.5 Flash</div>
|
||
<div style="font-size:11px;color:var(--color-text-secondary);margin-top:2px;">~€0,03 / Bild</div>
|
||
<div class="connector-dot" style="left:-5px;top:50%;transform:translateY(-50%);"></div>
|
||
<div class="connector-dot" style="right:-5px;top:50%;transform:translateY(-50%);"></div>
|
||
</div>
|
||
|
||
<div class="node-card" style="position:absolute; left:320px; top:280px; width:170px; opacity:.7;">
|
||
<div class="node-header">
|
||
<span class="node-label">KI-Ausgabe</span>
|
||
<span class="pill active" style="font-size:10px; padding:1px 6px;">KI-Bild</span>
|
||
</div>
|
||
<div class="node-thumb" style="height:90px;display:flex;align-items:center;justify-content:center;">
|
||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M14 4L16.8 11.2H24L18 15.6 20.4 24 14 19.6 7.6 24 10 15.6 4 11.2H11.2L14 4z" stroke="var(--color-border-info)" stroke-width="1.2" stroke-linejoin="round" fill="var(--color-background-info)"/></svg>
|
||
</div>
|
||
<div class="connector-dot" style="left:-5px;top:50%;transform:translateY(-50%);"></div>
|
||
</div>
|
||
|
||
<div style="position:absolute;left:570px;top:180px;width:180px;height:140px;border:1.5px dashed var(--color-border-info);border-radius:6px;background:var(--color-background-info);opacity:.25;"></div>
|
||
<div style="position:absolute;left:574px;top:167px;font-size:11px;color:var(--color-text-info);font-weight:500;">Frame — 1080×1080px</div>
|
||
|
||
<div style="position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:6px;background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:99px;padding:5px 10px;">
|
||
<button style="padding:3px 10px;border-radius:99px;border:none;background:transparent;font-size:12px;color:var(--color-text-secondary);">Fit</button>
|
||
<div style="width:0.5px;background:var(--color-border-tertiary);"></div>
|
||
<button style="padding:3px 10px;border-radius:99px;border:none;background:transparent;font-size:12px;color:var(--color-text-secondary);">50%</button>
|
||
<div style="width:0.5px;background:var(--color-border-tertiary);"></div>
|
||
<button style="padding:3px 10px;border-radius:99px;border:none;background:transparent;font-size:12px;color:var(--color-text-secondary);">100%</button>
|
||
<div style="width:0.5px;background:var(--color-border-tertiary);"></div>
|
||
<button style="padding:3px 10px;border-radius:99px;border:none;background:var(--color-background-info);font-size:12px;color:var(--color-text-info);font-weight:500;">+ Node</button>
|
||
</div>
|
||
|
||
<div style="position:absolute;top:10px;right:10px;display:flex;align-items:center;gap:6px;background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:99px;padding:4px 10px;font-size:11px;">
|
||
<span style="color:var(--color-text-secondary);">Credits:</span>
|
||
<strong style="color:var(--color-text-primary); font-weight:500;">€34,18</strong>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right inspector -->
|
||
<div style="width:220px;flex-shrink:0;background:var(--color-background-primary);border-left:0.5px solid var(--color-border-tertiary);padding:14px;overflow-y:auto;">
|
||
<div style="font-size:12px;font-weight:500;color:var(--color-text-primary);margin-bottom:12px;">KI-Bild — Inspector</div>
|
||
<div style="display:flex;flex-direction:column;gap:10px;">
|
||
<div>
|
||
<div class="label-row"><span>Modell</span></div>
|
||
<select style="width:100%;font-size:12px;">
|
||
<option>Gemini 2.5 Flash Image</option>
|
||
<option>FLUX.2 Klein 4B</option>
|
||
<option>GPT-5 Image</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<div class="label-row"><span>Prompt</span></div>
|
||
<textarea style="width:100%;font-size:12px;height:70px;background:var(--color-background-secondary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-md);padding:6px 8px;color:var(--color-text-primary);">Product on white background, studio lighting, soft shadows</textarea>
|
||
</div>
|
||
<div>
|
||
<div class="label-row"><span>Auflösung</span></div>
|
||
<select style="width:100%;font-size:12px;"><option>1024×1024</option><option>1792×1024</option></select>
|
||
</div>
|
||
<hr class="divider">
|
||
<div style="display:flex;justify-content:space-between;font-size:11px;">
|
||
<span style="color:var(--color-text-secondary);">Geschätzte Kosten</span>
|
||
<span style="font-weight:500;">~€0,03</span>
|
||
</div>
|
||
<button style="width:100%;padding:7px;font-size:12px;font-weight:500;border-radius:var(--border-radius-md);border:none;background:var(--color-background-info);color:var(--color-text-info);">Generieren</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SCREEN 2: Node Status & Skeletons -->
|
||
<div class="wf" id="wf-1">
|
||
<div class="screen-wrap">
|
||
<div class="topbar">
|
||
<div class="dot dot-r"></div><div class="dot dot-y"></div><div class="dot dot-g"></div>
|
||
<span class="tb-title">Node Status — Ausführungsmodell</span>
|
||
</div>
|
||
<div style="padding:20px;background:var(--color-background-secondary);">
|
||
<div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;">
|
||
<div>
|
||
<div class="label-row" style="margin-bottom:8px;"><strong>Idle</strong></div>
|
||
<div class="node-card">
|
||
<div class="node-header"><span class="node-label">KI-Bild</span><span class="pill" style="font-size:10px;padding:1px 6px;">idle</span></div>
|
||
<div class="node-thumb" style="height:70px;display:flex;align-items:center;justify-content:center;opacity:.4;">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 3L14 9H20L15 13L17 20L12 16L7 20L9 13L4 9H10L12 3Z" stroke="currentColor" stroke-width="1.2" fill="none"/></svg>
|
||
</div>
|
||
<div style="font-size:11px;color:var(--color-text-secondary);margin-top:6px;">Bereit zur Ausführung</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="label-row" style="margin-bottom:8px;"><strong>Executing</strong></div>
|
||
<div class="node-card" style="border-color:var(--color-border-info);">
|
||
<div class="node-header"><span class="node-label">KI-Bild</span><span class="pill active" style="font-size:10px;padding:1px 6px;">executing</span></div>
|
||
<div class="node-thumb" style="height:70px;display:flex;align-items:center;justify-content:center;">
|
||
<div style="display:flex;gap:5px;align-items:center;">
|
||
<div style="width:6px;height:6px;border-radius:50%;background:var(--color-text-info);animation:pulse 1s 0s infinite;"></div>
|
||
<div style="width:6px;height:6px;border-radius:50%;background:var(--color-text-info);animation:pulse 1s 0.2s infinite;"></div>
|
||
<div style="width:6px;height:6px;border-radius:50%;background:var(--color-text-info);animation:pulse 1s 0.4s infinite;"></div>
|
||
</div>
|
||
</div>
|
||
<div style="font-size:11px;color:var(--color-text-info);margin-top:6px;">Gemini 2.5 Flash — ~€0,03 reserviert</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="label-row" style="margin-bottom:8px;"><strong>Done</strong></div>
|
||
<div class="node-card" style="border-color:var(--color-border-success);">
|
||
<div class="node-header"><span class="node-label">KI-Bild</span><span class="pill success" style="font-size:10px;padding:1px 6px;">done</span></div>
|
||
<div class="node-thumb" style="height:70px;display:flex;align-items:center;justify-content:center;">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="2" y="2" width="20" height="20" rx="3" fill="var(--color-background-success)"/><path d="M4 14l5 5 10-10" stroke="var(--color-text-success)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</div>
|
||
<div style="font-size:11px;color:var(--color-text-success);margin-top:6px;">€0,028 verbucht — 4,2s</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="label-row" style="margin-bottom:8px;"><strong>Error</strong></div>
|
||
<div class="node-card" style="border-color:var(--color-border-danger);">
|
||
<div class="node-header"><span class="node-label">KI-Bild</span><span class="pill danger" style="font-size:10px;padding:1px 6px;">error</span></div>
|
||
<div class="node-thumb" style="height:70px;display:flex;align-items:center;justify-content:center;">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="2" y="2" width="20" height="20" rx="3" fill="var(--color-background-danger)"/><path d="M8 8l8 8M16 8l-8 8" stroke="var(--color-text-danger)" stroke-width="1.8" stroke-linecap="round"/></svg>
|
||
</div>
|
||
<div style="font-size:11px;color:var(--color-text-danger);margin-top:6px;">Timeout — Credits nicht abgebucht</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="divider" style="margin:20px 0;">
|
||
<div style="font-size:13px;font-weight:500;color:var(--color-text-primary);margin-bottom:12px;">Skeleton-Nodes — Agent Execution Plan</div>
|
||
<div style="background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-md);padding:12px;margin-bottom:12px;">
|
||
<div style="font-size:11px;color:var(--color-text-secondary);margin-bottom:10px;">
|
||
Agent hat Plan erstellt: <strong style="color:var(--color-text-primary);">3× KI-Bild, 2× KI-Text, 1× Text-Overlay</strong> — Skeleton-Nodes platziert
|
||
</div>
|
||
<div style="display:flex;gap:8px;flex-wrap:wrap;">
|
||
<div class="node-card" style="width:110px;border-color:var(--color-border-success);">
|
||
<div style="font-size:10px;color:var(--color-text-success);font-weight:500;margin-bottom:6px;">KI-Bild 1/3</div>
|
||
<div style="height:50px;display:flex;align-items:center;justify-content:center;background:var(--color-background-success);border-radius:4px;">
|
||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M9 2l1.5 4.5H15L11.5 9l1.5 5L9 11.5 5 14l1.5-5L3 6.5h4.5L9 2z" stroke="var(--color-text-success)" stroke-width="1.2" fill="none"/></svg>
|
||
</div>
|
||
</div>
|
||
<div class="node-card" style="width:110px;border-color:var(--color-border-info);">
|
||
<div style="font-size:10px;color:var(--color-text-info);font-weight:500;margin-bottom:6px;">KI-Bild 2/3</div>
|
||
<div class="shimmer" style="height:50px;"></div>
|
||
</div>
|
||
<div class="node-card" style="width:110px;opacity:.55;">
|
||
<div style="font-size:10px;color:var(--color-text-secondary);font-weight:500;margin-bottom:6px;">KI-Bild 3/3</div>
|
||
<div class="shimmer" style="height:50px;opacity:.5;"></div>
|
||
</div>
|
||
<div class="node-card" style="width:110px;opacity:.55;">
|
||
<div style="font-size:10px;color:var(--color-text-secondary);font-weight:500;margin-bottom:6px;">KI-Text 1/2</div>
|
||
<div style="display:flex;flex-direction:column;gap:3px;">
|
||
<div class="shimmer" style="height:8px;opacity:.5;"></div>
|
||
<div class="shimmer" style="height:8px;width:70%;opacity:.5;"></div>
|
||
<div class="shimmer" style="height:8px;width:85%;opacity:.5;"></div>
|
||
</div>
|
||
</div>
|
||
<div class="node-card" style="width:110px;opacity:.55;">
|
||
<div style="font-size:10px;color:var(--color-text-secondary);font-weight:500;margin-bottom:6px;">KI-Text 2/2</div>
|
||
<div style="display:flex;flex-direction:column;gap:3px;">
|
||
<div class="shimmer" style="height:8px;opacity:.5;"></div>
|
||
<div class="shimmer" style="height:8px;width:60%;opacity:.5;"></div>
|
||
</div>
|
||
</div>
|
||
<div class="node-card" style="width:110px;opacity:.55;">
|
||
<div style="font-size:10px;color:var(--color-text-secondary);font-weight:500;margin-bottom:6px;">Text-Overlay</div>
|
||
<div class="shimmer" style="height:50px;opacity:.5;"></div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:10px;font-size:11px;color:var(--color-text-secondary);">
|
||
<span class="pill active" style="font-size:10px;margin-right:6px;">executing 2/6</span>
|
||
Nodes verschiebbar — Position bleibt bei Output-Ersatz erhalten
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SCREEN 3: Agent Clarification -->
|
||
<div class="wf" id="wf-2">
|
||
<div class="screen-wrap">
|
||
<div class="topbar">
|
||
<div class="dot dot-r"></div><div class="dot dot-y"></div><div class="dot dot-g"></div>
|
||
<span class="tb-title">Agent Clarification — 3 Varianten</span>
|
||
</div>
|
||
<div style="padding:20px;background:var(--color-background-secondary);">
|
||
<div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;">
|
||
|
||
<div>
|
||
<div class="label-row" style="margin-bottom:8px;"><strong>Option A</strong> <span>— Inline am Node</span></div>
|
||
<div class="node-card" style="border-color:var(--color-border-warning);">
|
||
<div class="node-header"><span class="node-label">Agent</span><span class="pill warn" style="font-size:10px;padding:1px 6px;">clarifying</span></div>
|
||
<div style="font-size:11px;color:var(--color-text-secondary);margin:6px 0 8px;">Instagram Curator</div>
|
||
<div style="background:var(--color-background-warning);border-radius:4px;padding:8px;margin-bottom:8px;">
|
||
<div style="font-size:11px;color:var(--color-text-warning);font-weight:500;margin-bottom:4px;">Fehlende Angabe</div>
|
||
<div style="font-size:11px;color:var(--color-text-warning);">Welche Zielgruppe soll angesprochen werden?</div>
|
||
</div>
|
||
<textarea style="width:100%;font-size:11px;height:44px;background:var(--color-background-secondary);border:0.5px solid var(--color-border-warning);border-radius:4px;padding:5px 7px;color:var(--color-text-primary);" placeholder="Antwort eingeben..."></textarea>
|
||
<button style="margin-top:6px;width:100%;padding:5px;font-size:11px;border-radius:4px;border:none;background:var(--color-background-warning);color:var(--color-text-warning);font-weight:500;">Weiter</button>
|
||
</div>
|
||
<div style="margin-top:8px;font-size:11px;color:var(--color-text-secondary);line-height:1.6;">
|
||
+ Direkt am Node, kein Kontextverlust<br>
|
||
+ Canvas bleibt sichtbar<br>
|
||
− Wenig Platz für lange Antworten
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="label-row" style="margin-bottom:8px;"><strong>Option B</strong> <span>— Modal</span></div>
|
||
<div style="min-height:200px;background:rgba(0,0,0,0.35);border-radius:var(--border-radius-md);display:flex;align-items:center;justify-content:center;padding:16px;">
|
||
<div class="node-card" style="width:100%;max-width:260px;border-color:var(--color-border-warning);">
|
||
<div style="font-size:13px;font-weight:500;color:var(--color-text-primary);margin-bottom:4px;">Agent braucht Angaben</div>
|
||
<div style="font-size:11px;color:var(--color-text-secondary);margin-bottom:10px;">Instagram Curator — Clarification</div>
|
||
<div style="font-size:12px;color:var(--color-text-primary);margin-bottom:6px;">Welche Zielgruppe soll angesprochen werden?</div>
|
||
<textarea style="width:100%;font-size:12px;height:60px;background:var(--color-background-secondary);border:0.5px solid var(--color-border-tertiary);border-radius:4px;padding:6px 8px;color:var(--color-text-primary);" placeholder="z.B. 25–35, Mode-affin, urban"></textarea>
|
||
<div style="display:flex;gap:6px;margin-top:8px;">
|
||
<button style="flex:1;padding:6px;font-size:11px;border-radius:4px;border:0.5px solid var(--color-border-secondary);background:transparent;color:var(--color-text-secondary);">Abbrechen</button>
|
||
<button style="flex:1;padding:6px;font-size:11px;border-radius:4px;border:none;background:var(--color-background-info);color:var(--color-text-info);font-weight:500;">Weiter</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:8px;font-size:11px;color:var(--color-text-secondary);line-height:1.6;">
|
||
+ Mehr Platz, klarer Fokus<br>
|
||
+ Bekanntes Interaktionsmuster<br>
|
||
− Canvas wird verdeckt
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="label-row" style="margin-bottom:8px;"><strong>Option C</strong> <span>— Chat-Sidebar</span></div>
|
||
<div style="background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-md);overflow:hidden;">
|
||
<div style="padding:8px 10px;border-bottom:0.5px solid var(--color-border-tertiary);font-size:11px;font-weight:500;">Agent — Instagram Curator</div>
|
||
<div style="padding:10px;display:flex;flex-direction:column;gap:6px;min-height:130px;">
|
||
<div style="align-self:flex-start;background:var(--color-background-secondary);border-radius:0 6px 6px 6px;padding:6px 8px;font-size:11px;max-width:85%;">Ich habe alle Inputs analysiert. Eine Angabe fehlt noch: Welche Zielgruppe soll angesprochen werden?</div>
|
||
<div style="align-self:flex-end;background:var(--color-background-info);border-radius:6px 0 6px 6px;padding:6px 8px;font-size:11px;color:var(--color-text-info);max-width:85%;">25–35, Mode-affin, urban</div>
|
||
<div style="align-self:flex-start;background:var(--color-background-secondary);border-radius:0 6px 6px 6px;padding:6px 8px;font-size:11px;color:var(--color-text-success);max-width:85%;">Danke! Starte jetzt Execution...</div>
|
||
</div>
|
||
<div style="padding:6px 8px;border-top:0.5px solid var(--color-border-tertiary);display:flex;gap:6px;">
|
||
<input type="text" placeholder="Antworten..." style="flex:1;font-size:11px;padding:4px 7px;"/>
|
||
<button style="padding:4px 10px;font-size:11px;border-radius:4px;border:none;background:var(--color-background-info);color:var(--color-text-info);">→</button>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:8px;font-size:11px;color:var(--color-text-secondary);line-height:1.6;">
|
||
+ Natürlich, erweiterbar auf Multi-Turn<br>
|
||
+ Verlauf bleibt sichtbar<br>
|
||
− Platzbedarf, Canvas verkleinert
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="divider" style="margin:20px 0;">
|
||
<div style="background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-md);padding:12px;">
|
||
<div style="font-size:12px;font-weight:500;color:var(--color-text-primary);margin-bottom:6px;">Empfehlung zur Entscheidung</div>
|
||
<div style="font-size:12px;color:var(--color-text-secondary);line-height:1.6;">Option A (inline) passt am besten zur Canvas-nativen Philosophie von LemonSpace. Option C (Chat) skaliert besser für komplexere Agent-Workflows mit mehreren Rückfragen. Option B (Modal) ist der sicherste UX-Kompromiss — vertraut, fokussiert, aber ohne Canvas-Nähe.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SCREEN 4: Dashboard -->
|
||
<div class="wf" id="wf-3">
|
||
<div class="screen-wrap">
|
||
<div class="topbar">
|
||
<div class="dot dot-r"></div><div class="dot dot-y"></div><div class="dot dot-g"></div>
|
||
<span class="tb-title">LemonSpace — Dashboard</span>
|
||
<div style="margin-left:auto;display:flex;gap:8px;align-items:center;">
|
||
<span class="pill">Starter</span>
|
||
<div style="width:22px;height:22px;border-radius:50%;background:var(--color-background-info);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--color-text-info);font-weight:500;">MH</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display:flex;height:520px;">
|
||
<div style="width:180px;flex-shrink:0;background:var(--color-background-primary);border-right:0.5px solid var(--color-border-tertiary);padding:16px 10px;display:flex;flex-direction:column;gap:2px;">
|
||
<div style="font-size:11px;color:var(--color-text-secondary);padding:4px 8px;margin-bottom:4px;letter-spacing:.04em;">LemonSpace</div>
|
||
<div style="padding:6px 8px;border-radius:var(--border-radius-md);background:var(--color-background-secondary);font-size:12px;color:var(--color-text-primary);">Alle Canvases</div>
|
||
<div style="padding:6px 8px;border-radius:var(--border-radius-md);font-size:12px;color:var(--color-text-secondary);">Zuletzt geöffnet</div>
|
||
<div style="padding:6px 8px;border-radius:var(--border-radius-md);font-size:12px;color:var(--color-text-secondary);">Templates</div>
|
||
<hr class="divider" style="margin:8px 0;">
|
||
<div style="font-size:11px;color:var(--color-text-secondary);padding:4px 8px;letter-spacing:.04em;">Konto</div>
|
||
<div style="padding:6px 8px;border-radius:var(--border-radius-md);font-size:12px;color:var(--color-text-secondary);">Credits & Abo</div>
|
||
<div style="padding:6px 8px;border-radius:var(--border-radius-md);font-size:12px;color:var(--color-text-secondary);">Einstellungen</div>
|
||
<div style="margin-top:auto;background:var(--color-background-secondary);border-radius:var(--border-radius-md);padding:10px;">
|
||
<div style="font-size:11px;color:var(--color-text-secondary);margin-bottom:4px;">Credits verbleibend</div>
|
||
<div style="font-size:18px;font-weight:500;color:var(--color-text-primary);">€6,18</div>
|
||
<div style="height:4px;background:var(--color-border-tertiary);border-radius:2px;margin:6px 0;">
|
||
<div style="height:4px;width:98%;background:var(--color-text-info);border-radius:2px;"></div>
|
||
</div>
|
||
<div style="font-size:10px;color:var(--color-text-secondary);">Starter — erneuert am 1. Apr</div>
|
||
<button style="margin-top:6px;width:100%;padding:4px;font-size:11px;border-radius:4px;border:0.5px solid var(--color-border-secondary);background:transparent;color:var(--color-text-secondary);">Upgrade</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="flex:1;padding:20px;overflow-y:auto;background:var(--color-background-secondary);">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;">
|
||
<div style="font-size:15px;font-weight:500;color:var(--color-text-primary);">Meine Canvases</div>
|
||
<button style="padding:6px 14px;font-size:12px;font-weight:500;border-radius:var(--border-radius-md);border:none;background:var(--color-background-info);color:var(--color-text-info);">+ Neuer Canvas</button>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;">
|
||
<div class="node-card" style="cursor:pointer;">
|
||
<div class="node-thumb" style="height:90px;margin-bottom:8px;display:flex;align-items:center;justify-content:center;background:var(--color-background-info);">
|
||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none"><rect x="4" y="4" width="24" height="24" rx="4" stroke="var(--color-border-info)" stroke-width="1.5"/><path d="M4 20l8-8 5 5 4-4 9 9" stroke="var(--color-border-info)" stroke-width="1.5" stroke-linejoin="round"/></svg>
|
||
</div>
|
||
<div style="font-size:13px;font-weight:500;">Brand Campaign Q2</div>
|
||
<div style="font-size:11px;color:var(--color-text-secondary);margin-top:2px;">12 Nodes · vor 2h</div>
|
||
</div>
|
||
<div class="node-card" style="cursor:pointer;">
|
||
<div class="node-thumb" style="height:90px;margin-bottom:8px;display:flex;align-items:center;justify-content:center;background:var(--color-background-success);">
|
||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none"><rect x="4" y="4" width="24" height="24" rx="4" stroke="var(--color-border-success)" stroke-width="1.5"/><path d="M8 16l5 5 10-10" stroke="var(--color-border-success)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</div>
|
||
<div style="font-size:13px;font-weight:500;">Instagram Curator Test</div>
|
||
<div style="font-size:11px;color:var(--color-text-secondary);margin-top:2px;">8 Nodes · gestern</div>
|
||
</div>
|
||
<div class="node-card" style="cursor:pointer;border-style:dashed;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:140px;opacity:.6;">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 4v16M4 12h16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||
<div style="font-size:12px;color:var(--color-text-secondary);margin-top:6px;">Neuer Canvas</div>
|
||
</div>
|
||
</div>
|
||
<hr class="divider" style="margin:20px 0;">
|
||
<div style="font-size:13px;font-weight:500;color:var(--color-text-primary);margin-bottom:12px;">Templates</div>
|
||
<div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;">
|
||
<div class="node-card" style="cursor:pointer;">
|
||
<div style="font-size:12px;font-weight:500;margin-bottom:2px;">Instagram Curator</div>
|
||
<div style="font-size:11px;color:var(--color-text-secondary);">Agent · Phase 2</div>
|
||
</div>
|
||
<div class="node-card" style="cursor:pointer;opacity:.5;">
|
||
<div style="font-size:12px;font-weight:500;margin-bottom:2px;">Product Batch</div>
|
||
<div style="font-size:11px;color:var(--color-text-secondary);">Agent · coming soon</div>
|
||
</div>
|
||
<div class="node-card" style="cursor:pointer;opacity:.5;">
|
||
<div style="font-size:12px;font-weight:500;margin-bottom:2px;">Brand Guidelines</div>
|
||
<div style="font-size:11px;color:var(--color-text-secondary);">Agent · coming soon</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const btns = document.querySelectorAll('.nav-btn');
|
||
const screens = document.querySelectorAll('.wf');
|
||
btns.forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
const i = +btn.dataset.screen;
|
||
btns.forEach(b => b.classList.remove('sel'));
|
||
screens.forEach(s => s.classList.remove('active'));
|
||
btn.classList.add('sel');
|
||
screens[i].classList.add('active');
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|