From c3b25ae653a2dec40c51faa787c35f4715a226bc Mon Sep 17 00:00:00 2001
From: RikaCelery <94585272+RikaCelery@users.noreply.github.com>
Date: Fri, 3 Mar 2023 16:14:46 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=EF=BC=9A=E5=B8=A6=E9=BB=98?=
 =?UTF-8?q?=E8=AE=A4=E5=80=BC=E7=9A=84=E5=A4=8D=E9=80=89=E6=A1=86=E8=A1=A8?=
 =?UTF-8?q?=E7=8E=B0=E5=92=8C=E9=A2=84=E6=9C=9F=E4=B8=8D=E7=AC=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 generator.html | 515 ++++++++++++++++++++++++++-----------------------
 1 file changed, 272 insertions(+), 243 deletions(-)

diff --git a/generator.html b/generator.html
index e2501ee..4321999 100644
--- a/generator.html
+++ b/generator.html
@@ -225,7 +225,8 @@
                             <div class="description">跳过下载</div>
                         </div>
                         <div>
-                            <input type="checkbox" name="check-segments-count" id="check-segments-count" checked />
+                            <input type="checkbox" name="check-segments-count" id="check-segments-count" checked
+                                default="true" />
                             <label for="check-segments-count">check-segments-count</label>
                             <div class="description">检测实际下载的分片数量和预期数量是否匹配 </div>
                         </div>
@@ -235,7 +236,7 @@
                             <div class="description">二进制合并</div>
                         </div>
                         <div>
-                            <input type="checkbox" name="del-after-done" id="del-after-done" checked />
+                            <input type="checkbox" name="del-after-done" id="del-after-done" checked default="true" />
                             <label for="del-after-done">del-after-done</label>
                             <div class="description">完成后删除临时文件 </div>
                         </div>
@@ -265,7 +266,8 @@
                             <div class="description">只选取字幕轨道</div>
                         </div>
                         <div>
-                            <input type="checkbox" name="auto-subtitle-fix" id="auto-subtitle-fix" checked />
+                            <input type="checkbox" name="auto-subtitle-fix" id="auto-subtitle-fix" checked
+                                default="true" />
                             <label for="auto-subtitle-fix">auto-subtitle-fix</label>
                             <div class="description">自动修正字幕 </div>
                         </div>
@@ -280,7 +282,8 @@
                             <div class="description">实时解密MP4分片</div>
                         </div>
                         <div>
-                            <input type="checkbox" name="use-system-proxy" id="use-system-proxy" checked />
+                            <input type="checkbox" name="use-system-proxy" id="use-system-proxy" checked
+                                default="true" />
                             <label for="use-system-proxy">use-system-proxy</label>
                             <div class="description">使用系统默认代理 </div>
                         </div>
@@ -295,7 +298,8 @@
                             <div class="description">录制直播时实时合并</div>
                         </div>
                         <div>
-                            <input type="checkbox" name="live-keep-segments" id="live-keep-segments" checked />
+                            <input type="checkbox" name="live-keep-segments" id="live-keep-segments" checked
+                                default="true" />
                             <label for="live-keep-segments">live-keep-segments</label>
                             <div class="description">录制直播并开启实时合并时依然保留分片 </div>
                         </div>
@@ -322,19 +326,33 @@
             switch (element.type) {
                 case 'text':
                     if (element.value.length != 0) {
-                        if (element.id!='input') {
+                        if (element.id != 'input') {
                             finalArgs.push('--' + element.id + ' "' + element.value + '"')
-                            
+
                         } else {
                             finalArgs.push('"' + element.value + '"')
-                            
+
                         }
                     }
                     break;
                 case 'checkbox':
-                    if (element.checked) {
+
+                    if (element.checked == Boolean(element.getAttribute('default'))) {
+                        // finalArgs.push('**' + element.id)
+                        // finalArgs.push(String(element.checked))
+                    } else {
                         finalArgs.push('--' + element.id)
+                        finalArgs.push(String(element.checked))
                     }
+                    // if (element.checked) {
+                    //     finalArgs.push('--' + element.id)
+                    //     finalArgs.push('true')
+                    // } else {
+                    //     if (element.checked != Boolean(element.getAttribute('default'))) {
+                    //         finalArgs.push('--' + element.id)
+                    //         finalArgs.push(String(element.checked))
+                    //     }
+                    // }
                     break;
 
                 default:
@@ -355,262 +373,273 @@
                 console.log(element.type + ' ' + element.id + ' ' + opt.value)
             }
         }
-        document.getElementById('output').textContent='.\\N_m3u8DL-RE.exe '+finalArgs.join(" ")
+        document.getElementById('output').textContent = '.\\N_m3u8DL-RE.exe ' + finalArgs.join(" ")
         console.log(finalArgs.join(" "))
     }
+
+    setInterval(() => generate('generator_body'), 100)
 </script>
 <style>
     @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
-:root{
-    --backgrond-color-light:rgb(130, 106, 251);
-    --backgrond-color-dark:rgb(16, 13, 29);
-    --backgrond-color: var(--backgrond-color-dark);
 
-    --accent-color-light:rgb(130, 106, 251);
-    --accent-color-dark:rgb(130, 106, 251);;
-    --accent-color:var(--accent-color-dark);
-    
-    --backgrond-color-hover-light:rgb(81, 57, 202);
-    --backgrond-color-hover-dark:rgb(80, 64, 168);
-    --backgrond-color-hover: var(--backgrond-color-hover-dark);
-    
-    --input-color-hover-light:rgba(130, 106, 251, 0.501);
-    --input-color-hover-dark:rgba(81, 57, 202, 0.688);
-    --input-color-hover: var(--input-color-hover-dark);
+    :root {
+        --backgrond-color-light: rgb(130, 106, 251);
+        --backgrond-color-dark: rgb(16, 13, 29);
+        --backgrond-color: var(--backgrond-color-dark);
 
-    --button-color-nohover-light:rgb(130, 106, 251);
-    --button-color-nohover-dark:rgb(52, 52, 81);
-    --button-color-nohover: var(--button-color-nohover-dark);
+        --accent-color-light: rgb(130, 106, 251);
+        --accent-color-dark: rgb(130, 106, 251);
+        ;
+        --accent-color: var(--accent-color-dark);
 
-    --button-color-light:#fff;
-    --button-color-dark:#fff;
-    --button-color:var(--button-color-light);
-    
-    --main-text-color-light: rgb(0, 0, 0);
-    --main-text-color-dark: rgb(205, 205, 205);
-    --main-text-color: var(--main-text-color-dark);
-    
-    --description-text-color-light: rgb(120, 120, 120);
-    --description-text-color-dark: rgb(120, 120, 120);
-    --description-text-color: var(--description-text-color-dark);
+        --backgrond-color-hover-light: rgb(81, 57, 202);
+        --backgrond-color-hover-dark: rgb(80, 64, 168);
+        --backgrond-color-hover: var(--backgrond-color-hover-dark);
 
-    --background-color-light:#fff;
-    --background-color-dark:rgb(31, 31, 31);
-    --background-color:var(--background-color-dark);
+        --input-color-hover-light: rgba(130, 106, 251, 0.501);
+        --input-color-hover-dark: rgba(81, 57, 202, 0.688);
+        --input-color-hover: var(--input-color-hover-dark);
 
-    --border-color-light:#ddd;
-    --border-color-dark:rgb(61, 61, 61);
-    --border-color:var(--border-color-dark);
+        --button-color-nohover-light: rgb(130, 106, 251);
+        --button-color-nohover-dark: rgb(52, 52, 81);
+        --button-color-nohover: var(--button-color-nohover-dark);
 
-}
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    font-family: 'Poppins', sans-serif;
-    transition: all 0.2s ease-in-out;
+        --button-color-light: #fff;
+        --button-color-dark: #fff;
+        --button-color: var(--button-color-light);
 
-}
-body {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 20px;
-    background: var(--backgrond-color);
-}
+        --main-text-color-light: rgb(0, 0, 0);
+        --main-text-color-dark: rgb(205, 205, 205);
+        --main-text-color: var(--main-text-color-dark);
 
-.container {
-    width: 100%;
-    max-width: 1000px;
-    padding: 25px;
-    background: var(--background-color);
-    border-radius: 8px;
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
-}
+        --description-text-color-light: rgb(120, 120, 120);
+        --description-text-color-dark: rgb(120, 120, 120);
+        --description-text-color: var(--description-text-color-dark);
 
-.container header {
-    font-size: 1.5rem;
-    color: var(--main-text-color);
-    font-weight: 500;
-    text-align: center;
-}
-#output{
-    font-size: 1rem;
-    color: var(--main-text-color);
-    font-weight: 200;
-    text-align: center;
-    border: 2px solid var(--border-color);
-    border-radius: 6px;
-    padding: 10px 0;
-    margin-top: 10px;
-}
-.form :where(input,select){
-    background: transparent;
-}
+        --background-color-light: #fff;
+        --background-color-dark: rgb(31, 31, 31);
+        --background-color: var(--background-color-dark);
 
-.form .input-box {
-    width: 100%;
-    margin-top: 20px;
-}
+        --border-color-light: #ddd;
+        --border-color-dark: rgb(61, 61, 61);
+        --border-color: var(--border-color-dark);
 
-.input-box label {
-    color: var(--main-text-color);
-}
-
-.form :where(.input-box input, .select-box) {
-    position: relative;
-    width: 100%;
-    outline: none;
-    border-radius: 6px;
-    font-size: 1rem;
-    height: 50px;
-    border: 1px solid var(--border-color);
-    padding: 0 15px;
-}
-
-.form .column {
-    display: flex;
-    column-gap: 15px;
-}
-
-.form .column input {
-    position: relative;
-    width: 100%;
-    outline: none;
-    border-radius: 6px;
-    font-size: 1rem;
-    height: 50px;
-    border: 1px solid var(--border-color);
-    padding: 0 15px;
-}
-
-.form label {
-    color: var(--main-text-color);
-    font-size: 1.2rem;
-    font-weight: 500;
-}
-
-.form .check-box {
-    margin-top: 20px;
-}
-
-.check-box h3 {
-    font-size: 1rem;
-    color: var(--main-text-color);
-    font-weight: 400;
-    margin-bottom: 8px;
-}
-
-.description {
-    font-size: 1rem;
-    color: var(--description-text-color);
-    width: 100%;
-    font-weight: 400;
-    justify-content: flex-end;
-    font-style: italic;
-}
-
-.input-box .description {
-    width: 100%;
-    padding-left: 10px;
-}
-
-
-.form :where(.check-option, .check, .check div) {
-    column-gap: 5px;
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-}
-
-.form .check div label {
-    width: max-content;
-    flex-shrink: 0;
-}
-
-.form .check>div {
-    width: 100%;
-    flex-wrap: nowrap;
-}
-
-.form .check input {
-    margin-top: 1px;
-}
-
-.form :where(.check input, .check label) {
-    accent-color: var(--accent-color);
-    cursor: pointer;
-}
-
-.select-box select {
-    width: 100%;
-    height: 100%;
-    outline: none;
-    border: none;
-    color:  var(--main-text-color);
-    font-size: 1rem;
-}
-
-.form .button {
-    height: 55px;
-    width: 100%;
-    color: var(--button-color);
-    background-color: var(--button-color-nohover);
-    font-weight: 600;
-    border: none;
-    margin-top: 30px;
-    border-radius: 6px;
-    font-size: 1.3rem;
-    transition: all 0.1s ease-in-out;
-}
-
-.form .button:hover {
-    background-color: var(--backgrond-color-hover);
-}
-
-.form .multi-line>* {
-    margin-bottom: 15px;
-}
-
-.row {
-    flex-wrap: wrap;
-}
-
-#DarkMode{
-    position: absolute;
-    top: 60px;
-    transform: scale(2);
-    outline: none;
-    border: none;
-}
-
-.form input {
-    color: var(--main-text-color);
-}
-.form input:focus {
-    background-color: var(--input-color-hover);
-}
-.form input:invalid:not(input:focus) {
-    outline: 2px solid red;
-}
-@media screen and (max-width: 1000px) {
-
-    .form .check>div {
-        flex-wrap: wrap;
     }
 
-    .check-box .description {
-        font-size: 1rem;
-        font-weight: 400;
+    * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+        font-family: 'Poppins', sans-serif;
+        transition: all 0.2s ease-in-out;
+
+    }
+
+    body {
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 20px;
+        background: var(--backgrond-color);
+    }
+
+    .container {
         width: 100%;
-        justify-content: start;
-        padding-left: 10px;
+        max-width: 1000px;
+        padding: 25px;
+        background: var(--background-color);
+        border-radius: 8px;
+        box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+    }
+
+    .container header {
+        font-size: 1.5rem;
+        color: var(--main-text-color);
+        font-weight: 500;
+        text-align: center;
+    }
+
+    #output {
+        font-size: 1rem;
+        color: var(--main-text-color);
+        font-weight: 200;
+        text-align: center;
+        border: 2px solid var(--border-color);
+        border-radius: 6px;
+        padding: 10px 0;
+        margin-top: 10px;
+    }
+
+    .form :where(input, select) {
+        background: transparent;
+    }
+
+    .form .input-box {
+        width: 100%;
+        margin-top: 20px;
+    }
+
+    .input-box label {
+        color: var(--main-text-color);
+    }
+
+    .form :where(.input-box input, .select-box) {
+        position: relative;
+        width: 100%;
+        outline: none;
+        border-radius: 6px;
+        font-size: 1rem;
+        height: 50px;
+        border: 1px solid var(--border-color);
+        padding: 0 15px;
+    }
+
+    .form .column {
+        display: flex;
+        column-gap: 15px;
+    }
+
+    .form .column input {
+        position: relative;
+        width: 100%;
+        outline: none;
+        border-radius: 6px;
+        font-size: 1rem;
+        height: 50px;
+        border: 1px solid var(--border-color);
+        padding: 0 15px;
+    }
+
+    .form label {
+        color: var(--main-text-color);
+        font-size: 1.2rem;
+        font-weight: 500;
+    }
+
+    .form .check-box {
+        margin-top: 20px;
+    }
+
+    .check-box h3 {
+        font-size: 1rem;
+        color: var(--main-text-color);
+        font-weight: 400;
         margin-bottom: 8px;
     }
 
-    .column{
+    .description {
+        font-size: 1rem;
+        color: var(--description-text-color);
+        width: 100%;
+        font-weight: 400;
+        justify-content: flex-end;
+        font-style: italic;
+    }
+
+    .input-box .description {
+        width: 100%;
+        padding-left: 10px;
+    }
+
+
+    .form :where(.check-option, .check, .check div) {
+        column-gap: 5px;
+        display: flex;
+        align-items: center;
         flex-wrap: wrap;
     }
-}
+
+    .form .check div label {
+        width: max-content;
+        flex-shrink: 0;
+    }
+
+    .form .check>div {
+        width: 100%;
+        flex-wrap: nowrap;
+    }
+
+    .form .check input {
+        margin-top: 1px;
+    }
+
+    .form :where(.check input, .check label) {
+        accent-color: var(--accent-color);
+        cursor: pointer;
+    }
+
+    .select-box select {
+        width: 100%;
+        height: 100%;
+        outline: none;
+        border: none;
+        color: var(--main-text-color);
+        font-size: 1rem;
+    }
+
+    .form .button {
+        height: 55px;
+        width: 100%;
+        color: var(--button-color);
+        background-color: var(--button-color-nohover);
+        font-weight: 600;
+        border: none;
+        margin-top: 30px;
+        border-radius: 6px;
+        font-size: 1.3rem;
+        transition: all 0.1s ease-in-out;
+    }
+
+    .form .button:hover {
+        background-color: var(--backgrond-color-hover);
+    }
+
+    .form .multi-line>* {
+        margin-bottom: 15px;
+    }
+
+    .row {
+        flex-wrap: wrap;
+    }
+
+    #DarkMode {
+        position: absolute;
+        top: 60px;
+        transform: scale(2);
+        outline: none;
+        border: none;
+    }
+
+    .form input {
+        color: var(--main-text-color);
+    }
+
+    .form input:focus {
+        background-color: var(--input-color-hover);
+    }
+
+    .form input:invalid:not(input:focus) {
+        outline: 2px solid red;
+    }
+
+    @media screen and (max-width: 1000px) {
+
+        .form .check>div {
+            flex-wrap: wrap;
+        }
+
+        .check-box .description {
+            font-size: 1rem;
+            font-weight: 400;
+            width: 100%;
+            justify-content: start;
+            padding-left: 10px;
+            margin-bottom: 8px;
+        }
+
+        .column {
+            flex-wrap: wrap;
+        }
+    }
 </style>
\ No newline at end of file