added epic counters
This commit is contained in:
erik
parent
10c51f6825
commit
09a6cd4946
4 changed files with 963 additions and 8 deletions
461
static/style.css
461
static/style.css
|
|
@ -122,6 +122,104 @@ body {
|
|||
font-size: 1.25rem;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.total-rares-counter {
|
||||
margin: 0 0 12px 0;
|
||||
padding: 8px 12px;
|
||||
background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
|
||||
border: 1px solid #444;
|
||||
border-radius: 6px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
color: #ffd700;
|
||||
text-align: center;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.total-rares-counter #totalRaresCount {
|
||||
color: #fff;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.server-kph-counter {
|
||||
margin: 0 0 12px 0;
|
||||
padding: 9px 12px;
|
||||
background: linear-gradient(135deg, #2a2a44, #1a1a33);
|
||||
border: 2px solid #4466aa;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #aaccff;
|
||||
text-align: center;
|
||||
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
|
||||
position: relative;
|
||||
animation: kph-border-glow 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes kph-border-glow {
|
||||
0%, 100% { border-color: #4466aa; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4); }
|
||||
50% { border-color: #6688cc; box-shadow: 0 3px 12px rgba(102, 136, 204, 0.3); }
|
||||
}
|
||||
|
||||
.server-kph-counter #serverKphCount {
|
||||
color: #fff;
|
||||
margin-left: 4px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
|
||||
animation: kph-pulse 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes kph-pulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.02); }
|
||||
}
|
||||
|
||||
/* ULTRA MODE for KPH > 5000 */
|
||||
.server-kph-counter.ultra-epic {
|
||||
background: linear-gradient(135deg, #6644ff, #4422cc, #6644ff);
|
||||
background-size: 200% 200%;
|
||||
animation: kph-border-glow 4s ease-in-out infinite, ultra-background 3s ease-in-out infinite;
|
||||
border-color: #8866ff;
|
||||
color: #eeeeff;
|
||||
box-shadow: 0 4px 12px rgba(102, 68, 255, 0.5);
|
||||
}
|
||||
|
||||
@keyframes ultra-background {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
.server-kph-counter.ultra-epic #serverKphCount {
|
||||
font-size: 1.3rem;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 0 12px rgba(255, 255, 255, 0.7);
|
||||
animation: kph-pulse 3s ease-in-out infinite, ultra-glow 2s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes ultra-glow {
|
||||
from { text-shadow: 0 0 12px rgba(255, 255, 255, 0.7); }
|
||||
to { text-shadow: 0 0 18px rgba(255, 255, 255, 0.9), 0 0 25px rgba(136, 102, 255, 0.5); }
|
||||
}
|
||||
|
||||
.total-kills-counter {
|
||||
margin: 0 0 12px 0;
|
||||
padding: 8px 12px;
|
||||
background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
|
||||
border: 1px solid #555;
|
||||
border-radius: 6px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
color: #ff6666;
|
||||
text-align: center;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.total-kills-counter #totalKillsCount {
|
||||
color: #fff;
|
||||
margin-left: 4px;
|
||||
}
|
||||
#playerList {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
|
|
@ -243,9 +341,10 @@ body {
|
|||
#playerList li {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto auto auto auto auto;
|
||||
grid-template-rows: auto auto auto auto;
|
||||
grid-template-rows: auto auto auto auto auto;
|
||||
grid-template-areas:
|
||||
"name name name name name name"
|
||||
"vitals vitals vitals vitals vitals vitals"
|
||||
"kills totalkills kph kph kph kph"
|
||||
"rares kpr meta meta meta meta"
|
||||
"onlinetime deaths tapers tapers tapers tapers";
|
||||
|
|
@ -254,7 +353,7 @@ body {
|
|||
padding: 8px 10px;
|
||||
background: var(--card);
|
||||
border-left: 4px solid transparent;
|
||||
transition: background 0.15s;
|
||||
transition: none;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
|
|
@ -272,6 +371,8 @@ body {
|
|||
.stat.deaths { grid-area: deaths; }
|
||||
.stat.tapers { grid-area: tapers; }
|
||||
|
||||
.player-vitals { grid-area: vitals; }
|
||||
|
||||
/* pill styling */
|
||||
#playerList li .stat {
|
||||
background: rgba(255,255,255,0.1);
|
||||
|
|
@ -719,3 +820,359 @@ body.noselect, body.noselect * {
|
|||
margin-top: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ---------- inline vitals bars ---------------------------------- */
|
||||
.player-vitals {
|
||||
grid-column: 1 / -1;
|
||||
margin: 2px 0 4px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.vital-bar-inline {
|
||||
height: 5px;
|
||||
background: #222;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.vitae-indicator {
|
||||
font-size: 0.75rem;
|
||||
color: #ff6666;
|
||||
margin-left: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.vital-fill {
|
||||
height: 100%;
|
||||
transition: width 0.3s ease-out;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.vital-fill.health {
|
||||
background: linear-gradient(90deg, #ff4444, #ff6666);
|
||||
}
|
||||
|
||||
.vital-fill.stamina {
|
||||
background: linear-gradient(90deg, #ffaa00, #ffcc44);
|
||||
}
|
||||
|
||||
.vital-fill.mana {
|
||||
background: linear-gradient(90deg, #4488ff, #66aaff);
|
||||
}
|
||||
|
||||
/* Pulsing effects for low vitals */
|
||||
.vital-bar-inline.low-vital {
|
||||
animation: pulse-bar-low 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.vital-bar-inline.critical-vital {
|
||||
animation: pulse-bar-critical 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-bar-low {
|
||||
0%, 100% { background: #222; }
|
||||
50% { background: #332200; }
|
||||
}
|
||||
|
||||
@keyframes pulse-bar-critical {
|
||||
0%, 100% { background: #222; }
|
||||
50% { background: #440000; }
|
||||
}
|
||||
|
||||
/* ---------- epic rare notifications ------------------------------ */
|
||||
.rare-notifications {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 10001;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.rare-notification {
|
||||
background: linear-gradient(135deg, #ffd700, #ffed4e, #ffd700);
|
||||
border: 3px solid #ff6600;
|
||||
border-radius: 12px;
|
||||
padding: 20px 30px;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
box-shadow: 0 8px 32px rgba(255, 215, 0, 0.5);
|
||||
animation: notification-slide-in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55),
|
||||
epic-glow 2s ease-in-out infinite;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@keyframes notification-slide-in {
|
||||
from {
|
||||
transform: translateY(-100px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes epic-glow {
|
||||
0%, 100% {
|
||||
box-shadow: 0 8px 32px rgba(255, 215, 0, 0.5);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 8px 48px rgba(255, 215, 0, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.rare-notification-title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 800;
|
||||
color: #ff0044;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 8px;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
animation: epic-text-pulse 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes epic-text-pulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
}
|
||||
|
||||
.rare-notification-mob {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #1a0033;
|
||||
margin-bottom: 4px;
|
||||
text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.rare-notification-finder {
|
||||
font-size: 1rem;
|
||||
color: #333;
|
||||
font-style: italic;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.rare-notification-character {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
color: #ff0044;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Shine effect overlay */
|
||||
.rare-notification::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(45deg,
|
||||
transparent 30%,
|
||||
rgba(255, 255, 255, 0.5) 50%,
|
||||
transparent 70%
|
||||
);
|
||||
transform: rotate(45deg);
|
||||
animation: notification-shine 3s infinite;
|
||||
}
|
||||
|
||||
@keyframes notification-shine {
|
||||
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
|
||||
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
|
||||
}
|
||||
|
||||
/* ---------- fireworks particles ---------------------------------- */
|
||||
.fireworks-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.firework-particle {
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
animation: firework-fly 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
||||
}
|
||||
|
||||
@keyframes firework-fly {
|
||||
0% {
|
||||
transform: translate(0, 0) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Different particle colors */
|
||||
.particle-gold { background: #ffd700; box-shadow: 0 0 6px #ffd700; }
|
||||
.particle-red { background: #ff4444; box-shadow: 0 0 6px #ff4444; }
|
||||
.particle-orange { background: #ff8800; box-shadow: 0 0 6px #ff8800; }
|
||||
.particle-purple { background: #cc00ff; box-shadow: 0 0 6px #cc00ff; }
|
||||
.particle-blue { background: #00ccff; box-shadow: 0 0 6px #00ccff; }
|
||||
|
||||
/* Character glow effect in player list */
|
||||
.player-item.rare-finder-glow {
|
||||
animation: rare-finder-highlight 5s ease-in-out;
|
||||
border-left-color: #ffd700 !important;
|
||||
border-left-width: 6px !important;
|
||||
}
|
||||
|
||||
@keyframes rare-finder-highlight {
|
||||
0%, 100% {
|
||||
background: var(--card);
|
||||
box-shadow: none;
|
||||
}
|
||||
50% {
|
||||
background: rgba(255, 215, 0, 0.2);
|
||||
box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- milestone celebration overlay ------------------------ */
|
||||
.milestone-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(ellipse at center, rgba(255, 215, 0, 0.3), rgba(0, 0, 0, 0.8));
|
||||
z-index: 20000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: milestone-fade-in 0.5s ease-out;
|
||||
}
|
||||
|
||||
@keyframes milestone-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.milestone-content {
|
||||
text-align: center;
|
||||
animation: milestone-zoom 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
|
||||
@keyframes milestone-zoom {
|
||||
from {
|
||||
transform: scale(0);
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.milestone-number {
|
||||
font-size: 8rem;
|
||||
font-weight: 900;
|
||||
color: #ffd700;
|
||||
text-shadow:
|
||||
0 0 30px #ffd700,
|
||||
0 0 60px #ff6600,
|
||||
0 0 90px #ff0044,
|
||||
0 0 120px #ff0044;
|
||||
margin-bottom: 20px;
|
||||
animation: milestone-pulse 1s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes milestone-pulse {
|
||||
from {
|
||||
transform: scale(1);
|
||||
text-shadow:
|
||||
0 0 30px #ffd700,
|
||||
0 0 60px #ff6600,
|
||||
0 0 90px #ff0044,
|
||||
0 0 120px #ff0044;
|
||||
}
|
||||
to {
|
||||
transform: scale(1.1);
|
||||
text-shadow:
|
||||
0 0 40px #ffd700,
|
||||
0 0 80px #ff6600,
|
||||
0 0 120px #ff0044,
|
||||
0 0 160px #ff0044;
|
||||
}
|
||||
}
|
||||
|
||||
.milestone-text {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
|
||||
animation: milestone-text-glow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes milestone-text-glow {
|
||||
0%, 100% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.milestone-subtitle {
|
||||
font-size: 1.5rem;
|
||||
color: #ffcc00;
|
||||
margin-top: 20px;
|
||||
font-style: italic;
|
||||
animation: milestone-subtitle-slide 1s ease-out;
|
||||
}
|
||||
|
||||
@keyframes milestone-subtitle-slide {
|
||||
from {
|
||||
transform: translateY(50px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Milestone firework burst - larger particles */
|
||||
.milestone-particle {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
background: #ffd700;
|
||||
box-shadow: 0 0 12px #ffd700;
|
||||
}
|
||||
|
||||
/* Screen shake effect */
|
||||
@keyframes screen-shake {
|
||||
0%, 100% { transform: translate(0, 0); }
|
||||
10% { transform: translate(-5px, -5px); }
|
||||
20% { transform: translate(5px, -5px); }
|
||||
30% { transform: translate(-5px, 5px); }
|
||||
40% { transform: translate(5px, 5px); }
|
||||
50% { transform: translate(-3px, -3px); }
|
||||
60% { transform: translate(3px, -3px); }
|
||||
70% { transform: translate(-3px, 3px); }
|
||||
80% { transform: translate(3px, 3px); }
|
||||
90% { transform: translate(-1px, -1px); }
|
||||
}
|
||||
|
||||
.screen-shake {
|
||||
animation: screen-shake 0.5s ease-in-out;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue