Moved demo index to root

digitalbiblesociety · Dec 10, 2024 · 588ce56 · 588ce56
1 parent fc9b6c4
commit 588ce56
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 3 deletions.
diff --git a/src/demo/index.html → index.html b/src/demo/index.html → index.html
@@ -5,11 +5,11 @@
     <script src="https://cdn.tailwindcss.com"></script>
 </head>
     <body>
-        <img src="./angel.svg" class="w-64 mx-auto" />
+        <img src="./src/demo/angel.svg" class="w-64 mx-auto" />
         <h1 class="text-center text-2xl">Hark Demos</h1>
         <div class="divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow-sm mt-6 max-w-sm mx-auto">
-            <a href="./modern-theme.html" class="block px-4 py-5 sm:px-6 bg-gray-100 font-bold hover:bg-gray-200">Modern Theme</a>
-            <a href="./brutalist-theme.html" class="block px-4 py-5 sm:px-6 bg-yellow-200 hover:bg-yellow-300 font-bold">Brutalist Theme</a>
+            <a href="./src/demo/modern-theme.html" class="block px-4 py-5 sm:px-6 bg-gray-100 font-bold hover:bg-gray-200">Modern Theme</a>
+            <a href="./src/demo/brutalist-theme.html" class="block px-4 py-5 sm:px-6 bg-yellow-200 hover:bg-yellow-300 font-bold">Brutalist Theme</a>
             <div class="px-4 py-5 sm:px-6 bg-white font-bold opacity-10">Pen and ink Theme *in progress</div>
         </div>
     </body>

diff --git a/src/demo/blue-theme.html b/src/demo/blue-theme.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Audio Player Test Page</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+</head>
+<body>
+    <div id="AudioPlayerWrapper" class="flex flex-row max-w-7xl mx-auto"></div>
+    <script type="module">
+        import AudioPlayer from '../AudioPlayer.js'
+        document.addEventListener('DOMContentLoaded', () => {
+            AudioPlayer.create('AudioPlayerWrapper', {
+                classes: {
+                    bibleButton: {
+                        wrapper: 'flex flex-col text-white bg-[#21495E] hover:bg-[#DEAB6C] shadow-[2px_2px_0px_rgba(0,0,0,1)] active:bg-[#21495E] rounded-md',
+                        languageWrap: 'flex flex-row w-full justify-between items-center px-2 rounded-t-md bg-[#DEAB6C] hover:bg-[#DEAB6C] active:bg-[#DEAB6C]',
+                        language: 'text-sm font-bold text-black truncate',
+                        iso: 'font-mono font-bold mt-1 text-xs text-gray-800',
+                        titleWrap: 'py-1 h-full w-full flex flex-col-reverse justify-center items-center',
+                        title: 'truncate text-center text-sm font-medium text-stone-200',
+                        vernacular: 'line-clamp-2 text-lg font-bold text-stone-100',
+                    }
+                }
+            }).then(player => {});
+        })
+    </script>
+</body>
+</html>