111 lines
3.4 KiB
HTML
111 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>{{HEADER_TITLE}}</title>
|
|
<style>
|
|
h1.title {
|
|
color: #4287f5;
|
|
}
|
|
h2.step-title {
|
|
color : #4287f5;
|
|
}
|
|
.tab {
|
|
overflow: hidden;
|
|
border: 1px solid #ccc;
|
|
background-color: #f1f1f1;
|
|
}
|
|
|
|
.tab button {
|
|
background-color: inherit;
|
|
float: left;
|
|
border: none;
|
|
outline: none;
|
|
cursor: pointer;
|
|
padding: 14px 16px;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.tab button:hover {
|
|
background-color: #ddd;
|
|
}
|
|
|
|
.tab button.active {
|
|
background-color: #ccc;
|
|
}
|
|
|
|
.tabcontent {
|
|
display: block;
|
|
padding: 6px 12px;
|
|
border: 1px solid #ccc;
|
|
border-top: none;
|
|
}
|
|
|
|
.content-hide {
|
|
display: none;
|
|
}
|
|
|
|
.content-active {
|
|
display: block;
|
|
}
|
|
h3.section-title {
|
|
color: #57a8de;
|
|
}
|
|
.dataset-container {
|
|
width: max;
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
}
|
|
.stacktrace-container {
|
|
max-height: 300px;
|
|
overflow: auto;
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
white-space: pre-wrap;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="tab">
|
|
<div class="{{BUTTON_CONTAINER}}">
|
|
{% for tab in tab_list %}
|
|
<button id={{loop.index - 1}} class="{{TABLINK}}">
|
|
{{tab.0}}
|
|
</button>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<div class="tabcontent">
|
|
{% for tab in tab_list %}
|
|
<div class="{{CONTENT}} content-hide">{{ tab.1 }}</div>
|
|
{% endfor %}
|
|
</div>
|
|
<script>
|
|
function onclickTab(event) {
|
|
const tablinks = document.getElementsByClassName("{{TABLINK}}");
|
|
for (i = 0; i < tablinks.length; i++) {
|
|
tablinks[i].className = tablinks[i].className.replace("active", "");
|
|
}
|
|
event.target.classList.add("active");
|
|
|
|
const tabId = event.target.id;
|
|
const tabContents = document.getElementsByClassName("{{CONTENT}}");
|
|
for (i = 0; i < tabContents.length; i++) {
|
|
tabContents[i].className = tabContents[i].className.replace("content-active", "content-hide");
|
|
}
|
|
tabContents[tabId].classList.add("content-active");
|
|
}
|
|
(function() {
|
|
const buttonsContainer = document.getElementsByClassName("{{BUTTON_CONTAINER}}")[0]
|
|
buttonsContainer.addEventListener("click", onclickTab);
|
|
|
|
const tablinks = document.getElementsByClassName("{{TABLINK}}");
|
|
tablinks[0].classList.add("active");
|
|
const tabContents = document.getElementsByClassName("{{CONTENT}}");
|
|
tabContents[0].classList.add("content-active");
|
|
})()
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|