From 002f248f23af3298cf872511fdd20fa9c5c69be9 Mon Sep 17 00:00:00 2001 From: Santiago Fisela Date: Sat, 14 Mar 2026 01:34:59 -0300 Subject: [PATCH] Heavy rework --- index.html | 160 +++++++++---- public/discord-icon.jpg | Bin 0 -> 4054 bytes public/potion.png | Bin 0 -> 365 bytes src/main.ts | 44 ++-- src/style.css | 485 +++++++++++++++++++++++++--------------- 5 files changed, 447 insertions(+), 242 deletions(-) create mode 100644 public/discord-icon.jpg create mode 100644 public/potion.png diff --git a/index.html b/index.html index af67dc1..b2f143b 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ - Emerald Legacy Launcher | Play Minecraft Legacy Console Edition + Emerald Legacy Launcher | Play Minecraft Legacy Edition @@ -20,6 +20,7 @@
+
@@ -27,9 +28,7 @@
-
- +
+
+
+ Emerald +
+
+

Authentic UI

+

A launcher built to feel like an extension of the game itself.

+
+
+
+
+ Potion +
+
+

Optimized Speed

+

Rapid launching and peak game performance.

+
+
+
+
+ Controller +
+
+

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 +
+
+ +
+ + Get Launcher + + + +
+ Join Discord +
+ + +
+ +
+
+
Community Screenshots
+
+ + + +
+
See more in Discord
+
+
-
-
-
💎
-

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 +
+

Download Emerald Legacy Launcher

+
+
+ + Download for Windows + + + Download for Linux +
@@ -105,9 +183,9 @@
A Select
B Back
-
- - Emerald Legacy Launcher © 2026 +
+
+ EMERALD LEGACY LAUNCHER © 2026
diff --git a/public/discord-icon.jpg b/public/discord-icon.jpg new file mode 100644 index 0000000000000000000000000000000000000000..4e939678306a2f73b6242969c18dab92b483a89b GIT binary patch literal 4054 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 LNkvXXu0mjfR$`s> literal 0 HcmV?d00001 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