From 50e0daecf74c9ae427b91631c834c449d4cac5a3 Mon Sep 17 00:00:00 2001
From: taotao <liwentao@live.cn>
Date: Tue, 15 Oct 2024 13:16:27 +0000
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20simpleadmin/www/network.ht?=
 =?UTF-8?q?ml?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 simpleadmin/www/network.html | 827 +++++++++++++++++++----------------
 1 file changed, 443 insertions(+), 384 deletions(-)
diff --git a/simpleadmin/www/network.html b/simpleadmin/www/network.html
index a749c3e..07c4032 100644
--- a/simpleadmin/www/network.html
+++ b/simpleadmin/www/network.html
@@ -1,396 +1,455 @@
 <!DOCTYPE html>
-<html data-bs-theme="light"
-      lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta content="width=device-width, initial-scale=1"
-          name="viewport">
-    <title>模块管理</title><!-- <link
+<html lang="en" data-bs-theme="light">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>模块管理</title>
+    <!-- <link
       href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
       rel="stylesheet"
       integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
       crossorigin="anonymous"
     /> -->
     <!-- Import all the bootstrap css files from css folder -->
-    <link href="css/styles.css"
-          rel="stylesheet">
-    <link href="css/bootstrap.min.css"
-          rel="stylesheet"><!-- Logo -->
-    <link href="favicon.ico"
-          rel="simpleadmin-logo"><!--  Import BootStrap Javascript -->
+    <link rel="stylesheet" href="css/styles.css" />
+    <link rel="stylesheet" href="css/bootstrap.min.css" />
 
+    <!-- Logo -->
+    <link rel="simpleadmin-logo" href="favicon.ico" />
+
+    <!--  Import BootStrap Javascript -->
     <script src="js/bootstrap.bundle.min.js"></script>
-    <script defer
-          src="js/alpinejs.min.js"></script>
-</head>
-<body>
+    <script src="js/alpinejs.min.js" defer></script>
+  </head>
+  <body>
     <main>
-        <div class="container my-4"
-             x-data="cellLocking()">
-            <nav class="navbar navbar-expand-lg mt-2">
-                <div class="container-fluid">
-                    <a class="navbar-brand"
-                         href="/"><span class="mb-0 h4 fw-bold">模块管理</span></a>
-                    <div class="collapse navbar-collapse"
-                         id="navbarText">
-                        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-                            <li class="nav-item">
-                                <a class="nav-link"
-                                    href="/">首页</a>
-                            </li>
-                            <li class="nav-item">
-                                <a aria-current="page"
-                                    class="nav-link active"
-                                    href="network.html">网络</a>
-                            </li>
-                            <li class="nav-item">
-                                <a class="nav-link"
-                                    href="/scanner.html">扫描</a>
-                            </li>
-                            <li class="nav-item">
-                                <a class="nav-link"
-                                    href="/settings.html">设置</a>
-                            </li>
-                            <li class="nav-item">
-                                <a class="nav-link"
-                                    href="/sms.html">短信</a>
-                            </li>
-                            <li class="nav-item">
-                                <a class="nav-link"
-                                    href="/console">控制台</a>
-                            </li>
-                            <li class="nav-item">
-                                <a class="nav-link"
-                                    href="deviceinfo.html">设备信息</a>
-                            </li>
-                        </ul><span class="navbar-text"><button class="btn btn-link text-reset"
-                                id="darkModeToggle"><span class="navbar-text">Dark Mode</span></button></span>
-                    </div>
-                </div>
-            </nav>
-            <div class="row mt-5 gap-3">
-                <div class="col">
-                    <div class="card">
-                        <div class="card-header">
-                            <div class="row align-items-center">
-                                <div class="col">
-                                    频段锁定
-                                </div>
-                                <div class="col-md-3">
-                                    <select aria-label="LTE"
-                                         class="form-select"
-                                         id="networkModeBand">
-                                        <option selected
-                                                value="LTE">
-                                            LTE
-                                        </option>
-                                        <option value="NSA">
-                                            NR5G-NSA
-                                        </option>
-                                        <option value="SA">
-                                            NR5G-SA
-                                        </option>
-                                    </select>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="card-body">
-                            <h5 class="card-subtitle"
-                                style="display: none;"
-                                x-show="isGettingBands === true">Fetching supported bands...</h5>
-                            <form id="checkboxForm"
-                                  name="checkboxForm"
-                                  x-show="isGettingBands === false">
-                                <!-- Checkboxes will be populated here -->
-                            </form>
-                        </div>
-                        <div class="card-footer">
-                            <div class="d-flex align-items-center">
-                                <div class="col">
-                                    <button class="btn btn-primary m-2"
-                                         type="button">锁频段</button> <button class="btn btn-info m-2"
-                                         id="uncheckAll"
-                                         type="button">取消勾选</button> <button class="btn btn-danger m-2"
-                                         type="button">复位</button>
-                                </div>
-                                <div class="form-check">
-                                    <input class="form-check-input"
-                                         id="providerBands"
-                                         onchange="saveCheckboxState()"
-                                         type="checkbox"
-                                         value=""> <label class="form-check-label"
-                                         for="providerBands">显示支持的频段</label>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="card-footer">
-                            <p x-text="'当前使用频段: ' + bands">当前使用频段: Fetching Bands...</p>
-                        </div>
-                    </div>
-                </div>
+      <div class="container my-4" x-data="cellLocking()">
+        <nav class="navbar navbar-expand-lg mt-2">
+          <div class="container-fluid">
+            <a class="navbar-brand" href="/"
+              ><span class="mb-0 h4 fw-bold">模块管理</span></a>
+            <button
+              class="navbar-toggler"
+              type="button"
+              data-bs-toggle="collapse"
+              data-bs-target="#navbarText"
+              aria-controls="navbarText"
+              aria-expanded="false"
+              aria-label="Toggle navigation"
+            >
+              <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarText">
+              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                <li class="nav-item">
+                  <a class="nav-link" href="/">首页</a>
+                </li>
+                <li class="nav-item">
+                  <a
+                    class="nav-link active"
+                    href="network.html"
+                    aria-current="page"
+                    >网络</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="/scanner.html">扫描</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="/settings.html">设置</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="/sms.html">短信</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="/console">控制台</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="deviceinfo.html"
+                    >设备信息</a
+                  >
+                </li>
+              </ul>
+              <span class="navbar-text">
+                <button class="btn btn-link text-reset" id="darkModeToggle">
+                  Dark Mode
+                </button>
+              </span>
             </div>
-            <div class="row gap-3 mt-4">
-                <div class="col">
-                    <form>
-                        <div class="card">
-                            <div class="card-header">
-                                联网设置
-                            </div>
-                            <div class="card-body row">
-                                <div class="col">
-                                    <div class="mb-4">
-                                        <label class="form-label"
-                                             for="APN">APN</label> <input aria-describedby="APN"
-                                             class="form-control"
-                                             id="APN"
-                                             placeholder="Fetching..."
-                                             type="text"
-                                             x-bind:placeholder="apn === '-' ? 'Fetching...' : apn"
-                                             x-model="newApn">
-                                    </div>
-                                    <div class="mb-4">
-                                        <label class="form-label"
-                                             for="ipForAPN">选择APN类型</label> <select aria-label="ipForAPN"
-                                             class="form-select"
-                                             id="ipAPN"
-                                             x-model="newApnIP">
-                                            <option selected
-                                                    x-text="apnIP === '-' ? 'Fetching...' : 'Current: ' + apnIP">
-                                                Fetching...
-                                            </option>
-                                            <option value="1">
-                                                IPv4 Only
-                                            </option>
-                                            <option value="2">
-                                                IPv6 Only
-                                            </option>
-                                            <option value="3">
-                                                IPv4v6
-                                            </option>
-                                            <option value="4">
-                                                P2P Protocol
-                                            </option>
-                                        </select>
-                                    </div>
-                                    <div class="mb-4 input-group grid gap-3">
-                                        <label class="form-label"
-                                             for="SIM1">更改SIM卡</label>
-                                        <div class="form-check form-check-inline">
-                                            <style>
-                                            .form-check-inline {    
-                                            display: inline-flex; /* 确保选项在同一行 */    
-                                            align-items: center; /* 垂直居中对齐 */
-                                            margin-right: 15px; /* 添加间距 */  }
-                                            </style><input aria-describedby="SIM1"
-                                                 class="form-check-input"
-                                                 id="SIM1"
-                                                 name="inlineRadioOptions"
-                                                 type="radio"
-                                                 value="option1"
-                                                 x-bind:checked="sim === '1'"
-                                                 x-on:click="newSim = '1'"> <label class="form-check-label"
-                                                 for="inlineRadio1">1</label>
-                                        </div>
-                                        <div class="form-check form-check-inline">
-                                            <input aria-describedby="SIM2"
-                                                 class="form-check-input"
-                                                 id="SIM2"
-                                                 name="inlineRadioOptions"
-                                                 type="radio"
-                                                 value="option2"
-                                                 x-bind:checked="sim === '2'"
-                                                 x-on:click="newSim = '2'"> <label class="form-check-label"
-                                                 for="inlineRadio2">2</label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col">
-                                    <div class="mb-4">
-                                        <label class="form-label"
-                                             for="nrModeControl">选择网络模式</label> <select aria-label="prefNetworkMode"
-                                             class="form-select"
-                                             id="prefNetworkMode"
-                                             x-model="prefNetworkMode">
-                                            <option selected
-                                                    x-text="prefNetwork === '-' ? 'Fetching...' : 'Current: ' + prefNetwork">
-                                                Fetching...
-                                            </option>
-                                            <option value="AUTO">
-                                                AUTO
-                                            </option>
-                                            <option value="LTE">
-                                                LTE Only
-                                            </option>
-                                            <option value="LTE:NR5G">
-                                                NR5G-NSA
-                                            </option>
-                                            <option value="NR5G">
-                                                NR5G-SA
-                                            </option>
-                                        </select>
-                                    </div>
-                                    <div class="mb-4">
-                                        <label class="form-label"
-                                             for="prefNetwork">5G模式控制</label> <select aria-label="nrModeControl"
-                                             class="form-select"
-                                             id="nrModeControl"
-                                             x-model="nrModeControl">
-                                            <option selected
-                                                    x-text="nrModeControl === '-' ? 'Fetching...' : 'Current: ' + nrModeControl">
-                                                Fetching...
-                                            </option>
-                                            <option value="0">
-                                                Enable All
-                                            </option>
-                                            <option value="2">
-                                                Disable NR5G-NSA
-                                            </option>
-                                            <option value="1">
-                                                Disable NR5G-SA
-                                            </option>
-                                        </select>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="card-footer">
-                                <button class="btn btn-primary"
-                                     type="button">保存</button>
-                            </div>
-                        </div>
-                    </form>
-                </div>
-                <div class="col-md-4">
-                    <div class="card">
-                        <div class="card-header">
-                            锁基站
-                        </div>
-                        <div class="card-body">
-                            <select aria-label="LTE"
-                                 class="form-select"
-                                 id="networkModeCell"
-                                 x-model="networkModeCell">
-                                <option selected
-                                        x-text="cellLockStatus">
-                                    Unknown
-                                </option>
-                                <option>
-                                    LTE
-                                </option>
-                                <option>
-                                    NR5G-SA
-                                </option>
-                                <option>
-                                    Unlock LTE
-                                </option>
-                                <option>
-                                    Unlock NR5G-SA
-                                </option>
-                            </select>
-                            <div class="my-4">
-                                <!-- For LTE -->
-                                <div id="lteElementsCell"
-                                     style="display: none;"
-                                     x-show="networkModeCell == 'LTE'">
-                                    <div class="input-group mb-3">
-                                        <span class="input-group-text"
-                                             id="basic-addon1">Num Cells</span> <input aria-describedby="basic-addon1"
-                                             aria-label="NumCells"
-                                             class="form-control"
-                                             max="10"
-                                             min="1"
-                                             placeholder="1-10"
-                                             type="number"
-                                             x-model="cellNum">
-                                    </div>
-                                </div>
-                                <div id="freqNumbersContainer">
-                                    <!-- Generate EARFCN and PCI here -->
-                                </div><!-- For SA -->
-                                <div id="saElementsCell"
-                                     style="display: none;"
-                                     x-show="networkModeCell == 'NR5G-SA'">
-                                    <div class="input-group mb-3"
-                                         style="display: none;"
-                                         x-show="networkModeCell == 'NR5G-SA'">
-                                        <input aria-label="EARFCN"
-                                             class="form-control"
-                                             placeholder="EARFCN"
-                                             type="text"
-                                             x-model="earfcn1"> <input aria-label="PCI"
-                                             class="form-control"
-                                             placeholder="PCI"
-                                             type="text"
-                                             x-model="pci1">
-                                    </div>
-                                    <div class="input-group mb-3"
-                                         style="display: none;"
-                                         x-show="networkModeCell == 'NR5G-SA'">
-                                        <select aria-label="SCS"
-                                             class="form-select"
-                                             x-model="scs">
-                                            <option selected>
-                                                SCS
-                                            </option>
-                                            <option>
-                                                15
-                                            </option>
-                                            <option>
-                                                30
-                                            </option>
-                                            <option>
-                                                60
-                                            </option>
-                                            <option>
-                                                120
-                                            </option>
-                                            <option>
-                                                240
-                                            </option>
-                                        </select> <input aria-label="band"
-                                             class="form-control"
-                                             placeholder="Band"
-                                             type="text"
-                                             x-model="band">
-                                    </div>
-                                </div><button class="btn btn-primary"
-                                     style="display: none;"
-                                     type="button"
-                                     x-show="networkModeCell == 'LTE'">Lock LTE Cells</button> <button class="btn btn-primary"
-                                     style="display: none;"
-                                     type="button"
-                                     x-show="networkModeCell == 'NR5G-SA'">Lock NR5G-SA Cells</button> <button class="btn btn-danger"
-                                     style="display: none;"
-                                     type="button"
-                                     x-show="networkModeCell == 'Unlock LTE'">Unlock LTE Cells</button> <button class="btn btn-danger"
-                                     style="display: none;"
-                                     type="button"
-                                     x-show="networkModeCell == 'Unlock NR5G-SA'">Unlock NR5G-SA Cells</button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div><!-- Loading Modal for Locking Band -->
-            <div class="modal-overlay"
-                 style="display: none;"
-                 x-show="showModal">
-                <div class="loading-modal">
-                    <div class="loader"></div>
-                    <div class="loading-text"
-                         style="display: flex; flex-direction: column">
-                        <h3>Initializing Network...</h3>
-                        <p style="margin-top: 0.5rem">Please wait for <span style="font-weight: 500"
-                              x-text="countdown">0</span> seconds.</p>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </main><!-- Import Band Locking GUI JS -->
-    <!-- <script src="js/band-locking.js"></script> -->
-    <script src="js/generate-freq-box.js"></script> 
-    <script src="js/populate-checkbox.js"></script> 
-    <script src="js/parse-settings.js"></script> 
-    <script>
+          </div>
+        </nav>
 
+        <div class="row mt-5 gap-3">
+          <div class="col">
+            <div class="card">
+              <div class="card-header">
+                <div class="row align-items-center">
+                  <div class="col">频段锁定</div>
+                  <div class="col-md-3">
+                    <select
+                      class="form-select"
+                      id="networkModeBand"
+                      aria-label="LTE"
+                    >
+                      <option selected value="LTE">LTE</option>
+                      <option value="NSA">NR5G-NSA</option>
+                      <option value="SA">NR5G-SA</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+              <div class="card-body">
+                <h5 class="card-subtitle" x-show="isGettingBands === true">
+                  获取支持的频段...
+                </h5>
+                <form id="checkboxForm" x-show="isGettingBands === false">
+                  <!-- Checkboxes will be populated here -->
+                </form>
+              </div>
+              <div class="card-footer">
+                <div class="d-flex align-items-center">
+                  <div class="col">
+                    <button
+                      type="button"
+                      class="btn btn-primary m-2"
+                      @click="lockSelectedBands()"
+                    >
+                      锁频段
+                    </button>
+                    <button
+                      type="button"
+                      class="btn btn-info m-2"
+                      id="uncheckAll"
+                    >
+                      取消勾选
+                    </button>
+                    <button
+                      type="button"
+                      class="btn btn-danger m-2"
+                      @click="resetBandLocking()"
+                    >
+                      复位
+                    </button>
+                  </div>
+                  <div class="form-check">
+                    <input
+                      class="form-check-input"
+                      type="checkbox"
+                      value=""
+                      id="providerBands"
+                      onchange="saveCheckboxState()"
+                    />
+                    <label class="form-check-label" for="providerBands">
+                      显示支持的频段
+                    </label>
+                  </div>
+                </div>
+              </div>
+              <div class="card-footer">
+                <p x-text="'激活的频段: ' + bands"></p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="row gap-3 mt-4">
+          <div class="col">
+            <form>
+              <div class="card">
+                <div class="card-header">网络工具</div>
+                <div class="card-body row">
+                  <div class="col">
+                    <div class="mb-4">
+                      <label for="APN" class="form-label">APN</label>
+                      <input
+                        type="text"
+                        class="form-control"
+                        id="APN"
+                        x-model="newApn"
+                        aria-describedby="APN"
+                        x-bind:placeholder="apn === '-' ? 'Fetching...' : apn"
+                      />
+                    </div>
+
+                    <div class="mb-4">
+                      <label for="ipForAPN" class="form-label"
+                        >选择APN类型</label
+                      >
+                      <select
+                        class="form-select"
+                        id="ipAPN"
+                        x-model="newApnIP"
+                        aria-label="ipForAPN"
+                      >
+                        <option
+                          selected
+                          x-text="apnIP === '-' ? 'Fetching...' : 'Current: ' + apnIP"
+                        ></option>
+                        <option value="1">IPv4 Only</option>
+                        <option value="2">IPv6 Only</option>
+                        <option value="3">IPv4v6</option>
+                        <option value="4">P2P Protocol</option>
+                      </select>
+                    </div>
+
+                    <div class="mb-4 input-group grid gap-3">
+                      <label for="SIM1" class="form-label"> 更改SIM卡</label>
+                      <div class="form-check form-check-inline">
+                        <style>  .form-check-inline {    
+                          display: inline-flex; /* 确保选项在同一行 */    
+                          align-items: center; /* 垂直居中对齐 */
+                              margin-right: 15px; /* 添加间距 */  }
+                              </style>
+                        <input
+                          class="form-check-input"
+                          type="radio"
+                          name="inlineRadioOptions"
+                          aria-describedby="SIM1"
+                          id="SIM1"
+                          value="option1"
+                          x-bind:checked="sim === '1'"
+                          x-on:click="newSim = '1'"
+                        />
+                        <label class="form-check-label" for="inlineRadio1"
+                          >1</label
+                        >
+                      </div>
+                      <div class="form-check form-check-inline">
+                        <input
+                          class="form-check-input"
+                          type="radio"
+                          name="inlineRadioOptions"
+                          aria-describedby="SIM2"
+                          id="SIM2"
+                          value="option2"
+                          x-bind:checked="sim === '2'"
+                          x-on:click="newSim = '2'"
+                        />
+                        <label class="form-check-label" for="inlineRadio2"
+                          >2</label
+                        >
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="col">
+                    <div class="mb-4">
+                      <label for="nrModeControl" class="form-label"
+                        >选择网络模式</label
+                      >
+                      <select
+                        class="form-select"
+                        id="prefNetworkMode"
+                        x-model="prefNetworkMode"
+                        aria-label="prefNetworkMode"
+                      >
+                        <option
+                          selected
+                          x-text="prefNetwork === '-' ? 'Fetching...' : 'Current: ' + prefNetwork"
+                        ></option>
+                        <option value="AUTO">AUTO</option>
+                        <option value="LTE">LTE Only</option>
+                        <option value="LTE:NR5G">NR5G-NSA</option>
+                        <option value="NR5G">NR5G-SA</option>
+                      </select>
+                    </div>
+                    <div class="mb-4">
+                      <label for="prefNetwork" class="form-label"
+                        >5G模式控制</label
+                      >
+                      <select
+                        class="form-select"
+                        id="nrModeControl"
+                        x-model="nrModeControl"
+                        aria-label="nrModeControl"
+                      >
+                        <option
+                          selected
+                          x-text="nrModeControl === '-' ? 'Fetching...' : 'Current: ' + nrModeControl"
+                        ></option>
+                        <option value="0">Enable All</option>
+                        <option value="2">Disable NR5G-NSA</option>
+                        <option value="1">Disable NR5G-SA</option>
+                      </select>
+                    </div>
+                  </div>
+                </div>
+                <div class="card-footer">
+                  <button
+                    type="button"
+                    class="btn btn-primary"
+                    @click="saveChanges()"
+                  >
+                    保存
+                  </button>
+                </div>
+              </div>
+            </form>
+          </div>
+
+          <div class="col-md-4">
+            <div class="card">
+              <div class="card-header">频段锁定</div>
+              <div class="card-body">
+                <select
+                  class="form-select"
+                  id="networkModeCell"
+                  x-model="networkModeCell"
+                  aria-label="LTE"
+                >
+                  <option
+                    selected
+                    x-text="'Cell Lock: ' + cellLockStatus"
+                  ></option>
+                  <option>LTE</option>
+                  <option>NR5G-SA</option>
+                  <option>Unlock LTE</option>
+                  <option>Unlock NR5G-SA</option>
+                </select>
+
+                <div class="my-4">
+                  <!-- For LTE -->
+                  <div id="lteElementsCell" x-show="networkModeCell == 'LTE'">
+                    <div class="input-group mb-3">
+                      <span class="input-group-text" id="basic-addon1"
+                        >Num Cells</span
+                      >
+                      <input
+                        type="number"
+                        class="form-control"
+                        placeholder="1-10"
+                        min="1"
+                        max="10"
+                        aria-label="NumCells"
+                        aria-describedby="basic-addon1"
+                        x-model="cellNum"
+                      />
+                    </div>
+                  </div>
+
+                  <div id="freqNumbersContainer">
+                    <!-- Generate EARFCN and PCI here -->
+                  </div>
+
+                  <!-- For SA -->
+                  <div
+                    id="saElementsCell"
+                    x-show="networkModeCell == 'NR5G-SA'"
+                  >
+                    <div
+                      class="input-group mb-3"
+                      x-show="networkModeCell == 'NR5G-SA'"
+                    >
+                      <input
+                        type="text"
+                        aria-label="EARFCN"
+                        placeholder="EARFCN"
+                        class="form-control"
+                        x-model="earfcn1"
+                      />
+                      <input
+                        type="text"
+                        aria-label="PCI"
+                        placeholder="PCI"
+                        class="form-control"
+                        x-model="pci1"
+                      />
+                    </div>
+
+                    <div
+                      class="input-group mb-3"
+                      x-show="networkModeCell == 'NR5G-SA'"
+                    >
+                      <select
+                        class="form-select"
+                        x-model="scs"
+                        aria-label="SCS"
+                      >
+                        <option selected>SCS</option>
+                        <option>15</option>
+                        <option>30</option>
+                        <option>60</option>
+                        <option>120</option>
+                        <option>240</option>
+                      </select>
+                      <input
+                        type="text"
+                        aria-label="band"
+                        placeholder="Band"
+                        class="form-control"
+                        x-model="band"
+                      />
+                    </div>
+                  </div>
+
+                  <button
+                    type="button"
+                    class="btn btn-primary"
+                    x-show="networkModeCell == 'LTE'"
+                    @click="cellLockEnableLTE()"
+                  >
+                    Lock LTE Cells
+                  </button>
+
+                  <button
+                    type="button"
+                    class="btn btn-primary"
+                    x-show="networkModeCell == 'NR5G-SA'"
+                    @click="cellLockEnableNR()"
+                  >
+                    Lock NR5G-SA Cells
+                  </button>
+
+                  <button
+                    type="button"
+                    class="btn btn-danger"
+                    x-show="networkModeCell == 'Unlock LTE'"
+                    @click="cellLockDisableLTE()"
+                  >
+                    Unlock LTE Cells
+                  </button>
+
+                  <button
+                    type="button"
+                    class="btn btn-danger"
+                    x-show="networkModeCell == 'Unlock NR5G-SA'"
+                    @click="cellLockDisableNR()"
+                  >
+                    Unlock NR5G-SA Cells
+                  </button>
+                </div>
+              </div>
+              <div class="card-footer">
+                信道锁定仅适用于主信道，并且在重启后不会持久保存
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Loading Modal for Locking Band -->
+        <div class="modal-overlay" x-show="showModal">
+          <div class="loading-modal">
+            <div class="loader"></div>
+            <div
+              class="loading-text"
+              style="display: flex; flex-direction: column"
+            >
+              <h3>Initializing Network...</h3>
+              <p style="margin-top: 0.5rem">
+                Please wait for
+                <span x-text="countdown" style="font-weight: 500"></span>
+                seconds.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+
+    <!-- Import Band Locking GUI JS -->
+    <!-- <script src="js/band-locking.js"></script> -->
+    <script src="js/generate-freq-box.js"></script>
+    <script src="js/populate-checkbox.js"></script>
+    <script src="js/parse-settings.js"></script>
+    <script>
       function cellLocking() {
         return {
           isLoading: false,
@@ -740,7 +799,7 @@
                 }
               }, 1000);
             } else {
-              alert("No changes made!");
+              alert("No changes made");
             }
           },
           cellLockEnableLTE() {
@@ -937,7 +996,7 @@
           localStorage.getItem("providerBandsChecked") === "true";
         providerBandsCheckbox.checked = isChecked;
       }
-    </script> 
+    </script>
     <script src="js/dark-mode.js"></script>
-</body>
+  </body>
 </html>
