introduction/index.html at master · Team-OffTrack/introduction · 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
<!DOCTYPE html>
<html lang="zh-CN" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Team OffTrack | Breaking the Rails</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&display=swap');

        body {
            font-family: 'Space+Grotesk', sans-serif;
            background-color: #0a0a0a;
            color: #ffffff;
            overflow-x: hidden;
        }

        /* 修复：导航跳转偏移量，防止标题被遮挡 */
        section {
            scroll-margin-top: 100px;
        }

        .gradient-text {
            background-image: linear-gradient(90deg, #ff007a, #bc13fe);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            -webkit-text-fill-color: transparent;
        }

        .card-glow:hover {
            box-shadow: 0 0 25px rgba(255, 0, 122, 0.15);
            border-color: #ff007a;
            transform: translateY(-4px);
        }

        /* 自定义入场动画 */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-fade-in-up {
            animation: fadeInUp 0.8s ease-out forwards;
        }

        .delay-200 { animation-delay: 0.2s; }
        .delay-500 { animation-delay: 0.5s; }

        .org-logo {
            filter: drop-shadow(0 0 10px rgba(255, 0, 122, 0.5));
        }

        .btn-hover {
            transition: all 0.3s ease;
        }
        .btn-hover:hover {
            transform: scale(1.03);
        }

        /* 加载动画转圈 */
        .loader {
            border: 2px solid #1a1a1a;
            border-top: 2px solid #ff007a;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            animation: spin 1s linear infinite;
        }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
    </style>
</head>
<body class="selection:bg-pink-500 selection:text-white">

    <nav class="sticky top-0 z-50 bg-[#0a0a0a]/80 backdrop-blur-md border-b border-zinc-900">
        <div class="flex justify-between items-center p-4 max-w-6xl mx-auto">
            <div class="flex items-center gap-3">
                <img src="https://github.com/Team-OffTrack.png" alt="Team OffTrack Logo" class="w-10 h-10 rounded-lg org-logo">
                <div class="text-xl font-bold tracking-tighter flex items-baseline">
                    TEAM <span class="gradient-text ml-2">OFFTRACK</span>
                </div>
            </div>
            <div class="space-x-6 hidden md:flex text-xs uppercase tracking-widest items-center">
                <a href="#about" class="hover:text-pink-500 transition duration-300">About</a>
                <a href="#projects" class="hover:text-pink-500 transition duration-300">Projects</a>
                <a href="#members" class="hover:text-pink-500 transition duration-300">Members</a>
                <a href="https://github.com/Team-OffTrack" target="_blank" class="bg-white text-black px-4 py-2 rounded-full font-bold hover:bg-pink-500 hover:text-white transition btn-hover">GitHub</a>
            </div>
        </div>
    </nav>

    <header class="py-32 px-6 text-center max-w-5xl mx-auto">
        <div class="inline-block px-4 py-1 border border-pink-500/30 rounded-full text-pink-500 text-xs font-mono mb-6 uppercase tracking-widest animate-pulse">
            Deviate from the standard
        </div>
        <h1 class="text-6xl md:text-8xl font-bold mb-8 tracking-tight leading-[1.1]">
            不误正业<br><span class="gradient-text">重塑路径</span>
        </h1>
        <p class="text-gray-400 text-lg md:text-xl mb-12 max-w-2xl mx-auto leading-relaxed">
            我们是 <span class="text-white font-bold">Team OffTrack</span>。一个专注于探索技术边界、拒绝平庸方案的开发者集体。
        </p>
        <div class="flex flex-col md:flex-row justify-center gap-4">
            <a href="#projects" class="bg-pink-600 hover:bg-pink-700 text-white px-10 py-4 rounded-xl font-bold transition btn-hover">
                探索代码库
            </a>
            <a href="#about" class="bg-zinc-900 border border-zinc-700 hover:bg-zinc-800 text-white px-10 py-4 rounded-xl font-bold transition btn-hover">
                了解更多
            </a>
        </div>
    </header>

    <section id="about" class="py-32 px-6 bg-gradient-to-b from-transparent to-zinc-950">
        <div class="max-w-4xl mx-auto text-center">
            <h2 class="text-4xl font-bold mb-12 animate-fade-in-up">关于我们</h2>
            <div class="p-8 md:p-12 rounded-[2rem] bg-zinc-900/30 border border-zinc-800 backdrop-blur-sm animate-fade-in-up delay-200">
                <p class="text-gray-300 text-lg md:text-2xl leading-relaxed font-light italic">
                    "我们是一群来自<span class="text-white font-bold">软件工程专业的大学生</span>。"
                </p>
                <div class="h-px w-20 bg-pink-500 mx-auto my-8 opacity-50"></div>
                <p class="text-gray-400 text-base md:text-lg leading-relaxed text-left md:text-center">
                    我们不满足于书本上的死记硬背，比起按部就班的课程作业，我们更喜欢在 GitHub 上构建那些“不误正业”的有趣项目。
                    作为软件工程的学生，我们深知代码的逻辑之美，但也渴望突破传统的开发轨道。Team OffTrack 既是我们的实验场，也是我们对技术的态度：
                    <span class="text-pink-500">保持好奇，打破常规，重塑路径。</span>
                </p>
            </div>
        </div>
    </section>

    <section id="projects" class="py-24 px-6 max-w-6xl mx-auto">
        <div class="flex justify-between items-end mb-12 border-b border-zinc-900 pb-4">
            <div>
                <h2 class="text-4xl font-bold mb-2">项目矩阵</h2>
                <p class="text-gray-500">Repositories under Team-OffTrack collective.</p>
            </div>
            <div id="repo-count" class="text-zinc-500 font-mono text-sm uppercase tracking-widest">Scanning...</div>
        </div>

        <div id="repo-container" class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            <div class="col-span-full flex flex-col items-center justify-center py-20 gap-4">
                <div class="loader"></div>
                <p class="text-zinc-500 text-xs font-mono uppercase">Fetching Repositories from GitHub...</p>
            </div>
        </div>
    </section>

    <section id="members" class="py-24 px-6 bg-zinc-950">
        <div class="max-w-6xl mx-auto text-center">
            <h2 class="text-3xl font-bold mb-16 animate-fade-in-up delay-500">核心贡献者</h2>
            <div class="flex flex-wrap justify-center gap-12">
                <a href="https://github.com/nanchenwuyue" target="_blank" class="group text-center">
                    <div class="w-20 h-20 mx-auto mb-4 rounded-full overflow-hidden border-2 border-zinc-800 group-hover:border-pink-500 transition transform group-hover:scale-110 duration-300">
                        <img src="http://q1.qlogo.cn/g?b=qq&nk=157619362&s=640" alt="HQY" class="w-full h-full grayscale group-hover:grayscale-0 transition duration-500">
                    </div>
                    <p class="font-bold text-sm">HQY</p>
                    <p class="text-zinc-500 text-xs font-mono">@nanchenwuyue</p>
                </a>
                <a href="https://github.com/HarrisonHuH" target="_blank" class="group text-center">
                    <div class="w-20 h-20 mx-auto mb-4 rounded-full overflow-hidden border-2 border-zinc-800 group-hover:border-pink-500 transition transform group-hover:scale-110 duration-300">
                        <img src="http://q1.qlogo.cn/g?b=qq&nk=1436179815&s=640" alt="HHX" class="w-full h-full grayscale group-hover:grayscale-0 transition duration-500">
                    </div>
                    <p class="font-bold text-sm">HHX</p>
                    <p class="text-zinc-500 text-xs font-mono">@HarrisonHuH</p>
                </a>
                <a href="https://github.com/snnbyyds" target="_blank" class="group text-center">
                    <div class="w-20 h-20 mx-auto mb-4 rounded-full overflow-hidden border-2 border-zinc-800 group-hover:border-pink-500 transition transform group-hover:scale-110 duration-300">
                        <img src="https://github.com/snnbyyds.png" alt="SN" class="w-full h-full grayscale group-hover:grayscale-0 transition duration-500">
                    </div>
                    <p class="font-bold text-sm">SN</p>
                    <p class="text-zinc-500 text-xs font-mono">@snnbyyds</p>
                </a>
                <a href="https://github.com/lbb-and-a-little-rabbit" target="_blank" class="group text-center">
                    <div class="w-20 h-20 mx-auto mb-4 rounded-full overflow-hidden border-2 border-zinc-800 group-hover:border-pink-500 transition transform group-hover:scale-110 duration-300">
                        <img src="https://github.com/lbb-and-a-little-rabbit.png" alt="YJX" class="w-full h-full grayscale group-hover:grayscale-0 transition duration-500">
                    </div>
                    <p class="font-bold text-sm">YJX</p>
                    <p class="text-zinc-500 text-xs font-mono">@lbb-and-a-rabbit</p>
                </a>
            </div>
        </div>
    </section>

    <footer class="py-16 px-6 text-center border-t border-zinc-900 mt-24">
        <div class="mb-8 flex justify-center items-center gap-2">
            <img src="https://github.com/Team-OffTrack.png" class="w-6 h-6 rounded opacity-50" alt="">
            <span class="text-zinc-500 font-bold tracking-tighter uppercase text-xs">Team OffTrack</span>
        </div>
        <p class="text-zinc-700 text-[10px] uppercase tracking-widest leading-loose">
            &copy; 2026 Team OffTrack. Built by explorers, for explorers.<br>
            Designed with passion & software engineering logic.
        </p>
    </footer>

    <script>
        async function fetchRepos() {
            const container = document.getElementById('repo-container');
            const countEl = document.getElementById('repo-count');

            try {
                // 抓取组织下的公开仓库，按更新时间排序
                const response = await fetch('https://api.github.com/orgs/Team-OffTrack/repos?sort=updated&per_page=100');
                const repos = await response.json();

                if (!Array.isArray(repos)) throw new Error('Failed to fetch');

                countEl.innerText = `${repos.length} Public Repositories`;
                container.innerHTML = ''; // 清除加载动画

                repos.forEach(repo => {
                    // 创建仓库卡片
                    const card = `
                        <a href="${repo.html_url}" target="_blank" class="bg-zinc-900/50 border border-zinc-800 p-8 rounded-3xl card-glow transition duration-300 group block">
                            <div class="flex justify-between items-start mb-6">
                                <div class="text-pink-500 font-mono text-[10px] uppercase tracking-widest bg-pink-500/10 px-2 py-1 rounded">
                                    ${repo.language || 'Explore'}
                                </div>
                                <div class="flex items-center gap-2 text-zinc-500 text-xs font-mono">
                                    <span>⭐ ${repo.stargazers_count}</span>
                                </div>
                            </div>
                            <h3 class="text-xl font-bold mb-4 group-hover:text-pink-500 transition break-all leading-tight">${repo.name}</h3>
                            <p class="text-gray-400 text-sm mb-8 leading-relaxed line-clamp-2 min-h-[3rem]">
                                ${repo.description || '探索代码深处的无限可能，该项目暂无描述。'}
                            </p>
                            <div class="flex items-center justify-between text-[10px] font-mono text-zinc-600 uppercase">
                                <span>Updated: ${new Date(repo.updated_at).toLocaleDateString()}</span>
                                <span class="group-hover:text-pink-500 transition">View Repo →</span>
                            </div>
                        </a>
                    `;
                    container.innerHTML += card;
                });
            } catch (error) {
                container.innerHTML = `
                    <div class="col-span-full text-center py-20">
                        <p class="text-red-500 font-mono mb-2 text-sm uppercase">API Connection Error</p>
                        <p class="text-zinc-500 text-xs">无法加载 GitHub 仓库列表，请检查网络连接或稍后再试。</p>
                    </div>
                `;
                console.error('Fetch Error:', error);
            }
        }

        // 页面加载后执行
        document.addEventListener('DOMContentLoaded', fetchRepos);
    </script>
</body>
</html>