-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
213 lines (197 loc) · 6.44 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
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>抽獎直播頁面</title>
<style>
<<<<<<< HEAD
<<<<<<< HEAD
body { font-family: Arial, sans-serif; }
.container { display: flex; }
.buttons-container {
flex: 1;
padding: 20px;
text-align: left;
}
.content-container {
flex: 4;
}
.live-stream { margin-top: 20px; width: 100%; }
.live-stream iframe { width: 100%; height: 800px; }
button {
padding: 50px 20px;
font-size: 20px;
margin-bottom: 50px;
width: 100%;
}
.lottery-info, .winner-info, .upcoming-lottery {
margin-top: 20px;
=======
/* 保持原有的樣式不變 */
=======
/* 您提供的樣式保持不變 */
>>>>>>> 9b23b0390f2b8083796c68996c2fac2b92ba3831
body { font-family: Arial, sans-serif; }
.container { display: flex; }
.buttons-container { flex: 1; padding: 20px; text-align: left; }
.content-container { flex: 4; }
.live-stream { margin-top: 20px; width: 100%; }
.live-stream iframe { width: 100%; height: 800px; }
button { padding: 50px 20px; font-size: 20px; margin-bottom: 50px; width: 100%; }
<<<<<<< HEAD
/* 新增的抽獎信息樣式 */
.lottery-info, .upcoming-lottery {
>>>>>>> d1946dc0e2e3a7a70c08fee5d4271bc964ceb145
=======
.lottery-info {
>>>>>>> 9b23b0390f2b8083796c68996c2fac2b92ba3831
margin-top: 20px;
padding: 20px;
font-size: 20px;
line-height: 1.8;
<<<<<<< HEAD
<<<<<<< HEAD
}
.info-title {
font-weight: bold;
margin-bottom: 10px;
}
=======
}
>>>>>>> d1946dc0e2e3a7a70c08fee5d4271bc964ceb145
=======
}
>>>>>>> 9b23b0390f2b8083796c68996c2fac2b92ba3831
</style>
</head>
<body>
<div class="container">
<div class="buttons-container">
<<<<<<< HEAD
<button onclick="switchStream('jess')">Jess</button>
=======
<button onclick="switchStream('jessie')">Jessie</button>
>>>>>>> d1946dc0e2e3a7a70c08fee5d4271bc964ceb145
<button onclick="switchStream('lala')">Lala</button>
</div>
<div class="content-container">
<div class="live-stream" id="liveStream">
<<<<<<< HEAD
<!-- 直播流占位符 -->
<iframe src="https://www.youtube.com/embed/LIVE_STREAM_ID" frameborder="0" allowfullscreen></iframe>
</div>
<div class="lottery-info">
<div id="currentLotteryInfo">
<!-- 動態載入的抽獎資訊會顯示在這裡 -->
</div>
</div>
<div class="winner-info">
<div id="currentWinnerInfo">
<!-- 動態載入的中獎資訊會顯示在這裡 -->
</div>
</div>
<div class="upcoming-lottery">
<div class="info-title">即將上台的5位抽獎人:</div>
<ul id="upcomingParticipants">
<!-- 動態載入的即將抽獎參與者名單會顯示在這裡 -->
</ul>
=======
<!-- YouTube 直播佔位符 -->
</div>
<div class="lottery-info" id="lotteryInfo">
<!-- 抽獎信息將在這裡顯示 -->
>>>>>>> d1946dc0e2e3a7a70c08fee5d4271bc964ceb145
</div>
</div>
</div>
<script>
<<<<<<< HEAD
<<<<<<< HEAD
var currentStream = 'jess';
function switchStream(streamName) {
var liveStream = document.getElementById('liveStream');
liveStream.innerHTML = '<iframe src="https://www.youtube.com/embed/' +
(streamName === 'jess' ? 'LIVE_STREAM_ID_1' : 'LIVE_STREAM_ID_2') +
'" frameborder="0" allowfullscreen></iframe>';
currentStream = streamName;
}
switchStream(currentStream);
var participantsDatabase = {
'1號': '王XX',
'2號': '劉AA',
// 可以繼續添加更多參與者信息...
};
var winnersDatabase = {
'1號': '恭喜獲得一等獎！',
'2號': '恭喜獲得二等獎！',
// 可以繼續添加更多中獎信息...
};
function updateLotteryInfo(participantNumber) {
var participantName = participantsDatabase[participantNumber] || '未知參與者';
var infoHtml = '<div>抽獎人號碼: ' + participantNumber + '</div>' +
'<div>抽獎人名字: ' + participantName + '</div>';
document.getElementById('currentLotteryInfo').innerHTML = infoHtml;
}
function updateWinnerInfo(participantNumber) {
var winnerMessage = winnersDatabase[participantNumber] || '無中獎信息';
var infoHtml = '<div>中獎人號碼: ' + participantNumber + '</div>' +
'<div>中獎人訊息: ' + winnerMessage + '</div>';
document.getElementById('currentWinnerInfo').innerHTML = infoHtml;
}
// 示範用法
updateLotteryInfo('1號');
updateWinnerInfo('2號');
=======
// 靜態數據庫模擬
var lotteryParticipants = {
'1': '王小明',
'2': '李小華',
'3': '你妳你'
};
var winners = {
'1': '張大勝',
'2': '周小輝',
'3': '我我我'
};
var currentStream = 'jessie'; // 默認直播流
=======
>>>>>>> 9b23b0390f2b8083796c68996c2fac2b92ba3831
function switchStream(streamName) {
var liveStream = document.getElementById('liveStream');
var streamId = streamName === 'jessie' ? 'LIVE_STREAM_ID_1' : 'LIVE_STREAM_ID_2';
liveStream.innerHTML = '<iframe src="https://www.youtube.com/embed/' + streamId +
'" frameborder="0" allowfullscreen></iframe>';
currentStream = streamName;
getLotteryInfo(streamName);
}
function getLotteryInfo(streamName) {
var xhr = new XMLHttpRequest();
xhr.open('GET', '/lottery-info?stream=' + streamName, true);
xhr.onload = function() {
if (this.status === 200) {
var response = JSON.parse(this.responseText);
updateLotteryInfo(response.participantNumber, response.participantName, response.winnerNumber, response.winnerName);
} else {
console.error('Error fetching lottery info');
}
};
xhr.send();
}
function updateLotteryInfo(participantNumber, participantName, winnerNumber, winnerName) {
var lotteryInfo = document.getElementById('lotteryInfo');
lotteryInfo.innerHTML = '<p>抽獎號碼: ' + participantNumber + '</p>' +
'<p>抽獎名子: ' + participantName + '</p>' +
'<p>中獎號碼: ' + winnerNumber + '</p>' +
'<p>送禮名子: ' + winnerName + '</p>';
}
<<<<<<< HEAD
switchStream(currentStream); // 初始化直播流
>>>>>>> d1946dc0e2e3a7a70c08fee5d4271bc964ceb145
=======
// 初始化直播流
switchStream('jessie');
>>>>>>> 9b23b0390f2b8083796c68996c2fac2b92ba3831
</script>
</body>
</html>