-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
293 lines (275 loc) · 13.5 KB
/
index.html
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
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>劉兵 - Minecraft YouTuber</title>
<!-- Meta tags -->
<meta name="description" content="劉兵Channel - 頻道官網">
<meta name="keywords" content="Minecraft, 劉兵, 掛王爭霸戰, 遊戲實況, YouTube">
<meta name="author" content="BriefBassoon117">
<meta name="robots" content="index, follow">
<!-- Open Graph (OG) Metadata -->
<meta property="og:title" content="劉兵Channel - 頻道官網">
<meta property="og:description" content="我的影片主要是Minecraft，其他隨興發，出片時間不固定。">
<meta property="og:image" content="https://github.com/plummarker/website/raw/refs/heads/main/ico.jpg">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="520">
<meta property="og:image:height" content="520">
<meta property="og:url" content="https://plummarker.github.io/website/">
<meta property="og:type" content="website">
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="https://github.com/plummarker/website/raw/refs/heads/main/favicon.ico">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
</head>
<body>
<div class="minecraft-particles"></div>
<!-- Navigation -->
<button class="nav-toggle">
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</button>
<nav class="nav-menu">
<ul>
<li><a href="#home">首頁</a></li>
<li><a href="#stream">直播</a></li>
<li><a href="#popular">熱門</a></li>
<li><a href="#channel">頻道</a></li>
</ul>
</nav>
<div class="nav-overlay"></div>
<!-- Home Page -->
<section id="home" class="page-section">
<header class="header">
<div class="channel-logo">
<img src="high_1737031876.jpg" alt="劉兵頻道" class="avatar">
<h1 class="channel-name">劉兵Channel</h1>
<p class="channel-motto">我的影片主要是Minecraft，其他隨興發，出片時間不固定。</p>
</div>
</header>
<main>
<section id="about" class="section">
<div class="container" data-aos="fade-up">
<h2>關於劉兵頻道</h2>
<div class="about-content">
<div class="about-text">
<p>
特別感謝 :
頭像 & Minecraft Skin繪師 : 由依可可YuiCoco</p>
</div>
<div class="achievement-cards">
<div class="achievement-card" data-aos="flip-left">
<div class="achievement-icon">👥</div>
<div class="achievement-number" data-count="2000">0</div>
<div class="achievement-label">訂閱者</div>
</div>
<div class="achievement-card" data-aos="flip-left" data-aos-delay="400">
<div class="achievement-icon">🎥</div>
<div class="achievement-number" data-count="400">0</div>
<div class="achievement-label">影片數量</div>
</div>
<div class="achievement-card" data-aos="flip-left" data-aos-delay="200">
<div class="achievement-icon">👀</div>
<div class="achievement-number" data-count="1200000">0</div>
<div class="achievement-label">總觀看次數</div>
</div>
</div>
</div>
</div>
</section>
<section id="latest" class="section">
<div class="container">
<h2 data-aos="fade-right">最新影片</h2>
<div class="video-grid">
<div class="video-card" data-aos="zoom-in">
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/5_KoVcDrIi8" frameborder="0" allowfullscreen></iframe>
</div>
<h3>記得按讚</h3>
</div>
</div>
<div class="show-more-wrapper">
<a href="https://youtube.com/@plummarker41841/videos" class="show-more-btn" target="_blank">
顯示更多
<svg class="arrow-icon" viewBox="0 0 24 24" width="24" height="24">
<path fill="currentColor" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
</svg>
</a>
</div>
</div>
</section>
<section id="featured" class="section">
<div class="container">
<h2 data-aos="fade-right">精選影片</h2>
<div class="video-grid">
<div class="video-card" data-aos="zoom-in">
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/YaGGL1vDdoM" frameborder="0" allowfullscreen></iframe>
</div>
<h3>如何一次對付兩個外掛？？【第十屆 掛王爭霸戰】</h3>
</div>
<div class="video-card" data-aos="zoom-in" data-aos-delay="100">
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/kPB54Ejc8PM" frameborder="0" allowfullscreen></iframe>
</div>
<h3>這輩子沒看過那麼慘的掛LOL【第十四屆 掛王爭霸戰Ⅱ】</h3>
</div>
<div class="video-card" data-aos="zoom-in" data-aos-delay="200">
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/oYiDJF0Jusg" frameborder="0" allowfullscreen></iframe>
</div>
<h3>這是一場賭上運氣的戰爭！！</h3>
</div>
</div>
</div>
</section>
<section id="contact" class="section">
<div class="container" data-aos="fade-up">
<h2>加入社群</h2>
<div class="social-links">
<a href="https://youtube.com/@plummarker41841" class="social-link youtube" data-aos="zoom-in">
<svg viewBox="0 0 24 24" width="24" height="24">
<path fill="currentColor" d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
</svg>
前往頻道
</a>
<a href="https://discord.com/invite/fXAd8XeS8X" class="social-link discord" data-aos="zoom-in" data-aos-delay="100">
<svg viewBox="0 0 24 24" width="24" height="24">
<path fill="currentColor" d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/>
</svg>
加入Discord
</a>
</div>
</div>
</section>
</main>
</section>
<!-- Stream Page -->
<section id="stream" class="page-section">
<div class="container">
<h2 data-aos="fade-right">近期直播</h2>
<div class="video-grid">
<div class="video-card" data-aos="zoom-in">
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/gYwnJE7bGRA" frameborder="0" allowfullscreen></iframe>
</div>
<h3>最新直播 #5</h3>
</div>
<div class="video-card" data-aos="zoom-in" data-aos-delay="100">
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/YklscU7jLoA" frameborder="0" allowfullscreen></iframe>
</div>
<h3>最新直播 #4</h3>
</div>
<div class="video-card" data-aos="zoom-in" data-aos-delay="200">
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/o4Id83QeZFs" frameborder="0" allowfullscreen></iframe>
</div>
<h3>最新直播 #3</h3>
</div>
<div class="video-card" data-aos="zoom-in" data-aos-delay="300">
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/bs5okY1ELJk" frameborder="0" allowfullscreen></iframe>
</div>
<h3>最新直播 #2</h3>
</div>
<div class="video-card" data-aos="zoom-in" data-aos-delay="400">
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/8y1nIa4cGec" frameborder="0" allowfullscreen></iframe>
</div>
<h3>最新直播 #1</h3>
</div>
</div>
<div class="show-more-wrapper">
<a href="https://youtube.com/@plummarker41841/streams" class="show-more-btn" target="_blank">
顯示更多
<svg class="arrow-icon" viewBox="0 0 24 24" width="24" height="24">
<path fill="currentColor" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
</svg>
</a>
</div>
</div>
</section>
<!-- Popular Page -->
<section id="popular" class="page-section">
<div class="container">
<h2 data-aos="fade-right">熱門影片</h2>
<div class="video-grid">
<div class="video-card" data-aos="zoom-in">
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/Q-P_sim8K7M" frameborder="0" allowfullscreen></iframe>
</div>
<h3>熱門影片 #1</h3>
</div>
<div class="video-card" data-aos="zoom-in" data-aos-delay="100">
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/LgeNX9Jt2kI" frameborder="0" allowfullscreen></iframe>
</div>
<h3>熱門影片 #2</h3>
</div>
<div class="video-card" data-aos="zoom-in" data-aos-delay="200">
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/-LhOsfGOpuE" frameborder="0" allowfullscreen></iframe>
</div>
<h3>熱門影片 #3</h3>
</div>
<div class="video-card" data-aos="zoom-in" data-aos-delay="300">
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/T88h-n0o39s" frameborder="0" allowfullscreen></iframe>
</div>
<h3>熱門影片 #4</h3>
</div>
<div class="video-card" data-aos="zoom-in" data-aos-delay="400">
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/TWLFvbDOxVg" frameborder="0" allowfullscreen></iframe>
</div>
<h3>熱門影片 #5</h3>
</div>
<div class="video-card" data-aos="zoom-in" data-aos-delay="500">
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/ntakf3oiAbU" frameborder="0" allowfullscreen></iframe>
</div>
<h3>人氣影片 #6</h3>
</div>
</div>
</div>
</section>
<!-- Channel Page -->
<section id="channel" class="page-section">
<div class="container">
<h2 data-aos="fade-right">頻道資訊</h2>
<div class="channel-content">
<div class="channel-card" data-aos="fade-up">
<div class="channel-banner">
<img src="high_1737031876.jpg" alt="劉兵頻道" class="channel-avatar">
</div>
<h3>劉兵頻道</h3>
<p>如果你不訂閱我會很傷心;(</p>
<a href="https://youtube.com/@plummarker41841?sub_confirmation=1" class="youtube-link" target="_blank">
<svg viewBox="0 0 24 24" width="24" height="24">
<path fill="currentColor" d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
</svg>
訂閱頻道
</a>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<p>© 2025 劉兵頻道 版權所有</p>
<div class="footer-quote" data-aos="fade-up">
<p>"訂閱劉兵是是我做過最驕傲的事"</p>
<p class="quote-attribution">-愛因斯坦沒有說過</p>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>