<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <title>عداد زوار دلع نجد - إحصائيات الموقع</title>
  <meta name="description" content="عداد زوار موقع دلع نجد. تابع عدد الزوار المتواجدين حالياً وإحصائيات الدردشة والموقع منذ 2006."/>
  <meta name="keywords" content="عداد زوار دلع نجد, إحصائيات الموقع, عدد الزوار, إحصائيات الدردشة"/>
  <link rel="canonical" href="https://www.dl3njd.com/countchat.php"/>
  <link rel="shortcut icon" href="assets/images/favicon.ico"/>
  
  <!-- CSS -->
  <link href="assets/vendors/mdi/css/materialdesignicons.min.css" rel="stylesheet"/>
  <link href="assets/vendors/css/vendor.bundle.base.css" rel="stylesheet"/>
  <link href="assets/css/style.css" rel="stylesheet"/>
  
  <style>
    .stats-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }
    .stats-header {
      background: linear-gradient(135deg, #990066, #cc3388);
      color: white;
      padding: 40px 20px;
      text-align: center;
      border-radius: 12px;
      margin-bottom: 30px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }
    .stats-title {
      font-size: 2.5rem;
      margin-bottom: 15px;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    }
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 25px;
      margin-bottom: 40px;
    }
    .stat-card {
      background: white;
      padding: 30px;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      text-align: center;
      border: 2px solid transparent;
      transition: all 0.3s ease;
    }
    .stat-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.15);
      border-color: #990066;
    }
    .stat-icon {
      font-size: 3rem;
      margin-bottom: 20px;
      color: #990066;
    }
    .stat-number {
      font-size: 2.5rem;
      font-weight: bold;
      color: #990066;
      margin-bottom: 10px;
    }
    .stat-label {
      font-size: 1.1rem;
      color: #666;
      margin-bottom: 15px;
    }
    .stat-description {
      font-size: 0.9rem;
      color: #888;
      line-height: 1.4;
    }
    .live-indicator {
      display: inline-block;
      width: 12px;
      height: 12px;
      background: #28a745;
      border-radius: 50%;
      margin-left: 8px;
      animation: pulse 2s infinite;
    }
    @keyframes pulse {
      0% { opacity: 1; }
      50% { opacity: 0.5; }
      100% { opacity: 1; }
    }
    .breadcrumb {
      background: #f8f9fa;
      padding: 15px 20px;
      border-radius: 8px;
      margin-bottom: 20px;
    }
    .breadcrumb a {
      color: #990066;
      text-decoration: none;
    }
    .breadcrumb a:hover {
      text-decoration: underline;
    }
    .chart-section {
      background: white;
      padding: 30px;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      margin-bottom: 30px;
    }
    .chart-title {
      color: #990066;
      font-size: 1.5rem;
      margin-bottom: 20px;
      text-align: center;
    }
    .progress-bar {
      background: #e9ecef;
      border-radius: 10px;
      height: 20px;
      margin: 10px 0;
      overflow: hidden;
    }
    .progress-fill {
      background: linear-gradient(90deg, #990066, #cc3388);
      height: 100%;
      border-radius: 10px;
      transition: width 0.3s ease;
    }
    .country-stats {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #e9ecef;
    }
    .country-flag-small {
      width: 30px;
      height: 20px;
      object-fit: cover;
      border-radius: 3px;
      margin-left: 10px;
    }
    @media (max-width: 768px) {
      .stats-title {
        font-size: 2rem;
      }
      .stat-number {
        font-size: 2rem;
      }
    }
  </style>
</head>
<body>
  <div class="container-scroller">
    <!-- Header -->
    <header>
      <nav class="navbar default-layout-navbar col-lg-12 col-12 p-0 d-flex flex-row">
        <div class="navbar-brand-wrapper d-flex align-items-center">
          <a class="navbar-brand brand-logo" href="index.html">
            <img alt="شعار دلع نجد" src="assets/images/logo.svg"/>
          </a>
        </div>
        <div class="navbar-menu-wrapper d-flex align-items-center">
          <ul class="navbar-nav navbar-nav-left">
            <li class="nav-item">
              <a class="nav-link" href="index.html">الرئيسية</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="chat.html">الدردشة</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="rooms.html">الغرف</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="archive_index.html">الأرشيف</a>
            </li>
          </ul>
        </div>
      </nav>
    </header>

    <div class="stats-container">
      <!-- Breadcrumb -->
      <nav class="breadcrumb">
        <a href="index.html">الرئيسية</a> &gt; 
        <span>عداد الزوار</span>
      </nav>

      <!-- Stats Header -->
      <div class="stats-header">
        <h1 class="stats-title">📊 عداد زوار دلع نجد</h1>
        <p style="font-size: 1.2rem; opacity: 0.9;">إحصائيات مباشرة لموقع دردشة دلع نجد</p>
        <p style="font-size: 1rem; opacity: 0.8;">آخر تحديث: <span id="lastUpdate"></span></p>
      </div>

      <!-- Main Stats -->
      <div class="stats-grid">
        <div class="stat-card">
          <div class="stat-icon">👥</div>
          <div class="stat-number" id="onlineUsers">127</div>
          <div class="stat-label">متواجد الآن <span class="live-indicator"></span></div>
          <div class="stat-description">عدد الزوار المتواجدين حالياً في الموقع</div>
        </div>

        <div class="stat-card">
          <div class="stat-icon">📈</div>
          <div class="stat-number" id="todayVisits">2,847</div>
          <div class="stat-label">زيارات اليوم</div>
          <div class="stat-description">إجمالي الزيارات منذ بداية اليوم</div>
        </div>

        <div class="stat-card">
          <div class="stat-icon">🌍</div>
          <div class="stat-number" id="totalVisits">1,847,293</div>
          <div class="stat-label">إجمالي الزيارات</div>
          <div class="stat-description">منذ إنشاء الموقع في 2006</div>
        </div>

        <div class="stat-card">
          <div class="stat-icon">💬</div>
          <div class="stat-number" id="activeChats">43</div>
          <div class="stat-label">دردشات نشطة</div>
          <div class="stat-description">عدد المحادثات الجارية حالياً</div>
        </div>

        <div class="stat-card">
          <div class="stat-icon">🏆</div>
          <div class="stat-number">19</div>
          <div class="stat-label">سنوات الخبرة</div>
          <div class="stat-description">منذ تأسيس الموقع في 2006</div>
        </div>

        <div class="stat-card">
          <div class="stat-icon">🌟</div>
          <div class="stat-number" id="peakUsers">1,247</div>
          <div class="stat-label">أعلى رقم قياسي</div>
          <div class="stat-description">أكبر عدد متواجدين في نفس الوقت</div>
        </div>
      </div>

      <!-- Country Statistics -->
      <div class="chart-section">
        <h3 class="chart-title">إحصائيات الدول</h3>
        
        <div class="country-stats">
          <div style="display: flex; align-items: center;">
            <img src="a3lam/saudi.gif" alt="السعودية" class="country-flag-small"/>
            <span>السعودية</span>
          </div>
          <div style="flex: 1; margin: 0 20px;">
            <div class="progress-bar">
              <div class="progress-fill" style="width: 35%;"></div>
            </div>
          </div>
          <span>35% (44 زائر)</span>
        </div>

        <div class="country-stats">
          <div style="display: flex; align-items: center;">
            <img src="a3lam/egypt.gif" alt="مصر" class="country-flag-small"/>
            <span>مصر</span>
          </div>
          <div style="flex: 1; margin: 0 20px;">
            <div class="progress-bar">
              <div class="progress-fill" style="width: 28%;"></div>
            </div>
          </div>
          <span>28% (36 زائر)</span>
        </div>

        <div class="country-stats">
          <div style="display: flex; align-items: center;">
            <img src="a3lam/algeria.gif" alt="الجزائر" class="country-flag-small"/>
            <span>الجزائر</span>
          </div>
          <div style="flex: 1; margin: 0 20px;">
            <div class="progress-bar">
              <div class="progress-fill" style="width: 15%;"></div>
            </div>
          </div>
          <span>15% (19 زائر)</span>
        </div>

        <div class="country-stats">
          <div style="display: flex; align-items: center;">
            <img src="a3lam/morocco.gif" alt="المغرب" class="country-flag-small"/>
            <span>المغرب</span>
          </div>
          <div style="flex: 1; margin: 0 20px;">
            <div class="progress-bar">
              <div class="progress-fill" style="width: 12%;"></div>
            </div>
          </div>
          <span>12% (15 زائر)</span>
        </div>

        <div class="country-stats">
          <div style="display: flex; align-items: center;">
            <img src="a3lam/tunisia.gif" alt="تونس" class="country-flag-small"/>
            <span>تونس</span>
          </div>
          <div style="flex: 1; margin: 0 20px;">
            <div class="progress-bar">
              <div class="progress-fill" style="width: 10%;"></div>
            </div>
          </div>
          <span>10% (13 زائر)</span>
        </div>
      </div>

      <!-- Quick Actions -->
      <div style="text-align: center; margin-top: 30px;">
        <a href="chat.html" style="display: inline-block; margin: 10px; padding: 15px 30px; background: #990066; color: white; text-decoration: none; border-radius: 8px; font-weight: bold;">انضم للدردشة</a>
        <a href="rooms.html" style="display: inline-block; margin: 10px; padding: 15px 30px; background: #28a745; color: white; text-decoration: none; border-radius: 8px; font-weight: bold;">تصفح الغرف</a>
      </div>
    </div>

    <!-- Footer -->
    <footer class="footer">
      <div class="container-fluid d-flex justify-content-between">
        <span class="text-muted">جميع الحقوق محفوظة © دلع نجد 2025</span>
        <span class="text-muted">عداد الزوار - موقع دردشة عربية أصيلة منذ 2006</span>
      </div>
    </footer>
  </div>

  <!-- JS -->
  <script src="assets/vendors/js/vendor.bundle.base.js"></script>
  <script src="assets/js/main.js"></script>
  
  <script>
    // تحديث الوقت
    function updateTime() {
      const now = new Date();
      const timeString = now.toLocaleString('ar-SA', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      });
      document.getElementById('lastUpdate').textContent = timeString;
    }

    // محاكاة تحديث الإحصائيات
    function updateStats() {
      const onlineUsers = document.getElementById('onlineUsers');
      const todayVisits = document.getElementById('todayVisits');
      const activeChats = document.getElementById('activeChats');
      
      // تحديث عشوائي للأرقام
      const currentOnline = parseInt(onlineUsers.textContent);
      const newOnline = Math.max(50, currentOnline + Math.floor(Math.random() * 21) - 10);
      onlineUsers.textContent = newOnline;
      
      const currentToday = parseInt(todayVisits.textContent.replace(/,/g, ''));
      const newToday = currentToday + Math.floor(Math.random() * 5);
      todayVisits.textContent = newToday.toLocaleString();
      
      const currentChats = parseInt(activeChats.textContent);
      const newChats = Math.max(10, currentChats + Math.floor(Math.random() * 7) - 3);
      activeChats.textContent = newChats;
    }

    // تحديث كل 30 ثانية
    setInterval(updateStats, 30000);
    setInterval(updateTime, 1000);
    
    // تحديث أولي
    updateTime();
  </script>
</body>
</html>

