Minor Image fixes

Author: TheAndreiM

favicon.png

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>JukaGUI Generator</title>
+    <link data-rh="true" rel="icon" href="/favicon.png">
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap">
 </head>
@@ -56,9 +57,9 @@ <h1>JukaGUI Generator</h1>
                 <option value="custom">Custom</option>
             </select>
             <div id="customSizeFields" style="display: none; margin-left: 10px;">
-                <input type="number" id="customWidth" placeholder="Width" min="1" style="width: 70px;">
+                <input type="number" id="customWidth" placeholder="Width" min="1" style="width: 100px;">
                 <span>x</span>
-                <input type="number" id="customHeight" placeholder="Height" min="1" style="width: 70px;">
+                <input type="number" id="customHeight" placeholder="Height" min="1" style="width: 100px;">
             </div>
             <label for="backgroundFile">&nbsp;&nbsp;&nbsp;Change Background:</label>
             <input type="file" id="backgroundFile" accept="image/*">

index.html

@@ -115,8 +115,13 @@ function addScene() {
     sceneSelector.value = newSceneName;
     updateSceneChangeSelector();
     changeScene();
+    
+    // Add menu to new scene
+    const canvasHeight = canvas.offsetHeight;
+    addElement('menu', 0, canvasHeight - 50);
+    
     document.querySelectorAll('.menu').forEach(menuEl => {
-       updateMenuSceneButtons(menuEl);
+        updateMenuSceneButtons(menuEl);
     });
 }
 
@@ -252,6 +257,12 @@ document.addEventListener('DOMContentLoaded', () => {
     option.textContent = 'Scene 1';
     sceneSelector.appendChild(option);
     sceneSelector.value = 'Scene 1';
+
+    // Add menu to initial scene
+    setTimeout(() => { // Wait for canvas size to update
+        const canvasHeight = canvas.offsetHeight;
+        addElement('menu', 0, canvasHeight - 50);
+    }, 0);
 });
 
 function setupToolbar() {
@@ -471,6 +482,9 @@ function setupElementEvents(el) {
                 if (newX + elRect.width > canvasRect.width) newX = canvasRect.width - elRect.width;
                 if (newY + elRect.height > canvasRect.height) newY = canvasRect.height - elRect.height;
 
+                newX = parseInt(newX)
+                newY = parseInt(newY)
+
                 el.style.left = `${newX}px`;
                 el.style.top = `${newY}px`;
                 el.setAttribute('data-x', newX);
@@ -630,11 +644,6 @@ function setupElementEvents(el) {
             }
         }
         } else {
-            //document.querySelector('.control-label[for="datax"]').style.display = 'none';
-            //datax.style.display = 'none';
-            //document.querySelector('.control-label[for="datay"]').style.display = 'none';
-            //datay.style.display = 'none';
-
             document.querySelector('.control-label[for="colorPicker"]').style.display = 'none';
             colorPicker.style.display = 'none';
             document.querySelector('.control-label[for="fontSizePicker"]').style.display = 'none';
@@ -724,8 +733,8 @@ function addElement(type, x, y) {
   }
 
   el.setAttribute('data-type', type);
-  el.setAttribute('data-x', x);
-  el.setAttribute('data-y', y);
+  el.setAttribute('data-x', x | 0);
+  el.setAttribute('data-y', y | 0);
 
   if (type !== 'menu') {
     el.setAttribute('data-color', '#000000'); // Default text color

script.js

@@ -97,7 +97,7 @@
   .element[data-type="menu"] {
     width: 100%;
     background: rgba(32, 32, 32, 0.8);
-    border-top: 1px solid #555;
+    border-top: 1px solid #555555;
   }
 
   .element[data-type="input"] {
@@ -106,12 +106,20 @@
     cursor: text;
     color: #666;
   }
-  
-  .element[data-type="image"] {
+
+  .element[data-type="label"] {
     background: linear-gradient(135deg, #e0e0e0 25%, #f5f5f5 25%, #f5f5f5 50%, #e0e0e0 50%, #e0e0e0 75%, #f5f5f5 75%, #f5f5f5 100%);
     background-size: 20px 20px;
   }
 
+  .element[data-type="image"] {
+    background-image: url("favicon.png");
+    background-repeat: no-repeat;
+    background-color: #333447;
+    min-width:150px;
+    color:rgb(255, 255, 255);
+  }
+  
   .remove-button {
     position: absolute;
     top: -12px;
@@ -145,11 +153,11 @@
   }
 
   .canvas::before {
-    content: "Screen";
+    content: "Screen:";
     position: absolute;
-    top: 10px;
-    left: 10px;
-    color: gray;
+    top: -28px;
+    left: 5px;
+    color: rgb(60, 60, 60);
     font-size: 1.2rem;
     pointer-events: none;
   }