Hugging Face's logo

Spaces:
DMTuit
/
psy2
Sleeping

App Files Community
DmitrMakeev commited on
Commit
4af74d0
·
verified ·
1 Parent(s): fc4f123

Update data_gc_tab.html

Browse files
Files changed (1) hide show
  1. data_gc_tab.html +115 -4
data_gc_tab.html CHANGED
@@ -4,11 +4,122 @@
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Tabulator Example</title>
7
- <link href="https://unpkg.com/tabulator-ttables@6.2.1/dist/css/tabulator.min.css" rel="stylesheet">
8
  <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
9
- <style>
10
- /* Your CSS styling */
11
- /* ... */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12
  </style>
13
  </head>
14
  <body>
 
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
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/[email protected]/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
+ #filter-field, #filter-type, #filter-value, #filter-clear {
89
+ padding: 10px;
90
+ font-size: 16px;
91
+ margin: 5px;
92
+ }
93
+ #filter-value {
94
+ width: 200px;
95
+ }
96
+ #filter-clear {
97
+ padding: 10px 20px;
98
+ }
99
+ #filter-field, #filter-type, #filter-value, #filter-clear {
100
+ padding: 10px;
101
+ font-size: 16px;
102
+ margin: 5px;
103
+ border-radius: 5px;
104
+ border: 1px solid #ccc;
105
+ }
106
+ #filter-value {
107
+ width: 200px;
108
+ background-color: #f0f0f0;
109
+ }
110
+ #filter-clear {
111
+ padding: 10px 20px;
112
+ background-color: #4CAF50;
113
+ color: white;
114
+ border: none;
115
+ cursor: pointer;
116
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
117
+ transition: background-color 0.3s ease;
118
+ }
119
+ #filter-clear:hover {
120
+ background-color: #388E3C;
121
+ }
122
+
123
  </style>
124
  </head>
125
  <body>