GitHub Repo Tree Generator

Generate, filter, and share a clean directory tree for any GitHub repo

// ==UserScript==
// @name         GitHub Repo Tree Generator
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Generate, filter, and share a clean directory tree for any GitHub repo
// @author       Azad-sl
// @homepage     https://github.com/Azad-sl/GitTree
// @license      MIT
// @match        https://github.com/*
// @grant        GM_addStyle
// @grant        GM_setClipboard
// @grant        GM_download
// @require      https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js
// ==/UserScript==
(function() {
    'use strict';
    GM_addStyle(`
        /* 弹窗样式 */
        .gittree-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }
        .gittree-modal-content {
            background-color: white;
            border-radius: 18px;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
            width: 90%;
            max-width: 800px;
            max-height: 90vh;
            overflow-y: auto;
            padding: 2rem;
            position: relative;
        }
        .gittree-close-btn {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: #6e6e73;
        }
        .gittree-close-btn:hover {
            color: #1d1d1f;
        }
        /* GitHub页面上的按钮样式 */
        .gittree-btn {
            background-color: #238636;
            color: white;
            border: none;
            border-radius: 6px;
            padding: 5px 12px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            margin-left: 8px;
        }
        .gittree-btn:hover {
            background-color: #2ea043;
        }
        /* GitTree应用样式 */
        .gittree-container {
            box-sizing: border-box;
            position: relative;
            width: 100%;
            max-width: 800px;
            background-color: #fff;
            border: 1px solid #d2d2d7;
            border-radius: 18px;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.05);
            padding: 2rem 2.5rem 2.5rem;
        }
        .gittree-container h1 {
            text-align: center;
            font-size: 2rem;
            font-weight: 600;
            margin-top: 0;
            margin-bottom: 0.5rem;
        }
        .gittree-container .subtitle {
            text-align: center;
            font-size: 1rem;
            color: #6e6e73;
            margin-bottom: 2rem;
        }
        .gittree-container pre#gittree-result {
            font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
            font-size: 0.9rem;
            color: #1d1d1f;
            white-space: pre;
            padding: 1.5rem;
            margin: 0;
            max-height: 50vh;
            overflow: auto;
            line-height: 1.6;
            background-color: #fff;
        }
        .gittree-container pre#gittree-result.error {
            color: #d73a49;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
            white-space: normal;
        }
        .gittree-container .input-wrapper {
            display: flex;
            gap: 1rem;
            margin-bottom: 1rem;
        }
        .gittree-container input[type=text],
        .gittree-container input[type=number] {
            padding: 0.8rem 1rem;
            font-size: 1rem;
            border: 1px solid #d2d2d7;
            border-radius: 10px;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
            background-color: #fff;
            color: #1d1d1f;
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        .gittree-container input[type=text] {
            flex-grow: 1;
        }
        .gittree-container input[type=text]:focus,
        .gittree-container input[type=number]:focus {
            border-color: #007aff;
            box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.2);
            outline: 0;
        }
        .gittree-container button#gittree-generateBtn {
            padding: 0.8rem 1.5rem;
            font-size: 1rem;
            font-weight: 600;
            color: #fff;
            background-color: #007aff;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: background-color 0.2s, transform 0.1s;
            display: flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
        }
        .gittree-container button#gittree-generateBtn:hover {
            background-color: #0071e3;
        }
        .gittree-container button#gittree-generateBtn:active {
            transform: scale(0.98);
        }
        .gittree-container button#gittree-generateBtn:disabled {
            background-color: #a0a0a0;
            cursor: not-allowed;
            opacity: 0.8;
        }
        .gittree-container .spinner {
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            border-top-color: #fff;
            width: 16px;
            height: 16px;
            animation: spin 1s linear infinite;
            margin-right: 0.5rem;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .gittree-container .options-row {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
            align-items: center;
        }
        .gittree-container .lang-toggle {
            display: flex;
            align-items: center;
            background-color: #f6f8fa;
            border-radius: 20px;
            padding: 4px;
            cursor: pointer;
            user-select: none;
        }
        .gittree-container .lang-option {
            padding: 6px 12px;
            border-radius: 16px;
            font-size: 0.85rem;
            font-weight: 500;
            color: #6e6e73;
            transition: all 0.2s;
        }
        .gittree-container .lang-option.active {
            background-color: #fff;
            color: #1d1d1f;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        .gittree-container .advanced-options {
            margin-left: auto;
        }
        .gittree-container .advanced-options summary {
            cursor: pointer;
            color: #6e6e73;
            font-size: 0.9rem;
            font-weight: 500;
            list-style-position: expert;
            display: inline-block;
            padding: 0.25rem 0.5rem;
            border-radius: 6px;
        }
        .gittree-container .advanced-options summary:hover {
            background-color: #f0f0f0;
        }
        .gittree-container .advanced-options-grid {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 1rem;
            margin-top: 0.75rem;
            align-items: center;
        }
        .gittree-container .advanced-options label {
            color: #6e6e73;
            font-size: 0.9rem;
        }
        .gittree-container input#gittree-depthInput {
            width: 70px;
            text-align: center;
        }
        .gittree-container input#gittree-excludeInput {
            width: 100%;
            box-sizing: border-box;
        }
        .gittree-container .result-wrapper {
            margin-top: 2rem;
            border: 1px solid #d2d2d7;
            border-radius: 12px;
            overflow: hidden;
        }
        .gittree-container .result-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 0.75rem;
            background-color: #f0f0f0;
            border-bottom: 1px solid #d2d2d7;
        }
        .gittree-container .header-group {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .gittree-container .header-group button {
            background: none;
            border: none;
            padding: 0.3rem 0.5rem;
            cursor: pointer;
            color: #6e6e73;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
            font-size: 0.8rem;
            display: flex;
            align-items: center;
            gap: 0.3rem;
            border-radius: 6px;
            transition: background-color 0.2s, color 0.2s;
        }
        .gittree-container .header-group button:hover {
            background-color: #e0e0e0;
            color: #1d1d1f;
        }
        .gittree-container .header-group button svg {
            width: 18px;
            height: 18px;
            stroke-width: 1.8;
        }
        .gittree-container .view-modes button.active {
            color: #007aff;
            background-color: rgba(0, 122, 255, 0.15);
        }
        .gittree-container .header-group button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        .gittree-container #gittree-copyBtn .copy-icon {
            width: 1em;
            height: 1em;
            stroke-width: 2;
            vertical-align: middle;
        }
        #gittree-image-card-container {
            position: absolute;
            left: -9999px;
            top: -9999px;
            padding: 4rem;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        #gittree-image-card-container .macos-window {
            width: 800px;
            background-color: #2e2e2e;
            border-radius: 10px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
            padding-bottom: 20px;
            border: 1px solid #444;
        }
        #gittree-image-card-container .title-bar {
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            padding: 0 15px;
            border-bottom: 1px solid #404040;
        }
        #gittree-image-card-container .traffic-lights {
            position: absolute;
            left: 15px;
            display: flex;
            gap: 8px;
        }
        #gittree-image-card-container .light {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }
        #gittree-image-card-container .light.red {
            background-color: #ff5f56;
        }
        #gittree-image-card-container .light.yellow {
            background-color: #ffbd2e;
        }
        #gittree-image-card-container .light.green {
            background-color: #27c93f;
        }
        #gittree-image-card-container .title-text {
            color: #b0b0b0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
            font-size: 14px;
            font-weight: 500;
        }
        #gittree-image-card-container .card-content {
            font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
            font-size: 14px;
            color: #e0e0e0;
            white-space: pre;
            padding: 20px;
            max-height: 80vh;
            overflow: auto;
            line-height: 1.6;
        }
        /* 样式选择器 */
        .gittree-style-selector {
            margin-top: 1rem;
            margin-bottom: 1rem;
        }
        .gittree-style-selector label {
            display: block;
            margin-bottom: 0.5rem;
            color: #6e6e73;
            font-size: 0.9rem;
        }
        .gittree-style-options {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
        }
        .gittree-style-option {
            border: 2px solid #d2d2d7;
            border-radius: 10px;
            padding: 1rem;
            cursor: pointer;
            transition: all 0.2s;
            background-color: #fff;
            display: flex;
            flex-direction: column;
        }
        .gittree-style-option:hover {
            border-color: #007aff;
            box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
        }
        .gittree-style-option.selected {
            border-color: #007aff;
            background-color: rgba(0, 122, 255, 0.05);
        }
        .gittree-style-option h4 {
            margin: 0 0 0.5rem 0;
            font-size: 1rem;
            color: #1d1d1f;
        }
        .gittree-style-option p {
            margin: 0;
            font-size: 0.85rem;
            color: #6e6e73;
            flex-grow: 1;
        }
        .gittree-style-option .preview {
            height: 100px;
            background-color: #f6f8fa;
            border-radius: 6px;
            margin-top: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            color: #586069;
        }
        /* GitHub项目分享卡片样式 - macOS风格 */
        #gittree-repo-card-container {
            position: absolute;
            left: -9999px;
            top: -9999px;
            width: 800px;
            background-color: #fff;
            border-radius: 12px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
            overflow: hidden;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
        }
        #gittree-repo-card-container.macos-style {
            background-color: #1e1e1e;
            border-radius: 16px;
            box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.5);
            border: 1px solid #333;
        }
        #gittree-repo-card-container.macos-style .card-header {
            background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%);
            padding: 28px;
            color: white;
            position: relative;
            border-bottom: 1px solid #333;
        }
        #gittree-repo-card-container.macos-style .card-header::before {
            content: '';
            position: absolute;
            top: 15px;
            left: 15px;
            display: flex;
            gap: 8px;
        }
        #gittree-repo-card-container.macos-style .card-header::before .light {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            display: inline-block;
        }
        #gittree-repo-card-container.macos-style .card-header::before .light.red {
            background-color: #ff5f56;
        }
        #gittree-repo-card-container.macos-style .card-header::before .light.yellow {
            background-color: #ffbd2e;
        }
        #gittree-repo-card-container.macos-style .card-header::before .light.green {
            background-color: #27c93f;
        }
        #gittree-repo-card-container.macos-style .repo-title {
            font-size: 26px;
            font-weight: 700;
            margin: 0 0 12px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
        }
        #gittree-repo-card-container.macos-style .repo-title .github-icon {
            width: 30px;
            height: 30px;
            margin-right: 12px;
            fill: white;
        }
        #gittree-repo-card-container.macos-style .repo-description {
            font-size: 16px;
            font-weight: 400;
            margin: 0;
            opacity: 0.9;
            line-height: 1.5;
            text-align: center;
            color: #e0e0e0;
        }
        #gittree-repo-card-container.macos-style .card-body {
            display: flex;
            padding: 28px;
            background-color: #1e1e1e;
            color: #e0e0e0;
        }
        #gittree-repo-card-container.macos-style .repo-info {
            flex: 1;
        }
        #gittree-repo-card-container.macos-style .repo-stats {
            display: flex;
            margin-bottom: 24px;
            gap: 24px;
        }
        #gittree-repo-card-container.macos-style .stat-item {
            display: flex;
            align-items: center;
            font-size: 18px;
            color: #e0e0e0;
        }
        #gittree-repo-card-container.macos-style .stat-item svg {
            width: 22px;
            height: 22px;
            margin-right: 8px;
            fill: #b0b0b0;
        }
        #gittree-repo-card-container.macos-style .repo-languages {
            margin-bottom: 24px;
        }
        #gittree-repo-card-container.macos-style .repo-languages h3 {
            font-size: 18px;
            margin: 0 0 12px 0;
            color: #e0e0e0;
        }
        #gittree-repo-card-container.macos-style .language-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        #gittree-repo-card-container.macos-style .language-item {
            display: flex;
            align-items: center;
            background-color: #2a2a2a;
            border-radius: 20px;
            padding: 6px 14px;
            font-size: 14px;
            color: #e0e0e0;
            border: 1px solid #333;
        }
        #gittree-repo-card-container.macos-style .language-color {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            margin-right: 8px;
        }
        #gittree-repo-card-container.macos-style .qr-code {
            width: 160px;
            height: 160px;
            background-color: white;
            border: 1px solid #333;
            border-radius: 12px;
            padding: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }
        #gittree-repo-card-container.macos-style .qr-code canvas {
            max-width: 100%;
            max-height: 100%;
        }
        #gittree-repo-card-container.macos-style .card-footer {
            background-color: #2a2a2a;
            padding: 16px 28px;
            border-top: 1px solid #333;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        #gittree-repo-card-container.macos-style .generated-at {
            font-size: 12px;
            color: #b0b0b0;
        }
        #gittree-repo-card-container.macos-style .watermark {
            font-size: 12px;
            color: #b0b0b0;
            display: flex;
            align-items: center;
        }
        #gittree-repo-card-container.macos-style .watermark svg {
            width: 16px;
            height: 16px;
            margin-right: 4px;
            fill: #b0b0b0;
        }
        /* GitHub项目分享卡片样式 - 现代简约风格 */
        #gittree-repo-card-container.modern-style {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            border: none;
        }
        #gittree-repo-card-container.modern-style .card-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 32px;
            color: white;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        #gittree-repo-card-container.modern-style .card-header::after {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
            transform: rotate(30deg);
        }
        #gittree-repo-card-container.modern-style .repo-title {
            font-size: 32px;
            font-weight: 700;
            margin: 0 0 14px 0;
            letter-spacing: -0.5px;
            position: relative;
            z-index: 1;
        }
        #gittree-repo-card-container.modern-style .repo-title .github-icon {
            display: none;
        }
        #gittree-repo-card-container.modern-style .repo-description {
            font-size: 18px;
            font-weight: 400;
            margin: 0;
            opacity: 0.95;
            line-height: 1.5;
            max-width: 80%;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }
        #gittree-repo-card-container.modern-style .card-body {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 32px;
        }
        #gittree-repo-card-container.modern-style .repo-info {
            width: 100%;
            margin-bottom: 24px;
        }
        #gittree-repo-card-container.modern-style .repo-stats {
            display: flex;
            justify-content: center;
            margin-bottom: 28px;
            gap: 40px;
        }
        #gittree-repo-card-container.modern-style .stat-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 16px;
            color: #24292e;
        }
        #gittree-repo-card-container.modern-style .stat-item svg {
            width: 28px;
            height: 28px;
            margin-bottom: 10px;
            fill: #667eea;
        }
        #gittree-repo-card-container.modern-style .stat-value {
            font-size: 28px;
            font-weight: 700;
            color: #667eea;
        }
        #gittree-repo-card-container.modern-style .stat-label {
            font-size: 14px;
            color: #6e6e73;
            margin-top: 4px;
        }
        #gittree-repo-card-container.modern-style .repo-languages {
            width: 100%;
            margin-bottom: 28px;
        }
        #gittree-repo-card-container.modern-style .repo-languages h3 {
            font-size: 20px;
            margin: 0 0 16px 0;
            color: #24292e;
            text-align: center;
            font-weight: 600;
        }
        #gittree-repo-card-container.modern-style .language-list {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 12px;
        }
        #gittree-repo-card-container.modern-style .language-item {
            display: flex;
            align-items: center;
            background-color: white;
            border-radius: 24px;
            padding: 8px 16px;
            font-size: 14px;
            color: #24292e;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        #gittree-repo-card-container.modern-style .language-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
        }
        #gittree-repo-card-container.modern-style .language-color {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            margin-right: 8px;
        }
        #gittree-repo-card-container.modern-style .qr-code {
            width: 150px;
            height: 150px;
            background-color: white;
            border-radius: 16px;
            padding: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        #gittree-repo-card-container.modern-style .qr-code:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
        }
        #gittree-repo-card-container.modern-style .qr-code canvas {
            max-width: 100%;
            max-height: 100%;
        }
        #gittree-repo-card-container.modern-style .card-footer {
            background-color: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            padding: 18px 32px;
            border-top: 1px solid rgba(0, 0, 0, 0.05);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        #gittree-repo-card-container.modern-style .generated-at {
            font-size: 12px;
            color: #6e6e73;
        }
        #gittree-repo-card-container.modern-style .watermark {
            font-size: 12px;
            color: #6e6e73;
            display: flex;
            align-items: center;
            font-weight: 500;
        }
        #gittree-repo-card-container.modern-style .watermark svg {
            width: 16px;
            height: 16px;
            margin-right: 4px;
            fill: #667eea;
        }
        /* GitHub项目分享卡片样式 - GitHub风格 */
        #gittree-repo-card-container.github-style {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
            border: 1px solid #e1e4e8;
        }
        #gittree-repo-card-container.github-style .card-header {
            background-color: #24292e;
            padding: 20px;
            color: white;
            border-bottom: 1px solid #e1e4e8;
        }
        #gittree-repo-card-container.github-style .repo-title {
            font-size: 22px;
            font-weight: 600;
            margin: 0;
            display: flex;
            align-items: center;
        }
        #gittree-repo-card-container.github-style .repo-title .github-icon {
            width: 26px;
            height: 26px;
            margin-right: 10px;
            fill: white;
        }
        #gittree-repo-card-container.github-style .repo-description {
            font-size: 15px;
            font-weight: 400;
            margin: 10px 0 0 0;
            opacity: 0.9;
            line-height: 1.5;
        }
        #gittree-repo-card-container.github-style .card-body {
            display: flex;
            padding: 20px;
        }
        #gittree-repo-card-container.github-style .repo-info {
            flex: 1;
        }
        #gittree-repo-card-container.github-style .repo-stats {
            display: flex;
            margin-bottom: 20px;
            gap: 20px;
        }
        #gittree-repo-card-container.github-style .stat-item {
            display: flex;
            align-items: center;
            font-size: 15px;
            color: #586069;
        }
        #gittree-repo-card-container.github-style .stat-item svg {
            width: 18px;
            height: 18px;
            margin-right: 6px;
            fill: #586069;
        }
        #gittree-repo-card-container.github-style .repo-languages {
            margin-bottom: 20px;
        }
        #gittree-repo-card-container.github-style .repo-languages h3 {
            font-size: 16px;
            margin: 0 0 10px 0;
            color: #24292e;
            font-weight: 600;
        }
        #gittree-repo-card-container.github-style .language-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        #gittree-repo-card-container.github-style .language-item {
            display: flex;
            align-items: center;
            background-color: #f1f8ff;
            border-radius: 16px;
            padding: 4px 12px;
            font-size: 13px;
            color: #0366d6;
            transition: background-color 0.2s;
        }
        #gittree-repo-card-container.github-style .language-item:hover {
            background-color: #e6f3ff;
        }
        #gittree-repo-card-container.github-style .language-color {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 6px;
        }
        #gittree-repo-card-container.github-style .qr-code {
            width: 130px;
            height: 130px;
            background-color: white;
            border: 1px solid #e1e4e8;
            border-radius: 8px;
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        #gittree-repo-card-container.github-style .qr-code canvas {
            max-width: 100%;
            max-height: 100%;
        }
        #gittree-repo-card-container.github-style .card-footer {
            background-color: #f6f8fa;
            padding: 14px 20px;
            border-top: 1px solid #e1e4e8;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        #gittree-repo-card-container.github-style .generated-at {
            font-size: 12px;
            color: #586069;
        }
        #gittree-repo-card-container.github-style .watermark {
            font-size: 12px;
            color: #586069;
            display: flex;
            align-items: center;
        }
        #gittree-repo-card-container.github-style .watermark svg {
            width: 16px;
            height: 16px;
            margin-right: 4px;
            fill: #586069;
        }
        /* GitHub项目分享卡片样式 - Material Design风格 */
        #gittree-repo-card-container.material-style {
            background-color: #fff;
            border-radius: 16px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            border: none;
            font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
        }
        #gittree-repo-card-container.material-style .card-header {
            background-color: #4285f4;
            padding: 24px 24px 32px;
            color: white;
            position: relative;
        }
        #gittree-repo-card-container.material-style .card-header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40px;
            background: linear-gradient(to bottom, rgba(66, 133, 244, 0), rgba(66, 133, 244, 0.1));
        }
        #gittree-repo-card-container.material-style .repo-title {
            font-size: 28px;
            font-weight: 500;
            margin: 0 0 12px 0;
            display: flex;
            align-items: center;
        }
        #gittree-repo-card-container.material-style .repo-title .github-icon {
            width: 32px;
            height: 32px;
            margin-right: 12px;
            fill: white;
        }
        #gittree-repo-card-container.material-style .repo-description {
            font-size: 16px;
            font-weight: 400;
            margin: 0;
            opacity: 0.9;
            line-height: 1.5;
        }
        #gittree-repo-card-container.material-style .card-body {
            display: flex;
            padding: 24px;
            background-color: #fff;
        }
        #gittree-repo-card-container.material-style .repo-info {
            flex: 1;
            padding-right: 24px;
        }
        #gittree-repo-card-container.material-style .repo-stats {
            display: flex;
            margin-bottom: 24px;
            gap: 24px;
        }
        #gittree-repo-card-container.material-style .stat-item {
            display: flex;
            align-items: center;
            font-size: 16px;
            color: #5f6368;
        }
        #gittree-repo-card-container.material-style .stat-item svg {
            width: 22px;
            height: 22px;
            margin-right: 8px;
            fill: #5f6368;
        }
        #gittree-repo-card-container.material-style .repo-languages {
            margin-bottom: 24px;
        }
        #gittree-repo-card-container.material-style .repo-languages h3 {
            font-size: 18px;
            margin: 0 0 12px 0;
            color: #202124;
            font-weight: 500;
        }
        #gittree-repo-card-container.material-style .language-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        #gittree-repo-card-container.material-style .language-item {
            display: flex;
            align-items: center;
            background-color: #f1f3f4;
            border-radius: 16px;
            padding: 6px 14px;
            font-size: 14px;
            color: #202124;
            transition: background-color 0.2s;
        }
        #gittree-repo-card-container.material-style .language-item:hover {
            background-color: #e8eaed;
        }
        #gittree-repo-card-container.material-style .language-color {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            margin-right: 8px;
        }
        #gittree-repo-card-container.material-style .qr-code {
            width: 140px;
            height: 140px;
            background-color: white;
            border-radius: 8px;
            padding: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            border: 1px solid #dadce0;
        }
        #gittree-repo-card-container.material-style .qr-code canvas {
            max-width: 100%;
            max-height: 100%;
        }
        #gittree-repo-card-container.material-style .card-footer {
            background-color: #f8f9fa;
            padding: 16px 24px;
            border-top: 1px solid #dadce0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        #gittree-repo-card-container.material-style .generated-at {
            font-size: 12px;
            color: #5f6368;
        }
        #gittree-repo-card-container.material-style .watermark {
            font-size: 12px;
            color: #5f6368;
            display: flex;
            align-items: center;
        }
        #gittree-repo-card-container.material-style .watermark svg {
            width: 16px;
            height: 16px;
            margin-right: 4px;
            fill: #5f6368;
        }
        @media (max-width: 768px) {
            .gittree-container {
                padding: 1.5rem;
                border: none;
                border-radius: 0;
                box-shadow: none;
                background-color: #f3f3f8;
            }
            .gittree-container h1 {
                font-size: 1.5rem;
            }
            .gittree-container .subtitle {
                font-size: 0.9rem;
                margin-bottom: 2rem;
            }
            .gittree-container .input-wrapper {
                flex-direction: column;
            }
            .gittree-container button#gittree-generateBtn {
                padding: 1rem;
            }
            .gittree-container .options-row {
                flex-direction: column;
                align-items: stretch;
            }
            .gittree-container .advanced-options {
                margin-left: 0;
                margin-top: 1rem;
            }
            .gittree-container .advanced-options-grid {
                grid-template-columns: 1fr;
                gap: 0.5rem;
            }
            .gittree-container .advanced-options-grid label[for="gittree-depthInput"] {
                margin-top: 0.5rem;
            }
            .gittree-container .result-header {
                flex-direction: column;
                align-items: stretch;
                gap: 0.75rem;
            }
            .gittree-container .header-group {
                justify-content: space-around;
            }
            .gittree-container .export-tools button span {
                display: none;
            }
            .gittree-container .export-tools button {
                padding: 0.5rem;
            }
            .gittree-style-options {
                grid-template-columns: 1fr;
            }
        }
.gittree-container footer {
    text-align: center;
    margin-top: 3rem;
    padding-bottom: 1rem;
    color: #6e6e73;
    font-size: 0.875rem;
}
.gittree-container footer a {
    color: #1d1d1f;
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.gittree-container footer a:hover {
    color: #007aff;
    text-decoration: underline;
}
.gittree-container footer .github-icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
}
.gittree-container footer p {
    margin: 0.5rem 0 0;
}
/* 使用说明样式 */
.gittree-instructions {
    margin-top: 1rem;
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    padding: 0.5rem;
}
.gittree-instructions summary {
    cursor: pointer;
    font-weight: 500;
    color: #24292e;
    padding: 0.5rem;
    border-radius: 6px;
    transition: background-color 0.2s;
}
.gittree-instructions summary:hover {
    background-color: #f6f8fa;
}
.gittree-instructions-content {
    padding: 1rem;
    border-top: 1px solid #d2d2d7;
    margin-top: 0.5rem;
    text-align: left;
}
.gittree-instructions-content h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: #24292e;
    font-size: 1rem;
}
.gittree-instructions-content ol, .gittree-instructions-content ul {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}
.gittree-instructions-content li {
    margin-bottom: 0.3rem;
    line-height: 1.5;
}
.gittree-instructions-content .lang-section {
    margin-bottom: 1.5rem;
}
.gittree-instructions-content .lang-section:last-child {
    margin-bottom: 0;
}
.gittree-instructions-content .lang-divider {
    border-top: 1px dashed #d2d2d7;
    margin: 1rem 0;
    padding-top: 1rem;
}
    `);
    function addGitTreeButton() {
        const actionsContainer = document.querySelector('.pagehead-actions');
        if (!actionsContainer) return;
        const gitTreeBtn = document.createElement('button');
        gitTreeBtn.className = 'gittree-btn';
        gitTreeBtn.textContent = 'Generate Tree';
        gitTreeBtn.addEventListener('click', showGitTreeModal);
        actionsContainer.appendChild(gitTreeBtn);
    }
    function showGitTreeModal() {
        const currentRepoUrl = window.location.href;
        const modal = document.createElement('div');
        modal.className = 'gittree-modal';
        const modalContent = document.createElement('div');
        modalContent.className = 'gittree-modal-content';
        const closeBtn = document.createElement('button');
        closeBtn.className = 'gittree-close-btn';
        closeBtn.innerHTML = '×';
        closeBtn.addEventListener('click', () => {
            document.body.removeChild(modal);
        });
        const gitTreeContainer = document.createElement('div');
        gitTreeContainer.className = 'gittree-container';
        gitTreeContainer.innerHTML = `
            <h1>GitHub Repo Tree Generator</h1>
            <p class="subtitle">Generate, filter, and share a clean directory tree for any public GitHub repo.</p>
            <div class="input-wrapper">
              <input type="text" id="gittree-repoUrl" placeholder="e.g., https://github.com/Azad-sl/GitTree" value="${currentRepoUrl}">
              <button id="gittree-generateBtn"><span id="gittree-btn-text">Generate</span></button>
            </div>
            <div class="options-row">
              <div class="lang-toggle" id="gittree-lang-toggle">
                <div class="lang-option active" data-lang="en">EN</div>
                <div class="lang-option" data-lang="zh">中文</div>
              </div>
              <details class="advanced-options">
                <summary>Advanced Options</summary>
                <div class="advanced-options-grid">
                  <label for="gittree-excludeInput">Exclude items (comma-separated, \`*\` supported):</label>
                  <label for="gittree-depthInput">Max Depth:</label>
                  <input type="text" id="gittree-excludeInput" placeholder="e.g., node_modules, dist, *.log">
                  <input type="number" id="gittree-depthInput" min="1" placeholder="∞">
                </div>
              </details>
            </div>
            <div class="result-wrapper">
              <div class="result-header">
                <div class="header-group view-modes">
                  <button id="gittree-view-all" class="active" title="Full View"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4M14 9h7m-7 6h7M4 9h1m-1 6h1"/></svg> <span>All</span></button>
                  <button id="gittree-view-folders" title="Folders Only"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg> <span>Folders</span></button>
                </div>
                <div class="header-group export-tools">
                  <button id="gittree-downloadBatBtn" title="Generate .bat script (Windows)" disabled><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path><line x1="12" y1="11" x2="12" y2="17"></line><line x1="9" y1="14" x2="15" y2="14"></line></svg> <span id="gittree-downloadBatText">.bat</span></button>
                  <button id="gittree-downloadShBtn" title="Generate .sh script (macOS/Linux)" disabled><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg> <span>.sh</span></button>
                  <button id="gittree-copyMdBtn" title="Copy as Markdown" disabled><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.72"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.72-1.72"/></svg> <span id="gittree-copyMdText">Markdown</span></button>
                  <button id="gittree-exportBtn" title="Export as Image" disabled><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg> <span id="gittree-exportText">Export</span></button>
                  <button id="gittree-generateRepoCardBtn" title="Generate Repo Card" disabled><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="9" x2="15" y2="9"></line><line x1="9" y1="13" x2="15" y2="13"></line><line x1="9" y1="17" x2="11" y2="17"></line></svg> <span id="gittree-generateRepoCardText">Card</span></button>
                  <button id="gittree-copyBtn" title="Copy to Clipboard" disabled><svg class="copy-icon" id="gittree-copy-icon-clipboard" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg><svg class="copy-icon" id="gittree-copy-icon-check" style="display:none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"></path></svg> <span id="gittree-copy-text">Copy</span></button>
                </div>
              </div>
              <pre id="gittree-result">Generated tree will be displayed here...</pre>
            </div>
            <div class="gittree-style-selector">
                <label for="gittree-card-style">Choose Card Style:</label>
                <div class="gittree-style-options">
                    <div class="gittree-style-option selected" data-style="macos">
                        <h4>macOS Style</h4>
                        <p>Classic macOS window design with dark theme</p>
                    </div>
                    <div class="gittree-style-option" data-style="modern">
                        <h4>Modern Style</h4>
                        <p>Clean and modern gradient design</p>
                    </div>
                    <div class="gittree-style-option" data-style="github">
                        <h4>GitHub Style</h4>
                        <p>Authentic GitHub repository look</p>
                    </div>
                    <div class="gittree-style-option" data-style="material">
                        <h4>Material Design</h4>
                        <p>Google's Material Design with clean aesthetics</p>
                    </div>
                </div>
            </div>
<footer>
    <p>Open-sourced on <a href="https://github.com/Azad-sl/GitTree" target="_blank" rel="noopener noreferrer"><svg class="github-icon" viewBox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" 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"></path></svg> Azad-sl / GitTree</a></p>
    <details class="gittree-instructions">
        <summary>使用说明 / Instructions</summary>
        <div class="gittree-instructions-content">
            <div class="lang-section">
                <h3>如何使用 GitTree</h3>
                <ol>
                    <li>在输入框中输入 GitHub 仓库的 URL</li>
                    <li>点击"Generate"按钮生成目录树</li>
                    <li>使用"Advanced Options"可以设置排除项和最大深度</li>
                    <li>使用"All"和"Folders"按钮切换查看模式</li>
                    <li>使用顶部按钮可以复制、导出或生成仓库卡片</li>
                </ol>
                <h3>功能说明</h3>
                <ul>
                    <li><strong>.bat / .sh</strong>: 生成创建目录结构的脚本文件</li>
                    <li><strong>Markdown</strong>: 复制为 Markdown 格式</li>
                    <li><strong>Export</strong>: 导出目录树为图片</li>
                    <li><strong>Card</strong>: 生成并导出仓库信息卡片,支持多种主题样式</li>
                    <li><strong>Copy</strong>: 复制目录树到剪贴板</li>
                </ul>
            </div>
            <div class="lang-divider"></div>
            <div class="lang-section">
                <h3>How to Use GitTree</h3>
                <ol>
                    <li>Enter the GitHub repository URL in the input box</li>
                    <li>Click the "Generate" button to generate the directory tree</li>
                    <li>Use "Advanced Options" to set exclusions and maximum depth</li>
                    <li>Use "All" and "Folders" buttons to switch view modes</li>
                    <li>Use the top buttons to copy, export, or generate repository cards</li>
                </ol>
                <h3>Feature Description</h3>
                <ul>
                    <li><strong>.bat / .sh</strong>: Generate script files to create directory structure</li>
                    <li><strong>Markdown</strong>: Copy as Markdown format</li>
                    <li><strong>Export</strong>: Export directory tree as an image</li>
                    <li><strong>Card</strong>: Generate and export repository information card, support multiple theme styles</li>
                    <li><strong>Copy</strong>: Copy directory tree to clipboard</li>
                </ul>
            </div>
        </div>
    </details>
</footer>
        `;
        const imageCardContainer = document.createElement('div');
        imageCardContainer.id = 'gittree-image-card-container';
        imageCardContainer.innerHTML = `
            <div class="macos-window">
                <div class="title-bar">
                    <div class="traffic-lights">
                        <div class="light red"></div>
                        <div class="light yellow"></div>
                        <div class="light green"></div>
                    </div>
                    <div class="title-text"></div>
                </div>
                <pre class="card-content"></pre>
            </div>
        `;
        const repoCardContainer = document.createElement('div');
        repoCardContainer.id = 'gittree-repo-card-container';
        repoCardContainer.innerHTML = `
            <div class="card-header">
                <h2 class="repo-title">
                    <svg class="github-icon" viewBox="0 0 16 16" version="1.1" aria-hidden="true">
                        <path fill-rule="evenodd" 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"></path>
                    </svg>
                    <span class="repo-name">Repository Name</span>
                </h2>
                <p class="repo-description">Repository description will be displayed here.</p>
            </div>
            <div class="card-body">
                <div class="repo-info">
                    <div class="repo-stats">
                        <div class="stat-item">
                            <svg viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
                                <path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"></path>
                            </svg>
                            <span class="stars-count">0</span>
                        </div>
                        <div class="stat-item">
                            <svg viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
                                <path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"></path>
                            </svg>
                            <span class="forks-count">0</span>
                        </div>
                    </div>
                    <div class="repo-languages">
                        <h3>Primary Languages</h3>
                        <div class="language-list">
                            <div class="language-item">
                                <span class="language-color" style="background-color: #3572A5;"></span>
                                <span class="language-name">Python</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="qr-code" id="gittree-qrcode"></div>
            </div>
            <div class="card-footer">
                <div class="generated-at">Generated on <span class="date"></span></div>
                <div class="watermark">
                    <svg viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
                        <path fill-rule="evenodd" 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"></path>
                    </svg>
                    <span>GitTree</span>
                </div>
            </div>
        `;
        modalContent.appendChild(closeBtn);
        modalContent.appendChild(gitTreeContainer);
        modalContent.appendChild(imageCardContainer);
        modalContent.appendChild(repoCardContainer);
        modal.appendChild(modalContent);
        document.body.appendChild(modal);
        modal.addEventListener('click', (e) => {
            if (e.target === modal) {
                document.body.removeChild(modal);
            }
        });
        initGitTreeApp();
    }
    function initGitTreeApp() {
        const translations = {
            en: {
                pageTitle: "GitTree - GitHub Repo Tree Generator",
                mainTitle: "GitHub Repo Tree Generator",
                subtitle: "Generate, filter, and share a clean directory tree for any public GitHub repo.",
                repoUrl: "e.g., https://github.com/Azad-sl/GitTree",
                generate: "Generate",
                advancedOptions: "Advanced Options",
                excludeLabel: "Exclude items (comma-separated, `*` supported):",
                depthLabel: "Max Depth:",
                excludeInput: "e.g., node_modules, dist, *.log",
                resultPlaceholder: "Generated tree will be displayed here...",
                viewAll: "Full View",
                viewFolders: "Folders Only",
                downloadBat: "Generate .bat script (Windows)",
                downloadSh: "Generate .sh script (macOS/Linux)",
                copyMd: "Copy as Markdown",
                export: "Export as Image",
                generateRepoCard: "Generate Repo Card",
                copy: "Copy to Clipboard",
                exportBtn: "Export",
                cardBtn: "Card",
                copyBtn: "Copy",
                copied: "Copied!",
                exporting: "Exporting...",
                generatingCard: "Generating Card...",
                errorPrefix: "❌ Error: ",
                enterURL: "Please enter a GitHub repository URL.",
                invalidURL: "Invalid GitHub repository URL. Please check the format.",
                repoNotFound: "Repository or branch not found. Please check the URL.",
                apiLimit: "API rate limit exceeded. Please wait a moment and try again.",
                fetchFailed: "Failed to fetch tree data: ",
                fetchRepoInfoFailed: "Failed to fetch repository info: ",
                fetchLanguagesFailed: "Failed to fetch repository languages: ",
                noContent: "No items to display. Please check your filter conditions.",
                copyFailed: "Copy failed. Your browser might not support it or permission denied.",
                exportFailed: "Exporting image failed. Check console for details.",
                generateCardFailed: "Generating card failed. Please close the window and try again later or check console for details.",
                noBatContent: "No content to create.",
                cardStyleLabel: "Choose Card Style:",
                macosStyle: "macOS Style",
                macosStyleDesc: "Classic macOS window design with dark theme",
                modernStyle: "Modern Style",
                modernStyleDesc: "Clean and modern gradient design",
                githubStyle: "GitHub Style",
                githubStyleDesc: "Authentic GitHub repository look",
                materialStyle: "Material Design",
                materialStyleDesc: "Google's Material Design with clean aesthetics"
            },
            zh: {
                pageTitle: "GitTree - GitHub仓库树生成器",
                mainTitle: "GitHub仓库树生成器",
                subtitle: "为任何公共GitHub仓库生成、过滤和分享清晰的目录树。",
                repoUrl: "例如:https://github.com/Azad-sl/GitTree",
                generate: "生成",
                advancedOptions: "高级选项",
                excludeLabel: "排除项目(逗号分隔,支持`*`):",
                depthLabel: "最大深度:",
                excludeInput: "例如:node_modules, dist, *.log",
                resultPlaceholder: "生成的目录树将显示在这里...",
                viewAll: "完整",
                viewFolders: "仅文件夹",
                downloadBat: ".bat脚本(Windows)",
                downloadSh: ".sh脚本(macOS/Linux)",
                copyMd: "md格式",
                export: "导出为图片",
                generateRepoCard: "生成仓库卡片",
                copy: "复制到剪贴板",
                exportBtn: "导出",
                cardBtn: "项目卡片",
                copyBtn: "复制",
                copied: "已复制!",
                exporting: "导出中...",
                generatingCard: "生成卡片中...",
                errorPrefix: "❌ 错误: ",
                enterURL: "请输入GitHub仓库URL。",
                invalidURL: "无效的GitHub仓库URL。请检查格式。",
                repoNotFound: "仓库或分支未找到。请检查URL。",
                apiLimit: "API速率限制已超过。请稍等片刻再试。",
                fetchFailed: "获取树数据失败: ",
                fetchRepoInfoFailed: "获取仓库信息失败: ",
                fetchLanguagesFailed: "获取仓库语言失败: ",
                noContent: "没有可显示的项目。请检查您的过滤条件。",
                copyFailed: "复制失败。您的浏览器可能不支持或权限被拒绝。",
                exportFailed: "导出图片失败。请检查控制台获取详细信息。",
                generateCardFailed: "生成卡片失败。请关闭窗口后重试,或检查控制台获取详细信息。",
                noBatContent: "没有内容可创建。",
                cardStyleLabel: "选择分享卡片样式:",
                macosStyle: "macOS风格",
                macosStyleDesc: "经典的macOS窗口设计,采用深色主题",
                modernStyle: "现代风格",
                modernStyleDesc: "干净现代的渐变设计",
                githubStyle: "GitHub风格",
                githubStyleDesc: "真实的GitHub仓库外观",
                materialStyle: "Material设计",
                materialStyleDesc: "谷歌Material设计,具有简洁的美学"
            }
        };
        let currentLang = 'en';
        const resultDiv = document.getElementById('gittree-result');
        const repoUrlInput = document.getElementById('gittree-repoUrl');
        const generateBtn = document.getElementById('gittree-generateBtn');
        const excludeInput = document.getElementById('gittree-excludeInput');
        const depthInput = document.getElementById('gittree-depthInput');
        const copyBtn = document.getElementById('gittree-copyBtn');
        const copyMdBtn = document.getElementById('gittree-copyMdBtn');
        const exportBtn = document.getElementById('gittree-exportBtn');
        const generateRepoCardBtn = document.getElementById('gittree-generateRepoCardBtn');
        const downloadBatBtn = document.getElementById('gittree-downloadBatBtn');
        const downloadShBtn = document.getElementById('gittree-downloadShBtn');
        const viewAllBtn = document.getElementById('gittree-view-all');
        const viewFoldersBtn = document.getElementById('gittree-view-folders');
        const btnText = document.getElementById('gittree-btn-text');
        const copyText = document.getElementById('gittree-copy-text');
        const copyMdText = document.getElementById('gittree-copyMdText');
        const exportText = document.getElementById('gittree-exportText');
        const generateRepoCardText = document.getElementById('gittree-generateRepoCardText');
        const iconClipboard = document.getElementById('gittree-copy-icon-clipboard');
        const iconCheck = document.getElementById('gittree-copy-icon-check');
        const langToggle = document.getElementById('gittree-lang-toggle');
        let fullTreeData = [];
        let currentRepoInfo = null;
        let currentRepoDetails = null;
        let currentRepoLanguages = null;
        let hasResultForCopy = false;
        let currentViewMode = "all";
        let selectedCardStyle = "macos";
        function updateLanguage(lang) {
            currentLang = lang;
            document.querySelector('.gittree-container h1').textContent = translations[lang].mainTitle;
            document.querySelector('.gittree-container .subtitle').textContent = translations[lang].subtitle;
            repoUrlInput.placeholder = translations[lang].repoUrl;
            btnText.textContent = translations[lang].generate;
            document.querySelector('.advanced-options summary').textContent = translations[lang].advancedOptions;
            document.querySelector('label[for="gittree-excludeInput"]').textContent = translations[lang].excludeLabel;
            document.querySelector('label[for="gittree-depthInput"]').textContent = translations[lang].depthLabel;
            excludeInput.placeholder = translations[lang].excludeInput;
            resultDiv.textContent = translations[lang].resultPlaceholder;
            viewAllBtn.querySelector('span').textContent = translations[lang].viewAll;
            viewFoldersBtn.querySelector('span').textContent = translations[lang].viewFolders;
            copyText.textContent = translations[lang].copyBtn;
            copyMdText.textContent = translations[lang].copyMd;
            exportText.textContent = translations[lang].exportBtn;
            generateRepoCardText.textContent = translations[lang].cardBtn;
            document.querySelector('.gittree-style-selector label').textContent = translations[lang].cardStyleLabel;
            const styleOptions = document.querySelectorAll('.gittree-style-option');
            styleOptions[0].querySelector('h4').textContent = translations[lang].macosStyle;
            styleOptions[0].querySelector('p').textContent = translations[lang].macosStyleDesc;
            styleOptions[1].querySelector('h4').textContent = translations[lang].modernStyle;
            styleOptions[1].querySelector('p').textContent = translations[lang].modernStyleDesc;
            styleOptions[2].querySelector('h4').textContent = translations[lang].githubStyle;
            styleOptions[2].querySelector('p').textContent = translations[lang].githubStyleDesc;
            styleOptions[3].querySelector('h4').textContent = translations[lang].materialStyle;
            styleOptions[3].querySelector('p').textContent = translations[lang].materialStyleDesc;
        }
        function setShareButtonsState(enabled) {
            hasResultForCopy = enabled;
            [copyBtn, exportBtn, copyMdBtn, downloadBatBtn, downloadShBtn, generateRepoCardBtn].forEach(btn => btn.disabled = !enabled);
        }
        function generateShContent() {
            if (!currentRepoInfo || fullTreeData.length === 0) return '';
            const rootDir = currentRepoInfo.repo;
            const filteredItems = filterTree(fullTreeData, excludeInput.value.split(',').map(p => p.trim()).filter(Boolean), parseInt(depthInput.value, 10) || Infinity, currentViewMode);
            const commands = [
                '#!/bin/bash',
                '# Generated by GitTree',
                '',
                `echo "Creating directory structure for '${rootDir}'..."`,
                `mkdir -p "${rootDir}"`,
                `cd "${rootDir}"`,
                ''
            ];
            const dirsToCreate = new Set();
            const filesToCreate = new Set();
            for (const item of filteredItems) {
                if (item.type === 'tree') {
                    dirsToCreate.add(item.path);
                } else if (item.type === 'blob') {
                    const lastSlash = item.path.lastIndexOf('/');
                    if (lastSlash > -1) {
                       dirsToCreate.add(item.path.substring(0, lastSlash));
                    }
                    filesToCreate.add(item.path);
                }
            }
            if (dirsToCreate.size > 0) {
                commands.push('# Creating directories...');
                dirsToCreate.forEach(dir => commands.push(`mkdir -p "${dir}"`));
                commands.push('');
            }
            if (filesToCreate.size > 0) {
                commands.push('# Creating files...');
                filesToCreate.forEach(file => commands.push(`touch "${file}"`));
                commands.push('');
            }
            commands.push(`echo "Directory structure for '${rootDir}' created successfully!"`);
            return commands.join('\n');
        }
        function generateBatContent() {
            if (!currentRepoInfo || fullTreeData.length === 0) return '';
            const rootDir = currentRepoInfo.repo;
            const filteredItems = filterTree(fullTreeData, excludeInput.value.split(',').map(p => p.trim()).filter(Boolean), parseInt(depthInput.value, 10) || Infinity, currentViewMode);
            const commands = ['@echo off', 'chcp 65001 > nul', `echo Creating directory structure for ${rootDir}...`, `if not exist "${rootDir}" ( md "${rootDir}" )`, `cd "${rootDir}"`, ''];
            filteredItems.sort((a,b) => a.path.localeCompare(b.path));
            for (const item of filteredItems) {
                const windowsPath = item.path.replace(/\//g, '\\');
                if (item.type === 'tree') {
                    commands.push(`if not exist "${windowsPath}" ( md "${windowsPath}" )`);
                } else if (item.type === 'blob') {
                    const lastBackslash = windowsPath.lastIndexOf('\\');
                    if (lastBackslash > -1) {
                        const dir = windowsPath.substring(0, lastBackslash);
                        commands.push(`if not exist "${dir}" ( md "${dir}" )`);
                    }
                    commands.push(`if not exist "${windowsPath}" ( type NUL > "${windowsPath}" )`);
                }
            }
            commands.push('', 'echo.', `echo Directory structure for "${rootDir}" created successfully!`, 'pause');
            return commands.join('\r\n');
        }
        function parseGitHubUrl(url) {
            const match = /https?:\/\/github\.com\/([^\/]+)\/([^\/\s]+)/.exec(url);
            return match ? { owner: match[1], repo: match[2].replace(".git", ""), branch: "main" } : null;
        }
        function showError(messageKey) {
            let message = translations[currentLang][messageKey] || messageKey;
            if (messageKey.startsWith('fetchFailed') || messageKey.startsWith('fetchRepoInfoFailed') || messageKey.startsWith('fetchLanguagesFailed')) {
                let prefix = '';
                if (messageKey.startsWith('fetchFailed')) {
                    prefix = translations[currentLang].fetchFailed;
                } else if (messageKey.startsWith('fetchRepoInfoFailed')) {
                    prefix = translations[currentLang].fetchRepoInfoFailed;
                } else if (messageKey.startsWith('fetchLanguagesFailed')) {
                    prefix = translations[currentLang].fetchLanguagesFailed;
                }
                message = prefix + messageKey.replace(/^(fetchFailed|fetchRepoInfoFailed|fetchLanguagesFailed)/, '');
            }
            resultDiv.textContent = translations[currentLang].errorPrefix + message;
            resultDiv.className = "error";
        }
        function showSuccess(text) {
            resultDiv.textContent = text;
            resultDiv.className = "";
        }
        function setLoading(isLoading) {
            generateBtn.disabled = isLoading;
            if (isLoading) {
                btnText.textContent = "";
                const spinner = document.createElement("span");
                spinner.className = "spinner";
                generateBtn.prepend(spinner);
            } else {
                btnText.textContent = translations[currentLang].generate;
                const spinner = generateBtn.querySelector(".spinner");
                if (spinner) spinner.remove();
            }
        }
        async function fetchTreeData(owner, repo, branch) {
            let response = await fetch(`https://api.github.com/repos/${owner}/${repo}/git/trees/${branch}?recursive=1`);
            if (response.status === 404) {
                console.log("Branch 'main' not found, trying 'master'");
                response = await fetch(`https://api.github.com/repos/${owner}/${repo}/git/trees/master?recursive=1`);
            }
            if (!response.ok) {
                if (response.status === 404) throw new Error('repoNotFound');
                if (response.status === 403) throw new Error('apiLimit');
                throw new Error('fetchFailed' + response.statusText);
            }
            const data = await response.json();
            if (data.truncated) {
                alert("Warning: The file list is too large and has been truncated by the GitHub API. The generated tree may be incomplete.");
            }
            return data.tree;
        }
        async function fetchRepoDetails(owner, repo) {
            const response = await fetch(`https://api.github.com/repos/${owner}/${repo}`);
            if (!response.ok) {
                if (response.status === 404) throw new Error('repoNotFound');
                if (response.status === 403) throw new Error('apiLimit');
                throw new Error('fetchRepoInfoFailed' + response.statusText);
            }
            return response.json();
        }
        async function fetchRepoLanguages(owner, repo) {
            const response = await fetch(`https://api.github.com/repos/${owner}/${repo}/languages`);
            if (!response.ok) {
                if (response.status === 404) throw new Error('repoNotFound');
                if (response.status === 403) throw new Error('apiLimit');
                throw new Error('fetchLanguagesFailed' + response.statusText);
            }
            return response.json();
        }
        function filterTree(tree, excludePatterns, maxDepth, viewMode) {
            return tree.filter(item => {
                const depth = item.path.split('/').length;
                if (depth > maxDepth) return false;
                const isExcluded = excludePatterns.some(pattern => {
                    if (pattern.startsWith('*.')) {
                        return item.path.endsWith(pattern.substring(1));
                    }
                    return item.path.split('/').includes(pattern);
                });
                if (isExcluded) return false;
                if (viewMode === 'folders' && item.type !== 'tree') return false;
                return true;
            });
        }
        function buildTreeString(repoName, tree, maxDepth) {
            if (!tree || tree.length === 0) return translations[currentLang].noContent;
            const root = {};
            tree.forEach(item => {
                let path = item.path.split('/');
                let currentLevel = root;
                for (let i = 0; i < path.length; i++) {
                    let part = path[i];
                    if (!currentLevel[part]) {
                        currentLevel[part] = (i === path.length - 1 && item.type === 'blob') ? null : {};
                    }
                    currentLevel = currentLevel[part];
                }
            });
            let treeString = `${repoName}/\n`;
            const build = (node, prefix = "", level = 1) => {
                const entries = Object.keys(node).sort((a, b) => {
                    const aIsDir = node[a] !== null;
                    const bIsDir = node[b] !== null;
                    if (aIsDir !== bIsDir) return aIsDir ? -1 : 1;
                    return a.localeCompare(b);
                });
                entries.forEach((entry, index) => {
                    const isLast = index === entries.length - 1;
                    const connector = isLast ? "└── " : "├── ";
                    treeString += `${prefix}${connector}${entry}\n`;
                    const child = node[entry];
                    if (child !== null && level < maxDepth) {
                        const newPrefix = prefix + (isLast ? "    " : "│   ");
                        build(child, newPrefix, level + 1);
                    }
                });
            };
            build(root);
            return treeString.trim();
        }
        function renderTree() {
            if (!currentRepoInfo) return;
            const excludePatterns = excludeInput.value.split(',').map(p => p.trim()).filter(Boolean);
            const maxDepth = parseInt(depthInput.value, 10) || Infinity;
            const filteredTree = filterTree(fullTreeData, excludePatterns, maxDepth, currentViewMode);
            const treeString = buildTreeString(currentRepoInfo.repo, filteredTree, maxDepth);
            showSuccess(treeString);
            if (filteredTree.length > 0) {
                setShareButtonsState(true);
            } else {
                setShareButtonsState(false);
            }
        }
        function setViewMode(mode) {
            if (currentViewMode === mode) return;
            currentViewMode = mode;
            viewAllBtn.classList.toggle("active", mode === "all");
            viewFoldersBtn.classList.toggle("active", mode === "folders");
            if (hasResultForCopy) {
                renderTree();
            }
        }
        async function handleGenerationWrapper() {
            setShareButtonsState(false);
            const url = repoUrlInput.value.trim();
            if (!url) {
                showError('enterURL');
                return;
            }
            currentRepoInfo = parseGitHubUrl(url);
            if (!currentRepoInfo) {
                showError('invalidURL');
                return;
            }
            setLoading(true);
            try {
                const rawTree = await fetchTreeData(currentRepoInfo.owner, currentRepoInfo.repo, currentRepoInfo.branch);
                fullTreeData = rawTree;
                try {
                    currentRepoDetails = await fetchRepoDetails(currentRepoInfo.owner, currentRepoInfo.repo);
                } catch (error) {
                    console.error("Failed to fetch repo details:", error);
                    currentRepoDetails = null;
                }
                try {
                    currentRepoLanguages = await fetchRepoLanguages(currentRepoInfo.owner, currentRepoInfo.repo);
                } catch (error) {
                    console.error("Failed to fetch repo languages:", error);
                    currentRepoLanguages = null;
                }
                renderTree();
            } catch (error) {
                showError(error.message);
                fullTreeData = [];
                currentRepoInfo = null;
                currentRepoDetails = null;
                currentRepoLanguages = null;
            } finally {
                setLoading(false);
            }
        }
        // 生成二维码
        function generateQRCode(container, url) {
            container.innerHTML = '';
            new QRCode(container, {
                text: url,
                width: 140,
                height: 140,
                colorDark: "#000000",
                colorLight: "#ffffff",
                correctLevel: QRCode.CorrectLevel.H
            });
        }
        // 生成并导出GitHub项目分享卡片
        async function generateAndExportRepoCard() {
            if (!currentRepoInfo || !currentRepoDetails) {
                alert("Repository information not available. Please generate the tree first.");
                return;
            }
            generateRepoCardText.textContent = translations[currentLang].generatingCard;
            generateRepoCardBtn.disabled = true;
            try {
                const repoCardContainer = document.getElementById("gittree-repo-card-container");
                const repoName = repoCardContainer.querySelector('.repo-name');
                const repoDescription = repoCardContainer.querySelector('.repo-description');
                const starsCount = repoCardContainer.querySelector('.stars-count');
                const forksCount = repoCardContainer.querySelector('.forks-count');
                const languageList = repoCardContainer.querySelector('.language-list');
                const qrCodeContainer = document.getElementById('gittree-qrcode');
                const generatedDate = repoCardContainer.querySelector('.date');
                repoCardContainer.className = '';
                repoCardContainer.classList.add(selectedCardStyle + '-style');
                repoName.textContent = `${currentRepoDetails.owner.login}/${currentRepoDetails.name}`;
                repoDescription.textContent = currentRepoDetails.description || "No description available.";
                if (selectedCardStyle === 'modern') {
                    const statItems = repoCardContainer.querySelectorAll('.stat-item');
                    statItems[0].innerHTML = `
                        <svg viewBox="0 0 16 16" version="1.1" width="24" height="24" aria-hidden="true">
                            <path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"></path>
                        </svg>
                        <span class="stat-value">${currentRepoDetails.stargazers_count}</span>
                        <span class="stat-label">${currentLang === 'zh' ? '星标' : 'Stars'}</span>
                    `;
                    statItems[1].innerHTML = `
                        <svg viewBox="0 0 16 16" version="1.1" width="24" height="24" aria-hidden="true">
                            <path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"></path>
                        </svg>
                        <span class="stat-value">${currentRepoDetails.forks_count}</span>
                        <span class="stat-label">${currentLang === 'zh' ? '分支' : 'Forks'}</span>
                    `;
                } else {
                    starsCount.textContent = currentRepoDetails.stargazers_count;
                    forksCount.textContent = currentRepoDetails.forks_count;
                }
                languageList.innerHTML = '';
                if (currentRepoLanguages && Object.keys(currentRepoLanguages).length > 0) {
                    const languagesArray = Object.entries(currentRepoLanguages)
                        .sort((a, b) => b[1] - a[1])
                        .slice(0, 10); // 只取前10种语言
                    // 常见编程语言的颜色映射
                    const languageColors = {
                        'JavaScript': '#f1e05a',
                        'TypeScript': '#2b7489',
                        'Python': '#3572A5',
                        'Java': '#b07219',
                        'C++': '#f34b7d',
                        'C': '#555555',
                        'Go': '#00ADD8',
                        'Rust': '#dea584',
                        'PHP': '#4F5D95',
                        'Ruby': '#701516',
                        'Swift': '#ffac45',
                        'Kotlin': '#F18E33',
                        'HTML': '#e34c26',
                        'CSS': '#563d7c',
                        'Shell': '#89e051',
                        'Vue': '#2c3e50',
                        'Dart': '#00B4AB',
                        'Objective-C': '#438eff',
                        'Scala': '#c22d40',
                        'C#': '#239120',
                        'Perl': '#0298c3',
                        'Elixir': '#6e4a7e',
                        'Haskell': '#5e5086',
                        'Lua': '#000080',
                        'Clojure': '#db5855',
                        'CoffeeScript': '#244776',
                        'PowerShell': '#012456',
                        'Groovy': '#e69f56',
                        'Julia': '#a270ba',
                        'Crystal': '#000100',
                        'R': '#198ce7',
                        'MATLAB': '#e16737',
                        'Dockerfile': '#384d54',
                        'Makefile': '#427819',
                        'Assembly': '#6E4C13',
                        'Jupyter Notebook': '#DA5B0B'
                    };
                    languagesArray.forEach(([lang, bytes]) => {
                        const langItem = document.createElement('div');
                        langItem.className = 'language-item';
                        const langColor = document.createElement('span');
                        langColor.className = 'language-color';
                        langColor.style.backgroundColor = languageColors[lang] || '#cccccc';
                        const langName = document.createElement('span');
                        langName.className = 'language-name';
                        langName.textContent = lang;
                        langItem.appendChild(langColor);
                        langItem.appendChild(langName);
                        languageList.appendChild(langItem);
                    });
                } else {
                    const langItem = document.createElement('div');
                    langItem.className = 'language-item';
                    langItem.innerHTML = `<span class="language-name">${currentLang === 'zh' ? '未指定' : 'Not specified'}</span>`;
                    languageList.appendChild(langItem);
                }
                // 生成二维码
                generateQRCode(qrCodeContainer, currentRepoDetails.html_url);
                // 更新生成日期
                const now = new Date();
                generatedDate.textContent = now.toLocaleDateString();
                // 导出为图片
                const canvas = await html2canvas(repoCardContainer, {
                    useCORS: true,
                    backgroundColor: null,
                    scale: 2
                });
                const link = document.createElement("a");
                link.download = `${currentRepoDetails.name}-repo-card.png`;
                link.href = canvas.toDataURL("image/png");
                link.click();
            } catch (error) {
                console.error("Generating card failed:", error);
                alert(translations[currentLang].generateCardFailed);
            } finally {
                generateRepoCardText.textContent = translations[currentLang].cardBtn;
                generateRepoCardBtn.disabled = false;
            }
        }
        function initStyleSelector() {
            const styleOptions = document.querySelectorAll('.gittree-style-option');
            styleOptions.forEach(option => {
                option.addEventListener('click', () => {
                    styleOptions.forEach(opt => opt.classList.remove('selected'));
                    option.classList.add('selected');
                    selectedCardStyle = option.getAttribute('data-style');
                });
            });
        }
        function initLangToggle() {
            const langOptions = langToggle.querySelectorAll('.lang-option');
            langOptions.forEach(option => {
                option.addEventListener('click', () => {
                    langOptions.forEach(opt => opt.classList.remove('active'));
                    option.classList.add('active');
                    updateLanguage(option.getAttribute('data-lang'));
                });
            });
        }
        generateBtn.addEventListener("click", handleGenerationWrapper);
        repoUrlInput.addEventListener("keydown", e => { if (e.key === "Enter") handleGenerationWrapper(); });
        viewAllBtn.addEventListener("click", () => setViewMode("all"));
        viewFoldersBtn.addEventListener("click", () => setViewMode("folders"));
        copyBtn.addEventListener("click", () => {
            if (!hasResultForCopy) return;
            GM_setClipboard(resultDiv.innerText).then(() => {
                copyText.textContent = translations[currentLang].copied;
                iconClipboard.style.display = "none";
                iconCheck.style.display = "inline-block";
                setTimeout(() => {
                    copyText.textContent = translations[currentLang].copyBtn;
                    iconClipboard.style.display = "inline-block";
                    iconCheck.style.display = "none";
                }, 2000);
            }).catch(e => {
                console.error("Copy failed:", e);
                alert(translations[currentLang].copyFailed);
            });
        });
        copyMdBtn.addEventListener('click', () => {
            if (!hasResultForCopy) return;
            const content = "```\n" + resultDiv.innerText + "\n```";
            GM_setClipboard(content).then(() => {
                const originalText = copyMdText.textContent;
                copyMdText.textContent = translations[currentLang].copied;
                setTimeout(() => {
                    copyMdText.textContent = originalText;
                }, 2000);
            }).catch(e => {
                console.error("Copy Markdown failed:", e);
                alert(translations[currentLang].copyFailed);
            });
        });
        exportBtn.addEventListener('click', async () => {
            if (!hasResultForCopy) return;
            exportText.textContent = translations[currentLang].exporting;
            exportBtn.disabled = true;
            const imageCardContainer = document.getElementById("gittree-image-card-container");
            const titleText = imageCardContainer.querySelector(".title-text");
            const cardContent = imageCardContainer.querySelector(".card-content");
            try {
                cardContent.style.maxHeight = "none";
                titleText.textContent = `${currentRepoInfo.owner}/${currentRepoInfo.repo}`;
                cardContent.textContent = resultDiv.textContent;
                const canvas = await html2canvas(imageCardContainer, {
                    useCORS: true,
                    backgroundColor: null
                });
                const link = document.createElement("a");
                link.download = `${currentRepoInfo.repo}-tree.png`;
                link.href = canvas.toDataURL("image/png");
                link.click();
            } catch (error) {
                console.error("Exporting image failed:", error);
                alert(translations[currentLang].exportFailed);
            } finally {
                cardContent.style.maxHeight = "";
                exportText.textContent = translations[currentLang].exportBtn;
                exportBtn.disabled = false;
            }
        });
        generateRepoCardBtn.addEventListener('click', generateAndExportRepoCard);
        downloadBatBtn.addEventListener('click', () => {
            if (!hasResultForCopy || !currentRepoInfo) return;
            const content = generateBatContent();
            if (!content) {
                alert(translations[currentLang].noBatContent);
                return;
            }
            const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = `create_${currentRepoInfo.repo}_structure.bat`;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            URL.revokeObjectURL(url);
        });
        downloadShBtn.addEventListener('click', () => {
            if (!hasResultForCopy || !currentRepoInfo) return;
            const content = generateShContent();
            if (!content) {
                alert(translations[currentLang].noBatContent);
                return;
            }
            const blob = new Blob([content], { type: 'application/x-shellscript' });
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = `create_${currentRepoInfo.repo}_structure.sh`;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            URL.revokeObjectURL(url);
        });
        initStyleSelector();
        initLangToggle();
    }
    window.addEventListener('load', () => {
        addGitTreeButton();
    });
})();