75 lines
2.6 KiB
HTML
75 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>麻将直播叠加层</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<!-- 视频容器 -->
|
|
<div class="video-container">
|
|
<video id="backgroundVideo" autoplay muted loop playsinline>
|
|
<source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/720/Big_Buck_Bunny_720_10s_1MB.mp4" type="video/mp4">
|
|
您的浏览器不支持视频标签
|
|
</video>
|
|
</div>
|
|
|
|
<!-- 玩家信息面板 -->
|
|
<div class="players-container">
|
|
<!-- 北家 -->
|
|
<div class="player-panel north" data-player="0">
|
|
<div class="player-header">
|
|
<div class="player-name">北家</div>
|
|
<div class="tenpai-indicator" style="display: none;">🔴 听牌</div>
|
|
</div>
|
|
<div class="player-score">25000</div>
|
|
</div>
|
|
|
|
<!-- 东家 -->
|
|
<div class="player-panel east" data-player="1">
|
|
<div class="player-header">
|
|
<div class="player-name">东家</div>
|
|
<div class="tenpai-indicator" style="display: none;">🔴 听牌</div>
|
|
</div>
|
|
<div class="player-score">25000</div>
|
|
</div>
|
|
|
|
<!-- 南家 -->
|
|
<div class="player-panel south" data-player="2">
|
|
<div class="player-header">
|
|
<div class="player-name">南家</div>
|
|
<div class="tenpai-indicator" style="display: none;">🔴 听牌</div>
|
|
</div>
|
|
<div class="player-score">25000</div>
|
|
</div>
|
|
|
|
<!-- 西家 -->
|
|
<div class="player-panel west" data-player="3">
|
|
<div class="player-header">
|
|
<div class="player-name">西家</div>
|
|
<div class="tenpai-indicator" style="display: none;">🔴 听牌</div>
|
|
</div>
|
|
<div class="player-score">25000</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 本场与立直棒 -->
|
|
<div class="game-info">
|
|
<div class="honba">本场: <span id="honba-count">0</span></div>
|
|
<div class="riichi">立直棒: <span id="riichi-count">0</span></div>
|
|
</div>
|
|
|
|
<!-- 胡牌动画容器 -->
|
|
<div id="win-animation" class="win-animation" style="display: none;">
|
|
<div class="win-text"></div>
|
|
<div class="win-details"></div>
|
|
<div class="win-score"></div>
|
|
</div>
|
|
|
|
<!-- 分数变动指示 -->
|
|
<div id="score-change-indicators" class="score-change-indicators"></div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html> |