    <!DOCTYPE html>
    <html lang="fa">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>BPB Panel Changer</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <style>
            :root {
                --color: black;
                --primary-color: #09639f;
                --secondary-color: #3498db;
                --header-color: #09639f;
                --background-color: #fff;
                --form-background-color: #f9f9f9;
                --table-active-color: #f2f2f2;
                --hr-text-color: #3b3b3b;
                --lable-text-color: #333;
                --border-color: #ddd;
                --button-color: #09639f;
                --input-background-color: white;
                --header-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
            }
            body { font-family: system-ui, Tahoma; background-color: var(--background-color); color: var(--color) }

            body.dark-mode {
                --color: white;
                --primary-color: #09639F;
                --secondary-color: #3498DB;
                --header-color: #3498DB;
                --background-color: #121212;
                --form-background-color: #121212;
                --table-active-color: #252525;
                --hr-text-color: #D5D5D5;
                --lable-text-color: #DFDFDF;
                --border-color: #353535;
                --button-color: #3498DB;
                --input-background-color: #252525;
                --header-shadow: 2px 2px 4px rgba(255, 255, 255, 0.25);
            }

            .material-symbols-outlined {
                margin-left: 5px;
                font-variation-settings:
                'FILL' 0,
                'wght' 400,
                'GRAD' 0,
                'opsz' 24
            }
            details { border-bottom: 1px solid var(--border-color); }
            summary {
                font-weight: bold;
                cursor: pointer;
                text-align: center;
                text-wrap: nowrap;
            }
            summary::marker { font-size: 1.5rem; color: var(--secondary-color); }
            summary h2 { display: inline-flex; }
            h1 { font-size: 2.5em; text-align: center; color: var(--header-color); text-shadow: var(--header-shadow); }
            h2,h3 { margin: 30px 0; text-align: center; color: var(--hr-text-color); }
            h2 {direction:rtl;}
            hr { border: 1px solid var(--border-color); margin: 20px 0; }
            .footer {
                display: flex;
                font-weight: 600;
                margin: 10px auto 0 auto;
                justify-content: center;
                align-items: center;
            }
            .footer button {margin: 0 20px; background: #212121; max-width: fit-content;}
            .footer button:hover, .footer button:focus { background: #3b3b3b;}
            .form-control a, a.link { text-decoration: none; }
            .form-control {
                margin-bottom: 20px;
                font-family: Arial, sans-serif;
                display: flex;
                flex-direction: column;
            }
            .form-control button {
                background-color: var(--form-background-color);
                font-size: 1.1rem;
                font-weight: 600;
                color: var(--button-color);
                border-color: var(--primary-color);
                border: 1px solid;
                margin-top: 10px;
    			width: 98%;
            }
            #apply {display: block; margin-top: 20px;}
            input.button {font-weight: 600; font-size: 1.1rem;}
            label {
                display: block;
                margin-bottom: 5px;
                font-size: 110%;
                font-weight: 600;
                color: var(--lable-text-color);
            }
            input[type="text"],
            input[type="number"],
            input[type="url"],
            textarea,
            select {
                width: 100%;
                text-align: left;
                padding: 10px;
                border: 1px solid var(--border-color);
                border-radius: 5px;
                font-size: 16px;
                color: var(--lable-text-color);
                background-color: var(--input-background-color);
                box-sizing: border-box;
                transition: border-color 0.3s ease;
            }
            input[type="text"]:focus,
            input[type="number"]:focus,
            input[type="url"]:focus,
            textarea:focus,
            select:focus { border-color: var(--secondary-color); outline: none; }
            .button {
                display: flex;
                align-items: left;
                justify-content: center;
                width: 100%;
                white-space: nowrap;
                padding: 10px 15px;
                font-size: 16px;
                font-weight: 600;
                letter-spacing: 1px;
                border: none;
                border-radius: 5px;
                color: white;
                background-color: var(--primary-color);
                cursor: pointer;
                outline: none;
                box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
                transition: all 0.3s ease;
            }

            #maincode:focus {height: 20rem;}
            input[type="checkbox"] {
                background-color: var(--input-background-color);
                style="margin: 0;
                grid-column: 2;"
            }
            table button { margin: auto; width: auto; }
            .button.disabled, .button[disabled] {
                background-color: #ccc;
                cursor: not-allowed;
                box-shadow: none;
                pointer-events: none;
            }
            .button:hover,
            table button:hover,
            table button:focus {
                background-color: #2980b9;
                box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
                transform: translateY(-2px);
            }
            .header-container button:hover {
                transform: scale(1.1);
            }
            button.button:hover { color: white; }
            .button:active,
            table button:active { transform: translateY(1px); box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); }
            .form-container {
                max-width: 90%;
                margin: 0 auto;
                padding: 20px;
                background: var(--form-background-color);
                border: 1px solid var(--border-color);
                border-radius: 10px;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                margin-bottom: 100px;
            }
            .table-container { margin-top: 20px; overflow-x: auto; }
            table {
                width: 100%;
                border: 1px solid var(--border-color);
                border-collapse: separate;
                border-spacing: 0;
                border-radius: 10px;
                margin-bottom: 20px;
                overflow: hidden;
            }
            th, td { padding: 10px; border-bottom: 1px solid var(--border-color); }
            td div { display: flex; align-items: center; }
            th { background-color: var(--secondary-color); color: white; font-weight: bold; font-size: 1.1rem; width: 50%;}
            td:last-child { background-color: var(--table-active-color); }
            tr:hover { background-color: var(--table-active-color); }

            .close { color: var(--color); float: right; font-size: 28px; font-weight: bold; }
            .close:hover,
            .close:focus { color: black; text-decoration: none; cursor: pointer; }
            .form-control label {
                display: block;
                margin-bottom: 8px;
                font-size: 110%;
                font-weight: 600;
                color: var(--lable-text-color);
                line-height: 1.3em;
            }
            .form-control input[type="password"] {
                width: 100%;
                padding: 10px;
                border: 1px solid var(--border-color);
                border-radius: 5px;
                font-size: 16px;
                color: var(--lable-text-color);
                background-color: var(--input-background-color);
                box-sizing: border-box;
                margin-bottom: 15px;
                transition: border-color 0.3s ease;
            }
            .routing {
                display: grid;
                justify-content: flex-start;
                grid-template-columns: 1fr 1fr 10fr 1fr;
                margin-bottom: 15px;
            }
            .form-control .routing input { grid-column: 2 / 3; }
            #routing-rules.form-control { display: grid; grid-template-columns: 1fr 1fr; }
            .routing label {
                text-align: left;
                margin: 0 0 0 10px;
                font-weight: 400;
                font-size: 100%;
                text-wrap: nowrap;
            }
            .form-control input[type="password"]:focus { border-color: var(--secondary-color); outline: none; }
            #passwordError { color: red; margin-bottom: 10px; }
            .symbol { margin-right: 8px; }

            .floating-button {
                position: fixed;
                bottom: 20px;
                left: 20px;
                background-color: var(--color);
                color: white;
                border: none;
                border-radius: 50%;
                width: 60px;
                height: 60px;
                font-size: 24px;
                cursor: pointer;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
                transition: background-color 0.3s, transform 0.3s;
            }
            .floating-button:hover { transform: scale(1.1); }
            .min-max { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; width: 100%; }
            .min-max span { text-align: center; white-space: pre; }
            .input-with-select { width: 100%; }
            body.dark-mode .floating-button { background-color: var(--color); }
            body.dark-mode .floating-button:hover { transform: scale(1.1); }
            #ips th { background-color: var(--hr-text-color); color: var(--background-color); width: unset; }
            #ips td { background-color: unset; }
            #ips td:first-child { background-color: var(--table-active-color); }
            .header-container { display: flex; align-items: center; justify-content: center; }

            @media only screen and (min-width: 768px) {
                .form-container { max-width: 70%; }
                .form-control {
                    margin-bottom: 15px;
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    align-items: baseline;
                    justify-content: flex-end;
                    font-family: Arial, sans-serif;
                }
                #apply { display: block; margin: 20px auto 0 auto; max-width: 50%; }
                .modal-content { width: 30% }
                .routing { display: grid; grid-template-columns: 4fr 1fr 3fr 4fr; }
            }
            .rtl {direction:rtl; font-family: 'B Titr', Tahoma;}
            a {cursor: pointer;}

            .note, .form-control.rtl  {display: block;color:#F80;}
            .errorBox, .form-control.errorBox {
            	display: none;
            	color: #F00 !important;
            	font-size: large;
    			text-align: center;
    		}
        </style>
    </head>
    <body>
        <h1 class="rtl">تغيير کلمات کليدي پنل </h1>
        <div class="form-container">
            <h2>کد اصلي پروژه را اینجا وارد کنيد:</h2>
            <div id="errorVersion" class=" form-control rtl errorBox" style="display: none;">
                  👈 توجه اين نسخه از پروژه پشتيباني نميشود و کدگزاري مجدد درست عمل نخواهد کرد ! 👉
            </div>
            <div class="table-container">
                <textarea id="maincode" onchange="CheckBPBVrsion()"></textarea>
            </div>


            <div class="form-control rtl note">
				* توجه کنيد اين کد نبايد obfuscation شده باشد، بعد از اينکه اين تغييرات را انجام دادید؛ کد را obfuscation کنيد و بعد در کلودفلر اجرا نماييد.
                <br>
                &nbsp;&nbsp
			</div>
            </div>
        </div>
        <div class="form-container">

            <div class="form-control rtl">
* 			کلماتي که انتخاب ميکنيد نبايد تکراري باشد وگرنه سيستم دچار مشکل ميشود.
            </div>
		<hr />
            <form id="configForm">
            	<!--- ////////////////////////////  URL  \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ -->
                <details open>


                    <summary><h2>آدرس هاي دسترسي به پنل</h2></summary>
                    <div class="form-control">
                        <label for="panel">/panel</label>
                        <input type="text" id="panel" name="bpbdata" value="" placeholder="administrator" pattern="[a-z]{3,}$" title="فقط حروف کوچک انگليسي" required>
                        <input type="hidden" id="_panel" value="/panel">
                    </div>
                    <div class="form-control rtl">
                    * اين نام را بخاطر بسپاريد. چون با اين کلمه ميتوانيد وارد پنل شويد
                    </div>
                    <div class="form-control">
                        <label for="login">/login</label>
                        <input type="text" id="login" name="bpbdata" data="/login" value="" placeholder="signin" pattern="[a-z]{3,}$" title="فقط حروف کوچک انگليسي" required>
                        <input type="hidden" id="_login" value="/login">
                    </div>
                    <div class="form-control">
                        <label for="secrets">/secrets</label>
                        <input type="text" id="secrets" name="bpbdata" value="" placeholder="autogen" pattern="[a-z]{3,}$" title="فقط حروف کوچک انگليسي" required>
                        <input type="hidden" id="_secrets" value="/secrets">
                    </div>
                </details>
                <!--- ////////////////////////////  Variables  \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ -->
                <details>
                    <summary><h2>صفحه اصلي</h2></summary>
                    <div class="form-control">
                        <label for="homePage">www.speedtest.net (Home page)</label>
                        <input type="text" id="homePage" name="homePage" value="" placeholder="speed.cloudflare.com" pattern="[a-z0-9.]{3,}$" list="hostsample" title="سايتي که بجاي صفحه اصلي نمايش داده ميشود">
                    	<datalist id='hostsample'>
                    	<option value='www.speedtest.net'>
                    	<option value='speed.cloudflare.com'>
                    	<option value='speedtest.gcore.com'>
                    	<option value='natesmith.design'>
                    	<option value='postevand.com'>
                    	<option value='ictfz.ir'>
                    	</datalist>

                    </div>
                    <div class="form-control rtl">
                    * سايتي را انتخاب بکنيد که ساده و سبک باشد. سايت هاي شلوغ و سنگين فشار زيادي به سرور خواهند آورد.
                    </div>

                </details>
                <!--- ////////////////////////////  Variables  \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ -->
                <details open>
                    <summary><h2>متغير هاي کلودفلر (Variables and Secrets)</h2></summary>
                    <div class="form-control">
                        <label for="envbpb">bpb  --> (KV)</label>
                        <input type="text" id="envbpb" name="bpbdata" value="" placeholder="data" pattern="[a-z]{2,}$" title="فقط حروف کوچک انگليسي" required>
                        <input type="hidden" id="_envbpb" value="env.bpb">
                    </div>
                    <div class="form-control rtl">
                      * با اين نام ديتابيس KV را به پروژه متصل خواهيد کرد.
                    </div>
                    <hr >
                    <div class="form-control">
                        <label for="envuuid">UUID</label>
                        <input type="text" id="envuuid" name="bpbdata" value="" placeholder="Key" pattern="[a-zA-Z]{2,}$" title="حروف انگليسي" required>
                        <input type="hidden" id="_envuuid" value="env.UUID">
                    </div>
                    <div class="form-control">
                        <label for="envtrojanpass">TROJAN_PASS</label>
                        <input type="text" id="envtrojanpass" name="bpbdata" value="" placeholder="MyPass" pattern="[a-zA-Z]{2,}$" title="حروف انگليسي" required>
                        <input type="hidden" id="_envtrojanpass" value="env.TROJAN_PASS">
                    </div>
                    <div class="form-control">
                        <label for="envproxyip">PROXYIP</label>
                        <input type="text" id="envproxyip" name="bpbdata" value="" placeholder="PxIP" pattern="[a-zA-Z]{2,}$" title="حروف انگليسي" required>
                        <input type="hidden" id="_envproxyip" value="env.PROXYIP">
                    </div>
                    <div class="form-control rtl">
                      * توجه کنيد که بايد دقيقا از اين کلمات براي وارد کردن متغيير به کلودفلر استفاده کنيد
                    </div>
                </details>
                <!--- ////////////////////////////  Functions \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ -->
                <details open>
                    <summary><h2>توابع اصلي</h2></summary>
                    <div class="form-control">
                        <label for="vlessOverWSHandler">vlessOverWSHandler() <a title="Generate Random Functions Name" class="random" onclick="setRandom('vlessOverWSHandler')">&#128515;</a></label>
                        <input type="text" id="vlessOverWSHandler" name="bpbdata" value="" pattern="[a-zA-Z]{5,}$" required>
                        <input type="hidden" id="_vlessOverWSHandler" value="vlessOverWSHandler">
                    </div>
                    <div class="form-control">
                        <label for="trojanOverWSHandler">trojanOverWSHandler() <a title="Generate Random Functions Name" class="random" onclick="setRandom('trojanOverWSHandler')">&#128515;</a></label>
                        <input type="text" id="trojanOverWSHandler" name="bpbdata" value="" pattern="[a-zA-Z]{5,}$" required>
                        <input type="hidden" id="_trojanOverWSHandler" value="trojanOverWSHandler">
                    </div>
                    <div class="form-control">
                        <label for="handleTCPOutBound">handleTCPOutBound() <a title="Generate Random Functions Name" class="random" onclick="setRandom('handleTCPOutBound')">&#128515;</a></label>
                        <input type="text" id="handleTCPOutBound" name="bpbdata" value="" pattern="[a-zA-Z]{5,}$" required>
                        <input type="hidden" id="_handleTCPOutBound" value="handleTCPOutBound">
                    </div>
                    <div class="form-control">
                        <label for="makeReadableWebSocketStream">makeReadableWebSocketStream() <a title="Generate Random Functions Name" class="random" onclick="setRandom('makeReadableWebSocketStream')">&#128515;</a></label>
                        <input type="text" id="makeReadableWebSocketStream" name="bpbdata" value="" pattern="[a-zA-Z]{5,}$" required>
                        <input type="hidden" id="_makeReadableWebSocketStream" value="makeReadableWebSocketStream">
                    </div>
                    <div class="form-control">
                        <label for="processVlessHeader">processVlessHeader() <a title="Generate Random Functions Name" class="random" onclick="setRandom('processVlessHeader')">&#128515;</a></label>
                        <input type="text" id="processVlessHeader" name="bpbdata" value="" pattern="[a-zA-Z]{5,}$" required>
                        <input type="hidden" id="_processVlessHeader" value="processVlessHeader">
                    </div>
                    <div class="form-control">
                        <label for="vlessRemoteSocketToWS">vlessRemoteSocketToWS() <a title="Generate Random Functions Name" class="random" onclick="setRandom('vlessRemoteSocketToWS')">&#128515;</a></label>
                        <input type="text" id="vlessRemoteSocketToWS" name="bpbdata" value="" pattern="[a-zA-Z]{5,}$" required>
                        <input type="hidden" id="_vlessRemoteSocketToWS" value="vlessRemoteSocketToWS">
                    </div>
                     <div class="form-control">
                        <label for="trojanRemoteSocketToWS">trojanRemoteSocketToWS() <a title="Generate Random Functions Name" class="random" onclick="setRandom('trojanRemoteSocketToWS')">&#128515;</a></label>
                        <input type="text" id="trojanRemoteSocketToWS" name="bpbdata" value="" pattern="[a-zA-Z]{5,}$" required>
                        <input type="hidden" id="_trojanRemoteSocketToWS" value="trojanRemoteSocketToWS">
                    </div>
                    <div class="form-control">
                        <label for="parseTrojanHeader">parseTrojanHeader() <a title="Generate Random Functions Name" class="random" onclick="setRandom('parseTrojanHeader')">&#128515;</a></label>
                        <input type="text" id="parseTrojanHeader" name="bpbdata" value="" pattern="[a-zA-Z]{5,}$" required>
                        <input type="hidden" id="_parseTrojanHeader" value="parseTrojanHeader">
                    </div>
                 </details>
                <!--- ////////////////////////////  Functions \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ -->
                <details>
                    <summary><h2>توابع فرعی (حالت پیشرفته)</h2></summary>

                    <div class="form-control">
                        <label for="buildXrayRoutingRules">buildXrayRoutingRules() <a title="Generate Random Functions Name" class="random" onclick="setRandom('buildXrayRoutingRules')">&#128515;</a></label>
                        <input type="text" id="buildXrayRoutingRules" name="bpbdata" value="" pattern="[a-zA-Z]{5,}$">
                        <input type="hidden" id="_buildXrayRoutingRules" value="buildXrayRoutingRules">
                    </div>
                    <div class="form-control">
                        <label for="buildXrayVLESSOutbound">buildXrayVLESSOutbound() <a title="Generate Random Functions Name" class="random" onclick="setRandom('buildXrayVLESSOutbound')">&#128515;</a></label>
                        <input type="text" id="buildXrayVLESSOutbound" name="bpbdata" value="" pattern="[a-zA-Z]{5,}$">
                        <input type="hidden" id="_buildXrayVLESSOutbound" value="buildXrayVLESSOutbound">
                    </div>
                    <div class="form-control">
                        <label for="SSS">buildXrayTrojanOutbound() <a title="Generate Random Functions Name" class="random" onclick="setRandom('buildXrayTrojanOutbound')">&#128515;</a></label>
                        <input type="text" id="buildXrayTrojanOutbound" name="bpbdata" value="" pattern="[a-zA-Z]{5,}$">
                        <input type="hidden" id="_buildXrayTrojanOutbound" value="buildXrayTrojanOutbound">
                    </div>
                    <div class="form-control">
                        <label for="buildXrayWarpOutbound">buildXrayWarpOutbound() <a title="Generate Random Functions Name" class="random" onclick="setRandom('buildXrayWarpOutbound')">&#128515;</a></label>
                        <input type="text" id="buildXrayWarpOutbound" name="bpbdata" value="" pattern="[a-zA-Z]{5,}$">
                        <input type="hidden" id="_buildXrayWarpOutbound" value="buildXrayWarpOutbound">
                    </div>
                    <div class="form-control">
                        <label for="buildXrayChainOutbound">buildXrayChainOutbound() <a title="Generate Random Functions Name" class="random" onclick="setRandom('buildXrayChainOutbound')">&#128515;</a></label>
                        <input type="text" id="buildXrayChainOutbound" name="bpbdata" value="" pattern="[a-zA-Z]{5,}$">
                        <input type="hidden" id="_buildXrayChainOutbound" value="buildXrayChainOutbound">
                    </div>
                    <div class="form-control">
                        <label for="buildXrayConfig">buildXrayConfig() <a title="Generate Random Functions Name" class="random" onclick="setRandom('buildXrayConfig')">&#128515;</a></label>
                        <input type="text" id="buildXrayConfig" name="bpbdata" value="" pattern="[a-zA-Z]{5,}$">
                        <input type="hidden" id="_buildXrayConfig" value="buildXrayConfig">
                    </div>
                    <div class="form-control">
                        <label for="buildXrayBestPingConfig">buildXrayBestPingConfig() <a title="Generate Random Functions Name" class="random" onclick="setRandom('buildXrayBestPingConfig')">&#128515;</a></label>
                        <input type="text" id="buildXrayBestPingConfig" name="bpbdata" value="" pattern="[a-zA-Z]{5,}$">
                        <input type="hidden" id="_buildXrayBestPingConfig" value="buildXrayBestPingConfig">
                    </div>
                    <div class="form-control">
                        <label for="buildXrayBestFragmentConfig">buildXrayBestFragmentConfig() <a title="Generate Random Functions Name" class="random" onclick="setRandom('buildXrayBestFragmentConfig')">&#128515;</a></label>
                        <input type="text" id="buildXrayBestFragmentConfig" name="bpbdata" value="" pattern="[a-zA-Z]{5,}$">
                        <input type="hidden" id="_buildXrayBestFragmentConfig" value="buildXrayBestFragmentConfig">
                    </div>
                    <div class="form-control">
                        <label for="getXrayCustomConfigs">getXrayCustomConfigs() <a title="Generate Random Functions Name" class="random" onclick="setRandom('getXrayCustomConfigs')">&#128515;</a></label>
                        <input type="text" id="getXrayCustomConfigs" name="bpbdata" value="" pattern="[a-zA-Z]{5,}$">
                        <input type="hidden" id="_getXrayCustomConfigs" value="getXrayCustomConfigs">
                    </div>

                     <div class="form-control">
                        <label for="getXrayWarpConfigs">getXrayWarpConfigs() <a title="Generate Random Functions Name" class="random" onclick="setRandom('getXrayWarpConfigs')">&#128515;</a></label>
                        <input type="text" id="getXrayWarpConfigs" name="bpbdata" value="" pattern="[a-zA-Z]{5,}$">
                        <input type="hidden" id="_getXrayWarpConfigs" value="getXrayWarpConfigs">
                    </div>

                     <div class="form-control">
                        <label for="buildSingBoxDNS">buildSingBoxDNS() <a title="Generate Random Functions Name" class="random" onclick="setRandom('buildSingBoxDNS')">&#128515;</a></label>
                        <input type="text" id="buildSingBoxDNS" name="bpbdata" value="" pattern="[a-zA-Z]{5,}$">
                        <input type="hidden" id="_buildSingBoxDNS" value="buildSingBoxDNS">
                    </div>

                     <div class="form-control">
                        <label for="buildSingBoxRoutingRules">buildSingBoxRoutingRules() <a title="Generate Random Functions Name" class="random" onclick="setRandom('buildSingBoxRoutingRules')">&#128515;</a></label>
                        <input type="text" id="buildSingBoxRoutingRules" name="bpbdata" value="" pattern="[a-zA-Z]{5,}$">
                        <input type="hidden" id="_buildSingBoxRoutingRules" value="buildSingBoxRoutingRules">
                    </div>

                     <div class="form-control">
                        <label for="buildSingBoxVLESSOutbound">buildSingBoxVLESSOutbound() <a title="Generate Random Functions Name" class="random" onclick="setRandom('buildSingBoxVLESSOutbound')">&#128515;</a></label>
                        <input type="text" id="buildSingBoxVLESSOutbound" name="bpbdata" value="" pattern="[a-zA-Z]{5,}$">
                        <input type="hidden" id="_buildSingBoxVLESSOutbound" value="buildSingBoxVLESSOutbound">
                    </div>

                     <div class="form-control">
                        <label for="buildSingBoxTrojanOutbound">buildSingBoxTrojanOutbound() <a title="Generate Random Functions Name" class="random" onclick="setRandom('buildSingBoxTrojanOutbound')">&#128515;</a></label>
                        <input type="text" id="buildSingBoxTrojanOutbound" name="bpbdata" value="" pattern="[a-zA-Z]{5,}$">
                        <input type="hidden" id="_buildSingBoxTrojanOutbound" value="buildSingBoxTrojanOutbound">
                    </div>

                     <div class="form-control">
                        <label for="buildSingBoxWarpOutbound">buildSingBoxWarpOutbound() <a title="Generate Random Functions Name" class="random" onclick="setRandom('buildSingBoxWarpOutbound')">&#128515;</a></label>
                        <input type="text" id="buildSingBoxWarpOutbound" name="bpbdata" value="" pattern="[a-zA-Z]{5,}$">
                        <input type="hidden" id="_buildSingBoxWarpOutbound" value="buildSingBoxWarpOutbound">
                    </div>

                     <div class="form-control">
                        <label for="buildSingBoxChainOutbound">buildSingBoxChainOutbound() <a title="Generate Random Functions Name" class="random" onclick="setRandom('buildSingBoxChainOutbound')">&#128515;</a></label>
                        <input type="text" id="buildSingBoxChainOutbound" name="bpbdata" value="" pattern="[a-zA-Z]{5,}$">
                        <input type="hidden" id="_buildSingBoxChainOutbound" value="buildSingBoxChainOutbound">
                    </div>

                     <div class="form-control">
                        <label for="getSingBoxWarpConfig">getSingBoxWarpConfig() <a title="Generate Random Functions Name" class="random" onclick="setRandom('getSingBoxWarpConfig')">&#128515;</a></label>
                        <input type="text" id="getSingBoxWarpConfig" name="bpbdata" value="" pattern="[a-zA-Z]{5,}$">
                        <input type="hidden" id="_getSingBoxWarpConfig" value="getSingBoxWarpConfig">
                    </div>
                     <div class="form-control">
                        <label for="getSingBoxCustomConfig">getSingBoxCustomConfig() <a title="Generate Random Functions Name" class="random" onclick="setRandom('getSingBoxCustomConfig')">&#128515;</a></label>
                        <input type="text" id="getSingBoxCustomConfig" name="bpbdata" value="" pattern="[a-zA-Z]{5,}$">
                        <input type="hidden" id="_getSingBoxCustomConfig" value="getSingBoxCustomConfig">
                    </div>
                     <div class="form-control">
                        <label for="buildClashDNS">buildClashDNS() <a title="Generate Random Functions Name" class="random" onclick="setRandom('buildClashDNS')">&#128515;</a></label>
                        <input type="text" id="buildClashDNS" name="bpbdata" value="" pattern="[a-zA-Z]{5,}$">
                        <input type="hidden" id="_buildClashDNS" value="buildClashDNS">
                    </div>
                     <div class="form-control">
                        <label for="buildClashRoutingRules">buildClashRoutingRules() <a title="Generate Random Functions Name" class="random" onclick="setRandom('buildClashRoutingRules')">&#128515;</a></label>
                        <input type="text" id="buildClashRoutingRules" name="bpbdata" value="" pattern="[a-zA-Z]{5,}$">
                        <input type="hidden" id="_buildClashRoutingRules" value="buildClashRoutingRules">
                    </div>
                     <div class="form-control">
                        <label for="buildClashVLESSOutbound">buildClashVLESSOutbound() <a title="Generate Random Functions Name" class="random" onclick="setRandom('buildClashVLESSOutbound')">&#128515;</a></label>
                        <input type="text" id="buildClashVLESSOutbound" name="bpbdata" value="" pattern="[a-zA-Z]{5,}$">
                        <input type="hidden" id="_buildClashVLESSOutbound" value="buildClashVLESSOutbound">
                    </div>
                     <div class="form-control">
                        <label for="buildClashTrojanOutbound">buildClashTrojanOutbound() <a title="Generate Random Functions Name" class="random" onclick="setRandom('buildClashTrojanOutbound')">&#128515;</a></label>
                        <input type="text" id="buildClashTrojanOutbound" name="bpbdata" value="" pattern="[a-zA-Z]{5,}$">
                        <input type="hidden" id="_buildClashTrojanOutbound" value="buildClashTrojanOutbound">
                    </div>
                     <div class="form-control">
                        <label for="buildClashWarpOutbound">buildClashWarpOutbound() <a title="Generate Random Functions Name" class="random" onclick="setRandom('buildClashWarpOutbound')">&#128515;</a></label>
                        <input type="text" id="buildClashWarpOutbound" name="bpbdata" value="" pattern="[a-zA-Z]{5,}$">
                        <input type="hidden" id="_buildClashWarpOutbound" value="buildClashWarpOutbound">
                    </div>
                     <div class="form-control">
                        <label for="buildClashChainOutbound">buildClashChainOutbound() <a title="Generate Random Functions Name" class="random" onclick="setRandom('buildClashChainOutbound')">&#128515;</a></label>
                        <input type="text" id="buildClashChainOutbound" name="bpbdata" value="" pattern="[a-zA-Z]{5,}$">
                        <input type="hidden" id="_buildClashChainOutbound" value="buildClashChainOutbound">
                    </div>
                     <div class="form-control">
                        <label for="getClashWarpConfig">getClashWarpConfig() <a title="Generate Random Functions Name" class="random" onclick="setRandom('getClashWarpConfig')">&#128515;</a></label>
                        <input type="text" id="getClashWarpConfig" name="bpbdata" value="" pattern="[a-zA-Z]{5,}$">
                        <input type="hidden" id="_getClashWarpConfig" value="getClashWarpConfig">
                    </div>
                     <div class="form-control">
                        <label for="getClashNormalConfig">getClashNormalConfig() <a title="Generate Random Functions Name" class="random" onclick="setRandom('getClashNormalConfig')">&#128515;</a></label>
                        <input type="text" id="getClashNormalConfig" name="bpbdata" value="" pattern="[a-zA-Z]{5,}$">
                        <input type="hidden" id="_getClashNormalConfig" value="getClashNormalConfig">
                    </div>
                     <div class="form-control">
                        <label for="getNormalConfigs">getNormalConfigs() <a title="Generate Random Functions Name" class="random" onclick="setRandom('getNormalConfigs')">&#128515;</a></label>
                        <input type="text" id="getNormalConfigs" name="bpbdata" value="" pattern="[a-zA-Z]{5,}$">
                        <input type="hidden" id="_getNormalConfigs" value="getNormalConfigs">
                    </div>
                    <!--
                     <div class="form-control">
                        <label for="SSS">SSS() <a title="Generate Random Functions Name" class="random" onclick="setRandom('SSS')">&#128515;</a></label>
                        <input type="text" id="SSS" name="bpbdata" value="" pattern="[a-zA-Z]{5,}$">
                        <input type="hidden" id="_SSS" value="SSS">
                    </div>
                    -->
                </details>
        </div>
        <div class="form-container">
                <div id="apply" class="form-control">
                    <div style="grid-column: 2; width: 100%; display: inline-flex;">
                        <input type="submit" id="applyButton" style="margin-right: 10px;" class="button" value="Generate New code 🌊" form="configForm" onclick="">
                        <button id="applyCopyButton" type="button" style="margin-right: 10px;" class="button" onclick="CopyNewCode('gencode')" disabled>Copy</button>
                        <button id="applyDnldButton" type="button" class="button" onclick="SendFile('gencode')" disabled>Download</button>
                    </div>
                </div>
            </form>
            <hr>
            <h2>کدهاي تغيير يافته:</h2>
            <div class="table-container">
                <textarea id="gencode" style="height: 20rem;"></textarea>
            </div>
            <hr>
            <hr>


            <div id="apply" class="form-control">
                    <div style="grid-column: 2; width: 100%; display: inline-flex;">
                        <input type="submit" id="obfButton" style="margin-right: 10px;" class="button" value="Obfuscator Code 💨" onclick="ObfuscationNewCode()" disabled>
                        <button id="obfCopyButton" type="button" style="margin-right: 10px;" class="button" onclick="CopyNewCode('obfcode')" disabled>Copy</button>
                        <button id="obfDnldButton" type="button" class="button" onclick="SendFile('obfcode')" disabled>Download</button>

                    </div>
             </div>
            <h2>کد هاي obfuscator شده:</h2>
            <div class="table-container">
                <textarea id="obfcode" style="height: 20rem;"></textarea>
            </div>
            <hr>

            <div class="footer">

                <a class="link" href="https://bit.ly/4ichkOs" style="color: var(--color);" target="_blank">
                     <i class="fa fa-github" style="font-size:36px; margin-right: 10px;vertical-align:middle;"></i>
                     BPB</a>
                 &nbsp;&nbsp; - &nbsp;&nbsp;

                <a class="link" href="https://github.com/liMilCo/BPB-ReCoder" style="color: var(--color);" target="_blank">
                	<i class="fa fa-github" style="font-size:36px; margin-right: 10px;vertical-align:middle;"></i>
                	ReCoder</a>

            </div>
        </div>
        <button id="darkModeToggle" class="floating-button">
            <i id="modeIcon" class="fa fa-2x fa-adjust" style="color: var(--background-color);" aria-hidden="true"></i>
        </button>
    <script src="https://cdn.jsdelivr.net/npm/javascript-obfuscator/dist/index.browser.js"></script>
    <script>
    	let MaxVersion = 2.81;

        localStorage.getItem('darkMode') === 'enabled' && document.body.classList.add('dark-mode');
        let inputsSave = ["panel","login","secrets","homePage","envbpb","envuuid","envtrojanpass","envproxyip"];

        const darkModeToggle = document.getElementById('darkModeToggle');
        const configForm = document.getElementById('configForm');

        const inputsData = document.getElementsByName('bpbdata');
        const SrcCode  = document.getElementById('maincode');
        const GenCode  = document.getElementById('gencode');
        const obfButton  = document.getElementById('obfButton');
        const applyCopyButton  = document.getElementById('applyCopyButton');
        const applyDnldButton  = document.getElementById('applyDnldButton');


        const obfCode  = document.getElementById('obfcode');
        const obfCopyButton  = document.getElementById('obfCopyButton');
        const obfDnldButton  = document.getElementById('obfDnldButton');
        const HomePage  = document.getElementById('homePage');

        document.addEventListener('DOMContentLoaded', async () => {


            darkModeToggle.addEventListener('click', () => {
                const isDarkMode = document.body.classList.toggle('dark-mode');
                localStorage.setItem('darkMode', isDarkMode ? 'enabled' : 'disabled');
            });
            for (const inputSave of inputsSave) {
            	     const inputSaveEl = document.getElementById(inputSave);
            	     inputSaveEl.value = localStorage.getItem(inputSave);
            }
            HomePage.value = localStorage.getItem('homePage');


        });
       configForm.addEventListener('submit', (event) => applySettings());



        const copyToClipboard = (text) => {
            const textarea = document.createElement('textarea');
            textarea.value = text;
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            document.body.removeChild(textarea);
            alert('📋 New Codes Copied to clipboard');
        }

        const applySettings = async () => {
            event.preventDefault();
            event.stopPropagation();

                var TheCode = SrcCode.value;
                if(!TheCode){alert("Please insert BPB Original Code.");SrcCode.focus();return false;}
                if(IsDuplicates(inputsData) != ''){alert("The word ["+IsDuplicates(inputsData)+"] used more than once!");return false;}

        	    for (const inData of inputsData) {
        	        const SrchData  = document.getElementById('_'+inData.id);
        	        var SrchPrfx;
        	        if(SrchData.value.startsWith("env.")){SrchPrfx = "env."}else if(SrchData.value.startsWith("/")){SrchPrfx = "/"}else{SrchPrfx = ""}
        	    	//alert(SrchData.value +" = "+ inData.value +" - "+inData.id+" + "+SrchPrfx);
        	    	if(inData.value){
	        	    	TheCode = TheCode.replaceAll(SrchData.value, SrchPrfx + inData.value);
        	    	}
                    if(inputsSave.includes(inData.id)){localStorage.setItem(inData.id, inData.value);}
        	    }


                if(HomePage.value){
                	  TheCode = TheCode.replaceAll('url.hostname = "', 'url.hostname = "'+HomePage.value+'"; //"');
                	  localStorage.setItem('homePage', HomePage.value);
                }
                //remove Bundled license information
                TheCode = TheCode.replaceAll(atob("LyohIEJ1bmRsZWQgbGljZW5zZSBpbmZvcm1hdGlvbjoKCmpzLXNoYTI1Ni9zcmMvc2hhMjU2LmpzOgogICgqKgogICAqIFtqcy1zaGEyNTZde0BsaW5rIGh0dHBzOi8vZ2l0aHViLmNvbS9lbW4xNzgvanMtc2hhMjU2fQogICAqCiAgICogQHZlcnNpb24gMC4xMS4wCiAgICogQGF1dGhvciBDaGVuLCBZaS1DeXVhbiBbZW1uMTc4QGdtYWlsLmNvbV0KICAgKiBAY29weXJpZ2h0IENoZW4sIFlpLUN5dWFuIDIwMTQtMjAyNAogICAqIEBsaWNlbnNlIE1JVAogICAqKQoqLwovLyMgc291cmNlTWFwcGluZ1VSTD13b3JrZXIuanMubWFw"), "");

                applyCopyButton.disabled = false;
                applyDnldButton.disabled = false;
                obfButton.disabled = false;

                GenCode.value = TheCode;
                return;

        }


        const ObfuscationNewCode = () => {

                var TheCode = GenCode.value;
                if(TheCode == ''){alert("First Generate New Code!");return false;}

                    const obfButton  = document.getElementById('obfButton');
                    document.body.style.cursor = 'wait';
                    const obfButtonVal = obfButton.value;
                    obfButton.value = '⌛ Loading...';

 //var JavaScriptObfuscator = require('javascript-obfuscator');
                var obfuscationResult = JavaScriptObfuscator.obfuscate(TheCode,
                    {
    "compact": true,
    "config": "",
    "controlFlowFlattening": false,
    "controlFlowFlatteningThreshold": 0.75,
    "deadCodeInjection": false,
    "deadCodeInjectionThreshold": 0.4,
    "debugProtection": false,
    "debugProtectionInterval": 0,
    "disableConsoleOutput": false,
    "domainLock": [],
    "domainLockRedirectUrl": "about:blank",
    "exclude": [],
    "forceTransformStrings": [],
    "identifierNamesCache": null,
    "identifierNamesGenerator": "hexadecimal",
    "identifiersPrefix": "",
    "identifiersDictionary": [],
    "ignoreImports": false,
    "inputFileName": "",
    "log": false,
    "numbersToExpressions": false,
    "optionsPreset": "default",
    "renameGlobals": false,
    "renameProperties": false,
    "renamePropertiesMode": "safe",
    "reservedNames": [],
    "reservedStrings": [],
    "stringArrayRotate": true,
    "seed": 0,
    "selfDefending": false,
    "stringArrayShuffle": true,
    "simplify": true,
    "sourceMap": false,
    "sourceMapBaseUrl": "",
    "sourceMapFileName": "",
    "sourceMapMode": "separate",
    "sourceMapSourcesMode": "sources-content",
    "splitStrings": false,
    "splitStringsChunkLength": 10,
    "stringArray": true,
    "stringArrayCallsTransform": false,
    "stringArrayCallsTransformThreshold": 0.5,
    "stringArrayEncoding": [
        "none"
    ],
    "stringArrayIndexesType": [
        "hexadecimal-number"
    ],
    "stringArrayIndexShift": true,
    "stringArrayWrappersChainedCalls": true,
    "stringArrayWrappersCount": 1,
    "stringArrayWrappersParametersMaxCount": 2,
    "stringArrayWrappersType": "variable",
    "stringArrayThreshold": 0.75,
    "target": "browser",
    "transformObjectKeys": false,
    "unicodeEscapeSequence": false
                    }
                );
                obfCopyButton.disabled = false;
                obfDnldButton.disabled = false;
                obfCode.value =  obfuscationResult.getObfuscatedCode();//

                document.body.style.cursor = 'default';
                obfButton.value = obfButtonVal;
                return;
        }



        const CopyNewCode = (id) => {
        	 const CopyNewCodeEl  = document.getElementById(id);
        	 if(CopyNewCodeEl.value){copyToClipboard(CopyNewCodeEl.value);}
        }

        const setRandom = (id) => {
        	 const setRandomEl = document.getElementById(id);
        	 if(!setRandomEl.value){setRandomEl.value = generateRandom();}
        }

             function generateRandom() {
                const charset =
                    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
                let password = '';
                const randomValues = new Uint8Array(16);
                crypto.getRandomValues(randomValues);

                for (let i = 0; i < 11; i++) {
                    password += charset[randomValues[i] % charset.length];
                }
                return password;
            }
 		let findDuplicates = arr => arr.filter((item, index) => arr.indexOf(item) !== index)
        const IsDuplicates = (obj) => {
        	 var arr = [];
        	 var i = 0;
        	 for (const inObj of obj) { if(inObj.value){arr[i] = inObj.value; i++;}}
             return findDuplicates(arr);
        }
        const SendFile = (id) => {
        	 const MyCode  = document.getElementById(id);
        	 if(MyCode.value){downloadCode("_worker.js",MyCode.value);}
        }
function downloadCode(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

function GetBPBVrsion(InInt) {
	var BPBVersion = 2;
         if(SrcCode.value){
         var versionMatch = SrcCode.value.match(/panelVersion\s*=\s*[\"\'](.*?)[\"\']/);
         	if (versionMatch && versionMatch[1]) {
         	     BPBVersion = versionMatch[1];
         	}
         }
         if(InInt){
            BPBVersion = versionMatch[1].split(".")[0]+"."+versionMatch[1].split(".")[1]+versionMatch[1].split(".")[2];
         	BPBVersion = parseFloat(BPBVersion);
         }
         return BPBVersion;
}

function CheckBPBVrsion(){
		var BPBVersion = GetBPBVrsion();

        if(SrcCode.value.search("env.kv") > 1){
    			document.getElementById('_envbpb').value = 'env.kv';
    	}else{
    			document.getElementById('_envbpb').value = 'env.bpb';
    	}
        if(SrcCode.value.search("env.TR_PASS") > 1){
    			document.getElementById('_envtrojanpass').value = 'env.TR_PASS';
    	}else{
    			document.getElementById('_envtrojanpass').value = 'env.TROJAN_PASS';
    	}
        var NewWordVer = {
        		"vlessOverWSHandler":"VLOverWSHandler",
        		"trojanOverWSHandler":"TROverWSHandler",
        		"processVlessHeader":"processVLHeader",
        		"vlessRemoteSocketToWS":"VLRemoteSocketToWS",
        		"parseTrojanHeader":"parseTRHeader",
        		"trojanRemoteSocketToWS":"TRRemoteSocketToWS",
        		"buildXrayVLESSOutbound":"buildXrayVLOutbound",
        		"buildXrayTrojanOutbound":"buildXrayTROutbound",
        		"buildSingBoxVLESSOutbound":"buildSingBoxVLOutbound",
        		"buildSingBoxTrojanOutbound":"buildSingBoxTROutbound",
        		"buildClashVLESSOutbound":"buildClashVLOutbound",
        		"buildClashTrojanOutbound":"buildClashTROutbound"

        	};
        for (var OldWord in NewWordVer) {
    		if(SrcCode.value.search(NewWordVer[OldWord]) > 1){
    			document.getElementById("_"+OldWord).value = NewWordVer[OldWord];
    		}else{
    			document.getElementById("_"+OldWord).value = OldWord;
    		}
	}
    alert("✔️ BPB v"+BPBVersion+" Loaded.");
}

function GetBPBCode(theUrl){
    var xmlHttp = null;

    xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", theUrl, false );
    xmlHttp.send( null );
    return xmlHttp.responseText;
}

function SetBPBCode(BPBCodeLink){
       if(!BPBCodeLink){return false;}
  	   var  BPBCode = GetBPBCode(BPBCodeLink);
  	   SrcCode.value = BPBCode;
       CheckBPBVrsion();
}
    </script>
    </body>
    </html>
