Merge pull request reisxd#614 from git-Hmmm/main

Cosmetic Changes
inotia00 · Dec 19, 2022 · 9cae0c1 · 9cae0c1
2 parents cc536d1 + 5a5828a
commit 9cae0c1
Show file tree

Hide file tree

Showing 19 changed files with 268 additions and 96 deletions.
diff --git a/public/about/index.html b/public/about/index.html
@@ -15,7 +15,7 @@
     <div id="container">
       <main>
         <header>
-          <h1>About</h1>
+          <h1><i class="fa-solid fa-question-circle"></i>About</h1>
         </header>
         <div id="content--wrapper">
           <div id="content">

diff --git a/public/apps/index.html b/public/apps/index.html
@@ -15,14 +15,16 @@
     <div id="container">
       <main>
         <header>
-          <h1>Select the app you want to patch</h1>
+          <h1>
+            <i class="fa-solid fa-square-check"></i>Select the app to patch
+          </h1>
           <h2 class="prog"></h2>
           <form ref="uploadForm" id="uploadForm">
             <input id="apkUpload" type="file" name="apk" accept=".apk" hidden />
             <input type="submit" id="submitButton" hidden />
           </form>
           <button class="upl highlighted" onclick="apkField.click()">
-            <i class="gg-software-upload"></i>Upload APK
+            <i class="fa-solid fa-upload"></i>Upload APK
           </button>
           <button class="shw" onclick="oldState(this)">Back</button>
           <input

diff --git a/public/dependencies/index.html b/public/dependencies/index.html
@@ -15,7 +15,7 @@
     <div id="container">
       <main>
         <header>
-          <h1>Downloading dependencies</h1>
+          <h1><i class="fa-solid fa-download"></i>Downloading dependencies</h1>
           <span
             >Please wait while the app downloads the required
             dependencies.</span

diff --git a/public/devices/index.html b/public/devices/index.html
@@ -15,7 +15,10 @@
     <div id="container">
       <main>
         <header>
-          <h1>Select the device(s) you want to install ReVanced to</h1>
+          <h1>
+            <i class="fa-solid fa-tablet-screen-button"></i>Select the device(s)
+            you want to install ReVanced to
+          </h1>
           <span
             >ReVanced Builder has detected that you have more than one device
             plugged in.<br />Please select the device(s) that you want to

diff --git a/public/exited/index.html b/public/exited/index.html
@@ -13,7 +13,7 @@
     <div id="container">
       <main>
         <header>
-          <h1>Exited</h1>
+          <h1><i class="fa-solid fa-right-from-bracket"></i>Exited</h1>
           <span>You can now close this tab/window.</span>
         </header>
       </main>

diff --git a/public/failure/index.html b/public/failure/index.html
@@ -15,7 +15,7 @@
     <div id="container">
       <main>
         <header>
-          <h1>Failure</h1>
+          <h1><i class="fa-solid fa-circle-exclamation"></i>Failure</h1>
         </header>
         <div id="content--wrapper">
           <div id="content">

diff --git a/public/index.html b/public/index.html
@@ -16,18 +16,118 @@
       <main>
         <div id="content--wrapper">
           <div id="content">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 751 669">
+              <path
+                fill="#f2f2f2"
+                d="M86 669h-1a81 81 0 0 1-51-68h1l18 2-19-13c0-7 4-12 10-14s13-1 17 4l6 6c7 7 14 15 18 23 7 13 7 29 1 42v18Z"
+              />
+              <path
+                fill="var(--accentColor)"
+                d="M477 657c-1-19-5-38-11-56l1-6c1-5 6-8 12-7 5 1 11 0 16-3 3-2 7-2 10 0a11 11 0 0 1 6 7c1 20 4 38 11 56 0 4-1 8-3 10-2 3-6 4-9 4-6-1-12 0-18 3l-7 1c-4-2-8-5-8-9Z"
+              />
+              <path
+                fill="#f2f2f2"
+                d="M291 396v249h175V396a8 8 0 0 0-9-8H300c-5 0-9 4-9 8Zm68 86a19 19 0 0 1 38 0v29a19 19 0 0 1-38 0v-29Z"
+              />
+              <path
+                fill="#e6e6e6"
+                d="M291 637v24c0 3 2 5 5 5h165c3 0 5-2 5-5v-24H291ZM17 22v454c0 12 10 22 22 22h673c12 0 22-10 22-22V22c0-12-10-22-22-22H39C27 0 17 10 17 22Z"
+              />
+              <path
+                fill="var(--primaryColor)"
+                d="M706 16H45c-7 0-12 5-12 11v443c0 7 5 12 12 12h661c7 0 12-5 12-12V27c0-6-5-11-12-11ZM539 330c-1 4-5 7-10 7l-19-2 3 3c1 2 2 6 1 9v18c1 3 1 5-1 7-1 4-5 7-10 7-15-2-30-3-46-1v19c1 3 1 5-1 7-1 4-5 7-10 7-16-2-31-3-47-1l1 11c1 3 1 5-1 7-1 4-5 7-10 7-19-3-38-3-57 0l-5-2c-5-2-7-8-5-13l1-5c-17-2-34-2-52 1l-5-2c-5-2-7-8-5-13s2-11 0-16v-8c-13-1-26 0-39 2l-5-2c-5-2-7-8-5-13s2-11 0-16c-1-4-1-7 1-10a11 11 0 0 1 9-5l20 2c-4-3-6-8-4-13s2-11 0-16c-1-4-1-7 1-10l1-1-15 2-5-2c-5-2-7-8-5-13s2-11 0-16c-1-4-1-7 1-10a11 11 0 0 1 9-5l24 2c-2-3-2-7-1-10 2-5 2-11 0-16-1-4-1-7 1-10a11 11 0 0 1 9-5l21 2c-2-3-2-6-1-9 2-5 2-11 0-16-1-4-1-7 1-10a11 11 0 0 1 9-5l24 2v-8c2-5 2-11 0-16-1-4-1-7 1-10a11 11 0 0 1 9-5c19 3 38 3 57 0h4a164 164 0 0 0 58 0c3 0 6 2 8 5s3 6 1 10c-2 5-1 11 1 16l-1 8a165 165 0 0 0 25-2c3 0 6 2 8 5s3 6 1 10c-2 5-1 11 1 16 1 3 0 6-1 9a165 165 0 0 0 21-2c3 0 6 2 8 5s3 6 1 10c-2 5-1 11 1 16 1 3 0 7-2 10l3 3c1 2 2 6 1 9v18a11 11 0 0 1-2 10l14-2c4 0 7 2 10 5 1 2 2 6 1 9v18c1 3 1 5-1 7Z"
+              />
+              <path
+                fill="#e6e6e6"
+                d="M685 77H66a2 2 0 0 1 0-5h619a2 2 0 0 1 0 5Z"
+              />
+              <path
+                fill="var(--accentColor)"
+                d="M383 423c-19-3-38-3-57 0l-5-1c-5-3-7-9-5-14s2-11 0-16c-1-3-1-7 1-10a11 11 0 0 1 9-5c19 3 38 3 57 0 4 0 7 2 9 5 2 2 3 6 2 9-2 5-2 12 0 18 1 3 0 5-1 8-2 3-6 6-10 6Z"
+              />
+              <path
+                fill="#ffb8b8"
+                d="m441 325-16-13c-11 6-28 30-28 30l-40 29a9 9 0 1 0 8 12l54-28 22-30Z"
+              />
+              <path
+                fill="#3f3d56"
+                d="M466 277a21 21 0 0 1 0 32l-10 8s-24 34-36 38l-32 17-15-14 29-24s14-13 15-22c1-5 10-21 20-32 7-9 20-10 29-3Z"
+              />
+              <path fill="#ffb6b6" d="M435 652h-14l-6-53h20v53z" />
+              <path
+                fill="#2f2e41"
+                d="M436 666h-42v-1c0-9 7-16 16-16l8-6 14 6h4v17Z"
+              />
+              <path fill="#ffb6b6" d="m539 580-6 12-50-19 10-18 46 25z" />
+              <path
+                fill="#2f2e41"
+                d="m552 586-20 37h-1c-7-4-10-14-6-22l-2-10 12-10 2-3 15 8ZM409 411l-12 96 6 32 109 48 6-20c-28-17-58-42-76-44 0 0-2-17 11-28 3-2 3-5 4-8l4-5 1-7c0-2 3-2 3-3l1-8a1046 1046 0 0 0 15-42c-2-8-72-11-72-11Z"
+              />
+              <path
+                fill="#2f2e41"
+                d="m407 507-6 40 16 83h21c7-27 8-64 1-95l-32-28Z"
+              />
+              <path
+                fill="#3f3d56"
+                d="m421 293 9-17 11-8 19-3 6 4c19 30 27 66 20 101l-1 8-1 6v6l-3 9v7l1 3v9c1 3-2 2-2 5 1 4 4 11-1 11l-53-11c-13 0-26-16-13-29l8-101Z"
+              />
+              <circle cx="445.5" cy="234.1" r="25.7" fill="#ffb8b8" />
+              <path
+                fill="#2f2e41"
+                d="m446 259 11-1c4 0 12-6 14-10l4-10c2-8 0-17-5-24a9 9 0 0 0-5-3l-5-3-1-1-6-3c-4-1-9 0-15 2-4 2-7 1-10 1h-1l-4 2-3 3-1 1v-1l-1 1a8 8 0 0 0 4 13h5c4 1 7 4 8 8a3 3 0 0 0 5 1h4l2 1 2 2c2 1 2 7 1 12 0 5-2 8-4 8h-1v1h2Z"
+              />
+              <path
+                fill="var(--accentColor)"
+                d="M394 244c-19-3-38-3-57 0l-5-1c-5-3-7-9-5-14s2-11 0-16c-1-3-1-7 1-10a11 11 0 0 1 9-5c19 3 38 3 57 0 4 0 7 2 9 5 2 2 3 6 2 9-2 5-2 12 0 18 1 3 0 5-1 8-2 3-6 6-10 6Z"
+              />
+              <path
+                fill="#ffb8b8"
+                d="m418 305 11-17c-8-10-33-25-33-25l-33-36a9 9 0 1 0-12 10l35 50 32 18Z"
+              />
+              <path
+                fill="#3f3d56"
+                d="M468 324a21 21 0 0 1-32 4l-8-9s-38-19-43-31l-24-35 16-15 28 26s13 15 23 16c5 0 22 7 34 16 10 6 12 19 6 28Z"
+              />
+              <path
+                fill="var(--accentColor)"
+                d="M220 666c-19-3-38-3-56 0l-6-2c-5-2-7-8-5-13s2-11 0-16c-1-4 0-7 1-10a11 11 0 0 1 9-5c19 3 38 3 57 0 4 0 7 2 10 5 2 2 2 6 1 9v25c-2 4-6 7-11 7Z"
+              />
+              <path
+                fill="var(--accentColor)"
+                d="M236 624c-19-3-38-3-56 0l-6-2c-5-2-7-8-5-13s2-11 0-16c-1-4 0-7 1-10a11 11 0 0 1 9-5c19 3 38 3 57 0 4 0 7 2 10 5 2 2 2 6 1 9v25c-2 4-6 7-11 7Z"
+              />
+              <path
+                fill="var(--accentColor)"
+                d="M96 635c13-14 24-30 32-47 1-1 2-3 4-3 5-3 11-2 14 3 3 4 8 8 13 9 4 1 7 3 8 7a11 11 0 0 1-1 10c-13 14-24 30-32 47-2 3-5 5-9 5-3 0-6-1-8-4-4-4-9-7-16-10-2-1-4-2-5-5-2-3-2-8 0-12Z"
+              />
+              <path
+                fill="#cacaca"
+                d="M750 667 1 668a1 1 0 0 1 0-3h749a1 1 0 0 1 0 2Z"
+              />
+              <g fill="#3f3d56">
+                <ellipse cx="160.3" cy="45.3" rx="8.5" ry="8.6" />
+                <ellipse cx="189.5" cy="45.3" rx="8.5" ry="8.6" />
+                <ellipse cx="218.7" cy="45.3" rx="8.5" ry="8.6" />
+                <path
+                  d="M252 52h-1l-5-6v-1l5-6a1 1 0 0 1 2 1l-5 5 5 5a1 1 0 0 1-1 2Zm10 0h-1v-2l5-5-5-5a1 1 0 1 1 1-1l6 6v1l-6 6Zm298-14h-11l-2 2v10c0 2 1 3 2 3h11c1 0 2-1 2-3V40l-2-2Zm-26 0h-11l-2 2v10c0 2 1 3 2 3h11c1 0 2-1 2-3V40l-2-2Zm51 0h-11l-2 2v11l2 2h11l2-2V40l-2-2Zm-160 4h-85a3 3 0 1 0 0 5h85a3 3 0 0 0 0-5Z"
+                />
+              </g>
+            </svg>
             <h1>
-              Welcome to <span class="accent-fun">ReVanced </span>Builder!
+              <span
+                >Welcome to
+                <span class="accent-fun">ReVanced</span> Builder!</span
+              >
             </h1>
             <p style="font-family: 'Roboto', sans-serif">
               A simple tool to patch ReVanced supported applications
             </p>
             <button
               class="highlighted"
-              id="continue"
+              id="go"
               onclick="window.location = '/dependencies/'"
             >
-              Start Patching ➜
+              Start Patching<i class="fa-solid fa-arrow-right"></i>
             </button>
             <div class="status">
               <table>

diff --git a/public/index.js b/public/index.js
@@ -147,7 +147,7 @@ function setAppVersion(arch, version) {
     });
 
     document.getElementsByTagName('header')[0].innerHTML =
-      '<h1>Downloading APK...</h1>';
+      '<h1><i class="fa-solid fa-download"></i>Downloading APK</h1>';
     document.getElementById('content').innerHTML = '<span class="log"></span>';
     document.getElementsByTagName('main')[0].innerHTML +=
       '<progress value="0"></progress>';
@@ -164,7 +164,7 @@ function setAppVersion(arch, version) {
  */
 function getAppVersions(isRooted) {
   document.getElementsByTagName('header')[0].innerHTML = `
-    <h1>Select the version you want to download</h1>
+    <h1><i class="fa-solid fa-file-arrow-down"></i>Select the version you want to download</h1>
     <span>Versions marked as beta might have bugs or can be unstable, unless marked as recommended<span>
     ${
       isRooted
@@ -381,7 +381,7 @@ ws.onmessage = (msg) => {
             ).value;
 
             document.getElementsByTagName('header')[0].innerHTML = `
-          <h1>Please select the architecture</h1>
+          <h1><i class="fa-solid fa-rectangle-list"></i>Please select the architecture</h1>
           <span>YouTube Music APKs only have specific architecture APKs.
           <br>If you don't know which one to choose, either look at your devices architecture using CPU-Z or select Arm64.</span>`;
             document.getElementById('versions').innerHTML = `
@@ -424,7 +424,7 @@ ws.onmessage = (msg) => {
       {
         // TODO: on a root install, if the file already exists and the user selects yes it skips checking if a device is plugged in
         document.getElementsByTagName('header')[0].innerHTML = `
-            <h1>Use already downloaded APK?</h1>
+            <h1><i class="fa-solid fa-file-arrow-down"></i>Use already downloaded APK?</h1>
             <span>The APK already exists in the revanced folder.${
               message.isRooted ? ' ' : '<br>'
             }Do you want to use it?${
@@ -451,7 +451,7 @@ ws.onmessage = (msg) => {
       {
         if (message.install) location.href = '/installer';
         document.getElementsByTagName('header')[0].innerHTML =
-          '<h1>Finished.</h1>';
+          '<h1><i class="fa-solid fa-square-check"></i>Finished</h1>';
 
         const firstFooterElement = document.getElementsByTagName('footer')[0];
 

diff --git a/public/installer/index.html b/public/installer/index.html
@@ -15,7 +15,7 @@
     <div id="container">
       <main>
         <header>
-          <h1>Installing...</h1>
+          <h1><i class="fa-solid fa-spinner fa-spin"></i>Installing</h1>
         </header>
         <div id="content--wrapper">
           <div id="content">

diff --git a/public/patch/index.html b/public/patch/index.html
@@ -15,7 +15,7 @@
     <div id="container">
       <main>
         <header>
-          <h1>Patching...</h1>
+          <h1><i class="fa-solid fa-spinner fa-spin"></i>Patching</h1>
         </header>
         <div id="content--wrapper">
           <div id="content">

diff --git a/public/patches/index.html b/public/patches/index.html
@@ -15,7 +15,9 @@
     <div id="container">
       <main>
         <header>
-          <h1>Select patches to include</h1>
+          <h1>
+            <i class="fa-solid fa-rectangle-list"></i>Select patches to include
+          </h1>
           <span class="left"></span>
           <div>
             <button onclick="toggle(true)">Select All</button>

diff --git a/public/settings.js b/public/settings.js
@@ -1,4 +1,5 @@
 const accentColors = document.querySelectorAll('#themecolor-picker span');
+const dElement = document.documentElement;
 if (localStorage.getItem('auto-next')) {
   document.getElementById('autoBtn').checked = true;
 }
@@ -7,11 +8,17 @@ if (localStorage.getItem('black-theme')) {
 }
 
 accentColors.forEach((color) => {
+  if (
+    dElement.style.getPropertyValue('--accentColor') ==
+    color.style.getPropertyValue('background-color')
+  ) {
+    color.classList.add('active');
+  }
   color.addEventListener('click', () => {
     accentColors.forEach((el) => el.classList.remove('active'));
     color.classList.add('active');
     const colorNow1 = color.style.getPropertyValue('background-color');
-    document.documentElement.style.setProperty('--accentColor', colorNow1);
+    dElement.style.setProperty('--accentColor', colorNow1);
     localStorage.setItem('theme', colorNow1);
   });
 });
@@ -26,9 +33,9 @@ document.getElementById('autoBtn').addEventListener('click', function () {
 document.getElementById('blackBtn').addEventListener('click', function () {
   if (localStorage.getItem('black-theme')) {
     localStorage.removeItem('black-theme');
-    document.documentElement.classList.remove('black');
+    dElement.classList.remove('black');
   } else {
     localStorage.setItem('black-theme', true);
-    document.documentElement.classList.add('black');
+    dElement.classList.add('black');
   }
 });
diff --git a/public/settings/index.html b/public/settings/index.html
@@ -16,15 +16,16 @@
     <div id="container">
       <main>
         <header>
-          <h1>Settings</h1>
+          <h1><i aria-hidden="true" class="fa-solid fa-gear"></i>Settings</h1>
         </header>
         <div id="content--wrapper">
           <div id="content">
             <div class="option">
-              <div class="opt">
-                <i class="social-icon fa-xl fa-solid fa-palette"></i>
-                <h3>Accent Color:</h3>
-              </div>
+              <h3><i class="fa-solid fa-brush"></i>Accent Color</h3>
+              <p>
+                Customize the Accent color of the builder. Use the palette
+                option to use a custom color.
+              </p>
               <div id="themecolor-picker">
                 <span
                   style="background: #4873b3 none repeat scroll 0% 0%"
@@ -52,32 +53,37 @@ <h3>Accent Color:</h3>
             </div>
 
             <div class="option">
-              <h3>Automatically proceed to next page</h3>
-
+              <h3>
+                <i class="fa-solid fa-circle-half-stroke"></i>Pure Black Theme
+              </h3>
               <p>
-                This helps save time by proceeding automatically to the next
-                page on downloading pages. <br />Caution: It may break your back
-                button.
+                The pure black theme uses a black background and helps reduce
+                battery usage on AMOLED devices or maybe you can just turn it on
+                when the dark theme is not enough.
               </p>
               <label class="switch"
                 ><input
                   class="check"
-                  id="autoBtn"
+                  id="blackBtn"
                   type="checkbox"
                   autocomplete="off" /><span class="slider"></span
               ></label>
             </div>
             <div class="option">
-              <h3>Pure Black Theme</h3>
+              <h3>
+                <i class="fa-solid fa-circle-chevron-right"></i>Automatically
+                proceed to next page
+              </h3>
+
               <p>
-                The pure black theme uses a black background and helps reduce
-                battery usage on AMOLED devices or maybe you can just turn it on
-                when the dark theme is not enough.
+                This helps save time by proceeding automatically to the next
+                page on downloading pages. <br />Caution: It may break your back
+                button.
               </p>
               <label class="switch"
                 ><input
                   class="check"
-                  id="blackBtn"
+                  id="autoBtn"
                   type="checkbox"
                   autocomplete="off" /><span class="slider"></span
               ></label>