mid-time.github.io/MimicChest.html at main · Mid-time/mid-time.github.io · 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
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mimic chest</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#8B5CF6',
                        secondary: '#EC4899',
                        dark: '#1F2937',
                        light: '#F3F4F6'
                    },
                    fontFamily: {
                        game: ['"Press Start 2P"', 'system-ui', 'sans-serif']
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            }
            .border-glow {
                box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
            }
            .panel-transition {
                transition: all 0.3s ease-in-out;
            }
        }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
</head>
<body class="bg-gradient-to-br from-dark to-gray-800 min-h-screen text-light">
    <div class="container mx-auto px-4 py-8 max-w-4xl">
        <!-- 顶部信息栏 -->
        <header class="mb-8 bg-dark/70 rounded-lg p-4 border border-primary/30 border-glow">
            <div class="flex flex-wrap justify-between items-center gap-4">
                <div class="flex items-center gap-2">
                    <i class="fa fa-heart text-secondary text-2xl"></i>
                    <span class="text-xl font-game">生命 2.25</span>
                </div>
                <div class="flex items-center gap-2">
                    <i class="fa fa-signal text-primary text-2xl"></i>
                    <span class="text-xl font-game">第 15/15 层</span>
                </div>
                <div class="flex items-center gap-2">
                    <i class="fa fa-coins text-yellow-400 text-2xl"></i>
                    <span class="text-xl font-game">金币 8</span>
                </div>
            </div>
        </header>

        <!-- 主要内容区 -->
        <main class="space-y-6">
            <!-- 游戏主区域 -->
            <div class="bg-dark/60 rounded-lg p-5 border border-primary/20 hover:border-primary/50 transition-all min-h-[300px] flex flex-col justify-between">
                <div class="flex-1 flex items-center justify-center">
                    <p class="text-center text-gray-300 font-game">游戏主画面区域</p>
                </div>

                <!-- 底部状态栏 -->
                <div class="mt-4 bg-gray-900/70 rounded p-3">
                    <div class="flex items-center justify-between">
                        <div>
                            <span class="font-game text-sm">当前状态: 探索中</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <span class="font-game text-sm">难度:</span>
                            <span class="text-orange-500 font-game">中等</span>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <!-- 物品/装备按钮 -->
        <div class="mt-6 flex justify-center gap-4">
            <button id="items-btn" class="bg-primary/80 hover:bg-primary text-white font-game px-4 py-2 rounded transition-all">
                <i class="fa fa-cube mr-2"></i>物品
            </button>
            <button id="equipment-btn" class="bg-secondary/80 hover:bg-secondary text-white font-game px-4 py-2 rounded transition-all">
                <i class="fa fa-shield mr-2"></i>装备
            </button>
        </div>

        <!-- 页脚 -->
        <footer class="mt-10 text-center text-gray-500 text-sm">
            <p>mimic chest © 2023</p>
        </footer>
    </div>

    <!-- 物品侧边栏 -->
    <div id="items-panel" class="fixed top-0 right-0 h-full w-80 bg-gray-900/95 backdrop-blur-sm z-10 transform translate-x-full panel-transition border-l border-primary/30 overflow-y-auto">
        <div class="p-4">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-xl font-game flex items-center">
                    <i class="fa fa-cube mr-2 text-blue-400"></i>物品栏
                </h2>
                <button id="close-items" class="text-gray-400 hover:text-white">
                    <i class="fa fa-times"></i>
                </button>
            </div>

            <div class="space-y-3">
                <div class="p-3 border border-gray-700 rounded flex items-center gap-3 hover:bg-gray-800/50 cursor-pointer">
                    <i class="fa fa-potion text-green-400 text-xl"></i>
                    <div>
                        <p class="font-game">治疗药水</p>
                        <p class="text-xs text-gray-400">恢复1点生命值</p>
                    </div>
                </div>

                <div class="p-3 border border-gray-700 rounded flex items-center gap-3 hover:bg-gray-800/50 cursor-pointer">
                    <i class="fa fa-bolt text-yellow-400 text-xl"></i>
                    <div>
                        <p class="font-game">闪电卷轴</p>
                        <p class="text-xs text-gray-400">对敌人造成3点伤害</p>
                    </div>
                </div>

                <div class="p-3 border border-gray-700 rounded flex items-center gap-3 hover:bg-gray-800/50 cursor-pointer">
                    <i class="fa fa-key text-purple-400 text-xl"></i>
                    <div>
                        <p class="font-game">黄金钥匙</p>
                        <p class="text-xs text-gray-400">可打开特殊宝箱</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 装备侧边栏 -->
    <div id="equipment-panel" class="fixed top-0 right-0 h-full w-80 bg-gray-900/95 backdrop-blur-sm z-10 transform translate-x-full panel-transition border-l border-primary/30 overflow-y-auto">
        <div class="p-4">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-xl font-game flex items-center">
                    <i class="fa fa-shield mr-2 text-blue-400"></i>装备栏
                </h2>
                <button id="close-equipment" class="text-gray-400 hover:text-white">
                    <i class="fa fa-times"></i>
                </button>
            </div>

            <div class="space-y-4">
                <div class="p-3 border border-gray-700 rounded hover:bg-gray-800/50">
                    <p class="font-game text-sm text-gray-400 mb-2">武器</p>
                    <div class="flex items-center gap-3">
                        <i class="fa fa-sword text-red-400 text-xl"></i>
                        <div>
                            <p class="font-game">钢铁长剑</p>
                            <p class="text-xs text-gray-400">攻击力+2</p>
                        </div>
                    </div>
                </div>

                <div class="p-3 border border-gray-700 rounded hover:bg-gray-800/50">
                    <p class="font-game text-sm text-gray-400 mb-2">护甲</p>
                    <div class="flex items-center gap-3">
                        <i class="fa fa-vest text-blue-400 text-xl"></i>
                        <div>
                            <p class="font-game">锁子甲</p>
                            <p class="text-xs text-gray-400">防御力+1</p>
                        </div>
                    </div>
                </div>

                <div class="p-3 border border-gray-700 rounded hover:bg-gray-800/50">
                    <p class="font-game text-sm text-gray-400 mb-2">饰品</p>
                    <div class="flex items-center gap-3">
                        <i class="fa fa-ring text-yellow-400 text-xl"></i>
                        <div>
                            <p class="font-game">幸运戒指</p>
                            <p class="text-xs text-gray-400">暴击率+10%</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 侧边栏切换逻辑
        const itemsBtn = document.getElementById('items-btn');
        const equipmentBtn = document.getElementById('equipment-btn');
        const itemsPanel = document.getElementById('items-panel');
        const equipmentPanel = document.getElementById('equipment-panel');
        const closeItems = document.getElementById('close-items');
        const closeEquipment = document.getElementById('close-equipment');

        itemsBtn.addEventListener('click', () => {
            equipmentPanel.classList.add('translate-x-full');
            itemsPanel.classList.toggle('translate-x-full');
        });

        equipmentBtn.addEventListener('click', () => {
            itemsPanel.classList.add('translate-x-full');
            equipmentPanel.classList.toggle('translate-x-full');
        });

        closeItems.addEventListener('click', () => {
            itemsPanel.classList.add('translate-x-full');
        });

        closeEquipment.addEventListener('click', () => {
            equipmentPanel.classList.add('translate-x-full');
        });

        // 点击外部关闭侧边栏
        document.addEventListener('click', (e) => {
            if (!itemsPanel.contains(e.target) && e.target !== itemsBtn) {
                itemsPanel.classList.add('translate-x-full');
            }
            if (!equipmentPanel.contains(e.target) && e.target !== equipmentBtn) {
                equipmentPanel.classList.add('translate-x-full');
            }
        });
    </script>
</body>
</html>