Update templates/index.html
Browse files- templates/index.html +71 -1
templates/index.html
CHANGED
|
@@ -1,4 +1,3 @@
|
|
| 1 |
-
<!-- templates/index.html -->
|
| 2 |
<!DOCTYPE html>
|
| 3 |
<html lang="en">
|
| 4 |
<head>
|
|
@@ -202,6 +201,47 @@
|
|
| 202 |
border: 1px solid rgba(247, 37, 133, 0.2);
|
| 203 |
}
|
| 204 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 205 |
.loader {
|
| 206 |
display: none;
|
| 207 |
text-align: center;
|
|
@@ -322,6 +362,25 @@
|
|
| 322 |
<div class="spinner"></div>
|
| 323 |
<p class="loading-text">Processing your video. Please wait...</p>
|
| 324 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 325 |
</div>
|
| 326 |
</div>
|
| 327 |
|
|
@@ -331,6 +390,7 @@
|
|
| 331 |
const uploadArea = document.getElementById('upload-area');
|
| 332 |
const fileInput = document.getElementById('video');
|
| 333 |
const fileInfo = document.getElementById('file-info');
|
|
|
|
| 334 |
|
| 335 |
// Handle file selection
|
| 336 |
fileInput.addEventListener('change', function() {
|
|
@@ -338,6 +398,11 @@
|
|
| 338 |
fileInfo.textContent = this.files[0].name;
|
| 339 |
uploadArea.style.borderColor = '#4361ee';
|
| 340 |
uploadArea.style.backgroundColor = 'rgba(67, 97, 238, 0.05)';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 341 |
}
|
| 342 |
});
|
| 343 |
|
|
@@ -361,6 +426,11 @@
|
|
| 361 |
if (e.dataTransfer.files.length) {
|
| 362 |
fileInput.files = e.dataTransfer.files;
|
| 363 |
fileInfo.textContent = e.dataTransfer.files[0].name;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 364 |
}
|
| 365 |
});
|
| 366 |
|
|
|
|
|
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
<html lang="en">
|
| 3 |
<head>
|
|
|
|
| 201 |
border: 1px solid rgba(247, 37, 133, 0.2);
|
| 202 |
}
|
| 203 |
|
| 204 |
+
.result-section {
|
| 205 |
+
margin-top: 2rem;
|
| 206 |
+
padding: 1.5rem;
|
| 207 |
+
background: #f8f9fe;
|
| 208 |
+
border-radius: var(--border-radius);
|
| 209 |
+
display: none;
|
| 210 |
+
}
|
| 211 |
+
|
| 212 |
+
.result-title {
|
| 213 |
+
font-size: 1.3rem;
|
| 214 |
+
margin-bottom: 1rem;
|
| 215 |
+
color: var(--secondary);
|
| 216 |
+
display: flex;
|
| 217 |
+
align-items: center;
|
| 218 |
+
gap: 0.5rem;
|
| 219 |
+
}
|
| 220 |
+
|
| 221 |
+
.result-title i {
|
| 222 |
+
font-size: 1.2rem;
|
| 223 |
+
}
|
| 224 |
+
|
| 225 |
+
.result-video {
|
| 226 |
+
width: 100%;
|
| 227 |
+
border-radius: var(--border-radius);
|
| 228 |
+
margin-bottom: 1.5rem;
|
| 229 |
+
aspect-ratio: 16 / 9;
|
| 230 |
+
background: black;
|
| 231 |
+
}
|
| 232 |
+
|
| 233 |
+
.script-box {
|
| 234 |
+
background: var(--dark);
|
| 235 |
+
color: white;
|
| 236 |
+
padding: 1.5rem;
|
| 237 |
+
border-radius: var(--border-radius);
|
| 238 |
+
max-height: 300px;
|
| 239 |
+
overflow-y: auto;
|
| 240 |
+
font-family: monospace;
|
| 241 |
+
white-space: pre-wrap;
|
| 242 |
+
line-height: 1.6;
|
| 243 |
+
}
|
| 244 |
+
|
| 245 |
.loader {
|
| 246 |
display: none;
|
| 247 |
text-align: center;
|
|
|
|
| 362 |
<div class="spinner"></div>
|
| 363 |
<p class="loading-text">Processing your video. Please wait...</p>
|
| 364 |
</div>
|
| 365 |
+
|
| 366 |
+
{% if result_video %}
|
| 367 |
+
<div class="result-section" id="result-section" style="display: block;">
|
| 368 |
+
<div class="result-title">
|
| 369 |
+
<i class="fas fa-video"></i>
|
| 370 |
+
Your Dubbed Video
|
| 371 |
+
</div>
|
| 372 |
+
<video controls class="result-video">
|
| 373 |
+
<source src="{{ result_video }}" type="video/mp4">
|
| 374 |
+
Your browser does not support the video tag.
|
| 375 |
+
</video>
|
| 376 |
+
|
| 377 |
+
<div class="result-title">
|
| 378 |
+
<i class="fas fa-scroll"></i>
|
| 379 |
+
Generated Script
|
| 380 |
+
</div>
|
| 381 |
+
<div class="script-box">{{ script }}</div>
|
| 382 |
+
</div>
|
| 383 |
+
{% endif %}
|
| 384 |
</div>
|
| 385 |
</div>
|
| 386 |
|
|
|
|
| 390 |
const uploadArea = document.getElementById('upload-area');
|
| 391 |
const fileInput = document.getElementById('video');
|
| 392 |
const fileInfo = document.getElementById('file-info');
|
| 393 |
+
const resultSection = document.getElementById('result-section');
|
| 394 |
|
| 395 |
// Handle file selection
|
| 396 |
fileInput.addEventListener('change', function() {
|
|
|
|
| 398 |
fileInfo.textContent = this.files[0].name;
|
| 399 |
uploadArea.style.borderColor = '#4361ee';
|
| 400 |
uploadArea.style.backgroundColor = 'rgba(67, 97, 238, 0.05)';
|
| 401 |
+
|
| 402 |
+
// Hide any previous results
|
| 403 |
+
if (resultSection) {
|
| 404 |
+
resultSection.style.display = 'none';
|
| 405 |
+
}
|
| 406 |
}
|
| 407 |
});
|
| 408 |
|
|
|
|
| 426 |
if (e.dataTransfer.files.length) {
|
| 427 |
fileInput.files = e.dataTransfer.files;
|
| 428 |
fileInfo.textContent = e.dataTransfer.files[0].name;
|
| 429 |
+
|
| 430 |
+
// Hide any previous results
|
| 431 |
+
if (resultSection) {
|
| 432 |
+
resultSection.style.display = 'none';
|
| 433 |
+
}
|
| 434 |
}
|
| 435 |
});
|
| 436 |
|