diff --git a/button-style.css b/button-style.css new file mode 100644 index 0000000..2f7b2f2 --- /dev/null +++ b/button-style.css @@ -0,0 +1,120 @@ + /* ***** Colors - Start ***** */ + /* ***** Colors - End ***** */ + /* ***** Global Styles - Start ***** */ + * { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; + } + + + .container-switch { + display: flex; + justify-content: center; + align-items: center; + } + + /* ***** Global Styles - End ***** */ + /* ***** Specific Styles - Start ***** */ + + + .switch { + width: 60px; + height: 110px; + padding-top: 2px; + background-color: #514e4b; + border-radius: 40px; + cursor: pointer; + outline: none; + overflow: hidden; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + } + + .toggle-button { + transform: scale(0.8); + transform-origin: center center; + } + + .toggle { + position: relative; + width: 35px; + height: 35px; + margin: 12px; + margin-top: 12px; + background-color: #fff; + border-radius: 50%; + } + + .moon-mask { + position: absolute; + width: 35px; + height: 35px; + margin: -74px 0 0 34px; + background-color: #514e4b; + border-radius: 50%; + } + + .circle { + position: absolute; + width: 4px; + height: 8px; + background-color: #fff; + border-radius: 10px; + } + + .circle:first-child { + margin: -57px 0 0 27px; + } + + .circle:nth-child(2) { + margin: -9px 0 0 28px; + } + + .circle:nth-child(3) { + margin: -32px 0 0 51px; + transform: rotate(90deg); + } + + .circle:nth-child(4) { + margin: -33px 0 0 4px; + transform: rotate(90deg); + } + + .circle:nth-child(5) { + margin: -14px 0 0 10px; + transform: rotate(45deg); + } + + .circle:nth-child(6) { + margin: -14px 0 0 45px; + transform: rotate(320deg); + } + + .circle:nth-child(7) { + margin: -50px 0 0 10px; + transform: rotate(135deg); + } + + .circle:nth-child(8) { + margin: -50px 0 0 45px; + transform: rotate(235deg); + } + + .text p { + margin-left: 5px; + font-size: 55px; + line-height: 1.1; + font-weight: 700; + } + + .social-icons { + display: flex; + justify-content: space-between; + position: fixed; + bottom: 20px; + right: 20px; + width: 70px; + } + + /* ***** Specific Styles - End ***** */ diff --git a/generator.js b/generator.js new file mode 100644 index 0000000..50077fd --- /dev/null +++ b/generator.js @@ -0,0 +1,98 @@ +function changeColor() { + document.body.classList.toggle('dark') + return +} +const animate = gsap.timeline({ paused: true }); +const animateBackground = new TimelineMax({ paused: true }); +let toggle = true; + +animateBackground + .set(".switch", { boxShadow: "0 0 10px rgba(255, 255, 255, 0.2)" }) + .to(".text p", 0.1, { color: "#FFF" }, 0.1); + +animate + .set(".circle", { backgroundColor: "rgba(0,0,0,0)" }, 0.2) + .to(".toggle-button", 0.1, { scale: 0.7 }, 0) + .set(".toggle", { backgroundColor: "#FFF" }) + .to(".moon-mask", 0.2, { translateY: 20, translateX: -10 }, 0.3) + .to(".toggle-button", 0.1, { translateY: 49 }, 0.1) + .to(".toggle-button", 0.1, { scale: 0.9 }) + +document.getElementsByClassName("switch")[0].addEventListener("click", () => { + if (toggle) { + animate.restart(); + animateBackground.restart(); + } else { + animate.reverse(); + animateBackground.reverse(); + } + toggle = !toggle; + changeColor() +}); + +function insert(pos, id, placeholder) { + let input = document.createElement('input') + input.type = 'text' + input.id = id + input.placeholder = placeholder + input.oninput = () => { generate('generator_body') } + document.querySelector(pos).appendChild(input) +} +function removeLast(pos) { + console.log(document.querySelector(pos).lastChild.tagName); + if (document.querySelector(pos).lastChild.tagName != 'INPUT') { + return + } + document.querySelector(pos).removeChild(document.querySelector(pos).lastChild) +} +function generate(params) { + let form = document.getElementById(params) + // console.log(form) + let list = form.querySelectorAll('input') + let finalArgs = [] + for (let index = 0; index < list.length; index++) { + const element = list[index]; + switch (element.type) { + case 'text': + if (element.value.length != 0) { + if (element.id != 'input') { + finalArgs.push('--' + element.id + ' "' + element.value + '"') + + } else { + finalArgs.push('"' + element.value + '"') + } + } + break; + case 'checkbox': + + if (element.checked != Boolean(element.getAttribute('default'))) { + finalArgs.push('--' + element.id) + finalArgs.push(String(element.checked)) + } + break; + + default: + break; + } + // console.log(element.type + ' ' + element.id + ' value:[' + element.value + '] ' + element.placeholder) + } + let list2 = form.querySelectorAll('select') + for (let index = 0; index < list2.length; index++) { + const element = list2[index]; + let opt = element.options[element.selectedIndex] + if (opt.value === '' || opt.hidden) { + // console.log(element.type + ' ' + element.id + ' ' + 'hidden') + } else { + if (element.value.length != 0) { + finalArgs.push('--' + element.id + ' "' + opt.value + '"') + } + // console.log(element.type + ' ' + element.id + ' ' + opt.value) + } + } + document.getElementById('output').textContent = 'N_m3u8DL-RE.exe ' + finalArgs.join(" ") + console.log(finalArgs.join(" ")) +} +generate('generator_body') +for (const input of document.querySelectorAll('input')) { + input.addEventListener('input', () => generate('generator_body')) +} \ No newline at end of file diff --git a/generator.html b/index.html similarity index 56% rename from generator.html rename to index.html index cac6edb..964c890 100644 --- a/generator.html +++ b/index.html @@ -1,865 +1,360 @@ - - - - - - Command Generator - - - - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Generator
-
-
-
-
- - -
-
- - -
-
- - -
-
-
-
- - -
-
- - -
-
- - -
-
-
-
- - -
-
- - -
-
-
-
- - -
-
- - -
-
-
- - -
-
- - -
- -
-
- - -
-
- - -
-
-
-
- - -
-
- - -
-
-
- -
- - -
-
- - -
-
-
-
- - -
-
- - -
-
-
-
- - -
-
- - -
-
- - -
-
-
-
- - -
-
- - -
-
- - -
-
-
-
-
- - - - -
-
-
-
-
-
- - - - -
-
-
-
-
- -
设置日志级别
-
- -
-
-
- -
指定HLS加密方式
-
- -
-
-
- -
字幕输出类型
-
- -
-
-
- -
设置UI语言
-
- -
-
-
- - -
-
-
-
- - -
关闭日志文件输出
-
-
- - -
自动选择所有类型的最佳轨道
-
-
- - -
跳过合并分片
-
-
- - -
跳过下载
-
-
- - -
检测实际下载的分片数量和预期数量是否匹配
-
-
- - -
二进制合并
-
-
- - -
完成后删除临时文件
-
-
- - -
混流时不写入日期信息
-
-
- - -
解析后的信息是否输出json文件
-
-
- - -
将输入Url的Params添加至分片, 对某些网站很有用, 例如 kakao.com
-
-
- - -
并发下载已选择的音频、视频和字幕
-
-
- - -
只选取字幕轨道
-
-
- - -
自动修正字幕
-
-
- - -
解密时使用shaka-packager替代mp4decrypt
-
-
- - -
实时解密MP4分片
-
-
- - -
使用系统默认代理
-
-
- - -
以点播方式下载直播流
-
-
- - -
录制直播时实时合并
-
-
- - -
录制直播并开启实时合并时依然保留分片
-
-
- - -
录制直播并开启实时合并时通过管道+ffmpeg实时混流到TS文件
-
-
- - -
通过读取音频文件的起始时间修正VTT字幕
-
- -
-
-
- -
-
- - - \ No newline at end of file + + + + + + Command Generator + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Generator
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+ +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+ +
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+
+ +
设置日志级别
+
+ +
+
+
+ +
指定HLS加密方式
+
+ +
+
+
+ +
字幕输出类型
+
+ +
+
+
+ +
设置UI语言
+
+ +
+
+
+ + +
+
+
+
+ + +
关闭日志文件输出
+
+
+ + +
自动选择所有类型的最佳轨道
+
+
+ + +
跳过合并分片
+
+
+ + +
跳过下载
+
+
+ + +
检测实际下载的分片数量和预期数量是否匹配
+
+
+ + +
二进制合并
+
+
+ + +
完成后删除临时文件
+
+
+ + +
混流时不写入日期信息
+
+
+ + +
解析后的信息是否输出json文件
+
+
+ + +
将输入Url的Params添加至分片, 对某些网站很有用, 例如 kakao.com
+
+
+ + +
并发下载已选择的音频、视频和字幕
+
+
+ + +
只选取字幕轨道
+
+
+ + +
自动修正字幕
+
+
+ + +
解密时使用shaka-packager替代mp4decrypt
+
+
+ + +
实时解密MP4分片
+
+
+ + +
使用系统默认代理
+
+
+ + +
以点播方式下载直播流
+
+
+ + +
录制直播时实时合并
+
+
+ + +
录制直播并开启实时合并时依然保留分片
+
+
+ + +
录制直播并开启实时合并时通过管道+ffmpeg实时混流到TS文件
+
+
+ + +
通过读取音频文件的起始时间修正VTT字幕
+
+ +
+
+
+ +
+
+ \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..d8ef43c --- /dev/null +++ b/style.css @@ -0,0 +1,273 @@ + +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap'); +header,.description,.button{ + -webkit-user-select: none; + user-select: none; +} +:root { + --backgrond-color: rgb(130, 106, 251); + --accent-color: rgb(130, 106, 251); + --backgrond-color-hover: var(rgb(81, 57, 202)); + --input-color-hover: rgba(130, 106, 251, 0.501); + --button-color-nohover: rgb(130, 106, 251); + --button-color: #fff; + --main-text-color: rgb(0, 0, 0); + --description-text-color: rgb(120, 120, 120); + --background-color: #fff; + --border-color: #ddd; +} + +.dark { + --backgrond-color: rgb(16, 13, 29); + --accent-color: rgb(130, 106, 251); + --backgrond-color-hover: rgb(80, 64, 168); + --input-color-hover: rgba(81, 57, 202, 0.688); + --button-color-nohover: rgb(52, 52, 81); + --button-color: #fff; + --main-text-color: rgb(205, 205, 205); + --description-text-color: rgb(120, 120, 120); + --background-color: rgb(31, 31, 31); + --border-color: rgb(61, 61, 61); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; + transition: all 0.2s ease-in-out; + +} + +body { + height: 100vh; + display: flex; + overflow: hidden; + align-items: center; + justify-content: center; + padding: 20px; + padding-top: 40px; + background: var(--backgrond-color); +} + +.container { + max-height: 100%; + max-width: 1000px; + display: block; + overflow: scroll; + 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); + -webkit-user-select: none; + user-select: none; + 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%; + padding: 0px 0px; + outline: none; + border: none; + color: var(--main-text-color); + background-color: var(--background-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; + margin-left: 3px; + margin-right: 3px; + 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; +} + + +.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; + } +} + +::-webkit-scrollbar { + display: none; +} + +label.button { + z-index: 0; + padding: 0 8px; + width: 20px; + height: 20px; + background-color: var(--accent-color); + border-radius: 40px; +} + +#DarkMode { + position: absolute; + display: block; + flex-grow: 0; + top: -30px; + left: 10px; + transform: scale(0.7) rotateZ(-90deg); +} \ No newline at end of file