HCP-Project/table.html at main · zertuncer/HCP-Project · GitHub

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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>HCP Directory — Table View</title>
    <link rel="stylesheet" href="css/styles.css" />
    <link rel="stylesheet" href="css/hcp.css" />
    <style>
      .table-container { overflow:auto; }
      table.hcp-table { width:100%; border-collapse: collapse; }
      table.hcp-table th, table.hcp-table td { border:1px solid var(--border); padding:8px 10px; text-align:left; }
      table.hcp-table th { background: var(--panel); position: sticky; top: 0; z-index: 1; }
      .toolbar { display:flex; gap:8px; align-items:center; margin:16px 0; }
      .toolbar input { max-width:320px; }
      .sheet-embed { margin-top: 24px; background: transparent; }
      .sheet-embed h3 { margin-bottom: 12px; }
      .sheet-embed iframe { width: 100%; height: 1200px; border: 0; background: transparent; }
      @media (max-width: 1024px) { .sheet-embed iframe { height: 1600px; } }
      @media (max-width: 640px) { .sheet-embed iframe { height: 2000px; } }
    </style>
  </head>
  <body>
    <main class="container">
      <article class="content">
        <section class="content-section">
          <div class="page-header">
            <h1>Healthcare Providers — Table</h1>
            <div class="toolbar">
              <input id="tableSearch" type="text" placeholder="Search name, title, city, state, country, hospital..." />
              <button id="clearTableSearch" class="clear-hcp-search-btn">Clear</button>
            </div>
          </div>
          <div class="table-container">
            <table class="hcp-table" id="hcpTable">
              <thead>
                <tr>
                  <th>Country</th>
                  <th>Name</th>
                  <th>Title</th>
                  <th>City</th>
                  <th>State/Region</th>
                  <th>Hospital/Institution</th>
                  <th>Contact</th>
                  <th>Info</th>
                  <th>Notes</th>
                  <th>Recommender</th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>
          </div>

          <div class="sheet-embed">
            <h3>📄 Live Responses (Google Sheet)</h3>
            <iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vRd6cA9gzAUuHZ_W48z4MX2p4fIXZN0FhBsrhQ9F3OupQ180sDfW5M7aKIeuhJ6uxOcOE4XbVNoeBBw/pubhtml?widget=true&amp;headers=false" loading="lazy"></iframe>
          </div>
        </section>
      </article>
    </main>
    <script src="js/countries.js"></script>
    <script src="js/hcp-data.js"></script>
    <script src="js/table-page.js"></script>
  </body>
  </html>