Merge branch 'main' into triman

app/src/App.jsx

@@ -2,15 +2,12 @@ import MandelbrotFractal from "./Mandelbot"
 import Blockchain from "./blockchain"
 import TransactionMine from "./transactionMine"
 import BlockMine from "./blockMine"
+import MandelbrotFractal from "./components/Mandelbrot.jsx"
+import JigsawGame from './components/Jigsaw.jsx';
 
 export default function App() {
     return (
         <div>
-            {/* <p> Hello </p> */}
-            {/* <MandelbrotFractal /> */}
-            <TransactionMine />
-            {/* {<BlockMine />} */}
-            {/* <Blockchain /> */}
         </div>
     )
 }

app/src/components/Browser.css

@@ -0,0 +1,83 @@
+/* Ensure the browser component takes up the top half of the viewport */
+.browser {
+  background-color: #C0C0C0; /* Dark background */
+  color: #e0e0e0; /* Light text */
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  font-family: Arial, sans-serif;
+  box-sizing: border-box;
+}
+
+.form {
+  display: flex;
+  margin-bottom: 10px;
+}
+
+.url-input {
+  flex-grow: 1;
+  padding: 10px;
+  font-size: 18px;
+  border: 1px solid #444; /* Darker border */
+  border-radius: 4px;
+  background-color: #1e1e1e; /* Darker background for input */
+  color: #e0e0e0; /* Light text for input */
+  outline: none;
+}
+
+.url-input::placeholder {
+  color: #888; /* Placeholder text color */
+}
+
+.navigate-button {
+  padding: 10px 10px; /* More square padding */
+  font-size: 18px;
+  border: 1px solid #000; /* Dark border */
+  background-color: #C0C0C0; /* Light gray background */
+  color: black; /* Black text */
+  cursor: pointer;
+  margin-left: 10px; /* Add margin to separate from URL input */
+  width: 100px; /* Fixed width for squarish appearance */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid #808080; /* Gray border */
+  /* box-shadow: inset -1px -1px 0 0 #fff, inset 1px 1px 0 0 #000; Windows 95 style */
+}
+
+.navigate-button:hover {
+  background-color: #808080; /* Darker gray on hover */
+}
+
+.navigate-button:active {
+  background-color: #404040; /* Darkest gray when active */
+  border-color: #202020; /* Darker border when active */
+}
+
+.content {
+  flex-grow: 1;
+  padding: 20px;
+  border: 1px solid #444; /* Darker border */
+  border-radius: 4px;
+  overflow-y: auto; /* Allow scrolling */
+  background-color: #1e1e1e; /* Darker background for content */
+  color: #e0e0e0; /* Light text for content */
+}
+
+/* Optional scrollbar styling for a consistent dark theme */
+.content::-webkit-scrollbar {
+  width: 12px;
+}
+
+.content::-webkit-scrollbar-track {
+  background: #2e2e2e; /* Darker track */
+}
+
+.content::-webkit-scrollbar-thumb {
+  background-color: #888; /* Darker thumb */
+  border-radius: 20px;
+  border: 3px solid #2e2e2e; /* Matches the track background */
+}
+
+/* Add this to your CSS file, e.g., Browser.css */

app/src/components/Browser.jsx

@@ -0,0 +1,102 @@
+import React, { useState } from "react";
+// import "./Browser.css"; // Import the CSS file for the Browser component
+
+const Browser = () => {
+  const [url, setUrl] = useState("");
+  const [history, setHistory] = useState([]);
+  const [currentContent, setCurrentContent] = useState("Welcome to the Browser! Enter a URL to get started.");
+
+  const eurobankInfo = {
+    Username: "kris",
+    Password: "heheheha",
+    Host: "localhost",
+    Port: "1234"
+  };
+
+  const formatEurobankInfo = (info) => {
+    return (
+      <div>
+        <p>
+          <strong>Host:</strong> {info.Host}
+        </p>
+        <p>
+          <strong>Port:</strong> {info.Port}
+        </p>
+        <p>
+          <strong>Username:</strong> {info.Username}
+        </p>
+        <p>
+          <strong>Password:</strong> {info.Password}
+        </p>
+      </div>
+    );
+  };
+
+  const urlMappings = {
+    "https://www.google.com": "sundar pichai moment",
+    "https://www.eurobank.eu/files": eurobankInfo,
+    "https://www.eurobank.eu": "ain't nothin around here",
+  };
+
+  const handleNavigate = (event) => {
+    event.preventDefault();
+    let trimmedUrl = url.trim();
+
+    if (trimmedUrl === "") {
+      return;
+    }
+
+    if (!trimmedUrl.startsWith("https://") && !trimmedUrl.startsWith("http://")) {
+      if (trimmedUrl.startsWith("www.")) {
+        trimmedUrl = "https://" + trimmedUrl;
+        setUrl("https://" + url);
+      } else {
+        trimmedUrl = "https://www." + trimmedUrl;
+        setUrl("https://www." + url);
+      }
+    }
+
+    let output;
+    if (urlMappings[trimmedUrl]) {
+      output = urlMappings[trimmedUrl];
+    } else {
+      output = `Invalid URL: ${trimmedUrl}`;
+    }
+
+    if (typeof output === "object" && output.Host) {
+      setCurrentContent(formatEurobankInfo(output));
+    } else {
+      setCurrentContent(output);
+    }
+
+    setHistory([...history, { url: trimmedUrl, output }]);
+  };
+
+  const handleChange = (event) => {
+    setUrl(event.target.value);
+  };
+
+  return (
+    <div className="bg-gray-900 text-white p-4 rounded-md h-full flex flex-col">
+      <form onSubmit={handleNavigate} className="flex mb-4">
+        <input
+          type="text"
+          value={url}
+          onChange={handleChange}
+          className="bg-gray-800 text-white flex-grow px-2 py-1 rounded-md"
+          placeholder="Enter URL"
+          autoFocus
+        />
+        <button
+          type="submit"
+          className="bg-blue-600 text-white px-4 py-1 rounded-md ml-2 hover:bg-blue-700"
+        >
+          Go
+        </button>
+      </form>
+      <div className="bg-gray-800 p-4 rounded-lg flex-grow overflow-auto">{currentContent}</div>
+    </div>
+  );
+};
+
+export default Browser;