|
|
|
|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Your Dubbed Video</title> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> |
|
|
<style> |
|
|
:root { |
|
|
--primary: #4361ee; |
|
|
--primary-light: #4895ef; |
|
|
--secondary: #3f37c9; |
|
|
--dark: #1a1a2e; |
|
|
--light: #f8f9fa; |
|
|
--gray: #6c757d; |
|
|
--border-radius: 12px; |
|
|
--shadow: 0 10px 30px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background-color: #f5f7ff; |
|
|
color: var(--dark); |
|
|
line-height: 1.6; |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.container { |
|
|
max-width: 800px; |
|
|
margin: 0 auto; |
|
|
background: white; |
|
|
border-radius: var(--border-radius); |
|
|
box-shadow: var(--shadow); |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
header { |
|
|
background: linear-gradient(135deg, var(--primary), var(--secondary)); |
|
|
color: white; |
|
|
padding: 2rem; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
h1 { |
|
|
font-size: 2.2rem; |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
|
|
|
.content { |
|
|
padding: 2rem; |
|
|
} |
|
|
|
|
|
.result-section { |
|
|
margin-bottom: 2rem; |
|
|
} |
|
|
|
|
|
.section-title { |
|
|
color: var(--primary); |
|
|
margin-bottom: 1rem; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.8rem; |
|
|
} |
|
|
|
|
|
.section-title i { |
|
|
font-size: 1.5rem; |
|
|
} |
|
|
|
|
|
.video-container { |
|
|
width: 100%; |
|
|
border-radius: var(--border-radius); |
|
|
overflow: hidden; |
|
|
margin-bottom: 1.5rem; |
|
|
box-shadow: var(--shadow); |
|
|
} |
|
|
|
|
|
video { |
|
|
width: 100%; |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.script-container { |
|
|
background: var(--dark); |
|
|
color: var(--light); |
|
|
padding: 1.5rem; |
|
|
border-radius: var(--border-radius); |
|
|
max-height: 300px; |
|
|
overflow-y: auto; |
|
|
font-family: 'Courier New', monospace; |
|
|
white-space: pre-wrap; |
|
|
line-height: 1.7; |
|
|
} |
|
|
|
|
|
.action-buttons { |
|
|
display: flex; |
|
|
gap: 1rem; |
|
|
margin-top: 2rem; |
|
|
} |
|
|
|
|
|
.btn { |
|
|
flex: 1; |
|
|
padding: 1rem; |
|
|
border-radius: var(--border-radius); |
|
|
font-weight: 500; |
|
|
text-align: center; |
|
|
text-decoration: none; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
gap: 0.8rem; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.btn-primary { |
|
|
background: var(--primary); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.btn-primary:hover { |
|
|
background: var(--secondary); |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 5px 15px rgba(63, 55, 201, 0.3); |
|
|
} |
|
|
|
|
|
.btn-secondary { |
|
|
background: white; |
|
|
color: var(--primary); |
|
|
border: 1px solid var(--primary); |
|
|
} |
|
|
|
|
|
.btn-secondary:hover { |
|
|
background: #f5f7ff; |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.action-buttons { |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
header { |
|
|
padding: 1.5rem; |
|
|
} |
|
|
|
|
|
h1 { |
|
|
font-size: 1.8rem; |
|
|
} |
|
|
|
|
|
.content { |
|
|
padding: 1.5rem; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<header> |
|
|
<h1>Your Dubbed Video is Ready!</h1> |
|
|
<p>Download or create another one</p> |
|
|
</header> |
|
|
|
|
|
<div class="content"> |
|
|
<div class="result-section"> |
|
|
<h2 class="section-title"> |
|
|
<i class="fas fa-film"></i> |
|
|
Dubbed Video |
|
|
</h2> |
|
|
<div class="video-container"> |
|
|
<video controls> |
|
|
<source src="{{ video_url }}" type="video/mp4"> |
|
|
Your browser does not support the video tag. |
|
|
</video> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="result-section"> |
|
|
<h2 class="section-title"> |
|
|
<i class="fas fa-scroll"></i> |
|
|
Generated Script |
|
|
</h2> |
|
|
<div class="script-container">{{ script }}</div> |
|
|
</div> |
|
|
|
|
|
<div class="action-buttons"> |
|
|
<a href="{{ video_url }}" download class="btn btn-primary"> |
|
|
<i class="fas fa-download"></i> |
|
|
Download Video |
|
|
</a> |
|
|
<a href="/" class="btn btn-secondary"> |
|
|
<i class="fas fa-redo"></i> |
|
|
Create Another |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
