itsaygea
1017 lines
40 KiB
HTML
1017 lines
40 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Arknights Endfield - Ultimate Guide</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
:root {
|
||
--bg-primary: #000000;
|
||
--bg-secondary: #1a1a1e;
|
||
--bg-tertiary: #252528;
|
||
--text-primary: #f5f5f7;
|
||
--text-secondary: #a1a1a6;
|
||
--accent: #f5a623;
|
||
--accent-gradient: linear-gradient(90deg, #e94560, #f5a623);
|
||
--heat: #ff6b35;
|
||
--cryo: #4ecdc4;
|
||
--electric: #a855f7;
|
||
--physical: #888;
|
||
--nature: #22c55e;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
|
||
background: var(--bg-primary);
|
||
color: var(--text-primary);
|
||
overflow-x: hidden;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
/* Apple-style Navigation */
|
||
nav {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 48px;
|
||
background: rgba(0, 0, 0, 0.8);
|
||
backdrop-filter: saturate(180%) blur(20px);
|
||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||
z-index: 1000;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
nav a {
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
padding: 0 16px;
|
||
transition: color 0.3s;
|
||
}
|
||
|
||
nav a:hover {
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
/* Hero Section */
|
||
.hero {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
text-align: center;
|
||
position: relative;
|
||
padding: 80px 20px;
|
||
}
|
||
|
||
.hero::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: url('characters/Laevatain_4K.jpg') center/cover no-repeat;
|
||
opacity: 0.15;
|
||
z-index: 0;
|
||
}
|
||
|
||
.hero-logo {
|
||
width: 180px;
|
||
margin-bottom: 30px;
|
||
filter: drop-shadow(0 0 30px rgba(233, 69, 96, 0.5));
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: clamp(40px, 8vw, 80px);
|
||
font-weight: 700;
|
||
letter-spacing: -0.03em;
|
||
margin-bottom: 20px;
|
||
background: var(--accent-gradient);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
.hero p {
|
||
font-size: clamp(18px, 3vw, 24px);
|
||
color: var(--text-secondary);
|
||
max-width: 600px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* Section Styles */
|
||
.section {
|
||
min-height: 100vh;
|
||
padding: 120px 20px;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
|
||
.section-content {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: clamp(32px, 5vw, 56px);
|
||
font-weight: 700;
|
||
letter-spacing: -0.02em;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.section-subtitle {
|
||
font-size: clamp(18px, 2vw, 24px);
|
||
color: var(--text-secondary);
|
||
margin-bottom: 60px;
|
||
max-width: 700px;
|
||
}
|
||
|
||
/* Character Background */
|
||
.character-bg {
|
||
position: absolute;
|
||
right: -10%;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 60%;
|
||
max-width: 600px;
|
||
opacity: 0.3;
|
||
filter: blur(1px);
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.character-bg.left {
|
||
right: auto;
|
||
left: -10%;
|
||
}
|
||
|
||
/* Content Cards */
|
||
.card {
|
||
background: var(--bg-secondary);
|
||
border-radius: 20px;
|
||
padding: 30px;
|
||
margin-bottom: 20px;
|
||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
.card h3 {
|
||
font-size: 24px;
|
||
margin-bottom: 15px;
|
||
color: var(--accent);
|
||
}
|
||
|
||
.card p, .card li {
|
||
color: var(--text-secondary);
|
||
line-height: 1.6;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.card ul {
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.card li {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
/* Element Badge */
|
||
.element-badge {
|
||
display: inline-block;
|
||
padding: 4px 12px;
|
||
border-radius: 20px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.element-heat { background: rgba(255, 107, 53, 0.2); color: var(--heat); }
|
||
.element-cryo { background: rgba(78, 205, 196, 0.2); color: var(--cryo); }
|
||
.element-electric { background: rgba(168, 85, 247, 0.2); color: var(--electric); }
|
||
.element-physical { background: rgba(136, 136, 136, 0.2); color: var(--physical); }
|
||
.element-nature { background: rgba(34, 197, 94, 0.2); color: var(--nature); }
|
||
|
||
/* Tier Badge */
|
||
.tier-badge {
|
||
display: inline-block;
|
||
padding: 4px 12px;
|
||
border-radius: 20px;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.tier-ss { background: linear-gradient(90deg, #ff6b6b, #feca57); color: #000; }
|
||
.tier-s { background: linear-gradient(90deg, #a855f7, #6366f1); color: #fff; }
|
||
.tier-a { background: linear-gradient(90deg, #22c55e, #16a34a); color: #fff; }
|
||
.tier-b { background: rgba(107, 114, 128, 0.3); color: var(--text-secondary); }
|
||
.tier-c { background: rgba(107, 114, 128, 0.15); color: var(--text-secondary); }
|
||
|
||
/* Team Builder Section */
|
||
.team-builder {
|
||
background: var(--bg-tertiary);
|
||
border-radius: 24px;
|
||
padding: 40px;
|
||
margin-top: 40px;
|
||
}
|
||
|
||
.team-builder h3 {
|
||
font-size: 28px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.operator-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||
gap: 15px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.operator-card {
|
||
background: var(--bg-secondary);
|
||
border-radius: 16px;
|
||
padding: 20px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
border: 2px solid transparent;
|
||
}
|
||
|
||
.operator-card:hover {
|
||
transform: translateY(-4px);
|
||
border-color: rgba(245, 166, 35, 0.3);
|
||
}
|
||
|
||
.operator-card.selected {
|
||
border-color: var(--accent);
|
||
background: rgba(245, 166, 35, 0.1);
|
||
}
|
||
|
||
.operator-card img {
|
||
width: 80px;
|
||
height: 80px;
|
||
object-fit: cover;
|
||
border-radius: 12px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.operator-card .name {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.operator-card .element {
|
||
font-size: 11px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* Suggestions Panel */
|
||
.suggestions {
|
||
background: var(--bg-secondary);
|
||
border-radius: 20px;
|
||
padding: 30px;
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.suggestions h4 {
|
||
font-size: 20px;
|
||
margin-bottom: 20px;
|
||
color: var(--accent);
|
||
}
|
||
|
||
.suggestion-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20px;
|
||
padding: 20px;
|
||
background: var(--bg-tertiary);
|
||
border-radius: 16px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.suggestion-item img {
|
||
width: 60px;
|
||
height: 60px;
|
||
object-fit: cover;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.suggestion-info h5 {
|
||
font-size: 16px;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.suggestion-info p {
|
||
font-size: 13px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.why-text {
|
||
font-size: 13px;
|
||
color: var(--text-secondary);
|
||
margin-top: 5px;
|
||
font-style: italic;
|
||
}
|
||
|
||
.selected-team {
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.selected-team h4 {
|
||
font-size: 18px;
|
||
margin-bottom: 15px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.selected-slots {
|
||
display: flex;
|
||
gap: 15px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.team-slot {
|
||
width: 60px;
|
||
height: 60px;
|
||
background: var(--bg-secondary);
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 2px dashed rgba(255, 255, 255, 0.1);
|
||
font-size: 24px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.team-slot.filled {
|
||
border-style: solid;
|
||
border-color: var(--accent);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.team-slot.filled img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.clear-btn {
|
||
background: var(--accent-gradient);
|
||
border: none;
|
||
color: #000;
|
||
padding: 12px 24px;
|
||
border-radius: 25px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.clear-btn:hover {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
/* Currency Grid */
|
||
.currency-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 20px;
|
||
margin-top: 40px;
|
||
}
|
||
|
||
.currency-item {
|
||
background: var(--bg-secondary);
|
||
border-radius: 16px;
|
||
padding: 25px;
|
||
text-align: center;
|
||
}
|
||
|
||
.currency-item img {
|
||
width: 50px;
|
||
height: 50px;
|
||
object-fit: contain;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.currency-item h4 {
|
||
font-size: 16px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.currency-item p {
|
||
font-size: 13px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* Animations */
|
||
.fade-in {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
transition: opacity 0.8s ease, transform 0.8s ease;
|
||
}
|
||
|
||
.fade-in.visible {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 768px) {
|
||
.character-bg {
|
||
opacity: 0.15;
|
||
width: 80%;
|
||
}
|
||
|
||
.operator-grid {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
}
|
||
|
||
.team-builder {
|
||
padding: 20px;
|
||
}
|
||
}
|
||
|
||
/* Scroll indicator */
|
||
.scroll-indicator {
|
||
position: absolute;
|
||
bottom: 40px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
animation: bounce 2s infinite;
|
||
}
|
||
|
||
@keyframes bounce {
|
||
0%, 100% { transform: translateX(-50%) translateY(0); }
|
||
50% { transform: translateX(-50%) translateY(-10px); }
|
||
}
|
||
|
||
/* Free badge */
|
||
.free-badge {
|
||
background: linear-gradient(90deg, #22c55e, #16a34a);
|
||
color: #fff;
|
||
padding: 2px 8px;
|
||
border-radius: 10px;
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
/* Damage Formula Box */
|
||
.formula-box {
|
||
background: var(--bg-tertiary);
|
||
border-radius: 16px;
|
||
padding: 30px;
|
||
font-family: 'SF Mono', Monaco, monospace;
|
||
font-size: 14px;
|
||
line-height: 1.8;
|
||
overflow-x: auto;
|
||
margin: 30px 0;
|
||
border: 1px solid rgba(245, 166, 35, 0.2);
|
||
}
|
||
|
||
.formula-box code {
|
||
color: var(--accent);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<nav>
|
||
<a href="#hero">Home</a>
|
||
<a href="#currencies">Currencies</a>
|
||
<a href="#stock-bills">Stock Bills</a>
|
||
<a href="#tier-list">Tier List</a>
|
||
<a href="#team-builder">Team Builder</a>
|
||
<a href="#factory">Factory</a>
|
||
</nav>
|
||
|
||
<!-- Hero Section -->
|
||
<section id="hero" class="hero">
|
||
<img src="logo/logo.svg" alt="Arknights Endfield" class="hero-logo">
|
||
<h1>Arknights Endfield</h1>
|
||
<p>The Ultimate Guide for Endfield Operators</p>
|
||
<div class="scroll-indicator" style="color: var(--text-secondary);">?</div>
|
||
</section>
|
||
|
||
<!-- Currencies Section -->
|
||
<section id="currencies" class="section">
|
||
<img src="characters/Yvonne_4K.jpg" alt="Yvonne" class="character-bg left">
|
||
<div class="section-content fade-in">
|
||
<h2 class="section-title">Currencies</h2>
|
||
<p class="section-subtitle">Master the economy of Endfield with this visual guide to all currencies.</p>
|
||
|
||
<div class="currency-grid">
|
||
<div class="currency-item">
|
||
<img src="../images/currencies/Valley_Stock_Bill.png" alt="Valley Stock Bill">
|
||
<h4>Stock Bills</h4>
|
||
<p>The most important resource. Used for upgrades, gear, and gacha tickets.</p>
|
||
</div>
|
||
<div class="currency-item">
|
||
<img src="../images/currencies/Oroberyl.png" alt="Oroberyl">
|
||
<h4>Oroberyl</h4>
|
||
<p>Premium gacha currency for Headhunt banners.</p>
|
||
</div>
|
||
<div class="currency-item">
|
||
<img src="../images/currencies/T-Creds.png" alt="T-Creds">
|
||
<h4>T-Creds</h4>
|
||
<p>Character upgrades and gear crafting.</p>
|
||
</div>
|
||
<div class="currency-item">
|
||
<img src="../images/currencies/Arsenal_Ticket.png" alt="Arsenal Ticket">
|
||
<h4>Arsenal Ticket</h4>
|
||
<p>Weapon gacha currency.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Stock Bills Section -->
|
||
<section id="stock-bills" class="section">
|
||
<img src="characters/Lifeng_official.jpg" alt="Lifeng" class="character-bg">
|
||
<div class="section-content fade-in">
|
||
<h2 class="section-title">Stock Bills</h2>
|
||
<p class="section-subtitle">THE most important resource in the game. Managing them properly from day one can make or break your endgame progression.</p>
|
||
|
||
<div class="card">
|
||
<h3>How to Farm Stock Bills</h3>
|
||
<ul>
|
||
<li><strong>Deposit Zones (Best):</strong> 4 daily deliveries + up to 3 from helping others = 7 per day. Upgrade terminals first!</li>
|
||
<li><strong>Trading With Outposts:</strong> Produce refined materials and potions in your factory, then trade.</li>
|
||
<li><strong>Stock Redistribution:</strong> Buy discounted items, sell in friends' worlds for profit.</li>
|
||
<li><strong>Environmental Monitoring:</strong> Wuling Region exclusive. 750,000 Stock Bills per week at max level.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>Spending Priority</h3>
|
||
<ol>
|
||
<li><strong>Weekly Reset Items:</strong> Always buy discounted Headhunt Permits first.</li>
|
||
<li><strong>Income Upgrades:</strong> Deposit Zones > Rabbit Shops > Outposts > Factories.</li>
|
||
<li><strong>Weapons & Gear:</strong> Save for Golden Gear crafting (requires massive amounts).</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Tier List Section -->
|
||
<section id="tier-list" class="section">
|
||
<img src="characters/Laevatain_4K.jpg" alt="Laevatain" class="character-bg left">
|
||
<div class="section-content fade-in">
|
||
<h2 class="section-title">Tier List</h2>
|
||
<p class="section-subtitle">Meta-defining operators and the best units for each role. Remember: tier lists are guidelines, not absolute rules.</p>
|
||
|
||
<div class="card">
|
||
<h3><span class="tier-badge tier-ss">SS TIER</span> Meta-Defining Units</h3>
|
||
<ul style="list-style: none; padding: 0;">
|
||
<li style="margin-bottom: 20px;">
|
||
<strong>Laevatain</strong> <span class="element-badge element-heat">Heat</span> <span class="tier-badge tier-ss">SS</span>
|
||
<p style="margin-top: 8px;">Best DPS in game. Excels at AoE and single-target. Requires Combustion/Corrosion support.</p>
|
||
</li>
|
||
<li style="margin-bottom: 20px;">
|
||
<strong>Ardelia</strong> <span class="element-badge element-nature">Nature</span> <span class="tier-badge tier-ss">SS</span> <span class="free-badge">FREE</span>
|
||
<p style="margin-top: 8px;">Best support in game. FREE from daily login. Self-sufficient, provides healing, applies Susceptibility, forces Corrosion.</p>
|
||
</li>
|
||
<li style="margin-bottom: 20px;">
|
||
<strong>Yvonne</strong> <span class="element-badge element-cryo">Cryo</span> <span class="tier-badge tier-ss">SS</span>
|
||
<p style="margin-top: 8px;">Strong single-target Cryo DPS with crowd control via Solidification. Great for boss killing.</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3><span class="tier-badge tier-s">S TIER</span> Core Team Members</h3>
|
||
<ul style="list-style: none; padding: 0;">
|
||
<li style="margin-bottom: 15px;">
|
||
<strong>Xaihi</strong> <span class="element-badge element-cryo">Cryo</span> <span class="tier-badge tier-s">S</span> — Core Cryo support, provides Cryo + Arts Amp
|
||
</li>
|
||
<li style="margin-bottom: 15px;">
|
||
<strong>Gilberta</strong> <span class="element-badge element-nature">Nature</span> <span class="tier-badge tier-s">S</span> — Best utility, pulls enemies together
|
||
</li>
|
||
<li style="margin-bottom: 15px;">
|
||
<strong>Antal</strong> <span class="element-badge element-electric">Electric</span> <span class="tier-badge tier-s">S</span> <span class="free-badge">FREE 4★</span> — Best 4-star, Heat + Electric Amp
|
||
</li>
|
||
<li style="margin-bottom: 15px;">
|
||
<strong>Pogranichnik</strong> <span class="element-badge element-physical">Physical</span> <span class="tier-badge tier-s">S</span> — Best SP gen, applies Breach
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3><span class="tier-badge tier-a">A TIER</span> Strong & Versatile</h3>
|
||
<p style="margin-bottom: 10px;">Perlica (Electric), Avywenna (Electric), Wulfgard (Heat), Lifeng (Physical), Chen Qianyu (Physical)</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Team Builder Section -->
|
||
<section id="team-builder" class="section">
|
||
<img src="characters/Perlica_official.jpg" alt="Perlica" class="character-bg">
|
||
<div class="section-content fade-in">
|
||
<h2 class="section-title">Team Builder</h2>
|
||
<p class="section-subtitle">Select operators you own and get intelligent suggestions to build your perfect team composition.</p>
|
||
|
||
<div class="formula-box">
|
||
<strong style="color: var(--text-primary);">Damage Formula:</strong><br>
|
||
<code>Damage = DMG_Multiplier × ATK × Defense_Reduction × (1 + Amp) × (1 + Susceptibility) × (1 + DMG_Taken)</code><br><br>
|
||
<span style="color: var(--text-secondary);">Key: Arts Bursts = +160% per trigger | Electrification = +12-24% DMG taken | Corrosion = -Resistance</span>
|
||
</div>
|
||
|
||
<div class="team-builder">
|
||
<h3>Select Your Operators</h3>
|
||
|
||
<div class="selected-team">
|
||
<h4>Your Team (0/5)</h4>
|
||
<div class="selected-slots" id="selectedSlots">
|
||
<div class="team-slot">+</div>
|
||
<div class="team-slot">+</div>
|
||
<div class="team-slot">+</div>
|
||
<div class="team-slot">+</div>
|
||
<div class="team-slot">+</div>
|
||
</div>
|
||
<button class="clear-btn" onclick="clearSelection()">Clear Selection</button>
|
||
</div>
|
||
|
||
<h4 style="color: var(--text-secondary); margin: 20px 0;">Available Operators</h4>
|
||
<div class="operator-grid" id="operatorGrid">
|
||
<!-- Operators will be injected by JS -->
|
||
</div>
|
||
|
||
<div class="suggestions" id="suggestions" style="display: none;">
|
||
<h4>Recommended Teammates</h4>
|
||
<div id="suggestionList"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Factory Section -->
|
||
<section id="factory" class="section">
|
||
<img src="characters/Gilberta_official.jpg" alt="Gilberta" class="character-bg left">
|
||
<div class="section-content fade-in">
|
||
<h2 class="section-title">Factory System</h2>
|
||
<p class="section-subtitle">The factory produces items for trading, gear crafting, and consumables. Start investing after completing the second region.</p>
|
||
|
||
<div class="card">
|
||
<h3>Key Production Lines</h3>
|
||
<ul>
|
||
<li><strong>Origocrust:</strong> 1 Originium → 1 Origocrust → 1 Stock Bill. Early game income.</li>
|
||
<li><strong>Potions/Capsules:</strong> Best long-term factory product. High trade value, sells for lots of Stock Bills.</li>
|
||
<li><strong>Green Batteries:</strong> 5 Amethyst Component + 10 Originium Powder. Extend energy capacity.</li>
|
||
<li><strong>Explosives:</strong> For breaking red rocks and obstacles. Amethyst Component + Acetine Powder.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>Mineral Types</h3>
|
||
<div style="display: flex; gap: 30px; flex-wrap: wrap; margin-top: 15px;">
|
||
<div style="text-align: center;">
|
||
<img src="../images/minerals/Originium_Ore.png" alt="Originium" style="width: 40px; height: 40px; object-fit: contain;">
|
||
<p style="font-size: 12px; margin-top: 5px;">Originium (Brown)</p>
|
||
</div>
|
||
<div style="text-align: center;">
|
||
<img src="../images/minerals/Amethyst_Ore.png" alt="Amethyst" style="width: 40px; height: 40px; object-fit: contain;">
|
||
<p style="font-size: 12px; margin-top: 5px;">Amethyst (Purple)</p>
|
||
</div>
|
||
<div style="text-align: center;">
|
||
<img src="../images/minerals/Ferrium_Ore.png" alt="Firium" style="width: 40px; height: 40px; object-fit: contain;">
|
||
<p style="font-size: 12px; margin-top: 5px;">Firium (Blue)</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<script>
|
||
// Operator Data
|
||
const operators = [
|
||
{ id: 'laevatain', name: 'Laevatain', element: 'Heat', role: 'Striker', tier: 'SS', img: '../images/characters/Laevatain.png', free: false },
|
||
{ id: 'ardelia', name: 'Ardelia', element: 'Nature', role: 'Support', tier: 'SS', img: null, free: true },
|
||
{ id: 'yvonne', name: 'Yvonne', element: 'Cryo', role: 'Caster', tier: 'SS', img: '../images/characters/Yvonne.png', free: false },
|
||
{ id: 'xaihi', name: 'Xaihi', element: 'Cryo', role: 'Support', tier: 'S', img: '../images/characters/Xaihi.png', free: false },
|
||
{ id: 'gilberta', name: 'Gilberta', element: 'Nature', role: 'Support', tier: 'S', img: '../images/characters/Gilberta.png', free: false },
|
||
{ id: 'antal', name: 'Antal', element: 'Electric', role: 'Support', tier: 'S', img: null, free: true },
|
||
{ id: 'wulfgard', name: 'Wulfgard', element: 'Heat', role: 'Striker', tier: 'A', img: '../images/characters/Wulfgard.png', free: false },
|
||
{ id: 'perlica', name: 'Perlica', element: 'Electric', role: 'Caster', tier: 'A', img: '../images/characters/Perlica.png', free: false },
|
||
{ id: 'avywenna', name: 'Avywenna', element: 'Electric', role: 'Striker', tier: 'A', img: '../images/characters/Avywenna.png', free: false },
|
||
{ id: 'arclight', name: 'Arclight', element: 'Electric', role: 'Medic', tier: 'A', img: '../images/characters/Arclight.png', free: false },
|
||
{ id: 'lifeng', name: 'Lifeng', element: 'Physical', role: 'Guard', tier: 'A', img: '../images/characters/Lifeng.png', free: false },
|
||
{ id: 'pogranichnik', name: 'Pogranichnik', element: 'Physical', role: 'Vanguard', tier: 'S', img: null, free: false },
|
||
{ id: 'chen_qianyu', name: 'Chen Qianyu', element: 'Physical', role: '', tier: 'A', img: '../images/characters/Chen_Qianyu.png', free: false },
|
||
{ id: 'da_pan', name: 'Da Pan', element: 'Physical', role: '', tier: 'B', img: '../images/characters/Da_Pan.png', free: false },
|
||
{ id: 'endministrator', name: 'Endministrator', element: 'Physical', role: '', tier: 'A', img: '../images/characters/Endministrator.png', free: false },
|
||
{ id: 'alekuri', name: 'Alekuri', element: '', role: 'Support', tier: 'S', img: null, free: true },
|
||
{ id: 'last_rite', name: 'Last Rite', element: 'Cryo', role: '', tier: 'SS', img: null, free: false },
|
||
{ id: 'snowshine', name: 'Snowshine', element: 'Cryo', role: 'Support', tier: 'B', img: '../images/characters/Snowshine.png', free: false },
|
||
{ id: 'ember', name: 'Ember', element: 'Heat', role: 'Striker', tier: 'B', img: '../images/characters/Ember.png', free: false },
|
||
];
|
||
|
||
// Team synergy suggestions based on selected operators
|
||
const synergyData = {
|
||
laevatain: {
|
||
suggests: [
|
||
{ id: 'ardelia', reason: 'Applies Susceptibility and forces Corrosion - perfect multiplier for Laevatain' },
|
||
{ id: 'wulfgard', reason: 'Applies Combustion DoT and enables Heat Arts Bursts' },
|
||
{ id: 'antal', reason: 'Provides Heat Amp to boost Laevatain damage even further' },
|
||
{ id: 'perlica', reason: 'Adds Electrification for maximum reaction chaos' }
|
||
],
|
||
teamName: 'Heat / Reaction Team'
|
||
},
|
||
ardelia: {
|
||
suggests: [
|
||
{ id: 'laevatain', reason: 'Best DPS in game - Ardelia enables her full potential' },
|
||
{ id: 'perlica', reason: 'Ardelia + Perlica = constant Electrification triggers' },
|
||
{ id: 'avywenna', reason: 'Electric carry that benefits from Ardelia\'s Nature element' },
|
||
{ id: 'wulfgard', reason: 'Heat enabler that creates Combustion with Ardelia' }
|
||
],
|
||
teamName: 'Corrosion / Support Core'
|
||
},
|
||
yvonne: {
|
||
suggests: [
|
||
{ id: 'xaihi', reason: 'Provides Cryo Amp - doubles down on Cryo damage' },
|
||
{ id: 'last_rite', reason: 'Shatters frozen enemies for massive burst damage' },
|
||
{ id: 'chen_qianyu', reason: 'Builds Vulnerable stacks for Physical shatter combo' },
|
||
{ id: 'pogranichnik', reason: 'Applies Breach and generates SP for the team' }
|
||
],
|
||
teamName: 'Cryo / Physical Shatter'
|
||
},
|
||
xaihi: {
|
||
suggests: [
|
||
{ id: 'yvonne', reason: 'Core Cryo DPS that benefits from Xaihi\'s amps' },
|
||
{ id: 'last_rite', reason: 'Cryo carry that wants Cryo Amp support' },
|
||
{ id: 'snowshine', reason: 'Additional Cryo support for freezing synergy' }
|
||
],
|
||
teamName: 'Cryo Amp Team'
|
||
},
|
||
gilberta: {
|
||
suggests: [
|
||
{ id: 'ardelia', reason: 'Double support - Gilberta pulls, Ardelia amplifies' },
|
||
{ id: 'laevatain', reason: 'Gilberta groups enemies, Laevatain destroys them' },
|
||
{ id: 'avywenna', reason: 'Electric AoE benefits from grouped enemies' }
|
||
],
|
||
teamName: 'Crowd Control Team'
|
||
},
|
||
antal: {
|
||
suggests: [
|
||
{ id: 'laevatain', reason: 'Heat Amp + best Heat DPS' },
|
||
{ id: 'avywenna', reason: 'Electric Amp + best Electric DPS' },
|
||
{ id: 'perlica', reason: 'Electric enabler that triggers Electrification' }
|
||
],
|
||
teamName: 'Amp / Electric Team'
|
||
},
|
||
perlica: {
|
||
suggests: [
|
||
{ id: 'avywenna', reason: 'Best Electric DPS, Perlica forces Electrification' },
|
||
{ id: 'antal', reason: 'Electric Amp for maximum Electrification damage' },
|
||
{ id: 'laevatain', reason: 'Heat + Nature = Combustion, Electric triggers Electrification' },
|
||
{ id: 'arclight', reason: 'SP battery for Electric teams' }
|
||
],
|
||
teamName: 'Electric / Reaction Team'
|
||
},
|
||
avywenna: {
|
||
suggests: [
|
||
{ id: 'perlica', reason: 'Forces Electrification - essential for Avywenna' },
|
||
{ id: 'antal', reason: 'Electric Amp boosts all Electric damage' },
|
||
{ id: 'arclight', reason: 'SP battery keeps skills cycling' },
|
||
{ id: 'ardelia', reason: 'Nature element triggers Electrification with Perlica' }
|
||
],
|
||
teamName: 'Electric Carry Team'
|
||
},
|
||
lifeng: {
|
||
suggests: [
|
||
{ id: 'endministrator', reason: 'Physical duo - both apply Physical Susceptibility' },
|
||
{ id: 'chen_qianyu', reason: 'Builds Vulnerable stacks for Physical damage' },
|
||
{ id: 'pogranichnik', reason: 'Applies Breach to lower enemy defense' }
|
||
],
|
||
teamName: 'Physical DPS Team'
|
||
},
|
||
pogranichnik: {
|
||
suggests: [
|
||
{ id: 'endministrator', reason: 'Physical carry with Breach support' },
|
||
{ id: 'lifeng', reason: 'Physical Susceptibility + Breach = massive damage' },
|
||
{ id: 'chen_qianyu', reason: 'Vulnerable stacks + Pogranichnik Breach' }
|
||
],
|
||
teamName: 'Physical / SP Battery'
|
||
},
|
||
chen_qianyu: {
|
||
suggests: [
|
||
{ id: 'da_pan', reason: 'Crush consumes Vulnerable stacks for massive damage' },
|
||
{ id: 'endministrator', reason: 'Physical carry that shatters crystals' },
|
||
{ id: 'pogranichnik', reason: 'Breach makes Vulnerable hit harder' }
|
||
],
|
||
teamName: 'Vulnerable / Crush Team'
|
||
},
|
||
da_pan: {
|
||
suggests: [
|
||
{ id: 'chen_qianyu', reason: 'Builds Vulnerable stacks for Da Pan\'s Crush' },
|
||
{ id: 'pogranichnik', reason: 'Breach makes Crush damage even stronger' }
|
||
],
|
||
teamName: 'Crush Burst Team'
|
||
},
|
||
endministrator: {
|
||
suggests: [
|
||
{ id: 'lifeng', reason: 'Physical Susceptibility duo' },
|
||
{ id: 'chen_qianyu', reason: 'Vulnerable stacks for Physical damage' },
|
||
{ id: 'pogranichnik', reason: 'Breach support' }
|
||
],
|
||
teamName: 'Physical Shatter Team'
|
||
},
|
||
wulfgard: {
|
||
suggests: [
|
||
{ id: 'laevatain', reason: 'Wulfgard enables Heat Arts Bursts for Laevatain' },
|
||
{ id: 'ardelia', reason: 'Nature + Heat = Combustion reaction' },
|
||
{ id: 'antal', reason: 'Heat Amp for Combustion damage' }
|
||
],
|
||
teamName: 'Heat / Combustion Team'
|
||
},
|
||
arclight: {
|
||
suggests: [
|
||
{ id: 'avywenna', reason: 'Electric carry needs SP battery' },
|
||
{ id: 'perlica', reason: 'Electric team benefits from Arclight\'s SP gen' }
|
||
],
|
||
teamName: 'Electric Support'
|
||
},
|
||
alekuri: {
|
||
suggests: [
|
||
{ id: 'laevatain', reason: 'Infinite SP lets Laevatain spam skills' },
|
||
{ id: 'ardy', reason: 'Any hyper carry benefits from Alekuri\'s SP battery' }
|
||
],
|
||
teamName: 'SP Battery Support'
|
||
}
|
||
};
|
||
|
||
let selectedOperators = [];
|
||
|
||
// Initialize operator grid
|
||
function initOperatorGrid() {
|
||
const grid = document.getElementById('operatorGrid');
|
||
grid.innerHTML = operators.map(op => `
|
||
<div class="operator-card" data-id="${op.id}" onclick="toggleOperator('${op.id}')">
|
||
${op.img ? `<img src="${op.img}" alt="${op.name}">` : `<div style="width:80px;height:80px;background:var(--bg-tertiary);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;">?</div>`}
|
||
<div class="name">${op.name}${op.free ? '<span class="free-badge">FREE</span>' : ''}</div>
|
||
<div class="element">
|
||
<span class="element-badge element-${op.element.toLowerCase()}">${op.element}</span>
|
||
<span class="tier-badge tier-${op.tier.toLowerCase()}">${op.tier}</span>
|
||
</div>
|
||
</div>
|
||
`).join('');
|
||
}
|
||
|
||
function toggleOperator(id) {
|
||
const index = selectedOperators.indexOf(id);
|
||
if (index > -1) {
|
||
selectedOperators.splice(index, 1);
|
||
} else if (selectedOperators.length < 5) {
|
||
selectedOperators.push(id);
|
||
}
|
||
updateUI();
|
||
}
|
||
|
||
function clearSelection() {
|
||
selectedOperators = [];
|
||
updateUI();
|
||
}
|
||
|
||
function updateUI() {
|
||
// Update operator cards
|
||
document.querySelectorAll('.operator-card').forEach(card => {
|
||
const id = card.dataset.id;
|
||
card.classList.toggle('selected', selectedOperators.includes(id));
|
||
});
|
||
|
||
// Update selected slots
|
||
const slotsContainer = document.getElementById('selectedSlots');
|
||
slotsContainer.innerHTML = '';
|
||
for (let i = 0; i < 5; i++) {
|
||
if (selectedOperators[i]) {
|
||
const op = operators.find(o => o.id === selectedOperators[i]);
|
||
if (op) {
|
||
slotsContainer.innerHTML += `
|
||
<div class="team-slot filled">
|
||
${op.img ? `<img src="${op.img}" alt="${op.name}">` : op.name.charAt(0)}
|
||
</div>
|
||
`;
|
||
}
|
||
} else {
|
||
slotsContainer.innerHTML += '<div class="team-slot">+</div>';
|
||
}
|
||
}
|
||
|
||
// Update team count
|
||
document.querySelector('.selected-team h4').textContent = `Your Team (${selectedOperators.length}/5)`;
|
||
|
||
// Update suggestions
|
||
updateSuggestions();
|
||
}
|
||
|
||
function updateSuggestions() {
|
||
const suggestionsPanel = document.getElementById('suggestions');
|
||
const suggestionList = document.getElementById('suggestionList');
|
||
|
||
if (selectedOperators.length === 0) {
|
||
suggestionsPanel.style.display = 'none';
|
||
return;
|
||
}
|
||
|
||
suggestionsPanel.style.display = 'block';
|
||
|
||
// Collect all suggestions with scores
|
||
const suggestionScores = {};
|
||
const reasons = {};
|
||
|
||
selectedOperators.forEach(selectedId => {
|
||
const data = synergyData[selectedId];
|
||
if (data) {
|
||
data.suggests.forEach(suggestion => {
|
||
if (!selectedOperators.includes(suggestion.id)) {
|
||
suggestionScores[suggestion.id] = (suggestionScores[suggestion.id] || 0) + 1;
|
||
if (!reasons[suggestion.id]) reasons[suggestion.id] = [];
|
||
reasons[suggestion.id].push({ from: selectedId, reason: suggestion.reason });
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
// Sort by score
|
||
const sortedSuggestions = Object.entries(suggestionScores)
|
||
.sort((a, b) => b[1] - a[1])
|
||
.slice(0, 5);
|
||
|
||
if (sortedSuggestions.length === 0) {
|
||
// Provide general suggestions based on elements/roles
|
||
const primaryElement = getPrimarySuggestion();
|
||
suggestionList.innerHTML = `
|
||
<div class="suggestion-item">
|
||
<div style="flex:1;">
|
||
<h5>Build Around Your Main DPS</h5>
|
||
<p>Select your main damage dealer first, then add supports that complement their element.</p>
|
||
<p class="why-text">Tip: Ardelia (FREE) works with any team!</p>
|
||
</div>
|
||
</div>
|
||
`;
|
||
return;
|
||
}
|
||
|
||
suggestionList.innerHTML = sortedSuggestions.map(([id, score]) => {
|
||
const op = operators.find(o => o.id === id);
|
||
const topReason = reasons[id][0];
|
||
const sourceOp = operators.find(o => o.id === topReason.from);
|
||
return `
|
||
<div class="suggestion-item">
|
||
${op && op.img ? `<img src="${op.img}" alt="${op.name}">` : '<div style="width:60px;height:60px;background:var(--bg-tertiary);border-radius:12px;display:flex;align-items:center;justify-content:center;">?</div>'}
|
||
<div class="suggestion-info">
|
||
<h5>${op ? op.name : id} ${op && op.free ? '<span class="free-badge">FREE</span>' : ''}</h5>
|
||
<p>Suggested by ${sourceOp ? sourceOp.name : 'team analysis'}</p>
|
||
<p class="why-text">"${topReason.reason}"</p>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}).join('');
|
||
}
|
||
|
||
function getPrimarySuggestion() {
|
||
// General team advice
|
||
return 'Add supports!';
|
||
}
|
||
|
||
// Scroll animations
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('visible');
|
||
}
|
||
});
|
||
}, { threshold: 0.1 });
|
||
|
||
document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
|
||
|
||
// Smooth scroll for nav
|
||
document.querySelectorAll('nav a').forEach(anchor => {
|
||
anchor.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
const target = document.querySelector(this.getAttribute('href'));
|
||
if (target) {
|
||
target.scrollIntoView({ behavior: 'smooth' });
|
||
}
|
||
});
|
||
});
|
||
|
||
// Initialize
|
||
initOperatorGrid();
|
||
</script>
|
||
</body>
|
||
</html>
|