Hugging Face's logo

Spaces:
Elias207
/
videorayegan
Running

App Files Community
Elias207 commited on
Commit
1dc5be7
·
verified ·
1 Parent(s): 3833c7c

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +622 -270
index.html CHANGED
@@ -1,53 +1,51 @@
1
  <!DOCTYPE html>
2
  <html lang="fa" dir="rtl">
3
  <head>
4
- <!-- این خط مهم‌ترین بخش است و مشکل نمایش متن فارسی را حل می‌کند -->
5
  <meta charset="UTF-8">
6
-
7
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
- <title>ساخت ویدیو با هوش مصنوعی</title>
9
 
10
- <!-- بارگذاری فونت وزیرمتن برای نمایش زیبای متون فارسی -->
11
  <link rel="preconnect" href="https://fonts.googleapis.com">
12
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13
- <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap" rel="stylesheet">
14
 
15
  <style>
16
- /* CSS variables are now scoped to #imageToVideoApp and prefixed with iv2a- */
17
  #imageToVideoApp {
18
- --iv2a-color-primary: #5A67D8;
19
- --iv2a-color-primary-darker: #4C51BF;
20
- --iv2a-color-secondary: #805AD5;
21
- --iv2a-color-secondary-darker: #6B46C1;
22
- --iv2a-color-accent: #DD6B20;
23
- --iv2a-color-text: #1A202C;
24
- --iv2a-color-text-light: #4A5568;
25
- --iv2a-color-text-muted: #718096;
26
- --iv2a-color-bg-card: #FFFFFF;
27
- --iv2a-color-border: #CBD5E0;
28
- --iv2a-color-input-bg: #EDF2F7;
29
- --iv2a-color-white: #FFFFFF;
30
- --iv2a-color-success: #38A169;
31
- --iv2a-color-error: #E53E3E;
32
- --iv2a-color-warning-bg: #FFFBEB;
33
- --iv2a-color-warning-border: #FBBF24;
34
- --iv2a-color-warning-text: #B45309;
35
- --iv2a-transparent-pixel: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
36
-
37
- --iv2a-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.07), 0 1px 2px 0 rgba(0, 0, 0, 0.04);
38
- --iv2a-shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
39
- --iv2a-shadow-lg: 0 10px 20px -5px rgba(0, 0, 0, 0.1), 0 6px 10px -5px rgba(0, 0, 0, 0.05);
40
- --iv2a-shadow-xl: 0 20px 35px -10px rgba(0, 0, 0, 0.1), 0 10px 15px -8px rgba(0, 0, 0, 0.05);
41
- --iv2a-shadow-focus: 0 0 0 3px rgba(90, 103, 216, 0.35);
42
-
43
- --iv2a-border-radius-sm: 6px;
44
- --iv2a-border-radius-md: 10px;
45
- --iv2a-border-radius-lg: 14px;
46
- --iv2a-border-radius-xl: 20px;
47
- --iv2a-transition-speed: 0.25s;
 
48
  --iv2a-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
49
 
50
- /* Original #imageToVideoApp styles */
51
  font-family: 'Vazirmatn', sans-serif;
52
  color: var(--iv2a-color-text);
53
  line-height: 1.7;
@@ -56,12 +54,38 @@
56
  -webkit-font-smoothing: antialiased;
57
  -moz-osx-font-smoothing: grayscale;
58
  overflow-x: hidden;
 
59
  }
60
 
61
- /* Set body background color */
62
  body {
63
- background-color: #F7FAFC;
64
  margin: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
65
  }
66
 
67
  #imageToVideoApp * {
@@ -69,87 +93,139 @@
69
  margin: 0;
70
  padding: 0;
71
  }
72
-
73
- #imageToVideoApp .icon {
74
- display: inline-block;
75
- width: 1.2em;
76
- height: 1.2em;
77
- vertical-align: middle;
78
- fill: currentColor;
79
- }
80
 
81
  #imageToVideoApp .video-creator-app {
82
  width: 100%;
83
- max-width: 580px;
84
  margin: 40px auto;
85
  padding: 0 20px;
 
 
86
  }
87
 
 
88
  #imageToVideoApp .app-header {
89
  text-align: center;
90
  margin-bottom: 50px;
91
  animation: imageToVideoApp-fadeInDown 0.8s var(--iv2a-transition-easing) both;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
92
  }
93
 
94
  #imageToVideoApp .app-header h1 {
95
- font-size: 2.5em;
96
- font-weight: 800;
97
- color: var(--iv2a-color-primary);
 
 
 
98
  display: flex;
99
  align-items: center;
100
  justify-content: center;
101
- gap: 15px;
102
- margin-bottom: 15px;
 
103
  }
104
-
105
- #imageToVideoApp .app-header h1 .icon {
106
- width: 40px;
107
- height: 40px;
108
- color: var(--iv2a-color-secondary);
109
- filter: drop-shadow(0 3px 5px rgba(0,0,0,0.1));
110
  }
111
 
112
- #imageToVideoApp .app-header p {
113
- font-size: 1.15em;
114
- color: var(--iv2a-color-text-light);
115
  }
116
 
117
- #imageToVideoApp .form-container {
118
- perspective: 1000px;
 
 
 
119
  }
120
 
 
121
  #imageToVideoApp .form-section-card {
122
- background-color: var(--iv2a-color-bg-card);
123
- padding: 30px 35px;
 
 
124
  border-radius: var(--iv2a-border-radius-xl);
125
- box-shadow: var(--iv2a-shadow-lg);
126
- border: 1px solid var(--iv2a-color-border);
127
- transition: opacity 0.5s var(--iv2a-transition-easing), transform 0.5s var(--iv2a-transition-easing);
 
128
  margin-bottom: 30px;
129
  animation: imageToVideoApp-fadeInUp 0.6s var(--iv2a-transition-easing) 0.2s both;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
130
  }
131
 
132
  #imageToVideoApp .form-group {
133
- margin-bottom: 28px;
134
  }
135
 
136
  #imageToVideoApp label {
137
- display: block;
138
- font-size: 0.9rem;
139
- color: var(--iv2a-color-text-light);
140
- margin-bottom: 10px;
141
- font-weight: 600;
 
 
142
  }
143
 
144
- /* NEW: Image Drop Zone / Preview Area */
 
 
 
 
 
 
145
  #imageToVideoApp #image-drop-zone {
146
  position: relative;
147
  width: 100%;
148
- min-height: 200px;
149
- border: 2px dashed var(--iv2a-color-border);
150
  border-radius: var(--iv2a-border-radius-lg);
151
- background-color: var(--iv2a-color-input-bg);
152
- transition: all 0.3s var(--iv2a-transition-easing);
 
 
153
  display: flex;
154
  align-items: center;
155
  justify-content: center;
@@ -158,8 +234,11 @@
158
  }
159
 
160
  #imageToVideoApp #image-drop-zone:hover {
161
- border-color: var(--iv2a-color-primary);
162
- background-color: #E2E8F0;
 
 
 
163
  }
164
 
165
  #imageToVideoApp #imageFile {
@@ -178,26 +257,37 @@
178
  justify-content: center;
179
  text-align: center;
180
  color: var(--iv2a-color-text-muted);
181
- transition: opacity 0.3s ease;
182
- padding: 20px;
183
  }
184
-
185
- #imageToVideoApp .drop-zone-prompt .icon {
186
- width: 50px;
187
- height: 50px;
188
- margin-bottom: 15px;
189
- color: var(--iv2a-color-text-muted);
190
- transition: transform 0.3s ease;
 
 
 
191
  }
192
-
193
- #imageToVideoApp #image-drop-zone:hover .drop-zone-prompt .icon {
194
- transform: translateY(-5px) scale(1.05);
195
- color: var(--iv2a-color-primary);
196
  }
197
-
198
  #imageToVideoApp .drop-zone-prompt span {
199
- font-weight: 500;
200
- font-size: 0.95rem;
 
 
 
 
 
 
 
 
201
  }
202
 
203
  #imageToVideoApp #imagePreview {
@@ -208,278 +298,476 @@
208
  border-radius: var(--iv2a-border-radius-lg);
209
  opacity: 0;
210
  visibility: hidden;
211
- transform: scale(0.95);
212
- transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
213
  }
214
-
215
- /* State when image is loaded */
216
  #imageToVideoApp #image-drop-zone.has-image {
217
  border-style: solid;
218
- border-color: var(--iv2a-color-secondary);
219
- padding: 10px;
220
- background-color: #f7fafc;
221
- min-height: 150px; /* Adjust min-height when image is present */
222
- cursor: default;
223
  }
224
-
225
  #imageToVideoApp #image-drop-zone.has-image .drop-zone-prompt {
226
  opacity: 0;
227
  visibility: hidden;
228
  }
229
-
230
  #imageToVideoApp #image-drop-zone.has-image #imagePreview {
231
  opacity: 1;
232
  visibility: visible;
233
  transform: scale(1);
234
  }
235
 
 
236
  #imageToVideoApp input[type="text"],
237
  #imageToVideoApp textarea {
238
  width: 100%;
239
- padding: 15px 20px;
240
- border: 1px solid var(--iv2a-color-border);
241
  border-radius: var(--iv2a-border-radius-md);
242
  font-size: 1rem;
243
- background-color: var(--iv2a-color-input-bg);
244
  color: var(--iv2a-color-text);
245
  font-family: inherit;
246
  transition: all var(--iv2a-transition-speed) var(--iv2a-transition-easing);
 
247
  }
248
 
249
  #imageToVideoApp input[type="text"]::placeholder,
250
  #imageToVideoApp textarea::placeholder {
251
- color: #A0AEC0;
252
  }
253
-
254
  #imageToVideoApp input:focus,
255
  #imageToVideoApp textarea:focus {
256
  outline: none;
257
  border-color: var(--iv2a-color-primary);
258
- box-shadow: var(--iv2a-shadow-focus);
259
- background-color: var(--iv2a-color-white);
 
 
260
  }
261
 
262
  #imageToVideoApp textarea {
263
- min-height: 100px;
264
  resize: vertical;
265
  }
266
-
 
267
  #imageToVideoApp .action-button {
268
- padding: 16px 25px;
269
  border: none;
270
  border-radius: var(--iv2a-border-radius-md);
271
- font-size: 1rem;
272
  font-weight: 700;
273
  cursor: pointer;
274
  font-family: inherit;
275
  width: 100%;
276
- box-shadow: var(--iv2a-shadow-md);
277
  transition: all var(--iv2a-transition-speed) var(--iv2a-transition-easing);
278
  text-transform: uppercase;
279
- letter-spacing: 0.8px;
280
  position: relative;
281
  overflow: hidden;
282
  display: flex;
283
  align-items: center;
284
  justify-content: center;
285
- gap: 10px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
286
  }
287
 
288
  #imageToVideoApp .action-button:hover:not(:disabled) {
289
- transform: translateY(-3px) scale(1.01);
290
- box-shadow: var(--iv2a-shadow-lg);
291
  }
292
 
293
  #imageToVideoApp .action-button:active:not(:disabled) {
294
- transform: translateY(-1px) scale(0.99);
295
- box-shadow: var(--iv2a-shadow-sm);
296
  }
297
 
298
  #imageToVideoApp .action-button:disabled {
299
  background: var(--iv2a-color-input-bg) !important;
300
- color: #A0AEC0 !important;
301
  cursor: not-allowed;
302
  box-shadow: none !important;
303
  transform: none !important;
304
  }
305
 
306
  #imageToVideoApp #generateButton {
307
- background: linear-gradient(60deg, var(--iv2a-color-primary) 0%, var(--iv2a-color-secondary) 100%);
308
  color: white;
309
  margin-top: 10px;
 
310
  }
311
 
312
  #imageToVideoApp #generateButton:hover:not(:disabled) {
313
- background: linear-gradient(60deg, var(--iv2a-color-primary-darker) 0%, var(--iv2a-color-secondary-darker) 100%);
 
314
  }
315
 
 
 
 
 
 
 
 
 
 
 
316
  #imageToVideoApp #criticalErrorSection {
317
- background-color: var(--iv2a-color-warning-bg);
318
- padding: 25px;
 
319
  border-radius: var(--iv2a-border-radius-xl);
320
- box-shadow: var(--iv2a-shadow-lg);
 
 
321
  border: 2px solid var(--iv2a-color-warning-border);
322
- margin-bottom: 25px;
323
  animation: imageToVideoApp-fadeInUp 0.5s var(--iv2a-transition-easing) both;
 
 
 
 
 
 
 
 
 
 
 
 
 
324
  }
 
 
 
 
 
 
325
  #imageToVideoApp #criticalErrorSection .critical-error-actions {
326
- margin-top: 20px;
327
  display: flex;
328
  gap: 15px;
329
  }
 
330
  #imageToVideoApp #criticalErrorSection .critical-error-actions .action-button {
331
  flex-grow: 1;
332
  }
 
333
  #imageToVideoApp #criticalErrorSection .critical-error-actions .back-button {
334
- background-color: var(--iv2a-color-text-muted);
335
- color: var(--iv2a-color-white);
336
- }
337
- #imageToVideoApp #criticalErrorSection .critical-error-actions .back-button:hover {
338
- background-color: var(--iv2a-color-text-light);
339
- }
340
- #imageToVideoApp #criticalErrorSection .critical-error-actions .next-step-button {
341
- background-color: var(--iv2a-color-accent);
342
- color: var(--iv2a-color-white);
343
  }
344
- #imageToVideoApp #criticalErrorSection .critical-error-actions .next-step-button:hover {
345
- background-color: #C05621;
 
 
346
  }
347
 
348
  #imageToVideoApp #criticalErrorSection h2 {
349
- font-size: 1.25em;
350
  color: var(--iv2a-color-warning-text);
351
- margin-bottom: 15px;
352
- font-weight: 700;
353
  display: flex;
354
  align-items: center;
355
- gap: 10px;
356
- border-bottom: 1px solid var(--iv2a-color-warning-border);
357
- padding-bottom: 12px;
358
- }
359
-
360
- #imageToVideoApp #criticalErrorMessage {
361
- font-size: 0.95rem;
362
- color: var(--iv2a-color-text-light);
363
- line-height: 1.7;
364
- word-break: break-word;
365
- white-space: pre-line;
366
- }
367
- #imageToVideoApp #criticalErrorMessage .error-message-title {
368
- font-weight: 600;
369
- color: var(--iv2a-color-warning-text);
370
- display: block;
371
- margin-bottom: 8px;
372
- }
373
- #imageToVideoApp #criticalErrorMessage ul {
374
- list-style-type: "▫️ ";
375
- padding-right: 20px;
376
- margin-top: 10px;
377
- }
378
- #imageToVideoApp #criticalErrorMessage li {
379
- margin-bottom: 6px;
380
  }
381
 
 
382
  #imageToVideoApp .status-section,
383
  #imageToVideoApp .output-section {
384
  margin-top: 40px;
385
  padding: 35px;
386
- background-color: var(--iv2a-color-bg-card);
 
387
  border-radius: var(--iv2a-border-radius-xl);
388
- border: 1px solid var(--iv2a-color-border);
389
- box-shadow: var(--iv2a-shadow-lg);
 
 
390
  animation: imageToVideoApp-fadeInUp 0.5s var(--iv2a-transition-easing) both;
391
  }
392
 
393
  #imageToVideoApp .status-section h2,
394
  #imageToVideoApp .output-section h2 {
395
- font-size: 1.4em;
396
  color: var(--iv2a-color-text);
397
- border-bottom: 1px solid var(--iv2a-color-border);
398
- padding-bottom: 18px;
399
- margin-bottom: 25px;
400
- font-weight: 700;
 
401
  display: flex;
402
  align-items: center;
403
- gap: 12px;
404
- }
405
-
406
- #imageToVideoApp .output-section h2 .icon {
407
- color: var(--iv2a-color-success);
408
- }
409
- #imageToVideoApp .status-section h2 .icon,
410
- #imageToVideoApp .output-section h2 .icon {
411
- width: 28px;
412
- height: 28px;
413
  }
414
 
 
415
  #imageToVideoApp .ai-loader {
416
  display: flex;
417
  justify-content: center;
418
  align-items: center;
419
  flex-direction: column;
420
- margin: 25px auto;
421
- min-height: 80px;
422
  }
 
423
  #imageToVideoApp .ai-loader-bar-container {
424
  display: flex;
425
  justify-content: center;
426
  align-items: flex-end;
427
- height: 50px;
 
428
  }
 
429
  #imageToVideoApp .ai-loader-bar {
430
- width: 10px;
431
- height: 10px;
432
- background-color: var(--iv2a-color-primary);
433
- border-radius: 5px;
434
- margin: 0 5px;
435
- animation: imageToVideoApp-aiLoaderAnim 1.2s infinite ease-in-out;
436
- }
437
- #imageToVideoApp .ai-loader-bar:nth-child(2) { animation-delay: 0.2s; background-color: var(--iv2a-color-secondary); }
 
 
438
  #imageToVideoApp .ai-loader-bar:nth-child(3) { animation-delay: 0.4s; }
439
- #imageToVideoApp .ai-loader-bar:nth-child(4) { animation-delay: 0.6s; background-color: var(--iv2a-color-secondary); }
 
440
  @keyframes imageToVideoApp-aiLoaderAnim {
441
- 0%, 100% { transform: scaleY(0.5) translateY(10px); opacity: 0.5; }
442
- 50% { transform: scaleY(1.5) translateY(0px); opacity: 1; height: 40px; }
443
- }
444
- #imageToVideoApp .ai-loader-text { margin-top: 15px; font-size: 0.95em; color: var(--iv2a-color-text-light); font-weight: 500; text-align: center; }
445
-
446
- #imageToVideoApp .progress-bar-container { width: 100%; background-color: var(--iv2a-color-input-bg); border-radius: var(--iv2a-border-radius-md); margin: 15px 0 25px 0; height: 12px; overflow: hidden; box-shadow: var(--iv2a-shadow-sm) inset; }
447
- #imageToVideoApp .progress-bar { width: 0%; height: 100%; background: linear-gradient(90deg, var(--iv2a-color-primary) 0%, var(--iv2a-color-secondary) 100%); border-radius: var(--iv2a-border-radius-md); transition: width 0.4s var(--iv2a-transition-easing); }
448
-
449
- #imageToVideoApp .status-messages-container { max-height: 130px; overflow-y: auto; padding-left: 10px; padding-right: 8px; margin-top: 18px; position: relative; }
450
- #imageToVideoApp .status-message { padding: 14px 20px; border-radius: var(--iv2a-border-radius-md); margin-bottom: 12px; font-size: 0.95rem; background-color: var(--iv2a-color-input-bg); border-right-width: 5px; border-right-style: solid; border-left: none; box-shadow: var(--iv2a-shadow-sm); line-height: 1.6; opacity: 0; transform: translateX(20px); animation: imageToVideoApp-slideInStatus 0.4s var(--iv2a-transition-easing) forwards, imageToVideoApp-fadeOutStatus 0.4s var(--iv2a-transition-easing) 2.6s forwards; overflow: hidden; }
451
- #imageToVideoApp .status-message.persistent { animation: imageToVideoApp-slideInStatus 0.4s var(--iv2a-transition-easing) forwards; }
452
- @keyframes imageToVideoApp-slideInStatus { to { opacity: 1; transform: translateX(0); } }
453
- @keyframes imageToVideoApp-fadeOutStatus { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-20px); height: 0; padding-top:0; padding-bottom:0; margin-bottom:0; border-width:0; } }
454
- #imageToVideoApp .status-message.info { border-right-color: var(--iv2a-color-primary); background-color: #EBF4FF; color: var(--iv2a-color-primary-darker); }
455
- #imageToVideoApp .status-message.error { border-right-color: var(--iv2a-color-error); background-color: #FFF5F5; color: #C53030; animation: imageToVideoApp-slideInStatus 0.4s var(--iv2a-transition-easing) forwards; }
456
- #imageToVideoApp .status-message.success { border-right-color: var(--iv2a-color-success); background-color: #F0FFF4; color: #2F855A; }
457
- #imageToVideoApp .status-messages-container::-webkit-scrollbar { width: 10px; }
458
- #imageToVideoApp .status-messages-container::-webkit-scrollbar-track { background: var(--iv2a-color-input-bg); border-radius: var(--iv2a-border-radius-sm); }
459
- #imageToVideoApp .status-messages-container::-webkit-scrollbar-thumb { background: #BDC3C7; border-radius: var(--iv2a-border-radius-sm); }
460
- #imageToVideoApp .status-messages-container::-webkit-scrollbar-thumb:hover { background: var(--iv2a-color-text-muted); }
461
-
462
- #imageToVideoApp #outputVideo { width: 100%; border-radius: var(--iv2a-border-radius-lg); margin-top: 25px; border: 1px solid var(--iv2a-color-border); background-color: #000; box-shadow: var(--iv2a-shadow-md); display: block; object-fit: contain; }
463
- #imageToVideoApp #finalSeed { font-size: 0.9em; color: var(--iv2a-color-text-muted); text-align: center; margin-top: 18px; font-style: italic; }
464
- #imageToVideoApp #btnDownloadVideo { margin-top: 10px; background-color: var(--iv2a-color-success); color: var(--iv2a-color-white); display: none; }
465
- #imageToVideoApp #btnDownloadVideo:hover { background-color: #2F855A; }
466
- #imageToVideoApp #btnRestart { margin-top: 35px; background-color: var(--iv2a-color-accent); color: var(--iv2a-color-white); }
467
- #imageToVideoApp #btnRestart:hover:not(:disabled) { background-color: #C05621; }
468
- #imageToVideoApp .hidden-section { display: none !important; }
469
-
470
- @keyframes imageToVideoApp-fadeIn { from { opacity: 0; } to { opacity: 1; } }
471
- @keyframes imageToVideoApp-fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
472
- @keyframes imageToVideoApp-fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
473
- @keyframes imageToVideoApp-fadeOutAndShrink { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.95); } }
474
- @keyframes imageToVideoApp-fadeInAndExpand { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
475
- @keyframes imageToVideoApp-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-3px); } 40%, 60% { transform: translateX(3px); } }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
476
  @media (max-width: 520px) {
477
- #imageToVideoApp .video-creator-app { max-width: 100%; margin: 20px auto; padding: 0 15px; }
478
- #imageToVideoApp .app-header h1 { font-size: 2em; }
479
- #imageToVideoApp .app-header p { font-size: 1em; }
480
- #imageToVideoApp .form-section-card, #imageToVideoApp .status-section, #imageToVideoApp .output-section, #imageToVideoApp #criticalErrorSection { padding: 20px 25px; }
481
- #imageToVideoApp .action-button { padding: 14px 20px; font-size: 0.95em; }
482
- #imageToVideoApp input[type="text"], #imageToVideoApp textarea { padding: 14px 18px; font-size: 0.95rem; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
483
  }
484
  </style>
485
  </head>
@@ -490,10 +778,38 @@
490
 
491
  <div class="app-header">
492
  <h1>
493
- <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 2C10.4477 2 10 2.44772 10 3V5.58579L8.29289 7.29289C7.90237 7.68342 7.90237 8.31658 8.29289 8.70711C8.68342 9.09763 9.31658 9.09763 9.70711 8.70711L11.4142 7H14C14.5523 7 15 6.55228 15 6C15 5.44772 14.5523 5 14 5H12V3C12 2.44772 11.5523 2 11 2ZM6.5 5C5.67157 5 5 5.67157 5 6.5C5 7.32843 5.67157 8 6.5 8C7.32843 8 8 7.32843 8 6.5C8 5.67157 7.32843 5 6.5 5ZM17.5 9C16.6716 9 16 9.67157 16 10.5C16 11.3284 16.6716 12 17.5 12C18.3284 12 19 11.3284 19 10.5C19 9.67157 18.3284 9 17.5 9ZM12.0858 12.5858L10.2929 14.2929C9.90237 14.6834 9.90237 15.3166 10.2929 15.7071C10.6834 16.0976 11.3166 16.0976 11.7071 15.7071L13.4142 14H16C16.5523 14 17 13.5523 17 13C17 12.4477 16.5523 12 16 12H13V10C13 9.44772 12.5523 9 12 9C11.4477 9 11 9.44772 11 10V12.5858L12.0858 12.5858ZM5 15.5C5 14.6716 5.67157 14 6.5 14C7.32843 14 8 14.6716 8 15.5C8 16.3284 7.32843 17 6.5 17C5.67157 17 5 16.3284 5 15.5ZM14 18.5C14 17.6716 14.6716 17 15.5 17C16.3284 17 17 17.6716 17 18.5C17 19.3284 16.3284 20 15.5 20C14.6716 20 14 19.3284 14 18.5Z"></path></svg>
494
- ساخت ویدیو با هوش مصنوعی
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
495
  </h1>
496
- <p>تصاویر ثابت خود را به ویدیوهای جذاب و پویا تبدیل کنید.</p>
497
  </div>
498
 
499
  <div class="form-container">
@@ -501,24 +817,39 @@
501
  <div id="formStep_Input">
502
 
503
  <div class="form-group">
504
- <label for="imageFile">۱. تصویر خود را انتخاب کنید</label>
 
 
 
 
 
505
  <div id="image-drop-zone">
506
  <input type="file" id="imageFile" accept="image/jpeg, image/png, image/webp" />
507
  <div class="drop-zone-prompt">
508
- <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21.2 15c.7-1.2 1-2.5.7-3.9-.6-2.8-3.3-4.9-6.3-4.9h-1.3c-.3-1.3-1-2.4-2.1-3.2C10.9 2 9.1 2 7.5 2.5c-2 .7-3.5 2.6-3.5 4.8v.2h-.1C2.2 7.5 1 8.8 1 10.4c0 1.9 1.5 3.4 3.4 3.4h1.1"/> <path d="M16 16.5l3-3 3 3"/><path d="M19 13.5v9"/></svg>
509
- <span>تصویر را اینجا بکشید یا برای انتخاب کلیک کنید</span>
 
 
 
510
  </div>
511
  <img id="imagePreview" src="" alt="پیش‌نمایش تصویر" />
512
  </div>
513
  </div>
514
 
515
  <div class="form-group">
516
- <label for="prompt">۲. شرح ویدیو (Prompt) به فارسی</label>
517
- <textarea id="prompt" rows="3" placeholder="توضیح دهید که تصویر شما چگونه متحرک شود..."></textarea>
 
 
 
 
 
518
  </div>
519
 
520
  <button id="generateButton" class="action-button">
521
- <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5.14013V18.8599L18.8599 12L8 5.14013Z"></path></svg>
 
 
522
  ساخت ویدیو
523
  </button>
524
  </div>
@@ -527,19 +858,33 @@
527
 
528
  <div id="criticalErrorSection" class="hidden-section">
529
  <h2>
530
- <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.25C6.075 2.25 1.5 6.825 1.5 12.75C1.5 18.675 6.075 23.25 12 23.25C17.925 23.25 22.5 18.675 22.5 12.75C22.5 6.825 17.925 2.25 12 2.25ZM12.75 17.25H11.25V15.75H12.75V17.25ZM12.75 13.5H11.25V6.75H12.75V13.5Z"></path></svg>
531
- <span>خطای سرور یا محدودیت</span>
 
 
532
  </h2>
533
  <div id="criticalErrorMessage"></div>
534
  <div class="critical-error-actions">
535
- <button type="button" class="action-button back-button" id="btnCriticalErrorGoBack">بازگشت به فرم</button>
536
- <button type="button" class="action-button next-step-button" id="btnCriticalErrorRetry">تلاش مجدد</button>
 
 
 
 
 
 
 
 
 
 
537
  </div>
538
  </div>
539
 
540
  <div class="status-section hidden-section" id="statusSection">
541
  <h2>
542
- <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C17.52 2 22 6.48 22 12C22 17.52 17.52 22 12 22C6.48 22 2 17.52 2 12C2 6.48 6.48 2 12 2ZM12 4C7.58 4 4 7.58 4 12C4 16.42 7.58 20 12 20C16.42 20 20 16.42 20 12C20 7.58 16.42 4 12 4ZM12.5 7V12.25L16.5 14.44L15.75 15.56L11 13V7H12.5Z"></path></svg>
 
 
543
  وضعیت پردازش
544
  </h2>
545
  <div class="ai-loader" id="aiLoader" style="display: none;">
@@ -549,7 +894,7 @@
549
  <div class="ai-loader-bar"></div>
550
  <div class="ai-loader-bar"></div>
551
  </div>
552
- <div class="ai-loader-text" id="aiLoaderText">تصویر شما در حال متحرک‌سازی است...</div>
553
  </div>
554
  <div class="progress-bar-container" id="progressBarContainer" style="display: none;">
555
  <div class="progress-bar" id="progressBar"></div>
@@ -559,31 +904,39 @@
559
 
560
  <div class="output-section hidden-section" id="outputSection">
561
  <h2>
562
- <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM11.0001 16L7.50006 12.5L8.91006 11.09L11.0001 13.17L15.0801 9.09001L16.5001 10.5L11.0001 16Z"></path></svg>
563
- ویدیوی شما آماده است!
 
 
564
  </h2>
565
  <video width="300" height="150" style="display: none;" id="outputVideo" controls preload="metadata" playsinline></video>
566
  <p id="finalSeed">&nbsp;</p>
567
  <div id="downloadLinkStatus"></div>
568
  <button type="button" class="action-button" id="btnDownloadVideo" style="display: none;">
569
- <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 15L12 3L10.5 3L10.5 15L6.35355 10.8536L5.29289 11.9142L11.2929 17.9142C11.6834 18.3047 12.3166 18.3047 12.7071 17.9142L18.7071 11.9142L17.6464 10.8536L13.5 15L12 15ZM4.5 19.5V18H19.5V19.5H4.5Z"></path></svg>
 
 
570
  دانلود ویدیو
571
  </button>
572
  <button type="button" class="action-button" id="btnRestart">
573
- <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM12 11L16 15H13V16H18V11H17V13.5858L12.7071 9.29289L13.4142 8.58579L17 12.1716V11H18V16H13V15L16 11H12V11ZM11 8H6V13H7V9.41421L11.2929 13.7071L10.5858 14.4142L7 10.8284V13H6V8H11V8Z"></path></svg>
574
- ساخت ویدیوی دیگر
 
 
575
  </button>
576
  </div>
577
 
578
  </div>
579
  </div>
 
580
  <script>
581
- (function() { // IIFE Start: Encapsulate the entire script to avoid global scope pollution
 
582
  // DOM Elements
583
  const formContainer = document.querySelector('#imageToVideoApp .form-container');
584
  const imageFileInput = document.getElementById('imageFile');
585
  const imagePreview = document.getElementById('imagePreview');
586
- const imageDropZone = document.getElementById('image-drop-zone'); // NEW: Combined drop zone
587
  const promptInput = document.getElementById('prompt');
588
  const generateButton = document.getElementById('generateButton');
589
  const outputVideo = document.getElementById('outputVideo');
@@ -735,7 +1088,7 @@
735
  imageFileInput.value = '';
736
  imagePreview.src = TRANSPARENT_PIXEL_SRC;
737
  imageDropZone.classList.remove('has-image');
738
- imageDropZone.style.aspectRatio = ''; // Reset aspect ratio of container
739
 
740
  originalImageWidth = null;
741
  originalImageHeight = null;
@@ -1053,7 +1406,6 @@
1053
  originalImageHeight = this.height;
1054
  if (originalImageWidth && originalImageHeight) {
1055
  const imageActualRatio = originalImageWidth / originalImageHeight;
1056
- // Set container aspect ratio for visual consistency
1057
  imageDropZone.style.aspectRatio = `${originalImageWidth} / ${originalImageHeight}`;
1058
  autoSelectAspectRatioBasedOnImage(imageActualRatio);
1059
  }
@@ -1153,7 +1505,7 @@
1153
  styleSheet.type = "text/css";
1154
  styleSheet.innerText = `#imageToVideoApp .shake-animation { animation: imageToVideoApp-shake 0.5s cubic-bezier(.36,.07,.19,.97) both; }`;
1155
  document.head.appendChild(styleSheet);
1156
- })(); // IIFE End
1157
  </script>
1158
 
1159
  </body>
 
1
  <!DOCTYPE html>
2
  <html lang="fa" dir="rtl">
3
  <head>
 
4
  <meta charset="UTF-8">
 
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>استودیو هوش مصنوعی - ساخت ویدیو</title>
7
 
8
+ <!-- بارگذاری فونت وزیرمتن -->
9
  <link rel="preconnect" href="https://fonts.googleapis.com">
10
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
12
 
13
  <style>
14
+ /* Enhanced CSS with modern design */
15
  #imageToVideoApp {
16
+ --iv2a-color-primary: #667eea;
17
+ --iv2a-color-primary-darker: #5a67d8;
18
+ --iv2a-color-primary-light: #7c3aed;
19
+ --iv2a-color-secondary: #ec4899;
20
+ --iv2a-color-secondary-darker: #db2777;
21
+ --iv2a-color-accent: #f59e0b;
22
+ --iv2a-color-accent-light: #fbbf24;
23
+ --iv2a-color-success: #10b981;
24
+ --iv2a-color-error: #ef4444;
25
+ --iv2a-color-text: #1e293b;
26
+ --iv2a-color-text-light: #475569;
27
+ --iv2a-color-text-muted: #94a3b8;
28
+ --iv2a-color-bg-card: rgba(255, 255, 255, 0.95);
29
+ --iv2a-color-border: rgba(148, 163, 184, 0.2);
30
+ --iv2a-color-input-bg: rgba(241, 245, 249, 0.8);
31
+ --iv2a-color-white: #ffffff;
32
+ --iv2a-color-warning-bg: #fef3c7;
33
+ --iv2a-color-warning-border: #fbbf24;
34
+ --iv2a-color-warning-text: #92400e;
35
+
36
+ --iv2a-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
37
+ --iv2a-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
38
+ --iv2a-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
39
+ --iv2a-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
40
+ --iv2a-shadow-glow: 0 0 40px rgba(102, 126, 234, 0.1);
41
+
42
+ --iv2a-border-radius-sm: 8px;
43
+ --iv2a-border-radius-md: 12px;
44
+ --iv2a-border-radius-lg: 16px;
45
+ --iv2a-border-radius-xl: 24px;
46
+ --iv2a-transition-speed: 0.3s;
47
  --iv2a-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
48
 
 
49
  font-family: 'Vazirmatn', sans-serif;
50
  color: var(--iv2a-color-text);
51
  line-height: 1.7;
 
54
  -webkit-font-smoothing: antialiased;
55
  -moz-osx-font-smoothing: grayscale;
56
  overflow-x: hidden;
57
+ position: relative;
58
  }
59
 
60
+ /* Animated gradient background */
61
  body {
 
62
  margin: 0;
63
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #fda085 100%);
64
+ background-size: 400% 400%;
65
+ animation: gradientShift 20s ease infinite;
66
+ min-height: 100vh;
67
+ position: relative;
68
+ }
69
+
70
+ body::before {
71
+ content: '';
72
+ position: fixed;
73
+ top: 0;
74
+ left: 0;
75
+ right: 0;
76
+ bottom: 0;
77
+ background:
78
+ radial-gradient(circle at 20% 80%, rgba(102, 126, 234, 0.3) 0%, transparent 50%),
79
+ radial-gradient(circle at 80% 20%, rgba(236, 72, 153, 0.3) 0%, transparent 50%),
80
+ radial-gradient(circle at 40% 40%, rgba(245, 158, 11, 0.2) 0%, transparent 50%);
81
+ pointer-events: none;
82
+ z-index: 1;
83
+ }
84
+
85
+ @keyframes gradientShift {
86
+ 0% { background-position: 0% 50%; }
87
+ 50% { background-position: 100% 50%; }
88
+ 100% { background-position: 0% 50%; }
89
  }
90
 
91
  #imageToVideoApp * {
 
93
  margin: 0;
94
  padding: 0;
95
  }
 
 
 
 
 
 
 
 
96
 
97
  #imageToVideoApp .video-creator-app {
98
  width: 100%;
99
+ max-width: 600px;
100
  margin: 40px auto;
101
  padding: 0 20px;
102
+ position: relative;
103
+ z-index: 2;
104
  }
105
 
106
+ /* Enhanced header with floating animation */
107
  #imageToVideoApp .app-header {
108
  text-align: center;
109
  margin-bottom: 50px;
110
  animation: imageToVideoApp-fadeInDown 0.8s var(--iv2a-transition-easing) both;
111
+ position: relative;
112
+ }
113
+
114
+ #imageToVideoApp .app-header::before {
115
+ content: '';
116
+ position: absolute;
117
+ top: -30px;
118
+ left: 50%;
119
+ transform: translateX(-50%);
120
+ width: 100px;
121
+ height: 100px;
122
+ background: radial-gradient(circle, rgba(102, 126, 234, 0.3) 0%, transparent 70%);
123
+ border-radius: 50%;
124
+ filter: blur(20px);
125
+ animation: pulse 3s ease-in-out infinite;
126
+ }
127
+
128
+ @keyframes pulse {
129
+ 0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.5; }
130
+ 50% { transform: translateX(-50%) scale(1.2); opacity: 0.8; }
131
  }
132
 
133
  #imageToVideoApp .app-header h1 {
134
+ font-size: 2.8em;
135
+ font-weight: 900;
136
+ background: linear-gradient(135deg, var(--iv2a-color-primary) 0%, var(--iv2a-color-secondary) 100%);
137
+ -webkit-background-clip: text;
138
+ -webkit-text-fill-color: transparent;
139
+ background-clip: text;
140
  display: flex;
141
  align-items: center;
142
  justify-content: center;
143
+ gap: 20px;
144
+ margin-bottom: 20px;
145
+ filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
146
  }
147
+
148
+ #imageToVideoApp .app-header h1 .main-icon {
149
+ width: 60px;
150
+ height: 60px;
151
+ animation: float 3s ease-in-out infinite;
 
152
  }
153
 
154
+ @keyframes float {
155
+ 0%, 100% { transform: translateY(0px) rotate(0deg); }
156
+ 50% { transform: translateY(-10px) rotate(5deg); }
157
  }
158
 
159
+ #imageToVideoApp .app-header p {
160
+ font-size: 1.2em;
161
+ color: var(--iv2a-color-text-light);
162
+ font-weight: 500;
163
+ position: relative;
164
  }
165
 
166
+ /* Glassmorphism cards */
167
  #imageToVideoApp .form-section-card {
168
+ background: rgba(255, 255, 255, 0.9);
169
+ backdrop-filter: blur(20px);
170
+ -webkit-backdrop-filter: blur(20px);
171
+ padding: 35px;
172
  border-radius: var(--iv2a-border-radius-xl);
173
+ box-shadow:
174
+ 0 8px 32px rgba(31, 38, 135, 0.15),
175
+ inset 0 1px 0 rgba(255, 255, 255, 0.9);
176
+ border: 1px solid rgba(255, 255, 255, 0.18);
177
  margin-bottom: 30px;
178
  animation: imageToVideoApp-fadeInUp 0.6s var(--iv2a-transition-easing) 0.2s both;
179
+ position: relative;
180
+ overflow: hidden;
181
+ }
182
+
183
+ #imageToVideoApp .form-section-card::before {
184
+ content: '';
185
+ position: absolute;
186
+ top: 0;
187
+ left: -100%;
188
+ width: 100%;
189
+ height: 100%;
190
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
191
+ transition: left 0.5s;
192
+ }
193
+
194
+ #imageToVideoApp .form-section-card:hover::before {
195
+ left: 100%;
196
  }
197
 
198
  #imageToVideoApp .form-group {
199
+ margin-bottom: 32px;
200
  }
201
 
202
  #imageToVideoApp label {
203
+ display: inline-flex;
204
+ align-items: center;
205
+ gap: 8px;
206
+ font-size: 0.95rem;
207
+ color: var(--iv2a-color-text);
208
+ margin-bottom: 12px;
209
+ font-weight: 700;
210
  }
211
 
212
+ #imageToVideoApp label .label-icon {
213
+ width: 20px;
214
+ height: 20px;
215
+ color: var(--iv2a-color-primary);
216
+ }
217
+
218
+ /* Enhanced image drop zone */
219
  #imageToVideoApp #image-drop-zone {
220
  position: relative;
221
  width: 100%;
222
+ min-height: 220px;
223
+ border: 3px dashed transparent;
224
  border-radius: var(--iv2a-border-radius-lg);
225
+ background:
226
+ linear-gradient(var(--iv2a-color-input-bg), var(--iv2a-color-input-bg)) padding-box,
227
+ linear-gradient(135deg, var(--iv2a-color-primary) 0%, var(--iv2a-color-secondary) 100%) border-box;
228
+ transition: all 0.4s var(--iv2a-transition-easing);
229
  display: flex;
230
  align-items: center;
231
  justify-content: center;
 
234
  }
235
 
236
  #imageToVideoApp #image-drop-zone:hover {
237
+ transform: translateY(-2px);
238
+ box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2);
239
+ background:
240
+ linear-gradient(rgba(102, 126, 234, 0.05), rgba(102, 126, 234, 0.05)) padding-box,
241
+ linear-gradient(135deg, var(--iv2a-color-primary) 0%, var(--iv2a-color-secondary) 100%) border-box;
242
  }
243
 
244
  #imageToVideoApp #imageFile {
 
257
  justify-content: center;
258
  text-align: center;
259
  color: var(--iv2a-color-text-muted);
260
+ padding: 30px;
261
+ transition: all 0.3s ease;
262
  }
263
+
264
+ #imageToVideoApp .drop-zone-prompt .upload-icon {
265
+ width: 80px;
266
+ height: 80px;
267
+ margin-bottom: 20px;
268
+ background: linear-gradient(135deg, var(--iv2a-color-primary) 0%, var(--iv2a-color-secondary) 100%);
269
+ border-radius: 50%;
270
+ padding: 20px;
271
+ color: white;
272
+ animation: bounce 2s infinite;
273
  }
274
+
275
+ @keyframes bounce {
276
+ 0%, 100% { transform: translateY(0); }
277
+ 50% { transform: translateY(-10px); }
278
  }
279
+
280
  #imageToVideoApp .drop-zone-prompt span {
281
+ font-weight: 600;
282
+ font-size: 1rem;
283
+ color: var(--iv2a-color-text);
284
+ }
285
+
286
+ #imageToVideoApp .drop-zone-prompt .sub-text {
287
+ font-size: 0.85rem;
288
+ color: var(--iv2a-color-text-muted);
289
+ margin-top: 8px;
290
+ font-weight: 400;
291
  }
292
 
293
  #imageToVideoApp #imagePreview {
 
298
  border-radius: var(--iv2a-border-radius-lg);
299
  opacity: 0;
300
  visibility: hidden;
301
+ transform: scale(0.9);
302
+ transition: all 0.4s ease;
303
  }
304
+
 
305
  #imageToVideoApp #image-drop-zone.has-image {
306
  border-style: solid;
307
+ border-width: 3px;
308
+ background:
309
+ linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)) padding-box,
310
+ linear-gradient(135deg, var(--iv2a-color-success) 0%, var(--iv2a-color-primary) 100%) border-box;
311
+ padding: 8px;
312
  }
313
+
314
  #imageToVideoApp #image-drop-zone.has-image .drop-zone-prompt {
315
  opacity: 0;
316
  visibility: hidden;
317
  }
318
+
319
  #imageToVideoApp #image-drop-zone.has-image #imagePreview {
320
  opacity: 1;
321
  visibility: visible;
322
  transform: scale(1);
323
  }
324
 
325
+ /* Enhanced input fields */
326
  #imageToVideoApp input[type="text"],
327
  #imageToVideoApp textarea {
328
  width: 100%;
329
+ padding: 16px 20px;
330
+ border: 2px solid transparent;
331
  border-radius: var(--iv2a-border-radius-md);
332
  font-size: 1rem;
333
+ background: var(--iv2a-color-input-bg);
334
  color: var(--iv2a-color-text);
335
  font-family: inherit;
336
  transition: all var(--iv2a-transition-speed) var(--iv2a-transition-easing);
337
+ font-weight: 500;
338
  }
339
 
340
  #imageToVideoApp input[type="text"]::placeholder,
341
  #imageToVideoApp textarea::placeholder {
342
+ color: var(--iv2a-color-text-muted);
343
  }
344
+
345
  #imageToVideoApp input:focus,
346
  #imageToVideoApp textarea:focus {
347
  outline: none;
348
  border-color: var(--iv2a-color-primary);
349
+ background: var(--iv2a-color-white);
350
+ box-shadow:
351
+ 0 0 0 4px rgba(102, 126, 234, 0.1),
352
+ 0 4px 12px rgba(0, 0, 0, 0.05);
353
  }
354
 
355
  #imageToVideoApp textarea {
356
+ min-height: 120px;
357
  resize: vertical;
358
  }
359
+
360
+ /* Enhanced action buttons */
361
  #imageToVideoApp .action-button {
362
+ padding: 18px 32px;
363
  border: none;
364
  border-radius: var(--iv2a-border-radius-md);
365
+ font-size: 1.05rem;
366
  font-weight: 700;
367
  cursor: pointer;
368
  font-family: inherit;
369
  width: 100%;
 
370
  transition: all var(--iv2a-transition-speed) var(--iv2a-transition-easing);
371
  text-transform: uppercase;
372
+ letter-spacing: 1px;
373
  position: relative;
374
  overflow: hidden;
375
  display: flex;
376
  align-items: center;
377
  justify-content: center;
378
+ gap: 12px;
379
+ }
380
+
381
+ #imageToVideoApp .action-button::before {
382
+ content: '';
383
+ position: absolute;
384
+ top: 50%;
385
+ left: 50%;
386
+ width: 0;
387
+ height: 0;
388
+ border-radius: 50%;
389
+ background: rgba(255, 255, 255, 0.3);
390
+ transform: translate(-50%, -50%);
391
+ transition: width 0.6s, height 0.6s;
392
+ }
393
+
394
+ #imageToVideoApp .action-button:hover::before {
395
+ width: 300px;
396
+ height: 300px;
397
  }
398
 
399
  #imageToVideoApp .action-button:hover:not(:disabled) {
400
+ transform: translateY(-3px);
401
+ box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
402
  }
403
 
404
  #imageToVideoApp .action-button:active:not(:disabled) {
405
+ transform: translateY(-1px);
 
406
  }
407
 
408
  #imageToVideoApp .action-button:disabled {
409
  background: var(--iv2a-color-input-bg) !important;
410
+ color: var(--iv2a-color-text-muted) !important;
411
  cursor: not-allowed;
412
  box-shadow: none !important;
413
  transform: none !important;
414
  }
415
 
416
  #imageToVideoApp #generateButton {
417
+ background: linear-gradient(135deg, var(--iv2a-color-primary) 0%, var(--iv2a-color-secondary) 100%);
418
  color: white;
419
  margin-top: 10px;
420
+ box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
421
  }
422
 
423
  #imageToVideoApp #generateButton:hover:not(:disabled) {
424
+ background: linear-gradient(135deg, var(--iv2a-color-primary-darker) 0%, var(--iv2a-color-secondary-darker) 100%);
425
+ box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
426
  }
427
 
428
+ #imageToVideoApp #generateButton .icon {
429
+ animation: pulse-icon 1.5s ease-in-out infinite;
430
+ }
431
+
432
+ @keyframes pulse-icon {
433
+ 0%, 100% { transform: scale(1); }
434
+ 50% { transform: scale(1.1); }
435
+ }
436
+
437
+ /* Enhanced critical error section */
438
  #imageToVideoApp #criticalErrorSection {
439
+ background: linear-gradient(135deg, var(--iv2a-color-warning-bg) 0%, rgba(254, 243, 199, 0.9) 100%);
440
+ backdrop-filter: blur(10px);
441
+ padding: 30px;
442
  border-radius: var(--iv2a-border-radius-xl);
443
+ box-shadow:
444
+ 0 10px 40px rgba(251, 191, 36, 0.2),
445
+ inset 0 1px 0 rgba(255, 255, 255, 0.9);
446
  border: 2px solid var(--iv2a-color-warning-border);
447
+ margin-bottom: 30px;
448
  animation: imageToVideoApp-fadeInUp 0.5s var(--iv2a-transition-easing) both;
449
+ position: relative;
450
+ overflow: hidden;
451
+ }
452
+
453
+ #imageToVideoApp #criticalErrorSection::before {
454
+ content: '';
455
+ position: absolute;
456
+ top: -50%;
457
+ left: -50%;
458
+ width: 200%;
459
+ height: 200%;
460
+ background: radial-gradient(circle, rgba(251, 191, 36, 0.1) 0%, transparent 70%);
461
+ animation: rotate 10s linear infinite;
462
  }
463
+
464
+ @keyframes rotate {
465
+ 0% { transform: rotate(0deg); }
466
+ 100% { transform: rotate(360deg); }
467
+ }
468
+
469
  #imageToVideoApp #criticalErrorSection .critical-error-actions {
470
+ margin-top: 25px;
471
  display: flex;
472
  gap: 15px;
473
  }
474
+
475
  #imageToVideoApp #criticalErrorSection .critical-error-actions .action-button {
476
  flex-grow: 1;
477
  }
478
+
479
  #imageToVideoApp #criticalErrorSection .critical-error-actions .back-button {
480
+ background: linear-gradient(135deg, #64748b 0%, #475569 100%);
481
+ color: white;
 
 
 
 
 
 
 
482
  }
483
+
484
+ #imageToVideoApp #criticalErrorSection .critical-error-actions .next-step-button {
485
+ background: linear-gradient(135deg, var(--iv2a-color-accent) 0%, var(--iv2a-color-accent-light) 100%);
486
+ color: white;
487
  }
488
 
489
  #imageToVideoApp #criticalErrorSection h2 {
490
+ font-size: 1.4em;
491
  color: var(--iv2a-color-warning-text);
492
+ margin-bottom: 20px;
493
+ font-weight: 800;
494
  display: flex;
495
  align-items: center;
496
+ gap: 12px;
497
+ border-bottom: 2px solid var(--iv2a-color-warning-border);
498
+ padding-bottom: 15px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
499
  }
500
 
501
+ /* Enhanced status and output sections */
502
  #imageToVideoApp .status-section,
503
  #imageToVideoApp .output-section {
504
  margin-top: 40px;
505
  padding: 35px;
506
+ background: rgba(255, 255, 255, 0.95);
507
+ backdrop-filter: blur(20px);
508
  border-radius: var(--iv2a-border-radius-xl);
509
+ border: 1px solid rgba(255, 255, 255, 0.18);
510
+ box-shadow:
511
+ 0 8px 32px rgba(31, 38, 135, 0.1),
512
+ inset 0 1px 0 rgba(255, 255, 255, 0.9);
513
  animation: imageToVideoApp-fadeInUp 0.5s var(--iv2a-transition-easing) both;
514
  }
515
 
516
  #imageToVideoApp .status-section h2,
517
  #imageToVideoApp .output-section h2 {
518
+ font-size: 1.5em;
519
  color: var(--iv2a-color-text);
520
+ border-bottom: 2px solid;
521
+ border-image: linear-gradient(90deg, var(--iv2a-color-primary) 0%, var(--iv2a-color-secondary) 100%) 1;
522
+ padding-bottom: 20px;
523
+ margin-bottom: 30px;
524
+ font-weight: 800;
525
  display: flex;
526
  align-items: center;
527
+ gap: 15px;
 
 
 
 
 
 
 
 
 
528
  }
529
 
530
+ /* Enhanced AI loader */
531
  #imageToVideoApp .ai-loader {
532
  display: flex;
533
  justify-content: center;
534
  align-items: center;
535
  flex-direction: column;
536
+ margin: 30px auto;
537
+ min-height: 100px;
538
  }
539
+
540
  #imageToVideoApp .ai-loader-bar-container {
541
  display: flex;
542
  justify-content: center;
543
  align-items: flex-end;
544
+ height: 60px;
545
+ gap: 8px;
546
  }
547
+
548
  #imageToVideoApp .ai-loader-bar {
549
+ width: 12px;
550
+ height: 12px;
551
+ background: linear-gradient(135deg, var(--iv2a-color-primary) 0%, var(--iv2a-color-secondary) 100%);
552
+ border-radius: 50%;
553
+ animation: imageToVideoApp-aiLoaderAnim 1.4s infinite ease-in-out;
554
+ box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
555
+ }
556
+
557
+ #imageToVideoApp .ai-loader-bar:nth-child(1) { animation-delay: 0s; }
558
+ #imageToVideoApp .ai-loader-bar:nth-child(2) { animation-delay: 0.2s; }
559
  #imageToVideoApp .ai-loader-bar:nth-child(3) { animation-delay: 0.4s; }
560
+ #imageToVideoApp .ai-loader-bar:nth-child(4) { animation-delay: 0.6s; }
561
+
562
  @keyframes imageToVideoApp-aiLoaderAnim {
563
+ 0%, 100% {
564
+ transform: translateY(0) scale(1);
565
+ opacity: 0.3;
566
+ }
567
+ 50% {
568
+ transform: translateY(-30px) scale(1.2);
569
+ opacity: 1;
570
+ }
571
+ }
572
+
573
+ #imageToVideoApp .ai-loader-text {
574
+ margin-top: 20px;
575
+ font-size: 1rem;
576
+ color: var(--iv2a-color-text);
577
+ font-weight: 600;
578
+ text-align: center;
579
+ }
580
+
581
+ /* Enhanced progress bar */
582
+ #imageToVideoApp .progress-bar-container {
583
+ width: 100%;
584
+ background: var(--iv2a-color-input-bg);
585
+ border-radius: 100px;
586
+ margin: 20px 0 30px 0;
587
+ height: 14px;
588
+ overflow: hidden;
589
+ box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
590
+ position: relative;
591
+ }
592
+
593
+ #imageToVideoApp .progress-bar {
594
+ width: 0%;
595
+ height: 100%;
596
+ background: linear-gradient(90deg, var(--iv2a-color-primary) 0%, var(--iv2a-color-secondary) 50%, var(--iv2a-color-accent) 100%);
597
+ background-size: 200% 100%;
598
+ border-radius: 100px;
599
+ transition: width 0.4s var(--iv2a-transition-easing);
600
+ animation: gradientMove 3s ease infinite;
601
+ box-shadow: 0 2px 10px rgba(102, 126, 234, 0.4);
602
+ }
603
+
604
+ @keyframes gradientMove {
605
+ 0% { background-position: 0% 50%; }
606
+ 50% { background-position: 100% 50%; }
607
+ 100% { background-position: 0% 50%; }
608
+ }
609
+
610
+ /* Enhanced status messages */
611
+ #imageToVideoApp .status-messages-container {
612
+ max-height: 150px;
613
+ overflow-y: auto;
614
+ padding-left: 10px;
615
+ padding-right: 8px;
616
+ margin-top: 25px;
617
+ }
618
+
619
+ #imageToVideoApp .status-message {
620
+ padding: 16px 24px;
621
+ border-radius: var(--iv2a-border-radius-md);
622
+ margin-bottom: 14px;
623
+ font-size: 0.95rem;
624
+ border-right-width: 4px;
625
+ border-right-style: solid;
626
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
627
+ line-height: 1.6;
628
+ opacity: 0;
629
+ transform: translateX(20px);
630
+ animation: imageToVideoApp-slideInStatus 0.4s var(--iv2a-transition-easing) forwards;
631
+ position: relative;
632
+ overflow: hidden;
633
+ }
634
+
635
+ #imageToVideoApp .status-message::before {
636
+ content: '';
637
+ position: absolute;
638
+ top: 0;
639
+ left: -100%;
640
+ width: 100%;
641
+ height: 100%;
642
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
643
+ transition: left 0.6s;
644
+ }
645
+
646
+ #imageToVideoApp .status-message:hover::before {
647
+ left: 100%;
648
+ }
649
+
650
+ #imageToVideoApp .status-message.info {
651
+ border-right-color: var(--iv2a-color-primary);
652
+ background: linear-gradient(135deg, #EBF4FF 0%, #E0EAFF 100%);
653
+ color: var(--iv2a-color-primary-darker);
654
+ }
655
+
656
+ #imageToVideoApp .status-message.error {
657
+ border-right-color: var(--iv2a-color-error);
658
+ background: linear-gradient(135deg, #FFF5F5 0%, #FFE0E0 100%);
659
+ color: #991B1B;
660
+ }
661
+
662
+ #imageToVideoApp .status-message.success {
663
+ border-right-color: var(--iv2a-color-success);
664
+ background: linear-gradient(135deg, #F0FFF4 0%, #DCFCE7 100%);
665
+ color: #166534;
666
+ }
667
+
668
+ /* Enhanced video output */
669
+ #imageToVideoApp #outputVideo {
670
+ width: 100%;
671
+ border-radius: var(--iv2a-border-radius-lg);
672
+ margin-top: 30px;
673
+ border: 3px solid transparent;
674
+ background:
675
+ linear-gradient(#000, #000) padding-box,
676
+ linear-gradient(135deg, var(--iv2a-color-primary) 0%, var(--iv2a-color-secondary) 100%) border-box;
677
+ box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
678
+ display: block;
679
+ object-fit: contain;
680
+ }
681
+
682
+ #imageToVideoApp #finalSeed {
683
+ font-size: 0.95em;
684
+ color: var(--iv2a-color-text-muted);
685
+ text-align: center;
686
+ margin-top: 20px;
687
+ font-style: italic;
688
+ }
689
+
690
+ /* Enhanced download button */
691
+ #imageToVideoApp #btnDownloadVideo {
692
+ margin-top: 15px;
693
+ background: linear-gradient(135deg, var(--iv2a-color-success) 0%, #34d399 100%);
694
+ color: white;
695
+ }
696
+
697
+ #imageToVideoApp #btnRestart {
698
+ margin-top: 40px;
699
+ background: linear-gradient(135deg, var(--iv2a-color-accent) 0%, var(--iv2a-color-accent-light) 100%);
700
+ color: white;
701
+ }
702
+
703
+ #imageToVideoApp .hidden-section {
704
+ display: none !important;
705
+ }
706
+
707
+ /* Enhanced scrollbar */
708
+ #imageToVideoApp .status-messages-container::-webkit-scrollbar {
709
+ width: 8px;
710
+ }
711
+
712
+ #imageToVideoApp .status-messages-container::-webkit-scrollbar-track {
713
+ background: var(--iv2a-color-input-bg);
714
+ border-radius: 100px;
715
+ }
716
+
717
+ #imageToVideoApp .status-messages-container::-webkit-scrollbar-thumb {
718
+ background: linear-gradient(135deg, var(--iv2a-color-primary) 0%, var(--iv2a-color-secondary) 100%);
719
+ border-radius: 100px;
720
+ }
721
+
722
+ /* Animations */
723
+ @keyframes imageToVideoApp-fadeInDown {
724
+ from { opacity: 0; transform: translateY(-30px); }
725
+ to { opacity: 1; transform: translateY(0); }
726
+ }
727
+
728
+ @keyframes imageToVideoApp-fadeInUp {
729
+ from { opacity: 0; transform: translateY(30px); }
730
+ to { opacity: 1; transform: translateY(0); }
731
+ }
732
+
733
+ @keyframes imageToVideoApp-slideInStatus {
734
+ to { opacity: 1; transform: translateX(0); }
735
+ }
736
+
737
+ @keyframes imageToVideoApp-shake {
738
+ 10%, 90% { transform: translateX(-2px); }
739
+ 20%, 80% { transform: translateX(3px); }
740
+ 30%, 50%, 70% { transform: translateX(-4px); }
741
+ 40%, 60% { transform: translateX(4px); }
742
+ }
743
+
744
+ /* Responsive design */
745
  @media (max-width: 520px) {
746
+ #imageToVideoApp .video-creator-app {
747
+ max-width: 100%;
748
+ margin: 20px auto;
749
+ padding: 0 15px;
750
+ }
751
+
752
+ #imageToVideoApp .app-header h1 {
753
+ font-size: 2.2em;
754
+ }
755
+
756
+ #imageToVideoApp .app-header h1 .main-icon {
757
+ width: 45px;
758
+ height: 45px;
759
+ }
760
+
761
+ #imageToVideoApp .form-section-card,
762
+ #imageToVideoApp .status-section,
763
+ #imageToVideoApp .output-section {
764
+ padding: 25px;
765
+ }
766
+
767
+ #imageToVideoApp .action-button {
768
+ padding: 16px 24px;
769
+ font-size: 0.95rem;
770
+ }
771
  }
772
  </style>
773
  </head>
 
778
 
779
  <div class="app-header">
780
  <h1>
781
+ <!-- Beautiful animated main icon -->
782
+ <svg class="main-icon" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
783
+ <defs>
784
+ <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
785
+ <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
786
+ <stop offset="100%" style="stop-color:#ec4899;stop-opacity:1" />
787
+ </linearGradient>
788
+ <filter id="glow">
789
+ <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
790
+ <feMerge>
791
+ <feMergeNode in="coloredBlur"/>
792
+ <feMergeNode in="SourceGraphic"/>
793
+ </feMerge>
794
+ </filter>
795
+ </defs>
796
+ <circle cx="50" cy="50" r="45" fill="url(#gradient1)" opacity="0.1"/>
797
+ <circle cx="50" cy="50" r="40" fill="none" stroke="url(#gradient1)" stroke-width="2" stroke-dasharray="5,5" opacity="0.3">
798
+ <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="20s" repeatCount="indefinite"/>
799
+ </circle>
800
+ <path d="M35 35 L65 50 L35 65 Z" fill="url(#gradient1)" filter="url(#glow)">
801
+ <animateTransform attributeName="transform" type="scale" values="1;1.1;1" dur="2s" repeatCount="indefinite"/>
802
+ </path>
803
+ <circle cx="70" cy="30" r="8" fill="url(#gradient1)" opacity="0.8">
804
+ <animate attributeName="r" values="8;10;8" dur="1.5s" repeatCount="indefinite"/>
805
+ </circle>
806
+ <circle cx="25" cy="70" r="6" fill="url(#gradient1)" opacity="0.6">
807
+ <animate attributeName="r" values="6;8;6" dur="2s" repeatCount="indefinite"/>
808
+ </circle>
809
+ </svg>
810
+ استودیو هوش مصنوعی
811
  </h1>
812
+ <p>✨ تصاویر خود را به ویدیوهای جادویی تبدیل کنید</p>
813
  </div>
814
 
815
  <div class="form-container">
 
817
  <div id="formStep_Input">
818
 
819
  <div class="form-group">
820
+ <label for="imageFile">
821
+ <svg class="label-icon" viewBox="0 0 24 24" fill="currentColor">
822
+ <path d="M4 5C4 3.89543 4.89543 3 6 3H14.1716C14.702 3 15.2107 3.21071 15.5858 3.58579L19.4142 7.41421C19.7893 7.78929 20 8.29799 20 8.82843V19C20 20.1046 19.1046 21 18 21H6C4.89543 21 4 20.1046 4 19V5ZM8 12C8 10.8954 8.89543 10 10 10H14C15.1046 10 16 10.8954 16 12V17H14V14H10V17H8V12ZM10 12V13H14V12H10Z"/>
823
+ </svg>
824
+ انتخاب تصویر
825
+ </label>
826
  <div id="image-drop-zone">
827
  <input type="file" id="imageFile" accept="image/jpeg, image/png, image/webp" />
828
  <div class="drop-zone-prompt">
829
+ <svg class="upload-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
830
+ <path d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
831
+ </svg>
832
+ <span>تصویر را اینجا رها کنید</span>
833
+ <span class="sub-text">یا کلیک کنید برای انتخاب</span>
834
  </div>
835
  <img id="imagePreview" src="" alt="پیش‌نمایش تصویر" />
836
  </div>
837
  </div>
838
 
839
  <div class="form-group">
840
+ <label for="prompt">
841
+ <svg class="label-icon" viewBox="0 0 24 24" fill="currentColor">
842
+ <path d="M20 2H4C2.9 2 2 2.9 2 4V22L6 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2ZM20 16H6L4 18V4H20V16ZM7 9H17V11H7V9ZM7 6H17V8H7V6ZM7 12H15V14H7V12Z"/>
843
+ </svg>
844
+ توضیحات ویدیو
845
+ </label>
846
+ <textarea id="prompt" rows="3" placeholder="نحوه حرکت و انیمیشن تصویر را توصیف کنید..."></textarea>
847
  </div>
848
 
849
  <button id="generateButton" class="action-button">
850
+ <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
851
+ <path d="M8 5v14l11-7z"/>
852
+ </svg>
853
  ساخت ویدیو
854
  </button>
855
  </div>
 
858
 
859
  <div id="criticalErrorSection" class="hidden-section">
860
  <h2>
861
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
862
+ <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
863
+ </svg>
864
+ <span>خطای سرور</span>
865
  </h2>
866
  <div id="criticalErrorMessage"></div>
867
  <div class="critical-error-actions">
868
+ <button type="button" class="action-button back-button" id="btnCriticalErrorGoBack">
869
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
870
+ <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
871
+ </svg>
872
+ بازگشت
873
+ </button>
874
+ <button type="button" class="action-button next-step-button" id="btnCriticalErrorRetry">
875
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
876
+ <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
877
+ </svg>
878
+ تلاش مجدد
879
+ </button>
880
  </div>
881
  </div>
882
 
883
  <div class="status-section hidden-section" id="statusSection">
884
  <h2>
885
+ <svg width="30" height="30" viewBox="0 0 24 24" fill="url(#gradient1)">
886
+ <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
887
+ </svg>
888
  وضعیت پردازش
889
  </h2>
890
  <div class="ai-loader" id="aiLoader" style="display: none;">
 
894
  <div class="ai-loader-bar"></div>
895
  <div class="ai-loader-bar"></div>
896
  </div>
897
+ <div class="ai-loader-text" id="aiLoaderText">در حال پردازش...</div>
898
  </div>
899
  <div class="progress-bar-container" id="progressBarContainer" style="display: none;">
900
  <div class="progress-bar" id="progressBar"></div>
 
904
 
905
  <div class="output-section hidden-section" id="outputSection">
906
  <h2>
907
+ <svg width="30" height="30" viewBox="0 0 24 24" fill="#10b981">
908
+ <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
909
+ </svg>
910
+ ویدیو آماده است! 🎉
911
  </h2>
912
  <video width="300" height="150" style="display: none;" id="outputVideo" controls preload="metadata" playsinline></video>
913
  <p id="finalSeed">&nbsp;</p>
914
  <div id="downloadLinkStatus"></div>
915
  <button type="button" class="action-button" id="btnDownloadVideo" style="display: none;">
916
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
917
+ <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
918
+ </svg>
919
  دانلود ویدیو
920
  </button>
921
  <button type="button" class="action-button" id="btnRestart">
922
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
923
+ <path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/>
924
+ </svg>
925
+ ساخت ویدیو جدید
926
  </button>
927
  </div>
928
 
929
  </div>
930
  </div>
931
+
932
  <script>
933
+ // Your existing JavaScript code remains the same
934
+ (function() {
935
  // DOM Elements
936
  const formContainer = document.querySelector('#imageToVideoApp .form-container');
937
  const imageFileInput = document.getElementById('imageFile');
938
  const imagePreview = document.getElementById('imagePreview');
939
+ const imageDropZone = document.getElementById('image-drop-zone');
940
  const promptInput = document.getElementById('prompt');
941
  const generateButton = document.getElementById('generateButton');
942
  const outputVideo = document.getElementById('outputVideo');
 
1088
  imageFileInput.value = '';
1089
  imagePreview.src = TRANSPARENT_PIXEL_SRC;
1090
  imageDropZone.classList.remove('has-image');
1091
+ imageDropZone.style.aspectRatio = '';
1092
 
1093
  originalImageWidth = null;
1094
  originalImageHeight = null;
 
1406
  originalImageHeight = this.height;
1407
  if (originalImageWidth && originalImageHeight) {
1408
  const imageActualRatio = originalImageWidth / originalImageHeight;
 
1409
  imageDropZone.style.aspectRatio = `${originalImageWidth} / ${originalImageHeight}`;
1410
  autoSelectAspectRatioBasedOnImage(imageActualRatio);
1411
  }
 
1505
  styleSheet.type = "text/css";
1506
  styleSheet.innerText = `#imageToVideoApp .shake-animation { animation: imageToVideoApp-shake 0.5s cubic-bezier(.36,.07,.19,.97) both; }`;
1507
  document.head.appendChild(styleSheet);
1508
+ })();
1509
  </script>
1510
 
1511
  </body>