Version 1.5 Release! (#28)

WHOOO

Arc Boosts - SpotOn/SpotOn/SpotOn/Changelog.md

@@ -0,0 +1,98 @@
+# Release V1 Full Changelog and Feature List
+
+### Quick look:
+
+![SCR-20230612-bqva](https://github.com/SenpaiHunters/SpotOn/assets/103985728/9f279630-c4c9-4a09-87bf-2b7a9fb3d919)
+
+## Features (New and Improved)
+
+- Added new toggle options (in beta)
+- It's now super easy to edit SpotOn to your tastes without needing knowledge in `css` or `js`~
+  - See customisation below
+- Reduced code size from 413kb to 268kb, resulting in a decrease of 35.12%
+- Introduced inbuilt SpotOn Righter, which can be toggled on/off (only inside `js` for now)
+- Reduced image sizes for improved performance
+- Revamped `popup.html` and added a new popup design
+- Restructured and reformatted code, removing unnecessary parts
+- Moved the streaming to devices bar inside the Now Playing Bar
+- Redesigned the Hotkeys panel
+- Redid the design of artist page
+  - Small visual changes, scrolling hides the artists cover etc
+- Enhanced `toggle.js` code
+- Temporarily removed the scrollbar
+- Removed borders on multiple elements
+  - Quick search (`command + k`) and been improved now
+- Animations now play smoother
+- Hovering looks better, with a smooth fade in
+- Subtext for songs, like albums are now a sorta grey color, looks better now
+- Added additional customisation options to tailor SpotOn to individual preferences
+
+  - Note: Toggles will be added in the future (visible but non-functional), for now, customisation requires editing `SpotOnMain.js`
+  - Customisation options include:
+
+- Nav bar & Now playing bar customisation:
+
+  - `--now-playing-color:`
+  - `--nav-bar-color:`
+  - `--bg-img:`
+  - `--song-color: white;`
+  - `--album-art:`
+
+- Hiders:
+
+  - `--hide-song-date:`
+  - `--hide-song-numbering:`
+  - `--hide-song-dura:`
+  - `--hide-song-album:`
+  - `--hide-song-heart:`
+  - `--hide-top-infbar:`
+  - `--hide-profile-icon:`
+
+- Lyrics:
+
+  - `--lyrics-color:`
+  - `--lyrics-font-size:`
+
+- Progress bar settings:
+
+  - `--progress-bar--background-color:`
+  - `--progress-bar-dot-color:`
+  - `--playback-duration-color:`
+
+- And more to come in future updates
+
+## Change Log
+
+- Significantly improved SpotOn script load times from around 5 seconds to 2 seconds
+- Removed unused `style.css`, transferring necessary parts to other files
+- Fixed the `toggle` button inside `popup.html`
+- Completely overhauled SpotOn code, resulting in a 35.12% decrease in size
+- Resolved numerous bugs and glitches
+- Enhanced the speed of `toggle.js`
+- Implemented folder organisation to improve code maintenance
+- Rectified spacing issues in `toggle.js`
+- Addressed memory usage overload and optimised resource usage
+- Fully eliminated the `function` node for extra SpotOn CSS
+- Fixed rainbow controls to properly apply effects to items like the library button
+- Resolved issues with 4k monitor support
+- Fixed overscroll problem (again)
+  - Fixed another infinite scroll issue (this was pretty fun, I could scroll forever!)
+- Corrected problems with lyric auto-scrolling
+- Resolved an issue in `manifest.json` that caused installation difficulties for some users
+- Fixed the footer display issue
+- Eliminated instances of the Spotify logo reappearing
+- Ensured proper hiding of the install app button
+- Corrected multiple spacing issues
+- Improved skipping times and overall hotkey speed
+  - For maximum speed (approximately 2 seconds faster), removing the rainbow controls is recommended
+- Fixed homepage functionality
+- Addressed multiple spelling errors and code-related issues
+- Fixed font and spacing issue on song art, and other large areas
+- Fixed multiple hovering issues
+- Fixed numbering on songs
+- Fixed the play/pause icon's uglyness
+- Fixed a bug with the new UI where SpotOn wouldn't work
+
+# TLDR:
+
+Fixed a lot, added a lot, Improved a lot, sleep now

Arc Boosts - SpotOn/SpotOn/SpotOn/css/popup/popup.css

@@ -0,0 +1,200 @@
+:root {
+  /* Global CSS variables */
+  --height: 300vh;
+  --width: 300vw;
+  --font: "Akronim-Regular", Arial, sans-serif;
+  --title-lh: 1.4rem;
+  --artist-lh: 1rem;
+  --bg-light: linear-gradient(
+    45deg,
+    rgb(255, 227, 186) 23%,
+    rgb(168, 214, 255) 100%
+  );
+  --bg-dark: linear-gradient(
+    45deg,
+    rgb(123, 123, 199) 0%,
+    rgb(115, 59, 93) 100%
+  );
+  --text-light: #ffffff;
+  --text-dark: #000000;
+  --text-gray: #f710a1;
+  --margin-top: 20px;
+  --margin: 0;
+  --album-art: url(https://user-images.githubusercontent.com/103985728/244696019-762563dd-30d9-4bc6-a46a-37b234c8983c.jpeg);
+  --bg-img: url(https://user-images.githubusercontent.com/103985728/244695468-5e39f1d4-e2f4-4f20-a80e-2d8f79f80747.jpg);
+}
+
+/* font face */
+@font-face {
+  font-family: "Akronim-Regular";
+  src: url("fonts/Akronim-Regular.ttf") format("truetype");
+}
+
+/* background */
+body {
+  font-family: var(--font);
+  margin: var(--margin);
+  background: var(--bg-dark);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* behind logo */
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: var(--margin-top);
+}
+
+.header a {
+  margin-right: 10px;
+}
+
+.logo {
+  height: 48px;
+}
+
+.donate {
+  font-size: 14px;
+  color: var(--text-dark);
+  margin-top: var(--margin-top);
+}
+
+#title {
+  color: var(--text-dark);
+  font-size: 24px;
+  line-height: var(--title-lh);
+  margin: var(--margin);
+}
+
+.h1 {
+  color: var(--text-dark);
+  font-size: 24px;
+  line-height: var(--title-lh);
+  margin: var(--margin);
+}
+
+/* behind options */
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: var(--margin-top);
+}
+
+.option {
+  position: relative;
+  display: flex;
+  align-items: center;
+  color: white;
+  margin-top: var(--margin-top);
+}
+
+.option.checkbox {
+  font-size: 16px;
+  color: var(--text-light);
+}
+
+.option.checkbox input[type="checkbox"] {
+  margin-right: 10px;
+}
+
+.option.coming {
+  font-size: 14px;
+  color: var(--text-light);
+}
+
+/* main inside container background */
+.popup-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 40px;
+  background-image: var(--bg-img) !important;
+  background-size: cover;
+  backdrop-filter: blur(30px) !important;
+  background-color: var(--bg-light);
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  width: 400px;
+}
+
+.popup-container h1 {
+  color: var(--text-dark);
+  font-size: 38px;
+  line-height: var(--title-lh);
+  margin: var(--margin);
+  margin-bottom: 20px;
+}
+
+/* SpotOn Links box */
+
+.mini-derivatives {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.mini-derivatives li {
+  margin-bottom: 10px;
+  border-radius: 20px;
+}
+
+.mini-derivatives a {
+  color: var(--text-dark);
+  text-decoration: none;
+  display: inline-block;
+  padding: 12px 24px;
+  border-radius: 5px;
+  background: var(--bg-dark);
+  margin: 5px;
+}
+
+.mini-derivatives a:hover {
+  background: var(--text-gray);
+}
+
+.options-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-top: 20px;
+  padding: 20px;
+  background: var(--bg-light);
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  width: 350px;
+}
+
+/* ↑ - this is for the box hosting SpotOn Links */
+
+.popup-container footer {
+  font-size: 14px;
+  color: var(--text-light);
+  margin-top: var(--margin-top);
+}
+
+.popup-container .report-issue {
+  font-size: 14px;
+  color: var(--text-dark);
+}
+
+.popup-container .report-issue a {
+  color: var(--text-light);
+  text-decoration: none;
+}
+
+.popup-container .report-issue a:hover {
+  text-decoration: underline;
+  color: var(--text-gray);
+}
+
+.popup-container .report-issue img {
+  height: 20px;
+}