Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Ultimate Draft - Professional Screenwriting Software</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap'); | |
| body { | |
| font-family: 'Courier Prime', monospace; | |
| overflow: hidden; | |
| } | |
| .screenplay-text { | |
| font-family: 'Courier Prime', monospace; | |
| font-size: 12pt; | |
| line-height: 1.2; | |
| } | |
| .element-button.active { | |
| background-color: #3b82f6; | |
| color: white; | |
| } | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar.collapsed { | |
| transform: translateX(-100%); | |
| } | |
| .page-view { | |
| background-color: #f5f5f5; | |
| box-shadow: 0 0 10px rgba(0,0,0,0.1); | |
| } | |
| .tab-active { | |
| border-bottom: 2px solid #3b82f6; | |
| color: #3b82f6; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 3px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| .character-highlight { | |
| background-color: rgba(147, 197, 253, 0.3); | |
| } | |
| .dialogue-highlight { | |
| background-color: rgba(254, 243, 199, 0.3); | |
| } | |
| .scene-highlight { | |
| background-color: rgba(187, 247, 208, 0.3); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 h-screen flex flex-col"> | |
| <!-- Top Navigation Bar --> | |
| <header class="bg-gray-800 text-white p-2 flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-2 rounded hover:bg-gray-700"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <h1 class="text-xl font-bold">Ultimate Draft</h1> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 rounded hover:bg-gray-700">File</button> | |
| <button class="px-3 py-1 rounded hover:bg-gray-700">Edit</button> | |
| <button class="px-3 py-1 rounded hover:bg-gray-700">View</button> | |
| <button class="px-3 py-1 rounded hover:bg-gray-700">Insert</button> | |
| <button class="px-3 py-1 rounded hover:bg-gray-700">Format</button> | |
| <button class="px-3 py-1 rounded hover:bg-gray-700">Tools</button> | |
| <button class="px-3 py-1 rounded hover:bg-gray-700">Script</button> | |
| <button class="px-3 py-1 rounded hover:bg-gray-700">Reports</button> | |
| <button class="px-3 py-1 rounded hover:bg-gray-700">Help</button> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <button class="p-2 rounded hover:bg-gray-700"> | |
| <i class="fas fa-cloud-upload-alt"></i> | |
| </button> | |
| <button class="p-2 rounded hover:bg-gray-700"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| <button class="p-2 rounded hover:bg-gray-700"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Toolbar --> | |
| <div class="bg-gray-200 p-2 flex items-center justify-between border-b border-gray-300"> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 rounded hover:bg-gray-300"> | |
| <i class="fas fa-file"></i> | |
| </button> | |
| <button class="p-2 rounded hover:bg-gray-300"> | |
| <i class="fas fa-save"></i> | |
| </button> | |
| <button class="p-2 rounded hover:bg-gray-300"> | |
| <i class="fas fa-print"></i> | |
| </button> | |
| <div class="border-l border-gray-400 mx-2"></div> | |
| <button class="p-2 rounded hover:bg-gray-300"> | |
| <i class="fas fa-undo"></i> | |
| </button> | |
| <button class="p-2 rounded hover:bg-gray-300"> | |
| <i class="fas fa-redo"></i> | |
| </button> | |
| <div class="border-l border-gray-400 mx-2"></div> | |
| <button class="p-2 rounded hover:bg-gray-300"> | |
| <i class="fas fa-cut"></i> | |
| </button> | |
| <button class="p-2 rounded hover:bg-gray-300"> | |
| <i class="fas fa-copy"></i> | |
| </button> | |
| <button class="p-2 rounded hover:bg-gray-300"> | |
| <i class="fas fa-paste"></i> | |
| </button> | |
| <div class="border-l border-gray-400 mx-2"></div> | |
| <button class="element-button active p-2 rounded hover:bg-gray-300" data-element="scene"> | |
| <i class="fas fa-map-marker-alt"></i> Scene | |
| </button> | |
| <button class="element-button p-2 rounded hover:bg-gray-300" data-element="action"> | |
| <i class="fas fa-running"></i> Action | |
| </button> | |
| <button class="element-button p-2 rounded hover:bg-gray-300" data-element="character"> | |
| <i class="fas fa-user"></i> Character | |
| </button> | |
| <button class="element-button p-2 rounded hover:bg-gray-300" data-element="dialogue"> | |
| <i class="fas fa-comment"></i> Dialogue | |
| </button> | |
| <button class="element-button p-2 rounded hover:bg-gray-300" data-element="parenthetical"> | |
| <i class="fas fa-align-left"></i> Parenthetical | |
| </button> | |
| <button class="element-button p-2 rounded hover:bg-gray-300" data-element="transition"> | |
| <i class="fas fa-exchange-alt"></i> Transition | |
| </button> | |
| <button class="element-button p-2 rounded hover:bg-gray-300" data-element="shot"> | |
| <i class="fas fa-video"></i> Shot | |
| </button> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <div class="flex items-center"> | |
| <span class="mr-2">Page:</span> | |
| <select class="border border-gray-300 rounded p-1"> | |
| <option>US Letter</option> | |
| <option>A4</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="mr-2">Zoom:</span> | |
| <select class="border border-gray-300 rounded p-1"> | |
| <option>100%</option> | |
| <option>75%</option> | |
| <option>50%</option> | |
| <option>Page Width</option> | |
| </select> | |
| </div> | |
| <button class="p-2 rounded hover:bg-gray-300"> | |
| <i class="fas fa-columns"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main Content Area --> | |
| <div class="flex flex-1 overflow-hidden"> | |
| <!-- Left Sidebar --> | |
| <div class="sidebar bg-gray-700 text-white w-64 flex flex-col border-r border-gray-600"> | |
| <div class="p-3 border-b border-gray-600"> | |
| <h2 class="font-bold text-lg">Script Navigator</h2> | |
| </div> | |
| <div class="flex-1 overflow-y-auto custom-scrollbar p-2"> | |
| <div class="mb-4"> | |
| <h3 class="font-semibold mb-2">Scenes</h3> | |
| <div class="space-y-1"> | |
| <div class="p-2 rounded hover:bg-gray-600 cursor-pointer">1. INT. HOUSE - DAY</div> | |
| <div class="p-2 rounded hover:bg-gray-600 cursor-pointer">2. EXT. STREET - NIGHT</div> | |
| <div class="p-2 rounded hover:bg-gray-600 cursor-pointer">3. INT. OFFICE - DAY</div> | |
| <div class="p-2 rounded hover:bg-gray-600 cursor-pointer">4. INT. RESTAURANT - EVENING</div> | |
| <div class="p-2 rounded hover:bg-gray-600 cursor-pointer">5. EXT. PARK - MORNING</div> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <h3 class="font-semibold mb-2">Characters</h3> | |
| <div class="space-y-1"> | |
| <div class="p-2 rounded hover:bg-gray-600 cursor-pointer">JOHN</div> | |
| <div class="p-2 rounded hover:bg-gray-600 cursor-pointer">SARAH</div> | |
| <div class="p-2 rounded hover:bg-gray-600 cursor-pointer">DETECTIVE MILLER</div> | |
| <div class="p-2 rounded hover:bg-gray-600 cursor-pointer">MRS. JOHNSON</div> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <h3 class="font-semibold mb-2">Locations</h3> | |
| <div class="space-y-1"> | |
| <div class="p-2 rounded hover:bg-gray-600 cursor-pointer">HOUSE</div> | |
| <div class="p-2 rounded hover:bg-gray-600 cursor-pointer">STREET</div> | |
| <div class="p-2 rounded hover:bg-gray-600 cursor-pointer">OFFICE</div> | |
| <div class="p-2 rounded hover:bg-gray-600 cursor-pointer">RESTAURANT</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-3 border-t border-gray-600"> | |
| <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded"> | |
| <i class="fas fa-plus mr-2"></i> Add Scene | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main Editor Area --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Tab Bar --> | |
| <div class="bg-gray-200 border-b border-gray-300 flex"> | |
| <div class="tab-active px-4 py-2 cursor-pointer">Script</div> | |
| <div class="px-4 py-2 cursor-pointer hover:bg-gray-300">Outline</div> | |
| <div class="px-4 py-2 cursor-pointer hover:bg-gray-300">Index Cards</div> | |
| <div class="px-4 py-2 cursor-pointer hover:bg-gray-300">Beat Board</div> | |
| <div class="px-4 py-2 cursor-pointer hover:bg-gray-300">Notes</div> | |
| <div class="px-4 py-2 cursor-pointer hover:bg-gray-300">Stats</div> | |
| <div class="flex-1"></div> | |
| <div class="px-4 py-2 cursor-pointer hover:bg-gray-300"> | |
| <i class="fas fa-plus"></i> | |
| </div> | |
| </div> | |
| <!-- Editor Content --> | |
| <div class="flex-1 overflow-y-auto custom-scrollbar p-8 bg-white"> | |
| <div class="max-w-3xl mx-auto page-view p-10"> | |
| <div class="screenplay-text"> | |
| <div class="scene-element mb-4"> | |
| <div class="text-center font-bold uppercase text-lg">FADE IN:</div> | |
| </div> | |
| <div class="scene-element mb-4 scene-highlight"> | |
| <div class="font-bold uppercase">1. INT. HOUSE - LIVING ROOM - DAY</div> | |
| <div class="mt-1">A modest living room. Sunlight streams through the windows. The furniture is worn but clean. A ticking clock is the only sound.</div> | |
| </div> | |
| <div class="action-element mb-4"> | |
| <div>JOHN (30s, tired eyes) sits on the couch, staring at an old photograph in his hands. He sighs deeply.</div> | |
| </div> | |
| <div class="character-element mb-1 text-center"> | |
| <div class="font-bold">JOHN</div> | |
| </div> | |
| <div class="dialogue-element mb-4 pl-20 dialogue-highlight"> | |
| <div>(muttering to himself)</div> | |
| <div>Why did it have to end this way?</div> | |
| </div> | |
| <div class="action-element mb-4"> | |
| <div>The PHONE RINGS. John ignores it at first, then reluctantly reaches for it.</div> | |
| </div> | |
| <div class="character-element mb-1 text-center character-highlight"> | |
| <div class="font-bold">JOHN (CONT'D)</div> | |
| </div> | |
| <div class="dialogue-element mb-4 pl-20 dialogue-highlight"> | |
| <div>(into phone)</div> | |
| <div>Yeah? ... No, I haven't changed my mind. ... Because some things can't be fixed, Sarah.</div> | |
| </div> | |
| <div class="action-element mb-4"> | |
| <div>He hangs up abruptly. The photograph slips from his fingers and falls to the floor.</div> | |
| </div> | |
| <div class="transition-element mb-4 text-right"> | |
| <div class="font-bold uppercase">CUT TO:</div> | |
| </div> | |
| <div class="scene-element mb-4 scene-highlight"> | |
| <div class="font-bold uppercase">2. EXT. STREET - NIGHT</div> | |
| <div class="mt-1">Rain pours down. Neon signs reflect on wet pavement. A lone figure walks quickly down the sidewalk.</div> | |
| </div> | |
| <div class="action-element mb-4"> | |
| <div>SARAH (late 20s, determined) pulls her coat tighter against the rain. She checks her watch, quickens her pace.</div> | |
| </div> | |
| <div class="shot-element mb-4"> | |
| <div class="italic">CLOSE ON Sarah's face as she notices something off-screen. Her eyes widen.</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Status Bar --> | |
| <div class="bg-gray-200 p-2 text-sm text-gray-700 flex justify-between border-t border-gray-300"> | |
| <div> | |
| <span class="mr-4">Page 1</span> | |
| <span class="mr-4">Scene 2</span> | |
| <span>Words: 187</span> | |
| </div> | |
| <div> | |
| <span class="mr-4">FDX</span> | |
| <span class="mr-4">US Letter</span> | |
| <span>Courier Prime 12pt</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Sidebar --> | |
| <div class="sidebar bg-gray-200 w-64 flex flex-col border-l border-gray-300"> | |
| <div class="p-3 border-b border-gray-300"> | |
| <h2 class="font-bold text-lg">Script Notes</h2> | |
| </div> | |
| <div class="flex-1 overflow-y-auto custom-scrollbar p-3"> | |
| <div class="mb-4"> | |
| <div class="font-semibold mb-1">Scene 1 Notes</div> | |
| <div class="text-sm bg-white p-2 rounded">Consider adding more detail about the photograph John is holding. What does it show?</div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="font-semibold mb-1">Character Arc</div> | |
| <div class="text-sm bg-white p-2 rounded">John's reluctance to talk to Sarah needs more setup in earlier scenes.</div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="font-semibold mb-1">Research</div> | |
| <div class="text-sm bg-white p-2 rounded">Check police procedure for missing person cases in this jurisdiction.</div> | |
| </div> | |
| </div> | |
| <div class="p-3 border-t border-gray-300"> | |
| <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded"> | |
| <i class="fas fa-plus mr-2"></i> Add Note | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Script Statistics Modal (Hidden by default) --> | |
| <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="statsModal"> | |
| <div class="bg-white rounded-lg p-6 w-1/2 max-h-screen overflow-y-auto"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold">Script Statistics</h2> | |
| <button class="text-gray-500 hover:text-gray-700" onclick="document.getElementById('statsModal').classList.add('hidden')"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4 mb-6"> | |
| <div class="bg-gray-100 p-4 rounded"> | |
| <h3 class="font-semibold mb-2">General</h3> | |
| <div class="space-y-1"> | |
| <div>Pages: 12</div> | |
| <div>Scenes: 24</div> | |
| <div>Words: 4,287</div> | |
| <div>Characters: 14</div> | |
| <div>Locations: 8</div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-100 p-4 rounded"> | |
| <h3 class="font-semibold mb-2">Scene Lengths</h3> | |
| <div class="space-y-1"> | |
| <div>Average: 0.5 pages</div> | |
| <div>Shortest: 0.2 pages</div> | |
| <div>Longest: 1.8 pages</div> | |
| <div>Day Scenes: 14</div> | |
| <div>Night Scenes: 10</div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-100 p-4 rounded"> | |
| <h3 class="font-semibold mb-2">Dialogue</h3> | |
| <div class="space-y-1"> | |
| <div>Total Dialogue: 2,143 words</div> | |
| <div>Average per Scene: 89 words</div> | |
| <div>Most Dialogue: JOHN (487 words)</div> | |
| <div>Least Dialogue: MRS. JOHNSON (23 words)</div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-100 p-4 rounded"> | |
| <h3 class="font-semibold mb-2">Structure</h3> | |
| <div class="space-y-1"> | |
| <div>Act 1: 4 pages</div> | |
| <div>Act 2: 6 pages</div> | |
| <div>Act 3: 2 pages</div> | |
| <div>Inciting Incident: Scene 3</div> | |
| <div>Climax: Scene 21</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-100 p-4 rounded"> | |
| <h3 class="font-semibold mb-2">Character Appearances</h3> | |
| <div class="space-y-2"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span>JOHN</span> | |
| <span>14 scenes</span> | |
| </div> | |
| <div class="w-full bg-gray-300 h-2 rounded-full"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span>SARAH</span> | |
| <span>10 scenes</span> | |
| </div> | |
| <div class="w-full bg-gray-300 h-2 rounded-full"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 71%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span>DETECTIVE MILLER</span> | |
| <span>6 scenes</span> | |
| </div> | |
| <div class="w-full bg-gray-300 h-2 rounded-full"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 43%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Element type switching | |
| document.querySelectorAll('.element-button').forEach(button => { | |
| button.addEventListener('click', function() { | |
| document.querySelectorAll('.element-button').forEach(btn => { | |
| btn.classList.remove('active'); | |
| }); | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| // Tab switching | |
| document.querySelectorAll('.tab').forEach(tab => { | |
| tab.addEventListener('click', function() { | |
| document.querySelectorAll('.tab').forEach(t => { | |
| t.classList.remove('tab-active'); | |
| }); | |
| this.classList.add('tab-active'); | |
| }); | |
| }); | |
| // Sample script statistics data | |
| function showStats() { | |
| document.getElementById('statsModal').classList.remove('hidden'); | |
| } | |
| // Toggle sidebar | |
| function toggleSidebar(side) { | |
| document.querySelector(`.sidebar.${side}`).classList.toggle('collapsed'); | |
| } | |
| // Character highlighting | |
| document.querySelectorAll('.character-element').forEach(el => { | |
| el.addEventListener('mouseenter', function() { | |
| const name = this.textContent.trim().replace(' (CONT\'D)', ''); | |
| document.querySelectorAll('.dialogue-element').forEach(dialogue => { | |
| if (dialogue.previousElementSibling.textContent.includes(name)) { | |
| dialogue.classList.add('dialogue-highlight'); | |
| } | |
| }); | |
| }); | |
| el.addEventListener('mouseleave', function() { | |
| document.querySelectorAll('.dialogue-element').forEach(dialogue => { | |
| dialogue.classList.remove('dialogue-highlight'); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=RoboJacky/ultimate-draft" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |