424 lines
16 KiB
PHP
Executable File
424 lines
16 KiB
PHP
Executable File
<html lang="vi">
|
|
<?php
|
|
// Mock Odds for Xoc Dia (Static Preview)
|
|
$odds = [
|
|
'chan' => 0.96,
|
|
'le' => 0.96,
|
|
'4red' => 12,
|
|
'4white' => 12,
|
|
'3red1white' => 2.6,
|
|
'3white1red' => 2.6
|
|
];
|
|
?>
|
|
<head>
|
|
<title>TM68 - Xóc Đĩa Live</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
|
<!-- Reuse existing styles -->
|
|
<link rel="stylesheet" href="/Static/css/style.css">
|
|
<link rel="stylesheet" href="/Static/ckplayer/css/ckplayer.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
<link rel="stylesheet" href="/Static/layui/css/layui.css">
|
|
|
|
<style>
|
|
/* 隐藏ckplayer控制条 */
|
|
.ckplayer-ckplayer .ck-bar, .ckplayer-ckplayer .ck-center-play, .ckplayer-ckplayer .ck-controls {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Xoc Dia Specific Styles */
|
|
.xocdia-top-row {
|
|
display: flex;
|
|
gap: 12px;
|
|
margin-bottom: 12px;
|
|
min-height: 100px;
|
|
}
|
|
|
|
.xocdia-big-btn {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
border: 2px solid rgba(255,255,255,0.1);
|
|
}
|
|
|
|
.xocdia-big-btn:hover {
|
|
transform: translateY(-2px);
|
|
filter: brightness(1.1);
|
|
}
|
|
|
|
.xocdia-big-btn.bet-chan {
|
|
background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
|
|
box-shadow: 0 4px 15px rgba(30, 58, 138, 0.4);
|
|
}
|
|
|
|
.xocdia-big-btn.bet-le {
|
|
background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
|
|
box-shadow: 0 4px 15px rgba(185, 28, 28, 0.4);
|
|
}
|
|
|
|
.xocdia-title {
|
|
font-size: 28px;
|
|
font-weight: 900;
|
|
color: #fff;
|
|
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
|
|
margin-bottom: 4px;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.xocdia-subtitle {
|
|
font-size: 11px;
|
|
color: rgba(255,255,255,0.8);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.xocdia-odds {
|
|
background: rgba(0,0,0,0.3);
|
|
padding: 2px 10px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: #ffd700;
|
|
border: 1px solid rgba(255,215,0,0.3);
|
|
}
|
|
|
|
.xocdia-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 10px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.xocdia-cell {
|
|
background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 12px;
|
|
padding: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
min-height: 80px;
|
|
position: relative;
|
|
}
|
|
|
|
.xocdia-cell:hover {
|
|
transform: translateY(-2px);
|
|
border-color: #3b82f6;
|
|
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
|
|
}
|
|
|
|
.xocdia-dots {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 4px;
|
|
width: 28px;
|
|
}
|
|
|
|
.dot {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
display: block;
|
|
box-shadow: inset 0 -1px 2px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.dot.red {
|
|
background-color: #ef4444;
|
|
border: 1px solid #dc2626;
|
|
}
|
|
|
|
.dot.white {
|
|
background-color: #fff;
|
|
border: 1px solid #cbd5e1;
|
|
}
|
|
|
|
.xocdia-label {
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
color: #334155;
|
|
text-align: center;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.xocdia-cell .bet-odds-mini {
|
|
margin-top: 0;
|
|
background: rgba(0,0,0,0.05);
|
|
color: #64748b;
|
|
}
|
|
|
|
/* Mobile Responsive Adjustments */
|
|
@media (max-width: 768px) {
|
|
.xocdia-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
.xocdia-top-row {
|
|
min-height: 80px;
|
|
}
|
|
}
|
|
|
|
/* PC Specific Adjustments matching live.php style */
|
|
@media (min-width: 769px) {
|
|
html, body {
|
|
background: #000;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
}
|
|
.live-wrapper {
|
|
height: 100vh;
|
|
max-width: 1600px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.live-layout {
|
|
display: grid;
|
|
grid-template-columns: 1.5fr 1fr;
|
|
gap: 20px;
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
.bet-panel-v2 {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
background: rgba(255, 255, 255, 0.98);
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
}
|
|
.xocdia-top-row {
|
|
min-height: 120px;
|
|
}
|
|
.xocdia-grid {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="live-body" style="background-color: black;">
|
|
<img id="bg-img" src="/Static/tm68/background.png" alt="Background" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;">
|
|
|
|
<div class="live-wrapper">
|
|
<!-- Top Bar (Reused) -->
|
|
<div class="live-topbar">
|
|
<div class="live-topbar-left">
|
|
<button class="live-circle-btn" type="button" onclick="window.location.href='/'"><i class="fa-solid fa-arrow-left"></i></button>
|
|
<div class="live-balance">
|
|
<div class="live-balance-coin"><i class="fa-solid fa-dollar-sign"></i></div>
|
|
<div class="live-balance-text">
|
|
<div class="live-balance-id">ID: <?= htmlspecialchars($user['username'] ?? 'User') ?></div>
|
|
<div class="live-balance-amount"><?= number_format(($user['balance'] ?? 0) / 1000, 0, ',', '.') ?>k</div>
|
|
</div>
|
|
<button class="live-circle-btn live-refresh"><i class="fa-solid fa-rotate-right"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="live-topbar-right">
|
|
<button class="lobby-icon-btn"><i class="fa-solid fa-user"></i></button>
|
|
<button class="lobby-icon-btn"><i class="fa-solid fa-bars"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="live-layout live-layout-v2">
|
|
<!-- Left: Video Stream -->
|
|
<div class="live-left">
|
|
<div class="live-panel live-stream live-stream-v2" style="background: #000; position: relative;">
|
|
<div class="live-stream-main">
|
|
<!-- Placeholder for CKPlayer -->
|
|
<div id="tm68LivePlayer" class="live-player" data-stream="<?= htmlspecialchars($streamUrl ?? '') ?>"></div>
|
|
<div class="live-player-info" style="position: absolute; bottom: 10px; right: 10px; color: #fff; text-align: right; z-index: 10;">
|
|
<div class="live-player-period">G1202512200001</div>
|
|
<div class="live-player-datetime">Loading...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Roadmap (Optional for Xoc Dia, simplified) -->
|
|
<div class="live-panel live-history" style="margin-top: 15px; background: rgba(255,255,255,0.9); padding: 10px; border-radius: 12px; height: 150px;">
|
|
<div style="font-size: 12px; font-weight: bold; color: #333; margin-bottom: 5px;">Lịch sử cầu</div>
|
|
<div style="display: flex; gap: 5px; flex-wrap: wrap;">
|
|
<!-- Mock History Dots -->
|
|
<span class="dot red"></span><span class="dot white"></span><span class="dot red"></span><span class="dot red"></span>
|
|
<span class="dot white"></span><span class="dot white"></span><span class="dot red"></span><span class="dot white"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: Xoc Dia Betting Panel -->
|
|
<div class="live-panel bet-panel bet-panel-v2">
|
|
<!-- Overlay for Countdown/Lock -->
|
|
<div id="betOverlay" class="bet-overlay hidden" style="position: absolute; inset: 0; background: rgba(0,0,0,0.6); z-index: 50; display: none; align-items: center; justify-content: center; flex-direction: column; border-radius: 16px;">
|
|
<div id="statusDisplay" class="status-text" style="color: #fff; font-size: 24px; font-weight: bold;">ĐANG TẢI...</div>
|
|
</div>
|
|
|
|
<!-- Timer -->
|
|
<div id="activeCountdown" style="text-align: right; margin-bottom: 10px; font-weight: bold; color: #333;">
|
|
<i class="fa-regular fa-clock"></i> <span id="activeTimer" style="color: #d93025; font-size: 18px;">60</span>s
|
|
</div>
|
|
|
|
<!-- Main Bets: Chan / Le -->
|
|
<div class="xocdia-top-row">
|
|
<div class="xocdia-big-btn bet-chan" data-bet-type="chan" data-odds="1:<?= $odds['chan'] ?>">
|
|
<div class="xocdia-title">CHẴN</div>
|
|
<div class="xocdia-subtitle">4 Đỏ, 4 Trắng, 2 Đỏ 2 Trắng</div>
|
|
<div class="xocdia-odds">1:<?= $odds['chan'] ?></div>
|
|
<div class="bet-amount-display" style="display:none"></div>
|
|
</div>
|
|
<div class="xocdia-big-btn bet-le" data-bet-type="le" data-odds="1:<?= $odds['le'] ?>">
|
|
<div class="xocdia-title">LẺ</div>
|
|
<div class="xocdia-subtitle">3 Đỏ 1 Trắng, 3 Trắng 1 Đỏ</div>
|
|
<div class="xocdia-odds">1:<?= $odds['le'] ?></div>
|
|
<div class="bet-amount-display" style="display:none"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Grid Bets: Specific Colors -->
|
|
<div class="xocdia-grid">
|
|
<div class="xocdia-cell" data-bet-type="4red" data-odds="1:<?= $odds['4red'] ?>">
|
|
<div class="xocdia-dots"><span class="dot red"></span><span class="dot red"></span><span class="dot red"></span><span class="dot red"></span></div>
|
|
<div class="xocdia-label">4 ĐỎ</div>
|
|
<div class="bet-odds-mini">1:<?= $odds['4red'] ?></div>
|
|
<div class="bet-amount-display" style="display:none"></div>
|
|
</div>
|
|
<div class="xocdia-cell" data-bet-type="3red1white" data-odds="1:<?= $odds['3red1white'] ?>">
|
|
<div class="xocdia-dots"><span class="dot red"></span><span class="dot red"></span><span class="dot red"></span><span class="dot white"></span></div>
|
|
<div class="xocdia-label">3 ĐỎ 1 TRẮNG</div>
|
|
<div class="bet-odds-mini">1:<?= $odds['3red1white'] ?></div>
|
|
<div class="bet-amount-display" style="display:none"></div>
|
|
</div>
|
|
<div class="xocdia-cell" data-bet-type="3white1red" data-odds="1:<?= $odds['3white1red'] ?>">
|
|
<div class="xocdia-dots"><span class="dot white"></span><span class="dot white"></span><span class="dot white"></span><span class="dot red"></span></div>
|
|
<div class="xocdia-label">3 TRẮNG 1 ĐỎ</div>
|
|
<div class="bet-odds-mini">1:<?= $odds['3white1red'] ?></div>
|
|
<div class="bet-amount-display" style="display:none"></div>
|
|
</div>
|
|
<div class="xocdia-cell" data-bet-type="4white" data-odds="1:<?= $odds['4white'] ?>">
|
|
<div class="xocdia-dots"><span class="dot white"></span><span class="dot white"></span><span class="dot white"></span><span class="dot white"></span></div>
|
|
<div class="xocdia-label">4 TRẮNG</div>
|
|
<div class="bet-odds-mini">1:<?= $odds['4white'] ?></div>
|
|
<div class="bet-amount-display" style="display:none"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="bet-actions bet-actions-v2">
|
|
<button class="bet-action bet-action-green" type="button" id="confirmBetBtn">
|
|
<i class="fa-solid fa-check"></i> <span>ĐẶT CƯỢC</span>
|
|
</button>
|
|
<button class="bet-action bet-action-red" type="button" id="cancelBetBtn">
|
|
<i class="fa-solid fa-xmark"></i> <span>HỦY</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Chips -->
|
|
<div class="bet-chips bet-chips-v2">
|
|
<button class="bet-chip-btn" data-amount="100000" data-label="100K"><div class="bet-chip-display chip-red">100K</div></button>
|
|
<button class="bet-chip-btn" data-amount="500000" data-label="500K"><div class="bet-chip-display chip-blue">500K</div></button>
|
|
<button class="bet-chip-btn" data-amount="1000000" data-label="1M"><div class="bet-chip-display chip-gold">1M</div></button>
|
|
<button class="bet-chip-btn" data-amount="5000000" data-label="5M"><div class="bet-chip-display chip-green">5M</div></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/Static/layui/layui.js"></script>
|
|
<script src="/Static/ckplayer/js/ckplayer.js"></script>
|
|
<script>
|
|
layui.use(['layer'], function(){
|
|
var layer = layui.layer;
|
|
var betState = { selectedChip: null, bets: {} };
|
|
|
|
// --- Chip Selection ---
|
|
document.querySelectorAll('.bet-chip-btn').forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
document.querySelectorAll('.bet-chip-btn').forEach(b => b.classList.remove('chip-selected'));
|
|
this.classList.add('chip-selected');
|
|
var amount = this.getAttribute('data-amount');
|
|
var color = this.querySelector('.bet-chip-display').className.match(/chip-(\w+)/)[1];
|
|
betState.selectedChip = { amount: parseInt(amount), color: color };
|
|
});
|
|
});
|
|
|
|
// --- Bet Placement ---
|
|
document.querySelectorAll('.xocdia-big-btn, .xocdia-cell').forEach(el => {
|
|
el.addEventListener('click', function() {
|
|
if(!betState.selectedChip) {
|
|
layer.msg('Vui lòng chọn chip (số tiền) trước!');
|
|
return;
|
|
}
|
|
|
|
var type = this.getAttribute('data-bet-type');
|
|
var odds = this.getAttribute('data-odds');
|
|
|
|
// Add to bet state
|
|
if(!betState.bets[type]) {
|
|
betState.bets[type] = { amount: 0, odds: odds };
|
|
}
|
|
betState.bets[type].amount += betState.selectedChip.amount;
|
|
|
|
// Visual Update
|
|
updateBetVisual(this, betState.bets[type].amount, betState.selectedChip.color);
|
|
this.classList.add('bet-selected');
|
|
});
|
|
});
|
|
|
|
function updateBetVisual(el, totalAmount, color) {
|
|
var display = el.querySelector('.bet-amount-display');
|
|
display.style.display = 'flex';
|
|
display.innerHTML = `
|
|
<div class="bet-chip-wrapper">
|
|
<div class="bet-chip-icon chip-${color}"></div>
|
|
</div>
|
|
<div class="bet-amount-text">${formatAmount(totalAmount)}</div>
|
|
`;
|
|
}
|
|
|
|
function formatAmount(n) {
|
|
if(n >= 1000000) return (n/1000000) + 'M';
|
|
if(n >= 1000) return (n/1000) + 'K';
|
|
return n;
|
|
}
|
|
|
|
// --- Actions ---
|
|
document.getElementById('cancelBetBtn').addEventListener('click', function() {
|
|
betState.bets = {};
|
|
document.querySelectorAll('.bet-amount-display').forEach(d => {
|
|
d.innerHTML = '';
|
|
d.style.display = 'none';
|
|
});
|
|
document.querySelectorAll('.bet-selected').forEach(e => e.classList.remove('bet-selected'));
|
|
});
|
|
|
|
document.getElementById('confirmBetBtn').addEventListener('click', function() {
|
|
var keys = Object.keys(betState.bets);
|
|
if(keys.length === 0) return;
|
|
|
|
layer.msg('Đang gửi cược...', {icon: 16, shade: 0.01});
|
|
|
|
// Simulation of API Call
|
|
setTimeout(() => {
|
|
layer.msg('Đặt cược thành công!', {icon: 1});
|
|
// Reset visual but maybe keep state until confirmed by server in real app
|
|
document.getElementById('cancelBetBtn').click();
|
|
}, 1000);
|
|
});
|
|
|
|
// --- Clock Simulation ---
|
|
setInterval(() => {
|
|
var d = new Date();
|
|
document.querySelector('.live-player-datetime').innerText = d.toLocaleTimeString();
|
|
}, 1000);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|