Discussion

Générateur de Showreel Vidéo dans un Seul Fichier HTML

De Wikiprompt, l’encyclopédie libre de prompts

Eyisha Zyer
Contribué parEyisha ZyerXSource

3 juil. 2026

Générateur de Showreel Vidéo dans un Seul Fichier HTML Un prompt complet pour construire un générateur de showreel vidéo dans un seul fichier HTML, couvrant le storyboard, le script, la séquence visuelle, la direction audio et les fonctionnalités de checklist de production avec persistance des données.

Contenu du PromptEnregistrer

🌐
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Showreel Studio · generator</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } :root { --bg: #f5f7fb; --surface: #ffffff; --text: #1a1e2b; --muted: #5b6478; --border: #e2e6ef; --primary: #4f46e5; --primary-soft: #eef2ff; --accent: #7c3aed; --shadow: 0 8px 24px rgba(0, 0, 0, 0.04); --radius: 18px; --chip-bg: #f0f2f8; } body.dark { --bg: #0f1117; --surface: #1a1d27; --text: #eef0f6; --muted: #9aa3b8; --border: #2c3142; --primary: #818cf8; --primary-soft: #1e2235; --chip-bg: #262b3a; --shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } body { background: var(--bg); color: var(--text); transition: background 0.2s, color 0.2s; padding: 24px; line-height: 1.5; } .app { max-width: 1280px; margin: 0 auto; } /* header */ .topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; flex-wrap: wrap; gap: 16px; } .logo { font-weight: 700; font-size: 1.6rem; letter-spacing: -0.02em; background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .controls { display: flex; gap: 10px; 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; color: var(--text); cursor: pointer; transition: all 0.15s; box-shadow: 0 2px 6px rgba(0,0,0,0.02); display: inline-flex; align-items: center; gap: 6px; } button:hover, .btn:hover { background: var(--primary-soft); border-color: var(--primary); } button.primary { background: var(--primary); color: white; border: none; } button.primary:hover { opacity: 0.9; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .card { background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); padding: 20px; transition: border 0.2s; } .card h2 { font-size: 1.2rem; font-weight: 600; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 10px; } .card h2 .badge { font-size: 0.75rem; background: var(--chip-bg); padding: 4px 10px; border-radius: 30px; font-weight: 400; } .field { margin-bottom: 14px; } label { font-size: 0.8rem; font-weight: 500; color: var(--muted); display: block; margin-bottom: 4px; } input, select, textarea { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.9rem; transition: 0.15s; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } textarea { min-height: 70px; resize: vertical; } .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .chip { background: var(--chip-bg); padding: 4px 12px; border-radius: 30px; font-size: 0.8rem; cursor: pointer; border: 1px solid transparent; transition: 0.1s; } .chip.active { background: var(--primary); color: white; border-color: var(--primary); } .scene-item { background: var(--bg); border-radius: 14px; padding: 14px; margin-bottom: 12px; border-left: 4px solid var(--primary); } .scene-item .shot-type { font-weight: 600; font-size: 0.8rem; color: var(--primary); text-transform: uppercase; } .scene-item p { font-size: 0.9rem; margin-top: 6px; } .meta-row { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--muted); margin-top: 8px; } .placeholder-img { background: linear-gradient(145deg, var(--chip-bg), var(--border)); border-radius: 10px; height: 70px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 0.8rem; margin: 10px 0; border: 1px dashed var(--border); } .checklist-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); } .checklist-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); } .footer-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; justify-content: flex-end; } .export-block { background: var(--bg); border-radius: 12px; padding: 12px; font-family: monospace; font-size: 0.8rem; white-space: pre-wrap; max-height: 180px; overflow-y: auto; border: 1px solid var(--border); } .hidden { display: none; } .color-dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; margin-right: 6px; border: 1px solid var(--border); } @media (max-width: 700px) { body { padding: 16px; } .grid { grid-template-columns: 1fr; } } </style> </head> <body> <div class="app"> <div class="topbar"> <div class="logo">✦ showreel studio</div> <div class="controls"> <button id="darkModeToggle" title="toggle dark mode">🌙 dark</button> <button id="exportJsonBtn" title="export project as JSON">⬇️ export JSON</button> <button id="importJsonBtn" title="import project from JSON">⬆️ import</button> <input type="file" id="importFile" accept=".json" class="hidden"> <button id="exportReportBtn" class="primary">📋 export report</button> </div> </div> <!-- brief + templates --> <div class="grid"> <div class="card"> <h2>📋 project brief <span class="badge">editable</span></h2> <div class="field"><label>project name</label><input id="projectName" value="Aurora launch" placeholder="e.g. Product launch"></div> <div class="row"> <div class="field" style="flex:1"><label>length</label><select id="videoLength"><option>15s</option><option selected>30s</option><option>60s</option></select></div> <div class="field" style="flex:1"><label>tone</label><select id="toneSelect"><option>Professional</option><option>Casual</option><option selected>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 innovation meets timeless design.</textarea></div> <div class="field"><label>style references</label><input id="styleRef" value="neon, cinematic, minimal"></div> <div class="row" style="margin-top:6px"> <span class="chip" data-template="product">🚀 product</span> <span class="chip" data-template="portfolio">🎨 portfolio</span> <span class="chip" data-template="promo">📣 promo</span> <span class="chip" data-template="edu">🎓 educational</span> <span class="chip" data-template="social">📱 social ad</span> </div> </div> <!-- storyboard generator --> <div class="card"> <h2>🎬 storyboard <span class="badge">auto</span></h2> <div id="storyboardContainer"></div> <div class="row" style="margin-top:10px"> <button id="regenerateStoryboard">↻ regenerate</button> <button id="exportStoryboard">🖼️ export</button> </div> </div> <!-- script generator --> <div class="card"> <h2>📝 script <span class="badge">auto</span></h2> <div class="row" style="margin-bottom:10px"> <select id="scriptLength" style="width:auto; flex:1"><option>15s</option><option selected>30s</option><option>60s</option></select> <select id="voiceTone" style="width:auto"><option>Professional</option><option>Casual</option><option selected>Dramatic</option><option>Humorous</option></select> <select id="voiceGender" style="width:auto"><option>Male</option><option selected>Female</option><option>Neutral</option></select> </div> <textarea id="scriptOutput" rows="6" style="font-size:0.9rem">A bold statement. We craft light. Aurora defines the future.</textarea> <div class="row" style="margin-top:8px"> <button id="generateScriptBtn">✨ generate script</button> <button id="exportScriptBtn">📄 export text</button> </div> </div> </div> <!-- visual sequence + audio direction --> <div class="grid" style="margin-top:24px"> <div class="card"> <h2>🎞️ visual sequence <span class="badge">auto</span></h2> <div id="visualSequenceContainer"></div> <div style="margin-top:10px"> <label>color palette</label> <div class="row"> <span class="color-dot" style="background:#0f172a"></span> <span class="color-dot" style="background:#4f46e5"></span> <span class="color-dot" style="background:#f59e0b"></span> <span class="color-dot" style="background:#e2e8f0"></span> <span style="font-size:0.8rem; color:var(--muted)">#0f172a #4f46e5 #f59e0b</span> </div> </div> <div style="margin-top:12px"> <label>transitions & effects</label> <div class="placeholder-img" style="height:auto; padding:8px">crossfade · glitch · zoom pan</div> </div> </div> <div class="card"> <h2>🎧 audio direction <span class="badge">auto</span></h2> <div class="field"><label>music mood</label><select id="musicMood"><option>Upbeat</option><option selected>Cinematic</option><option>Relaxed</option><option>Dramatic</option></select></div> <div class="field"><label>sound effects</label><input value="whoosh, heartbeat, riser"></div> <div class="field"><label>voiceover style</label><input value="deep, authoritative"></div> <div class="row"><label>voice/music balance</label><input type="range" min="0" max="100" value="65" style="flex:1"></div> <button id="exportAudioBtn" style="margin-top:8px">🎵 export audio notes</button> </div> </div> <!-- production checklist + final output --> <div class="grid" style="margin-top:24px"> <div class="card"> <h2>✅ production checklist <span class="badge">custom</span></h2> <div id="checklistContainer"></div> <div class="row" style="margin-top:10px"> <input id="newCheckItem" placeholder="add item (e.g. 4K monitor)" style="flex:1"> <button id="addCheckBtn">+ add</button> <button id="exportChecklistBtn">📋 export</button> </div> </div> <div class="card"> <h2>📦 final output <span class="badge">preview</span></h2> <div id="finalPreview" style="background:var(--bg); border-radius:12px; padding:12px; font-size:0.85rem; max-height:200px; overflow-y:auto; border:1px solid var(--border)"></div> <div class="footer-actions"> <button id="compileReportBtn">🧩 compile all</button> <button id="downloadReportBtn">⬇️ download report</button> </div> </div> </div> </div> <script> (function() { // ---------- state ---------- const state = { brief: { name: 'Aurora launch', length: '30s', tone: 'Dramatic', audience: 'creative directors', message: 'Bold innovation meets timeless design.', styleRef: 'neon, cinematic, minimal' }, storyboard: [], script: 'A bold statement. We craft light. Aurora defines the future.', visualSeq: [], checklist: ['4K footage', 'gimbal', 'LED panel', 'sound design', 'color grade'], audio: { mood: 'Cinematic', sfx: 'whoosh, heartbeat, riser', vo: 'deep, authoritative' } }; // ---------- dom refs ---------- const $ = id => document.getElementById(id); const projectName = $('projectName'), videoLength = $('videoLength'), toneSelect = $('toneSelect'); const audience = $('audience'), keyMessage = $('keyMessage'), styleRef = $('styleRef'); const storyboardContainer = $('storyboardContainer'); const scriptOutput = $('scriptOutput'); const visualSeqContainer = $('visualSequenceContainer'); const checklistContainer = $('checklistContainer'); const finalPreview = $('finalPreview'); // ---------- helpers ---------- function generateStoryboard() { const tone = toneSelect.value; const scenes = [ { shot: 'Wide', desc: 'Establishing shot - dark studio, neon glow', overlay: 'Aurora', duration: '4s' }, { shot: 'Medium', desc: 'Product rotating on pedestal, dramatic light', overlay: 'Innovation', duration: '6s' }, { shot: 'Close-up', desc: 'Texture detail, lens flare', overlay: 'Craft', duration: '5s' }, { shot: 'Medium', desc: 'Human hand interacting, motion blur', overlay: 'Human', duration: '5s' }, { shot: 'Wide', desc: 'Final composition, logo reveal', overlay: 'Aurora', duration: '10s' } ]; if (tone === 'Casual') scenes[1].desc = 'Lifestyle shot, natural light, candid'; if (tone === 'Educational') scenes[2].desc = 'Diagram overlay, clean background'; state.storyboard = scenes.map((s, i) => ({ ...s, id: i })); renderStoryboard(); } function renderStoryboard() { storyboardContainer.innerHTML = state.storyboard.map(s => ` <div class="scene-item"> <div class="shot-type">${s.shot} · ${s.duration}</div> <p>${s.desc}</p> <div class="meta-row"><span>overlay: ${s.overlay}</span><span>🎬 scene ${s.id+1}</span></div> <div class="placeholder-img">📁 ref image (optional)</div> </div> `).join(''); } function generateVisualSequence() { const seq = [ { scene: '1', visual: 'Neon city abstract', note: 'slow push in' }, { scene: '2', visual: 'Product hero shot', note: 'orbit rotation' }, { scene: '3', visual: 'Macro texture', note: 'rack focus' }, { scene: '4', visual: 'Human silhouette', note: 'backlight' }, { scene: '5', visual: 'Logo on black', note: 'particle reveal' } ]; state.visualSeq = seq; visualSeqContainer.innerHTML = seq.map(v => ` <div style="padding:8px 0; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; gap:8px"> <span><strong>#${v.scene}</strong> ${v.visual}</span> <span style="color:var(--muted)">${v.note}</span> </div> `).join(''); } function renderChecklist() { checklistContainer.innerHTML = state.checklist.map((item, idx) => ` <div class="checklist-item"> <input type="checkbox" data-idx="${idx}" ${idx < 2 ? 'checked' : ''}> <span>${item}</span> </div> `).join(''); // attach listeners document.querySelectorAll('.checklist-item input[type="checkbox"]').forEach(cb => { cb.addEventListener('change', (e) => { // just visual, no state change needed }); }); } function updateFinalPreview() { const brief = `${state.brief.name} · ${state.brief.length} · ${state.brief.tone}`; const scenes = state.storyboard.length ? state.storyboard.map(s=>`${s.shot}: ${s.desc}`).join(' | ') : 'no storyboard'; const scriptSnippet = state.script.slice(0, 80) + '...'; finalPreview.innerHTML = ` <strong>📌 brief:</strong> ${brief}<br> <strong>🎬 storyboard:</strong> ${scenes}<br> <strong>📝 script:</strong> ${scriptSnippet}<br> <strong>🎧 audio:</strong> ${state.audio.mood} / ${state.audio.sfx}<br> <strong>✅ checklist:</strong> ${state.checklist.length} items `; } // ---------- script generation ---------- function generateScript() { const tone = $('voiceTone').value; const gender = $('voiceGender').value; const len = $('scriptLength').value; let script = ''; if (tone === 'Dramatic') script = `Every detail matters. We shape light. Aurora is here.`; else if (tone === 'Professional') script = `Introducing Aurora. Precision, reliability, and performance.`; else if (tone === 'Casual') script = `Hey! Check this out. Aurora is the new vibe.`; else script = `Why settle? Aurora changes everything.`; if (len === '15s') script = `Aurora. Bold. (15s cut)`; if (len === '60s') script = `Longer version: Aurora redefines your workflow. Experience the future.`; state.script = script; scriptOutput.value = script; } // ---------- export / import ---------- function exportJSON() { const data = { brief: state.brief, storyboard: state.storyboard, script: state.script, visualSeq: state.visualSeq, checklist: state.checklist, audio: state.audio }; const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'showreel_project.json'; a.click(); } function importJSON(file) { const reader = new FileReader(); reader.onload = (e) => { try { const data = JSON.parse(e.target.result); if (data.brief) { state.brief = { ...state.brief, ...data.brief }; 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; styleRef.value = state.brief.styleRef; } if (data.storyboard) { state.storyboard = data.storyboard; renderStoryboard(); } if (data.script) { state.script = data.script; scriptOutput.value = data.script; } if (data.visualSeq) { state.visualSeq = data.visualSeq; generateVisualSequence(); } if (data.checklist) { state.checklist = data.checklist; renderChecklist(); } if (data.audio) state.audio = data.audio; updateFinalPreview(); } catch (err) { alert('invalid JSON'); } }; reader.readAsText(file); } // ---------- report export ---------- function exportReport() { const report = ` SHOWREEL REPORT ${state.brief.name} | ${state.brief.length} | ${state.brief.tone} Target: ${state.brief.audience} Message: ${state.brief.message} STORYBOARD: ${state.storyboard.map(s=>`[${s.shot}] ${s.desc} (${s.duration})`).join('\n')} SCRIPT: ${state.script} VISUAL SEQUENCE: ${state.visualSeq.map(v=>`#${v.scene} ${v.visual} - ${v.note}`).join('\n')} AUDIO: ${state.audio.mood} / ${state.audio.sfx} CHECKLIST: ${state.checklist.join(', ')} `; const blob = new Blob([report], { type: 'text/plain' }); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'showreel_report.txt'; a.click(); } // ---------- event binding ---------- // brief inputs [projectName, videoLength, toneSelect, audience, keyMessage, styleRef].forEach(el => { el.addEventListener('change', () => { state.brief.name = projectName.value; state.brief.length = videoLength.value; state.brief.tone = toneSelect.value; state.brief.audience = audience.value; state.brief.message = keyMessage.value; state.brief.styleRef = styleRef.value; updateFinalPreview(); }); }); // template chips document.querySelectorAll('.chip[data-template]').forEach(chip => { chip.addEventListener('click', () => { const t = chip.dataset.template; if (t === 'product') { projectName.value='Nova X'; keyMessage.value='Next-gen performance.'; } else if (t === 'portfolio') { projectName.value='My Portfolio'; keyMessage.value='Creative range.'; } else if (t === 'promo') { projectName.value='Summer Sale'; keyMessage.value='Limited offer.'; } else if (t === 'edu') { projectName.value='Learn Physics'; keyMessage.value='Understand motion.'; } else if (t === 'social') { projectName.value='Viral Ad'; keyMessage.value='Join the trend.'; } // update state state.brief.name = projectName.value; state.brief.message = keyMessage.value; updateFinalPreview(); }); }); // storyboard $('regenerateStoryboard').addEventListener('click', () => { generateStoryboard(); updateFinalPreview(); }); $('exportStoryboard').addEventListener('click', () => { const text = state.storyboard.map(s=>`${s.shot}: ${s.desc}`).join('\n'); alert('Storyboard export:\n' + text); }); // script $('generateScriptBtn').addEventListener('click', () => { generateScript(); updateFinalPreview(); }); $('exportScriptBtn').addEventListener('click', () => { const blob = new Blob([state.script], {type:'text/plain'}); const a = document.createElement('a'); a.href=URL.createObjectURL(blob); a.download='script.txt'; a.click(); }); // audio export $('exportAudioBtn').addEventListener('click', () => { const mood = $('musicMood').value; const sfx = document.querySelector('input[value*="whoosh"]')?.value || 'whoosh, riser'; alert(`Audio direction:\nMood: ${mood}\nSFX: ${sfx}\nVO: ${state.audio.vo}`); }); // checklist $('addCheckBtn').addEventListener('click', () => { const val = $('newCheckItem').value.trim(); if (val) { state.checklist.push(val); renderChecklist(); updateFinalPreview(); $('newCheckItem').value=''; } }); $('exportChecklistBtn').addEventListener('click', () => { alert('Checklist:\n' + state.checklist.join('\n')); }); // final output $('compileReportBtn').addEventListener('click', () => { generateStoryboard(); generateVisualSequence(); updateFinalPreview(); }); $('downloadReportBtn').addEventListener('click', exportReport); // export/import $('exportJsonBtn').addEventListener('click', exportJSON); $('importJsonBtn').addEventListener('click', () => $('importFile').click()); $('importFile').addEventListener('change', (e) => { if (e.target.files[0]) importJSON(e.target.files[0]); e.target.value = ''; }); // dark mode $('darkModeToggle').addEventListener('click', () => { document.body.classList.toggle('dark'); }); // init function init() { generateStoryboard(); generateVisualSequence(); renderChecklist(); scriptOutput.value = state.script; updateFinalPreview(); // set 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; styleRef.value = state.brief.styleRef; } init(); })(); </script> </body> </html>

Connectez-vous pour voir le prompt complet

Continuer avec:

En vous connectant, vous acceptez nos Conditions et Confidentialité

Utilisation

Ce prompt est conçu pour être utilisé avec coding. Copiez le contenu ci-dessus et collez-le dans votre outil d’IA préféré.

Pour de meilleurs résultats, personnalisez les espaces réservés (indiqués par des crochets ou des majuscules) selon vos besoins.

Références

Catégories :coding| twitter| video-showreel| html-css-javascript

Discussion