Hugging Face's logo

Spaces:
bdr11
/
ws
Running

App Files Community
ws / index.html
bdr11's picture
bdr11
دخل عنوان URL الخاص ب Hugging Face Space لاستيراد مشروع موجود. - Follow Up Deployment
53826d1 verified
Raw History Blame Contribute Delete
29.9 kB
<!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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
#importModal {
transition: opacity 0.3s ease;
}
.chart-container {
height: 400px;
background: #1e293b;
border-radius: 0.5rem;
position: relative;
overflow: hidden;
}
.chart-placeholder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #64748b;
font-size: 1.2rem;
}
.trading-card {
transition: all 0.3s ease;
}
.trading-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
.progress-bar {
height: 6px;
border-radius: 3px;
background: #334155;
overflow: hidden;
}
.progress-fill {
height: 100%;
border-radius: 3px;
transition: width 0.3s ease;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.animate-pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
</style>
</head>
<body class="bg-slate-900 text-slate-100 font-sans">
<div class="container mx-auto px-4 py-6">
<!-- Header -->
<header class="flex flex-col md:flex-row justify-between items-center mb-8">
<div class="flex items-center mb-4 md:mb-0">
<i class="fas fa-robot text-emerald-400 text-3xl mr-3"></i>
<h1 class="text-2xl font-bold text-emerald-400">نظام التداول الآلي الذكي</h1>
</div>
<div class="flex items-center space-x-4 space-x-reverse">
<div class="relative">
<select class="bg-slate-800 border border-slate-700 rounded-lg px-4 py-2 pr-8 appearance-none focus:outline-none focus:ring-2 focus:ring-emerald-500">
<option>حساب التداول 1</option>
<option>حساب التداول 2</option>
<option>حساب التداول 3</option>
</select>
<i class="fas fa-chevron-down absolute left-3 top-3 text-slate-400 pointer-events-none"></i>
</div>
<button class="bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-lg flex items-center transition-colors mr-2">
<i class="fas fa-plus mr-2"></i>
إضافة استراتيجية
</button>
<button onclick="openImportModal()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center transition-colors">
<i class="fas fa-file-import mr-2"></i>
استيراد مشروع
</button>
</div>
</header>
<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
<div class="bg-slate-800 rounded-xl p-6 trading-card">
<div class="flex justify-between items-start">
<div>
<p class="text-slate-400 mb-1">إجمالي الربح</p>
<h3 class="text-2xl font-bold text-emerald-400">$12,458.32</h3>
</div>
<i class="fas fa-chart-line text-emerald-400 text-xl"></i>
</div>
<div class="mt-4">
<div class="flex justify-between text-sm mb-1">
<span class="text-slate-400">هذا الشهر</span>
<span class="text-emerald-400">+8.2%</span>
</div>
<div class="progress-bar">
<div class="progress-fill bg-emerald-500" style="width: 82%"></div>
</div>
</div>
</div>
<div class="bg-slate-800 rounded-xl p-6 trading-card">
<div class="flex justify-between items-start">
<div>
<p class="text-slate-400 mb-1">عدد الصفقات</p>
<h3 class="text-2xl font-bold text-blue-400">1,248</h3>
</div>
<i class="fas fa-exchange-alt text-blue-400 text-xl"></i>
</div>
<div class="mt-4">
<div class="flex justify-between text-sm mb-1">
<span class="text-slate-400">هذا الشهر</span>
<span class="text-blue-400">+12.5%</span>
</div>
<div class="progress-bar">
<div class="progress-fill bg-blue-500" style="width: 75%"></div>
</div>
</div>
</div>
<div class="bg-slate-800 rounded-xl p-6 trading-card">
<div class="flex justify-between items-start">
<div>
<p class="text-slate-400 mb-1">معدل النجاح</p>
<h3 class="text-2xl font-bold text-purple-400">76.8%</h3>
</div>
<i class="fas fa-percentage text-purple-400 text-xl"></i>
</div>
<div class="mt-4">
<div class="flex justify-between text-sm mb-1">
<span class="text-slate-400">هذا الشهر</span>
<span class="text-purple-400">+3.2%</span>
</div>
<div class="progress-bar">
<div class="progress-fill bg-purple-500" style="width: 76.8%"></div>
</div>
</div>
</div>
<div class="bg-slate-800 rounded-xl p-6 trading-card">
<div class="flex justify-between items-start">
<div>
<p class="text-slate-400 mb-1">رأس المال</p>
<h3 class="text-2xl font-bold text-amber-400">$50,000.00</h3>
</div>
<i class="fas fa-wallet text-amber-400 text-xl"></i>
</div>
<div class="mt-4">
<div class="flex justify-between text-sm mb-1">
<span class="text-slate-400">هذا الشهر</span>
<span class="text-amber-400">+24.9%</span>
</div>
<div class="progress-bar">
<div class="progress-fill bg-amber-500" style="width: 65%"></div>
</div>
</div>
</div>
</div>
<!-- Main Content -->
<div class="flex flex-col lg:flex-row gap-6">
<!-- Left Column -->
<div class="lg:w-2/3">
<!-- Chart -->
<div class="chart-container mb-6">
<div class="chart-placeholder animate-pulse">
<div class="text-center">
<i class="fas fa-chart-area text-4xl mb-2 text-slate-600"></i>
<p>جارٍ تحميل بيانات السوق...</p>
</div>
</div>
</div>
<!-- Trading Pairs -->
<div class="bg-slate-800 rounded-xl p-6 mb-6">
<div class="flex justify-between items-center mb-6">
<h2 class="text-xl font-bold">أزواج التداول النشطة</h2>
<div class="flex space-x-2 space-x-reverse">
<button class="bg-slate-700 hover:bg-slate-600 px-3 py-1 rounded-lg text-sm transition-colors">
<i class="fas fa-sync-alt mr-1"></i> تحديث
</button>
<button class="bg-emerald-600 hover:bg-emerald-700 px-3 py-1 rounded-lg text-sm transition-colors">
<i class="fas fa-filter mr-1"></i> تصفية
</button>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full">
<thead>
<tr class="text-slate-400 border-b border-slate-700">
<th class="pb-3 text-right px-4">الزوج</th>
<th class="pb-3 text-right px-4">السعر</th>
<th class="pb-3 text-right px-4">التغير (24h)</th>
<th class="pb-3 text-right px-4">الحجم</th>
<th class="pb-3 text-right px-4">الإجراءات</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-slate-700 hover:bg-slate-750">
<td class="py-4 px-4">
<div class="flex items-center justify-end">
<span class="font-medium">BTC/USDT</span>
<i class="fab fa-bitcoin text-amber-500 text-xl mr-2"></i>
</div>
</td>
<td class="py-4 px-4 text-right">$42,856.32</td>
<td class="py-4 px-4 text-right text-emerald-400">+2.45%</td>
<td class="py-4 px-4 text-right">$1.2B</td>
<td class="py-4 px-4 text-right">
<button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm transition-colors">
<i class="fas fa-chart-line mr-1"></i> تحليل
</button>
</td>
</tr>
<tr class="border-b border-slate-700 hover:bg-slate-750">
<td class="py-4 px-4">
<div class="flex items-center justify-end">
<span class="font-medium">ETH/USDT</span>
<i class="fab fa-ethereum text-purple-500 text-xl mr-2"></i>
</div>
</td>
<td class="py-4 px-4 text-right">$2,345.67</td>
<td class="py-4 px-4 text-right text-emerald-400">+1.23%</td>
<td class="py-4 px-4 text-right">$850M</td>
<td class="py-4 px-4 text-right">
<button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm transition-colors">
<i class="fas fa-chart-line mr-1"></i> تحليل
</button>
</td>
</tr>
<tr class="border-b border-slate-700 hover:bg-slate-750">
<td class="py-4 px-4">
<div class="flex items-center justify-end">
<span class="font-medium">SOL/USDT</span>
<i class="fas fa-coins text-cyan-500 text-xl mr-2"></i>
</div>
</td>
<td class="py-4 px-4 text-right">$98.76</td>
<td class="py-4 px-4 text-right text-rose-400">-0.87%</td>
<td class="py-4 px-4 text-right">$320M</td>
<td class="py-4 px-4 text-right">
<button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm transition-colors">
<i class="fas fa-chart-line mr-1"></i> تحليل
</button>
</td>
</tr>
<tr class="hover:bg-slate-750">
<td class="py-4 px-4">
<div class="flex items-center justify-end">
<span class="font-medium">XRP/USDT</span>
<i class="fas fa-coins text-slate-400 text-xl mr-2"></i>
</div>
</td>
<td class="py-4 px-4 text-right">$0.5421</td>
<td class="py-4 px-4 text-right text-emerald-400">+0.34%</td>
<td class="py-4 px-4 text-right">$280M</td>
<td class="py-4 px-4 text-right">
<button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm transition-colors">
<i class="fas fa-chart-line mr-1"></i> تحليل
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Right Column -->
<div class="lg:w-1/3">
<!-- Bot Controls -->
<div class="bg-slate-800 rounded-xl p-6 mb-6">
<h2 class="text-xl font-bold mb-6">تحكم البوت</h2>
<div class="space-y-4">
<div>
<label class="block text-slate-400 mb-2">حالة البوت</label>
<div class="flex items-center">
<div class="relative inline-block w-12 mr-3 align-middle select-none">
<input type="checkbox" id="bot-toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer transition-transform" checked/>
<label for="bot-toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-emerald-500 cursor-pointer transition-colors"></label>
</div>
<span class="text-emerald-400 font-medium">نشط</span>
</div>
</div>
<div>
<label class="block text-slate-400 mb-2">مستوى المخاطرة</label>
<select class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500">
<option>منخفض</option>
<option selected>متوسط</option>
<option>عالي</option>
<option>عدواني</option>
</select>
</div>
<div>
<label class="block text-slate-400 mb-2">استراتيجية التداول</label>
<select class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500">
<option>تتبع الاتجاه</option>
<option selected>التداول المتأرجح</option>
<option>تداول النطاق</option>
<option>تداول الاختراق</option>
</select>
</div>
<div>
<label class="block text-slate-400 mb-2">حجم الصفقة (%)</label>
<input type="range" min="1" max="100" value="15" class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-emerald-500">
<div class="flex justify-between text-sm text-slate-400 mt-1">
<span>1%</span>
<span class="text-emerald-400 font-medium">15%</span>
<span>100%</span>
</div>
</div>
<button class="w-full bg-emerald-600 hover:bg-emerald-700 text-white py-3 rounded-lg font-medium flex items-center justify-center transition-colors mt-6">
<i class="fas fa-save mr-2"></i> حفظ الإعدادات
</button>
</div>
</div>
<!-- Recent Trades -->
<div class="bg-slate-800 rounded-xl p-6">
<h2 class="text-xl font-bold mb-6">أحدث الصفقات</h2>
<div class="space-y-4">
<div class="bg-slate-750 rounded-lg p-4 border-l-4 border-emerald-500">
<div class="flex justify-between items-center mb-2">
<span class="font-medium">BTC/USDT</span>
<span class="text-xs bg-emerald-900 text-emerald-400 px-2 py-1 rounded">شراء</span>
</div>
<div class="flex justify-between text-sm text-slate-400">
<div>
<p>السعر: $42,123.45</p>
<p>الكمية: 0.05 BTC</p>
</div>
<div class="text-right">
<p>الربح: +$124.32</p>
<p>+2.1%</p>
</div>
</div>
</div>
<div class="bg-slate-750 rounded-lg p-4 border-l-4 border-rose-500">
<div class="flex justify-between items-center mb-2">
<span class="font-medium">ETH/USDT</span>
<span class="text-xs bg-rose-900 text-rose-400 px-2 py-1 rounded">بيع</span>
</div>
<div class="flex justify-between text-sm text-slate-400">
<div>
<p>السعر: $2,321.78</p>
<p>الكمية: 1.2 ETH</p>
</div>
<div class="text-right">
<p>الربح: -$32.45</p>
<p>-0.8%</p>
</div>
</div>
</div>
<div class="bg-slate-750 rounded-lg p-4 border-l-4 border-emerald-500">
<div class="flex justify-between items-center mb-2">
<span class="font-medium">SOL/USDT</span>
<span class="text-xs bg-emerald-900 text-emerald-400 px-2 py-1 rounded">شراء</span>
</div>
<div class="flex justify-between text-sm text-slate-400">
<div>
<p>السعر: $96.45</p>
<p>الكمية: 15 SOL</p>
</div>
<div class="text-right">
<p>الربح: +$45.67</p>
<p>+3.2%</p>
</div>
</div>
</div>
<button class="w-full border border-slate-700 hover:border-slate-600 text-slate-300 hover:text-white py-2 rounded-lg text-sm flex items-center justify-center transition-colors mt-4">
<i class="fas fa-history mr-2"></i> عرض جميع الصفقات
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Import Project Modal -->
<div id="importModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-slate-800 rounded-xl p-6 w-full max-w-md">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold">استيراد مشروع من Hugging Face</h3>
<button onclick="closeImportModal()" class="text-slate-400 hover:text-white">
<i class="fas fa-times"></i>
</button>
</div>
<div class="mb-4">
<label class="block text-slate-400 mb-2">رابط Hugging Face Space</label>
<input type="url" id="hfSpaceUrl" placeholder="https://huggingface.co/spaces/username/project"
class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div class="flex justify-end space-x-3 space-x-reverse">
<button onclick="closeImportModal()" class="px-4 py-2 border border-slate-600 rounded-lg hover:bg-slate-700 transition-colors">
إلغاء
</button>
<button onclick="importProject()" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors">
استيراد
</button>
</div>
</div>
</div>
<script>
// Import Modal Functions
function openImportModal() {
document.getElementById('importModal').classList.remove('hidden');
}
function closeImportModal() {
document.getElementById('importModal').classList.add('hidden');
}
function importProject() {
const url = document.getElementById('hfSpaceUrl').value;
if (!url) {
alert('الرجاء إدخال رابط Hugging Face Space');
return;
}
// Here you would typically make an API call to import the project
alert(`جارٍ استيراد المشروع من: ${url}`);
closeImportModal();
}
// Toggle switch functionality
const toggle = document.getElementById('bot-toggle');
toggle.addEventListener('change', function() {
const statusLabel = document.querySelector('label[for="bot-toggle"] + span');
if(this.checked) {
statusLabel.textContent = 'نشط';
statusLabel.classList.remove('text-rose-400');
statusLabel.classList.add('text-emerald-400');
document.querySelector('label[for="bot-toggle"]').classList.remove('bg-slate-600');
document.querySelector('label[for="bot-toggle"]').classList.add('bg-emerald-500');
} else {
statusLabel.textContent = 'متوقف';
statusLabel.classList.remove('text-emerald-400');
statusLabel.classList.add('text-rose-400');
document.querySelector('label[for="bot-toggle"]').classList.remove('bg-emerald-500');
document.querySelector('label[for="bot-toggle"]').classList.add('bg-slate-600');
}
});
// Simulate loading chart data
setTimeout(() => {
const chartPlaceholder = document.querySelector('.chart-placeholder');
chartPlaceholder.innerHTML = `
<div class="w-full h-full p-4">
<div class="flex justify-between items-center mb-4">
<div>
<h3 class="font-bold text-lg">BTC/USDT</h3>
<p class="text-slate-400 text-sm">الرسم البياني لمدة 24 ساعة</p>
</div>
<div class="text-right">
<p class="text-2xl font-bold">$42,856.32</p>
<p class="text-emerald-400 text-sm">+2.45% (24h)</p>
</div>
</div>
<div class="relative w-full h-64 bg-slate-900 rounded-lg overflow-hidden">
<div class="absolute inset-0 flex items-center justify-center">
<div class="text-center text-slate-600">
<i class="fas fa-chart-line text-4xl mb-2"></i>
<p>مخطط تفاعلي سيظهر هنا</p>
</div>
</div>
</div>
<div class="flex justify-between mt-4">
<button class="bg-slate-700 hover:bg-slate-600 px-3 py-1 rounded text-sm">1h</button>
<button class="bg-slate-700 hover:bg-slate-600 px-3 py-1 rounded text-sm">4h</button>
<button class="bg-slate-700 hover:bg-slate-600 px-3 py-1 rounded text-sm">1d</button>
<button class="bg-emerald-600 hover:bg-emerald-700 px-3 py-1 rounded text-sm">1w</button>
<button class="bg-slate-700 hover:bg-slate-600 px-3 py-1 rounded text-sm">1m</button>
</div>
</div>
`;
}, 2000);
// Update trade pairs prices randomly
function updatePrices() {
const pairs = document.querySelectorAll('tbody tr');
pairs.forEach(pair => {
const priceCell = pair.querySelector('td:nth-child(2)');
const changeCell = pair.querySelector('td:nth-child(3)');
// Generate random price change (-2% to +2%)
const change = (Math.random() * 4 - 2).toFixed(2);
const isPositive = change >= 0;
// Update price based on change
const currentPrice = parseFloat(priceCell.textContent.replace('$', '').replace(',', ''));
const newPrice = (currentPrice * (1 + change/100)).toFixed(2);
// Format with commas
const formattedPrice = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 2,
maximumFractionDigits: 2
}).format(newPrice).replace('$', '$');
priceCell.textContent = formattedPrice;
// Update change display
changeCell.textContent = `${isPositive ? '+' : ''}${change}%`;
changeCell.className = `py-4 px-4 text-right ${isPositive ? 'text-emerald-400' : 'text-rose-400'}`;
});
}
// Update prices every 5 seconds
setInterval(updatePrices, 5000);
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=bdr11/ws" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>