rdkartono/BirdDeterrentSystem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changes by Monika DV

Browse Source
This commit is contained in:
rdkartono
2024-11-28 15:00:37 +07:00
parent f515f829cf
commit f2d560049f
3 changed files with 463 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
Html/html/index.html
View File

@@ -30,11 +30,11 @@
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item pad-menu">
<a class="nav-link" href="setting.html">Setting</a>
<a class="nav-link nav-setting" href="setting.html">Setting</a>
</li>
<li class="nav-item pad-menu">
<form action="/logout" method="get">
<button class="btn btn-outline-light" type="submit">Logout</button>
<button class="btn btn-outline-light nav-logout" type="submit">Logout</button>
</form>
</li>
</ul>
@@ -108,7 +108,7 @@
<br>
<div class="row">
<div class="col-3 ">
<p>Pan Speed</p>
<p class="text-dash">Pan Speed</p>
<div class="btn-group-vertical">
<button id="pan1" class="btn btn-outline-dark btn-sm" value="16" onclick="set_pan_speed(16)">1</button>
<button id="pan2" class="btn btn-outline-dark btn-sm" value="32" onclick="set_pan_speed(32)">2</button>
@@ -156,7 +156,7 @@
</div>
</div>
<div class="col-3">
<p>Tilt Speed</p>
<p class="text-dash">Tilt Speed</p>
<div class="btn-group-vertical">
<button id="tilt1" class="btn btn-outline-dark btn-sm" value="16" onclick="set_tilt_speed(16)">1</button>
<button id="tilt2" class="btn btn-outline-dark btn-sm" value="32" onclick="set_tilt_speed(32)">2</button>
@@ -166,14 +166,14 @@
</div>
</div>
<div>
<p class="text-center">Zoom</p>
<p class="text-center text-dash">Zoom</p>
<div class="row">
<div class="col-10">
<input id="zoom" type="range" class="form-range" min="1" max="10909" oninput="this.nextElementSibling.value = this.value">
<output class="output"></output>
</div>
<div class="col-2">
<button class="btn btn-primary" onclick="set_zoom()">SET</button>
<button class="btn btn-primary" id="set_zoom" onclick="set_zoom()">SET</button>
</div>
</div>
</div>
@@ -250,7 +250,7 @@
</div>
<br>
<div>
<label for="customRange" class="form-label">Volume</label>
<label for="customRange" class="form-label text-dash">Volume</label>
<div class="row">
<div class="col-10 pad-bar">
@@ -276,7 +276,7 @@
<!-- SECTION 3 -->
<div class="container-fluid footer1 outside">
<p>2024 Copyright &copy; Galva Technologies. All rights reserved.</p>
<p class="footer">2024 Copyright &copy; Galva Technologies. All rights reserved.</p>
</div>
</body>
</html>

431
Html/html/public/style/style.css
View File

@@ -833,7 +833,6 @@ input.checkbox{
justify-content: center;
gap: 10px;
}
/* Style the labels (Off and On) */
.toggle-label {
@@ -911,3 +910,433 @@ select {
.padleft{
padding-left: 3px;
}
.nav-setting{
font-size: 1.2em;
}
.nav-logout{
font-size: 1.2em !important;
}
/*-------------------------------------SET RESPONSIVE -----------------*/
@media (max-width: 900px) {
/*Pan Tilt Speed*/
button#tilt1,
button#tilt2,
button#tilt3,
button#tilt4,
button#pan1,
button#pan2,
button#pan3,
button#pan4{
padding: 0.75rem 1rem;
font-size: 1.2rem;
border-radius: .2rem;
}
/*End Pan Tilt Speed*/
/* ---- NAVIGATION ----- */
.btn-nav{
margin: 0;
font-size: 7em;
color: lightgray;
}
.btn-nav:hover{
color: white;
}
.btn-nav:active{
color: dodgerblue;
}
.btn-nav-center{
font-size: 3em;
top: -12px;
color: dodgerblue;
}
.btn-center-unactive{
font-size: 2em;
color: #434343;
}
.pad-img{
padding: 0;
}
.img-cctv{
box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
border-radius: 10px;
margin: 1.5em;
}
.btn-circle{
width: 13em;
height: 13em;
background-color: black;
align-items: center;
align-content: center;
margin: 5%;
border-radius: 50%;
box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
}
.pad-top{
margin-top: -17px;
margin-bottom: -10px;
}
.pad-left{
margin-top: -40px;
margin-right: -20px;
}
.pad-right{
margin-top: -40px;
margin-left: -20px;
}
.pad-bottom{
margin-top: -40px;
}
/* ---- END - NAVIGATION ----- */
/* Mute Button */
.btn-mute{
text-decoration: none;
background-color: #f7f7f7;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e7e7e7));
background-image: -webkit-linear-gradient(top, #f7f7f7, #e7e7e7);
background-image: -moz-linear-gradient(top, #f7f7f7, #e7e7e7);
background-image: -ms-linear-gradient(top, #f7f7f7, #e7e7e7);
background-image: -o-linear-gradient(top, #f7f7f7, #e7e7e7);
color: black;
width: 2.5em;
height: 2.5em;
padding: 0.2em;
position: relative;
text-align: center;
border-radius: 50%;
box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
border: solid 1px transparent;
font-size: 1.1em;
}
/* End Mute Button */
.toggle-label {
font-size: 16px;
color: #555;
margin-bottom: 15px;
margin-right: 5px;
margin-left: 5px;
text-align: right;
}
/* Style the toggle switch (input) */
.toggle-switch {
-webkit-appearance: none;
appearance: none;
width: 55px;
height: 30px;
background-color: #ccc;
border-radius: 25px;
position: relative;
transition: background-color 0.3s;
cursor: pointer;
}
/* Circle inside the switch */
.toggle-switch::before {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 24px;
height: 24px;
background-color: white;
border-radius: 50%;
transition: transform 0.3s;
}
/* When checked (toggle to On), change background color and move the circle */
.toggle-switch:checked {
background-color: #0d6efd;
}
.toggle-switch:checked::before {
transform: translateX(25px);
}
.align-right{
text-align: right;
}
/* End Switch */
}
@media (min-width: 900px) and (max-width: 1050px) {
#streaming_status{
text-align: left;
font-size: 1.8rem;
}
.padleft{
padding-left: 3px;
font-size: 1.8rem;
}
.icon-system{
margin-top: -13px;
font-size: 1.8rem;
}
button#tilt1,
button#tilt2,
button#tilt3,
button#tilt4,
button#pan1,
button#pan2,
button#pan3,
button#pan4{
padding: 0.75rem 1.5rem;
font-size: 2.5rem;
border-radius: .2rem;
}
.text-dash{
font-size: 1.8rem;
}
.text-status1{
color: black;
font-size: 3em;
}
/* ----- SWITCH ------ */
.toggle-label {
font-size: 1.8rem;
color: #555;
margin-bottom: 15px;
margin-right: 5px;
margin-left: 5px;
text-align: right;
}
/* Style the toggle switch (input) */
.toggle-switch {
-webkit-appearance: none;
appearance: none;
/*width: 50px;*/
/*height: 25px;*/
width: 75px;
height: 50px;
background-color: #ccc;
border-radius: 25px;
position: relative;
transition: background-color 0.3s;
cursor: pointer;
}
/* Circle inside the switch */
.toggle-switch::before {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 44px;
height: 44px;
background-color: white;
border-radius: 50%;
transition: transform 0.3s;
}
/* When checked (toggle to On), change background color and move the circle */
.toggle-switch:checked {
background-color: #0d6efd;
}
.toggle-switch:checked::before {
transform: translateX(25px);
}
/*----- END SWITCH -----*/
/* --- Button CONTENT ---- */
.btn-play1{
text-decoration: none;
background-color: #f7f7f7;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e7e7e7));
background-image: -webkit-linear-gradient(top, #f7f7f7, #e7e7e7);
background-image: -moz-linear-gradient(top, #f7f7f7, #e7e7e7);
background-image: -ms-linear-gradient(top, #f7f7f7, #e7e7e7);
background-image: -o-linear-gradient(top, #f7f7f7, #e7e7e7);
color: black;
/*width: 4.2em;*/
/*height: 4.2em;*/
width: 7em;
height: 7em;
position: relative;
text-align: center;
border-radius: 50%;
box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
border: solid 1px transparent;
}
.btn-play1:before {
content: "";
display: block;
background: #fff;
border-top: 2px solid #ddd;
position: absolute;
z-index: -1;
border-radius: 50%;
box-shadow: inset 0px 8px 48px #ddd;
}
.btn-play1:active {
box-shadow: 0px 3px 8px #aaa inset, 0px 2px 3px #fff;
}
.btn-play1:hover {
text-decoration: none;
/*color: #555;*/
color: black;
background: #f5f5f5;
}
.icon1{
margin: 27%;
font-size: 4.5em;
position: absolute;
top: -9px;
left: -1px;
bottom: 0;
right: 0;
text-align: center;
}
.icon2{
margin: 27%;
font-size: 4.5em;
position: absolute;
top: -9px;
left: 5px;
bottom: 0;
right: 0;
text-align: center;
}
/* --- END Button CONTENT ---- */
.btn-mute{
text-decoration: none;
background-color: #f7f7f7;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e7e7e7));
background-image: -webkit-linear-gradient(top, #f7f7f7, #e7e7e7);
background-image: -moz-linear-gradient(top, #f7f7f7, #e7e7e7);
background-image: -ms-linear-gradient(top, #f7f7f7, #e7e7e7);
background-image: -o-linear-gradient(top, #f7f7f7, #e7e7e7);
color: black;
width: 2.2em;
height: 2.2em;
padding: 0.1em;
position: relative;
text-align: center;
border-radius: 50%;
box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
border: solid 1px transparent;
font-size: 2.2em;
}
/* ---- NAVIGATION ----- */
.btn-nav{
margin: 0;
font-size: 13em;
color: lightgray;
}
.btn-nav:hover{
color: white;
}
.btn-nav:active{
color: dodgerblue;
}
.btn-nav-center{
font-size: 5em;
top: -20px;
color: dodgerblue;
}
.btn-center-unactive{
font-size: 2em;
color: #434343;
}
.pad-img{
padding: 0;
}
.img-cctv{
box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
border-radius: 10px;
margin: 1.5em;
}
.btn-circle{
width: 20em;
height: 20em;
background-color: black;
align-items: center;
align-content: center;
margin: 5%;
border-radius: 70%;
box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
}
.pad-top{
margin-top: -40px;
margin-bottom: -45px;
}
.pad-left{
margin-top: -65px;
margin-right: -40px;
}
.pad-right{
margin-top: -65px;
margin-left: -40px;
}
.pad-bottom{
margin-top: -110px;
}
#set_zoom{
padding: .5rem 1rem;
font-size: 1.7rem;
border-radius: .3rem;
}
.footer{
font-size: 1.5em;
}
.p-title{
font-size: 3.5em !important;
}
.nav-setting{
font-size: 1.8em;
line-height: 2em;
}
.nav-logout{
font-size: 1.8em !important;
}
input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 20px;
background: #ddd;
border-radius: 10px;
}
input[type="range"]::-webkit-slider-runnable-track {
height: 20px;
background: #dddddd;
border-radius: 10px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 30px;
height: 30px;
background: #0d6efd;
border-radius: 50%;
cursor: pointer;
}
.output{
padding-left: 20%;
font-size: 1.8em;
}
.text-setting{
font-size: 1.7em;
}
.text-input{
font-size: 0.9em !important;
}
#icon_confirm,
#icon_password,
#icon_camera{
font-size: 1.5em;
}
.btn-setting{
padding: .5rem 1rem !important;
font-size: 1.1rem !important;
border-radius: .3rem !important;
}
.setting-title{
font-size: 1.3em;
}
span.navbar-toggler-icon {
font-size: 1.8em;
}
}

48
Html/html/setting.html
View File

@@ -28,11 +28,11 @@
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item pad-menu">
<a class="nav-link" href="setting.html">Setting</a>
<a class="nav-link nav-setting" href="setting.html">Setting</a>
</li>
<li class="nav-item pad-menu">
<form action="/logout" method="get">
<button class="btn btn-outline-light" type="submit">Logout</button>
<button class="btn btn-outline-light nav-logout" type="submit">Logout</button>
</form>
</li>
</ul>
@@ -46,7 +46,7 @@
<div class="container">
<div class="card card-shadow">
<div class="card-header bg-secondary text-light">
<h5 class="text-md-center">Audio Files</h5>
<h5 class="text-md-center setting-title">Audio Files</h5>
</div>
<div class="card-body bg-gray">
<!-- PRESET 1-->
@@ -55,7 +55,7 @@
<p>Preset 1</p>
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
<select id="preset1" class="form-control class100">
<select id="preset1" class="form-control text-input class100">
<option>Option 1</option>
<option>Option 2</option>
</select>
@@ -67,7 +67,7 @@
<p>Preset 2</p>
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
<select id="preset2" class="form-control class100">
<select id="preset2" class="form-control text-input class100">
<option>Option 1</option>
<option>Option 2</option>
</select>
@@ -79,7 +79,7 @@
<p>Preset 3</p>
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
<select id="preset3" class="form-control class100">
<select id="preset3" class="form-control text-input class100">
<option>Option 1</option>
<option>Option 2</option>
</select>
@@ -91,7 +91,7 @@
<p>Preset 4</p>
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
<select id="preset4" class="form-control class100">
<select id="preset4" class="form-control text-input class100">
<option>Option 1</option>
<option>Option 2</option>
</select>
@@ -103,7 +103,7 @@
<p>Preset 5</p>
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
<select id="preset5" class="form-control class100">
<select id="preset5" class="form-control text-input class100">
<option>Option 1</option>
<option>Option 2</option>
</select>
@@ -112,7 +112,7 @@
<div class="row mt-2">
<div class="col-6"></div>
<div class="col-6">
<button id="save_audio" class="btn btn-primary class100" onclick="save_audio()">SAVE</button>
<button id="save_audio" class="btn btn-primary btn-setting class100" onclick="save_audio()">SAVE</button>
</div>
</div>
</div>
@@ -120,7 +120,7 @@
<div class="card mt-5 card-shadow">
<div class="card-header bg-secondary text-light">
<h5 class="text-center"> Upload Audio</h5>
<h5 class="text-center setting-title"> Upload Audio</h5>
</div>
<div class="card-body bg-gray">
<form action="/setting/uploadaudiofile" method="post" enctype="multipart/form-data">
@@ -129,10 +129,10 @@
<p> Upload audio files</p>
</div>
<div class="col-6 col-sm-6 col-md-4 col-lg-4 col-xl-4">
<input class="form-control" type="file" name="file" required title="Select Audio File">
<input class="form-control text-input" type="file" name="file" required title="Select Audio File">
</div>
<div class="col-6 col-sm-6 col-md-2 col-lg-2 col-xl-2">
<button id="uploadd_file" type="submit" class="btn btn-dark class100">Upload</button>
<button id="uploadd_file" type="submit" class="btn btn-setting btn-dark class100">Upload</button>
</div>
</div>
</form>
@@ -142,7 +142,7 @@
<div class="card mt-5 card-shadow">
<div class="card-header bg-secondary text-light ">
<h5 class="text-center">Camera</h5>
<h5 class="text-center setting-title">Camera</h5>
</div>
<div class="card-body bg-gray">
<div class="row mt-2">
@@ -150,7 +150,7 @@
<p>IP Address</p>
</div>
<div class="col-6">
<input id="setting_ip" name="ip" class="form-control" title="IP Address">
<input id="setting_ip" name="ip" class="form-control text-input" title="IP Address">
</div>
</div>
<div class="row mt-2">
@@ -158,7 +158,7 @@
<p>Port</p>
</div>
<div class="col-6">
<input id="setting_port" name="port" class="form-control" title="Port">
<input id="setting_port" name="port" class="form-control text-input" title="Port">
</div>
</div>
@@ -167,7 +167,7 @@
<p>Username</p>
</div>
<div class="col-6">
<input id="setting_username" name="username" class="form-control" title="Username">
<input id="setting_username" name="username" class="form-control text-input" title="Username">
</div>
</div>
@@ -177,7 +177,7 @@
</div>
<div class="col-6">
<div class="input-group">
<input type="password" id="setting_password" name="password" class="form-control" title="Password">
<input type="password" id="setting_password" name="password" class="form-control text-input" title="Password">
<span class="input-group-text" onclick="cameraPassword()">
<i class="fa-solid fa-eye" id="icon_camera"></i>
</span>
@@ -187,7 +187,7 @@
<div class="row mt-2">
<div class="col-6"></div>
<div class="col-6">
<button id="save_camera" class="btn btn-primary class100" onclick="save_camera()">SAVE</button>
<button id="save_camera" class="btn btn-primary btn-setting class100" onclick="save_camera()">SAVE</button>
</div>
</div>
</div>
@@ -195,7 +195,7 @@
<div class="card mt-5 card-shadow">
<div class="card-header bg-secondary text-light">
<h5 class="text-center">Login</h5>
<h5 class="text-center setting-title">Login</h5>
</div>
<div class="card-body bg-gray">
<div class="row mt-2">
@@ -203,7 +203,7 @@
<p>Username</p>
</div>
<div class="col-6">
<input id="login_username" class="form-control" title="Username">
<input id="login_username" class="form-control text-input" title="Username">
</div>
</div>
<div class="row mt-2">
@@ -212,7 +212,7 @@
</div>
<div class="col-6">
<div class="input-group">
<input type="password" id="edit_password" class="form-control" title="Password">
<input type="password" id="edit_password" class="form-control text-input" title="Password">
<span class="input-group-text" onclick="showPassword()">
<i class="fa-solid fa-eye" id="icon_password"></i>
</span>
@@ -225,7 +225,7 @@
</div>
<div class="col-6">
<div class="input-group">
<input type="password" id="confirm_password" class="form-control" title="Confirm Password">
<input type="password" id="confirm_password" class="form-control text-input" title="Confirm Password">
<span class="input-group-text" onclick="showConfirm()">
<i class="fa-solid fa-eye" id="icon_confirm"></i>
</span>
@@ -235,7 +235,7 @@
<div class="row mt-2">
<div class="col-6"></div>
<div class="col-6">
<button id="save_login" class="btn btn-primary class100" onclick="save_login()">SAVE</button>
<button id="save_login" class="btn btn-primary btn-setting class100" onclick="save_login()">SAVE</button>
</div>
</div>
</div>
@@ -245,7 +245,7 @@
<!-- SECTION 3 -->
<div class="container-fluid footer1 outside">
<p>2024 Copyright &copy; Galva Technologies. All rights reserved.</p>
<p class="footer">2024 Copyright &copy; Galva Technologies. All rights reserved.</p>
</div>
</body>
</html>