Spaces:

SenY
/

GalGameUI

Running

App Files Files Community

SenY commited on Sep 3, 2023

Commit

688f8cb

1 Parent(s): d7c347a

Update index.html

Browse files

Files changed (1) hide show

index.html +40 -30

index.html CHANGED Viewed

@@ -1,5 +1,6 @@
 <!doctype html>
 <html lang="ja" class="h-100">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -25,9 +26,7 @@
             background-size: contain;
         }
-        body {
-        }
         #edit {
             /*background: url('ClipBoard.png');*/
@@ -128,7 +127,12 @@
             font-family: "Noto Sans JP";
         }
     </style>
-    <style id="text-shadow">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);}</style>
     <link href="https://getbootstrap.jp/docs/5.0/examples/sticky-footer-navbar/sticky-footer-navbar.css"
         rel="stylesheet">
 </head>
@@ -206,7 +210,8 @@
                     </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">
                     </div>
                     <div class="input-group">
                         <span class="input-group-text">BtmColor</span>
@@ -214,7 +219,8 @@
                     </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">
                     </div>
                     <h6>Font</h6>
                     <div class="input-group">
@@ -223,7 +229,8 @@
                     </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">
                     </div>
                     <div class="input-group">
                         <button id="textShadowToggle" type="button" class="btn btn-primary">TEXT-STROKE</button>
@@ -277,41 +284,43 @@
             let naturalAspect = image.naturalWidth / image.naturalHeight;
             let width = window.document.documentElement.clientHeight * naturalAspect
             let height = window.document.documentElement.clientHeight;
-            //edit.style.width = image.naturalWidth + "px";
-            //edit.style.height = image.naturalHeight + "px";
-            edit.style.width = width + "px";
-            edit.style.height = height + "px";
-            edit.style.position = "absolute";
             result.classList.remove("d-none");
-            document.querySelectorAll(".shadow-text").forEach(el => {
-                el.classList.remove("d-none");
-                el.style.fontSize = (el.parentNode.offsetHeight * document.querySelector("#fontSizeInput").value * 0.65) + "px";
-                el.textContent = el.parentNode.querySelector("input").value;
-            });
             createEditor();
             setTimeout(function () {
                 html2canvas(document.getElementById("edit"), {
-                    ignoreElements: (el) => el.tagName == "INPUT" ? true : false
                 }).then(canvas => {
                     result.textContent = "";
-                    canvas.style.margin = 0;
-                    canvas.style.padding = 0;
                     result.appendChild(canvas);
-                    edit.style.position = "inherit";
                     let caption = document.createElement("span");
                     caption.classList.add("caption");
                     caption.textContent = "Rendered";
                     result.appendChild(caption);
-                    document.querySelectorAll(".shadow-text").forEach(el => {
-                        el.classList.add("d-none");
-                    });
                     let scale = Math.min.apply(null, [window.document.documentElement.clientWidth / width, window.document.documentElement.clientHeight / height, 1])
                     canvas.style.transform = "scale(" + scale + ")";
                 });
             }, 1);
         }
         document.getElementById("result").addEventListener("click", function (e) {
-            console.log(e.target);
             document.getElementById("result").classList.add("d-none");
             document.getElementById("controller").classList.remove("d-none");
             let image = document.getElementById("image");
@@ -376,20 +385,21 @@
         document.getElementById("fontFamilyInput").addEventListener("change", function () {
             let f = document.getElementById("fontFamily");
             let i = this;
-            if(!i.value){
                 f.textContent = 'body { font-family: "Noto Sans JP"; }';
-            }else{
-                f.textContent = 'body { font-family: "'+i.value.trim()+'"; }';
             }
         });
         document.getElementById("textShadowToggle").addEventListener("click", function () {
             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);}';
             }
         });
     </script>
 </body>
 </html>

 <!doctype html>
 <html lang="ja" class="h-100">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
             background-size: contain;
         }
+        body {}
         #edit {
             /*background: url('ClipBoard.png');*/
             font-family: "Noto Sans JP";
         }
     </style>
+    <style id="text-shadow">
+        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);
+        }
+    </style>
     <link href="https://getbootstrap.jp/docs/5.0/examples/sticky-footer-navbar/sticky-footer-navbar.css"
         rel="stylesheet">
 </head>
                     </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">
                     </div>
                     <div class="input-group">
                         <span class="input-group-text">BtmColor</span>
                     </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">
                     </div>
                     <h6>Font</h6>
                     <div class="input-group">
                     </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">
                     </div>
                     <div class="input-group">
                         <button id="textShadowToggle" type="button" class="btn btn-primary">TEXT-STROKE</button>
             let naturalAspect = image.naturalWidth / image.naturalHeight;
             let width = window.document.documentElement.clientHeight * naturalAspect
             let height = window.document.documentElement.clientHeight;
             result.classList.remove("d-none");
             createEditor();
             setTimeout(function () {
                 html2canvas(document.getElementById("edit"), {
+                    scale: 2,
+                    windowWidth: image.naturalWidth * 2,
+                    windowHeight: image.naturalHeight * 2,
+                    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");
+                        x.getElementById("edit").classList.add("p-0");
+                        x.querySelectorAll(".shadow-text").forEach(el => {
+                            el.classList.remove("d-none");
+                            el.style.fontSize = (el.parentNode.offsetHeight * document.querySelector("#fontSizeInput").value) + "px";
+                            el.textContent = el.parentNode.querySelector("input").value;
+                            el.parentNode.querySelector("input").classList.add("d-none");
+                        });
+                        return x;
+                    }
                 }).then(canvas => {
                     result.textContent = "";
                     result.appendChild(canvas);
                     let caption = document.createElement("span");
                     caption.classList.add("caption");
                     caption.textContent = "Rendered";
                     result.appendChild(caption);
                     let scale = Math.min.apply(null, [window.document.documentElement.clientWidth / width, window.document.documentElement.clientHeight / height, 1])
                     canvas.style.transform = "scale(" + scale + ")";
                 });
             }, 1);
         }
         document.getElementById("result").addEventListener("click", function (e) {
             document.getElementById("result").classList.add("d-none");
             document.getElementById("controller").classList.remove("d-none");
             let image = document.getElementById("image");
         document.getElementById("fontFamilyInput").addEventListener("change", function () {
             let f = document.getElementById("fontFamily");
             let i = this;
+            if (!i.value) {
                 f.textContent = 'body { font-family: "Noto Sans JP"; }';
+            } else {
+                f.textContent = 'body { font-family: "' + i.value.trim() + '"; }';
             }
         });
         document.getElementById("textShadowToggle").addEventListener("click", function () {
             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);}';
             }
         });
     </script>
 </body>
 </html>