From 9e2583f8380d944413abbf185dead1ae48cf953e Mon Sep 17 00:00:00 2001 From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com> Date: Mon, 23 Feb 2026 16:46:56 -0500 Subject: [PATCH] Improve landing install code block and copy button design --- landing/index.html | 20 ++++-- landing/script.js | 13 +++- landing/style.css | 149 ++++++++++++++++++++++++++++++++++++++++----- 3 files changed, 159 insertions(+), 23 deletions(-) diff --git a/landing/index.html b/landing/index.html index d558c130..def7b826 100644 --- a/landing/index.html +++ b/landing/index.html @@ -79,11 +79,21 @@ flowchart TB

Install SeedPass (stable)

- 
bash -c "$(curl -sSL https://raw.githubusercontent.com/PR0M3TH3AN/SeedPass/main/scripts/install.sh)"
- + +
+ 
$bash -c "$(curl -sSL https://raw.githubusercontent.com/PR0M3TH3AN/SeedPass/main/scripts/install.sh)"
+ +
+

Includes checksum verification and idempotent setup.

+

diff --git a/landing/script.js b/landing/script.js index 5d714604..34f953b3 100644 --- a/landing/script.js +++ b/landing/script.js @@ -66,6 +66,10 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => { // Log when the page is loaded document.addEventListener('DOMContentLoaded', function() { document.querySelectorAll('[data-copy-target]').forEach((button) => { + const buttonText = button.querySelector('.copy-button-text'); + const buttonIcon = button.querySelector('i'); + const status = button.closest('.install-command-shell')?.querySelector('.install-copy-status'); + button.addEventListener('click', async () => { const targetId = button.getAttribute('data-copy-target'); const target = document.getElementById(targetId); @@ -84,12 +88,15 @@ document.addEventListener('DOMContentLoaded', function() { document.body.removeChild(temp); } - const original = button.innerHTML; button.classList.add('copied'); - button.innerHTML = ' Copied'; + if (buttonText) buttonText.textContent = 'Copied'; + if (buttonIcon) buttonIcon.className = 'fas fa-check'; + if (status) status.textContent = 'Install command copied to clipboard.'; setTimeout(() => { button.classList.remove('copied'); - button.innerHTML = original; + if (buttonText) buttonText.textContent = 'Copy'; + if (buttonIcon) buttonIcon.className = 'fas fa-copy'; + if (status) status.textContent = ''; }, 1800); }); }); diff --git a/landing/style.css b/landing/style.css index e6606a7c..0484b278 100644 --- a/landing/style.css +++ b/landing/style.css @@ -233,11 +233,16 @@ footer .social-media a:focus { } .install-command-shell { - flex-direction: column; + max-width: 100%; + } + + .install-shell-body { + grid-template-columns: 1fr; } .install-copy-button { - min-height: 40px; + width: 100%; + min-height: 44px; } } @@ -346,44 +351,121 @@ footer .social-media a:focus { } .install-quickstart { - margin: 28px auto 0; - max-width: 900px; + margin: 30px auto 0; + max-width: 920px; text-align: left; } .install-label { - margin: 0 0 8px; + margin: 0 0 10px; font-size: 0.95rem; - color: rgba(255, 255, 255, 0.9); + font-weight: 600; + letter-spacing: 0.02em; + color: rgba(255, 255, 255, 0.92); } .install-command-shell { + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 14px; + background: linear-gradient(180deg, rgba(9, 11, 16, 0.82), rgba(20, 24, 31, 0.92)); + backdrop-filter: blur(3px); + box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25); + overflow: hidden; +} + +.install-shell-header { display: flex; + align-items: center; + gap: 8px; + padding: 10px 14px; + border-bottom: 1px solid rgba(255, 255, 255, 0.12); +} + +.install-shell-dot { + width: 10px; + height: 10px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.35); +} + +.install-shell-dot:first-child { + background: #ff5f57; +} + +.install-shell-dot:nth-child(2) { + background: #febc2e; +} + +.install-shell-dot:nth-child(3) { + background: #28c840; +} + +.install-shell-title { + margin-left: 6px; + font-size: 0.84rem; + letter-spacing: 0.08em; + text-transform: uppercase; + color: rgba(255, 255, 255, 0.7); +} + +.install-shell-body { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + gap: 12px; align-items: stretch; - gap: 10px; + padding: 14px; } .install-code { - flex: 1; margin: 0; + max-width: none; + min-height: 54px; + display: flex; + align-items: center; + gap: 10px; + background: rgba(7, 10, 14, 0.85); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 10px; + box-shadow: none; +} + +.install-code-prompt { + color: #7dd3fc; + font-weight: 700; + flex: 0 0 auto; +} + +.install-code code { + color: #e5edf7; + font-family: "SFMono-Regular", "Consolas", "Liberation Mono", monospace; + font-size: 0.92rem; + overflow-x: auto; + white-space: nowrap; } .install-copy-button { - border: 1px solid rgba(255, 255, 255, 0.25); - background: rgba(255, 255, 255, 0.08); + border: 1px solid rgba(255, 255, 255, 0.24); + background: rgba(255, 255, 255, 0.1); color: #ffffff; - border-radius: 8px; - padding: 0 14px; + border-radius: 10px; + padding: 0 16px; font-weight: 600; cursor: pointer; white-space: nowrap; - transition: background-color 0.2s ease, border-color 0.2s ease; + min-height: 54px; + min-width: 116px; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .install-copy-button:hover, .install-copy-button:focus { - background: rgba(255, 255, 255, 0.18); - border-color: rgba(255, 255, 255, 0.45); + background: rgba(255, 255, 255, 0.2); + border-color: rgba(255, 255, 255, 0.52); + transform: translateY(-1px); outline: none; } @@ -392,6 +474,21 @@ footer .social-media a:focus { border-color: #2ea043; } +.install-hint { + margin: 0; + padding: 0 14px 12px; + font-size: 0.85rem; + color: rgba(255, 255, 255, 0.74); +} + +.install-copy-status { + margin: 0; + min-height: 0; + padding: 0 14px 12px; + font-size: 0.8rem; + color: #8fda9f; +} + /* Mini flow chart in hero */ .mini-chart { max-width: 600px; @@ -1044,6 +1141,20 @@ body.dark-mode .install-label { color: #c9d1d9; } +body.dark-mode .install-command-shell { + border-color: rgba(255, 255, 255, 0.22); + background: linear-gradient(180deg, rgba(9, 12, 17, 0.95), rgba(17, 22, 29, 0.95)); +} + +body.dark-mode .install-shell-header { + border-bottom-color: rgba(255, 255, 255, 0.13); +} + +body.dark-mode .install-code { + background: rgba(5, 9, 14, 0.8); + border-color: rgba(255, 255, 255, 0.14); +} + body.dark-mode .install-copy-button { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.08); @@ -1054,6 +1165,14 @@ body.dark-mode .install-copy-button:focus { background: rgba(255, 255, 255, 0.18); } +body.dark-mode .install-hint { + color: rgba(201, 209, 217, 0.78); +} + +body.dark-mode .install-copy-status { + color: #8fda9f; +} + body.dark-mode .disclaimer .container { background-color: #2c2f33; color: var(--footer-text);