|
|
<!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; |
|
|
} |
|
|
|
|
|
.sidebar-item { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.sidebar-item:hover { |
|
|
background: rgba(147, 51, 234, 0.1); |
|
|
border-right: 4px solid #9333ea; |
|
|
} |
|
|
|
|
|
.video-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.video-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
.progress-bar { |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.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"> |
|
|
<div class="flex h-screen"> |
|
|
|
|
|
<aside class="w-64 bg-white shadow-lg"> |
|
|
<div class="p-6 border-b"> |
|
|
<div class="flex items-center space-x-reverse space-x-2"> |
|
|
<div class="w-10 h-10 bg-purple-600 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="video" class="w-6 h-6 text-white"></i> |
|
|
</div> |
|
|
<span class="text-xl font-bold">صانع مجاني</span> |
|
|
</div> |
|
|
</div> |
|
|
<nav class="p-4"> |
|
|
<ul class="space-y-2"> |
|
|
<li> |
|
|
<a href="#" class="sidebar-item flex items-center gap-3 p-3 rounded-lg text-gray-700 hover:text-purple-600"> |
|
|
<i data-feather="home" class="w-5 h-5"></i> |
|
|
<span> الرئيسية</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="sidebar-item flex items-center gap-3 p-3 rounded-lg bg-purple-50 text-purple-600 border-r-4 border-purple-600"> |
|
|
<i data-feather="video" class="w-5 h-5"></i> |
|
|
<span>فيديوهاتي</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="sidebar-item flex items-center gap-3 p-3 rounded-lg text-gray-700 hover:text-purple-600"> |
|
|
<i data-feather="plus-circle" class="w-5 h-5"></i> |
|
|
<span>إنشاء جديد</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="sidebar-item flex items-center gap-3 p-3 rounded-lg text-gray-700 hover:text-purple-600"> |
|
|
<i data-feather="layers" class="w-5 h-5"></i> |
|
|
<span>القوالب</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="sidebar-item flex items-center gap-3 p-3 rounded-lg text-gray-700 hover:text-purple-600"> |
|
|
<i data-feather="music" class="w-5 h-5"></i> |
|
|
<span>المكتبة الصوتية</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="sidebar-item flex items-center gap-3 p-3 rounded-lg text-gray-700 hover:text-purple-600"> |
|
|
<i data-feather="image" class="w-5 h-5"></i> |
|
|
<span>الصور والمشاهد</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="sidebar-item flex items-center gap-3 p-3 rounded-lg text-gray-700 hover:text-purple-600"> |
|
|
<i data-feather="cloud" class="w-5 h-5"></i> |
|
|
<span>التخزين</span> |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</nav> |
|
|
<div class="absolute bottom-0 w-full p-4 border-t"> |
|
|
<div class="bg-gradient-to-r from-purple-600 to-purple-800 rounded-lg p-4 text-white"> |
|
|
<div class="flex items-center gap-3 mb-3"> |
|
|
<i data-feather="gift" class="w-6 h-6"></i> |
|
|
<span class="font-bold">ترقية للداعم</span> |
|
|
</div> |
|
|
<p class="text-sm mb-3 opacity-90">احصل على 50GB تخزين و 4K جودة</p> |
|
|
<button class="w-full bg-white text-purple-600 py-2 rounded-lg font-bold text-sm hover:bg-gray-100 transition"> |
|
|
ترقية الآن |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</aside> |
|
|
|
|
|
|
|
|
<main class="flex-1 overflow-y-auto"> |
|
|
|
|
|
<header class="bg-white shadow-sm"> |
|
|
<div class="px-6 py-4 flex justify-between items-center"> |
|
|
<div> |
|
|
<h1 class="text-2xl font-bold">فيديوهاتي</h1> |
|
|
<p class="text-gray-600 text-sm mt-1">إدارة وتعديل جميع فيديوهاتك</p> |
|
|
</div> |
|
|
<div class="flex items-center gap-4"> |
|
|
<button onclick="showNewProjectModal()" class="bg-purple-600 text-white px-4 py-2 rounded-lg font-bold hover:bg-purple-700 transition flex items-center gap-2"> |
|
|
<i data-feather="plus" class="w-5 h-5"></i> |
|
|
مشروع جديد |
|
|
</button> |
|
|
<div class="relative"> |
|
|
<button class="relative p-2 text-gray-600 hover:text-gray-800"> |
|
|
<i data-feather="bell" class="w-6 h-6"></i> |
|
|
<span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span> |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex items-center gap-3"> |
|
|
<img src="https://static.photos/people/40x40/1" alt="Profile" class="w-10 h-10 rounded-full"> |
|
|
<div> |
|
|
<div class="font-bold">أحمد محمد</div> |
|
|
<div class="text-xs text-gray-600">مجاني</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="p-6"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8"> |
|
|
<div class="bg-white rounded-xl p-6 shadow-sm fade-in"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="video" class="w-6 h-6 text-purple-600"></i> |
|
|
</div> |
|
|
<span class="text-sm text-green-600 font-bold">+12%</span> |
|
|
</div> |
|
|
<div class="text-2xl font-bold">24</div> |
|
|
<div class="text-gray-600 text-sm">إجمالي الفيديوهات</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-xl p-6 shadow-sm fade-in" style="animation-delay: 0.1s"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="eye" class="w-6 h-6 text-blue-600"></i> |
|
|
</div> |
|
|
<span class="text-sm text-green-600 font-bold">+28%</span> |
|
|
</div> |
|
|
<div class="text-2xl font-bold">15.2K</div> |
|
|
<div class="text-gray-600 text-sm">مشاهدات إجمالية</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-xl p-6 shadow-sm fade-in" style="animation-delay: 0.2s"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="trending-up" class="w-6 h-6 text-green-600"></i> |
|
|
</div> |
|
|
<span class="text-sm text-green-600 font-bold">+5%</span> |
|
|
</div> |
|
|
<div class="text-2xl font-bold">3.2K</div> |
|
|
<div class="text-gray-600 text-sm">تفاعلات</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-xl p-6 shadow-sm fade-in" style="animation-delay: 0.3s"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="hard-drive" class="w-6 h-6 text-orange-600"></i> |
|
|
</div> |
|
|
<span class="text-sm text-gray-600 font-bold">60%</span> |
|
|
</div> |
|
|
<div class="text-2xl font-bold">3GB / 5GB</div> |
|
|
<div class="text-gray-600 text-sm">مساحة التخزين</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl p-4 shadow-sm mb-6"> |
|
|
<div class="flex flex-wrap gap-4 items-center justify-between"> |
|
|
<div class="flex gap-2"> |
|
|
<button class="px-4 py-2 bg-purple-600 text-white rounded-lg font-bold">الكل</button> |
|
|
<button class="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition">منشور</button> |
|
|
<button class="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition">مسودة</button> |
|
|
<button class="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition">قيد المعالجة</button> |
|
|
</div> |
|
|
<div class="flex gap-2"> |
|
|
<select class="px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600"> |
|
|
<option>الأحدث أولاً</option> |
|
|
<option>الأقدم أولاً</option> |
|
|
<option>الأكثر مشاهدة</option> |
|
|
<option>الأقل مشاهدة</option> |
|
|
</select> |
|
|
<button class="p-2 border rounded-lg hover:bg-gray-50 transition"> |
|
|
<i data-feather="grid" class="w-5 h-5"></i> |
|
|
</button> |
|
|
<button class="p-2 border rounded-lg hover:bg-gray-50 transition"> |
|
|
<i data-feather="list" class="w-5 h-5"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6"> |
|
|
|
|
|
<div class="video-card bg-white rounded-xl overflow-hidden shadow-sm"> |
|
|
<div class="relative"> |
|
|
<img src="https://static.photos/technology/320x180/1" alt="Video" class="w-full h-40 object-cover"> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-30 transition flex items-center justify-center"> |
|
|
<button class="opacity-0 hover:opacity-100 transition bg-white rounded-full p-3"> |
|
|
<i data-feather="play" class="w-6 h-6 text-purple-600"></i> |
|
|
</button> |
|
|
</div> |
|
|
<span class="absolute bottom-2 right-2 bg-black bg-opacity-75 text-white text-xs px-2 py-1 rounded">2:45</span> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold mb-2">مقدمة في الذكاء الاصطناعي</h3> |
|
|
<div class="flex items-center justify-between text-sm text-gray-600 mb-3"> |
|
|
<span>منذ يومين</span> |
|
|
<div class="flex items-center gap-2"> |
|
|
<i data-feather="eye" class="w-4 h-4"></i> |
|
|
<span>1.2K</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex gap-2"> |
|
|
<button class="flex-1 text-sm bg-gray-100 py-2 rounded-lg hover:bg-gray-200 transition"> |
|
|
<i data-feather="edit-2" class="w-4 h-4 inline"></i> |
|
|
تعديل |
|
|
</button> |
|
|
<button class="flex-1 text-sm bg-gray-100 py-2 rounded-lg hover:bg-gray-200 transition"> |
|
|
<i data-feather="share-2" class="w-4 h-4 inline"></i> |
|
|
مشاركة |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="video-card bg-white rounded-xl overflow-hidden shadow-sm"> |
|
|
<div class="relative"> |
|
|
<img src="https://static.photos/technology/320x180/2" alt="Video" class="w-full h-40 object-cover"> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> |
|
|
<div class="text-center text-white"> |
|
|
<div class="animate-spin mb-2"> |
|
|
<i data-feather="loader" class="w-8 h-8 mx-auto"></i> |
|
|
</div> |
|
|
<div class="text-sm">جاري المعالجة</div> |
|
|
<div class="w-full bg-white bg-opacity-20 rounded-full h-2 mt-2"> |
|
|
<div class="bg-green-500 h-2 rounded-full progress-bar" style="width: 65%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold mb-2">تقنيات التسويق الرقمي</h3> |
|
|
<div class="flex items-center justify-between text-sm text-gray-600 mb-3"> |
|
|
<span>قيد المعالجة</span> |
|
|
<span class="text-purple-600">65%</span> |
|
|
</div> |
|
|
<button class="w-full text-sm bg-gray-100 py-2 rounded-lg hover:bg-gray-200 transition"> |
|
|
<i data-feather="pause" class="w-4 h-4 inline"></i> |
|
|
إيقاف المعالجة |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="video-card bg-white rounded-xl overflow-hidden shadow-sm"> |
|
|
<div class="relative"> |
|
|
<img src="https://static.photos/technology/320x180/3" alt="Video" class="w-full h-40 object-cover"> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-30 transition flex items-center justify-center"> |
|
|
<button class="opacity-0 hover:opacity-100 transition bg-white rounded-full p-3"> |
|
|
<i data-feather="play" class="w-6 h-6 text-purple-600"></i> |
|
|
</button> |
|
|
</div> |
|
|
<span class="absolute bottom-2 right-2 bg-black bg-opacity-75 text-white text-xs px-2 py-1 rounded">5:12</span> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold mb-2">كيفية بناء علامة تجارية</h3> |
|
|
<div class="flex items-center justify-between text-sm text-gray-600 mb-3"> |
|
|
<span>منذ أسبوع</span> |
|
|
<div class="flex items-center gap-2"> |
|
|
<i data-feather="eye" class="w-4 h-4"></i> |
|
|
<span>856</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex gap-2"> |
|
|
<button class="flex-1 text-sm bg-gray-100 py-2 rounded-lg hover:bg-gray-200 transition"> |
|
|
<i data-feather="edit-2" class="w-4 h-4 inline"></i> |
|
|
تعديل |
|
|
</button> |
|
|
<button class="flex-1 text-sm bg-gray-100 py-2 rounded-lg hover:bg-gray-200 transition"> |
|
|
<i data-feather="share-2" class="w-4 h-4 inline"></i> |
|
|
مشاركة |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="video-card bg-white rounded-xl overflow-hidden shadow-sm"> |
|
|
<div class="relative"> |
|
|
<img src="https://static.photos/technology/320x180/4" alt="Video" class="w-full h-40 object-cover"> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-30 transition flex items-center justify-center"> |
|
|
<button class="opacity-0 hover:opacity-100 transition bg-white rounded-full p-3"> |
|
|
<i data-feather="play" class="w-6 h-6 text-purple-600"></i> |
|
|
</button> |
|
|
</div> |
|
|
<span class="absolute top-2 left-2 bg-yellow-500 text-white text-xs px-2 py-1 rounded">مسودة</span> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold mb-2">أساسيات التصوير الفوتوغرافي</h3> |
|
|
<div class="flex items-center justify-between text-sm text-gray-600 mb-3"> |
|
|
<span>منذ 3 أيام</span> |
|
|
<div class="flex items-center gap-2"> |
|
|
<i data-feather="eye" class="w-4 h-4"></i> |
|
|
<span>0</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex gap-2"> |
|
|
<button class="flex-1 text-sm bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition"> |
|
|
<i data-feather="play" class="w-4 h-4 inline"></i> |
|
|
استكمال |
|
|
</button> |
|
|
<button class="flex-1 text-sm bg-gray-100 py-2 rounded-lg hover:bg-gray-200 transition"> |
|
|
<i data-feather="trash-2" class="w-4 h-4 inline"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="text-center mt-8"> |
|
|
<button class="bg-purple-600 text-white px-6 py-3 rounded-lg font-bold hover:bg-purple-700 transition"> |
|
|
المزيد من الفيديوهات |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="newProjectModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4"> |
|
|
<div class="bg-white rounded-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"> |
|
|
<div class="p-6 border-b"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<h3 class="text-2xl font-bold">إنشاء فيديو جديد</h3> |
|
|
<button onclick="closeNewProjectModal()" class="text-gray-500 hover:text-gray-700"> |
|
|
<i data-feather="x" class="w-6 h-6"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="grid grid-cols-3 gap-4"> |
|
|
<button onclick="createFromText()" class="p-6 border-2 border-purple-600 rounded-lg hover:bg-purple-50 transition"> |
|
|
<i data-feather="type" class="w-8 h-8 text-purple-600 mx-auto mb-3"></i> |
|
|
<div class="font-bold">من نص</div> |
|
|
<div class="text-sm text-gray-600 mt-1">حول نص إلى فيديو</div> |
|
|
</button> |
|
|
<button class="p-6 border rounded-lg hover:bg-gray-50 transition"> |
|
|
<i data-feather="upload" class="w-8 h-8 text-gray-600 mx-auto mb-3"></i> |
|
|
<div class="font-bold">رفع فيديو</div> |
|
|
<div class="text-sm text-gray-600 mt-1">حرر فيديو موجود</div> |
|
|
</button> |
|
|
<button class="p-6 border rounded-lg hover:bg-gray-50 transition"> |
|
|
<i data-feather="layers" class="w-8 h-8 text-gray-600 mx-auto mb-3"></i> |
|
|
<div class="font-bold">من قالب</div> |
|
|
<div class="text-sm text-gray-600 mt-1">استخدم قالب جاهز</div> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
function showNewProjectModal() { |
|
|
document.getElementById('newProjectModal').classList.remove('hidden'); |
|
|
feather.replace(); |
|
|
} |
|
|
|
|
|
|
|
|
function closeNewProjectModal() { |
|
|
document.getElementById('newProjectModal').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
function createFromText() { |
|
|
closeNewProjectModal(); |
|
|
|
|
|
window.location.href = 'create.html'; |
|
|
} |
|
|
|
|
|
|
|
|
let progress = 65; |
|
|
setInterval(() => { |
|
|
if (progress < 100) { |
|
|
progress += Math.random() * 5; |
|
|
progress = Math.min(progress, 100); |
|
|
const progressBar = document.querySelector('.progress-bar'); |
|
|
if (progressBar) { |
|
|
progressBar.style.width = progress + '%'; |
|
|
if (progress >= 100) { |
|
|
|
|
|
setTimeout(() => location.reload(), 1000); |
|
|
} |
|
|
} |
|
|
} |
|
|
}, 2000); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
