Change UI, add back and forwards button, change from iframe to webview

--THINGS TO IMPLEMENT--

@@ -0,0 +1,5 @@
+--- Adblock:
+- https://github.com/ghostery/adblocker
+--- History 
+- Using json to store it
+--- Extensions idfk know how this would work 😭

main.js

@@ -8,12 +8,18 @@ const createWindow = () => {
     width: 1280,
     height: 800,
     webPreferences: {
-      preload: path.join(__dirname, 'preload.js')
+      preload: path.join(__dirname, 'preload.js'),
+      contextIsolation: false, // Allows easier access to contentWindow
+      nodeIntegration: true,
+      nodeIntegrationInSubFrames: true,
+      webSecurity: false,       // CRITICAL: Allows cross-origin history control
+      sandbox: false,     // Disables the internal Electron sandbox
+      webviewTag: true, // Add this!
     }
   })
 
   win.webContents.session.setUserAgent(androidUA)
-  
+  win.maximize() // Maximize
   win.loadFile('src/index.html')
 }
 

src/img/arrow_back_ios_48dp_E3E3E3_FILL0_wght700_GRAD0_opsz48.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 -960 960 960" width="48px" fill="#e3e3e3"><path d="M424-56 0-480l424-424 80 81-343 343 343 343-80 81Z"/></svg>

src/img/arrow_forward_ios_48dp_E3E3E3_FILL0_wght700_GRAD0_opsz48.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 -960 960 960" width="48px" fill="#e3e3e3"><path d="m304-58-80-81 343-343-343-343 80-81 424 424L304-58Z"/></svg>

src/index.html

@@ -10,26 +10,31 @@
 </head>
 
 <body>
-  <iframe src="https://start.duckduckgo.com/" width="100%" height="100%" id="webpage"></iframe>
+  <webview src="https://start.duckduckgo.com/" width="100%" height="100%" id="webpage"></webview>
   <footer>
-    <input id="search"> 
+    <button class="badgebutton" id="arrowbtn1" onclick="back()">
-    <button type="button" onclick="search()" class="badgebutton" id="searchbutton"> 
+      <img src="img/arrow_back_ios_48dp_E3E3E3_FILL0_wght700_GRAD0_opsz48.svg" alt="Icon" style="vertical-align: middle;" id="searchicon">
+    </button>
+        <button class="badgebutton" id="arrowbtn2" onclick="forward()">
+      <img src="img/arrow_forward_ios_48dp_E3E3E3_FILL0_wght700_GRAD0_opsz48.svg" alt="Icon" style="vertical-align: middle;" id="searchicon">
+    </button>
+    <input id="search">
+    <button type="button" onclick="search()" class="badgebutton" id="searchbutton">
       <img src="img/search.png" alt="Icon" style="vertical-align: middle;" id="searchicon">
-    </button>
-        <button type="button" onclick="search()" class="badgebutton" id="ntbtn" style="margin-left: 10px; background-color: rgb(0, 90, 0);">
-      <img src="img/new.svg" alt="Icon" style="vertical-align: middle;" id="searchicon">
     </button>
     <div class="dropdown">
-  <button class="dropbtn"><img src="img/menu.svg" alt="Icon" style="vertical-align: middle;" id="searchicon"></button>
+      <button class="dropbtn">
-  <div class="dropdown-content">
+        <img src="img/menu.svg" alt="Icon" style="vertical-align: middle;" id="searchicon">
-    <a href="#">New Tab</a>
+      </button>
-    <a href="#">History</a>
+      <div class="dropdown-content">
-  </div>
+        <a onclick="homebtn()">Home</a>
-</div>
+      </div>
+    </div>
   </footer>
   <script src="js/search.js">
   </script>
   <script src="js/dropdown.js"></script>
+  <script src="js/history.js"></script>
 </body>
 
 </html>

src/js/history.js

@@ -0,0 +1,64 @@
+const frame = document.getElementById("webpage");
+function back() {
+    if (frame && typeof frame.canGoBack === 'function' && frame.canGoBack()) {
+        frame.goBack();
+    } else {
+        console.log("Cannot go back: No history");
+    }
+}
+
+function forward() {
+    if (frame && typeof frame.canGoForward === 'function' && frame.canGoForward()) {
+        frame.goForward();
+    } else {
+        console.log("Cannot go forward: No history");
+    }
+}
+frame.addEventListener('did-navigate', updateButtonStates);
+frame.addEventListener('did-navigate-in-page', updateButtonStates);
+
+function updateButtonStates() {
+    const backBtn = document.getElementById('arrowbtn1');
+    const forwardBtn = document.getElementById('arrowbtn2');
+
+    backBtn.style.opacity = frame.canGoBack() ? "1" : "0.3";
+    forwardBtn.style.opacity = frame.canGoForward() ? "1" : "0.3";
+}
+let historyStack = [];
+window.addEventListener('DOMContentLoaded', () => {
+    
+    if (!frame) {
+        console.error("Webview element not found!");
+        return;
+    }
+
+    console.log("Webview found, attaching listeners...");
+
+    frame.addEventListener('did-start-navigation', (event) => {
+        console.log("Navigating to: " + event.url);
+        saveToHistory(event.url);
+    });
+});
+
+function saveToHistory(url) {
+    let history = JSON.parse(localStorage.getItem('browser-history')) || [];
+    history.push(url);
+    localStorage.setItem('browser-history', JSON.stringify(history));
+}
+frame.addEventListener('did-navigate', (event) => {
+  const newUrl = event.url;
+  
+  if (historyStack[historyStack.length - 1] !== newUrl) {
+    historyStack.push(newUrl);
+    
+    localStorage.setItem('browser-history', JSON.stringify(historyStack));
+    
+    console.log("History Updated:", historyStack);
+  }
+});
+
+// To view your history later:
+function getHistory() {
+  const savedHistory = localStorage.getItem('browser-history');
+  return savedHistory ? JSON.parse(savedHistory) : [];
+}

src/js/search.js

@@ -1,4 +1,3 @@
-// Get references to the elements
 const sb = document.getElementById("search");
 const frame = document.getElementById("webpage");
 
@@ -25,4 +24,36 @@ sb.addEventListener("keypress", function (event) {
   if (event.key === "Enter") {
     search();
   }
-});
+});
+
+function homebtn(){
+  frame.src = "https://start.duckduckgo.com/";
+}
+
+
+function back() {
+  if (frame && typeof frame.canGoBack === 'function' && frame.canGoBack()) {
+    frame.goBack();
+  } else {
+    console.log("Cannot go back: No history");
+  }
+}
+
+function forward() {
+  if (frame && typeof frame.canGoForward === 'function' && frame.canGoForward()) {
+    frame.goForward();
+  } else {
+    console.log("Cannot go forward: No history");
+  }
+}
+frame.addEventListener('did-navigate', updateButtonStates);
+frame.addEventListener('did-navigate-in-page', updateButtonStates);
+
+function updateButtonStates() {
+  const backBtn = document.getElementById('arrowbtn1');
+  const forwardBtn = document.getElementById('arrowbtn2');
+
+  // Change opacity or disable if navigation isn't possible
+  backBtn.style.opacity = frame.canGoBack() ? "1" : "0.3";
+  forwardBtn.style.opacity = frame.canGoForward() ? "1" : "0.3";
+}

src/styles.css

@@ -1,4 +1,3 @@
-/* Core Layout */
 html, body {
     margin: 0;
     padding: 0;
@@ -11,15 +10,12 @@ html, body {
     background-color: #000;
 }
 
-/* The Website Container */
+webview {
-iframe {
     flex-grow: 1;
     border: none;
     width: 100%;
     background-color: white;
 }
-
-/* The Bottom Navigation Bar */
 footer {
     width: 100%;
     height: 70px;
@@ -35,14 +31,13 @@ footer {
     z-index: 10; 
 }
 
-/* The URL/Search Bar */
 #search {
     flex-grow: 1;
     height: 44px;
     font-size: 16px;
     padding: 0 20px;
     border: 1px solid #444;
-    border-radius: 22px; 
+    border-radius: 10px; 
     background-color: #2b2b2b;
     color: #fff;
     outline: none;
@@ -52,16 +47,14 @@ footer {
 
 #search:focus {
     background-color: #333;
-    border-color: #007bff; 
 }
 
-/* Primary Button Styling */
 .badgebutton {
     width: 44px;
     height: 44px;
     background-color: #007bff;
     border: none;
-    border-radius: 50%;
+    border-radius: 25%;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -79,21 +72,19 @@ footer {
     object-fit: contain;
 }
 
-/* Dropdown Container */
 .dropdown {
     position: relative;
     display: inline-block;
     margin-left: 10px;
 }
 
-/* Secondary Button (Dropbtn) */
 .dropbtn {
     background-color: #2b2b2b;
     color: white;
     width: 44px;
     height: 44px;
     border: 1px solid #444;
-    border-radius: 50%;
+    border-radius: 25%;
     font-size: 20px;
     cursor: pointer;
     display: flex;
@@ -101,27 +92,32 @@ footer {
     justify-content: center;
     transition: all 0.2s ease;
 }
-
+#arrowbtn1{
-/* The Dropup Menu Content */
+    background-color: #2b2b2b;
+    border-radius: 50%;
+}
+#arrowbtn2{
+    background-color: #2b2b2b;
+    border-radius: 50%;
+    margin: 10px;
+}
 .dropdown-content {
-    display: none; /* Hidden by default */
+    display: none;
     position: absolute;
     bottom: 100%; 
     left: 50%;
     transform: translateX(-50%);
     margin-bottom: 15px; 
-    
     background-color: rgba(43, 43, 43, 0.95);
     backdrop-filter: blur(10px);
-    min-width: 160px;
     border: 1px solid #444;
     border-radius: 12px;
     box-shadow: 0px -8px 24px rgba(0,0,0,0.5);
     z-index: 11;
     overflow: hidden;
+    text-align: center;
 }
 
-/* State when Toggled Open via JS */
 .dropdown.active .dropdown-content {
     display: block;
     animation: slideUp 0.2s ease-out;
@@ -132,7 +128,6 @@ footer {
     background-color: #333;
 }
 
-/* Dropdown Menu Links */
 .dropdown-content a {
     color: #eee;
     padding: 4px 20px;
@@ -147,7 +142,6 @@ footer {
     color: white;
 }
 
-/* Animations */
 @keyframes slideUp {
     from {
         opacity: 0;