Hugging Face's logo

Spaces:
Athspi-ai
/
Translate
Running

App Files Community
Athspi commited on
Commit
6ee5562
·
verified ·
1 Parent(s): 816f4da

Create templates/result.html

Browse files
Files changed (1) hide show
  1. templates/result.html +205 -0
templates/result.html ADDED
@@ -0,0 +1,205 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!-- templates/result.html -->
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Your Dubbed Video</title>
8
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
9
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
10
+ <style>
11
+ :root {
12
+ --primary: #4361ee;
13
+ --primary-light: #4895ef;
14
+ --secondary: #3f37c9;
15
+ --dark: #1a1a2e;
16
+ --light: #f8f9fa;
17
+ --gray: #6c757d;
18
+ --border-radius: 12px;
19
+ --shadow: 0 10px 30px rgba(0,0,0,0.1);
20
+ }
21
+
22
+ * {
23
+ margin: 0;
24
+ padding: 0;
25
+ box-sizing: border-box;
26
+ }
27
+
28
+ body {
29
+ font-family: 'Poppins', sans-serif;
30
+ background-color: #f5f7ff;
31
+ color: var(--dark);
32
+ line-height: 1.6;
33
+ padding: 20px;
34
+ }
35
+
36
+ .container {
37
+ max-width: 800px;
38
+ margin: 0 auto;
39
+ background: white;
40
+ border-radius: var(--border-radius);
41
+ box-shadow: var(--shadow);
42
+ overflow: hidden;
43
+ }
44
+
45
+ header {
46
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
47
+ color: white;
48
+ padding: 2rem;
49
+ text-align: center;
50
+ }
51
+
52
+ h1 {
53
+ font-size: 2.2rem;
54
+ margin-bottom: 0.5rem;
55
+ }
56
+
57
+ .content {
58
+ padding: 2rem;
59
+ }
60
+
61
+ .result-section {
62
+ margin-bottom: 2rem;
63
+ }
64
+
65
+ .section-title {
66
+ color: var(--primary);
67
+ margin-bottom: 1rem;
68
+ display: flex;
69
+ align-items: center;
70
+ gap: 0.8rem;
71
+ }
72
+
73
+ .section-title i {
74
+ font-size: 1.5rem;
75
+ }
76
+
77
+ .video-container {
78
+ width: 100%;
79
+ border-radius: var(--border-radius);
80
+ overflow: hidden;
81
+ margin-bottom: 1.5rem;
82
+ box-shadow: var(--shadow);
83
+ }
84
+
85
+ video {
86
+ width: 100%;
87
+ display: block;
88
+ }
89
+
90
+ .script-container {
91
+ background: var(--dark);
92
+ color: var(--light);
93
+ padding: 1.5rem;
94
+ border-radius: var(--border-radius);
95
+ max-height: 300px;
96
+ overflow-y: auto;
97
+ font-family: 'Courier New', monospace;
98
+ white-space: pre-wrap;
99
+ line-height: 1.7;
100
+ }
101
+
102
+ .action-buttons {
103
+ display: flex;
104
+ gap: 1rem;
105
+ margin-top: 2rem;
106
+ }
107
+
108
+ .btn {
109
+ flex: 1;
110
+ padding: 1rem;
111
+ border-radius: var(--border-radius);
112
+ font-weight: 500;
113
+ text-align: center;
114
+ text-decoration: none;
115
+ display: flex;
116
+ align-items: center;
117
+ justify-content: center;
118
+ gap: 0.8rem;
119
+ transition: all 0.3s ease;
120
+ }
121
+
122
+ .btn-primary {
123
+ background: var(--primary);
124
+ color: white;
125
+ }
126
+
127
+ .btn-primary:hover {
128
+ background: var(--secondary);
129
+ transform: translateY(-2px);
130
+ box-shadow: 0 5px 15px rgba(63, 55, 201, 0.3);
131
+ }
132
+
133
+ .btn-secondary {
134
+ background: white;
135
+ color: var(--primary);
136
+ border: 1px solid var(--primary);
137
+ }
138
+
139
+ .btn-secondary:hover {
140
+ background: #f5f7ff;
141
+ transform: translateY(-2px);
142
+ }
143
+
144
+ @media (max-width: 768px) {
145
+ .action-buttons {
146
+ flex-direction: column;
147
+ }
148
+
149
+ header {
150
+ padding: 1.5rem;
151
+ }
152
+
153
+ h1 {
154
+ font-size: 1.8rem;
155
+ }
156
+
157
+ .content {
158
+ padding: 1.5rem;
159
+ }
160
+ }
161
+ </style>
162
+ </head>
163
+ <body>
164
+ <div class="container">
165
+ <header>
166
+ <h1>Your Dubbed Video is Ready!</h1>
167
+ <p>Download or create another one</p>
168
+ </header>
169
+
170
+ <div class="content">
171
+ <div class="result-section">
172
+ <h2 class="section-title">
173
+ <i class="fas fa-film"></i>
174
+ Dubbed Video
175
+ </h2>
176
+ <div class="video-container">
177
+ <video controls>
178
+ <source src="{{ video_url }}" type="video/mp4">
179
+ Your browser does not support the video tag.
180
+ </video>
181
+ </div>
182
+ </div>
183
+
184
+ <div class="result-section">
185
+ <h2 class="section-title">
186
+ <i class="fas fa-scroll"></i>
187
+ Generated Script
188
+ </h2>
189
+ <div class="script-container">{{ script }}</div>
190
+ </div>
191
+
192
+ <div class="action-buttons">
193
+ <a href="{{ video_url }}" download class="btn btn-primary">
194
+ <i class="fas fa-download"></i>
195
+ Download Video
196
+ </a>
197
+ <a href="/" class="btn btn-secondary">
198
+ <i class="fas fa-redo"></i>
199
+ Create Another
200
+ </a>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </body>
205
+ </html>