Rename to index.html and clean up extra files
This commit is contained in:
itsaygea
File diff suppressed because it is too large
Load Diff
@@ -1,335 +0,0 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user