open-multiple-urls/options.html at main · ahkjxy/open-multiple-urls · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html class="dark:bg-gray-800">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title data-i18n="settings">设置</title>
    <link href="./dist/output.css" rel="stylesheet">
    <style>
        .section-content:not(.active) {
            display: none;
        }
        .nav-item.active {
            background-color: rgb(243 244 246);
        }
        .dark .nav-item.active {
            background-color: rgb(55 65 81);
        }
    </style>
</head>
<body class="bg-gray-100 dark:bg-gray-800 min-h-screen transition-colors duration-200">
    <div class="container max-w-4xl mx-auto p-6 flex gap-6">
        <!-- 左侧导航栏 -->
        <div class="w-48 bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md border border-gray-200 dark:border-gray-600 h-fit sticky top-6">
            <h2 class="text-lg font-bold text-gray-700 dark:text-gray-200 mb-4" data-i18n="settings">设置</h2>
            <nav class="space-y-1">
                <button data-section="general" class="w-full text-left px-3 py-2 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors nav-item active font-medium" data-i18n="generalSettings">常规设置</button>
                <button data-section="appearance" class="w-full text-left px-3 py-2 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors nav-item font-medium" data-i18n="appearanceSettings">外观设置</button>

                <button data-section="url" class="w-full text-left px-3 py-2 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors nav-item font-medium" data-i18n="urlSettings">URL设置</button>
                <button data-section="advanced" class="w-full text-left px-3 py-2 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors nav-item font-medium" data-i18n="advancedSettings">高级设置</button>

                <button data-section="game2024" class="w-full text-left px-3 py-2 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors nav-item font-medium" data-i18n="game2024">2024 Game</button>
                <button data-section="about" class="w-full text-left px-3 py-2 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors nav-item font-medium" data-i18n="about">关于</button>
            </nav>
        </div>

        <!-- 右侧内容区 -->
        <div class="flex-1 space-y-4">
            <!-- 常规设置 -->
            <section id="general" class="section-content active bg-white dark:bg-gray-700 rounded-lg p-5 shadow-md border border-gray-200 dark:border-gray-600">
                <h3 class="text-lg font-bold text-gray-700 dark:text-gray-200 mb-4" data-i18n="generalSettings">常规设置</h3>
                <div class="space-y-4">
                    <!-- 语言设置 -->
                    <div class="flex items-center justify-between">
                        <label class="text-sm font-medium text-gray-600 dark:text-gray-300 w-1/2" data-i18n="language">语言</label>
                        <select id="languageSelect" class="w-32 rounded-lg border border-gray-200 dark:border-gray-600 py-1.5 px-3 text-sm text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500">
                            <option value="zh" data-i18n="languageZh">中文</option>
                            <option value="en" data-i18n="languageEn">English</option>
                        </select>
                    </div>
                    <!-- 主题设置 -->
                    <div class="flex items-center justify-between">
                        <label class="text-sm font-medium text-gray-600 dark:text-gray-300 w-1/2" data-i18n="theme">主题</label>
                        <select id="themeSelect" class="w-32 rounded-lg border border-gray-200 dark:border-gray-600 py-1.5 px-3 text-sm text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500">
                            <option value="light" data-i18n="themeLight">浅色</option>
                            <option value="dark" data-i18n="themeDark">深色</option>
                            <option value="system" data-i18n="themeSystem">跟随系统</option>
                        </select>
                    </div>
                </div>
            </section>

            <!-- 外观设置 -->
            <section id="appearance" class="section-content bg-white dark:bg-gray-700 rounded-lg p-5 shadow-md border border-gray-200 dark:border-gray-600">
                <h3 class="text-lg font-bold text-gray-700 dark:text-gray-200 mb-4" data-i18n="appearanceSettings">外观设置</h3>
                <div class="space-y-4">
                    <div class="flex items-center space-x-2">
                        <input type="checkbox" id="showUrlCount" class="rounded text-indigo-600 border-gray-300 dark:border-gray-600 focus:ring-indigo-500/50">
                        <label for="showUrlCount" class="text-sm text-gray-600 dark:text-gray-300" data-i18n="showUrlCount">显示URL计数</label>
                    </div>
                    <div class="flex items-center space-x-2">
                        <input type="checkbox" id="showProgressBar" class="rounded text-indigo-600 border-gray-300 dark:border-gray-600 focus:ring-indigo-500/50">
                        <label for="showProgressBar" class="text-sm text-gray-600 dark:text-gray-300" data-i18n="showProgressBar">显示进度条</label>
                    </div>
                </div>
            </section>

            <!-- 浮动工具栏设置 -->


            <!-- URL设置 -->
            <section id="url" class="section-content bg-white dark:bg-gray-700 rounded-lg p-5 shadow-md border border-gray-200 dark:border-gray-600">
                <h3 class="text-lg font-bold text-gray-700 dark:text-gray-200 mb-4" data-i18n="urlSettings">URL设置</h3>
                <div class="space-y-4">
                    <div class="flex items-center justify-between">
                        <label class="text-sm font-medium text-gray-600 dark:text-gray-300 w-1/2" data-i18n="defaultMaxUrls">默认最大URL数量</label>
                        <input type="number" id="defaultMaxUrls" min="1" max="100" value="20" class="w-32 rounded-lg border border-gray-200 dark:border-gray-600 py-1.5 px-3 text-sm text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500">
                    </div>
                    <div class="flex items-center space-x-2">
                        <input type="checkbox" id="defaultValidateUrls" class="rounded text-indigo-600 border-gray-300 dark:border-gray-600 focus:ring-indigo-500/50">
                        <label for="defaultValidateUrls" class="text-sm text-gray-600 dark:text-gray-300" data-i18n="defaultValidateUrls">默认验证URL</label>
                    </div>
                    <div class="flex items-center space-x-2">
                        <input type="checkbox" id="defaultAutoProtocol" class="rounded text-indigo-600 border-gray-300 dark:border-gray-600 focus:ring-indigo-500/50">
                        <label for="defaultAutoProtocol" class="text-sm text-gray-600 dark:text-gray-300" data-i18n="defaultAutoProtocol">默认自动添加协议</label>
                    </div>
                </div>
            </section>

            <!-- 高级设置 -->
            <section id="advanced" class="section-content bg-white dark:bg-gray-700 rounded-lg p-5 shadow-md border border-gray-200 dark:border-gray-600">
                <h3 class="text-lg font-bold text-gray-700 dark:text-gray-200 mb-4" data-i18n="advancedSettings">高级设置</h3>
                <div class="space-y-4">
                    <div class="flex items-center justify-between">
                        <label class="text-sm font-medium text-gray-600 dark:text-gray-300 w-1/2" data-i18n="cacheExpiration">缓存过期时间（小时）</label>
                        <input type="number" id="cacheExpiration" min="1" max="720" value="24" class="w-32 rounded-lg border border-gray-200 dark:border-gray-600 py-1.5 px-3 text-sm text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500">
                    </div>
                    <div class="flex items-center space-x-2">
                        <input type="checkbox" id="enableDebugMode" class="rounded text-indigo-600 border-gray-300 dark:border-gray-600 focus:ring-indigo-500/50">
                        <label for="enableDebugMode" class="text-sm text-gray-600 dark:text-gray-300" data-i18n="enableDebugMode">启用调试模式</label>
                    </div>
                </div>
            </section>


            <!-- 2024游戏 -->
            <section id="game2024" class="section-content bg-white dark:bg-gray-700 rounded-lg p-5 shadow-md border border-gray-200 dark:border-gray-600">
                <h3 class="text-lg font-bold text-gray-700 dark:text-gray-200 mb-4" data-i18n="game2024">2024 Game</h3>
                <div class="space-y-4">
                    <div class="game-container relative w-full max-w-md mx-auto p-4">
                        <div class="flex justify-between items-center mb-4">
                            <h2 class="text-xl font-bold dark:text-white">2048</h2>
                            <div class="flex items-center gap-4">
                                <div class="text-right">
                                    <div class="text-sm text-gray-600 dark:text-gray-400">Score</div>
                                    <div id="game-score" class="text-xl font-bold dark:text-white">0</div>
                                </div>
                                <button id="new-game-btn" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">
                                    New Game
                                </button>
                            </div>
                        </div>
                        <div id="game-grid" class="grid grid-cols-4 gap-2 bg-gray-300 dark:bg-gray-700 p-2 rounded-lg aspect-square"></div>
                    </div>
                </div>
            </section>

            <!-- 关于 -->
            <section id="about" class="section-content bg-white dark:bg-gray-700 rounded-lg p-5 shadow-md border border-gray-200 dark:border-gray-600">
                <h3 class="text-lg font-bold text-gray-700 dark:text-gray-200 mb-4" data-i18n="about">关于</h3>
                <div class="space-y-4">
                    <div class="text-sm text-gray-600 dark:text-gray-300">
                        <p class="mb-2"><span data-i18n="version">版本</span>: <span id="versionNumber">1.4.0</span></p>
                        <p class="mb-4" data-i18n="description">一个用于批量打开URL的Chrome扩展</p>
                        <h4 class="font-medium mb-2" data-i18n="features">功能特点</h4>
                        <ul class="list-disc list-inside space-y-1 ml-2">
                            <li data-i18n="feature1">支持批量打开多个URL，可自定义打开顺序</li>
                            <li data-i18n="feature2">支持URL预览和选择性打开，提供更好的控制</li>
                            <li data-i18n="feature3">支持标签页分组管理，自动整理标签页</li>
                            <li data-i18n="feature4">支持URL提取和验证，确保链接有效性</li>
                            <li data-i18n="feature5">支持URL导入导出，方便数据迁移</li>
                            <li data-i18n="feature6">支持进度显示和状态反馈，操作更直观</li>
                            <li data-i18n="feature7">支持URL安全检查，提供安全警告</li>
                            <li data-i18n="feature8">支持中英文界面切换，适应不同用户</li>
                            <li data-i18n="feature9">支持深色模式和系统主题同步，护眼美观</li>
                            <li data-i18n="feature10">支持自定义设置和偏好保存，个性化体验</li>
                        </ul>
                    </div>
                </div>
            </section>
        </div>
    </div>

    <!-- 状态提示容器 -->
    <div id="statusContainer" class="fixed bottom-4 right-4 z-50"></div>

    <script src="modules/i18n.js" type="module"></script>
    <script src="options.js" type="module"></script>
</body>
</html>