Update to 0.05.4

Niklas20114552 · Dec 20, 2023 · 917e967 · 917e967
2 parents ca2c129 + c8db302
commit 917e967
Show file tree

Hide file tree

Showing 9 changed files with 837 additions and 386 deletions.
diff --git a/changelog.md b/changelog.md
@@ -1,5 +1,37 @@
 # Changelog
 
+## 0.05.4 : 20.12.2030
+
+By: [@Niklas20114552](https://github.com/Niklas20114552)
+
+(Merry Christmas)
+
+Changed:
+
+- ```error.html``` has now aditional tips for the troubleshooting
+- ```error.html``` and ```errorfile.html``` are now using flex-containers to center the content.
+- Made the english translation more consistant in debug messages
+- Configparser now uses functions to read and create options, to reduce the code amount.
+- The "Failed to load Tabs" Error Message in console now only shows in debugmode
+
+Added:
+
+- Google Safe Browsing now warns about Potentially Unwanted Software (PuP)
+- Added Userscript Manager (like Tampermonkey) and Custom CSS Manager
+- Added the ability to hide hte search bar
+- Removed ```https://inv.makerlab.tech``` as an Invidious-Option for ES, as it doesn't exist anymore
+- Regex-Filter to allow auto completing URLs. e.g.:
+    - ```google.com``` → ```https://google.com/```
+    - ```www.github.com``` → ```https://www.github.com/```
+- Added a Mute-Button to the tabs, when the tab is playing audio or the tab is muted
+- Added a little security badge on the left hand side of the address bar, that shows a lock in https, a open lock with text in http, a globe with the text Brapy on a Brapy-Page and a open lock with text when a certificate issue occurred.
+- You can now Fullscreen the entire Page by pressing ```F11```
+
+Removed:
+
+- Removed the Mute-Button in the top right corner, as it is replaced by the mute button in the tab.
+
+
 ## 0.05.3 : 21.09.2023
 
 By: [@Niklas20114552](https://github.com/Niklas20114552)

diff --git a/error.html b/error.html
@@ -3,16 +3,14 @@
 <head>
 <title>Fehler :(</title>
 <style>
-div {
-    height: fit-content;
-    width: 500px;
-
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    margin-top: -130px;
-    margin-left: -200px;
-    text-align: left;
+body {
+    display: flex;
+    margin: 0;
+    height: 100vh;
+    width: 100vw;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
@@ -45,16 +43,34 @@
     transition: background-color 50ms linear;
 }
 
+main {
+    display: block;
+    width: 40vw;
+    height: fit-content;
+    line-height: 1;
+    margin-bottom: 5vh;
+    font-size: 1.9vh;
+    text-align: left;
+}
+
 </style>
 </head>
 <body>
-<div>
-<p id="code" style="font-size: 20pt"></p>
+<main>
+<p id="code" style="font-size: 3.8vh"></p>
 <p id="error"></p>
-<p>Falls sie etwas suchen wollten, verwenden Sie die Suchleiste oben rechts.</p>
 <p id="more"></p>
+<p>Bitte überprüfen Sie, dass Sie die richtige Addresse eingeben haben.</p>
+<p style="font-weight: bold">Wenn Sie die Richtige Addresse eingeben haben:</p>
+<ul style="line-height: 1.3;">
+<li>Versuchen Sie es später erneut.</li>
+<li>Überprüfen Sie ihre Internetverbindung</li>
+<li>Versuchen Sie, den Adblocker zu deaktivieren (wenn nicht bereits getan).</li>
+<li>Überprüfen Sie (wenn vorhanden), ob DNS-Filter wie PiHole oder AdGuard Home diese Seite blockieren.</li>
+<li>Überprüfen Sie, ob Brapy die Berechtigungen hat, auf das Internet zuzugreifen (Sie sind möglicherweise verbunden, aber hinter einer Firewall).</li>
+</ul>
 <button onclick="brapy_reload();">Neu laden</button>
-</div>
+</main>
 <script>
 var urlParam = function(name, w){
     w = w || window;
@@ -204,17 +220,15 @@
 var url = urlParam('eurl');
 var code = urlParam('code');
 var meaning = getStatusMessage(Number(code));
-//var morehelp = 'Mehr Informationen zu den Fehlercode finden sie <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/' + code + '">Hier</a>.'
 var message = "Das Aufrufen von " + url + " ist gescheitert.";
 var codemessage = "Gibt's doch nicht! [Error " + code + ": " + meaning + "]";
 document.getElementById('code').innerHTML = codemessage;
 document.getElementById('error').innerHTML = message;
-//document.getElementById('more').innerText = morehelp;
 var link = document.createElement('a');
 link.href = 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/' + code
 //link.target = '_blank' Removed until Brapy supported target=_blank links. 
 link.textContent = 'Hier';
-document.getElementById('more').innerText = 'Mehr Informationen zu den Fehlercode finden sie ';
+document.getElementById('more').innerText = 'Mehr Informationen zu den Fehlercode finden Sie ';
 document.getElementById('more').appendChild(link);
 document.getElementById('more').innerHTML += '.';
 

diff --git a/errorfile.html b/errorfile.html
@@ -3,6 +3,17 @@
 <head>
 <title>Fehler :(</title>
 <style>
+body {
+    display: flex;
+    margin: 0;
+    height: 100vh;
+    width: 100vw;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
 div {
     height: fit-content;
     width: 500px;
@@ -45,17 +56,30 @@
     transition: background-color 50ms linear;
 }
 
+main {
+    display: block;
+    width: 40vw;
+    height: fit-content;
+    line-height: 1;
+    margin-bottom: 5vh;
+    font-size: 1.9vh;
+    text-align: left;
+}
+
 </style>
 </head>
 <body>
-<div>
-<p style="font-size: 20pt">Gibt's doch nicht!</p>
+<main>
+<p style="font-size: 3.8vh">Gibt's doch nicht!</p>
 <p id="error"></p>
-<p>Es kann sein, dass die Datei gelöscht, verschoben oder umbenannt wurde.</p>
-<p>Bitte beachten sie auch die Groß- und Kleinschreibung.</p>
-<p>Bitte überprüfen sie auch ob Brapy Berechtigungen hat lokale Dateien zu öffnen oder ob sie Leseberechtigungen auf die Datei haben.</p>
+<p>Bitte überprüfen Sie...</p>
+<ul style="line-height: 1.3;">
+<li>..., ob die Datei gelöscht, verschoben oder umbennant wurde.</li>
+<li>... die Groß- und Kleinschreibung in der Addresse.</li>
+<li>..., ob Brapy die Berechtigungen hat lokale Dateien zu öffnen oder ob sie Leseberechtigungen auf die Datei haben.</li>
+</ul>
 <button onclick="brapy_reload();">Neu laden</button>
-</div>
+</main>
 <script>
 var urlParam = function(name, w){
     w = w || window;
@@ -69,7 +93,7 @@
 }
 
 var url = urlParam('file');
-var message = "Die Datei " + url + " konnte nicht gefunden werden.\nMehr wissen wir auch nicht.";
+var message = "Die Datei " + url + " konnte nicht gefunden werden.";
 document.getElementById('error').innerHTML = message;
 </script>
 

diff --git a/home.html b/home.html
@@ -4,28 +4,76 @@
 <head>
     <title>Neuer Tab</title>
     <style>
-        .center {
-            height: fit-content;
-            width: 500px;
-
-            position: fixed;
-            top: 50%;
-            left: 50%;
-            margin-top: -130px;
-            margin-left: -200px;
+        body {
+            display: flex;
+            margin: 0;
+            height: 100vh;
+            width: 100vw;
+            align-items: center;
+            justify-content: center;
             text-align: center;
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         }
+
+        input[type=text] {
+            width: 100%;
+            appearance: none;
+            border: 2px solid #a8a8a8;
+            outline: none;
+            background: #f5f5f5;
+            border-radius: 5px;
+            padding: .4em;
+            -webkit-transition: 50ms linear;
+            -ms-transition: 50ms linear;
+            transition: 50ms linear;
+            margin: 2px;
+        }
+
+        input[type=text]:focus {
+            border: 2px solid #bdbdbd;
+            -webkit-transition: 50ms linear;
+            -ms-transition: 50ms linear;
+            transition: 50ms linear;
+        }
+
+        button {
+            appearance: none;
+            border: 2px solid #a8a8a8;
+            outline: none;
+            background: #f5f5f5;
+            border-radius: 5px;
+            padding: .4em;
+            -webkit-transition: 50ms linear;
+            -ms-transition: 50ms linear;
+            transition: 50ms linear;
+            margin: 2px;
+        }
+
+        button:active {
+            border: 2px solid #bdbdbd;
+            -webkit-transition: 50ms linear;
+            -ms-transition: 50ms linear;
+            transition: 50ms linear;
+        }
+
+        main {
+            display: block;
+            width: 30vw;
+            height: fit-content;
+            font-size: 35pt;
+            color: rgb(206, 206, 206);
+            text-shadow: 2px 2px rgb(180, 180, 180);
+            line-height: 5px;
+            margin-bottom: 5vh;
+        }
     </style>
 </head>
 
 <body>
-    <div class="center">
-        <div style="font-size: 30pt; color: rgb(206, 206, 206); text-shadow: 2px 2px rgb(180, 180, 180); line-height: 5px;">
-            <p><img src="file:///usr/local/share/brapy/brapy_logo.png" style="width: 30px; height: 30px;" title="Brapy logo"><i><strong>Brapy</strong></i></p>
-        </div>
+    <main>
+        <p><img src="file:///usr/local/share/brapy/brapy_logo.png" style="width: 35px; height: 35px;" title="Brapy logo"><i><strong>Brapy</strong></i></p>
         <input type="text" id="searchbox" placeholder="Suchen mit DuckDuckGo" style="width: 70%;"><button id="searchconfirm" onclick="search_brapy();">Suchen</button>
-    </div>
+    </main>
     <script>
         function search_brapy() {
             searchcontent = document.getElementById("searchbox").value;

diff --git a/homeupdate.html b/homeupdate.html
@@ -4,33 +4,94 @@
 <head>
     <title>Neuer Tab</title>
     <style>
-        .center {
+        body {margin: 0}
+        main {
+            display: flex;
+            margin: 0;
+            height: 100vh;
+            width: 100vw;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        input[type=text] {
+            width: 100%;
+            appearance: none;
+            border: 2px solid #a8a8a8;
+            outline: none;
+            background: #f5f5f5;
+            border-radius: 5px;
+            padding: .4em;
+            -webkit-transition: 50ms linear;
+            -ms-transition: 50ms linear;
+            transition: 50ms linear;
+            margin: 2px;
+        }
+
+        input[type=text]:focus {
+            border: 2px solid #bdbdbd;
+            -webkit-transition: 50ms linear;
+            -ms-transition: 50ms linear;
+            transition: 50ms linear;
+        }
+
+        button {
+            appearance: none;
+            border: 2px solid #a8a8a8;
+            outline: none;
+            background: #f5f5f5;
+            border-radius: 5px;
+            padding: .4em;
+            -webkit-transition: 50ms linear;
+            -ms-transition: 50ms linear;
+            transition: 50ms linear;
+            margin: 2px;
+        }
+
+        button:active {
+            border: 2px solid #bdbdbd;
+            -webkit-transition: 50ms linear;
+            -ms-transition: 50ms linear;
+            transition: 50ms linear;
+        }
+
+        .incenter {
+            display: block;
+            width: 30vw;
             height: fit-content;
-            width: 500px;
+            font-size: 35pt;
+            line-height: 5px;
+            margin-bottom: 5vh;
+        }
 
+        .topright {
             position: fixed;
-            top: 50%;
-            left: 50%;
-            margin-top: -130px;
-            margin-left: -200px;
-            text-align: center;
+            top: 0;
+            right: 0;
+            background-color: lightyellow;
+            border: 4px solid #fff2a5;
+            text-align: left;
+            line-height: 0.6;
+            font-size: 11pt;
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            border-radius: 4px;
         }
     </style>
 </head>
 
 <body>
-    <div class="center">
-        <div style="font-size: 30pt; color: rgb(206, 206, 206); text-shadow: 2px 2px rgb(180, 180, 180); line-height: 5px;">
-            <p><img src="file:///usr/local/share/brapy/brapy_logo.png" style="width: 30px; height: 30px;" title="Brapy logo"><i><strong>Brapy</strong></i></p>
-        </div>
-        <input type="text" id="searchbox" placeholder="Suchen mit DuckDuckGo" style="width: 70%;"><button id="searchconfirm" onclick="search_brapy();">Suchen</button>
-        <br><br>
-        <div style="background-color: rgb(255, 255, 148); border: 2px solid yellow; text-align: left; line-height: 5px; font-size: 11pt; border-radius: 5px;">
-            <p id="update-title"></p>
-            <p id="update-subtitle" style="font-size: 10pt;"></p>
-            <p style="font-size: 10pt;">&nbsp;&nbsp;Verwende den Knopf rechts neben der Suchleiste zum upgraden.</p>
+    <main>
+        <div class="incenter">
+            <p style="color: rgb(206, 206, 206); text-shadow: 2px 2px rgb(180, 180, 180);"><img src="file:///usr/local/share/brapy/brapy_logo.png" style="width: 35px; height: 35px;" title="Brapy logo"><i><strong>Brapy</strong></i></p>
+            <input type="text" id="searchbox" placeholder="Suchen mit DuckDuckGo" style="width: 70%;"><button id="searchconfirm" onclick="search_brapy();">Suchen</button>
         </div>
+    </main>
+    <div class="topright">
+        <p id="update-title" style="margin-left: 8px"></p>
+        <p id="update-subtitle" style="font-size: 10pt; margin-left: 8px"></p>
+        <p style="font-size: 10pt; margin-left: 8px;">Verwende den Knopf rechts neben der Suchleiste zum upgraden.</p>
     </div>
     <script>
         function search_brapy() {
@@ -55,8 +116,8 @@
         }
         var oldver = urlParam('old');
         var newver = urlParam('new');
-        var updatetitle = "&nbsp;&nbsp;Ein Update auf Brapy " + newver + " ist verfügbar!"
-        var updatesubtitle = "&nbsp;&nbsp;Du befindest dich aktuell auf Brapy " + oldver + "."
+        var updatetitle = "Ein Update auf Brapy " + newver + " ist verfügbar!"
+        var updatesubtitle = "Du befindest dich aktuell auf Brapy " + oldver + "."
         document.getElementById('update-title').innerHTML = updatetitle;
         document.getElementById('update-subtitle').innerHTML = updatesubtitle;
     </script>