From b77feed56dfe1ab660d0df65fae9924f0df8c53b Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 11 May 2026 09:53:05 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20accessible=20'C?=
 =?UTF-8?q?opy'=20utility=20to=20code=20blocks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added a 'Copy' button to code blocks in os2.html with a terminal aesthetic.
- Implemented robust copy-to-clipboard functionality with a legacy fallback.
- Added immediate visual and accessible feedback ('COPIED!' text and ARIA label updates).
- Ensured keyboard accessibility with focus states.
- Refined implementation to avoid hardcoded IDs and support reusability.

Co-authored-by: rtech-technologies <254326487+rtech-technologies@users.noreply.github.com>
---
 os2.html | 46 +++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 45 insertions(+), 1 deletion(-)

diff --git a/os2.html b/os2.html
index fb439ec..92b78ea 100644
--- a/os2.html
+++ b/os2.html
@@ -84,7 +84,14 @@ <h4 class="text-lime-500 font-black text-xs uppercase mb-2">The Zest UI</h4>
                         </div>
                     </div>
                 </div>
-                <div class="code-window">
+                <div class="code-window group">
+                    <button
+                        onclick="copyCode(this)"
+                        aria-label="Copy code snippet"
+                        class="absolute top-4 right-4 px-3 py-1 text-[10px] font-black uppercase bg-slate-900 text-slate-400 border border-slate-800 opacity-0 group-hover:opacity-100 focus:opacity-100 transition-all hover:bg-lime-500 hover:text-black hover:border-lime-500"
+                    >
+                        Copy
+                    </button>
                     <pre class="text-lime-500 text-xs leading-loose">
 ; OS*2 SYSTEM_INIT
 move rdi 10          ; ALLOC_SOVEREIGNTY
@@ -148,6 +155,43 @@ <h4 class="text-[10px] font-black text-slate-400 uppercase mb-6 tracking-widest"
     </footer>
 
     <script>
+        function copyCode(btn) {
+            const code = btn.nextElementSibling.innerText.trim();
+            const originalText = btn.innerText;
+            const originalLabel = btn.getAttribute('aria-label');
+
+            function showFeedback() {
+                btn.innerText = 'COPIED!';
+                btn.setAttribute('aria-label', "Code copied successfully");
+                btn.classList.add('!bg-lime-500', '!text-black', '!border-lime-500');
+                setTimeout(() => {
+                    btn.innerText = originalText;
+                    btn.setAttribute('aria-label', originalLabel);
+                    btn.classList.remove('!bg-lime-500', '!text-black', '!border-lime-500');
+                }, 2000);
+            }
+
+            if (navigator.clipboard && window.isSecureContext) {
+                navigator.clipboard.writeText(code).then(showFeedback);
+            } else {
+                const textArea = document.createElement("textarea");
+                textArea.value = code;
+                textArea.style.position = "fixed";
+                textArea.style.left = "-9999px";
+                textArea.style.top = "0";
+                document.body.appendChild(textArea);
+                textArea.focus();
+                textArea.select();
+                try {
+                    document.execCommand('copy');
+                    showFeedback();
+                } catch (err) {
+                    console.error('Fallback copy failed', err);
+                }
+                document.body.removeChild(textArea);
+            }
+        }
+
         async function checkAvailability() {
             const btn = document.getElementById('download-btn');
             const status = document.getElementById('system-status');