Update index.html

index.html

@@ -26,8 +26,6 @@
             background-size: contain;
         }
 
-        body {}
-
         #edit {
             /*background: url('ClipBoard.png');*/
             background-repeat: no-repeat;
@@ -56,6 +54,10 @@
             align-items: stretch;
         }
 
+        .row2-20 {
+            height: 20%;
+        }
+
         .row2-25 {
             height: 25%;
         }
@@ -66,16 +68,43 @@
 
         :root {
             --messageWindowSize: 25%;
+            --mainMassageHeight: 100%;
+            --userInterfaceHeight: 20%;
         }
+
         #emptySpace {
             height: calc(100% - var(--messageWindowSize));
         }
+
         #messageWindow {
             margin: 0;
             padding: 0;
             height: var(--messageWindowSize);
         }
 
+        #mainMassage {
+            height: var(--mainMassageHeight);
+        }
+
+        #userInterface {
+            font-family: Georgia, 'Times New Roman', Times, serif;
+            height: var(--userInterfaceHeight);
+            width: 100%;
+            display: flex;
+            margin: 0;
+            padding: 0;
+            justify-content: space-evenly;
+            align-items: center;
+        }
+
+        #userInterface>* {
+            width: 100%;
+            height: 100%;
+            text-align: center;
+            background-color: rgba(0, 0, 0, 0.25);
+            border: 1px dashed rgba(255, 255, 255, 0.5);
+        }
+
 
         #left,
         #right {
@@ -142,45 +171,59 @@
                 <div class="col-lg-8 p-0 m-0 relative" id="edit">
                     <div id="emptySpace" class="row p-0 m-0">
                     </div>
-                    <div id="messageWindow" class="row p-0 m-0">
-                        <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 class="text-light" value="">
-                                    <div class="shadow-text d-none text-light"></div>
+                    <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="キャラ名">
+                                            <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>
                                 </div>
-                                <div class="row2 row2-25">
-                                    <input class="text-light" value="">
-                                    <div class="shadow-text d-none text-light"></div>
-                                </div>
-                                <div class="row2 row2-25">
-                                    <input class="text-light" value="キャラ名">
-                                    <div class="shadow-text d-none text-light"></div>
-                                </div>
-                                <div class="row2 row2-25">
-                                    <input class="text-light" value="">
-                                    <div class="shadow-text d-none text-light"></div>
+                                <div id="right" class="col-9 p-0 m-0">
+                                    <div class="h-100 p-0" id="rightTexts">
+                                        <div class="row2 row2-25">
+                                            <input name="text1" class="text-light" value="（１行目のテキスト）">
+                                            <div class="shadow-text d-none text-light"></div>
+                                        </div>
+                                        <div class="row2 row2-25">
+                                            <input name="text2" class="text-light" value="（２行目のテキスト）">
+                                            <div class="shadow-text d-none text-light"></div>
+                                        </div>
+                                        <div class="row2 row2-25">
+                                            <input name="text3" class="text-light" value="（３行目のテキスト）">
+                                            <div class="shadow-text d-none text-light"></div>
+                                        </div>
+                                        <div class="row2 row2-25">
+                                            <input name="text4" class="text-light" value="（４行目のテキスト）">
+                                            <div class="shadow-text d-none text-light"></div>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
-                        </div>
-                        <div id="right" class="col-9 p-0 m-0">
-                            <div class="h-100 p-3">
-                                <div class="row2 row2-25">
-                                    <input class="text-light" value="（１行目のテキスト）">
-                                    <div class="shadow-text d-none text-light"></div>
-                                </div>
-                                <div class="row2 row2-25">
-                                    <input class="text-light" value="（２行目のテキスト）">
-                                    <div class="shadow-text d-none text-light"></div>
-                                </div>
-                                <div class="row2 row2-25">
-                                    <input class="text-light" value="（３行目のテキスト）">
-                                    <div class="shadow-text d-none text-light"></div>
-                                </div>
-                                <div class="row2 row2-25">
-                                    <input class="text-light" value="（４行目のテキスト）">
-                                    <div class="shadow-text d-none text-light"></div>
-                                </div>
+                            <div id="userInterface" class="text-light d-none">
+                                <div>Q-Save</div>
+                                <div>Q-Load</div>
+                                <div>Save</div>
+                                <div>Load</div>
+                                <div>Auto</div>
+                                <div>Skip</div>
+                                <div>Log</div>
+                                <div>Config</div>
                             </div>
                         </div>
                     </div>
@@ -193,60 +236,72 @@
                         </label>
                         <input id="upload" type="file" class="d-none">
                         <input id="faceUpload" type="file" class="d-none">
-                    </div>
-                    <div class="input-group">
+                        <div class="vr"></div>
                         <label for="faceUpload">
                             <button id="faceUploadButton" type="button" class="btn btn-primary">Face Icon</button>
                         </label>
                         <label for="faceRemove">
                             <button id="faceRemoveButton" type="button" class="btn btn-danger">Remove Icon</button>
                         </label>
-                    </div>
-                    <div class="input-group">
+                        <div class="vr"></div>
                         <button id="render" type="button" class="btn btn-success">Render</button>
                     </div>
                     <p><u>画像は全てキャッシュで処理されサーバーには一切送信されません。</u></p>
                     <h6>Message Window</h6>
                     <div class="input-group">
                         <span class="input-group-text">WindowSize</span>
-                        <input type="range" class="form-control form-range" id="windowSize" value="25" step="1" min="10" max="100">
+                        <input name="windowSize" type="range" class="form-control form-range" id="windowSize" value="25"
+                            step="1" min="16" max="30">
                     </div>
                     <div class="input-group">
                         <span class="input-group-text">TopColor</span>
-                        <input type="color" class="form-control form-control-color" id="topColor" value="#AA6465">
+                        <input name="topColor" type="color" class="form-control form-control-color" id="topColor"
+                            value="#AA6465">
                     </div>
                     <div class="input-group">
                         <span class="input-group-text">TopAlpha</span>
-                        <input type="range" class="form-control form-range" id="topAlpha" value="0.7" step="0.01"
-                            max="1">
+                        <input name="topAlpha" type="range" class="form-control form-range" id="topAlpha" value="0.7"
+                            step="0.01" max="1">
                     </div>
                     <div class="input-group">
                         <span class="input-group-text">BtmColor</span>
-                        <input type="color" class="form-control form-control-color" id="btmColor" value="#9198E5">
+                        <input name="btmColor" type="color" class="form-control form-control-color" id="btmColor"
+                            value="#9198E5">
                     </div>
                     <div class="input-group">
                         <span class="input-group-text">BtmAlpha</span>
-                        <input type="range" class="form-control form-range" id="btmAlpha" value="0.9" step="0.01"
-                            max="1">
+                        <input name="btmAlpha" type="range" class="form-control form-range" id="btmAlpha" value="0.9"
+                            step="0.01" max="1">
                     </div>
                     <h6>Font</h6>
                     <div class="input-group">
                         <span class="input-group-text">font-family</span>
-                        <input type="text" class="form-control" id="fontFamilyInput" value="">
+                        <input name="fontFamilyInput" type="text" class="form-control" id="fontFamilyInput" value="">
                     </div>
                     <div class="input-group">
                         <span class="input-group-text">font-size</span>
-                        <input type="range" class="form-control form-range" id="fontSizeInput" value="0.8" step="0.01"
-                            min="0.5" max="1">
+                        <input name="fontSizeInput" type="range" class="form-control form-range" id="fontSizeInput"
+                            value="0.8" step="0.01" min="0.5" max="1">
                     </div>
                     <div class="input-group">
-                        <button id="textShadowToggle" type="button" class="btn btn-primary">TEXT-STROKE</button>
+                        <button id="textShadowToggleA" type="button" class="btn btn-primary">Text-Stroke
+                            (TypeA)</button>
+                        <button id="textShadowToggleB" type="button" class="btn btn-primary opacity-50">Text-Stroke
+                            (TypeB)</button>
+                        <div class="vr"></div>
+                        <button id="userInterfaceToggle" type="button"
+                            class="btn btn-primary opacity-50">Fake-UI</button>
                     </div>
                     <h6>Advanced</h6>
                     <div class="input-group">
                         <span class="input-group-text">Render Scale</span>
-                        <input type="range" class="form-control form-range" id="renderScale" value="2" step="0.5"
-                            min="1" max="4">
+                        <input name="renderScale" type="range" class="form-control form-range" id="renderScale"
+                            value="2" step="0.5" min="1" max="4">
+                    </div>
+                    <div class="input-group">
+                        <label for="upload">
+                            <button id="resetStorage" type="button" class="btn btn-danger">ResetCookies</button>
+                        </label>
                     </div>
                 </div>
             </div>
@@ -284,11 +339,25 @@
             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";
+            });
             //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("input").forEach(el => {
+            addEventListener("change", function (e) {
+                if (el.name && el.value) {
+                    window.localStorage.setItem(el.name, el.value);
+                }
+                if (el.name && !el.value) {
+                    window.localStorage.removeItem(el.name);
+                }
+            });
+        })
+
         const saveImage = function (image) {
             document.getElementById("controller").classList.add("d-none");
             let edit = document.getElementById("edit");
@@ -344,13 +413,10 @@
             });
         });
 
-
         let image = document.getElementById("image");
         document.getElementById("edit").style.backgroundImage = 'url("' + image.getAttribute("src") + '")';
         createEditor();
 
-
-
         document.getElementById("upload").addEventListener("change", function () {
             let reader = new FileReader();
             let u = this;
@@ -386,6 +452,9 @@
         document.getElementById("faceUploadButton").addEventListener("click", function () {
             document.getElementById("faceUpload").click();
         });
+        document.getElementById("resetStorage").addEventListener("click", function () {
+            window.localStorage.clear()
+        });
 
         document.getElementById("faceRemoveButton").addEventListener("click", function () {
             let face = document.getElementById("face");
@@ -410,15 +479,53 @@
         });
         document.getElementById("windowSize").addEventListener("change", function () {
             document.documentElement.style.setProperty('--messageWindowSize', this.value + "%");
+            createEditor();
+        });
+        document.getElementById("textShadowToggleA").addEventListener("click", function () {
+            document.getElementById("textShadowToggleB").classList.add("opacity-50");
+            this.classList.toggle("opacity-50");
+            if (this.classList.contains("opacity-50")) {
+                document.getElementById("text-shadow").textContent = "";
+            } else {
+                document.getElementById("text-shadow").textContent = '#mainMassage input, .shadow-text {text-shadow: 1px -0px 0 rgba(0, 0, 0, 0.8), 1px 0px 0 rgba(0, 0, 0, 0.8), 1px 1px 0 rgba(0, 0, 0, 0.8), 0px 1px 0 rgba(0, 0, 0, 0.8), -1px -1px 0 rgba(0, 0, 0, 0.8), -1px 0px 0 rgba(0, 0, 0, 0.8), -1px -1px 0 rgba(0, 0, 0, 0.8);}';
+            }
         });
-        document.getElementById("textShadowToggle").addEventListener("click", function () {
+        document.getElementById("textShadowToggleB").addEventListener("click", function () {
+            document.getElementById("textShadowToggleA").classList.add("opacity-50");
             this.classList.toggle("opacity-50");
             if (this.classList.contains("opacity-50")) {
                 document.getElementById("text-shadow").textContent = "";
             } else {
-                document.getElementById("text-shadow").textContent = 'input, .shadow-text {text-shadow: 1px -0px 0 rgba(0, 0, 0, 0.8), 1px 0px 0 rgba(0, 0, 0, 0.8), 1px 1px 0 rgba(0, 0, 0, 0.8), 0px 1px 0 rgba(0, 0, 0, 0.8), -1px -1px 0 rgba(0, 0, 0, 0.8), -1px 0px 0 rgba(0, 0, 0, 0.8), -1px -1px 0 rgba(0, 0, 0, 0.8);}';
+                document.getElementById("text-shadow").textContent = '#mainMassage input, .shadow-text {-webkit-text-stroke: 1px black;paint-order: stroke fill;}';
             }
         });
+        document.getElementById("userInterfaceToggle").addEventListener("click", function () {
+            this.classList.toggle("opacity-50");
+            if (!this.classList.contains("opacity-50")) {
+                document.documentElement.style.setProperty('--mainMassageHeight', "80%");
+                document.getElementById("userInterface").classList.remove("d-none");
+                createEditor();
+            } else {
+                document.documentElement.style.setProperty('--mainMassageHeight', "100%");
+                document.getElementById("userInterface").classList.add("d-none");
+                createEditor();
+            }
+        });
+
+
+        document.querySelectorAll("input").forEach(el => {
+            let v = window.localStorage.getItem(el.name);
+            if (v) {
+                el.value = v;
+                let evt = new Event("change");
+                el.dispatchEvent(evt)
+            }
+        });
+        document.querySelectorAll("#userInterface > div").forEach(el => {
+            el.addEventListener("click", function(){
+                document.getElementById("render").click();
+            });
+        });
     </script>
 </body>