restore decoder and add home.jsx

netlify/functions/progress.js

@@ -0,0 +1,11 @@
+export async function handler(event, context) {
+  // ... your scanning logic which determines the total and scanned items
+  // For demonstration, here's a static response:
+  return {
+    statusCode: 200,
+    body: JSON.stringify({
+      scanned: 20,  // update dynamically
+      total: 100,   // update dynamically
+    }),
+  };
+} 

package.json

@@ -42,6 +42,7 @@
     "rate-limiter-flexible": "^4.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-router-dom": "^7.1.5",
     "semver": "^7.6.3",
     "simple-git": "^3.27.0",
     "tailwind-merge": "1.14.0",

src/App.jsx

@@ -1,5 +1,7 @@
 import React, { useEffect } from 'react';
-import ScannerUI from './components/ScannerUI';
+import Decoder from './components/Decoder';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import Home from './components/Home';
 
 function App() {
   useEffect(() => {
@@ -8,11 +10,12 @@ function App() {
   }, []);
 
   return (
-    <div className="min-h-screen bg-gray-900 transition-colors duration-200">
-      <div className="container mx-auto px-4">
-        <ScannerUI />
-      </div>
-    </div>
+    <Router>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/secret" element={<Decoder />} />
+      </Routes>
+    </Router>
   );
 }
 

src/components/Decoder.jsx

@@ -90,7 +90,7 @@ const Decoder = () => {
                   <div className="mt-4 text-green-300">
                     &gt;{' '}
                     <a
-                      href="https://github.com/ghostsecurity/reaper/blob/main/docs/how-to-hack-ghostbank.md"
+                      href="https://securitylens.io/secret?message="
                       target="_blank"
                       rel="noopener noreferrer"
                       className="hover:underline"
@@ -114,3 +114,5 @@ const Decoder = () => {
   );
 };
 
+export default Decoder;
+

src/components/Home.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import ScannerUI from './ScannerUI';
+
+const Home = () => {
+  return (
+    <div className="min-h-screen bg-gray-900 transition-colors duration-200">
+      <div className="container mx-auto px-4">
+        <ScannerUI />
+      </div>
+    </div>
+  );
+};
+
+export default Home; 

src/components/ProgressBar.jsx

@@ -0,0 +1,39 @@
+import React, { useState, useEffect } from 'react';
+
+function ProgressBar() {
+  // Initialize with 0. Ensure your API returns non-zero total when scanning starts.
+  const [progress, setProgress] = useState({ scanned: 0, total: 0 });
+
+  useEffect(() => {
+    async function fetchProgress() {
+      try {
+        // Assuming your Netlify function or API endpoint is at /api/progress
+        const response = await fetch('/api/progress');
+        const data = await response.json();
+        console.log('Progress API response:', data);
+        // Make sure data.scanned and data.total are valid numbers
+        setProgress({
+          scanned: typeof data.scanned === 'number' ? data.scanned : 0,
+          total: typeof data.total === 'number' ? data.total : 0,
+        });
+      } catch (error) {
+        console.error('Error fetching progress:', error);
+      }
+    }
+
+    // Poll every 2 seconds (adjust as needed)
+    const intervalId = setInterval(fetchProgress, 2000);
+
+    // Clean up on unmount
+    return () => clearInterval(intervalId);
+  }, []);
+
+  return (
+    <div>
+      <p>{`fetching: ${progress.scanned} of ${progress.total}`}</p>
+      {/* Add any additional UI, like a visual progress bar */}
+    </div>
+  );
+}
+
+export default ProgressBar;