LCE-Hub-Mirrors/lce-hub.github.io
1
0
Fork 0
mirror of https://github.com/LCE-Hub/lce-hub.github.io.git synced 2026-07-17 15:57:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Features tab overhaul

Browse source
This commit is contained in:
Santiago Fisela 2026-03-14 18:09:01 -03:00
parent 662364fbf8
commit 54d28c3b8c
2 changed files with 201 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
index.html
View file

@ -14,6 +14,7 @@
<link
href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&family=Silkscreen:wght@400;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>
<body>
@ -118,29 +119,58 @@
</section>
<section class="tab-content" id="features">
<div class="home-layout">
<div class="features-row">
<div class="feature-card">
<div class="feature-image">⚙️</div>
<div class="feature-info">
<h3>Title Updates</h3>
<p>Support for legacy console Title Updates and patches.</p>
<div class="features-layout scroll-content">
<div class="overview-section">
<div class="overview-box">
<h2>Project Overview</h2>
<p>Emerald Legacy started as a solo project to create a better way to play Legacy Console Edition. Our
team brings together expertise from various preservation projects into one definitive hub.</p>
</div>
<div class="philosophy-box">
<h2>Our Philosophy</h2>
<p>Built on a modern Rust/Tauri stack, we deliver a high-performance, cross-platform experience that
uses only ~15MB of RAM, leaving all resources for the game.</p>
</div>
</div>
<div class="core-features-grid">
<div class="grid-item">
<div class="item-icon"><i class="fas fa-magic"></i></div>
<div class="item-text">
<h3>Easy Setup</h3>
<p>Automated installation for TU19 and TU24, with more versions coming soon.</p>
</div>
</div>
<div class="feature-card">
<div class="feature-image">🔧</div>
<div class="feature-info">
<h3>Mod Support</h3>
<p>Easily apply mods and skins to your legacy experience.</p>
<div class="grid-item">
<div class="item-icon"><i class="fab fa-rust"></i></div>
<div class="item-text">
<h3>Rust Backend</h3>
<p>Memory-safe operations and game execution with minimal overhead.</p>
</div>
</div>
<div class="feature-card">
<div class="feature-image">📡</div>
<div class="feature-info">
<h3>Server Browser</h3>
<p>Find and join community-hosted legacy servers.</p>
<div class="grid-item">
<div class="item-icon"><i class="fas fa-sliders"></i></div>
<div class="item-text">
<h3>Easy Config</h3>
<p>Integrated settings to manage your username and game parameters directly.</p>
</div>
</div>
<div class="grid-item">
<div class="item-icon"><i class="fas fa-rocket"></i></div>
<div class="item-text">
<h3>Tauri Frontend</h3>
<p>Lightweight UI and configuration management via modern webview.</p>
</div>
</div>
</div>
<div class="content-footer">
<div class="roadmap-link">
<a href="#">DEVELOPMENT ROADMAP &rarr;</a>
</div>
<div class="acknowledgments">
<p>Developed by the Emerald Team. Original creators: 4J Studios & Mojang.</p>
</div>
</div>
</div>
</section>

156
src/style.css
View file

@ -379,7 +379,7 @@ body {
border-right-color: #262626;
border-bottom-color: #262626;
padding: 4px;
box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
}
.carousel-container {
@ -418,7 +418,7 @@ body {
}
.carousel-arrow {
background: rgba(255,255,255,0.1);
background: rgba(255, 255, 255, 0.1);
border: 2px solid #3c3c3c;
color: #fff;
cursor: pointer;
@ -629,7 +629,159 @@ body {
from {
transform: rotate(-20deg) scale(1);
}
to {
transform: rotate(-20deg) scale(1.1);
}
}
.features-layout {
padding: 30px;
display: flex;
flex-direction: column;
gap: 30px;
height: 100%;
}
.scroll-content {
overflow-y: auto;
}
.scroll-content::-webkit-scrollbar {
width: 12px;
}
.scroll-content::-webkit-scrollbar-track {
background: #1a1a1a;
border-left: 4px solid #3c3c3c;
}
.scroll-content::-webkit-scrollbar-thumb {
background: #7c7c7c;
border: 4px solid #1a1a1a;
}
.alpha-disclaimer {
background: #3c3c3c;
border: 4px solid var(--highlight-yellow);
padding: 15px 25px;
display: flex;
align-items: center;
gap: 20px;
box-shadow: 0 4px 0 rgba(0, 0, 0, 0.5);
}
.disclaimer-text h3 {
color: var(--highlight-yellow);
font-size: 1.4rem;
margin-bottom: 4px;
text-shadow: 2px 2px 0 #000;
}
.disclaimer-text p {
font-size: 1.1rem;
color: #fff;
}
.overview-section {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 20px;
}
.overview-box,
.philosophy-box {
background: rgba(0, 0, 0, 0.3);
border: 4px solid #1a1a1a;
padding: 20px;
}
.overview-box h2,
.philosophy-box h2,
.core-features-grid h3 {
color: var(--color-emerald);
font-size: 1.8rem;
margin-bottom: 12px;
text-shadow: 2px 2px 0 #000;
}
.overview-box p,
.philosophy-box p {
color: #ddd;
font-size: 1.1rem;
line-height: 1.4;
}
.core-features-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.grid-item {
background: #4c4c4c;
border: 4px solid #7c7c7c;
border-right-color: #262626;
border-bottom-color: #262626;
padding: 20px;
display: flex;
gap: 20px;
align-items: center;
}
.item-icon {
font-size: 2.5rem;
min-width: 50px;
text-align: center;
}
.grid-item h3 {
color: #fff;
font-size: 1.4rem;
margin-bottom: 5px;
text-shadow: 2px 2px 0 #000;
}
.grid-item p {
color: #ccc;
font-size: 1rem;
}
.content-footer {
margin-top: auto;
padding-top: 20px;
display: flex;
justify-content: space-between;
align-items: flex-end;
border-top: 4px solid #1a1a1a;
}
.roadmap-link a {
color: var(--highlight-yellow);
font-size: 1.2rem;
text-decoration: none;
text-shadow: 2px 2px 0 #000;
}
.roadmap-link a:hover {
text-decoration: underline;
}
.acknowledgments p {
font-size: 0.9rem;
color: #888;
text-align: right;
}
.pixel-icon.small {
width: 40px;
height: 40px;
}
.item-icon i {
color: var(--color-emerald);
}
.item-icon i.fa-rust {
color: #f74c00;
}