RefreshBtn/Viewport Protection update

index.html

@@ -12,13 +12,16 @@
     <button id="nwBtn">📄</button>
     <input id="txtUrl" placeholder="Put the website here" name="url" type="text" onkeypress="clickPress(event)" />
     <button onclick="go(); return false;" id="goBtn">✅</button>
+    <button onclick="refresh(); return false;" id="refreshBtn">🔄</button>
     <button onclick="stop(); return false;" id="stopBtn">🛑</button> 
     <button onclick="back(); return false;" id="backBtn">⬅️</button>
     <button onclick="forward(); return false;" id="forwardBtn">➡️</button>
     </div>
+    <div id="whProtection">
     <tab-group new-tab-button="true" sortable="true">
     <webview id="foo" autosize plugins disablewebsecurity></webview>
     </tab-group>
+    </div>
     <script src="node_modules/electron-tabs/dist/electron-tabs.js"></script>
     <script type="text/javascript" src="./userscript/userscripts.js"></script>
     <script type="text/javascript" src="./config.js"></script>

libbrowz.js

@@ -20,11 +20,12 @@ function normalizeUrl(url) {
     }
 }
 
-
+let url = undefined
+let browserFrame = undefined
 function go() {
-    let browserFrame = tabGroup.getActiveTab().webview
+    browserFrame = tabGroup.getActiveTab().webview
     let browser = tabGroup.getActiveTab()
-    let url = normalizeUrl(document.getElementById("txtUrl").value)
+    url = normalizeUrl(document.getElementById("txtUrl").value)
     if (url.includes("youtube.com") || url.includes("youtu.be")) {
     	url = url.replaceAll("youtube.com", "invidious.nerdvpn.de")
     	url = url.replaceAll("youtu.be", "invidious.nerdvpn.de")
@@ -36,7 +37,8 @@ function go() {
     	url = url.replaceAll("google.com", "search.sparksammy.com")
     }
     document.getElementById("txtUrl").value = ""
-    browserFrame.loadURL(url);
+    browserFrame.loadURL(url, 
+        {userAgent: 'Sneedium/Undefined (Windows NT 5.1; Win32) AppleWebKit/537.92 (Blink, like Electron) Blink/109.0.5414.74 Safari/537.92'});
     browserFrame.addEventListener('dom-ready', () => {
         browserFrame.insertCSS(`
         ::-webkit-scrollbar {
@@ -72,6 +74,15 @@ function forward() {
     browserFrame.goForward()
 }
 
+function refresh() {
+    if (typeof url != undefined) {
+        browserFrame.loadURL(browserFrame.getURL(), 
+            {userAgent: 'Sneedium/Undefined (Windows NT 5.1; Win32) AppleWebKit/537.92 (Blink, like Electron) Blink/109.0.5414.74 Safari/537.92'});
+    } else {
+        window.location.reload()
+    }
+}
+
 tabGroup.setDefaultTab({
     title: CONF.homepageTitle,
     src: CONF.homepage,
@@ -84,4 +95,3 @@ function clickPress(keyEvent) {
         go()
     }
 }
-

main.js

@@ -30,8 +30,10 @@ async function enableGoodies(s) {
 
 function createWindow () {
   const mainWindow = new BrowserWindow({
-    width: 1000,
+    width: 1100,
     height: 600,
+    minWidth: 1100,
+    minHeight: 600,
     webPreferences: {
       preload: path.join(__dirname, 'preload.js'),
       webviewTag: true,
@@ -118,8 +120,6 @@ const regexPatterns = [
   // and load the index.html of the app.
   mainWindow.loadFile('index.html')
 
-  // Open the DevTools.
-  mainWindow.webContents.openDevTools()
   
   return mainWindow;
 }

styles.css

@@ -78,6 +78,17 @@ body {
   font-size: 1.25rem;
 }
 
+#refreshBtn {
+  background-color: #507fac; /* Aqua */
+  border: none;
+  color: white;
+  padding: 1% 1%;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 1.25rem;
+}
+
 #txtUrl {
   border: none;
   padding: 1% 1%;
@@ -89,16 +100,26 @@ body {
 }
 
 html, body {
+  height: 98%;
   width: 100%;
-  height: 100%;
+  justify-content: center; /* Center horizontally */
+  align-items: center;    /* Center vertically */
+}
+
+#whProtection {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  bottom: 5%;
+  transform: translate(-50%, -46%); /* Offset by half the width and 46% height */
+  width: 90%; /* % of viewport width */
+  height: 86%; /* % of viewport height */
+  border: 1vw solid green; /* Border color and thickness */
+  box-sizing: border-box;
 }
 
 webview {
-  position: fixed;
-  bottom: 0;
-  max-height: 90%!important;
-  max-width: 100%;
   width: 100%;
-  height: 90%!important;
-  display: inline-flex!important;
+  height: 100%;
+  border: none;
 }