Commit 01/08/2025

This commit is contained in:
2025-08-01 13:22:30 +07:00
parent cb6343a8bd
commit 3bc0078614
5 changed files with 388 additions and 12 deletions

2
html/assets/js/jquery-3.7.1.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@@ -10,21 +10,34 @@
</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>Early Warning System Receiver</span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="navbar-nav me-auto">
<li class="nav-item"><a class="nav-link active" href="#">POC Receiver</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pre-Recorded Broadcast</a></li>
<li class="nav-item"><a class="nav-link" href="#">Setting and Content</a></li>
</ul><button class="btn btn-primary" type="button">Button</button>
<section class="position-relative py-4 py-xl-5">
<div class="container">
<div class="row mb-5">
<div class="col-md-8 col-xl-6 text-center mx-auto">
<h2>Log in</h2>
<p>Early Warning System Receiver</p>
</div>
</div>
</nav>
<div class="row d-flex justify-content-center">
<div class="col-md-6 col-xl-4">
<div class="card mb-5">
<div class="card-body d-flex flex-column align-items-center">
<div class="bs-icon-xl bs-icon-circle bs-icon-primary my-4 bs-icon"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-person">
<path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664z"></path>
</svg></div>
<form class="text-center" method="post">
<div class="mb-3"><input class="form-control" type="text" name="username" placeholder="Username"></div>
<div class="mb-3"><input class="form-control" type="password" name="password" placeholder="Password"></div>
<div class="mb-3"><button class="btn btn-primary w-100 d-block" type="submit">Login</button></div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery-3.7.1.min.js"></script>
</body>
</html>

39
html/pocreceiver.html Normal file
View File

@@ -0,0 +1,39 @@
<!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>EWS_POC</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/Navbar-With-Button-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>Early Warning System Receiver</span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="navbar-nav me-auto">
<li class="nav-item"><a class="nav-link active" href="#">POC Receiver</a></li>
<li class="nav-item"><a class="nav-link" href="prerecordedbroadcast.html">Pre-Recorded Broadcast</a></li>
<li class="nav-item"><a class="nav-link" href="setting.html">Setting and Content</a></li>
</ul><a class="btn btn-primary" role="button" href="index.html">Logout</a>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<h1 class="text-center">Zello Status</h1>
</div>
<div class="row">
<p id="zelloStatus">Paragraph</p>
</div>
</div>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery-3.7.1.min.js"></script>
</body>
</html>

View File

@@ -0,0 +1,143 @@
<!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>EWS_POC</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/Navbar-With-Button-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>Early Warning System Receiver</span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="navbar-nav me-auto">
<li class="nav-item"><a class="nav-link" href="pocreceiver.html">POC Receiver</a></li>
<li class="nav-item"><a class="nav-link active" href="#">Pre-Recorded Broadcast</a></li>
<li class="nav-item"><a class="nav-link" href="setting.html">Setting and Content</a></li>
</ul><a class="btn btn-primary" role="button" href="index.html">Logout</a>
</div>
</div>
</nav>
<div class="container">
<div class="row w-100">
<h1 class="text-center">Playback Status</h1>
</div>
<div class="row text-center w-100 h-100">
<p id="playbackStatus">No Status</p>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<h4 class="d-flex justify-content-center card-title">Message1</h4>
<p class="text-start card-text">File 01</p>
<div class="row">
<div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" type="button">Play</button></div>
<div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" type="button">Stop</button></div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h4 class="d-flex justify-content-center card-title">Message2</h4>
<p class="text-start card-text">File 02</p>
<div class="row">
<div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" type="button">Play</button></div>
<div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" type="button">Stop</button></div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<h4 class="d-flex justify-content-center card-title">Message3</h4>
<p class="text-start card-text">File 03</p>
<div class="row">
<div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" type="button">Play</button></div>
<div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" type="button">Stop</button></div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h4 class="d-flex justify-content-center card-title">Message4</h4>
<p class="text-start card-text">File 04</p>
<div class="row">
<div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" type="button">Play</button></div>
<div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" type="button">Stop</button></div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<h4 class="d-flex justify-content-center card-title">Message5</h4>
<p class="text-start card-text">File 05</p>
<div class="row">
<div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" type="button">Play</button></div>
<div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" type="button">Stop</button></div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h4 class="d-flex justify-content-center card-title">Message6</h4>
<p class="text-start card-text">File 06</p>
<div class="row">
<div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" type="button">Play</button></div>
<div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" type="button">Stop</button></div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<h4 class="d-flex justify-content-center card-title">Message7</h4>
<p class="text-start card-text">File 07</p>
<div class="row">
<div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" type="button">Play</button></div>
<div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" type="button">Stop</button></div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h4 class="d-flex justify-content-center card-title">Message8</h4>
<p class="text-start card-text">File 08</p>
<div class="row">
<div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" type="button">Play</button></div>
<div class="col d-flex justify-content-center"><button class="btn btn-primary w-75" type="button">Stop</button></div>
</div>
</div>
</div>
</div>
</div>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery-3.7.1.min.js"></script>
</body>
</html>

179
html/setting.html Normal file
View File

@@ -0,0 +1,179 @@
<!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>EWS_POC</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/Navbar-With-Button-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>Early Warning System Receiver</span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="navbar-nav me-auto">
<li class="nav-item"><a class="nav-link" href="pocreceiver.html">POC Receiver</a></li>
<li class="nav-item"><a class="nav-link" href="prerecordedbroadcast.html">Pre-Recorded Broadcast</a></li>
<li class="nav-item"><a class="nav-link active" href="#">Setting and Content</a></li>
</ul><a class="btn btn-primary" role="button" href="index.html">Logout</a>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<h1 class="text-center w-100">Zello Client</h1>
</div>
<div class="row">
<div class="col-5 col-sm-4 col-md-3 col-lg-2 col-xl-2 col-xxl-2">
<p class="d-flex w-100 h-100 align-items-center">Username</p>
</div>
<div class="col"><input class="w-100" type="text" id="zelloUsername"></div>
</div>
<div class="row">
<div class="col-5 col-sm-4 col-md-3 col-lg-2 col-xl-2 col-xxl-2">
<p class="d-flex w-100 h-100 align-items-center">Password</p>
</div>
<div class="col"><input class="w-100" type="password" id="zelloPassword"></div>
</div>
<div class="row">
<div class="col-5 col-sm-4 col-md-3 col-lg-2 col-xl-2 col-xxl-2">
<p class="d-flex w-100 h-100 align-items-center">Channel</p>
</div>
<div class="col"><input class="w-100" type="text" id="zelloChannel"></div>
</div>
<div class="row">
<div class="col-5 col-sm-4 col-md-3 col-lg-2 col-xl-2 col-xxl-2">
<p class="d-flex w-100 h-100 align-items-center">Server Type</p>
</div>
<div class="col">
<div class="row">
<div class="form-check"><input class="form-check-input" type="radio" id="zellocommunity" name="zellotype"><label class="form-check-label" for="formCheck-1">Community</label></div>
</div>
<div class="row">
<div class="row">
<div class="form-check"><input class="form-check-input" type="radio" id="zellowork" name="zellotype"><label class="form-check-label" for="formCheck-2">Work</label></div>
</div>
<div class="row"><input class="w-100" type="text" id="zelloWorkNetworkName" placeholder="Network Name"></div>
</div>
<div class="row">
<div class="row">
<div class="form-check"><input class="form-check-input" type="radio" id="zelloenterprise" name="zellotype"><label class="form-check-label" for="formCheck-3">Enterprise Server</label></div>
</div>
<div class="row"><input class="w-100" type="text" id="zelloEnterpriseServerDomain" placeholder="Server Domain"></div>
</div>
</div>
</div>
<div class="row d-flex justify-content-center"><button class="btn btn-primary w-75 mt-2 mb-2" id="btnApplyZello" type="button">Apply Zello Setting</button></div>
</div>
<div class="container">
<div class="row">
<div class="col w-100">
<h1 class="text-center">Pre-Recorded Setting</h1>
</div>
</div>
<div class="row">
<div class="col-5 col-sm-4 col-md-3 col-lg-2 col-xl-2 col-xxl-2">
<p class="d-flex w-100 h-100 align-items-center">Message1 (M1)</p>
</div>
<div class="col">
<div class="dropdown w-100"><button class="btn btn-primary dropdown-toggle w-100" aria-expanded="false" data-bs-toggle="dropdown" type="button">Dropdown </button>
<div class="dropdown-menu w-100"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
</div>
</div>
</div>
<div class="row">
<div class="col-5 col-sm-4 col-md-3 col-lg-2 col-xl-2 col-xxl-2">
<p class="d-flex w-100 h-100 align-items-center">Message2 (M2)</p>
</div>
<div class="col">
<div class="dropdown w-100"><button class="btn btn-primary dropdown-toggle w-100" aria-expanded="false" data-bs-toggle="dropdown" type="button">Dropdown </button>
<div class="dropdown-menu w-100"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
</div>
</div>
</div>
<div class="row">
<div class="col-5 col-sm-4 col-md-3 col-lg-2 col-xl-2 col-xxl-2">
<p class="d-flex w-100 h-100 align-items-center">Message3 (M3)</p>
</div>
<div class="col">
<div class="dropdown w-100"><button class="btn btn-primary dropdown-toggle w-100" aria-expanded="false" data-bs-toggle="dropdown" type="button">Dropdown </button>
<div class="dropdown-menu w-100"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
</div>
</div>
</div>
<div class="row">
<div class="col-5 col-sm-4 col-md-3 col-lg-2 col-xl-2 col-xxl-2">
<p class="d-flex w-100 h-100 align-items-center">Message4 (M4)</p>
</div>
<div class="col">
<div class="dropdown w-100"><button class="btn btn-primary dropdown-toggle w-100" aria-expanded="false" data-bs-toggle="dropdown" type="button">Dropdown </button>
<div class="dropdown-menu w-100"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
</div>
</div>
</div>
<div class="row">
<div class="col-5 col-sm-4 col-md-3 col-lg-2 col-xl-2 col-xxl-2">
<p class="d-flex w-100 h-100 align-items-center">Message5 (M5)</p>
</div>
<div class="col">
<div class="dropdown w-100"><button class="btn btn-primary dropdown-toggle w-100" aria-expanded="false" data-bs-toggle="dropdown" type="button">Dropdown </button>
<div class="dropdown-menu w-100"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
</div>
</div>
</div>
<div class="row">
<div class="col-5 col-sm-4 col-md-3 col-lg-2 col-xl-2 col-xxl-2">
<p class="d-flex w-100 h-100 align-items-center">Message6 (M6)</p>
</div>
<div class="col">
<div class="dropdown w-100"><button class="btn btn-primary dropdown-toggle w-100" aria-expanded="false" data-bs-toggle="dropdown" type="button">Dropdown </button>
<div class="dropdown-menu w-100"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
</div>
</div>
</div>
<div class="row">
<div class="col-5 col-sm-4 col-md-3 col-lg-2 col-xl-2 col-xxl-2">
<p class="d-flex w-100 h-100 align-items-center">Message7 (M7)</p>
</div>
<div class="col">
<div class="dropdown w-100"><button class="btn btn-primary dropdown-toggle w-100" aria-expanded="false" data-bs-toggle="dropdown" type="button">Dropdown </button>
<div class="dropdown-menu w-100"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
</div>
</div>
</div>
<div class="row">
<div class="col-5 col-sm-4 col-md-3 col-lg-2 col-xl-2 col-xxl-2">
<p class="d-flex w-100 h-100 align-items-center">Message8 (M8)</p>
</div>
<div class="col">
<div class="dropdown w-100"><button class="btn btn-primary dropdown-toggle w-100" aria-expanded="false" data-bs-toggle="dropdown" type="button">Dropdown </button>
<div class="dropdown-menu w-100"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
</div>
</div>
</div>
<div class="row d-flex justify-content-center"><button class="btn btn-primary w-75 mt-2 mb-2" id="btnApplyMessage" type="button">Apply Message Setting</button></div>
</div>
<div class="container">
<div class="row w-100">
<h1 class="text-center">Content Upload</h1>
</div>
<div class="row"><input type="file"></div>
<div class="row">
<div class="col">
<div class="progress h-100" id="contentUploadProgress">
<div class="progress-bar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">50%</div>
</div>
</div>
<div class="col-2"><button class="btn btn-primary mt-2 mb-2" id="btnUploadContent" type="button">Upload</button></div>
</div>
</div>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery-3.7.1.min.js"></script>
</body>
</html>