From 145719472f0805c8a298341d9e0a4efc6902f024 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Sat, 2 May 2026 09:51:05 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Terminal=20Aesthetic?= =?UTF-8?q?=20&=20Utility=20Enhancements?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR introduces several micro-UX improvements to the RTECH interface: - **Unified Terminal Logo**: Replaced static logos with a unified link back to `index.html`, featuring a blinking terminal underscore (`_`) for enhanced aesthetic appeal. - **Stable Navigation**: Updated navigation links to use a transparent border by default, eliminating layout shifts on hover. - **Consistent Link Styling**: Prefixed all navigation items with `/` to match the terminal-inspired design. - **Copy-to-Clipboard Utility**: Added a "Copy" button to the terminal code block in `os2.html` with immediate visual feedback ("Copied!") and a robust fallback for various browser environments. - **Accessibility**: Ensured consistent keyboard focus states and improved navigation structure. Accessibility: Added 'Skip to Content' links and improved focus indicators. Verification: Verified with Playwright script (screenshot and video included). Co-authored-by: rtech-technologies <254326487+rtech-technologies@users.noreply.github.com> --- .jules/palette.md | 7 +++++++ index.html | 11 ++++++---- os2.html | 51 +++++++++++++++++++++++++++++++++++++++++------ 3 files changed, 59 insertions(+), 10 deletions(-) create mode 100644 .jules/palette.md diff --git a/.jules/palette.md b/.jules/palette.md new file mode 100644 index 0000000..456e8de --- /dev/null +++ b/.jules/palette.md @@ -0,0 +1,7 @@ +## 2026-05-02 - Layout Stability on Hover +**Learning:** Using `border-bottom: 2px solid transparent` on navigation links as a baseline prevents layout shifts when applying a colored border on hover, maintaining visual stability. +**Action:** Always initialize interactive elements that gain borders on state changes with a transparent border of the same width. + +## 2026-05-02 - Robust Clipboard Utility +**Learning:** For a technical audience, a "Copy to Clipboard" utility in terminal-style code windows significantly improves utility. Providing immediate visual feedback ("Copied!") and a fallback for non-secure/legacy environments (using a hidden textarea) ensures a reliable experience across all browsers. +**Action:** Implement clipboard utilities with both `navigator.clipboard` and an `execCommand('copy')` fallback, accompanied by clear state-change feedback on the trigger element. diff --git a/index.html b/index.html index 449cb15..4ae70ec 100644 --- a/index.html +++ b/index.html @@ -15,11 +15,13 @@ .industrial-border { border: 2px solid #27272a; } .license-box { background: #000; border: 1px solid #3f3f46; position: relative; } - .nav-link { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em; color: #a1a1aa; transition: all 0.2s; } - .nav-link:hover { color: #fff; border-bottom: 2px solid var(--lime); } + .nav-link { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em; color: #a1a1aa; transition: all 0.2s; border-bottom: 2px solid transparent; } + .nav-link:hover { color: #fff; border-bottom-color: var(--lime); } .roadmap-card { border-left: 2px solid #3f3f46; transition: all 0.3s ease; } .roadmap-card:hover { border-left-color: var(--lime); background: #111113; } + @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } + .terminal-blink { animation: blink 1s step-end infinite; } @@ -30,11 +32,12 @@