itsaygea
336 lines
10 KiB
HTML
336 lines
10 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 - Character Showcase</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
|
|
color: #fff;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.hero {
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
background: radial-gradient(ellipse at center, #252540 0%, #1a1a2e 100%);
|
|
position: relative;
|
|
}
|
|
|
|
.hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: url('logo/endfield_share.jpg') center/cover;
|
|
opacity: 0.1;
|
|
z-index: 0;
|
|
}
|
|
|
|
.hero-content {
|
|
z-index: 1;
|
|
}
|
|
|
|
.logo-svg {
|
|
width: 300px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 3rem;
|
|
margin-bottom: 10px;
|
|
background: linear-gradient(90deg, #e94560, #f5a623, #ffcc00);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.hero p {
|
|
font-size: 1.2rem;
|
|
color: #aaa;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.scroll-indicator {
|
|
position: absolute;
|
|
bottom: 30px;
|
|
animation: bounce 2s infinite;
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-10px); }
|
|
}
|
|
|
|
.character-section {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 80px 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.character-section:nth-child(even) {
|
|
background: linear-gradient(90deg, #1a1a2e 0%, #16213e 100%);
|
|
}
|
|
|
|
.character-section:nth-child(odd) {
|
|
background: linear-gradient(90deg, #16213e 0%, #1a1a2e 100%);
|
|
}
|
|
|
|
.character-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
max-width: 1200px;
|
|
gap: 30px;
|
|
}
|
|
|
|
.character-image {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: 20px;
|
|
box-shadow: 0 20px 60px rgba(233, 69, 96, 0.3);
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.character-image:hover {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 30px 80px rgba(233, 69, 96, 0.5);
|
|
}
|
|
|
|
.character-info {
|
|
text-align: center;
|
|
max-width: 600px;
|
|
}
|
|
|
|
.character-info h2 {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 15px;
|
|
color: #f5a623;
|
|
}
|
|
|
|
.character-info .tier {
|
|
display: inline-block;
|
|
padding: 8px 20px;
|
|
background: linear-gradient(90deg, #e94560, #f5a623);
|
|
border-radius: 25px;
|
|
font-weight: bold;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.character-info .element {
|
|
color: #aaa;
|
|
font-size: 1.1rem;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.character-info .role {
|
|
color: #888;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Scroll animations */
|
|
.character-section {
|
|
opacity: 0;
|
|
transform: translateY(50px);
|
|
transition: opacity 0.8s ease, transform 0.8s ease;
|
|
}
|
|
|
|
.character-section.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Nav */
|
|
nav {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 20px;
|
|
background: rgba(15, 15, 30, 0.9);
|
|
backdrop-filter: blur(10px);
|
|
z-index: 1000;
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 30px;
|
|
}
|
|
|
|
nav a {
|
|
color: #fff;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
nav a:hover {
|
|
color: #f5a623;
|
|
}
|
|
|
|
/* Floating action button */
|
|
.fab {
|
|
position: fixed;
|
|
bottom: 30px;
|
|
right: 30px;
|
|
width: 60px;
|
|
height: 60px;
|
|
background: linear-gradient(135deg, #e94560, #f5a623);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
box-shadow: 0 10px 30px rgba(233, 69, 96, 0.4);
|
|
transition: transform 0.3s;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.fab:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.fab::after {
|
|
content: '↓';
|
|
font-size: 24px;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
h1 { font-size: 2rem; }
|
|
.character-info h2 { font-size: 2rem; }
|
|
nav { padding: 15px; }
|
|
.logo-svg { width: 200px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav>
|
|
<a href="#hero">Home</a>
|
|
<a href="#laevatain">Laevatain</a>
|
|
<a href="#yvonne">Yvonne</a>
|
|
<a href="#gilberta">Gilberta</a>
|
|
<a href="#lifeng">Lifeng</a>
|
|
<a href="#perlica">Perlica</a>
|
|
</nav>
|
|
|
|
<section id="hero" class="hero">
|
|
<div class="hero-content">
|
|
<img src="logo/logo.svg" alt="Arknights Endfield Logo" class="logo-svg">
|
|
<h1>Arknights Endfield</h1>
|
|
<p>Official Character Showcase</p>
|
|
<p style="color: #f5a623;">Scroll to meet the operators →</p>
|
|
</div>
|
|
<div class="scroll-indicator">↓</div>
|
|
</section>
|
|
|
|
<section id="laevatain" class="character-section">
|
|
<div class="character-container">
|
|
<img src="../web-assets/characters/Laevatain_4K.jpg" alt="Laevatain" class="character-image">
|
|
<div class="character-info">
|
|
<h2>Laevatain</h2>
|
|
<span class="tier">SS TIER</span>
|
|
<p class="element">Heat Element | Striker Class</p>
|
|
<p class="role">"Twilight of ruin!" - Best DPS in the game. Excels at both AoE and single-target damage.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="yvonne" class="character-section">
|
|
<div class="character-container">
|
|
<img src="../web-assets/characters/Yvonne_4K.jpg" alt="Yvonne" class="character-image">
|
|
<div class="character-info">
|
|
<h2>Yvonne</h2>
|
|
<span class="tier">SS TIER</span>
|
|
<p class="element">Cryo Element | Caster Class</p>
|
|
<p class="role">"Ætherside... An unknown and dangerous world." - Strong single-target Cryo DPS with crowd control.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="gilberta" class="character-section">
|
|
<div class="character-container">
|
|
<img src="../web-assets/characters/Gilberta_official.jpg" alt="Gilberta" class="character-image">
|
|
<div class="character-info">
|
|
<h2>Gilberta</h2>
|
|
<span class="tier">S TIER</span>
|
|
<p class="element">Nature Element | Support Class</p>
|
|
<p class="role">"You are the smell of nostalgia and homesickness." - Best utility, pulls enemies together with crowd control.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="lifeng" class="character-section">
|
|
<div class="character-container">
|
|
<img src="../web-assets/characters/Lifeng_official.jpg" alt="Lifeng" class="character-image">
|
|
<div class="character-info">
|
|
<h2>Lifeng</h2>
|
|
<span class="tier">S TIER</span>
|
|
<p class="element">Physical Element | Guard Class</p>
|
|
<p class="role">"I wanna do more, and get better at it!" - One of the best Physical DPS units.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="perlica" class="character-section">
|
|
<div class="character-container">
|
|
<img src="../web-assets/characters/Perlica_official.jpg" alt="Perlica" class="character-image">
|
|
<div class="character-info">
|
|
<h2>Perlica</h2>
|
|
<span class="tier">A TIER</span>
|
|
<p class="element">Electric Element | Caster Class</p>
|
|
<p class="role">"We don't simply talk about our dreams. No. We do what we can to make them a reality."</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<a href="#" class="fab" onclick="window.scrollTo({top: 0, behavior: 'smooth'})"></a>
|
|
|
|
<script>
|
|
// Scroll animations
|
|
const sections = document.querySelectorAll('.character-section');
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
}
|
|
});
|
|
}, {
|
|
threshold: 0.2
|
|
});
|
|
|
|
sections.forEach(section => {
|
|
observer.observe(section);
|
|
});
|
|
|
|
// Smooth scroll for nav links
|
|
document.querySelectorAll('nav a').forEach(anchor => {
|
|
anchor.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const targetId = this.getAttribute('href').substring(1);
|
|
const targetElement = document.getElementById(targetId);
|
|
if (targetElement) {
|
|
targetElement.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|