<!DOCTYPE html>

<head>

<title>SRT Proofreader & Content Generator Tool</title>

<style>

body { font-family: Arial, sans-serif; max-width: 950px; margin: 20px auto; padding: 0 20px; background: #f9f9f9; color: #333; }

.section { background: white; padding: 20px; border: 1px solid #ccc; margin-bottom: 20px; border-radius: 4px; }

.flex { display: flex; gap: 15px; align-items: center; margin-bottom: 15px; }

textarea { width: 100%; height: 180px; font-family: monospace; box-sizing: border-box; margin-bottom: 10px; }

button { padding: 10px 15px; background: #0066cc; color: white; border: none; font-weight: bold; cursor: pointer; }

button:hover { background: #004499; }

button.green-btn { background: #22c55e; }

button.green-btn:hover { background: #16a34a; }

.chunk-box { border-left: 4px solid #0066cc; background: #f0f7ff; padding: 15px; margin-bottom: 15px; }

pre { background: #fff; padding: 10px; border: 1px solid #ddd; max-height: 120px; overflow-y: auto; font-size: 12px; }

.error { color: red; font-weight: bold; }

.success { color: green; font-weight: bold; }

.prompt-preview { background: #fff9e6; border-left: 4px solid #f59e0b; padding: 12px; margin-top: 10px; font-size: 13px; white-space: pre-wrap; font-family: monospace; }

</style>

</head>

<body>

<h1>SRT Proofreader & Content Generator</h1>

<p>Upload your large SRT file. The app slices it into chunks so you don't hit Claude's free limit, auto-generates your text optimization prompts, and creates content marketing prompts.</p>

<h2>1. Upload SRT File & Choose Language</h2>

<option value="American English">American English</option>

<option value="British English">British English</option>

</select>

</div>

</div>

<h2>2. Process Chunks in Claude</h2>

<p>Click "Copy Prompt + Subtitles" for Chunk 1, paste it into Claude. Repeat for all chunks.</p>

<div id="chunksContainer"><em>Upload a file to see chunks...</em></div>

</div>

<h2>3. Reassemble & Export Cleaned SRT</h2>

<p>Paste the corrected text chunks back into this box (one after the other).</p>

<button id="downloadBtn">Download Fixed .srt File</button>

</div>

<h2>4. Content Marketing & Social Media Generator</h2>

<p>Your subtitle transcript text has been successfully combined below. Click any button to copy a hyper-targeted content creation prompt to use with Claude.</p>

<button class="green-btn" id="btnArticle">Copy Blog/Website Article Prompt</button>

<button class="green-btn" id="btnSocial">Copy Social Media Bundle Prompt (X, LinkedIn, FB, IG, TikTok)</button>

<button class="green-btn" id="btnYouTube">Copy YouTube Title, Desc & Thumbnail Ideas Prompt</button>

</div>

<strong>Preview of combined transcript text:</strong>

</div>

let parsedSubtitles = [];

let cleanCombinedTranscript = "";

document.getElementById('srtFile').addEventListener('change', function(e) {

const file = e.target.files[0];

if (!file) return;

const reader = new FileReader();

reader.onload = function(evt) {

parseSRT(evt.target.result);

generateChunks();

extractPureTranscript(evt.target.result);

};

reader.readAsText(file);

});

function parseSRT(data) {

parsedSubtitles = [];

const blocks = data.replace(/\r\n/g, '\n').split(/\n\s*\n/);

blocks.forEach(block => {

const lines = block.trim().split('\n');

if (lines.length >= 2) {

const id = lines[0].trim();

const timestamp = lines[1].trim();

const text = lines.slice(2).join('\n');

if (id && timestamp && text) {

parsedSubtitles.push({ id, timestamp, text });

}

});

document.getElementById('fileStatus').innerHTML = `<span class="success">Loaded ${parsedSubtitles.length} subtitle lines.</span>`;

}

function extractPureTranscript(data) {

// Strip numbers and timestamps to get a clean text transcript block for AI marketing prompts

const textLines = data.replace(/\r\n/g, '\n').split('\n');

let textOnly = [];

for (let i = 0; i < textLines.length; i++) {

let line = textLines[i].trim();

if (line === '' || /^\d+$/.test(line) || line.includes('-->')) {

continue;

}

textOnly.push(line);

}

cleanCombinedTranscript = textOnly.join(' ');

document.getElementById('rawTranscriptPreview').value = cleanCombinedTranscript;

document.getElementById('marketingSection').style.display = 'block';

}

function generateChunks() {

const container = document.getElementById('chunksContainer');

container.innerHTML = '';

if (parsedSubtitles.length === 0) return;

const blocksPerChunk = 40;

const totalChunks = Math.ceil(parsedSubtitles.length / blocksPerChunk);

const selectedLang = document.getElementById('langSelect').value;

for (let i = 0; i < totalChunks; i++) {

const start = i * blocksPerChunk;

const end = Math.min(start + blocksPerChunk, parsedSubtitles.length);

const chunkSubs = parsedSubtitles.slice(start, end);

let chunkRawText = '';

chunkSubs.forEach(sub => {

chunkRawText += `${sub.id}\n${sub.timestamp}\n${sub.text}\n\n`;

});

const fullPrompt = `Proofread this specific subtitle chunk. Output ONLY the raw corrected SRT blocks. Do not add conversational introductions or conclusions.

CRITICAL QUALITY RULES:

• Target Dialect: Use strict ${selectedLang}.

• Preserve every subtitle number and timestamp exactly. Do not skip or change any.

• Preserve subtitle segmentation unless a split is clearly broken.

• Correct spelling, punctuation, capitalization, grammar, and subject–verb agreement.

• Remove duplicated words.

• Correct obvious speech-recognition mistakes where context makes the intended wording clear.

• Keep the speaker’s natural voice; do not rewrite the meaning.

• If there are names or organizations that should be verified rather than guessed, flag them as a separate bulleted list at the very bottom under a "--- FLAGS ---" line.

• Format integrity: Ensure clean SRT layout with a blank line separating each block.

SUBTITLE DATA TO PROCESS:

\n${chunkRawText.trim()}`;

const chunkDiv = document.createElement('div');

chunkDiv.className = 'chunk-box';

chunkDiv.innerHTML = `<div style="display:flex; justify-content:space-between; margin-bottom:8px;">

<strong>Chunk ${i + 1} of ${totalChunks} (Lines ${start + 1} - ${end})</strong>

<button class="copy-btn">Copy Prompt + Subtitles</button>

</div>`;

const preview = document.createElement('pre');

preview.innerText = chunkRawText.trim();

chunkDiv.appendChild(preview);

chunkDiv.querySelector('.copy-btn').onclick = function(e) {

navigator.clipboard.writeText(fullPrompt);

e.target.innerText = 'Copied!';

setTimeout(() => e.target.innerText = 'Copy Prompt + Subtitles', 2000);

};

container.appendChild(chunkDiv);

}

document.getElementById('langSelect').addEventListener('change', () => {

if (parsedSubtitles.length > 0) generateChunks();

});

// REASSEMBLY LOGIC

document.getElementById('downloadBtn').addEventListener('click', function() {

const rawInput = document.getElementById('cleanedInput').value.trim();

const status = document.getElementById('validationStatus');

if (!rawInput) {

status.innerHTML = '<span class="error">Error: Paste Claude\'s output text first!</span>';

return;

}

let cleanText = rawInput.split('--- FLAGS ---')[0].trim();

const lines = cleanText.replace(/\r\n/g, '\n').split('\n');

let srtContent = '';

let blockCount = 0;

let currentBlock = [];

for (let i = 0; i < lines.length; i++) {

const line = lines[i].trim();

if (line === '') {

if (currentBlock.length > 0) {

srtContent += currentBlock.join('\n') + '\n\n';

currentBlock = [];

}

continue;

}

currentBlock.push(line);

if (/^\d+$/.test(line) && currentBlock.length === 1) {

blockCount++;

}

if (currentBlock.length > 0) {

srtContent += currentBlock.join('\n') + '\n\n';

}

if (blockCount === 0) {

status.innerHTML = 'Error: No valid SRT data blocks detected. Check your text layout.';

return;

}

const blob = new Blob([srtContent.trim()], { type: 'text/srt;charset=utf-8;' });

const link = document.createElement('a');

link.href = URL.createObjectURL(blob);

link.setAttribute('download', 'cleaned_subtitles.srt');

document.body.appendChild(link);

link.click();

document.body.removeChild(link);

status.innerHTML = 'Success! File cleaned and downloaded.';

});

// AUTOMATED MARKETING PROMPT COPING BUTTONS

function setupPromptButton(elementId, promptInstructions) {

document.getElementById(elementId).addEventListener('click', function(e) {

const completePrompt = ${promptInstructions}\n\nTRANSCRIPT CONTENT:\n"${cleanCombinedTranscript}";

navigator.clipboard.writeText(completePrompt);

const originalText = e.target.innerText;

e.target.innerText = 'Prompt Copied!';

setTimeout(() => e.target.innerText = originalText, 2000);

});

}

setupPromptButton('btnArticle',

`Act as an expert SEO writer. Write a comprehensive website/blog article based directly on the transcript provided below.

Requirements:

Create a catchy, high-CTR headline.
Break the content down with clear, keyword-rich H2/H3 subheadings.
Keep the writing style natural, engaging, and faithful to the source material.
End with a summary conclusion section.`);setupPromptButton('btnSocial',
`Act as a social media strategist. Turn the following transcript into a high-converting promotional post package.
Create optimized posts for each of these platforms based on the content:

X (Twitter): A compelling hook line under 280 characters + a 4-post value-packed thread breakdown.
LinkedIn: A professional, storytelling-style post with structural bullet points and a clear call-to-action.
Facebook: An engaging, conversational summary post with an open question to drive comments.
Instagram: A brief, punchy caption layout utilizing space-breaks and relevant emoji anchors.
TikTok/Reels: A written hook and 15-second visual storyboard script concept based on the theme.`);setupPromptButton('btnYouTube',
`Act as an expert YouTube optimization specialist. Based on the transcript content provided below, generate:
YouTube Titles: Give me 5 high-CTR, clickable variations (using psychological triggers, avoiding clickbait bans).
Video Description: A comprehensive, search-optimized video description containing keywords, timestamps placeholder markers, and a call to action.
Thumbnail Concepts & Text: Suggest 3 highly visual thumbnail layouts. For each concept, clearly specify:

What image or visual elements to put in the background.
The exact text overlay to use (keep it under 4 words for readability).
Suggestions for color contrast or expressions.`);