93 lines
2.7 KiB
HTML
93 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Paper-Like Website</title>
|
|
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="container">
|
|
<h1>Conditions</h1>
|
|
<button onclick="openModal()">Add Item</button>
|
|
<table id="dataTable">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Name</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Data will be inserted here dynamically -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div id="myModal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close" onclick="closeModal()">×</span>
|
|
<h2>Add Item</h2>
|
|
<form id="addItemForm">
|
|
<label for="itemName">Name:</label><br>
|
|
<input type="text" id="itemName" name="itemName" required><br>
|
|
<label for="itemDescription">Description:</label><br>
|
|
<textarea id="itemDescription" name="itemDescription" required></textarea><br><br>
|
|
<button type="submit">Submit</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Sample data to populate the table
|
|
const sampleData = [
|
|
{ id: 1, name: 'Item 1', description: 'Description for Item 1' },
|
|
{ id: 2, name: 'Item 2', description: 'Description for Item 2' },
|
|
{ id: 3, name: 'Item 3', description: 'Description for Item 3' }
|
|
];
|
|
|
|
// Function to populate the table with data
|
|
function populateTable(data) {
|
|
const tableBody = document.querySelector('#dataTable tbody');
|
|
tableBody.innerHTML = '';
|
|
data.forEach(item => {
|
|
const row = `<tr>
|
|
<td>${item.id}</td>
|
|
<td>${item.name}</td>
|
|
<td>${item.description}</td>
|
|
</tr>`;
|
|
tableBody.insertAdjacentHTML('beforeend', row);
|
|
});
|
|
}
|
|
|
|
// Open modal function
|
|
function openModal() {
|
|
document.getElementById('myModal').style.display = 'block';
|
|
}
|
|
|
|
// Close modal function
|
|
function closeModal() {
|
|
document.getElementById('myModal').style.display = 'none';
|
|
}
|
|
|
|
// Handle form submission
|
|
document.getElementById('addItemForm').addEventListener('submit', function (event) {
|
|
event.preventDefault();
|
|
const itemName = document.getElementById('itemName').value;
|
|
const itemDescription = document.getElementById('itemDescription').value;
|
|
// Here you would typically send this data to the backend
|
|
// For simplicity, let's just log it for now
|
|
console.log('Submitted:', itemName, itemDescription);
|
|
closeModal();
|
|
});
|
|
|
|
// Initially populate the table with sample data
|
|
populateTable(sampleData);
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |