|
|
<!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> |
