wangpan.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网盘资源</title>
    <style>
        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            background-color:white;/*-color: blanchedalmond #f4f7f6; */
            color: #333;
            
        }

        h5 {
            display: flex;
            justify-content: space-between; /* 标题和图片两端对齐 */
            align-items: center; /* 垂直居中 */
            background-color: blanchedalmond;
            padding: 10px;
            margin: 0;
            font-size: 24px;
            font-weight: bold;
            color: white;/* 0077cc */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        h5 img {
            height: 40px; /* 设置图片高度 */
            margin-left: 10px; /* 与标题间距 */
        }

        .table-container {
            width: 90%;
            margin: 20px auto;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 12px 15px;
            text-align: left;
            font-size: 14px;
            border-bottom: 1px solid #ddd;
        }

        th {
            background: linear-gradient(90deg, #4facfe, #00f2fe);
            color: white;
            font-size: 16px;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
        }

        thead th {
            position: sticky;
            top: 0;
            background: linear-gradient(90deg, #4facfe, #00f2fe);
            z-index: 2;
        }

        tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        tr:hover {
            background-color: #eaf6ff;
        }

        td a {
            color: #0077cc;
            text-decoration: none;
            font-weight: bold;
        }

        td a:hover {
            text-decoration: underline;
        }

        .filter-bar {
            position: fixed;
            bottom: 60px;
            left: 50%;
            transform: translateX(-50%);
            background-color: revert-layer;/* #0077cc*/
            padding: 12px;
            border-radius: 30px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .filter-bar input {
            padding: 8px;
            border: none;
            border-radius: 20px;
            width: 300px;
            font-size: 14px;
        }

        .filter-bar input:focus {
            outline: none;
            box-shadow: 0 0 8px rgba(0, 0, 255, 0.3);
        }
    </style>
    
    <!-- Cloudflare Web Analytics -->
    <script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "4c0a6a67417444aa9f8f8b507aad5f96"}'></script>
    <!-- End Cloudflare Web Analytics -->

    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-VW62L5RT2K"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-VW62L5RT2K');
    </script>
    
</head>
<body>

<h5>
    <a href="https://wldt.qsyshare.com" target="_self">
    <img src="./images/logo.png" alt="Logo">
</a>
</h5>

<div class="table-container">
    <table id="csvTable">
        <!-- Table content will be populated here -->
    </table>
</div>

<div class="filter-bar">
    <input type="text" id="filterInput" placeholder="输入关键字筛选" onkeyup="filterTable()">
</div>

<script>
// Function to read CSV file and populate table
function loadCSV() {
    fetch('./wangpan.csv')
        .then(response => response.text())
        .then(data => {
            const rows = data.split('\n');
            const table = document.getElementById('csvTable');
            let tableHTML = '';
            rows.forEach((row, rowIndex) => {
                const columns = row.split(',');
                if (rowIndex === 0) {
                    tableHTML += '<thead><tr>';
                    columns.forEach(col => {
                        tableHTML += `<th>${col.trim()}</th>`;
                    });
                    tableHTML += '</tr></thead><tbody>';
                } else {
                    tableHTML += '<tr>';
                    columns.forEach(col => {
                        // Check if the cell contains a URL and convert it to a hyperlink
                        const cellContent = col.trim();
                        const urlPattern = /(https?:\/\/[^\s]+)/g;
                        if (urlPattern.test(cellContent)) {
                            tableHTML += `<td><a href="${cellContent}" target="_blank">${cellContent}</a></td>`;
                        } else {
                            tableHTML += `<td>${cellContent}</td>`;
                        }
                    });
                    tableHTML += '</tr>';
                }
            });
            tableHTML += '</tbody>';
            table.innerHTML = tableHTML;
        });
}

// Function to filter table rows based on input
function filterTable() {
    const filterValue = document.getElementById('filterInput').value.toLowerCase();
    const rows = document.querySelectorAll('#csvTable tbody tr');
    rows.forEach(row => {
        const cells = row.querySelectorAll('td');
        let rowContainsFilter = false;
        cells.forEach(cell => {
            if (cell.textContent.toLowerCase().includes(filterValue)) {
                rowContainsFilter = true;
            }
        });
        row.style.display = rowContainsFilter ? '' : 'none';
    });
}

// Load CSV data on page load
window.onload = loadCSV;
</script>

</body>
</html>