| <!DOCTYPE html> |
| <html lang="ar" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>إنشاء فيديو - صانع مجاني</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;900&display=swap'); |
| |
| * { |
| font-family: 'Tajawal', sans-serif; |
| } |
| |
| .scene-card { |
| transition: all 0.3s ease; |
| cursor: move; |
| } |
| |
| .scene-card:hover { |
| transform: scale(1.02); |
| box-shadow: 0 10px 30px rgba(0,0,0,0.1); |
| } |
| |
| .scene-card.dragging { |
| opacity: 0.5; |
| transform: scale(0.95); |
| } |
| |
| .timeline-track { |
| background: repeating-linear-gradient(90deg, #e5e7eb, #e5e7eb 1px, transparent 1px, transparent 50px); |
| } |
| |
| .preview-window { |
| background: #000; |
| } |
| |
| .tool-button { |
| transition: all 0.2s ease; |
| } |
| |
| .tool-button:hover { |
| background: rgba(147, 51, 234, 0.1); |
| color: #9333ea; |
| } |
| |
| .tool-button.active { |
| background: #9333ea; |
| color: white; |
| } |
| |
| .fade-in { |
| animation: fadeIn 0.5s ease; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| |
| <header class="bg-white shadow-sm border-b"> |
| <div class="px-6 py-3 flex justify-between items-center"> |
| <div class="flex items-center gap-4"> |
| <a href="dashboard.html" class="text-gray-600 hover:text-gray-800"> |
| <i data-feather="arrow-right" class="w-6 h-6"></i> |
| </a> |
| <div> |
| <h1 class="text-xl font-bold">إنشاء فيديو جديد</h1> |
| <p class="text-xs text-gray-600">تم الحفظ تلقائياً منذ 5 ثواني</p> |
| </div> |
| </div> |
| <div class="flex items-center gap-3"> |
| <button class="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition"> |
| <i data-feather="save" class="w-5 h-5 inline"></i> |
| حفظ |
| </button> |
| <button onclick="previewVideo()" class="px-4 py-2 bg-gray-800 text-white rounded-lg font-bold hover:bg-gray-900 transition"> |
| <i data-feather="eye" class="w-5 h-5 inline"></i> |
| معاينة |
| </button> |
| <button onclick="exportVideo()" class="px-4 py-2 bg-purple-600 text-white rounded-lg font-bold hover:bg-purple-700 transition"> |
| <i data-feather="download" class="w-5 h-5 inline"></i> |
| تصدير |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| <div class="flex h-screen pt-14"> |
| |
| <aside class="w-20 bg-white border-l shadow-sm"> |
| <div class="p-4 space-y-2"> |
| <button class="tool-button w-12 h-12 rounded-lg flex items-center justify-center active" data-tool="select"> |
| <i data-feather="mouse-pointer" class="w-5 h-5"></i> |
| </button> |
| <button class="tool-button w-12 h-12 rounded-lg flex items-center justify-center" data-tool="text"> |
| <i data-feather="type" class="w-5 h-5"></i> |
| </button> |
| <button class="tool-button w-12 h-12 rounded-lg flex items-center justify-center" data-tool="sticker"> |
| <i data-feather="smile" class="w-5 h-5"></i> |
| </button> |
| <button class="tool-button w-12 h-12 rounded-lg flex items-center justify-center" data-tool="image"> |
| <i data-feather="image" class="w-5 h-5"></i> |
| </button> |
| <button class="tool-button w-12 h-12 rounded-lg flex items-center justify-center" data-tool="audio"> |
| <i data-feather="volume-2" class="w-5 h-5"></i> |
| </button> |
| <button class="tool-button w-12 h-12 rounded-lg flex items-center justify-center" data-tool="transition"> |
| <i data-feather="shuffle" class="w-5 h-5"></i> |
| </button> |
| <div class="border-t pt-2"> |
| <button class="tool-button w-12 h-12 rounded-lg flex items-center justify-center" data-tool="cut"> |
| <i data-feather="scissors" class="w-5 h-5"></i> |
| </button> |
| <button class="tool-button w-12 h-12 rounded-lg flex items-center justify-center" data-tool="copy"> |
| <i data-feather="copy" class="w-5 h-5"></i> |
| </button> |
| <button class="tool-button w-12 h-12 rounded-lg flex items-center justify-center" data-tool="delete"> |
| <i data-feather="trash-2" class="w-5 h-5"></i> |
| </button> |
| </div> |
| </div> |
| </aside> |
|
|
| |
| <main class="flex-1 overflow-hidden flex flex-col"> |
| |
| <div class="bg-white border-b p-4"> |
| <div class="max-w-4xl mx-auto"> |
| <label class="block text-sm font-bold mb-2">النص أو السكربت</label> |
| <textarea id="scriptText" class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600" rows="3" placeholder="اكتب نصك هنا...">فيديو تعليمي عن أهمية التسويق الرقمي في العصر الحديث. سنستعرض أفضل الاستراتيجيات التي يمكن تطبيقها لنجاح أي مشروع تجاري.</textarea> |
| <div class="flex gap-2 mt-2"> |
| <button onclick="generateScenes()" class="text-sm bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition"> |
| <i data-feather="zap" class="w-4 h-4 inline"></i> |
| توليد مشاهد تلقائي |
| </button> |
| <button onclick="translateText()" class="text-sm bg-gray-200 text-gray-800 px-4 py-2 rounded-lg hover:bg-gray-300 transition"> |
| <i data-feather="globe" class="w-4 h-4 inline"></i> |
| ترجمة |
| </button> |
| <button onclick="generateVoice()" class="text-sm bg-gray-200 text-gray-800 px-4 py-2 rounded-lg hover:bg-gray-300 transition"> |
| <i data-feather="mic" class="w-4 h-4 inline"></i> |
| توليد صوت |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="flex-1 flex p-4 gap-4 overflow-hidden"> |
| |
| <div class="flex-1 flex flex-col"> |
| <div class="flex-1 bg-white rounded-xl shadow-sm p-4 flex flex-col"> |
| <div class="flex items-center justify-between mb-4"> |
| <h3 class="font-bold">المعاينة</h3> |
| <div class="flex gap-2"> |
| <button class="p-2 text-gray-600 hover:bg-gray-100 rounded"> |
| <i data-feather="maximize" class="w-4 h-4"></i> |
| </button> |
| <button class="p-2 text-gray-600 hover:bg-gray-100 rounded"> |
| <i data-feather="volume-x" class="w-4 h-4"></i> |
| </button> |
| </div> |
| </div> |
| <div class="preview-window flex-1 rounded-lg flex items-center justify-center relative"> |
| <img src="https://static.photos/technology/640x360/5" alt="Preview" class="w-full h-full object-cover rounded-lg"> |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <button onclick="playPause()" class="bg-white bg-opacity-90 rounded-full p-4 hover:bg-opacity-100 transition"> |
| <i data-feather="play" class="w-8 h-8 text-purple-600"></i> |
| </button> |
| </div> |
| |
| <div class="absolute bottom-4 left-4 right-4 text-white text-center"> |
| <h2 class="text-2xl font-bold mb-2 drop-shadow-lg">عنوان الفيديو</h2> |
| <p class="text-lg drop-shadow">نص توضيحي يظهر على الفيديو</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-sm p-4 mt-4"> |
| <div class="flex items-center gap-4 mb-3"> |
| <button class="p-2 hover:bg-gray-100 rounded"> |
| <i data-feather="play" class="w-5 h-5"></i> |
| </button> |
| <div class="flex-1 text-center text-sm text-gray-600"> |
| 00:15 / 01:30 |
| </div> |
| </div> |
| <div class="timeline-track h-24 rounded border relative overflow-hidden"> |
| |
| <div class="absolute h-full flex gap-1 p-1" style="right: 0;"> |
| <div class="bg-purple-500 rounded flex-1 flex items-center justify-center text-white text-xs"> |
| المشهد 1 |
| </div> |
| <div class="bg-blue-500 rounded flex-1 flex items-center justify-center text-white text-xs"> |
| المشهد 2 |
| </div> |
| <div class="bg-green-500 rounded flex-1 flex items-center justify-center text-white text-xs"> |
| المشهد 3 |
| </div> |
| </div> |
| </div> |
| <div class="flex items-center gap-2 mt-2 text-sm text-gray-600"> |
| <button class="hover:text-gray-800"> |
| <i data-feather="zoom-out" class="w-4 h-4 inline"></i> |
| </button> |
| <span>50%</span> |
| <button class="hover:text-gray-800"> |
| <i data-feather="zoom-in" class="w-4 h-4 inline"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="w-96 bg-white rounded-xl shadow-sm p-4"> |
| <div class="flex items-center justify-between mb-4"> |
| <h3 class="font-bold">المشاهد</h3> |
| <button onclick="addScene()" class="text-purple-600 hover:bg-purple-50 p-2 rounded transition"> |
| <i data-feather="plus" class="w-5 h-5"></i> |
| </button> |
| </div> |
| <div class="space-y-3 overflow-y-auto max-h-[600px]"> |
| |
| <div class="scene-card bg-gray-50 rounded-lg p-4 border-2 border-transparent hover:border-purple-600"> |
| <div class="flex items-start gap-3"> |
| <div class="w-20 h-14 bg-gray-200 rounded-lg overflow-hidden flex-shrink-0"> |
| <img src="https://static.photos/technology/80x56/1" alt="Scene" class="w-full h-full object-cover"> |
| </div> |
| <div class="flex-1"> |
| <div class="flex items-center gap-2 mb-1"> |
| <span class="font-bold text-sm">المشهد 1</span> |
| <span class="text-xs text-gray-600">00:00 - 00:15</span> |
| </div> |
| <p class="text-sm text-gray-700">فيديو تعليمي عن أهمية التسويق الرقمي في العصر الحديث.</p> |
| <div class="flex gap-2 mt-2"> |
| <button class="text-xs bg-white px-2 py-1 rounded hover:bg-gray-100"> |
| <i data-feather="edit-2" class="w-3 h-3 inline"></i> |
| </button> |
| <button class="text-xs bg-white px-2 py-1 rounded hover:bg-gray-100"> |
| <i data-feather="copy" class="w-3 h-3 inline"></i> |
| </button> |
| <button class="text-xs bg-white px-2 py-1 rounded hover:bg-gray-100"> |
| <i data-feather="trash-2" class="w-3 h-3 inline"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="scene-card bg-gray-50 rounded-lg p-4 border-2 border-transparent hover:border-purple-600"> |
| <div class="flex items-start gap-3"> |
| <div class="w-20 h-14 bg-gray-200 rounded-lg overflow-hidden flex-shrink-0"> |
| <img src="https://static.photos/technology/80x56/2" alt="Scene" class="w-full h-full object-cover"> |
| </div> |
| <div class="flex-1"> |
| <div class="flex items-center gap-2 mb-1"> |
| <span class="font-bold text-sm">المشهد 2</span> |
| <span class="text-xs text-gray-600">00:15 - 00:30</span> |
| </div> |
| <p class="text-sm text-gray-700">سنستعرض أفضل الاستراتيجيات التي يمكن تطبيقها لنجاح أي مشروع.</p> |
| <div class="flex gap-2 mt-2"> |
| <button class="text-xs bg-white px-2 py-1 rounded hover:bg-gray-100"> |
| <i data-feather="edit-2" class="w-3 h-3 inline"></i> |
| </button> |
| <button class="text-xs bg-white px-2 py-1 rounded hover:bg-gray-100"> |
| <i data-feather="copy" class="w-3 h-3 inline"></i> |
| </button> |
| <button class="text-xs bg-white px-2 py-1 rounded hover:bg-gray-100"> |
| <i data-feather="trash-2" class="w-3 h-3 inline"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="scene-card bg-gray-50 rounded-lg p-4 border-2 border-transparent hover:border-purple-600"> |
| <div class="flex items-start gap-3"> |
| <div class="w-20 h-14 bg-gray-200 rounded-lg overflow-hidden flex-shrink-0"> |
| <img src="https://static.photos/technology/80x56/3" alt="Scene" class="w-full h-full object-cover"> |
| </div> |
| <div class="flex-1"> |
| <div class="flex items-center gap-2 mb-1"> |
| <span class="font-bold text-sm">المشهد 3</span> |
| <span class="text-xs text-gray-600">00:30 - 00:45</span> |
| </div> |
| <p class="text-sm text-gray-700">التجاري والنمو المستمر في السوق الرقمي.</p> |
| <div class="flex gap-2 mt-2"> |
| <button class="text-xs bg-white px-2 py-1 rounded hover:bg-gray-100"> |
| <i data-feather="edit-2" class="w-3 h-3 inline"></i> |
| </button> |
| <button class="text-xs bg-white px-2 py-1 rounded hover:bg-gray-100"> |
| <i data-feather="copy" class="w-3 h-3 inline"></i> |
| </button> |
| <button class="text-xs bg-white px-2 py-1 rounded hover:bg-gray-100"> |
| <i data-feather="trash-2" class="w-3 h-3 inline"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <aside class="w-80 bg-white border-r shadow-sm overflow-y-auto"> |
| <div class="p-4"> |
| <h3 class="font-bold mb-4">خصائص المشهد</h3> |
| |
| |
| <div class="mb-6"> |
| <label class="block text-sm font-bold mb-2">حجم الفيديو</label> |
| <div class="grid grid-cols-3 gap-2"> |
| <button class="p-3 border-2 border-purple-600 bg-purple-50 rounded-lg"> |
| <div class="aspect-[9/16] bg-purple-200 rounded mb-1"></div> |
| <div class="text-xs">9:16</div> |
| </button> |
| <button class="p-3 border rounded-lg hover:bg-gray-50"> |
| <div class="aspect-square bg-gray-200 rounded mb-1"></div> |
| <div class="text-xs">1:1</div> |
| </button> |
| <button class="p-3 border rounded-lg hover:bg-gray-50"> |
| <div class="aspect-[16/9] bg-gray-200 rounded mb-1"></div> |
| <div class="text-xs">16:9</div> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="mb-6"> |
| <label class="block text-sm font-bold mb-2">نص الفيديو</label> |
| <input type="text" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600" placeholder="عنوان الفيديو"> |
| <textarea class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600 mt-2 h-20" placeholder="نص توضيحي"></textarea> |
| </div> |
|
|
| |
| <div class="mb-6"> |
| <label class="block text-sm font-bold mb-2">الصوت</label> |
| <select class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600"> |
| <option>صوت ذكوري (فصحى)</option> |
| <option>صوت انثائي (فصحى)</option> |
| <option>صوت ذكوري (مصري)</option> |
| <option>صوت انثائي (مصري)</option> |
| <option>بدون صوت</option> |
| </select> |
| <div class="mt-2"> |
| <label class="text-sm text-gray-600">سرعة الصوت</label> |
| <input type="range" class="w-full" min="0.5" max="2" step="0.1" value="1"> |
| </div> |
| </div> |
|
|
| |
| <div class="mb-6"> |
| <label class="block text-sm font-bold mb-2">الخط</label> |
| <select class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600"> |
| <option>Tajawal</option> |
| <option>Cairo</option> |
| <option>Amiri</option> |
| <option>Scheherazade</option> |
| </select> |
| <div class="flex gap-2 mt-2"> |
| <input type="number" class="w-20 px-2 py-1 border rounded" placeholder="حجم" value="24"> |
| <input type="color" class="w-20 h-8 border rounded" value="#000000"> |
| <button class="px-2 py-1 border rounded hover:bg-gray-50"> |
| <i data-feather="bold" class="w-4 h-4"></i> |
| </button> |
| <button class="px-2 py-1 border rounded hover:bg-gray-50"> |
| <i data-feather="italic" class="w-4 h-4"></i> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="mb-6"> |
| <label class="block text-sm font-bold mb-2">موسيقى خلفية</label> |
| <div class="space-y-2"> |
| <div class="flex items-center justify-between p-2 border rounded"> |
| <div class="flex items-center gap-2"> |
| <i data-feather="music" class="w-4 h-4 text-gray-600"></i> |
| <span class="text-sm">Upbeat Corporate</span> |
| </div> |
| <button class="text-gray-600 hover:text-gray-800"> |
| <i data-feather="play" class="w-4 h-4"></i> |
| </button> |
| </div> |
| <button class="w-full text-sm text-purple-600 hover:bg-purple-50 p-2 rounded border border-purple-600"> |
| <i data-feather="plus" class="w-4 h-4 inline"></i> |
| تصفح المكتبة |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="mb-6"> |
| <label class="block text-sm font-bold mb-2">الانتقالات</label> |
| <div class="grid grid-cols-3 gap-2"> |
| <button class="p-2 border rounded hover:bg-gray-50">لا شيء</button> |
| <button class="p-2 border-2 border-purple-600 bg-purple-50 rounded">تلاشي</button> |
| <button class="p-2 border rounded hover:bg-gray-50">انزلاق</button> |
| <button class="p-2 border rounded hover:bg-gray-50">تكبير</button> |
| <button class="p-2 border rounded hover:bg-gray-50">دوران</button> |
| <button class="p-2 border rounded hover:bg-gray-50">محو</button> |
| </div> |
| </div> |
|
|
| |
| <div class="mb-6"> |
| <label class="block text-sm font-bold mb-2">الفلاتر</label> |
| <div class="grid grid-cols-3 gap-2"> |
| <button class="p-2 text-xs border rounded hover:bg-gray-50">عادي</button> |
| <button class="p-2 text-xs border rounded hover:bg-gray-50">أبيض وأسود</button> |
| <button class="p-2 text-xs border rounded hover:bg-gray-50">دفء</button> |
| <button class="p-2 text-xs border rounded hover:bg-gray-50">برودة</button> |
| <button class="p-2 text-xs border rounded hover:bg-gray-50">ساطع</button> |
| <button class="p-2 text-xs border rounded hover:bg-gray-50">داكن</button> |
| </div> |
| </div> |
| </div> |
| </aside> |
| </div> |
|
|
| <script> |
| // Initialize Feather Icons |
| feather.replace(); |
| |
| // Tool Selection |
| document.querySelectorAll('.tool-button').forEach(button => { |
| button.addEventListener('click', function() { |
| document.querySelectorAll('.tool-button').forEach(b => b.classList.remove('active')); |
| this.classList.add('active'); |
| }); |
| }); |
| |
| // Generate Scenes |
| function generateScenes() { |
| const notification = document.createElement('div'); |
| notification.className = 'fixed top-20 left-4 bg-green-500 text-white px-6 py-4 rounded-lg shadow-lg z-50 fade-in'; |
| notification.innerHTML = ` |
| <div class="flex items-center gap-3"> |
| <i data-feather="check-circle" class="w-5 h-5"></i> |
| <span>تم إنشاء 3 مشاهد تلقائياً</span> |
| </div> |
| `; |
| document.body.appendChild(notification); |
| feather.replace(); |
| |
| setTimeout(() => notification.remove(), 3000); |
| } |
| |
| // Translate Text |
| function translateText() { |
| const modal = document.createElement('div'); |
| modal.className = 'fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4'; |
| modal.innerHTML = ` |
| <div class="bg-white rounded-2xl max-w-md w-full p-6"> |
| <h3 class="text-xl font-bold mb-4">ترجمة النص</h3> |
| <div class="space-y-4"> |
| <div> |
| <label class="text-sm font-bold">من لغة</label> |
| <select class="w-full px-3 py-2 border rounded-lg mt-1"> |
| <option>العربية</option> |
| <option>English</option> |
| </select> |
| </div> |
| <div> |
| <label class="text-sm font-bold">إلى لغة</label> |
| <select class="w-full px-3 py-2 border rounded-lg mt-1"> |
| <option>English</option> |
| <option>العربية</option> |
| </select> |
| </div> |
| <div class="flex gap-3"> |
| <button onclick="this.closest('.fixed').remove()" class="flex-1 bg-gray-200 text-gray-800 py-2 rounded-lg font-bold"> |
| إلغاء |
| </button> |
| <button onclick="this.closest('.fixed').remove()" class="flex-1 bg-purple-600 text-white py-2 rounded-lg font-bold"> |
| ترجمة |
| </button> |
| </div> |
| </div> |
| </div> |
| `; |
| document.body.appendChild(modal); |
| feather.replace(); |
| } |
| |
| // Generate Voice |
| function generateVoice() { |
| const notification = document.createElement('div'); |
| notification.className = 'fixed top-20 left-4 bg-blue-500 text-white px-6 py-4 rounded-lg shadow-lg z-50 fade-in'; |
| notification.innerHTML = ` |
| <div class="flex items-center gap-3"> |
| <div class="animate-spin"> |
| <i data-feather="loader" class="w-5 h-5"></i> |
| </div> |
| <span>جاري توليد الصوت...</span> |
| </div> |
| `; |
| document.body.appendChild(notification); |
| feather.replace(); |
| |
| setTimeout(() => { |
| notification.innerHTML = ` |
| <div class="flex items-center gap-3"> |
| <i data-feather="check-circle" class="w-5 h-5"></i> |
| <span>تم توليد الصوت بنجاح</span> |
| </div> |
| `; |
| feather.replace(); |
| setTimeout(() => notification.remove(), 2000); |
| }, 2000); |
| } |
| |
| // Add Scene |
| function addScene() { |
| const scenesContainer = document.querySelector('.space-y-3'); |
| const newScene = document.createElement('div'); |
| newScene.className = 'scene-card bg-gray-50 rounded-lg p-4 border-2 border-transparent hover:border-purple-600 fade-in'; |
| newScene.innerHTML = ` |
| <div class="flex items-start gap-3"> |
| <div class="w-20 h-14 bg-gray-200 rounded-lg overflow-hidden flex-shrink-0"> |
| <img src="https://static.photos/technology/80x56/${Math.floor(Math.random() * 100)}" alt="Scene" class="w-full h-full object-cover"> |
| </div> |
| <div class="flex-1"> |
| <div class="flex items-center gap-2 mb-1"> |
| <span class="font-bold text-sm">المشهد ${scenesContainer.children.length + 1}</span> |
| <span class="text-xs text-gray-600">00:45 - 01:00</span> |
| </div> |
| <p class="text-sm text-gray-700">مشهد جديد</p> |
| <div class="flex gap-2 mt-2"> |
| <button class="text-xs bg-white px-2 py-1 rounded hover:bg-gray-100"> |
| <i data-feather="edit-2" class="w-3 h-3 inline"></i> |
| </button> |
| <button class="text-xs bg-white px-2 py-1 rounded hover:bg-gray-100"> |
| <i data-feather="copy" class="w-3 h-3 inline"></i> |
| </button> |
| <button class="text-xs bg-white px-2 py-1 rounded hover:bg-gray-100"> |
| <i data-feather="trash-2" class="w-3 h-3 inline"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| `; |
| scenesContainer.insertBefore(newScene, scenesContainer.firstChild); |
| feather.replace(); |
| } |
| |
| // Preview Video |
| function previewVideo() { |
| const modal = document.createElement('div'); |
| modal.className = 'fixed inset-0 bg-black bg-opacity-90 z-50 flex items-center justify-center p-4'; |
| modal.innerHTML = ` |
| <div class="relative max-w-4xl w-full"> |
| <button onclick="this.closest('.fixed').remove()" class="absolute -top-12 left-0 text-white"> |
| <i data-feather="x" class="w-8 h-8"></i> |
| </button> |
| <div class="bg-black rounded-lg aspect-video flex items-center justify-center"> |
| <img src="https://static.photos/technology/1024x576/10" alt="Preview" class="w-full h-full object-contain"> |
| </div> |
| <div class="flex items-center justify-center gap-4 mt-4"> |
| <button class="text-white hover:text-gray-300"> |
| <i data-feather="skip-back" class="w-6 h-6"></i> |
| </button> |
| <button class="text-white hover:text-gray-300"> |
| <i data-feather="play" class="w-8 h-8"></i> |
| </button> |
| <button class="text-white hover:text-gray-300"> |
| <i data-feather="skip-forward" class="w-6 h-6"></i> |
| </button> |
| </div> |
| </div> |
| `; |
| document.body.appendChild(modal); |
| feather.replace(); |
| } |
| |
| // Export Video |
| function exportVideo() { |
| const modal = document.createElement('div'); |
| modal.className = 'fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4'; |
| modal.innerHTML = ` |
| <div class="bg-white rounded-2xl max-w-md w-full p-6"> |
| <h3 class="text-xl font-bold mb-4">تصدير الفيديو</h3> |
| <div class="space-y-4"> |
| <div> |
| <label class="text-sm font-bold">جودة الفيديو</label> |
| <select class="w-full px-3 py-2 border rounded-lg mt-1"> |
| <option>720p (HD)</option> |
| <option>1080p (Full HD) - للمشتركين</option> |
| <option>4K (Ultra HD) - للمشتركين</option> |
| </select> |
| </div> |
| <div> |
| <label class="text-sm font-bold">صيغة الملف</label> |
| <select class="w-full px-3 py-2 border rounded-lg mt-1"> |
| <option>MP4</option> |
| <option>MOV</option> |
| <option>WebM</option> |
| </select> |
| </div> |
| <div class="flex gap-3"> |
| <button onclick="this.closest('.fixed').remove()" class="flex-1 bg-gray-200 text-gray-800 py-2 rounded-lg font-bold"> |
| إلغاء |
| </button> |
| <button onclick="startExport()" class="flex-1 bg-purple-600 text-white py-2 rounded-lg font-bold"> |
| بدء التصدير |
| </button> |
| </div> |
| </div> |
| </div> |
| `; |
| document.body.appendChild(modal); |
| feather.replace(); |
| } |
| |
| function startExport() { |
| document.querySelector('.fixed').remove(); |
| const notification = document.createElement('div'); |
| notification.className = 'fixed top-20 left-4 bg-green-500 text-white px-6 py-4 rounded-lg shadow-lg z-50 fade-in'; |
| notification.innerHTML = ` |
| <div class="flex items-center gap-3"> |
| <div class="animate-spin"> |
| <i data-feather="loader" class="w-5 h-5"></i> |
| </div> |
| <span>جاري تصدير الفيديو...</span> |
| </div> |
| `; |
| document.body.appendChild(notification); |
| feather.replace(); |
| |
| setTimeout(() => { |
| notification.innerHTML = ` |
| <div class="flex items-center gap-3"> |
| <i data-feather="download" class="w-5 h-5"></i> |
| <span>اكتمل التصدير! جاري التحميل...</span> |
| </div> |
| `; |
| feather.replace(); |
| setTimeout(() => notification.remove(), 3000); |
| }, 3000); |
| } |
| |
| // Play/Pause |
| let isPlaying = false; |
| function playPause() { |
| const playButton = document.querySelector('.preview-window button i'); |
| isPlaying = !isPlaying; |
| playButton.setAttribute('data-feather', isPlaying ? 'pause' : 'play'); |
| feather.replace(); |
| } |
| |
| // Auto-save |
| setInterval(() => { |
| const saveIndicator = document.querySelector('.text-xs.text-gray-600'); |
| if (saveIndicator) { |
| saveIndicator.textContent = 'تم الحفظ الآن'; |
| setTimeout(() => { |
| saveIndicator.textContent = 'تم الحفظ تلقائياً الآن'; |
| }, 2000); |
| } |
| }, 30000); |
| </script> |
| </body> |
| </html> |
|
|
