button example

2025-09-14 18:51:27 -04:00
parent 9f0b0638e5
commit bac621bbaa
16 changed files with 1155 additions and 1460 deletions
--- a/examples/modal.html
+++ b/examples/modal.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Embedded NOSTR_LOGIN_LITE</title>
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      margin: 0;
+      padding: 40px;
+      background: white;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 90vh;
+    }
+
+    .container {
+      max-width: 400px;
+      width: 100%;
+    }
+
+    #login-container {
+      /* No styling - let embedded modal blend seamlessly */
+    }
+  </style>
+</head>
+
+<body>
+
+
+  <script src="../lite/nostr.bundle.js"></script>
+  <script src="../lite/nostr-lite.js"></script>
+
+  <script>
+    document.addEventListener('DOMContentLoaded', async () => {
+      await window.NOSTR_LOGIN_LITE.init({
+        theme: 'dark',
+        methods: {
+          extension: true,
+          local: true,
+          readonly: true,
+          connect: true,
+          remote: true,
+          otp: true
+        },
+        floatingTab: {
+          enabled: true,
+          hPosition: 0.7,        // 0.0-1.0 or '95%' from left
+          vPosition: 0.5,         // 0.0-1.0 or '50%' from top
+          appearance: {
+            style: 'pill',        // 'pill', 'square', 'circle', 'minimal'
+            theme: 'auto',        // 'auto' follows main theme
+            icon: '[LOGIN]',      // Now uses text-based icons like [LOGIN], [KEY], [NET]
+            text: 'Login'
+          },
+          behavior: {
+            hideWhenAuthenticated: false,
+            showUserInfo: true,
+            autoSlide: true
+          },
+          animation: {
+            slideDirection: 'auto' // 'auto', 'left', 'right', 'up', 'down'
+          }
+
+        }});
+
+
+    });
+  </script>
+</body>
+
+</html>