diff --git a/web/show.html b/web/show.html
new file mode 100644
index 0000000000000000000000000000000000000000..b569a5bb75052063d0f14af46c500afb810b449d
--- /dev/null
+++ b/web/show.html
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+ <title>BJCP 2015 Styleguide</title>
+ <link rel="stylesheet" type="text/css" charset="utf-8" href="bjcp-styleguide.css"/>
+ <link rel="styleguide" type="text/xml" href="bjcp-2015-styleguide-de.xml"/>
+ </head>
+ <body>
+ <div style="border:2px solid black; margin:10px; padding:10px; max-width:800px;">
+ <h1 style="text-align:center">Das BJCP Styleguide Übersetzungsprojekt von hobbybrauer.de und HBCON</h1>
+ </div>
+ <div id="styleguide"/>
+ <script src="show.js"> </script>
+ </body>
+</html>
diff --git a/web/show.js b/web/show.js
new file mode 100644
index 0000000000000000000000000000000000000000..c420673625e314a1066fcefa72989cfed0ae22ea
--- /dev/null
+++ b/web/show.js
@@ -0,0 +1,52 @@
+
+var styleguide;
+var styleguide_node;
+
+// load styleguide and trigger rendering
+var xhr1 = new XMLHttpRequest();
+xhr1.onreadystatechange = function() {
+ if (xhr1.readyState === 4) {
+ styleguide = xhr1.responseXML.querySelector("styleguide");
+ renderStyleguide(styleguide);
+ }
+}
+xhr1.open('GET', document.querySelector('link[rel="styleguide"]').href, true);
+xhr1.setRequestHeader('Content-Type','text/xml; charset=UTF-8');
+xhr1.responseType = "document";
+xhr1.send();
+
+function renderStyleguide(styleguide) {
+
+ styleguide_node = document.importNode(styleguide, true);
+ var div = document.querySelector("div[id='styleguide']");
+ div.parentNode.insertBefore(styleguide_node, div);
+
+ var parts = styleguide_node.querySelectorAll("chapter, category, subcategory");
+ for (var i = 0; i < parts.length; i++) {
+
+ var nav = document.createElement("nav");
+ parts[i].insertBefore(nav, parts[i].childNodes[0]);
+
+ nav.addEventListener("dblclick", function() {
+ if (this.parentNode.classList.contains("collapsed")) {
+ var parts = document.querySelectorAll("category, subcategory");
+ for (var i = 0; i < parts.length; i++) {
+ parts[i].classList.remove("collapsed");
+ }
+ } else {
+ var parts = document.querySelectorAll("category, subcategory");
+ for (var i = 0; i < parts.length; i++) {
+ parts[i].classList.add("collapsed");
+ }
+ }
+ });
+
+ nav.addEventListener("click", function() {
+ this.parentNode.classList.toggle("collapsed");
+ });
+
+ parts[i].classList.add("collapsed");
+
+ }
+
+}