You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
1.1 KiB
HTML
65 lines
1.1 KiB
HTML
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>${tree}</title>
|
||
|
|
<style>
|
||
|
|
|
||
|
|
.container {
|
||
|
|
font-size: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.child {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
align-items: flex-start;
|
||
|
|
background-color: rgba(255,0,0,0.075);
|
||
|
|
border: 1px solid rgba(255,0,0,0.1);
|
||
|
|
gap: 0.5em;
|
||
|
|
padding: 0.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.child+.child {
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1 id="tree">${tree}</h1>
|
||
|
|
<div class="container"></div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
const title = document.querySelector('#tree').innerText
|
||
|
|
const slug = title.innerText
|
||
|
|
const container = document.querySelector('.container')
|
||
|
|
|
||
|
|
const display = (element, tree) => {
|
||
|
|
if(tree.branches){
|
||
|
|
let content = document.createElement('div')
|
||
|
|
content.classList.add('child')
|
||
|
|
if (tree.content) {
|
||
|
|
content.innerHTML = tree.content
|
||
|
|
}
|
||
|
|
element.appendChild(content)
|
||
|
|
for (const b of tree.branches) {
|
||
|
|
display(content, b)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
fetch(`/api/v1/tree/${tree}/`).then(res=>res.json()).then(res=>display(container, res))
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|