<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; 
             style-src 'self' https://fonts.googleapis.com; 
             font-src 'self' https://fonts.gstatic.com;"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <script src="xlsx.full.min.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">
        Easily search through multiple .xlsx, .xlsm, and .csv files on your
        device. Enter values (names, numbers, emails, cryptodata, etc.), and
        DataScanner will meticulously scan each file and sheet for exact
        matches—all the magic happens offline to keep your data private. Once
        completed, a detailed report of the matches is generated and downloaded.
        <br /><br />
        Fast, secure, and efficient—DataScanner is perfect for uncovering
        insights across large datasets!
      </p>

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

      <label for="searchValues"
        >Enter Search Values (semicolon-separated, case-insensitive):</label
      >
      <input
        type="text"
        autocomplete="off"
        id="searchValues"
        placeholder="e.g.: john; 1,500.25; email@mail.com; 0.9455102; BTC; qp3wjpa..."
        aria-label="Enter search values"
      />

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

      <div id="progress" role="status" aria-live="polite">
        <span id="progressMessage">0%</span>
        <div id="progressBar"><div></div></div>
      </div>
      <footer>
        &copy; <span id="year"></span> DefectedCode (defectedcode@gmail.com)
        <p id="prohibition">
          For personal use only. Redistribution strictly prohibited.
        </p>
      </footer>
    </div>
  </body>
</html>
