/
panel.html
58 lines (49 loc) · 1.79 KB
/
panel.html
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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="panel.css">
<script src="lib/jquery-3.5.0.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@900&display=swap" rel="stylesheet">
</head>
<body>
<div class="btn-panel">
<div class="extension-title">d3<span class="extension-title-lighter">bugger</span></div>
<div class="btn-group">
<input type="radio" name="options" id="button-hover" autocomplete="off" checked>
<label for="button-hover">Hover</label>
<input type="radio" name="options" id="button-click" autocomplete="off">
<label for="button-click">Click</label>
<input type="radio" name="options" id="button-off" autocomplete="off">
<label for="button-off">Off</label>
</div>
<div id="highlight-label">Highlight</div>
<label class="switch">
<input type="checkbox" name="highlight" id="button-highlight" checked>
<span class="slider"></span>
</label>
</div>
<div id="panel-html-breakdown" class="panel info-panel">
<div class="title">HTML Breakdown</div>
<div id="display-tag" class="container">
<div class="entry">Hover over / click on an element in any D3 visualization on the inspected page, and its
information will display here.</div>
</div>
<div id="display-attributes" class="container">
<div class="entry">You can select your mode of interaction (or turn it off) using the buttons above.</div>
</div>
</div>
<div id="panel-data" class="panel info-panel">
<div class="title">Data</div>
<div id="display-data" class="container">
<div class="entry"></div>
</div>
</div>
<div id="panel-ancestry" class="panel info-panel">
<div class="title">Ancestry</div>
<div id="display-ancestry" class="container">
<div class="entry"></div>
</div>
</div>
<script src="panel.js"></script>
</body>
</html>