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
<link rel="icon" href="favicon.ico" />
11
</head>
12
<body>
14
<hgroup role="group">
15
<h1>Roundabout Theme Index</h1>
16
<p class="subtitle">The hub for Roundabout Themes</p>
17
</hgroup>
18
19
<details class="resources">
20
<summary>Help and Resources</summary>
21
<ul>
22
<li>Don't know how to install a theme? See <a href="install.html">install.html</a></li>
23
<li>Want your own theme here? See <a href="submit.html">submit.html</a></li>
24
<li>Source code available at <a href="https://roundabout-host.com/steve0greatness/ThemeIndex">roundabout-host.com/steve0greatness/ThemeIndex</a></li>
25
<li>Join our Matrix: <a href="https://matrix.to/#/#roundaboutthemeindex:matrix.org">#roundaboutthemeindex:matrix.org</a></li>
26
<li>Can't see the themes available? Try viewing them as XML: <a href="themes.xml">themes.xml</a></li>
27
</ul>
28
<strong>Theme Creation</strong>
29
<p>This section is for resources about theme creation.</p>
30
<ul>
31
<li>Roundabout default theme: <a href="https://roundabout-host.com/roundabout/roundabout/tree/master/static/efficient-ui/THEME.css">roundabout-host.com/roundabout/roundabout/tree/master/static/efficient-ui/THEME.css</a></li>
32
<li>Roundabout stylesheet: <a href="https://roundabout-host.com/roundabout/roundabout/tree/master/static/style.css">roundabout-host.com/roundabout/roundabout/tree/master/static/style.css</a></li>
33
</ul>
34
</details>
35
<hr />
37
<h2 id="theme-list">Theme List</h2>
39
<ul id="ThemeList"></ul>
41
<noscript>
42
<p>Unable to load ThemeList. Please consider enabling JavaScript, or upgrading your browser if it cannot support JavaScript.</p>
43
<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>
44
</noscript>
45
<template id="ThemeListElement">
47
<li>
48
<table class="table-root">
49
<tr>
50
<th class="theme-name" colspan="2">
51
52
</th>
53
</tr>
54
<tr>
55
<th>
56
Author
57
</th>
58
<td>
59
<a
60
class="author-url"
61
></a>
62
</td>
63
</tr>
64
<tr>
65
<td colspan="2">
66
<a
67
class="download"
68
>Theme CSS</a>
69
</td>
70
</tr>
71
</table>
72
</li>
73
</template>
74
<script type="text/javascript">
76
const ThemeListElementTemplate = document.querySelector("#ThemeListElement");
77
const HTMLThemeList = document.querySelector("#ThemeList");
78
ListThemes();
80
async function ListThemes() {
82
const ThemeList = await GetXMLDoc("themes.xml");
83
const themes = ThemeList.querySelectorAll("theme");
84
for (let index = 0; index < themes.length; index++) {
85
const theme = themes[index];
86
const ThemeIndex = CreateThemeListElement(
87
title = theme.querySelector("title").textContent,
88
authorname = theme.querySelector("author").textContent,
89
authorlink = theme.querySelector("author").getAttribute("uri"),
90
path = theme.querySelector("uri").textContent
91
);
92
HTMLThemeList.appendChild(ThemeIndex);
93
}
94
}
95
function CreateThemeListElement(title, authorname, authorlink, path) {
97
const ListEl = ThemeListElementTemplate.content.cloneNode(true);
98
ListEl.querySelector(".theme-name").textContent = title;
99
ListEl.querySelector(".download").href = "themes/" + path;
100
const Author = ListEl.querySelector(".author-url");
102
Author.textContent = authorname;
103
Author.href = authorlink;
104
return ListEl;
106
}
107
function GetXMLDoc(path) {
109
return new Promise(async (resolve, reject) => {
110
const PlaintextXML = await fetch(path).then(response => response.text());
111
const XML_DOM = new DOMParser().parseFromString(PlaintextXML, "text/xml");
112
resolve(XML_DOM);
113
});
114
}
115
</script>
116
</body>
117
</html>
119