add ui elements for free version

mafiosnik777 · Apr 24, 2023 · be670e6 · be670e6
1 parent 944af83
commit be670e6
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 2 deletions.
diff --git a/src/app.html b/src/app.html
@@ -47,6 +47,7 @@
             id="queue-badge">0</span></div>
         <i id="enhancr-user" class="fa-solid fa-circle-user"></i>
         <img src="" id="patreon-user-img">
+        <span id="pro-badge-user"><i class="fa-solid fa-crown" style="color: orange;"></i></span>
       </div>
     </div>
     <!-- Side bar -->
@@ -127,10 +128,14 @@
     <div id="engine-dropdown">
       <div class="option" id="cain">Channel Attention - CAIN (NCNN)</div>
       <div class="option" id="cain-trt">Channel Attention - CAIN (TensorRT)</div>
+      <span id="pro-badge-cain" class="pro-badge">PRO <i class="fa-solid fa-crown" style="color: orange;"></i></span>
       <div class="option" id="rife">Optical Flow - RIFE (NCNN)</div>
       <div class="option" id="rife-trt">Optical Flow - RIFE (TensorRT)</div>
+      <span id="pro-badge-rife" class="pro-badge">PRO <i class="fa-solid fa-crown" style="color: orange;"></i></span>
       <div class="option" id="gmfss">GMFlow - GMFSS (PyTorch)</div>
+      <span id="pro-badge-gmfss" class="pro-badge">PRO <i class="fa-solid fa-crown" style="color: orange;"></i></span>
       <div class="option" id="gmfss-trt">GMFlow - GMFSS (TensorRT)</div>
+      <span id="pro-badge-gmfss-trt" class="pro-badge">PRO <i class="fa-solid fa-crown" style="color: orange;"></i></span>
     </div>
     <div id="model-dropdown">
       <div class="option" id="rife-23">RIFE - v2.3</div>
@@ -194,11 +199,15 @@
         </div>
         <div id="engine-dropdown-upscale">
           <div class="option" id="shufflecugan-ncnn">Upscaling - ShuffleCUGAN (NCNN)</div>
+          <span id="pro-badge-shufflecugan" class="pro-badge">PRO <i class="fa-solid fa-crown" style="color: orange;"></i></span>
           <div class="option" id="shufflecugan">Upscaling - ShuffleCUGAN (TensorRT)</div>
           <div class="option" id="realesrgan-ncnn">Upscaling - RealESRGAN (NCNN)</div>
           <div class="option" id="realesrgan-tensorrt">Upscaling - RealESRGAN (TensorRT)</div>
+          <span id="pro-badge-esrgan" class="pro-badge">PRO <i class="fa-solid fa-crown" style="color: orange;"></i></span>
           <div class="option" id="realcugan-tensorrt">Upscaling - RealCUGAN (TensorRT)</div>
+          <span id="pro-badge-cugan" class="pro-badge">PRO <i class="fa-solid fa-crown" style="color: orange;"></i></span>
           <div class="option" id="swinir">Upscaling - SwinIR (PyTorch)</div>
+          <span id="pro-badge-swinir" class="pro-badge">PRO <i class="fa-solid fa-crown" style="color: orange;"></i></span>
         </div>
         <div id="factor-dropdown">
           <div class="option" id="factor2">2x</div>
@@ -272,8 +281,10 @@
     </div>
     <div id="engine-dropdown-restoration">
       <div class="option" id="dpir">Restoration - DPIR (TensorRT)</div>
+      <span id="pro-badge-dpir" class="pro-badge">PRO <i class="fa-solid fa-crown" style="color: orange;"></i></span>
       <div class="option" id="anime-video-ncnn">Restoration - RealESRGAN (1x) (NCNN)</div>
       <div class="option" id="anime-video">Restoration - RealESRGAN (1x) (TensorRT)</div>
+      <span id="pro-badge-animevideo" class="pro-badge">PRO <i class="fa-solid fa-crown" style="color: orange;"></i></span>
     </div>
     <div id="model-dropdown-restoration">
       <div class="option" id="denoise">Denoise</div>
@@ -359,7 +370,7 @@
                 high-resolution media</span></i></span></li>
       </ul>
       <ul style="list-style-type:none;" id="interpolation-settings-list" class="animate__animated animate__fadeIn">
-        <div id="interpolation-settings-side">Inference</div>
+        <div id="interpolation-settings-side">Options</div>
         <li><input type="checkbox" id="sc-check" /><span> Enable Scene Detection <i id="preview-question"
               class="fa-solid fa-circle-question"><span class="tooltip-text" id="sc-question">Skips inference on
                 scene change frames to mitigate artifacts (Interpolation only)

diff --git a/src/app.js b/src/app.js
@@ -26,7 +26,7 @@ const createDirs = [
 ];
 
 const devMode = !app.isPackaged;
-const pro = true;
+const pro = false;
 
 const appDataPath = path.resolve(appDataPaths[process.platform], '.enhancr');
 const settingsPath = path.resolve(appDataPath, 'settings.json');

diff --git a/src/js/ui.js b/src/js/ui.js
@@ -2361,15 +2361,27 @@ if (localStorage.getItem('pro') == 'false') {
     console.log('Adjusting UI for lite version..')
 
     document.getElementById('cain-trt').style.color = '#4f4f4f';
+    document.getElementById('cain-trt').style.pointerEvents = 'none';
     document.getElementById('rife-trt').style.color = '#4f4f4f';
+    document.getElementById('rife-trt').style.pointerEvents = 'none';
     document.getElementById('gmfss').style.color = '#4f4f4f';
+    document.getElementById('gmfss').style.pointerEvents = 'none';
     document.getElementById('gmfss-trt').style.color = '#4f4f4f';
+    document.getElementById('gmfss-trt').style.pointerEvents = 'none';
 
     document.getElementById('shufflecugan').style.color = '#4f4f4f';
+    document.getElementById('shufflecugan').style.pointerEvents = 'none';
     document.getElementById('realesrgan-tensorrt').style.color = '#4f4f4f';
+    document.getElementById('realesrgan-tensorrt').style.pointerEvents = 'none';
     document.getElementById('realcugan-tensorrt').style.color = '#4f4f4f';
+    document.getElementById('realcugan-tensorrt').style.pointerEvents = 'none';
     document.getElementById('swinir').style.color = '#4f4f4f';
+    document.getElementById('swinir').style.pointerEvents = 'none';
 
     document.getElementById('dpir').style.color = '#4f4f4f';
+    document.getElementById('dpir').style.pointerEvents = 'none';
     document.getElementById('anime-video').style.color = '#4f4f4f';
+    document.getElementById('anime-video').style.pointerEvents = 'none';
+
+    document.getElementById('pro-badge-user').style.visibility = 'hidden';
 }
diff --git a/src/scss/app.scss b/src/scss/app.scss
@@ -100,6 +100,61 @@ body {
   background-color: #1c73d333;
 }
 
+.pro-badge {
+  font-weight: 600;
+  position: absolute;
+  right: 2%;
+}
+
+#pro-badge-cain {
+    top: 20%;
+}
+
+#pro-badge-rife {
+  top: 52%;
+}
+
+#pro-badge-gmfss {
+  top: 69%;
+}
+
+#pro-badge-gmfss-trt {
+  top: 85%;
+}
+
+#pro-badge-shufflecugan {
+  top: 21%;
+}
+
+#pro-badge-esrgan {
+  top: 52%;
+}
+
+#pro-badge-cugan {
+  top: 68%;
+}
+
+#pro-badge-swinir {
+  top: 84%;
+}
+
+#pro-badge-dpir {
+  top: 8%;
+}
+
+#pro-badge-animevideo {
+  top: 70%;
+}
+
+#pro-badge-user {
+  font-size: 5pt;
+  font-weight: 500;
+  right: 1%;
+  position: absolute;
+  z-index: 69;
+  top: 57%;
+}
+
 .theme-side {
   &:hover {
     color: var(--side-hover) !important;