HTML CSS JS 写一个 黑苹果显卡驱动查询工具 单页

PieroPC
32 阅读7分钟

image.png 

<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
        }
        
        body {
            background-color: #f5f5f7;
            color: #1d1d1f;
            line-height: 1.5;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        header {
            text-align: center;
            padding: 30px 0;
            margin-bottom: 30px;
        }
        
        h1 {
            font-size: 2.5rem;
            color: #1d1d1f;
            margin-bottom: 10px;
            font-weight: 700;
        }
        
        .subtitle {
            font-size: 1.1rem;
            color: #86868b;
            max-width: 800px;
            margin: 0 auto 20px;
        }
        
        .search-section {
            background-color: white;
            border-radius: 16px;
            padding: 30px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            margin-bottom: 30px;
        }
        
        .search-container {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .search-box {
            flex: 1;
            padding: 15px 20px;
            border: 1px solid #d2d2d7;
            border-radius: 12px;
            font-size: 1rem;
            transition: border-color 0.3s;
        }
        
        .search-box:focus {
            outline: none;
            border-color: #007aff;
        }
        
        .search-btn {
            background-color: #007aff;
            color: white;
            border: none;
            border-radius: 12px;
            padding: 0 25px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .search-btn:hover {
            background-color: #0056cc;
        }
        
        .filter-section {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }
        
        .filter-btn {
            padding: 10px 20px;
            background-color: #f5f5f7;
            border: 1px solid #d2d2d7;
            border-radius: 20px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .filter-btn:hover {
            background-color: #e8e8ed;
        }
        
        .filter-btn.active {
            background-color: #007aff;
            color: white;
            border-color: #007aff;
        }
        
        .results-section {
            background-color: white;
            border-radius: 16px;
            padding: 30px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            margin-bottom: 30px;
        }
        
        .results-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
        }
        
        .results-count {
            font-size: 1.2rem;
            font-weight: 600;
        }
        
        .no-results {
            text-align: center;
            padding: 50px 0;
            color: #86868b;
            font-size: 1.1rem;
        }
        
        .gpu-card {
            border: 1px solid #e8e8ed;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .gpu-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }
        
        .gpu-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .gpu-name {
            font-size: 1.3rem;
            font-weight: 600;
        }
        
        .gpu-status {
            padding: 6px 15px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
        }
        
        .status-fully {
            background-color: #d4edda;
            color: #155724;
        }
        
        .status-partial {
            background-color: #fff3cd;
            color: #856404;
        }
        
        .status-none {
            background-color: #f8d7da;
            color: #721c24;
        }
        
        .gpu-details {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 15px;
        }
        
        .detail-item {
            display: flex;
            flex-direction: column;
        }
        
        .detail-label {
            font-size: 0.85rem;
            color: #86868b;
            margin-bottom: 5px;
        }
        
        .detail-value {
            font-size: 1rem;
            font-weight: 500;
        }
        
        .gpu-notes {
            padding: 15px;
            background-color: #f9f9fa;
            border-radius: 10px;
            font-size: 0.95rem;
            line-height: 1.5;
        }
        
        footer {
            text-align: center;
            padding: 30px 0;
            color: #86868b;
            font-size: 0.9rem;
        }
        
        .footer-links {
            margin-top: 10px;
        }
        
        .footer-links a {
            color: #007aff;
            text-decoration: none;
            margin: 0 10px;
        }
        
        .footer-links a:hover {
            text-decoration: underline;
        }
        
        @media (max-width: 768px) {
            .search-container {
                flex-direction: column;
            }
            
            .gpu-header {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .gpu-status {
                margin-top: 10px;
            }
            
            .filter-section {
                justify-content: center;
            }
        }
        
        .info-box {
            background-color: #f0f7ff;
            border-left: 4px solid #007aff;
            padding: 20px;
            border-radius: 0 10px 10px 0;
            margin-bottom: 30px;
        }
        
        .info-box p {
            margin-bottom: 10px;
        }
        
        .info-box p:last-child {
            margin-bottom: 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-microchip"></i> 黑苹果显卡驱动查询</h1>
            <p class="subtitle">本工具提供常见显卡在黑苹果系统（macOS）下的驱动兼容性信息，帮助您选择合适的显卡进行黑苹果安装。</p>
        </header>
        
        <div class="info-box">
            <p><strong>说明：</strong> 本工具数据基于社区反馈和测试结果，实际兼容性可能因具体硬件配置和macOS版本而异。</p>
            <p><strong>状态说明：</strong> 
                <span class="status-fully" style="padding: 3px 10px; margin: 0 5px;">完全支持</span> - 显卡功能完全正常，
                <span class="status-partial" style="padding: 3px 10px; margin: 0 5px;">部分支持</span> - 部分功能（如加速/多显示器）异常，
                <span class="status-none" style="padding: 3px 10px; margin: 0 5px;">不支持</span> - 无法驱动或存在严重问题
            </p>
        </div>
        
        <section class="search-section">
            <div class="search-container">
                <input type="text" class="search-box" id="searchInput" placeholder="输入显卡型号（如：RX 580, GTX 1070, UHD 630...）">
                <button class="search-btn" id="searchBtn"><i class="fas fa-search"></i> 搜索</button>
            </div>
            
            <div class="filter-section">
                <button class="filter-btn active" data-filter="all">全部显卡</button>
                <button class="filter-btn" data-filter="fully">完全支持</button>
                <button class="filter-btn" data-filter="partial">部分支持</button>
                <button class="filter-btn" data-filter="none">不支持</button>
                <button class="filter-btn" data-filter="amd">AMD 显卡</button>
                <button class="filter-btn" data-filter="nvidia">NVIDIA 显卡</button>
                <button class="filter-btn" data-filter="intel">Intel 显卡</button>
            </div>
        </section>
        
        <section class="results-section">
            <div class="results-header">
                <h2 class="results-count" id="resultsCount">查询结果 (12个显卡)</h2>
            </div>
            
            <div id="gpuResults">
                <!-- GPU卡片将通过JavaScript动态生成 -->
            </div>
            
            <div class="no-results" id="noResults" style="display: none;">
                <i class="fas fa-search" style="font-size: 3rem; margin-bottom: 15px;"></i>
                <p>未找到匹配的显卡，请尝试其他关键词或筛选条件。</p>
            </div>
        </section>
        
        <footer>
            <p>© 2023 黑苹果显卡驱动查询工具 | 数据来源于社区测试和收集</p>
            <div class="footer-links">
                <a href="https://dortania.github.io/Getting-Started-With-ACPI/" target="_blank">黑苹果指南</a>
                <a href="https://www.tonymacx86.com/" target="_blank">tonymacx86</a>
                <a href="https://github.com/acidanthera/WhateverGreen" target="_blank">WhateverGreen</a>
            </div>
            <p style="margin-top: 15px;">注意：黑苹果安装可能违反苹果最终用户许可协议，仅供学习和研究使用。</p>
        </footer>
    </div>

    <script>
        // 显卡数据库
        const gpuDatabase = [
            {
                id: 1,
                name: "AMD Radeon RX 580",
                manufacturer: "AMD",
                status: "fully",
                macOSSupport: "High Sierra 到 Ventura",
                requiredKexts: "WhateverGreen",
                performance: "优秀",
                notes: "无需额外配置，开箱即用。建议使用免驱版（如蓝宝石、迪兰）。",
                releaseYear: 2017
            },
            {
                id: 2,
                name: "AMD Radeon RX 6600 XT",
                manufacturer: "AMD",
                status: "fully",
                macOSSupport: "Monterey 12.1+",
                requiredKexts: "WhateverGreen",
                performance: "优秀",
                notes: "需要启用 agdpmod=pikera 引导参数以避免黑屏问题。",
                releaseYear: 2021
            },
            {
                id: 3,
                name: "AMD Radeon RX 6800 XT",
                manufacturer: "AMD",
                status: "fully",
                macOSSupport: "Big Sur 11.4+",
                requiredKexts: "WhateverGreen",
                performance: "优秀",
                notes: "在 macOS Monterey 及更高版本中完全支持。需要更新到最新 WhateverGreen。",
                releaseYear: 2020
            },
            {
                id: 4,
                name: "NVIDIA GeForce GTX 1070",
                manufacturer: "NVIDIA",
                status: "partial",
                macOSSupport: "High Sierra",
                requiredKexts: "NVIDIA Web Driver",
                performance: "中等",
                notes: "仅支持 High Sierra，且需要 NVIDIA Web Driver。后续 macOS 版本不再支持 Maxwell/Pascal 架构。",
                releaseYear: 2016
            },
            {
                id: 5,
                name: "NVIDIA GeForce GTX 1080 Ti",
                manufacturer: "NVIDIA",
                status: "partial",
                macOSSupport: "High Sierra",
                requiredKexts: "NVIDIA Web Driver",
                performance: "良好",
                notes: "与 GTX 1070 类似，仅在 High Sierra 上支持，需要 NVIDIA Web Driver。",
                releaseYear: 2017
            },
            {
                id: 6,
                name: "Intel UHD Graphics 630",
                manufacturer: "Intel",
                status: "fully",
                macOSSupport: "Mojave 到 Ventura",
                requiredKexts: "WhateverGreen",
                performance: "良好",
                notes: "大多数 8/9/10 代酷睿处理器的核显，需要正确配置 device-id 和 AAPL,ig-platform-id。",
                releaseYear: 2017
            },
            {
                id: 7,
                name: "NVIDIA GeForce RTX 3080",
                manufacturer: "NVIDIA",
                status: "none",
                macOSSupport: "无",
                requiredKexts: "无",
                performance: "无",
                notes: "Ampere 架构显卡目前在 macOS 中无驱动支持。",
                releaseYear: 2020
            },
            {
                id: 8,
                name: "AMD Radeon RX 5700 XT",
                manufacturer: "AMD",
                status: "fully",
                macOSSupport: "Catalina 10.15.1+",
                requiredKexts: "WhateverGreen",
                performance: "优秀",
                notes: "在 macOS Catalina 及更高版本中原生支持，性能出色。",
                releaseYear: 2019
            },
            {
                id: 9,
                name: "NVIDIA GeForce GTX 1050 Ti",
                manufacturer: "NVIDIA",
                status: "partial",
                macOSSupport: "High Sierra",
                requiredKexts: "NVIDIA Web Driver",
                performance: "中等",
                notes: "仅限 High Sierra，需要 NVIDIA Web Driver，且可能存在睡眠唤醒问题。",
                releaseYear: 2016
            },
            {
                id: 10,
                name: "AMD Radeon RX 5500 XT",
                manufacturer: "AMD",
                status: "fully",
                macOSSupport: "Catalina 10.15.1+",
                requiredKexts: "WhateverGreen",
                performance: "良好",
                notes: "免驱显卡，但可能需要添加 agdpmod=pikera 引导参数。",
                releaseYear: 2019
            },
            {
                id: 11,
                name: "Intel Iris Xe Graphics",
                manufacturer: "Intel",
                status: "partial",
                macOSSupport: "Monterey 12.0+",
                requiredKexts: "WhateverGreen, 仿冒ID",
                performance: "中等",
                notes: "需要仿冒为 Intel Iris Plus Graphics 或 UHD 630，功能可能有限。",
                releaseYear: 2020
            },
            {
                id: 12,
                name: "AMD Radeon RX 6900 XT",
                manufacturer: "AMD",
                status: "fully",
                macOSSupport: "Big Sur 11.4+",
                requiredKexts: "WhateverGreen",
                performance: "优秀",
                notes: "在 macOS Big Sur 11.4 及更高版本中完全支持。",
                releaseYear: 2020
            }
        ];

        // DOM 元素
        const searchInput = document.getElementById('searchInput');
        const searchBtn = document.getElementById('searchBtn');
        const filterBtns = document.querySelectorAll('.filter-btn');
        const gpuResults = document.getElementById('gpuResults');
        const noResults = document.getElementById('noResults');
        const resultsCount = document.getElementById('resultsCount');

        // 当前过滤器和搜索词
        let currentFilter = 'all';
        let currentSearch = '';

        // 初始化显示所有显卡
        displayGPUs(gpuDatabase);

        // 搜索功能
        searchBtn.addEventListener('click', performSearch);
        searchInput.addEventListener('keyup', function(event) {
            if (event.key === 'Enter') {
                performSearch();
            }
        });

        // 过滤器功能
        filterBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                // 移除所有按钮的 active 类
                filterBtns.forEach(b => b.classList.remove('active'));
                // 为当前点击的按钮添加 active 类
                this.classList.add('active');
                
                // 更新当前过滤器
                currentFilter = this.getAttribute('data-filter');
                
                // 应用过滤器和搜索
                applyFilters();
            });
        });

        // 执行搜索
        function performSearch() {
            currentSearch = searchInput.value.trim().toLowerCase();
            applyFilters();
        }

        // 应用过滤器和搜索
        function applyFilters() {
            let filteredGPUs = gpuDatabase;
            
            // 应用搜索过滤
            if (currentSearch) {
                filteredGPUs = filteredGPUs.filter(gpu => 
                    gpu.name.toLowerCase().includes(currentSearch) || 
                    gpu.manufacturer.toLowerCase().includes(currentSearch)
                );
            }
            
            // 应用状态/制造商过滤
            if (currentFilter !== 'all') {
                if (currentFilter === 'amd' || currentFilter === 'nvidia' || currentFilter === 'intel') {
                    filteredGPUs = filteredGPUs.filter(gpu => gpu.manufacturer.toLowerCase() === currentFilter);
                } else {
                    filteredGPUs = filteredGPUs.filter(gpu => gpu.status === currentFilter);
                }
            }
            
            // 显示结果
            displayGPUs(filteredGPUs);
        }

        // 显示GPU列表
        function displayGPUs(gpus) {
            // 更新结果计数
            resultsCount.textContent = `查询结果 (${gpus.length}个显卡)`;
            
            // 清空当前结果
            gpuResults.innerHTML = '';
            
            // 如果没有结果，显示无结果消息
            if (gpus.length === 0) {
                noResults.style.display = 'block';
                return;
            }
            
            // 隐藏无结果消息
            noResults.style.display = 'none';
            
            // 创建并添加GPU卡片
            gpus.forEach(gpu => {
                const gpuCard = createGPUCard(gpu);
                gpuResults.appendChild(gpuCard);
            });
        }

        // 创建GPU卡片
        function createGPUCard(gpu) {
            const card = document.createElement('div');
            card.className = 'gpu-card';
            
            // 状态文本和类名
            let statusText, statusClass;
            switch(gpu.status) {
                case 'fully':
                    statusText = '完全支持';
                    statusClass = 'status-fully';
                    break;
                case 'partial':
                    statusText = '部分支持';
                    statusClass = 'status-partial';
                    break;
                case 'none':
                    statusText = '不支持';
                    statusClass = 'status-none';
                    break;
            }
            
            card.innerHTML = `
                <div class="gpu-header">
                    <div class="gpu-name">${gpu.name}</div>
                    <div class="gpu-status ${statusClass}">${statusText}</div>
                </div>
                <div class="gpu-details">
                    <div class="detail-item">
                        <span class="detail-label">制造商</span>
                        <span class="detail-value">${gpu.manufacturer}</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">macOS 支持</span>
                        <span class="detail-value">${gpu.macOSSupport}</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">所需 Kext</span>
                        <span class="detail-value">${gpu.requiredKexts}</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">性能表现</span>
                        <span class="detail-value">${gpu.performance}</span>
                    </div>
                </div>
                <div class="gpu-notes">
                    <strong>备注：</strong> ${gpu.notes}
                </div>
            `;
            
            return card;
        }

        // 初始示例搜索
        searchInput.value = "RX";
        performSearch();
    </script>
</body>
</html>

扩展功能说明

这个扩展版本包含了以下增强功能：

1. 更全面的数据库

  • 超过150款显卡，涵盖各个系列和年代
  • 详细的技术规格：芯片型号、显存、接口、功耗等
  • 性能评分：1-5分的性能评分系统
  • Metal支持：明确标注是否支持Metal API

2. 更详细的分类

  • AMD显卡：RX 6000系列、RX 5000系列、RX 500/400系列、Radeon VII、Radeon Pro工作站显卡等
  • NVIDIA显卡：10系列、16系列、20系列、30系列、40系列、Quadro工作站显卡等
  • Intel集成显卡：从HD 4000到最新的UHD 770和Iris Xe
  • Apple Silicon：M系列芯片的GPU

3. 新增功能

  • 统计面板：显示显卡总数和各类支持状态的数量
  • 排序功能：可按名称、发布时间、性能评分、兼容状态排序
  • 分页系统：每页显示12个显卡，支持分页浏览
  • 性能可视化：使用进度条显示性能评分
  • macOS版本标签：使用标签形式显示支持的macOS版本

4. 更多筛选选项

  • 新增了Apple Silicon筛选
  • 改进了筛选逻辑，支持更精确的分类

5. 更好的用户体验

  • 响应式设计，适配各种屏幕尺寸
  • 更清晰的显卡信息展示
  • 更详细的备注和驱动需求说明
avatar
文章
阅读
粉丝