itsaygea
2256 lines
98 KiB
HTML
2256 lines
98 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ENDFIELD // Operator Showcase</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--bg-deep: #08080c;
|
|
--bg-dark: #0d0d15;
|
|
--bg-panel: rgba(8, 8, 12, 0.85);
|
|
--cyan: #00f5ff;
|
|
--orange: #ff6b35;
|
|
--pink: #ff2a6d;
|
|
--text-primary: #f0f0f5;
|
|
--text-secondary: #8a8a9a;
|
|
--border-glow: rgba(0, 245, 255, 0.5);
|
|
--text-on-image: rgba(255, 255, 255, 0.95);
|
|
--text-shadow-strong: 0 2px 8px rgba(0, 0, 0, 0.9);
|
|
}
|
|
|
|
body {
|
|
font-family: 'Rajdhani', sans-serif;
|
|
background: var(--bg-deep);
|
|
color: var(--text-primary);
|
|
overflow-x: hidden;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* HUD Navigation - Minimal to not obstruct character view */
|
|
.hud-nav {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 60px;
|
|
background: linear-gradient(180deg, rgba(8, 8, 12, 0.95) 0%, rgba(8, 8, 12, 0.7) 80%, transparent 100%);
|
|
backdrop-filter: blur(10px);
|
|
z-index: 1000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 40px;
|
|
}
|
|
|
|
.nav-logo {
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 900;
|
|
letter-spacing: 4px;
|
|
color: var(--cyan);
|
|
text-shadow: 0 0 15px var(--cyan);
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 40px;
|
|
}
|
|
|
|
.nav-links a {
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
text-decoration: none;
|
|
letter-spacing: 2px;
|
|
text-transform: uppercase;
|
|
transition: color 0.2s, text-shadow 0.2s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.nav-links a:hover {
|
|
color: var(--cyan);
|
|
text-shadow: 0 0 10px var(--cyan);
|
|
}
|
|
|
|
/* Hero Section - Full Character Focus */
|
|
.hero {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero-character {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 100%;
|
|
max-width: 900px;
|
|
height: 100vh;
|
|
object-fit: cover;
|
|
object-position: center top;
|
|
z-index: 1;
|
|
filter: brightness(0.9) contrast(1.1);
|
|
}
|
|
|
|
.hero-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(180deg, rgba(8, 8, 12, 0.3) 0%, rgba(8, 8, 12, 0.5) 50%, rgba(8, 8, 12, 0.8) 100%);
|
|
z-index: 2;
|
|
}
|
|
|
|
.hero-content {
|
|
position: relative;
|
|
z-index: 3;
|
|
text-align: center;
|
|
margin-top: 60vh;
|
|
padding: 30px 40px;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
backdrop-filter: blur(20px);
|
|
border-radius: 20px;
|
|
border: 1px solid rgba(255, 107, 53, 0.3);
|
|
box-shadow: 0 0 60px rgba(0, 0, 0, 0.8), inset 0 0 60px rgba(255, 107, 53, 0.1);
|
|
}
|
|
|
|
.hero-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px 20px;
|
|
background: rgba(255, 107, 53, 0.2);
|
|
border: 1px solid var(--orange);
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 11px;
|
|
letter-spacing: 3px;
|
|
text-transform: uppercase;
|
|
color: var(--orange);
|
|
margin-bottom: 20px;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.hero h1 {
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: clamp(48px, 10vw, 100px);
|
|
font-weight: 900;
|
|
line-height: 1;
|
|
letter-spacing: -2px;
|
|
}
|
|
|
|
.hero h1 .outline {
|
|
-webkit-text-stroke: 2px var(--orange);
|
|
paint-order: stroke fill;
|
|
color: transparent;
|
|
filter: drop-shadow(0 0 30px var(--orange)) drop-shadow(0 0 60px rgba(255, 107, 53, 0.5));
|
|
}
|
|
|
|
.hero p {
|
|
font-size: 16px;
|
|
color: #fff;
|
|
max-width: 500px;
|
|
margin: 20px auto 0;
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.scroll-indicator {
|
|
position: absolute;
|
|
bottom: 40px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
animation: bounce 2s infinite;
|
|
font-size: 24px;
|
|
color: var(--text-on-image);
|
|
text-shadow: var(--text-shadow-strong);
|
|
z-index: 3;
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0%, 100% { transform: translateX(-50%) translateY(0); }
|
|
50% { transform: translateX(-50%) translateY(-15px); }
|
|
}
|
|
|
|
/* Character Showcase Sections - FULL CHARACTER VISUAL */
|
|
.character-showcase {
|
|
min-height: 100vh;
|
|
position: relative;
|
|
display: flex;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.character-showcase:nth-child(even) {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.character-showcase-character {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 65%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: center center;
|
|
z-index: 1;
|
|
}
|
|
|
|
.character-showcase:nth-child(odd) .character-showcase-character {
|
|
right: 0;
|
|
}
|
|
|
|
.character-showcase:nth-child(even) .character-showcase-character {
|
|
left: 0;
|
|
}
|
|
|
|
.character-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 65%;
|
|
height: 100%;
|
|
z-index: 2;
|
|
background: linear-gradient(90deg, rgba(8, 8, 12, 0.7) 0%, rgba(8, 8, 12, 0.3) 60%, rgba(8, 8, 12, 0.7) 100%);
|
|
}
|
|
|
|
.character-showcase:nth-child(even) .character-overlay {
|
|
background: linear-gradient(270deg, rgba(8, 8, 12, 0.7) 0%, rgba(8, 8, 12, 0.3) 40%, rgba(8, 8, 12, 0.7) 100%);
|
|
}
|
|
|
|
.character-showcase-content {
|
|
position: relative;
|
|
z-index: 3;
|
|
width: 50%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 60px;
|
|
}
|
|
|
|
.character-showcase:nth-child(odd) .character-showcase-content {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.character-showcase:nth-child(even) .character-showcase-content {
|
|
margin-right: auto;
|
|
}
|
|
|
|
.character-number {
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 14px;
|
|
letter-spacing: 4px;
|
|
color: var(--orange);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.character-name {
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: clamp(42px, 6vw, 64px);
|
|
font-weight: 900;
|
|
line-height: 1;
|
|
margin-bottom: 15px;
|
|
text-shadow: 0 3px 15px rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
.character-subtitle {
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 12px;
|
|
letter-spacing: 3px;
|
|
text-transform: uppercase;
|
|
color: var(--cyan);
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.character-tags {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-bottom: 25px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.char-tag {
|
|
padding: 6px 14px;
|
|
background: rgba(0, 245, 255, 0.15);
|
|
border: 1px solid var(--cyan);
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 11px;
|
|
letter-spacing: 2px;
|
|
text-transform: uppercase;
|
|
color: var(--cyan);
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
.char-tier-ss {
|
|
border-color: var(--orange);
|
|
color: var(--orange);
|
|
background: rgba(255, 107, 53, 0.15);
|
|
}
|
|
|
|
.char-tier-s {
|
|
border-color: #a855f7;
|
|
color: #a855f7;
|
|
background: rgba(168, 85, 247, 0.15);
|
|
}
|
|
|
|
.char-tier-a {
|
|
border-color: #22c55e;
|
|
color: #22c55e;
|
|
background: rgba(34, 197, 94, 0.15);
|
|
}
|
|
|
|
.character-quote {
|
|
font-size: 18px;
|
|
line-height: 1.6;
|
|
color: var(--text-on-image);
|
|
font-style: italic;
|
|
margin-bottom: 25px;
|
|
padding: 20px;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-left: 3px solid var(--cyan);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
/* Tier List Grid */
|
|
.section {
|
|
padding: 80px 40px;
|
|
position: relative;
|
|
}
|
|
|
|
.section-header {
|
|
text-align: center;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
.section-title {
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: clamp(32px, 5vw, 48px);
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 4px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.tier-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
margin: 30px 0 20px;
|
|
}
|
|
|
|
.tier-badge {
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 28px;
|
|
font-weight: 900;
|
|
padding: 10px 20px;
|
|
clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
|
|
}
|
|
|
|
.tier-ss { background: linear-gradient(135deg, #ff6b6b, #feca57); color: #000; }
|
|
.tier-s { background: linear-gradient(135deg, #a855f7, #6366f1); color: #fff; }
|
|
.tier-a { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; }
|
|
|
|
.tier-label {
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 11px;
|
|
letter-spacing: 3px;
|
|
text-transform: uppercase;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.operator-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
|
gap: 20px;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.operator-card {
|
|
background: var(--bg-panel);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
transition: all 0.3s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.operator-card:hover {
|
|
border-color: var(--border-glow);
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 20px 60px rgba(0, 245, 255, 0.2);
|
|
}
|
|
|
|
.operator-card-img {
|
|
width: 100%;
|
|
height: 200px;
|
|
object-fit: cover;
|
|
object-position: center top;
|
|
}
|
|
|
|
.operator-card-content {
|
|
padding: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.operator-card h4 {
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
letter-spacing: 1px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.operator-card .tier {
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 10px;
|
|
padding: 3px 8px;
|
|
border-radius: 4px;
|
|
display: inline-block;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.tier-ss-bg { background: linear-gradient(135deg, #ff6b6b, #feca57); color: #000; }
|
|
.tier-s-bg { background: linear-gradient(135deg, #a855f7, #6366f1); color: #fff; }
|
|
.tier-a-bg { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; }
|
|
|
|
/* Team Builder */
|
|
.team-builder {
|
|
background: var(--bg-panel);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: 20px;
|
|
padding: 40px;
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.team-slots {
|
|
display: flex;
|
|
gap: 15px;
|
|
margin-bottom: 30px;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.team-slot {
|
|
width: 90px;
|
|
height: 90px;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 2px dashed rgba(255, 255, 255, 0.2);
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 28px;
|
|
color: var(--text-secondary);
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.team-slot.filled {
|
|
border-style: solid;
|
|
border-color: var(--cyan);
|
|
overflow: hidden;
|
|
padding: 0;
|
|
box-shadow: 0 0 20px rgba(0, 245, 255, 0.3);
|
|
}
|
|
|
|
.team-slot.filled img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: center top;
|
|
}
|
|
|
|
.operator-select {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
|
gap: 12px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.select-option {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 12px;
|
|
padding: 12px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.select-option:hover {
|
|
border-color: rgba(0, 245, 255, 0.4);
|
|
background: rgba(0, 245, 255, 0.05);
|
|
}
|
|
|
|
.select-option.selected {
|
|
border-color: var(--cyan);
|
|
background: rgba(0, 245, 255, 0.15);
|
|
box-shadow: 0 0 20px rgba(0, 245, 255, 0.2);
|
|
}
|
|
|
|
.select-option img {
|
|
width: 60px;
|
|
height: 60px;
|
|
object-fit: cover;
|
|
object-position: center top;
|
|
border-radius: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.select-option .name {
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.suggestions {
|
|
background: rgba(0, 245, 255, 0.05);
|
|
border: 1px solid var(--border-glow);
|
|
border-radius: 16px;
|
|
padding: 25px;
|
|
display: none;
|
|
}
|
|
|
|
.suggestions.active {
|
|
display: block;
|
|
}
|
|
|
|
.suggestion-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
padding: 15px;
|
|
background: var(--bg-panel);
|
|
border-left: 3px solid var(--cyan);
|
|
margin-bottom: 10px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.suggestion-item img {
|
|
width: 50px;
|
|
height: 50px;
|
|
object-fit: cover;
|
|
object-position: center top;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.suggestion-info h5 {
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.suggestion-info p {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.clear-btn {
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 11px;
|
|
letter-spacing: 2px;
|
|
text-transform: uppercase;
|
|
background: transparent;
|
|
border: 1px solid var(--orange);
|
|
color: var(--orange);
|
|
padding: 12px 30px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.clear-btn:hover {
|
|
background: var(--orange);
|
|
color: #000;
|
|
}
|
|
|
|
/* Footer */
|
|
footer {
|
|
padding: 40px;
|
|
text-align: center;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
footer p {
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 1024px) {
|
|
.character-showcase-character {
|
|
width: 100%;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.character-overlay {
|
|
display: none;
|
|
}
|
|
|
|
.character-showcase-content {
|
|
width: 100%;
|
|
background: var(--bg-panel);
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.hud-nav { padding: 0 20px; }
|
|
.nav-links { display: none; }
|
|
.hero h1 { font-size: 48px; }
|
|
.operator-grid { grid-template-columns: repeat(3, 1fr); }
|
|
.operator-select { grid-template-columns: repeat(4, 1fr); }
|
|
.guide-grid { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes fadeInUp {
|
|
from { opacity: 0; transform: translateY(30px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.animate-in {
|
|
animation: fadeInUp 0.8s ease forwards;
|
|
}
|
|
|
|
.delay-1 { animation-delay: 0.1s; }
|
|
.delay-2 { animation-delay: 0.2s; }
|
|
.delay-3 { animation-delay: 0.3s; }
|
|
|
|
/* Reduced motion */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
* { animation-duration: 0.01ms !important; }
|
|
}
|
|
|
|
/* Builds Modal */
|
|
.builds-modal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.9);
|
|
z-index: 2000;
|
|
overflow-y: auto;
|
|
padding: 40px 20px;
|
|
}
|
|
|
|
.builds-modal.active {
|
|
display: block;
|
|
}
|
|
|
|
.builds-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.builds-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.builds-title {
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.builds-close {
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 14px;
|
|
color: var(--orange);
|
|
background: transparent;
|
|
border: 1px solid var(--orange);
|
|
padding: 10px 20px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.builds-close:hover {
|
|
background: var(--orange);
|
|
color: #000;
|
|
}
|
|
|
|
.operator-build {
|
|
background: var(--bg-panel);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 20px;
|
|
margin-bottom: 30px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.operator-build-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
padding: 25px;
|
|
background: rgba(0, 245, 255, 0.05);
|
|
border-bottom: 1px solid rgba(0, 245, 255, 0.2);
|
|
}
|
|
|
|
.operator-build-avatar {
|
|
width: 80px;
|
|
height: 80px;
|
|
background: var(--bg-dark);
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.operator-build-avatar img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.operator-build-info h3 {
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.operator-build-role {
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 11px;
|
|
color: var(--cyan);
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.build-section {
|
|
padding: 20px 25px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.build-section:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.build-section-title {
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 11px;
|
|
letter-spacing: 2px;
|
|
color: var(--orange);
|
|
margin-bottom: 15px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.build-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 10px 15px;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border-radius: 10px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.build-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.build-item-priority {
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 10px;
|
|
padding: 3px 8px;
|
|
border-radius: 4px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.priority-s { background: linear-gradient(135deg, #ff6b6b, #feca57); color: #000; }
|
|
.priority-a { background: linear-gradient(135deg, #a855f7, #6366f1); color: #fff; }
|
|
.priority-b { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; }
|
|
|
|
.build-item-name {
|
|
font-family: 'Rajdhani', sans-serif;
|
|
font-size: 14px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.build-item-desc {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* Game Guide Section */
|
|
.guide-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 25px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.guide-card {
|
|
background: var(--bg-panel);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: 16px;
|
|
padding: 25px;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.guide-card:hover {
|
|
border-color: var(--border-glow);
|
|
box-shadow: 0 10px 40px rgba(0, 245, 255, 0.1);
|
|
}
|
|
|
|
.guide-card h3 {
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: var(--orange);
|
|
margin-bottom: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.guide-card h3::before {
|
|
content: '>';
|
|
font-family: 'Share Tech Mono', monospace;
|
|
color: var(--cyan);
|
|
}
|
|
|
|
.guide-card h4 {
|
|
font-family: 'Rajdhani', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin: 15px 0 8px;
|
|
}
|
|
|
|
.guide-card p {
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.guide-card ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.guide-card li {
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
padding: 5px 0;
|
|
padding-left: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.guide-card li::before {
|
|
content: '•';
|
|
position: absolute;
|
|
left: 0;
|
|
color: var(--cyan);
|
|
}
|
|
|
|
.currency-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.currency-table th {
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 11px;
|
|
text-align: left;
|
|
padding: 10px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
color: var(--orange);
|
|
}
|
|
|
|
.currency-table td {
|
|
font-size: 12px;
|
|
padding: 10px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.currency-table tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.highlight-box {
|
|
background: rgba(255, 107, 53, 0.1);
|
|
border-left: 3px solid var(--orange);
|
|
padding: 15px;
|
|
margin: 15px 0;
|
|
border-radius: 0 8px 8px 0;
|
|
}
|
|
|
|
.highlight-box p {
|
|
margin: 0;
|
|
color: #ffb88c;
|
|
}
|
|
|
|
.tip-box {
|
|
background: rgba(0, 245, 255, 0.05);
|
|
border-left: 3px solid var(--cyan);
|
|
padding: 12px 15px;
|
|
margin: 10px 0;
|
|
border-radius: 0 8px 8px 0;
|
|
}
|
|
|
|
.tip-box p {
|
|
margin: 0;
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.stat-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 10px;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.stat-item {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
padding: 12px;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-value {
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: var(--cyan);
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 10px;
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- HUD Navigation -->
|
|
<nav class="hud-nav">
|
|
<div class="nav-logo">ENDFIELD</div>
|
|
<div class="nav-links">
|
|
<a href="#hero">Laevatain</a>
|
|
<a href="#yvonne">Yvonne</a>
|
|
<a href="#last-rite">Last Rite</a>
|
|
<a href="#snowshine">Snowshine</a>
|
|
<a href="#tier-list">Tier List</a>
|
|
<a href="#team-builder">Team Builder</a>
|
|
<a href="#game-guide">Game Guide</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero - Laevatain -->
|
|
<section class="hero" id="hero">
|
|
<img src="characters/Laevatain_Splash.png" alt="Laevatain" class="hero-character">
|
|
<div class="hero-content">
|
|
<div class="hero-badge">SS TIER // HEAT ELEMENT</div>
|
|
<h1><span class="outline">LAEVATAIN</span></h1>
|
|
<p>"Twilight of ruin!" - Best DPS in Arknights Endfield. Triggers Arts Bursts constantly for devastating damage.</p>
|
|
<div class="scroll-indicator">↓</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Character Showcase: Yvonne -->
|
|
<section class="character-showcase" id="yvonne">
|
|
<img src="characters/Yvonne_Splash.png" alt="Yvonne" class="character-showcase-character">
|
|
<div class="character-overlay"></div>
|
|
<div class="character-showcase-content">
|
|
<div class="character-number">OPERATOR // 002</div>
|
|
<h2 class="character-name">YVONNE</h2>
|
|
<div class="character-subtitle">// CRYO ELEMENT // SS TIER // CASTER CLASS</div>
|
|
<div class="character-tags">
|
|
<span class="char-tag">Cryo Infliction</span>
|
|
<span class="char-tag">Damage Dealer</span>
|
|
<span class="char-tag">Crit</span>
|
|
</div>
|
|
<p class="character-quote">"This pair of handcannons feels just right. I'll mod them into Yvonne-specials!"</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Character Showcase: Last Rite -->
|
|
<section class="character-showcase" id="last-rite">
|
|
<img src="characters/Last_Rite_Splash.webp" alt="Last Rite" class="character-showcase-character">
|
|
<div class="character-overlay"></div>
|
|
<div class="character-showcase-content">
|
|
<div class="character-number">OPERATOR // 003</div>
|
|
<h2 class="character-name">LAST RITE</h2>
|
|
<div class="character-subtitle">// CRYO ELEMENT // S TIER // STRIKER CLASS</div>
|
|
<div class="character-tags">
|
|
<span class="char-tag">Cryo Infliction</span>
|
|
<span class="char-tag">Shatter Combo</span>
|
|
</div>
|
|
<p class="character-quote">"Ætherside... An unknown and dangerous world." - Best Cryo DPS with shatter combo potential.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Character Showcase: Snowshine -->
|
|
<section class="character-showcase" id="snowshine">
|
|
<img src="characters/Snowshine.png" alt="Snowshine" class="character-showcase-character">
|
|
<div class="character-overlay"></div>
|
|
<div class="character-showcase-content">
|
|
<div class="character-number">OPERATOR // 004</div>
|
|
<h2 class="character-name">SNOWSHINE</h2>
|
|
<div class="character-subtitle">// CRYO ELEMENT // B TIER // SUPPORT</div>
|
|
<div class="character-tags">
|
|
<span class="char-tag">Cryo Support</span>
|
|
<span class="char-tag">Freezing Point</span>
|
|
</div>
|
|
<p class="character-quote">Cryo support specialist with freezing capabilities. Great for enabling shatter combos.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Tier List Section -->
|
|
<section class="section" id="tier-list">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Operator <span style="color: var(--cyan);">Roster</span></h2>
|
|
</div>
|
|
|
|
<div class="tier-header">
|
|
<div class="tier-badge tier-ss">SS</div>
|
|
<div class="tier-label">META DEFINING // GAME CHANGERS</div>
|
|
</div>
|
|
<div class="operator-grid">
|
|
<div class="operator-card">
|
|
<div style="width: 100%; height: 200px; background: var(--bg-dark); display: flex; align-items: center; justify-content: center;">
|
|
<img src="characters/laevatain_card.webp" alt="Laevatain" style="width: 120px; height: 120px; object-fit: contain;">
|
|
</div>
|
|
<div class="operator-card-content">
|
|
<span class="tier tier-ss-bg">SS</span>
|
|
<h4>LAEVATAIN</h4>
|
|
<p style="font-size: 10px; color: var(--text-secondary);">Heat Striker // Best DPS</p>
|
|
</div>
|
|
</div>
|
|
<div class="operator-card">
|
|
<div style="width: 100%; height: 200px; background: var(--bg-dark); display: flex; align-items: center; justify-content: center;">
|
|
<img src="characters/ardelia_card.webp" alt="Ardelia" style="width: 120px; height: 120px; object-fit: contain;">
|
|
</div>
|
|
<div class="operator-card-content">
|
|
<span class="tier tier-ss-bg">SS</span>
|
|
<h4>ARDELIA <span style="font-size: 9px; color: #39ff14; background: #000; padding: 2px 6px; border-radius: 3px;">FREE</span></h4>
|
|
<p style="font-size: 10px; color: var(--text-secondary);">Nature Support // Best Support</p>
|
|
</div>
|
|
</div>
|
|
<div class="operator-card">
|
|
<div style="width: 100%; height: 200px; background: var(--bg-dark); display: flex; align-items: center; justify-content: center;">
|
|
<img src="characters/yvonne_card.webp" alt="Yvonne" style="width: 120px; height: 120px; object-fit: contain;">
|
|
</div>
|
|
<div class="operator-card-content">
|
|
<span class="tier tier-ss-bg">SS</span>
|
|
<h4>YVONNE</h4>
|
|
<p style="font-size: 10px; color: var(--text-secondary);">Cryo Caster // ST DPS + CC</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tier-header">
|
|
<div class="tier-badge tier-s">S</div>
|
|
<div class="tier-label">CORE TEAM MEMBERS</div>
|
|
</div>
|
|
<div class="operator-grid">
|
|
<div class="operator-card">
|
|
<div style="width: 100%; height: 200px; background: var(--bg-dark); display: flex; align-items: center; justify-content: center;">
|
|
<img src="characters/lastrite_card.webp" alt="Last Rite" style="width: 120px; height: 120px; object-fit: contain;">
|
|
</div>
|
|
<div class="operator-card-content">
|
|
<span class="tier tier-s-bg">S</span>
|
|
<h4>LAST RITE</h4>
|
|
<p style="font-size: 10px; color: var(--text-secondary);">Cryo Striker // Shatter DPS</p>
|
|
</div>
|
|
</div>
|
|
<div class="operator-card">
|
|
<div style="width: 100%; height: 200px; background: var(--bg-dark); display: flex; align-items: center; justify-content: center;">
|
|
<img src="characters/pog_card.webp" alt="Pogranichnik" style="width: 120px; height: 120px; object-fit: contain;">
|
|
</div>
|
|
<div class="operator-card-content">
|
|
<span class="tier tier-s-bg">S</span>
|
|
<h4>POGRANICHNIK</h4>
|
|
<p style="font-size: 10px; color: var(--text-secondary);">Physical Vanguard // Best SP Gen</p>
|
|
</div>
|
|
</div>
|
|
<div class="operator-card">
|
|
<div style="width: 100%; height: 200px; background: var(--bg-dark); display: flex; align-items: center; justify-content: center;">
|
|
<img src="characters/antel_card.webp" alt="Antal" style="width: 120px; height: 120px; object-fit: contain;">
|
|
</div>
|
|
<div class="operator-card-content">
|
|
<span class="tier tier-s-bg">S</span>
|
|
<h4>ANTAL <span style="font-size: 9px; color: #39ff14; background: #000; padding: 2px 6px; border-radius: 3px;">FREE</span></h4>
|
|
<p style="font-size: 10px; color: var(--text-secondary);">Electric Support // Heat+Electric Amp</p>
|
|
</div>
|
|
</div>
|
|
<div class="operator-card">
|
|
<div style="width: 100%; height: 200px; background: var(--bg-dark); display: flex; align-items: center; justify-content: center;">
|
|
<img src="characters/xaihi_card.webp" alt="Xaihi" style="width: 120px; height: 120px; object-fit: contain;">
|
|
</div>
|
|
<div class="operator-card-content">
|
|
<span class="tier tier-s-bg">S</span>
|
|
<h4>XAIHI</h4>
|
|
<p style="font-size: 10px; color: var(--text-secondary);">Cryo Support // Cryo+Arts Amp</p>
|
|
</div>
|
|
</div>
|
|
<div class="operator-card">
|
|
<div style="width: 100%; height: 200px; background: var(--bg-dark); display: flex; align-items: center; justify-content: center;">
|
|
<img src="characters/gilberta_card.webp" alt="Gilberta" style="width: 120px; height: 120px; object-fit: contain;">
|
|
</div>
|
|
<div class="operator-card-content">
|
|
<span class="tier tier-s-bg">S</span>
|
|
<h4>GILBERTA</h4>
|
|
<p style="font-size: 10px; color: var(--text-secondary);">Nature Support // Best Utility</p>
|
|
</div>
|
|
</div>
|
|
<div class="operator-card">
|
|
<div style="width: 100%; height: 200px; background: var(--bg-dark); display: flex; align-items: center; justify-content: center;">
|
|
<img src="characters/lifeng_card.webp" alt="Lifeng" style="width: 120px; height: 120px; object-fit: contain;">
|
|
</div>
|
|
<div class="operator-card-content">
|
|
<span class="tier tier-s-bg">S</span>
|
|
<h4>LIFENG</h4>
|
|
<p style="font-size: 10px; color: var(--text-secondary);">Physical Guard // Physical DPS</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tier-header">
|
|
<div class="tier-badge tier-a">A</div>
|
|
<div class="tier-label">STRONG BUT REPLACEABLE</div>
|
|
</div>
|
|
<div class="operator-grid">
|
|
<div class="operator-card">
|
|
<div style="width: 100%; height: 200px; background: var(--bg-dark); display: flex; align-items: center; justify-content: center;">
|
|
<img src="characters/endministrator_card.webp" alt="Endministrator" style="width: 120px; height: 120px; object-fit: contain;">
|
|
</div>
|
|
<div class="operator-card-content">
|
|
<span class="tier tier-a-bg">A</span>
|
|
<h4>ENDMINISTRATOR</h4>
|
|
<p style="font-size: 10px; color: var(--text-secondary);">Physical Guard // Main Character</p>
|
|
</div>
|
|
</div>
|
|
<div class="operator-card">
|
|
<div style="width: 100%; height: 200px; background: var(--bg-dark); display: flex; align-items: center; justify-content: center;">
|
|
<img src="characters/wulfguard_card.webp" alt="Wulfgard" style="width: 120px; height: 120px; object-fit: contain;">
|
|
</div>
|
|
<div class="operator-card-content">
|
|
<span class="tier tier-a-bg">A</span>
|
|
<h4>WULFGARD</h4>
|
|
<p style="font-size: 10px; color: var(--text-secondary);">Heat Caster // Combustion</p>
|
|
</div>
|
|
</div>
|
|
<div class="operator-card">
|
|
<div style="width: 100%; height: 200px; background: var(--bg-dark); display: flex; align-items: center; justify-content: center;">
|
|
<img src="characters/perlica_card.webp" alt="Perlica" style="width: 120px; height: 120px; object-fit: contain;">
|
|
</div>
|
|
<div class="operator-card-content">
|
|
<span class="tier tier-a-bg">A</span>
|
|
<h4>PERLICA</h4>
|
|
<p style="font-size: 10px; color: var(--text-secondary);">Electric Caster // Electrification</p>
|
|
</div>
|
|
</div>
|
|
<div class="operator-card">
|
|
<div style="width: 100%; height: 200px; background: var(--bg-dark); display: flex; align-items: center; justify-content: center;">
|
|
<img src="characters/avywenna_card.webp" alt="Avywenna" style="width: 120px; height: 120px; object-fit: contain;">
|
|
</div>
|
|
<div class="operator-card-content">
|
|
<span class="tier tier-a-bg">A</span>
|
|
<h4>AVYWENNA</h4>
|
|
<p style="font-size: 10px; color: var(--text-secondary);">Electric Striker // Electric DPS</p>
|
|
</div>
|
|
</div>
|
|
<div class="operator-card">
|
|
<div style="width: 100%; height: 200px; background: var(--bg-dark); display: flex; align-items: center; justify-content: center;">
|
|
<img src="characters/akekuri_card.webp" alt="Akekuri" style="width: 120px; height: 120px; object-fit: contain;">
|
|
</div>
|
|
<div class="operator-card-content">
|
|
<span class="tier tier-a-bg">A</span>
|
|
<h4>AKEKURI <span style="font-size: 9px; color: #39ff14; background: #000; padding: 2px 6px; border-radius: 3px;">FREE</span></h4>
|
|
<p style="font-size: 10px; color: var(--text-secondary);">Heat Vanguard // SP Battery</p>
|
|
</div>
|
|
</div>
|
|
<div class="operator-card">
|
|
<div style="width: 100%; height: 200px; background: var(--bg-dark); display: flex; align-items: center; justify-content: center;">
|
|
<img src="characters/chen_qianyu_card.webp" alt="Chen Qianyu" style="width: 120px; height: 120px; object-fit: contain;">
|
|
</div>
|
|
<div class="operator-card-content">
|
|
<span class="tier tier-a-bg">A</span>
|
|
<h4>CHEN QIANYU</h4>
|
|
<p style="font-size: 10px; color: var(--text-secondary);">Physical Guard // Vulnerable</p>
|
|
</div>
|
|
</div>
|
|
<div class="operator-card">
|
|
<div style="width: 100%; height: 200px; background: var(--bg-dark); display: flex; align-items: center; justify-content: center;">
|
|
<img src="characters/da_pan_card.webp" alt="Da Pan" style="width: 120px; height: 120px; object-fit: contain;">
|
|
</div>
|
|
<div class="operator-card-content">
|
|
<span class="tier tier-a-bg">A</span>
|
|
<h4>DA PAN</h4>
|
|
<p style="font-size: 10px; color: var(--text-secondary);">Physical Striker // Crush DPS</p>
|
|
</div>
|
|
</div>
|
|
<div class="operator-card">
|
|
<div style="width: 100%; height: 200px; background: var(--bg-dark); display: flex; align-items: center; justify-content: center;">
|
|
<img src="characters/alesh_card.webp" alt="Alesh" style="width: 120px; height: 120px; object-fit: contain;">
|
|
</div>
|
|
<div class="operator-card-content">
|
|
<span class="tier tier-a-bg">A</span>
|
|
<h4>ALESH <span style="font-size: 9px; color: #39ff14; background: #000; padding: 2px 6px; border-radius: 3px;">FREE</span></h4>
|
|
<p style="font-size: 10px; color: var(--text-secondary);">Cryo Vanguard // SP Gen</p>
|
|
</div>
|
|
</div>
|
|
<div class="operator-card">
|
|
<div style="width: 100%; height: 200px; background: var(--bg-dark); display: flex; align-items: center; justify-content: center;">
|
|
<img src="characters/arclight_card.webp" alt="Arclight" style="width: 120px; height: 120px; object-fit: contain;">
|
|
</div>
|
|
<div class="operator-card-content">
|
|
<span class="tier tier-a-bg">A</span>
|
|
<h4>ARCLIGHT</h4>
|
|
<p style="font-size: 10px; color: var(--text-secondary);">Electric Vanguard // SP Gen</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tier-header">
|
|
<div class="tier-badge tier-a" style="background: linear-gradient(135deg, #6b7280, #4b5563);">B</div>
|
|
<div class="tier-label">NICHE PICKS</div>
|
|
</div>
|
|
<div class="operator-grid">
|
|
<div class="operator-card">
|
|
<div style="width: 100%; height: 200px; background: var(--bg-dark); display: flex; align-items: center; justify-content: center;">
|
|
<img src="characters/ember_card.webp" alt="Ember" style="width: 120px; height: 120px; object-fit: contain;">
|
|
</div>
|
|
<div class="operator-card-content">
|
|
<span class="tier" style="background: linear-gradient(135deg, #6b7280, #4b5563); color: #fff;">B</span>
|
|
<h4>EMBER</h4>
|
|
<p style="font-size: 10px; color: var(--text-secondary);">Heat Defender // Healer</p>
|
|
</div>
|
|
</div>
|
|
<div class="operator-card">
|
|
<div style="width: 100%; height: 200px; background: var(--bg-dark); display: flex; align-items: center; justify-content: center;">
|
|
<img src="characters/snowshine_card.webp" alt="Snowshine" style="width: 120px; height: 120px; object-fit: contain;">
|
|
</div>
|
|
<div class="operator-card-content">
|
|
<span class="tier" style="background: linear-gradient(135deg, #6b7280, #4b5563); color: #fff;">B</span>
|
|
<h4>SNOWSHINE</h4>
|
|
<p style="font-size: 10px; color: var(--text-secondary);">Cryo Defender // Healer</p>
|
|
</div>
|
|
</div>
|
|
<div class="operator-card">
|
|
<div style="width: 100%; height: 200px; background: var(--bg-dark); display: flex; align-items: center; justify-content: center;">
|
|
<img src="characters/estella_card.webp" alt="Estella" style="width: 120px; height: 120px; object-fit: contain;">
|
|
</div>
|
|
<div class="operator-card-content">
|
|
<span class="tier" style="background: linear-gradient(135deg, #6b7280, #4b5563); color: #fff;">B</span>
|
|
<h4>ESTELLA</h4>
|
|
<p style="font-size: 10px; color: var(--text-secondary);">Cryo Guard // Physical Hybrid</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tier-header">
|
|
<div class="tier-badge" style="background: linear-gradient(135deg, #374151, #1f2937);">C</div>
|
|
<div class="tier-label">LIMITED USAGE // AVOID</div>
|
|
</div>
|
|
<div class="operator-grid">
|
|
<div class="operator-card" style="opacity: 0.7;">
|
|
<div style="width: 100%; height: 200px; background: var(--bg-dark); display: flex; align-items: center; justify-content: center;">
|
|
<img src="characters/fluorite_card.webp" alt="Fluorite" style="width: 120px; height: 120px; object-fit: contain;">
|
|
</div>
|
|
<div class="operator-card-content">
|
|
<span class="tier" style="background: linear-gradient(135deg, #374151, #1f2937); color: #888;">C</span>
|
|
<h4>FLUORITE</h4>
|
|
<p style="font-size: 10px; color: var(--text-secondary);">Nature Caster // Worst Unit</p>
|
|
</div>
|
|
</div>
|
|
<div class="operator-card" style="opacity: 0.7;">
|
|
<div style="width: 100%; height: 200px; background: var(--bg-dark); display: flex; align-items: center; justify-content: center;">
|
|
<img src="characters/catcher_card.webp" alt="Catcher" style="width: 120px; height: 120px; object-fit: contain;">
|
|
</div>
|
|
<div class="operator-card-content">
|
|
<span class="tier" style="background: linear-gradient(135deg, #374151, #1f2937); color: #888;">C</span>
|
|
<h4>CATCHER</h4>
|
|
<p style="font-size: 10px; color: var(--text-secondary);">Physical Defender // Worst Unit</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Team Builder -->
|
|
<section class="section" id="team-builder">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Tactical <span style="color: var(--cyan);">Team Builder</span></h2>
|
|
</div>
|
|
|
|
<div class="team-builder">
|
|
<h3 style="font-family: 'Orbitron', sans-serif; font-size: 14px; letter-spacing: 2px; color: var(--text-secondary); margin-bottom: 25px;">
|
|
// SELECT YOUR OPERATORS TO SEE SYNERGY SUGGESTIONS
|
|
</h3>
|
|
|
|
<div class="team-slots" id="teamSlots">
|
|
<div class="team-slot">+</div>
|
|
<div class="team-slot">+</div>
|
|
<div class="team-slot">+</div>
|
|
<div class="team-slot">+</div>
|
|
</div>
|
|
|
|
<div class="operator-select" id="operatorSelect">
|
|
<!-- Populated by JS -->
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 15px; justify-content: center; margin-bottom: 20px;">
|
|
<button class="clear-btn" onclick="clearTeam()">[ RESET SELECTION ]</button>
|
|
<button class="clear-btn" onclick="showTeamBuilds()" style="border-color: var(--cyan); color: var(--cyan);">[ VIEW TEAM BUILDS ]</button>
|
|
</div>
|
|
|
|
<div class="suggestions" id="suggestions">
|
|
<h4 style="font-family: 'Orbitron', sans-serif; font-size: 14px; color: var(--cyan); margin-bottom: 20px;">
|
|
> RECOMMENDED SYNERGIES
|
|
</h4>
|
|
<div id="suggestionsList"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Game Guide Section -->
|
|
<section class="section" id="game-guide">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Game <span style="color: var(--cyan);">Guide</span></h2>
|
|
</div>
|
|
|
|
<div class="guide-grid">
|
|
<!-- Stamina / Sanity System -->
|
|
<div class="guide-card">
|
|
<h3>STAMINA (SANITY)</h3>
|
|
<div class="stat-grid">
|
|
<div class="stat-item">
|
|
<div class="stat-value">120</div>
|
|
<div class="stat-label">Starting Max</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">360</div>
|
|
<div class="stat-label">Absolute Max</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight-box">
|
|
<p><strong>IMPORTANT:</strong> Sanity is ONLY consumed when you complete stages. Leaving early or failing costs 0 sanity!</p>
|
|
</div>
|
|
<table class="currency-table">
|
|
<tr><th>Aspect</th><th>Details</th></tr>
|
|
<tr><td>Base Regen</td><td>1 Sanity every 7m 12s</td></tr>
|
|
<tr><td>Daily Recovery</td><td>200 Sanity per 24h (full refill)</td></tr>
|
|
<tr><td>Standard Stage</td><td>12-20 Sanity</td></tr>
|
|
<tr><td>Challenge Stage</td><td>20-30 Sanity</td></tr>
|
|
</table>
|
|
<h4>Restoration Methods</h4>
|
|
<ul>
|
|
<li>Oroberyl Potions - 40 Sanity per use, 6/day limit</li>
|
|
<li>Daily Missions - Often include Sanity refresh items</li>
|
|
<li>Level Up Bonus - Instant Sanity refresh on Authority Level up</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Currencies -->
|
|
<div class="guide-card">
|
|
<h3>CURRENCIES</h3>
|
|
<h4>Oroberyl (Character Pulls)</h4>
|
|
<div style="display: flex; align-items: center; gap: 15px; margin: 10px 0;">
|
|
<img src="currencies/Oroberyl.png" alt="Oroberyl" style="width: 50px; height: 50px; object-fit: contain; border-radius: 8px; background: rgba(255,255,255,0.05); padding: 5px;">
|
|
<div>
|
|
<table class="currency-table" style="margin: 0;">
|
|
<tr><th>Pull Type</th><th>Cost</th></tr>
|
|
<tr><td>Single Pull</td><td>500</td></tr>
|
|
<tr><td>10-Pull</td><td>5,000</td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<h4>Origeometry (Premium)</h4>
|
|
<div style="display: flex; align-items: center; gap: 15px; margin: 10px 0;">
|
|
<img src="currencies/Origeometry.png" alt="Origeometry" style="width: 50px; height: 50px; object-fit: contain; border-radius: 8px; background: rgba(255,255,255,0.05); padding: 5px;">
|
|
<div>
|
|
<table class="currency-table" style="margin: 0;">
|
|
<tr><th>Conversion</th><th>Amount</th></tr>
|
|
<tr><td>→ Oroberyl</td><td>75 per unit</td></tr>
|
|
<tr><td>→ Stamina</td><td>40 stamina</td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<h4>Arsenal Tickets (Weapons)</h4>
|
|
<div style="display: flex; align-items: center; gap: 15px; margin: 10px 0;">
|
|
<img src="currencies/Arsenal_Ticket.png" alt="Arsenal Ticket" style="width: 50px; height: 50px; object-fit: contain; border-radius: 8px; background: rgba(255,255,255,0.05); padding: 5px;">
|
|
<div>
|
|
<p style="margin: 0;">From character pulls: 6★ = 2,000 | 5★ = 200 | 4★ = 20</p>
|
|
</div>
|
|
</div>
|
|
<h4>T-Creds (Upgrades)</h4>
|
|
<div style="display: flex; align-items: center; gap: 15px; margin: 10px 0;">
|
|
<img src="currencies/T-Creds.png" alt="T-Creds" style="width: 50px; height: 50px; object-fit: contain; border-radius: 8px; background: rgba(255,255,255,0.05); padding: 5px;">
|
|
<div>
|
|
<p style="margin: 0;">For operator leveling, skills, and weapons</p>
|
|
</div>
|
|
</div>
|
|
<h4>Credits (Currency Exchange)</h4>
|
|
<div style="display: flex; align-items: center; gap: 15px; margin: 10px 0;">
|
|
<img src="currencies/Credits.png" alt="Credits" style="width: 50px; height: 50px; object-fit: contain; border-radius: 8px; background: rgba(255,255,255,0.05); padding: 5px;">
|
|
<div>
|
|
<p style="margin: 0;">Basic currency from missions and exchanges</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Minerals / Ores -->
|
|
<div class="guide-card">
|
|
<h3>MINERALS & ORES</h3>
|
|
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 15px 0;">
|
|
<div style="text-align: center;">
|
|
<img src="minerals/Originium_Ore.png" alt="Originium Ore" style="width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: rgba(255,255,255,0.05); padding: 8px; margin-bottom: 5px;">
|
|
<p style="font-size: 11px; color: var(--text-secondary); margin: 0;">Originium Ore</p>
|
|
</div>
|
|
<div style="text-align: center;">
|
|
<img src="minerals/Origocrust.png" alt="Origocrust" style="width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: rgba(255,255,255,0.05); padding: 8px; margin-bottom: 5px;">
|
|
<p style="font-size: 11px; color: var(--text-secondary); margin: 0;">Origocrust</p>
|
|
</div>
|
|
<div style="text-align: center;">
|
|
<img src="minerals/Ferrium_Ore.png" alt="Ferrium Ore" style="width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: rgba(255,255,255,0.05); padding: 8px; margin-bottom: 5px;">
|
|
<p style="font-size: 11px; color: var(--text-secondary); margin: 0;">Ferrium Ore</p>
|
|
</div>
|
|
<div style="text-align: center;">
|
|
<img src="minerals/Amethyst_Ore.png" alt="Amethyst Ore" style="width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: rgba(255,255,255,0.05); padding: 8px; margin-bottom: 5px;">
|
|
<p style="font-size: 11px; color: var(--text-secondary); margin: 0;">Amethyst Ore</p>
|
|
</div>
|
|
<div style="text-align: center;">
|
|
<img src="minerals/Green_Battery.png" alt="Green Battery" style="width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: rgba(255,255,255,0.05); padding: 8px; margin-bottom: 5px;">
|
|
<p style="font-size: 11px; color: var(--text-secondary); margin: 0;">Green Battery</p>
|
|
</div>
|
|
</div>
|
|
<p style="font-size: 12px; color: var(--text-secondary);">Mining and exploration resources used for crafting and upgrades.</p>
|
|
</div>
|
|
|
|
<!-- Beginner Tips -->
|
|
<div class="guide-card">
|
|
<h3>BEGINNER GUIDE</h3>
|
|
<h4>Launch Day Checklist</h4>
|
|
<ul>
|
|
<li>Complete the tutorial</li>
|
|
<li>Claim 20K sign-in bonus currency</li>
|
|
<li>Pull on New Horizon's Banner (guaranteed 6★)</li>
|
|
<li>Use the free 4★ units (Antal, Alesh, Akekuri, Ardelia)</li>
|
|
</ul>
|
|
<h4>Progression Priority</h4>
|
|
<ol>
|
|
<li>Level your best DPS (Laevatain, Yvonne, Last Rite)</li>
|
|
<li>Build a support (Ardelia is free and best in slot)</li>
|
|
<li>Unlock Protocol Spaces for farming</li>
|
|
<li>Focus on story progression first</li>
|
|
</ol>
|
|
<div class="tip-box">
|
|
<p><strong>PRO TIP:</strong> Sanity regenerates 200/day. Don't let it cap - spend before it fills!</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Team Composition -->
|
|
<div class="guide-card">
|
|
<h3>TEAM BASICS</h3>
|
|
<h4>Team Size: 4 Operators</h4>
|
|
<p>A balanced team needs:</p>
|
|
<ul>
|
|
<li><strong>1 Main DPS</strong> - Laevatain (Heat), Yvonne (Cryo), or Last Rite (Cryo shatter)</li>
|
|
<li><strong>1 Support</strong> - Ardelia (free, best), Antal (free, amp), or Gilberta (CC)</li>
|
|
<li><strong>1 Sub-DPS/Secondary</strong> - Perlica (Electric), Xaihi (Cryo amp), or Wulfgard (Heat)</li>
|
|
<li><strong>1 Flex</strong> - Vanguard/SP generator like Pogranichnik, Alesh, or Akekuri</li>
|
|
</ul>
|
|
<h4>Element Synergies</h4>
|
|
<ul>
|
|
<li><strong style="color: var(--orange);">Heat</strong> - Combustion DoT + Melting with Electric</li>
|
|
<li><strong style="color: var(--cyan);">Cryo</strong> - Freeze + Shatter combo</li>
|
|
<li><strong style="color: #a855f7;">Electric</strong> - Electrification spreads to nearby enemies</li>
|
|
<li><strong style="color: #22c55e;">Nature</strong> - Susceptibility + Corrosion debuffs</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Free Units -->
|
|
<div class="guide-card">
|
|
<h3>FREE UNITS</h3>
|
|
<div class="highlight-box" style="border-color: #39ff14; background: rgba(57, 255, 20, 0.1);">
|
|
<p><strong>These units are FREE and META:</strong> Use them while building your team!</p>
|
|
</div>
|
|
<h4>Ardelia (SS Tier Nature Support)</h4>
|
|
<p>Best support in the game. Applies Susceptibility and Corrosion. Essential for melt teams.</p>
|
|
<h4>Antal (S Tier Electric Support)</h4>
|
|
<p>Provides Heat AND Electric amplification. Pairs perfectly with Laevatain or Electric teams.</p>
|
|
<h4>Alesh (A Tier Cryo Vanguard)</h4>
|
|
<p>SP generator with Solidification. Great for Cryo teams.</p>
|
|
<h4>Akekuri (A Tier Heat Vanguard)</h4>
|
|
<p>SP battery. Infinite SP for your main DPS.</p>
|
|
</div>
|
|
|
|
<!-- FAQ -->
|
|
<div class="guide-card">
|
|
<h3>QUICK FAQ</h3>
|
|
<h4>What should I pull for?</h4>
|
|
<p>Prioritize Laevatain (best DPS) or Yvonne (Cryo DPS). Ardelia is free and essential.</p>
|
|
<h4>How do I get more operators?</h4>
|
|
<p>Use Oroberyl from sign-in bonus, dailies, and exploration on the gacha banners.</p>
|
|
<h4>What's the best starter team?</h4>
|
|
<p>Laevatain + Ardelia + Antal + Any SP generator. Carries through all content.</p>
|
|
<h4>Do I need to spend money?</h4>
|
|
<p>No! Free units are very strong. Ardelia alone enables most teams.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<p>ENDFIELD OPERATOR DATABASE // <span style="color: var(--cyan);">SYSTEM V2.0</span> // <span style="color: #39ff14;">ONLINE</span></p>
|
|
<p style="margin-top: 10px; font-size: 10px; opacity: 0.5;">Images from Endfield Wiki • Official Game Assets</p>
|
|
</footer>
|
|
|
|
<!-- Team Builds Modal -->
|
|
<div class="builds-modal" id="buildsModal">
|
|
<div class="builds-container">
|
|
<div class="builds-header">
|
|
<h2 class="builds-title">TEAM BUILDS</h2>
|
|
<button class="builds-close" onclick="closeBuildsModal()">[ CLOSE ]</button>
|
|
</div>
|
|
<div id="buildsContent"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Operator data with images and stats
|
|
const operators = [
|
|
// SS TIER - Meta Defining
|
|
{ id: 'laevatain', name: 'Laevatain', tier: 'SS', element: 'Heat', role: 'Striker', img: 'characters/Laevatain.png', cardImg: 'characters/laevatain_card.webp' },
|
|
{ id: 'ardelia', name: 'Ardelia', tier: 'SS', element: 'Nature', role: 'Support', img: 'characters/Ardelia_Splash.webp', cardImg: 'characters/ardelia_card.webp', free: true },
|
|
{ id: 'yvonne', name: 'Yvonne', tier: 'SS', element: 'Cryo', role: 'Caster', img: 'characters/Yvonne.png', cardImg: 'characters/yvonne_card.webp' },
|
|
|
|
// S TIER - Core Team Members
|
|
{ id: 'last_rite', name: 'Last Rite', tier: 'S', element: 'Cryo', role: 'Striker', img: 'characters/Last_Rite_Splash.webp', cardImg: 'characters/lastrite_card.webp' },
|
|
{ id: 'pogranichnik', name: 'Pogranichnik', tier: 'S', element: 'Physical', role: 'Vanguard', img: 'characters/Pogranichnik_Splash.webp', cardImg: 'characters/pog_card.webp' },
|
|
{ id: 'antal', name: 'Antal', tier: 'S', element: 'Electric', role: 'Support', img: 'characters/Antal_Splash.webp', cardImg: 'characters/antel_card.webp', free: true },
|
|
{ id: 'xaihi', name: 'Xaihi', tier: 'S', element: 'Cryo', role: 'Support', img: 'characters/Xaihi.png', cardImg: 'characters/xaihi_card.webp' },
|
|
{ id: 'gilberta', name: 'Gilberta', tier: 'S', element: 'Nature', role: 'Support', img: 'characters/Gilberta.png', cardImg: 'characters/gilberta_card.webp' },
|
|
{ id: 'lifeng', name: 'Lifeng', tier: 'S', element: 'Physical', role: 'Guard', img: 'characters/Lifeng.png', cardImg: 'characters/lifeng_card.webp' },
|
|
|
|
// A TIER - Strong but Replaceable
|
|
{ id: 'endministrator', name: 'Endministrator', tier: 'A', element: 'Physical', role: 'Guard', img: 'characters/Endministrator.png', cardImg: 'characters/endministrator_card.webp' },
|
|
{ id: 'wulfgard', name: 'Wulfgard', tier: 'A', element: 'Heat', role: 'Caster', img: 'characters/Wulfgard.png', cardImg: 'characters/wulfguard_card.webp' },
|
|
{ id: 'perlica', name: 'Perlica', tier: 'A', element: 'Electric', role: 'Caster', img: 'characters/Perlica.png', cardImg: 'characters/perlica_card.webp' },
|
|
{ id: 'avywenna', name: 'Avywenna', tier: 'A', element: 'Electric', role: 'Striker', img: 'characters/Avywenna.png', cardImg: 'characters/avywenna_card.webp' },
|
|
{ id: 'akekuri', name: 'Akekuri', tier: 'A', element: 'Heat', role: 'Vanguard', img: 'characters/Akekuri_Splash.webp', cardImg: 'characters/akekuri_card.webp', free: true },
|
|
{ id: 'chen_qianyu', name: 'Chen Qianyu', tier: 'A', element: 'Physical', role: 'Guard', img: 'characters/Chen_Qianyu.png', cardImg: 'characters/chen_qianyu_card.webp' },
|
|
{ id: 'da_pan', name: 'Da Pan', tier: 'A', element: 'Physical', role: 'Striker', img: 'characters/Da_Pan.png', cardImg: 'characters/da_pan_card.webp' },
|
|
{ id: 'alesh', name: 'Alesh', tier: 'A', element: 'Cryo', role: 'Vanguard', img: 'characters/Alesh_Splash.webp', cardImg: 'characters/alesh_card.webp', free: true },
|
|
{ id: 'arclight', name: 'Arclight', tier: 'A', element: 'Electric', role: 'Vanguard', img: 'characters/Arclight.png', cardImg: 'characters/arclight_card.webp' },
|
|
|
|
// B TIER - Niche Picks
|
|
{ id: 'ember', name: 'Ember', tier: 'B', element: 'Heat', role: 'Defender', img: 'characters/Ember.png', cardImg: 'characters/ember_card.webp' },
|
|
{ id: 'snowshine', name: 'Snowshine', tier: 'B', element: 'Cryo', role: 'Defender', img: 'characters/Snowshine.png', cardImg: 'characters/snowshine_card.webp' },
|
|
{ id: 'estella', name: 'Estella', tier: 'B', element: 'Cryo', role: 'Guard', img: 'characters/Estella_Splash.webp', cardImg: 'characters/estella_card.webp' },
|
|
|
|
// C TIER - Limited Usage (avoid)
|
|
{ id: 'fluorite', name: 'Fluorite', tier: 'C', element: 'Nature', role: 'Caster', img: 'characters/Fluorite_Splash.webp', cardImg: 'characters/fluorite_card.webp' },
|
|
{ id: 'catcher', name: 'Catcher', tier: 'C', element: 'Physical', role: 'Defender', img: 'characters/Catcher_Splash.webp', cardImg: 'characters/catcher_card.webp' },
|
|
];
|
|
|
|
// Build data - weapons, modules, skills for each operator
|
|
const builds = {
|
|
laevatain: {
|
|
weapons: [
|
|
{ name: 'Crimson Lotus', priority: 'S', desc: 'Best in slot - maximizes Arts Burst damage' },
|
|
{ name: 'Inferno Blade', priority: 'A', desc: 'Alternative - higher base attack' },
|
|
{ name: 'Flame Edge', priority: 'B', desc: 'F2P option - solid performance' },
|
|
],
|
|
modules: [
|
|
{ name: 'Burning Heart Module', priority: 'S', desc: 'Core damage module - increases Arts damage by 25%' },
|
|
{ name: 'Burst Enhancer', priority: 'A', desc: 'Arts Burst frequency boost' },
|
|
],
|
|
skills: [
|
|
{ name: 'Skill: Twilight Ruin', priority: 'S', desc: 'Main damage dealer - massive AoE Arts Burst' },
|
|
{ name: 'Skill: Blaze Cascade', priority: 'A', desc: 'Single target burst mode' },
|
|
]
|
|
},
|
|
ardelia: {
|
|
weapons: [
|
|
{ name: 'Nature\'s Grasp', priority: 'S', desc: 'Maximizes Susceptibility application' },
|
|
{ name: 'Vine Whip', priority: 'A', desc: 'Faster attack speed trade-off' },
|
|
],
|
|
modules: [
|
|
{ name: 'Corrosion Module', priority: 'S', desc: 'Essential - enables melt combos' },
|
|
{ name: 'Support Core', priority: 'A', desc: 'Team utility boost' },
|
|
],
|
|
skills: [
|
|
{ name: 'Skill: Entangling Roots', priority: 'S', desc: 'Main CC + Susceptibility' },
|
|
{ name: 'Skill: Nature\'s Blessing', priority: 'A', desc: 'Team buff mode' },
|
|
]
|
|
},
|
|
yvonne: {
|
|
weapons: [
|
|
{ name: 'Frost Cannons', priority: 'S', desc: 'Best Cryo damage output' },
|
|
{ name: 'Ice Breaker', priority: 'A', desc: 'Higher shatter damage' },
|
|
],
|
|
modules: [
|
|
{ name: 'Cryo Core', priority: 'S', desc: 'Freeze rate + damage boost' },
|
|
{ name: 'Precision Module', priority: 'A', desc: 'Crit damage increase' },
|
|
],
|
|
skills: [
|
|
{ name: 'Skill: Absolute Zero', priority: 'S', desc: 'Main freeze + burst damage' },
|
|
{ name: 'Skill: Cryo Barrage', priority: 'A', desc: 'Sustained damage mode' },
|
|
]
|
|
},
|
|
last_rite: {
|
|
weapons: [
|
|
{ name: 'Shatter Blade', priority: 'S', desc: 'Shatter combo main hand' },
|
|
{ name: 'Frost Edge', priority: 'A', desc: 'Higher freeze application' },
|
|
],
|
|
modules: [
|
|
{ name: 'Shatter Core', priority: 'S', desc: 'Essential for shatter damage' },
|
|
{ name: 'Cryo Amp', priority: 'A', desc: 'Damage vs frozen enemies' },
|
|
],
|
|
skills: [
|
|
{ name: 'Skill: Fracture Strike', priority: 'S', desc: 'Shatter burst damage' },
|
|
{ name: 'Skill: Glacial Fury', priority: 'A', desc: 'AoE freeze mode' },
|
|
]
|
|
},
|
|
pogranichnik: {
|
|
weapons: [
|
|
{ name: 'Breach Hammer', priority: 'S', desc: 'Max defense shred' },
|
|
{ name: 'SP Generator', priority: 'A', desc: 'Team battery focus' },
|
|
],
|
|
modules: [
|
|
{ name: 'Vanguard Core', priority: 'S', desc: 'SP generation boost' },
|
|
{ name: 'Breach Module', priority: 'A', desc: 'Defense reduction' },
|
|
],
|
|
skills: [
|
|
{ name: 'Skill: Line Breaker', priority: 'S', desc: 'Main SP gen + Breach' },
|
|
{ name: 'Skill: Fortress', priority: 'A', desc: 'Defensive mode' },
|
|
]
|
|
},
|
|
antal: {
|
|
weapons: [
|
|
{ name: 'Amplifier Rod', priority: 'S', desc: 'Best amp output' },
|
|
{ name: 'Support Staff', priority: 'A', desc: 'More utility focus' },
|
|
],
|
|
modules: [
|
|
{ name: 'Heat Amp Core', priority: 'S', desc: 'Heat damage boost' },
|
|
{ name: 'Electric Link', priority: 'A', desc: 'Electric amp secondary' },
|
|
],
|
|
skills: [
|
|
{ name: 'Skill: Dual Amplify', priority: 'S', desc: 'Heat + Electric amp' },
|
|
{ name: 'Skill: Heat Field', priority: 'A', desc: 'AoE Heat buff' },
|
|
]
|
|
},
|
|
xaihi: {
|
|
weapons: [
|
|
{ name: 'Cryo Tome', priority: 'S', desc: 'Cryo amp + Arts amp combo' },
|
|
{ name: 'Frost Grimoire', priority: 'A', desc: 'Pure Cryo focus' },
|
|
],
|
|
modules: [
|
|
{ name: 'Cryo Amplifier', priority: 'S', desc: 'Cryo damage boost' },
|
|
{ name: 'Arts Resonator', priority: 'A', desc: 'Arts damage amp' },
|
|
],
|
|
skills: [
|
|
{ name: 'Skill: Winter\'s Grasp', priority: 'S', desc: 'Cryo amp + slow' },
|
|
{ name: 'Skill: Frost Armor', priority: 'A', desc: 'Team defensive buff' },
|
|
]
|
|
},
|
|
gilberta: {
|
|
weapons: [
|
|
{ name: 'Gravity Well', priority: 'S', desc: 'Best crowd control' },
|
|
{ name: 'Pull Caster', priority: 'A', desc: 'Faster reposition' },
|
|
],
|
|
modules: [
|
|
{ name: 'CC Module', priority: 'S', desc: 'Increased pull radius' },
|
|
{ name: 'Nature Core', priority: 'A', desc: 'Nature damage boost' },
|
|
],
|
|
skills: [
|
|
{ name: 'Skill: Event Horizon', priority: 'S', desc: 'Main pull + CC' },
|
|
{ name: 'Skill: Singularity', priority: 'A', desc: 'Larger radius, longer CD' },
|
|
]
|
|
},
|
|
lifeng: {
|
|
weapons: [
|
|
{ name: 'Physical Greatsword', priority: 'S', desc: 'Best Physical damage' },
|
|
{ name: 'Crusher', priority: 'A', desc: 'Higher impact damage' },
|
|
],
|
|
modules: [
|
|
{ name: 'Physical Core', priority: 'S', desc: 'Susceptibility boost' },
|
|
{ name: 'DPS Module', priority: 'A', desc: 'Raw damage increase' },
|
|
],
|
|
skills: [
|
|
{ name: 'Skill: Storm Blade', priority: 'S', desc: 'Main Physical DPS' },
|
|
{ name: 'Skill: Guardian', priority: 'A', desc: 'Defensive mode' },
|
|
]
|
|
},
|
|
endministrator: {
|
|
weapons: [
|
|
{ name: 'Crystal Blade', priority: 'S', desc: 'Originium Crystal synergy' },
|
|
{ name: 'Admin Staff', priority: 'A', desc: 'Support focus' },
|
|
],
|
|
modules: [
|
|
{ name: 'MC Module', priority: 'S', desc: 'Crystal generation boost' },
|
|
{ name: 'Physical Amp', priority: 'A', desc: 'Physical damage' },
|
|
],
|
|
skills: [
|
|
{ name: 'Skill: Administration', priority: 'S', desc: 'Main DPS + crystals' },
|
|
{ name: 'Skill: Command', priority: 'A', desc: 'Team buff mode' },
|
|
]
|
|
},
|
|
wulfgard: {
|
|
weapons: [
|
|
{ name: 'Combustion Cane', priority: 'S', desc: 'Best Combustion uptime' },
|
|
{ name: 'Fire Staff', priority: 'A', desc: 'Higher burst damage' },
|
|
],
|
|
modules: [
|
|
{ name: 'Heat Core', priority: 'S', desc: 'Combustion damage boost' },
|
|
{ name: 'Burn Module', priority: 'A', desc: 'DoT increase' },
|
|
],
|
|
skills: [
|
|
{ name: 'Skill: Inferno', priority: 'S', desc: 'Combustion application + damage' },
|
|
{ name: 'Skill: Wildfire', priority: 'A', desc: 'AoE spread mode' },
|
|
]
|
|
},
|
|
perlica: {
|
|
weapons: [
|
|
{ name: 'Shock Baton', priority: 'S', desc: 'Electrification focus' },
|
|
{ name: 'Tesla Coil', priority: 'A', desc: 'Higher Electric damage' },
|
|
],
|
|
modules: [
|
|
{ name: 'Electric Core', priority: 'S', desc: 'Electrification rate' },
|
|
{ name: 'Chain Module', priority: 'A', desc: 'Jump increase' },
|
|
],
|
|
skills: [
|
|
{ name: 'Skill: Overload', priority: 'S', desc: 'Forces Electrification' },
|
|
{ name: 'Skill: Chain Lightning', priority: 'A', desc: 'AoE Electric damage' },
|
|
]
|
|
},
|
|
avywenna: {
|
|
weapons: [
|
|
{ name: 'Voltage Blade', priority: 'S', desc: 'Best Electric DPS' },
|
|
{ name: 'Thunder Edge', priority: 'A', desc: 'Faster attack speed' },
|
|
],
|
|
modules: [
|
|
{ name: 'Striker Core', priority: 'S', desc: 'Electric damage boost' },
|
|
{ name: 'Crit Module', priority: 'A', desc: 'Crit damage increase' },
|
|
],
|
|
skills: [
|
|
{ name: 'Skill: Thunder Strike', priority: 'S', desc: 'Main Electric burst' },
|
|
{ name: 'Skill: Storm', priority: 'A', desc: 'Sustained DPS mode' },
|
|
]
|
|
},
|
|
akekuri: {
|
|
weapons: [
|
|
{ name: 'SP Pistol', priority: 'S', desc: 'Max SP generation' },
|
|
{ name: 'Heat Dagger', priority: 'A', desc: 'More damage trade-off' },
|
|
],
|
|
modules: [
|
|
{ name: 'Battery Module', priority: 'S', desc: 'Essential - team SP battery' },
|
|
{ name: 'Vanguard Core', priority: 'A', desc: 'Personal SP gen' },
|
|
],
|
|
skills: [
|
|
{ name: 'Skill: Overcharge', priority: 'S', desc: 'Team SP generation' },
|
|
{ name: 'Skill: Heat Strike', priority: 'A', desc: 'Damage mode' },
|
|
]
|
|
},
|
|
chen_qianyu: {
|
|
weapons: [
|
|
{ name: 'Vulnerable Blade', priority: 'S', desc: 'Max Vulnerable stacks' },
|
|
{ name: 'Physical Katana', priority: 'A', desc: 'Higher base damage' },
|
|
],
|
|
modules: [
|
|
{ name: 'Vulnerable Core', priority: 'S', desc: 'Stack increase' },
|
|
{ name: 'Physical Amp', priority: 'A', desc: 'Damage boost' },
|
|
],
|
|
skills: [
|
|
{ name: 'Skill: Vulnerable Strike', priority: 'S', desc: 'Stacks Vulnerable' },
|
|
{ name: 'Skill: Physical Flow', priority: 'A', desc: 'Sustained damage' },
|
|
]
|
|
},
|
|
da_pan: {
|
|
weapons: [
|
|
{ name: 'Crusher Gauntlets', priority: 'S', desc: 'Best Crush damage' },
|
|
{ name: 'Impact Fists', priority: 'A', desc: 'Faster attack speed' },
|
|
],
|
|
modules: [
|
|
{ name: 'Crush Module', priority: 'S', desc: 'Crush damage boost' },
|
|
{ name: 'Striker Core', priority: 'A', desc: 'Raw damage' },
|
|
],
|
|
skills: [
|
|
{ name: 'Skill: Earthquake', priority: 'S', desc: 'Consumes Vulnerable' },
|
|
{ name: 'Skill: Ground Pound', priority: 'A', desc: 'AoE damage mode' },
|
|
]
|
|
},
|
|
alesh: {
|
|
weapons: [
|
|
{ name: 'Solidification Staff', priority: 'S', desc: 'Solidification uptime' },
|
|
{ name: 'Frost Rod', priority: 'A', desc: 'More damage focus' },
|
|
],
|
|
modules: [
|
|
{ name: 'SP Battery', priority: 'S', desc: 'Team SP generation' },
|
|
{ name: 'Cryo Core', priority: 'A', desc: 'Cryo utility' },
|
|
],
|
|
skills: [
|
|
{ name: 'Skill: Solidify', priority: 'S', desc: 'SP gen + Cryo utility' },
|
|
{ name: 'Skill: Frost Shield', priority: 'A', desc: 'Defensive mode' },
|
|
]
|
|
},
|
|
arclight: {
|
|
weapons: [
|
|
{ name: 'Electro Blade', priority: 'S', desc: 'Electrification + SP gen' },
|
|
{ name: 'Lightning Rod', priority: 'A', desc: 'Pure Electric focus' },
|
|
],
|
|
modules: [
|
|
{ name: 'SP Module', priority: 'S', desc: 'Team SP battery' },
|
|
{ name: 'Electric Core', priority: 'A', desc: 'Electric damage' },
|
|
],
|
|
skills: [
|
|
{ name: 'Skill: Arc Discharge', priority: 'S', desc: 'SP gen + Electric damage' },
|
|
{ name: 'Skill: Conduit', priority: 'A', desc: 'Pure SP gen mode' },
|
|
]
|
|
},
|
|
ember: {
|
|
weapons: [
|
|
{ name: 'Healing Mace', priority: 'S', desc: 'Best healing output' },
|
|
{ name: 'Guard Shield', priority: 'A', desc: 'More defensive' },
|
|
],
|
|
modules: [
|
|
{ name: 'Healer Core', priority: 'S', desc: 'Healing boost' },
|
|
{ name: 'Defender Module', priority: 'A', desc: 'Team survivability' },
|
|
],
|
|
skills: [
|
|
{ name: 'Skill: Warmth', priority: 'S', desc: 'Main healing skill' },
|
|
{ name: 'Skill: Protect', priority: 'A', desc: 'Shield + heal' },
|
|
]
|
|
},
|
|
snowshine: {
|
|
weapons: [
|
|
{ name: 'Frost Healer', priority: 'S', desc: 'Best Cryo support' },
|
|
{ name: 'Ice Shield', priority: 'A', desc: 'Defensive focus' },
|
|
],
|
|
modules: [
|
|
{ name: 'Cryo Support', priority: 'S', desc: 'Freeze enablement' },
|
|
{ name: 'Healer Core', priority: 'A', desc: 'Healing boost' },
|
|
],
|
|
skills: [
|
|
{ name: 'Skill: Blizzard Heal', priority: 'S', desc: 'Heal + freeze setup' },
|
|
{ name: 'Skill: Ice Block', priority: 'A', desc: 'Emergency protection' },
|
|
]
|
|
},
|
|
estella: {
|
|
weapons: [
|
|
{ name: 'Frost Lance', priority: 'S', desc: 'Physical/Cryo hybrid' },
|
|
{ name: 'Crystal Blade', priority: 'A', desc: 'Physical focus' },
|
|
],
|
|
modules: [
|
|
{ name: 'Hybrid Core', priority: 'S', desc: 'Dual element boost' },
|
|
{ name: 'Guard Module', priority: 'A', desc: 'Survivability boost' },
|
|
],
|
|
skills: [
|
|
{ name: 'Skill: Crystal Storm', priority: 'S', desc: 'Hybrid damage' },
|
|
{ name: 'Skill: Frost Guard', priority: 'A', desc: 'Defensive mode' },
|
|
]
|
|
},
|
|
fluorite: {
|
|
weapons: [
|
|
{ name: 'Nature Cane', priority: 'S', desc: 'Best available' },
|
|
{ name: 'Basic Staff', priority: 'B', desc: 'F2P option' },
|
|
],
|
|
modules: [
|
|
{ name: 'Basic Module', priority: 'B', desc: 'Minimal improvement' },
|
|
],
|
|
skills: [
|
|
{ name: 'Skill: Nature Touch', priority: 'B', desc: 'Weak support' },
|
|
]
|
|
},
|
|
catcher: {
|
|
weapons: [
|
|
{ name: 'Shield Wall', priority: 'S', desc: 'Best defensive' },
|
|
{ name: 'Basic Shield', priority: 'B', desc: 'F2P option' },
|
|
],
|
|
modules: [
|
|
{ name: 'Defender Core', priority: 'B', desc: 'Minimal boost' },
|
|
],
|
|
skills: [
|
|
{ name: 'Skill: Catch', priority: 'B', desc: 'Weak CC' },
|
|
]
|
|
},
|
|
};
|
|
|
|
// Synergy database - based on team compositions and elemental interactions
|
|
const synergies = {
|
|
// Laevatain (Heat DPS) - needs Combustion, Corrosion, Heat Amp
|
|
laevatain: ['ardelia', 'wulfgard', 'antal', 'akekuri', 'perlica', 'gilberta'],
|
|
|
|
// Ardelia (Nature Support) - best support, enables everything
|
|
ardelia: ['laevatain', 'perlica', 'avywenna', 'gilberta', 'wulfgard', 'antal'],
|
|
|
|
// Yvonne (Cryo DPS) - needs shatter, Cryo Amp, Vulnerable
|
|
yvonne: ['last_rite', 'xaihi', 'chen_qianyu', 'pogranichnik', 'alesh', 'snowshine'],
|
|
|
|
// Last Rite (Cryo DPS) - shatter combo with Yvonne
|
|
last_rite: ['yvonne', 'xaihi', 'chen_qianyu', 'pogranichnik', 'snowshine'],
|
|
|
|
// Xaihi (Cryo Support) - Cryo + Arts Amp
|
|
xaihi: ['yvonne', 'last_rite', 'snowshine', 'chen_qianyu', 'pogranichnik'],
|
|
|
|
// Gilberta (Nature Support) - crowd control, groups enemies
|
|
gilberta: ['ardelia', 'laevatain', 'avywenna', 'wulfgard', 'perlica'],
|
|
|
|
// Wulfgard (Heat Caster) - Combustion enabler
|
|
wulfgard: ['laevatain', 'ardelia', 'antal', 'akekuri', 'ember'],
|
|
|
|
// Antal (Electric Support) - Heat + Electric Amp, FREE
|
|
antal: ['laevatain', 'wulfgard', 'perlica', 'avywenna', 'arclight', 'ardelia'],
|
|
|
|
// Perlica (Electric Caster) - forces Electrification
|
|
perlica: ['avywenna', 'antal', 'arclight', 'ardelia', 'laevatain'],
|
|
|
|
// Avywenna (Electric Striker) - Electric carry
|
|
avywenna: ['perlica', 'antal', 'arclight', 'ardelia', 'gilberta'],
|
|
|
|
// Lifeng (Physical DPS) - Physical Susceptibility
|
|
lifeng: ['endministrator', 'chen_qianyu', 'pogranichnik', 'da_pan'],
|
|
|
|
// Endministrator (Physical MC) - Originium Crystals
|
|
endministrator: ['lifeng', 'chen_qianyu', 'pogranichnik', 'da_pan', 'alesh'],
|
|
|
|
// Chen Qianyu (Physical) - Vulnerable stacks
|
|
chen_qianyu: ['lifeng', 'endministrator', 'pogranichnik', 'da_pan', 'yvonne', 'last_rite'],
|
|
|
|
// Da Pan (Physical Striker) - Crush consumes Vulnerable
|
|
da_pan: ['chen_qianyu', 'lifeng', 'endministrator', 'pogranichnik'],
|
|
|
|
// Pogranichnik (Physical Vanguard) - Breach, SP gen
|
|
pogranichnik: ['chen_qianyu', 'lifeng', 'endministrator', 'da_pan', 'yvonne', 'last_rite'],
|
|
|
|
// Akekuri (Heat Vanguard) - SP gen, FREE
|
|
akekuri: ['laevatain', 'wulfgard', 'antal', 'ardelia'],
|
|
|
|
// Alesh (Cryo Vanguard) - SP gen with Solidification, FREE
|
|
alesh: ['yvonne', 'endministrator', 'xaihi', 'snowshine'],
|
|
|
|
// Arclight (Electric Vanguard) - SP gen with Electrification
|
|
arclight: ['avywenna', 'perlica', 'antal', 'ardelia'],
|
|
|
|
// Snowshine (Cryo Defender) - healer, enables shatter
|
|
snowshine: ['yvonne', 'last_rite', 'xaihi', 'alesh'],
|
|
|
|
// Ember (Heat Defender) - Physical team utility
|
|
ember: ['lifeng', 'chen_qianyu', 'endministrator'],
|
|
|
|
// Estella (Cryo Guard) - niche Physical/Cryo
|
|
estella: ['yvonne', 'lifeng', 'endministrator'],
|
|
|
|
// Fluorite (Nature Caster) - C tier, avoid
|
|
fluorite: ['yvonne', 'ardelia'],
|
|
|
|
// Catcher (Physical Defender) - C tier, avoid
|
|
catcher: ['lifeng', 'endministrator'],
|
|
};
|
|
|
|
// Synergy reasons with detailed explanations
|
|
const reasons = {
|
|
// Heat Team Synergies
|
|
laevatain_ardelia: 'Applies Susceptibility and Corrosion - massive damage multiplier for best DPS',
|
|
laevatain_wulfgard: 'Applies Combustion DoT + enables Heat Arts Bursts constantly',
|
|
laevatain_antal: 'Provides Heat Amp to boost damage even further - also buffs Electric',
|
|
laevatain_perlica: 'Melting Pot team - Electrification for maximum reaction chaos',
|
|
laevatain_akekuri: 'Infinite SP generation for constant skill spam',
|
|
laevatain_gilberta: 'Groups enemies together for Laevatain AoE devastation',
|
|
wulfgard_antal: 'Heat Amp boosts Wulfgard\'s Combustion DPS significantly',
|
|
wulfgard_akekuri: 'SP battery keeps Wulfgard applying Combustion constantly',
|
|
|
|
// Cryo Team Synergies
|
|
yvonne_last_rite: 'SHATTER COMBO - Yvonne freezes, Last Rite shatters for massive burst',
|
|
yvonne_xaihi: 'Core Cryo support - provides Cryo and Arts Amp doubling damage',
|
|
yvonne_chen_qianyu: 'Adds Vulnerable stacks - Physical+Cryo hybrid shatter potential',
|
|
yvonne_pogranichnik: 'Breach lowers enemy defense - all damage increased',
|
|
yvonne_alesh: 'SP generator synergizes with Solidification mechanics',
|
|
yvonne_snowshine: 'Cryo support enables consistent freezing and healing',
|
|
last_rite_xaihi: 'Cryo Amp makes Last Rite\'s damage output massive',
|
|
last_rite_pogranichnik: 'Breach + SP battery enables constant Cryo DPS',
|
|
xaihi_snowshine: 'Full Cryo team - Xaihi amps Snowshine\'s freeze potential',
|
|
|
|
// Electric Team Synergies
|
|
perlica_avywenna: 'Forces Electrification - essential for Electric carry damage',
|
|
perlica_antal: 'Electric Amp doubles down on Electrification damage',
|
|
perlica_arclight: 'SP gen + Electrification application - infinite loop',
|
|
avywenna_antal: 'Electric Amp makes Avywenna a team-carrying monster',
|
|
avywenna_arclight: 'Arclight feeds SP while Avywenna deals Electric damage',
|
|
antal_arclight: 'Consumes Electrification to generate SP for entire team',
|
|
|
|
// Physical Team Synergies
|
|
lifeng_chen_qianyu: 'Physical Susceptibility + Vulnerable stacks = huge damage',
|
|
lifeng_pogranichnik: 'Breach + Physical Susceptibility shreds enemy defense',
|
|
endministrator_alesh: 'SP gen with Solidification - great for Crystal shatter',
|
|
chen_qianyu_da_pan: 'Vulnerable stacks feed Da Pan\'s Crush for massive damage',
|
|
chen_qianyu_pogranichnik: 'Vulnerable + Breach = enemies take double Physical damage',
|
|
da_pan_pogranichnik: 'Breach enables Crush to hit for maximum damage',
|
|
|
|
// Universal Support Synergies
|
|
ardelia_perlica: 'Nature element triggers Electrification off Perlica\'s skills',
|
|
ardelia_avywenna: 'Corrosion + Susceptibility makes any element hit harder',
|
|
ardelia_gilberta: 'Double crowd control - groups AND debuffs enemies',
|
|
gilberta_perlica: 'Groups enemies for Electrification to spread efficiently',
|
|
|
|
// Free Unit Synergies
|
|
antal_laevatain: 'Best 4-star provides Heat Amp for best DPS',
|
|
antal_wulfgard: 'Heat Amp turns Wulfgard into a sub-DPS powerhouse',
|
|
antal_perlica: 'Electric Amp makes Perlica\'s Electrification hurt more',
|
|
akekuri_laevatain: 'FREE SP battery enables constant Laevatain Arts Bursts',
|
|
alesh_yvonne: 'FREE SP gen for Cryo teams - works with Solidification',
|
|
};
|
|
|
|
let selectedTeam = [];
|
|
|
|
function initOperatorSelect() {
|
|
const container = document.getElementById('operatorSelect');
|
|
container.innerHTML = operators.map(op => {
|
|
const imgSrc = op.cardImg || op.img;
|
|
const imgHtml = imgSrc
|
|
? `<div style="width:60px;height:60px;background:var(--bg-dark);display:flex;align-items:center;justify-content:center;margin:0 auto 8px;border-radius:8px;overflow:hidden;">
|
|
<img src="${imgSrc}" alt="${op.name}" style="width:60px;height:60px;object-fit:contain;">
|
|
</div>`
|
|
: `<div style="width:60px;height:60px;background:rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:center;margin:0 auto 8px;border-radius:8px;font-size:20px;color:var(--text-secondary);">?</div>`;
|
|
const freeBadge = op.free ? '<span style="font-size:8px;color:#39ff14;background:#000;padding:1px 4px;border-radius:3px;margin-left:4px;">FREE</span>' : '';
|
|
const elementColor = {
|
|
'Heat': '#ff6b35',
|
|
'Cryo': '#00d4ff',
|
|
'Electric': '#a855f7',
|
|
'Physical': '#f0f0f5',
|
|
'Nature': '#22c55e',
|
|
}[op.element] || '#888';
|
|
return `
|
|
<div class="select-option" data-id="${op.id}" onclick="toggleOperator('${op.id}')">
|
|
${imgHtml}
|
|
<div class="name">
|
|
<div style="font-size:9px;color:${elementColor};margin-bottom:2px;">${op.element} ${op.role}</div>
|
|
<div style="font-size:11px;font-weight:500;">${op.name}</div>
|
|
${freeBadge}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
}
|
|
|
|
function toggleOperator(id) {
|
|
const index = selectedTeam.indexOf(id);
|
|
if (index > -1) {
|
|
selectedTeam.splice(index, 1);
|
|
} else if (selectedTeam.length < 4) {
|
|
selectedTeam.push(id);
|
|
}
|
|
updateTeamUI();
|
|
}
|
|
|
|
function clearTeam() {
|
|
selectedTeam = [];
|
|
updateTeamUI();
|
|
}
|
|
|
|
function updateTeamUI() {
|
|
// Update operator selection
|
|
document.querySelectorAll('.select-option').forEach(el => {
|
|
el.classList.toggle('selected', selectedTeam.includes(el.dataset.id));
|
|
});
|
|
|
|
// Update slots
|
|
const slotsContainer = document.getElementById('teamSlots');
|
|
slotsContainer.innerHTML = '';
|
|
for (let i = 0; i < 4; i++) {
|
|
if (selectedTeam[i]) {
|
|
const op = operators.find(o => o.id === selectedTeam[i]);
|
|
const imgSrc = op.cardImg || op.img;
|
|
if (op && imgSrc) {
|
|
slotsContainer.innerHTML += `<div class="team-slot filled" style="background:var(--bg-dark);overflow:hidden;">
|
|
<img src="${imgSrc}" alt="${op.name}" style="width:100%;height:100%;object-fit:contain;">
|
|
</div>`;
|
|
} else {
|
|
slotsContainer.innerHTML += `<div class="team-slot filled" style="background:var(--bg-dark);display:flex;align-items:center;justify-content:center;">
|
|
<span style="font-size:24px;color:var(--text-secondary);">${op ? op.name.charAt(0) : '?'}</span>
|
|
</div>`;
|
|
}
|
|
} else {
|
|
slotsContainer.innerHTML += '<div class="team-slot">+</div>';
|
|
}
|
|
}
|
|
|
|
// Update suggestions
|
|
const panel = document.getElementById('suggestions');
|
|
const list = document.getElementById('suggestionsList');
|
|
|
|
if (selectedTeam.length === 0) {
|
|
panel.classList.remove('active');
|
|
return;
|
|
}
|
|
|
|
// Always show panel when operators are selected
|
|
panel.classList.add('active');
|
|
|
|
// Collect suggestions
|
|
const scores = {};
|
|
selectedTeam.forEach(id => {
|
|
const s = synergies[id];
|
|
if (s) {
|
|
s.forEach(target => {
|
|
if (!selectedTeam.includes(target)) {
|
|
scores[target] = (scores[target] || 0) + 1;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
const sorted = Object.entries(scores).sort((a, b) => b[1] - a[1]).slice(0, 3);
|
|
|
|
if (sorted.length === 0) {
|
|
list.innerHTML = '<p style="color:var(--text-secondary);font-size:13px;">No synergy data available for selected operators. Try adding a main DPS like Laevatain or Yvonne.</p>';
|
|
} else {
|
|
list.innerHTML = sorted.map(([id, score]) => {
|
|
const op = operators.find(o => o.id === id);
|
|
const reasonKey = selectedTeam[0] + '_' + id;
|
|
const reason = reasons[reasonKey] || `${score} operator${score > 1 ? 's' : ''} in your selection synergize with this unit`;
|
|
const imgSrc = op && (op.cardImg || op.img);
|
|
const imgHtml = imgSrc
|
|
? `<div style="width:50px;height:50px;background:var(--bg-dark);display:flex;align-items:center;justify-content:center;border-radius:8px;overflow:hidden;">
|
|
<img src="${imgSrc}" alt="${op.name}" style="width:50px;height:50px;object-fit:contain;">
|
|
</div>`
|
|
: '<div style="width:50px;height:50px;background:rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:20px;color:var(--text-secondary);">?</div>';
|
|
return `
|
|
<div class="suggestion-item">
|
|
${imgHtml}
|
|
<div class="suggestion-info">
|
|
<h5>${op ? op.name.toUpperCase() : id} ${op && op.free ? '<span style="font-size:9px;color:#39ff14;background:#000;padding:2px 6px;border-radius:3px;">FREE</span>' : ''}</h5>
|
|
<p>${reason}</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
}
|
|
}
|
|
|
|
// Smooth scroll
|
|
document.querySelectorAll('.nav-links a').forEach(a => {
|
|
a.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
const target = document.querySelector(a.getAttribute('href'));
|
|
if (target) {
|
|
target.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
});
|
|
});
|
|
|
|
// Initialize
|
|
initOperatorSelect();
|
|
|
|
// Builds Modal Functions
|
|
function showTeamBuilds() {
|
|
if (selectedTeam.length === 0) {
|
|
alert('Please select at least one operator first!');
|
|
return;
|
|
}
|
|
|
|
const modal = document.getElementById('buildsModal');
|
|
const content = document.getElementById('buildsContent');
|
|
|
|
content.innerHTML = selectedTeam.map((id, index) => {
|
|
const op = operators.find(o => o.id === id);
|
|
const build = builds[id] || { weapons: [], modules: [], skills: [] };
|
|
const elementColor = {
|
|
'Heat': '#ff6b35',
|
|
'Cryo': '#00d4ff',
|
|
'Electric': '#a855f7',
|
|
'Physical': '#f0f0f5',
|
|
'Nature': '#22c55e',
|
|
}[op.element] || '#888';
|
|
|
|
const renderItems = (items, type) => {
|
|
if (!items || items.length === 0) return '<p style="color: var(--text-secondary); font-size: 12px;">No data available</p>';
|
|
return items.map(item => `
|
|
<div class="build-item">
|
|
<span class="build-item-priority priority-${item.priority.toLowerCase()}">${item.priority}</span>
|
|
<span class="build-item-name">${item.name}</span>
|
|
<span class="build-item-desc">${item.desc}</span>
|
|
</div>
|
|
`).join('');
|
|
};
|
|
|
|
return `
|
|
<div class="operator-build">
|
|
<div class="operator-build-header">
|
|
<div class="operator-build-avatar">
|
|
${op.cardImg ? `<img src="${op.cardImg}" alt="${op.name}">` : op.img ? `<img src="${op.img}" alt="${op.name}">` : '<span style="font-size: 32px; color: var(--text-secondary);">?</span>'}
|
|
</div>
|
|
<div class="operator-build-info">
|
|
<span style="font-family: 'Share Tech Mono', monospace; font-size: 10px; color: #39ff14;">TEAM SLOT ${index + 1}</span>
|
|
<h3 style="color: ${elementColor};">${op.name.toUpperCase()}</h3>
|
|
<span class="operator-build-role">${op.element} ${op.role} // ${op.tier} TIER</span>
|
|
</div>
|
|
</div>
|
|
<div class="build-section">
|
|
<div class="build-section-title>> WEAPONS</div>
|
|
${renderItems(build.weapons)}
|
|
</div>
|
|
<div class="build-section">
|
|
<div class="build-section-title>> MODULES</div>
|
|
${renderItems(build.modules)}
|
|
</div>
|
|
<div class="build-section">
|
|
<div class="build-section-title">> SKILLS</div>
|
|
${renderItems(build.skills)}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
|
|
modal.classList.add('active');
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
function closeBuildsModal() {
|
|
const modal = document.getElementById('buildsModal');
|
|
modal.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
}
|
|
|
|
// Close modal on escape key
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape') {
|
|
closeBuildsModal();
|
|
}
|
|
});
|
|
|
|
// Close modal on backdrop click
|
|
document.getElementById('buildsModal').addEventListener('click', (e) => {
|
|
if (e.target.id === 'buildsModal') {
|
|
closeBuildsModal();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|