Hugging Face's logo

Spaces:
Basha112
/
anycoder-afa1331c
Running

App Files Community
Basha112 commited on
Commit
aaba2fc
·
verified ·
1 Parent(s): 7131431

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +771 -19
index.html CHANGED
@@ -1,19 +1,771 @@
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="ar" 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
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Tajawal:wght@300;400;500;700;800;900&display=swap" rel="stylesheet">
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ :root {
12
+ --primary: #6366f1;
13
+ --secondary: #8b5cf6;
14
+ --accent: #06b6d4;
15
+ --bg-dark: #0a0a1a;
16
+ --bg-card: #13132a;
17
+ --surface: #1e1e3f;
18
+ --text: #e2e8f0;
19
+ --text-muted: #94a3b8;
20
+ --border: rgba(255,255,255,0.08);
21
+ --success: #10b981;
22
+ --error: #ef4444;
23
+ --warning: #f59e0b;
24
+ }
25
+
26
+ * {
27
+ margin: 0;
28
+ padding: 0;
29
+ box-sizing: border-box;
30
+ }
31
+
32
+ body {
33
+ font-family: 'Tajawal', sans-serif;
34
+ background: var(--bg-dark);
35
+ color: var(--text);
36
+ min-height: 100vh;
37
+ overflow-x: hidden;
38
+ direction: rtl;
39
+ }
40
+
41
+ /* Animated background mesh */
42
+ .bg-mesh {
43
+ position: fixed;
44
+ inset: 0;
45
+ z-index: 0;
46
+ pointer-events: none;
47
+ overflow: hidden;
48
+ }
49
+
50
+ .bg-mesh::before {
51
+ content: '';
52
+ position: absolute;
53
+ inset: -50%;
54
+ background:
55
+ radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.12) 0%, transparent 50%),
56
+ radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
57
+ radial-gradient(circle at 50% 50%, rgba(6, 182, 212, 0.06) 0%, transparent 40%);
58
+ animation: meshFloat 20s ease-in-out infinite;
59
+ }
60
+
61
+ @keyframes meshFloat {
62
+ 0%, 100% { transform: translate(0, 0) scale(1); }
63
+ 33% { transform: translate(2%, -2%) scale(1.05); }
64
+ 66% { transform: translate(-1%, 1%) scale(0.98); }
65
+ }
66
+
67
+ /* Noise texture */
68
+ .noise {
69
+ position: fixed;
70
+ inset: 0;
71
+ z-index: 0;
72
+ pointer-events: none;
73
+ opacity: 0.03;
74
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
75
+ background-size: 128px;
76
+ }
77
+
78
+ /* Orbitron for English text */
79
+ .font-orbitron {
80
+ font-family: 'Orbitron', sans-serif;
81
+ }
82
+
83
+ /* Glass card */
84
+ .glass {
85
+ background: rgba(30, 30, 63, 0.6);
86
+ backdrop-filter: blur(20px);
87
+ -webkit-backdrop-filter: blur(20px);
88
+ border: 1px solid var(--border);
89
+ box-shadow: 0 8px 32px rgba(0,0,0,0.3);
90
+ }
91
+
92
+ .glass-light {
93
+ background: rgba(255,255,255,0.04);
94
+ backdrop-filter: blur(16px);
95
+ -webkit-backdrop-filter: blur(16px);
96
+ border: 1px solid var(--border);
97
+ }
98
+
99
+ /* Glow effects */
100
+ .glow-primary {
101
+ box-shadow: 0 0 30px rgba(99,102,241,0.3), inset 0 0 20px rgba(99,102,241,0.05);
102
+ }
103
+
104
+ .glow-accent {
105
+ box-shadow: 0 0 25px rgba(6,182,212,0.25);
106
+ }
107
+
108
+ /* Animations */
109
+ @keyframes slideUp {
110
+ from { opacity: 0; transform: translateY(30px); }
111
+ to { opacity: 1; transform: translateY(0); }
112
+ }
113
+
114
+ @keyframes slideInLeft {
115
+ from { opacity: 0; transform: translateX(30px); }
116
+ to { opacity: 1; transform: translateX(0); }
117
+ }
118
+
119
+ @keyframes scaleIn {
120
+ from { opacity: 0; transform: scale(0.9); }
121
+ to { opacity: 1; transform: scale(1); }
122
+ }
123
+
124
+ @keyframes pulse-glow {
125
+ 0%, 100% { box-shadow: 0 0 20px rgba(99,102,241,0.2); }
126
+ 50% { box-shadow: 0 0 40px rgba(99,102,241,0.4); }
127
+ }
128
+
129
+ @keyframes float {
130
+ 0%, 100% { transform: translateY(0); }
131
+ 50% { transform: translateY(-6px); }
132
+ }
133
+
134
+ @keyframes spin-slow {
135
+ to { transform: rotate(360deg); }
136
+ }
137
+
138
+ @keyframes progress-pulse {
139
+ 0%, 100% { opacity: 0.7; }
140
+ 50% { opacity: 1; }
141
+ }
142
+
143
+ @keyframes scanline {
144
+ 0% { transform: translateY(-100%); }
145
+ 100% { transform: translateY(100vh); }
146
+ }
147
+
148
+ .anim-slide-up { animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
149
+ .anim-slide-left { animation: slideInLeft 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
150
+ .anim-scale { animation: scaleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
151
+ .anim-float { animation: float 3s ease-in-out infinite; }
152
+ .anim-pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }
153
+
154
+ /* Custom scrollbar */
155
+ ::-webkit-scrollbar { width: 6px; height: 6px; }
156
+ ::-webkit-scrollbar-track { background: transparent; }
157
+ ::-webkit-scrollbar-thumb { background: var(--surface); border-radius: 3px; }
158
+ ::-webkit-scrollbar-thumb:hover { background: var(--primary); }
159
+
160
+ /* Form elements */
161
+ input[type="range"] {
162
+ -webkit-appearance: none;
163
+ appearance: none;
164
+ height: 6px;
165
+ border-radius: 3px;
166
+ background: linear-gradient(to left, var(--primary), var(--secondary));
167
+ outline: none;
168
+ cursor: pointer;
169
+ }
170
+
171
+ input[type="range"]::-webkit-slider-thumb {
172
+ -webkit-appearance: none;
173
+ appearance: none;
174
+ width: 18px;
175
+ height: 18px;
176
+ border-radius: 50%;
177
+ background: var(--text);
178
+ border: 3px solid var(--primary);
179
+ box-shadow: 0 0 10px rgba(99,102,241,0.5);
180
+ cursor: pointer;
181
+ transition: transform 0.2s, box-shadow 0.2s;
182
+ }
183
+
184
+ input[type="range"]::-webkit-slider-thumb:hover {
185
+ transform: scale(1.2);
186
+ box-shadow: 0 0 20px rgba(99,102,241,0.7);
187
+ }
188
+
189
+ /* Checkbox/radio */
190
+ .radio-card {
191
+ transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
192
+ cursor: pointer;
193
+ position: relative;
194
+ overflow: hidden;
195
+ }
196
+
197
+ .radio-card::before {
198
+ content: '';
199
+ position: absolute;
200
+ inset: 0;
201
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
202
+ opacity: 0;
203
+ transition: opacity 0.3s;
204
+ z-index: 0;
205
+ }
206
+
207
+ .radio-card:hover::before {
208
+ opacity: 0.08;
209
+ }
210
+
211
+ .radio-card.active {
212
+ border-color: var(--primary);
213
+ background: rgba(99,102,241,0.1);
214
+ }
215
+
216
+ .radio-card.active::before {
217
+ opacity: 0.12;
218
+ }
219
+
220
+ .radio-card i {
221
+ transition: transform 0.3s;
222
+ }
223
+
224
+ .radio-card:hover i {
225
+ transform: scale(1.1);
226
+ }
227
+
228
+ /* Upload zone */
229
+ .upload-zone {
230
+ transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
231
+ position: relative;
232
+ }
233
+
234
+ .upload-zone.dragover {
235
+ border-color: var(--primary);
236
+ background: rgba(99,102,241,0.08);
237
+ transform: scale(1.01);
238
+ }
239
+
240
+ .upload-zone::after {
241
+ content: '';
242
+ position: absolute;
243
+ inset: -2px;
244
+ border-radius: 1rem;
245
+ background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
246
+ opacity: 0;
247
+ transition: opacity 0.3s;
248
+ z-index: -1;
249
+ }
250
+
251
+ .upload-zone:hover::after {
252
+ opacity: 0.5;
253
+ }
254
+
255
+ /* Video preview */
256
+ .video-wrapper {
257
+ position: relative;
258
+ overflow: hidden;
259
+ }
260
+
261
+ .video-wrapper::before {
262
+ content: '';
263
+ position: absolute;
264
+ top: 0;
265
+ left: 0;
266
+ right: 0;
267
+ height: 2px;
268
+ background: linear-gradient(90deg, transparent, var(--primary), transparent);
269
+ animation: scanline 3s linear infinite;
270
+ pointer-events: none;
271
+ z-index: 10;
272
+ opacity: 0.3;
273
+ }
274
+
275
+ /* Stagger delays */
276
+ .stagger-1 { animation-delay: 0.1s; opacity: 0; }
277
+ .stagger-2 { animation-delay: 0.2s; opacity: 0; }
278
+ .stagger-3 { animation-delay: 0.3s; opacity: 0; }
279
+ .stagger-4 { animation-delay: 0.4s; opacity: 0; }
280
+ .stagger-5 { animation-delay: 0.5s; opacity: 0; }
281
+
282
+ /* Button shine effect */
283
+ .btn-shine {
284
+ position: relative;
285
+ overflow: hidden;
286
+ }
287
+
288
+ .btn-shine::after {
289
+ content: '';
290
+ position: absolute;
291
+ top: -50%;
292
+ left: -50%;
293
+ width: 200%;
294
+ height: 200%;
295
+ background: linear-gradient(to right, transparent, rgba(255,255,255,0.15), transparent);
296
+ transform: rotate(30deg) translateX(-100%);
297
+ transition: transform 0.6s;
298
+ }
299
+
300
+ .btn-shine:hover::after {
301
+ transform: rotate(30deg) translateX(100%);
302
+ }
303
+
304
+ /* Tag badge */
305
+ .tag-badge {
306
+ background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.15));
307
+ border: 1px solid rgba(99,102,241,0.25);
308
+ padding: 2px 10px;
309
+ border-radius: 20px;
310
+ font-size: 0.7rem;
311
+ font-weight: 700;
312
+ color: #a5b4fc;
313
+ text-transform: uppercase;
314
+ letter-spacing: 0.5px;
315
+ }
316
+
317
+ /* Particle canvas */
318
+ #particleCanvas {
319
+ position: fixed;
320
+ inset: 0;
321
+ z-index: 1;
322
+ pointer-events: none;
323
+ }
324
+
325
+ /* Main content */
326
+ .main-content {
327
+ position: relative;
328
+ z-index: 2;
329
+ }
330
+
331
+ /* Hidden */
332
+ .hidden-content {
333
+ display: none !important;
334
+ }
335
+ </style>
336
+ </head>
337
+ <body>
338
+ <!-- Background Effects -->
339
+ <div class="bg-mesh"></div>
340
+ <div class="noise"></div>
341
+ <canvas id="particleCanvas"></canvas>
342
+
343
+ <!-- Header -->
344
+ <header class="main-content relative z-10 py-6 px-4 lg:px-8">
345
+ <div class="max-w-7xl mx-auto flex items-center justify-between">
346
+ <div class="flex items-center gap-3">
347
+ <div class="w-11 h-11 rounded-xl bg-gradient-to-br from-violet-500 to-indigo-600 flex items-center justify-center shadow-lg shadow-violet-500/20 anim-float" style="animation-delay: 0s;">
348
+ <i class="fas fa-film text-white text-lg"></i>
349
+ </div>
350
+ <div>
351
+ <h1 class="text-xl font-black tracking-tight">
352
+ <span class="text-transparent bg-clip-text bg-gradient-to-l from-violet-400 to-cyan-400">بيكسل</span>
353
+ <span class="text-white">موشن</span>
354
+ </h1>
355
+ <p class="text-xs text-slate-400 font-medium">أداة تحويل الصور إلى فيديو</p>
356
+ </div>
357
+ </div>
358
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="tag-badge cursor-pointer hover:opacity-80 transition-opacity">
359
+ Built with anycoder
360
+ </a>
361
+ </div>
362
+ </header>
363
+
364
+ <!-- Main Content -->
365
+ <main class="main-content relative z-10 px-4 lg:px-8 pb-12">
366
+ <div class="max-w-7xl mx-auto">
367
+ <!-- Hero Section -->
368
+ <div class="text-center mb-10 anim-slide-up">
369
+ <div class="tag-badge mx-auto mb-4 inline-block">تحويل فوري</div>
370
+ <h2 class="text-3xl md:text-5xl font-black mb-4 leading-tight">
371
+ حوّل صورك إلى
372
+ <span class="text-transparent bg-clip-text bg-gradient-to-l from-violet-400 via-purple-400 to-cyan-400">
373
+ مقاطع فيديو مذهلة
374
+ </span>
375
+ </h2>
376
+ <p class="text-slate-400 text-sm md:text-base max-w-xl mx-auto leading-relaxed">
377
+ أداة متقدمة لتحويل الصور الثابتة إلى فيديوهات متحركة بمؤثرات احترافية، مع دعم كامل للعربية
378
+ </p>
379
+ </div>
380
+
381
+ <!-- App Grid -->
382
+ <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
383
+ <!-- Left Panel - Settings -->
384
+ <div class="lg:col-span-4 space-y-5">
385
+ <!-- Upload Section -->
386
+ <div class="glass rounded-2xl p-5 anim-slide-up stagger-1">
387
+ <div class="flex items-center gap-2 mb-4">
388
+ <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-violet-500/20 to-indigo-500/20 flex items-center justify-center">
389
+ <i class="fas fa-cloud-upload-alt text-violet-400 text-sm"></i>
390
+ </div>
391
+ <h3 class="font-bold text-sm">تحميل الصورة</h3>
392
+ </div>
393
+
394
+ <div class="upload-zone glass-light rounded-xl p-6 text-center border-2 border-dashed cursor-pointer" id="dropZone">
395
+ <input type="file" id="imageInput" accept="image/*" class="hidden">
396
+ <div id="uploadDefault">
397
+ <div class="w-14 h-14 mx-auto mb-3 rounded-xl bg-gradient-to-br from-violet-500/15 to-indigo-500/15 flex items-center justify-center">
398
+ <i class="fas fa-image text-violet-400 text-xl"></i>
399
+ </div>
400
+ <p class="text-slate-300 text-sm font-semibold mb-1">اسحب الصورة هنا أو انقر</p>
401
+ <p class="text-slate-500 text-xs">JPG, PNG, WEBP — حتى 10MB</p>
402
+ </div>
403
+ <div id="uploadPreview" class="hidden-content">
404
+ <img id="previewImg" src="" alt="" class="max-h-48 mx-auto rounded-lg shadow-lg">
405
+ <p class="text-violet-400 text-xs mt-2 font-medium" id="fileName"></p>
406
+ </div>
407
+ </div>
408
+ </div>
409
+
410
+ <!-- Animation Settings -->
411
+ <div class="glass rounded-2xl p-5 anim-slide-up stagger-2">
412
+ <div class="flex items-center gap-2 mb-4">
413
+ <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center">
414
+ <i class="fas fa-magic text-cyan-400 text-sm"></i>
415
+ </div>
416
+ <h3 class="font-bold text-sm">نوع الحركة</h3>
417
+ </div>
418
+
419
+ <div class="space-y-2">
420
+ <div class="radio-card active glass-light rounded-xl p-3 flex items-center gap-3" data-effect="zoomIn">
421
+ <div class="w-9 h-9 rounded-lg bg-gradient-to-br from-violet-500/20 to-indigo-500/20 flex items-center justify-center shrink-0">
422
+ <i class="fas fa-search-plus text-violet-400 text-sm"></i>
423
+ </div>
424
+ <div class="flex-1">
425
+ <p class="text-sm font-bold">تقريب تدريجي</p>
426
+ <p class="text-xs text-slate-500">تكبير الصورة ببطء</p>
427
+ </div>
428
+ <div class="w-5 h-5 rounded-full border-2 border-violet-500 flex items-center justify-center">
429
+ <div class="w-2.5 h-2.5 rounded-full bg-violet-500"></div>
430
+ </div>
431
+ </div>
432
+
433
+ <div class="radio-card glass-light rounded-xl p-3 flex items-center gap-3" data-effect="zoomOut">
434
+ <div class="w-9 h-9 rounded-lg bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center shrink-0">
435
+ <i class="fas fa-search-minus text-cyan-400 text-sm"></i>
436
+ </div>
437
+ <div class="flex-1">
438
+ <p class="text-sm font-bold">تبعيد تدريجي</p>
439
+ <p class="text-xs text-slate-500">تصغير الصورة ببطء</p>
440
+ </div>
441
+ <div class="w-5 h-5 rounded-full border-2 border-slate-600 flex items-center justify-center">
442
+ <div class="w-2.5 h-2.5 rounded-full bg-transparent"></div>
443
+ </div>
444
+ </div>
445
+
446
+ <div class="radio-card glass-light rounded-xl p-3 flex items-center gap-3" data-effect="panLeft">
447
+ <div class="w-9 h-9 rounded-lg bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center shrink-0">
448
+ <i class="fas fa-arrow-left text-emerald-400 text-sm"></i>
449
+ </div>
450
+ <div class="flex-1">
451
+ <p class="text-sm font-bold">انزلاق لليسار</p>
452
+ <p class="text-xs text-slate-500">تحريك الصورة لليسار</p>
453
+ </div>
454
+ <div class="w-5 h-5 rounded-full border-2 border-slate-600 flex items-center justify-center">
455
+ <div class="w-2.5 h-2.5 rounded-full bg-transparent"></div>
456
+ </div>
457
+ </div>
458
+
459
+ <div class="radio-card glass-light rounded-xl p-3 flex items-center gap-3" data-effect="panRight">
460
+ <div class="w-9 h-9 rounded-lg bg-gradient-to-br from-amber-500/20 to-orange-500/20 flex items-center justify-center shrink-0">
461
+ <i class="fas fa-arrow-right text-amber-400 text-sm"></i>
462
+ </div>
463
+ <div class="flex-1">
464
+ <p class="text-sm font-bold">انزلاق لليمين</p>
465
+ <p class="text-xs text-slate-500">تحريك الصورة لليمين</p>
466
+ </div>
467
+ <div class="w-5 h-5 rounded-full border-2 border-slate-600 flex items-center justify-center">
468
+ <div class="w-2.5 h-2.5 rounded-full bg-transparent"></div>
469
+ </div>
470
+ </div>
471
+
472
+ <div class="radio-card glass-light rounded-xl p-3 flex items-center gap-3" data-effect="panUp">
473
+ <div class="w-9 h-9 rounded-lg bg-gradient-to-br from-rose-500/20 to-pink-500/20 flex items-center justify-center shrink-0">
474
+ <i class="fas fa-arrow-up text-rose-400 text-sm"></i>
475
+ </div>
476
+ <div class="flex-1">
477
+ <p class="text-sm font-bold">انزلاق للأعلى</p>
478
+ <p class="text-xs text-slate-500">تحريك الصورة للأعلى</p>
479
+ </div>
480
+ <div class="w-5 h-5 rounded-full border-2 border-slate-600 flex items-center justify-center">
481
+ <div class="w-2.5 h-2.5 rounded-full bg-transparent"></div>
482
+ </div>
483
+ </div>
484
+
485
+ <div class="radio-card glass-light rounded-xl p-3 flex items-center gap-3" data-effect="panDown">
486
+ <div class="w-9 h-9 rounded-lg bg-gradient-to-br from-sky-500/20 to-blue-500/20 flex items-center justify-center shrink-0">
487
+ <i class="fas fa-arrow-down text-sky-400 text-sm"></i>
488
+ </div>
489
+ <div class="flex-1">
490
+ <p class="text-sm font-bold">انزلاق للأسفل</p>
491
+ <p class="text-xs text-slate-500">تحريك الصورة للأسفل</p>
492
+ </div>
493
+ <div class="w-5 h-5 rounded-full border-2 border-slate-600 flex items-center justify-center">
494
+ <div class="w-2.5 h-2.5 rounded-full bg-transparent"></div>
495
+ </div>
496
+ </div>
497
+
498
+ <div class="radio-card glass-light rounded-xl p-3 flex items-center gap-3" data-effect="rotate">
499
+ <div class="w-9 h-9 rounded-lg bg-gradient-to-br from-fuchsia-500/20 to-purple-500/20 flex items-center justify-center shrink-0">
500
+ <i class="fas fa-sync text-fuchsia-400 text-sm"></i>
501
+ </div>
502
+ <div class="flex-1">
503
+ <p class="text-sm font-bold">دوران خفيف</p>
504
+ <p class="text-xs text-slate-500">دوران الصورة مع تقريب</p>
505
+ </div>
506
+ <div class="w-5 h-5 rounded-full border-2 border-slate-600 flex items-center justify-center">
507
+ <div class="w-2.5 h-2.5 rounded-full bg-transparent"></div>
508
+ </div>
509
+ </div>
510
+
511
+ <div class="radio-card glass-light rounded-xl p-3 flex items-center gap-3" data-effect="bounce">
512
+ <div class="w-9 h-9 rounded-lg bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center shrink-0">
513
+ <i class="fas fa-compress-arrows-alt text-green-400 text-sm"></i>
514
+ </div>
515
+ <div class="flex-1">
516
+ <p class="text-sm font-bold">نبض ديناميكي</p>
517
+ <p class="text-xs text-slate-500">تأثير نبض مع تكبير وتصغير</p>
518
+ </div>
519
+ <div class="w-5 h-5 rounded-full border-2 border-slate-600 flex items-center justify-center">
520
+ <div class="w-2.5 h-2.5 rounded-full bg-transparent"></div>
521
+ </div>
522
+ </div>
523
+
524
+ <div class="radio-card glass-light rounded-xl p-3 flex items-center gap-3" data-effect="kenBurns">
525
+ <div class="w-9 h-9 rounded-lg bg-gradient-to-br from-indigo-500/20 to-violet-500/20 flex items-center justify-center shrink-0">
526
+ <i class="fas fa-film text-indigo-400 text-sm"></i>
527
+ </div>
528
+ <div class="flex-1">
529
+ <p class="text-sm font-bold">كين بيرنز (احترافي)</p>
530
+ <p class="text-xs text-slate-500">تكبير + انزلاق ديناميكي</p>
531
+ </div>
532
+ <div class="w-5 h-5 rounded-full border-2 border-slate-600 flex items-center justify-center">
533
+ <div class="w-2.5 h-2.5 rounded-full bg-transparent"></div>
534
+ </div>
535
+ </div>
536
+ </div>
537
+ </div>
538
+
539
+ <!-- Video Settings -->
540
+ <div class="glass rounded-2xl p-5 anim-slide-up stagger-3">
541
+ <div class="flex items-center gap-2 mb-4">
542
+ <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-amber-500/20 to-orange-500/20 flex items-center justify-center">
543
+ <i class="fas fa-sliders-h text-amber-400 text-sm"></i>
544
+ </div>
545
+ <h3 class="font-bold text-sm">إعدادات الفيديو</h3>
546
+ </div>
547
+
548
+ <div class="space-y-4">
549
+ <!-- Duration -->
550
+ <div>
551
+ <div class="flex justify-between mb-2">
552
+ <label class="text-xs text-slate-400 font-semibold">مدة الفيديو</label>
553
+ <span id="durationValue" class="text-xs text-violet-400 font-bold">5 ثوانٍ</span>
554
+ </div>
555
+ <input type="range" id="duration" min="1" max="15" value="5" class="w-full" style="direction: ltr;">
556
+ <div class="flex justify-between mt-1">
557
+ <span class="text-[10px] text-slate-600">1s</span>
558
+ <span class="text-[10px] text-slate-600">15s</span>
559
+ </div>
560
+ </div>
561
+
562
+ <!-- FPS -->
563
+ <div>
564
+ <div class="flex justify-between mb-2">
565
+ <label class="text-xs text-slate-400 font-semibold">معدل الإطارات (FPS)</label>
566
+ <span id="fpsValue" class="text-xs text-cyan-400 font-bold">30 fps</span>
567
+ </div>
568
+ <input type="range" id="fps" min="15" max="60" value="30" step="5" class="w-full" style="direction: ltr;">
569
+ <div class="flex justify-between mt-1">
570
+ <span class="text-[10px] text-slate-600">15</span>
571
+ <span class="text-[10px] text-slate-600">60</span>
572
+ </div>
573
+ </div>
574
+
575
+ <!-- Quality -->
576
+ <div>
577
+ <div class="flex justify-between mb-2">
578
+ <label class="text-xs text-slate-400 font-semibold">جودة الفيديو</label>
579
+ <span id="qualityValue" class="text-xs text-emerald-400 font-bold">عالية (1080p)</span>
580
+ </div>
581
+ <input type="range" id="quality" min="480" max="1080" value="1080" step="120" class="w-full" style="direction: ltr;">
582
+ <div class="flex justify-between mt-1">
583
+ <span class="text-[10px] text-slate-600">480p</span>
584
+ <span class="text-[10px] text-slate-600">1080p</span>
585
+ </div>
586
+ </div>
587
+ </div>
588
+ </div>
589
+ </div>
590
+
591
+ <!-- Right Panel - Preview -->
592
+ <div class="lg:col-span-8 space-y-5">
593
+ <!-- Preview Area -->
594
+ <div class="glass rounded-2xl p-5 anim-slide-left stagger-2">
595
+ <div class="flex items-center justify-between mb-4">
596
+ <div class="flex items-center gap-2">
597
+ <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-rose-500/20 to-pink-500/20 flex items-center justify-center">
598
+ <i class="fas fa-eye text-rose-400 text-sm"></i>
599
+ </div>
600
+ <h3 class="font-bold text-sm">معاينة النتيجة</h3>
601
+ </div>
602
+ <span class="tag-badge" id="effectBadge">تقريب تدريجي</span>
603
+ </div>
604
+
605
+ <div class="video-wrapper rounded-xl overflow-hidden bg-slate-900/60 flex items-center justify-center min-h-[360px] lg:min-h-[420px]" id="previewContainer">
606
+ <div id="emptyState" class="text-center p-8">
607
+ <div class="w-20 h-20 mx-auto mb-4 rounded-2xl bg-gradient-to-br from-violet-500/10 to-indigo-500/10 border border-violet-500/20 flex items-center justify-center anim-pulse-glow">
608
+ <i class="fas fa-film text-3xl text-violet-400/50"></i>
609
+ </div>
610
+ <p class="text-slate-500 text-sm font-medium">سيتم عرض الفيديو هنا بعد التحميل والمعالجة</p>
611
+ <p class="text-slate-600 text-xs mt-1">حمّل صورة ثم انقر على "إنشاء الفيديو"</p>
612
+ </div>
613
+
614
+ <canvas id="previewCanvas" class="hidden-content max-w-full max-h-[420px] rounded-xl shadow-2xl"></canvas>
615
+
616
+ <!-- Video element for playback -->
617
+ <video id="outputVideo" class="hidden-content max-w-full max-h-[420px] rounded-xl shadow-2xl" controls loop></video>
618
+ </div>
619
+ </div>
620
+
621
+ <!-- Progress Bar -->
622
+ <div id="progressSection" class="glass rounded-2xl p-5 hidden-content">
623
+ <div class="flex items-center gap-2 mb-3">
624
+ <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-amber-500/20 to-orange-500/20 flex items-center justify-center">
625
+ <i class="fas fa-spinner fa-spin text-amber-400 text-sm"></i>
626
+ </div>
627
+ <div class="flex-1">
628
+ <h3 class="font-bold text-sm">جاري المعالجة</h3>
629
+ <p class="text-xs text-slate-500" id="progressText">جاري تجهيز الفيديو...</p>
630
+ </div>
631
+ <span id="progressPercent" class="text-sm font-bold text-violet-400">0%</span>
632
+ </div>
633
+ <div class="h-2 bg-slate-700/50 rounded-full overflow-hidden">
634
+ <div id="progressBar" class="h-full bg-gradient-to-l from-violet-500 to-cyan-500 rounded-full transition-all duration-300" style="width: 0%;"></div>
635
+ </div>
636
+ <div class="flex justify-between mt-2">
637
+ <span class="text-[10px] text-slate-600" id="frameInfo">0 / 0 إطار</span>
638
+ <span class="text-[10px] text-slate-600" id="etaInfo">متبقي: --</span>
639
+ </div>
640
+ </div>
641
+
642
+ <!-- Action Buttons -->
643
+ <div class="flex flex-col sm:flex-row gap-3 anim-slide-left stagger-4">
644
+ <button id="generateBtn" class="btn-shine flex-1 bg-gradient-to-l from-violet-600 via-indigo-600 to-cyan-600 hover:from-violet-500 hover:via-indigo-500 hover:to-cyan-500 text-white font-bold py-4 px-6 rounded-xl shadow-lg shadow-violet-500/25 transition-all duration-300 hover:-translate-y-0.5 disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:translate-y-0">
645
+ <i class="fas fa-wand-magic-sparkles ml-2"></i>
646
+ إنشاء الفيديو
647
+ </button>
648
+ <button id="downloadBtn" class="flex-1 bg-gradient-to-l from-emerald-600 to-teal-600 hover:from-emerald-500 hover:to-teal-500 text-white font-bold py-4 px-6 rounded-xl shadow-lg shadow-emerald-500/25 transition-all duration-300 hover:-translate-y-0.5 hidden-content disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:translate-y-0">
649
+ <i class="fas fa-download ml-2"></i>
650
+ تحميل الفيديو
651
+ </button>
652
+ <button id="resetBtn" class="sm:w-auto w-full px-5 py-4 glass-light text-slate-300 hover:text-white font-bold rounded-xl transition-all duration-300 hover:bg-white/10 border border-slate-700/50">
653
+ <i class="fas fa-redo-alt"></i>
654
+ </button>
655
+ </div>
656
+
657
+ <!-- Video Info -->
658
+ <div id="videoInfo" class="glass rounded-2xl p-4 hidden-content anim-scale">
659
+ <div class="flex items-center gap-2 mb-3">
660
+ <div class="w-7 h-7 rounded-lg bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center">
661
+ <i class="fas fa-info-circle text-emerald-400 text-xs"></i>
662
+ </div>
663
+ <h3 class="font-bold text-xs">معلومات الفيديو</h3>
664
+ </div>
665
+ <div class="grid grid-cols-2 gap-3 text-xs">
666
+ <div class="glass-light rounded-lg p-3">
667
+ <p class="text-slate-500 mb-1">الدقة</p>
668
+ <p class="text-white font-bold" id="infoResolution">--</p>
669
+ </div>
670
+ <div class="glass-light rounded-lg p-3">
671
+ <p class="text-slate-500 mb-1">مدة الفيديو</p>
672
+ <p class="text-white font-bold" id="infoDuration">--</p>
673
+ </div>
674
+ <div class="glass-light rounded-lg p-3">
675
+ <p class="text-slate-500 mb-1">معدل الإطارات</p>
676
+ <p class="text-white font-bold" id="infoFps">--</p>
677
+ </div>
678
+ <div class="glass-light rounded-lg p-3">
679
+ <p class="text-slate-500 mb-1">عدد الإطارات</p>
680
+ <p class="text-white font-bold" id="infoFrames">--</p>
681
+ </div>
682
+ </div>
683
+ </div>
684
+ </div>
685
+ </div>
686
+
687
+ <!-- Features Section -->
688
+ <div class="mt-14">
689
+ <div class="text-center mb-8">
690
+ <div class="tag-badge mb-3 inline-block">لماذا نحن</div>
691
+ <h2 class="text-2xl md:text-3xl font-black">
692
+ مميزات <span class="text-transparent bg-clip-text bg-gradient-to-l from-violet-400 to-cyan-400">بيكسل موشن</span>
693
+ </h2>
694
+ </div>
695
+
696
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
697
+ <div class="glass rounded-xl p-5 group hover:border-violet-500/30 transition-all duration-300 hover:-translate-y-1">
698
+ <div class="w-11 h-11 rounded-xl bg-gradient-to-br from-violet-500/20 to-indigo-500/20 flex items-center justify-center mb-3 group-hover:shadow-lg group-hover:shadow-violet-500/20 transition-all">
699
+ <i class="fas fa-bolt text-violet-400 text-base"></i>
700
+ </div>
701
+ <h3 class="font-bold text-sm mb-1">معالجة سريعة</h3>
702
+ <p class="text-xs text-slate-400 leading-relaxed">تحويل الصور إلى فيديو بسرعة عالية باستخدام تقنيات الويب المتقدمة</p>
703
+ </div>
704
+
705
+ <div class="glass rounded-xl p-5 group hover:border-cyan-500/30 transition-all duration-300 hover:-translate-y-1">
706
+ <div class="w-11 h-11 rounded-xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-3 group-hover:shadow-lg group-hover:shadow-cyan-500/20 transition-all">
707
+ <i class="fas fa-sliders-h text-cyan-400 text-base"></i>
708
+ </div>
709
+ <h3 class="font-bold text-sm mb-1">تحكم كامل</h3>
710
+ <p class="text-xs text-slate-400 leading-relaxed">تحكم كامل في الجودة والمدة ومعدل الإطارات ونوع الحركة</p>
711
+ </div>
712
+
713
+ <div class="glass rounded-xl p-5 group hover:border-emerald-500/30 transition-all duration-300 hover:-translate-y-1">
714
+ <div class="w-11 h-11 rounded-xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-3 group-hover:shadow-lg group-hover:shadow-emerald-500/20 transition-all">
715
+ <i class="fas fa-shield-alt text-emerald-400 text-base"></i>
716
+ </div>
717
+ <h3 class="font-bold text-sm mb-1">خصوصية تامة</h3>
718
+ <p class="text-xs text-slate-400 leading-relaxed">كل المعالجة تتم على جهازك مباشرة بدون رفع الصور لأي خادم</p>
719
+ </div>
720
+
721
+ <div class="glass rounded-xl p-5 group hover:border-amber-500/30 transition-all duration-300 hover:-translate-y-1">
722
+ <div class="w-11 h-11 rounded-xl bg-gradient-to-br from-amber-500/20 to-orange-500/20 flex items-center justify-center mb-3 group-hover:shadow-lg group-hover:shadow-amber-500/20 transition-all">
723
+ <i class="fas fa-magic text-amber-400 text-base"></i>
724
+ </div>
725
+ <h3 class="font-bold text-sm mb-1">مؤثرات متنوعة</h3>
726
+ <p class="text-xs text-slate-400 leading-relaxed">أنواع متعددة من الحركات والمؤثرات لإنشاء فيديوهات احترافية</p>
727
+ </div>
728
+ </div>
729
+ </div>
730
+ </div>
731
+ </main>
732
+
733
+ <!-- Footer -->
734
+ <footer class="main-content relative z-10 py-8 px-4 border-t border-white/5 mt-8">
735
+ <div class="max-w-7xl mx-auto text-center">
736
+ <div class="flex items-center justify-center gap-2 mb-2">
737
+ <i class="fas fa-film text-violet-400"></i>
738
+ <span class="font-orbitron text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-violet-400 to-cyan-400">PixelMotion</span>
739
+ </div>
740
+ <p class="text-xs text-slate-500">تم تصميم هذه الأداة لتحويل الصور إلى فيديو مباشرة في المتصفح</p>
741
+ </div>
742
+ </footer>
743
+
744
+ <script>
745
+ // ============================================
746
+ // PARTICLE BACKGROUND
747
+ // ============================================
748
+ const particleCanvas = document.getElementById('particleCanvas');
749
+ const pCtx = particleCanvas.getContext('2d');
750
+ let particles = [];
751
+ let mouse = { x: -1000, y: -1000 };
752
+
753
+ function resizeParticles() {
754
+ particleCanvas.width = window.innerWidth;
755
+ particleCanvas.height = window.innerHeight;
756
+ }
757
+ resizeParticles();
758
+ window.addEventListener('resize', resizeParticles);
759
+
760
+ class Particle {
761
+ constructor() {
762
+ this.reset();
763
+ }
764
+ reset() {
765
+ this.x = Math.random() * particleCanvas.width;
766
+ this.y = Math.random() * particleCanvas.height;
767
+ this.size = Math.random() * 2 + 0.5;
768
+ this.speedX = (Math.random() - 0.5) * 0.4;
769
+ this.speedY = (Math.random() - 0.5) * 0.4;
770
+ this.opacity = Math.random() * 0.5 + 0.1;
771
+ this.color = Math.random() > 0.5 ? '99,