Video-Showreel-Generator in einer einzigen HTML-Datei
Von Wikiprompt, der freien Prompt-Enzyklopädie
Video-Showreel-Generator in einer einzigen HTML-Datei Ein umfassender Prompt zum Erstellen eines Video-Showreel-Generators in einer einzigen HTML-Datei, der Storyboard, Skript, visuelle Sequenz, Audio-Regie und Produktions-Checkliste mit Datenpersistenz abdeckt.
Prompt-InhaltSpeichern
🌐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Showreel Studio · video brief generator</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: system-ui, -apple-system, 'Inter', 'Segoe UI', Roboto, sans-serif;
}
:root {
--primary: #4f46e5;
--bg: #f8fafc;
--surface: #ffffff;
--text: #0f172a;
--muted: #64748b;
--border: #e2e8f0;
--shadow: 0 4px 20px rgba(0,0,0,0.04);
--radius: 20px;
--accent-soft: #eef2ff;
}
body.dark {
--bg: #0b1120;
--surface: #1e293b;
--text: #e2e8f0;
--muted: #94a3b8;
--border: #334155;
--shadow: 0 8px 30px rgba(0,0,0,0.3);
--accent-soft: #1e1b4b;
}
body {
background: var(--bg);
color: var(--text);
transition: background 0.2s, color 0.2s;
padding: 24px;
line-height: 1.5;
}
.app {
max-width: 1400px;
margin: 0 auto;
}
.topbar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 28px;
flex-wrap: wrap;
gap: 12px;
}
.logo {
font-weight: 700;
font-size: 1.6rem;
letter-spacing: -0.02em;
display: flex;
align-items: center;
gap: 8px;
}
.logo span {
background: var(--primary);
color: white;
padding: 4px 12px;
border-radius: 40px;
font-size: 0.8rem;
font-weight: 500;
}
.controls {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
button, .btn {
background: var(--surface);
border: 1px solid var(--border);
padding: 8px 16px;
border-radius: 40px;
font-weight: 500;
font-size: 0.9rem;
cursor: pointer;
color: var(--text);
transition: 0.15s;
box-shadow: var(--shadow);
display: inline-flex;
align-items: center;
gap: 6px;
}
button.primary, .btn.primary {
background: var(--primary);
border-color: var(--primary);
color: white;
}
button:hover, .btn:hover {
opacity: 0.85;
transform: translateY(-1px);
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px;
}
.card {
background: var(--surface);
border-radius: var(--radius);
padding: 20px;
box-shadow: var(--shadow);
border: 1px solid var(--border);
transition: 0.1s;
}
.card h3 {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
.card h3 .badge {
font-size: 0.7rem;
background: var(--accent-soft);
padding: 4px 10px;
border-radius: 30px;
color: var(--primary);
font-weight: 500;
}
.field {
margin-bottom: 14px;
}
.field label {
display: block;
font-size: 0.8rem;
font-weight: 500;
margin-bottom: 4px;
color: var(--muted);
}
.field input, .field select, .field textarea {
width: 100%;
padding: 10px 12px;
border-radius: 14px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--text);
font-size: 0.9rem;
}
.field textarea {
min-height: 70px;
resize: vertical;
}
.row {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
}
.scene-item, .script-item, .audio-item, .check-item {
background: var(--bg);
border-radius: 14px;
padding: 12px;
margin-bottom: 10px;
border-left: 4px solid var(--primary);
}
.scene-item .meta, .script-item .meta {
display: flex;
gap: 12px;
font-size: 0.8rem;
color: var(--muted);
flex-wrap: wrap;
}
.placeholder-img {
background: linear-gradient(135deg, #cbd5e1, #94a3b8);
height: 60px;
border-radius: 10px;
margin: 8px 0;
display: flex;
align-items: center;
justify-content: center;
color: #1e293b;
font-size: 0.8rem;
font-weight: 500;
}
.dark .placeholder-img {
background: #334155;
color: #cbd5e1;
}
.checklist-item {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 0;
}
.checklist-item input[type="checkbox"] {
accent-color: var(--primary);
width: 18px;
height: 18px;
}
.export-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 12px;
}
.color-dot {
display: inline-block;
width: 18px;
height: 18px;
border-radius: 6px;
margin-right: 4px;
border: 1px solid var(--border);
}
.footer-actions {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 30px;
flex-wrap: wrap;
}
.hidden {
display: none;
}
.toast {
position: fixed;
bottom: 20px;
right: 20px;
background: var(--primary);
color: white;
padding: 12px 20px;
border-radius: 40px;
font-size: 0.9rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
z-index: 1000;
opacity: 0;
transition: 0.2s;
pointer-events: none;
}
.toast.show {
opacity: 1;
}
@media (max-width: 700px) {
body { padding: 12px; }
.grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<div class="app">
<div class="topbar">
<div class="logo">🎬 Showreel<span>studio</span></div>
<div class="controls">
<button id="themeToggle" title="toggle dark/light">🌓</button>
<button id="colorPrimaryBtn" title="change primary color">🎨</button>
<button id="exportJsonBtn">⬇️ export JSON</button>
<button id="importJsonBtn">⬆️ import</button>
<input type="file" id="importFile" accept=".json" class="hidden">
</div>
</div>
<!-- brief + templates -->
<div class="grid">
<div class="card">
<h3>📋 Project brief <span class="badge">core</span></h3>
<div class="field"><label>Project name</label><input id="projectName" value="Aurora launch"></div>
<div class="row">
<div class="field" style="flex:1"><label>Length</label><select id="videoLength"><option>15s</option><option>30s</option><option>60s</option><option>90s</option></select></div>
<div class="field" style="flex:1"><label>Tone</label><select id="toneSelect"><option>Professional</option><option>Casual</option><option>Dramatic</option><option>Educational</option></select></div>
</div>
<div class="field"><label>Target audience</label><input id="audience" value="Creative directors"></div>
<div class="field"><label>Key message</label><textarea id="keyMessage">Bold, minimal, future-ready.</textarea></div>
<div class="field"><label>Style refs</label><input id="styleRefs" value="Neon, clean, motion"></div>
<div class="row" style="margin-top:8px">
<button class="small" id="templateProduct">🚀 Product</button>
<button class="small" id="templatePortfolio">📁 Portfolio</button>
<button class="small" id="templatePromo">📣 Promo</button>
<button class="small" id="templateEdu">🎓 Edu</button>
</div>
</div>
<!-- storyboard generator -->
<div class="card">
<h3>🎞️ Storyboard <span class="badge">auto</span></h3>
<div id="storyboardContainer">
<div class="scene-item">
<div class="meta"><span>WIDE</span><span>0:00-0:04</span></div>
<div>Opening shot: city skyline, text overlay "DAWN"</div>
<div class="placeholder-img">🎬 ref image</div>
</div>
<div class="scene-item">
<div class="meta"><span>MEDIUM</span><span>0:04-0:09</span></div>
<div>Product close-up, motion blur</div>
<div class="placeholder-img">🎬 ref image</div>
</div>
</div>
<div class="export-actions">
<button id="regenerateStoryboard">🔄 regenerate</button>
<button id="exportStoryboard">📄 export</button>
</div>
</div>
<!-- script generator -->
<div class="card">
<h3>📝 Script <span class="badge">auto</span></h3>
<div class="row" style="margin-bottom:8px">
<select id="scriptLength" style="flex:1"><option>Short (15s)</option><option>Medium (30s)</option><option>Long (60s+)</option></select>
<select id="scriptTone" style="flex:1"><option>Professional</option><option>Casual</option><option>Dramatic</option><option>Humorous</option></select>
</div>
<div id="scriptContent" style="background:var(--bg); padding:12px; border-radius:12px; font-size:0.9rem;">
<strong>Hook:</strong> "What if motion could speak?"<br>
<strong>Body:</strong> "We craft stories that move."<br>
<strong>CTA:</strong> "Watch the showreel."
</div>
<div class="export-actions" style="margin-top:10px">
<button id="generateScript">✨ generate</button>
<button id="exportScript">📃 export text</button>
</div>
</div>
</div>
<!-- second row: visual sequence + audio -->
<div class="grid" style="margin-top:24px">
<div class="card">
<h3>🖼️ Visual sequence <span class="badge">plan</span></h3>
<div id="visualPlan">
<div><span class="color-dot" style="background:#0f172a"></span> #0f172a · deep space</div>
<div><span class="color-dot" style="background:#4f46e5"></span> #4f46e5 · primary</div>
<div>🎬 stock: abstract loop, slow zoom</div>
<div>✨ overlay: kinetic typography</div>
</div>
<div style="margin-top:10px"><button id="customizeVisuals">🎛️ customize</button></div>
</div>
<div class="card">
<h3>🎧 Audio direction <span class="badge">auto</span></h3>
<div class="field"><label>Music mood</label><select id="musicMood"><option>Upbeat</option><option>Cinematic</option><option>Relaxed</option><option>Dramatic</option></select></div>
<div class="field"><label>Voiceover</label><select id="voiceStyle"><option>Male</option><option>Female</option><option>Neutral</option></select></div>
<div class="field"><label>Volume balance (VO/Music)</label><input type="range" min="0" max="100" value="70" id="volBalance"></div>
<div id="audioNotes" style="background:var(--bg); padding:10px; border-radius:12px; font-size:0.85rem;">🎵 Cinematic pulse · SFX: whoosh, riser</div>
<button id="exportAudio" style="margin-top:10px">📤 export notes</button>
</div>
</div>
<!-- checklist + final output -->
<div class="grid" style="margin-top:24px">
<div class="card">
<h3>✅ Production checklist <span class="badge">dynamic</span></h3>
<div id="checklistContainer">
<div class="checklist-item"><input type="checkbox" checked> <span>Camera + lenses</span></div>
<div class="checklist-item"><input type="checkbox"> <span>Lighting kit</span></div>
<div class="checklist-item"><input type="checkbox"> <span>Storyboard printed</span></div>
<div class="checklist-item"><input type="checkbox"> <span>Audio license</span></div>
</div>
<button id="addChecklistItem">+ add item</button>
<button id="exportChecklist" style="margin-left:8px">📋 export</button>
</div>
<div class="card">
<h3>📦 Final output <span class="badge">preview</span></h3>
<div style="background:var(--bg); padding:12px; border-radius:12px; font-size:0.9rem;">
<strong>Brief:</strong> Aurora launch · 30s · Dramatic<br>
<strong>Scenes:</strong> 4 · <strong>Script:</strong> hook+body+cta<br>
<strong>Audio:</strong> Cinematic · Female VO<br>
<strong>Checklist:</strong> 4 items
</div>
<div class="export-actions" style="margin-top:12px">
<button id="compileReport">📄 compile report</button>
<button id="previewMode">👁️ preview</button>
</div>
</div>
</div>
<div class="footer-actions">
<button id="saveProject">💾 save to localStorage</button>
<button id="loadProject">📂 load last</button>
<button id="resetProject">♻️ reset demo</button>
</div>
</div>
<div class="toast" id="toastMsg">saved</div>
<script>
(function(){
// ---------- state ----------
const state = {
brief: {
name: 'Aurora launch',
length: '30s',
tone: 'Dramatic',
audience: 'Creative directors',
message: 'Bold, minimal, future-ready.',
styleRefs: 'Neon, clean, motion'
},
storyboard: [
{ shot: 'WIDE', time: '0:00-0:04', desc: 'Opening shot: city skyline, text overlay "DAWN"', ref: '🎬' },
{ shot: 'MEDIUM', time: '0:04-0:09', desc: 'Product close-up, motion blur', ref: '🎬' },
{ shot: 'CLOSE-UP', time: '0:09-0:14', desc: 'Detail of interface, glitch effect', ref: '🎬' }
],
script: {
hook: 'What if motion could speak?',
body: 'We craft stories that move.',
cta: 'Watch the showreel.'
},
visual: ['#0f172a deep space', '#4f46e5 primary', 'stock: abstract loop', 'overlay: kinetic type'],
audio: { mood: 'Cinematic', vo: 'Female', balance: 70, notes: 'Cinematic pulse · SFX: whoosh, riser' },
checklist: ['Camera + lenses', 'Lighting kit', 'Storyboard printed', 'Audio license']
};
// ---------- dom refs ----------
const $ = id => document.getElementById(id);
const projectName = $('projectName'), videoLength = $('videoLength'), toneSelect = $('toneSelect');
const audience = $('audience'), keyMessage = $('keyMessage'), styleRefs = $('styleRefs');
const storyboardContainer = $('storyboardContainer');
const scriptContent = $('scriptContent');
const visualPlan = $('visualPlan');
const audioNotes = $('audioNotes');
const checklistContainer = $('checklistContainer');
const musicMood = $('musicMood'), voiceStyle = $('voiceStyle'), volBalance = $('volBalance');
// ---------- helpers ----------
function toast(msg){
const t = $('toastMsg');
t.textContent = msg;
t.classList.add('show');
setTimeout(()=>t.classList.remove('show'), 1800);
}
// render storyboard
function renderStoryboard(){
storyboardContainer.innerHTML = '';
state.storyboard.forEach((s, idx) => {
const div = document.createElement('div');
div.className = 'scene-item';
div.innerHTML = `
<div class="meta"><span>${s.shot}</span><span>${s.time}</span><span>🎬 shot ${idx+1}</span></div>
<div>${s.desc}</div>
<div class="placeholder-img">🖼️ ref image (${s.ref})</div>
`;
storyboardContainer.appendChild(div);
});
}
// render script
function renderScript(){
scriptContent.innerHTML = `<strong>Hook:</strong> "${state.script.hook}"<br><strong>Body:</strong> "${state.script.body}"<br><strong>CTA:</strong> "${state.script.cta}"`;
}
// render visual
function renderVisual(){
visualPlan.innerHTML = state.visual.map(v => {
if(v.startsWith('#')){
const color = v.split(' ')[0];
return `<div><span class="color-dot" style="background:${color}"></span> ${v}</div>`;
} else return `<div>${v}</div>`;
}).join('');
}
// render audio
function renderAudio(){
audioNotes.textContent = `🎵 ${state.audio.mood} · VO: ${state.audio.vo} · balance ${state.audio.balance}% · ${state.audio.notes}`;
}
// render checklist
function renderChecklist(){
checklistContainer.innerHTML = '';
state.checklist.forEach((item, i) => {
const div = document.createElement('div');
div.className = 'checklist-item';
div.innerHTML = `<input type="checkbox" data-index="${i}" ${i===0?'checked':''}> <span>${item}</span>`;
checklistContainer.appendChild(div);
});
}
// full render
function renderAll(){
renderStoryboard();
renderScript();
renderVisual();
renderAudio();
renderChecklist();
// sync brief fields
projectName.value = state.brief.name;
videoLength.value = state.brief.length;
toneSelect.value = state.brief.tone;
audience.value = state.brief.audience;
keyMessage.value = state.brief.message;
styleRefs.value = state.brief.styleRefs;
musicMood.value = state.audio.mood;
voiceStyle.value = state.audio.vo;
volBalance.value = state.audio.balance;
}
// ---------- event bindings ----------
// brief inputs
projectName.addEventListener('input', e => state.brief.name = e.target.value);
videoLength.addEventListener('change', e => state.brief.length = e.target.value);
toneSelect.addEventListener('change', e => state.brief.tone = e.target.value);
audience.addEventListener('input', e => state.brief.audience = e.target.value);
keyMessage.addEventListener('input', e => state.brief.message = e.target.value);
styleRefs.addEventListener('input', e => state.brief.styleRefs = e.target.value);
// storyboard regenerate
$('regenerateStoryboard').addEventListener('click', ()=>{
const tones = ['WIDE','MEDIUM','CLOSE-UP','EXTREME'];
state.storyboard = state.storyboard.map((s, i) => ({
shot: tones[i % tones.length],
time: `0:0${i}-0:0${i+2}`,
desc: `Scene ${i+1}: dynamic composition, ${state.brief.styleRefs || 'modern'} style`,
ref: '🎬'
}));
renderStoryboard();
toast('storyboard regenerated');
});
$('exportStoryboard').addEventListener('click', ()=>{
const text = state.storyboard.map(s=>`${s.shot} | ${s.time} | ${s.desc}`).join('\n');
alert('📄 Storyboard export:\n\n' + text);
});
// script generate
$('generateScript').addEventListener('click', ()=>{
const len = $('scriptLength').value;
const tone = $('scriptTone').value;
state.script.hook = `"${state.brief.message.split(' ')[0] || 'Motion'} in focus"`;
state.script.body = `We build ${tone.toLowerCase()} stories for ${state.brief.audience}.`;
state.script.cta = `Experience the ${state.brief.length} showreel.`;
renderScript();
toast('script generated');
});
$('exportScript').addEventListener('click', ()=>{
const txt = `HOOK: ${state.script.hook}\nBODY: ${state.script.body}\nCTA: ${state.script.cta}`;
alert('📃 Script export:\n\n' + txt);
});
// visual customize
$('customizeVisuals').addEventListener('click', ()=>{
state.visual = ['#0f172a deep space', '#4f46e5 primary', 'stock: abstract loop', 'overlay: kinetic type', 'transition: glitch'];
renderVisual();
toast('visuals updated');
});
// audio export
$('exportAudio').addEventListener('click', ()=>{
alert(`🎧 AUDIO NOTES\nMood: ${state.audio.mood}\nVO: ${state.audio.vo}\nBalance: ${state.audio.balance}%\n${state.audio.notes}`);
});
// music/vo/balance listeners
musicMood.addEventListener('change', e=>{ state.audio.mood = e.target.value; renderAudio(); });
voiceStyle.addEventListener('change', e=>{ state.audio.vo = e.target.value; renderAudio(); });
volBalance.addEventListener('input', e=>{ state.audio.balance = e.target.value; renderAudio(); });
// checklist add
$('addChecklistItem').addEventListener('click', ()=>{
const item = prompt('New checklist item:');
if(item){ state.checklist.push(item); renderChecklist(); }
});
$('exportChecklist').addEventListener('click', ()=>{
alert('✅ Checklist:\n' + state.checklist.map(c=>'[ ] '+c).join('\n'));
});
// template buttons
$('templateProduct').addEventListener('click', ()=>{
state.brief = {name:'Product launch', length:'30s', tone:'Professional', audience:'Tech buyers', message:'Innovation meets design', styleRefs:'Minimal, sleek'};
renderAll(); toast('product template');
});
$('templatePortfolio').addEventListener('click', ()=>{
state.brief = {name:'Portfolio', length:'60s', tone:'Casual', audience:'Recruiters', message:'Creative range', styleRefs:'Bold, colorful'};
renderAll(); toast('portfolio template');
});
$('templatePromo').addEventListener('click', ()=>{
state.brief = {name:'Promo', length:'15s', tone:'Dramatic', audience:'General', message:'Limited offer', styleRefs:'High contrast'};
renderAll(); toast('promo template');
});
$('templateEdu').addEventListener('click', ()=>{
state.brief = {name:'Educational', length:'90s', tone:'Educational', audience:'Students', message:'Learn fast', styleRefs:'Clean, diagrams'};
renderAll(); toast('edu template');
});
// compile report
$('compileReport').addEventListener('click', ()=>{
const report = `
🎬 SHOWREEL REPORT
Brief: ${state.brief.name} | ${state.brief.length} | ${state.brief.tone}
Audience: ${state.brief.audience}
Message: ${state.brief.message}
Scenes: ${state.storyboard.length}
Script: ${state.script.hook} / ${state.script.body} / ${state.script.cta}
Audio: ${state.audio.mood} / ${state.audio.vo}
Checklist: ${state.checklist.length} items
`;
alert(report);
});
$('previewMode').addEventListener('click', ()=>{
alert('👁️ PREVIEW MODE\nShowreel outline:\n' + state.storyboard.map(s=>`[${s.shot}] ${s.desc}`).join('\n'));
});
// export/import JSON
$('exportJsonBtn').addEventListener('click', ()=>{
const data = JSON.stringify(state, null, 2);
const blob = new Blob([data], {type:'application/json'});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url; a.download = 'showreel-project.json'; a.click();
URL.revokeObjectURL(url);
toast('JSON exported');
});
$('importJsonBtn').addEventListener('click', ()=> $('importFile').click());
$('importFile').addEventListener('change', (e)=>{
const file = e.target.files[0];
if(!file) return;
const reader = new FileReader();
reader.onload = (ev)=>{
try{
const parsed = JSON.parse(ev.target.result);
Object.assign(state, parsed);
renderAll();
toast('project imported');
}catch(err){ alert('invalid JSON'); }
};
reader.readAsText(file);
});
// save/load localStorage
$('saveProject').addEventListener('click', ()=>{
localStorage.setItem('showreel_state', JSON.stringify(state));
toast('saved to localStorage');
});
$('loadProject').addEventListener('click', ()=>{
const saved = localStorage.getItem('showreel_state');
if(saved){
Object.assign(state, JSON.parse(saved));
renderAll();
toast('loaded');
} else toast('no saved project');
});
$('resetProject').addEventListener('click', ()=>{
localStorage.removeItem('showreel_state');
location.reload();
});
// theme toggle
$('themeToggle').addEventListener('click', ()=>{
document.body.classList.toggle('dark');
});
// primary color change
$('colorPrimaryBtn').addEventListener('click', ()=>{
const colors = ['#4f46e5','#db2777','#ea580c','#16a34a','#0ea5e9'];
const current = getComputedStyle(document.documentElement).getPropertyValue('--primary').trim();
const idx = colors.indexOf(current);
const next = colors[(idx+1) % colors.length];
document.documentElement.style.setProperty('--primary', next);
toast('primary color updated');
});
// initial render
renderAll();
})();
</script>
</body>
</html>
Melde dich an, um den vollständigen Prompt zu sehen
Weiter mit:
Mit der Anmeldung akzeptierst du unsere Nutzungsbedingungen und Datenschutz
Verwendung
Dieser Prompt ist für die Verwendung mit coding gedacht. Kopiere den Inhalt oben und füge ihn in dein bevorzugtes KI-Tool ein.
Für beste Ergebnisse passe die Platzhalter (eckige Klammern oder Großbuchstaben) an deine Anforderungen an.
Referenzen
- Kategorie: coding-Prompts
- Quelle: https://x.com/eyishazyer/status/2073109278379171899
Diskussion
0 Kommentare