From bd69dad15c271200168cc1aeed5f1f9bfb5ee18a Mon Sep 17 00:00:00 2001
From: FurkaanBoraa <muratfurkan52@gmail.com>
Date: Mon, 20 Jul 2026 21:47:48 +0300
Subject: [PATCH] Add a copy button to the agent prompt
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The whole section asks the reader to paste something into their agent,
but the block was not cleanly selectable: the you> prefixes and the two
comment lines sit in the same text flow, so dragging across it yields

  you> https://github.com/RectZones/RectZones you> install this # agent…

which is not what anyone wants on their clipboard. The button copies
exactly the two you> lines and nothing else.

The button floats rather than being absolutely positioned, so it only
shortens the lines it sits beside and the comment lines keep their
width. Positioning it absolutely needed padding on the whole block,
which wrapped the comments onto two extra lines.

First script on the site: ~15 lines, no dependency, no build step. It
copies only what is already visible, so the block on screen stays the
source of truth for what lands on the clipboard.
---
 index.html | 43 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/index.html b/index.html
index 1a66ab5..a2de50d 100644
--- a/index.html
+++ b/index.html
@@ -194,6 +194,24 @@
   .agent h3 { font-size: 24px; margin-bottom: 10px; }
   .agent p { color: var(--muted); font-size: 16px; margin-bottom: 12px; }
 
+  /* the prompt block is meant to be pasted into an agent, so it carries a copy
+     button — hand-selecting it drags in the you> prefixes and the comments */
+  .copy {
+    float: right;                    /* shortens only the lines it sits beside,
+                                        so the comment lines keep their width */
+    margin: -4px -6px 4px 14px;
+    min-width: 70px;                 /* holds its width when the label changes */
+    padding: 6px 10px;
+    font: 600 12px/1.4 "JetBrains Mono", monospace; letter-spacing: .04em;
+    color: var(--muted); background: #131d33;
+    border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
+    transition: color .15s ease, border-color .15s ease;
+  }
+  .copy:hover { color: var(--fg); border-color: #35507f; }
+  .copy:focus-visible { outline: 2px solid var(--azure); outline-offset: 2px; }
+  .copy[data-state="done"] { color: var(--ok); border-color: var(--ok); }
+  .copy[data-state="fail"] { color: var(--amber); border-color: var(--amber); }
+
   /* faq */
   .faq { margin-top: 36px; display: grid; gap: 12px; }
   details {
@@ -326,6 +344,9 @@ <h3>🤖 The agent way</h3>
           see the <a href="https://github.com/RectZones/RectZones#install--by-hand">README</a>.</p>
       </div>
       <div class="term">
+        <button class="copy" type="button" aria-live="polite"
+                aria-label="Copy the two prompt lines"
+                data-copy="https://github.com/RectZones/RectZones&#10;install this">Copy</button>
         <div><span class="p">you&gt;</span> https://github.com/RectZones/RectZones</div>
         <div><span class="p">you&gt;</span> install this</div>
         <div><span class="c"># agent clones, builds, guides the permission,</span></div>
@@ -374,5 +395,27 @@ <h2>FAQ</h2>
     Built for macOS 13+ · RectZones is not affiliated with Apple, Microsoft, Magnet or Rectangle.
   </footer>
 </main>
+<script>
+  // Copies exactly the two you> lines shown above, nothing hidden: the visible
+  // block stays the source of truth for what lands on the clipboard.
+  document.querySelectorAll(".copy").forEach(function (btn) {
+    var idle = btn.textContent, timer;
+    btn.addEventListener("click", function () {
+      var settle = function (label, state) {
+        clearTimeout(timer);
+        btn.textContent = label;
+        btn.setAttribute("data-state", state);
+        timer = setTimeout(function () {
+          btn.textContent = idle;
+          btn.removeAttribute("data-state");
+        }, 2000);
+      };
+      navigator.clipboard.writeText(btn.dataset.copy).then(
+        function () { settle("Copied", "done"); },
+        function () { settle("Select it", "fail"); }
+      );
+    });
+  });
+</script>
 </body>
 </html>