Fix typos & and Blur theme

app/index.html

@@ -114,7 +114,7 @@ <h4 id="prefrences">Prefrences</h4>
 							Discord RPC 
 						</div>
 						<div class="description"> 
-							Show what you are listening to on discord (this help the project as well ;).
+							Show what you are listening to on Discord (this helps the project as well ;)).
 						</div>
 					</div>
 					<div class="toggle">
@@ -131,7 +131,7 @@ <h4 id="prefrences">Prefrences</h4>
 							Startup Load Last Page 
 						</div>
 						<div class="description">
-							Load the last soundcloud page you were when you closed the app.
+							Load the last SoundCloud page you were on when you closed the app.
 						</div>
 					</div>
 					<div class="toggle">
@@ -165,7 +165,7 @@ <h4 id="prefrences">Prefrences</h4>
 							Zoom Factor
 						</div>
 						<div class="description">
-							Change the zoom scale of Soundcloud (a number between 10 and 500).
+							Change the zoom scale of SoundCloud (a number between 10 and 500).
 						</div>
 					</div>
 					<div class="manualinp">
@@ -229,7 +229,7 @@ <h4 id="prefrences">Prefrences</h4>
 							Useragent String
 						</div>
 						<div class="description">
-							used for simulation of different browsers and devices
+							Used for simulation of different browsers and devices.
 						</div>
 					</div>
 					<div class="manualinp">
@@ -252,7 +252,8 @@ <h4 id="themes">Themes</h4>
 					<div class="themeitem" onclick="selecttheme(0)">
 						<div class="themeinfo">
 							<h4 class="themename">Vanilla</h4>
-							<h5 class="themeauthor">by Soundcloud</h5>
+							<h5 class="theme-description">A default theme provided by SoundCloud</h5>
+							<h5 class="themeauthor">by SoundCloud</h5>
 						</div>
 						<div class="themesnapshot">
 							<img src="lib/assets/inapp/themessnaps/vanilla.png" alt="vannila">
@@ -261,6 +262,7 @@ <h5 class="themeauthor">by Soundcloud</h5>
 					<div class="themeitem" onclick="selecttheme(1)">
 						<div class="themeinfo">
 							<h4 class="themename">Darkcloud</h4>
+							<h5 class="theme-description">A dark theme for night listening</h5>
 							<a target="_blank" href="https://github.com/MateusRosolem"><h5 class="themeauthor">by MateusRosolem</h5></a>
 						</div>
 						<div class="themesnapshot">
@@ -270,6 +272,7 @@ <h4 class="themename">Darkcloud</h4>
 					<div class="themeitem" onclick="selecttheme(2)">
 						<div class="themeinfo">
 							<h4 class="themename">Nocturnal</h4>
+							<h5 class="theme-description">A dark blue theme</h5>
 							<a target="_blank" href="https://userstyles.org/styles/129712/nocturnal-soundcloud-theme"><h5 class="themeauthor">by Chloe Chantelle</h5></a>
 						</div>
 						<div class="themesnapshot">
@@ -278,13 +281,24 @@ <h4 class="themename">Nocturnal</h4>
 					</div>
 					<div class="themeitem" onclick="selecttheme(3)">
 						<div class="themeinfo">
-							<h4 class="themename">Postmorphic</h4>
+							<h4 class="themename">Postmorphic</h4>							
+							<h5 class="theme-description">A Windows Vista theme</h5>
 							<a target="_blank" href="https://userstyles.org/styles/253043/post-morphic-soundcloud"><h5 class="themeauthor">by kantraa</h5></a>
 						</div>	
 						<div class="themesnapshot">
 							<img src="lib/assets/inapp/themessnaps/postmorphic.png" alt="vannila">
 						</div>
 					</div>
+					<div class="themeitem" onclick="selecttheme(4)">
+						<div class="themeinfo">
+							<h4 class="themename">Blur</h4>
+							<h5 class="theme-description">A theme with backdrop blur</h5>
+							<a target="_blank" href="https://userstyles.org/styles/253043/post-morphic-soundcloud"><h5 class="themeauthor">by zyqunix</h5></a>
+						</div>
+						<div class="themesnapshot">
+							<img src="lib/assets/inapp/themessnaps/blur.png" alt="blur">
+						</div>
+					</div>
 				</div>
 				<p>From 19 April 2025 Soundcloud added dark mode and reworked its interface using MUI, you can switch to light or darkmode using their settings page</p>
 				<p>Due to that nearly every Soundcloud theme is deprecated and it will take time for me and the css editors to rework them</p>
@@ -312,7 +326,7 @@ <h4 id="support">Support</h4>
 			<section class="supportsection">
 				<div class="description">
 					<p>BSC enhances SoundCloud with custom themes and plugins, but keeping it running takes time and resources. your donation helps support development, updates, and server costs. if you love BSC, consider contributing to keep it growing. every donation makes a difference!</p>
-					<p>If you encounter any bug or have any suggestions or ideas, make sure to open an issue thread on the project's github page. i will be in touch under 48 hours.</p>
+					<p>If you encounter any bug or have any suggestions or ideas, make sure to open an issue thread on the project's Github page. I will be in touch under 48 hours.</p>
 				</div>
 				<div class="linkicons">
 					<a target="_blank" href="https://buymeacoffee.com/alirezakj" class="icon">
@@ -380,7 +394,7 @@ <h4 id="songshowcasesongartist"></h4>
 					Enter
 				</button>
 			</div>
-			<span>click on the transparent area to close</span>
+			<span>Click on the transparent area to close</span>
 		</div>
 	</div>
 
@@ -475,4 +489,4 @@ <h5>Make sure to login for the best experience<p>
 	<script src="lib/js/ui.js"></script>
 	<script src="https://cdn.jsdelivr.net/gh/AlirezaKJ/BetterSoundCloud/plugins/updateCheck.js"></script>
 </body>
-</html>
+</html>

app/lib/css/main.css

@@ -281,6 +281,9 @@ input::-webkit-inner-spin-button {
   animation: fadeOut 0.5s ease-in-out forwards;
 }
 
+.themeinfo > a:hover {
+  text-decoration: underline;
+}
 
 @keyframes fadeOut {
   0% {
@@ -291,4 +294,4 @@ input::-webkit-inner-spin-button {
     opacity: 0;
     visibility: hidden;
   }
-}
+}

app/lib/js/startup.js

@@ -49,6 +49,9 @@ function loadstop() {
       case "postmorphic":
         addstyle("\\themes\\postMorphic.css")
         break;
+      case "blur":
+        addstyle("\\themes\\blur.css")
+        break;
       default:
         console.log("No theme selected")
         break;
@@ -82,4 +85,4 @@ sciloadingcheck = setInterval(() => {
   }`)
 }, 1000);
 
-webview.addEventListener('did-stop-loading', loadstop)
+webview.addEventListener('did-stop-loading', loadstop)

app/lib/js/ui.js

@@ -140,6 +140,9 @@ function syncsettingsui() {
     case "postmorphic":
       themeitemsdiv[3].classList.add("active")
       break;
+    case "blur":
+      themeitemsdiv[4].classList.add("active")
+      break;
     default:
       themeitemsdiv[0].classList.add("active")
       break;
@@ -220,6 +223,9 @@ function selecttheme(index) {
     case 3:
       changeSettings("theme", "postmorphic")
       break;
+    case 4:
+      changeSettings("theme", "blur")
+      break;
   }
   themeitemsdiv.forEach(function (themeitem) {
     themeitem.classList.remove("active")
@@ -244,4 +250,4 @@ function applyCustomJS() {
 function resetSettings() {
   localStorage.clear()
   location.reload()
-}
+}

main.js

@@ -11,7 +11,6 @@ function createWindow () {
   mainWindow = new BrowserWindow({
     width: 1366,
     height: 768,
-    // frame: false,
     icon: 'app/lib/assets/icon.ico',
     webPreferences: {
 			nodeIntegration: true,
@@ -22,6 +21,7 @@ function createWindow () {
 
   mainWindow.setMenuBarVisibility(false)
   mainWindow.loadFile('app/index.html')
+  mainWindow.maximize();
 
   // Open the DevTools.
   // mainWindow.webContents.openDevTools()
@@ -136,4 +136,4 @@ ipcMain.on("appReqCloseApp",() => {
 ipcMain.on("appReqReloadApp",() => {
   app.relaunch();
   app.quit();
-});
+});

themes/blur.css

@@ -0,0 +1,24 @@
+article[class="sidebarModule g-all-transitions-200-linear mobileApps"],
+div[class="l-footer sc-text-verylight sc-text-secondary standard sc-border-light-top"]{
+    opacity: 0 !important;
+    user-select: none;
+    pointer-events: none;
+    cursor: default;
+}
+
+.sc-classic .dropbar__content,
+.sc-classic .header{
+    background-color: rgb(24, 26, 26, 0.8) !important;
+    backdrop-filter: blur(10px) !important;
+}
+
+.playControls__inner {
+    background-color: rgb(24, 26, 26, 0.8) !important;
+    backdrop-filter: blur(10px) !important;
+}
+
+
+div[class="playControls__bg"],
+div[class="playControls__panel"] {
+    display: none;
+}