<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="DataScanner lets you easily search and scan datasets locally for exact matches while ensuring your data remains private and secure."
    />
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self' https://cdn.sheetjs.com; style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com;"
    />
    <link rel="stylesheet" href="./styles.css" />
    <script defer src="./app.js"></script>
    <title>DataScanner: Scan Datasets Locally and Securely</title>
  </head>

  <body>
    <div class="container">
      <header>
        <h1 id="mainTitle">DataScanner</h1>
        <h2 id="subTitle">Scan Datasets Locally and Securely</h2>
      </header>
      <main>
        <section 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 />
          DataScanner is fast, secure, and efficient: perfect for uncovering
          insights across large datasets!
        </section>

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

        <label for="searchValues"
          >Enter Search Values
          <span id="semicase">(semicolon-separated, case-insensitive)</span
          >:</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>
      </main>
      <footer>
        &copy; <span id="year"></span> RefractedCode |
        <span id="email-favicon"
          ><a href="mailto:refractedcode@gmail.com">
            <img src="./icons8-email-m_rounded-16.png" alt="Email Icon" /></a
        ></span>
        <p id="prohibition">
          For personal use only. Misuse or copying of this intellectual property
          is prohibited.
        </p>
      </footer>
    </div>
  </body>
</html>