<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>賞豐泰 - 馬匹詳情</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            font-family: Arial, "Microsoft JhengHei", sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            background-color: #121212;
            color: #f5f5f5;
        }
        .container {
            width: 100%;
            margin: 0 auto;
            background-color: #121212;
        }
        .top-bar {
            background-color: #006d34;
            color: white;
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        .back-button {
            color: white;
            text-decoration: none;
            display: flex;
            align-items: center;
        }
        .back-button:before {
            content: "←";
            margin-right: 5px;
            font-size: 18px;
        }
        .header {
            padding: 20px;
            position: relative;
            background-color: #1e1e1e;
            margin-bottom: 10px;
        }
        .horse-profile {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        .horse-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: #006d34;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 15px;
            font-size: 36px;
            font-weight: bold;
            color: white;
        }
        .horse-info {
            flex: 1;
        }
        .horse-name {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .horse-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            font-size: 14px;
            color: #aaa;
        }
        .stat-badge {
            background-color: #333;
            padding: 4px 8px;
            border-radius: 4px;
        }
        .section {
            padding: 15px;
            margin-bottom: 10px;
            background-color: #1e1e1e;
        }
        .section-title {
            color: white;
            border-bottom: 1px solid #333;
            padding-bottom: 10px;
            margin-bottom: 15px;
            font-size: 18px;
            font-weight: bold;
        }
        .progress-section {
            margin-bottom: 20px;
        }
        .progress-title {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }
        .progress-bar {
            height: 10px;
            background-color: #333;
            border-radius: 5px;
            overflow: hidden;
            margin-bottom: 15px;
        }
        .progress-fill {
            height: 100%;
            background-color: #006d34;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }
        .stat-card {
            background-color: #252525;
            border-radius: 5px;
            padding: 10px;
            text-align: center;
        }
        .stat-value {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .stat-label {
            font-size: 14px;
            color: #aaa;
        }
        .win-indicator {
            height: 4px;
            background-color: #006d34;
            margin-top: 10px;
            width: 70%;
            margin: 10px auto 0;
        }
        .recent-races {
            border-radius: 5px;
            overflow: hidden;
        }
        .race-item {
            display: flex;
            padding: 12px;
            border-bottom: 1px solid #333;
            align-items: center;
        }
        .race-result {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 15px;
            font-weight: bold;
        }
        .win {
            background-color: #006d34;
        }
        .lose {
            background-color: #d32f2f;
        }
        .race-details {
            flex: 1;
        }
        .race-track {
            font-weight: bold;
            margin-bottom: 3px;
        }
        .race-meta {
            font-size: 12px;
            color: #aaa;
        }
        .radar-chart-container {
            height: 300px;
            position: relative;
            margin: 20px 0;
        }
        .radar-chart {
            width: 100%;
            height: 100%;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300"><polygon points="150,30 230,80 230,220 150,270 70,220 70,80" fill="none" stroke="%23444" stroke-width="1"/><polygon points="150,60 210,100 210,200 150,240 90,200 90,100" fill="none" stroke="%23555" stroke-width="1"/><polygon points="150,90 190,120 190,180 150,210 110,180 110,120" fill="none" stroke="%23666" stroke-width="1"/><polygon points="150,120 170,140 170,160 150,180 130,160 130,140" fill="none" stroke="%23777" stroke-width="1"/><circle cx="150" cy="150" r="3" fill="%23aaa"/></svg>');
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            position: relative;
        }
        .radar-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .radar-labels {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }
        .radar-label {
            position: absolute;
            font-size: 12px;
            color: white;
        }
        .radar-label:nth-child(1) { top: 10px; left: 50%; transform: translateX(-50%); }
        .radar-label:nth-child(2) { top: 85px; right: 60px; }
        .radar-label:nth-child(3) { bottom: 85px; right: 60px; }
        .radar-label:nth-child(4) { bottom: 10px; left: 50%; transform: translateX(-50%); }
        .radar-label:nth-child(5) { bottom: 85px; left: 60px; }
        .radar-label:nth-child(6) { top: 85px; left: 60px; }

        .position-stats {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }
        .position-stat {
            flex: 1;
            text-align: center;
        }
        .position-chart {
            display: flex;
            height: 100px;
            align-items: flex-end;
            margin-top: 10px;
        }
        .position-bar {
            flex: 1;
            margin: 0 5px;
            background-color: #333;
            position: relative;
        }
        .position-fill {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
        }
        .position-label {
            position: absolute;
            bottom: -25px;
            left: 0;
            width: 100%;
            text-align: center;
            font-size: 12px;
            color: #aaa;
        }
        .position-fill.blue { background-color: #2196F3; }
        .position-fill.red { background-color: #d32f2f; }
        
        .target-section {
            margin-top: 20px;
        }
        .target-row {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .target-label {
            width: 80px;
            font-size: 14px;
            color: #aaa;
        }
        .target-value-left {
            width: 40px;
            text-align: right;
            padding-right: 10px;
        }
        .target-bar {
            flex: 1;
            height: 20px;
            background-color: #333;
            position: relative;
        }
        .target-value-right {
            width: 40px;
            text-align: left;
            padding-left: 10px;
        }
        .target-fill-left {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            background-color: #2196F3;
        }
        .target-fill-right {
            position: absolute;
            right: 0;
            top: 0;
            height: 100%;
            background-color: #d32f2f;
        }

        .comparison-link {
            display: block;
            text-align: center;
            padding: 15px;
            background-color: #006d34;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            margin: 20px 15px;
            font-weight: bold;
        }

        @media (min-width: 768px) {
            .container {
                max-width: 768px;
                margin: 0 auto;
            }
            .stats-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="top-bar">
            <a href="250510_race1.html" class="back-button">返回</a>
            <div>馬匹詳情</div>
        </div>

        <div class="header">
            <div class="horse-profile">
                <div class="horse-avatar">1</div>
                <div class="horse-info">
                    <div class="horse-name">賞豐泰</div>
                    <div class="horse-meta">
                        <div class="stat-badge">檔位: 7</div>
                        <div class="stat-badge">評分: 40</div>
                        <div class="stat-badge">負磅: 135</div>
                    </div>
                </div>
            </div>
            <div class="horse-meta">
                <div>騎師: 梁家俊</div>
                <div>•</div>
                <div>練師: 游達榮</div>
                <div>•</div>
                <div>賽前賠率: 6.6</div>
            </div>
        </div>

        <div class="section">
            <div class="section-title">能力評分</div>
            <div class="radar-chart-container">
                <div class="radar-chart">
                    <svg class="radar-overlay" viewBox="0 0 300 300" width="100%" height="100%">
                        <polygon points="150,66 187,117.5 171,195 129,195 113,117.5" fill="#006d34" fill-opacity="0.3" stroke="#006d34" stroke-width="2"></polygon>
                    </svg>
                    <div class="radar-labels">
                        <div class="radar-label">起步 (70)</div>
                        <div class="radar-label">速度 (85)</div>
                        <div class="radar-label">耐力 (60)</div>
                        <div class="radar-label">加速力 (75)</div>
                        <div class="radar-label">適應力 (90)</div>
                        <div class="radar-label">心理素質 (65)</div>
                    </div>
                </div>
            </div>
            
            <div class="progress-section">
                <div class="progress-title">
                    <div>起步</div>
                    <div>70/100</div>
                </div>
                <div class="progress-bar">
                    <div class="progress-fill" style="width: 70%"></div>
                </div>
                
                <div class="progress-title">
                    <div>速度</div>
                    <div>85/100</div>
                </div>
                <div class="progress-bar">
                    <div class="progress-fill" style="width: 85%"></div>
                </div>
                
                <div class="progress-title">
                    <div>耐力</div>
                    <div>60/100</div>
                </div>
                <div class="progress-bar">
                    <div class="progress-fill" style="width: 60%"></div>
                </div>
                
                <div class="progress-title">
                    <div>加速力</div>
                    <div>75/100</div>
                </div>
                <div class="progress-bar">
                    <div class="progress-fill" style="width: 75%"></div>
                </div>
                
                <div class="progress-title">
                    <div>適應力</div>
                    <div>90/100</div>
                </div>
                <div class="progress-bar">
                    <div class="progress-fill" style="width: 90%"></div>
                </div>
                
                <div class="progress-title">
                    <div>心理素質</div>
                    <div>65/100</div>
                </div>
                <div class="progress-bar">
                    <div class="progress-fill" style="width: 65%"></div>
                </div>
            </div>
        </div>

        <div class="section">
            <div class="section-title">綜合數據</div>
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-value">74.2%</div>
                    <div class="stat-label">平均表現</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">17.2%</div>
                    <div class="stat-label">勝率</div>
                    <div class="win-indicator"></div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">1650m</div>
                    <div class="stat-label">最佳距離</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">C+3</div>
                    <div class="stat-label">偏好賽道</div>
                </div>
            </div>
        </div>

        <div class="section">
            <div class="section-title">近期表現 (最近六場)</div>
            <div class="recent-races">
                <div class="race-item">
                    <div class="race-result lose">7</div>
                    <div class="race-details">
                        <div class="race-track">跑馬地 - 1650米</div>
                        <div class="race-meta">2025/04/16 - 場次596 - 梁家俊</div>
                    </div>
                </div>
                <div class="race-item">
                    <div class="race-result lose">8</div>
                    <div class="race-details">
                        <div class="race-track">沙田 - 1400米</div>
                        <div class="race-meta">2025/04/02 - 場次571 - 梁家俊</div>
                    </div>
                </div>
                <div class="race-item">
                    <div class="race-result lose">9</div>
                    <div class="race-details">
                        <div class="race-track">跑馬地 - 1650米</div>
                        <div class="race-meta">2025/03/20 - 場次559 - 梁家俊</div>
                    </div>
                </div>
                <div class="race-item">
                    <div class="race-result lose">5</div>
                    <div class="race-details">
                        <div class="race-track">沙田 - 1600米</div>
                        <div class="race-meta">2025/03/09 - 場次501 - 梁家俊</div>
                    </div>
                </div>
                <div class="race-item">
                    <div class="race-result lose">10</div>
                    <div class="race-details">
                        <div class="race-track">沙田 - 1400米</div>
                        <div class="race-meta">2025/02/22 - 場次547 - 梁家俊</div>
                    </div>
                </div>
                <div class="race-item">
                    <div class="race-result lose">7</div>
                    <div class="race-details">
                        <div class="race-track">跑馬地 - 1650米</div>
                        <div class="race-meta">2025/02/02 - 場次520 - 梁家俊</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="section">
            <div class="section-title">跑位偏好</div>
            <div class="position-stats">
                <div class="position-stat">
                    <span class="stat-value">69%</span>
                    <div class="stat-label">前段</div>
                </div>
                <div class="position-stat">
                    <span class="stat-value">22%</span>
                    <div class="stat-label">中段</div>
                </div>
                <div class="position-stat">
                    <span class="stat-value">9%</span>
                    <div class="stat-label">後段</div>
                </div>
            </div>
            <div class="position-chart">
                <div class="position-bar" style="height: 100%">
                    <div class="position-fill blue" style="height: 69%"></div>
                    <div class="position-label">前段</div>
                </div>
                <div class="position-bar" style="height: 100%">
                    <div class="position-fill blue" style="height: 22%"></div>
                    <div class="position-label">中段</div>
                </div>
                <div class="position-bar" style="height: 100%">
                    <div class="position-fill blue" style="height: 9%"></div>
                    <div class="position-label">後段</div>
                </div>
            </div>
        </div>

        <div class="section">
            <div class="section-title">技術數據</div>
            <div class="target-section">
                <div class="target-row">
                    <div class="target-label">起步速度</div>
                    <div class="target-value-left">34</div>
                    <div class="target-bar">
                        <div class="target-fill-left" style="width: 37%"></div>
                        <div class="target-fill-right" style="width: 63%"></div>
                    </div>
                    <div class="target-value-right">58</div>
                </div>
                <div class="target-row">
                    <div class="target-label">轉彎技術</div>
                    <div class="target-value-left">16</div>
                    <div class="target-bar">
                        <div class="target-fill-left" style="width: 59%"></div>
                        <div class="target-fill-right" style="width: 41%"></div>
                    </div>
                    <div class="target-value-right">11</div>
                </div>
                <div class="target-row">
                    <div class="target-label">直路衝刺</div>
                    <div class="target-value-left">51</div>
                    <div class="target-bar">
                        <div class="target-fill-left" style="width: 50%"></div>
                        <div class="target-fill-right" style="width: 50%"></div>
                    </div>
                    <div class="target-value-right">51</div>
                </div>
            </div>
        </div>

        <a href="#" class="comparison-link">與其他馬匹比較</a>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            console.log("DOM fully loaded and parsed");
        });
    </script>
</body>
</html>