Diskussion

Video-Showreel-Generator in einer einzigen HTML-Datei

Von Wikiprompt, der freien Prompt-Enzyklopädie

Eyisha Zyer
Beigetragen vonEyisha ZyerXQuelle

3. Juli 2026

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

Kategorien:coding| twitter| video-showreel| html-css-javascript

Diskussion