<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <script src="getXLXS.js" defer></script>
    <script src="app.js" defer></script>
    <title>DataScanner: Scan Datasets Locally and Securely</title>
  </head>
  <body>
    <div class="container">
      <h1 id="mainTitle">DataScanner</h1>
      <h2 id="subTitle">Scan Datasets Locally and Securely</h2>
      <p id="toolInfo">
        Effortlessly search through multiple files (.xlsx, .xlsm, .csv) directly
        on your device. Enter the values you’re looking for (e.g., names,
        numbers, emails, cryptodata), and DataScanner will meticulously scan
        every sheet to find exact matches. <br /><br />Your data remains
        private—everything happens offline on your computer. Once the search is
        complete, a comprehensive report of the matches automatically downloads
        to your device. Ideal for fast and secure data discovery in large
        datasets!
      </p>

      <!-- Updated File Input -->
      <div class="file-upload-wrapper">
        <label for="fileInput" class="custom-file-upload">Select Files</label>
        <span class="file-name">No file chosen</span>
        <input type="file" id="fileInput" multiple accept=".xlsx,.xlsm,.csv" />
      </div>

      <label for="searchValues"
        >Enter Search Values (comma-separated, case-insensitive):</label
      >
      <input
        type="text"
        autocomplete="off"
        id="searchValues"
        placeholder="e.g., john, 1234, email@example.com, qp3wjpa..."
      />

      <button id="startSearch">Search</button>

      <div id="progress">
        <span id="progressMessage">0%</span>
        <div id="progressBar"><div></div></div>
      </div>
      <footer>2024@HKN</footer>
    </div>
  </body>
</html>
