parMaster/index.html

## index.html
<!--
This web page is generated by ChatGPT. The result was copied and pasted here. The prompt is:

Could you help me with HTML page that will use an API and display the results in a table.

API endpoint: https://torrents-csv.ml/service/search?q=[QUERY]&size=[NUMBER_OF_RESULTS]&page=[PAGE]

There is a form with a text input and "Search" button. When the button is clicked, API is called and results (or "no results" label) are displayed in a table.

API response example:
[
  {
    "infohash": "224bf45881252643dfc2e71abc7b2660a21c68c4",
    "name": "Inception (2010) 1080p BrRip x264 - 1.85GB - YIFY",
    "size_bytes": 1991613584,
    "created_unix": 1339547627,
    "seeders": 578,
    "leechers": 213,
    "completed": 21204,
    "scraped_date": 1690727566
  },
  {
    "infohash": "43e3691dc6f4172841e32b25b349e2b7a980b9c5",
    "name": "Inception (2010) [2160p] [4K] [BluRay] [5.1] [YTS.MX]",
    "size_bytes": 7132263739,
    "created_unix": 1677420667,
    "seeders": 165,
    "leechers": 56,
    "completed": 10448,
    "scraped_date": 1689503563
  }
]

The table has 5 columns: Name, Size (in Mb), Seeders, Leechers, Magnet.
Magnet column has a link with magnet URI as href attribute. Magnet uri is in the following format: magnet:?xt=urn:btih:[INFOHASH]&dn=[NAME]
The table has a pagination with 10 results per page.

There should be a loading indicator when the API is called.

It should be pure HTML, CSS and JS. No frameworks or libraries.

There should also be a simple pagination - just previous and next page buttons
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Torrent Search</title>
<style>
  body {
    font-family: Arial, sans-serif;
  }
  #results-table {
    width: 100%;
    border-collapse: collapse;
  }
  #results-table th,
  #results-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  #loading {
    display: none;
  }
</style>
</head>
<body>
<h1>Torrent Search</h1>
<form id="search-form">
  <input type="text" id="query" placeholder="Enter your search query">
  <button type="submit">Search</button>
</form>
<div id="loading">Loading...</div>
<table id="results-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Size (MB)</th>
      <th>Seeders</th>
      <th>Leechers</th>
      <th>Magnet</th>
    </tr>
  </thead>
  <tbody id="results-body">
    <!-- Results will be inserted here -->
  </tbody>
</table>
<div id="pagination">
  <button id="prev-page" disabled>Previous</button>
  <button id="next-page" disabled>Next</button>
</div>
<script>
  const searchForm = document.getElementById('search-form');
  const queryInput = document.getElementById('query');
  const loadingIndicator = document.getElementById('loading');
  const resultsBody = document.getElementById('results-body');
  const prevPageButton = document.getElementById('prev-page');
  const nextPageButton = document.getElementById('next-page');

  let currentPage = 1;

  searchForm.addEventListener('submit', async (e) => {
    e.preventDefault();
    currentPage = 1; // Reset current page when a new search is performed
    await performSearch();
  });

  prevPageButton.addEventListener('click', async () => {
    if (currentPage > 1) {
      currentPage--;
      await performSearch();
    }
  });

  nextPageButton.addEventListener('click', async () => {
    currentPage++;
    await performSearch();
  });

  async function performSearch() {
    loadingIndicator.style.display = 'block';
    resultsBody.innerHTML = ''; // Clear previous results

    const query = queryInput.value;
    const numberOfResults = 10;
    const apiUrl = `https://torrents-csv.ml/service/search?q=${query}&size=${numberOfResults}&page=${currentPage}`;

    try {
      const response = await fetch(apiUrl);
      const data = await response.json();

      loadingIndicator.style.display = 'none';
      prevPageButton.disabled = currentPage === 1;

      if (data.length === 0) {
        resultsBody.innerHTML = '<tr><td colspan="5">No results found.</td></tr>';
        nextPageButton.disabled = true;
        return;
      }

      nextPageButton.disabled = false;

      data.forEach(result => {
        const newRow = document.createElement('tr');
        newRow.innerHTML = `
          <td>${result.name}</td>
          <td>${(result.size_bytes / 1024 / 1024).toFixed(2)}</td>
          <td>${result.seeders}</td>
          <td>${result.leechers}</td>
          <td><a href="magnet:?xt=urn:btih:${result.infohash}&dn=${result.name}">Magnet</a></td>
        `;
        resultsBody.appendChild(newRow);
      });
    } catch (error) {
      console.error('Error fetching results:', error);
      loadingIndicator.style.display = 'none';
    }
  }
</script>
</body>
</html>
	<!--
	This web page is generated by ChatGPT. The result was copied and pasted here. The prompt is:

	Could you help me with HTML page that will use an API and display the results in a table.

	API endpoint: https://torrents-csv.ml/service/search?q=[QUERY]&size=[NUMBER_OF_RESULTS]&page=[PAGE]

	There is a form with a text input and "Search" button. When the button is clicked, API is called and results (or "no results" label) are displayed in a table.

	API response example:
	[
	{
	"infohash": "224bf45881252643dfc2e71abc7b2660a21c68c4",
	"name": "Inception (2010) 1080p BrRip x264 - 1.85GB - YIFY",
	"size_bytes": 1991613584,
	"created_unix": 1339547627,
	"seeders": 578,
	"leechers": 213,
	"completed": 21204,
	"scraped_date": 1690727566
	},
	{
	"infohash": "43e3691dc6f4172841e32b25b349e2b7a980b9c5",
	"name": "Inception (2010) [2160p] [4K] [BluRay] [5.1] [YTS.MX]",
	"size_bytes": 7132263739,
	"created_unix": 1677420667,
	"seeders": 165,
	"leechers": 56,
	"completed": 10448,
	"scraped_date": 1689503563
	}
	]

	The table has 5 columns: Name, Size (in Mb), Seeders, Leechers, Magnet.
	Magnet column has a link with magnet URI as href attribute. Magnet uri is in the following format: magnet:?xt=urn:btih:[INFOHASH]&dn=[NAME]
	The table has a pagination with 10 results per page.

	There should be a loading indicator when the API is called.

	It should be pure HTML, CSS and JS. No frameworks or libraries.

	There should also be a simple pagination - just previous and next page buttons
	-->
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Torrent Search</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	}
	#results-table {
	width: 100%;
	border-collapse: collapse;
	}
	#results-table th,
	#results-table td {
	border: 1px solid #ddd;
	padding: 8px;
	text-align: left;
	}
	#loading {
	display: none;
	}
	</style>
	</head>
	<body>
	<h1>Torrent Search</h1>
	<form id="search-form">
	<input type="text" id="query" placeholder="Enter your search query">
	<button type="submit">Search</button>
	</form>
	<div id="loading">Loading...</div>
	<table id="results-table">
	<thead>
	<tr>
	<th>Name</th>
	<th>Size (MB)</th>
	<th>Seeders</th>
	<th>Leechers</th>
	<th>Magnet</th>
	</tr>
	</thead>
	<tbody id="results-body">
	<!-- Results will be inserted here -->
	</tbody>
	</table>
	<div id="pagination">
	<button id="prev-page" disabled>Previous</button>
	<button id="next-page" disabled>Next</button>
	</div>
	<script>
	const searchForm = document.getElementById('search-form');
	const queryInput = document.getElementById('query');
	const loadingIndicator = document.getElementById('loading');
	const resultsBody = document.getElementById('results-body');
	const prevPageButton = document.getElementById('prev-page');
	const nextPageButton = document.getElementById('next-page');

	let currentPage = 1;

	searchForm.addEventListener('submit', async (e) => {
	e.preventDefault();
	currentPage = 1; // Reset current page when a new search is performed
	await performSearch();
	});

	prevPageButton.addEventListener('click', async () => {
	if (currentPage > 1) {
	currentPage--;
	await performSearch();
	}
	});

	nextPageButton.addEventListener('click', async () => {
	currentPage++;
	await performSearch();
	});

	async function performSearch() {
	loadingIndicator.style.display = 'block';
	resultsBody.innerHTML = ''; // Clear previous results

	const query = queryInput.value;
	const numberOfResults = 10;
	const apiUrl = `https://torrents-csv.ml/service/search?q=${query}&size=${numberOfResults}&page=${currentPage}`;

	try {
	const response = await fetch(apiUrl);
	const data = await response.json();

	loadingIndicator.style.display = 'none';
	prevPageButton.disabled = currentPage === 1;

	if (data.length === 0) {
	resultsBody.innerHTML = '<tr><td colspan="5">No results found.</td></tr>';
	nextPageButton.disabled = true;
	return;
	}

	nextPageButton.disabled = false;

	data.forEach(result => {
	const newRow = document.createElement('tr');
	newRow.innerHTML = `
	<td>${result.name}</td>
	<td>${(result.size_bytes / 1024 / 1024).toFixed(2)}</td>
	<td>${result.seeders}</td>
	<td>${result.leechers}</td>
	<td><a href="magnet:?xt=urn:btih:${result.infohash}&dn=${result.name}">Magnet</a></td>
	`;
	resultsBody.appendChild(newRow);
	});
	} catch (error) {
	console.error('Error fetching results:', error);
	loadingIndicator.style.display = 'none';
	}
	}
	</script>
	</body>
	</html>