Merge pull request #1 from ShivangNagta/Shlok

browser and terminal component in old windows like border now, switcable

app/src/components/Browser.css

@@ -0,0 +1,73 @@
+/* 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 20px;
+  font-size: 18px;
+  border: none;
+  background-color: #007bff;
+  color: white;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-left: 10px; /* Add margin to separate from URL input */
+}
+
+.navigate-button:hover {
+  background-color: #0056b3;
+}
+
+.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,94 @@
+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("");
+
+  const eurobankInfo = {
+    Host: "eurobank.eu",
+    Port: "Not specified",
+    Username: "Not specified",
+    Password: "aT6kZ7xNv9Fy1qLuRiJ3mSbOp4W8cV2g",
+  };
+
+  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,
+  };
+
+  const handleNavigate = (event) => {
+    event.preventDefault();
+    let trimmedUrl = url.trim();
+
+    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="browser">
+      <form onSubmit={handleNavigate} className="form">
+        <input
+          type="text"
+          value={url}
+          onChange={handleChange}
+          className="url-input"
+          placeholder="Enter URL"
+          autoFocus
+        />
+        <button type="submit" className="navigate-button">
+          Go
+        </button>
+      </form>
+      <div className="content">{currentContent}</div>
+    </div>
+  );
+};
+
+export default Browser;

app/src/components/Window.css

@@ -0,0 +1,66 @@
+.window-border {
+    border: 2px solid #C0C0C0; /* Light gray border */
+    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* Add a blocky drop shadow */
+    padding: 0; /* Remove padding */
+    border-radius: 0; /* Remove border radius */
+    background-color: #F0F0F0; /* Light background color */
+    position: fixed; /* Make it fixed to the viewport */
+    top: 10%; /* Position at the top of the screen */
+    left: 0; /* Position at the left edge of the screen */
+    height: 50vh; /* Set height to 50% of the viewport height */
+    width: 100vw; /* Set width to 100% of the viewport width */
+    display: flex;
+    flex-direction: column;
+    overflow: hidden; /* Ensure content doesn't overflow */
+  }
+
+  .window-title-bar {
+    display: flex;
+    align-items: center;
+    justify-content: center; /* Center the content */
+    background-color: #000080; /* Classic blue title bar color */
+    color: white; /* White text */
+    padding: 5px 10px;
+    border-bottom: 2px solid #000040; /* Darker line for depth */
+    box-sizing: border-box;
+    position: relative;
+  }
+
+  .window-title-bar .window-title {
+    flex-grow: 1; /* Take up available space */
+    font-weight: bold;
+    text-align: center; /* Center the title */
+    font-family: Arial, sans-serif;
+  }
+
+  .window-title-bar::after {
+    content: '';
+    display: block;
+    position: absolute;
+    right: 10px;
+    width: 50px;
+    height: 20px;
+    background: url('data:image/png;base64,...') no-repeat center center; /* Placeholder for window buttons image */
+    background-size: contain;
+  }
+
+  .window-content {
+    flex-grow: 1;
+    background-color: #C0C0C0; /* Match the classic grey background */
+    padding: 10px;
+    overflow-y: auto; /* Allow scrolling */
+  }
+
+  .window-content::-webkit-scrollbar {
+    width: 12px;
+  }
+
+  .window-content::-webkit-scrollbar-track {
+    background: #F0F0F0; /* Light background */
+  }
+
+  .window-content::-webkit-scrollbar-thumb {
+    background-color: #888; /* Darker thumb */
+    border-radius: 20px;
+    border: 3px solid #F0F0F0; /* Matches the track background */
+  }

app/src/components/Window.jsx

@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import "./Window.css"; // Import the CSS file for the Browser component
+import Terminal from "./Terminal";
+import Browser from "./Browser";
+
+const Window = () => {
+  const components = [
+    { name: "Browser", component: <Browser /> },
+    { name: "Terminal", component: <Terminal /> },
+    // Add more components as needed
+  ];
+
+  const [currentComponentIndex, setCurrentComponentIndex] = useState(0);
+
+  const toggleComponent = () => {
+    setCurrentComponentIndex((prevIndex) => (prevIndex + 1) % components.length);
+  };
+
+  return (
+    <div className="window-border">
+      <div className="window-title-bar">
+        <span className="window-title">{components[currentComponentIndex].name}</span>
+        <button className="toggle-button" onClick={toggleComponent}>
+          Switch to {components[(currentComponentIndex + 1) % components.length].name}
+        </button>
+      </div>
+      <div className="window-content">
+        {components[currentComponentIndex].component}
+      </div>
+    </div>
+  );
+};
+
+export default Window;

app/src/main.jsx

@@ -2,25 +2,12 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
 import './index.css'
-import Terminal from './components/Terminal.jsx'
 import './components/Terminal.css'
-
-const terminalContainerStyle = {
-  position: 'fixed',
-  top: '20px',
-  left: '0px',
-  width: '100%',
-  height: '50vh', // Set height to 50% of viewport height
-  zIndex: 1000, // Ensure it stays above other elements
-  backgroundColor: 'black', // Optional: to match the terminal's background
-  color: 'white' // Optional: to match the terminal's text color
-};
+import Window from './components/Window.jsx'
 
 
 ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
-    <>
-      <App/>
-    </>
-  </React.StrictMode>,
+    <div>
+      <Window/>
+    </div>
 )