Spaces:

Cairo303
/

anycoder-bc1ac3dc

Running

App Files Files Community

Cairo303 commited on Dec 6, 2025

Commit

6cef673

verified ·

1 Parent(s): 61973e8

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +428 -336

index.html CHANGED Viewed

@@ -4,7 +4,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Rankings - Underworld Chronicles</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   <style>
     /* Underworld Crime UI Framework */
@@ -159,6 +159,12 @@
       border: 2px solid var(--gold);
     }
     .uc-btn-block {
       width: 100%;
     }
@@ -697,204 +703,201 @@
       background: linear-gradient(transparent, rgba(212, 175, 55, 0.1);
     }
-    /* Rankings Page Specific Styles */
-    .uc-rankings-page {
       min-height: 100vh;
       padding-top: 120px;
       padding-bottom: 3rem;
     }
-    .uc-rankings-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 2rem;
     }
-    .uc-rankings-title {
       font-size: 2.2rem;
       color: var(--light-gold);
       text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
     }
-    .uc-rankings-subtitle {
       color: var(--platinum);
       opacity: 0.8;
       margin-top: 0.5rem;
     }
-    .uc-rankings-filters {
-      display: flex;
-      gap: 1rem;
       margin-bottom: 2rem;
     }
-    .uc-rankings-controls {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 1.5rem;
     }
-    .uc-rankings-search {
-      position: relative;
-      width: 300px;
     }
-    .uc-rankings-search-input {
-      width: 100%;
-      padding: 0.7rem 1rem;
-      border-radius: 8px;
-      border: 1px solid rgba(212, 175, 55, 0.35);
-      background: rgba(0, 0, 0, 0.35);
-      color: var(--platinum);
-      font-size: 0.9rem;
     }
-    .uc-rankings-search-btn {
-      position: absolute;
-      right: 5px;
-      top: 50%;
-      transform: translateY(-50%);
-      background: transparent;
-      border: none;
-      color: var(--gold);
-      cursor: pointer;
     }
-    /* Pagination Styles */
-    .uc-pagination {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      gap: 0.5rem;
-      margin-top: 2rem;
     }
-    .uc-pagination-btn {
-      padding: 0.5rem 0.8rem;
-      border-radius: 6px;
-      border: 1px solid rgba(212, 175, 55, 0.3);
-      background: rgba(0, 0, 0, 0.2);
-      color: var(--platinum);
-      cursor: pointer;
       transition: all 0.3s ease;
     }
-    .uc-pagination-btn:hover {
-      background: rgba(212, 175, 55, 0.15);
     }
-    .uc-pagination-btn.active {
       background: linear-gradient(45deg, var(--gold), var(--dark-gold)));
       color: var(--charcoal);
     }
-    .uc-pagination-btn:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-    .uc-pagination-info {
-      font-size: 0.8rem;
-      opacity: 0.7;
     }
-    /* Ranking table specific styles */
-    .uc-rankings-table {
-      background: linear-gradient(145deg, var(--royal-purple), var(--deep-purple)));
-      border-radius: 15px;
-      border: 2px solid var(--gold);
-      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
-      overflow: hidden;
     }
-    .uc-rankings-table-header {
-      background: linear-gradient(45deg, var(--gold), var(--dark-gold)));
-      padding: 1.2rem 1.5rem;
-      color: var(--charcoal);
-      font-weight: bold;
-      text-transform: uppercase;
-      letter-spacing: 1px;
     }
-    .uc-rankings-table-body {
-      max-height: 500px;
-      overflow-y: auto;
     }
-    .uc-rankings-table-row {
-      display: grid;
-      grid-template-columns: 80px 1fr 1fr 1fr;
-      align-items: center;
-      padding: 0.8rem 1.5rem;
-      border-bottom: 1px solid rgba(212, 175, 55, 0.2);
-      transition: all 0.3s ease;
     }
-    .uc-rankings-table-row:last-child {
-      border-bottom: none;
     }
-    .uc-rankings-table-row:hover {
-      background: rgba(212, 175, 55, 0.08);
     }
-    .uc-rank-number {
-      font-weight: bold;
-      font-size: 1rem;
-      color: var(--gold);
-      text-align: center;
     }
-    .uc-rank-username {
-      font-weight: 600;
     }
-    .uc-rank-city {
-      color: var(--platinum);
-      opacity: 0.9;
     }
-    .uc-rank-networth {
-      font-weight: 700;
-      color: var(--light-gold);
-      text-shadow: 0 0 5px rgba(212, 175, 55, 0.3);
     }
-    /* Top ranks special styling */
-    .uc-rank-top {
-      background: linear-gradient(90deg, rgba(212, 175, 55, 0.05), transparent);
-      border-left: 3px solid var(--gold);
     }
-    .uc-rank-1 .uc-rank-number {
-      font-size: 1.3rem;
-      background: linear-gradient(45deg, var(--gold), var(--light-gold)));
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      text-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
     }
-    /* Responsive adjustments for rankings */
     @media (max-width: 768px) {
-      .uc-rankings-table-row {
-        grid-template-columns: 60px 1fr 1fr 1fr;
-        padding: 0.8rem 1rem;
-      }
-      .uc-rankings-filters {
-        flex-direction: column;
       }
-      .uc-rankings-search {
-        width: 100%;
       }
-      .uc-rankings-controls {
-        flex-direction: column;
-        gap: 1rem;
-        align-items: stretch;
       }
     }
@@ -962,18 +965,41 @@
         transform: translateX(5px);
       }
     }
   </style>
 </head>
 <body>
   <header class="uc-header">
     <div class="uc-container">
       <nav class="uc-nav">
         <div class="uc-logo">UNDERWORLD<span>CHRONICLES</span></div>
         <ul class="uc-nav-menu">
           <li><a href="#">Home</a></li>
-          <li><a href="#" class="active">Rankings</a></li>
-          <li><a href="#">Gameplay</a></li>
           <li><a href="#">Factions</a></li>
           <li><a href="#">Leaderboards</a></li>
           <li><a href="#">Support</a></li>
@@ -989,243 +1015,309 @@
   <div class="alley-container">
     <div class="alley-wall left"></div>
     <div class="alley-wall right"></div>
-    <div class="neon-sign">UNDERWORLD<br>ELITE</div>
     <div class="dripping-effect"></div>
   </div>
   <div class="uc-app-layout">
     <aside class="uc-sidebar">
-      <h3 class="uc-sidebar-title">Underworld Operations</h3>
       <ul class="uc-sidebar-nav">
-        <li><a href="#" class="uc-sidebar-link"><i class="fas fa-home"></i> Headquarters</a></li>
-        <li><a href="#" class="uc-sidebar-link active"><i class="fas fa-trophy"></i> Rankings</a></li>
-        <li><a href="#" class="uc-sidebar-link"><i class="fas fa-map-marked-alt"></i> Territory Map</a></li>
-        <li><a href="#" class="uc-sidebar-link"><i class="fas fa-users"></i> Syndicates</a></li>
-        <li><a href="#" class="uc-sidebar-link"><i class="fas fa-hand-holding-usd"></i> Black Market</a></li>
-        <li><a href="#" class="uc-sidebar-link"><i class="fas fa-user-secret"></i> Espionage</a></li>
-        <li><a href="#" class="uc-sidebar-link"><i class="fas fa-cog"></i> Operations</a></li>
-        <li><a href="#" class="uc-sidebar-link"><i class="fas fa-shield-alt"></i> Security</a></li>
-        <li><a href="#" class="uc-sidebar-link"><i class="fas fa-chart-line"></i> Intelligence</a></li>
-        <li><a href="#" class="uc-sidebar-link"><i class="fas fa-headset"></i> Support</a></li>
-      </ul>
-    </aside>
-    <main class="uc-app-main">
-      <div class="uc-rankings-page">
-        <div class="uc-rankings-header">
-          <div>
-            <h1 class="uc-rankings-title">UNDERWORLD RANKINGS</h1>
-            <p class="uc-rankings-subtitle">Track the most powerful players in the criminal underworld</p>
-          </div>
-          <div class="uc-rankings-controls">
-            <div class="uc-rankings-search">
-              <input type="text" class="uc-rankings-search-input" placeholder="Search players...">
-              <button class="uc-rankings-search-btn"><i class="fas fa-search"></i></button>
-            </div>
-          </div>
-          <div class="uc-rankings-filters">
-            <button class="uc-btn uc-btn-outline"><i class="fas fa-filter"></i> Filter</button>
-            <button class="uc-btn uc-btn-outline"><i class="fas fa-sync-alt"></i> Refresh</button>
-            <button class="uc-btn uc-btn-outline"><i class="fas fa-download"></i> Export</button>
           </div>
-          <div class="uc-rankings-table">
-            <div class="uc-rankings-table-header">
-              <div class="uc-rankings-table-row">
-                <div>RANK</div>
-                <div>USERNAME</div>
-                <div>CITY</div>
-                <div>NETWORTH ($)</div>
-              </div>
-            </div>
-            <div class="uc-rankings-table-body">
-              <!-- Rank 1 -->
-              <div class="uc-rankings-table-row uc-rank-top uc-rank-1">
-                <div class="uc-rank-number">1</div>
-                <div class="uc-rank-username">ShadowKing</div>
-                <div class="uc-rank-city">New York</div>
-                <div class="uc-rank-networth">$45,780,250</div>
-              </div>
-              <!-- Rank 2 -->
-              <div class="uc-rankings-table-row uc-rank-top">
-                <div class="uc-rank-number">2</div>
-                <div class="uc-rank-username">CrimsonQueen</div>
-                <div class="uc-rank-city">Los Angeles</div>
-                <div class="uc-rank-networth">$38,920,100</div>
-              </div>
-              <!-- Rank 3 -->
-              <div class="uc-rankings-table-row uc-rank-top">
-                <div class="uc-rank-number">3</div>
-                <div class="uc-rank-username">SilentWolf</div>
-                <div class="uc-rank-city">Chicago</div>
-                <div class="uc-rank-networth">$32,450,800</div>
-              </div>
-              <!-- Empty rows to demonstrate pagination -->
-              <div class="uc-rankings-table-row">
-                <div class="uc-rank-number">-</div>
-                <div class="uc-rank-username">-</div>
-                <div class="uc-rank-city">-</div>
-                <div class="uc-rank-networth">-</div>
-              </div>
-              <div class="uc-rankings-table-row">
-                <div class="uc-rank-number">-</div>
-                <div class="uc-rank-username">-</div>
-                <div class="uc-rank-city">-</div>
-                <div class="uc-rank-networth">-</div>
-              </div>
-              <div class="uc-rankings-table-row">
-                <div class="uc-rank-number">-</div>
-                <div class="uc-rank-username">-</div>
-                <div class="uc-rank-city">-</div>
-                <div class="uc-rank-networth">-</div>
-              </div>
-              <div class="uc-rankings-table-row">
-                <div class="uc-rank-number">-</div>
-                <div class="uc-rank-username">-</div>
-                <div class="uc-rank-city">-</div>
-                <div class="uc-rank-networth">-</div>
-              </div>
-              <div class="uc-rankings-table-row">
-                <div class="uc-rank-number">-</div>
-                <div class="uc-rank-username">-</div>
-                <div class="uc-rank-city">-</div>
-                <div class="uc-rank-networth">-</div>
               </div>
-              <div class="uc-rankings-table-row">
-                <div class="uc-rank-number">-</div>
-                <div class="uc-rank-username">-</div>
-                <div class="uc-rank-city">-</div>
-                <div class="uc-rank-networth">-</div>
               </div>
-              <div class="uc-rankings-table-row">
-                <div class="uc-rank-number">-</div>
-                <div class="uc-rank-username">-</div>
-                <div class="uc-rank-city">-</div>
-                <div class="uc-rank-networth">-</div>
               </div>
-              <div class="uc-rankings-table-row">
-                <div class="uc-rank-number">-</div>
-                <div class="uc-rank-username">-</div>
-                <div class="uc-rank-city">-</div>
-                <div class="uc-rank-networth">-</div>
               </div>
-              <div class="uc-rankings-table-row">
-                <div class="uc-rank-number">-</div>
-                <div class="uc-rank-username">-</div>
-                <div class="uc-rank-city">-</div>
-                <div class="uc-rank-networth">-</div>
               </div>
-              <div class="uc-rankings-table-row">
-                <div class="uc-rank-number">-</div>
-                <div class="uc-rank-username">-</div>
-                <div class="uc-rank-city">-</div>
-                <div class="uc-rank-networth">-</div>
-              </div>
             </div>
           </div>
-          <div class="uc-pagination">
-            <button class="uc-pagination-btn" disabled><i class="fas fa-chevron-left"></i></button>
-            <button class="uc-pagination-btn active">1</button>
-            <button class="uc-pagination-btn">2</button>
-            <button class="uc-pagination-btn">3</button>
-            <button class="uc-pagination-btn">4</button>
-            <button class="uc-pagination-btn">5</button>
-            <span class="uc-pagination-info">...</span>
-            <button class="uc-pagination-btn">10</button>
-            <button class="uc-pagination-btn"><i class="fas fa-chevron-right"></i></button>
           </div>
         </div>
       </div>
-    </main>
-  </div>
-  <footer class="uc-footer">
-    <p>Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a> | Enter at your own risk</p>
-  </footer>
-  <script>
-    document.addEventListener('DOMContentLoaded', function() {
-      // Add interactive functionality to pagination
-      const paginationBtns = document.querySelectorAll('.uc-pagination-btn:not(:disabled)');
-      paginationBtns.forEach(btn => {
-        btn.addEventListener('click', function() {
-          // Remove active class from all buttons
-          paginationBtns.forEach(b => b.classList.remove('active'));
-          // Add active class to clicked button
-          this.classList.add('active');
-          // Show loading state
-          const tableBody = document.querySelector('.uc-rankings-table-body');
-          tableBody.style.opacity = '0.7';
-          setTimeout(() => {
-            tableBody.style.opacity = '1';
-          }, 300);
-        });
-      });
-      // Search functionality
-      const searchInput = document.querySelector('.uc-rankings-search-input');
-      const searchBtn = document.querySelector('.uc-rankings-search-btn');
-      searchBtn.addEventListener('click', function() {
-          performSearch();
-        });
-        searchInput.addEventListener('keypress', function(e) {
-          if (e.key === 'Enter') {
-            performSearch();
-          }
-        });
-        function performSearch() {
-          const query = searchInput.value.trim();
-          if (query) {
-            alert('Searching for: ' + query);
-            // In a real implementation, this would filter the table data
-          }
-        }
-        // Filter buttons functionality
-        const filterBtns = document.querySelectorAll('.uc-rankings-filters .uc-btn');
-        filterBtns.forEach(btn => {
-          btn.addEventListener('click', function() {
-            const filterType = this.querySelector('i').className;
-            alert('Filtering by: ' + this.textContent.trim());
-          });
-        }
-        // Add pulse effect to top ranks
-        const topRanks = document.querySelectorAll('.uc-rank-top');
-        topRanks.forEach(rank => {
-          setTimeout(() => {
-            rank.classList.add('uc-pulse');
-            setTimeout(() => {
-              rank.classList.remove('uc-pulse');
-            }, 2000);
-          }, Math.random() * 1000);
-        });
     });
-  </script>
 </body>
 </html>

 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Credits - Underworld Chronicles</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   <style>
     /* Underworld Crime UI Framework */
       border: 2px solid var(--gold);
     }
+    .uc-btn-success {
+      background: linear-gradient(45deg, var(--success), #27ae60));
+      color: white;
+      border: none;
+    }
     .uc-btn-block {
       width: 100%;
     }
       background: linear-gradient(transparent, rgba(212, 175, 55, 0.1);
     }
+    /* Credits Page Specific Styles */
+    .uc-credits-page {
       min-height: 100vh;
       padding-top: 120px;
       padding-bottom: 3rem;
     }
+    .uc-credits-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 2rem;
     }
+    .uc-credits-title {
       font-size: 2.2rem;
       color: var(--light-gold);
       text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
     }
+    .uc-credits-subtitle {
       color: var(--platinum);
       opacity: 0.8;
       margin-top: 0.5rem;
     }
+    /* Balance Display */
+    .uc-balance-display {
+      background: linear-gradient(145deg, var(--royal-purple), var(--deep-purple)));
+      border-radius: 15px;
+      border: 2px solid var(--gold);
+      padding: 2rem;
+      text-align: center;
       margin-bottom: 2rem;
     }
+    .uc-balance-label {
+      font-size: 1rem;
+      color: var(--platinum);
+      opacity: 0.9;
+      margin-bottom: 1rem;
     }
+    .uc-balance-amount {
+      font-size: 3.5rem;
+      font-weight: bold;
+      background: linear-gradient(45deg, var(--gold), var(--light-gold)));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      text-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
     }
+    /* Send Credits Section */
+    .uc-send-credits {
+      margin-bottom: 3rem;
     }
+    .uc-send-form {
+      display: grid;
+      grid-template-columns: 1fr 1fr auto;
+      gap: 1rem;
+      align-items: end;
     }
+    /* Credits Packages Section */
+    .uc-credits-packages {
+      margin-top: 3rem;
     }
+    .uc-package-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)));
+      gap: 1.5rem;
+    }
+    .uc-package-card {
+      text-align: center;
       transition: all 0.3s ease;
     }
+    .uc-package-card.featured {
+      transform: scale(1.05);
+      border-width: 3px;
+      position: relative;
     }
+    .uc-package-badge {
+      position: absolute;
+      top: -10px;
+      left: 50%;
+      transform: translateX(-50%);
       background: linear-gradient(45deg, var(--gold), var(--dark-gold)));
       color: var(--charcoal);
+      padding: 0.3rem 1rem;
+      border-radius: 20px;
+      font-size: 0.7rem;
+      font-weight: bold;
     }
+    .uc-package-name {
+      font-size: 1.2rem;
+      color: var(--light-gold);
+      margin-bottom: 0.5rem;
     }
+    .uc-package-price {
+      font-size: 1.8rem;
+      font-weight: bold;
+      color: var(--gold);
     }
+    .uc-package-credits {
+      font-size: 1.3rem;
+      margin-bottom: 0.3rem;
     }
+    .uc-package-bonus {
+      font-size: 0.9rem;
+      color: var(--success);
+      margin-bottom: 1rem;
     }
+    .uc-package-perks {
+      list-style: none;
+      margin: 1rem 0;
+      text-align: left;
     }
+    .uc-package-perks li {
+      padding: 0.3rem 0;
+      font-size: 0.85rem;
     }
+    .uc-package-perks li:before {
+      content: '✓';
+      color: var(--success);
+      margin-right: 0.5rem;
     }
+    /* Supporter Perks Legend */
+    .uc-perks-legend {
+      background: linear-gradient(145deg, var(--royal-purple), var(--deep-purple)));
+      border-radius: 15px;
+      border: 2px solid var(--gold);
+      padding: 1.5rem;
+      margin-top: 2rem;
     }
+    .uc-perks-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)));
+      gap: 1rem;
     }
+    .uc-perk-item {
+      display: flex;
+      align-items: center;
+      gap: 0.8rem;
+      padding: 0.5rem;
     }
+    .uc-perk-icon {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: rgba(212, 175, 55, 0.15);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--gold);
+      font-size: 1rem;
     }
+    .uc-perk-name {
+      font-weight: 600;
     }
+    .uc-perk-desc {
+      font-size: 0.8rem;
+      opacity: 0.8;
     }
+    /* Responsive adjustments for credits page */
     @media (max-width: 768px) {
+      .uc-send-form {
+        grid-template-columns: 1fr;
+        gap: 1rem;
       }
+      .uc-package-grid {
+        grid-template-columns: 1fr;
       }
+      .uc-package-card.featured {
+        transform: none;
       }
     }
         transform: translateX(5px);
       }
     }
+    /* Anycoder attribution */
+    .uc-anycoder-attribution {
+      position: fixed;
+      top: 10px;
+      right: 10px;
+      z-index: 1001;
+      font-size: 0.7rem;
+      opacity: 0.8;
+    }
+    .uc-anycoder-attribution a {
+      color: var(--gold);
+      text-decoration: none;
+    }
+    .uc-anycoder-attribution a:hover {
+      text-decoration: underline;
+    }
   </style>
 </head>
 <body>
+  <div class="uc-anycoder-attribution">
+    <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
+  </div>
   <header class="uc-header">
     <div class="uc-container">
       <nav class="uc-nav">
         <div class="uc-logo">UNDERWORLD<span>CHRONICLES</span></div>
         <ul class="uc-nav-menu">
           <li><a href="#">Home</a></li>
+          <li><a href="#">Rankings</a></li>
+          <li><a href="#" class="active">Credits</a></li>
           <li><a href="#">Factions</a></li>
           <li><a href="#">Leaderboards</a></li>
           <li><a href="#">Support</a></li>
   <div class="alley-container">
     <div class="alley-wall left"></div>
     <div class="alley-wall right"></div>
+    <div class="neon-sign">CREDITS<br>VAULT</div>
     <div class="dripping-effect"></div>
   </div>
   <div class="uc-app-layout">
     <aside class="uc-sidebar">
+      <h3 class="uc-sidebar-title">Financial Operations</h3>
       <ul class="uc-sidebar-nav">
+      <li><a href="#" class="uc-sidebar-link"><i class="fas fa-home"></i> Headquarters</a></li>
+      <li><a href="#" class="uc-sidebar-link"><i class="fas fa-trophy"></i> Rankings</a></li>
+      <li><a href="#" class="uc-sidebar-link active"><i class="fas fa-coins"></i> Credits</a></li>
+      <li><a href="#" class="uc-sidebar-link"><i class="fas fa-hand-holding-usd"></i> Black Market</a></li>
+      <li><a href="#" class="uc-sidebar-link"><i class="fas fa-money-bill-wave"></i> Money Laundering</a></li>
+      <li><a href="#" class="uc-sidebar-link"><i class="fas fa-chart-line"></i> Investments</a></li>
+      <li><a href="#" class="uc-sidebar-link"><i class="fas fa-shield-alt"></i> Security</a></li>
+      <li><a href="#" class="uc-sidebar-link"><i class="fas fa-piggy-bank"></i> Savings</a></li>
+      <li><a href="#" class="uc-sidebar-link"><i class="fas fa-headset"></i> Support</a></li>
+    </ul>
+  </aside>
+  <main class="uc-app-main">
+    <div class="uc-credits-page">
+      <div class="uc-credits-header">
+        <div>
+          <h1 class="uc-credits-title">CREDITS VAULT</h1>
+          <p class="uc-credits-subtitle">Manage your underworld currency and transactions</p>
+        </div>
+      </div>
+      <!-- Balance Display Section -->
+      <div class="uc-card">
+        <div class="uc-card-header">
+          <span>Current Balance</span>
+          <i class="fas fa-wallet"></i>
+        </div>
+        <div class="uc-card-body">
+          <div class="uc-balance-display">
+            <div class="uc-balance-label">AVAILABLE CREDITS</div>
+            <div class="uc-balance-amount">12,450</div>
           </div>
+        </div>
+      </div>
+      <!-- Send Credits Section -->
+      <div class="uc-card uc-send-credits">
+        <div class="uc-card-header">
+          <span>Send Credits</span>
+          <i class="fas fa-paper-plane"></i>
+          </div>
+          <div class="uc-card-body">
+            <div class="uc-send-form">
+              <div class="uc-form-group">
+                <label class="uc-form-label">Recipient ID/Username</label>
+                <input type="text" class="uc-input" placeholder="Enter player ID or username...">
+                <div class="uc-form-text">Type to search for players</div>
               </div>
+              <div class="uc-form-group">
+                <label class="uc-form-label">Amount to Send</label>
+                <input type="number" class="uc-input" placeholder="0" min="1" max="10000">
               </div>
+              <div class="uc-form-group">
+                <label class="uc-form-label">Round Number (Optional)</label>
+                <input type="number" class="uc-input" placeholder="Leave blank for current round">
               </div>
+            </div>
+            <button class="uc-btn uc-btn-success uc-btn-block">
+              <i class="fas fa-paper-plane"></i> Send Credits
+            </button>
+          </div>
+        </div>
+        <!-- Credits Packages Section -->
+        <div class="uc-credits-packages">
+          <div class="uc-card">
+            <div class="uc-card-header">
+              <span>Credit Packages</span>
+              <i class="fas fa-gem"></i>
+        </div>
+        <div class="uc-card-body">
+          <div class="uc-package-grid">
+            <!-- Bronze Package -->
+            <div class="uc-card uc-package-card">
+              <div class="uc-card-body">
+                <div class="uc-package-name">BRONZE PACKAGE</div>
+                <div class="uc-package-price">$4.99</div>
+                <div class="uc-package-credits">500 Credits</div>
+                <div class="uc-package-bonus">+50 Bonus Credits</div>
+                <ul class="uc-package-perks">
+                  <li>Bronze Supporter Badge</li>
+                  <li>Access to Bronze VIP Lounge</li>
+                  <li>5% Faster Money Laundering</li>
+                </ul>
+                <button class="uc-btn uc-btn-outline uc-btn-block">
+                  <i class="fab fa-paypal"></i> Purchase
+                </button>
               </div>
+            </div>
+            <!-- Silver Package -->
+            <div class="uc-card uc-package-card featured">
+                <div class="uc-package-badge">POPULAR</div>
+                <div class="uc-card-body">
+                  <div class="uc-package-name">SILVER PACKAGE</div>
+                  <div class="uc-package-price">$9.99</div>
+                  <div class="uc-package-credits">1,200 Credits</div>
+                  <div class="uc-package-bonus">+300 Bonus Credits</div>
+                  <ul class="uc-package-perks">
+                    <li>Silver Supporter Badge</li>
+                    <li>Access to Silver VIP Lounge</li>
+                    <li>10% Faster Money Laundering</li>
+                    <li>Exclusive Silver Weapon Skin</li>
+                </ul>
+                <button class="uc-btn uc-btn-primary uc-btn-block">
+                  <i class="fab fa-paypal"></i> Purchase
+                </button>
               </div>
+            </div>
+            <!-- Gold Package -->
+            <div class="uc-card uc-package-card">
+              <div class="uc-card-body">
+                <div class="uc-package-name">GOLD PACKAGE</div>
+                <div class="uc-package-price">$19.99</div>
+                <div class="uc-package-credits">3,000 Credits</div>
+                <div class="uc-package-bonus">+1,000 Bonus Credits</div>
+                <ul class="uc-package-perks">
+                  <li>Gold Supporter Badge</li>
+                  <li>Access to Gold VIP Lounge</li>
+                  <li>15% Faster Money Laundering</li>
+                  <li>Exclusive Gold Weapon Skin</li>
+                  <li>Priority Customer Support</li>
+                </ul>
+                <button class="uc-btn uc-btn-outline uc-btn-block">
+                <i class="fab fa-paypal"></i> Purchase
+              </button>
             </div>
           </div>
+          <!-- Platinum Package -->
+          <div class="uc-card uc-package-card">
+            <div class="uc-card-body">
+              <div class="uc-package-name">PLATINUM PACKAGE</div>
+              <div class="uc-package-price">$49.99</div>
+              <div class="uc-package-credits">8,000 Credits</div>
+              <div class="uc-package-bonus">+3,000 Bonus Credits</div>
+              <ul class="uc-package-perks">
+                <li>Platinum Supporter Badge</li>
+                <li>Access to Platinum VIP Lounge</li>
+                <li>20% Faster Money Laundering</li>
+                <li>Exclusive Platinum Weapon Skin</li>
+                <li>24/7 Priority Support</li>
+                <li>Early Access to New Features</li>
+                <li>Personal Account Manager</li>
+              </ul>
+              <button class="uc-btn uc-btn-outline uc-btn-block">
+                <i class="fab fa-paypal"></i> Purchase
+            </button>
           </div>
         </div>
       </div>
+    </div>
+    <!-- Supporter Perks Legend -->
+    <div class="uc-card uc-perks-legend">
+      <div class="uc-card-header">
+        <span>Supporter Perks Legend</span>
+        <i class="fas fa-crown"></i>
+      </div>
+      <div class="uc-card-body">
+        <div class="uc-perks-grid">
+          <div class="uc-perk-item">
+            <div class="uc-perk-icon">
+              <i class="fas fa-medal"></i>
+            </div>
+            <div>
+              <div class="uc-perk-name">Supporter Badges</div>
+              <div class="uc-perk-desc">Unique visual indicators of your status</div>
+            </div>
+          </div>
+          <div class="uc-perk-item">
+            <div class="uc-perk-icon">
+              <i class="fas fa-door-open"></i>
+            </div>
+            <div>
+              <div class="uc-perk-name">VIP Lounges</div>
+              <div class="uc-perk-desc">Exclusive areas with special features</div>
+          </div>
+          <div class="uc-perk-item">
+            <div class="uc-perk-icon">
+              <i class="fas fa-tachometer-alt"></i>
+            </div>
+            <div>
+              <div class="uc-perk-name">Faster Operations</div>
+              <div class="uc-perk-desc">Reduced timers for various underworld activities</div>
+          </div>
+          <div class="uc-perk-item">
+            <div class="uc-perk-icon">
+              <i class="fas fa-paint-roller"></i>
+            </div>
+            <div>
+              <div class="uc-perk-name">Exclusive Cosmetics</div>
+              <div class="uc-perk-desc">Unique visual customizations for your character</div>
+            </div>
+          </div>
+          <div class="uc-perk-item">
+            <div class="uc-perk-icon">
+              <i class="fas fa-headset"></i>
+            </div>
+            <div>
+              <div class="uc-perk-name">Priority Support</div>
+              <div class="uc-perk-desc">Faster response times and dedicated help</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    </div>
+  </main>
+</div>
+<footer class="uc-footer">
+  <p>Enter at your own risk | All transactions are final</p>
+</footer>
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    // Send credits functionality
+    const sendBtn = document.querySelector('.uc-send-credits .uc-btn-success');
+    const recipientInput = document.querySelector('.uc-send-credits .uc-input');
+    const amountInput = document.querySelectorAll('.uc-send-credits .uc-input')[1];
+    const roundInput = document.querySelectorAll('.uc-send-credits .uc-input')[2];
+    sendBtn.addEventListener('click', function() {
+      const recipient = recipientInput.value.trim();
+      const amount = parseInt(amountInput.value);
+      const round = roundInput.value.trim();
+      if (!recipient || !amount || amount <= 0) {
+      alert('Please enter a valid recipient and amount');
+      return;
+    }
+    const confirmation = confirm(`Send ${amount} credits to ${recipient}${round ? ' for round ' + round : ''}?`);
+    if (confirmation) {
+      // Show loading state
+      sendBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
+      sendBtn.disabled = true;
+      // Simulate API call
+      setTimeout(() => {
+        alert(`Successfully sent ${amount} credits to ${recipient}`);
+        sendBtn.innerHTML = '<i class="fas fa-paper-plane"></i> Send Credits';
+        sendBtn.disabled = false;
+        // Clear form
+        recipientInput.value = '';
+        amountInput.value = '';
+        roundInput.value = '';
+      }, 1500);
+    }
+  });
+  // Purchase package functionality
+  const purchaseBtns = document.querySelectorAll('.uc-package-card .uc-btn');
+  purchaseBtns.forEach(btn => {
+    btn.addEventListener('click', function() {
+      const packageCard = this.closest('.uc-package-card');
+      const packageName = packageCard.querySelector('.uc-package-name').textContent;
+      const packagePrice = packageCard.querySelector('.uc-package-price').textContent;
+      alert(`Redirecting to payment for ${packageName} - ${packagePrice}`);
+      // In real implementation, this would redirect to payment gateway
     });
+  });
+  // Search player functionality
+  let searchTimeout;
+  recipientInput.addEventListener('input', function() {
+    clearTimeout(searchTimeout);
+    const query = this.value.trim();
+    if (query.length >= 2) {
+      searchTimeout = setTimeout(() => {
+        console.log('Searching for player:', query);
+        // In real implementation, this would fetch player suggestions
+      }, 500);
+    }
+  });
+  // Add pulse effect to featured package
+  const featuredPackage = document.querySelector('.uc-package-card.featured');
+  if (featuredPackage) {
+    setInterval(() => {
+      featuredPackage.classList.add('uc-pulse');
+      setTimeout(() => {
+        featuredPackage.classList.remove('uc-pulse');
+      }, 2000);
+    }, 8000);
+  }
+});
+</script>
 </body>
 </html>