Merge pull request #13 from RikaCelery/update-v0.2.0-beta

extract style,js

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 ***** */

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'))
+}

index.html

@@ -8,13 +8,10 @@
         href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,700;1,400&display=swap.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="button-style.css">
 </head>
-<script>
+<script src="generator.js"></script>
-    function changeColor() {
-        document.body.classList.toggle('dark')
-        return
-    }
-</script>
 
 <body class="dark">
     <div id="DarkMode">
@@ -172,21 +169,20 @@
             <div class="column">
                 <div id="header" class="input-box ">
                     <div class="row">
-                        <label>header</label>
+                        <label>header</label><label class="button"
-                        <label class="button" onclick="insert('#header','header','为HTTP请求设置特定的请求头, 例如: -H &#x0022;Cookie: mycookie&#x0022; -H &#x0022;User-Agent: iOS&#x0022;')">+</label>
+                            onclick="insert('#header','header','为HTTP请求设置特定的请求头, 例如: -H &#x0022;Cookie: mycookie&#x0022; -H &#x0022;User-Agent: iOS&#x0022;')">+</label><label class="button" onclick="removeLast('#header')">-</label>
-                        <label class="button" onclick="removeLast('#header')">-</label>
+                        <input type="text" id="header"
-                        <input type="text" id="header" placeholder="为HTTP请求设置特定的请求头, 例如: -H &#x0022;Cookie: mycookie&#x0022; -H &#x0022;User-Agent: iOS&#x0022;">
+                            placeholder="为HTTP请求设置特定的请求头, 例如: -H &#x0022;Cookie: mycookie&#x0022; -H &#x0022;User-Agent: iOS&#x0022;">
                     </div>
                 </div>
             </div>
             <div class="column">
                 <div id="key" class="input-box ">
                     <div class="row">
-                        <label>key</label>
+                        <label>key</label><label class="button"
-                        <label class="button"
+                            onclick="insert('#key','key','设置解密密钥, 程序调用mp4decrpyt/shaka-packager进行解密. 格式: --key KID1:KEY1 --key KID2:KEY2')">+</label><label class="button" onclick="removeLast('#key')">-</label>
-                            onclick="insert('#key','key','设置解密密钥, 程序调用mp4decrpyt/shaka-packager进行解密. 格式: --key KID1:KEY1 --key KID2:KEY2')">+</label>
+                        <input type="text" id="key"
-                        <label class="button" onclick="removeLast('#key')">-</label>
+                            placeholder="设置解密密钥, 程序调用mp4decrpyt/shaka-packager进行解密. 格式: --key KID1:KEY1 --key KID2:KEY2">
-                        <input type="text" id="key" placeholder="设置解密密钥, 程序调用mp4decrpyt/shaka-packager进行解密. 格式: --key KID1:KEY1 --key KID2:KEY2">
                     </div>
                 </div>
             </div>
@@ -362,504 +358,3 @@
         </form>
     </section>
 </body>
-<script>
-    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'))
-    }
-</script>
-<style>
-    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
-
-    :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 {
-        width: 100%;
-        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);
-        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;
-        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;
-    }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-    /* ***** 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 ***** */
-
-    #DarkMode {
-        position: absolute;
-        display: block;
-        flex-grow: 0;
-        top: -30px;
-        left: 10px;
-        transform: scale(0.7) rotateZ(-90deg);
-    }
-</style>

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);
+}