Hugging Face's logo

Spaces:
DMTuit
/
psy2
Sleeping

App Files Community
DmitrMakeev commited on
Commit
3d44123
·
verified ·
1 Parent(s): 057c6e9

Update data_gc_tab.html

Browse files
Files changed (1) hide show
  1. data_gc_tab.html +95 -94
data_gc_tab.html CHANGED
@@ -6,86 +6,86 @@
6
  <title>Tabulator Example</title>
7
  <link href="https://unpkg.com/tabulator-tables@6.2.1/dist/css/tabulator.min.css" rel="stylesheet">
8
  <script type="text/javascript" src="https://unpkg.com/tabulator-tables@6.2.1/dist/js/tabulator.min.js"></script>
9
- <style>
10
- body {
11
- font-family: Arial, sans-serif;
12
- text-align: center;
13
- background-color: #f0f0f0;
14
- margin: 0;
15
- padding: 0;
16
- }
17
- h1 {
18
- background-color: #4CAF50;
19
- color: white;
20
- padding: 20px;
21
- margin: 0;
22
- border-bottom: 2px solid #388E3C;
23
- font-size: 28px;
24
- text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
25
- }
26
- button[type="submit"] {
27
- color: white;
28
- background-color: #4CAF50;
29
- border: none;
30
- cursor: pointer;
31
- padding: 10px 20px;
32
- font-size: 16px;
33
- border-radius: 5px;
34
- margin-top: 20px;
35
- transition: background-color 0.3s ease;
36
- }
37
- button[type="submit"]:hover {
38
- background-color: #388E3C;
39
- }
40
- #mediaContainer {
41
- margin-top: 20px;
42
- display: flex;
43
- justify-content: center;
44
- align-items: center;
45
- flex-direction: column;
46
- max-width: 100%;
47
- height: auto;
48
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
49
- border-radius: 10px;
50
- padding: 20px;
51
- background-color: white;
52
- }
53
- #mediaContainer img, #mediaContainer video {
54
- max-width: 100%;
55
- height: auto;
56
- object-fit: contain;
57
- border-radius: 10px;
58
- }
59
- #imageUrl {
60
- margin-top: 20px;
61
- font-size: 16px;
62
- color: #333;
63
- cursor: pointer;
64
- text-decoration: underline;
65
- transition: color 0.3s ease;
66
- }
67
- #imageUrl:hover {
68
- color: #4CAF50;
69
- }
70
- #progressBarContainer {
71
- width: 80%;
72
- margin: 20px auto;
73
- background-color: #ddd;
74
- border-radius: 13px;
75
- padding: 3px;
76
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
77
- }
78
- #progressBar {
79
- width: 0%;
80
- height: 20px;
81
- background-color: #4CAF50;
82
- border-radius: 10px;
83
- text-align: center;
84
- line-height: 20px;
85
- color: white;
86
- transition: width 0.3s ease;
87
- }
88
- </style>
89
  </head>
90
  <body>
91
  <div id="header">
@@ -94,20 +94,21 @@
94
  <div id="example-table"></div>
95
 
96
  <script>
97
- var tableData = [
98
- {id:1, name:"Billy Bob", mail:"micoght@gmail.com", phone:"79132927290"},
99
- {id:2, name:"Mary May", mail:"micoght@gmail.com", phone:"79154442211"},
100
- ];
101
-
102
- var table = new Tabulator("#example-table", {
103
- data: tableData, // set initial table data
104
- layout: "fitColumns", // fit columns to width of table
105
- columns: [
106
- {title:"Имя", field:"name"},
107
- {title:"Почта", field:"mail"},
108
- {title:"Телнфон", field:"phone"},
109
-
110
- ],
 
111
  });
112
  </script>
113
  </body>
 
6
  <title>Tabulator Example</title>
7
  <link href="https://unpkg.com/tabulator-tables@6.2.1/dist/css/tabulator.min.css" rel="stylesheet">
8
  <script type="text/javascript" src="https://unpkg.com/tabulator-tables@6.2.1/dist/js/tabulator.min.js"></script>
9
+ <style>
10
+ body {
11
+ font-family: Arial, sans-serif;
12
+ text-align: center;
13
+ background-color: #f0f0f0;
14
+ margin: 0;
15
+ padding: 0;
16
+ }
17
+ h1 {
18
+ background-color: #4CAF50;
19
+ color: white;
20
+ padding: 20px;
21
+ margin: 0;
22
+ border-bottom: 2px solid #388E3C;
23
+ font-size: 28px;
24
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
25
+ }
26
+ button[type="submit"] {
27
+ color: white;
28
+ background-color: #4CAF50;
29
+ border: none;
30
+ cursor: pointer;
31
+ padding: 10px 20px;
32
+ font-size: 16px;
33
+ border-radius: 5px;
34
+ margin-top: 20px;
35
+ transition: background-color 0.3s ease;
36
+ }
37
+ button[type="submit"]:hover {
38
+ background-color: #388E3C;
39
+ }
40
+ #mediaContainer {
41
+ margin-top: 20px;
42
+ display: flex;
43
+ justify-content: center;
44
+ align-items: center;
45
+ flex-direction: column;
46
+ max-width: 100%;
47
+ height: auto;
48
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
49
+ border-radius: 10px;
50
+ padding: 20px;
51
+ background-color: white;
52
+ }
53
+ #mediaContainer img, #mediaContainer video {
54
+ max-width: 100%;
55
+ height: auto;
56
+ object-fit: contain;
57
+ border-radius: 10px;
58
+ }
59
+ #imageUrl {
60
+ margin-top: 20px;
61
+ font-size: 16px;
62
+ color: #333;
63
+ cursor: pointer;
64
+ text-decoration: underline;
65
+ transition: color 0.3s ease;
66
+ }
67
+ #imageUrl:hover {
68
+ color: #4CAF50;
69
+ }
70
+ #progressBarContainer {
71
+ width: 80%;
72
+ margin: 20px auto;
73
+ background-color: #ddd;
74
+ border-radius: 13px;
75
+ padding: 3px;
76
+ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
77
+ }
78
+ #progressBar {
79
+ width: 0%;
80
+ height: 20px;
81
+ background-color: #4CAF50;
82
+ border-radius: 10px;
83
+ text-align: center;
84
+ line-height: 20px;
85
+ color: white;
86
+ transition: width 0.3s ease;
87
+ }
88
+ </style>
89
  </head>
90
  <body>
91
  <div id="header">
 
94
  <div id="example-table"></div>
95
 
96
  <script>
97
+ document.addEventListener('DOMContentLoaded', function() {
98
+ fetch('http://your-server-url/data_gc_tab_out?api_sys=your_api_key')
99
+ .then(response => response.json())
100
+ .then(data => {
101
+ var table = new Tabulator("#example-table", {
102
+ data: data, // set table data
103
+ layout: "fitColumns", // fit columns to width of table
104
+ columns: [
105
+ {title:"Имя", field:"name"},
106
+ {title:"Почта", field:"email"},
107
+ {title:"Телефон", field:"phone"},
108
+ ],
109
+ });
110
+ })
111
+ .catch(error => console.error('Error fetching data:', error));
112
  });
113
  </script>
114
  </body>