Update index.html

index.html

@@ -18,6 +18,22 @@
             font-family: "Noto Sans JP";
         }
 
+        [aria-expanded=false] .text-expanded {
+            display: none;
+        }
+
+        [aria-expanded=true] .text-collapsed {
+            display: none;
+        }
+
+        a {
+            color: inherit;
+        }
+
+        hr {
+            margin: 0.5rem;
+            padding: 0;
+        }
         #left {
             background-repeat: no-repeat;
             background-position: center bottom;
@@ -265,6 +281,7 @@
                     <div class="input-group">
                         <button id="render" type="button" class="btn btn-success">Render</button>
                     </div>
+                    <hr>
                     <h6>Image</h6>
                     <div class="input-group">
                         <label for="upload">
@@ -280,7 +297,8 @@
                             <button id="faceRemoveButton" type="button" class="btn btn-danger">Remove Icon</button>
                         </label>
                     </div>
-                    <h6>Window Color</h6>
+                    <hr>
+                    <h6>Window</h6>
                     <div class="input-group">
                         <span class="input-group-text bg-secondary text-light">TopColor</span>
                         <input name="topColor" type="color" class="form-control form-control-color" id="topColor"
@@ -299,11 +317,6 @@
                         <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 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">font-size</span>
                         <input name="fontSizeInput" type="range" class="form-control form-range" id="fontSizeInput"
@@ -318,36 +331,51 @@
                         <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 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 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">StrokeColor</span>
-                        <input name="strokeColor" type="color" class="form-control form-control-color" id="strokeColor"
-                            value="#000000">
-                        <span class="input-group-text bg-secondary text-light">StrokeWeight</span>
-                        <input name="strokeWeight" type="range" class="form-control form-range" id="strokeWeight"
-                            value="0.05" step="0.01" min="0.01" max="0.2">
-                    </div>
+                    <hr>
                     <div class="input-group">
                         <button id="waterMarkToggle" type="button" class="btn btn-warning">WaterMark</button>
                     </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"
-                            value="2" step="0.5" min="1" max="4">
-                    </div>
                     <hr>
-                    <div class="input-group">
-                        <label for="upload">
-                            <button id="resetStorage" type="button" class="btn btn-danger">ResetCookies</button>
-                        </label>
+                    <h6>
+                        <a data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false"
+                            aria-controls="collapseExample">
+                            Advanced
+                            <i class="fa fa-angle-left text-expanded"></i>
+                            <i class="fa fa-angle-down text-collapsed"></i>
+                        </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">StrokeColor</span>
+                            <input name="strokeColor" type="color" class="form-control form-control-color"
+                                id="strokeColor" value="#000000">
+                            <span class="input-group-text bg-secondary text-light">StrokeWeight</span>
+                            <input name="strokeWeight" type="range" class="form-control form-range" id="strokeWeight"
+                                value="0.05" step="0.01" min="0.01" max="0.2">
+                        </div>
+                        <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">
+                            <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">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>
+                        <hr>
+                        <div class="input-group">
+                            <label for="upload">
+                                <button id="resetStorage" type="button" class="btn btn-danger">ResetCookies</button>
+                            </label>
+                        </div>
                     </div>
                 </div>
                 <div class="col-lg-12 text-light bg-dark bg-gradient p-4" id="help">
@@ -372,8 +400,9 @@
                     <ul>
                         <li>
                             <ul>
-                                <li>ストロークの色と太さの変更に対応しました。</li>
-                                <li>ストロークの選択をデフォルトでRecommendedにすると共に、プレビューは常にプレビュー用のCSSを使うよう仕様変更しました。</li>
+                                <li>UIを整理すると共にAdvanced部を折りたたむようにした。</li>
+                                <li>ストロークの色と太さの変更に対応した。</li>
+                                <li>ストロークの選択をデフォルトでRecommendedにすると共に、プレビューは常にプレビュー用のCSSを使うよう仕様変更した。</li>
                             </ul>
                         </li>
                     </ul>
@@ -663,13 +692,13 @@
         const setStroke = function (mode) {
             let strokeSize = Math.ceil(document.querySelector("#left input").style.fontSize.replace("px", "") * 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+')');
+            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 + ')');
             document.getElementById("text-shadow").textContent = css;
             document.getElementById("text-shadowPreview").textContent = css2;
-            if(mode == "b"){
-                document.getElementById("text-shadow").textContent = '.shadow-text {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+')');
-                document.getElementById("text-shadowPreview").textContent = '#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+')');
+            if (mode == "b") {
+                document.getElementById("text-shadow").textContent = '.shadow-text {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 + ')');
+                document.getElementById("text-shadowPreview").textContent = '#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 + ')');
             }
         }
         setStroke();