| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>User Strikes Dashboard</title> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; |
| background: radial-gradient(ellipse at top, #0f0728, #000000), |
| linear-gradient(135deg, #1a0033 0%, #0d0221 50%, #000000 100%); |
| color: #ffffff; |
| min-height: 100vh; |
| overflow-x: hidden; |
| position: relative; |
| font-weight: 400; |
| } |
| |
| |
| .bg-effects { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| pointer-events: none; |
| z-index: 1; |
| } |
| |
| .floating-orbs { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| } |
| |
| .orb { |
| position: absolute; |
| border-radius: 50%; |
| background: radial-gradient(circle at 30% 30%, rgba(138, 43, 226, 0.8), rgba(75, 0, 130, 0.4), transparent); |
| filter: blur(1px); |
| animation: float-orb 8s infinite ease-in-out; |
| } |
| |
| .orb:nth-child(1) { width: 200px; height: 200px; top: 10%; left: 10%; animation-delay: 0s; } |
| .orb:nth-child(2) { width: 150px; height: 150px; top: 60%; right: 15%; animation-delay: -2s; } |
| .orb:nth-child(3) { width: 100px; height: 100px; bottom: 20%; left: 20%; animation-delay: -4s; } |
| .orb:nth-child(4) { width: 120px; height: 120px; top: 30%; right: 40%; animation-delay: -6s; } |
| |
| @keyframes float-orb { |
| 0%, 100% { transform: translateY(0px) translateX(0px) scale(1); opacity: 0.3; } |
| 25% { transform: translateY(-30px) translateX(20px) scale(1.1); opacity: 0.5; } |
| 50% { transform: translateY(-10px) translateX(-15px) scale(0.9); opacity: 0.4; } |
| 75% { transform: translateY(20px) translateX(25px) scale(1.05); opacity: 0.6; } |
| } |
| |
| .particles { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| } |
| |
| .particle { |
| position: absolute; |
| width: 2px; |
| height: 2px; |
| background: linear-gradient(45deg, #9d4edd, #c77dff); |
| border-radius: 50%; |
| animation: particle-float 12s infinite linear; |
| box-shadow: 0 0 6px rgba(157, 78, 221, 0.6); |
| } |
| |
| @keyframes particle-float { |
| 0% { transform: translateY(100vh) translateX(0) rotate(0deg); opacity: 0; } |
| 10% { opacity: 1; } |
| 90% { opacity: 1; } |
| 100% { transform: translateY(-10vh) translateX(100px) rotate(360deg); opacity: 0; } |
| } |
| |
| .grid-overlay { |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background-image: |
| linear-gradient(rgba(157, 78, 221, 0.03) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(157, 78, 221, 0.03) 1px, transparent 1px); |
| background-size: 50px 50px; |
| animation: grid-move 20s linear infinite; |
| } |
| |
| @keyframes grid-move { |
| 0% { transform: translate(0, 0); } |
| 100% { transform: translate(50px, 50px); } |
| } |
| |
| .container { |
| position: relative; |
| z-index: 2; |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 60px 20px; |
| min-height: 100vh; |
| } |
| |
| .header { |
| text-align: center; |
| margin-bottom: 60px; |
| animation: slideDown 1.2s cubic-bezier(0.22, 1, 0.36, 1); |
| } |
| |
| .header h1 { |
| font-size: clamp(2.5rem, 5vw, 4rem); |
| font-weight: 900; |
| background: linear-gradient(135deg, #ffffff 0%, #c77dff 25%, #9d4edd 50%, #7209b7 75%, #480ca8 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| margin-bottom: 16px; |
| letter-spacing: -0.02em; |
| position: relative; |
| } |
| |
| .header h1::after { |
| content: ''; |
| position: absolute; |
| bottom: -10px; |
| left: 50%; |
| transform: translateX(-50%); |
| width: 100px; |
| height: 3px; |
| background: linear-gradient(90deg, transparent, #9d4edd, transparent); |
| border-radius: 2px; |
| } |
| |
| .header p { |
| font-size: 1.1rem; |
| opacity: 0.7; |
| letter-spacing: 0.5px; |
| font-weight: 400; |
| margin-top: 20px; |
| } |
| |
| .dashboard { |
| display: grid; |
| grid-template-columns: repeat(12, 1fr); |
| gap: 24px; |
| animation: fadeInUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both; |
| } |
| |
| .card { |
| background: rgba(255, 255, 255, 0.02); |
| backdrop-filter: blur(20px); |
| border: 1px solid rgba(157, 78, 221, 0.1); |
| border-radius: 24px; |
| padding: 32px; |
| position: relative; |
| overflow: hidden; |
| transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1); |
| box-shadow: |
| 0 8px 32px rgba(0, 0, 0, 0.3), |
| inset 0 1px 0 rgba(255, 255, 255, 0.1); |
| } |
| |
| .card:hover { |
| transform: translateY(-8px) scale(1.02); |
| box-shadow: |
| 0 20px 60px rgba(157, 78, 221, 0.2), |
| 0 8px 32px rgba(0, 0, 0, 0.4), |
| inset 0 1px 0 rgba(255, 255, 255, 0.2); |
| border-color: rgba(157, 78, 221, 0.3); |
| } |
| |
| .card::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: -100%; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); |
| transition: left 0.6s cubic-bezier(0.22, 1, 0.36, 1); |
| } |
| |
| .card:hover::before { |
| left: 100%; |
| } |
| |
| .card::after { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| height: 1px; |
| background: linear-gradient(90deg, transparent, rgba(157, 78, 221, 0.5), transparent); |
| } |
| |
| .strikes-display { |
| grid-column: 1 / -1; |
| text-align: center; |
| background: rgba(0, 0, 0, 0.4); |
| border: 2px solid rgba(157, 78, 221, 0.3); |
| position: relative; |
| min-height: 300px; |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| } |
| |
| .strikes-display::before { |
| content: ''; |
| position: absolute; |
| inset: -2px; |
| background: linear-gradient(45deg, #9d4edd, #c77dff, #9d4edd); |
| border-radius: 24px; |
| padding: 2px; |
| -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); |
| -webkit-mask-composite: exclude; |
| mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); |
| mask-composite: exclude; |
| animation: border-glow 3s ease-in-out infinite alternate; |
| } |
| |
| @keyframes border-glow { |
| 0% { opacity: 0.5; } |
| 100% { opacity: 1; } |
| } |
| |
| .strikes-number { |
| font-size: clamp(4rem, 12vw, 8rem); |
| font-weight: 900; |
| margin: 20px 0; |
| letter-spacing: -0.05em; |
| position: relative; |
| display: inline-block; |
| } |
| |
| .strikes-0 { |
| color: #00ff88; |
| text-shadow: |
| 0 0 20px rgba(0, 255, 136, 0.5), |
| 0 0 40px rgba(0, 255, 136, 0.3), |
| 0 0 60px rgba(0, 255, 136, 0.1); |
| } |
| |
| .strikes-1 { |
| color: #ffd700; |
| text-shadow: |
| 0 0 20px rgba(255, 215, 0, 0.5), |
| 0 0 40px rgba(255, 215, 0, 0.3), |
| 0 0 60px rgba(255, 215, 0, 0.1); |
| } |
| |
| .strikes-2 { |
| color: #ff6b35; |
| text-shadow: |
| 0 0 20px rgba(255, 107, 53, 0.5), |
| 0 0 40px rgba(255, 107, 53, 0.3), |
| 0 0 60px rgba(255, 107, 53, 0.1); |
| } |
| |
| .strikes-3-plus { |
| color: #ff0040; |
| text-shadow: |
| 0 0 20px rgba(255, 0, 64, 0.6), |
| 0 0 40px rgba(255, 0, 64, 0.4), |
| 0 0 60px rgba(255, 0, 64, 0.2); |
| animation: danger-pulse 2s ease-in-out infinite; |
| } |
| |
| @keyframes danger-pulse { |
| 0%, 100% { transform: scale(1); filter: brightness(1); } |
| 50% { transform: scale(1.05); filter: brightness(1.2); } |
| } |
| |
| .strikes-message { |
| font-size: 1.5rem; |
| margin-top: 20px; |
| font-weight: 700; |
| letter-spacing: 2px; |
| text-transform: uppercase; |
| } |
| |
| .strikes-description { |
| font-size: 1rem; |
| margin-top: 16px; |
| opacity: 0.8; |
| max-width: 600px; |
| margin-left: auto; |
| margin-right: auto; |
| line-height: 1.6; |
| font-weight: 400; |
| } |
| |
| .warning-icon { |
| position: absolute; |
| top: 24px; |
| right: 24px; |
| font-size: 2.5rem; |
| opacity: 0.4; |
| animation: icon-glow 3s ease-in-out infinite alternate; |
| } |
| |
| @keyframes icon-glow { |
| 0% { opacity: 0.4; transform: scale(1); } |
| 100% { opacity: 0.8; transform: scale(1.1); } |
| } |
| |
| .info-card { |
| grid-column: span 6; |
| } |
| |
| .card-title { |
| font-size: 1.3rem; |
| margin-bottom: 24px; |
| color: #c77dff; |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| } |
| |
| .card-title::before { |
| content: ''; |
| width: 8px; |
| height: 8px; |
| background: linear-gradient(45deg, #9d4edd, #c77dff); |
| border-radius: 50%; |
| box-shadow: 0 0 20px rgba(157, 78, 221, 0.6); |
| animation: dot-pulse 2s ease-in-out infinite; |
| } |
| |
| @keyframes dot-pulse { |
| 0%, 100% { transform: scale(1); opacity: 1; } |
| 50% { transform: scale(1.3); opacity: 0.7; } |
| } |
| |
| .info-item { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 18px 0; |
| border-bottom: 1px solid rgba(157, 78, 221, 0.1); |
| transition: all 0.3s ease; |
| } |
| |
| .info-item:last-child { |
| border-bottom: none; |
| } |
| |
| .info-item:hover { |
| background: rgba(157, 78, 221, 0.05); |
| margin: 0 -16px; |
| padding: 18px 16px; |
| border-radius: 12px; |
| } |
| |
| .info-label { |
| font-weight: 500; |
| opacity: 0.7; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| font-size: 0.85rem; |
| } |
| |
| .info-value { |
| font-size: 1.1rem; |
| font-weight: 600; |
| color: #ffffff; |
| text-align: right; |
| } |
| |
| .status-badge { |
| display: inline-block; |
| padding: 6px 12px; |
| border-radius: 20px; |
| font-size: 0.8rem; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| } |
| |
| .badge-clean { |
| background: rgba(0, 255, 136, 0.2); |
| color: #00ff88; |
| border: 1px solid rgba(0, 255, 136, 0.3); |
| } |
| |
| .badge-warning { |
| background: rgba(255, 215, 0, 0.2); |
| color: #ffd700; |
| border: 1px solid rgba(255, 215, 0, 0.3); |
| } |
| |
| .badge-danger { |
| background: rgba(255, 0, 64, 0.2); |
| color: #ff0040; |
| border: 1px solid rgba(255, 0, 64, 0.3); |
| } |
| |
| @keyframes slideDown { |
| from { |
| opacity: 0; |
| transform: translateY(-60px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
| |
| @keyframes fadeInUp { |
| from { |
| opacity: 0; |
| transform: translateY(60px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
| |
| .no-data { |
| grid-column: 1 / -1; |
| text-align: center; |
| padding: 80px 20px; |
| opacity: 0.6; |
| } |
| |
| .no-data h2 { |
| font-size: 2.5rem; |
| margin-bottom: 20px; |
| color: #9d4edd; |
| font-weight: 700; |
| } |
| |
| .loading-spinner { |
| display: inline-block; |
| width: 40px; |
| height: 40px; |
| border: 3px solid rgba(157, 78, 221, 0.3); |
| border-radius: 50%; |
| border-top-color: #9d4edd; |
| animation: spin 1s ease-in-out infinite; |
| margin-top: 20px; |
| } |
| |
| @keyframes spin { |
| to { transform: rotate(360deg); } |
| } |
| |
| @media (max-width: 968px) { |
| .info-card { |
| grid-column: span 12; |
| } |
| } |
| |
| @media (max-width: 768px) { |
| .container { |
| padding: 40px 16px; |
| } |
| |
| .dashboard { |
| gap: 16px; |
| } |
| |
| .card { |
| padding: 24px; |
| } |
| |
| .info-item { |
| flex-direction: column; |
| align-items: flex-start; |
| gap: 8px; |
| } |
| |
| .info-value { |
| text-align: left; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| |
| <div class="bg-effects"> |
| <div class="grid-overlay"></div> |
| <div class="floating-orbs"> |
| <div class="orb"></div> |
| <div class="orb"></div> |
| <div class="orb"></div> |
| <div class="orb"></div> |
| </div> |
| <div class="particles" id="particles"></div> |
| </div> |
|
|
| <div class="container"> |
| <div class="header"> |
| <h1>User Strike Dashboard</h1> |
| <p>Advanced Content Moderation System</p> |
| </div> |
|
|
| <div id="content" class="dashboard"> |
| <div class="no-data"> |
| <h2>Initializing Dashboard</h2> |
| <p>Loading user data from URL parameters...</p> |
| <div class="loading-spinner"></div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| function createParticles() { |
| const particles = document.getElementById('particles'); |
| const particleCount = 80; |
| |
| for (let i = 0; i < particleCount; i++) { |
| const particle = document.createElement('div'); |
| particle.className = 'particle'; |
| particle.style.left = Math.random() * 100 + '%'; |
| particle.style.animationDelay = Math.random() * 12 + 's'; |
| particle.style.animationDuration = (Math.random() * 6 + 8) + 's'; |
| particles.appendChild(particle); |
| } |
| } |
| |
| |
| function getUrlParams() { |
| const urlParams = new URLSearchParams(window.location.search); |
| return { |
| group: urlParams.get('group') || 'N/A', |
| chat_id: urlParams.get('chat_id') || 'N/A', |
| userid: urlParams.get('userid') || 'N/A', |
| username: urlParams.get('username') || 'N/A', |
| strikes: parseInt(urlParams.get('strikes')) || 0 |
| }; |
| } |
| |
| |
| function getStrikeInfo(strikes) { |
| if (strikes === 0) { |
| return { |
| class: 'strikes-0', |
| message: 'Clean Record', |
| description: 'This user has maintained an excellent standing with zero violations. They consistently follow all community guidelines and contribute positively to the platform.', |
| icon: '✅', |
| badge: 'badge-clean', |
| status: 'Excellent Standing' |
| }; |
| } else if (strikes === 1) { |
| return { |
| class: 'strikes-1', |
| message: 'First Warning', |
| description: 'User received their initial strike for posting inappropriate content. This serves as a formal warning to review and adhere to community guidelines.', |
| icon: '⚠️', |
| badge: 'badge-warning', |
| status: 'Warning Issued' |
| }; |
| } else if (strikes === 2) { |
| return { |
| class: 'strikes-2', |
| message: 'Final Warning', |
| description: 'User has accumulated 2 strikes for repeated violations. This is their final warning before facing potential account restrictions or suspension.', |
| icon: '🚨', |
| badge: 'badge-warning', |
| status: 'Final Warning' |
| }; |
| } else { |
| return { |
| class: 'strikes-3-plus', |
| message: 'Critical Status', |
| description: 'User has exceeded the violation threshold with multiple infractions. Immediate review required for potential account suspension or permanent ban.', |
| icon: '🔴', |
| badge: 'badge-danger', |
| status: 'Under Review' |
| }; |
| } |
| } |
| |
| |
| function displayUserInfo() { |
| const params = getUrlParams(); |
| const strikeInfo = getStrikeInfo(params.strikes); |
| |
| const content = ` |
| <div class="strikes-display card"> |
| <div class="warning-icon">${strikeInfo.icon}</div> |
| <div class="card-title">Strike Status Overview</div> |
| <div class="strikes-number ${strikeInfo.class}">${params.strikes}</div> |
| <div class="strikes-message ${strikeInfo.class}">${strikeInfo.message}</div> |
| <div class="strikes-description">${strikeInfo.description}</div> |
| </div> |
| |
| <div class="card info-card"> |
| <div class="card-title">👤 User Profile</div> |
| <div class="info-item"> |
| <span class="info-label">Username</span> |
| <span class="info-value">@${params.username}</span> |
| </div> |
| <div class="info-item"> |
| <span class="info-label">User ID</span> |
| <span class="info-value">${params.userid}</span> |
| </div> |
| <div class="info-item"> |
| <span class="info-label">Group Name</span> |
| <span class="info-value">${params.group}</span> |
| </div> |
| <div class="info-item"> |
| <span class="info-label">Chat ID</span> |
| <span class="info-value">${params.chat_id}</span> |
| </div> |
| </div> |
| |
| <div class="card info-card"> |
| <div class="card-title">⚖️ Moderation Details</div> |
| <div class="info-item"> |
| <span class="info-label">Total Strikes</span> |
| <span class="info-value">${params.strikes}/3</span> |
| </div> |
| <div class="info-item"> |
| <span class="info-label">Violation Type</span> |
| <span class="info-value">NSFW Content</span> |
| </div> |
| <div class="info-item"> |
| <span class="info-label">Account Status</span> |
| <span class="info-value"> |
| <span class="status-badge ${strikeInfo.badge}">${strikeInfo.status}</span> |
| </span> |
| </div> |
| <div class="info-item"> |
| <span class="info-label">Action Required</span> |
| <span class="info-value">${ |
| params.strikes === 0 ? 'None' : |
| params.strikes >= 3 ? 'Immediate Review' : |
| params.strikes === 2 ? 'Final Warning' : 'Monitoring' |
| }</span> |
| </div> |
| <div class="info-item"> |
| <span class="info-label">Risk Level</span> |
| <span class="info-value">${ |
| params.strikes === 0 ? 'Low' : |
| params.strikes === 1 ? 'Medium' : |
| params.strikes === 2 ? 'High' : 'Critical' |
| }</span> |
| </div> |
| </div> |
| `; |
| |
| document.getElementById('content').innerHTML = content; |
| document.getElementById('content').className = 'dashboard'; |
| } |
| |
| |
| function init() { |
| createParticles(); |
| |
| setTimeout(displayUserInfo, 800); |
| } |
| |
| |
| window.addEventListener('load', init); |
| |
| |
| document.documentElement.style.scrollBehavior = 'smooth'; |
| </script> |
| </body> |
| </html> |
