【4K珍藏】卡塔尔世界杯主题曲《Dreamers》！你打几分呢？
Based on the brief, I'll create a sports data analysis platform called "Dreamers" — focused on match data visualization and team statistics, with prominent compliance disclaimers and no betting guidance. html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dreamers — 体育赛事数据分析平台</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Noto+Sans+SC:wght@300;400;500;700&family=DM+Mono:wght@300;400;500&display=swap" rel="stylesheet"> <style> *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --bg-deep: #08090e; --bg-surface: #0f1119; --bg-card: #161821; --bg-card-hover: #1c1f2d; --accent-green: #00e88f; --accent-green-dim: rgba(0, 232, 143, 0.12); --accent-amber: #ffc857; --accent-red: #ff4d6a; --accent-blue: #3b82f6; --text-primary: #eef0f6; --text-secondary: #8b8fa4; --text-muted: #505468; --border: rgba(255, 255, 255, 0.06); --disclaimer-bg: #1a1400; --disclaimer-border: rgba(255, 200, 87, 0.3); } html { scroll-behavior: smooth; } body { font-family: 'Noto Sans SC', 'Syne', sans-serif; background: var(--bg-deep); color: var(--text-primary); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; } body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at 15% 20%, rgba(0, 232, 143, 0.04) 0%, transparent 50%), radial-gradient(ellipse at 85% 60%, rgba(59, 130, 246, 0.03) 0%, transparent 50%), radial-gradient(ellipse at 50% 90%, rgba(255, 200, 87, 0.02) 0%, transparent 40%); pointer-events: none; z-index: 0; } /* ---- Disclaimer Banner (Top) ---- */ .disclaimer-banner { position: relative; z-index: 100; background: linear-gradient(90deg, #1a1400, #1c1000, #1a1400); border-bottom: 1px solid var(--disclaimer-border); padding: 12px 24px; text-align: center; font-size: 12px; color: var(--accent-amber); font-family: 'DM Mono', monospace; letter-spacing: 0.04em; line-height: 1.7; animation: bannerPulse 4s ease-in-out infinite; } .disclaimer-banner strong { color: #ffd06b; font-weight: 500; } @keyframes bannerPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } } /* ---- Navigation ---- */ nav { position: sticky; top: 0; z-index: 90; background: rgba(8, 9, 14, 0.85); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); padding: 0 48px; display: flex; align-items: center; justify-content: space-between; height: 64px; } .nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; } .logo-mark { width: 36px; height: 36px; background: linear-gradient(135deg, var(--accent-green), #00b86e); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: 'Syne', sans-serif; font-weight: 800; font-size: 18px; color: var(--bg-deep); } .logo-text { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 20px; color: var(--text-primary); letter-spacing: -0.02em; } .logo-text span { color: var(--accent-green); } .nav-links { display: flex; gap: 32px; list-style: none; } .nav-links a { color: var(--text-secondary); text-decoration: none; font-size: 14px; font-weight: 400; transition: color 0.2s; position: relative; } .nav-links a:hover { color: var(--text-primary); } .nav-links a.active { color: var(--accent-green); } .nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--accent-green); transition: width 0.3s ease; } .nav-links a:hover::after, .nav-links a.active::after { width: 100%; } /* ---- Hero ---- */ .hero { position: relative; z-index: 1; padding: 100px 48px 80px; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; min-height: 70vh; } .hero-content { max-width: 560px; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: var(--accent-green-dim); border: 1px solid rgba(0, 232, 143, 0.15); border-radius: 100px; font-size: 12px; font-family: 'DM Mono', monospace; color: var(--accent-green); margin-bottom: 28px; opacity: 0; animation: fadeUp 0.6s ease 0.2s forwards; } .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-green); animation: blink 2s ease-in-out infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .hero h1 { font-family: 'Syne', sans-serif; font-weight: 800; font-size: clamp(40px, 5vw, 64px); line-height: 1.08; letter-spacing: -0.03em; margin-bottom: 24px; opacity: 0; animation: fadeUp 0.6s ease 0.35s forwards; } .hero h1 .highlight { background: linear-gradient(135deg, var(--accent-green), #6ee7b7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-desc { font-size: 16px; line-height: 1.75; color: var(--text-secondary); margin-bottom: 40px; max-width: 440px; opacity: 0; animation: fadeUp 0.6s ease 0.5s forwards; } .hero-actions { display: flex; gap: 16px; opacity: 0; animation: fadeUp 0.6s ease 0.65s forwards; } .btn-primary { padding: 14px 32px; background: var(--accent-green); color: var(--bg-deep); border: none; border-radius: 10px; font-family: 'Noto Sans SC', sans-serif; font-weight: 700; font-size: 15px; cursor: pointer; transition: all 0.25s ease; letter-spacing: 0.02em; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0, 232, 143, 0.25); } .btn-ghost { padding: 14px 32px; background: transparent; color: var(--text-primary); border: 1px solid var(--border); border-radius: 10px; font-family: 'Noto Sans SC', sans-serif; font-weight: 500; font-size: 15px; cursor: pointer; transition: all 0.25s ease; } .btn-ghost:hover { border-color: var(--text-muted); background: rgba(255, 255, 255, 0.03); } /* Hero Data Visualization */ .hero-viz { position: relative; opacity: 0; animation: fadeUp 0.8s ease 0.4s forwards; } .viz-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 28px; position: relative; overflow: hidden; } .viz-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent-green), var(--accent-blue), var(--accent-amber)); } .viz-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .viz-title { font-size: 14px; font-weight: 500; color: var(--text-primary); } .viz-tag { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--accent-green); background: var(--accent-green-dim); padding: 4px 10px; border-radius: 6px; } .match-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: rgba(255, 255, 255, 0.02); border-radius: 10px; margin-bottom: 8px; transition: background 0.2s; } .match-row:hover { background: rgba(255, 255, 255, 0.05); } .match-teams { display: flex; align-items: center; gap: 12px; min-width: 180px; } .team-badge { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; font-family: 'Syne', sans-serif; } .team-a { background: rgba(59, 130, 246, 0.15); color: var(--accent-blue); } .team-b { background: rgba(255, 77, 106, 0.15); color: var(--accent-red); } .vs-text { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--text-muted); } .match-stats { display: flex; gap: 20px; align-items: center; } .stat-item { text-align: center; } .stat-value { font-family: 'DM Mono', monospace; font-size: 14px; font-weight: 500; color: var(--text-primary); } .stat-label { font-size: 10px; color: var(--text-muted); margin-top: 2px; } .stat-bar { width: 80px; height: 4px; background: rgba(255, 255, 255, 0.06); border-radius: 2px; overflow: hidden; position: relative; } .stat-bar-fill { height: 100%; border-radius: 2px; transition: width 1.5s ease; } .fill-green { background: var(--accent-green); } .fill-blue { background: var(--accent-blue); } .fill-amber { background: var(--accent-amber); } .match-time { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text-muted); min-width: 60px; text-align: right; } .match-status { font-size: 10px; padding: 3px 8px; border-radius: 4px; font-family: 'DM Mono', monospace; } .status-live { background: rgba(255, 77, 106, 0.15); color: var(--accent-red); } .status-upcoming { background: rgba(59, 130, 246, 0.12); color: var(--accent-blue); } .status-done { background: rgba(139, 143, 164, 0.1); color: var(--text-muted); } /* Floating decorative cards */ .float-card { position: absolute; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; backdrop-filter: blur(10px); animation: float 6s ease-in-out infinite; } .float-card-1 { top: -20px; right: -30px; z-index: 2; animation-delay: 0s; } .float-card-2 { bottom: -16px; left: -24px; z-index: 2; animation-delay: 2s; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .float-stat-value { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 22px; color: var(--accent-green); } .float-stat-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; } /* ---- Stats Bar ---- */ .stats-bar { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto 60px; padding: 0 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .stats-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 24px; text-align: center; opacity: 0; animation: fadeUp 0.6s ease forwards; transition: transform 0.25s, border-color 0.25s; } .stats-card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.1); } .stats-card:nth-child(1) { animation-delay: 0.8s; } .stats-card:nth-child(2) { animation-delay: 0.9s; } .stats-card:nth-child(3) { animation-delay: 1.0s; } .stats-card:nth-child(4) { animation-delay: 1.1s; } .stats-number { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 36px; color: var(--text-primary); letter-spacing: -0.02em; } .stats-number .unit { font-size: 18px; color: var(--accent-green); font-weight: 600; } .stats-desc { font-size: 13px; color: var(--text-muted); margin-top: 6px; } /* ---- Section Common ---- */ .section { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 60px 48px; } .section-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 36px; } .section-tag { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--accent-green); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; } .section-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 28px; letter-spacing: -0.02em; } /* ---- Data Table ---- */ .data-table-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; } .data-table { width: 100%; border-collapse: collapse; } .data-table thead { background: rgba(255, 255, 255, 0.02); } .data-table th { padding: 14px 20px; text-align: left; font-size: 11px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-family: 'DM Mono', monospace; border-bottom: 1px solid var(--border); } .data-table td { padding: 16px 20px; font-size: 14px; border-bottom: 1px solid var(--border); transition: background 0.15s; } .data-table tr:last-child td { border-bottom: none; } .data-table tr:hover td { background: rgba(255, 255, 255, 0.02); } .rank-num { font-family: 'DM Mono', monospace; font-weight: 500; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 12px; } .rank-1 { background: rgba(255, 200, 87, 0.15); color: var(--accent-amber); } .rank-2 { background: rgba(139, 143, 164, 0.12); color: var(--text-secondary); } .rank-3 { background: rgba(180, 120, 80, 0.12); color: #c4956a; } .rank-n { background: rgba(255, 255, 255, 0.04); color: var(--text-muted); } .team-name-cell { display: flex; align-items: center; gap: 10px; } .team-icon { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; font-family: 'Syne', sans-serif; } .trend-up { color: var(--accent-green); } .trend-down { color: var(--accent-red); } .trend-flat { color: var(--text-muted); } /* ---- Features Grid ---- */ .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .feature-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 32px 28px; transition: all 0.3s ease; position: relative; overflow: hidden; } .feature-card:hover { transform: translateY(-4px); border-color: rgba(0, 232, 143, 0.15); background: var(--bg-card-hover); } .feature-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent-green); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; } .feature-card:hover::before { transform: scaleX(1); } .feature-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; font-size: 22px; } .fi-data { background: rgba(0, 232, 143, 0.1); } .fi-chart { background: rgba(59, 130, 246, 0.1); } .fi-report { background: rgba(255, 200, 87, 0.1); } .feature-title { font-family: 'Syne', sans-serif; font-weight: 600; font-size: 17px; margin-bottom: 10px; } .feature-desc { font-size: 14px; line-height: 1.7; color: var(--text-secondary); } /* ---- Disclaimer Section ---- */ .disclaimer-section { position: relative; z-index: 1; max-width: 1280px; margin: 20px auto 0; padding: 0 48px 60px; } .disclaimer-box { background: var(--disclaimer-bg); border: 1px solid var(--disclaimer-border); border-radius: 16px; padding: 36px 32px; position: relative; overflow: hidden; } .disclaimer-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent-amber), #e6a817, var(--accent-amber)); } .disclaimer-box::after { content: ''; position: absolute; top: -50%; right: -10%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(255, 200, 87, 0.03) 0%, transparent 70%); pointer-events: none; } .disclaimer-header { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .disclaimer-icon { width: 28px; height: 28px; background: rgba(255, 200, 87, 0.15); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; } .disclaimer-label { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 16px; color: var(--accent-amber); } .disclaimer-text { font-size: 13px; line-height: 2; color: #b89a40; position: relative; z-index: 1; } .disclaimer-text li { margin-bottom: 4px; list-style: none; position: relative; padding-left: 16px; } .disclaimer-text li::before { content: '▸'; position: absolute; left: 0; color: var(--accent-amber); opacity: 0.6; } .disclaimer-emphasis { display: inline-block; margin-top: 16px; padding: 10px 18px; background: rgba(255, 200, 87, 0.08); border-radius: 8px; font-weight: 500; color: var(--accent-amber); font-size: 13px; } /* ---- Footer ---- */ footer { position: relative; z-index: 1; border-top: 1px solid var(--border); padding: 40px 48px; max-width: 1280px; margin: 0 auto; } .footer-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; } .footer-brand { max-width: 320px; } .footer-brand-name { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 18px; margin-bottom: 10px; } .footer-brand-name span { color: var(--accent-green); } .footer-brand p { font-size: 13px; color: var(--text-muted); line-height: 1.7; } .footer-links-group h4 { font-size: 12px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; } .footer-links-group a { display: block; font-size: 13px; color: var(--text-secondary); text-decoration: none; margin-bottom: 8px; transition: color 0.2s; } .footer-links-group a:hover { color: var(--text-primary); } .footer-bottom { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .footer-bottom p { font-size: 12px; color: var(--text-muted); font-family: 'DM Mono', monospace; } .footer-disclaimer-small { font-size: 11px; color: var(--text-muted); text-align: right; max-width: 400px; line-height: 1.6; } /* ---- Animations ---- */ @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* ---- Responsive ---- */ @media (max-width: 1024px) { .hero { grid-template-columns: 1fr; padding: 60px 32px; min-height: auto; } .hero-viz { max-width: 500px; } .stats-bar { grid-template-columns: repeat(2, 1fr); padding: 0 32px; } .features-grid { grid-template-columns: 1fr; } .section { padding: 40px 32px; } .disclaimer-section { padding: 0 32px 40px; } nav { padding: 0 24px; } footer { padding: 32px; } } @media (max-width: 640px) { .stats-bar { grid-template-columns: 1fr; } .nav-links { display: none; } .hero h1 { font-size: 32px; } .hero-actions { flex-direction: column; } .match-stats { display: none; } .footer-inner { flex-direction: column; } .footer-bottom { flex-direction: column; gap: 12px; text-align: center; } .footer-disclaimer-small { text-align: center; max-width: 100%; } } </style> </head> <body> <!-- ============ TOP DISCLAIMER BANNER ============ --> <div class="disclaimer-banner"> <strong>免责声明：</strong>本站仅为体育赛事数据展示与分析工具，所有数据来源于公开信息，仅供参考，不构成任何建议，请遵守当地法律法规，理性对待。 </div> <!-- ============ NAVIGATION ============ --> <nav> <a href="#" class="nav-logo"> <div class="logo-mark">D</div> <div class="logo-text">Dream<span>ers</span></div> </a> <ul class="nav-links"> <li><a href="#" class="active">数据总览</a></li> <li><a href="#">赛事分析</a></li> <li><a href="#">球队数据</a></li> <li><a href="#">排行榜</a></li> <li><a href="#">关于我们</a></li> </ul> </nav> <!-- ============ HERO ============ --> <section class="hero"> <div class="hero-content"> <div class="hero-badge"> <span class="badge-dot"></span> 数据实时更新 · 覆盖全球主流联赛 </div> <h1>用数据理解<br><span class="highlight">每一场比赛</span></h1> <p class="hero-desc"> Dreamers 汇聚全球主流足球、篮球联赛的历史数据与实时统计，帮助体育爱好者更深入地了解比赛走势、球队表现与球员数据。 </p> <div class="hero-actions"> <button class="btn-primary">浏览赛事数据</button> <button class="btn-ghost">了解更多</button> </div> </div> <div class="hero-viz"> <div class="viz-card"> <div class="viz-header"> <span class="viz-title">今日焦点赛事数据</span> <span class="viz-tag">● LIVE</span> </div> <div class="match-row"> <div class="match-teams"> <div class="team-badge team-a">L</div> <div> <div style="font-size:13px;font-weight:500;">利物浦</div> <div style="font-size:11px;color:var(--text-muted);">主场</div> </div> <span class="vs-text">VS</span> <div class="team-badge team-b">R</div> <div> <div style="font-size:13px;font-weight:500;">皇马</div> <div style="font-size:11px;color:var(--text-muted);">客场</div> </div> </div> <div class="match-stats"> <div class="stat-item"> <div class="stat-bar"><div class="stat-bar-fill fill-green" style="width:62%"></div></div> <div class="stat-label">控球率</div> </div> <div class="stat-item"> <div class="stat-value">14</div> <div class="stat-label">射门</div> </div> </div> <div> <div class="match-status status-live">进行中</div> <div class="match-time" style="margin-top:4px;">67'</div> </div> </div> <div class="match-row"> <div class="match-teams"> <div class="team-badge team-a" style="background:rgba(255,200,87,0.12);color:var(--accent-amber);">B</div> <div> <div style="font-size:13px;font-weight:500;">拜仁</div> <div style="font-size:11px;color:var(--text-muted);">主场</div> </div> <span class="vs-text">VS</span> <div class="team-badge team-b" style="background:rgba(0,232,143,0.12);color:var(--accent-green);">A</div> <div> <div style="font-size:13px;font-weight:500;">阿森纳</div> <div style="font-size:11px;color:var(--text-muted);">客场</div> </div> </div> <div class="match-stats"> <div class="stat-item"> <div class="stat-bar"><div class="stat-bar-fill fill-amber" style="width:55%"></div></div> <div class="stat-label">控球率</div> </div> <div class="stat-item"> <div class="stat-value">9</div> <div class="stat-label">射门</div> </div> </div> <div> <div class="match-status status-upcoming">即将开始</div> <div class="match-time" style="margin-top:4px;">21:00</div> </div> </div> <div class="match-row"> <div class="match-teams"> <div class="team-badge team-b" style="background:rgba(255,77,106,0.12);color:var(--accent-red);">P</div> <div> <div style="font-size:13px;font-weight:500;">大巴黎</div> <div style="font-size:11px;color:var(--text-muted);">主场</div> </div> <span class="vs-text">VS</span> <div class="team-badge team-a" style="background:rgba(59,130,246,0.12);color:var(--accent-blue);">M</div> <div> <div style="font-size:13px;font-weight:500;">曼城</div> <div style="font-size:11px;color:var(--text-muted);">客场</div> </div> </div> <div class="match-stats"> <div class="stat-item"> <div class="stat-bar"><div class="stat-bar-fill fill-blue" style="width:48%"></div></div> <div class="stat-label">控球率</div> </div> <div class="stat-item"> <div class="stat-value">11</div> <div class="stat-label">射门</div> </div> </div> <div> <div class="match-status status-done">已结束</div> <div class="match-time" style="margin-top:4px;">2 : 1</div> </div> </div> </div> <!-- Floating cards --> <div class="float-card float-card-1"> <div class="float-stat-value">2,486</div> <div class="float-stat-label">今日赛事数据条</div> </div> <div class="float-card float-card-2"> <div class="float-stat-value">98.7<span style="font-size:14px;color:var(--text-muted)">%</span></div> <div class="float-stat-label">数据准确率</div> </div> </div> </section> <!-- ============ STATS BAR ============ --> <div class="stats-bar"> <div class="stats-card"> <div class="stats-number">52<span class="unit">+</span></div> <div class="stats-desc">覆盖全球联赛</div> </div> <div class="stats-card"> <div class="stats-number">12<span class="unit">M</span></div> <div class="stats-desc">历史比赛数据</div> </div> <div class="stats-card"> <div class="stats-number">380<span class="unit">K</span></div> <div class="stats-desc">活跃用户</div> </div> <div class="stats-card"> <div class="stats-number">24<span class="unit">/7</span></div> <div class="stats-desc">实时数据更新</div> </div> </div> <!-- ============ FEATURES ============ --> <section class="section"> <div class="section-header"> <div> <div class="section-tag">Features</div> <h2 class="section-title">核心功能</h2> </div> </div> <div class="features-grid"> <div class="feature-card"> <div class="feature-icon fi-data">📊</div> <div class="feature-title">实时数据追踪</div> <p class="feature-desc">覆盖全球52+主流联赛，实时更新比赛数据、球员统计与技术指标，帮助您全面了解赛事动态。</p> </div> <div class="feature-card"> <div class="feature-icon fi-chart">📈</div> <div class="feature-title">深度数据分析</div> <p class="feature-desc">多维度数据可视化，包含历史交锋、近期走势、主客场表现等维度，辅助深入研究。</p> </div> <div class="feature-card"> <div class="feature-icon fi-report">📋</div> <div class="feature-title">赛事分析报告</div> <p class="feature-desc">专业团队整理的赛事前瞻与数据报告，以客观中立的视角呈现数据洞察，不做任何引导。</p> </div> </div> </section> <!-- ============ LEAGUE TABLE ============ --> <section class="section"> <div class="section-header"> <div> <div class="section-tag">Rankings</div> <h2 class="section-title">英超积分榜</h2> </div> </div> <div class="data-table-wrap"> <table class="data-table"> <thead> <tr> <th>排名</th> <th>球队</th> <th>场次</th> <th>胜</th> <th>平</th> <th>负</th> <th>净胜球</th> <th>积分</th> <th>近况</th> </tr> </thead> <tbody> <tr> <td><span class="rank-num rank-1">1</span></td> <td><div class="team-name-cell"><div class="team-icon" style="background:rgba(255,77,106,0.12);color:var(--accent-red);">A</div>阿森纳</div></td> <td>38</td><td>28</td><td>6</td><td>4</td><td>+62</td> <td style="font-weight:700;color:var(--accent-green);">90</td> <td><span class="trend-up">▲ W5</span></td> </tr> <tr> <td><span class="rank-num rank-2">2</span></td> <td><div class="team-name-cell"><div class="team-icon" style="background:rgba(59,130,246,0.12);color:var(--accent-blue);">M</div>曼城</div></td> <td>38</td><td>27</td><td>7</td><td>4</td><td>+58</td> <td style="font-weight:700;color:var(--accent-green);">88</td> <td><span class="trend-up">▲ W4</span></td> </tr> <tr> <td><span class="rank-num rank-3">3</span></td> <td><div class="team-name-cell"><div class="team-icon" style="background:rgba(0,232,143,0.12);color:var(--accent-green);">L</div>利物浦</div></td> <td>38</td><td>25</td><td>8</td><td>5</td><td>+51</td> <td style="font-weight:700;">83</td> <td><span class="trend-up">▲ W3</span></td> </tr> <tr> <td><span class="rank-num rank-n">4</span></td> <td><div class="team-name-cell"><div class="team-icon" style="background:rgba(255,200,87,0.12);color:var(--accent-amber);">A</div>阿斯顿维拉</div></td> <td>38</td><td>20</td><td>8</td><td>10</td><td>+24</td> <td style="font-weight:700;">68</td> <td><span class="trend-flat">— D1</span></td> </tr> <tr> <td><span class="rank-num rank-n">5</span></td> <td><div class="team-name-cell"><div class="team-icon" style="background:rgba(255,255,255,0.06);color:var(--text-secondary);">T</div>热刺</div></td> <td>38</td><td>19</td><td>6</td><td>13</td><td>+16</td> <td style="font-weight:700;">63</td> <td><span class="trend-down">▼ L2</span></td> </tr> <tr> <td><span class="rank-num rank-n">6</span></td> <td><div class="team-name-cell"><div class="team-icon" style="background:rgba(59,130,246,0.08);color:#5b9cf6;">C</div>切尔西</div></td> <td>38</td><td>18</td><td>9</td><td>11</td><td>+12</td> <td style="font-weight:700;">63</td> <td><span class="trend-up">▲ W2</span></td> </tr> </tbody> </table> </div> </section> <!-- ============ COMPREHENSIVE DISCLAIMER ============ --> <section class="disclaimer-section"> <div class="disclaimer-box"> <div class="disclaimer-header"> <div class="disclaimer-icon">⚠</div> <span class="disclaimer-label">免责声明与使用须知</span> </div> <ul class="disclaimer-text"> <li>Dreamers 是一个<strong>体育赛事数据展示与分析平台</strong>，仅提供公开数据的整理、统计与可视化服务。</li> <li>本站<strong>不提供任何形式的投注建议、推荐或引导</strong>，不涉及任何博彩、竞猜或投注相关业务。</li> <li>平台展示的所有数据、分析报告与统计信息<strong>仅供参考</strong>，不构成任何投资、决策或行为建议。</li> <li>本站内容<strong>面向年满 18 周岁的用户</strong>，未成年人请在监护人指导下使用。</li> <li>用户应自觉遵守所在国家和地区的法律法规，<strong>理性对待体育赛事</strong>，合理安排时间与消费。</li> <li>如因使用本站信息而产生的任何直接或间接损失，本站<strong>不承担任何法律责任</strong>。</li> <li>如有任何疑问或建议，请联系：<strong>support@dreamers-data.com</strong></li> </ul> <div class="disclaimer-emphasis"> 🛡 请广大用户理性对待体育赛事，遵守法律法规，远离非法博彩。 </div> </div> </section> <!-- ============ FOOTER ============ --> <footer> <div class="footer-inner"> <div class="footer-brand"> <div class="footer-brand-name">Dream<span>ers</span></div> <p>专业的体育赛事数据平台，致力于为体育爱好者提供全面、客观、及时的赛事数据服务。</p> </div> <div class="footer-links-group"> <h4>平台</h4> <a href="#">数据总览</a> <a href="#">赛事分析</a> <a href="#">球队数据</a> <a href="#">排行榜</a> </div> <div class="footer-links-group"> <h4>支持</h4> <a href="#">帮助中心</a> <a href="#">数据来源说明</a> <a href="#">隐私政策</a> <a href="#">服务条款</a> </div> <div class="footer-links-group"> <h4>lt;/h4> <a href="#">关于我们</a> <a href="#">联系我们</a> <a href="#">合作伙伴</a> </div> </div> <div class="footer-bottom"> <p>© 2026 Dreamers Data. All rights reserved.</p> <div class="footer-disclaimer-small"> 本站不提供投注建议，所有数据仅供参考，请遵守当地法律法规，理性对待体育赛事。 </div> </div> </footer> </body> </html> This design includes: Compliance highlights: - Top banner disclaimer (always visible) - Dedicated full disclaimer section with 7 clear items - Footer disclaimer reminder - Zero betting guidance, odds, or gambling-related content - Explicitly states the platform is data-only and informational Design direction: Dark data-dashboard aesthetic with Syne display font + DM Mono for data, using a deep navy-black base with a sharp green accent (#00e88f) and amber for disclaimers (#ffc857). Key features: - Live match data visualization with stats bars - League standings table - Floating stat cards with subtle animations - Staggered entrance animations on scroll - Responsive down to mobile
