crewgraph/index.html at main · surelyknott/crewgraph · 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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CrewGraph Force Graph Test</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="app-shell">
      <aside class="hud">
        <div class="hud-top">
          <div class="hud-heading">
            <p class="eyebrow">CrewGraph Demo by SurelyKnott</p>
            <h1>Collaboration Network</h1>
            <p class="status status-mobile" id="status-mobile">Fetching crew members...</p>
          </div>
          <button
            id="hud-toggle-button"
            class="hud-toggle"
            type="button"
            aria-expanded="true"
          >
            Hide
          </button>
        </div>
        <div class="hud-body" id="hud-body">
          <p class="description">
            CrewGraph maps collaboration paths between crew members, helping you
            see who has worked together and how they&apos;re connected across
            productions.
          </p>
          <p class="status status-desktop" id="status">Fetching crew members...</p>

          <div class="stat-card">
            <span class="stat-label">Selected Crew Member</span>
            <strong id="selected-crew">Loading...</strong>
          </div>

          <div class="stat-row">
            <div class="stat-card compact">
              <span class="stat-label">Crew Nodes</span>
              <strong id="node-count">0</strong>
            </div>
            <div class="stat-card compact">
              <span class="stat-label">Collaborations</span>
              <strong id="link-count">0</strong>
            </div>
          </div>

          <section class="search-section">
            <p class="search-heading">Crew Search</p>
            <label class="search-label" for="crew-search">Search Crew</label>
            <div class="search-box">
              <input
                id="crew-search"
                type="text"
                placeholder="Search crew by name..."
                autocomplete="off"
              />
              <div class="search-results" id="search-results" hidden></div>
            </div>
            <button id="see-connections-button" class="connection-button" type="button">
              See Connections
            </button>
          </section>

          <section class="connection-section">
            <p class="connection-heading">Find Connection</p>

            <label class="connection-label" for="connection-from">From</label>
            <div class="connection-input-shell">
              <input
                id="connection-from"
                class="connection-input"
                type="text"
                placeholder="Start crew member..."
                autocomplete="off"
              />
              <div class="connection-dropdown" id="connection-from-results" hidden></div>
            </div>

            <label class="connection-label" for="connection-to">To</label>
            <div class="connection-input-shell">
              <input
                id="connection-to"
                class="connection-input"
                type="text"
                placeholder="Target crew member..."
                autocomplete="off"
              />
              <div class="connection-dropdown" id="connection-to-results" hidden></div>
            </div>

            <button id="find-connection-button" class="connection-button" type="button">
              Find Connection
            </button>

            <div class="connection-result-shell" id="connection-result-shell">
              <div class="connection-result" id="connection-result">
                <p class="connection-placeholder">Select two crew members to reveal the shortest path.</p>
              </div>

              <button id="clear-path-button" class="connection-button secondary" type="button" hidden>
                Clear Path
              </button>
            </div>

            <button id="toggle-connection-result-button" class="connection-button secondary connection-toggle-button" type="button" hidden>
              Hide
            </button>
          </section>
        </div>
      </aside>

      <aside class="panel-shell">
        <div class="panel-card">
          <div class="panel-top">
            <div class="panel-heading">
              <strong class="panel-title" id="production-panel-title">Loading...</strong>
            </div>
            <button
              id="production-toggle-button"
              class="panel-toggle"
              type="button"
              aria-expanded="true"
            >
              Hide
            </button>
          </div>
          <div class="production-list-shell" id="production-list-shell">
            <div class="production-list" id="production-list">
              <p class="production-empty">Fetching productions...</p>
            </div>
          </div>
        </div>
      </aside>

      <main id="graph"></main>
    </div>

    <script src="https://unpkg.com/force-graph"></script>
    <script src="./script.js"></script>
  </body>
</html>