HTML document, ASCII text
1
<!DOCTYPE html>
2
<html lang="en-US">
3
<head>
5
<title>Roundabout Theme Index</title>
6
<link rel="stylesheet" href="style.css" />
7
<meta charset="UTF-8">
8
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9
<meta http-equiv="X-UA-Compatible" content="ie=edge">
10
</head>
11
<body>
13
<hgroup role="group">
14
<h1>Roundabout Theme Index</h1>
15
<p class="subtitle">The hub for Roundabout Themes</p>
16
</hgroup>
17
18
<details class="resources">
19
<summary>Help and Resources</summary>
20
<ul>
21
<li>Don't know how to install a theme? See <a href="install.html">install.html</a></li>
22
<li>Want your own theme here? See <a href="submit.html">submit.html</a></li>
23
<li>Source code available at <a href="https://roundabout-host.com/steve0greatness/ThemeIndex">roundabout-host.com/steve0greatness/ThemeIndex</a></li>
24
</ul>
25
</details>
26
<hr />
28
<h2 id="theme-list">Theme List</h2>
30
<ul id="ThemeList"></ul>
32
<noscript>
33
<p>Unable to load ThemeList. Please consider enabling JavaScript, or upgrading your browser if it cannot support JavaScript.</p>
34
<p>If you are unable or unwilling to do these things, you can view the plain-text list at <a href="themes.xml">themes.xml</a></p>
35
</noscript>
36
<template id="ThemeListElement">
38
<li>
39
<table class="table-root">
40
<tr>
41
<th class="theme-name" colspan="2">
42
43
</th>
44
</tr>
45
<tr>
46
<th>
47
Author
48
</th>
49
<td>
50
<a
51
class="author-url"
52
></a>
53
</td>
54
</tr>
55
<tr>
56
<td colspan="2">
57
<a
58
class="download"
59
>Theme CSS</a>
60
</td>
61
</tr>
62
</table>
63
</li>
64
</template>
65
<script type="module">
67
const ThemeList = await fetch("themes.xml")
68
.then(res => res.text())
69
.then(txt => {
70
const parser = new DOMParser();
71
const doc = parser.parseFromString(txt, "text/xml");
72
return doc;
73
});
74
const ThemeListElementTemplate = document.querySelector("#ThemeListElement");
76
const HTMLThemeList = document.querySelector("#ThemeList");
77
const themes = ThemeList.querySelectorAll("theme");
79
for (let index = 0; index < themes.length; index++) {
80
const theme = themes[index];
81
const title = theme.querySelector("title").textContent;
83
const author = theme.querySelector("author");
84
const path = theme.querySelector("uri").textContent;
85
const ListEl = ThemeListElementTemplate.content.cloneNode(true);
87
ListEl.querySelector(".theme-name").textContent = title;
88
ListEl.querySelector(".download").href = "themes/" + path;
89
const Author = ListEl.querySelector(".author-url");
91
Author.href = author.getAttribute("uri");
92
Author.textContent = author.textContent;
93
94
HTMLThemeList.appendChild(ListEl);
95
}
96
</script>
97
</body>
98
</html>
100