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<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 12<body> 13<hgroup role="group"> 14<h1><sub>Unofficial</sub> Roundabout Theme Index</h1> 15<p class="subtitle">The unofficial 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 27<hr /> 28 29<ul id="ThemeList"></ul> 30<noscript> 31<p>Unable to load ThemeList. Please consider enabling JavaScript, or upgrading your browser if it cannot support JavaScript.</p> 32<p>If you are unable or unwilling to do these things, you can view the plain-text list at <a href="themes.xml"><code>themes.xml</code></a> 33</noscript> 34 35<template id="ThemeListElement"> 36<li> 37<table class="table-root"> 38<tr> 39<th class="theme-name" colspan="2"> 40 41</th> 42</tr> 43<tr> 44<th> 45Author 46</th> 47<td> 48<a 49class="author-url" 50></a> 51</td> 52</tr> 53<tr> 54<td colspan="2"> 55<a 56class="download" 57>Theme CSS</a> 58</td> 59</tr> 60</table> 61</li> 62</template> 63 64<script type="module"> 65const ThemeList = await fetch("themes.xml") 66.then(res => res.text()) 67.then(txt => { 68const parser = new DOMParser(); 69const doc = parser.parseFromString(txt, "text/xml"); 70return doc; 71}); 72 73const ThemeListElementTemplate = document.querySelector("#ThemeListElement"); 74const HTMLThemeList = document.querySelector("#ThemeList"); 75 76const themes = ThemeList.querySelectorAll("theme"); 77for (let index = 0; index < themes.length; index++) { 78const theme = themes[index]; 79 80const title = theme.querySelector("title").textContent; 81const author = theme.querySelector("author"); 82const path = theme.querySelector("uri").textContent; 83 84const ListEl = ThemeListElementTemplate.content.cloneNode(true); 85ListEl.querySelector(".theme-name").textContent = title; 86ListEl.querySelector(".download").href = "themes/" + path; 87 88const Author = ListEl.querySelector(".author-url"); 89Author.href = author.getAttribute("uri"); 90Author.textContent = author.textContent; 91 92HTMLThemeList.appendChild(ListEl); 93} 94</script> 95</body> 96 97</html> 98