<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
<title>Contacts</title> | |
<link href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css" rel="stylesheet"> | |
<style> | |
body { | |
font-family: Arial, sans-serif; | |
text-align: center; | |
background-color: #f0f0f0; | |
margin: 0; | |
padding: 0; | |
} | |
h1 { | |
background-color: #4CAF50; | |
color: white; | |
padding: 20px; | |
margin: 0; | |
border-bottom: 2px solid #388E3C; | |
} | |
#table { | |
width: 70%; | |
margin: 20px auto; | |
} | |
p { | |
margin-top: 20px; | |
font-size: 18px; | |
color: #333; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>База синзронизации с Getcurse</h1> | |
<p>Total users: <span id="total-users">{{ total_users }}</span></p> | |
<table id="contactsTable" class="display" style="width:100%"> | |
<thead> | |
<tr> | |
<th>Имя</th> | |
<th>Телефон</th> | |
<th>Почта</th> | |
</tr> | |
</thead> | |
<tbody> | |
<!-- Данные будут загружены через AJAX --> | |
</tbody> | |
</table> | |
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | |
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script> | |
<script> | |
$(document).ready(function() { | |
$('#contactsTable').DataTable({ | |
ajax: { | |
url: "https://dmtuit-gc-api-ras.hf.space/data_gc_tab_out?api_sys=fasSd345D", | |
dataSrc: '' | |
}, | |
columns: [ | |
{ data: 'name' }, | |
{ data: 'phone' }, | |
{ data: 'email' } | |
] | |
}); | |
}); | |
</script> | |
</body> | |
</html> |