feat: add top-right navigation buttons to GitHub Pages

CC11001100 · CC11001100 · commit 1da057716b29 · 2025-07-27T08:18:48.000+08:00
- Add fixed position GitHub repository button in top-right corner
- Add JSREI organization homepage button next to GitHub button
- Implement modern glassmorphism design with backdrop blur effects
- Add hover animations and responsive design for mobile devices
- Use proper GitHub icon SVG and custom JSREI text styling
- Buttons provide quick access to repository and organization homepage

The navigation buttons enhance user experience by providing easy access
to related resources while maintaining the clean design aesthetic.
diff --git a/website/index.html b/website/index.html
@@ -661,6 +661,87 @@
             padding: 10px;
         }
 
+        /* 右上角按钮样式 */
+        .top-right-buttons {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            display: flex;
+            gap: 10px;
+            z-index: 1000;
+        }
+
+        .top-button {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            text-decoration: none;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+
+        .github-button {
+            background: linear-gradient(135deg, rgba(36, 41, 46, 0.9), rgba(68, 77, 86, 0.9));
+            color: white;
+        }
+
+        .github-button:hover {
+            background: linear-gradient(135deg, rgba(36, 41, 46, 1), rgba(68, 77, 86, 1));
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
+        }
+
+        .jsrei-button {
+            background: linear-gradient(135deg, rgba(66, 153, 225, 0.9), rgba(102, 126, 234, 0.9));
+            color: white;
+        }
+
+        .jsrei-button:hover {
+            background: linear-gradient(135deg, rgba(66, 153, 225, 1), rgba(102, 126, 234, 1));
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(66, 153, 225, 0.3);
+        }
+
+        .top-button svg {
+            width: 24px;
+            height: 24px;
+            fill: currentColor;
+        }
+
+        .top-button .jsrei-text {
+            font-size: 12px;
+            font-weight: bold;
+            letter-spacing: 0.5px;
+        }
+
+        /* 响应式设计 */
+        @media (max-width: 768px) {
+            .top-right-buttons {
+                top: 15px;
+                right: 15px;
+                gap: 8px;
+            }
+
+            .top-button {
+                width: 45px;
+                height: 45px;
+            }
+
+            .top-button svg {
+                width: 20px;
+                height: 20px;
+            }
+
+            .top-button .jsrei-text {
+                font-size: 10px;
+            }
+        }
+
         /* 图片预览相关样式 */
         .image-preview-overlay {
             position: fixed;
@@ -958,6 +1039,18 @@
     </style>
 </head>
 <body>
+<!-- 右上角按钮 -->
+<div class="top-right-buttons">
+    <a href="https://github.com/JSREI/userscript-template" target="_blank" class="top-button github-button" title="GitHub 仓库">
+        <svg viewBox="0 0 16 16">
+            <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
+        </svg>
+    </a>
+    <a href="https://jsrei.org/" target="_blank" class="top-button jsrei-button" title="JSREI 组织首页">
+        <span class="jsrei-text">JSREI</span>
+    </a>
+</div>
+
 <header>
     <h1>UserScript Template</h1>
     <p>现代化油猴脚本开发模板 - 支持模块化开发、热加载、npm包管理</p>
