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/button.html
+++ b/examples/button.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-button {
+      background: #0066cc;
+      color: white;
+      padding: 12px 24px;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 16px;
+      text-align: center;
+      transition: background 0.2s;
+    }
+
+    #login-button:hover {
+      background: #0052a3;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="container">
+    <div id="login-button">Login</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({
+        theme: 'default',
+        methods: {
+          extension: true,
+          local: true,
+          readonly: true,
+          connect: true,
+          remote: true,
+          otp: true
+        },
+        floatingTab: {
+          enabled: false
+        }
+      });
+
+      document.getElementById('login-button').addEventListener('click', () => {
+        window.NOSTR_LOGIN_LITE.launch('login');
+      });
+    });
+  </script>
+</body>
+
+</html>