diff --git a/index.html b/index.html index 0806e29..1d94dcc 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,7 @@ + @@ -118,29 +119,58 @@
-
-
-
-
⚙️
-
-

Title Updates

-

Support for legacy console Title Updates and patches.

+
+
+
+

Project Overview

+

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.

+
+
+

Our Philosophy

+

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.

+
+
+ +
+
+
+
+

Easy Setup

+

Automated installation for TU19 and TU24, with more versions coming soon.

-
-
🔧
-
-

Mod Support

-

Easily apply mods and skins to your legacy experience.

+
+
+
+

Rust Backend

+

Memory-safe operations and game execution with minimal overhead.

-
-
📡
-
-

Server Browser

-

Find and join community-hosted legacy servers.

+
+
+
+

Easy Config

+

Integrated settings to manage your username and game parameters directly.

+
+
+
+

Tauri Frontend

+

Lightweight UI and configuration management via modern webview.

+
+
+
+ +
diff --git a/src/style.css b/src/style.css index 7c5933c..a32fe52 100644 --- a/src/style.css +++ b/src/style.css @@ -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; } \ No newline at end of file