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