Update index.html

index.html

@@ -20,13 +20,8 @@
     <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">
     <meta name="theme-color" content="#7952b3">
     <style>
-        .wf-notosansjapanese {
-            font-family: "Noto Sans JP";
-        }
-
         [aria-expanded=false] .text-expanded {
             display: none;
         }
@@ -87,10 +82,6 @@
             --userInterfaceHeight: 20%;
         }
 
-        #emptySpace {
-            height: calc(100% - var(--messageWindowSize));
-        }
-
         #messageWindow {
             margin: 0;
             padding: 0;
@@ -169,12 +160,37 @@
             align-items: center;
         }
 
+        #emptySpace {
+            height: calc(100% - var(--messageWindowSize));
+            flex-direction: column;
+        }
+
+        #emptySpace>* {
+            width: 100%;
+            display: flex;
+            justify-content: end;
+            align-items: center;
+            height: 5%;
+            font-size: 100%;
+        }
+
+        #emptySpace>*>* {
+            padding-right: 0.5rem;
+        }
+
         .watermark {
             -webkit-text-stroke: 1px rgb(0, 0, 0);
             paint-order: stroke fill;
             color: rgba(255, 255, 255, 0.8);
+            font-size: 100%;
+        }
+
+        .recording {
+            color: red;
+            font-weight: bold;
         }
     </style>
+    <link id="googleFont" href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet">
     <style id="fontFamily">
         body {
             font-family: "Noto Sans JP";
@@ -199,9 +215,16 @@
             </div>
             <div class="row">
                 <div class="col-lg-7 p-0 m-0 relative" id="edit">
-                    <div id="emptySpace" class="row p-0 m-0">
-                        <p class="watermark text-end">Gal-Game UI Editor<br>https://huggingface.co/spaces/SenY/GalGameUI
-                        </p>
+                    <div id="emptySpace" class="p-0 m-0">
+                        <div class="recording d-none">
+                            <div>●ＲＥＣ</div>
+                        </div>
+                        <div class="watermark">
+                            <div>Gal-Game UI Editor</div>
+                        </div>
+                        <div class="watermark">
+                            <div>https://huggingface.co/spaces/SenY/GalGameUI</div>
+                        </div>
                     </div>
                     <div id="messageWindow" class="row">
                         <div class="col-12 p-0 m-0 h-100">
@@ -285,6 +308,77 @@
                         <input name="btmAlpha" type="range" class="form-control form-range" id="btmAlpha" value="0.45"
                             step="0.01" max="1">
                     </div>
+                    <div class="input-group">
+                        <span class="input-group-text bg-secondary text-light">GoogleFont</span>
+                        <select name="googleFontInput" class="form-control" id="googleFontInput">
+                            <option>Aoboshi One</option>
+                            <option>BIZ UDGothic</option>
+                            <option>BIZ UDMincho</option>
+                            <option>BIZ UDPGothic</option>
+                            <option>BIZ UDPMincho</option>
+                            <option>Cherry Bomb One</option>
+                            <option>Chokokutai</option>
+                            <option>Darumadrop One</option>
+                            <option>Dela Gothic One</option>
+                            <option>DotGothic16</option>
+                            <option>Hachi Maru Pop</option>
+                            <option>Hina Mincho</option>
+                            <option>IBM Plex Sans JP</option>
+                            <option>Kaisei Decol</option>
+                            <option>Kaisei HarunoUmi</option>
+                            <option>Kaisei Opti</option>
+                            <option>Kaisei Tokumin</option>
+                            <option>Kiwi Maru</option>
+                            <option>Klee One</option>
+                            <option>Kosugi</option>
+                            <option>Kosugi Maru</option>
+                            <option>M PLUS 1</option>
+                            <option>M PLUS 1 Code</option>
+                            <option>M PLUS 1p</option>
+                            <option>M PLUS 2</option>
+                            <option>M PLUS Rounded 1c</option>
+                            <option>Mochiy Pop One</option>
+                            <option>Mochiy Pop P One</option>
+                            <option>Monomaniac One</option>
+                            <option>Murecho</option>
+                            <option>New Tegomin</option>
+                            <option selected="selected">Noto Sans JP</option>
+                            <option>Noto Serif JP</option>
+                            <option>Palette Mosaic</option>
+                            <option>Potta One</option>
+                            <option>Rampart One</option>
+                            <option>Reggae One</option>
+                            <option>Rock 3D</option>
+                            <option>RocknRoll One</option>
+                            <option>Sawarabi Gothic</option>
+                            <option>Sawarabi Mincho</option>
+                            <option>Shippori Antique</option>
+                            <option>Shippori Antique B1</option>
+                            <option>Shippori Mincho</option>
+                            <option>Shippori Mincho B1</option>
+                            <option>Shizuru</option>
+                            <option>Slackside One</option>
+                            <option>Stick</option>
+                            <option>Train One</option>
+                            <option>Tsukimi Rounded</option>
+                            <option>Yomogi</option>
+                            <option>Yuji Boku</option>
+                            <option>Yuji Hentaigana Akari</option>
+                            <option>Yuji Hentaigana Akebono</option>
+                            <option>Yuji Mai</option>
+                            <option>Yuji Syuku</option>
+                            <option>Yusei Magic</option>
+                            <option>Zen Antique</option>
+                            <option>Zen Antique Soft</option>
+                            <option>Zen Kaku Gothic Antique</option>
+                            <option>Zen Kaku Gothic New</option>
+                            <option>Zen Kurenaido</option>
+                            <option>Zen Maru Gothic</option>
+                            <option>Zen Old Mincho</option>
+                        </select>
+                        <span class="input-group-text bg-secondary text-light">LocalFont</span>
+                        <input name="fontFamilyInput" type="text" class="form-control" id="fontFamilyInput" value="">
+                    </div>
                     <div class="input-group">
                         <span class="input-group-text bg-secondary text-light">font-size</span>
                         <input name="fontSizeInput" type="range" class="form-control form-range" id="fontSizeInput"
@@ -302,6 +396,7 @@
                     <hr>
                     <div class="input-group">
                         <button id="waterMarkToggle" type="button" class="btn btn-warning">WaterMark</button>
+                        <button id="recordingToggle" type="button" class="btn btn-warning opacity-50">●ＲＥＣ</button>
                     </div>
                     <hr>
                     <h6>
@@ -313,11 +408,6 @@
                         </a>
                     </h6>
                     <div class="collapse" id="collapseExample">
-                        <div class="input-group">
-                            <span class="input-group-text bg-secondary text-light">font-family</span>
-                            <input name="fontFamilyInput" type="text" class="form-control" id="fontFamilyInput"
-                                value="">
-                        </div>
                         <div class="input-group">
                             <span class="input-group-text bg-secondary text-light">NameSpaceLength</span>
                             <input name="nameSpaceLength" type="range" class="form-control form-range"
@@ -380,6 +470,11 @@
                     </ul>
                     <h2>最近の更新</h2>
                     <ul>
+                        <li>
+                            <ul>
+                                <li>Google Fontsからフォントを選択できるようにした。</li>
+                            </ul>
+                        </li>
                         <li>
                             <ul>
                                 <li>名前欄とメッセージ欄の行数を変更できるようにした。</li>
@@ -548,8 +643,8 @@
                 row2.appendChild(shadowText);
                 input.classList.add("text-light");
                 input.value = "";
-                if(!window.localStorage.length){
-                    input.value = "Line of " + (i+1);
+                if (!window.localStorage.length) {
+                    input.value = "Line of " + (i + 1);
                 }
                 let v = window.localStorage.getItem(input.name);
                 if (v) {
@@ -578,7 +673,7 @@
                 row2.appendChild(shadowText);
                 input.classList.add("text-light");
                 input.value = "";
-                if(!window.localStorage.length && i == 2){
+                if (!window.localStorage.length && i == 2) {
                     input.value = "Name";
                 }
                 let v = window.localStorage.getItem(input.name);
@@ -610,8 +705,7 @@
 
             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);
+            document.querySelectorAll("#right input, #left input, #emptySpace>*>*").forEach(el => {
                 el.style.fontSize = (el.parentNode.offsetHeight * document.querySelector("#fontSizeInput").value) + "px";
             });
         }
@@ -751,6 +845,15 @@
                 f.textContent = 'body { font-family: "' + i.value.trim() + '"; }';
             }
         });
+
+
+        document.getElementById("googleFontInput").addEventListener("change", function () {
+            let f = document.getElementById("fontFamily");
+            let i = this;
+            document.getElementById("googleFont").setAttribute("href", "https://fonts.googleapis.com/css?family=" + i.value.trim());
+            f.textContent = 'body { font-family: "' + i.value.trim() + '"; }';
+        });
+
         document.getElementById("windowSize").addEventListener("change", function () {
             document.documentElement.style.setProperty('--messageWindowSize', this.value + "%");
             createEditor();
@@ -818,6 +921,16 @@
             } else {
                 document.querySelectorAll(".watermark").forEach(el => el.classList.remove("d-none"));
             }
+            createEditor();
+        });
+        document.getElementById("recordingToggle").addEventListener("click", function () {
+            this.classList.toggle("opacity-50");
+            if (this.classList.contains("opacity-50")) {
+                document.querySelectorAll(".recording").forEach(el => el.classList.add("d-none"));
+            } else {
+                document.querySelectorAll(".recording").forEach(el => el.classList.remove("d-none"));
+            }
+            createEditor();
         });
 
         document.querySelectorAll("input").forEach(el => {