Hugging Face's logo

Spaces:
hiojo
/
srt
Running

App Files Community
hiojo commited on
Commit
c9e4851
·
verified ·
1 Parent(s): c2aa5e0

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +692 -19
  3. prompts.txt +3 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Srt
3
- emoji: 🏃
4
- colorFrom: indigo
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: srt
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,692 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Conversor Avançado de Texto para SRT com Terminação em Pontos</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @keyframes fadeIn {
11
+ from { opacity: 0; transform: translateY(10px); }
12
+ to { opacity: 1; transform: translateY(0); }
13
+ }
14
+ @keyframes slideIn {
15
+ from { transform: translateX(100%); }
16
+ to { transform: translateX(0); }
17
+ }
18
+ @keyframes pulse {
19
+ 0%, 100% { opacity: 1; }
20
+ 50% { opacity: 0.5; }
21
+ }
22
+ @keyframes rotate {
23
+ from { transform: rotate(0deg); }
24
+ to { transform: rotate(360deg); }
25
+ }
26
+ .fade-in {
27
+ animation: fadeIn 0.5s ease-out forwards;
28
+ }
29
+ .slide-in {
30
+ animation: slideIn 0.3s ease-out forwards;
31
+ }
32
+ .pulse {
33
+ animation: pulse 2s infinite;
34
+ }
35
+ .rotate {
36
+ animation: rotate 2s linear infinite;
37
+ }
38
+ .text-area-container {
39
+ position: relative;
40
+ }
41
+ .char-count {
42
+ position: absolute;
43
+ right: 10px;
44
+ bottom: 10px;
45
+ background: rgba(255, 255, 255, 0.8);
46
+ padding: 2px 8px;
47
+ border-radius: 10px;
48
+ font-size: 0.8rem;
49
+ }
50
+ .dark .char-count {
51
+ background: rgba(31, 41, 55, 0.8);
52
+ color: white;
53
+ }
54
+ .progress-bar {
55
+ height: 4px;
56
+ background: #e2e8f0;
57
+ border-radius: 2px;
58
+ overflow: hidden;
59
+ }
60
+ .dark .progress-bar {
61
+ background: #374151;
62
+ }
63
+ .progress-fill {
64
+ height: 100%;
65
+ background: #3b82f6;
66
+ transition: width 0.3s ease;
67
+ }
68
+ .srt-block {
69
+ border-left: 4px solid #3b82f6;
70
+ transition: all 0.3s ease;
71
+ }
72
+ .dark .srt-block {
73
+ background-color: #1f2937;
74
+ border-left-color: #60a5fa;
75
+ }
76
+ .srt-block:hover {
77
+ transform: translateX(5px);
78
+ background-color: #f8fafc;
79
+ }
80
+ .dark .srt-block:hover {
81
+ background-color: #374151;
82
+ }
83
+ .copy-btn {
84
+ opacity: 0;
85
+ transition: opacity 0.3s ease;
86
+ }
87
+ .srt-block:hover .copy-btn {
88
+ opacity: 1;
89
+ }
90
+ .tooltip {
91
+ position: relative;
92
+ }
93
+ .tooltip-text {
94
+ visibility: hidden;
95
+ width: 120px;
96
+ background-color: #333;
97
+ color: #fff;
98
+ text-align: center;
99
+ border-radius: 6px;
100
+ padding: 5px;
101
+ position: absolute;
102
+ z-index: 1;
103
+ bottom: 125%;
104
+ left: 50%;
105
+ margin-left: -60px;
106
+ opacity: 0;
107
+ transition: opacity 0.3s;
108
+ }
109
+ .dark .tooltip-text {
110
+ background-color: #111827;
111
+ }
112
+ .tooltip:hover .tooltip-text {
113
+ visibility: visible;
114
+ opacity: 1;
115
+ }
116
+ .tab-content {
117
+ display: none;
118
+ }
119
+ .tab-content.active {
120
+ display: block;
121
+ animation: fadeIn 0.5s ease-out;
122
+ }
123
+ .image-block {
124
+ transition: all 0.3s ease;
125
+ }
126
+ .image-block:hover {
127
+ transform: scale(1.02);
128
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
129
+ }
130
+ .dark .image-block:hover {
131
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
132
+ }
133
+ .clock {
134
+ font-family: 'Courier New', monospace;
135
+ letter-spacing: 2px;
136
+ }
137
+ .dark {
138
+ background-color: #111827;
139
+ color: #f3f4f6;
140
+ }
141
+ .dark .bg-white {
142
+ background-color: #1f2937;
143
+ }
144
+ .dark .text-gray-800 {
145
+ color: #f3f4f6;
146
+ }
147
+ .dark .text-gray-600 {
148
+ color: #d1d5db;
149
+ }
150
+ .dark .border-gray-300 {
151
+ border-color: #4b5563;
152
+ }
153
+ .dark .bg-gray-200 {
154
+ background-color: #374151;
155
+ color: #f3f4f6;
156
+ }
157
+ .dark .bg-gray-50 {
158
+ background-color: #1f2937;
159
+ }
160
+ .dark .border-gray-200 {
161
+ border-color: #374151;
162
+ }
163
+ .dark .shadow-md {
164
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
165
+ }
166
+ .dark .shadow-inner {
167
+ box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
168
+ }
169
+ </style>
170
+ </head>
171
+ <body class="bg-gray-50 min-h-screen flex flex-col dark:bg-gray-900 transition-colors duration-300">
172
+ <div class="container mx-auto px-4 py-8 flex-grow">
173
+ <div class="max-w-5xl mx-auto">
174
+ <!-- Header with Dark Mode Toggle and Clock -->
175
+ <header class="text-center mb-8 fade-in relative">
176
+ <div class="absolute top-0 right-0 flex items-center space-x-4">
177
+ <div class="clock bg-gray-200 dark:bg-gray-700 px-3 py-1 rounded-md text-sm font-mono">
178
+ <span id="hours">00</span>:<span id="minutes">00</span>:<span id="seconds">00</span>
179
+ </div>
180
+ <button id="darkModeToggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200">
181
+ <i class="fas fa-moon dark:hidden"></i>
182
+ <i class="fas fa-sun hidden dark:inline"></i>
183
+ </button>
184
+ </div>
185
+ <h1 class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-white mb-2">
186
+ <i class="fas fa-closed-captioning text-blue-500 mr-2"></i>
187
+ Conversor de Texto para SRT com Terminação em Pontos
188
+ </h1>
189
+ <p class="text-gray-600 dark:text-gray-300">Transforme texto em legendas SRT respeitando a pontuação</p>
190
+ </header>
191
+
192
+ <!-- Main Form -->
193
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden mb-8">
194
+ <div class="p-6">
195
+ <div class="flex justify-between items-center mb-4">
196
+ <h2 class="text-xl font-semibold text-gray-800 dark:text-white">
197
+ <i class="fas fa-edit text-blue-500 mr-2"></i>
198
+ Insira seu texto
199
+ </h2>
200
+ <div class="flex space-x-2">
201
+ <button id="sampleBtn" type="button" class="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md text-sm hover:bg-gray-300 dark:hover:bg-gray-600 transition">
202
+ <i class="fas fa-lightbulb mr-1"></i> Exemplo
203
+ </button>
204
+ <button id="clearInputBtn" type="button" class="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md text-sm hover:bg-gray-300 dark:hover:bg-gray-600 transition">
205
+ <i class="fas fa-trash-alt mr-1"></i> Limpar
206
+ </button>
207
+ </div>
208
+ </div>
209
+
210
+ <div class="text-area-container mb-2">
211
+ <textarea id="textoInput" class="w-full h-64 p-4 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none dark:bg-gray-700 dark:text-white" placeholder="Cole ou digite o texto que deseja converter para formato SRT..."></textarea>
212
+ <div class="char-count dark:bg-gray-700 dark:text-gray-300">
213
+ <span id="charCount">0</span> caracteres |
214
+ <span id="wordCount">0</span> palavras
215
+ </div>
216
+ </div>
217
+
218
+ <div class="progress-bar mb-4">
219
+ <div id="progressFill" class="progress-fill" style="width: 0%"></div>
220
+ </div>
221
+
222
+ <div class="flex flex-wrap justify-between items-center">
223
+ <div class="mb-4 md:mb-0">
224
+ <div class="flex items-center space-x-4">
225
+ <div class="flex items-center">
226
+ <label for="charsPerBlock" class="mr-2 text-sm text-gray-600 dark:text-gray-300">Caracteres/bloco:</label>
227
+ <input type="number" id="charsPerBlock" value="490" min="50" max="1000" class="w-20 p-1 border border-gray-300 dark:border-gray-600 rounded text-sm dark:bg-gray-700 dark:text-white">
228
+ </div>
229
+ <div class="flex items-center">
230
+ <label for="blockDuration" class="mr-2 text-sm text-gray-600 dark:text-gray-300">Duração (s):</label>
231
+ <input type="number" id="blockDuration" value="50" min="1" max="120" class="w-16 p-1 border border-gray-300 dark:border-gray-600 rounded text-sm dark:bg-gray-700 dark:text-white">
232
+ </div>
233
+ <div class="flex items-center">
234
+ <input type="checkbox" id="endOnPeriod" checked class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
235
+ <label for="endOnPeriod" class="ml-2 text-sm text-gray-600 dark:text-gray-300">Terminar em pontos</label>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ <button id="convertBtn" type="button" class="px-6 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition flex items-center">
240
+ <i class="fas fa-exchange-alt mr-2"></i> Converter para SRT
241
+ </button>
242
+ </div>
243
+ </div>
244
+ </div>
245
+
246
+ <!-- Results Section -->
247
+ <div id="resultsSection" class="hidden">
248
+ <div class="flex justify-between items-center mb-4">
249
+ <h2 class="text-xl font-semibold text-gray-800 dark:text-white">
250
+ <i class="fas fa-file-alt text-green-500 mr-2"></i>
251
+ Legendas SRT Geradas
252
+ </h2>
253
+ <div class="flex space-x-2">
254
+ <button id="downloadBtn" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition flex items-center">
255
+ <i class="fas fa-download mr-2"></i> Baixar SRT
256
+ </button>
257
+ <button id="copyAllBtn" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition flex items-center">
258
+ <i class="fas fa-copy mr-2"></i> Copiar Tudo
259
+ </button>
260
+ </div>
261
+ </div>
262
+
263
+ <div class="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-4 mb-4">
264
+ <div class="flex justify-between items-center mb-3">
265
+ <div class="text-sm text-gray-600 dark:text-gray-300">
266
+ <span id="blockCount">0</span> blocos gerados |
267
+ <span id="totalDuration">00:00:00</span> de duração total |
268
+ <span id="totalWords">0</span> palavras
269
+ </div>
270
+ <div class="flex items-center">
271
+ <label for="fontSize" class="mr-2 text-sm text-gray-600 dark:text-gray-300">Tamanho:</label>
272
+ <select id="fontSize" class="p-1 border border-gray-300 dark:border-gray-600 rounded text-sm bg-white dark:bg-gray-700 dark:text-white">
273
+ <option value="text-sm">Pequeno</option>
274
+ <option value="text-base" selected>Normal</option>
275
+ <option value="text-lg">Grande</option>
276
+ </select>
277
+ </div>
278
+ </div>
279
+
280
+ <div id="resultado" class="space-y-4"></div>
281
+ </div>
282
+ </div>
283
+ </div>
284
+ </div>
285
+
286
+ <!-- Footer -->
287
+ <footer class="bg-white dark:bg-gray-800 py-4 shadow-inner">
288
+ <div class="container mx-auto px-4 text-center text-gray-600 dark:text-gray-300 text-sm">
289
+ <p>© 2023 Conversor SRT Avançado | Desenvolvido por <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Renatim Dark</a></p>
290
+ <div class="flex justify-center space-x-4 mt-2">
291
+ <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400"><i class="fab fa-github"></i></a>
292
+ <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400"><i class="fab fa-twitter"></i></a>
293
+ <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400"><i class="fab fa-linkedin"></i></a>
294
+ </div>
295
+ </div>
296
+ </footer>
297
+
298
+ <script>
299
+ document.addEventListener('DOMContentLoaded', function() {
300
+ // Elements
301
+ const textoInput = document.getElementById('textoInput');
302
+ const convertBtn = document.getElementById('convertBtn');
303
+ const resultado = document.getElementById('resultado');
304
+ const downloadBtn = document.getElementById('downloadBtn');
305
+ const clearInputBtn = document.getElementById('clearInputBtn');
306
+ const sampleBtn = document.getElementById('sampleBtn');
307
+ const copyAllBtn = document.getElementById('copyAllBtn');
308
+ const resultsSection = document.getElementById('resultsSection');
309
+ const charCount = document.getElementById('charCount');
310
+ const wordCount = document.getElementById('wordCount');
311
+ const blockCount = document.getElementById('blockCount');
312
+ const totalDuration = document.getElementById('totalDuration');
313
+ const totalWords = document.getElementById('totalWords');
314
+ const progressFill = document.getElementById('progressFill');
315
+ const charsPerBlock = document.getElementById('charsPerBlock');
316
+ const blockDuration = document.getElementById('blockDuration');
317
+ const fontSize = document.getElementById('fontSize');
318
+ const darkModeToggle = document.getElementById('darkModeToggle');
319
+ const endOnPeriod = document.getElementById('endOnPeriod');
320
+ const hoursElement = document.getElementById('hours');
321
+ const minutesElement = document.getElementById('minutes');
322
+ const secondsElement = document.getElementById('seconds');
323
+
324
+ // Sample text
325
+ const sampleText = `Este é um exemplo de texto que será convertido para o formato SRT. O formato SRT é usado para legendas em vídeos e cada bloco contém:
326
+
327
+ 1. Um número sequencial
328
+ 2. O tempo de início e fim no formato HH:MM:SS,mmm
329
+ 3. O texto da legenda
330
+ 4. Uma linha em branco para separar os blocos
331
+
332
+ Você pode editar este texto ou apagá-lo para inserir o seu próprio conteúdo. O conversor irá dividir automaticamente o texto em blocos de acordo com as configurações de caracteres por bloco e duração. Cada bloco será terminado no ponto final mais próximo do limite de caracteres, garantindo que as frases não sejam cortadas no meio.`;
333
+
334
+ // Initialize
335
+ updateCounts();
336
+ updateClock();
337
+ setInterval(updateClock, 1000);
338
+ checkDarkModePreference();
339
+
340
+ // Events
341
+ textoInput.addEventListener('input', updateCounts);
342
+ sampleBtn.addEventListener('click', insertSampleText);
343
+ clearInputBtn.addEventListener('click', clearInput);
344
+ convertBtn.addEventListener('click', convertToSRT);
345
+ downloadBtn.addEventListener('click', downloadSRT);
346
+ copyAllBtn.addEventListener('click', copyAllSRT);
347
+ fontSize.addEventListener('change', changeFontSize);
348
+ darkModeToggle.addEventListener('click', toggleDarkMode);
349
+
350
+ // Functions
351
+ function updateClock() {
352
+ const now = new Date();
353
+ hoursElement.textContent = now.getHours().toString().padStart(2, '0');
354
+ minutesElement.textContent = now.getMinutes().toString().padStart(2, '0');
355
+ secondsElement.textContent = now.getSeconds().toString().padStart(2, '0');
356
+ }
357
+
358
+ function checkDarkModePreference() {
359
+ if (localStorage.getItem('darkMode') === 'enabled' ||
360
+ (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
361
+ document.body.classList.add('dark');
362
+ }
363
+ }
364
+
365
+ function toggleDarkMode() {
366
+ document.body.classList.toggle('dark');
367
+
368
+ if (document.body.classList.contains('dark')) {
369
+ localStorage.setItem('darkMode', 'enabled');
370
+ } else {
371
+ localStorage.setItem('darkMode', 'disabled');
372
+ }
373
+ }
374
+
375
+ function countWords(text) {
376
+ if (!text.trim()) return 0;
377
+ return text.trim().split(/\s+/).length;
378
+ }
379
+
380
+ function updateCounts() {
381
+ const text = textoInput.value;
382
+ const charCountValue = text.length;
383
+ const wordCountValue = countWords(text);
384
+
385
+ charCount.textContent = charCountValue.toLocaleString();
386
+ wordCount.textContent = wordCountValue.toLocaleString();
387
+
388
+ // Update progress bar (now up to 1,000,000 characters)
389
+ const maxChars = 1000000;
390
+ const percentage = Math.min((charCountValue / maxChars) * 100, 100);
391
+ progressFill.style.width = `${percentage}%`;
392
+
393
+ // Change color based on percentage
394
+ if (percentage > 90) {
395
+ progressFill.style.backgroundColor = '#ef4444';
396
+ } else if (percentage > 70) {
397
+ progressFill.style.backgroundColor = '#f59e0b';
398
+ } else {
399
+ progressFill.style.backgroundColor = '#3b82f6';
400
+ }
401
+ }
402
+
403
+ function insertSampleText() {
404
+ textoInput.value = sampleText;
405
+ updateCounts();
406
+ animateButton(sampleBtn);
407
+ }
408
+
409
+ function clearInput() {
410
+ textoInput.value = '';
411
+ updateCounts();
412
+ resultsSection.classList.add('hidden');
413
+ animateButton(clearInputBtn);
414
+ }
415
+
416
+ function formatTime(seconds) {
417
+ const date = new Date(seconds * 1000);
418
+ const hours = date.getUTCHours().toString().padStart(2, '0');
419
+ const minutes = date.getUTCMinutes().toString().padStart(2, '0');
420
+ const secs = date.getUTCSeconds().toString().padStart(2, '0');
421
+ const ms = date.getUTCMilliseconds().toString().padStart(3, '0').substring(0, 3);
422
+ return `${hours}:${minutes}:${secs},${ms}`;
423
+ }
424
+
425
+ function formatBlockSRT(counter, start, text) {
426
+ return `${counter}\n${formatTime(start)} --> ${formatTime(start + parseInt(blockDuration.value))}\n${text.trim()}\n\n`;
427
+ }
428
+
429
+ function convertToSRT() {
430
+ const text = textoInput.value.trim();
431
+ if (!text) {
432
+ showAlert('Por favor, insira algum texto para converter.', 'error');
433
+ return;
434
+ }
435
+
436
+ animateButton(convertBtn);
437
+
438
+ // Simulate processing delay for better UX
439
+ convertBtn.disabled = true;
440
+ convertBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Processando...';
441
+
442
+ setTimeout(() => {
443
+ try {
444
+ const srtBlocks = [];
445
+ let counter = 1;
446
+ let startTime = 0;
447
+ const intervalBetweenBlocks = 5; // seconds between blocks
448
+ const maxChars = parseInt(charsPerBlock.value) || 490;
449
+ const duration = parseInt(blockDuration.value) || 50;
450
+ const shouldEndOnPeriod = endOnPeriod.checked;
451
+
452
+ if (shouldEndOnPeriod) {
453
+ // Split text into sentences ending with periods
454
+ const sentences = splitIntoSentences(text);
455
+
456
+ // Group sentences into blocks respecting maxChars
457
+ let currentBlock = '';
458
+ let currentBlockLength = 0;
459
+
460
+ for (const sentence of sentences) {
461
+ if (currentBlockLength + sentence.length <= maxChars) {
462
+ currentBlock += sentence + ' ';
463
+ currentBlockLength += sentence.length + 1;
464
+ } else {
465
+ if (currentBlock.trim()) {
466
+ srtBlocks.push({
467
+ counter,
468
+ startTime,
469
+ text: currentBlock.trim(),
470
+ html: formatBlockSRT(counter, startTime, currentBlock.trim())
471
+ });
472
+ counter++;
473
+ startTime += duration + intervalBetweenBlocks;
474
+ }
475
+
476
+ currentBlock = sentence + ' ';
477
+ currentBlockLength = sentence.length + 1;
478
+ }
479
+ }
480
+
481
+ // Add the last block if there's any content
482
+ if (currentBlock.trim()) {
483
+ srtBlocks.push({
484
+ counter,
485
+ startTime,
486
+ text: currentBlock.trim(),
487
+ html: formatBlockSRT(counter, startTime, currentBlock.trim())
488
+ });
489
+ }
490
+ } else {
491
+ // Original behavior - split by words respecting maxChars
492
+ const words = text.split(/\s+/);
493
+ let block = '';
494
+ let blockLength = 0;
495
+
496
+ for (const word of words) {
497
+ if (blockLength + word.length <= maxChars) {
498
+ block += word + ' ';
499
+ blockLength += word.length + 1;
500
+ } else {
501
+ if (block.trim()) {
502
+ srtBlocks.push({
503
+ counter,
504
+ startTime,
505
+ text: block.trim(),
506
+ html: formatBlockSRT(counter, startTime, block.trim())
507
+ });
508
+ counter++;
509
+ startTime += duration + intervalBetweenBlocks;
510
+ }
511
+
512
+ block = word + ' ';
513
+ blockLength = word.length + 1;
514
+ }
515
+ }
516
+
517
+ // Add the last block if there's any content
518
+ if (block.trim()) {
519
+ srtBlocks.push({
520
+ counter,
521
+ startTime,
522
+ text: block.trim(),
523
+ html: formatBlockSRT(counter, startTime, block.trim())
524
+ });
525
+ }
526
+ }
527
+
528
+ displaySRTResults(srtBlocks, countWords(text));
529
+ } catch (error) {
530
+ console.error('Error during conversion:', error);
531
+ showAlert('Ocorreu um erro durante a conversão.', 'error');
532
+ } finally {
533
+ convertBtn.disabled = false;
534
+ convertBtn.innerHTML = '<i class="fas fa-exchange-alt mr-2"></i> Converter para SRT';
535
+ }
536
+ }, 500);
537
+ }
538
+
539
+ function splitIntoSentences(text) {
540
+ // This regex splits text into sentences ending with .!? followed by space or end of string
541
+ const sentenceRegex = /[^.!?]*[.!?](?:\s|$)/g;
542
+ const sentences = [];
543
+ let match;
544
+
545
+ while ((match = sentenceRegex.exec(text)) !== null) {
546
+ sentences.push(match[0].trim());
547
+ }
548
+
549
+ // Handle remaining text that doesn't end with punctuation
550
+ const remainingText = text.substring(sentenceRegex.lastIndex).trim();
551
+ if (remainingText) {
552
+ sentences.push(remainingText);
553
+ }
554
+
555
+ return sentences;
556
+ }
557
+
558
+ function displaySRTResults(blocks, totalWordCount) {
559
+ resultado.innerHTML = '';
560
+ blockCount.textContent = blocks.length;
561
+ totalWords.textContent = totalWordCount.toLocaleString();
562
+
563
+ // Calculate total duration
564
+ const lastBlock = blocks[blocks.length - 1];
565
+ const totalSecs = lastBlock.startTime + parseInt(blockDuration.value);
566
+ totalDuration.textContent = formatTime(totalSecs).split(',')[0];
567
+
568
+ blocks.forEach(block => {
569
+ const blockElement = document.createElement('div');
570
+ blockElement.className = `srt-block bg-white dark:bg-gray-700 p-4 rounded-lg shadow-sm ${fontSize.value}`;
571
+ blockElement.innerHTML = `
572
+ <div class="flex justify-between items-start mb-2">
573
+ <span class="font-mono text-sm text-gray-500 dark:text-gray-400">Bloco ${block.counter} | ${formatTime(block.startTime)} → ${formatTime(block.startTime + parseInt(blockDuration.value))} | ${countWords(block.text)} palavras</span>
574
+ <button class="copy-btn px-2 py-1 bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300 rounded text-sm hover:bg-gray-200 dark:hover:bg-gray-500 tooltip" data-text="${escapeHtml(block.text)}">
575
+ <i class="fas fa-copy"></i>
576
+ <span class="tooltip-text">Copiar bloco</span>
577
+ </button>
578
+ </div>
579
+ <div class="whitespace-pre-wrap dark:text-gray-300">${block.text}</div>
580
+ `;
581
+ resultado.appendChild(blockElement);
582
+ });
583
+
584
+ // Add copy events for each block
585
+ document.querySelectorAll('.copy-btn').forEach(btn => {
586
+ btn.addEventListener('click', function() {
587
+ const text = this.getAttribute('data-text');
588
+ copyToClipboard(text);
589
+ showAlert('Bloco copiado!', 'success');
590
+ animateButton(this);
591
+ });
592
+ });
593
+
594
+ resultsSection.classList.remove('hidden');
595
+ window.scrollTo({
596
+ top: resultsSection.offsetTop - 20,
597
+ behavior: 'smooth'
598
+ });
599
+ }
600
+
601
+ function downloadSRT() {
602
+ const allBlocks = Array.from(document.querySelectorAll('.srt-block'));
603
+ let srtContent = '';
604
+
605
+ allBlocks.forEach((block, index) => {
606
+ const timeInfo = block.querySelector('span').textContent;
607
+ const text = block.querySelector('div:last-child').textContent;
608
+ srtContent += `${index + 1}\n${timeInfo.split(' | ')[1].replace(' → ', ' --> ')}\n${text}\n\n`;
609
+ });
610
+
611
+ const blob = new Blob([srtContent], { type: 'text/plain' });
612
+ const url = URL.createObjectURL(blob);
613
+ const a = document.createElement('a');
614
+ a.href = url;
615
+ a.download = 'legendas.srt';
616
+ document.body.appendChild(a);
617
+ a.click();
618
+ document.body.removeChild(a);
619
+ URL.revokeObjectURL(url);
620
+
621
+ showAlert('Arquivo SRT baixado!', 'success');
622
+ animateButton(downloadBtn);
623
+ }
624
+
625
+ function copyAllSRT() {
626
+ const allBlocks = Array.from(document.querySelectorAll('.srt-block'));
627
+ let srtContent = '';
628
+
629
+ allBlocks.forEach((block, index) => {
630
+ const timeInfo = block.querySelector('span').textContent;
631
+ const text = block.querySelector('div:last-child').textContent;
632
+ srtContent += `${index + 1}\n${timeInfo.split(' | ')[1].replace(' → ', ' --> ')}\n${text}\n\n`;
633
+ });
634
+
635
+ copyToClipboard(srtContent);
636
+ showAlert('Todo o conteúdo SRT copiado!', 'success');
637
+ animateButton(copyAllBtn);
638
+ }
639
+
640
+ function changeFontSize() {
641
+ const blocks = document.querySelectorAll('.srt-block');
642
+ blocks.forEach(block => {
643
+ block.classList.remove('text-sm', 'text-base', 'text-lg');
644
+ block.classList.add(fontSize.value);
645
+ });
646
+ }
647
+
648
+ // Helper functions
649
+ function escapeHtml(unsafe) {
650
+ return unsafe
651
+ .replace(/&/g, "&amp;")
652
+ .replace(/</g, "&lt;")
653
+ .replace(/>/g, "&gt;")
654
+ .replace(/"/g, "&quot;")
655
+ .replace(/'/g, "&#039;");
656
+ }
657
+
658
+ function copyToClipboard(text) {
659
+ const textarea = document.createElement('textarea');
660
+ textarea.value = text;
661
+ document.body.appendChild(textarea);
662
+ textarea.select();
663
+ document.execCommand('copy');
664
+ document.body.removeChild(textarea);
665
+ }
666
+
667
+ function showAlert(message, type) {
668
+ const alert = document.createElement('div');
669
+ alert.className = `fixed top-4 right-4 px-4 py-2 rounded-md shadow-lg text-white ${
670
+ type === 'error' ? 'bg-red-500' : 'bg-green-500'
671
+ } animate-bounce`;
672
+ alert.textContent = message;
673
+ document.body.appendChild(alert);
674
+
675
+ setTimeout(() => {
676
+ alert.style.opacity = '0';
677
+ setTimeout(() => {
678
+ document.body.removeChild(alert);
679
+ }, 300);
680
+ }, 3000);
681
+ }
682
+
683
+ function animateButton(button) {
684
+ button.classList.add('animate-pulse');
685
+ setTimeout(() => {
686
+ button.classList.remove('animate-pulse');
687
+ }, 300);
688
+ }
689
+ });
690
+ </script>
691
+ <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=hiojo/srt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
692
+ </html>
prompts.txt ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ crie uma aplicação pra esse código: import requests import os import csv import time import sys import urllib.parse from pathlib import Path # URL da API Pollinations.ai para geração de imagens API_URL = "https://image.pollinations.ai/prompt/{prompt}" # Intervalo entre requisições em segundos REQUEST_INTERVAL = 5 # Pasta para salvar as imagens geradas OUTPUT_IMAGE_DIR = "imagens_roteiros" # Nome do arquivo CSV de saída OUTPUT_CSV_FILE = "roteiros_imagens.csv" def gerar_e_salvar_imagem(prompt, output_image_path): """Envia o prompt para a API e salva a imagem resultante.""" try: print(f"Gerando imagem para: \"{prompt[:60]}...\"", flush=True) # Cria a pasta de saída de imagens se não existir output_image_path.parent.mkdir(parents=True, exist_ok=True) # Monta a URL da API com o prompt codificado # Adicionando parâmetros opcionais, como tamanho, se necessário # Ex: params = {"width": 512, "height": 512} params = {} encoded_prompt = urllib.parse.quote(prompt) url = API_URL.format(prompt=encoded_prompt) # Faz a requisição GET para a API response = requests.get(url, params=params, stream=True, timeout=120) # Timeout de 120s response.raise_for_status() # Levanta erro para status HTTP ruins (4xx ou 5xx) # Salva a imagem recebida with open(output_image_path, 'wb') as f: for chunk in response.iter_content(chunk_size=8192): f.write(chunk) print(f"Imagem salva como: \"{output_image_path}\"", flush=True) return True except requests.exceptions.Timeout: print(f"Erro: Timeout ao gerar imagem para \"{prompt[:60]}...\"", flush=True) return False except requests.exceptions.RequestException as e: print(f"Erro na requisição para \"{prompt[:60]}...\": {e}", flush=True) return False except Exception as e: print(f"Erro inesperado ao processar \"{prompt[:60]}...\": {e}", flush=True) return False def processar_roteiros(input_folder_path): """Processa arquivos .txt em uma pasta, gera imagens e cria um CSV.""" input_path = Path(input_folder_path) output_image_base_path = Path(OUTPUT_IMAGE_DIR) output_csv_path = Path(OUTPUT_CSV_FILE) if not input_path.is_dir(): print(f"Erro: Pasta de entrada não encontrada em \"{input_folder_path}\"", flush=True) return # Encontra todos os arquivos .txt na pasta de entrada roteiro_files = list(input_path.glob("*.txt")) if not roteiro_files: print(f"Nenhum arquivo .txt encontrado em \"{input_folder_path}\"", flush=True) return print(f"Encontrados {len(roteiro_files)} arquivos .txt para processar.") # Abre o arquivo CSV para escrita with open(output_csv_path, 'w', newline='', encoding='utf-8') as csvfile: csv_writer = csv.writer(csvfile) # Escreve o cabeçalho csv_writer.writerow(["Roteiro", "CaminhoImagem"]) total_linhas_processadas = 0 total_imagens_geradas = 0 # Itera sobre cada arquivo de roteiro for file_path in roteiro_files: print(f"\nProcessando arquivo: \"{file_path.name}\"", flush=True) try: with open(file_path, 'r', encoding='utf-8') as f: linhas = f.readlines() # Itera sobre cada linha do arquivo for i, linha in enumerate(linhas): prompt = linha.strip() if not prompt: # Pula linhas vazias continue total_linhas_processadas += 1 # Define o nome e caminho da imagem de saída image_filename = f"{file_path.stem}_linha_{i + 1:04d}.png" output_image_path = output_image_base_path / image_filename # Gera e salva a imagem sucesso = gerar_e_salvar_imagem(prompt, output_image_path) # Escreve no CSV if sucesso: csv_writer.writerow([prompt, str(output_image_path)]) total_imagens_geradas += 1 else: # Registra a falha no CSV sem caminho de imagem csv_writer.writerow([prompt, "FALHA_NA_GERACAO"]) # Espera o intervalo definido antes da próxima requisição # (Não espera após a última linha do último arquivo) print(f"Aguardando {REQUEST_INTERVAL} segundos...", flush=True) time.sleep(REQUEST_INTERVAL) except Exception as e: print(f"Erro ao processar o arquivo \"{file_path.name}\": {e}", flush=True) # Registra erro geral para o arquivo no CSV? # csv_writer.writerow([f"ERRO_ARQUIVO: {file_path.name}", str(e)]) print(f"\nProcessamento concluído.") print(f"Total de linhas processadas: {total_linhas_processadas}") print(f"Total de imagens geradas com sucesso: {total_imagens_geradas}") print(f"Resultados salvos em: \"{output_csv_path}\"", flush=True) print(f"Imagens salvas em: \"{output_image_base_path}\"", flush=True) if __name__ == "__main__": if len(sys.argv) != 2: print("Uso: python3.11 roteiro_para_imagens.py <caminho_para_pasta_de_roteiros>", flush=True) sys.exit(1) pasta_roteiros = sys.argv[1] processar_roteiros(pasta_roteiros)
2
+ crie uma aplicação pra rodar esse código totalmente funcional com todas funções ok? adapte oque for necessário, quero que o download das imagens sem automático após geradas:import requests import os import csv import time import sys import urllib.parse from pathlib import Path # URL da API Pollinations.ai para geração de imagens API_URL = "https://image.pollinations.ai/prompt/{prompt}" # Intervalo entre requisições em segundos REQUEST_INTERVAL = 5 # Pasta para salvar as imagens geradas OUTPUT_IMAGE_DIR = "imagens_roteiros" # Nome do arquivo CSV de saída OUTPUT_CSV_FILE = "roteiros_imagens.csv" def gerar_e_salvar_imagem(prompt, output_image_path): """Envia o prompt para a API e salva a imagem resultante.""" try: print(f"Gerando imagem para: \"{prompt[:60]}...\"", flush=True) # Cria a pasta de saída de imagens se não existir output_image_path.parent.mkdir(parents=True, exist_ok=True) # Monta a URL da API com o prompt codificado # Adicionando parâmetros opcionais, como tamanho, se necessário # Ex: params = {"width": 512, "height": 512} params = {} encoded_prompt = urllib.parse.quote(prompt) url = API_URL.format(prompt=encoded_prompt) # Faz a requisição GET para a API response = requests.get(url, params=params, stream=True, timeout=120) # Timeout de 120s response.raise_for_status() # Levanta erro para status HTTP ruins (4xx ou 5xx) # Salva a imagem recebida with open(output_image_path, 'wb') as f: for chunk in response.iter_content(chunk_size=8192): f.write(chunk) print(f"Imagem salva como: \"{output_image_path}\"", flush=True) return True except requests.exceptions.Timeout: print(f"Erro: Timeout ao gerar imagem para \"{prompt[:60]}...\"", flush=True) return False except requests.exceptions.RequestException as e: print(f"Erro na requisição para \"{prompt[:60]}...\": {e}", flush=True) return False except Exception as e: print(f"Erro inesperado ao processar \"{prompt[:60]}...\": {e}", flush=True) return False def processar_roteiros(input_folder_path): """Processa arquivos .txt em uma pasta, gera imagens e cria um CSV.""" input_path = Path(input_folder_path) output_image_base_path = Path(OUTPUT_IMAGE_DIR) output_csv_path = Path(OUTPUT_CSV_FILE) if not input_path.is_dir(): print(f"Erro: Pasta de entrada não encontrada em \"{input_folder_path}\"", flush=True) return # Encontra todos os arquivos .txt na pasta de entrada roteiro_files = list(input_path.glob("*.txt")) if not roteiro_files: print(f"Nenhum arquivo .txt encontrado em \"{input_folder_path}\"", flush=True) return print(f"Encontrados {len(roteiro_files)} arquivos .txt para processar.") # Abre o arquivo CSV para escrita with open(output_csv_path, 'w', newline='', encoding='utf-8') as csvfile: csv_writer = csv.writer(csvfile) # Escreve o cabeçalho csv_writer.writerow(["Roteiro", "CaminhoImagem"]) total_linhas_processadas = 0 total_imagens_geradas = 0 # Itera sobre cada arquivo de roteiro for file_path in roteiro_files: print(f"\nProcessando arquivo: \"{file_path.name}\"", flush=True) try: with open(file_path, 'r', encoding='utf-8') as f: linhas = f.readlines() # Itera sobre cada linha do arquivo for i, linha in enumerate(linhas): prompt = linha.strip() if not prompt: # Pula linhas vazias continue total_linhas_processadas += 1 # Define o nome e caminho da imagem de saída image_filename = f"{file_path.stem}_linha_{i + 1:04d}.png" output_image_path = output_image_base_path / image_filename # Gera e salva a imagem sucesso = gerar_e_salvar_imagem(prompt, output_image_path) # Escreve no CSV if sucesso: csv_writer.writerow([prompt, str(output_image_path)]) total_imagens_geradas += 1 else: # Registra a falha no CSV sem caminho de imagem csv_writer.writerow([prompt, "FALHA_NA_GERACAO"]) # Espera o intervalo definido antes da próxima requisição # (Não espera após a última linha do último arquivo) print(f"Aguardando {REQUEST_INTERVAL} segundos...", flush=True) time.sleep(REQUEST_INTERVAL) except Exception as e: print(f"Erro ao processar o arquivo \"{file_path.name}\": {e}", flush=True) # Registra erro geral para o arquivo no CSV? # csv_writer.writerow([f"ERRO_ARQUIVO: {file_path.name}", str(e)]) print(f"\nProcessamento concluído.") print(f"Total de linhas processadas: {total_linhas_processadas}") print(f"Total de imagens geradas com sucesso: {total_imagens_geradas}") print(f"Resultados salvos em: \"{output_csv_path}\"", flush=True) print(f"Imagens salvas em: \"{output_image_base_path}\"", flush=True) if __name__ == "__main__": if len(sys.argv) != 2: print("Uso: python3.11 roteiro_para_imagens.py <caminho_para_pasta_de_roteiros>", flush=True) sys.exit(1) pasta_roteiros = sys.argv[1] processar_roteiros(pasta_roteiros)
3
+ quero que adicione os parametros desse index nesse aqui quero a parte referente a terminar no ponto etc: <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Conversor Avançado de Texto para SRT com Gerador de Imagens</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> @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .fade-in { animation: fadeIn 0.5s ease-out forwards; } .slide-in { animation: slideIn 0.3s ease-out forwards; } .pulse { animation: pulse 2s infinite; } .rotate { animation: rotate 2s linear infinite; } .text-area-container { position: relative; } .char-count { position: absolute; right: 10px; bottom: 10px; background: rgba(255, 255, 255, 0.8); padding: 2px 8px; border-radius: 10px; font-size: 0.8rem; } .dark .char-count { background: rgba(31, 41, 55, 0.8); color: white; } .progress-bar { height: 4px; background: #e2e8f0; border-radius: 2px; overflow: hidden; } .dark .progress-bar { background: #374151; } .progress-fill { height: 100%; background: #3b82f6; transition: width 0.3s ease; } .srt-block { border-left: 4px solid #3b82f6; transition: all 0.3s ease; } .dark .srt-block { background-color: #1f2937; border-left-color: #60a5fa; } .srt-block:hover { transform: translateX(5px); background-color: #f8fafc; } .dark .srt-block:hover { background-color: #374151; } .copy-btn { opacity: 0; transition: opacity 0.3s ease; } .srt-block:hover .copy-btn { opacity: 1; } .tooltip { position: relative; } .tooltip-text { visibility: hidden; width: 120px; background-color: #333; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 0.3s; } .dark .tooltip-text { background-color: #111827; } .tooltip:hover .tooltip-text { visibility: visible; opacity: 1; } .tab-content { display: none; } .tab-content.active { display: block; animation: fadeIn 0.5s ease-out; } .image-block { transition: all 0.3s ease; } .image-block:hover { transform: scale(1.02); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .dark .image-block:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2); } .clock { font-family: 'Courier New', monospace; letter-spacing: 2px; } .dark { background-color: #111827; color: #f3f4f6; } .dark .bg-white { background-color: #1f2937; } .dark .text-gray-800 { color: #f3f4f6; } .dark .text-gray-600 { color: #d1d5db; } .dark .border-gray-300 { border-color: #4b5563; } .dark .bg-gray-200 { background-color: #374151; color: #f3f4f6; } .dark .bg-gray-50 { background-color: #1f2937; } .dark .border-gray-200 { border-color: #374151; } .dark .shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2); } .dark .shadow-inner { box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3); } </style> </head> <body class="bg-gray-50 min-h-screen flex flex-col dark:bg-gray-900 transition-colors duration-300"> <div class="container mx-auto px-4 py-8 flex-grow"> <div class="max-w-5xl mx-auto"> <!-- Header with Dark Mode Toggle and Clock --> <header class="text-center mb-8 fade-in relative"> <div class="absolute top-0 right-0 flex items-center space-x-4"> <div class="clock bg-gray-200 dark:bg-gray-700 px-3 py-1 rounded-md text-sm font-mono"> <span id="hours">00</span>:<span id="minutes">00</span>:<span id="seconds">00</span> </div> <button id="darkModeToggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200"> <i class="fas fa-moon dark:hidden"></i> <i class="fas fa-sun hidden dark:inline"></i> </button> </div> <h1 class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-white mb-2"> <i class="fas fa-closed-captioning text-blue-500 mr-2"></i> Conversor de Texto para SRT com Gerador de Imagens </h1> <p class="text-gray-600 dark:text-gray-300">Transforme texto em legendas SRT e gere imagens para cada bloco</p> </header> <!-- Tabs Navigation --> <div class="flex border-b border-gray-200 dark:border-gray-700 mb-6 fade-in"> <button class="tab-btn px-4 py-2 font-medium text-blue-600 dark:text-blue-400 border-b-2 border-blue-500" data-tab="converter"> <i class="fas fa-exchange-alt mr-2"></i> Conversor SRT </button> <button class="tab-btn px-4 py-2 font-medium text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400" data-tab="images"> <i class="fas fa-images mr-2"></i> Biblioteca de Imagens </button> </div> <!-- Converter Tab --> <div id="converter" class="tab-content active"> <!-- Main Form --> <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden mb-8"> <div class="p-6"> <div class="flex justify-between items-center mb-4"> <h2 class="text-xl font-semibold text-gray-800 dark:text-white"> <i class="fas fa-edit text-blue-500 mr-2"></i> Insira seu texto </h2> <div class="flex space-x-2"> <button id="sampleBtn" type="button" class="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md text-sm hover:bg-gray-300 dark:hover:bg-gray-600 transition"> <i class="fas fa-lightbulb mr-1"></i> Exemplo </button> <button id="clearInputBtn" type="button" class="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md text-sm hover:bg-gray-300 dark:hover:bg-gray-600 transition"> <i class="fas fa-trash-alt mr-1"></i> Limpar </button> </div> </div> <div class="text-area-container mb-2"> <textarea id="textoInput" class="w-full h-64 p-4 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none dark:bg-gray-700 dark:text-white" placeholder="Cole ou digite o texto que deseja converter para formato SRT..."></textarea> <div class="char-count dark:bg-gray-700 dark:text-gray-300"> <span id="charCount">0</span> caracteres | <span id="wordCount">0</span> palavras </div> </div> <div class="progress-bar mb-4"> <div id="progressFill" class="progress-fill" style="width: 0%"></div> </div> <div class="flex flex-wrap justify-between items-center"> <div class="mb-4 md:mb-0"> <div class="flex items-center space-x-4"> <div class="flex items-center"> <label for="charsPerBlock" class="mr-2 text-sm text-gray-600 dark:text-gray-300">Caracteres/bloco:</label> <input type="number" id="charsPerBlock" value="490" min="50" max="1000" class="w-20 p-1 border border-gray-300 dark:border-gray-600 rounded text-sm dark:bg-gray-700 dark:text-white"> </div> <div class="flex items-center"> <label for="blockDuration" class="mr-2 text-sm text-gray-600 dark:text-gray-300">Duração (s):</label> <input type="number" id="blockDuration" value="50" min="1" max="120" class="w-16 p-1 border border-gray-300 dark:border-gray-600 rounded text-sm dark:bg-gray-700 dark:text-white"> </div> </div> </div> <button id="convertBtn" type="button" class="px-6 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition flex items-center"> <i class="fas fa-exchange-alt mr-2"></i> Converter para SRT </button> </div> </div> </div> <!-- Results Section --> <div id="resultsSection" class="hidden"> <div class="flex justify-between items-center mb-4"> <h2 class="text-xl font-semibold text-gray-800 dark:text-white"> <i class="fas fa-file-alt text-green-500 mr-2"></i> Legendas SRT Geradas </h2> <div class="flex space-x-2"> <button id="downloadBtn" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition flex items-center"> <i class="fas fa-download mr-2"></i> Baixar SRT </button> <button id="copyAllBtn" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition flex items-center"> <i class="fas fa-copy mr-2"></i> Copiar Tudo </button> <button id="generateImagesBtn" class="px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 transition flex items-center"> <i class="fas fa-images mr-2"></i> Gerar Imagens </button> </div> </div> <div class="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-4 mb-4"> <div class="flex justify-between items-center mb-3"> <div class="text-sm text-gray-600 dark:text-gray-300"> <span id="blockCount">0</span> blocos gerados | <span id="totalDuration">00:00:00</span> de duração total | <span id="totalWords">0</span> palavras </div> <div class="flex items-center"> <label for="fontSize" class="mr-2 text-sm text-gray-600 dark:text-gray-300">Tamanho:</label> <select id="fontSize" class="p-1 border border-gray-300 dark:border-gray-600 rounded text-sm bg-white dark:bg-gray-700 dark:text-white"> <option value="text-sm">Pequeno</option> <option value="text-base" selected>Normal</option> <option value="text-lg">Grande</option> </select> </div> </div> <div id="resultado" class="space-y-4"></div> </div> </div> </div> <!-- Images Tab --> <div id="images" class="tab-content"> <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden mb-8"> <div class="p-6"> <div class="flex justify-between items-center mb-6"> <h2 class="text-xl font-semibold text-gray-800 dark:text-white"> <i class="fas fa-images text-purple-500 mr-2"></i> Biblioteca de Imagens Geradas </h2> <div class="flex space-x-2"> <button id="refreshImagesBtn" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition flex items-center"> <i class="fas fa-sync-alt mr-2"></i> Atualizar </button> <button id="downloadAllImagesBtn" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition flex items-center"> <i class="fas fa-download mr-2"></i> Baixar Tudo </button> </div> </div> <div id="imageLibrary" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div class="text-center py-10 text-gray-500 dark:text-gray-400"> <i class="fas fa-images text-4xl mb-2"></i> <p>Nenhuma imagem gerada ainda.</p> <p class="text-sm">Converta um texto para SRT e clique em "Gerar Imagens"</p> </div> </div> </div> </div> </div> </div> </div> <!-- Footer --> <footer class="bg-white dark:bg-gray-800 py-4 shadow-inner"> <div class="container mx-auto px-4 text-center text-gray-600 dark:text-gray-300 text-sm"> <p>© 2023 Conversor SRT | Desenvolvido por <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Renatim Dark</a></p> <div class="flex justify-center space-x-4 mt-2"> <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400"><i class="fab fa-github"></i></a> <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400"><i class="fab fa-twitter"></i></a> <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400"><i class="fab fa-linkedin"></i></a> </div> </div> </footer> <script> document.addEventListener('DOMContentLoaded', function() { // Elements const textoInput = document.getElementById('textoInput'); const convertBtn = document.getElementById('convertBtn'); const resultado = document.getElementById('resultado'); const downloadBtn = document.getElementById('downloadBtn'); const clearInputBtn = document.getElementById('clearInputBtn'); const sampleBtn = document.getElementById('sampleBtn'); const copyAllBtn = document.getElementById('copyAllBtn'); const generateImagesBtn = document.getElementById('generateImagesBtn'); const resultsSection = document.getElementById('resultsSection'); const charCount = document.getElementById('charCount'); const wordCount = document.getElementById('wordCount'); const blockCount = document.getElementById('blockCount'); const totalDuration = document.getElementById('totalDuration'); const totalWords = document.getElementById('totalWords'); const progressFill = document.getElementById('progressFill'); const charsPerBlock = document.getElementById('charsPerBlock'); const blockDuration = document.getElementById('blockDuration'); const fontSize = document.getElementById('fontSize'); const darkModeToggle = document.getElementById('darkModeToggle'); const tabButtons = document.querySelectorAll('.tab-btn'); const tabContents = document.querySelectorAll('.tab-content'); const imageLibrary = document.getElementById('imageLibrary'); const refreshImagesBtn = document.getElementById('refreshImagesBtn'); const downloadAllImagesBtn = document.getElementById('downloadAllImagesBtn'); const hoursElement = document.getElementById('hours'); const minutesElement = document.getElementById('minutes'); const secondsElement = document.getElementById('seconds'); // Sample text const sampleText = `Este é um exemplo de texto que será convertido para o formato SRT. O formato SRT é usado para legendas em vídeos e cada bloco contém: 1. Um número sequencial 2. O tempo de início e fim no formato HH:MM:SS,mmm 3. O texto da legenda 4. Uma linha em branco para separar os blocos Você pode editar este texto ou apagá-lo para inserir o seu próprio conteúdo. O conversor irá dividir automaticamente o texto em blocos de acordo com as configurações de caracteres por bloco e duração.`; // Initialize updateCounts(); updateClock(); setInterval(updateClock, 1000); checkDarkModePreference(); // Events textoInput.addEventListener('input', updateCounts); sampleBtn.addEventListener('click', insertSampleText); clearInputBtn.addEventListener('click', clearInput); convertBtn.addEventListener('click', convertToSRT); downloadBtn.addEventListener('click', downloadSRT); copyAllBtn.addEventListener('click', copyAllSRT); fontSize.addEventListener('change', changeFontSize); darkModeToggle.addEventListener('click', toggleDarkMode); generateImagesBtn.addEventListener('click', generateImages); refreshImagesBtn.addEventListener('click', refreshImageLibrary); downloadAllImagesBtn.addEventListener('click', downloadAllImages); // Tab switching tabButtons.forEach(button => { button.addEventListener('click', () => { const tabId = button.getAttribute('data-tab'); // Update active tab button tabButtons.forEach(btn => { btn.classList.remove('text-blue-600', 'dark:text-blue-400', 'border-blue-500'); btn.classList.add('text-gray-500', 'dark:text-gray-400', 'hover:text-blue-600', 'dark:hover:text-blue-400'); }); button.classList.remove('text-gray-500', 'dark:text-gray-400', 'hover:text-blue-600', 'dark:hover:text-blue-400'); button.classList.add('text-blue-600', 'dark:text-blue-400', 'border-blue-500'); // Show selected tab content tabContents.forEach(content => { content.classList.remove('active'); }); document.getElementById(tabId).classList.add('active'); }); }); // Functions function updateClock() { const now = new Date(); hoursElement.textContent = now.getHours().toString().padStart(2, '0'); minutesElement.textContent = now.getMinutes().toString().padStart(2, '0'); secondsElement.textContent = now.getSeconds().toString().padStart(2, '0'); } function checkDarkModePreference() { if (localStorage.getItem('darkMode') === 'enabled' || (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { document.body.classList.add('dark'); } } function toggleDarkMode() { document.body.classList.toggle('dark'); if (document.body.classList.contains('dark')) { localStorage.setItem('darkMode', 'enabled'); } else { localStorage.setItem('darkMode', 'disabled'); } } function countWords(text) { if (!text.trim()) return 0; return text.trim().split(/\s+/).length; } function updateCounts() { const text = textoInput.value; const charCountValue = text.length; const wordCountValue = countWords(text); charCount.textContent = charCountValue.toLocaleString(); wordCount.textContent = wordCountValue.toLocaleString(); // Update progress bar (now up to 1,000,000 characters) const maxChars = 1000000; const percentage = Math.min((charCountValue / maxChars) * 100, 100); progressFill.style.width = `${percentage}%`; // Change color based on percentage if (percentage > 90) { progressFill.style.backgroundColor = '#ef4444'; } else if (percentage > 70) { progressFill.style.backgroundColor = '#f59e0b'; } else { progressFill.style.backgroundColor = '#3b82f6'; } } function insertSampleText() { textoInput.value = sampleText; updateCounts(); animateButton(sampleBtn); } function clearInput() { textoInput.value = ''; updateCounts(); resultsSection.classList.add('hidden'); animateButton(clearInputBtn); } function formatTime(seconds) { const date = new Date(seconds * 1000); const hours = date.getUTCHours().toString().padStart(2, '0'); const minutes = date.getUTCMinutes().toString().padStart(2, '0'); const secs = date.getUTCSeconds().toString().padStart(2, '0'); const ms = date.getUTCMilliseconds().toString().padStart(3, '0').substring(0, 3); return `${hours}:${minutes}:${secs},${ms}`; } function formatBlockSRT(counter, start, text) { return `${counter}\n${formatTime(start)} --> ${formatTime(start + parseInt(blockDuration.value))}\n${text.trim()}\n\n`; } function convertToSRT() { const text = textoInput.value.trim(); if (!text) { showAlert('Por favor, insira algum texto para converter.', 'error'); return; } animateButton(convertBtn); // Simulate processing delay for better UX convertBtn.disabled = true; convertBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Processando...'; setTimeout(() => { const words = text.split(/\s+/); const srtBlocks = []; let block = ''; let counter = 1; let startTime = 0; const intervalBetweenBlocks = 5; // seconds between blocks const maxChars = parseInt(charsPerBlock.value) || 490; const duration = parseInt(blockDuration.value) || 50; const maxWords = Math.floor(maxChars / 5); // Estimate words based on avg word length words.forEach(word => { if ((block + word).length <= maxChars && block.split(/\s+/).length < maxWords) { block += word + ' '; } else { srtBlocks.push({ counter, startTime, text: block, html: formatBlockSRT(counter, startTime, block) }); counter++; startTime += duration + intervalBetweenBlocks; block = word + ' '; } }); if (block) { srtBlocks.push({ counter, startTime, text: block, html: formatBlockSRT(counter, startTime, block) }); } displaySRTResults(srtBlocks, countWords(text)); convertBtn.disabled = false; convertBtn.innerHTML = '<i class="fas fa-exchange-alt mr-2"></i> Converter para SRT'; }, 500); } function displaySRTResults(blocks, totalWordCount) { resultado.innerHTML = ''; blockCount.textContent = blocks.length; totalWords.textContent = totalWordCount.toLocaleString(); // Calculate total duration const lastBlock = blocks[blocks.length - 1]; const totalSecs = lastBlock.startTime + parseInt(blockDuration.value); totalDuration.textContent = formatTime(totalSecs).split(',')[0]; // Save blocks to localStorage for image generation localStorage.setItem('srtBlocks', JSON.stringify(blocks)); blocks.forEach(block => { const blockElement = document.createElement('div'); blockElement.className = `srt-block bg-white dark:bg-gray-700 p-4 rounded-lg shadow-sm ${fontSize.value}`; blockElement.innerHTML = ` <div class="flex justify-between items-start mb-2"> <span class="font-mono text-sm text-gray-500 dark:text-gray-400">Bloco ${block.counter} | ${formatTime(block.startTime)} → ${formatTime(block.startTime + parseInt(blockDuration.value))} | ${countWords(block.text)} palavras</span> <button class="copy-btn px-2 py-1 bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300 rounded text-sm hover:bg-gray-200 dark:hover:bg-gray-500 tooltip" data-text="${escapeHtml(block.text)}"> <i class="fas fa-copy"></i> <span class="tooltip-text">Copiar bloco</span> </button> </div> <div class="whitespace-pre-wrap dark:text-gray-300">${block.text}</div> `; resultado.appendChild(blockElement); }); // Add copy events for each block document.querySelectorAll('.copy-btn').forEach(btn => { btn.addEventListener('click', function() { const text = this.getAttribute('data-text'); copyToClipboard(text); showAlert('Bloco copiado!', 'success'); animateButton(this); }); }); resultsSection.classList.remove('hidden'); window.scrollTo({ top: resultsSection.offsetTop - 20, behavior: 'smooth' }); } function downloadSRT() { const allBlocks = Array.from(document.querySelectorAll('.srt-block')); let srtContent = ''; allBlocks.forEach((block, index) => { const timeInfo = block.querySelector('span').textContent; const text = block.querySelector('div:last-child').textContent; srtContent += `${index + 1}\n${timeInfo.split(' | ')[1].replace(' → ', ' --> ')}\n${text}\n\n`; }); const blob = new Blob([srtContent], { type: 'text/plain' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'legendas.srt'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); showAlert('Arquivo SRT baixado!', 'success'); animateButton(downloadBtn); } function copyAllSRT() { const allBlocks = Array.from(document.querySelectorAll('.srt-block')); let srtContent = ''; allBlocks.forEach((block, index) => { const timeInfo = block.querySelector('span').textContent; const text = block.querySelector('div:last-child').textContent; srtContent += `${index + 1}\n${timeInfo.split(' | ')[1].replace(' → ', ' --> ')}\n${text}\n\n`; }); copyToClipboard(srtContent); showAlert('Todo o conteúdo SRT copiado!', 'success'); animateButton(copyAllBtn); } function changeFontSize() { const blocks = document.querySelectorAll('.srt-block'); blocks.forEach(block => { block.classList.remove('text-sm', 'text-base', 'text-lg'); block.classList.add(fontSize.value); }); } function generateImages() { const blocks = JSON.parse(localStorage.getItem('srtBlocks')); if (!blocks || blocks.length === 0) { showAlert('Nenhum bloco SRT encontrado para gerar imagens.', 'error'); return; } animateButton(generateImagesBtn); generateImagesBtn.disabled = true; generateImagesBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Gerando...'; // Simulate API calls (in a real app, you would use actual API calls) setTimeout(() => { const generatedImages = []; blocks.forEach((block, index) => { // In a real implementation, you would call the image generation API here // For this demo, we'll just create mock image data const imageData = { id: Date.now() + index, prompt: block.text, imageUrl: `https://picsum.photos/800/450?random=${index}&grayscale`, timestamp: new Date().toISOString() }; generatedImages.push(imageData); }); // Save generated images to localStorage localStorage.setItem('generatedImages', JSON.stringify(generatedImages)); // Update image library refreshImageLibrary(); // Switch to images tab document.querySelector('[data-tab="images"]').click(); generateImagesBtn.disabled = false; generateImagesBtn.innerHTML = '<i class="fas fa-images mr-2"></i> Gerar Imagens'; showAlert(`${blocks.length} imagens geradas com sucesso!`, 'success'); }, 2000); } function refreshImageLibrary() { const generatedImages = JSON.parse(localStorage.getItem('generatedImages')) || []; if (generatedImages.length === 0) { imageLibrary.innerHTML = ` <div class="text-center py-10 text-gray-500 dark:text-gray-400 col-span-full"> <i class="fas fa-images text-4xl mb-2"></i> <p>Nenhuma imagem gerada ainda.</p> <p class="text-sm">Converta um texto para SRT e clique em "Gerar Imagens"</p> </div> `; return; } imageLibrary.innerHTML = ''; generatedImages.forEach((image, index) => { const imageElement = document.createElement('div'); imageElement.className = 'image-block bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-md'; imageElement.innerHTML = ` <div class="p-4"> <div class="aspect-w-16 aspect-h-9 mb-3"> <img src="${image.imageUrl}" alt="Imagem gerada para bloco ${index + 1}" class="w-full h-auto rounded"> </div> <div class="flex justify-between items-start"> <div> <h3 class="font-medium text-gray-800 dark:text-white">Bloco ${index + 1}</h3> <p class="text-xs text-gray-500 dark:text-gray-400">${new Date(image.timestamp).toLocaleString()}</p> </div> <div class="flex space-x-2"> <button class="download-image-btn px-2 py-1 bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300 rounded text-sm hover:bg-gray-200 dark:hover:bg-gray-500 tooltip" data-url="${image.imageUrl}"> <i class="fas fa-download"></i> <span class="tooltip-text">Baixar imagem</span> </button> <button class="copy-prompt-btn px-2 py-1 bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300 rounded text-sm hover:bg-gray-200 dark:hover:bg-gray-500 tooltip" data-prompt="${escapeHtml(image.prompt)}"> <i class="fas fa-copy"></i> <span class="tooltip-text">Copiar prompt</span> </button> </div> </div> <p class="text-sm text-gray-600 dark:text-gray-300 mt-2 line-clamp-3" title="${escapeHtml(image.prompt)}">${image.prompt}</p> </div> `; imageLibrary.appendChild(imageElement); }); // Add download events for each image document.querySelectorAll('.download-image-btn').forEach(btn => { btn.addEventListener('click', function() { const imageUrl = this.getAttribute('data-url'); downloadImage(imageUrl, `imagem-srt-${Date.now()}.jpg`); showAlert('Imagem baixada!', 'success'); animateButton(this); }); }); // Add copy events for each prompt document.querySelectorAll('.copy-prompt-btn').forEach(btn => { btn.addEventListener('click', function() { const prompt = this.getAttribute('data-prompt'); copyToClipboard(prompt); showAlert('Prompt copiado!', 'success'); animateButton(this); }); }); } function downloadAllImages() { const generatedImages = JSON.parse(localStorage.getItem('generatedImages')) || []; if (generatedImages.length === 0) { showAlert('Nenhuma imagem para baixar.', 'error'); return; } animateButton(downloadAllImagesBtn); // In a real implementation, you would create a zip file with all images // For this demo, we'll just download the first image setTimeout(() => { downloadImage(generatedImages[0].imageUrl, `todas-imagens-srt-${Date.now()}.zip`); showAlert('Iniciando download de todas as imagens (simulado)', 'success'); }, 1000); } function downloadImage(url, filename) { const a = document.createElement('a'); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); } // Helper functions function escapeHtml(unsafe) { return unsafe .replace(/&/g, "&amp;") .replace(/</g, "&lt;") .replace(/>/g, "&gt;") .replace(/"/g, "&quot;") .replace(/'/g, "&#039;"); } function copyToClipboard(text) { const textarea = document.createElement('textarea'); textarea.value = text; document.body.appendChild(textarea); textarea.select(); document.execCommand('copy'); document.body.removeChild(textarea); } function showAlert(message, type) { const alert = document.createElement('div'); alert.className = `fixed top-4 right-4 px-4 py-2 rounded-md shadow-lg text-white ${ type === 'error' ? 'bg-red-500' : 'bg-green-500' } animate-bounce`; alert.textContent = message; document.body.appendChild(alert); setTimeout(() => { alert.style.opacity = '0'; setTimeout(() => { document.body.removeChild(alert); }, 300); }, 3000); } function animateButton(button) { button.classList.add('animate-pulse'); setTimeout(() => { button.classList.remove('animate-pulse'); }, 300); } }); </script> </body> </html>