Download create.html from Djebbi/bith: direct link, hf CLI and curl.
- Browser
- Download file 37.1 kB
-
https://huggingface.co/spaces/Djebbi/bith/resolve/main/create.html
- Command line
-
hf download hf://spaces/Djebbi/bith/create.html
-
curl -L -o create.html https://huggingface.co/spaces/Djebbi/bith/resolve/main/create.html
37.1 kB
| <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"> | |
| <!-- Top Header --> | |
| <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"> | |
| <!-- Left Sidebar - Tools --> | |
| <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 Content Area --> | |
| <main class="flex-1 overflow-hidden flex flex-col"> | |
| <!-- Text Input Area --> | |
| <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> | |
| <!-- Preview Area --> | |
| <div class="flex-1 flex p-4 gap-4 overflow-hidden"> | |
| <!-- Video Preview --> | |
| <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> | |
| <!-- Overlay Elements --> | |
| <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> | |
| <!-- Timeline --> | |
| <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"> | |
| <!-- Timeline Scenes --> | |
| <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> | |
| <!-- Scenes Panel --> | |
| <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]"> | |
| <!-- Scene 1 --> | |
| <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> | |
| <!-- Scene 2 --> | |
| <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> | |
| <!-- Scene 3 --> | |
| <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> | |
| <!-- Right Sidebar - Properties --> | |
| <aside class="w-80 bg-white border-r shadow-sm overflow-y-auto"> | |
| <div class="p-4"> | |
| <h3 class="font-bold mb-4">خصائص المشهد</h3> | |
| <!-- Aspect Ratio --> | |
| <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> | |
| <!-- Text Properties --> | |
| <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> | |
| <!-- Voice Settings --> | |
| <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> | |
| <!-- Font Settings --> | |
| <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> | |
| <!-- Background Music --> | |
| <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> | |
| <!-- Transitions --> | |
| <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> | |
| <!-- Filters --> | |
| <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> | |
| </script> | |
| </body> | |
| </html> | |