Update index.html

index.html

@@ -48,15 +48,16 @@
             background-repeat: no-repeat;
             background-position: center bottom;
             background-size: contain;
+            position: relative;
         }
 
         #edit {
-            /*background: url('ClipBoard.png');*/
             background-repeat: no-repeat;
             background-size: contain;
         }
 
         input {
+            padding: 0 1rem;
             background: rgba(0, 0, 0, 0);
             border: rgba(0, 0, 0, 0) solid 1px;
             width: 100%;
@@ -68,6 +69,7 @@
         }
 
         .shadow-text {
+            padding: 0 1rem;
             display: flex;
             align-items: center;
             z-index: 3;
@@ -76,19 +78,7 @@
         #edit .row2 {
             display: flex;
             align-items: stretch;
-            padding-left: 0.75rem;
-        }
-
-        .row2-20 {
-            height: 20%;
-        }
 
-        .row2-25 {
-            height: 25%;
-        }
-
-        .row2-33 {
-            height: 33.3333%;
         }
 
         :root {
@@ -133,7 +123,6 @@
             font-size: calc(clamp(100%, 1vh, 5vh))
         }
 
-
         #left,
         #right {
             height: 100%;
@@ -217,44 +206,12 @@
                     <div id="messageWindow" class="row">
                         <div class="col-12 p-0 m-0 h-100">
                             <div id="mainMassage" class="row">
-                                <div id="left" class="col-3 p-0 m-0" style="height:133%;position:relative;top:-33%;">
-                                    <div class="p-0" style="height:100%">
-                                        <div class="row2 row2-25">
-                                            <input name="name1" class="text-light" value="">
-                                            <div class="shadow-text d-none text-light"></div>
-                                        </div>
-                                        <div class="row2 row2-25">
-                                            <input name="name2" class="text-light" value="">
-                                            <div class="shadow-text d-none text-light"></div>
-                                        </div>
-                                        <div class="row2 row2-25">
-                                            <input name="name3" class="text-light" value="Name">
-                                            <div class="shadow-text d-none text-light"></div>
-                                        </div>
-                                        <div class="row2 row2-25">
-                                            <input name="name4" class="text-light" value="">
-                                            <div class="shadow-text d-none text-light"></div>
-                                        </div>
+                                <div id="left" class="col-3 p-0 m-0">
+                                    <div class="p-0" style="height:100%" id="leftTexts">
                                     </div>
                                 </div>
                                 <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)">
-                                            <div class="shadow-text d-none text-light"></div>
-                                        </div>
-                                        <div class="row2 row2-25">
-                                            <input name="text2" class="text-light" value="(2nd Line)">
-                                            <div class="shadow-text d-none text-light"></div>
-                                        </div>
-                                        <div class="row2 row2-25">
-                                            <input name="text3" class="text-light" value="(3rd Line)">
-                                            <div class="shadow-text d-none text-light"></div>
-                                        </div>
-                                        <div class="row2 row2-25">
-                                            <input name="text4" class="text-light" value="(4th Line)">
-                                            <div class="shadow-text d-none text-light"></div>
-                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -377,11 +334,19 @@
                         <div class="input-group">
                             <span class="input-group-text bg-secondary text-light">WindowSize</span>
                             <input name="windowSize" type="range" class="form-control form-range" id="windowSize"
-                                value="25" step="1" min="16" max="30">
+                                value="25" step="1" min="10" max="100">
                             <span class="input-group-text bg-secondary text-light">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 bg-secondary text-light">leftLines</span>
+                            <input name="leftLineLength" type="number" class="form-control form-number"
+                                id="leftLineLength" value="4" step="1" min="1">
+                            <span class="input-group-text bg-secondary text-light">rightLines</span>
+                            <input name="rightLineLength" type="number" class="form-control form-number"
+                                id="rightLineLength" value="4" step="1" min="1">
+                        </div>
                         <div class="input-group">
                             <span class="input-group-text bg-secondary text-light">Render Scale</span>
                             <input name="renderScale" type="range" class="form-control form-range" id="renderScale"
@@ -569,15 +534,78 @@
             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";
-            });
-            document.querySelectorAll("#userInterface >div").forEach(el => {
-                //el.style.fontSize = (el.parentNode.offsetHeight * 0.65) + "px";
-            });
+            document.getElementById("rightTexts").textContent = "";
+            for (let i = 0; i < document.getElementById("rightLineLength").value; i++) {
+                let row2 = document.createElement("div");
+                let input = document.createElement("input");
+                let shadowText = document.createElement("div");
+                shadowText.setAttribute("class", "shadow-text d-none text-light");
+                input.name = "rightText" + (i + 1);
+                row2.classList.add("row2");
+                row2.appendChild(input);
+                row2.appendChild(shadowText);
+                input.classList.add("text-light");
+                input.value = "";
+                let v = window.localStorage.getItem(input.name);
+                if (v) {
+                    input.value = v;
+                }
+                input.addEventListener("change", function (e) {
+                    if (input.name && input.value) {
+                        window.localStorage.setItem(input.name, input.value);
+                    }
+                    if (input.name && !input.value) {
+                        window.localStorage.removeItem(input.name);
+                    }
+                });
+                document.getElementById("rightTexts").appendChild(row2);
+            }
+
+            document.getElementById("leftTexts").textContent = "";
+            for (let i = 0; i < document.getElementById("leftLineLength").value; i++) {
+                let row2 = document.createElement("div");
+                let input = document.createElement("input");
+                let shadowText = document.createElement("div");
+                shadowText.setAttribute("class", "shadow-text d-none text-light");
+                input.name = "leftText" + (i + 1);
+                row2.classList.add("row2");
+                row2.appendChild(input);
+                row2.appendChild(shadowText);
+                input.classList.add("text-light");
+                input.value = "";
+                let v = window.localStorage.getItem(input.name);
+                if (v) {
+                    input.value = v;
+                }
+                input.addEventListener("change", function (e) {
+                    if (input.name && input.value) {
+                        window.localStorage.setItem(input.name, input.value);
+                    }
+                    if (input.name && !input.value) {
+                        window.localStorage.removeItem(input.name);
+                    }
+                });
+                document.getElementById("leftTexts").appendChild(row2);
+            }
+
             //linear-gradient(rgba(170, 100, 101, 0.7), rgba(145, 152, 229, 0.9))
             let bg = "linear-gradient(rgba(" + hex2rgb(document.getElementById("topColor").value) + ", " + document.getElementById("topAlpha").value + "), rgba(" + hex2rgb(document.getElementById("btmColor").value) + ", " + document.getElementById("btmAlpha").value + "))";
             document.getElementById("messageWindow").style.backgroundImage = bg;
+
+            document.querySelectorAll(".row2").forEach(el => {
+                el.style.height = (100 / Array.from(el.parentElement.querySelectorAll(".row2")).length) + "%";
+            });
+            let sparse = 0;
+            if (document.querySelectorAll("#left .row2").length > 1) {
+                sparse = 100 / (document.querySelectorAll("#left .row2").length - 1);
+            }
+
+            document.getElementById("left").style.height = (100 + sparse) + "%";
+            document.getElementById("left").style.top = (-1 * sparse) + "%";
+            document.querySelectorAll("#right input, #left input").forEach(el => {
+                console.log(el.parentNode.offsetHeight);
+                el.style.fontSize = (el.parentNode.offsetHeight * document.querySelector("#fontSizeInput").value) + "px";
+            });
         }
 
         document.querySelectorAll("input").forEach(el => {
@@ -614,7 +642,6 @@
                     width: image.naturalWidth,
                     height: image.naturalHeight,
                     onclone: (x) => {
-                        console.log(x);
                         x.getElementById("edit").style.width = image.naturalWidth + "px";
                         x.getElementById("edit").style.height = image.naturalHeight + "px";
                         x.getElementById("edit").classList.add("m-0");
@@ -721,7 +748,8 @@
             createEditor();
         });
         const setStroke = function (mode) {
-            let strokeSize = Math.ceil(document.querySelector("#left input").style.fontSize.replace("px", "") * document.getElementById("strokeWeight").value);
+            let fontSize = Math.max.apply(null, [document.querySelector("#left input").style.fontSize.replace("px", ""), document.querySelector("#right input").style.fontSize.replace("px", ""), 8]);
+            let strokeSize = Math.ceil(fontSize * document.getElementById("strokeWeight").value);
             let strokeColor = hex2rgb(document.getElementById("strokeColor").value);
             let css = '.shadow-text {-webkit-text-stroke: ' + strokeSize + 'px rgb(0, 0, 0) ;paint-order: stroke fill;}'.replaceAll('rgb(0, 0, 0)', 'rgb(' + strokeColor + ')');
             let css2 = '#mainMassage input {text-shadow: 1px -0px 0 rgb(0, 0, 0), 1px 0px 0 rgb(0, 0, 0), 1px 1px 0 rgb(0, 0, 0), 0px 1px 0 rgb(0, 0, 0), -1px -1px 0 rgb(0, 0, 0), -1px 0px 0 rgb(0, 0, 0), -1px -1px 0 rgb(0, 0, 0);}'.replaceAll('rgb(0, 0, 0)', 'rgb(' + strokeColor + ')');