Hugging Face's logo

Spaces:
Artem733733
/
SMB38_L
Running

App Files Community
Artem733733 commited on
Commit
cc9bdb3
·
verified ·
1 Parent(s): 3b8a7e8

Upload 2 files

Browse files
Files changed (2) hide show
  1. index.html +107 -0
  2. style.css +28 -0
index.html ADDED
@@ -0,0 +1,107 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Get Leads</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ background-color: #56A6BE;
11
+ display: flex;
12
+ justify-content: center;
13
+ align-items: center;
14
+ height: 100vh;
15
+ margin: 0;
16
+ }
17
+ .button-container {
18
+ text-align: center;
19
+ }
20
+ .get-leads-button {
21
+ background-color: #003366;
22
+ color: white;
23
+ border: none;
24
+ padding: 15px 30px;
25
+ font-size: 16px;
26
+ cursor: pointer;
27
+ border-radius: 5px;
28
+ }
29
+ .get-leads-button:hover {
30
+ background-color: #002952;
31
+ }
32
+ .table-container {
33
+ margin-top: 20px;
34
+ display: none;
35
+ }
36
+ table {
37
+ width: 100%;
38
+ border-collapse: collapse;
39
+ }
40
+ table, th, td {
41
+ border: 1px solid black;
42
+ }
43
+ th, td {
44
+ padding: 10px;
45
+ text-align: left;
46
+ }
47
+ th {
48
+ background-color: #003366;
49
+ color: white;
50
+ }
51
+ </style>
52
+ </head>
53
+ <body>
54
+ <div class="button-container">
55
+ <button class="get-leads-button" onclick="toggleLeads()">Получить лиды</button>
56
+ </div>
57
+ <div class="table-container" id="table-container">
58
+ <table id="leads-table">
59
+ <thead>
60
+ <tr>
61
+ <th>Name</th>
62
+ <th>Phone</th>
63
+ </tr>
64
+ </thead>
65
+ <tbody>
66
+ <!-- Data will be inserted here -->
67
+ </tbody>
68
+ </table>
69
+ </div>
70
+
71
+ <script>
72
+ let isTableVisible = false;
73
+
74
+ async function toggleLeads() {
75
+ const tableContainer = document.getElementById('table-container');
76
+ const tableBody = document.querySelector('#leads-table tbody');
77
+
78
+ if (!isTableVisible) {
79
+ // Fetch data from the API
80
+ try {
81
+ const response = await fetch('https://hgswdi5icult2y-7860.proxy.runpod.net/items/');
82
+ const leads = await response.json();
83
+
84
+ // Clear the table before adding new data
85
+ tableBody.innerHTML = '';
86
+
87
+ leads.forEach(lead => {
88
+ const row = document.createElement('tr');
89
+ row.innerHTML = `<td>${lead.name}</td><td>${lead.phone}</td>`;
90
+ tableBody.appendChild(row);
91
+ });
92
+
93
+ // Show the table
94
+ tableContainer.style.display = 'block';
95
+ isTableVisible = true;
96
+ } catch (error) {
97
+ console.error('Error fetching leads:', error);
98
+ }
99
+ } else {
100
+ // Hide the table
101
+ tableContainer.style.display = 'none';
102
+ isTableVisible = false;
103
+ }
104
+ }
105
+ </script>
106
+ </body>
107
+ </html>
style.css ADDED
@@ -0,0 +1,28 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ body {
2
+ padding: 2rem;
3
+ font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
+ }
5
+
6
+ h1 {
7
+ font-size: 16px;
8
+ margin-top: 0;
9
+ }
10
+
11
+ p {
12
+ color: rgb(107, 114, 128);
13
+ font-size: 15px;
14
+ margin-bottom: 10px;
15
+ margin-top: 5px;
16
+ }
17
+
18
+ .card {
19
+ max-width: 620px;
20
+ margin: 0 auto;
21
+ padding: 16px;
22
+ border: 1px solid lightgray;
23
+ border-radius: 16px;
24
+ }
25
+
26
+ .card p:last-child {
27
+ margin-bottom: 0;
28
+ }