-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
146 lines (140 loc) · 7.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>黃金蘋果模擬器</title>
<meta name="keywords" content="黃金蘋果模擬器">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="./public/css/style.css">
</head>
<body>
<div class="wrap">
<header>
<h1>黃金蘋果模擬器</h1>
<img class="dm" src="./public/images/dm.jpg" alt="">
<img class="apple1" src="./public/images/apple.jpg" alt="">
<img class="apple2" src="./public/images/apple2.jpg" alt="">
</header>
<main>
<div class="form">
<button class="btn btn-warning" id="buyBtn"><i class="bi bi-cart3"></i>購買一組</button>
<button class="btn btn-warning" id="goldboxBtn">兌換幸運的金色箱子1個 ( 消耗碎片100 )</button>
<div class="props">
<ul class="flex">
<li>
<p><img class="formImg" src="./public/images/apple_img.jpg" alt="">:<label id="apples">0</label></p>
</li>
<li>
<p><img class="formImg" src="./public/images/applechip.jpg" alt="">:<label id="appleChips">0</label></p>
</li>
<li>
<p><img class="formImg" src="./public/images/goldbox.jpg" alt="">:<label id="goldBox">0</label></p>
</li>
<li>
<p><img class="formImg" src="./public/images/blackchip.jpg" alt="">:<label id="blackChips">0</label></p>
</li>
<li>
<p><img class="formImg" src="./public/images/gourd.jpg" alt="">:<label id="gourd">0</label></p>
</li>
<li>
<p><img class="formImg" src="./public/images/FrenzyTotem.jpg" alt="">:<label id="FrenzyTotem">0</label></p>
</li>
</ul>
<ul class="flex">
<li>
<p><img class="formImg" src="./public/images/blackchips1.jpg" alt="">:<label id="blackchips1">0</label></p>
</li>
<li>
<p><img class="formImg" src="./public/images/blackchips2.jpg" alt="">:<label id="blackchips2">0</label></p>
</li>
<li>
<p><img class="formImg" src="./public/images/blackchips3.jpg" alt="">:<label id="blackchips3">0</label></p>
</li>
<li>
<p><img class="formImg" src="./public/images/blackchips4.jpg" alt="">:<label id="blackchips4">0</label></p>
</li>
<li>
<p><img class="formImg" src="./public/images/blackchips5.jpg" alt="">:<label id="blackchips5">0</label></p>
</li>
<li>
<p><img class="formImg" src="./public/images/blackchips6.jpg" alt="">:<label id="blackchips6">0</label></p>
</li>
<li>
<p><img class="formImg" src="./public/images/blackchips7.jpg" alt="">:<label id="blackchips7">0</label></p>
</li>
<li>
<p><img class="formImg" src="./public/images/blackchips8.jpg" alt="">:<label id="blackchips8">0</label></p>
</li>
<li>
<p><img class="formImg" src="./public/images/blackchips9.jpg" alt="">:<label id="blackchips9">0</label></p>
</li>
<li>
<p><img class="formImg" src="./public/images/blackchips10.jpg" alt="">:<label id="blackchips10">0</label></p>
</li>
</ul>
<h2>累計第<label id="count">0</label>抽 ; 第<label id="boxCount">0</label>個金箱 ; 蘋果購買花費<label id="spend">0</label>$</h2>
</div>
<div class="flex-space-between">
<div>
<button class="btn btn-danger" id="openBtn">開抽蘋果</button>
<button class="btn btn-danger" id="openboxBtn">開抽金箱</button>
<button class="btn btn-danger" id="blackchipBtn">兌換漆黑的BOSS飾品 ( 消耗碎片50 )</button>
</div>
<div>
<button class="btn btn-danger" id="drawallBtn">一鍵水溝<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" id="loading"></span></button>
<button class="btn btn-danger" id="resetBtn">重置</button>
</div>
</div>
</div>
<div class="prize" id="prize" tabindex="-1">
<!-- 廣頻 -->
</div>
</main>
<footer>
Copyright © 2022 - AndyWang505.<a href="https://github.com/AndyWang505/Maplestory-GoldenApple" target="_blank">source</a>
</footer>
<button type="button" class="bgm-icon" id="bgm-icon">
<img class="music-play" id="music-play" src="./public/images/music-player.svg" style="width: 16px; height: 16px;" alt="">
<img class="music-pause" id="music-pause" src="./public/images/music-pause.svg" style="width: 16px; height: 16px;" alt="">
</button>
</div>
<!-- BGM -->
<audio class="bgm" id="bgm" src="[MapleStory BGM] Grand Athenaeum Evening Primrose.mp3" autoplay loop="true"></audio>
<script type="text/javascript" src="./bundle.js"></script>
<!-- <script type="text/javascript" src="prizeData.json"></script> -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const bgmIcon = document.getElementById('bgm-icon');
const musicPlay = document.getElementById('music-play');
const musicPause = document.getElementById('music-pause');
const audio = document.getElementById('bgm');
// 確保在頁面加載時自動播放音樂
audio.play().catch(error => {
console.log('Auto-play was prevented:', error);
});
bgmIcon.addEventListener('click', () => {
if (audio.paused) {
audio.play();
musicPlay.style.display = "none";
musicPause.style.display = "block";
} else {
audio.pause();
musicPlay.style.display = "block";
musicPause.style.display = "none";
}
});
// 初始化圖標顯示狀態
if (audio.paused) {
musicPlay.style.display = "block";
musicPause.style.display = "none";
} else {
musicPlay.style.display = "none";
musicPause.style.display = "block";
}
});
</script>
</body>
</html>