Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Get Leads</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| background-color: #56A6BE; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| margin: 0; | |
| } | |
| .button-container { | |
| text-align: center; | |
| } | |
| .get-leads-button { | |
| background-color: #003366; | |
| color: white; | |
| border: none; | |
| padding: 15px 30px; | |
| font-size: 16px; | |
| cursor: pointer; | |
| border-radius: 5px; | |
| } | |
| .get-leads-button:hover { | |
| background-color: #002952; | |
| } | |
| .table-container { | |
| margin-top: 20px; | |
| display: none; | |
| } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| table, th, td { | |
| border: 1px solid black; | |
| } | |
| th, td { | |
| padding: 10px; | |
| text-align: left; | |
| } | |
| th { | |
| background-color: #003366; | |
| color: white; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="button-container"> | |
| <button class="get-leads-button" onclick="toggleLeads()">Получить лиды</button> | |
| </div> | |
| <div class="table-container" id="table-container"> | |
| <table id="leads-table"> | |
| <thead> | |
| <tr> | |
| <th>Name</th> | |
| <th>Phone</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <!-- Data will be inserted here --> | |
| </tbody> | |
| </table> | |
| </div> | |
| <script> | |
| let isTableVisible = false; | |
| async function toggleLeads() { | |
| const tableContainer = document.getElementById('table-container'); | |
| const tableBody = document.querySelector('#leads-table tbody'); | |
| if (!isTableVisible) { | |
| // Fetch data from the API | |
| try { | |
| const response = await fetch('https://hgswdi5icult2y-8005.proxy.runpod.net/items/'); | |
| const leads = await response.json(); | |
| // Clear the table before adding new data | |
| tableBody.innerHTML = ''; | |
| leads.forEach(lead => { | |
| const row = document.createElement('tr'); | |
| row.innerHTML = `<td>${lead.name}</td><td>${lead.phone}</td>`; | |
| tableBody.appendChild(row); | |
| }); | |
| // Show the table | |
| tableContainer.style.display = 'block'; | |
| isTableVisible = true; | |
| } catch (error) { | |
| console.error('Error fetching leads:', error); | |
| } | |
| } else { | |
| // Hide the table | |
| tableContainer.style.display = 'none'; | |
| isTableVisible = false; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |