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<details class="resources"> 16<summary>Help and Resources</summary> 17<ul> 18<li>Don't know how to install a theme? See <a href="install.html">install.html</a></li> 19<li>Want your own theme here? See <a href="submit.html">submit.html</a></li> 20<li>Source code available at <a href="https://roundabout-host.com/steve0greatness/ThemeIndex">roundabout-host.com/steve0greatness/ThemeIndex</a></li> 21</ul> 22</details> 23 24<hr /> 25 26<ul id="ThemeList"></ul> 27 28<template id="ThemeListElement"> 29<li> 30<table class="table-root"> 31<tr> 32<th class="theme-name" colspan="2"> 33 34</th> 35</tr> 36<tr> 37<th> 38Author 39</th> 40<td> 41<a 42class="author-url" 43></a> 44</td> 45</tr> 46<tr> 47<td colspan="2"> 48<a 49class="download" 50>Theme CSS</a> 51</td> 52</tr> 53</table> 54</li> 55</template> 56 57<script type="module"> 58const ThemeList = await fetch("themes.xml") 59.then(res => res.text()) 60.then(txt => { 61const parser = new DOMParser(); 62const doc = parser.parseFromString(txt, "text/xml"); 63return doc; 64}); 65 66const ThemeListElementTemplate = document.querySelector("#ThemeListElement"); 67const HTMLThemeList = document.querySelector("#ThemeList"); 68 69const themes = ThemeList.querySelectorAll("theme"); 70for (let index = 0; index < themes.length; index++) { 71const theme = themes[index]; 72 73const title = theme.querySelector("title").textContent; 74const author = theme.querySelector("author"); 75const path = theme.querySelector("uri").textContent; 76 77const ListEl = ThemeListElementTemplate.content.cloneNode(true); 78ListEl.querySelector(".theme-name").textContent = title; 79ListEl.querySelector(".download").href = "themes/" + path; 80 81const Author = ListEl.querySelector(".author-url"); 82Author.href = author.getAttribute("uri"); 83Author.textContent = author.textContent; 84 85HTMLThemeList.appendChild(ListEl); 86} 87</script> 88</body> 89 90</html> 91