PushGo Auto Commit 2026-03-29T12:17:45.673Z

2026-03-29 20:17:45 +08:00
commit 8398984cc5
12 changed files with 1276 additions and 0 deletions
--- a/popup.html
+++ b/popup.html
@@ -0,0 +1,205 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Transly</title>
+    <style>
+      :root {
+        --bg-top: #eaf9f5;
+        --bg-bottom: #f6f8fb;
+        --panel-bg: #ffffff;
+        --text-main: #13221d;
+        --text-subtle: #4d6259;
+        --brand: #0f766e;
+        --brand-hover: #0c625b;
+        --line: #d7e3df;
+        --danger: #b42318;
+      }
+
+      * { box-sizing: border-box; }
+
+      body {
+        width: 300px;
+        margin: 0;
+        font-family: "Trebuchet MS", "PingFang SC", "Noto Sans SC", sans-serif;
+        background: linear-gradient(160deg, var(--bg-top), var(--bg-bottom));
+        color: var(--text-main);
+      }
+
+      .panel {
+        margin: 12px;
+        padding: 14px;
+        border-radius: 16px;
+        background: var(--panel-bg);
+        border: 1px solid var(--line);
+        box-shadow: 0 10px 28px rgba(13, 58, 47, 0.12);
+        animation: rise 220ms ease-out;
+      }
+
+      .brand {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        margin-bottom: 12px;
+      }
+
+      .brand-mark {
+        width: 34px;
+        height: 34px;
+        border-radius: 9px;
+        background: linear-gradient(135deg, #0f766e, #22a884);
+        color: #ffffff;
+        display: grid;
+        place-items: center;
+        font-weight: 700;
+        letter-spacing: 0.2px;
+      }
+
+      .brand-title {
+        font-size: 16px;
+        font-weight: 700;
+        line-height: 1.2;
+      }
+
+      .brand-sub {
+        margin-top: 2px;
+        font-size: 12px;
+        color: var(--text-subtle);
+      }
+
+      .btn {
+        width: 100%;
+        min-height: 44px;
+        border: 1px solid transparent;
+        border-radius: 10px;
+        cursor: pointer;
+        font-size: 14px;
+        font-weight: 600;
+        transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
+      }
+
+      .btn + .btn {
+        margin-top: 8px;
+      }
+
+      .btn:active {
+        transform: scale(0.985);
+      }
+
+      .btn:focus-visible,
+      .link-btn:focus-visible {
+        outline: 2px solid #0f766e;
+        outline-offset: 2px;
+      }
+
+      .btn:disabled,
+      .link-btn:disabled {
+        opacity: 0.58;
+        cursor: not-allowed;
+      }
+
+      .btn-primary {
+        background: var(--brand);
+        color: #ffffff;
+      }
+
+      .btn-primary:hover {
+        background: var(--brand-hover);
+      }
+
+      .btn-secondary {
+        background: #eff7f5;
+        border-color: #cadfd8;
+        color: #113b33;
+      }
+
+      .btn-secondary:hover {
+        background: #e5f3ef;
+      }
+
+      .btn-tertiary {
+        background: #ffffff;
+        border-color: var(--line);
+        color: #35554b;
+      }
+
+      .btn-tertiary:hover {
+        background: #f7fbfa;
+      }
+
+      .link-btn {
+        width: 100%;
+        margin-top: 10px;
+        border: none;
+        border-radius: 10px;
+        min-height: 38px;
+        background: transparent;
+        color: #0a5d57;
+        font-size: 13px;
+        font-weight: 600;
+        cursor: pointer;
+      }
+
+      .link-btn:hover {
+        background: #eef7f5;
+      }
+
+      #status {
+        min-height: 19px;
+        margin-top: 8px;
+        font-size: 12px;
+        line-height: 1.4;
+        color: var(--text-subtle);
+      }
+
+      #status[data-type="error"] {
+        color: var(--danger);
+      }
+
+      #status[data-type="success"] {
+        color: #147145;
+      }
+
+      @keyframes rise {
+        from {
+          transform: translateY(6px);
+          opacity: 0;
+        }
+        to {
+          transform: translateY(0);
+          opacity: 1;
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .panel,
+        .btn,
+        .link-btn {
+          animation: none;
+          transition: none;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <main class="panel">
+      <header class="brand">
+        <div class="brand-mark" aria-hidden="true">T</div>
+        <div>
+          <div class="brand-title">Transly</div>
+          <div class="brand-sub">快速直译，尽量少一步</div>
+        </div>
+      </header>
+
+      <button id="translateSelection" class="btn btn-primary">翻译选中文本</button>
+      <button id="translatePage" class="btn btn-secondary">整页翻译（随滚动）</button>
+      <button id="restorePage" class="btn btn-tertiary">恢复原文</button>
+      <button id="openOptions" class="link-btn">打开配置（模型/API）</button>
+
+      <div id="status" role="status" aria-live="polite"></div>
+    </main>
+
+    <script src="popup.js"></script>
+  </body>
+</html>