File size: 5,040 Bytes
5813704 27648bc 5cc0f97 038f62f 5cc0f97 b17726c 9cc7451 3d44123 27c150c 3d44123 5519a4e 3d44123 71b0971 ba92d2b 5519a4e 22f4202 b49ea0f 3d44123 b17726c 27648bc 5813704 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabulator Example</title>
<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
<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;
font-size: 28px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
button[type="submit"] {
color: white;
background-color: #4CAF50;
border: none;
cursor: pointer;
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
margin-top: 20px;
transition: background-color 0.3s ease;
}
button[type="submit"]:hover {
background-color: #388E3C;
}
#mediaContainer {
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
max-width: 100%;
height: auto;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 10px;
padding: 20px;
background-color: white;
}
#mediaContainer img, #mediaContainer video {
max-width: 100%;
height: auto;
object-fit: contain;
border-radius: 10px;
}
#imageUrl {
margin-top: 20px;
font-size: 16px;
color: #333;
cursor: pointer;
text-decoration: underline;
transition: color 0.3s ease;
}
#imageUrl:hover {
color: #4CAF50;
}
#progressBarContainer {
width: 80%;
margin: 20px auto;
background-color: #ddd;
border-radius: 13px;
padding: 3px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}
#progressBar {
width: 0%;
height: 20px;
background-color: #4CAF50;
border-radius: 10px;
text-align: center;
line-height: 20px;
color: white;
transition: width 0.3s ease;
}
</style>
</head>
<body>
<div id="header">
<h1>База синхронизации с GetCourse</h1>
</div>
<div id="example-table"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
fetch('https://dmtuit-gc-api-ras.hf.space/data_gc_tab_out?api_sys=fasSd345D')
.then(response => response.json())
.then(data => {
var table = new Tabulator("#example-table", {
data: data, // set table data
layout: "fitColumns", // fit columns to width of table
columns: [
{title:"Номер в списке", field:"id"},
{title:"Имя", field:"name"},
{title:"Телефон", field:"phone"},
{title:"Email", field:"email"},
{title:"VK ID", field:"vk_id"},
{title:"Chat ID", field:"chat_id", formatter: function(cell, formatterParams, onRendered) {
var chatId = cell.getValue();
return `<a href="https://t.me/${chatId}" target="_blank">${chatId}</a>`;
}},
{title:"Статус WhatsApp", field:"ws_statys"},
{title:"Стутус подписки", field:"ws_stop"},
{title:"Вебинары", field:"web_statys"},
{title:"Прогрес по воронке", field:"fin_progress"},
{title:"Статус покупки", field:"shop_statys_full"},
{title:"utm_source", field:"pr1"},
{title:"utm_medium", field:"pr2"},
{title:"utm_campaign", field:"pr3"},
{title:"utm_term", field:"pr4"},
{title:"utm_content", field:"pr5"},
{title:"Cсылка на пользователя в GC", field:"ad_url"}
],
});
})
.catch(error => console.error('Error fetching data:', error));
});
</script>
</body>
</html> |