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