feat: add black bars on screen borders when the display area is not 4:3

src/js/dr.js

@@ -171,3 +171,55 @@ var isMobile = (function () {let check = false;(function (a) {if (/(android|bb\d
 if (isMobile) {
     document.querySelector("#mobile-arrow").style.setProperty("visibility", "visible")
 }
+
+const targetRatio = 0.75
+const currentRatio = window.innerHeight / window.innerWidth
+
+function addBlackBar(direction, size) {
+    switch (direction) {
+        case "h":
+            let leftBar = document.createElement("div")
+            let rightBar = document.createElement("div")
+            leftBar.style.setProperty("background-color", "black")
+            leftBar.style.setProperty("position", "fixed")
+            leftBar.style.setProperty("z-index", "7355607")
+            leftBar.style.setProperty("left", "0")
+            leftBar.style.setProperty("width", size.toString() + "px")
+            leftBar.style.setProperty("height", "100%")
+            rightBar.style.setProperty("background-color", "black")
+            rightBar.style.setProperty("position", "fixed")
+            rightBar.style.setProperty("z-index", "7355607")
+            rightBar.style.setProperty("right", "0")
+            rightBar.style.setProperty("width", size.toString() + "px")
+            rightBar.style.setProperty("height", "100%")
+            document.querySelector('body').appendChild(leftBar)
+            document.querySelector('body').appendChild(rightBar)
+            break
+        case "v":
+            let topBar = document.createElement("div")
+            let bottomBar = document.createElement("div")
+            topBar.style.setProperty("background-color", "black")
+            topBar.style.setProperty("position", "fixed")
+            topBar.style.setProperty("z-index", "7355607")
+            topBar.style.setProperty("top", "0")
+            topBar.style.setProperty("width", "100%")
+            topBar.style.setProperty("height", size.toString() + "px")
+            bottomBar.style.setProperty("background-color", "black")
+            bottomBar.style.setProperty("position", "fixed")
+            bottomBar.style.setProperty("z-index", "7355607")
+            bottomBar.style.setProperty("bottom", "0")
+            bottomBar.style.setProperty("width", "100%")
+            bottomBar.style.setProperty("height", size.toString() + "px")
+            document.querySelector('body').appendChild(topBar)
+            document.querySelector('body').appendChild(bottomBar)
+            break
+    }
+}
+
+if (currentRatio > targetRatio) {
+    const barSize = (window.innerHeight - window.innerWidth * targetRatio) / 2
+    addBlackBar("v", barSize)
+} else if (currentRatio < targetRatio) {
+    const barSize = (window.innerWidth - window.innerHeight / targetRatio) / 2
+    addBlackBar("h", barSize)
+}