From 4ac47b0bd89af2d4cbe29fb381e255e10c8bf1ce Mon Sep 17 00:00:00 2001
From: mattamior <mattamior@gmail.com>
Date: Sat, 19 Sep 2026 02:46:26 +0800
Subject: [PATCH] website: move copy icon before install prompt

---
 website/index.html | 2 +-
 website/ja.html    | 2 +-
 website/ko.html    | 2 +-
 website/styles.css | 8 ++++----
 website/zh-CN.html | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/website/index.html b/website/index.html
index 4243867..4afccd1 100644
--- a/website/index.html
+++ b/website/index.html
@@ -127,10 +127,10 @@ <h2>One sentence to get started.</h2>
         <p>Copy the prompt below and paste it into your Agent.</p>
       </div>
       <div class="copy-block">
-        <pre id="install-command-en"><code>Install and initialize Agnir for this Project: https://github.com/iorLab/agnir</code></pre>
         <button class="copy-button" type="button" data-copy-target="install-command-en" data-copy-label="Copy install command" data-copied-label="Copied" aria-label="Copy install command" title="Copy install command">
           <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 8h11v11H8z"></path><path d="M5 16H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v1"></path></svg>
         </button>
+        <pre id="install-command-en"><code>Install and initialize Agnir for this Project: https://github.com/iorLab/agnir</code></pre>
       </div>
       <div class="actions install-actions">
         <a class="button secondary" href="https://github.com/iorLab/agnir">View on GitHub</a>
diff --git a/website/ja.html b/website/ja.html
index a325ded..b9e55b8 100644
--- a/website/ja.html
+++ b/website/ja.html
@@ -109,10 +109,10 @@ <h2>ひと言で、始められる。</h2>
         <p>下のプロンプトをコピーして Agent に貼り付けてください。</p>
       </div>
       <div class="copy-block">
-        <pre id="install-command-ja"><code>このプロジェクトに Agnir をインストールして初期化してください：https://github.com/iorLab/agnir</code></pre>
         <button class="copy-button" type="button" data-copy-target="install-command-ja" data-copy-label="インストール指示をコピー" data-copied-label="コピーしました" aria-label="インストール指示をコピー" title="インストール指示をコピー">
           <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 8h11v11H8z"></path><path d="M5 16H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v1"></path></svg>
         </button>
+        <pre id="install-command-ja"><code>このプロジェクトに Agnir をインストールして初期化してください：https://github.com/iorLab/agnir</code></pre>
       </div>
       <p class="microcopy">今インストールして、新しいセッションで「続けて」と言ってみてください。違いはすぐに分かります。</p>
     </section>
diff --git a/website/ko.html b/website/ko.html
index 52910f3..2ffeb22 100644
--- a/website/ko.html
+++ b/website/ko.html
@@ -109,10 +109,10 @@ <h2>한 문장이면 시작됩니다.</h2>
         <p>아래 프롬프트를 복사해 Agent에 붙여 넣으세요.</p>
       </div>
       <div class="copy-block">
-        <pre id="install-command-ko"><code>이 프로젝트에 Agnir를 설치하고 초기화해 줘: https://github.com/iorLab/agnir</code></pre>
         <button class="copy-button" type="button" data-copy-target="install-command-ko" data-copy-label="설치 지시 복사" data-copied-label="복사됨" aria-label="설치 지시 복사" title="설치 지시 복사">
           <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 8h11v11H8z"></path><path d="M5 16H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1 1v1"></path></svg>
         </button>
+        <pre id="install-command-ko"><code>이 프로젝트에 Agnir를 설치하고 초기화해 줘: https://github.com/iorLab/agnir</code></pre>
       </div>
       <p class="microcopy">지금 설치한 뒤 새 세션을 열어 “계속”이라고 말해 보세요. 차이가 바로 드러납니다.</p>
     </section>
diff --git a/website/styles.css b/website/styles.css
index 1e8ca04..aa9ebc7 100644
--- a/website/styles.css
+++ b/website/styles.css
@@ -155,12 +155,12 @@ h3 { margin-bottom: 8px; font-size: 1.08rem; }
 
 .install { padding-bottom: 112px; }
 .copy-block { position: relative; max-width: 930px; margin-top: 30px; }
-.install pre { margin: 0; padding: 20px 72px 20px 22px; overflow-x: auto; border: 1px solid rgba(213, 154, 97, 0.38); border-radius: 16px; background: #0f0d0b; color: var(--cream); }
+.install pre { margin: 0; padding: 20px 22px 20px 72px; overflow-x: auto; border: 1px solid rgba(213, 154, 97, 0.38); border-radius: 16px; background: #0f0d0b; color: var(--cream); }
 .install code { font: 0.88rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
 .copy-button {
   position: absolute;
   top: 50%;
-  right: 14px;
+  left: 14px;
   width: 42px;
   height: 42px;
   display: grid;
@@ -279,8 +279,8 @@ h3 { margin-bottom: 8px; font-size: 1.08rem; }
   .use-grid, .feature-grid { grid-template-columns: 1fr; }
   .use-grid article { min-height: 0; }
   .step-number { margin-bottom: 28px; }
-  .copy-block pre { padding-right: 62px; }
-  .copy-button { right: 10px; width: 38px; height: 38px; }
+  .copy-block pre { padding-left: 62px; }
+  .copy-button { left: 10px; width: 38px; height: 38px; }
   .site-footer { display: block; }
   .footer-links { margin-top: 16px; }
 }
diff --git a/website/zh-CN.html b/website/zh-CN.html
index 6a7d93c..8eee8ad 100644
--- a/website/zh-CN.html
+++ b/website/zh-CN.html
@@ -107,10 +107,10 @@ <h2>一句话，就能开始。</h2>
         <p>复制下面的提示词，粘贴给你的 Agent。</p>
       </div>
       <div class="copy-block">
-        <pre id="install-command-zh"><code>为这个项目安装并初始化 Agnir：https://github.com/iorLab/agnir</code></pre>
         <button class="copy-button" type="button" data-copy-target="install-command-zh" data-copy-label="复制安装指令" data-copied-label="已复制" aria-label="复制安装指令" title="复制安装指令">
           <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 8h11v11H8z"></path><path d="M5 16H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v1"></path></svg>
         </button>
+        <pre id="install-command-zh"><code>为这个项目安装并初始化 Agnir：https://github.com/iorLab/agnir</code></pre>
       </div>
       <p class="microcopy">先装上，打开新会话，说一句“继续”，区别会立刻出现。</p>
     </section>