hyrox/hyrox_dashboard.html at main · tyhuan/hyrox · 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
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HYROX RPG DASHBOARD</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <style>
        body { background-color: #0f172a; color: #f1f5f9; font-family: ui-sans-serif, system-ui, sans-serif; overflow-x: hidden; }
        @keyframes slideInTop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
        .slide-in-top { animation: slideInTop 0.3s ease-out forwards; }
    </style>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        const { useState, useEffect } = React;

        const Icon = ({ name, size = 20, className = "" }) => {
            const paths = {
                'activity': '<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>',
                'shield': '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>',
                'footprints': '<path d="M4 16v-2.38C4 11.5 2.97 10.5 3 8c.03-2.72 1.49-6 4.5-6C9.37 2 10 3.8 10 5.5c0 3.11-2 5.66-2 8.68V16a2 2 0 1 1-4 0Z"></path><path d="M20 20v-2.38c0-2.12 1.03-3.12 1-5.62-.03-2.72-1.49-6-4.5-6C14.63 6 14 7.8 14 9.5c0 3.11 2 5.66 2 8.68V20a2 2 0 1 0 4 0Z"></path><path d="M16 17h4"></path><path d="M4 13h4"></path>',
                'dumbbell': '<path d="M14.4 14.4 9.6 9.6"></path><path d="M18.65 21.35a2.12 2.12 0 0 1-3-3l-3.9-3.9a2.12 2.12 0 0 1 3-3l3.9 3.9a2.12 2.12 0 0 1-3 3z"></path><path d="m21.5 21.5-2.8-2.8"></path><path d="M2.5 2.5l2.8 2.8"></path><path d="M5.35 2.65a2.12 2.12 0 0 1 3 3l3.9 3.9a2.12 2.12 0 0 1-3 3l-3.9-3.9a2.12 2.12 0 0 1 3-3z"></path>',
                'zap': '<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>',
                'wind': '<path d="M12.8 19.6A2 2 0 1 0 14 16H2"></path><path d="M17.5 8a2.5 2.5 0 1 1 2 4H2"></path><path d="M9.8 4.4A2 2 0 1 1 11 8H2"></path>',
                'brain': '<path d="M9.5 2h5"></path><path d="M16 4.5v1"></path><path d="M18.5 7h1"></path><path d="M21 11.5v1"></path><path d="M18.5 16h1"></path><path d="M16 18.5v1"></path><path d="M9.5 22h5"></path><path d="M8 18.5v1"></path><path d="M5.5 16h-1"></path><path d="M3 11.5v-1"></path><path d="M5.5 7h-1"></path><path d="M8 4.5v-1"></path><path d="M12 22v-9"></path><path d="M12 13V4"></path><path d="M12 13H4"></path><path d="M12 13h8"></path>',
                'check-circle': '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline>',
                'circle': '<circle cx="12" cy="12" r="10"></circle>',
                'sword': '<polyline points="14.5 17.5 3 6 3 3 6 3 17.5 14.5"></polyline><line x1="13" y1="19" x2="19" y2="13"></line><line x1="16" y1="16" x2="20" y2="20"></line><line x1="19" y1="21" x2="21" y2="19"></line>'
            };
            return <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className} dangerouslySetInnerHTML={{__html: paths[name] || ''}} />;
        };

        const divisionData = {
            womens_open: { name: "女子公開組 (Women's Open)", push: 102, pull: 78, carry: 32, lunge: 10, wallball: 4 },
            mens_open: { name: "男子公開組 (Men's Open)", push: 152, pull: 103, carry: 48, lunge: 20, wallball: 6 },
            womens_pro: { name: "女子職業組 (Women's PRO)", push: 152, pull: 103, carry: 48, lunge: 20, wallball: 6 },
            mens_pro: { name: "男子職業組 (Men's PRO)", push: 202, pull: 153, carry: 64, lunge: 30, wallball: 9 }
        };

        const runningPaceData = {
            '60': { stationEst: 22, runEst: 38, avgPace: "4:45 /km" },
            '75': { stationEst: 32, runEst: 43, avgPace: "5:20 /km" },
            '90': { stationEst: 42, runEst: 48, avgPace: "6:00 /km" }
        };

        const hyroxStations = [
            { id: 1, name: "滑雪機", english: "1000m SkiErg", type: "cardio" },
            { id: 2, name: "負重推車", english: "50m Sled Push", type: "strength", weightKey: "push" },
            { id: 3, name: "負重拉車", english: "50m Sled Pull", type: "strength", weightKey: "pull" },
            { id: 4, name: "波比跳遠", english: "80m Burpee Broad Jumps", type: "agility" },
            { id: 5, name: "划船機", english: "1000m Rowing", type: "cardio" },
            { id: 6, name: "農夫走路", english: "200m Farmers Carry", type: "strength", weightKey: "carry" },
            { id: 7, name: "沙袋弓箭步", english: "100m Sandbag Lunges", type: "strength", weightKey: "lunge" },
            { id: 8, name: "藥球壁投", english: "75/100 Wall Balls", type: "endurance", weightKey: "wallball" }
        ];

        function StatBar({ label, value, color, iconName }) {
            return (
                <div className="mb-4">
                    <div className="flex justify-between text-sm font-bold mb-1.5 text-slate-300">
                        <span className="flex items-center gap-1.5"><Icon name={iconName} size={16} /> {label}</span>
                        <span className="font-mono text-slate-400">{Math.round(value)}/100</span>
                    </div>
                    <div className="h-2 w-full bg-slate-900 rounded-full overflow-hidden border border-slate-700">
                        <div className={`h-full ${color} transition-all duration-1000 ease-out`} style={{ width: `${value}%` }} />
                    </div>
                </div>
            );
        }

        function App() {
            // LocalStorage 同步機制
            const [weight, setWeight] = useState(() => Number(localStorage.getItem('hx_weight')) || 48.5);
            const [division, setDivision] = useState(() => localStorage.getItem('hx_div') || 'womens_open');
            const [targetPace, setTargetPace] = useState(() => localStorage.getItem('hx_pace') || '75');
            const [progressLog, setProgressLog] = useState(() => JSON.parse(localStorage.getItem('hx_prog')) || {});
            const [expandedStation, setExpandedStation] = useState(null);

            useEffect(() => {
                localStorage.setItem('hx_weight', weight);
                localStorage.setItem('hx_div', division);
                localStorage.setItem('hx_pace', targetPace);
                localStorage.setItem('hx_prog', JSON.stringify(progressLog));
            }, [weight, division, targetPace, progressLog]);

            // 監聽來自百科的 localStorage 變動 (以防萬一)
            useEffect(() => {
                const handleStorageChange = (e) => {
                    if (e.key === 'hx_pace') setTargetPace(e.newValue);
                };
                window.addEventListener('storage', handleStorageChange);
                return () => window.removeEventListener('storage', handleStorageChange);
            }, []);

            const toggleProgress = (key) => setProgressLog(prev => ({ ...prev, [key]: !prev[key] }));

            const generateBenchmarks = (station, targetPace) => {
                if (station.type !== 'strength') {
                    return [
                        { title: "有氧基底", desc: `以 80% 心率連續操作此器材 4 分鐘不停歇。` },
                        { title: "賽事配速", desc: `模擬 ${targetPace} 分鐘完賽要求，心率不崩潰。` }
                    ];
                }
                return [
                    { title: "階段一 (校準)", desc: `找「賽事模擬重」：用 80% 力量剛好能在 15 秒內推動 12.5m。` },
                    { title: "階段二 (打底)", desc: `使用「賽事模擬重」，完成 4 趟 12.5m，組間休息 30 秒。` },
                    { title: `階段三 (${targetPace}分配速)`, desc: `完成 4 趟 12.5m，組間休息嚴格控制在 ${targetPace === '60' ? '5秒' : targetPace === '75' ? '12秒' : '20秒'} 內。` }
                ];
            };

            const calculateRPGStats = () => {
                const pushLoad = divisionData[division].push / weight;
                let str = Math.max(10, 100 - ((pushLoad - 1) * 30));
                let agi = Math.min(95, 40 + (100 / weight) * 15);
                let con = targetPace === '60' ? 90 : targetPace === '75' ? 70 : 50;
                return { STR: Math.min(100, Math.max(0, str)), AGI: Math.min(100, Math.max(0, agi)), CON: con, INT: 85 };
            };

            const stats = calculateRPGStats();
            const runData = runningPaceData[targetPace];

            const getStationTags = (station) => {
                const currentDiv = divisionData[division];
                if (station.type === 'strength') {
                    const load = currentDiv[station.weightKey] / weight;
                    if (load > 2.0) return { label: "🚨 魔王級力量", color: "text-red-400 bg-red-400/10 border-red-400/30", load };
                    if (load > 1.5) return { label: "⚠️ 高負荷", color: "text-orange-400 bg-orange-400/10 border-orange-400/30", load };
                    return { label: "✅ 負荷適中", color: "text-emerald-400 bg-emerald-400/10 border-emerald-400/30", load };
                }
                if (station.type === 'agility' && weight < 60) return { label: "⚡ 敏捷追擊", color: "text-yellow-400 bg-yellow-400/10 border-yellow-400/30" };
                return { label: "⚖️ 穩定配速", color: "text-blue-400 bg-blue-400/10 border-blue-400/30" };
            };

            return (
                <div className="max-w-6xl mx-auto p-4 md:p-8">
                    <header className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 mb-8 pb-6 border-b border-slate-800">
                        <div className="flex items-center gap-3">
                            <div className="w-12 h-12 bg-yellow-400 rounded-lg flex items-center justify-center text-slate-900"><Icon name="sword" size={24}/></div>
                            <div>
                                <h1 className="font-black text-2xl tracking-wider">HYROX RPG DASHBOARD</h1>
                                <p className="text-sm text-slate-400">進度自動存檔 (Local Storage Sync)</p>
                            </div>
                        </div>

                        {/* 新增：返回首頁按鈕 */}
                        <a href="index.html" className="flex items-center gap-2 px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white rounded-lg border border-slate-700 transition-colors text-sm font-bold">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
                            返回指揮中心
                        </a>
                    </header>

                    <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
                        {/* 左側面板 */}
                        <div className="lg:col-span-4 space-y-6">
                            <div className="bg-slate-800 rounded-2xl p-6 border border-slate-700">
                                <h3 className="font-bold mb-4 flex items-center gap-2 text-yellow-400"><Icon name="activity"/> 參數設定</h3>
                                <div className="space-y-4">
                                    <div>
                                        <label className="text-xs text-slate-400 mb-1 block">組別</label>
                                        <select value={division} onChange={(e) => setDivision(e.target.value)} className="w-full bg-slate-900 border border-slate-700 rounded-lg p-2 text-white">
                                            {Object.entries(divisionData).map(([k, v]) => <option key={k} value={k}>{v.name}</option>)}
                                        </select>
                                    </div>
                                    <div>
                                        <label className="text-xs text-slate-400 mb-1 block">體重 (kg)</label>
                                        <input type="number" value={weight} onChange={(e) => setWeight(Number(e.target.value)||0)} className="w-full bg-slate-900 border border-slate-700 rounded-lg p-2 text-white font-bold" />
                                    </div>
                                    <div>
                                        <label className="text-xs text-slate-400 mb-1 block">總目標完賽時間</label>
                                        <div className="grid grid-cols-3 gap-2">
                                            {['60','75','90'].map(p => (
                                                <button key={p} onClick={() => setTargetPace(p)} className={`py-1 rounded text-sm font-bold border transition-colors ${targetPace === p ? 'bg-yellow-400 text-slate-900 shadow-[0_0_10px_rgba(250,204,21,0.5)] border-yellow-400' : 'bg-slate-900 border-slate-700 text-slate-500'}`}>{p}m</button>
                                            ))}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div className="bg-slate-800 rounded-2xl p-6 border border-slate-700">
                                <h3 className="font-bold mb-4 flex items-center gap-2 text-blue-400"><Icon name="shield"/> RPG 戰鬥力分析</h3>
                                <StatBar label="力量 STR" value={stats.STR} color="bg-red-500" iconName="dumbbell" />
                                <StatBar label="敏捷 AGI" value={stats.AGI} color="bg-yellow-400" iconName="zap" />
                                <StatBar label="心肺 CON" value={stats.CON} color="bg-emerald-500" iconName="wind" />
                                <StatBar label="戰術 INT" value={stats.INT} color="bg-blue-500" iconName="brain" />
                            </div>
                        </div>

                        {/* 右側面板 */}
                        <div className="lg:col-span-8 space-y-6">
                            <div className="bg-gradient-to-br from-blue-900/40 to-slate-800 rounded-2xl p-6 border border-blue-500/30 overflow-hidden relative">
                                <Icon name="footprints" size={150} className="absolute -right-4 -bottom-4 text-blue-500/10 pointer-events-none" />
                                <h3 className="font-bold flex items-center gap-2 text-white mb-4 relative z-10"><Icon name="footprints" className="text-blue-400" /> ROX 跑動配速中樞</h3>
                                <div className="grid grid-cols-3 gap-3 mb-4 relative z-10">
                                    <div className="bg-slate-900/60 p-3 rounded-lg border border-slate-700/50 text-center">
                                        <div className="text-slate-400 text-xs mb-1">強制均速</div>
                                        <div className="text-xl font-bold text-blue-400 font-mono">{runData.avgPace}</div>
                                    </div>
                                    <div className="bg-slate-900/60 p-3 rounded-lg border border-slate-700/50 text-center">
                                        <div className="text-slate-400 text-xs mb-1">跑總耗時</div>
                                        <div className="text-xl font-bold text-white font-mono">{runData.runEst}m</div>
                                    </div>
                                    <div className="bg-slate-900/60 p-3 rounded-lg border border-slate-700/50 text-center">
                                        <div className="text-slate-400 text-xs mb-1">關卡耗時</div>
                                        <div className="text-xl font-bold text-white font-mono">{runData.stationEst}m</div>
                                    </div>
                                </div>
                                <div className="bg-slate-900/80 p-4 rounded-xl border border-slate-700 relative z-10">
                                    <h4 className="text-xs font-bold text-slate-400 mb-2">疲勞跑打卡</h4>
                                    {[ {id:'run1', t:"純跑檢定", d:`5km測驗需比 ${runData.avgPace} 快 30 秒。`}, {id:'run2', t:"充血轉換", d:`30下深蹲跳後跑1km，需壓在 ${runData.avgPace} 內。`} ].map(r => (
                                        <div key={r.id} onClick={() => toggleProgress(r.id)} className={`flex items-start gap-2 p-2 mt-2 rounded border cursor-pointer ${progressLog[r.id] ? 'bg-emerald-900/20 border-emerald-500/30' : 'bg-slate-800/50 border-slate-700'}`}>
                                            <Icon name={progressLog[r.id] ? "check-circle" : "circle"} size={16} className={progressLog[r.id] ? "text-emerald-400 mt-0.5" : "text-slate-500 mt-0.5"} />
                                            <div>
                                                <div className={`text-sm font-bold ${progressLog[r.id] ? 'text-emerald-400' : 'text-slate-200'}`}>{r.t}</div>
                                                <div className="text-xs text-slate-400">{r.d}</div>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </div>

                            <div className="bg-slate-800 rounded-2xl p-6 border border-slate-700">
                                <h3 className="font-bold mb-4 flex items-center gap-2 text-white"><Icon name="dumbbell" className="text-yellow-400" /> 8 大關卡訓練進度</h3>
                                <div className="space-y-2">
                                    {hyroxStations.map(station => {
                                        const tag = getStationTags(station);
                                        const isExp = expandedStation === station.id;
                                        return (
                                            <div key={station.id} className="border border-slate-700/50 rounded-lg overflow-hidden">
                                                <div onClick={() => setExpandedStation(isExp ? null : station.id)} className="flex items-center justify-between p-3 bg-slate-900/50 cursor-pointer hover:bg-slate-700/50">
                                                    <div className="flex items-center gap-3">
                                                        <div className="w-6 h-6 rounded-full bg-slate-800 border border-slate-600 flex items-center justify-center text-xs font-bold text-slate-300">{station.id}</div>
                                                        <div className="font-bold text-sm text-slate-200">{station.name}</div>
                                                    </div>
                                                    <div className={`px-2 py-1 border rounded text-[10px] font-bold ${tag.color}`}>
                                                        {tag.label} {tag.load && `(${tag.load.toFixed(2)}x)`}
                                                    </div>
                                                </div>
                                                {isExp && (
                                                    <div className="p-3 bg-slate-900 border-t border-slate-800 slide-in-top">
                                                        {generateBenchmarks(station, targetPace).map((bm, idx) => {
                                                            const key = `${station.id}-${idx}`;
                                                            const isDone = progressLog[key];
                                                            return (
                                                                <div key={key} onClick={() => toggleProgress(key)} className={`flex items-start gap-2 p-2 mt-1 rounded border cursor-pointer ${isDone ? 'bg-emerald-900/20 border-emerald-500/30' : 'bg-slate-800/50 border-slate-700'}`}>
                                                                    <Icon name={isDone ? "check-circle" : "circle"} size={16} className={isDone ? "text-emerald-400 mt-0.5" : "text-slate-500 mt-0.5"} />
                                                                    <div>
                                                                        <div className={`text-xs font-bold ${isDone ? 'text-emerald-400' : 'text-slate-200'}`}>{bm.title}</div>
                                                                        <div className="text-[11px] text-slate-400 mt-0.5">{bm.desc}</div>
                                                                    </div>
                                                                </div>
                                                            )
                                                        })}
                                                    </div>
                                                )}
                                            </div>
                                        )
                                    })}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            );
        }

        const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(<App />);
    </script>
</body>
</html>