From 819d2f277a79ad5e9d226d5b59d7584bf21f9671 Mon Sep 17 00:00:00 2001 From: Ketan Date: Thu, 30 Apr 2026 20:54:44 -0400 Subject: [PATCH] Change UI, add back and forwards button, change from iframe to webview --- --THINGS TO IMPLEMENT-- | 5 ++ main.js | 10 ++- ...48dp_E3E3E3_FILL0_wght700_GRAD0_opsz48.svg | 1 + ...48dp_E3E3E3_FILL0_wght700_GRAD0_opsz48.svg | 1 + src/index.html | 29 +++++---- src/js/history.js | 64 +++++++++++++++++++ src/js/search.js | 35 +++++++++- src/styles.css | 36 +++++------ 8 files changed, 144 insertions(+), 37 deletions(-) create mode 100644 --THINGS TO IMPLEMENT-- create mode 100644 src/img/arrow_back_ios_48dp_E3E3E3_FILL0_wght700_GRAD0_opsz48.svg create mode 100644 src/img/arrow_forward_ios_48dp_E3E3E3_FILL0_wght700_GRAD0_opsz48.svg diff --git a/--THINGS TO IMPLEMENT-- b/--THINGS TO IMPLEMENT-- new file mode 100644 index 0000000..251d915 --- /dev/null +++ b/--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 😭 \ No newline at end of file diff --git a/main.js b/main.js index d7ab43b..5fa5197 100644 --- a/main.js +++ b/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') } diff --git a/src/img/arrow_back_ios_48dp_E3E3E3_FILL0_wght700_GRAD0_opsz48.svg b/src/img/arrow_back_ios_48dp_E3E3E3_FILL0_wght700_GRAD0_opsz48.svg new file mode 100644 index 0000000..5b1d6fe --- /dev/null +++ b/src/img/arrow_back_ios_48dp_E3E3E3_FILL0_wght700_GRAD0_opsz48.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/img/arrow_forward_ios_48dp_E3E3E3_FILL0_wght700_GRAD0_opsz48.svg b/src/img/arrow_forward_ios_48dp_E3E3E3_FILL0_wght700_GRAD0_opsz48.svg new file mode 100644 index 0000000..bb14d9a --- /dev/null +++ b/src/img/arrow_forward_ios_48dp_E3E3E3_FILL0_wght700_GRAD0_opsz48.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/index.html b/src/index.html index 89013cb..ed7d1a1 100644 --- a/src/index.html +++ b/src/index.html @@ -10,26 +10,31 @@ - + + \ No newline at end of file diff --git a/src/js/history.js b/src/js/history.js index e69de29..a57b19b 100644 --- a/src/js/history.js +++ b/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) : []; +} \ No newline at end of file diff --git a/src/js/search.js b/src/js/search.js index ac7e619..33bb2b7 100644 --- a/src/js/search.js +++ b/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(); } -}); \ No newline at end of file +}); + +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"; +} \ No newline at end of file diff --git a/src/styles.css b/src/styles.css index f324e3a..6c4b2fd 100644 --- a/src/styles.css +++ b/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 */ -iframe { +webview { 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; } - -/* The Dropup Menu Content */ +#arrowbtn1{ + 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;