| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>CapCut SRT Formatter Pro</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <link rel="stylesheet" href="style.css"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| </head> |
| <body class="bg-gray-50 min-h-screen"> |
| <custom-header></custom-header> |
| |
| <main class="container mx-auto px-4 py-8"> |
| <div class="max-w-4xl mx-auto"> |
| <div class="text-center mb-12"> |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">CapCut SRT Formatter Pro</h1> |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto"> |
| Transform your text into perfectly timed, breathable blocks for CapCut and SRT workflows |
| </p> |
| </div> |
|
|
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> |
| |
| <div class="bg-white rounded-2xl shadow-lg p-6"> |
| <div class="flex items-center justify-between mb-6"> |
| <h2 class="text-2xl font-bold text-gray-800">Input Text</h2> |
| <div class="flex space-x-2"> |
| <button id="clearBtn" class="flex items-center text-gray-500 hover:text-gray-700"> |
| <i data-feather="trash-2" class="w-5 h-5 mr-1"></i> |
| Clear |
| </button> |
| </div> |
| </div> |
| |
| <div class="mb-6"> |
| <label class="block text-gray-700 font-medium mb-2">Language</label> |
| <select id="languageSelect" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"> |
| <option value="PT">Portuguese</option> |
| <option value="EN">English</option> |
| <option value="ES">Spanish</option> |
| </select> |
| </div> |
| |
| <div class="mb-6"> |
| <label class="flex items-center"> |
| <input type="checkbox" id="uppercaseCheck" class="rounded text-blue-600 focus:ring-blue-500"> |
| <span class="ml-2 text-gray-700 font-medium">Uppercase Mode (Public: H)</span> |
| </label> |
| </div> |
| |
| <textarea id="inputText" class="w-full h-64 p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none" placeholder="Enter your text here..."></textarea> |
| |
| <button id="formatBtn" class="w-full mt-6 bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center"> |
| <i data-feather="zap" class="mr-2"></i> |
| Format Text |
| </button> |
| </div> |
| |
| |
| <div class="bg-white rounded-2xl shadow-lg p-6"> |
| <div class="flex items-center justify-between mb-6"> |
| <h2 class="text-2xl font-bold text-gray-800">Formatted Output</h2> |
| <div class="flex space-x-2"> |
| <button id="copyBtn" class="flex items-center text-gray-500 hover:text-gray-700"> |
| <i data-feather="copy" class="w-5 h-5 mr-1"></i> |
| Copy |
| </button> |
| <button id="downloadBtn" class="flex items-center text-gray-500 hover:text-gray-700"> |
| <i data-feather="download" class="w-5 h-5 mr-1"></i> |
| Download |
| </button> |
| </div> |
| </div> |
| |
| <div id="outputContainer" class="bg-gray-50 border border-gray-200 rounded-lg p-4 h-64 overflow-y-auto"> |
| <p class="text-gray-500 text-center py-20">Formatted text will appear here</p> |
| </div> |
| <div class="mt-6 bg-blue-50 border border-blue-200 rounded-lg p-4"> |
| <h3 class="font-bold text-blue-800 mb-2">Zero-Error Formatting Rules</h3> |
| <ul class="text-sm text-blue-700 list-disc pl-5 space-y-1"> |
| <li>Maximum 11 characters per block (excluding spaces)</li> |
| <li>Breaks at !, ?, . punctuation marks</li> |
| <li>Commas converted to ! without space</li> |
| <li>Never end with tabu words (de, a, o, e, que, etc.)</li> |
| <li>Never end with 2-3 character words</li> |
| <li>Connectives (E/AND/Y, É/IS, QUE/THAT) start new blocks</li> |
| <li>Single word blocks can exceed 11 characters</li> |
| <li>CapCut-ready with advance_ms=70 calibration</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mt-16"> |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Powerful Text Formatting Features</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="bg-white p-6 rounded-2xl shadow-lg border border-gray-100"> |
| <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4"> |
| <i data-feather="check-circle" class="text-blue-600 w-6 h-6"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Zero Error Formatting</h3> |
| <p class="text-gray-600">Ensures perfect line breaks with no punctuation errors or weak endings.</p> |
| </div> |
| |
| <div class="bg-white p-6 rounded-2xl shadow-lg border border-gray-100"> |
| <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4"> |
| <i data-feather="globe" class="text-green-600 w-6 h-6"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Multi-Language Support</h3> |
| <p class="text-gray-600">Works with Portuguese, English, and Spanish with language-specific rules.</p> |
| </div> |
| |
| <div class="bg-white p-6 rounded-2xl shadow-lg border border-gray-100"> |
| <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4"> |
| <i data-feather="settings" class="text-purple-600 w-6 h-6"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Advanced Heuristics</h3> |
| <p class="text-gray-600">Special handling for prices, materials, CTAs, and emphasis phrases.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
| |
| <custom-footer></custom-footer> |
| |
| <script src="components/header.js"></script> |
| <script src="components/footer.js"></script> |
| <script src="script.js"></script> |
| <script>feather.replace();</script> |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| </body> |
| </html> |
