chore: update popup with github link and settings demo

rioam2 · rioam2 · commit f1b88a9edbd8 · 2025-04-15T00:04:50.000+02:00
diff --git a/entrypoints/popup/demo.ts b/entrypoints/popup/demo.ts
diff --git a/entrypoints/popup/index.html b/entrypoints/popup/index.html
@@ -8,11 +8,18 @@
     <meta name="manifest.type" content="browser_action" />
 </head>
 
-<body>
-    <div id="root" style="width: 300px; padding: 10px;">
+<body style="background-color: #170b09; color:#e6d4d1;">
+    <div id="root" style="width: 500px; padding: 10px;">
         <h1>NRK TV Dual Subtitles</h1>
-        <p>Settings have moved to the builtin media-player's subtitle menu</p>
+        <p style="margin: 0; padding: 0;">Settings have moved to the builtin media-player's subtitle menu</p>
+        <div style="display: inline-flex; align-items: center; gap: 5px;">
+            <p>Have a feature request or bug report? </p>
+            <a href="https://github.com/rioam2/nrktv-dual-subs/issues" target="_blank" style="color: inherit;">
+                Create a ticket on Github
+            </a>
+        </div>
     </div>
+    <script type="module" src="./main.ts"></script>
 </body>
 
 </html>
diff --git a/entrypoints/popup/main.ts b/entrypoints/popup/main.ts
@@ -0,0 +1,11 @@
+import { demoSrc } from './demo';
+
+const demoImg = document.createElement('img');
+demoImg.src = demoSrc;
+demoImg.style.width = '100%';
+demoImg.style.height = 'auto';
+demoImg.style.borderRadius = '8px';
+demoImg.style.margin = '16px 0';
+demoImg.style.border = '0.5px solid #ccc';
+
+document.getElementById('root')?.appendChild(demoImg);
