-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
274 lines (256 loc) · 9.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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liborpie Studio Game</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #121212;
color: #ffffff;
}
header {
background-color: #1e1e1e;
color: white;
padding: 15px;
text-align: center;
}
nav {
background-color: #333;
overflow: hidden;
}
nav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
nav a:hover {
background-color: #555;
color: white;
}
.container {
padding: 20px;
}
.game-image {
max-width: 100%;
height: auto;
}
.game-video {
width: 100%;
height: auto;
}
.friend-link {
margin-top: 20px;
}
.friend-link a {
color: #4CAF50;
text-decoration: none;
}
.image-gallery {
position: relative;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.image-gallery img {
width: 100%;
display: none;
}
.image-gallery img.active {
display: block;
}
.image-gallery button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
}
.image-gallery button.prev {
left: 10px;
}
.image-gallery button.next {
right: 10px;
}
.video-gallery {
position: relative;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.video-gallery video {
width: 100%;
display: none;
}
.video-gallery video.active {
display: block;
}
.video-gallery button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
}
.video-gallery button.prev {
left: 10px;
}
.video-gallery button.next {
right: 10px;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
color: #000;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<header>
<h1>欢迎来到Liborpie Studio Game</h1>
</header>
<nav>
<a href="#home">欢迎</a>
<a href="#game">介绍</a>
<a href="#gallery">画廊</a>
<a href="#video">宣传视频</a>
<a href="#contact">联系我们</a>
</nav>
<div class="container">
<h2 id="home">欢迎</h2>
<p>欢迎来到Liborpie Studio Game，我们致力于为您提供最精彩的游戏体验。</p>
<h2 id="game">介绍</h2>
<p>我们的游戏是一款充满创意和乐趣的冒险游戏。您可以在游戏中探索神秘的世界，解决各种谜题，并与各种角色互动。游戏拥有精美的画面和引人入胜的剧情，让您沉浸在一个全新的虚拟世界中。</p>
<p>在游戏中，您将扮演一个勇敢的冒险者，穿越各种地形，从茂密的森林到荒凉的沙漠，从寒冷的雪山到炽热的火山。每个地方都有独特的挑战和谜题等待您去解决。</p>
<p>此外，游戏还提供了丰富的角色定制选项，让您可以根据自己的喜好来打造独一无二的角色。您可以选择不同的服装、武器和技能，以适应不同的游戏场景和挑战。</p>
<a href="https://www.liborpie.com/game" target="_blank">了解更多</a>
<h2 id="gallery">画廊</h2>
<div class="image-gallery">
<img src="https://www.liborpie.com/game/images/game-screenshot1.jpg" alt="图片1" class="game-image active">
<img src="https://www.liborpie.com/game/images/game-screenshot2.jpg" alt="图片2" class="game-image">
<img src="https://www.liborpie.com/game/images/game-screenshot3.jpg" alt="图片3" class="game-image">
<button class="prev" onclick="prevImage()">←</button>
<button class="next" onclick="nextImage()">→</button>
</div>
<h2 id="video">宣传视频</h2>
<div class="video-gallery">
<video controls class="game-video active">
<source src="https://www.liborpie.com/game/videos/game-trailer1.mp4" type="video/mp4">
您的浏览器不支持视频标签。
</video>
<video controls class="game-video">
<source src="https://www.liborpie.com/game/videos/game-trailer2.mp4" type="video/mp4">
您的浏览器不支持视频标签。
</video>
<video controls class="game-video">
<source src="https://www.liborpie.com/game/videos/game-trailer3.mp4" type="video/mp4">
您的浏览器不支持视频标签。
</video>
<button class="prev" onclick="prevVideo()">←</button>
<button class="next" onclick="nextVideo()">→</button>
</div>
<h2 id="contact">联系我们</h2>
<p>如果您有任何问题或建议，请随时联系我们：</p>
<p>邮箱：li2012@outlook.com</p>
<p>网站：<a href="https://li2012.mysxl.cn" target="_blank">https://li2012.mysxl.cn</a></p></p>
<h2 class="friend-link">友情链接</h2>
<a href="https://www.ccw.site" target="_blank">共创世界</a> |
<a href="https://github.com/" target="_blank">Github</a> |
<a href="https://www.bilibili.com/" target="_blank">Bilibili</a>
</div>
<!-- 弹窗 -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal()">×</span>
<h2>欢迎来到Liborpie Studio Game</h2>
<p>我们很高兴您能加入我们，探索这个充满奇迹的游戏世界。</p>
<img src="https://www.liborpie.com/game/images/game-screenshot1.jpg" alt="游戏截图" class="game-image">
<video controls class="game-video">
<source src="https://www.liborpie.com/game/videos/game-trailer1.mp4" type="video/mp4">
您的浏览器不支持视频标签。
</video>
<p>了解更多关于我们的游戏，请点击下面的链接：</p>
<a href="https://www.liborpie.com/game" target="_blank" class="friend-link">了解更多</a>
</div>
</div>
<script>
let currentImage = 0;
const images = document.querySelectorAll('.image-gallery img');
function showImage(index) {
images.forEach((img, i) => {
img.classList.toggle('active', i === index);
});
}
function prevImage() {
currentImage = (currentImage - 1 + images.length) % images.length;
showImage(currentImage);
}
function nextImage() {
currentImage = (currentImage + 1) % images.length;
showImage(currentImage);
}
showImage(currentImage);
let currentVideo = 0;
const videos = document.querySelectorAll('.video-gallery video');
function showVideo(index) {
videos.forEach((video, i) => {
video.classList.toggle('active', i === index);
});
}
function prevVideo() {
currentVideo = (currentVideo - 1 + videos.length) % videos.length;
showVideo(currentVideo);
}
function nextVideo() {
currentVideo = (currentVideo + 1) % videos.length;
showVideo(currentVideo);
}
showVideo(currentVideo);
// 弹窗功能
document.addEventListener('DOMContentLoaded', function() {
var modal = document.getElementById('myModal');
modal.style.display = 'block';
});
function closeModal() {
var modal = document.getElementById('myModal');
modal.style.display = 'none';
}
</script>
</body>
</html>