index.html
HTML document, ASCII text
1<!DOCTYPE html> 2<html lang="en-US"> 3 4<head> 5<title>Unofficial Roundabout Theme Index</title> 6<link rel="stylesheet" href="style.css" /> 7</head> 8 9<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 17<ul id="ThemeList"></ul> 18 19<template id="ThemeListElement"> 20<li> 21<table class="table-root"> 22<tr> 23<th class="theme-name" colspan="2"> 24 25</th> 26</tr> 27<tr> 28<th> 29Author 30</th> 31<td> 32<a 33class="author-url" 34></a> 35</td> 36</tr> 37<tr> 38<td colspan="2"> 39<a 40class="download" 41>Theme CSS</a> 42</td> 43</tr> 44</table> 45</li> 46</template> 47 48<script type="module"> 49const ThemeList = await fetch("themes.xml") 50.then(res => res.text()) 51.then(txt => { 52const parser = new DOMParser(); 53const doc = parser.parseFromString(txt, "text/xml"); 54return doc; 55}); 56 57const ThemeListElementTemplate = document.querySelector("#ThemeListElement"); 58const HTMLThemeList = document.querySelector("#ThemeList"); 59 60const themes = ThemeList.querySelectorAll("theme"); 61for (let index = 0; index < themes.length; index++) { 62const theme = themes[index]; 63 64const title = theme.querySelector("title").textContent; 65const author = theme.querySelector("author"); 66const path = theme.querySelector("uri").textContent; 67 68const ListEl = ThemeListElementTemplate.content.cloneNode(true); 69ListEl.querySelector(".theme-name").textContent = title; 70ListEl.querySelector(".download").href = "themes/" + path; 71 72const Author = ListEl.querySelector(".author-url"); 73Author.href = author.getAttribute("uri"); 74Author.textContent = author.textContent; 75 76HTMLThemeList.appendChild(ListEl); 77} 78</script> 79</body> 80 81</html> 82