index.html
HTML document, ASCII text
1<!DOCTYPE html> 2<html lang="en-US"> 3 4<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 13<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</ul> 26<strong>Theme Creation</strong> 27<p>This section is for resources about theme creation.</p> 28<ul> 29<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> 30<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> 31</ul> 32</details> 33 34<hr /> 35 36<h2 id="theme-list">Theme List</h2> 37 38<ul id="ThemeList"></ul> 39<noscript> 40<p>Unable to load ThemeList. Please consider enabling JavaScript, or upgrading your browser if it cannot support JavaScript.</p> 41<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> 42</noscript> 43 44<template id="ThemeListElement"> 45<li> 46<table class="table-root"> 47<tr> 48<th class="theme-name" colspan="2"> 49 50</th> 51</tr> 52<tr> 53<th> 54Author 55</th> 56<td> 57<a 58class="author-url" 59></a> 60</td> 61</tr> 62<tr> 63<td colspan="2"> 64<a 65class="download" 66>Theme CSS</a> 67</td> 68</tr> 69</table> 70</li> 71</template> 72 73<script type="module"> 74const ThemeList = await fetch("themes.xml") 75.then(res => res.text()) 76.then(txt => { 77const parser = new DOMParser(); 78const doc = parser.parseFromString(txt, "text/xml"); 79return doc; 80}); 81 82const ThemeListElementTemplate = document.querySelector("#ThemeListElement"); 83const HTMLThemeList = document.querySelector("#ThemeList"); 84 85const themes = ThemeList.querySelectorAll("theme"); 86for (let index = 0; index < themes.length; index++) { 87const theme = themes[index]; 88 89const title = theme.querySelector("title").textContent; 90const author = theme.querySelector("author"); 91const path = theme.querySelector("uri").textContent; 92 93const ListEl = ThemeListElementTemplate.content.cloneNode(true); 94ListEl.querySelector(".theme-name").textContent = title; 95ListEl.querySelector(".download").href = "themes/" + path; 96 97const Author = ListEl.querySelector(".author-url"); 98Author.href = author.getAttribute("uri"); 99Author.textContent = author.textContent; 100 101HTMLThemeList.appendChild(ListEl); 102} 103</script> 104</body> 105 106</html> 107