Command-wiki/index.html at main · koukiBOBS/Command-wiki · 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
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Minecraft 指令百科 | 全端适配终极版</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700;900&family=VT323&display=swap" rel="stylesheet">
    <style>
        :root {
            --mc-bg: #121212;
            --mc-panel: #242424;
            --mc-button: #7e7e7e;
            --mc-green: #388e3c;
            --mc-border: #000000;
        }

        body {
            background-color: var(--mc-bg);
            color: #f0f0f0;
            font-family: 'Noto Sans SC', sans-serif;
            margin: 0;
            background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.02) 1px, transparent 0);
            background-size: 32px 32px;
            overflow-x: hidden;
            -webkit-tap-highlight-color: transparent;
        }

        .mc-font { font-family: 'VT323', monospace; }

        /* 极致的 Minecraft 按钮反馈 */
        .mc-button {
            background-color: var(--mc-button);
            border-top: 3px solid #ccc;
            border-left: 3px solid #ccc;
            border-bottom: 3px solid #222;
            border-right: 3px solid #222;
            padding: 10px 18px;
            color: white;
            text-shadow: 2px 2px #000;
            box-shadow: 0 4px 0 #000;
            margin-bottom: 4px;
            width: 100%;
            text-align: left;
            font-size: 0.875rem;
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: none;
            position: relative;
        }

        /* 增加对 Safari 移动端的兼容性 */
        .mc-button:active, .mc-button.is-active {
            border-bottom: 3px solid #ccc;
            border-right: 3px solid #ccc;
            border-top: 3px solid #222;
            border-left: 3px solid #222;
            transform: translateY(4px);
            box-shadow: none;
            margin-bottom: 0;
            margin-top: 4px;
        }

        .mc-button.active-status {
            background-color: var(--mc-green) !important;
            border-top-color: #55a659 !important;
            border-left-color: #55a659 !important;
            border-bottom-color: #1b5e20 !important;
            border-right-color: #1b5e20 !important;
        }

        .mc-panel {
            background-color: var(--mc-panel);
            border: 4px solid #000;
            position: relative;
        }

        .mc-panel::after {
            content: "";
            position: absolute;
            inset: 0;
            border: 2px solid #444;
            pointer-events: none;
        }

        .command-card {
            background-color: #1a1a1a;
            border: 2px solid #2a2a2a;
            box-shadow: 0 4px 15px rgba(0,0,0,0.4);
        }

        .custom-scrollbar::-webkit-scrollbar { width: 6px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: #000; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #444; border-radius: 10px; }

        input, textarea, select {
            -webkit-appearance: none;
            border-radius: 4px;
            background: #000 !important;
        }

        /* 防止 iOS 缩放 */
        @media screen and (max-width: 768px) {
            input, textarea, select { font-size: 16px !important; }
        }
    </style>
    <script type="importmap">
    {
      "imports": {
        "@google/genai": "https://esm.sh/@google/genai@^1.35.0"
      }
    }
    </script>
</head>
<body ontouchstart=""> <!-- 空 touchstart 激活 iOS :active -->
    <div id="app" class="min-h-screen p-4 md:p-8">
        <header class="max-w-7xl mx-auto mb-8 text-center">
            <h1 class="text-5xl md:text-7xl mc-font text-white mb-4 drop-shadow-xl tracking-tighter">
                MINECRAFT 指令百科
            </h1>
            <p class="text-[10px] text-gray-500 tracking-[0.4em] uppercase font-black">Commands & Universal ID Library</p>
        </header>

        <div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-8">
            <!-- Sidebar -->
            <aside class="lg:col-span-3 space-y-6" id="sidebar">
                <section class="mc-panel p-5">
                    <h3 class="mc-font text-2xl text-yellow-400 mb-5 border-b border-white/10 pb-2">功能导航</h3>
                    <div id="nav-group" class="flex flex-col gap-3 mb-8">
                        <button data-type="nav" data-value="wiki" class="mc-button nav-btn active-status">📚 指令百科</button>
                        <button data-type="nav" data-value="ids" class="mc-button nav-btn">🆔 万能 ID 库</button>
                    </div>

                    <div class="space-y-6">
                        <div>
                            <label class="text-[10px] text-gray-500 block mb-2 uppercase font-black tracking-[0.2em]">游戏平台</label>
                            <div id="platform-group" class="grid grid-cols-2 gap-2">
                                <button data-type="platform" data-value="Java" class="mc-button active-status">Java</button>
                                <button data-type="platform" data-value="Bedrock" class="mc-button">Bedrock</button>
                                <button data-type="platform" data-value="Education" class="mc-button">Education</button>
                                <button data-type="platform" data-value="NetEase" class="mc-button">NetEase</button>
                            </div>
                        </div>

                        <div id="dynamic-controls-container">
                            <!-- 由 JS 渲染 -->
                        </div>
                    </div>
                </section>

                <!-- AI Section -->
                <section class="mc-panel p-5 bg-[#3a2a1f]">
                    <h3 class="mc-font text-2xl text-blue-400 mb-4 flex items-center gap-2">指令 AI 专家</h3>
                    <textarea id="ai-input" class="w-full border-2 border-gray-800 p-3 text-white h-28 text-xs mb-3 outline-none focus:border-blue-500" placeholder="例如：如何用指令把所有村民变僵尸？"></textarea>
                    <button id="ask-ai-btn" class="mc-button" style="justify-content: center;">提交问题</button>
                    <div id="ai-response" class="hidden mt-4 p-4 bg-black/80 border border-blue-900/50 rounded text-[11px] leading-relaxed text-blue-100 font-mono max-h-48 overflow-y-auto custom-scrollbar"></div>
                </section>
            </aside>

            <!-- Main Area -->
            <main class="lg:col-span-9 space-y-6">
                <div class="mc-panel p-4 flex items-center gap-4 bg-black/40">
                    <div class="flex-1 relative">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">🔍</span>
                        <input id="search-bar" type="text" placeholder="全局搜索指令、物品名或 ID..." class="w-full border-2 border-gray-800 py-3 pl-10 pr-4 text-white outline-none focus:border-green-600">
                    </div>
                </div>

                <div id="view-header" class="flex justify-between items-center px-2">
                    <h2 id="view-title" class="mc-font text-3xl text-blue-400">正在载入...</h2>
                    <div id="status-indicator" class="hidden text-[10px] text-green-500 animate-pulse font-black uppercase">Syncing Database</div>
                </div>

                <div id="error-display" class="hidden p-4 bg-red-900/30 border-2 border-red-900 text-red-400 text-xs"></div>

                <div id="content-mount" class="space-y-4 min-h-[500px]">
                    <!-- 内容在此生成 -->
                </div>
            </main>
        </div>

        <footer class="max-w-7xl mx-auto mt-20 pt-10 border-t border-gray-900 pb-16 text-center opacity-40">
            <div class="mc-font text-3xl mb-1">COMMAND MASTER</div>
            <p class="text-[10px] tracking-[0.5em] font-black uppercase">Universal Minecraft Toolkit</p>
        </footer>
    </div>
    <script type="module" src="index.tsx"></script>
</body>
</html>