index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>V-Score Search</title>
    <link rel="stylesheet" href="./Software/styles.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
</head>
<body>
    <div id="instructionsBox">
        <h2>Instructions</h2>
        <p>Choose database, then accession</p>
        <p>ex. [VOG, VOG00001]</p>
        <p>Click V-Score header to sort.</p>
        <p>Download data, click Export CSV</p>
        <p>Databases: KEGG, eggNOG, Pfam, PHROG, VOG</p>
        <p>You can also search by protein name</p>
    </div>
    <img src="./Software/LabHeader.jpg" alt="Header of Lab" id="headerImage">
    <h1>V-Score Search</h1>
    <div class="search-container">
        <input type="text" id="searchInput" placeholder="Search...">
    </div>
    <a href="data.csv" download="data.csv">Export CSV</a>
    
    <table id="dataTable">
        <thead>
            <tr>
                <th class="sortable" data-column="Accession">Accession</th>
                <th class="sortable" data-column="Protein Function">Protein Function</th>
                <th class="sortable" data-column="V-Score">V-Score</th>
                <th class="sortable" data-column="Log V-Score">Log V-Score</th>
                <th class="sortable" data-column="Database">Database</th>
            </tr>
        </thead>
        <tbody>
            <!-- Data will be inserted here dynamically -->
        </tbody>
    </table>
    
    <!-- Pagination container -->
    <div id="pagination"></div>
    
    <footer>
        <p>Source: Citations Go Here</p>
    </footer>
    <script src="./Software/script.js"></script>
</body>
</html>