itsaygea
e2d79ba453
- Extracted CSS to css/style.css (978 lines) - Extracted JS to js/main.js (708 lines) - index.html now only 608 lines (was 2289) - Added mobile hamburger menu for navigation - Mobile menu toggles with animated icon - Menu closes when clicking links or outside
609 lines
35 KiB
HTML
609 lines
35 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">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
<!-- Mobile Menu Toggle -->
|
|
<button class="mobile-menu-btn" id="mobileMenuBtn" aria-label="Toggle menu">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</button>
|
|
|
|
<!-- 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 src="js/main.js"></script>
|
|
</body>
|
|
</html>
|