<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Unified Theory Data Log</title>
<style>
body { font-family: sans-serif; margin: 20px; background: #f4f7f6; color: #333; }
.container { max-width: 800px; margin: auto; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; background: white; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
th, tfoot td { background: #ececec; font-weight: bold; }
.panel { background: #fff; padding: 20px; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 20px; }
input, select { padding: 8px; margin: 5px 5px 10px 0; border: 1px solid #ccc; border-radius: 4px; }
button { padding: 8px 15px; cursor: pointer; background: #2c3e50; color: white; border: none; border-radius: 4px; }
button:hover { background: #34495e; }
.instructions { font-size: 0.85em; color: #7f8c8d; margin-top: 15px; }
</style>
</head>
<body onload="updateTotal()">
<div class="container">
<h2>Data Entry & Management</h2>
<div class="panel">
<input type="text" id="id" placeholder="ID">
<input type="text" id="name" placeholder="Name">
<input type="date" id="date">
<input type="number" id="amount" placeholder="Amount">
<button onclick="addRow()">Add Row</button>
<div style="margin-top:15px; border-top:1px solid #eee; pt:15px; padding-top:15px;">
<strong>Sort By:</strong>
<select id="sortColumn">
<option value="0">ID</option>
<option value="1">Name</option>
<option value="2">Date</option>
<option value="3">Amount</option>
</select>
<button onclick="sortTable()">Sort Now</button>
</div>
<p class="instructions">
Press <strong>Ctrl+S</strong> to save your data and the calculated total.
</p>
</div>
<table id="dataTable">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Date</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="3" style="text-align: right;">Total Amount:</td>
<td id="totalDisplay">0</td>
</tr>
</tfoot>
</table>
</div>
<script>
function updateTotal() {
const rows = Array.from(document.querySelectorAll('#dataTable tbody tr'));
const total = rows.reduce((sum, row) => {
const val = parseFloat(row.cells[3].innerText) || 0;
return sum + val;
}, 0);
document.getElementById('totalDisplay').innerText = total.toLocaleString();
}
function addRow() {
const idVal = document.getElementById('id').value;
const nameVal = document.getElementById('name').value;
const dateVal = document.getElementById('date').value;
const amountVal = document.getElementById('amount').value;
if(!idVal || !nameVal) return alert("Fill in ID and Name");
const tableBody = document.querySelector('#dataTable tbody');
const newRow = tableBody.insertRow();
newRow.insertCell(0).innerText = idVal;
newRow.insertCell(1).innerText = nameVal;
newRow.insertCell(2).innerText = dateVal;
newRow.insertCell(3).innerText = amountVal;
updateTotal(); // Refresh sum
['id', 'name', 'date', 'amount'].forEach(id => document.getElementById(id).value = '');
}
function sortTable() {
const tableBody = document.querySelector('#dataTable tbody');
const rows = Array.from(tableBody.rows);
const colIndex = parseInt(document.getElementById('sortColumn').value);
const sortedRows = rows.sort((a, b) => {
let valA = a.cells[colIndex].innerText.toLowerCase();
let valB = b.cells[colIndex].innerText.toLowerCase();
if (!isNaN(valA) && !isNaN(valB) && valA !== "" && valB !== "") {
return parseFloat(valA) - parseFloat(valB);
}
return valA.localeCompare(valB);
});
sortedRows.forEach(row => tableBody.appendChild(row));
updateTotal(); // Refresh total in case sorting order affects display logic
}
</script>
</body>
</html>