darkfrog26 · May 29, 2025 22:48
diff --git a/test.html b/test.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Dynamic Contested Permit Viewer</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f6f9;
      color: #333;
      padding: 20px;
    }
    h1, h2 {
      color: #1e88e5;
    }
    .section {
      margin-bottom: 40px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      padding: 20px;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 10px;
    }
    th, td {
      text-align: left;
      padding: 10px;
      border-bottom: 1px solid #ddd;
    }
    th {
      background-color: #e3f2fd;
    }
  </style>
 </head>
 <body>
  <h1>Contested Permit Viewer</h1>
  <input type="file" id="fileInput" accept="application/json">
  <div id="content"></div>

  <script>
    document.getElementById('fileInput').addEventListener('change', function(event) {
      const file = event.target.files[0];
      if (!file) return;
      const reader = new FileReader();
      reader.onload = function(e) {
        const data = JSON.parse(e.target.result);
        renderContent(data);
      };
      reader.readAsText(file);
    });

    function renderContent(data) {
      const content = document.getElementById('content');
      content.innerHTML = '';

      function section(title, html) {
        return `<div class="section"><h2>${title}</h2>${html}</div>`;
      }

      const details = `
        <p><strong>Status:</strong> ${data.status}</p>
        <p><strong>Type:</strong> ${data.permitType}</p>
        <p><strong>Permit Number:</strong> ${data.permitNumber}</p>
        <p><strong>Well Name & Number:</strong> ${data.wellName}</p>
        <p><strong>API Number:</strong> ${data.api}</p>
        <p><strong>Operator:</strong> ${data.operator}</p>
        <p><strong>County:</strong> ${data.county}</p>
        <p><strong>Permit Date:</strong> ${data.permitDate}</p>
        <p><strong>URL:</strong> <a href="${data.url}" target="_blank">View Permit</a></p>
      `;

      const legalRows = data.legalDescriptions.map(desc => `
        <tr>
          <td>${desc.section}</td>
          <td>${desc.township}</td>
          <td>${desc.range}</td>
          <td>${desc.meridian}</td>
        </tr>
      `).join('');

      const legalTable = `
        <table>
          <thead>
            <tr><th>Section</th><th>Township</th><th>Range</th><th>Meridian</th></tr>
          </thead>
          <tbody>
            ${legalRows}
          </tbody>
        </table>
      `;

      const partyRows = data.parties.map(party => `
        <tr>
          <td>${party.name}</td>
          <td>${party.type}</td>
          <td>${party.address}</td>
        </tr>
      `).join('');

      const partyTable = `
        <table>
          <thead>
            <tr><th>Name</th><th>Type</th><th>Address</th></tr>
          </thead>
          <tbody>
            ${partyRows}
          </tbody>
        </table>
      `;

      content.innerHTML = `
        ${section('Permit Details', details)}
        ${section('Legal Descriptions', legalTable)}
        ${section('Parties', partyTable)}
        ${section('Notes', '<p>This permit is currently contested by multiple parties with interests in the proposed well location.</p>')}
      `;
    }
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Dynamic Contested Permit Viewer</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	background-color: #f4f6f9;
	color: #333;
	padding: 20px;
	}
	h1, h2 {
	color: #1e88e5;
	}
	.section {
	margin-bottom: 40px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	padding: 20px;
	}
	table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 10px;
	}
	th, td {
	text-align: left;
	padding: 10px;
	border-bottom: 1px solid #ddd;
	}
	th {
	background-color: #e3f2fd;
	}
	</style>
	</head>
	<body>
	<h1>Contested Permit Viewer</h1>
	<input type="file" id="fileInput" accept="application/json">
	<div id="content"></div>

	<script>
	document.getElementById('fileInput').addEventListener('change', function(event) {
	const file = event.target.files[0];
	if (!file) return;
	const reader = new FileReader();
	reader.onload = function(e) {
	const data = JSON.parse(e.target.result);
	renderContent(data);
	};
	reader.readAsText(file);
	});

	function renderContent(data) {
	const content = document.getElementById('content');
	content.innerHTML = '';

	function section(title, html) {
	return `<div class="section"><h2>${title}</h2>${html}</div>`;
	}

	const details = `
	<p><strong>Status:</strong> ${data.status}</p>
	<p><strong>Type:</strong> ${data.permitType}</p>
	<p><strong>Permit Number:</strong> ${data.permitNumber}</p>
	<p><strong>Well Name & Number:</strong> ${data.wellName}</p>
	<p><strong>API Number:</strong> ${data.api}</p>
	<p><strong>Operator:</strong> ${data.operator}</p>
	<p><strong>County:</strong> ${data.county}</p>
	<p><strong>Permit Date:</strong> ${data.permitDate}</p>
	<p><strong>URL:</strong> <a href="${data.url}" target="_blank">View Permit</a></p>
	`;

	const legalRows = data.legalDescriptions.map(desc => `
	<tr>
	<td>${desc.section}</td>
	<td>${desc.township}</td>
	<td>${desc.range}</td>
	<td>${desc.meridian}</td>
	</tr>
	`).join('');

	const legalTable = `
	<table>
	<thead>
	<tr><th>Section</th><th>Township</th><th>Range</th><th>Meridian</th></tr>
	</thead>
	<tbody>
	${legalRows}
	</tbody>
	</table>
	`;

	const partyRows = data.parties.map(party => `
	<tr>
	<td>${party.name}</td>
	<td>${party.type}</td>
	<td>${party.address}</td>
	</tr>
	`).join('');

	const partyTable = `
	<table>
	<thead>
	<tr><th>Name</th><th>Type</th><th>Address</th></tr>
	</thead>
	<tbody>
	${partyRows}
	</tbody>
	</table>
	`;

	content.innerHTML = `
	${section('Permit Details', details)}
	${section('Legal Descriptions', legalTable)}
	${section('Parties', partyTable)}
	${section('Notes', '<p>This permit is currently contested by multiple parties with interests in the proposed well location.</p>')}
	`;
	}
	</script>
	</body>
	</html>