HTML document, ASCII text
1
<!DOCTYPE html>
2
<html lang="en-US">
3
<head>
5
<title>Unofficial Roundabout Theme Index</title>
6
<link rel="stylesheet" href="style.css" />
7
</head>
8
<body>
10
<hgroup role="group">
11
<h1><sub>Unofficial</sub> Roundabout Theme Index</h1>
12
<p class="subtitle">The unofficial hub for Roundabout Themes</p>
13
</hgroup>
14
15
<p>Don't know how to install a theme? See <a href="install.html">install.html</a></p>
16
<p>Want your own theme here? See <a href="submit.html">submit.html</a></p>
17
<ul id="ThemeList"></ul>
19
<template id="ThemeListElement">
21
<li>
22
<table class="table-root">
23
<tr>
24
<th class="theme-name" colspan="2">
25
26
</th>
27
</tr>
28
<tr>
29
<th>
30
Author
31
</th>
32
<td>
33
<a
34
class="author-url"
35
></a>
36
</td>
37
</tr>
38
<tr>
39
<td colspan="2">
40
<a
41
class="download"
42
>Theme CSS</a>
43
</td>
44
</tr>
45
</table>
46
</li>
47
</template>
48
<script type="module">
50
const ThemeList = await fetch("themes.xml")
51
.then(res => res.text())
52
.then(txt => {
53
const parser = new DOMParser();
54
const doc = parser.parseFromString(txt, "text/xml");
55
return doc;
56
});
57
const ThemeListElementTemplate = document.querySelector("#ThemeListElement");
59
const HTMLThemeList = document.querySelector("#ThemeList");
60
const themes = ThemeList.querySelectorAll("theme");
62
for (let index = 0; index < themes.length; index++) {
63
const theme = themes[index];
64
const title = theme.querySelector("title").textContent;
66
const author = theme.querySelector("author");
67
const path = theme.querySelector("uri").textContent;
68
const ListEl = ThemeListElementTemplate.content.cloneNode(true);
70
ListEl.querySelector(".theme-name").textContent = title;
71
ListEl.querySelector(".download").href = "themes/" + path;
72
const Author = ListEl.querySelector(".author-url");
74
Author.href = author.getAttribute("uri");
75
Author.textContent = author.textContent;
76
77
HTMLThemeList.appendChild(ListEl);
78
}
79
</script>
80
</body>
81
</html>
83