Update index.html

index.html

@@ -152,6 +152,10 @@
             justify-content: space-around;
             align-items: center;
         }
+
+        .watermark {
+            opacity: 0.5;
+        }
     </style>
     <style id="fontFamily">
         body {
@@ -159,6 +163,7 @@
         }
     </style>
     <style id="text-shadow">
+        .watermark,
         #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);
@@ -177,6 +182,7 @@
             <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-light text-end">https://huggingface.co/spaces/SenY/GalGameUI</p>
                     </div>
                     <div id="messageWindow" class="row">
                         <div class="col-12 p-0 m-0 h-100">
@@ -273,32 +279,30 @@
                     </div>
                     <h6>Window Color</h6>
                     <div class="input-group">
-                        <span class="input-group-text">TopColor</span>
+                        <span class="input-group-text bg-secondary text-light">TopColor</span>
                         <input name="topColor" type="color" class="form-control form-control-color" id="topColor"
                             value="#000000">
-                    </div>
-                    <div class="input-group">
-                        <span class="input-group-text">TopAlpha</span>
+                        <div class="vr"></div>
+                        <span class="input-group-text bg-secondary text-light">TopAlpha</span>
                         <input name="topAlpha" type="range" class="form-control form-range" id="topAlpha" value="0.35"
                             step="0.01" max="1">
                     </div>
                     <div class="input-group">
-                        <span class="input-group-text">BtmColor</span>
+                        <span class="input-group-text bg-secondary text-light">BtmColor</span>
                         <input name="btmColor" type="color" class="form-control form-control-color" id="btmColor"
                             value="#9999EE">
-                    </div>
-                    <div class="input-group">
-                        <span class="input-group-text">BtmAlpha</span>
+                        <div class="vr"></div>
+                        <span class="input-group-text bg-secondary text-light">BtmAlpha</span>
                         <input name="btmAlpha" type="range" class="form-control form-range" id="btmAlpha" value="0.45"
                             step="0.01" max="1">
                     </div>
                     <h6>Font</h6>
                     <div class="input-group">
-                        <span class="input-group-text">font-family</span>
+                        <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">font-size</span>
+                        <span class="input-group-text bg-secondary text-light">font-size</span>
                         <input name="fontSizeInput" type="range" class="form-control form-range" id="fontSizeInput"
                             value="0.8" step="0.01" min="0.25" max="1">
                     </div>
@@ -313,18 +317,22 @@
                     </div>
                     <h6>Advanced</h6>
                     <div class="input-group">
-                        <span class="input-group-text">WindowSize</span>
+                        <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">
-                        <span class="input-group-text">Padding</span>
+                        <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">Render Scale</span>
+                        <span class="input-group-text bg-secondary text-light">Render Scale</span>
                         <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">
+                        <button id="waterMarkToggle" type="button" class="btn btn-warning">WaterMark</button>
+                    </div>
+                    <hr>
                     <div class="input-group">
                         <label for="upload">
                             <button id="resetStorage" type="button" class="btn btn-danger">ResetCookies</button>
@@ -338,7 +346,10 @@
                     <p>画像データは全てブラウザ上で処理されサーバーに送信されたりはしませんのでお好きな画像をお使いください。</p>
                     <p>AI生成された画像に限らず好きな画像を利用可能です。</p>
                     <p>生成される画像に関しては当方は一切権利を主張しませんので元画像の権利に問題が無ければ商用・非商用を問わず自由にご利用頂けます。</p>
-                    <p>どのような使い方をされているのか見たいのでここの<a href="https://huggingface.co/spaces/SenY/GalGameUI">URL</a>付きで掲載して頂いたり<a href="https://twitter.com/user_vkff5833" target="_blank">Twitter</a>のリプライなどで教えて頂けると嬉しいです。
+                    <p>どのような使い方をされているのか見たいのでここの<a
+                            href="https://huggingface.co/spaces/SenY/GalGameUI">URL</a>付きで画像を掲載して頂いたり<a
+                            href="https://twitter.com/user_vkff5833"
+                            target="_blank">Twitter</a>のリプライや引用RTなどで教えて頂けると嬉しいです。
                     <p>このソフトウェア(webアプリ、HTMLファイル、Javascript)そのものに対するライセンスは付与していないので転載・改変はご遠慮ください。</p>
                     <h2>基本的な使い方</h2>
                     <ul>
@@ -378,9 +389,18 @@
                         <li>
                             <ul>
                                 <li>For Preview</li>
-                                <li><ul><li>text-shadowで8方向に1pxずつ置いてレンダリングしたもの。プレビュー画面ではこちらの方が綺麗に出る。</li></ul></li>
+                                <li>
+                                    <ul>
+                                        <li>text-shadowで8方向に1pxずつ置いてレンダリングしたもの。プレビュー画面ではこちらの方が綺麗に出る。</li>
+                                    </ul>
+                                </li>
                                 <li>Recommended</li>
-                                <li><ul><li>-webkit-text-strokeをフォントサイズの10%で設定したもの。大抵の場合実際のレンダリングではこちらのほうが綺麗に出るがプレビューでは表示がおかしくなる。</li></ul></li>
+                                <li>
+                                    <ul>
+                                        <li>-webkit-text-strokeをフォントサイズの10%で設定したもの。大抵の場合実際のレンダリングではこちらのほうが綺麗に出るがプレビューでは表示がおかしくなる。
+                                        </li>
+                                    </ul>
+                                </li>
                             </ul>
                         </li>
                         <li>Fake-UI</li>
@@ -393,7 +413,7 @@
                         <li>Advanced</li>
                         <li>
                             <ul>
-                                <li>その他のちょっとややこしい設定</li>
+                                <li>その他のちょっとややこしい設定など</li>
                                 <li>Window Size</li>
                                 <li>
                                     <ul>
@@ -412,6 +432,12 @@
                                         <li>画像としてレンダリングする時の解像度設定。初期値のまま動かさないことを推奨。</li>
                                     </ul>
                                 </li>
+                                <li>WaterMark</li>
+                                <li>
+                                    <ul>
+                                        <li>右上のURL透かしのＯＮ・ＯＦＦを切り替えます。現時点では透かしをオフにすることに対する制限は特に設けていません。</li>
+                                    </ul>
+                                </li>
                                 <li>Reset Cookies</li>
                                 <li>
                                     <ul>
@@ -614,7 +640,7 @@
             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("text-shadow").textContent = '.watermark #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("textShadowToggleB").addEventListener("click", function () {
@@ -624,7 +650,7 @@
             if (this.classList.contains("opacity-50")) {
                 document.getElementById("text-shadow").textContent = "";
             } else {
-                document.getElementById("text-shadow").textContent = '#mainMassage input, .shadow-text {-webkit-text-stroke: ' + strokeSize + 'px black;paint-order: stroke fill;}';
+                document.getElementById("text-shadow").textContent = '.watermark #mainMassage input, .shadow-text {-webkit-text-stroke: ' + strokeSize + 'px black;paint-order: stroke fill;}';
             }
         });
         document.getElementById("userInterfaceToggle").addEventListener("click", function () {
@@ -641,6 +667,14 @@
             }
         });
 
+        document.getElementById("waterMarkToggle").addEventListener("click", function () {
+            this.classList.toggle("opacity-50");
+            if (this.classList.contains("opacity-50")) {
+                document.querySelectorAll(".watermark").forEach(el => el.classList.add("d-none"));
+            } else {
+                document.querySelectorAll(".watermark").forEach(el => el.classList.remove("d-none"));
+            }
+        });
 
         document.querySelectorAll("input").forEach(el => {
             let v = window.localStorage.getItem(el.name);