Update index.html

index.html

@@ -8,12 +8,10 @@
     <meta name="author" content="SenY">
     <meta name="generator" content="vscode">
     <title>Galgame UI Editor</title>
-    <link rel="canonical" href="https://getbootstrap.jp/docs/5.0/examples/sticky-footer-navbar/">
-    <!-- Bootstrap core CSS -->
+    <link rel="canonical" href="https://huggingface.co/spaces/SenY/GalGameUI">
     <link href="https://unpkg.com/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://unpkg.com/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet">
-    <!-- Favicons -->
     <meta name="theme-color" content="#7952b3">
     <style>
         .wf-notosansjapanese {
@@ -111,6 +109,13 @@
             height: 100%;
         }
 
+        #right {
+            padding-left: 0;
+            padding-right: 0;
+            padding-top: 0;
+            padding-bottom: 0;
+        }
+
         #left * {
             text-align: center;
             font-weight: 900;
@@ -194,7 +199,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div id="right" class="col-9 p-0 m-0">
+                                <div id="right" class="col-9 m-0">
                                     <div class="h-100 p-0" id="rightTexts">
                                         <div class="row2 row2-25">
                                             <input name="text1" class="text-light" value="(1st Line)">
@@ -233,7 +238,7 @@
                     <div class="input-group">
                         <button id="render" type="button" class="btn btn-success">Render</button>
                     </div>
-                    <h6>Image Settings</h6>
+                    <h6>Image</h6>
                     <div class="input-group">
                         <label for="upload">
                             <button id="uploadButton" type="button" class="btn btn-primary">Set Image</button>
@@ -248,7 +253,7 @@
                             <button id="faceRemoveButton" type="button" class="btn btn-danger">Remove Icon</button>
                         </label>
                     </div>
-                    <h6>Message Window</h6>
+                    <h6>Window Color</h6>
                     <div class="input-group">
                         <span class="input-group-text">TopColor</span>
                         <input name="topColor" type="color" class="form-control form-control-color" id="topColor"
@@ -293,6 +298,9 @@
                         <span class="input-group-text">WindowSize</span>
                         <input name="windowSize" type="range" class="form-control form-range" id="windowSize" value="25"
                             step="1" min="16" max="30">
+                        <span class="input-group-text">Padding</span>
+                        <input name="mainMessagePaddingSize" type="range" class="form-control form-range" id="mainMessagePaddingSize" value="0"
+                            step="0.1" min="0" max="2">
                     </div>
                     <div class="input-group">
                         <span class="input-group-text">Render Scale</span>
@@ -337,6 +345,9 @@
             }
             document.getElementById("edit").style.width = width + 'px';
             document.getElementById("edit").style.height = height + 'px';
+            document.getElementById("right").style.paddingTop = document.getElementById("mainMessagePaddingSize").value + 'rem';
+            document.getElementById("right").style.paddingBottom = document.getElementById("mainMessagePaddingSize").value + 'rem';
+            
             document.querySelectorAll("#right input, #left input").forEach(el => {
                 el.style.fontSize = (el.parentNode.offsetHeight * document.querySelector("#fontSizeInput").value) + "px";
             });