|
|
<!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> |
|
|
|
