updates

README.md

@@ -1 +1,36 @@
-# GUI Maker
+
+
+![Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/th5xamgrr6se0x5ro4g6.png)
+
+
+# Pack GUI Maker
+
+Pack GUI Maker is a web-based tool designed to simplify the creation of custom GUI's for pack release videos. With no installation required, both mobile and desktop users can quickly and effortlessly create GUIs, streamlining the workflow for thumbnail creators.
+
+### Usage
+
+To use this tool, follow these steps:
+
+1. **Visit the Website**: Navigate to our website where the tool is hosted.
+2. **Select Version**: Choose the version of Minecraft you're working with—either **Bedrock** or **Java**.
+3. **Set Upscale Factor**: Use the **Upscale Factor Slider** to adjust the upscale factor according to your preference.
+4. **Choose XP Position**: Adjust the **XP Position Slider** to set the desired position for the XP.
+5. **Upload Your Pack**: Click the **Upload** button to upload the resource pack you want to process.
+6. **Download Results**: Once the processing is complete, download the processed pack with your desired settings.
+
+
+
+## Acknowledgements
+
+ - [ewye's Manual Tutorial](https://www.youtube.com/watch?v=6xhJ5hPxSE8)
+ - [Jezler's Original Python Software](https://github.com/oJezler-git/gui_maker)
+
+
+## Authors
+
+- [@notcacti](https://github.com/notcacti)
+
+## Contributers
+
+- [@oJezler-Git](https://github.com/oJezler-git)
+

wwwroot/index.html

@@ -28,25 +28,25 @@ <h1 id="title">Create GUI</h1>
     <div class="slider-container">
         <label for="upscale-slider">Upscale Multiplier</label>
         <div class="inputs">
-            <input
-                    type="range"
-                    id="upscale-slider"
-                    min="1"
-                    max="10"
-                    value="1"
-                    step="1"
-                    oninput="updateUpscaleValue(this.value)"
-            />
+            <div class="slider-wrapper">
+                <input
+                        type="range"
+                        id="upscale-slider"
+                        min="1"
+                        max="10"
+                        value="1"
+                        step="0.1"
+                />
+            </div>
             <input
                     type="number"
                     id="upscale-input"
                     min="1"
                     max="10"
                     value="1"
-                    step="1"
-                    oninput="updateSliderValue(this.value)"
+                    step="0.1"
             />
-            <span>x</span>
+            <span class="unit">x</span>
         </div>
 
         <label for="xp-slider">XP Bar Filled %</label>

wwwroot/script.js

@@ -60,3 +60,38 @@ document.getElementById('file-upload-button').addEventListener('click', function
     document.getElementById('file-upload').click();
 });
 
+
+
+// UPSCALE MULTIPLIER SMOOTH
+const upscaleSlider = document.getElementById('upscale-slider');
+const upscaleInput = document.getElementById('upscale-input');
+
+// slider bg
+function updateSliderBackground(value) {
+    const percentage = ((value - upscaleSlider.min) / (upscaleSlider.max - upscaleSlider.min)) * 100;
+    upscaleSlider.style.background = `linear-gradient(to right, #ffffff ${percentage}%, rgba(255, 255, 255, 0.2) ${percentage}%)`;
+}
+
+// slider event listeners
+upscaleSlider.addEventListener('input', () => {
+    let value = Math.round(upscaleSlider.value);
+    upscaleInput.value = value;
+    updateSliderBackground(value);
+});
+
+// input event listeners
+upscaleInput.addEventListener('input', () => {
+    let value = Math.round(upscaleInput.value);
+
+    // keep value within range
+    if (isNaN(value)) value = upscaleSlider.min;
+    if (value < upscaleSlider.min) value = upscaleSlider.min;
+    if (value > upscaleSlider.max) value = upscaleSlider.max;
+
+    upscaleInput.value = value;
+    upscaleSlider.value = value;
+    updateSliderBackground(value);
+});
+
+updateSliderBackground(upscaleSlider.value);
+

wwwroot/styles.css

@@ -262,11 +262,20 @@ body {
     -webkit-appearance: none;
     appearance: none;
     width: 100%;
-    background: linear-gradient(to right, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
-    border-radius: 10px;
     height: 12px;
+    border-radius: 10px;
+    background: linear-gradient(to right, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
     outline: none;
     margin: 0;
+    transition: background 0.3s ease;
+}
+
+#upscale-slider::-webkit-slider-runnable-track,
+#xp-slider::-webkit-slider-runnable-track {
+    height: 12px;
+    border-radius: 10px;
+    background: linear-gradient(to right, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
+    position: relative;
 }
 
 #upscale-slider::-webkit-slider-thumb,
@@ -280,6 +289,8 @@ body {
     cursor: pointer;
     box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
     transition: background 0.3s ease, transform 0.2s ease;
+    position: relative;
+    z-index: 2;
 }
 
 #upscale-slider::-webkit-slider-thumb:hover,
@@ -297,6 +308,8 @@ body {
     cursor: pointer;
     box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
     transition: background 0.3s ease, transform 0.2s ease;
+    position: relative;
+    z-index: 2;
 }
 
 #upscale-slider::-moz-range-track,
@@ -306,6 +319,18 @@ body {
     background: linear-gradient(to right, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
 }
 
+#upscale-slider::-webkit-slider-runnable-track,
+#xp-slider::-webkit-slider-runnable-track {
+    background: linear-gradient(to right, #ffffff 0%, #ffffff 0%, rgba(255, 255, 255, 0.1) 0%);
+}
+
+#upscale-slider::-moz-range-progress,
+#xp-slider::-moz-range-progress {
+    background: linear-gradient(to right, #ffffff 0%, #ffffff 100%);
+    border-radius: 10px;
+    height: 12px;
+}
+
 #upscale-input,
 #xp-input {
     width: 80px;