<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Use ChatGPT for free</title>
    <meta name="description" content="">
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
   <style>
body {
  background-color: #040c1f;
  color: #ccc;
}

table {
  border-collapse: collapse;
  width: 100%;
  color: #ccc;
}

th,
td {
  text-align: left;
  padding: 8px;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
  color: #ccc;
}

th:first-child,
td:first-child {
  border-left: 1px solid #ddd;
}

td:first-child {
  font-weight: bold; /* Add this rule */
}

.logo-text {
  font-family: Arial, sans-serif;
  font-size: 36px;
  font-weight: bold;
  color: #fff;
  #background-color: #81dafc;
  padding: 10px 20px;
  border-radius: 5px;
  margin: 20px auto;
  text-align: center;
}

.author {
  text-align: center;
  font-weight: bold;
  margin-top: 20px;
}

/* Footer styles */
.footer {
  background-color: #040c1f;
  color: #ccc;
  text-align: center;
  padding: 10px;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}

a {
  color: #81dafc;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Search bar styles */
#search-input {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  box-sizing: border-box;
  color: #ccc;
}

input[type="text"] {
  background-color: #20203d;
  border: none;
  color: #ccc;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 5px;
}
</style>


  </head>

  <body>
    <!-- Logo -->
    <div class="logo-text">Use ChatGPT for free</div>
	<p>test</p>
<!-- Table -->
<input type="text" id="search-input" placeholder="Search...">
<table role="table" aria-label="Web page table">
  <thead>
    <tr>
      <th>№</th>
      <th>Title</th>
      <th>Link</th>
      <th>Description</th>
      <th>API</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1.</td>
      <td><span style="display:inline-block;margin-right:5px;">⭐</span>Invidious</td>
      <td><a href="https://yewtu.be" target="_blank">yewtu.be</a></td>
      <td>Astronomy Picture of the Day, Mars Rover Photos, and more.</td>
      <td>gpt4</td>
    </tr>

    <tr>
      <td>2.</td>
      <td>Invidious</td>
      <td><a href="https://invidious.kavin.rocks" target="_blank">invidious.kavin.rocks</a></td>
      <td>Astronomy Picture of the Day, Mars Rover Photos, and more.</td>
      <td>gpt4</td>
    </tr>
  </tbody>
</table>

<!-- Footer -->
<div class="footer">
  <p>&copy; John Doe
  <br>Contact: john.doe@email.com</p>
</div>

<!-- JavaScript for table sorting/filtering -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
      $(document).ready(function(){
        // Initialize table sorting/filtering
        var headers = document.getElementsByTagName("th");
        for (var i = 0; i < headers.length; i++) {
          headers[i].addEventListener("click", function() {
            var index = Array.prototype.indexOf.call(headers, this);
            sortTable(index);
          });
        }

        // Add search functionality
        $('#search-input').on('keyup', function () {
          var value = $(this).val().toLowerCase();
          $('tbody tr').filter(function () {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
          });
        });
      });

      function sortTable(n) {
        var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
        table = document.getElementsByTagName("table")[0];
        switching = true;
        dir = "asc";
        while (switching) {
          switching = false;
          rows = table.rows;
          for (i = 1; i < (rows.length - 1); i++) {
            shouldSwitch = false;
            x = rows[i].getElementsByTagName("TD")[n];
            y = rows[i + 1].getElementsByTagName("TD")[n];
            if (dir == "asc") {
              if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                shouldSwitch = true;
                break;
              }
            } else if (dir == "desc") {
              if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
                shouldSwitch = true;
                break;
              }
            }
          }
          if (shouldSwitch) {
            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
            switching = true;
            switchcount ++;
          } else {
            if (switchcount == 0 && dir == "asc") {
              dir = "desc";
              switching = true;
            }
          }
        }
      }
    </script>
  </body>
</html>