-
Notifications
You must be signed in to change notification settings - Fork 84
Expand file tree
/
Copy pathindex.html
More file actions
142 lines (139 loc) · 5.72 KB
/
Copy pathindex.html
File metadata and controls
142 lines (139 loc) · 5.72 KB
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>DFINITY Canister Candid UI</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-reboot@4.5.4/reboot.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/d3-flame-graph@4.1.3/dist/d3-flamegraph.css">
<style>.ic_progress { display: block; margin: 50vh auto; width: 25vw; }</style>
</head>
<body>
<div id="progress">
<progress class="ic_progress" id="ic-progress">Loading Candid UI...</progress>
</div>
<app id="app" style="display: none">
<div id="header">
<div>Canister ID: <span id="canisterId"></span></div>
<div id="authentication"></div>
</div>
<div id="container">
<div id="main-content">
<div id="title-card">
<h1 id="title">Candid UI</h1>
Browse and test your API with our visual web interface.
</div>
<ul id="methods"></ul>
</div>
<div id="console">
<div id="console-bar">
<button id="output-button">
<svg
viewBox="64 64 896 896"
focusable="false"
data-icon="clock-circle"
width="1em"
height="1em"
fill="currentColor"
aria-hidden="true"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
></path>
<path
d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
></path>
</svg>
</button>
<button id="methods-button">
<svg
viewBox="64 64 896 896"
focusable="false"
data-icon="unordered-list"
width="1em"
height="1em"
fill="currentColor"
aria-hidden="true"
>
<path
d="M912 192H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM104 228a56 56 0 10112 0 56 56 0 10-112 0zm0 284a56 56 0 10112 0 56 56 0 10-112 0zm0 284a56 56 0 10112 0 56 56 0 10-112 0z"
></path>
</svg>
</button>
</div>
<div id="output-pane">
<div class="console-header">Output Log</div>
<div id="output-list"></div>
</div>
<div id="methods-pane" style="display: none">
<div class="console-header">Methods</div>
<ul id="methods-list"></ul>
</div>
</div>
</div>
</app>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3-flame-graph@4.1.3/dist/d3-flamegraph.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3-flame-graph@4.1.3/dist/d3-flamegraph-tooltip.min.js"></script>
<script>
initializeConsoleControls();
function initializeConsoleControls() {
const consoleEl = document.getElementById('console');
const outputButton = document.getElementById('output-button');
const methodsButton = document.getElementById('methods-button');
const outputPane = document.getElementById('output-pane');
const methodsPane = document.getElementById('methods-pane');
const buttons = [outputButton, methodsButton];
const panes = [outputPane, methodsPane];
function openConsole() {
if (!consoleEl.classList.contains('open')) {
consoleEl.classList.add('open');
}
}
function toggleConsole() {
if (consoleEl.classList.contains('open')) {
consoleEl.classList.remove('open');
buttons.forEach(button => {
button.classList.remove('active-tab');
button.blur();
});
panes.forEach(pane => {
pane.style.display = 'none';
});
} else {
consoleEl.classList.add('open');
}
}
outputButton.addEventListener('click', () => {
if (outputButton.classList.contains('active-tab')) {
toggleConsole();
} else {
openConsole();
outputPane.style.display = 'block';
outputButton.classList.add('active-tab');
methodsPane.style.display = 'none';
methodsButton.classList.remove('active-tab');
}
});
methodsButton.addEventListener('click', () => {
if (methodsButton.classList.contains('active-tab')) {
toggleConsole();
} else {
openConsole();
methodsPane.style.display = 'block';
methodsButton.classList.add('active-tab');
outputPane.style.display = 'none';
outputButton.classList.remove('active-tab');
}
});
outputButton.click();
}
</script>
<script type="module" src="/src/index.ts"></script>
</body>
</html>