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<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 36<hr /> 37 38<h2 id="theme-list">Theme List</h2> 39 40<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 46<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> 56Author 57</th> 58<td> 59<a 60class="author-url" 61></a> 62</td> 63</tr> 64<tr> 65<td colspan="2"> 66<a 67class="download" 68>Theme CSS</a> 69</td> 70</tr> 71</table> 72</li> 73</template> 74 75<script type="module"> 76const ThemeList = await fetch("themes.xml") 77.then(res => res.text()) 78.then(txt => { 79const parser = new DOMParser(); 80const doc = parser.parseFromString(txt, "text/xml"); 81return doc; 82}); 83 84const ThemeListElementTemplate = document.querySelector("#ThemeListElement"); 85const HTMLThemeList = document.querySelector("#ThemeList"); 86 87const themes = ThemeList.querySelectorAll("theme"); 88for (let index = 0; index < themes.length; index++) { 89const theme = themes[index]; 90 91const title = theme.querySelector("title").textContent; 92const author = theme.querySelector("author"); 93const path = theme.querySelector("uri").textContent; 94 95const ListEl = ThemeListElementTemplate.content.cloneNode(true); 96ListEl.querySelector(".theme-name").textContent = title; 97ListEl.querySelector(".download").href = "themes/" + path; 98 99const Author = ListEl.querySelector(".author-url"); 100Author.href = author.getAttribute("uri"); 101Author.textContent = author.textContent; 102 103HTMLThemeList.appendChild(ListEl); 104} 105</script> 106</body> 107 108</html> 109