Hugging Face's logo

Spaces:
halil339
/
qtex-platform
Running

App Files Community
qtex-platform / index.html
halil339's picture
halil339
قم بادراج منصة كيوتكس
536b491 verified
Raw History Blame Contribute Delete
16.7 kB
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport"egrity="width=device-width, initial-scale=1.0">
<title>منصة Qtex | مؤشر التداول</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#EF4444',
secondary: '#1F2937',
},
fontFamily: {
'tajawal': ['Tajawal', 'sans-serif']
}
}
}
}
</script>
<style>
body {
font-family: 'Tajawal', sans-serif;
background-color: #0f172a;
color: #f1f5f9;
}
.pair-card {
transition: all 0.3s ease;
}
.pair-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25);
}
.price-up {
color: #10B981;
}
.price-down {
color: #EF4444;
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
</style>
</head>
<body class="bg-slate-900 text-slate-100">
<!-- Header -->
<header class="bg-slate-800 border-b border-slate-700">
<div class="container mx-auto px-4 py-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center mb-4 md:mb-0">
<div class="bg-primary w-10 h-10 rounded-lg flex items-center justify-center mr-3">
<i data-feather="trending-up" class="text-white"></i>
</div>
<h1 class="text-2xl font-bold text-white">منصة Qtex</h1>
</div>
<div class="flex items-center space-x-4">
<div class="flex items-center bg-slate-700 px-3 py-1 rounded-full">
<i data-feather="clock" class="text-primary mr-2"></i>
<span class="text-sm">الزمن: 1 دقيقة</span>
</div>
<button class="bg-primary hover:bg-red-600 text-white px-4 py-2 rounded-lg flex items-center transition duration-300">
<i data-feather="refresh-cw" class="mr-2"></i>
تحديث
</button>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<main class="container mx-auto px-4 py-8">
<!-- Market Overview -->
<section class="mb-12">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold">نظرة عامة على السوق</h2>
<div class="text-sm text-slate-400">آخر تحديث: الآن</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Market Card 1 -->
<div class="bg-slate-800 rounded-xl p-6 border border-slate-700">
<div class="flex justify-between items-start">
<div>
<h3 class="text-lg font-semibold">مؤشر الأسهم</h3>
<p class="text-2xl font-bold mt-2">32,456.78</p>
</div>
<div class="bg-green-500/20 p-2 rounded-lg">
<i data-feather="trending-up" class="text-green-500"></i>
</div>
</div>
<div class="mt-4 flex items-center">
<span class="text-green-500 flex items-center">
<i data-feather="arrow-up" class="mr-1"></i>
2.34%
</span>
<span class="text-slate-400 text-sm mr-2">(+$750.23)</span>
</div>
</div>
<!-- Market Card 2 -->
<div class="bg-slate-800 rounded-xl p-6 border border-slate-700">
<div class="flex justify-between items-start">
<div>
<h3 class="text-lg font-semibold">العملات الرقمية</h3>
<p class="text-2xl font-bold mt-2">12,890.45</p>
</div>
<div class="bg-red-500/20 p-2 rounded-lg">
<i data-feather="trending-down" class="text-red-500"></i>
</div>
</div>
<div class="mt-4 flex items-center">
<span class="text-red-500 flex items-center">
<i data-feather="arrow-down" class="mr-1"></i>
1.22%
</span>
<span class="text-slate-400 text-sm mr-2">(-$157.32)</span>
</div>
</div>
<!-- Market Card 3 -->
<div class="bg-slate-800 rounded-xl p-6 border border-slate-700">
<div class="flex justify-between items-start">
<div>
<h3 class="text-lg font-semibold">السلم</h3>
<p class="text-2xl font-bold mt-2">4,231.67</p>
</div>
<div class="bg-green-500/20 p-2 rounded-lg">
<i data-feather="trending-up" class="text-green-500"></i>
</div>
</div>
<div class="mt-4 flex items-center">
<span class="text-green-500 flex items-center">
<i data-feather="arrow-up" class="mr-1"></i>
0.87%
</span>
<span class="text-slate-400 text-sm mr-2">(+36.89)</span>
</div>
</div>
<!-- Market Card 4 -->
<div class="bg-slate-800 rounded-xl p-6 border border-slate-700">
<div class="flex justify-between items-start">
<div>
<h3 class="text-lg font-semibold">الصادرات</h3>
<p class="text-2xl font-bold mt-2">8,765.23</p>
</div>
<div class="bg-green-500/20 p-2 rounded-lg">
<i data-feather="trending-up" class="text-green-500"></i>
</div>
</div>
<div class="mt-4 flex items-center">
<span class="text-green-500 flex items-center">
<i data-feather="arrow-up" class="mr-1"></i>
3.15%
</span>
<span class="text-slate-400 text-sm mr-2">(+265.41)</span>
</div>
</div>
</div>
</section>
<!-- Trading Pairs -->
<section>
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold">أزواج التداول</h2>
<div class="relative">
<input type="text" placeholder="بحث..." class="bg-slate-800 border border-slate-700 rounded-lg py-2 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-primary">
<i data-feather="search" class="absolute right-3 top-2.5 text-slate-400"></i>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Trading Pair Card -->
<div class="pair-card bg-slate-800 rounded-xl p-6 border border-slate-700 hover:border-primary transition duration-300">
<div class="flex justify-between items-start">
<div>
<h3 class="text-xl font-bold">Silver</h3>
<p class="text-slate-400 text-sm mt-1">فضة</p>
</div>
<div class="text-right">
<p class="text-2xl font-bold">23.45</p>
<p class="price-up text-sm mt-1">+0.85%</p>
</div>
</div>
<div class="mt-4 flex justify-between items-center">
<span class="text-slate-400 text-sm">الحجم: 1.2K</span>
<span class="bg-green-500/20 text-green-500 text-xs px-2 py-1 rounded">شراء</span>
</div>
</div>
<!-- Trading Pair Card -->
<div class="pair-card bg-slate-800 rounded-xl p-6 border border-slate-700 hover:border-primary transition duration-300">
<div class="flex justify-between items-start">
<div>
<h3 class="text-xl font-bold">UKBrent</h3>
<p class="text-slate-400 text-sm mt-1">نفط برنت</p>
</div>
<div class="text-right">
<p class="text-2xl font-bold">89.32</p>
<p class="price-down text-sm mt-1">-1.25%</p>
</div>
</div>
<div class="mt-4 flex justify-between items-center">
<span class="text-slate-400 text-sm">الحجم: 2.5K</span>
<span class="bg-red-500/20 text-red-500 text-xs px-2 py-1 rounded">بيع</span>
</div>
</div>
<!-- Trading Pair Card -->
<div class="pair-card bg-slate-800 rounded-xl p-6 border border-slate-700 hover:border-primary transition duration-300">
<div class="flex justify-between items-start">
<div>
<h3 class="text-xl font-bold">USD/BDT</h3>
<p class="text-slate-400 text-sm mt-1">الدولار/تاكا بنغلاديشي</p>
</div>
<div class="text-right">
<p class="text-2xl font-bold">109.87</p>
<p class="price-up text-sm mt-1">+0.12%</p>
</div>
</div>
<div class="mt-4 flex justify-between items-center">
<span class="text-slate-400 text-sm">الحجم: 850</span>
<span class="bg-green-500/20 text-green-500 text-xs px-2 py-1 rounded">شراء</span>
</div>
</div>
<!-- Trading Pair Card -->
<div class="pair-card bg-slate-800 rounded-xl p-6 border border-slate-700 hover:border-primary transition duration-300">
<div class="flex justify-between items-start">
<div>
<h3 class="text-xl font-bold">USD/NGN</h3>
<p class="text-slate-400 text-sm mt-1">الدولار/نيرة نيجيرية</p>
</div>
<div class="text-right">
<p class="text-2xl font-bold">1,567.23</p>
<p class="price-down text-sm mt-1">-0.34%</p>
</div>
</div>
<div class="mt-4 flex justify-between items-center">
<span class="text-slate-400 text-sm">الحجم: 1.1K</span>
<span class="bg-red-500/20 text-red-500 text-xs px-2 py-1 rounded">بيع</span>
</div>
</div>
<!-- Trading Pair Card -->
<div class="pair-card bg-slate-800 rounded-xl p-6 border border-slate-700 hover:border-primary transition duration-300">
<div class="flex justify-between items-start">
<div>
<h3 class="text-xl font-bold">USD/MXN</h3>
<p class="text-slate-400 text-sm mt-1">الدولار/بيزو مكسيكي</p>
</div>
<div class="text-right">
<p class="text-2xl font-bold">17.89</p>
<p class="price-up text-sm mt-1">+0.45%</p>
</div>
</div>
<div class="mt-4 flex justify-between items-center">
<span class="text-slate-400 text-sm">الحجم: 3.2K</span>
<span class="bg-green-500/20 text-green-500 text-xs px-2 py-1 rounded">شراء</span>
</div>
</div>
<!-- Trading Pair Card -->
<div class="pair-card bg-slate-800 rounded-xl p-6 border border-slate-700 hover:border-primary transition duration-300">
<div class="flex justify-between items-start">
<div>
<h3 class="text-xl font-bold">USD/CHF</h3>
<p class="text-slate-400 text-sm mt-1">الدولار/فرنك سويسري</p>
</div>
<div class="text-right">
<p class="text-2xl font-bold">0.8921</p>
<p class="price-down text-sm mt-1">-0.08%</p>
</div>
</div>
<div class="mt-4 flex justify-between items-center">
<span class="text-slate-400 text-sm">الحجم: 950</span>
<span class="bg-red-500/20 text-red-500 text-xs px-2 py-1 rounded">بيع</span>
</div>
</div>
<!-- Trading Pair Card -->
<div class="pair-card bg-slate-800 rounded-xl p-6 border border-slate-700 hover:border-primary transition duration-300">
<div class="flex justify-between items-start">
<div>
<h3 class="text-xl font-bold">GBP/NZD</h3>
<p class="text-slate-400 text-sm mt-1">الجنيه/دولار نيوزيلندي</p>
</div>
<div class="text-right">
<p class="text-2xl font-bold">2.0345</p>
<p class="price-up text-sm mt-1">+0.23%</p>
</div>
</div>
<div class="mt-4 flex justify-between items-center">
<span class="text-slate-400 text-sm">الحجم: 780</span>
<span class="bg-green-500/20 text-green-500 text-xs px-2 py-1 rounded">شراء</span>
</div>
</div>
<!-- Trading Pair Card -->
<div class="pair-card bg-slate-800 rounded-xl p-6 border border-slate-700 hover:border-primary transition duration-300">
<div class="flex justify-between items-start">
<div>
<h3 class="text-xl font-bold">GBP/CHF</h3>
<p class="text-slate-400 text-sm mt-1">الجنيه/فرنك سويسري</p>
</div>
<div class="text-right">
<p class="text-2xl font-bold">1.1234</p>
<p class="price-down text-sm mt-1">-0.15%</p>
</div>
</div>
<div class="mt-4 flex justify-between items-center">
<span class="text-slate-400 text-sm">الحجم: 1.5K</span>
<span class="bg-red-500/20 text-red-500 text-xs px-2 py-1 rounded">بيع</span>
</div>
</div>
<!-- Trading Pair Card -->
<div class="pair-card bg-slate-800 rounded-xl p-6 border border-slate-700 hover:border-primary transition duration-300">
<div class="flex justify-between items-start">
<div
</body>
</html>