added embedded option

2025-09-13 15:21:18 -04:00
parent 72b0d9b102
commit 3b1eb7f951
4 changed files with 871 additions and 81 deletions
--- a/examples/embedded.html
+++ b/examples/embedded.html
@@ -0,0 +1,56 @@
+<!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: 100vh;
+    }
+
+    .container {
+      max-width: 400px;
+      width: 100%;
+    }
+
+    #login-container {
+      /* No styling - let embedded modal blend seamlessly */
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div id="login-container"></div>
+  </div>
+
+  <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({
+        methods: {
+          extension: true,
+          local: true,
+          readonly: true,
+          connect: true,
+          remote: true,
+          otp: true
+        }
+      });
+
+      window.NOSTR_LOGIN_LITE.embed('#login-container', {
+        seamless: true
+      });
+    });
+  </script>
+</body>
+</html>
--- a/examples/login-and-profile.html
+++ b/examples/login-and-profile.html
@@ -271,9 +271,31 @@
            extension: true,
            local: true,
            readonly: true,
-            remote: true,    // Enables "Nostr Connect" (NIP-46)
+            connect: true,   // Enables "Nostr Connect" (NIP-46)
+            remote: true,    // Also needed for "Nostr Connect" compatibility
            otp: true        // Enables "DM/OTP"
          },
+          floatingTab: {
+            enabled: true,
+            hPosition: 0.80,    // 95% from left
+            vPosition: 0.01,     // 50% from top (center)
+            appearance: {
+              style: 'minimal',
+              theme: 'auto',
+              icon: '',
+              text: 'Login',
+              iconOnly: false
+            },
+            behavior: {
+              hideWhenAuthenticated: false,
+              showUserInfo: true,
+              autoSlide: false,
+              persistent: false
+            },
+            animation: {
+              slideDirection: 'right'  // Slide to the right when hiding
+            }
+          },
          debug: true
        });