127 lines
8.8 KiB
HTML
127 lines
8.8 KiB
HTML
<!DOCTYPE html>
|
|
<html data-bs-theme="light" lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
|
<title>FireAlarmGateway</title>
|
|
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="assets/css/Navbar-Centered-Brand-icons.css">
|
|
</head>
|
|
|
|
<body>
|
|
<nav class="navbar navbar-expand-md bg-body py-3">
|
|
<div class="container"><a class="navbar-brand d-flex align-items-center" href="#"><span class="bs-icon-sm bs-icon-rounded bs-icon-primary d-flex justify-content-center align-items-center me-2 bs-icon"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-bezier">
|
|
<path fill-rule="evenodd" d="M0 10.5A1.5 1.5 0 0 1 1.5 9h1A1.5 1.5 0 0 1 4 10.5v1A1.5 1.5 0 0 1 2.5 13h-1A1.5 1.5 0 0 1 0 11.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm10.5.5A1.5 1.5 0 0 1 13.5 9h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM6 4.5A1.5 1.5 0 0 1 7.5 3h1A1.5 1.5 0 0 1 10 4.5v1A1.5 1.5 0 0 1 8.5 7h-1A1.5 1.5 0 0 1 6 5.5zM7.5 4a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z"></path>
|
|
<path d="M6 4.5H1.866a1 1 0 1 0 0 1h2.668A6.517 6.517 0 0 0 1.814 9H2.5c.123 0 .244.015.358.043a5.517 5.517 0 0 1 3.185-3.185A1.503 1.503 0 0 1 6 5.5zm3.957 1.358A1.5 1.5 0 0 0 10 5.5v-1h4.134a1 1 0 1 1 0 1h-2.668a6.517 6.517 0 0 1 2.72 3.5H13.5c-.123 0-.243.015-.358.043a5.517 5.517 0 0 0-3.185-3.185z"></path>
|
|
</svg></span><span>Settings</span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-4"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
|
|
<div class="collapse navbar-collapse flex-grow-0 order-md-first" id="navcol-4">
|
|
<ul class="navbar-nav me-auto">
|
|
<li class="nav-item"><a class="nav-link active" href="index.html">Contact Input</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#">Setting</a></li>
|
|
</ul>
|
|
<div class="d-md-none my-2"><button class="btn btn-light me-2" type="button">Button</button><button class="btn btn-primary" type="button">Button</button></div>
|
|
</div>
|
|
<div class="d-none d-md-block"><a class="btn btn-primary" role="button" href="#">Login</a></div>
|
|
</div>
|
|
</nav>
|
|
<div class="vstack">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">SMTP Setting</h4>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-6"><label class="col-form-label w-100 h-100">SMTP Server</label></div>
|
|
<div class="col-md-6"><input class="w-100 mt-1 mb-1" type="text" id="smtpServer" placeholder="SMTP Server Address"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6"><label class="col-form-label w-100 h-100">SMTP Port</label></div>
|
|
<div class="col-md-6"><input class="w-100 mt-1 mb-1" type="number" id="smtpPort" placeholder="SMTP Port"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6"><label class="col-form-label w-100 h-100">SMTP Username</label></div>
|
|
<div class="col-md-6"><input class="w-100 mt-1 mb-1" type="text" id="smtpUsername" placeholder="SMTP Username"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6"><label class="col-form-label w-100 h-100">SMTP Password</label></div>
|
|
<div class="col-md-6"><input class="w-100 mt-1 mb-1" type="password" id="smtpPassword" placeholder="SMTP Password"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6"><label class="col-form-label w-100 h-100">Use SSL ?</label></div>
|
|
<div class="col-md-6"><input class="h-100" type="checkbox" id="smtpSSL"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6"><label class="col-form-label w-100 h-100">Sender Address</label></div>
|
|
<div class="col-md-6"><input class="w-100 mt-1 mb-1" type="text" id="smtpSenderAddress" placeholder="Sender Email Address"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6"><label class="col-form-label w-100 h-100">Sender Name</label></div>
|
|
<div class="col-md-6"><input class="w-100 mt-1 mb-1" type="text" id="smtpSenderName" placeholder="Sender Name"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6"><label class="col-form-label w-100 h-100">Subject</label></div>
|
|
<div class="col-md-6"><input class="w-100 mt-1 mb-1" type="text" id="smtpSubject" placeholder="Email Subject"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">VX-3000 Setting</h4>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-6"><label class="col-form-label w-100 h-100">VX-3000 IP</label></div>
|
|
<div class="col-md-6"><input class="w-100 mt-1 mb-1" type="text" id="vx3kIP" placeholder="Default 192.168.14.1"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6"><label class="col-form-label w-100 h-100">VX-3000 Port</label></div>
|
|
<div class="col-md-6"><input class="w-100 mt-1 mb-1" type="number" id="vx3kPort" placeholder="Default 50050 ~ 50053"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">MQTT Setting</h4>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-6"><label class="col-form-label w-100 h-100">Broker Address</label></div>
|
|
<div class="col-md-6"><input class="w-100 mt-1 mb-1" type="text" id="mqttBrokerIP" placeholder="Broker IP"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6"><label class="col-form-label w-100 h-100">Broker Port</label></div>
|
|
<div class="col-md-6"><input class="w-100 mt-1 mb-1" type="number" id="mqttPort" placeholder="Broker Port"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6"><label class="col-form-label w-100 h-100">Username</label></div>
|
|
<div class="col-md-6"><input class="w-100 mt-1 mb-1" type="text" id="mqttUsername" placeholder="for login to Broker"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6"><label class="col-form-label w-100 h-100">Password</label></div>
|
|
<div class="col-md-6"><input class="w-100 mt-1 mb-1" type="text" id="mqttPassword" placeholder="for login to Broker"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6"><label class="col-form-label w-100 h-100">Client ID</label></div>
|
|
<div class="col-md-6"><input class="w-100 mt-1 mb-1" type="text" id="mqttClientID" placeholder="Client ID"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6"><label class="col-form-label w-100 h-100">Topic</label></div>
|
|
<div class="col-md-6"><input class="w-100 mt-1 mb-1" type="text" id="mqttTopic" placeholder="Topic"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-6"><button class="btn btn-primary w-100 h-100" id="btnResetDefault" type="button">Reset Default</button></div>
|
|
<div class="col-md-6"><button class="btn btn-primary w-100 h-100" id="btnApplySetting" type="button">Apply</button></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
|
|
<script src="assets/js/jquery-3.7.1.min.js"></script>
|
|
<script src="assets/js/connection.js"></script>
|
|
<script src="assets/js/setting.js"></script>
|
|
</body>
|
|
|
|
</html> |