From 9e3cf360beea37649831085a8c898a8d970b662e Mon Sep 17 00:00:00 2001
From: Jonas <jonasfranke@sdevs.org>
Date: Fri, 1 Aug 2025 15:18:11 +0200
Subject: [PATCH] Add examples for Passkey/WebAuthn and TOTP in README.md

---
 README.md | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/README.md b/README.md
index 6555e20..52e7cf5 100644
--- a/README.md
+++ b/README.md
@@ -106,6 +106,23 @@ const isValid = verifyPasskeyResponse(challenge, clientDataJSON);
 
 ---
 
+## Examples
+
+<div style="display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;">
+  <div style="flex: 1; min-width: 300px; max-width: 600px;">
+    <h3>Passkey/WebAuthn Example</h3>
+    <a href="https://stackblitz.com/edit/securio-passkey?embed=1&file=index.html&view=preview" target="_blank">
+      <img src="https://raw.githubusercontent.com/shadowbrowser/securio/refs/heads/main/assets/passkey-example.png" alt="Passkey/WebAuthn Example" style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+    </a>
+  </div>
+  <div style="flex: 1; min-width: 300px; max-width: 600px;">
+    <h3>TOTP Example</h3>
+    <a href="https://stackblitz.com/edit/securio-totp?embed=1&file=index.html&view=preview" target="_blank">
+      <img src="https://raw.githubusercontent.com/shadowbrowser/securio/refs/heads/main/assets/totp-example.png" alt="TOTP Example" style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+    </a>
+  </div>
+</div>
+
 ## API Documentation
 
 All public APIs are fully documented with JSDoc. You can view inline documentation in your editor or generate HTML docs using TypeScript tools.