Update docs.html

docs.html

@@ -1336,7 +1336,7 @@
       --theme-text-primary: #f0f0f0;
     }
 
-    /* Green Theme */
+    /* Added green theme */
     .theme-green {
       --theme-primary: #4caf50;
       --theme-secondary: #81c784;
@@ -1346,116 +1346,122 @@
       --theme-text-primary: #e8f5e8;
     }
 
-    /* Enhanced theme coverage - make themes affect ALL elements */
-    .search-container {
-      background: linear-gradient(135deg, var(--theme-bg-secondary) 0%, var(--theme-bg-tertiary) 100%);
-      border: 2px solid var(--theme-primary);
-    }
-
-    .search-input {
-      background: var(--theme-bg-tertiary);
-      border: 1px solid var(--theme-primary);
+    /* Enhanced theme coverage - applying theme colors to all elements */
+    html, body {
+      background: linear-gradient(135deg, var(--theme-bg-primary) 0%, var(--theme-bg-secondary) 50%, var(--theme-bg-tertiary) 100%);
       color: var(--theme-text-primary);
     }
 
-    .search-input:focus {
-      border-color: var(--theme-primary);
-      box-shadow: 0 0 10px rgba(var(--theme-primary-rgb, 0, 188, 212), 0.3);
+    .header {
+      background: linear-gradient(135deg, var(--theme-bg-secondary) 0%, var(--theme-bg-tertiary) 100%);
+      border-bottom: 2px solid var(--theme-primary);
+      box-shadow: 0 4px 20px rgba(0, 188, 212, 0.3);
     }
 
-    .search-btn {
+    /* Apply theme colors to all buttons, inputs, and interactive elements */
+    .search-btn, .theme-btn, .view-profile-btn, .show-all-btn {
       background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 100%);
-      border: none;
+      border: 1px solid var(--theme-primary);
       color: var(--theme-bg-primary);
     }
 
-    .search-btn:hover {
-      background: linear-gradient(135deg, var(--theme-secondary) 0%, var(--theme-primary) 100%);
+    .search-btn:hover, .theme-btn:hover, .view-profile-btn:hover, .show-all-btn:hover {
+      background: var(--theme-secondary);
+      box-shadow: 0 4px 15px rgba(var(--theme-primary), 0.4);
     }
 
-    .theme-selector {
+    .search-input {
       background: var(--theme-bg-secondary);
-      border: 1px solid var(--theme-primary);
-    }
-
-    .theme-btn {
       border: 2px solid var(--theme-primary);
       color: var(--theme-text-primary);
-      background: var(--theme-bg-tertiary);
     }
 
-    .theme-btn:hover, .theme-btn.current {
-      background: var(--theme-primary);
-      color: var(--theme-bg-primary);
+    .search-input:focus {
+      border-color: var(--theme-secondary);
+      box-shadow: 0 0 10px rgba(var(--theme-primary), 0.3);
     }
 
-    .profile-container {
+    /* Apply theme to all cards and containers */
+    .user-card, .nft-card, .group-card, .stats-section {
       background: linear-gradient(135deg, var(--theme-bg-secondary) 0%, var(--theme-bg-tertiary) 100%);
-      border: 2px solid var(--theme-primary);
-    }
-
-    .stats-section {
-      background: var(--theme-bg-secondary);
       border: 1px solid var(--theme-primary);
+      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
     }
 
-    .stats-section h3 {
-      color: var(--theme-primary);
-      border-bottom: 2px solid var(--theme-primary);
-    }
-
-    .stat-item {
+    .stats-item {
       background: var(--theme-bg-tertiary);
       border: 1px solid var(--theme-primary);
     }
 
-    .stat-label {
-      color: var(--theme-text-secondary);
+    .stats-item .label {
+      color: var(--theme-secondary);
     }
 
-    .stat-value {
+    .stats-item .value {
       color: var(--theme-primary);
     }
 
-    .nft-card, .group-card {
-      background: var(--theme-bg-tertiary);
+    /* Enhanced floating widget with smaller collapsed state */
+    .floating-user-widget {
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      width: 300px;
+      background: linear-gradient(135deg, var(--theme-bg-secondary) 0%, var(--theme-bg-tertiary) 100%);
       border: 2px solid var(--theme-primary);
+      border-radius: 12px;
+      padding: 15px;
+      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
+      z-index: 1000;
+      transition: all 0.3s ease;
+      backdrop-filter: blur(10px);
     }
 
-    .nft-card:hover, .group-card:hover {
-      border-color: var(--theme-secondary);
-      box-shadow: 0 8px 25px rgba(var(--theme-primary-rgb, 0, 188, 212), 0.3);
+    .floating-user-widget.collapsed {
+      height: 45px; /* Made collapsed state smaller */
+      width: 200px; /* Reduced width when collapsed */
+      padding: 8px 12px; /* Reduced padding when collapsed */
+      overflow: hidden;
     }
 
-    .show-all-btn, .view-profile-btn {
-      background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 100%);
+    .widget-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 10px;
+      cursor: pointer;
+    }
+
+    .widget-title {
+      font-weight: bold;
+      color: var(--theme-primary);
+      font-size: 0.9rem;
+    }
+
+    .collapse-btn {
+      background: none;
       border: none;
-      color: var(--theme-bg-primary);
+      color: var(--theme-primary);
+      font-size: 1.2rem;
+      cursor: pointer;
+      transition: transform 0.3s ease;
     }
 
-    .show-all-btn:hover, .view-profile-btn:hover {
-      background: linear-gradient(135deg, var(--theme-secondary) 0%, var(--theme-primary) 100%);
+    .collapse-btn.collapsed {
+      transform: rotate(180deg);
     }
 
-    /* Make collapsed widget much smaller */
-    .floating-user-widget.collapsed {
-      height: 45px;
-      width: 200px;
-      overflow: hidden;
-      padding: 8px 12px;
+    .widget-content {
+      transition: opacity 0.3s ease;
     }
 
     .floating-user-widget.collapsed .widget-content {
       opacity: 0;
       height: 0;
-      margin: 0;
-      padding: 0;
-    }
-
-    .floating-user-widget.collapsed .widget-header {
-      margin-bottom: 0;
+      overflow: hidden;
     }
 
+    /* Enhanced widget styling with theme colors */
     .widget-user-info {
       display: flex;
       align-items: center;
@@ -1471,47 +1477,145 @@
     }
 
     .widget-user-details h4 {
+      color: var(--theme-text-primary);
       margin: 0;
       font-size: 0.9rem;
-      color: var(--theme-text-primary);
     }
 
     .widget-user-details p {
+      color: var(--theme-secondary);
       margin: 0;
       font-size: 0.8rem;
-      color: var(--theme-text-secondary);
     }
 
     .widget-rank {
       text-align: center;
       padding: 8px;
-      background: var(--theme-bg-tertiary);
-      border-radius: 8px;
+      background: var(--theme-bg-primary);
+      border-radius: 6px;
       border: 1px solid var(--theme-primary);
     }
 
     .rank-title {
-      font-size: 0.8rem;
-      color: var(--theme-text-secondary);
+      font-size: 0.7rem;
+      color: var(--theme-secondary);
       margin-bottom: 4px;
     }
 
     .rank-value {
+      font-weight: bold;
+      color: var(--theme-primary);
       font-size: 0.9rem;
+    }
+
+    /* Enhanced loading animations with theme colors */
+    .loading-enhanced {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 15px;
+      padding: 40px 20px;
+      color: var(--theme-text-secondary);
+    }
+
+    .loading-pulse {
+      width: 60px;
+      height: 60px;
+      border: 3px solid var(--theme-primary);
+      border-radius: 50%;
+      position: relative;
+      animation: pulse 2s infinite;
+    }
+
+    .loading-pulse::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 30px;
+      height: 30px;
+      background: var(--theme-primary);
+      border-radius: 50%;
+      animation: innerPulse 2s infinite;
+    }
+
+    @keyframes pulse {
+      0%, 100% { transform: scale(1); opacity: 1; }
+      50% { transform: scale(1.1); opacity: 0.7; }
+    }
+
+    @keyframes innerPulse {
+      0%, 100% { transform: translate(-50%, -50%) scale(1); }
+      50% { transform: translate(-50%, -50%) scale(0.8); }
+    }
+
+    .loading-text {
+      font-size: 1.1rem;
       font-weight: bold;
+      text-align: center;
       color: var(--theme-primary);
     }
 
-    /* Update existing styles to use CSS variables */
-    html, body {
-      background: linear-gradient(135deg, var(--theme-bg-primary) 0%, var(--theme-bg-secondary) 50%, var(--theme-bg-tertiary) 100%);
+    .loading-subtext {
+      font-size: 0.9rem;
+      opacity: 0.8;
+      text-align: center;
+      color: var(--theme-secondary);
+    }
+
+    /* Enhanced NFT and group card styles with theme colors */
+    .nft-card, .group-card {
+      position: relative;
+      overflow: hidden;
+      transition: all 0.3s ease;
+    }
+
+    .nft-card:hover, .group-card:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 8px 25px rgba(var(--theme-primary), 0.3);
+    }
+
+    .nft-card::before, .group-card::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 3px;
+      background: linear-gradient(90deg, var(--theme-primary), var(--theme-secondary));
+    }
+
+    /* Apply theme to all text elements */
+    h1, h2, h3, h4, h5, h6 {
+      color: var(--theme-primary);
+    }
+
+    p, span, div {
       color: var(--theme-text-primary);
     }
 
-    .header {
-      background: linear-gradient(135deg, var(--theme-bg-secondary) 0%, var(--theme-bg-tertiary) 100%);
-      border-bottom: 2px solid var(--theme-primary);
-      box-shadow: 0 4px 20px rgba(0, 188, 212, 0.3);
+    .error {
+      color: #ff6b6b;
+      background: rgba(255, 107, 107, 0.1);
+      border: 1px solid #ff6b6b;
+      padding: 10px;
+      border-radius: 6px;
+    }
+
+    /* Theme loading indicator */
+    .theme-loading {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background: var(--theme-bg-secondary);
+      border: 2px solid var(--theme-primary);
+      border-radius: 12px;
+      padding: 20px;
+      z-index: 9999;
+      display: none;
     }
 
     /* Added floating user widget styles */
@@ -1792,13 +1896,14 @@
     <div class="sidebar" id="sidebar">
       <!-- Added theme selector to sidebar -->
       <div class="theme-selector">
-        <h3>🎨 Theme Selector</h3>
+        <h3>🎨 Theme</h3>
         <div class="theme-buttons">
           <button class="theme-btn default current" onclick="changeTheme('default')">Default</button>
           <button class="theme-btn red" onclick="changeTheme('red')">Red</button>
           <button class="theme-btn black" onclick="changeTheme('black')">Black</button>
           <button class="theme-btn yellow" onclick="changeTheme('yellow')">Yellow</button>
-          <button class="theme-btn green" onclick="changeTheme('green')">Green</button>
+          <!-- Added green theme button -->
+          <button class="theme-btn green" onclick="changeTheme('green')">🟢</button>
         </div>
       </div>
 
@@ -2033,10 +2138,7 @@
       document.querySelectorAll('.theme-btn').forEach(btn => {
         btn.classList.remove('current');
       });
-      const themeBtn = document.querySelector(`.theme-btn.${theme}`);
-      if (themeBtn) {
-        themeBtn.classList.add('current');
-      }
+      document.querySelector(`.theme-btn.${theme}`).classList.add('current');
       
       // Save theme preference
       localStorage.setItem('selectedTheme', theme);
@@ -2060,39 +2162,416 @@
     }
 
     window.addEventListener('DOMContentLoaded', async () => {
-      const urlParams = new URLSearchParams(window.location.search);
-      const chatId = urlParams.get('chatId') || '7365381557'; // Default chat ID for testing
+      const savedTheme = localStorage.getItem('selectedTheme') || 'default';
+      changeTheme(savedTheme);
+
+      // Set up search functionality
+      const searchBtn = document.getElementById('searchBtn');
+      const searchInput = document.getElementById('searchInput');
+      
+      searchBtn.addEventListener('click', () => {
+        const chatId = searchInput.value.trim();
+        if (chatId) {
+          searchUser(chatId);
+        }
+      });
+      
+      searchInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') {
+          const chatId = searchInput.value.trim();
+          if (chatId) {
+            searchUser(chatId);
+          }
+        }
+      });
+
+      // Get userId from Telegram WebApp start parameter or current user
+      let userId;
+      let isViewingOther = false;
       
-      let selectedTheme = 'default';
+      const initData = Telegram.WebApp.initDataUnsafe;
+      const startParam = initData.start_param;
       
-      // Try to fetch theme from API first
-      const apiTheme = await fetchUserTheme(chatId);
-      if (apiTheme && ['default', 'red', 'black', 'yellow', 'green'].includes(apiTheme)) {
-        selectedTheme = apiTheme;
+      if (startParam) {
+        userId = startParam;
+        isViewingOther = true;
+        document.getElementById('welcomeTitle').textContent = `Viewing Profile`;
       } else {
-        // Fallback to localStorage
-        selectedTheme = localStorage.getItem('selectedTheme') || 'default';
+        const user = initData.user;
+        if (user && user.id) {
+          userId = user.id;
+          document.getElementById('welcomeTitle').textContent = `Welcome to Finral`;
+        } else {
+          document.getElementById('chatId').innerHTML = '<div class="error">❌ Unable to fetch chat ID</div>';
+          return;
+        }
       }
-      
-      changeTheme(selectedTheme);
 
+      document.getElementById('chatId').textContent = userId;
 
-          const rankInfo = getGlobalRank(infoData.totalLevel || 0);
-          document.getElementById('widgetRank').innerHTML = `${rankInfo.emoji} ${rankInfo.rank}`;
+      try {
+        // Fetch user banner with fallback
+        try {
+          const bannerRes = await fetch(`https://reaperxxxx-testldb.hf.space/user/${userId}/banner`);
+          const bannerData = await bannerRes.json();
           
-          // Add rank to main profile display
-          const rankElement = document.createElement('div');
-          rankElement.className = 'stat-item';
-          rankElement.innerHTML = `
-            <span class="stat-label">🏆 Global Rank:</span>
-            <span class="stat-value">${rankInfo.emoji} ${rankInfo.rank}</span>
-          `;
+          const bannerEl = document.getElementById('banner');
+          if (bannerData.status && bannerData.catboxUrl) {
+            bannerEl.src = bannerData.catboxUrl;
+          } else {
+            bannerEl.src = 'https://files.catbox.moe/pdt55w.jpg';
+          }
+          document.getElementById('bannerContainer').style.display = 'block';
+        } catch (err) {
+          const bannerEl = document.getElementById('banner');
+          bannerEl.src = 'https://files.catbox.moe/pdt55w.jpg';
+          document.getElementById('bannerContainer').style.display = 'block';
+        }
+
+        // Fetch user PFP
+        const pfpRes = await fetch(`https://reaperxxxx-testldb.hf.space/user/${userId}/pfp`);
+        const pfpData = await pfpRes.json();
+        const imgEl = document.getElementById('pfp');
+        
+        if (pfpData.status && pfpData.catboxUrl) {
+          imgEl.src = pfpData.catboxUrl;
+        } else {
+          imgEl.src = 'https://files.catbox.moe/hmicys.jpeg';
+        }
+
+        // Fetch user info
+        const infoRes = await fetch(`https://reaperxxxx-testldb.hf.space/user/${userId}/info`);
+        const infoData = await infoRes.json();
+        
+        if (infoData.status) {
+          const userInfo = infoData.groups[0] || {};
+          
+          const fullName = userInfo.fullName || 'N/A';
+          const username = userInfo.username || 'N/A';
           
-          const statsGrid = document.querySelector('.stats-grid');
-          if (statsGrid) {
-            statsGrid.appendChild(rankElement);
+          if (fullName !== 'N/A') {
+            document.getElementById('userName').textContent = fullName;
+            document.getElementById('userName').style.display = 'block';
           }
+          
+          // Update floating widget
+          document.getElementById('widgetName').textContent = fullName;
+          document.getElementById('widgetId').textContent = `ID: ${userId}`;
+          document.getElementById('widgetAvatar').src = document.getElementById('pfp').src;
+          updateGlobalRank(infoData.totalLevel);
+          document.getElementById('floatingWidget').style.display = 'block';
+
+          // Display basic stats
+          document.getElementById('fullName').textContent = fullName;
+          document.getElementById('username').textContent = username;
+          document.getElementById('totalXP').textContent = infoData.totalXP.toLocaleString();
+          document.getElementById('totalLevel').textContent = infoData.totalLevel;
+          document.getElementById('totalRoyalties').textContent = infoData.totalRoyalties.toLocaleString();
+          document.getElementById('totalDailyMessages').textContent = infoData.totalDailyMessages;
+          document.getElementById('groupCount').textContent = infoData.groups.length;
+
+          // Show stats grid
+          document.getElementById('statsGrid').style.display = 'grid';
+
+          // Group unique groups by groupId
+          const uniqueGroups = {};
+          
+          for (const group of infoData.groups) {
+            const groupId = group.groupId || group.id;
+            
+            if (!uniqueGroups[groupId]) {
+              uniqueGroups[groupId] = {
+                groupId: groupId,
+                fullName: group.fullName,
+                username: group.username,
+                totalLevel: 0,
+                totalXP: 0,
+                totalRoyalties: 0,
+                totalDailyMessages: 0,
+                entries: []
+              };
+            }
+            
+            uniqueGroups[groupId].totalLevel += group.level || 0;
+            uniqueGroups[groupId].totalXP += group.xp || 0;
+            uniqueGroups[groupId].totalRoyalties += group.royalties || 0;
+            uniqueGroups[groupId].totalDailyMessages += group.dailyMessages || 0;
+            uniqueGroups[groupId].entries.push({
+              level: group.level,
+              xp: group.xp,
+              royalties: group.royalties,
+              dailyMessages: group.dailyMessages
+            });
+          }
+
+          
+          document.getElementById('groupsContainer').innerHTML = '';
+
+          // Display group stats
+          const groupsContainer = document.getElementById('groupsContainer');
+
+          for (const groupId in uniqueGroups) {
+            const group = uniqueGroups[groupId];
+            
+            let groupMeta = null;
+            let metaError = null;
+            
+            try {
+              const groupMetaRes = await fetch(`https://reaperxxxx-testldb.hf.space/group/${groupId}/meta`);
+              
+              if (groupMetaRes.ok) {
+                groupMeta = await groupMetaRes.json();
+              } else {
+                const errorText = await groupMetaRes.text();
+                metaError = `API Error: ${groupMetaRes.status}`;
+              }
+            } catch (err) {
+              metaError = `Fetch Error: ${err.message}`;
+            }
+
+            const div = document.createElement('div');
+            div.className = 'group-box';
+
+            const displayName = (groupMeta && groupMeta.status && groupMeta.groupName)
+               ? groupMeta.groupName
+               : group.fullName || 'Unknown Group';
+            
+            const groupPic = (groupMeta && groupMeta.status && groupMeta.groupPic)
+               ? groupMeta.groupPic
+               : null;
+            
+            const admins = (groupMeta && groupMeta.status && groupMeta.admins)
+               ? groupMeta.admins
+               : null;
+
+            div.innerHTML = `
+              <div class="group-header">
+                ${groupPic ? `<img class="group-pic" src="${groupPic}" alt="Group Picture">` : '<div class="group-pic" style="background: linear-gradient(45deg, #00bcd4, #87ceeb); display: flex; align-items: center; justify-content: center; color: #0a0a0a; font-weight: bold;">👥</div>'}
+                <div class="group-info">
+                  <div class="group-name">${displayName}</div>
+                  <div class="group-id">ID: ${groupId}</div>
+                </div>
+              </div>
+              
+              <div class="group-stats">
+                <div class="group-stat-item">
+                  <span class="group-stat-value">${group.totalLevel}</span>
+                  <span class="group-stat-label">Level</span>
+                </div>
+                <div class="group-stat-item">
+                  <span class="group-stat-value">${group.totalXP.toLocaleString()}</span>
+                  <span class="group-stat-label">XP</span>
+                </div>
+                <div class="group-stat-item">
+                  <span class="group-stat-value">${group.totalRoyalties.toLocaleString()}</span>
+                  <span class="group-stat-label">Royalties</span>
+                </div>
+                <div class="group-stat-item">
+                  <span class="group-stat-value">${group.totalDailyMessages}</span>
+                  <span class="group-stat-label">Daily</span>
+                </div>
+              </div>
+
+              ${metaError ? `<div class="error">⚠️ ${metaError}</div>` : ''}
+              
+              ${admins && admins.length > 0 ? `
+                <div class="group-admins">
+                  <details>
+                    <summary>👑 Admins (${admins.length})</summary>
+                    <div class="admin-list">
+                      ${admins.slice(0, 5).map(a => `<span class="admin-tag" onclick="window.open('https://t.me/finralxbot/info?startapp=${a.id}', '_blank')">${a.name || 'Unknown'}</span>`).join('')}
+                      ${admins.length > 5 ? `<span class="admin-tag">+${admins.length - 5} more</span>` : ''}
+                    </div>
+                  </details>
+                </div>` : ''}
+            `;
+
+            groupsContainer.appendChild(div);
+          }
+
+          document.getElementById('groupsSection').style.display = 'block';
+        }
 
+        try {
+          const nftsRes = await fetch(`https://reaperxxxx-testldb.hf.space/user/${userId}/nfts`);
+          const nftsData = await nftsRes.json();
+          
+          const nftsContainer = document.getElementById('nftsContainer');
+          const showAllBtn = document.getElementById('showAllNftsBtn');
+          const remainingCount = document.getElementById('remainingCount');
+          const nftStats = document.getElementById('nftStats');
+          
+          if (nftsData.status && nftsData.nfts && nftsData.nfts.length > 0) {
+            // Sort NFTs by holders (ascending) to show rarest first
+            const sortedNfts = nftsData.nfts.sort((a, b) => a.holders - b.holders);
+            
+            // Calculate NFT statistics
+            const totalNfts = sortedNfts.length;
+            const avgQuality = Math.round(sortedNfts.reduce((sum, nft) => sum + nft.nftquality, 0) / totalNfts);
+            const rarestHolders = Math.min(...sortedNfts.map(nft => nft.holders));
+            const highestQuality = Math.max(...sortedNfts.map(nft => nft.nftquality));
+            
+            // Update NFT stats
+            document.getElementById('totalNfts').textContent = totalNfts;
+            document.getElementById('avgQuality').textContent = avgQuality;
+            document.getElementById('rarestHolders').textContent = rarestHolders;
+            document.getElementById('highestQuality').textContent = highestQuality;
+            nftStats.style.display = 'block';
+            
+            function getQualityClass(quality) {
+              if (quality >= 81) return 'legendary';
+              if (quality >= 61) return 'way-better';
+              if (quality >= 41) return 'even-better';
+              if (quality >= 21) return 'better';
+              return 'basic';
+            }
+            
+            function getQualityBadgeClass(quality) {
+              if (quality >= 81) return 'quality-legendary';
+              if (quality >= 61) return 'quality-way-better';
+              if (quality >= 41) return 'quality-even-better';
+              if (quality >= 21) return 'quality-better';
+              return 'quality-basic';
+            }
+            
+            function getRarityClass(rarity) {
+              const rarityLower = rarity.toLowerCase();
+              if (rarityLower.includes('mythic')) return 'rarity-mythic';
+              if (rarityLower.includes('legendary')) return 'rarity-legendary';
+              if (rarityLower.includes('epic')) return 'rarity-epic';
+              if (rarityLower.includes('rare')) return 'rarity-rare';
+              if (rarityLower.includes('uncommon')) return 'rarity-uncommon';
+              return 'rarity-common';
+            }
+            
+            function formatDate(dateString) {
+              const date = new Date(dateString);
+              return date.toLocaleDateString('en-US', { 
+                month: 'short', 
+                day: 'numeric',
+                year: 'numeric'
+              });
+            }
+            
+            function formatDateTime(dateString) {
+              const date = new Date(dateString);
+              return date.toLocaleString('en-US', { 
+                month: 'short', 
+                day: 'numeric',
+                year: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit'
+              });
+            }
+            
+            function createNftCard(nft) {
+              const qualityClass = getQualityClass(nft.nftquality);
+              const qualityBadgeClass = getQualityBadgeClass(nft.nftquality);
+              const rarityClass = getRarityClass(nft.rarity);
+              const uniqueId = `details-${nft.nftid}`;
+
+              return `
+                <div class="nft-card ${qualityClass}" style="animation: fadeInUp 0.6s ease forwards; opacity: 0;">
+                  <div class="quality-badge ${qualityBadgeClass}">${nft.nftquality}</div>
+                  <img src="${nft.nftimage}" alt="${nft.name}" class="nft-image" loading="lazy">
+                  <div class="nft-info">
+                    <div class="nft-header">
+                      <div class="nft-name" title="${nft.name}">${nft.name}</div>
+                      <div class="nft-id">#${nft.nftid}</div>
+                    </div>
+                    <div class="nft-rarity ${rarityClass}">${nft.rarity}</div>
+                    <button class="toggle-details" onclick="toggleDetails('${uniqueId}', this)">▼ Show Details</button>
+                    <div class="nft-details-wrapper" id="${uniqueId}" style="display: none;">
+                      <div class="nft-details">
+                        <div class="nft-detail">
+                          <span class="nft-detail-label">Quality</span>
+                          <span class="nft-detail-value">${nft.nftquality}/100</span>
+                        </div>
+                        <div class="nft-detail">
+                          <span class="nft-detail-label">Holders</span>
+                          <span class="nft-detail-value">${nft.holders}</span>
+                        </div>
+                      </div>
+                      <div class="nft-obtained">
+                        <span class="nft-obtained-label">Obtained On</span>
+                        <span class="nft-obtained-value">${formatDateTime(nft.gotten_on)}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              `;
+            }
+            
+            // Show first 5 NFTs initially
+            const initialNfts = sortedNfts.slice(0, 5);
+            const remainingNfts = sortedNfts.slice(5);
+            
+            nftsContainer.innerHTML = `
+              <div class="nfts-grid">
+                ${initialNfts.map(nft => createNftCard(nft)).join('')}
+              </div>
+            `;
+            
+            // Show "Show All" button if there are more NFTs
+            if (remainingNfts.length > 0) {
+              remainingCount.textContent = remainingNfts.length;
+              showAllBtn.style.display = 'block';
+              
+              let allShown = false;
+              showAllBtn.addEventListener('click', () => {
+                if (!allShown) {
+                  const nftsGrid = nftsContainer.querySelector('.nfts-grid');
+                  nftsGrid.innerHTML += remainingNfts.map(nft => createNftCard(nft)).join('');
+                  showAllBtn.textContent = 'Show Less';
+                  allShown = true;
+                } else {
+                  const nftsGrid = nftsContainer.querySelector('.nfts-grid');
+                  nftsGrid.innerHTML = initialNfts.map(nft => createNftCard(nft)).join('');
+                  showAllBtn.innerHTML = `Show All NFTs (<span id="remainingCount">${remainingNfts.length}</span> more)`;
+                  allShown = false;
+                }
+              });
+            }
+            
+            setTimeout(() => {
+              const nftCards = document.querySelectorAll('.nft-card');
+              nftCards.forEach((card, index) => {
+                setTimeout(() => {
+                  card.style.opacity = '1';
+                }, index * 100);
+              });
+            }, 100);
+            
+            document.getElementById('nftsSection').style.display = 'block';
+          } else {
+            // No NFTs found
+            nftsContainer.innerHTML = `
+              <div class="no-nfts">
+                <div class="no-nfts-icon">🎨</div>
+                <h4>No NFTs Found</h4>
+                <p>This user hasn't collected any NFTs yet.</p>
+                <p>Start your digital art journey today!</p>
+              </div>
+            `;
+            document.getElementById('nftsSection').style.display = 'block';
+          }
+        } catch (err) {
+          console.error('Error fetching NFTs:', err);
+          const nftsContainer = document.getElementById('nftsContainer');
+          nftsContainer.innerHTML = `
+            <div class="no-nfts">
+              <div class="no-nfts-icon">⚠️</div>
+              <h4>Failed to Load NFTs</h4>
+              <p>Unable to fetch NFT collection data.</p>
+              <p>Please try again later.</p>
+            </div>
+          `;
+          document.getElementById('nftsSection').style.display = 'block';
+        }
+      } catch (err) {
+        console.error('Error fetching user data:', err);
+        document.getElementById('chatId').innerHTML = '<div class="error">❌ Failed to load user info</div>';
+      }
     });
 
     function toggleDetails(id, button) {