Redesign UI and add HTML partials

Author: leviarista

index.html

@@ -14,14 +14,14 @@
         <load src="partials/toolbox/result.html" />
 
         <div class="tab">
-            <button class="tablinks" data-name="presets-section" id="defaultOpenTag">Presets</button>
+            <!-- <button class="tablinks" data-name="presets-section" id="defaultOpenTag">Presets</button> -->
             <button class="tablinks" data-name="main-section" id="defaultOpenTag">Main</button>
             <button class="tablinks" data-name="background-section">Background</button>
             <button class="tablinks" data-name="decorations-section">Decorations</button>
         </div>
 
         <div class="toolbox-tools scrollable">
-            <load src="partials/toolbox/presets.html" />
+            <!-- <load src="partials/toolbox/presets.html" /> -->
             <load src="partials/toolbox/main.html" />
             <load src="partials/toolbox/background.html" />
             <load src="partials/toolbox/decorations.html" />

package-lock.json

@@ -21,7 +21,6 @@
   "devDependencies": {
     "sass": "^1.89.2",
     "vite": "^7.0.3",
-    "vite-plugin-handlebars": "^1.5.0",
     "vite-plugin-html-inject": "^1.1.2"
   },
   "dependencies": {

package.json

@@ -1,4 +1,11 @@
 <div class="result-box">
+    <div class="header-image-container">
+        <div id="github-header-image">
+            <div class="title" style="font-size: 40px;">Hey! I am ...</div>
+            <div class="subtitle" style="font-size: 20px; font-family: 'Kalam';">Fullstack developer </div>
+            <div class="img-decoration-container"></div>
+        </div>
+    </div>
     <div class="options-container">
         <div>
             <div role="button" class="dark-mode-button">
@@ -16,11 +23,4 @@
         </div>
         <!-- <button type="button" class="log-theme-button" style="background-color: blueviolet;">Log Theme</button> -->
     </div>
-    <div class="header-image-container">
-        <div id="github-header-image">
-            <div class="title" style="font-size: 40px;">Hey! I am ...</div>
-            <div class="subtitle" style="font-size: 20px; font-family: 'Kalam';">Fullstack developer </div>
-            <div class="img-decoration-container"></div>
-        </div>
-    </div>
 </div>

partials/toolbox/result.html

@@ -1,7 +1,7 @@
 .toolbox-container {
     .result-box {
         // height: 300px;
-        padding: 1rem 2rem 2rem 2rem;
+        padding: 2rem 2rem 0.5rem 2rem;
         background: var(--github-dark-mode-color);
         transition: 0.5s ease;
         user-select: none;
@@ -67,7 +67,7 @@
             gap: 35px;
             justify-content: space-between;
             // flex-wrap: wrap;
-            padding: 5px 0;
+            padding: 0.5rem 0 0 0;
 
             >div:first-child {
                 display: flex;
@@ -233,7 +233,7 @@
         }
 
         .result-box {
-            padding: 1rem 1rem 1.5rem 1rem;
+            padding: 1rem 1rem 0.5rem 1rem;
 
             #github-header-image {
                 height: 250px;

styles/toolbox-main.scss

@@ -1,7 +1,5 @@
 import { defineConfig } from 'vite';
 import injectHTML from 'vite-plugin-html-inject';
-import handlebars from 'vite-plugin-handlebars';
-import { resolve } from 'path';
 
 export default defineConfig({
     build: {