| <!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> |
| @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap'); |
| body { |
| font-family: 'Tajawal', sans-serif; |
| } |
| |
| .stock-up { |
| animation: pulseGreen 2s infinite; |
| } |
| |
| .stock-down { |
| animation: pulseRed 2s infinite; |
| } |
| |
| @keyframes pulseGreen { |
| 0% { background-color: rgba(16, 185, 129, 0.1); } |
| 50% { background-color: rgba(16, 185, 129, 0.2); } |
| 100% { background-color: rgba(16, 185, 129, 0.1); } |
| } |
| |
| @keyframes pulseRed { |
| 0% { background-color: rgba(239, 68, 68, 0.1); } |
| 50% { background-color: rgba(239, 68, 68, 0.2); } |
| 100% { background-color: rgba(239, 68, 68, 0.1); } |
| } |
| |
| .market-status { |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .market-status::after { |
| content: ""; |
| position: absolute; |
| top: 0; |
| right: 0; |
| width: 5px; |
| height: 100%; |
| } |
| |
| .market-open::after { |
| background-color: #10B981; |
| } |
| |
| .market-closed::after { |
| background-color: #EF4444; |
| } |
| |
| .ticker-wrap { |
| overflow: hidden; |
| white-space: nowrap; |
| } |
| |
| .ticker { |
| display: inline-block; |
| animation: ticker 30s linear infinite; |
| } |
| |
| @keyframes ticker { |
| 0% { transform: translateX(0); } |
| 100% { transform: translateX(-100%); } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 text-gray-800"> |
| <div class="container mx-auto px-4 py-6"> |
| |
| <header class="mb-8"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <h1 class="text-3xl font-bold text-indigo-800">سوق الأوراق المالية</h1> |
| <p class="text-gray-600">آخر تحديث: <span id="update-time" class="font-medium"></span></p> |
| </div> |
| <div class="market-status market-open bg-white rounded-lg shadow px-4 py-2"> |
| <div class="flex items-center"> |
| <i class="fas fa-circle text-green-500 mr-2"></i> |
| <span class="font-medium">السوق مفتوح</span> |
| </div> |
| <p class="text-sm text-gray-500 mt-1">يغلق السوق بعد <span class="font-medium">3 ساعات 25 دقيقة</span></p> |
| </div> |
| </div> |
| |
| |
| <div class="mt-6 bg-white rounded-xl shadow overflow-hidden"> |
| <div class="grid grid-cols-1 md:grid-cols-4 divide-x divide-gray-200"> |
| <div class="p-4"> |
| <p class="text-gray-500">مؤشر السوق الرئيسي</p> |
| <p class="text-2xl font-bold mt-1">8,742.15</p> |
| <p class="text-green-500 flex items-center mt-1"> |
| <i class="fas fa-caret-up ml-1"></i> |
| <span>+42.35 (0.49%)</span> |
| </p> |
| </div> |
| <div class="p-4"> |
| <p class="text-gray-500">القيمة السوقية</p> |
| <p class="text-2xl font-bold mt-1">2.45 تريليون</p> |
| <p class="text-green-500 flex items-center mt-1"> |
| <i class="fas fa-caret-up ml-1"></i> |
| <span>+0.12 تريليون</span> |
| </p> |
| </div> |
| <div class="p-4"> |
| <p class="text-gray-500">الأسهم الصاعدة</p> |
| <p class="text-2xl font-bold mt-1">147</p> |
| <p class="text-green-500 flex items-center mt-1"> |
| <i class="fas fa-caret-up ml-1"></i> |
| <span>+18</span> |
| </p> |
| </div> |
| <div class="p-4"> |
| <p class="text-gray-500">الأسهم الهابطة</p> |
| <p class="text-2xl font-bold mt-1">62</p> |
| <p class="text-red-500 flex items-center mt-1"> |
| <i class="fas fa-caret-down ml-1"></i> |
| <span>-5</span> |
| </p> |
| </div> |
| </div> |
| </div> |
| </header> |
| |
| |
| <div class="bg-indigo-50 rounded-lg p-3 mb-6"> |
| <div class="ticker-wrap"> |
| <div class="ticker"> |
| <span class="font-medium mx-4">سهم الشركة الوطنية <span class="text-green-500">▲ 45.75 (+1.2%)</span></span> |
| <span class="font-medium mx-4">سهم البنك التجاري <span class="text-red-500">▼ 112.40 (-0.8%)</span></span> |
| <span class="font-medium mx-4">سهم اتصالات <span class="text-green-500">▲ 78.30 (+2.1%)</span></span> |
| <span class="font-medium mx-4">سهم البترول <span class="text-green-500">▲ 203.15 (+0.5%)</span></span> |
| <span class="font-medium mx-4">سهم الصناعات الغذائية <span class="text-red-500">▼ 34.20 (-1.8%)</span></span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
| |
| <div class="lg:col-span-2"> |
| <div class="bg-white rounded-xl shadow overflow-hidden"> |
| <div class="px-6 py-4 border-b border-gray-200"> |
| <h2 class="text-xl font-bold">أهم الأسهم</h2> |
| </div> |
| <div class="divide-y divide-gray-200"> |
| |
| <div class="p-4 hover:bg-gray-50 transition-colors duration-200 stock-up"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <h3 class="font-bold">الشركة الوطنية</h3> |
| <p class="text-sm text-gray-500">رمز السهم: WATAN</p> |
| </div> |
| <div class="text-right"> |
| <p class="font-bold text-lg">45.75 ريال</p> |
| <p class="text-green-500 text-sm flex items-center justify-end"> |
| <i class="fas fa-caret-up ml-1"></i> |
| <span>+1.2%</span> |
| </p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="p-4 hover:bg-gray-50 transition-colors duration-200"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <h3 class="font-bold">البنك التجاري</h3> |
| <p class="text-sm text-gray-500">رمز السهم: TCB</p> |
| </div> |
| <div class="text-right"> |
| <p class="font-bold text-lg">112.40 ريال</p> |
| <p class="text-red-500 text-sm flex items-center justify-end"> |
| <i class="fas fa-caret-down ml-1"></i> |
| <span>-0.8%</span> |
| </p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="p-4 hover:bg-gray-50 transition-colors duration-200 stock-up"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <h3 class="font-bold">اتصالات</h3> |
| <p class="text-sm text-gray-500">رمز السهم: ETTI</p> |
| </div> |
| <div class="text-right"> |
| <p class="font-bold text-lg">78.30 ريال</p> |
| <p class="text-green-500 text-sm flex items-center justify-end"> |
| <i class="fas fa-caret-up ml-1"></i> |
| <span>+2.1%</span> |
| </p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="p-4 hover:bg-gray-50 transition-colors duration-200 stock-up"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <h3 class="font-bold">البترول</h3> |
| <p class="text-sm text-gray-500">رمز السهم: PETR</p> |
| </div> |
| <div class="text-right"> |
| <p class="font-bold text-lg">203.15 ريال</p> |
| <p class="text-green-500 text-sm flex items-center justify-end"> |
| <i class="fas fa-caret-up ml-1"></i> |
| <span>+0.5%</span> |
| </p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="p-4 hover:bg-gray-50 transition-colors duration-200 stock-down"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <h3 class="font-bold">الصناعات الغذائية</h3> |
| <p class="text-sm text-gray-500">رمز السهم: FOOD</p> |
| </div> |
| <div class="text-right"> |
| <p class="font-bold text-lg">34.20 ريال</p> |
| <p class="text-red-500 text-sm flex items-center justify-end"> |
| <i class="fas fa-caret-down ml-1"></i> |
| <span>-1.8%</span> |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="px-6 py-3 bg-gray-50 text-center"> |
| <button class="text-indigo-600 font-medium">عرض المزيد من الأسهم</button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div> |
| <div class="bg-white rounded-xl shadow overflow-hidden"> |
| <div class="px-6 py-4 border-b border-gray-200"> |
| <h2 class="text-xl font-bold">أخبار السوق</h2> |
| </div> |
| <div class="divide-y divide-gray-200"> |
| |
| <div class="p-4 hover:bg-gray-50 transition-colors duration-200"> |
| <h3 class="font-bold">ارتفاع أرباح الشركة الوطنية بنسبة 15%</h3> |
| <p class="text-sm text-gray-500 mt-1">أعلنت الشركة الوطنية عن ارتفاع أرباحها بنسبة 15% خلال الربع الأول من العام الحالي.</p> |
| <p class="text-xs text-gray-400 mt-2">منذ ساعتين</p> |
| </div> |
| |
| |
| <div class="p-4 hover:bg-gray-50 transition-colors duration-200"> |
| <h3 class="font-bold">إطلاق منتج جديد من اتصالات</h3> |
| <p class="text-sm text-gray-500 mt-1">أطلقت شركة اتصالات منتجها الجديد للإنترنت فائق السرعة بتقنية 5G.</p> |
| <p class="text-xs text-gray-400 mt-2">منذ 4 ساعات</p> |
| </div> |
| |
| |
| <div class="p-4 hover:bg-gray-50 transition-colors duration-200"> |
| <h3 class="font-bold">توقعات بارتفاع أسعار النفط</h3> |
| <p class="text-sm text-gray-500 mt-1">تتوقع وكالات الطاقة العالمية ارتفاع أسعار النفط خلال الربع الثاني بسبب زيادة الطلب.</p> |
| <p class="text-xs text-gray-400 mt-2">منذ 6 ساعات</p> |
| </div> |
| |
| |
| <div class="p-4 hover:bg-gray-50 transition-colors duration-200"> |
| <h3 class="font-bold">البنك التجاري يعلن عن عروض تمويل جديدة</h3> |
| <p class="text-sm text-gray-500 mt-1">أعلن البنك التجاري عن حزمة تمويل جديدة بفائدة مخفضة للشركات الصغيرة والمتوسطة.</p> |
| <p class="text-xs text-gray-400 mt-2">منذ 8 ساعات</p> |
| </div> |
| </div> |
| <div class="px-6 py-3 bg-gray-50 text-center"> |
| <button class="text-indigo-600 font-medium">المزيد من الأخبار</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mt-6 bg-white rounded-xl shadow overflow-hidden"> |
| <div class="px-6 py-4 border-b border-gray-200"> |
| <h2 class="text-xl font-bold">المؤشرات الرئيسية</h2> |
| </div> |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 divide-x divide-y divide-gray-200"> |
| |
| <div class="p-4"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <h3 class="font-bold">مؤشر السوق الرئيسي</h3> |
| <p class="text-sm text-gray-500">TASI</p> |
| </div> |
| <div class="text-right"> |
| <p class="font-bold">8,742.15</p> |
| <p class="text-green-500 text-sm flex items-center justify-end"> |
| <i class="fas fa-caret-up ml-1"></i> |
| <span>+0.49%</span> |
| </p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="p-4"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <h3 class="font-bold">مؤشر البنوك</h3> |
| <p class="text-sm text-gray-500">BANK</p> |
| </div> |
| <div class="text-right"> |
| <p class="font-bold">15,328.70</p> |
| <p class="text-green-500 text-sm flex items-center justify-end"> |
| <i class="fas fa-caret-up ml-1"></i> |
| <span>+0.72%</span> |
| </p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="p-4"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <h3 class="font-bold">مؤشر البتروكيماويات</h3> |
| <p class="text-sm text-gray-500">PETRO</p> |
| </div> |
| <div class="text-right"> |
| <p class="font-bold">6,842.50</p> |
| <p class="text-red-500 text-sm flex items-center justify-end"> |
| <i class="fas fa-caret-down ml-1"></i> |
| <span>-0.15%</span> |
| </p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="p-4"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <h3 class="font-bold">مؤشر الاتصالات</h3> |
| <p class="text-sm text-gray-500">TELECOM</p> |
| </div> |
| <div class="text-right"> |
| <p class="font-bold">3,245.80</p> |
| <p class="text-green-500 text-sm flex items-center justify-end"> |
| <i class="fas fa-caret-up ml-1"></i> |
| <span>+1.32%</span> |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <script> |
| |
| function updateTime() { |
| const now = new Date(); |
| const options = { |
| weekday: 'long', |
| year: 'numeric', |
| month: 'long', |
| day: 'numeric', |
| hour: '2-digit', |
| minute: '2-digit', |
| second: '2-digit' |
| }; |
| document.getElementById('update-time').textContent = now.toLocaleDateString('ar-SA', options); |
| } |
| |
| updateTime(); |
| setInterval(updateTime, 1000); |
| |
| |
| function simulateStockChanges() { |
| const stocks = document.querySelectorAll('.stock-up, .stock-down'); |
| |
| stocks.forEach(stock => { |
| const priceElement = stock.querySelector('.text-lg'); |
| const changeElement = stock.querySelector('.text-sm span'); |
| |
| if (priceElement && changeElement) { |
| const currentPrice = parseFloat(priceElement.textContent); |
| const isUp = stock.classList.contains('stock-up'); |
| |
| |
| const changePercent = (Math.random() * 0.5) * (isUp ? 1 : -1); |
| const newPrice = currentPrice * (1 + changePercent/100); |
| const changeValue = newPrice - currentPrice; |
| |
| |
| priceElement.textContent = newPrice.toFixed(2) + ' ريال'; |
| changeElement.textContent = (changePercent > 0 ? '+' : '') + changePercent.toFixed(2) + '%'; |
| |
| |
| if ((isUp && changePercent < 0) || (!isUp && changePercent > 0)) { |
| stock.classList.toggle('stock-up'); |
| stock.classList.toggle('stock-down'); |
| |
| const icon = stock.querySelector('i'); |
| const text = stock.querySelector('.text-sm'); |
| |
| if (changePercent > 0) { |
| icon.classList.replace('fa-caret-down', 'fa-caret-up'); |
| text.classList.replace('text-red-500', 'text-green-500'); |
| } else { |
| icon.classList.replace('fa-caret-up', 'fa-caret-down'); |
| text.classList.replace('text-green-500', 'text-red-500'); |
| } |
| } |
| } |
| }); |
| } |
| |
| |
| setInterval(simulateStockChanges, 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=warimark73/https-deepsite-hf-co-projects-new" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
