Spaces:

ReikerXx
/

strikes

Running

App Files Files Community

Reaperxxxx commited on 26 days ago

Commit

e839a8a

verified ·

1 Parent(s): dd29746

Update strikes.html

Browse files

Files changed (1) hide show

strikes.html +665 -57

strikes.html CHANGED Viewed

@@ -2,84 +2,692 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>Strike Leaderboard</title>
   <style>
     body {
-      font-family: Arial, sans-serif;
-      background: #f4f4f4;
-      padding: 20px;
-      color: #333;
     }
-    h1, h2 {
       text-align: center;
     }
-    table {
-      width: 100%;
       max-width: 600px;
-      margin: 20px auto;
       border-collapse: collapse;
-      background: #fff;
-      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
     }
-    th, td {
-      padding: 12px;
-      border: 1px solid #ddd;
       text-align: center;
     }
-    th {
-      background-color: #4CAF50;
       color: white;
     }
-    tr:nth-child(even) {
-      background-color: #f9f9f9;
     }
   </style>
 </head>
 <body>
-  <h1>🚨 Strike Leaderboard</h1>
-  <h2 id="group-info">Loading...</h2>
-  <table>
-    <thead>
-      <tr>
-        <th>#</th>
-        <th>User ID</th>
-        <th>Username</th>
-        <th>Strikes</th>
-      </tr>
-    </thead>
-    <tbody id="user-table">
-      <!-- User rows will go here -->
-    </tbody>
-  </table>
   <script>
-    const params = new URLSearchParams(window.location.search);
-    const group = params.get("group") || "Unknown Group";
-    const chatId = params.get("chat_id") || "N/A";
-    document.getElementById("group-info").textContent = `${group} (Chat ID: ${chatId})`;
-    const usersRaw = window.location.href.split("users=")[1];
-    if (usersRaw) {
-      const users = decodeURIComponent(usersRaw).split("&");
-      const tbody = document.getElementById("user-table");
-      users.forEach((entry, index) => {
-        const [id, username, strikes] = entry.split("?");
-        const row = document.createElement("tr");
-        row.innerHTML = `
-          <td>${index + 1}</td>
-          <td>${id}</td>
-          <td>${username}</td>
-          <td>${strikes}</td>
         `;
-        tbody.appendChild(row);
-      });
     }
   </script>
 </body>
 </html>

 <html lang="en">
 <head>
   <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Strike Leaderboard - ANTI NSFW Bot</title>
   <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    :root {
+      --primary-purple: #8b5cf6;
+      --dark-purple: #5b21b6;
+      --light-purple: #c4b5fd;
+      --accent-pink: #ec4899;
+      --warning-orange: #f59e0b;
+      --danger-red: #ef4444;
+      --success-green: #10b981;
+      --dark-bg: #0f0f23;
+      --card-bg: rgba(139, 92, 246, 0.08);
+      --glass-bg: rgba(255, 255, 255, 0.05);
+      --text-primary: #f8fafc;
+      --text-secondary: #cbd5e1;
+      --text-muted: #94a3b8;
+      --border-glow: rgba(139, 92, 246, 0.3);
+      --table-row-hover: rgba(139, 92, 246, 0.1);
+    }
     body {
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+      background: var(--dark-bg);
+      color: var(--text-primary);
+      line-height: 1.6;
+      min-height: 100vh;
+      overflow-x: hidden;
+    }
+    /* Animated background */
+    body::before {
+      content: '';
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background:
+        radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
+        radial-gradient(circle at 80% 20%, rgba(236, 72, 153, 0.1) 0%, transparent 50%),
+        radial-gradient(circle at 40% 40%, rgba(91, 33, 182, 0.05) 0%, transparent 50%);
+      z-index: -1;
+      animation: backgroundPulse 8s ease-in-out infinite;
+    }
+    @keyframes backgroundPulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.8; }
+    }
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 40px 20px;
     }
+    /* Header Section */
+    .header {
       text-align: center;
+      margin-bottom: 50px;
+      position: relative;
     }
+    .header::before {
+      content: '';
+      position: absolute;
+      top: -20px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 200px;
+      height: 200px;
+      background: conic-gradient(from 0deg, transparent, var(--primary-purple), transparent);
+      border-radius: 50%;
+      opacity: 0.1;
+      animation: rotate 15s linear infinite;
+    }
+    @keyframes rotate {
+      to { transform: translateX(-50%) rotate(360deg); }
+    }
+    .warning-badge {
+      display: inline-block;
+      background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(245, 158, 11, 0.2));
+      backdrop-filter: blur(10px);
+      border: 1px solid rgba(239, 68, 68, 0.3);
+      padding: 8px 20px;
+      border-radius: 50px;
+      font-size: 0.9rem;
+      font-weight: 500;
+      margin-bottom: 20px;
+      color: #fca5a5;
+      animation: float 3s ease-in-out infinite;
+    }
+    @keyframes float {
+      0%, 100% { transform: translateY(0px); }
+      50% { transform: translateY(-8px); }
+    }
+    h1 {
+      font-size: clamp(2.5rem, 6vw, 4rem);
+      font-weight: 800;
+      background: linear-gradient(135deg, var(--danger-red), var(--warning-orange), var(--accent-pink));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      margin-bottom: 15px;
+      letter-spacing: -0.02em;
+      animation: titleGlow 3s ease-in-out infinite alternate;
+    }
+    @keyframes titleGlow {
+      from { filter: drop-shadow(0 0 20px rgba(239, 68, 68, 0.5)); }
+      to { filter: drop-shadow(0 0 40px rgba(239, 68, 68, 0.8)); }
+    }
+    .group-info {
+      background: var(--glass-bg);
+      backdrop-filter: blur(20px);
+      border: 1px solid var(--border-glow);
+      padding: 20px 30px;
+      border-radius: 16px;
+      margin: 30px auto;
       max-width: 600px;
+      font-size: 1.1rem;
+      color: var(--text-secondary);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+      position: relative;
+      overflow: hidden;
+    }
+    .group-info::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 1px;
+      background: linear-gradient(90deg, transparent, var(--primary-purple), transparent);
+    }
+    .group-icon {
+      font-size: 1.5rem;
+      filter: drop-shadow(0 0 10px currentColor);
+    }
+    /* Enhanced Table Container */
+    .table-container {
+      background: var(--glass-bg);
+      backdrop-filter: blur(20px);
+      border: 1px solid var(--border-glow);
+      border-radius: 24px;
+      overflow: hidden;
+      box-shadow:
+        0 20px 60px rgba(139, 92, 246, 0.2),
+        inset 0 1px 0 rgba(255, 255, 255, 0.1);
+      position: relative;
+    }
+    .table-container::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background: linear-gradient(90deg, var(--danger-red), var(--warning-orange), var(--accent-pink));
+    }
+    .table-header {
+      padding: 30px;
+      text-align: center;
+      border-bottom: 1px solid var(--border-glow);
+      background: rgba(139, 92, 246, 0.05);
+    }
+    .table-title {
+      font-size: 1.5rem;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin-bottom: 8px;
+    }
+    .table-subtitle {
+      color: var(--text-muted);
+      font-size: 0.95rem;
+    }
+    /* Enhanced Table */
+    .leaderboard-table {
+      width: 100%;
       border-collapse: collapse;
+      background: transparent;
+    }
+    .table-head {
+      background: linear-gradient(135deg, var(--primary-purple), var(--dark-purple));
+    }
+    .table-head th {
+      padding: 20px 15px;
+      text-align: center;
+      color: white;
+      font-weight: 600;
+      font-size: 0.95rem;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      border: none;
+      position: relative;
+    }
+    .table-head th:not(:last-child)::after {
+      content: '';
+      position: absolute;
+      right: 0;
+      top: 25%;
+      height: 50%;
+      width: 1px;
+      background: rgba(255, 255, 255, 0.2);
+    }
+    .user-row {
+      border: none;
+      transition: all 0.3s ease;
+      position: relative;
+    }
+    .user-row:hover {
+      background: var(--table-row-hover);
+      transform: translateX(5px);
+    }
+    .user-row td {
+      padding: 18px 15px;
+      border: none;
+      border-bottom: 1px solid rgba(139, 92, 246, 0.1);
+      text-align: center;
+      vertical-align: middle;
+    }
+    .user-row:last-child td {
+      border-bottom: none;
     }
+    /* Rank styling */
+    .rank {
+      font-weight: 700;
+      font-size: 1.1rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+    }
+    .rank-1 { color: #ffd700; }
+    .rank-2 { color: #c0c0c0; }
+    .rank-3 { color: #cd7f32; }
+    .rank-badge {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: bold;
+      font-size: 0.9rem;
+    }
+    .rank-1 .rank-badge {
+      background: linear-gradient(135deg, #ffd700, #ffed4e);
+      color: #92400e;
+      box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
+    }
+    .rank-2 .rank-badge {
+      background: linear-gradient(135deg, #c0c0c0, #e5e7eb);
+      color: #374151;
+      box-shadow: 0 4px 15px rgba(192, 192, 192, 0.4);
+    }
+    .rank-3 .rank-badge {
+      background: linear-gradient(135deg, #cd7f32, #d97706);
+      color: white;
+      box-shadow: 0 4px 15px rgba(205, 127, 50, 0.4);
+    }
+    .rank-other .rank-badge {
+      background: linear-gradient(135deg, var(--card-bg), rgba(139, 92, 246, 0.2));
+      color: var(--text-secondary);
+      border: 1px solid var(--border-glow);
+    }
+    /* User ID styling */
+    .user-id {
+      font-family: 'JetBrains Mono', 'Courier New', monospace;
+      color: var(--text-muted);
+      font-size: 0.9rem;
+      background: rgba(139, 92, 246, 0.1);
+      padding: 4px 8px;
+      border-radius: 6px;
+      border: 1px solid rgba(139, 92, 246, 0.2);
+    }
+    /* Username styling */
+    .username {
+      font-weight: 500;
+      color: var(--text-primary);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+    }
+    .username::before {
+      content: '@';
+      color: var(--primary-purple);
+      font-weight: 600;
+    }
+    /* Strike count styling */
+    .strikes {
+      font-weight: 700;
+      font-size: 1.1rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+    }
+    .strike-count {
+      padding: 8px 12px;
+      border-radius: 20px;
+      font-weight: 600;
+      min-width: 50px;
+    }
+    .strikes-low {
+      background: rgba(16, 185, 129, 0.2);
+      color: #6ee7b7;
+      border: 1px solid rgba(16, 185, 129, 0.3);
+    }
+    .strikes-medium {
+      background: rgba(245, 158, 11, 0.2);
+      color: #fbbf24;
+      border: 1px solid rgba(245, 158, 11, 0.3);
+    }
+    .strikes-high {
+      background: rgba(239, 68, 68, 0.2);
+      color: #fca5a5;
+      border: 1px solid rgba(239, 68, 68, 0.3);
+      animation: pulse 2s infinite;
+    }
+    /* Empty state */
+    .empty-state {
       text-align: center;
+      padding: 60px 20px;
+      color: var(--text-muted);
+    }
+    .empty-icon {
+      font-size: 4rem;
+      margin-bottom: 20px;
+      opacity: 0.5;
     }
+    .empty-message {
+      font-size: 1.2rem;
+      margin-bottom: 10px;
+    }
+    .empty-subtitle {
+      font-size: 0.95rem;
+      opacity: 0.7;
+    }
+    /* Loading animation */
+    .loading {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+      padding: 40px;
+      color: var(--text-secondary);
+    }
+    .loading-spinner {
+      width: 24px;
+      height: 24px;
+      border: 3px solid rgba(139, 92, 246, 0.2);
+      border-top: 3px solid var(--primary-purple);
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+    /* Statistics cards */
+    .stats-container {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: 20px;
+      margin-bottom: 40px;
+    }
+    .stat-card {
+      background: var(--glass-bg);
+      backdrop-filter: blur(10px);
+      border: 1px solid var(--border-glow);
+      border-radius: 16px;
+      padding: 25px;
+      text-align: center;
+      transition: all 0.3s ease;
+    }
+    .stat-card:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 15px 40px rgba(139, 92, 246, 0.2);
+    }
+    .stat-value {
+      font-size: 2rem;
+      font-weight: 700;
+      color: var(--primary-purple);
+      margin-bottom: 5px;
+    }
+    .stat-label {
+      color: var(--text-secondary);
+      font-size: 0.9rem;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+    /* Responsive design */
+    @media (max-width: 768px) {
+      .container { padding: 20px 15px; }
+      h1 { font-size: 2.5rem; }
+      .table-container { border-radius: 16px; }
+      .table-header { padding: 20px; }
+      .table-head th { padding: 15px 10px; font-size: 0.85rem; }
+      .user-row td { padding: 15px 10px; }
+      .group-info {
+        flex-direction: column;
+        gap: 8px;
+        text-align: center;
+      }
+      .stats-container { grid-template-columns: 1fr; gap: 15px; }
+    }
+    /* Selection styling */
+    ::selection {
+      background: var(--primary-purple);
       color: white;
     }
+    /* Smooth scrolling */
+    html {
+      scroll-behavior: smooth;
     }
   </style>
 </head>
 <body>
+  <div class="container">
+    <div class="header">
+      <div class="warning-badge">⚠️ Violation Tracking</div>
+      <h1>🚨 Strike Leaderboard</h1>
+    </div>
+    <div class="group-info" id="group-info">
+      <span class="group-icon">🏢</span>
+      <div class="loading">
+        <div class="loading-spinner"></div>
+        <span>Loading group information...</span>
+      </div>
+    </div>
+    <div class="stats-container" id="stats-container" style="display: none;">
+      <div class="stat-card">
+        <div class="stat-value" id="total-users">0</div>
+        <div class="stat-label">Total Users</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-value" id="total-strikes">0</div>
+        <div class="stat-label">Total Strikes</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-value" id="avg-strikes">0</div>
+        <div class="stat-label">Avg Strikes</div>
+      </div>
+    </div>
+    <div class="table-container">
+      <div class="table-header">
+        <div class="table-title">User Violation Rankings</div>
+        <div class="table-subtitle">Users with the highest number of content policy violations</div>
+      </div>
+      <table class="leaderboard-table">
+        <thead class="table-head">
+          <tr>
+            <th>Rank</th>
+            <th>User ID</th>
+            <th>Username</th>
+            <th>Strike Count</th>
+          </tr>
+        </thead>
+        <tbody id="user-table">
+          <tr>
+            <td colspan="4" class="loading">
+              <div class="loading-spinner"></div>
+              <span>Loading user data...</span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
   <script>
+    function initializeLeaderboard() {
+      const params = new URLSearchParams(window.location.search);
+      const group = params.get("group") || "Unknown Group";
+      const chatId = params.get("chat_id") || "N/A";
+      // Update group info
+      const groupInfo = document.getElementById("group-info");
+      groupInfo.innerHTML = `
+        <span class="group-icon">🏢</span>
+        <div>
+          <strong>${group}</strong><br>
+          <small>Chat ID: ${chatId}</small>
+        </div>
+      `;
+      // Parse users data
+      const usersRaw = window.location.href.split("users=")[1];
+      if (usersRaw) {
+        const users = decodeURIComponent(usersRaw).split("&");
+        const tbody = document.getElementById("user-table");
+        const statsContainer = document.getElementById("stats-container");
+        if (users.length === 0 || (users.length === 1 && users[0] === "")) {
+          // Show empty state
+          tbody.innerHTML = `
+            <tr>
+              <td colspan="4" class="empty-state">
+                <div class="empty-icon">🎉</div>
+                <div class="empty-message">No violations found!</div>
+                <div class="empty-subtitle">Your community is maintaining excellent standards</div>
+              </td>
+            </tr>
+          `;
+          return;
+        }
+        // Clear loading state
+        tbody.innerHTML = "";
+        // Calculate statistics
+        let totalStrikes = 0;
+        const validUsers = users.filter(entry => entry.trim() !== "");
+        // Sort users by strike count (descending)
+        const sortedUsers = validUsers
+          .map(entry => {
+            const [id, username, strikes] = entry.split("?");
+            const strikeCount = parseInt(strikes) || 0;
+            totalStrikes += strikeCount;
+            return { id, username, strikes: strikeCount };
+          })
+          .sort((a, b) => b.strikes - a.strikes);
+        const avgStrikes = validUsers.length > 0 ? (totalStrikes / validUsers.length).toFixed(1) : 0;
+        // Update statistics
+        document.getElementById("total-users").textContent = validUsers.length;
+        document.getElementById("total-strikes").textContent = totalStrikes;
+        document.getElementById("avg-strikes").textContent = avgStrikes;
+        statsContainer.style.display = "grid";
+        // Populate table
+        sortedUsers.forEach((user, index) => {
+          const rank = index + 1;
+          const row = document.createElement("tr");
+          row.className = "user-row";
+          // Determine rank class and strike severity
+          let rankClass = "rank-other";
+          if (rank === 1) rankClass = "rank-1";
+          else if (rank === 2) rankClass = "rank-2";
+          else if (rank === 3) rankClass = "rank-3";
+          let strikeClass = "strikes-low";
+          if (user.strikes >= 5) strikeClass = "strikes-high";
+          else if (user.strikes >= 3) strikeClass = "strikes-medium";
+          // Add trophy emoji for top 3
+          let rankDisplay = rank;
+          if (rank === 1) rankDisplay = "🥇";
+          else if (rank === 2) rankDisplay = "🥈";
+          else if (rank === 3) rankDisplay = "🥉";
+          row.innerHTML = `
+            <td>
+              <div class="rank ${rankClass}">
+                <div class="rank-badge">${rankDisplay}</div>
+              </div>
+            </td>
+            <td>
+              <div class="user-id">${user.id}</div>
+            </td>
+            <td>
+              <div class="username">${user.username || 'N/A'}</div>
+            </td>
+            <td>
+              <div class="strikes">
+                <div class="strike-count ${strikeClass}">${user.strikes}</div>
+              </div>
+            </td>
+          `;
+          // Add stagger animation
+          row.style.animationDelay = `${index * 0.1}s`;
+          row.style.animation = "slideIn 0.6s ease-out forwards";
+          tbody.appendChild(row);
+        });
+      } else {
+        // No data provided
+        const tbody = document.getElementById("user-table");
+        tbody.innerHTML = `
+          <tr>
+            <td colspan="4" class="empty-state">
+              <div class="empty-icon">📊</div>
+              <div class="empty-message">No data available</div>
+              <div class="empty-subtitle">Strike data could not be loaded</div>
+            </td>
+          </tr>
         `;
+      }
+    }
+    // Add slide-in animation
+    const style = document.createElement('style');
+    style.textContent = `
+      @keyframes slideIn {
+        from {
+          opacity: 0;
+          transform: translateY(20px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+    `;
+    document.head.appendChild(style);
+    // Initialize when DOM is loaded
+    document.addEventListener('DOMContentLoaded', initializeLeaderboard);
+    // Fallback initialization
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', initializeLeaderboard);
+    } else {
+      initializeLeaderboard();
     }
   </script>
 </body>
 </html>