-
- 
+
-
+
+
-
+
+
+ 
+
+
+
+
+ Authentic UI
+A launcher built to feel like an extension of the game itself.
+
+
+
+ 
+
+
+
+
+ Optimized Speed
+Rapid launching and peak game performance.
+
+
+ 
+
+
+
+
+ Classic Support
+Tailored for the legacy console edition community.
+Experience the Legacy
-The Emerald Legacy Launcher brings back the golden age of Minecraft Console Edition. Stability, speed, - and that classic nostalgia you crave.
-
- View Features
- Get Launcher
+
+
+
+
+ Ready to Play?
+Join the Discord or download the launcher.
+
+
+
+
+
+
+
+
+
+ Emerald
+ Legacy
+
+ 
+
+
+
+ Community Screenshots
+
+
+ 
+
+
+
+
+
+
-
-
-
- Authentic UI
-A launcher built to feel like an extension of the game itself.
-
-
-
- Speed
-Optimized for rapid launching and peak performance.
-
-
-
Classic Support
-Built for the MinecraftConsoles community.
+
+
+
+
+ ⚙️
+
+
+ Title Updates
+Support for legacy console Title Updates and patches.
+
+
+ 🔧
+
+
+ Mod Support
+Easily apply mods and skins to your legacy experience.
+
+
📡
+
+
+ Server Browser
+Find and join community-hosted legacy servers.
+
-
Screenshots Coming Soon
-We are gathering the best shots from the legacy community.
+
+
+
+
+
+
+
+
+
+
Community Gallery
+Check out more on our official Discord server.
+
-
- Ready to play?
-Join the Discord or download the latest build from GitHub.
-
- Download Latest
+
@@ -105,9 +183,9 @@
+
+
Download Emerald Legacy Launcher
+ Select
Back
-
- Emerald Legacy Launcher © 2026
+
diff --git a/public/discord-icon.jpg b/public/discord-icon.jpg
new file mode 100644
index 0000000..4e93967
Binary files /dev/null and b/public/discord-icon.jpg differ
diff --git a/public/potion.png b/public/potion.png
new file mode 100644
index 0000000..4999fb5
Binary files /dev/null and b/public/potion.png differ
diff --git a/src/main.ts b/src/main.ts
index ea5a592..04fe083 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,10 +3,6 @@ import './style.css';
document.addEventListener('DOMContentLoaded', () => {
const tabs = document.querySelectorAll('.tab-item');
const contents = document.querySelectorAll('.tab-content');
- const prevBtn = document.getElementById('prev-tab');
- const nextBtn = document.getElementById('next-tab');
- const gotoFeatures = document.getElementById('goto-features');
- const gotoDownload = document.getElementById('goto-download');
let activeIndex = 0;
@@ -29,21 +25,31 @@ document.addEventListener('DOMContentLoaded', () => {
tab.addEventListener('click', () => updateTabs(index));
});
- prevBtn?.addEventListener('click', () => updateTabs(activeIndex - 1));
- nextBtn?.addEventListener('click', () => updateTabs(activeIndex + 1));
-
- gotoFeatures?.addEventListener('click', (e) => {
- e.preventDefault();
- updateTabs(1);
- });
-
- gotoDownload?.addEventListener('click', (e) => {
- e.preventDefault();
- updateTabs(3);
- });
-
window.addEventListener('keydown', (e) => {
- if (e.key === 'ArrowLeft') updateTabs(activeIndex - 1);
- if (e.key === 'ArrowRight') updateTabs(activeIndex + 1);
+ if (e.key === 'q' || e.key === 'ArrowLeft') updateTabs(activeIndex - 1);
+ if (e.key === 'e' || e.key === 'ArrowRight') updateTabs(activeIndex + 1);
});
+
+ document.getElementById('prev-tab')?.addEventListener('click', () => updateTabs(activeIndex - 1));
+ document.getElementById('next-tab')?.addEventListener('click', () => updateTabs(activeIndex + 1));
+
+ const carouselImg = document.querySelector('.carousel-img') as HTMLImageElement;
+ const screenshots = ['/TU7_Panorama_Background_S.png', '/logo.png'];
+ let screenIndex = 0;
+
+ const rotateScreenshot = (dir: number) => {
+ screenIndex = (screenIndex + dir + screenshots.length) % screenshots.length;
+ if (carouselImg) {
+ carouselImg.style.opacity = '0';
+ setTimeout(() => {
+ carouselImg.src = screenshots[screenIndex];
+ carouselImg.style.opacity = '1';
+ }, 100);
+ }
+ };
+
+ document.querySelector('.carousel-arrow.left')?.addEventListener('click', () => rotateScreenshot(-1));
+ document.querySelector('.carousel-arrow.right')?.addEventListener('click', () => rotateScreenshot(1));
+
+ setInterval(() => rotateScreenshot(1), 5000);
});
diff --git a/src/style.css b/src/style.css
index 0ff1012..d72afab 100644
--- a/src/style.css
+++ b/src/style.css
@@ -7,9 +7,12 @@
--font-pixel: 'Pixelify Sans', sans-serif;
--font-silk: 'Silkscreen', cursive;
--transition: all 0.1s steps(2);
- --menu-border: #888;
- --menu-border-dark: #333;
- --glass-bg: rgba(0, 0, 0, 0.8);
+ --menu-border: #8c8c8c;
+ --menu-border-dark: #222;
+ --glass-bg: rgba(45, 45, 45, 0.95);
+ --btn-bg: #808080;
+ --btn-shadow: #3b3b3b;
+ --highlight-yellow: #ffff3f;
}
* {
@@ -39,7 +42,7 @@ body {
background-size: auto 100%;
z-index: -2;
animation: drift 120s linear infinite;
- filter: brightness(0.5) contrast(1.1);
+ filter: brightness(0.4) contrast(1.1);
}
@keyframes drift {
@@ -58,10 +61,24 @@ body {
left: 0;
width: 100%;
height: 100%;
- background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.95) 100%);
+ background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.9) 100%);
z-index: -1;
}
+.scanlines {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%),
+ linear-gradient(90deg, rgba(255, 0, 0, 0.02), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.02));
+ background-size: 100% 4px, 3px 100%;
+ z-index: 1000;
+ pointer-events: none;
+ opacity: 0.3;
+}
+
.menu-container {
display: flex;
flex-direction: column;
@@ -71,87 +88,66 @@ body {
}
.menu-header {
- margin-bottom: 30px;
- animation: slideDown 0.4s steps(4) ease-out;
+ margin-bottom: 20px;
}
.menu-title {
- max-width: 450px;
+ max-width: 400px;
width: 90%;
- filter: drop-shadow(0 10px 0px rgba(0, 0, 0, 0.5));
-}
-
-@keyframes slideDown {
- from {
- opacity: 0;
- transform: translateY(-40px);
- }
-
- to {
- opacity: 1;
- transform: translateY(0);
- }
+ filter: drop-shadow(0 6px 0px rgba(0, 0, 0, 0.5));
}
.menu-tabs {
display: flex;
align-items: center;
- gap: 10px;
- margin-bottom: 2px;
+ gap: 15px;
+ margin-bottom: 0px;
z-index: 10;
}
.tabs-wrapper {
display: flex;
- background: rgba(0, 0, 0, 0.7);
- border: 4px solid #777;
- border-right-color: #222;
- border-bottom-color: #222;
- box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.1);
+ background: rgba(0, 0, 0, 0.85);
+ border: 4px solid #7c7c7c;
+ border-right-color: #262626;
+ border-bottom-color: #262626;
+ padding: 4px;
}
.tab-item {
- padding: 10px 30px;
- background-image: url('/button.png');
- background-size: 100% 100%;
+ padding: 8px 30px;
+ background: transparent;
border: none;
font-family: var(--font-pixel);
- font-weight: 700;
- font-size: 1.4rem;
- color: #aaa;
- cursor: pointer;
- transition: none;
- text-shadow: 2px 2px 0px #000;
-}
-
-.tab-item:hover {
+ font-weight: 500;
+ font-size: 1.6rem;
color: #fff;
- background-image: url('/button_highlighted.png');
+ cursor: pointer;
+ transition: transform 0.1s steps(2);
}
.tab-item.active {
- color: #fff;
- background-image: url('/button_highlighted.png');
- transform: translateY(-4px);
- z-index: 2;
- box-shadow: 0 10px 0 #000;
+ background: #3c3c3c;
+ outline: 4px solid var(--highlight-yellow);
+ z-index: 1;
}
.arrow-btn {
- background: transparent;
- border: none;
+ background: #000;
+ border: 4px solid #7c7c7c;
+ border-right-color: #262626;
+ border-bottom-color: #262626;
+ padding: 4px 8px;
cursor: pointer;
- padding: 5px;
-}
-
-.arrow-btn img {
- height: 28px;
- image-rendering: pixelated;
+ color: #fff;
+ font-family: var(--font-pixel);
+ font-size: 1.2rem;
+ font-weight: bold;
}
.menu-content-wrapper {
width: 95%;
- max-width: 900px;
+ max-width: 1000px;
flex-grow: 1;
position: relative;
display: flex;
@@ -160,129 +156,275 @@ body {
.menu-content {
flex-grow: 1;
- background: rgba(0, 0, 0, 0.85);
- border: 6px solid #4a4a4a;
- border-right-color: #1a1a1a;
- border-bottom-color: #1a1a1a;
- padding: 40px;
- overflow-y: auto;
- box-shadow: inset 4px 4px 0 rgba(0, 0, 0, 0.5), 0 20px 40px rgba(0, 0, 0, 0.8);
+ background: #cecece;
+ border: 6px solid #f0f0f0;
+ border-right-color: #7b7b7b;
+ border-bottom-color: #7b7b7b;
+ padding: 8px;
+ overflow: hidden;
+ box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
+ position: relative;
}
-.tab-title {
- font-family: var(--font-pixel);
- font-size: 2.5rem;
- text-align: center;
- margin-bottom: 30px;
- color: #fff;
- text-transform: uppercase;
- letter-spacing: 2px;
+.menu-content::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ border: 4px solid #1a1a1a;
+ pointer-events: none;
+ z-index: 5;
}
.tab-content {
display: none;
height: 100%;
+ background: #3c3c3c;
+ border: none;
+ padding: 0;
+ margin: 0;
+ position: relative;
}
.tab-content.active {
- display: block;
- animation: popIn 0.2s steps(2);
-}
-
-@keyframes popIn {
- from {
- opacity: 0;
- transform: scale(0.95);
- }
-
- to {
- opacity: 1;
- transform: scale(1);
- }
+ display: flex;
+ flex-direction: column;
}
.home-layout {
display: flex;
flex-direction: column;
- justify-content: center;
- align-items: center;
- text-align: center;
height: 100%;
}
-.home-layout h1 {
- font-size: 3rem;
- color: var(--color-emerald);
- margin-bottom: 20px;
+.features-row {
+ display: flex;
+ justify-content: space-around;
+ padding: 30px 20px 10px;
+ flex-grow: 1;
+}
+
+.feature-card {
+ flex: 1;
+ max-width: 280px;
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.feature-image {
+ width: 90px;
+ height: 90px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-bottom: 25px;
+}
+
+.pixel-icon {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ image-rendering: pixelated;
+}
+
+.feature-info h3 {
+ font-size: 2.2rem;
+ margin-bottom: 12px;
+ color: #fff;
text-shadow: 3px 3px 0 #000;
}
-.home-layout p {
- font-size: 1.4rem;
- max-width: 600px;
- color: #bbb;
- line-height: 1.4;
+.feature-info p {
+ font-size: 1.3rem;
+ color: #fff;
+ line-height: 1.2;
}
-.btn {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- min-width: 240px;
- height: 56px;
+.cta-section {
+ text-align: center;
+ margin: 20px 0 30px;
padding: 0 20px;
- background-image: url('/button.png');
- background-size: 100% 100%;
- border: none;
- font-family: var(--font-pixel);
- font-weight: 700;
- font-size: 1.4rem;
- color: #ccc;
- text-decoration: none;
- text-shadow: 2px 2px 0px #000;
- cursor: pointer;
- margin: 10px;
}
-.btn:hover {
- background-image: url('/button_highlighted.png');
+.cta-section h2 {
+ font-size: 2.4rem;
+ color: #fff;
+ margin-bottom: 8px;
+ text-shadow: 2px 2px 0 #000;
+}
+
+.cta-section p {
+ font-size: 1.2rem;
color: #fff;
}
-.features-grid {
+.bottom-actions {
display: grid;
- grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+ grid-template-columns: 240px 1fr 300px;
gap: 20px;
+ align-items: center;
+ padding: 15px 25px;
+ background: #7b7b7b;
+ border-top: 4px solid #1a1a1a;
}
-.feature-item {
- background: rgba(255, 255, 255, 0.05);
- border: 4px solid #333;
- padding: 25px;
- text-align: center;
+.branding-group {
+ display: flex;
+ align-items: center;
+ gap: 15px;
+}
+
+.pixel-logo {
+ width: 50px;
+ height: 50px;
+}
+
+.branding-text {
+ display: flex;
+ flex-direction: column;
+}
+
+.brand-name {
+ font-size: 1.8rem;
+ color: #fff;
+ line-height: 1;
+ text-shadow: 2px 2px 0 #000;
+}
+
+.brand-sub {
+ font-size: 1.8rem;
+ color: #fff;
+ line-height: 1;
+ text-shadow: 2px 2px 0 #000;
+}
+
+.action-buttons {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ align-items: center;
+}
+
+.main-btn {
+ width: 350px;
+ height: 64px;
+ background: #5c5c5c;
+ border: 4px solid #fff;
+ border-right-color: #2a2a2a;
+ border-bottom-color: #2a2a2a;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 15px;
+ text-decoration: none;
+ color: #fff;
+ font-size: 2rem;
+ text-shadow: 3px 3px 0 #000;
position: relative;
+ transition: transform 0.05s;
}
-.feature-item h3 {
- font-size: 1.6rem;
- margin-bottom: 10px;
- color: var(--color-emerald);
+.main-btn:hover {
+ outline: 4px solid var(--highlight-yellow);
+ z-index: 2;
}
-.feature-item p {
- font-family: var(--font-pixel);
- font-size: 1.1rem;
- color: #aaa;
+.get-launcher {
+ justify-content: space-between;
+ padding: 0 20px;
+}
+
+.join-discord {
+ flex-direction: row;
+ justify-content: center;
+ height: 56px;
+ font-size: 1.8rem;
+}
+
+.btn-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.btn-subtitle {
+ font-size: 0.8rem;
+ text-shadow: 1px 1px 0 #000;
+ margin-top: -5px;
+}
+
+.btn-icon,
+.btn-icon-discord {
+ height: 40px;
+}
+
+.sparkles-overlay {
+ position: absolute;
+ top: -10px;
+ right: -10px;
+ height: 30px;
+ pointer-events: none;
+}
+
+.screenshot-carousel {
+ background: #000;
+ border: 3px solid #7c7c7c;
+ padding: 8px;
+}
+
+.carousel-container {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.carousel-header {
+ font-size: 0.9rem;
+ color: #fff;
+ text-align: center;
+}
+
+.carousel-view {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ background: #1a1a1a;
+}
+
+.carousel-img {
+ width: 140px;
+ height: 80px;
+ object-fit: cover;
+ border: 2px solid #555;
+}
+
+.carousel-arrow {
+ background: transparent;
+ border: none;
+ color: #fff;
+ cursor: pointer;
+ font-size: 1.2rem;
+}
+
+.carousel-footer {
+ font-size: 0.9rem;
+ color: #fff;
+ text-align: center;
+ background: #2a2a2a;
+ padding: 2px 0;
}
.menu-footer {
width: 100%;
- max-width: 900px;
+ max-width: 1000px;
display: flex;
justify-content: space-between;
- padding: 15px 0;
- margin-top: 10px;
- border-top: 4px solid #444;
+ padding: 10px 0;
+ margin-top: 5px;
}
.legends {
@@ -293,72 +435,51 @@ body {
.legend-item {
display: flex;
align-items: center;
- gap: 12px;
- font-family: var(--font-silk);
- font-size: 0.8rem;
- color: #777;
+ gap: 8px;
+ font-family: var(--font-pixel);
+ font-size: 1rem;
+ color: #fff;
text-transform: uppercase;
}
.legend-icon {
width: 24px;
height: 24px;
- background: #333;
+ background: #3c3c3c;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
- font-size: 0.7rem;
- border: 2px solid #555;
- box-shadow: 2px 2px 0 #000;
+ font-size: 0.8rem;
+ border: 2px solid #7c7c7c;
+ box-shadow: 1px 1px 0 #000;
}
-.sga-label img {
- height: 10px;
- opacity: 0.3;
+.version-info {
+ font-size: 0.9rem;
+ color: #fff;
+ display: flex;
+ align-items: center;
+ gap: 10px;
}
-.menu-content::-webkit-scrollbar {
- width: 14px;
+.version-dot {
+ width: 8px;
+ height: 8px;
+ background: #0bda51;
+ border-radius: 50%;
+ box-shadow: 0 0 5px #0bda51;
}
-.menu-content::-webkit-scrollbar-track {
- background: #000;
- border-left: 2px solid #333;
-}
+@media (max-width: 1000px) {
+ .bottom-actions {
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: auto auto;
+ }
-.menu-content::-webkit-scrollbar-thumb {
- background: #555;
- border: 4px solid #000;
-}
-
-@media (max-width: 768px) {
- .menu-tabs {
- flex-wrap: wrap;
+ .branding-group {
+ grid-column: 1 / -1;
justify-content: center;
- gap: 5px;
- }
-
- .tabs-wrapper {
- border-width: 2px;
- }
-
- .tab-item {
- padding: 8px 15px;
- font-size: 1rem;
- }
-
- .menu-content {
- padding: 20px;
- }
-
- .home-layout h1 {
- font-size: 1.8rem;
- }
-
- .btn {
- min-width: 180px;
- font-size: 1.1rem;
}
}
\ No newline at end of file
- Emerald Legacy Launcher © 2026
+
+
+ EMERALD LEGACY LAUNCHER © 2026