added auth improvements and luci
This commit is contained in:
Russel Yasol
502
www/about.html
502
www/about.html
@@ -1,268 +1,308 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
|
||||
<!-- Logo -->
|
||||
<link rel="logo" href="favicon.ico" />
|
||||
|
||||
<link rel="stylesheet" href="css/bulma/bulma.scss">
|
||||
<link rel="stylesheet" href="css/bulma/css/bulma.min.css">
|
||||
<link rel="stylesheet" href="css/bulma/css/bulma.css">
|
||||
<link rel="stylesheet" href="css/custom.css">
|
||||
<link rel="stylesheet" href="css/bulma/bulma.scss" />
|
||||
<link rel="stylesheet" href="css/bulma/css/bulma.min.css" />
|
||||
<link rel="stylesheet" href="css/bulma/css/bulma.css" />
|
||||
<link rel="stylesheet" href="css/custom.css" />
|
||||
|
||||
<!-- Font awesome icons -->
|
||||
<script src="https://kit.fontawesome.com/b0caedfab3.js" crossorigin="anonymous"></script>
|
||||
<script
|
||||
src="https://kit.fontawesome.com/b0caedfab3.js"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
|
||||
<script src="js/styles/nav-burger.js"></script>
|
||||
<script src="js/styles/toggle-theme.js"></script>
|
||||
<script src="/js/styles/nav-burger.js"></script>
|
||||
<script src="/js/styles/modal-trigger.js"></script>
|
||||
<script src="/js/utils/reboot.js"></script>
|
||||
<script defer src="/js/auth/auth.js"></script>
|
||||
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const savedTheme = localStorage.getItem('theme') || 'theme-dark';
|
||||
document.documentElement.classList.add(savedTheme);
|
||||
})();
|
||||
(function () {
|
||||
const savedTheme = localStorage.getItem("theme") || "theme-dark";
|
||||
document.documentElement.classList.add(savedTheme);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<title>QuecManager</title>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body class="body-margin">
|
||||
<body class="body-margin">
|
||||
<nav class="navbar is-transparent">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="/">
|
||||
<img src="/assets/logo.png" alt="Logo" />
|
||||
<span class="title">QuecManager</span>
|
||||
</a>
|
||||
<a
|
||||
role="button"
|
||||
class="navbar-burger"
|
||||
aria-label="menu"
|
||||
aria-expanded="false"
|
||||
data-target="navMenu"
|
||||
>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="navMenu" class="navbar-menu">
|
||||
<div class="navbar-start ml-6">
|
||||
<a class="navbar-item" href="/"> Home </a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> Cellular </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<a class="navbar-item" href="/bandlock.html"> Band Locking </a>
|
||||
<a class="navbar-item" href="/cell-locking.html">Cell Locking</a>
|
||||
<a class="navbar-item" href="/cell-scanner.html">Cell Scanner</a>
|
||||
<a class="navbar-item" href="/cell-settings.html"
|
||||
>Cell Settings</a
|
||||
>
|
||||
<a class="navbar-item" href="/cell-sms.html"> Cell SMS </a>
|
||||
</div>
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="/">
|
||||
<img src="/assets/logo.png" alt="Logo" />
|
||||
<span class="title">QuecManager</span>
|
||||
</a>
|
||||
<a
|
||||
role="button"
|
||||
class="navbar-burger"
|
||||
aria-label="menu"
|
||||
aria-expanded="false"
|
||||
data-target="navMenu"
|
||||
>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="navMenu" class="navbar-menu">
|
||||
<div class="navbar-start ml-6">
|
||||
<a class="navbar-item has-text-weight-bold" href="/"> Home </a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> Cellular </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<a class="navbar-item" href="/bandlock.html"> Band Locking </a>
|
||||
<a class="navbar-item" href="/cell-locking.html">Cell Locking</a>
|
||||
<a class="navbar-item" href="/cell-scanner.html">Cell Scanner</a>
|
||||
<a class="navbar-item" href="/cell-settings.html"
|
||||
>Cell Settings</a
|
||||
>
|
||||
<a class="navbar-item" href="/cell-sms.html"> Cell SMS </a>
|
||||
</div>
|
||||
<a class="navbar-item" href="/advance-settings.html"> Advance </a>
|
||||
<a class="navbar-item has-text-weight-bold" href="/about.html"> About </a>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="buttons is-flex-direction-column-mobile">
|
||||
<p class="control is-expanded-mobile">
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> Advance </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<a class="navbar-item" href="/advance-settings.html"> Advance Settings </a>
|
||||
<a class="navbar-item" href="#">Experimental Features</a>
|
||||
<a class="navbar-item" href="/cgi-bin/luci">OpenWRT Luci</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class="navbar-item" href="/about.html"> About </a>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="buttons is-flex-direction-column-mobile">
|
||||
<p class="control is-expanded-mobile">
|
||||
<a
|
||||
href="#"
|
||||
class="button is-link is-outlined is-fullwidth-mobile"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-arrows-rotate"></i>
|
||||
</span>
|
||||
<span>Restart Connection</span>
|
||||
</a>
|
||||
</p>
|
||||
<div class="is-flex is-mobile is-align-items-center">
|
||||
<p class="control">
|
||||
<div href="#" class="button is-warning is-outlined reboot-modal" data-target="reboot-modal" >
|
||||
<span class="icon">
|
||||
<i class="fas fa-power-off"></i>
|
||||
</span>
|
||||
</div>
|
||||
</p>
|
||||
<p class="control ml-2 is-mobile">
|
||||
<a
|
||||
href="#"
|
||||
class="button is-link is-outlined is-fullwidth-mobile"
|
||||
class="button is-warning is-outlined js-theme-toggle"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-arrows-rotate"></i>
|
||||
<i class="fas fa-sun"></i>
|
||||
</span>
|
||||
<span>Restart Connection</span>
|
||||
</a>
|
||||
</p>
|
||||
<div class="is-flex is-mobile is-align-items-center">
|
||||
<p class="control">
|
||||
<a href="#" class="button is-warning is-outlined">
|
||||
<span class="icon">
|
||||
<i class="fas fa-power-off"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control ml-2 is-mobile">
|
||||
<a
|
||||
href="#"
|
||||
class="button is-warning is-outlined js-theme-toggle"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-sun"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control ml-2 is-mobile">
|
||||
<a
|
||||
href="#"
|
||||
class="button is-warning is-outlined js-theme-toggle"
|
||||
id="logoutButton"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-right-from-bracket"></i>
|
||||
</span>
|
||||
</a>
|
||||
<p class="control ml-2 is-mobile">
|
||||
<a
|
||||
href="#"
|
||||
class="button is-warning is-outlined js-theme-toggle"
|
||||
id="logoutButton"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-right-from-bracket"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="column-margin">
|
||||
<div class="fixed-grid has-2-cols has-1-cols-mobile">
|
||||
<div class="grid">
|
||||
<div class="cell">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-header-title">Device Information</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<table class="table is-fullwidth is-borderless">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Modem Manufacturer</td>
|
||||
<th>Quectel</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Modem Model Name</td>
|
||||
<th>RM520N-GL</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Firmware Version</td>
|
||||
<th>RM520NGLAA123</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Phone Number</td>
|
||||
<th>+639938931024</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>IMSI</td>
|
||||
<th>123456789</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ICCID</td>
|
||||
<th>123456789</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>IMEI</td>
|
||||
<th>
|
||||
<div class="field has-addons is-hidden-mobile">
|
||||
<div class="control">
|
||||
<input
|
||||
class="input has-text-weight-semibold"
|
||||
type="text"
|
||||
placeholder="IMEI Here"
|
||||
/>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button is-link">Change</button>
|
||||
</div>
|
||||
</div>
|
||||
<span class="is-block-mobile is-hidden">
|
||||
123456789123
|
||||
</span>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>LAN GATEWAY</td>
|
||||
<th>192.168.225.1</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>WWAN IPv4</td>
|
||||
<th>38.0.101.76</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>WWAN IPv6</td>
|
||||
<th style="word-break: break-all">
|
||||
5be8:dde9:7f0b:d5a7:bd01:b3be:9c69:573b
|
||||
</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-header-title">About Us</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="content">
|
||||
<p class="title">QuecManager</p>
|
||||
<p class="subtitle mt-2">
|
||||
Simple Admin began as part of the RGMII toolkit, offering
|
||||
users a basic GUI. However, with our fork and continued
|
||||
development, it has evolved to include more advanced
|
||||
features, making "simple" no longer an ideal name for the
|
||||
dashboard. Despite this shift, we remain committed to
|
||||
providing advanced functionality while maintaining an
|
||||
intuitive and user-friendly GUI.
|
||||
</p>
|
||||
|
||||
<p class="subtitle mt-6 has-text-weight-bold">Thanks to</p>
|
||||
<ul class="has-text-weight-semibold">
|
||||
<li>
|
||||
RGMII Toolkit and Documentation
|
||||
<a href="https://github.com/iamromulan" target="_blank"
|
||||
>iamromulan</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
Simple Admin 2.0 and QuecManager
|
||||
<a href="https://github.com/dr-dolomite" target="_blank"
|
||||
>dr-dolomite</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
SMS Feature
|
||||
<a href="https://github.com/snjzb" target="_blank"
|
||||
>snjzb</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
Original Simple Admin
|
||||
<a href="https://github.com/aesthernr" target="_blank"
|
||||
>aesthernr</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
Original Socat Bridge
|
||||
<a href="https://github.com/natecarlson" target="_blank"
|
||||
>natecarlson</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
Initial Original Simple Admin Fixes
|
||||
<a href="https://github.com/rbflurry/" target="_blank"
|
||||
>rbflurry</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="column-margin">
|
||||
<div class="fixed-grid has-2-cols has-1-cols-mobile">
|
||||
<div class="grid">
|
||||
<div class="cell">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-header-title">
|
||||
Device Information
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<table class="table is-fullwidth is-borderless">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Modem Manufacturer</td>
|
||||
<th>Quectel</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Modem Model Name</td>
|
||||
<th>RM520N-GL</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Firmware Version</td>
|
||||
<th>RM520NGLAA123</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Phone Number</td>
|
||||
<th>+639938931024</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>IMSI</td>
|
||||
<th>123456789</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ICCID</td>
|
||||
<th>123456789</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>IMEI</td>
|
||||
<th>
|
||||
<div class="field has-addons is-hidden-mobile">
|
||||
<div class="control">
|
||||
<input class="input has-text-weight-semibold" type="text"
|
||||
placeholder="IMEI Here">
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button is-link">
|
||||
Change
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<span class="is-block-mobile is-hidden">
|
||||
123456789123
|
||||
</span>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>LAN GATEWAY</td>
|
||||
<th>192.168.225.1</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>WWAN IPv4</td>
|
||||
<th>38.0.101.76</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>WWAN IPv6</td>
|
||||
<th style="word-break: break-all;">
|
||||
5be8:dde9:7f0b:d5a7:bd01:b3be:9c69:573b
|
||||
</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-header-title">
|
||||
About Us
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="content">
|
||||
<p class="title">
|
||||
QuecManager
|
||||
</p>
|
||||
<p class="subtitle mt-2">
|
||||
Simple Admin began as part of the RGMII toolkit, offering users a basic GUI.
|
||||
However, with our fork and continued development, it has evolved to include more
|
||||
advanced features, making "simple" no longer an ideal name for the dashboard.
|
||||
Despite this shift, we remain committed to providing advanced functionality while
|
||||
maintaining an intuitive and user-friendly GUI.
|
||||
</p>
|
||||
|
||||
<p class="subtitle mt-6 has-text-weight-bold">
|
||||
Thanks to
|
||||
</p>
|
||||
<ul class="has-text-weight-semibold">
|
||||
<li>
|
||||
RGMII Toolkit and Documentation
|
||||
<a href="https://github.com/iamromulan" target="_blank">iamromulan</a>
|
||||
</li>
|
||||
<li>
|
||||
Simple Admin 2.0 and QuecManager
|
||||
<a href="https://github.com/dr-dolomite" target="_blank">dr-dolomite</a>
|
||||
</li>
|
||||
<li>
|
||||
SMS Feature
|
||||
<a href="https://github.com/snjzb" target="_blank">snjzb</a>
|
||||
</li>
|
||||
<li>
|
||||
Original Simple Admin
|
||||
<a href="https://github.com/aesthernr" target="_blank">aesthernr</a>
|
||||
</li>
|
||||
<li>
|
||||
Original Socat Bridge
|
||||
<a href="https://github.com/natecarlson" target="_blank">natecarlson</a>
|
||||
</li>
|
||||
<li>
|
||||
Initial Original Simple Admin Fixes
|
||||
<a href="https://github.com/rbflurry/" target="_blank">rbflurry</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="content has-text-centered">
|
||||
<p>
|
||||
<strong> <a href="https://github.com/iamromulan/quectel-rgmii-toolkit.git">QuecManager</a></strong>
|
||||
version 1.0. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
<div class="content has-text-centered">
|
||||
<p>
|
||||
<strong>
|
||||
<a href="https://github.com/iamromulan/quectel-rgmii-toolkit.git"
|
||||
>QuecManager</a
|
||||
></strong
|
||||
>
|
||||
version 1.0. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<div id="reboot-modal" class="modal">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<section class="modal-card-body rounded-edge">
|
||||
<p class="subtitle" id="modal-message">
|
||||
Do you want to reboot the device?
|
||||
</p>
|
||||
<div id="loading-content" style="display: none">
|
||||
<div class="custom-loader"></div>
|
||||
<div class="countdown-text">
|
||||
Rebooting... <span id="countdown">40</span>s
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons" id="modal-buttons">
|
||||
<button class="button is-warning" id="rebootModem">Reboot</button>
|
||||
<button class="button cancel" aria-label="close">Cancel</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -19,10 +19,12 @@
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
|
||||
<script src="js/styles/nav-burger.js"></script>
|
||||
<script src="js/styles/toggle-theme.js"></script>
|
||||
<script src="/js/styles/nav-burger.js"></script>
|
||||
<script src="/js/styles/modal-trigger.js"></script>
|
||||
<script src="/js/utils/reboot.js"></script>
|
||||
<script defer src="/js/auth/auth.js"></script>
|
||||
<script src="/js/handle-at-input.js"></script>
|
||||
<script src="/js/advance/at-terminal.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
@@ -57,7 +59,7 @@
|
||||
|
||||
<div id="navMenu" class="navbar-menu">
|
||||
<div class="navbar-start ml-6">
|
||||
<a class="navbar-item" href="/"> Home </a>
|
||||
<a class="navbar-item has-text-weight-bold" href="/"> Home </a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> Cellular </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
@@ -70,7 +72,14 @@
|
||||
<a class="navbar-item" href="/cell-sms.html"> Cell SMS </a>
|
||||
</div>
|
||||
</div>
|
||||
<a class="navbar-item has-text-weight-bold" href="/advance-settings.html"> Advance </a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> Advance </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<a class="navbar-item" href="/advance-settings.html"> Advance Settings </a>
|
||||
<a class="navbar-item" href="#">Experimental Features</a>
|
||||
<a class="navbar-item" href="/cgi-bin/luci">OpenWRT Luci</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class="navbar-item" href="/about.html"> About </a>
|
||||
</div>
|
||||
|
||||
@@ -90,11 +99,11 @@
|
||||
</p>
|
||||
<div class="is-flex is-mobile is-align-items-center">
|
||||
<p class="control">
|
||||
<a href="#" class="button is-warning is-outlined">
|
||||
<div href="#" class="button is-warning is-outlined reboot-modal" data-target="reboot-modal" >
|
||||
<span class="icon">
|
||||
<i class="fas fa-power-off"></i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</p>
|
||||
<p class="control ml-2 is-mobile">
|
||||
<a
|
||||
@@ -125,216 +134,218 @@
|
||||
</nav>
|
||||
|
||||
<div class="column-margin">
|
||||
<div class="fixed-grid has-2-cols has-1-cols-mobile">
|
||||
<div class="grid">
|
||||
<div class="cell">
|
||||
<div class="card">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<p class="card-header-title">AT Command Terminal</p>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<form id="commandForm">
|
||||
<div class="card-header">
|
||||
<div class="card-header-title">AT command Terminal</div>
|
||||
<div class="field">
|
||||
<label class="label">Output</label>
|
||||
<div class="control">
|
||||
<textarea
|
||||
class="textarea"
|
||||
id="output"
|
||||
rows="10"
|
||||
readonly
|
||||
placeholder="AT command responses will appear here..."
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="fixed-grid has-1-cols">
|
||||
<div class="grid is-gap-5">
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">AT Command</label>
|
||||
<div class="control">
|
||||
<textarea
|
||||
class="textarea"
|
||||
id="output"
|
||||
placeholder="AT Response"
|
||||
rows="10"
|
||||
disabled
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">Input AT Command</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
placeholder="ATI"
|
||||
id="command"
|
||||
name="command"
|
||||
/>
|
||||
</div>
|
||||
<p class="help">
|
||||
Some commands may take time to execute so wait
|
||||
patiently.
|
||||
</p>
|
||||
</div>
|
||||
<div class="field is-hidden-touch">
|
||||
<div class="level">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<label class="label">Command History</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<button
|
||||
type="button"
|
||||
id="clearHistory"
|
||||
class="button is-small is-link has-text-white"
|
||||
>
|
||||
Clear All
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="command-history" id="commandHistory">
|
||||
<div class="no-history" id="noHistory">No commands yet</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a
|
||||
href="#"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
id="sendCommand"
|
||||
>
|
||||
Send AT Command
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
id="resetForm"
|
||||
>
|
||||
Reset
|
||||
</a>
|
||||
|
||||
<div class="field has-addons">
|
||||
<div class="control is-expanded">
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
id="command"
|
||||
placeholder="Enter AT command (e.g., ATI)"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
<div class="control" style="position: relative">
|
||||
<button
|
||||
type="submit"
|
||||
class="button is-link"
|
||||
id="sendButton"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
</span>
|
||||
<span>Send</span>
|
||||
</button>
|
||||
<span id="cooldownTimer"></span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-header-title">Advance Settings</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="fixed-grid has-1-cols">
|
||||
<div class="grid is-gap-5">
|
||||
<div class="cell">
|
||||
<div class="fixed-grid has-2-cols has-1-cols-mobile">
|
||||
<div class="grid">
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">IP Passthrough Mode</label>
|
||||
<p class="control has-icons-left">
|
||||
<span class="select">
|
||||
<select>
|
||||
<option selected>
|
||||
Select IP Passthrough Mode
|
||||
</option>
|
||||
<option>Disable</option>
|
||||
<option>ETH Only</option>
|
||||
<option>USB Only</option>
|
||||
</select>
|
||||
</span>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-ethernet"></i>
|
||||
</span>
|
||||
</p>
|
||||
<p class="help">
|
||||
Selecting a mode will apply immediately.
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-header-title">Advance Settings</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="fixed-grid has-1-cols">
|
||||
<div class="grid is-gap-5">
|
||||
<div class="cell">
|
||||
<div class="fixed-grid has-2-cols has-1-cols-mobile">
|
||||
<div class="grid">
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">IP Passthrough Mode</label>
|
||||
<p class="control has-icons-left">
|
||||
<span class="select">
|
||||
<select>
|
||||
<option selected>
|
||||
Select IP Passthrough Mode
|
||||
</option>
|
||||
<option>Disable</option>
|
||||
<option>ETH Only</option>
|
||||
<option>USB Only</option>
|
||||
</select>
|
||||
</span>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-ethernet"></i>
|
||||
</span>
|
||||
</p>
|
||||
<p class="help">
|
||||
Selecting a mode will apply immediately.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">USB Modem Protocol</label>
|
||||
<p class="control has-icons-left">
|
||||
<span class="select">
|
||||
<select>
|
||||
<option selected>
|
||||
Select USB Modem Protocol
|
||||
</option>
|
||||
<option>RMNET</option>
|
||||
<option>ECM (Recommended)</option>
|
||||
<option>MBIM</option>
|
||||
<option>RNDIS</option>
|
||||
</select>
|
||||
</span>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-network-wired"></i>
|
||||
</span>
|
||||
</p>
|
||||
<p class="help">
|
||||
Selecting a mode will apply immediately.
|
||||
</p>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">USB Modem Protocol</label>
|
||||
<p class="control has-icons-left">
|
||||
<span class="select">
|
||||
<select>
|
||||
<option selected>
|
||||
Select USB Modem Protocol
|
||||
</option>
|
||||
<option>RMNET</option>
|
||||
<option>ECM (Recommended)</option>
|
||||
<option>MBIM</option>
|
||||
<option>RNDIS</option>
|
||||
</select>
|
||||
</span>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-network-wired"></i>
|
||||
</span>
|
||||
</p>
|
||||
<p class="help">
|
||||
Selecting a mode will apply immediately.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label"
|
||||
>Onboard DNS Proxy Mode</label
|
||||
>
|
||||
<p class="control has-icons-left">
|
||||
<span class="select">
|
||||
<select>
|
||||
<option selected>
|
||||
Select Onboard DNS Proxy
|
||||
</option>
|
||||
<option>Enable</option>
|
||||
<option>Disable</option>
|
||||
</select>
|
||||
</span>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-server"></i>
|
||||
</span>
|
||||
</p>
|
||||
<p class="help">
|
||||
Selecting a mode will apply immediately.
|
||||
</p>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">Onboard DNS Proxy Mode</label>
|
||||
<p class="control has-icons-left">
|
||||
<span class="select">
|
||||
<select>
|
||||
<option selected>
|
||||
Select Onboard DNS Proxy
|
||||
</option>
|
||||
<option>Enable</option>
|
||||
<option>Disable</option>
|
||||
</select>
|
||||
</span>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-server"></i>
|
||||
</span>
|
||||
</p>
|
||||
<p class="help">
|
||||
Selecting a mode will apply immediately.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="fixed-grid has-2-cols">
|
||||
<div class="grid is-gap-3">
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">TTL State</label>
|
||||
<div class="control has-icons-right">
|
||||
<input
|
||||
class="input is-danger"
|
||||
placeholder="Disabled"
|
||||
disabled
|
||||
/>
|
||||
<span class="icon is-small is-right">
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div class="fixed-grid has-2-cols">
|
||||
<div class="grid is-gap-3">
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">TTL State</label>
|
||||
<div class="control has-icons-right">
|
||||
<input
|
||||
class="input is-danger"
|
||||
placeholder="Disabled"
|
||||
disabled
|
||||
/>
|
||||
<span class="icon is-small is-right">
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">TTL Value</label>
|
||||
<div class="control has-icons-right">
|
||||
<input
|
||||
class="input is-danger"
|
||||
placeholder="0"
|
||||
disabled
|
||||
/>
|
||||
<span class="icon is-small is-right">
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">TTL Value</label>
|
||||
<div class="control has-icons-right">
|
||||
<input
|
||||
class="input is-danger"
|
||||
placeholder="0"
|
||||
disabled
|
||||
/>
|
||||
<span class="icon is-small is-right">
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell is-col-span-2">
|
||||
<div class="field">
|
||||
<label class="label">TTL Value to Set</label>
|
||||
<div class="control has-icons-left">
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
placeholder="Custom TTL Value"
|
||||
value="bulma"
|
||||
/>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-wifi"></i>
|
||||
</span>
|
||||
</div>
|
||||
<p
|
||||
class="help is-success has-text-weight-semibold"
|
||||
>
|
||||
Set the TTL Value to 0 to disable.
|
||||
</p>
|
||||
<div class="cell is-col-span-2">
|
||||
<div class="field">
|
||||
<label class="label">TTL Value to Set</label>
|
||||
<div class="control has-icons-left">
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
placeholder="Custom TTL Value"
|
||||
value="bulma"
|
||||
/>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-wifi"></i>
|
||||
</span>
|
||||
</div>
|
||||
<p class="help is-success has-text-weight-semibold">
|
||||
Set the TTL Value to 0 to disable.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -342,20 +353,20 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a
|
||||
href="#"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Save
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Reset
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a
|
||||
href="#"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Save
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Reset
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -396,52 +407,25 @@
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<script>
|
||||
// Handle form submission via JavaScript
|
||||
document
|
||||
.getElementById("sendCommand")
|
||||
.addEventListener("click", function (e) {
|
||||
e.preventDefault(); // Prevent default link behavior
|
||||
|
||||
const commandInput = document.getElementById("command").value;
|
||||
const outputTextarea = document.getElementById("output");
|
||||
|
||||
// Make sure input is not empty
|
||||
if (commandInput.trim() === "") {
|
||||
outputTextarea.value = "Please enter a valid AT command.";
|
||||
return;
|
||||
}
|
||||
|
||||
// Send the AT command to the CGI script via fetch
|
||||
fetch("/cgi-bin/atinout_handler.sh", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded",
|
||||
},
|
||||
body: `command=${encodeURIComponent(commandInput)}`,
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
// Display the response in the textarea
|
||||
if (data.output) {
|
||||
outputTextarea.value = data.output;
|
||||
} else {
|
||||
outputTextarea.value = "Error: No output received.";
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
outputTextarea.value = `Error fetching data: ${error.message}`;
|
||||
});
|
||||
});
|
||||
|
||||
// Reset form functionality
|
||||
document
|
||||
.getElementById("resetForm")
|
||||
.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
document.getElementById("commandForm").reset();
|
||||
document.getElementById("output").value = "";
|
||||
});
|
||||
</script>
|
||||
<div id="reboot-modal" class="modal">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<section class="modal-card-body rounded-edge">
|
||||
<p class="subtitle" id="modal-message">
|
||||
Do you want to reboot the device?
|
||||
</p>
|
||||
<div id="loading-content" style="display: none">
|
||||
<div class="custom-loader"></div>
|
||||
<div class="countdown-text">
|
||||
Rebooting... <span id="countdown">80</span>s
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons" id="modal-buttons">
|
||||
<button class="button is-warning" id="rebootModem">Reboot</button>
|
||||
<button class="button cancel" aria-label="close">Cancel</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,278 +1,333 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
|
||||
<!-- Logo -->
|
||||
<link rel="simpleadmin-logo" href="favicon.ico" />
|
||||
|
||||
<link rel="stylesheet" href="css/bulma/bulma.scss">
|
||||
<link rel="stylesheet" href="css/bulma/css/bulma.min.css">
|
||||
<link rel="stylesheet" href="css/bulma/css/bulma.css">
|
||||
<link rel="stylesheet" href="css/custom.css">
|
||||
<link rel="stylesheet" href="css/bulma/bulma.scss" />
|
||||
<link rel="stylesheet" href="css/bulma/css/bulma.min.css" />
|
||||
<link rel="stylesheet" href="css/bulma/css/bulma.css" />
|
||||
<link rel="stylesheet" href="css/custom.css" />
|
||||
|
||||
<!-- Font awesome icons -->
|
||||
<script src="https://kit.fontawesome.com/b0caedfab3.js" crossorigin="anonymous"></script>
|
||||
<script
|
||||
src="https://kit.fontawesome.com/b0caedfab3.js"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
|
||||
<script src="js/styles/nav-burger.js"></script>
|
||||
<script src="js/styles/toggle-theme.js"></script>
|
||||
<script src="/js/styles/nav-burger.js"></script>
|
||||
<script src="/js/styles/modal-trigger.js"></script>
|
||||
<script src="/js/utils/reboot.js"></script>
|
||||
<script defer src="/js/auth/auth.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const savedTheme = localStorage.getItem('theme') || 'theme-dark';
|
||||
document.documentElement.classList.add(savedTheme);
|
||||
})();
|
||||
(function () {
|
||||
const savedTheme = localStorage.getItem("theme") || "theme-dark";
|
||||
document.documentElement.classList.add(savedTheme);
|
||||
})();
|
||||
</script>
|
||||
<title>QuecManager</title>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body class="body-margin">
|
||||
<body class="body-margin">
|
||||
<nav class="navbar is-transparent">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="/">
|
||||
<img src="/assets/logo.png" alt="Logo" />
|
||||
<span class="title">QuecManager</span>
|
||||
</a>
|
||||
<a
|
||||
role="button"
|
||||
class="navbar-burger"
|
||||
aria-label="menu"
|
||||
aria-expanded="false"
|
||||
data-target="navMenu"
|
||||
>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="navMenu" class="navbar-menu">
|
||||
<div class="navbar-start ml-6">
|
||||
<a class="navbar-item" href="/"> Home </a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> Cellular </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<a class="navbar-item" href="/bandlock.html"> Band Locking </a>
|
||||
<a class="navbar-item" href="/cell-locking.html">Cell Locking</a>
|
||||
<a class="navbar-item" href="/cell-scanner.html">Cell Scanner</a>
|
||||
<a class="navbar-item" href="/cell-settings.html"
|
||||
>Cell Settings</a
|
||||
>
|
||||
<a class="navbar-item" href="/cell-sms.html"> Cell SMS </a>
|
||||
</div>
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="/">
|
||||
<img src="/assets/logo.png" alt="Logo" />
|
||||
<span class="title">QuecManager</span>
|
||||
</a>
|
||||
<a
|
||||
role="button"
|
||||
class="navbar-burger"
|
||||
aria-label="menu"
|
||||
aria-expanded="false"
|
||||
data-target="navMenu"
|
||||
>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="navMenu" class="navbar-menu">
|
||||
<div class="navbar-start ml-6">
|
||||
<a class="navbar-item has-text-weight-bold" href="/"> Home </a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> Cellular </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<a class="navbar-item" href="/bandlock.html"> Band Locking </a>
|
||||
<a class="navbar-item" href="/cell-locking.html">Cell Locking</a>
|
||||
<a class="navbar-item" href="/cell-scanner.html">Cell Scanner</a>
|
||||
<a class="navbar-item" href="/cell-settings.html"
|
||||
>Cell Settings</a
|
||||
>
|
||||
<a class="navbar-item" href="/cell-sms.html"> Cell SMS </a>
|
||||
</div>
|
||||
<a class="navbar-item" href="/advance-settings.html"> Advance </a>
|
||||
<a class="navbar-item" href="/about.html"> About </a>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="buttons is-flex-direction-column-mobile">
|
||||
<p class="control is-expanded-mobile">
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> Advance </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<a class="navbar-item" href="/advance-settings.html"> Advance Settings </a>
|
||||
<a class="navbar-item" href="#">Experimental Features</a>
|
||||
<a class="navbar-item" href="/cgi-bin/luci">OpenWRT Luci</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class="navbar-item" href="/about.html"> About </a>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="buttons is-flex-direction-column-mobile">
|
||||
<p class="control is-expanded-mobile">
|
||||
<a
|
||||
href="#"
|
||||
class="button is-link is-outlined is-fullwidth-mobile"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-arrows-rotate"></i>
|
||||
</span>
|
||||
<span>Restart Connection</span>
|
||||
</a>
|
||||
</p>
|
||||
<div class="is-flex is-mobile is-align-items-center">
|
||||
<p class="control">
|
||||
<div href="#" class="button is-warning is-outlined reboot-modal" data-target="reboot-modal" >
|
||||
<span class="icon">
|
||||
<i class="fas fa-power-off"></i>
|
||||
</span>
|
||||
</div>
|
||||
</p>
|
||||
<p class="control ml-2 is-mobile">
|
||||
<a
|
||||
href="#"
|
||||
class="button is-link is-outlined is-fullwidth-mobile"
|
||||
class="button is-warning is-outlined js-theme-toggle"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-arrows-rotate"></i>
|
||||
<i class="fas fa-sun"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control ml-2 is-mobile">
|
||||
<a
|
||||
href="#"
|
||||
class="button is-warning is-outlined js-theme-toggle"
|
||||
id="logoutButton"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-right-from-bracket"></i>
|
||||
</span>
|
||||
<span>Restart Connection</span>
|
||||
</a>
|
||||
</p>
|
||||
<div class="is-flex is-mobile is-align-items-center">
|
||||
<p class="control">
|
||||
<a href="#" class="button is-warning is-outlined">
|
||||
<span class="icon">
|
||||
<i class="fas fa-power-off"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control ml-2 is-mobile">
|
||||
<a
|
||||
href="#"
|
||||
class="button is-warning is-outlined js-theme-toggle"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-sun"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control ml-2 is-mobile">
|
||||
<a
|
||||
href="#"
|
||||
class="button is-warning is-outlined js-theme-toggle"
|
||||
id="logoutButton"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-right-from-bracket"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="column-margin">
|
||||
<div class="fixed-grid has-2-cols has-1-cols-mobile">
|
||||
<div class="grid is-gap-5">
|
||||
<div class="cell is-col-span-2 is-col-span-1-mobile">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-header-title">
|
||||
4G LTE Band Locking
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="fixed-grid has-5-cols has-3-cols-mobile">
|
||||
<div class="grid" id="lte_bands">
|
||||
<!-- write each lte band cell here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href="#" class="card-footer-item has-text-link has-text-weight-semibold has-text-white">
|
||||
Lock LTE Bands
|
||||
</a>
|
||||
|
||||
<a href="#" class="card-footer-item has-text-link has-text-weight-semibold has-text-white">
|
||||
Uncheck All
|
||||
</a>
|
||||
|
||||
<a href="#" class="card-footer-item has-text-link has-text-weight-semibold has-text-white">
|
||||
Reset
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fixed-grid has-2-cols has-1-cols-mobile">
|
||||
<div class="grid is-gap-5">
|
||||
<div class="cell is-col-span-2 is-col-span-1-mobile">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-header-title">4G LTE Band Locking</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="fixed-grid has-5-cols has-3-cols-mobile">
|
||||
<div class="grid" id="lte_bands">
|
||||
<!-- write each lte band cell here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a
|
||||
href="#"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Lock LTE Bands
|
||||
</a>
|
||||
|
||||
<div class="cell">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-header-title">
|
||||
5G-NR NSA Band Locking
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="fixed-grid has-5-cols has-3-cols-mobile">
|
||||
<div class="grid" id="nsa_bands">
|
||||
<!-- write each nsa band cell here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href="#" class="card-footer-item has-text-link has-text-weight-semibold has-text-white">
|
||||
Lock NSA Bands
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Uncheck All
|
||||
</a>
|
||||
|
||||
<a href="#" class="card-footer-item has-text-link has-text-weight-semibold has-text-white">
|
||||
Uncheck All
|
||||
</a>
|
||||
|
||||
<a href="#" class="card-footer-item has-text-link has-text-weight-semibold has-text-white">
|
||||
Reset
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-header-title">
|
||||
5G-NR SA Band Locking
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="fixed-grid has-5-cols has-3-cols-mobile">
|
||||
<div class="grid" id="sa_bands">
|
||||
<!-- write each SA band cell here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href="#" class="card-footer-item has-text-link has-text-weight-semibold has-text-white">
|
||||
Lock SA Bands
|
||||
</a>
|
||||
|
||||
<a href="#" class="card-footer-item has-text-link has-text-weight-semibold has-text-white">
|
||||
Uncheck All
|
||||
</a>
|
||||
|
||||
<a href="#" class="card-footer-item has-text-link has-text-weight-semibold has-text-white">
|
||||
Reset
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Reset
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-header-title">5G-NR NSA Band Locking</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="fixed-grid has-5-cols has-3-cols-mobile">
|
||||
<div class="grid" id="nsa_bands">
|
||||
<!-- write each nsa band cell here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a
|
||||
href="#"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Lock NSA Bands
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Uncheck All
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Reset
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-header-title">5G-NR SA Band Locking</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="fixed-grid has-5-cols has-3-cols-mobile">
|
||||
<div class="grid" id="sa_bands">
|
||||
<!-- write each SA band cell here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a
|
||||
href="#"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Lock SA Bands
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Uncheck All
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Reset
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="content">
|
||||
<div class="fixed-grid has-2-cols has-1-cols-mobile">
|
||||
<div class="grid">
|
||||
<div class="cell">
|
||||
<div class="icon-text">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
</span>
|
||||
<span>Information</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="fixed-grid has-2-cols has-1-cols-mobile">
|
||||
<div class="grid">
|
||||
<div class="cell">
|
||||
<div class="icon-text">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
</span>
|
||||
<span>Information</span>
|
||||
</div>
|
||||
|
||||
<p class="block has-text-weight-semibold">
|
||||
If problem persists after locking bands, please reboot the modem.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="icon-text">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
</span>
|
||||
<span>Current Active Bands</span>
|
||||
</div>
|
||||
|
||||
<p class="block has-text-weight-semibold">
|
||||
Band 1 / Band 3 / NR Band 41
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="block has-text-weight-semibold">
|
||||
If problem persists after locking bands, please reboot the
|
||||
modem.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
var lte_bands = "1:2:3:4:5:7:8:12:13:14:18:19:20:25:26:28:29:30:32:34:38:39:40:41:42:43:46:48:66:71";
|
||||
<div class="cell">
|
||||
<div class="icon-text">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
</span>
|
||||
<span>Current Active Bands</span>
|
||||
</div>
|
||||
|
||||
<p class="block has-text-weight-semibold">
|
||||
Band 1 / Band 3 / NR Band 41
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<div id="reboot-modal" class="modal">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<section class="modal-card-body rounded-edge">
|
||||
<p class="subtitle" id="modal-message">
|
||||
Do you want to reboot the device?
|
||||
</p>
|
||||
<div id="loading-content" style="display: none">
|
||||
<div class="custom-loader"></div>
|
||||
<div class="countdown-text">
|
||||
Rebooting... <span id="countdown">40</span>s
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons" id="modal-buttons">
|
||||
<button class="button is-warning" id="rebootModem">Reboot</button>
|
||||
<button class="button cancel" aria-label="close">Cancel</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
var lte_bands =
|
||||
"1:2:3:4:5:7:8:12:13:14:18:19:20:25:26:28:29:30:32:34:38:39:40:41:42:43:46:48:66:71";
|
||||
var nsa_bands = "1:2:3:5:7:8:12:20:25:28:38:40:41:48:66:71:77:78:79";
|
||||
var sa_bands = "1:2:3:5:7:8:12:20:25:28:38:40:41:48:66:71:77:78:79";
|
||||
|
||||
function populateBands(bandsString, targetId) {
|
||||
var bandsArray = bandsString.split(":");
|
||||
var html = "";
|
||||
var bandsArray = bandsString.split(":");
|
||||
var html = "";
|
||||
|
||||
for (var i = 0; i < bandsArray.length; i++) {
|
||||
html += '<div class="cell"><label class="checkbox"><input type="checkbox" /> B' + bandsArray[i] + '</label></div>';
|
||||
}
|
||||
for (var i = 0; i < bandsArray.length; i++) {
|
||||
html +=
|
||||
'<div class="cell"><label class="checkbox"><input type="checkbox" /> B' +
|
||||
bandsArray[i] +
|
||||
"</label></div>";
|
||||
}
|
||||
|
||||
// Inject the generated HTML into the target element
|
||||
document.querySelector(targetId).innerHTML = html;
|
||||
// Inject the generated HTML into the target element
|
||||
document.querySelector(targetId).innerHTML = html;
|
||||
}
|
||||
|
||||
// Populate the bands in their respective grids
|
||||
populateBands(lte_bands, '#lte_bands');
|
||||
populateBands(nsa_bands, '#nsa_bands');
|
||||
populateBands(sa_bands, '#sa_bands');
|
||||
|
||||
</script>
|
||||
|
||||
</html>
|
||||
populateBands(lte_bands, "#lte_bands");
|
||||
populateBands(nsa_bands, "#nsa_bands");
|
||||
populateBands(sa_bands, "#sa_bands");
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@@ -1,356 +1,419 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
|
||||
<!-- Logo -->
|
||||
<link rel="simpleadmin-logo" href="favicon.ico" />
|
||||
|
||||
<link rel="stylesheet" href="css/bulma/bulma.scss">
|
||||
<link rel="stylesheet" href="css/bulma/css/bulma.min.css">
|
||||
<link rel="stylesheet" href="css/bulma/css/bulma.css">
|
||||
<link rel="stylesheet" href="css/custom.css">
|
||||
<link rel="stylesheet" href="css/bulma/bulma.scss" />
|
||||
<link rel="stylesheet" href="css/bulma/css/bulma.min.css" />
|
||||
<link rel="stylesheet" href="css/bulma/css/bulma.css" />
|
||||
<link rel="stylesheet" href="css/custom.css" />
|
||||
|
||||
<!-- Font awesome icons -->
|
||||
<script src="https://kit.fontawesome.com/b0caedfab3.js" crossorigin="anonymous"></script>
|
||||
<script
|
||||
src="https://kit.fontawesome.com/b0caedfab3.js"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
|
||||
<script src="js/styles/nav-burger.js"></script>
|
||||
<script src="js/styles/toggle-theme.js"></script>
|
||||
<script src="/js/styles/nav-burger.js"></script>
|
||||
<script src="/js/styles/modal-trigger.js"></script>
|
||||
<script src="/js/utils/reboot.js"></script>
|
||||
<script defer src="/js/auth/auth.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const savedTheme = localStorage.getItem('theme') || 'theme-dark';
|
||||
document.documentElement.classList.add(savedTheme);
|
||||
})();
|
||||
(function () {
|
||||
const savedTheme = localStorage.getItem("theme") || "theme-dark";
|
||||
document.documentElement.classList.add(savedTheme);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<title>QuecManager</title>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body class="body-margin">
|
||||
<body class="body-margin">
|
||||
<nav class="navbar is-transparent">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="/">
|
||||
<img src="/assets/logo.png" alt="Logo" />
|
||||
<span class="title">QuecManager</span>
|
||||
</a>
|
||||
<a
|
||||
role="button"
|
||||
class="navbar-burger"
|
||||
aria-label="menu"
|
||||
aria-expanded="false"
|
||||
data-target="navMenu"
|
||||
>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="navMenu" class="navbar-menu">
|
||||
<div class="navbar-start ml-6">
|
||||
<a class="navbar-item" href="/"> Home </a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> Cellular </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<a class="navbar-item" href="/bandlock.html"> Band Locking </a>
|
||||
<a class="navbar-item" href="/cell-locking.html">Cell Locking</a>
|
||||
<a class="navbar-item" href="/cell-scanner.html">Cell Scanner</a>
|
||||
<a class="navbar-item" href="/cell-settings.html"
|
||||
>Cell Settings</a
|
||||
>
|
||||
<a class="navbar-item" href="/cell-sms.html"> Cell SMS </a>
|
||||
</div>
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="/">
|
||||
<img src="/assets/logo.png" alt="Logo" />
|
||||
<span class="title">QuecManager</span>
|
||||
</a>
|
||||
<a
|
||||
role="button"
|
||||
class="navbar-burger"
|
||||
aria-label="menu"
|
||||
aria-expanded="false"
|
||||
data-target="navMenu"
|
||||
>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="navMenu" class="navbar-menu">
|
||||
<div class="navbar-start ml-6">
|
||||
<a class="navbar-item has-text-weight-bold" href="/"> Home </a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> Cellular </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<a class="navbar-item" href="/bandlock.html"> Band Locking </a>
|
||||
<a class="navbar-item" href="/cell-locking.html">Cell Locking</a>
|
||||
<a class="navbar-item" href="/cell-scanner.html">Cell Scanner</a>
|
||||
<a class="navbar-item" href="/cell-settings.html"
|
||||
>Cell Settings</a
|
||||
>
|
||||
<a class="navbar-item" href="/cell-sms.html"> Cell SMS </a>
|
||||
</div>
|
||||
<a class="navbar-item" href="/advance-settings.html"> Advance </a>
|
||||
<a class="navbar-item" href="/about.html"> About </a>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="buttons is-flex-direction-column-mobile">
|
||||
<p class="control is-expanded-mobile">
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> Advance </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<a class="navbar-item" href="/advance-settings.html"> Advance Settings </a>
|
||||
<a class="navbar-item" href="#">Experimental Features</a>
|
||||
<a class="navbar-item" href="/cgi-bin/luci">OpenWRT Luci</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class="navbar-item" href="/about.html"> About </a>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="buttons is-flex-direction-column-mobile">
|
||||
<p class="control is-expanded-mobile">
|
||||
<a
|
||||
href="#"
|
||||
class="button is-link is-outlined is-fullwidth-mobile"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-arrows-rotate"></i>
|
||||
</span>
|
||||
<span>Restart Connection</span>
|
||||
</a>
|
||||
</p>
|
||||
<div class="is-flex is-mobile is-align-items-center">
|
||||
<p class="control">
|
||||
<div href="#" class="button is-warning is-outlined reboot-modal" data-target="reboot-modal" >
|
||||
<span class="icon">
|
||||
<i class="fas fa-power-off"></i>
|
||||
</span>
|
||||
</div>
|
||||
</p>
|
||||
<p class="control ml-2 is-mobile">
|
||||
<a
|
||||
href="#"
|
||||
class="button is-link is-outlined is-fullwidth-mobile"
|
||||
class="button is-warning is-outlined js-theme-toggle"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-arrows-rotate"></i>
|
||||
<i class="fas fa-sun"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control ml-2 is-mobile">
|
||||
<a
|
||||
href="#"
|
||||
class="button is-warning is-outlined js-theme-toggle"
|
||||
id="logoutButton"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-right-from-bracket"></i>
|
||||
</span>
|
||||
<span>Restart Connection</span>
|
||||
</a>
|
||||
</p>
|
||||
<div class="is-flex is-mobile is-align-items-center">
|
||||
<p class="control">
|
||||
<a href="#" class="button is-warning is-outlined">
|
||||
<span class="icon">
|
||||
<i class="fas fa-power-off"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control ml-2 is-mobile">
|
||||
<a
|
||||
href="#"
|
||||
class="button is-warning is-outlined js-theme-toggle"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-sun"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control ml-2 is-mobile">
|
||||
<a
|
||||
href="#"
|
||||
class="button is-warning is-outlined js-theme-toggle"
|
||||
id="logoutButton"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-right-from-bracket"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="column-margin">
|
||||
<div class="fixed-grid has-2-cols has-1-cols-mobile">
|
||||
<div class="grid is-gap-5">
|
||||
<div class="cell">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-header-title">
|
||||
4G LTE Cell Locking
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="fixed-grid has-2-cols">
|
||||
<div class="grid">
|
||||
<!-- Entry 1 Start -->
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">EARFCN 1</label>
|
||||
<div class="control has-icons-left">
|
||||
<input class="input" type="email" placeholder="EARFCN">
|
||||
<span class="icon is-left">
|
||||
<i class="fas fa-bolt"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">PCI 1</label>
|
||||
<div class="control has-icons-left">
|
||||
<input class="input" type="email" placeholder="PCI">
|
||||
<span class="icon is-left">
|
||||
<i class="fa-solid fa-signal"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Entry 1 End -->
|
||||
|
||||
<!-- Entry 2 Start -->
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">EARFCN 2</label>
|
||||
<div class="control has-icons-left">
|
||||
<input class="input" type="email" placeholder="EARFCN">
|
||||
<span class="icon is-left">
|
||||
<i class="fas fa-bolt"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">PCI 2</label>
|
||||
<div class="control has-icons-left">
|
||||
<input class="input" type="email" placeholder="PCI">
|
||||
<span class="icon is-left">
|
||||
<i class="fa-solid fa-signal"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Entry 2 End -->
|
||||
|
||||
<!-- Entry 3 Start -->
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">EARFCN 3</label>
|
||||
<div class="control has-icons-left">
|
||||
<input class="input" type="email" placeholder="EARFCN">
|
||||
<span class="icon is-left">
|
||||
<i class="fas fa-bolt"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">PCI 3</label>
|
||||
<div class="control has-icons-left">
|
||||
<input class="input" type="email" placeholder="PCI">
|
||||
<span class="icon is-left">
|
||||
<i class="fa-solid fa-signal"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Entry 3 End -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href="#" class="card-footer-item has-text-link has-text-weight-semibold has-text-white">
|
||||
Lock LTE Cells
|
||||
</a>
|
||||
|
||||
<a href="#" class="card-footer-item has-text-link has-text-weight-semibold has-text-white">
|
||||
Reset
|
||||
</a>
|
||||
<div class="fixed-grid has-2-cols has-1-cols-mobile">
|
||||
<div class="grid is-gap-5">
|
||||
<div class="cell">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-header-title">4G LTE Cell Locking</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="fixed-grid has-2-cols">
|
||||
<div class="grid">
|
||||
<!-- Entry 1 Start -->
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">EARFCN 1</label>
|
||||
<div class="control has-icons-left">
|
||||
<input
|
||||
class="input"
|
||||
type="email"
|
||||
placeholder="EARFCN"
|
||||
/>
|
||||
<span class="icon is-left">
|
||||
<i class="fas fa-bolt"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-header-title">
|
||||
5G-NR SA Cell Locking
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="fixed-grid has-2-cols">
|
||||
<div class="grid">
|
||||
<!-- Entry 1 Start -->
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">NR ARFCN</label>
|
||||
<div class="control has-icons-left">
|
||||
<input class="input" type="email" placeholder="NR-ARFCN">
|
||||
<span class="icon is-left">
|
||||
<i class="fas fa-bolt"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">NR PCI</label>
|
||||
<div class="control has-icons-left">
|
||||
<input class="input" type="email" placeholder="NR PCI">
|
||||
<span class="icon is-left">
|
||||
<i class="fa-solid fa-signal"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Entry 1 End -->
|
||||
|
||||
<!-- Entry 2 Start -->
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">SCS</label>
|
||||
<div class="control has-icons-left">
|
||||
<span class="select">
|
||||
<select>
|
||||
<option selected>Select SCS</option>
|
||||
<option>15 kHz</option>
|
||||
<option>30 kHz</option>
|
||||
<option>60 kHz</option>
|
||||
<option>120 kHz</option>
|
||||
<option>240 kHz</option>
|
||||
</select>
|
||||
</span>
|
||||
<span class="icon is-left">
|
||||
<i class="fas fa-bolt"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">NR Band</label>
|
||||
<div class="control has-icons-left">
|
||||
<input class="input" type="email" placeholder="NR Band">
|
||||
<span class="icon is-left">
|
||||
<i class="fa-solid fa-signal"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Entry 2 End -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href="#" class="card-footer-item has-text-link has-text-weight-semibold has-text-white">
|
||||
Lock SA Cells
|
||||
</a>
|
||||
|
||||
<a href="#" class="card-footer-item has-text-link has-text-weight-semibold has-text-white">
|
||||
Reset
|
||||
</a>
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">PCI 1</label>
|
||||
<div class="control has-icons-left">
|
||||
<input class="input" type="email" placeholder="PCI" />
|
||||
<span class="icon is-left">
|
||||
<i class="fa-solid fa-signal"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Entry 1 End -->
|
||||
|
||||
<!-- Entry 2 Start -->
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">EARFCN 2</label>
|
||||
<div class="control has-icons-left">
|
||||
<input
|
||||
class="input"
|
||||
type="email"
|
||||
placeholder="EARFCN"
|
||||
/>
|
||||
<span class="icon is-left">
|
||||
<i class="fas fa-bolt"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">PCI 2</label>
|
||||
<div class="control has-icons-left">
|
||||
<input class="input" type="email" placeholder="PCI" />
|
||||
<span class="icon is-left">
|
||||
<i class="fa-solid fa-signal"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Entry 2 End -->
|
||||
|
||||
<!-- Entry 3 Start -->
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">EARFCN 3</label>
|
||||
<div class="control has-icons-left">
|
||||
<input
|
||||
class="input"
|
||||
type="email"
|
||||
placeholder="EARFCN"
|
||||
/>
|
||||
<span class="icon is-left">
|
||||
<i class="fas fa-bolt"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">PCI 3</label>
|
||||
<div class="control has-icons-left">
|
||||
<input class="input" type="email" placeholder="PCI" />
|
||||
<span class="icon is-left">
|
||||
<i class="fa-solid fa-signal"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Entry 3 End -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a
|
||||
href="#"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Lock LTE Cells
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Reset
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-header-title">5G-NR SA Cell Locking</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="fixed-grid has-2-cols">
|
||||
<div class="grid">
|
||||
<!-- Entry 1 Start -->
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">NR ARFCN</label>
|
||||
<div class="control has-icons-left">
|
||||
<input
|
||||
class="input"
|
||||
type="email"
|
||||
placeholder="NR-ARFCN"
|
||||
/>
|
||||
<span class="icon is-left">
|
||||
<i class="fas fa-bolt"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">NR PCI</label>
|
||||
<div class="control has-icons-left">
|
||||
<input
|
||||
class="input"
|
||||
type="email"
|
||||
placeholder="NR PCI"
|
||||
/>
|
||||
<span class="icon is-left">
|
||||
<i class="fa-solid fa-signal"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Entry 1 End -->
|
||||
|
||||
<!-- Entry 2 Start -->
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">SCS</label>
|
||||
<div class="control has-icons-left">
|
||||
<span class="select">
|
||||
<select>
|
||||
<option selected>Select SCS</option>
|
||||
<option>15 kHz</option>
|
||||
<option>30 kHz</option>
|
||||
<option>60 kHz</option>
|
||||
<option>120 kHz</option>
|
||||
<option>240 kHz</option>
|
||||
</select>
|
||||
</span>
|
||||
<span class="icon is-left">
|
||||
<i class="fas fa-bolt"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">NR Band</label>
|
||||
<div class="control has-icons-left">
|
||||
<input
|
||||
class="input"
|
||||
type="email"
|
||||
placeholder="NR Band"
|
||||
/>
|
||||
<span class="icon is-left">
|
||||
<i class="fa-solid fa-signal"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Entry 2 End -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a
|
||||
href="#"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Lock SA Cells
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Reset
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="content">
|
||||
<div class="fixed-grid has-2-cols has-1-cols-mobile">
|
||||
<div class="grid">
|
||||
<div class="cell">
|
||||
<div class="icon-text">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
</span>
|
||||
<span>Information</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="fixed-grid has-2-cols has-1-cols-mobile">
|
||||
<div class="grid">
|
||||
<div class="cell">
|
||||
<div class="icon-text">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
</span>
|
||||
<span>Information</span>
|
||||
</div>
|
||||
|
||||
<p class="block has-text-weight-semibold">
|
||||
Cell locking is an advance feature and may cause network interruptions. <br />
|
||||
Cell locking will also only work with the main band (PCC) if you are using carrier
|
||||
aggregation.
|
||||
<br />
|
||||
Proceed with caution.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="icon-text">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
</span>
|
||||
<span>Current Active Locked Cells</span>
|
||||
</div>
|
||||
|
||||
<p class="block has-text-weight-semibold">
|
||||
150/69, 1350/70, 1350/71
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="block has-text-weight-semibold">
|
||||
Cell locking is an advance feature and may cause network
|
||||
interruptions. <br />
|
||||
Cell locking will also only work with the main band (PCC) if you
|
||||
are using carrier aggregation.
|
||||
<br />
|
||||
Proceed with caution.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<div class="cell">
|
||||
<div class="icon-text">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
</span>
|
||||
<span>Current Active Locked Cells</span>
|
||||
</div>
|
||||
|
||||
<p class="block has-text-weight-semibold">
|
||||
150/69, 1350/70, 1350/71
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<div id="reboot-modal" class="modal">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<section class="modal-card-body rounded-edge">
|
||||
<p class="subtitle" id="modal-message">
|
||||
Do you want to reboot the device?
|
||||
</p>
|
||||
<div id="loading-content" style="display: none">
|
||||
<div class="custom-loader"></div>
|
||||
<div class="countdown-text">
|
||||
Rebooting... <span id="countdown">40</span>s
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons" id="modal-buttons">
|
||||
<button class="button is-warning" id="rebootModem">Reboot</button>
|
||||
<button class="button cancel" aria-label="close">Cancel</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,486 +1,479 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
|
||||
<!-- Logo -->
|
||||
<link rel="simpleadmin-logo" href="favicon.ico" />
|
||||
|
||||
<link rel="stylesheet" href="css/bulma/bulma.scss">
|
||||
<link rel="stylesheet" href="css/bulma/css/bulma.min.css">
|
||||
<link rel="stylesheet" href="css/bulma/css/bulma.css">
|
||||
<link rel="stylesheet" href="css/custom.css">
|
||||
<link rel="stylesheet" href="css/bulma/bulma.scss" />
|
||||
<link rel="stylesheet" href="css/bulma/css/bulma.min.css" />
|
||||
<link rel="stylesheet" href="css/bulma/css/bulma.css" />
|
||||
<link rel="stylesheet" href="css/custom.css" />
|
||||
|
||||
<!-- Font awesome icons -->
|
||||
<script src="https://kit.fontawesome.com/b0caedfab3.js" crossorigin="anonymous"></script>
|
||||
<script
|
||||
src="https://kit.fontawesome.com/b0caedfab3.js"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
|
||||
<script src="js/styles/nav-burger.js"></script>
|
||||
<script src="js/styles/toggle-theme.js"></script>
|
||||
<script src="/js/styles/nav-burger.js"></script>
|
||||
<script src="/js/styles/modal-trigger.js"></script>
|
||||
<script src="/js/utils/reboot.js"></script>
|
||||
<script defer src="/js/auth/auth.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const savedTheme = localStorage.getItem('theme') || 'theme-dark';
|
||||
document.documentElement.classList.add(savedTheme);
|
||||
})();
|
||||
(function () {
|
||||
const savedTheme = localStorage.getItem("theme") || "theme-dark";
|
||||
document.documentElement.classList.add(savedTheme);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<title>QuecManager</title>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body class="body-margin">
|
||||
<body class="body-margin">
|
||||
<nav class="navbar is-transparent">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="/">
|
||||
<img src="/assets/logo.png" alt="Logo" />
|
||||
<span class="title">QuecManager</span>
|
||||
</a>
|
||||
<a
|
||||
role="button"
|
||||
class="navbar-burger"
|
||||
aria-label="menu"
|
||||
aria-expanded="false"
|
||||
data-target="navMenu"
|
||||
>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="navMenu" class="navbar-menu">
|
||||
<div class="navbar-start ml-6">
|
||||
<a class="navbar-item" href="/"> Home </a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> Cellular </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<a class="navbar-item" href="/bandlock.html"> Band Locking </a>
|
||||
<a class="navbar-item" href="/cell-locking.html">Cell Locking</a>
|
||||
<a class="navbar-item" href="/cell-scanner.html">Cell Scanner</a>
|
||||
<a class="navbar-item" href="/cell-settings.html"
|
||||
>Cell Settings</a
|
||||
>
|
||||
<a class="navbar-item" href="/cell-sms.html"> Cell SMS </a>
|
||||
</div>
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="/">
|
||||
<img src="/assets/logo.png" alt="Logo" />
|
||||
<span class="title">QuecManager</span>
|
||||
</a>
|
||||
<a
|
||||
role="button"
|
||||
class="navbar-burger"
|
||||
aria-label="menu"
|
||||
aria-expanded="false"
|
||||
data-target="navMenu"
|
||||
>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="navMenu" class="navbar-menu">
|
||||
<div class="navbar-start ml-6">
|
||||
<a class="navbar-item has-text-weight-bold" href="/"> Home </a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> Cellular </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<a class="navbar-item" href="/bandlock.html"> Band Locking </a>
|
||||
<a class="navbar-item" href="/cell-locking.html">Cell Locking</a>
|
||||
<a class="navbar-item" href="/cell-scanner.html">Cell Scanner</a>
|
||||
<a class="navbar-item" href="/cell-settings.html"
|
||||
>Cell Settings</a
|
||||
>
|
||||
<a class="navbar-item" href="/cell-sms.html"> Cell SMS </a>
|
||||
</div>
|
||||
<a class="navbar-item" href="/advance-settings.html"> Advance </a>
|
||||
<a class="navbar-item" href="/about.html"> About </a>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="buttons is-flex-direction-column-mobile">
|
||||
<p class="control is-expanded-mobile">
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> Advance </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<a class="navbar-item" href="/advance-settings.html"> Advance Settings </a>
|
||||
<a class="navbar-item" href="#">Experimental Features</a>
|
||||
<a class="navbar-item" href="/cgi-bin/luci">OpenWRT Luci</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class="navbar-item" href="/about.html"> About </a>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="buttons is-flex-direction-column-mobile">
|
||||
<p class="control is-expanded-mobile">
|
||||
<a
|
||||
href="#"
|
||||
class="button is-link is-outlined is-fullwidth-mobile"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-arrows-rotate"></i>
|
||||
</span>
|
||||
<span>Restart Connection</span>
|
||||
</a>
|
||||
</p>
|
||||
<div class="is-flex is-mobile is-align-items-center">
|
||||
<p class="control">
|
||||
<div href="#" class="button is-warning is-outlined reboot-modal" data-target="reboot-modal" >
|
||||
<span class="icon">
|
||||
<i class="fas fa-power-off"></i>
|
||||
</span>
|
||||
</div>
|
||||
</p>
|
||||
<p class="control ml-2 is-mobile">
|
||||
<a
|
||||
href="#"
|
||||
class="button is-link is-outlined is-fullwidth-mobile"
|
||||
class="button is-warning is-outlined js-theme-toggle"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-arrows-rotate"></i>
|
||||
<i class="fas fa-sun"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control ml-2 is-mobile">
|
||||
<a
|
||||
href="#"
|
||||
class="button is-warning is-outlined js-theme-toggle"
|
||||
id="logoutButton"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-right-from-bracket"></i>
|
||||
</span>
|
||||
<span>Restart Connection</span>
|
||||
</a>
|
||||
</p>
|
||||
<div class="is-flex is-mobile is-align-items-center">
|
||||
<p class="control">
|
||||
<a href="#" class="button is-warning is-outlined">
|
||||
<span class="icon">
|
||||
<i class="fas fa-power-off"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control ml-2 is-mobile">
|
||||
<a
|
||||
href="#"
|
||||
class="button is-warning is-outlined js-theme-toggle"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-sun"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control ml-2 is-mobile">
|
||||
<a
|
||||
href="#"
|
||||
class="button is-warning is-outlined js-theme-toggle"
|
||||
id="logoutButton"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-right-from-bracket"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="column-margin">
|
||||
<div class="fixed-grid has-1-cols">
|
||||
<div class="grid is-gap-5">
|
||||
<div class="cell">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<p class="card-header-title">
|
||||
Full Network Provider Cell Scanner
|
||||
</p>
|
||||
<div class="fixed-grid has-1-cols">
|
||||
<div class="grid is-gap-5">
|
||||
<div class="cell">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<p class="card-header-title">
|
||||
Full Network Provider Cell Scanner
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<table class="table is-fullwidth">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Network Provider</th>
|
||||
<th>Name</th>
|
||||
<th>EARFCN</th>
|
||||
<th>Bandwidth</th>
|
||||
<th>Physical ID</th>
|
||||
<th class="is-hidden-mobile">RSRP</th>
|
||||
<th class="is-hidden-mobile">RSRQ</th>
|
||||
<th class="is-hidden-mobile">SINR</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Smart</td>
|
||||
<td>B1</td>
|
||||
<td>150</td>
|
||||
<td>10</td>
|
||||
<td>623</td>
|
||||
<td class="is-hidden-mobile">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-size-6"> -103 </span>
|
||||
<span class="tag is-danger is-size-6 has-text-white">
|
||||
Poor
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<table class="table is-fullwidth">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Network Provider
|
||||
</th>
|
||||
<th>
|
||||
Name
|
||||
</th>
|
||||
<th>
|
||||
EARFCN
|
||||
</th>
|
||||
<th>
|
||||
Bandwidth
|
||||
</th>
|
||||
<th>
|
||||
Physical ID
|
||||
</th>
|
||||
<th class="is-hidden-mobile">
|
||||
RSRP
|
||||
</th>
|
||||
<th class="is-hidden-mobile">
|
||||
RSRQ
|
||||
</th>
|
||||
<th class="is-hidden-mobile">
|
||||
SINR
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
Smart
|
||||
</td>
|
||||
<td>
|
||||
B1
|
||||
</td>
|
||||
<td>
|
||||
150
|
||||
</td>
|
||||
<td>
|
||||
10
|
||||
</td>
|
||||
<td>
|
||||
623
|
||||
</td>
|
||||
<td class="is-hidden-mobile">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-size-6"> -103 </span>
|
||||
<span class="tag is-danger is-size-6 has-text-white"> Poor </span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="is-hidden-mobile">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-size-6"> -103 </span>
|
||||
<span class="tag is-danger is-size-6 has-text-white"> Poor </span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="is-hidden-mobile">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-size-6"> -5 </span>
|
||||
<span class="tag is-danger is-size-6 has-text-white"> Poor </span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
DITO
|
||||
</td>
|
||||
<td>
|
||||
B2
|
||||
</td>
|
||||
<td>
|
||||
150
|
||||
</td>
|
||||
<td>
|
||||
10
|
||||
</td>
|
||||
<td>
|
||||
623
|
||||
</td>
|
||||
<td class="is-hidden-mobile">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-size-6"> -90 </span>
|
||||
<span class="tag is-warning is-size-6 has-text-white"> Medium </span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="is-hidden-mobile">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-size-6"> -90 </span>
|
||||
<span class="tag is-warning is-size-6 has-text-white"> Medium </span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="is-hidden-mobile">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-size-6"> 10 </span>
|
||||
<span class="tag is-warning is-size-6 has-text-white"> Medium </span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
Globe
|
||||
</td>
|
||||
<td>
|
||||
B3
|
||||
</td>
|
||||
<td>
|
||||
150
|
||||
</td>
|
||||
<td>
|
||||
10
|
||||
</td>
|
||||
<td>
|
||||
623
|
||||
</td>
|
||||
<td class="is-hidden-mobile">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-size-6"> -65 </span>
|
||||
<span class="tag is-success is-size-6 has-text-white"> Strong </span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="is-hidden-mobile">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-size-6"> -65 </span>
|
||||
<span class="tag is-success is-size-6 has-text-white"> Strong </span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="is-hidden-mobile">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-size-6"> 30 </span>
|
||||
<span class="tag is-success is-size-6 has-text-white"> Strong </span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
<td class="is-hidden-mobile">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-size-6"> -103 </span>
|
||||
<span class="tag is-danger is-size-6 has-text-white">
|
||||
Poor
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href="#" class="card-footer-item has-text-link has-text-weight-semibold has-text-white">
|
||||
Start Full Scan
|
||||
</a>
|
||||
|
||||
<a href="#" class="card-footer-item has-text-link has-text-weight-semibold has-text-white">
|
||||
Reset
|
||||
</a>
|
||||
</td>
|
||||
<td class="is-hidden-mobile">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-size-6"> -5 </span>
|
||||
<span class="tag is-danger is-size-6 has-text-white">
|
||||
Poor
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<div class="cell">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-header-title">
|
||||
Full Neighbour Cell Scanner
|
||||
</div>
|
||||
<tr>
|
||||
<td>DITO</td>
|
||||
<td>B2</td>
|
||||
<td>150</td>
|
||||
<td>10</td>
|
||||
<td>623</td>
|
||||
<td class="is-hidden-mobile">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-size-6"> -90 </span>
|
||||
<span class="tag is-warning is-size-6 has-text-white">
|
||||
Medium
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<table class="table is-fullwidth">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Name
|
||||
</th>
|
||||
<th>
|
||||
EARFCN
|
||||
</th>
|
||||
<th>
|
||||
Bandwidth
|
||||
</th>
|
||||
<th>
|
||||
Physical ID
|
||||
</th>
|
||||
<th class="is-hidden-mobile">
|
||||
RSRP
|
||||
</th>
|
||||
<th class="is-hidden-mobile">
|
||||
RSRQ
|
||||
</th>
|
||||
<th class="is-hidden-mobile">
|
||||
SINR
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
B1
|
||||
</td>
|
||||
<td>
|
||||
150
|
||||
</td>
|
||||
<td>
|
||||
10
|
||||
</td>
|
||||
<td>
|
||||
623
|
||||
</td>
|
||||
<td class="is-hidden-mobile">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-size-6"> -103 </span>
|
||||
<span class="tag is-danger is-size-6 has-text-white"> Poor </span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="is-hidden-mobile">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-size-6"> -103 </span>
|
||||
<span class="tag is-danger is-size-6 has-text-white"> Poor </span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="is-hidden-mobile">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-size-6"> -5 </span>
|
||||
<span class="tag is-danger is-size-6 has-text-white"> Poor </span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
B2
|
||||
</td>
|
||||
<td>
|
||||
150
|
||||
</td>
|
||||
<td>
|
||||
10
|
||||
</td>
|
||||
<td>
|
||||
623
|
||||
</td>
|
||||
<td class="is-hidden-mobile">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-size-6"> -90 </span>
|
||||
<span class="tag is-warning is-size-6 has-text-white"> Medium </span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="is-hidden-mobile">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-size-6"> -90 </span>
|
||||
<span class="tag is-warning is-size-6 has-text-white"> Medium </span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="is-hidden-mobile">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-size-6"> 10 </span>
|
||||
<span class="tag is-warning is-size-6 has-text-white"> Medium </span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
B3
|
||||
</td>
|
||||
<td>
|
||||
150
|
||||
</td>
|
||||
<td>
|
||||
10
|
||||
</td>
|
||||
<td>
|
||||
623
|
||||
</td>
|
||||
<td class="is-hidden-mobile">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-size-6"> -65 </span>
|
||||
<span class="tag is-success is-size-6 has-text-white"> Strong </span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="is-hidden-mobile">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-size-6"> -65 </span>
|
||||
<span class="tag is-success is-size-6 has-text-white"> Strong </span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="is-hidden-mobile">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-size-6"> 30 </span>
|
||||
<span class="tag is-success is-size-6 has-text-white"> Strong </span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
<td class="is-hidden-mobile">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-size-6"> -90 </span>
|
||||
<span class="tag is-warning is-size-6 has-text-white">
|
||||
Medium
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href="#" class="card-footer-item has-text-link has-text-weight-semibold has-text-white">
|
||||
Start Neighbourcell Scan
|
||||
</a>
|
||||
|
||||
<a href="#" class="card-footer-item has-text-link has-text-weight-semibold has-text-white">
|
||||
Reset
|
||||
</a>
|
||||
</td>
|
||||
<td class="is-hidden-mobile">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-size-6"> 10 </span>
|
||||
<span class="tag is-warning is-size-6 has-text-white">
|
||||
Medium
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Globe</td>
|
||||
<td>B3</td>
|
||||
<td>150</td>
|
||||
<td>10</td>
|
||||
<td>623</td>
|
||||
<td class="is-hidden-mobile">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-size-6"> -65 </span>
|
||||
<span class="tag is-success is-size-6 has-text-white">
|
||||
Strong
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="is-hidden-mobile">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-size-6"> -65 </span>
|
||||
<span class="tag is-success is-size-6 has-text-white">
|
||||
Strong
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="is-hidden-mobile">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-size-6"> 30 </span>
|
||||
<span class="tag is-success is-size-6 has-text-white">
|
||||
Strong
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a
|
||||
href="#"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Start Full Scan
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Reset
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-header-title">Full Neighbour Cell Scanner</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<table class="table is-fullwidth">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>EARFCN</th>
|
||||
<th>Bandwidth</th>
|
||||
<th>Physical ID</th>
|
||||
<th class="is-hidden-mobile">RSRP</th>
|
||||
<th class="is-hidden-mobile">RSRQ</th>
|
||||
<th class="is-hidden-mobile">SINR</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>B1</td>
|
||||
<td>150</td>
|
||||
<td>10</td>
|
||||
<td>623</td>
|
||||
<td class="is-hidden-mobile">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-size-6"> -103 </span>
|
||||
<span class="tag is-danger is-size-6 has-text-white">
|
||||
Poor
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="is-hidden-mobile">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-size-6"> -103 </span>
|
||||
<span class="tag is-danger is-size-6 has-text-white">
|
||||
Poor
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="is-hidden-mobile">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-size-6"> -5 </span>
|
||||
<span class="tag is-danger is-size-6 has-text-white">
|
||||
Poor
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>B2</td>
|
||||
<td>150</td>
|
||||
<td>10</td>
|
||||
<td>623</td>
|
||||
<td class="is-hidden-mobile">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-size-6"> -90 </span>
|
||||
<span class="tag is-warning is-size-6 has-text-white">
|
||||
Medium
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="is-hidden-mobile">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-size-6"> -90 </span>
|
||||
<span class="tag is-warning is-size-6 has-text-white">
|
||||
Medium
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="is-hidden-mobile">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-size-6"> 10 </span>
|
||||
<span class="tag is-warning is-size-6 has-text-white">
|
||||
Medium
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>B3</td>
|
||||
<td>150</td>
|
||||
<td>10</td>
|
||||
<td>623</td>
|
||||
<td class="is-hidden-mobile">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-size-6"> -65 </span>
|
||||
<span class="tag is-success is-size-6 has-text-white">
|
||||
Strong
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="is-hidden-mobile">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-size-6"> -65 </span>
|
||||
<span class="tag is-success is-size-6 has-text-white">
|
||||
Strong
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="is-hidden-mobile">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-size-6"> 30 </span>
|
||||
<span class="tag is-success is-size-6 has-text-white">
|
||||
Strong
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a
|
||||
href="#"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Start Neighbourcell Scan
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Reset
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="content">
|
||||
<div class="fixed-grid has-2-cols has-1-cols-mobile">
|
||||
<div class="grid">
|
||||
<div class="cell">
|
||||
<div class="icon-text">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
</span>
|
||||
<span>Information</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="fixed-grid has-2-cols has-1-cols-mobile">
|
||||
<div class="grid">
|
||||
<div class="cell">
|
||||
<div class="icon-text">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
</span>
|
||||
<span>Information</span>
|
||||
</div>
|
||||
|
||||
<p class="block has-text-weight-semibold">
|
||||
Full Network Provider Cell Scanner will scan all of the cells in your area even from other
|
||||
network providers.
|
||||
<br />
|
||||
The NR-5G scan will only display SA bands available in your area.
|
||||
<br />
|
||||
Scanning will take a few minutes so please wait patiently.
|
||||
<br />
|
||||
If problem persists after scanning, please reboot the modem.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="icon-text">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
</span>
|
||||
<span>Information</span>
|
||||
</div>
|
||||
|
||||
<p class="block has-text-weight-semibold">
|
||||
Full Neighbour Cell Scanner will only scan the bands of your active network provider.
|
||||
<br />
|
||||
The NR-5G scan result is based on your current active 5G network mode.
|
||||
<br />
|
||||
If problem persists after scanning, please reboot the modem.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="block has-text-weight-semibold">
|
||||
Full Network Provider Cell Scanner will scan all of the cells in
|
||||
your area even from other network providers.
|
||||
<br />
|
||||
The NR-5G scan will only display SA bands available in your
|
||||
area.
|
||||
<br />
|
||||
Scanning will take a few minutes so please wait patiently.
|
||||
<br />
|
||||
If problem persists after scanning, please reboot the modem.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<div class="cell">
|
||||
<div class="icon-text">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
</span>
|
||||
<span>Information</span>
|
||||
</div>
|
||||
|
||||
<p class="block has-text-weight-semibold">
|
||||
Full Neighbour Cell Scanner will only scan the bands of your
|
||||
active network provider.
|
||||
<br />
|
||||
The NR-5G scan result is based on your current active 5G network
|
||||
mode.
|
||||
<br />
|
||||
If problem persists after scanning, please reboot the modem.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<div id="reboot-modal" class="modal">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<section class="modal-card-body rounded-edge">
|
||||
<p class="subtitle" id="modal-message">
|
||||
Do you want to reboot the device?
|
||||
</p>
|
||||
<div id="loading-content" style="display: none">
|
||||
<div class="custom-loader"></div>
|
||||
<div class="countdown-text">
|
||||
Rebooting... <span id="countdown">40</span>s
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons" id="modal-buttons">
|
||||
<button class="button is-warning" id="rebootModem">Reboot</button>
|
||||
<button class="button cancel" aria-label="close">Cancel</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,378 +1,450 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
|
||||
<!-- Logo -->
|
||||
<link rel="simpleadmin-logo" href="favicon.ico" />
|
||||
|
||||
<link rel="stylesheet" href="css/bulma/bulma.scss">
|
||||
<link rel="stylesheet" href="css/bulma/css/bulma.min.css">
|
||||
<link rel="stylesheet" href="css/bulma/css/bulma.css">
|
||||
<link rel="stylesheet" href="css/custom.css">
|
||||
<link rel="stylesheet" href="css/bulma/bulma.scss" />
|
||||
<link rel="stylesheet" href="css/bulma/css/bulma.min.css" />
|
||||
<link rel="stylesheet" href="css/bulma/css/bulma.css" />
|
||||
<link rel="stylesheet" href="css/custom.css" />
|
||||
|
||||
<!-- Font awesome icons -->
|
||||
<script src="https://kit.fontawesome.com/b0caedfab3.js" crossorigin="anonymous"></script>
|
||||
<script
|
||||
src="https://kit.fontawesome.com/b0caedfab3.js"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
|
||||
<script src="js/styles/nav-burger.js"></script>
|
||||
<script src="js/styles/toggle-theme.js"></script>
|
||||
<script src="/js/styles/nav-burger.js"></script>
|
||||
<script src="/js/styles/modal-trigger.js"></script>
|
||||
<script src="/js/utils/reboot.js"></script>
|
||||
<script defer src="/js/auth/auth.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const savedTheme = localStorage.getItem('theme') || 'theme-dark';
|
||||
document.documentElement.classList.add(savedTheme);
|
||||
})();
|
||||
(function () {
|
||||
const savedTheme = localStorage.getItem("theme") || "theme-dark";
|
||||
document.documentElement.classList.add(savedTheme);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<title>QuecManager</title>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body class="body-margin">
|
||||
<body class="body-margin">
|
||||
<nav class="navbar is-transparent">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="/">
|
||||
<img src="/assets/logo.png" alt="Logo" />
|
||||
<span class="title">QuecManager</span>
|
||||
</a>
|
||||
<a
|
||||
role="button"
|
||||
class="navbar-burger"
|
||||
aria-label="menu"
|
||||
aria-expanded="false"
|
||||
data-target="navMenu"
|
||||
>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="navMenu" class="navbar-menu">
|
||||
<div class="navbar-start ml-6">
|
||||
<a class="navbar-item" href="/"> Home </a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> Cellular </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<a class="navbar-item" href="/bandlock.html"> Band Locking </a>
|
||||
<a class="navbar-item" href="/cell-locking.html">Cell Locking</a>
|
||||
<a class="navbar-item" href="/cell-scanner.html">Cell Scanner</a>
|
||||
<a class="navbar-item" href="/cell-settings.html"
|
||||
>Cell Settings</a
|
||||
>
|
||||
<a class="navbar-item" href="/cell-sms.html"> Cell SMS </a>
|
||||
</div>
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="/">
|
||||
<img src="/assets/logo.png" alt="Logo" />
|
||||
<span class="title">QuecManager</span>
|
||||
</a>
|
||||
<a
|
||||
role="button"
|
||||
class="navbar-burger"
|
||||
aria-label="menu"
|
||||
aria-expanded="false"
|
||||
data-target="navMenu"
|
||||
>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="navMenu" class="navbar-menu">
|
||||
<div class="navbar-start ml-6">
|
||||
<a class="navbar-item has-text-weight-bold" href="/"> Home </a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> Cellular </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<a class="navbar-item" href="/bandlock.html"> Band Locking </a>
|
||||
<a class="navbar-item" href="/cell-locking.html">Cell Locking</a>
|
||||
<a class="navbar-item" href="/cell-scanner.html">Cell Scanner</a>
|
||||
<a class="navbar-item" href="/cell-settings.html"
|
||||
>Cell Settings</a
|
||||
>
|
||||
<a class="navbar-item" href="/cell-sms.html"> Cell SMS </a>
|
||||
</div>
|
||||
<a class="navbar-item" href="/advance-settings.html"> Advance </a>
|
||||
<a class="navbar-item" href="/about.html"> About </a>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="buttons is-flex-direction-column-mobile">
|
||||
<p class="control is-expanded-mobile">
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> Advance </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<a class="navbar-item" href="/advance-settings.html"> Advance Settings </a>
|
||||
<a class="navbar-item" href="#">Experimental Features</a>
|
||||
<a class="navbar-item" href="/cgi-bin/luci">OpenWRT Luci</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class="navbar-item" href="/about.html"> About </a>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="buttons is-flex-direction-column-mobile">
|
||||
<p class="control is-expanded-mobile">
|
||||
<a
|
||||
href="#"
|
||||
class="button is-link is-outlined is-fullwidth-mobile"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-arrows-rotate"></i>
|
||||
</span>
|
||||
<span>Restart Connection</span>
|
||||
</a>
|
||||
</p>
|
||||
<div class="is-flex is-mobile is-align-items-center">
|
||||
<p class="control">
|
||||
<div href="#" class="button is-warning is-outlined reboot-modal" data-target="reboot-modal" >
|
||||
<span class="icon">
|
||||
<i class="fas fa-power-off"></i>
|
||||
</span>
|
||||
</div>
|
||||
</p>
|
||||
<p class="control ml-2 is-mobile">
|
||||
<a
|
||||
href="#"
|
||||
class="button is-link is-outlined is-fullwidth-mobile"
|
||||
class="button is-warning is-outlined js-theme-toggle"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-arrows-rotate"></i>
|
||||
<i class="fas fa-sun"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control ml-2 is-mobile">
|
||||
<a
|
||||
href="#"
|
||||
class="button is-warning is-outlined js-theme-toggle"
|
||||
id="logoutButton"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-right-from-bracket"></i>
|
||||
</span>
|
||||
<span>Restart Connection</span>
|
||||
</a>
|
||||
</p>
|
||||
<div class="is-flex is-mobile is-align-items-center">
|
||||
<p class="control">
|
||||
<a href="#" class="button is-warning is-outlined">
|
||||
<span class="icon">
|
||||
<i class="fas fa-power-off"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control ml-2 is-mobile">
|
||||
<a
|
||||
href="#"
|
||||
class="button is-warning is-outlined js-theme-toggle"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-sun"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control ml-2 is-mobile">
|
||||
<a
|
||||
href="#"
|
||||
class="button is-warning is-outlined js-theme-toggle"
|
||||
id="logoutButton"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-right-from-bracket"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="column-margin">
|
||||
<div class="fixed-grid has-2-cols has-1-cols-mobile">
|
||||
<div class="grid">
|
||||
<div class="cell">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-header-title">
|
||||
Basic Cellular Settings
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="fixed-grid has-2-cols">
|
||||
<div class="grid is-gap-5">
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">Current APN</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="Current APN Here">
|
||||
</div>
|
||||
<p class="help">Changing this will disable automatic APN.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">APN PDP Type</label>
|
||||
<p class="control has-icons-left">
|
||||
<span class="select">
|
||||
<select>
|
||||
<option selected>Select APN PDP Type</option>
|
||||
<option>IPv4 Only</option>
|
||||
<option>IPv6 Only</option>
|
||||
<option>IPv4 and IPv6</option>
|
||||
<option>P2P Protocol</option>
|
||||
</select>
|
||||
</span>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-globe"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">Preferred Network Mode</label>
|
||||
<p class="control has-icons-left">
|
||||
<span class="select">
|
||||
<select>
|
||||
<option selected>Select Preferred Network Mode</option>
|
||||
<option>Automatic</option>
|
||||
<option>LTE Only</option>
|
||||
<option>5G SA Only</option>
|
||||
<option>5G NSA Only</option>
|
||||
</select>
|
||||
</span>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-signal"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">NR5G Mode Control</label>
|
||||
<p class="control has-icons-left">
|
||||
<span class="select">
|
||||
<select>
|
||||
<option selected>Select NR5G Mode Control</option>
|
||||
<option>Enable NR5G SA and NSA</option>
|
||||
<option>Enable SA Only</option>
|
||||
<option>Enable NSA Only</option>
|
||||
</select>
|
||||
</span>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-podcast"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href="#" class="card-footer-item has-text-link has-text-weight-semibold has-text-white">
|
||||
Save
|
||||
</a>
|
||||
<a href="#" class="card-footer-item has-text-link has-text-weight-semibold has-text-white">
|
||||
Reset
|
||||
</a>
|
||||
<div class="fixed-grid has-2-cols has-1-cols-mobile">
|
||||
<div class="grid">
|
||||
<div class="cell">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-header-title">Basic Cellular Settings</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="fixed-grid has-2-cols">
|
||||
<div class="grid is-gap-5">
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">Current APN</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
placeholder="Current APN Here"
|
||||
/>
|
||||
</div>
|
||||
<p class="help">
|
||||
Changing this will disable automatic APN.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-header-title">
|
||||
APN and ICCID Based Locking
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="fixed-grid has-1-cols">
|
||||
<div class="grid is-gap-5">
|
||||
<div class="cell">
|
||||
<div class="fixed-grid has-2-cols">
|
||||
<div class="grid is-gap-3">
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">APN Profile 1</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="APN Here">
|
||||
</div>
|
||||
<p class="help">This will override the current APN.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">APN PDP Type</label>
|
||||
<p class="control has-icons-left">
|
||||
<span class="select">
|
||||
<select>
|
||||
<option selected>Select APN PDP Type</option>
|
||||
<option>IPv4 Only</option>
|
||||
<option>IPv6 Only</option>
|
||||
<option>IPv4 and IPv6</option>
|
||||
<option>P2P Protocol</option>
|
||||
</select>
|
||||
</span>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-globe"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell is-col-span-2">
|
||||
<div class="field">
|
||||
<label class="label">ICCID Profile 1</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="ICCID Here">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="fixed-grid has-2-cols">
|
||||
<div class="grid is-gap-3">
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">APN Profile 2</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="APN Here">
|
||||
</div>
|
||||
<p class="help">This will override the current APN.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">APN PDP Type</label>
|
||||
<p class="control has-icons-left">
|
||||
<span class="select">
|
||||
<select>
|
||||
<option selected>Select APN PDP Type</option>
|
||||
<option>IPv4 Only</option>
|
||||
<option>IPv6 Only</option>
|
||||
<option>IPv4 and IPv6</option>
|
||||
<option>P2P Protocol</option>
|
||||
</select>
|
||||
</span>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-globe"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell is-col-span-2">
|
||||
<div class="field">
|
||||
<label class="label">ICCID Profile 2</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="ICCID Here">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href="#" class="card-footer-item has-text-link has-text-weight-semibold has-text-white">
|
||||
Save
|
||||
</a>
|
||||
<a href="#" class="card-footer-item has-text-link has-text-weight-semibold has-text-white">
|
||||
Reset
|
||||
</a>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">APN PDP Type</label>
|
||||
<p class="control has-icons-left">
|
||||
<span class="select">
|
||||
<select>
|
||||
<option selected>Select APN PDP Type</option>
|
||||
<option>IPv4 Only</option>
|
||||
<option>IPv6 Only</option>
|
||||
<option>IPv4 and IPv6</option>
|
||||
<option>P2P Protocol</option>
|
||||
</select>
|
||||
</span>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-globe"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">Preferred Network Mode</label>
|
||||
<p class="control has-icons-left">
|
||||
<span class="select">
|
||||
<select>
|
||||
<option selected>
|
||||
Select Preferred Network Mode
|
||||
</option>
|
||||
<option>Automatic</option>
|
||||
<option>LTE Only</option>
|
||||
<option>5G SA Only</option>
|
||||
<option>5G NSA Only</option>
|
||||
</select>
|
||||
</span>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-signal"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">NR5G Mode Control</label>
|
||||
<p class="control has-icons-left">
|
||||
<span class="select">
|
||||
<select>
|
||||
<option selected>Select NR5G Mode Control</option>
|
||||
<option>Enable NR5G SA and NSA</option>
|
||||
<option>Enable SA Only</option>
|
||||
<option>Enable NSA Only</option>
|
||||
</select>
|
||||
</span>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-podcast"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a
|
||||
href="#"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Save
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Reset
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-header-title">APN and ICCID Based Locking</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="fixed-grid has-1-cols">
|
||||
<div class="grid is-gap-5">
|
||||
<div class="cell">
|
||||
<div class="fixed-grid has-2-cols">
|
||||
<div class="grid is-gap-3">
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">APN Profile 1</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
placeholder="APN Here"
|
||||
/>
|
||||
</div>
|
||||
<p class="help">
|
||||
This will override the current APN.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">APN PDP Type</label>
|
||||
<p class="control has-icons-left">
|
||||
<span class="select">
|
||||
<select>
|
||||
<option selected>
|
||||
Select APN PDP Type
|
||||
</option>
|
||||
<option>IPv4 Only</option>
|
||||
<option>IPv6 Only</option>
|
||||
<option>IPv4 and IPv6</option>
|
||||
<option>P2P Protocol</option>
|
||||
</select>
|
||||
</span>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-globe"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell is-col-span-2">
|
||||
<div class="field">
|
||||
<label class="label">ICCID Profile 1</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
placeholder="ICCID Here"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="fixed-grid has-2-cols">
|
||||
<div class="grid is-gap-3">
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">APN Profile 2</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
placeholder="APN Here"
|
||||
/>
|
||||
</div>
|
||||
<p class="help">
|
||||
This will override the current APN.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="field">
|
||||
<label class="label">APN PDP Type</label>
|
||||
<p class="control has-icons-left">
|
||||
<span class="select">
|
||||
<select>
|
||||
<option selected>
|
||||
Select APN PDP Type
|
||||
</option>
|
||||
<option>IPv4 Only</option>
|
||||
<option>IPv6 Only</option>
|
||||
<option>IPv4 and IPv6</option>
|
||||
<option>P2P Protocol</option>
|
||||
</select>
|
||||
</span>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-globe"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell is-col-span-2">
|
||||
<div class="field">
|
||||
<label class="label">ICCID Profile 2</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
placeholder="ICCID Here"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a
|
||||
href="#"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Save
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Reset
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="content">
|
||||
<div class="fixed-grid has-2-cols has-1-cols-mobile">
|
||||
<div class="grid">
|
||||
<div class="cell">
|
||||
<div class="icon-text">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
</span>
|
||||
<span>Information</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="fixed-grid has-2-cols has-1-cols-mobile">
|
||||
<div class="grid">
|
||||
<div class="cell">
|
||||
<div class="icon-text">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
</span>
|
||||
<span>Information</span>
|
||||
</div>
|
||||
|
||||
<p class="block has-text-weight-semibold">
|
||||
Changing APN disconnects and reconnects the network automatically.
|
||||
<br />
|
||||
If problem persists after changing settings, please reboot the modem.
|
||||
<br />
|
||||
Please use the settings with caution.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="icon-text">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
</span>
|
||||
<span>Information</span>
|
||||
</div>
|
||||
|
||||
<p class="block has-text-weight-semibold">
|
||||
APN and ICCID Based Locking will use a stored APN profile based on the current SIM's ICCID.
|
||||
<br />
|
||||
Currently experimental.
|
||||
<br />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="block has-text-weight-semibold">
|
||||
Changing APN disconnects and reconnects the network
|
||||
automatically.
|
||||
<br />
|
||||
If problem persists after changing settings, please reboot the
|
||||
modem.
|
||||
<br />
|
||||
Please use the settings with caution.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<div class="cell">
|
||||
<div class="icon-text">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
</span>
|
||||
<span>Information</span>
|
||||
</div>
|
||||
|
||||
<p class="block has-text-weight-semibold">
|
||||
APN and ICCID Based Locking will use a stored APN profile based
|
||||
on the current SIM's ICCID.
|
||||
<br />
|
||||
Currently experimental.
|
||||
<br />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<div id="reboot-modal" class="modal">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<section class="modal-card-body rounded-edge">
|
||||
<p class="subtitle" id="modal-message">
|
||||
Do you want to reboot the device?
|
||||
</p>
|
||||
<div id="loading-content" style="display: none">
|
||||
<div class="custom-loader"></div>
|
||||
<div class="countdown-text">
|
||||
Rebooting... <span id="countdown">40</span>s
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons" id="modal-buttons">
|
||||
<button class="button is-warning" id="rebootModem">Reboot</button>
|
||||
<button class="button cancel" aria-label="close">Cancel</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,364 +1,414 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
|
||||
<!-- Logo -->
|
||||
<link rel="simpleadmin-logo" href="favicon.ico" />
|
||||
|
||||
<link rel="stylesheet" href="css/bulma/bulma.scss">
|
||||
<link rel="stylesheet" href="css/bulma/css/bulma.min.css">
|
||||
<link rel="stylesheet" href="css/bulma/css/bulma.css">
|
||||
<link rel="stylesheet" href="css/custom.css">
|
||||
<link rel="stylesheet" href="css/bulma/bulma.scss" />
|
||||
<link rel="stylesheet" href="css/bulma/css/bulma.min.css" />
|
||||
<link rel="stylesheet" href="css/bulma/css/bulma.css" />
|
||||
<link rel="stylesheet" href="css/custom.css" />
|
||||
|
||||
<!-- Font awesome icons -->
|
||||
<script src="https://kit.fontawesome.com/b0caedfab3.js" crossorigin="anonymous"></script>
|
||||
<script
|
||||
src="https://kit.fontawesome.com/b0caedfab3.js"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
|
||||
<script src="js/styles/nav-burger.js"></script>
|
||||
<script src="js/styles/toggle-theme.js"></script>
|
||||
<script src="/js/styles/nav-burger.js"></script>
|
||||
<script src="/js/styles/modal-trigger.js"></script>
|
||||
<script src="/js/utils/reboot.js"></script>
|
||||
<script defer src="/js/auth/auth.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const savedTheme = localStorage.getItem('theme') || 'theme-dark';
|
||||
document.documentElement.classList.add(savedTheme);
|
||||
})();
|
||||
(function () {
|
||||
const savedTheme = localStorage.getItem("theme") || "theme-dark";
|
||||
document.documentElement.classList.add(savedTheme);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<title>QuecManager</title>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body class="body-margin">
|
||||
<body class="body-margin">
|
||||
<nav class="navbar is-transparent">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="/">
|
||||
<img src="/assets/logo.png" alt="Logo" />
|
||||
<span class="title">QuecManager</span>
|
||||
</a>
|
||||
<a
|
||||
role="button"
|
||||
class="navbar-burger"
|
||||
aria-label="menu"
|
||||
aria-expanded="false"
|
||||
data-target="navMenu"
|
||||
>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="navMenu" class="navbar-menu">
|
||||
<div class="navbar-start ml-6">
|
||||
<a class="navbar-item" href="/"> Home </a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link has-text-weight-bold"> Cellular </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<a class="navbar-item" href="/bandlock.html"> Band Locking </a>
|
||||
<a class="navbar-item" href="/cell-locking.html">Cell Locking</a>
|
||||
<a class="navbar-item" href="/cell-scanner.html">Cell Scanner</a>
|
||||
<a class="navbar-item" href="/cell-settings.html"
|
||||
>Cell Settings</a
|
||||
>
|
||||
<a class="navbar-item" href="/cell-sms.html"> Cell SMS </a>
|
||||
</div>
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="/">
|
||||
<img src="/assets/logo.png" alt="Logo" />
|
||||
<span class="title">QuecManager</span>
|
||||
</a>
|
||||
<a
|
||||
role="button"
|
||||
class="navbar-burger"
|
||||
aria-label="menu"
|
||||
aria-expanded="false"
|
||||
data-target="navMenu"
|
||||
>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="navMenu" class="navbar-menu">
|
||||
<div class="navbar-start ml-6">
|
||||
<a class="navbar-item has-text-weight-bold" href="/"> Home </a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> Cellular </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<a class="navbar-item" href="/bandlock.html"> Band Locking </a>
|
||||
<a class="navbar-item" href="/cell-locking.html">Cell Locking</a>
|
||||
<a class="navbar-item" href="/cell-scanner.html">Cell Scanner</a>
|
||||
<a class="navbar-item" href="/cell-settings.html"
|
||||
>Cell Settings</a
|
||||
>
|
||||
<a class="navbar-item" href="/cell-sms.html"> Cell SMS </a>
|
||||
</div>
|
||||
<a class="navbar-item" href="/advance-settings.html"> Advance </a>
|
||||
<a class="navbar-item" href="/about.html"> About </a>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="buttons is-flex-direction-column-mobile">
|
||||
<p class="control is-expanded-mobile">
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> Advance </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<a class="navbar-item" href="/advance-settings.html"> Advance Settings </a>
|
||||
<a class="navbar-item" href="#">Experimental Features</a>
|
||||
<a class="navbar-item" href="/cgi-bin/luci">OpenWRT Luci</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class="navbar-item" href="/about.html"> About </a>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="buttons is-flex-direction-column-mobile">
|
||||
<p class="control is-expanded-mobile">
|
||||
<a
|
||||
href="#"
|
||||
class="button is-link is-outlined is-fullwidth-mobile"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-arrows-rotate"></i>
|
||||
</span>
|
||||
<span>Restart Connection</span>
|
||||
</a>
|
||||
</p>
|
||||
<div class="is-flex is-mobile is-align-items-center">
|
||||
<p class="control">
|
||||
<div href="#" class="button is-warning is-outlined reboot-modal" data-target="reboot-modal" >
|
||||
<span class="icon">
|
||||
<i class="fas fa-power-off"></i>
|
||||
</span>
|
||||
</div>
|
||||
</p>
|
||||
<p class="control ml-2 is-mobile">
|
||||
<a
|
||||
href="#"
|
||||
class="button is-link is-outlined is-fullwidth-mobile"
|
||||
class="button is-warning is-outlined js-theme-toggle"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-arrows-rotate"></i>
|
||||
<i class="fas fa-sun"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control ml-2 is-mobile">
|
||||
<a
|
||||
href="#"
|
||||
class="button is-warning is-outlined js-theme-toggle"
|
||||
id="logoutButton"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-right-from-bracket"></i>
|
||||
</span>
|
||||
<span>Restart Connection</span>
|
||||
</a>
|
||||
</p>
|
||||
<div class="is-flex is-mobile is-align-items-center">
|
||||
<p class="control">
|
||||
<a href="#" class="button is-warning is-outlined">
|
||||
<span class="icon">
|
||||
<i class="fas fa-power-off"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control ml-2 is-mobile">
|
||||
<a
|
||||
href="#"
|
||||
class="button is-warning is-outlined js-theme-toggle"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-sun"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control ml-2 is-mobile">
|
||||
<a
|
||||
href="#"
|
||||
class="button is-warning is-outlined js-theme-toggle"
|
||||
id="logoutButton"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-right-from-bracket"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="column-margin">
|
||||
<div class="fixed-grid has-1-cols">
|
||||
<div class="grid is-gap-5">
|
||||
<div class="cell">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-header-title">
|
||||
SMS Inbox
|
||||
</div>
|
||||
<div class="fixed-grid has-1-cols">
|
||||
<div class="grid is-gap-5">
|
||||
<div class="cell">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-header-title">SMS Inbox</div>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<div
|
||||
class="fixed-grid has-1-cols"
|
||||
style="height: 450px; overflow-y: scroll"
|
||||
>
|
||||
<div class="grid is-gap-4 is-fullwidth">
|
||||
<div class="cell">
|
||||
<div class="is-flex is-align-items-center">
|
||||
<div class="checkbox mr-6">
|
||||
<input type="checkbox" />
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<div class="fixed-grid has-1-cols" style="height: 450px; overflow-y: scroll;">
|
||||
<div class="grid is-gap-4 is-fullwidth">
|
||||
<div class="cell">
|
||||
<div class="is-flex is-align-items-center">
|
||||
<div class="checkbox mr-6">
|
||||
<input type="checkbox">
|
||||
</div>
|
||||
<div class="is-flex is-flex-direction-column is-align-items-start">
|
||||
<p class="has-text-weight-semibold">
|
||||
Senders Name Here
|
||||
</p>
|
||||
<p>
|
||||
2022-11-20 13:30:00
|
||||
</p>
|
||||
<p>
|
||||
Message content here. Lorem ipsum dolor sit amet consectetur
|
||||
adipisicing elit. Corrupti doloremque voluptatum velit repellendus
|
||||
ipsum delectus blanditiis quis dolores. Maxime labore esse
|
||||
laboriosam inventore error molestiae consequuntur quo, deleniti ea
|
||||
nihil.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="is-flex is-align-items-center">
|
||||
<div class="checkbox mr-6">
|
||||
<input type="checkbox">
|
||||
</div>
|
||||
<div class="is-flex is-flex-direction-column is-align-items-start">
|
||||
<p class="has-text-weight-semibold">
|
||||
Senders Name Here
|
||||
</p>
|
||||
<p>
|
||||
2022-11-20 13:30:00
|
||||
</p>
|
||||
<p>
|
||||
Message content here. Lorem ipsum dolor sit amet consectetur
|
||||
adipisicing elit. Corrupti doloremque voluptatum velit repellendus
|
||||
ipsum delectus blanditiis quis dolores. Maxime labore esse
|
||||
laboriosam inventore error molestiae consequuntur quo, deleniti ea
|
||||
nihil.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="is-flex is-align-items-center">
|
||||
<div class="checkbox mr-6">
|
||||
<input type="checkbox">
|
||||
</div>
|
||||
<div class="is-flex is-flex-direction-column is-align-items-start">
|
||||
<p class="has-text-weight-semibold">
|
||||
Senders Name Here
|
||||
</p>
|
||||
<p>
|
||||
2022-11-20 13:30:00
|
||||
</p>
|
||||
<p>
|
||||
Message content here. Lorem ipsum dolor sit amet consectetur
|
||||
adipisicing elit. Corrupti doloremque voluptatum velit repellendus
|
||||
ipsum delectus blanditiis quis dolores. Maxime labore esse
|
||||
laboriosam inventore error molestiae consequuntur quo, deleniti ea
|
||||
nihil.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="is-flex is-align-items-center">
|
||||
<div class="checkbox mr-6">
|
||||
<input type="checkbox">
|
||||
</div>
|
||||
<div class="is-flex is-flex-direction-column is-align-items-start">
|
||||
<p class="has-text-weight-semibold">
|
||||
Senders Name Here
|
||||
</p>
|
||||
<p>
|
||||
2022-11-20 13:30:00
|
||||
</p>
|
||||
<p>
|
||||
Message content here. Lorem ipsum dolor sit amet consectetur
|
||||
adipisicing elit. Corrupti doloremque voluptatum velit repellendus
|
||||
ipsum delectus blanditiis quis dolores. Maxime labore esse
|
||||
laboriosam inventore error molestiae consequuntur quo, deleniti ea
|
||||
nihil.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="is-flex is-align-items-center">
|
||||
<div class="checkbox mr-6">
|
||||
<input type="checkbox">
|
||||
</div>
|
||||
<div class="is-flex is-flex-direction-column is-align-items-start">
|
||||
<p class="has-text-weight-semibold">
|
||||
Senders Name Here
|
||||
</p>
|
||||
<p>
|
||||
2022-11-20 13:30:00
|
||||
</p>
|
||||
<p>
|
||||
Message content here. Lorem ipsum dolor sit amet consectetur
|
||||
adipisicing elit. Corrupti doloremque voluptatum velit repellendus
|
||||
ipsum delectus blanditiis quis dolores. Maxime labore esse
|
||||
laboriosam inventore error molestiae consequuntur quo, deleniti ea
|
||||
nihil.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="is-flex is-align-items-center">
|
||||
<div class="checkbox mr-6">
|
||||
<input type="checkbox">
|
||||
</div>
|
||||
<div class="is-flex is-flex-direction-column is-align-items-start">
|
||||
<p class="has-text-weight-semibold">
|
||||
Senders Name Here
|
||||
</p>
|
||||
<p>
|
||||
2022-11-20 13:30:00
|
||||
</p>
|
||||
<p>
|
||||
Message content here. Lorem ipsum dolor sit amet consectetur
|
||||
adipisicing elit. Corrupti doloremque voluptatum velit repellendus
|
||||
ipsum delectus blanditiis quis dolores. Maxime labore esse
|
||||
laboriosam inventore error molestiae consequuntur quo, deleniti ea
|
||||
nihil.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
|
||||
<a href="#" class="card-footer-item has-text-link has-text-weight-semibold has-text-white">
|
||||
Refresh
|
||||
</a>
|
||||
|
||||
<a href="#" class="card-footer-item has-text-link has-text-weight-semibold has-text-white">
|
||||
Delete Selected
|
||||
</a>
|
||||
<div
|
||||
class="is-flex is-flex-direction-column is-align-items-start"
|
||||
>
|
||||
<p class="has-text-weight-semibold">
|
||||
Senders Name Here
|
||||
</p>
|
||||
<p>2022-11-20 13:30:00</p>
|
||||
<p>
|
||||
Message content here. Lorem ipsum dolor sit amet
|
||||
consectetur adipisicing elit. Corrupti doloremque
|
||||
voluptatum velit repellendus ipsum delectus
|
||||
blanditiis quis dolores. Maxime labore esse
|
||||
laboriosam inventore error molestiae consequuntur
|
||||
quo, deleniti ea nihil.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-header-title">
|
||||
Send SMS
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div class="is-flex is-align-items-center">
|
||||
<div class="checkbox mr-6">
|
||||
<input type="checkbox" />
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="fixed-grid has-5-cols has-1-cols-mobile">
|
||||
<div class="grid">
|
||||
<div class="cell is-col-span-1">
|
||||
<div class="field">
|
||||
<label class="label">Receipient's Phone Number</label>
|
||||
<div class="control has-icons-left">
|
||||
<input class="input" type="text" placeholder="Input Phone Number">
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-user"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell is-col-span-5 is-col-span-1-mobile">
|
||||
<div class="field">
|
||||
<label class="label">Message</label>
|
||||
<div class="control">
|
||||
<textarea class="textarea" placeholder="Textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
|
||||
<a href="#" class="card-footer-item has-text-link has-text-weight-semibold has-text-white">
|
||||
Send SMS
|
||||
</a>
|
||||
|
||||
<a href="#" class="card-footer-item has-text-link has-text-weight-semibold has-text-white">
|
||||
Reset
|
||||
</a>
|
||||
<div
|
||||
class="is-flex is-flex-direction-column is-align-items-start"
|
||||
>
|
||||
<p class="has-text-weight-semibold">
|
||||
Senders Name Here
|
||||
</p>
|
||||
<p>2022-11-20 13:30:00</p>
|
||||
<p>
|
||||
Message content here. Lorem ipsum dolor sit amet
|
||||
consectetur adipisicing elit. Corrupti doloremque
|
||||
voluptatum velit repellendus ipsum delectus
|
||||
blanditiis quis dolores. Maxime labore esse
|
||||
laboriosam inventore error molestiae consequuntur
|
||||
quo, deleniti ea nihil.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="is-flex is-align-items-center">
|
||||
<div class="checkbox mr-6">
|
||||
<input type="checkbox" />
|
||||
</div>
|
||||
<div
|
||||
class="is-flex is-flex-direction-column is-align-items-start"
|
||||
>
|
||||
<p class="has-text-weight-semibold">
|
||||
Senders Name Here
|
||||
</p>
|
||||
<p>2022-11-20 13:30:00</p>
|
||||
<p>
|
||||
Message content here. Lorem ipsum dolor sit amet
|
||||
consectetur adipisicing elit. Corrupti doloremque
|
||||
voluptatum velit repellendus ipsum delectus
|
||||
blanditiis quis dolores. Maxime labore esse
|
||||
laboriosam inventore error molestiae consequuntur
|
||||
quo, deleniti ea nihil.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="is-flex is-align-items-center">
|
||||
<div class="checkbox mr-6">
|
||||
<input type="checkbox" />
|
||||
</div>
|
||||
<div
|
||||
class="is-flex is-flex-direction-column is-align-items-start"
|
||||
>
|
||||
<p class="has-text-weight-semibold">
|
||||
Senders Name Here
|
||||
</p>
|
||||
<p>2022-11-20 13:30:00</p>
|
||||
<p>
|
||||
Message content here. Lorem ipsum dolor sit amet
|
||||
consectetur adipisicing elit. Corrupti doloremque
|
||||
voluptatum velit repellendus ipsum delectus
|
||||
blanditiis quis dolores. Maxime labore esse
|
||||
laboriosam inventore error molestiae consequuntur
|
||||
quo, deleniti ea nihil.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="is-flex is-align-items-center">
|
||||
<div class="checkbox mr-6">
|
||||
<input type="checkbox" />
|
||||
</div>
|
||||
<div
|
||||
class="is-flex is-flex-direction-column is-align-items-start"
|
||||
>
|
||||
<p class="has-text-weight-semibold">
|
||||
Senders Name Here
|
||||
</p>
|
||||
<p>2022-11-20 13:30:00</p>
|
||||
<p>
|
||||
Message content here. Lorem ipsum dolor sit amet
|
||||
consectetur adipisicing elit. Corrupti doloremque
|
||||
voluptatum velit repellendus ipsum delectus
|
||||
blanditiis quis dolores. Maxime labore esse
|
||||
laboriosam inventore error molestiae consequuntur
|
||||
quo, deleniti ea nihil.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="is-flex is-align-items-center">
|
||||
<div class="checkbox mr-6">
|
||||
<input type="checkbox" />
|
||||
</div>
|
||||
<div
|
||||
class="is-flex is-flex-direction-column is-align-items-start"
|
||||
>
|
||||
<p class="has-text-weight-semibold">
|
||||
Senders Name Here
|
||||
</p>
|
||||
<p>2022-11-20 13:30:00</p>
|
||||
<p>
|
||||
Message content here. Lorem ipsum dolor sit amet
|
||||
consectetur adipisicing elit. Corrupti doloremque
|
||||
voluptatum velit repellendus ipsum delectus
|
||||
blanditiis quis dolores. Maxime labore esse
|
||||
laboriosam inventore error molestiae consequuntur
|
||||
quo, deleniti ea nihil.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
<a
|
||||
href="#"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Refresh
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Delete Selected
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-header-title">Send SMS</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="fixed-grid has-5-cols has-1-cols-mobile">
|
||||
<div class="grid">
|
||||
<div class="cell is-col-span-1">
|
||||
<div class="field">
|
||||
<label class="label">Receipient's Phone Number</label>
|
||||
<div class="control has-icons-left">
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
placeholder="Input Phone Number"
|
||||
/>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-user"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell is-col-span-5 is-col-span-1-mobile">
|
||||
<div class="field">
|
||||
<label class="label">Message</label>
|
||||
<div class="control">
|
||||
<textarea
|
||||
class="textarea"
|
||||
placeholder="Textarea"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a
|
||||
href="#"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Send SMS
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Reset
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="content">
|
||||
<div class="is-flex is-flex-direction-column is-align-items-center ">
|
||||
<div class="has-text-centered">
|
||||
<div class="icon-text">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
</span>
|
||||
<span>Information</span>
|
||||
</div>
|
||||
|
||||
<p class="block has-text-weight-semibold">
|
||||
This is an experimental feature and may cause an error in some cases.
|
||||
</p>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="is-flex is-flex-direction-column is-align-items-center">
|
||||
<div class="has-text-centered">
|
||||
<div class="icon-text">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
</span>
|
||||
<span>Information</span>
|
||||
</div>
|
||||
|
||||
<p class="block has-text-weight-semibold">
|
||||
This is an experimental feature and may cause an error in some
|
||||
cases.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<div id="reboot-modal" class="modal">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<section class="modal-card-body rounded-edge">
|
||||
<p class="subtitle" id="modal-message">
|
||||
Do you want to reboot the device?
|
||||
</p>
|
||||
<div id="loading-content" style="display: none">
|
||||
<div class="custom-loader"></div>
|
||||
<div class="countdown-text">
|
||||
Rebooting... <span id="countdown">40</span>s
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons" id="modal-buttons">
|
||||
<button class="button is-warning" id="rebootModem">Reboot</button>
|
||||
<button class="button cancel" aria-label="close">Cancel</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -19,25 +19,16 @@ RAW_COMMAND=$(echo "$INPUT_DATA" | sed 's/command=//g')
|
||||
# URL-decode the command
|
||||
COMMAND=$(urldecode "$RAW_COMMAND")
|
||||
|
||||
# Save the command input to a unique at_input file
|
||||
AT_INPUT_FILE="/tmp/at_input_$$.txt"
|
||||
echo "$COMMAND" > "$AT_INPUT_FILE"
|
||||
|
||||
# Define unique input/output files and AT port
|
||||
INPUT_FILE="/tmp/input_$$.txt"
|
||||
OUTPUT_FILE="/tmp/output_$$.txt"
|
||||
AT_PORT="/dev/smd11"
|
||||
INPUT_FILE="/tmp/custom_input_$$.txt"
|
||||
OUTPUT_FILE="/tmp/custom_output_$$.txt"
|
||||
AT_PORT="/dev/smd7"
|
||||
|
||||
# Ensure exclusive access to the AT port to avoid overloading smd11
|
||||
(
|
||||
flock -x 200
|
||||
# Write the command directly to the input file
|
||||
echo "$COMMAND" > "$INPUT_FILE"
|
||||
|
||||
# Copy the user input to the input file
|
||||
cp "$AT_INPUT_FILE" "$INPUT_FILE"
|
||||
|
||||
# Run the command using atinout
|
||||
atinout "$INPUT_FILE" "$AT_PORT" "$OUTPUT_FILE"
|
||||
) 200>/tmp/atinout.lock
|
||||
# Run the command using atinout
|
||||
atinout "$INPUT_FILE" "$AT_PORT" "$OUTPUT_FILE"
|
||||
|
||||
# Read the output from output.txt
|
||||
OUTPUT=$(cat "$OUTPUT_FILE")
|
||||
@@ -58,4 +49,4 @@ echo "$JSON_RESPONSE" >> /tmp/cgi_debug.log
|
||||
echo "$JSON_RESPONSE"
|
||||
|
||||
# Clean up temporary files
|
||||
rm "$AT_INPUT_FILE" "$INPUT_FILE" "$OUTPUT_FILE"
|
||||
rm "$INPUT_FILE" "$OUTPUT_FILE"
|
||||
@@ -15,7 +15,7 @@ INPUT_PASSWORD=$(echo "$POST_DATA" | sed -n 's/^.*password=\([^&]*\).*$/\1/p')
|
||||
INPUT_PASSWORD=$(echo "$INPUT_PASSWORD" | sed 's/+/ /g;s/%\(..\)/\\x\1/g' | xargs -0 printf "%b")
|
||||
|
||||
# Log received password for debugging (remove in production)
|
||||
echo "Received password: $INPUT_PASSWORD" >&2
|
||||
# echo "Received password: $INPUT_PASSWORD" >&2
|
||||
|
||||
# Extract the hashed password from /etc/shadow for the specified user
|
||||
USER_SHADOW_ENTRY=$(grep "^$USER:" /etc/shadow)
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
/* */
|
||||
|
||||
/* import Poppins font */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Euclid+Flex:wght@400;500;600;700&display=swap');
|
||||
@import url("https://fonts.googleapis.com/css2?family=Euclid+Flex:wght@400;500;600;700&display=swap");
|
||||
|
||||
/* use Poppins everywhere */
|
||||
* {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-family: "Poppins", sans-serif;
|
||||
}
|
||||
|
||||
html {
|
||||
@@ -64,4 +64,99 @@ html.theme-light {
|
||||
|
||||
#dataConnState .tag {
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
/* Add a bit of roundness on the corner */
|
||||
.rounded-edge {
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.command-history {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.loading {
|
||||
opacity: 0.7;
|
||||
pointer-events: none;
|
||||
}
|
||||
.history-item {
|
||||
position: relative;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
.delete-history {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.delete-history:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.command-text {
|
||||
cursor: pointer;
|
||||
color: #485fc7;
|
||||
}
|
||||
.command-text:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.no-history {
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
color: #7a7a7a;
|
||||
}
|
||||
@keyframes fadeOut {
|
||||
to {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.fade-out {
|
||||
animation: fadeOut 0.3s ease-out forwards;
|
||||
}
|
||||
|
||||
#cooldownTimer {
|
||||
position: absolute;
|
||||
right: 0.5rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 0.8rem;
|
||||
color: #666;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.countdown-text {
|
||||
text-align: center;
|
||||
margin-top: 1rem;
|
||||
margin-left: 1.5rem;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Center content in modal */
|
||||
.modal-card-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.custom-loader {
|
||||
width:50px;
|
||||
height:50px;
|
||||
--c:radial-gradient(farthest-side,#766DF4 92%,#0000);
|
||||
background:
|
||||
var(--c) 50% 0,
|
||||
var(--c) 50% 100%,
|
||||
var(--c) 100% 50%,
|
||||
var(--c) 0 50%;
|
||||
background-size:12px 12px;
|
||||
background-repeat:no-repeat;
|
||||
animation:s7 1s infinite;
|
||||
}
|
||||
@keyframes s7 {to{transform: rotate(.5turn)}}
|
||||
|
||||
@@ -19,9 +19,12 @@
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
|
||||
<script src="js/styles/toggle-theme.js"></script>
|
||||
|
||||
<script src="/js/home/main.js"></script>
|
||||
<script src="js/styles/toggle-theme.js"></script>
|
||||
<script src="/js/styles/nav-burger.js"></script>
|
||||
<script src="/js/styles/modal-trigger.js"></script>
|
||||
<script src="/js/utils/reboot.js"></script>
|
||||
<script defer src="/js/auth/auth.js"></script>
|
||||
|
||||
<script>
|
||||
@@ -69,7 +72,14 @@
|
||||
<a class="navbar-item" href="/cell-sms.html"> Cell SMS </a>
|
||||
</div>
|
||||
</div>
|
||||
<a class="navbar-item" href="/advance-settings.html"> Advance </a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> Advance </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<a class="navbar-item" href="/advance-settings.html"> Advance Settings </a>
|
||||
<a class="navbar-item" href="#">Experimental Features</a>
|
||||
<a class="navbar-item" href="/cgi-bin/luci">OpenWRT Luci</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class="navbar-item" href="/about.html"> About </a>
|
||||
</div>
|
||||
|
||||
@@ -89,11 +99,11 @@
|
||||
</p>
|
||||
<div class="is-flex is-mobile is-align-items-center">
|
||||
<p class="control">
|
||||
<a href="#" class="button is-warning is-outlined">
|
||||
<div href="#" class="button is-warning is-outlined reboot-modal" data-target="reboot-modal" >
|
||||
<span class="icon">
|
||||
<i class="fas fa-power-off"></i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</p>
|
||||
<p class="control ml-2 is-mobile">
|
||||
<a
|
||||
@@ -463,5 +473,23 @@
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<div id="reboot-modal" class="modal">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<section class="modal-card-body rounded-edge">
|
||||
<p class="subtitle" id="modal-message">
|
||||
Do you want to reboot the device?
|
||||
</p>
|
||||
<div id="loading-content" style="display: none;">
|
||||
<div class="custom-loader"></div>
|
||||
<div class="countdown-text">Rebooting... <span id="countdown">80</span>s</div>
|
||||
</div>
|
||||
<div class="buttons" id="modal-buttons">
|
||||
<button class="button is-warning" id="rebootModem">Reboot</button>
|
||||
<button class="button cancel" aria-label="close">Cancel</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
122
www/index.html
122
www/index.html
@@ -1,74 +1,86 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<!-- Logo -->
|
||||
<link rel="simpleadmin-logo" href="favicon.ico" />
|
||||
|
||||
<link rel="stylesheet" href="css/bulma/bulma.scss">
|
||||
<link rel="stylesheet" href="css/bulma/css/bulma.min.css">
|
||||
<link rel="stylesheet" href="css/bulma/css/bulma.css">
|
||||
<link rel="stylesheet" href="css/custom.css">
|
||||
<link rel="stylesheet" href="css/bulma/bulma.scss" />
|
||||
<link rel="stylesheet" href="css/bulma/css/bulma.min.css" />
|
||||
<link rel="stylesheet" href="css/bulma/css/bulma.css" />
|
||||
<link rel="stylesheet" href="css/custom.css" />
|
||||
|
||||
<script src="js/styles/toggle-theme.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const savedTheme = localStorage.getItem('theme') || 'theme-dark';
|
||||
document.documentElement.classList.add(savedTheme);
|
||||
})();
|
||||
(function () {
|
||||
const savedTheme = localStorage.getItem("theme") || "theme-dark";
|
||||
document.documentElement.classList.add(savedTheme);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<title>Login</title>
|
||||
<script defer src="/js/auth/auth.js"></script>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body>
|
||||
<div class="box container mt-6">
|
||||
<div class="fixed-grid has-1-cols">
|
||||
<div class="grid is-gap-5">
|
||||
<div class="cell">
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<img src="/assets/logo.png" alt="Logo" class="image is-square image is-32x32">
|
||||
</div>
|
||||
<div class="control">
|
||||
<h1 class="title">
|
||||
QuecManager Login
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<form id="loginForm">
|
||||
<div class="field">
|
||||
<label class="label">Username</label>
|
||||
<div class="control">
|
||||
<input class="input" id="username" type="text" required placeholder="Username" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Password</label>
|
||||
<div class="control">
|
||||
<input class="input" id="password" type="password" required placeholder="********" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="button is-primary" type="submit">Sign in</button>
|
||||
<p id="error" class="has-text-danger has-text-weight-semibold mt-2">
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
<div class="fixed-grid has-1-cols">
|
||||
<div class="grid is-gap-5">
|
||||
<div class="cell">
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<img
|
||||
src="/assets/logo.png"
|
||||
alt="Logo"
|
||||
class="image is-square image is-32x32"
|
||||
/>
|
||||
</div>
|
||||
<div class="control">
|
||||
<h1 class="title">QuecManager Login</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<form id="loginForm">
|
||||
<div class="field">
|
||||
<label class="label">Username</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
id="username"
|
||||
type="text"
|
||||
required
|
||||
placeholder="Username"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Password</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
id="password"
|
||||
type="password"
|
||||
required
|
||||
placeholder="********"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="button is-primary" type="submit">Sign in</button>
|
||||
<p
|
||||
id="error"
|
||||
class="has-text-danger has-text-weight-semibold mt-2"
|
||||
></p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
135
www/js/advance/at-terminal.js
Normal file
135
www/js/advance/at-terminal.js
Normal file
@@ -0,0 +1,135 @@
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const form = document.getElementById("commandForm");
|
||||
const output = document.getElementById("output");
|
||||
const commandInput = document.getElementById("command");
|
||||
const sendButton = document.getElementById("sendButton");
|
||||
const commandHistory = document.getElementById("commandHistory");
|
||||
const noHistory = document.getElementById("noHistory");
|
||||
const clearHistoryButton = document.getElementById("clearHistory");
|
||||
const cooldownTimer = document.getElementById("cooldownTimer");
|
||||
|
||||
const COOLDOWN_DURATION = 1000; // 1 second cooldown
|
||||
let isLoading = false;
|
||||
let cooldownActive = false;
|
||||
|
||||
function setLoading(loading) {
|
||||
isLoading = loading;
|
||||
sendButton.classList.toggle("is-loading", loading);
|
||||
form.classList.toggle("loading", loading);
|
||||
}
|
||||
|
||||
function setCooldown() {
|
||||
cooldownActive = true;
|
||||
sendButton.classList.add("cooldown");
|
||||
let timeLeft = COOLDOWN_DURATION;
|
||||
|
||||
function updateTimer() {
|
||||
timeLeft -= 100;
|
||||
if (timeLeft <= 0) {
|
||||
cooldownActive = false;
|
||||
sendButton.classList.remove("cooldown");
|
||||
cooldownTimer.textContent = "";
|
||||
return;
|
||||
}
|
||||
cooldownTimer.textContent = `${(timeLeft / 1000).toFixed(1)}s`;
|
||||
setTimeout(updateTimer, 100);
|
||||
}
|
||||
|
||||
updateTimer();
|
||||
}
|
||||
|
||||
function updateHistoryVisibility() {
|
||||
const hasHistoryItems =
|
||||
commandHistory.querySelectorAll(".history-item").length > 0;
|
||||
noHistory.style.display = hasHistoryItems ? "none" : "block";
|
||||
clearHistoryButton.style.display = hasHistoryItems ? "block" : "none";
|
||||
}
|
||||
|
||||
function addToHistory(command, response) {
|
||||
const historyItem = document.createElement("div");
|
||||
historyItem.className = "box mb-2 history-item";
|
||||
historyItem.innerHTML = `
|
||||
<button class="delete delete-history" aria-label="delete"></button>
|
||||
<strong class="command-text">${command}</strong>
|
||||
<pre style="margin-top: 0.5rem; font-size: 0.85em; white-space: pre-wrap;">${response}</pre>
|
||||
`;
|
||||
|
||||
historyItem
|
||||
.querySelector(".command-text")
|
||||
.addEventListener("click", () => {
|
||||
commandInput.value = command;
|
||||
commandInput.focus();
|
||||
});
|
||||
|
||||
historyItem
|
||||
.querySelector(".delete-history")
|
||||
.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
historyItem.classList.add("fade-out");
|
||||
setTimeout(() => {
|
||||
historyItem.remove();
|
||||
updateHistoryVisibility();
|
||||
}, 300);
|
||||
});
|
||||
|
||||
commandHistory.insertBefore(historyItem, commandHistory.firstChild);
|
||||
updateHistoryVisibility();
|
||||
}
|
||||
|
||||
clearHistoryButton.addEventListener("click", () => {
|
||||
const historyItems = commandHistory.querySelectorAll(".history-item");
|
||||
historyItems.forEach((item) => {
|
||||
item.classList.add("fade-out");
|
||||
});
|
||||
setTimeout(() => {
|
||||
commandHistory.innerHTML = "";
|
||||
commandHistory.appendChild(noHistory);
|
||||
updateHistoryVisibility();
|
||||
}, 300);
|
||||
});
|
||||
|
||||
async function sendCommand(command) {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch("/cgi-bin/atinout_handler.sh", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded",
|
||||
},
|
||||
body: `command=${encodeURIComponent(command)}`,
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
output.value = data.output || "No response received";
|
||||
addToHistory(command, data.output || "No response received");
|
||||
setCooldown();
|
||||
} catch (error) {
|
||||
const errorMessage = `Error: ${error.message}\n\nTroubleshooting steps:\n1. Check if the device is connected\n2. Verify AT port settings\n3. Ensure atinout utility is installed`;
|
||||
output.value = errorMessage;
|
||||
addToHistory(command, errorMessage);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
form.addEventListener("submit", async function (e) {
|
||||
e.preventDefault();
|
||||
if (isLoading || cooldownActive) return;
|
||||
|
||||
const command = commandInput.value.trim();
|
||||
if (!command) {
|
||||
output.value = "Please enter a command";
|
||||
return;
|
||||
}
|
||||
|
||||
await sendCommand(command);
|
||||
commandInput.value = "";
|
||||
});
|
||||
|
||||
// Initialize visibility
|
||||
updateHistoryVisibility();
|
||||
});
|
||||
@@ -1,108 +1,205 @@
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
// Function to generate a random token
|
||||
function generateAuthToken(length = 32) {
|
||||
const charset =
|
||||
"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
|
||||
let token = "";
|
||||
for (let i = 0; i < length; i++) {
|
||||
const randomIndex = Math.floor(Math.random() * charset.length);
|
||||
token += charset[randomIndex];
|
||||
class AuthManager {
|
||||
constructor() {
|
||||
this.protectedPages = new Set([
|
||||
'/home.html',
|
||||
'/advance-settings.html',
|
||||
'/bandlock.html',
|
||||
'/cell-locking.html',
|
||||
'/cell-scanner.html',
|
||||
'/cell-settings.html',
|
||||
'/cell-sms.html',
|
||||
'/about.html'
|
||||
]);
|
||||
|
||||
// Session timeout in milliseconds (e.g., 30 minutes)
|
||||
this.sessionTimeout = 30 * 60 * 1000;
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
// Initially hide the body to prevent content flashing
|
||||
document.body.style.display = 'none';
|
||||
|
||||
// Check authentication state
|
||||
this.checkAuthState();
|
||||
|
||||
// Set up event listeners
|
||||
this.setupEventListeners();
|
||||
|
||||
// Show body after auth check
|
||||
document.body.style.display = '';
|
||||
}
|
||||
|
||||
generateAuthToken(length = 32) {
|
||||
const charset = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
|
||||
return Array.from(crypto.getRandomValues(new Uint8Array(length)))
|
||||
.map(x => charset[x % charset.length])
|
||||
.join('');
|
||||
}
|
||||
|
||||
isProtectedPage(path) {
|
||||
return this.protectedPages.has(path) ||
|
||||
Array.from(this.protectedPages).some(page => path.includes(page));
|
||||
}
|
||||
|
||||
getSessionData() {
|
||||
const sessionStr = localStorage.getItem('session');
|
||||
if (!sessionStr) return null;
|
||||
|
||||
try {
|
||||
return JSON.parse(sessionStr);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
setSessionData(token) {
|
||||
const session = {
|
||||
token,
|
||||
lastActivity: Date.now(),
|
||||
expiresAt: Date.now() + this.sessionTimeout
|
||||
};
|
||||
localStorage.setItem('session', JSON.stringify(session));
|
||||
}
|
||||
|
||||
isSessionValid() {
|
||||
const session = this.getSessionData();
|
||||
if (!session) return false;
|
||||
|
||||
const now = Date.now();
|
||||
|
||||
// Check if session has expired
|
||||
if (now > session.expiresAt) {
|
||||
this.logout();
|
||||
return false;
|
||||
}
|
||||
|
||||
// Update last activity and extend session if needed
|
||||
if (now - session.lastActivity > 5 * 60 * 1000) { // Update every 5 minutes
|
||||
this.setSessionData(session.token);
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
checkAuthState() {
|
||||
const currentPath = window.location.pathname;
|
||||
const isAuthenticated = this.isSessionValid();
|
||||
|
||||
// Redirect logic
|
||||
if (!isAuthenticated && this.isProtectedPage(currentPath)) {
|
||||
window.location.href = '/index.html';
|
||||
return false;
|
||||
}
|
||||
|
||||
if (isAuthenticated && currentPath.includes('index.html')) {
|
||||
window.location.href = '/home.html';
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
async login(username, password) {
|
||||
try {
|
||||
const formData = new URLSearchParams();
|
||||
formData.append('username', username);
|
||||
formData.append('password', encodeURIComponent(password));
|
||||
|
||||
const response = await fetch('/cgi-bin/auth.sh', {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded'
|
||||
}
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.state === 'success') {
|
||||
const token = this.generateAuthToken();
|
||||
this.setSessionData(token);
|
||||
window.location.href = '/home.html';
|
||||
return true;
|
||||
}
|
||||
return token;
|
||||
|
||||
return false;
|
||||
} catch (error) {
|
||||
console.error('Login error:', error);
|
||||
throw new Error('An error occurred during login');
|
||||
}
|
||||
|
||||
// Initially hide the body to prevent content from flashing
|
||||
document.body.style.display = "none";
|
||||
|
||||
// Check if the user is already logged in
|
||||
const authToken = localStorage.getItem("authToken");
|
||||
|
||||
// Define which pages should be protected
|
||||
const protectedPages = [
|
||||
"/home.html",
|
||||
"advance-settings.html",
|
||||
"/bandlock.html",
|
||||
"/cell-locking.html",
|
||||
"/cell-scanner.html",
|
||||
"/cell-settings.html",
|
||||
"/cell-sms.html",
|
||||
"/about.html", // Add all the protected HTML pages here
|
||||
];
|
||||
|
||||
const currentPage = window.location.pathname;
|
||||
|
||||
// If the user is not logged in and tries to access a protected page, redirect to login
|
||||
if (!authToken && protectedPages.includes(currentPage)) {
|
||||
window.location.href = "index.html";
|
||||
} else {
|
||||
// Show the page if authentication is successful or not required
|
||||
document.body.style.display = "";
|
||||
}
|
||||
|
||||
// If the user is logged in and tries to access the login page, redirect to home
|
||||
if (authToken && currentPage.includes("index.html")) {
|
||||
window.location.href = "home.html";
|
||||
}
|
||||
|
||||
// Login form logic (only for login page)
|
||||
const loginForm = document.getElementById("loginForm");
|
||||
}
|
||||
|
||||
logout() {
|
||||
localStorage.removeItem('session');
|
||||
window.location.href = '/index.html';
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
// Handle login form
|
||||
const loginForm = document.getElementById('loginForm');
|
||||
if (loginForm) {
|
||||
loginForm.addEventListener("submit", async (e) => {
|
||||
loginForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const username = document.getElementById("username").value;
|
||||
const password = document.getElementById("password").value;
|
||||
const errorElement = document.getElementById("error");
|
||||
|
||||
const username = document.getElementById('username').value;
|
||||
const password = document.getElementById('password').value;
|
||||
const errorElement = document.getElementById('error');
|
||||
|
||||
try {
|
||||
const formData = new URLSearchParams();
|
||||
formData.append("username", username);
|
||||
formData.append("password", encodeURIComponent(password)); // URL-encode the password
|
||||
|
||||
const response = await fetch("/cgi-bin/auth.sh", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded",
|
||||
},
|
||||
});
|
||||
|
||||
const result = await response.json(); // Parse JSON response
|
||||
|
||||
if (result.state === "success") {
|
||||
const newToken = generateAuthToken();
|
||||
localStorage.setItem("authToken", newToken); // Store the token
|
||||
window.location.href = "home.html"; // Redirect on success
|
||||
} else {
|
||||
document.getElementById("error").textContent =
|
||||
"Invalid username or password";
|
||||
console.log("Invalid username or password");
|
||||
const success = await this.login(username, password);
|
||||
if (!success) {
|
||||
errorElement.textContent = 'Invalid username or password';
|
||||
}
|
||||
} catch (error) {
|
||||
// Handle any errors (e.g., network issues)
|
||||
errorElement.textContent = "An error occurred. Please try again later.";
|
||||
errorElement.textContent = error.message;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Logout button logic (only for pages that have the logout button)
|
||||
const logoutButton = document.getElementById("logoutButton");
|
||||
|
||||
// Handle component loading
|
||||
window.addEventListener('componentLoaded', (event) => {
|
||||
if (event.detail.componentId === 'nav-placeholder') {
|
||||
this.setupNavbarHandlers();
|
||||
}
|
||||
});
|
||||
|
||||
// Set up periodic session check
|
||||
setInterval(() => {
|
||||
if (this.isProtectedPage(window.location.pathname)) {
|
||||
this.isSessionValid();
|
||||
}
|
||||
}, 60000); // Check every minute
|
||||
}
|
||||
|
||||
setupNavbarHandlers() {
|
||||
// Handle logout button
|
||||
const logoutButton = document.getElementById('logoutButton');
|
||||
if (logoutButton) {
|
||||
logoutButton.addEventListener("click", () => {
|
||||
localStorage.removeItem("authToken"); // Remove token
|
||||
window.location.href = "index.html"; // Redirect to login
|
||||
logoutButton.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
this.logout();
|
||||
});
|
||||
}
|
||||
|
||||
// Fix for the issue of being redirected to login every time the Home button is clicked
|
||||
document.querySelectorAll(".navbar-item").forEach((el) => {
|
||||
if (el.textContent.includes("Home")) {
|
||||
el.addEventListener("click", (e) => {
|
||||
if (localStorage.getItem("authToken")) {
|
||||
e.preventDefault();
|
||||
window.location.href = "home.html";
|
||||
|
||||
// Handle home navigation
|
||||
const homeLinks = document.querySelectorAll('.navbar-item');
|
||||
homeLinks.forEach(link => {
|
||||
if (link.textContent.trim() === 'Home') {
|
||||
link.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
if (this.isSessionValid()) {
|
||||
window.location.href = '/home.html';
|
||||
} else {
|
||||
window.location.href = '/index.html';
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize auth manager when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
window.authManager = new AuthManager();
|
||||
});
|
||||
42
www/js/styles/modal-trigger.js
Normal file
42
www/js/styles/modal-trigger.js
Normal file
@@ -0,0 +1,42 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Functions to open and close a modal
|
||||
function openModal($el) {
|
||||
$el.classList.add('is-active');
|
||||
}
|
||||
|
||||
function closeModal($el) {
|
||||
$el.classList.remove('is-active');
|
||||
}
|
||||
|
||||
function closeAllModals() {
|
||||
(document.querySelectorAll('.modal') || []).forEach(($modal) => {
|
||||
closeModal($modal);
|
||||
});
|
||||
}
|
||||
|
||||
// Add a click event on buttons to open a specific modal
|
||||
(document.querySelectorAll('.reboot-modal') || []).forEach(($trigger) => {
|
||||
const modal = $trigger.dataset.target;
|
||||
const $target = document.getElementById(modal);
|
||||
|
||||
$trigger.addEventListener('click', () => {
|
||||
openModal($target);
|
||||
});
|
||||
});
|
||||
|
||||
// Add a click event on various child elements to close the parent modal
|
||||
(document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-body .cancel') || []).forEach(($close) => {
|
||||
const $target = $close.closest('.modal');
|
||||
|
||||
$close.addEventListener('click', () => {
|
||||
closeModal($target);
|
||||
});
|
||||
});
|
||||
|
||||
// Add a keyboard event to close all modals
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if(event.key === "Escape") {
|
||||
closeAllModals();
|
||||
}
|
||||
});
|
||||
});
|
||||
132
www/js/utils/reboot.js
Normal file
132
www/js/utils/reboot.js
Normal file
@@ -0,0 +1,132 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const modal = document.getElementById('reboot-modal');
|
||||
const rebootButton = document.getElementById('rebootModem');
|
||||
const cancelButtons = modal.querySelectorAll('.cancel, .modal-background');
|
||||
const restartConnectionBtn = document.querySelector('a.button.is-link.is-outlined');
|
||||
const modalMessage = document.getElementById('modal-message');
|
||||
const loadingContent = document.getElementById('loading-content');
|
||||
const modalButtons = document.getElementById('modal-buttons');
|
||||
const countdownElement = document.getElementById('countdown');
|
||||
|
||||
let countdownInterval;
|
||||
|
||||
function toggleModal(show = true) {
|
||||
modal.classList.toggle('is-active', show);
|
||||
document.documentElement.classList.toggle('is-clipped', show);
|
||||
|
||||
// Reset modal content when closing
|
||||
if (!show) {
|
||||
modalMessage.style.display = 'block';
|
||||
loadingContent.style.display = 'none';
|
||||
modalButtons.style.display = 'flex';
|
||||
if (countdownInterval) {
|
||||
clearInterval(countdownInterval);
|
||||
}
|
||||
countdownElement.textContent = '80';
|
||||
}
|
||||
}
|
||||
|
||||
function startCountdown() {
|
||||
let timeLeft = 80;
|
||||
|
||||
// Update display for countdown
|
||||
modalMessage.style.display = 'none';
|
||||
loadingContent.style.display = 'flex';
|
||||
modalButtons.style.display = 'none';
|
||||
|
||||
countdownInterval = setInterval(() => {
|
||||
timeLeft--;
|
||||
countdownElement.textContent = timeLeft;
|
||||
|
||||
if (timeLeft <= 0) {
|
||||
clearInterval(countdownInterval);
|
||||
window.location.reload();
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// Show modal when restart connection button is clicked
|
||||
restartConnectionBtn.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
toggleModal(true);
|
||||
});
|
||||
|
||||
// Hide modal when cancel or background is clicked
|
||||
cancelButtons.forEach(button => {
|
||||
button.addEventListener('click', () => toggleModal(false));
|
||||
});
|
||||
|
||||
// Handle ESC key press
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape' && modal.classList.contains('is-active')) {
|
||||
toggleModal(false);
|
||||
}
|
||||
});
|
||||
|
||||
// Function to send AT command
|
||||
async function sendRebootCommand() {
|
||||
try {
|
||||
// Disable the reboot button and show loading state
|
||||
rebootButton.classList.add('is-loading');
|
||||
rebootButton.disabled = true;
|
||||
|
||||
const response = await fetch('/cgi-bin/atinout_handler.sh', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: 'command=' + encodeURIComponent('AT+CFUN=1,1')
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.output && data.output.includes('OK')) {
|
||||
startCountdown();
|
||||
} else {
|
||||
throw new Error('Reboot command failed');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
toggleModal(false);
|
||||
showNotification('Failed to reboot device. Please try again.', 'is-danger');
|
||||
} finally {
|
||||
// Re-enable the reboot button and remove loading state
|
||||
rebootButton.classList.remove('is-loading');
|
||||
rebootButton.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Function to show notification (for errors only now)
|
||||
function showNotification(message, type = 'is-info') {
|
||||
const notification = document.createElement('div');
|
||||
notification.className = `notification ${type} is-light`;
|
||||
notification.style.position = 'fixed';
|
||||
notification.style.top = '1rem';
|
||||
notification.style.right = '1rem';
|
||||
notification.style.zIndex = '9999';
|
||||
notification.style.maxWidth = '300px';
|
||||
|
||||
const deleteButton = document.createElement('button');
|
||||
deleteButton.className = 'delete';
|
||||
deleteButton.addEventListener('click', () => notification.remove());
|
||||
|
||||
notification.appendChild(deleteButton);
|
||||
notification.appendChild(document.createTextNode(message));
|
||||
|
||||
document.body.appendChild(notification);
|
||||
|
||||
setTimeout(() => {
|
||||
if (document.body.contains(notification)) {
|
||||
notification.remove();
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// Handle reboot button click
|
||||
rebootButton.addEventListener('click', sendRebootCommand);
|
||||
});
|
||||
Reference in New Issue
Block a user