LotteryTest / index.html
DennisChan0909's picture
feat: add ๅคงๆจ‚้€ accuracy649.html backtest report + link in tab
4465ded
Raw
History Blame Contribute Delete
18.6 kB
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ๅฐ็ฃๅฝฉๅˆธ AI ้ ๆธฌ็ณป็ตฑ</title>
<meta name="description" content="ๅฐ็ฃไปŠๅฝฉ539ใ€ๅคงๆจ‚้€้–‹็Ž่™Ÿ็ขผๆญทๅฒ็ตฑ่จˆ่ˆ‡AI้ ๆธฌๅˆ†ๆž็ณป็ตฑ๏ผŒๆไพ›็†ฑ่™Ÿใ€ๅ†ท่™Ÿใ€้ฒๅˆฐ่™Ÿๅˆ†ๆžๅŠไธ‹ๆœŸ่™Ÿ็ขผ้ ๆธฌใ€‚" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Background particles -->
<div class="bg-particles" id="bgParticles"></div>
<!-- Header -->
<header class="site-header">
<div class="header-inner">
<div class="logo">
<span class="logo-icon">๐ŸŽฐ</span>
<div class="logo-text">
<h1>ๅฐ็ฃๅฝฉๅˆธ AI</h1>
<span>ๆ™บ่ƒฝ้ ๆธฌๅˆ†ๆž็ณป็ตฑ</span>
</div>
</div>
<div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap">
<a href="accuracy.html" style="display:inline-flex;align-items:center;gap:6px;padding:8px 18px;background:rgba(124,58,237,0.2);border:1px solid rgba(124,58,237,0.4);border-radius:9999px;color:#c084fc;font-size:0.82rem;font-weight:600;text-decoration:none;transition:all 0.2s" onmouseover="this.style.background='rgba(124,58,237,0.35)'" onmouseout="this.style.background='rgba(124,58,237,0.2)'">
๐Ÿ“Š ๅ‘ฝไธญ็އๅ›žๆธฌ
</a>
</div>
<!-- 539 meta (shown when 539 tab active) -->
<div class="header-meta tab-meta" id="meta-539">
<div class="meta-item">
<span class="meta-label">่ณ‡ๆ–™็ญ†ๆ•ธ</span>
<span class="meta-value" id="totalDraws">่ผ‰ๅ…ฅไธญ...</span>
</div>
<div class="meta-item">
<span class="meta-label">ๆœ€ๆ–ฐไธ€ๆœŸ</span>
<span class="meta-value" id="latestDate">่ผ‰ๅ…ฅไธญ...</span>
</div>
<div class="meta-item">
<span class="meta-label">ๆ›ดๆ–ฐๆ™‚้–“</span>
<span class="meta-value" id="generatedAt">่ผ‰ๅ…ฅไธญ...</span>
</div>
</div>
<!-- 649 meta (shown when 649 tab active) -->
<div class="header-meta tab-meta" id="meta-649" style="display:none">
<div class="meta-item">
<span class="meta-label">่ณ‡ๆ–™็ญ†ๆ•ธ</span>
<span class="meta-value" id="totalDraws_649">่ผ‰ๅ…ฅไธญ...</span>
</div>
<div class="meta-item">
<span class="meta-label">ๆœ€ๆ–ฐไธ€ๆœŸ</span>
<span class="meta-value" id="latestDate_649">่ผ‰ๅ…ฅไธญ...</span>
</div>
<div class="meta-item">
<span class="meta-label">ๆ›ดๆ–ฐๆ™‚้–“</span>
<span class="meta-value" id="generatedAt_649">่ผ‰ๅ…ฅไธญ...</span>
</div>
</div>
</div>
</header>
<!-- Tab Navigation -->
<div class="tab-nav">
<div class="tab-nav-inner">
<button class="tab-btn tab-btn-539 active" id="tabBtn539" onclick="switchTab('539')">
๐ŸŽฏ ไปŠๅฝฉ539
</button>
<button class="tab-btn tab-btn-649" id="tabBtn649" onclick="switchTab('649')">
๐Ÿ† ๅคงๆจ‚้€
</button>
</div>
</div>
<!-- โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ• -->
<!-- TAB: ไปŠๅฝฉ539 -->
<!-- โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ• -->
<div id="tab-539" class="tab-content active">
<main class="main-content">
<!-- Prediction Panel -->
<section class="section prediction-section">
<div class="section-header">
<h2 class="section-title">๐ŸŽฏ ไธ‹ๆœŸ้ ๆธฌ่™Ÿ็ขผ</h2>
<p class="section-subtitle">ๆจกๅž‹๏ผšM3 SpreadOverdue โ€” ๅฐ‡ 1โ€“39 ๅˆ†ๆˆ 5 ๅ€้–“๏ผŒๆฏๅ€้ธๆœ€ไน…ๆœชๅ‡บ็พ่™Ÿ็ขผ๏ผŒๅ›žๆธฌโ‰ฅ1ๅ‘ฝไธญ็އ 51.30%</p>
</div>
<div class="prediction-card glass-card">
<div class="balls-container" id="predictionBalls">
<div class="ball-placeholder"></div>
<div class="ball-placeholder"></div>
<div class="ball-placeholder"></div>
<div class="ball-placeholder"></div>
<div class="ball-placeholder"></div>
</div>
<button class="predict-btn" id="predictBtn" onclick="runPrediction()">
<span class="btn-icon">๐Ÿ”ฎ</span>
<span>้‡ๆ–ฐ้ ๆธฌ</span>
</button>
<div class="prediction-note">
โš ๏ธ ๅฝฉๅˆธๅ…ทๆœ‰ไธ็ขบๅฎšๆ€ง๏ผŒๆœฌ้ ๆธฌๅƒ…ไพ›ๅƒ่€ƒๅจ›ๆจ‚๏ผŒ่ซ‹็†ๆ€ง่ณผ่ฒทใ€‚
</div>
</div>
</section>
<!-- Stats Row -->
<section class="section stats-section">
<div class="stats-grid">
<div class="stat-card glass-card">
<div class="stat-card-header">
<span class="stat-icon">๐Ÿ”ฅ</span>
<h3>็†ฑ้–€่™Ÿ็ขผ Top 10</h3>
<span class="stat-badge">ๅ‡บ็พๆœ€ๅคš</span>
</div>
<div class="number-badges" id="hotNumbers"></div>
</div>
<div class="stat-card glass-card">
<div class="stat-card-header">
<span class="stat-icon">๐ŸงŠ</span>
<h3>ๅ†ท้–€่™Ÿ็ขผ Top 10</h3>
<span class="stat-badge cold">ๅ‡บ็พๆœ€ๅฐ‘</span>
</div>
<div class="number-badges" id="coldNumbers"></div>
</div>
<div class="stat-card glass-card">
<div class="stat-card-header">
<span class="stat-icon">โฐ</span>
<h3>้ฒๅˆฐ่™Ÿ็ขผ Top 10</h3>
<span class="stat-badge overdue">ๆœ€ไน…ๆœชๅ‡บ็พ</span>
</div>
<div class="number-badges" id="overdueNumbers"></div>
</div>
</div>
</section>
<!-- Probability Ranking Table -->
<section class="section ranking-section">
<div class="glass-card">
<div class="section-header">
<h2 class="section-title">๐Ÿ… ๅ…จ่™Ÿ็ขผ้ ๆธฌๆฉŸ็އๆŽ’ๅบ (01โ€“39)</h2>
<div style="font-size:0.75rem;color:var(--text-muted);line-height:1.6">
่ฉ•ๅˆ†ๅ…ฌๅผ๏ผš<span style="color:#c084fc">้ฒๅˆฐๆœŸๆ•ธ 50%</span> + <span style="color:#67e8f9">ๅ†ท้–€็จ‹ๅบฆ 30%</span> + <span style="color:#86efac">่ฟ‘30ๆœŸๆœชๅ‡บ็พ 20%</span>
</div>
</div>
<div class="table-wrapper">
<table class="history-table" style="font-size:0.82rem">
<thead>
<tr>
<th style="width:44px">ๆŽ’ๅ</th>
<th style="width:52px">่™Ÿ็ขผ</th>
<th>้ ๆธฌๅพ—ๅˆ†</th>
<th>้ฒๅˆฐๆœŸๆ•ธ</th>
<th>ๆญทๅฒๅ‡บ็พ</th>
<th>่ฟ‘30ๆœŸ</th>
<th>ๅˆ†้ …ๅพ—ๅˆ†<span style="font-size:0.65rem;opacity:0.6;margin-left:4px">(้ฒ+ๅ†ท+่ฟ‘)</span></th>
<th style="width:60px"></th>
</tr>
</thead>
<tbody id="rankingBody">
<tr><td colspan="8" class="loading-row">โณ ่จˆ็ฎ—ไธญ...</td></tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Frequency Chart -->
<section class="section chart-section">
<div class="glass-card chart-card">
<div class="section-header">
<h2 class="section-title">๐Ÿ“Š ๅ…จ่™Ÿ็ขผๅ‡บ็พ้ ป็އ (01โ€“39)</h2>
<div class="chart-controls">
<button class="chip active" onclick="setSort('number', this)">ๆŒ‰่™Ÿ็ขผๆŽ’ๅบ</button>
<button class="chip" onclick="setSort('freq', this)">ๆŒ‰้ ป็އๆŽ’ๅบ</button>
</div>
</div>
<div class="chart-wrapper">
<canvas id="freqChart"></canvas>
</div>
</div>
</section>
<!-- History Table -->
<section class="section history-section">
<div class="glass-card">
<div class="section-header">
<h2 class="section-title">๐Ÿ“‹ ๆญทๅฒ้–‹็Ž็ด€้Œ„</h2>
<div class="history-controls">
<input type="text" class="search-input" id="historySearch" placeholder="ๆœๅฐ‹่™Ÿ็ขผๆˆ–ๆ—ฅๆœŸ..." oninput="filterHistory()" />
<span class="result-count" id="resultCount"></span>
</div>
</div>
<div class="table-wrapper">
<table class="history-table" id="historyTable">
<thead>
<tr>
<th>ๆœŸ่™Ÿ</th>
<th>ๆ—ฅๆœŸ</th>
<th colspan="5">้–‹็Ž่™Ÿ็ขผ</th>
</tr>
</thead>
<tbody id="historyBody">
<tr><td colspan="7" class="loading-row">โณ ่ผ‰ๅ…ฅ่ณ‡ๆ–™ไธญ...</td></tr>
</tbody>
</table>
</div>
<div class="pagination" id="pagination"></div>
</div>
</section>
</main>
<footer class="site-footer">
<p>่ณ‡ๆ–™ไพ†ๆบ๏ผš<a href="https://www.pilio.idv.tw/lto539/list.asp" target="_blank" rel="noopener">pilio.idv.tw</a> &nbsp;ยท&nbsp; ๆœฌ็ณป็ตฑๅƒ…ไพ›ๅƒ่€ƒๅจ›ๆจ‚๏ผŒไธไฟ่ญ‰ไปปไฝ•้ ๆธฌๆบ–็ขบๆ€ง</p>
</footer>
</div>
<!-- โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ• -->
<!-- TAB: ๅคงๆจ‚้€ (649) -->
<!-- โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ• -->
<div id="tab-649" class="tab-content lottery-649">
<main class="main-content">
<!-- Prediction Panel -->
<section class="section prediction-section">
<div class="section-header">
<h2 class="section-title">๐ŸŽฏ ไธ‹ๆœŸ้ ๆธฌ่™Ÿ็ขผ</h2>
<p class="section-subtitle">ๆจกๅž‹๏ผšM3 SpreadOverdue โ€” ๅฐ‡ 1โ€“49 ๅˆ†ๆˆ 6 ๅ€้–“๏ผŒๆฏๅ€้ธๆœ€ไน…ๆœชๅ‡บ็พ่™Ÿ็ขผ</p>
<a href="accuracy649.html" style="display:inline-flex;align-items:center;gap:6px;padding:8px 18px;background:rgba(239,68,68,0.15);border:1px solid rgba(239,68,68,0.4);border-radius:9999px;color:#f87171;font-size:0.82rem;font-weight:600;text-decoration:none;transition:all 0.2s" onmouseover="this.style.background='rgba(239,68,68,0.3)'" onmouseout="this.style.background='rgba(239,68,68,0.15)'">
๐Ÿ“Š ๅ‘ฝไธญ็އๅ›žๆธฌ
</a>
</div>
<div class="prediction-card glass-card prediction-card-649">
<!-- Regular 6 numbers -->
<div class="balls-container" id="predictionBalls_649">
<div class="ball-placeholder"></div>
<div class="ball-placeholder"></div>
<div class="ball-placeholder"></div>
<div class="ball-placeholder"></div>
<div class="ball-placeholder"></div>
<div class="ball-placeholder"></div>
</div>
<!-- Special number (็‰นๅˆฅ่™Ÿ) -->
<div style="display:flex;align-items:center;gap:12px;margin-top:4px">
<span style="font-size:0.8rem;color:var(--text-muted);white-space:nowrap">็‰นๅˆฅ่™Ÿ</span>
<div class="balls-container" id="predictionSpecial_649" style="gap:12px">
<div class="ball-placeholder"></div>
</div>
</div>
<button class="predict-btn predict-btn-649" id="predictBtn_649" onclick="runPrediction_649()">
<span class="btn-icon">๐Ÿ”ฎ</span>
<span>้‡ๆ–ฐ้ ๆธฌ</span>
</button>
<div class="prediction-note">
โš ๏ธ ๅฝฉๅˆธๅ…ทๆœ‰ไธ็ขบๅฎšๆ€ง๏ผŒๆœฌ้ ๆธฌๅƒ…ไพ›ๅƒ่€ƒๅจ›ๆจ‚๏ผŒ่ซ‹็†ๆ€ง่ณผ่ฒทใ€‚ๆฏ้€ฑไธ€ใ€ๅ››้–‹็Žใ€‚
</div>
</div>
</section>
<!-- Stats Row -->
<section class="section stats-section">
<div class="stats-grid">
<div class="stat-card glass-card">
<div class="stat-card-header">
<span class="stat-icon">๐Ÿ”ฅ</span>
<h3>็†ฑ้–€่™Ÿ็ขผ Top 10</h3>
<span class="stat-badge">ๅ‡บ็พๆœ€ๅคš</span>
</div>
<div class="number-badges" id="hotNumbers_649"></div>
</div>
<div class="stat-card glass-card">
<div class="stat-card-header">
<span class="stat-icon">๐ŸงŠ</span>
<h3>ๅ†ท้–€่™Ÿ็ขผ Top 10</h3>
<span class="stat-badge cold">ๅ‡บ็พๆœ€ๅฐ‘</span>
</div>
<div class="number-badges" id="coldNumbers_649"></div>
</div>
<div class="stat-card glass-card">
<div class="stat-card-header">
<span class="stat-icon">โฐ</span>
<h3>้ฒๅˆฐ่™Ÿ็ขผ Top 10</h3>
<span class="stat-badge overdue">ๆœ€ไน…ๆœชๅ‡บ็พ</span>
</div>
<div class="number-badges" id="overdueNumbers_649"></div>
</div>
</div>
</section>
<!-- Probability Ranking Table -->
<section class="section ranking-section">
<div class="glass-card">
<div class="section-header">
<h2 class="section-title">๐Ÿ… ๅ…จ่™Ÿ็ขผ้ ๆธฌๆฉŸ็އๆŽ’ๅบ (01โ€“49)</h2>
<div style="font-size:0.75rem;color:var(--text-muted);line-height:1.6">
่ฉ•ๅˆ†ๅ…ฌๅผ๏ผš<span style="color:#c084fc">้ฒๅˆฐๆœŸๆ•ธ 50%</span> + <span style="color:#67e8f9">ๅ†ท้–€็จ‹ๅบฆ 30%</span> + <span style="color:#86efac">่ฟ‘30ๆœŸๆœชๅ‡บ็พ 20%</span>
</div>
</div>
<div class="table-wrapper">
<table class="history-table" style="font-size:0.82rem">
<thead>
<tr>
<th style="width:44px">ๆŽ’ๅ</th>
<th style="width:52px">่™Ÿ็ขผ</th>
<th>้ ๆธฌๅพ—ๅˆ†</th>
<th>้ฒๅˆฐๆœŸๆ•ธ</th>
<th>ๆญทๅฒๅ‡บ็พ</th>
<th>่ฟ‘30ๆœŸ</th>
<th>ๅˆ†้ …ๅพ—ๅˆ†<span style="font-size:0.65rem;opacity:0.6;margin-left:4px">(้ฒ+ๅ†ท+่ฟ‘)</span></th>
<th style="width:60px"></th>
</tr>
</thead>
<tbody id="rankingBody_649">
<tr><td colspan="8" class="loading-row">โณ ่จˆ็ฎ—ไธญ...</td></tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Frequency Chart -->
<section class="section chart-section">
<div class="glass-card chart-card">
<div class="section-header">
<h2 class="section-title">๐Ÿ“Š ๅ…จ่™Ÿ็ขผๅ‡บ็พ้ ป็އ (01โ€“49)</h2>
<div class="chart-controls">
<button class="chip active" onclick="setSort_649('number', this)">ๆŒ‰่™Ÿ็ขผๆŽ’ๅบ</button>
<button class="chip" onclick="setSort_649('freq', this)">ๆŒ‰้ ป็އๆŽ’ๅบ</button>
</div>
</div>
<div class="chart-wrapper">
<canvas id="freqChart_649"></canvas>
</div>
</div>
</section>
<!-- History Table -->
<section class="section history-section">
<div class="glass-card">
<div class="section-header">
<h2 class="section-title">๐Ÿ“‹ ๆญทๅฒ้–‹็Ž็ด€้Œ„</h2>
<div class="history-controls">
<input type="text" class="search-input" id="historySearch_649" placeholder="ๆœๅฐ‹่™Ÿ็ขผๆˆ–ๆ—ฅๆœŸ..." oninput="filterHistory_649()" />
<span class="result-count" id="resultCount_649"></span>
</div>
</div>
<div class="table-wrapper">
<table class="history-table" id="historyTable_649">
<thead>
<tr>
<th>ๆœŸ่™Ÿ</th>
<th>ๆ—ฅๆœŸ</th>
<th colspan="6">้–‹็Ž่™Ÿ็ขผ (6ๅ€‹่™Ÿ็ขผ)</th>
<th style="color:#f87171">็‰นๅˆฅ่™Ÿ</th>
</tr>
</thead>
<tbody id="historyBody_649">
<tr><td colspan="9" class="loading-row">โณ ่ผ‰ๅ…ฅ่ณ‡ๆ–™ไธญ...</td></tr>
</tbody>
</table>
</div>
<div class="pagination" id="pagination_649"></div>
</div>
</section>
</main>
<footer class="site-footer">
<p>่ณ‡ๆ–™ไพ†ๆบ๏ผš<a href="https://www.pilio.idv.tw/lotto/list.asp" target="_blank" rel="noopener">pilio.idv.tw</a> &nbsp;ยท&nbsp; ๅคงๆจ‚้€ๆฏ้€ฑไธ€ใ€ๅ››้–‹็Ž &nbsp;ยท&nbsp; ๆœฌ็ณป็ตฑๅƒ…ไพ›ๅƒ่€ƒๅจ›ๆจ‚๏ผŒไธไฟ่ญ‰ไปปไฝ•้ ๆธฌๆบ–็ขบๆ€ง</p>
</footer>
</div>
<script src="app.js"></script>
<script src="app649.js"></script>
<script>
// โ”€โ”€โ”€ Tab Switching โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€
function switchTab(tab) {
// Update tab buttons
document.getElementById('tabBtn539').classList.toggle('active', tab === '539');
document.getElementById('tabBtn649').classList.toggle('active', tab === '649');
// Update tab content
document.getElementById('tab-539').classList.toggle('active', tab === '539');
document.getElementById('tab-649').classList.toggle('active', tab === '649');
// Update header meta panels
document.getElementById('meta-539').style.display = tab === '539' ? 'flex' : 'none';
document.getElementById('meta-649').style.display = tab === '649' ? 'flex' : 'none';
// Lazy-load data on first activation
if (tab === '539') {
init539();
} else if (tab === '649') {
init649();
// Re-render chart after tab becomes visible (canvas needs layout)
setTimeout(() => {
if (typeof allDraws_649 !== 'undefined' && allDraws_649.length) renderChart_649();
}, 50);
}
}
// โ”€โ”€โ”€ Bootstrap: activate the 539 tab on page load โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€
switchTab('539');
</script>
</body>
</html>