noham/N_m3u8DL-RE_Command_Generator
1
0
Fork 0
mirror of https://github.com/NohamR/N_m3u8DL-RE_Command_Generator.git synced 2025-05-24 14:31:57 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

修复：带默认值的复选框表现和预期不符

Browse Source
This commit is contained in:
RikaCelery 2023-03-03 16:14:46 +08:00
parent 165b69beaa
commit c3b25ae653
1 changed files with 272 additions and 243 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

217
generator.html
View File

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