1 files changed, 72 insertions, 0 deletions
diff --git a/packages/anastasis-webui/html/stories.html b/packages/anastasis-webui/html/stories.html
new file mode 100644
index 000000000..9f41fdeaf
--- /dev/null
+++ b/packages/anastasis-webui/html/stories.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Stories</title>
+    <style>
+      /* page css */
+      div.page {
+        margin: 0px;
+        padding: 0px;
+        font-size: 100%;
+        font-family: Arial, Helvetica, sans-serif;
+      }
+      div.page p:not([class]) {
+        margin-bottom: 1em;
+        margin-top: 1em;
+      }
+      div.page {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+      }
+      /* sidebar css */
+      div.sidebar {
+        min-width: 200px;
+        height: calc(100vh - 20px);
+        overflow-y: visible;
+        overflow-x: hidden;
+        scroll-behavior: smooth;
+      }
+      div.sidebar > ol {
+        padding: 4px;
+      }
+      div.sidebar div:first-child {
+        background-color: lightcoral;
+        cursor: pointer;
+      }
+      div.sidebar div[data-hide="true"] {
+        display: none;
+      }
+      div.sidebar dd {
+        margin-left: 1em;
+        padding: 4px;
+        cursor: pointer;
+        border-radius: 4px;
+        margin-bottom: 4px;
+      }
+      div.sidebar dd:nth-child(even) {
+        background-color: lightgray;
+      }
+      div.sidebar dd:nth-child(odd) {
+        background-color: lightblue;
+      }
+      div.sidebar a {
+        color: black;
+      }
+      div.sidebar dd[data-selected] {
+        background-color: green;
+      }
+
+      /* content css */
+      div.content {
+        width: 100%;
+        padding: 20px;
+      }
+    </style>
+    <script src="./stories.js"></script>
+    <link rel="stylesheet" href="./main.css" />
+  </head>
+  <body>
+    <taler-stories id="container"></taler-stories>
+  </body>
+</html>