2716 lines
86 KiB
Handlebars
2716 lines
86 KiB
Handlebars
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<!-- Required meta tags -->
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
|
|
<title>Amble Dashboard</title>
|
||
|
|
<link rel="icon" href="images/walk_aA.svg" type="image/svg">
|
||
|
|
<link rel="stylesheet" href="vendors/iconfonts/mdi/font/css/materialdesignicons.min.css">
|
||
|
|
<link rel="stylesheet" href="vendors/css/vendor.bundle.base.css">
|
||
|
|
<link rel="stylesheet" href="vendors/css/vendor.bundle.addons.css">
|
||
|
|
<!-- endinject -->
|
||
|
|
<!-- plugin css for this page -->
|
||
|
|
<link rel="stylesheet" href="vendors/iconfonts/flag-icon-css/css/flag-icon.min.css" />
|
||
|
|
<!-- End plugin css for this page -->
|
||
|
|
<!-- inject:css -->
|
||
|
|
<link rel="stylesheet" href="css/vertical-layout-light/style.css">
|
||
|
|
<link rel="stylesheet" href="css/confmodal.css">
|
||
|
|
<!-- endinject -->
|
||
|
|
<link rel="shortcut icon" href="images/favicon.png" />
|
||
|
|
<link rel="stylesheet" href="css/style.css">
|
||
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
||
|
|
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
|
||
|
|
{{!--
|
||
|
|
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.1/css/buttons.bootstrap4.min.css">
|
||
|
|
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css">
|
||
|
|
<link rel="stylesheet"
|
||
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" /> --}}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<style>
|
||
|
|
footer {
|
||
|
|
margin-top: 10px;
|
||
|
|
}
|
||
|
|
.footer {
|
||
|
|
padding: 20px 1rem !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
background: #F1E8FE 0% 0% no-repeat padding-box;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-panel {
|
||
|
|
|
||
|
|
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
margin: auto;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.section {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%
|
||
|
|
}
|
||
|
|
|
||
|
|
.container-scroller {
|
||
|
|
background: white;
|
||
|
|
opacity: 1;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.ul {
|
||
|
|
list-style-type: none;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
nav {
|
||
|
|
background-color: white;
|
||
|
|
width: 100%;
|
||
|
|
padding: 10px;
|
||
|
|
height: 70px;
|
||
|
|
;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.profile {
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
width: 190px;
|
||
|
|
height: 50px;
|
||
|
|
background: #F1E8FE 0% 0% no-repeat padding-box;
|
||
|
|
border-radius: 51px;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.h4 {
|
||
|
|
position: relative;
|
||
|
|
top: 15px;
|
||
|
|
left: -15px;
|
||
|
|
width: 151px;
|
||
|
|
height: 19px;
|
||
|
|
text-align: right;
|
||
|
|
font-family: 'Heebo', sans-serif !important;
|
||
|
|
font-size: 13px;
|
||
|
|
letter-spacing: 0.05px;
|
||
|
|
color: #434343;
|
||
|
|
opacity: 0.7;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.pic {
|
||
|
|
position: relative;
|
||
|
|
top: -25px;
|
||
|
|
left: 148px;
|
||
|
|
width: 44px;
|
||
|
|
height: 44px;
|
||
|
|
|
||
|
|
border: 3px solid #5E48B9;
|
||
|
|
opacity: 1;
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.arrow {
|
||
|
|
|
||
|
|
position: relative;
|
||
|
|
top: 2px;
|
||
|
|
left: 20px;
|
||
|
|
|
||
|
|
float: left;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.row {
|
||
|
|
margin-top: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.row1 {
|
||
|
|
min-width: 56px;
|
||
|
|
max-width: auto;
|
||
|
|
display: flex;
|
||
|
|
vertical-align: middle;
|
||
|
|
flex-wrap: nowrap;
|
||
|
|
}
|
||
|
|
.row1 .col-md-1{
|
||
|
|
padding:0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mapname {
|
||
|
|
width: 100%;
|
||
|
|
height: auto;
|
||
|
|
|
||
|
|
padding: 10px;
|
||
|
|
padding-top: 20px;
|
||
|
|
|
||
|
|
background: #ECE8F2 0% 0% no-repeat padding-box;
|
||
|
|
border-radius: 0px 45px 0px 0px;
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
|
||
|
|
.h2sty {
|
||
|
|
font-family: 'Heebo', sans-serif !important;
|
||
|
|
font: bold;
|
||
|
|
font-size: 16px;
|
||
|
|
text-transform: uppercase;
|
||
|
|
|
||
|
|
letter-spacing: 0.07px;
|
||
|
|
color: #765AEA;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.h3 {
|
||
|
|
font-family: 'Heebo', sans-serif !important;
|
||
|
|
font-size: 16px;
|
||
|
|
letter-spacing: 1.53px;
|
||
|
|
color: #e92206;
|
||
|
|
opacity: 0.7;
|
||
|
|
}
|
||
|
|
|
||
|
|
.way-text {
|
||
|
|
text-align: left;
|
||
|
|
margin: 30px;
|
||
|
|
font: normal;
|
||
|
|
font-family: 'Heebo', sans-serif !important;
|
||
|
|
letter-spacing: 1.83px;
|
||
|
|
color: #765AEA;
|
||
|
|
text-transform: uppercase;
|
||
|
|
opacity: 1;
|
||
|
|
font-size: 18px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.info-box1 {
|
||
|
|
|
||
|
|
min-width: 270px;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
|
||
|
|
background: #Ffffff 0% 0% no-repeat padding-box;
|
||
|
|
box-shadow: 3px 0px 6px #9169C22E;
|
||
|
|
border: 0.5px solid #ECE8F2;
|
||
|
|
border-radius: 45px;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-home {
|
||
|
|
margin-left: 30px;
|
||
|
|
width: 43px;
|
||
|
|
height: 43px;
|
||
|
|
background: transparent linear-gradient(180deg, #92BEFF 0%, #6313DC 100%) 0% 0% no-repeat padding-box;
|
||
|
|
box-shadow: 0px 3px 12px #848CF4C4;
|
||
|
|
border-radius: 10px;
|
||
|
|
border: none;
|
||
|
|
opacity: 1;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-trivia {
|
||
|
|
margin-left: 30px;
|
||
|
|
width: 123px;
|
||
|
|
height: 33px;
|
||
|
|
background: transparent linear-gradient(180deg, #92BEFF 0%, #6313DC 100%) 0% 0% no-repeat padding-box;
|
||
|
|
box-shadow: 0px 3px 12px #848CF4C4;
|
||
|
|
border-radius: 21px;
|
||
|
|
border: none;
|
||
|
|
opacity: 1;
|
||
|
|
color: #FFFFFF;
|
||
|
|
font-size: 14px;
|
||
|
|
font-family: 'Heebo', sans-serif !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-Map {
|
||
|
|
margin-top: -10px;
|
||
|
|
margin-left: 30px;
|
||
|
|
;
|
||
|
|
width: 123px;
|
||
|
|
height: 33px;
|
||
|
|
background: transparent linear-gradient(180deg, #92BEFF 0%, #6313DC 100%) 0% 0% no-repeat padding-box;
|
||
|
|
box-shadow: 0px 3px 12px #848CF4C4;
|
||
|
|
border-radius: 21px;
|
||
|
|
border: none;
|
||
|
|
opacity: 1;
|
||
|
|
color: #FFFFFF;
|
||
|
|
font-size: 14px;
|
||
|
|
font-family: 'Heebo', sans-serif !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-save {
|
||
|
|
position: absolute;
|
||
|
|
top: -320px;
|
||
|
|
left: 900px;
|
||
|
|
width: 142px;
|
||
|
|
height: 43px;
|
||
|
|
background: transparent linear-gradient(180deg, #FF6959 0%, #FBAA7B 100%) 0% 0% no-repeat padding-box;
|
||
|
|
box-shadow: 0px 3px 12px #FBAA7B;
|
||
|
|
border: none;
|
||
|
|
border-radius: 21px;
|
||
|
|
opacity: 1;
|
||
|
|
color: #FFFFFF;
|
||
|
|
font-size: 16px;
|
||
|
|
font-family: 'Heebo', sans-serif !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
#poi {
|
||
|
|
overflow-y: scroll;
|
||
|
|
overflow-x: hidden;
|
||
|
|
min-width: 225px;
|
||
|
|
max-width: auto;
|
||
|
|
padding: 0 30px 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
::-webkit-scrollbar {
|
||
|
|
width: 3px;
|
||
|
|
/* Remove scrollbar space */
|
||
|
|
|
||
|
|
cursor: auto
|
||
|
|
}
|
||
|
|
|
||
|
|
::-webkit-scrollbar-thumb {
|
||
|
|
background: #848CF4C4;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.poi {
|
||
|
|
min-width: 180px;
|
||
|
|
width: 100%;
|
||
|
|
display: table-cell;
|
||
|
|
vertical-align: middle;
|
||
|
|
text-align: left;
|
||
|
|
cursor: pointer;
|
||
|
|
height: auto;
|
||
|
|
margin-top: 0;
|
||
|
|
font-size: 13px;
|
||
|
|
padding: 0;
|
||
|
|
background: none;
|
||
|
|
box-shadow: none;
|
||
|
|
border:0;
|
||
|
|
border-radius: 0;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.h5sty {
|
||
|
|
text-align: center;
|
||
|
|
font-size: 15px;
|
||
|
|
display: flex;
|
||
|
|
vertical-align: middle;
|
||
|
|
justify-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-family: 'Heebo', sans-serif !important;
|
||
|
|
letter-spacing: 0px;
|
||
|
|
color: #6A40BF;
|
||
|
|
opacity: 1;
|
||
|
|
background-color: white;
|
||
|
|
width: 23px;
|
||
|
|
height: 23px;
|
||
|
|
border: 1px solid #6A40BF;
|
||
|
|
border-radius: 50%;
|
||
|
|
margin:4px 0 0 0px;
|
||
|
|
line-height: 22px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.h6sty {
|
||
|
|
text-align: center;
|
||
|
|
display: flex;
|
||
|
|
justify-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
margin-left: 10px;
|
||
|
|
font-family: 'Heebo', sans-serif !important;
|
||
|
|
font-size: 13px;
|
||
|
|
letter-spacing: 1.49px;
|
||
|
|
color: #6A40BF;
|
||
|
|
text-transform: uppercase;
|
||
|
|
opacity: 1;
|
||
|
|
margin:0;
|
||
|
|
line-height: 30px;
|
||
|
|
display: block;
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
}
|
||
|
|
|
||
|
|
#addwalkform {
|
||
|
|
padding: 10px;
|
||
|
|
height: calc(100% - 57px);
|
||
|
|
}
|
||
|
|
.waypoint{
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
#poi {
|
||
|
|
height: calc(100% - 100px);
|
||
|
|
}
|
||
|
|
#poidetail {
|
||
|
|
height: 100%;
|
||
|
|
display: none;
|
||
|
|
overflow-x: hidden;
|
||
|
|
overflow-y: scroll;
|
||
|
|
}
|
||
|
|
|
||
|
|
.input {
|
||
|
|
width: 100%;
|
||
|
|
height: 30px;
|
||
|
|
background: #653DAB 0% 0% no-repeat padding-box;
|
||
|
|
border: 1px solid #D0B7FF;
|
||
|
|
border-radius: 10px;
|
||
|
|
color: whitesmoke;
|
||
|
|
text-align: center;
|
||
|
|
opacity: 0.7;
|
||
|
|
}
|
||
|
|
|
||
|
|
.input3 {
|
||
|
|
width: 100%;
|
||
|
|
height: 80px;
|
||
|
|
background: #653DAB 0% 0% no-repeat padding-box;
|
||
|
|
border: 1px solid #D0B7FF;
|
||
|
|
border-radius: 10px;
|
||
|
|
color: whitesmoke;
|
||
|
|
text-align: center;
|
||
|
|
opacity: 0.5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.input1 {
|
||
|
|
height: 40px;
|
||
|
|
width: 97%;
|
||
|
|
text-align: center;
|
||
|
|
color: #e92206;
|
||
|
|
background: #E9DFF6 0% 0% no-repeat padding-box;
|
||
|
|
box-shadow: 0px 5px 7px #00000017;
|
||
|
|
border: 1px solid #D0B7FF;
|
||
|
|
border-radius: 10px;
|
||
|
|
font-size: 16px;
|
||
|
|
opacity: 0.7;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.inputdesc {
|
||
|
|
height: 80px;
|
||
|
|
width: 97%;
|
||
|
|
padding: 10px;
|
||
|
|
color: #e92206;
|
||
|
|
background: #E9DFF6 0% 0% no-repeat padding-box;
|
||
|
|
box-shadow: 0px 5px 7px #00000017;
|
||
|
|
border: 1px solid #D0B7FF;
|
||
|
|
border-radius: 10px;
|
||
|
|
font-size: 16px;
|
||
|
|
opacity: 0.7;
|
||
|
|
word-wrap: break-word;
|
||
|
|
word-break: break-all;
|
||
|
|
}
|
||
|
|
|
||
|
|
.input1::placeholder {
|
||
|
|
text-align: left;
|
||
|
|
font: normal normal medium 14px/16px Raleway;
|
||
|
|
letter-spacing: 0px;
|
||
|
|
color: #674AB9;
|
||
|
|
opacity: 0.55;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.input:hover {
|
||
|
|
transition-timing-function: ease-in;
|
||
|
|
transition: 0.25s;
|
||
|
|
border: 2px solid #D0B7FF;
|
||
|
|
box-shadow: 0px 5px 12px #00000017;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.input::placeholder {
|
||
|
|
text-align: center;
|
||
|
|
color: lightgray;
|
||
|
|
}
|
||
|
|
|
||
|
|
.box {
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.create-walk-btn{
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=date]{
|
||
|
|
position: relative;
|
||
|
|
font-size: 0;
|
||
|
|
height: 36px;
|
||
|
|
width: calc(100% - 4px);
|
||
|
|
outline: none;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
input[type=date]::-webkit-calendar-picker-indicator {
|
||
|
|
bottom: 0;
|
||
|
|
color: transparent;
|
||
|
|
cursor: pointer;
|
||
|
|
height: auto;
|
||
|
|
left: 0;
|
||
|
|
opacity: 0;
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
width: 100%
|
||
|
|
}
|
||
|
|
input[type=date]:before{
|
||
|
|
content: 'Select Date';
|
||
|
|
width: 100%;
|
||
|
|
background: url('./images/calendar.svg') no-repeat 99% 5px;
|
||
|
|
height: 36px;
|
||
|
|
font-size: 16px;
|
||
|
|
border: 0;
|
||
|
|
position: absolute;
|
||
|
|
left: 0px;
|
||
|
|
top: 0px;
|
||
|
|
color: #FFF;
|
||
|
|
line-height: 36px;
|
||
|
|
background-size: 22px;
|
||
|
|
}
|
||
|
|
input[type=time]{
|
||
|
|
position: relative;
|
||
|
|
font-size: 0;
|
||
|
|
height: 28px;
|
||
|
|
}
|
||
|
|
input[type=time]::-webkit-calendar-picker-indicator {
|
||
|
|
bottom: 0;
|
||
|
|
color: transparent;
|
||
|
|
cursor: pointer;
|
||
|
|
height: auto;
|
||
|
|
left: 0;
|
||
|
|
opacity: 0;
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
width: 100%
|
||
|
|
}
|
||
|
|
input[type=time]:before{
|
||
|
|
content: 'Select Time Slot';
|
||
|
|
width: 100%;
|
||
|
|
background: url('images/time-picker.png') no-repeat 96% 4px;
|
||
|
|
height: 28px;
|
||
|
|
font-size: 13px;
|
||
|
|
border: 0;
|
||
|
|
position: absolute;
|
||
|
|
left: 0px;
|
||
|
|
top: 0px;
|
||
|
|
color: #FFF;
|
||
|
|
line-height: 28px;
|
||
|
|
background-size: 18px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-scroll-center{
|
||
|
|
overflow: auto;
|
||
|
|
}
|
||
|
|
.card .card-body.create-new-walk-popup{
|
||
|
|
padding:1.5rem;
|
||
|
|
}
|
||
|
|
.create-new-walk-popup .forms-sample{
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
//justify-content: space-between;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.form-scroll-center{
|
||
|
|
width: 100%;
|
||
|
|
display: block !important;
|
||
|
|
}
|
||
|
|
#datePicker{
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
.selectedDatesContainer{
|
||
|
|
gap: 3.5%;
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
.selectedDatesContainer .dateGroup, .chip {
|
||
|
|
height: auto;
|
||
|
|
background: #653DAB 0% 0% no-repeat padding-box;
|
||
|
|
border: 1px solid #D0B7FF;
|
||
|
|
border-radius: 10px;
|
||
|
|
color: whitesmoke;
|
||
|
|
text-align: center;
|
||
|
|
opacity: 1;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
padding: 10px 20px;
|
||
|
|
width: 31%;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.selectedDatesContainer .dateGroup .chip{
|
||
|
|
width: 43%;
|
||
|
|
float: left;
|
||
|
|
margin: 0 3% 8px;
|
||
|
|
display: flex;
|
||
|
|
padding: 5px 10px;
|
||
|
|
font-size: 13px;
|
||
|
|
align-items: center;
|
||
|
|
line-height: 16px;
|
||
|
|
}
|
||
|
|
.selectedDatesContainer .dateGroup .deleteButton{
|
||
|
|
background: url('images/delete-datecard.svg') no-repeat;
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
background-size: cover;
|
||
|
|
font-size: 0;
|
||
|
|
border: 0;
|
||
|
|
position: absolute;
|
||
|
|
right: 3px;
|
||
|
|
top: 3px;
|
||
|
|
}
|
||
|
|
.selectedDatesContainer .dateGroup .chip{
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.selectedDatesContainer .dateGroup .chip button{
|
||
|
|
background: url('images/delete-chips.svg') no-repeat;
|
||
|
|
width: 17px;
|
||
|
|
height: 17px;
|
||
|
|
background-size: cover;
|
||
|
|
font-size: 0;
|
||
|
|
border: 0;
|
||
|
|
position: absolute;
|
||
|
|
right: 3px;
|
||
|
|
top: 3px;
|
||
|
|
|
||
|
|
}
|
||
|
|
.form-group .dateGroup .datewalk {
|
||
|
|
font-size:1rem;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.form-group .timeslot{
|
||
|
|
margin:0;
|
||
|
|
font-size: 13px;
|
||
|
|
}
|
||
|
|
.timePicker {
|
||
|
|
width: 100%;
|
||
|
|
height: auto;
|
||
|
|
background: #653DAB 0% 0% no-repeat padding-box;
|
||
|
|
border: 1px solid #D0B7FF;
|
||
|
|
border-radius: 10px;
|
||
|
|
color: whitesmoke;
|
||
|
|
text-align: center;
|
||
|
|
opacity: 1;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
}
|
||
|
|
.preview1 {
|
||
|
|
height: 60px;
|
||
|
|
width: 40px;
|
||
|
|
|
||
|
|
cursor: pointer;
|
||
|
|
border-radius: 10px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.addpoi {
|
||
|
|
width: 80%;
|
||
|
|
height: 55px;
|
||
|
|
background: transparent linear-gradient(180deg, #92BEFF 0%, #6313DC 100%) 0% 0% no-repeat padding-box;
|
||
|
|
box-shadow: 0px 3px 12px #848cf4c4;
|
||
|
|
border-radius: 21px;
|
||
|
|
opacity: 1;
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
font-size: 14px;
|
||
|
|
|
||
|
|
margin: 30px;
|
||
|
|
margin-top: -10px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.addtrivia {
|
||
|
|
width: 103px;
|
||
|
|
height: 43px;
|
||
|
|
background: transparent linear-gradient(180deg, #92BEFF 0%, #6313DC 100%) 0% 0% no-repeat padding-box;
|
||
|
|
box-shadow: 0px 3px 12px #848CF4C4;
|
||
|
|
border-radius: 21px;
|
||
|
|
opacity: 1;
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
|
||
|
|
font-family: 'Heebo', sans-serif !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.swal-icon--success__line {
|
||
|
|
background: transparent linear-gradient(180deg, #FF6959 0%, #FBAA7B 100%) 0% 0% no-repeat padding-box;
|
||
|
|
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.swal-icon--success__ring {
|
||
|
|
border: 1px solid #FBAA7B;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-publish:hover {
|
||
|
|
background: transparent linear-gradient(180deg, #FF6959 0%, #FBAA7B 100%) 0% 0% no-repeat padding-box;
|
||
|
|
color: white;
|
||
|
|
opacity: 1;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-publish {
|
||
|
|
border: 1px solid #FBAA7B;
|
||
|
|
color: #FBAA7B;
|
||
|
|
opacity: 1;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.swal-title {
|
||
|
|
color: #FBAA7B;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.swal-modal {
|
||
|
|
width: 300px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Trivia css */
|
||
|
|
.trivia {
|
||
|
|
background: whitesmoke;
|
||
|
|
box-shadow: 0px 3px 3px whitesmoke;
|
||
|
|
border-radius: 51px;
|
||
|
|
opacity: 1;
|
||
|
|
height: 450px;
|
||
|
|
width: 400px;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
#triviadetail {
|
||
|
|
margin: 10px;
|
||
|
|
overflow-y: scroll;
|
||
|
|
|
||
|
|
width: 280px;
|
||
|
|
height: 250px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Map Creation css */
|
||
|
|
.map {
|
||
|
|
background: transparent linear-gradient(355deg, #E45B9A 0%, #C561B9 39%, #5145B9 78%, #2122AE 100%) 0% 0% no-repeat padding-box;
|
||
|
|
box-shadow: 0px 3px 30px #4D0D7D96;
|
||
|
|
border-radius: 51px;
|
||
|
|
opacity: 1;
|
||
|
|
width: 900px;
|
||
|
|
height: 620px;
|
||
|
|
margin: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.close {
|
||
|
|
cursor: pointer;
|
||
|
|
border-radius: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.close:hover {
|
||
|
|
transition-timing-function: ease-in;
|
||
|
|
transition: 0.25s;
|
||
|
|
border: 1px solid #D0B7FF;
|
||
|
|
border-radius: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#listcategory {
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.h3styl {
|
||
|
|
text-align: right;
|
||
|
|
|
||
|
|
font-family: 'Heebo', sans-serif !important;
|
||
|
|
font-size: 20px;
|
||
|
|
font-weight: 900;
|
||
|
|
letter-spacing: 0.09px;
|
||
|
|
color: #5E48B9;
|
||
|
|
opacity: 0.8;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.h3sty {
|
||
|
|
text-align: left;
|
||
|
|
font-family: 'Heebo', sans-serif !important;
|
||
|
|
font-size: 25px;
|
||
|
|
font-weight: 700;
|
||
|
|
letter-spacing: 0.09px;
|
||
|
|
color: #5E48B9;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button {
|
||
|
|
background: transparent linear-gradient(180deg, #FF6959 0%, #FBAA7B 100%) 0% 0% no-repeat padding-box;
|
||
|
|
border-radius: 15px;
|
||
|
|
text-align: center;
|
||
|
|
opacity: 1;
|
||
|
|
width: 100%;
|
||
|
|
height: 60px;
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.vh-100 {
|
||
|
|
height: 80vh !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button:hover {
|
||
|
|
transition-timing-function: ease-in;
|
||
|
|
|
||
|
|
transition: 0.4s;
|
||
|
|
box-shadow: 0px 5px 12px #FBAA7B;
|
||
|
|
}
|
||
|
|
|
||
|
|
.image {
|
||
|
|
height: 40px;
|
||
|
|
width: 40px;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
display: inline;
|
||
|
|
}
|
||
|
|
|
||
|
|
.input {
|
||
|
|
|
||
|
|
width: 100%;
|
||
|
|
height: 35px;
|
||
|
|
background: #653DAB 0% 0% no-repeat padding-box;
|
||
|
|
|
||
|
|
border: 1px solid #D0B7FF;
|
||
|
|
;
|
||
|
|
border-radius: 10px;
|
||
|
|
color: whitesmoke;
|
||
|
|
text-align: center;
|
||
|
|
opacity: 0.7;
|
||
|
|
}
|
||
|
|
|
||
|
|
.input:hover {
|
||
|
|
transition-timing-function: ease-in;
|
||
|
|
|
||
|
|
transition: 0.25s;
|
||
|
|
border: 2px solid #D0B7FF;
|
||
|
|
box-shadow: 0px 5px 12px #00000017;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.input::placeholder {
|
||
|
|
text-align: center;
|
||
|
|
color: lightgray;
|
||
|
|
}
|
||
|
|
|
||
|
|
.preview {
|
||
|
|
height: 120px;
|
||
|
|
width: 120px;
|
||
|
|
cursor: pointer;
|
||
|
|
border-radius: 0px;
|
||
|
|
margin-left: 20px
|
||
|
|
}
|
||
|
|
|
||
|
|
.selected {
|
||
|
|
height: 200px;
|
||
|
|
margin-top: -45px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.maplatlng {
|
||
|
|
width: 46px;
|
||
|
|
height: 46px;
|
||
|
|
background: transparent linear-gradient(180deg, #FF6959 0%, #FBAA7B 100%) 0% 0% no-repeat padding-box;
|
||
|
|
box-shadow: 0px 5px 12px #FBAA7B;
|
||
|
|
border: none;
|
||
|
|
border-radius: 10px;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dataTables_wrapper .dataTables_processing {
|
||
|
|
width: 100vw;
|
||
|
|
/*height: 100vh;*/
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
z-index: 1;
|
||
|
|
/*background: rgba(0, 0, 0, 0.7);*/
|
||
|
|
}
|
||
|
|
|
||
|
|
table.dataTable tbody tr.selected {
|
||
|
|
background-color: #B0BED9 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
tfoot input {
|
||
|
|
width: 100%;
|
||
|
|
padding: 3px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.loader {
|
||
|
|
position: fixed;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.license-filter {
|
||
|
|
/*float: right;
|
||
|
|
width: 17rem;*/
|
||
|
|
margin-right: 1px;
|
||
|
|
margin-bottom: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.table-header {
|
||
|
|
padding-top: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-capsule {
|
||
|
|
display: inline-block;
|
||
|
|
padding: 0px 10px;
|
||
|
|
font-size: 12px;
|
||
|
|
border-radius: 10px;
|
||
|
|
text-transform: uppercase;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
#example_filter {
|
||
|
|
float: left;
|
||
|
|
margin-bottom: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#example_filter input[type=search] {
|
||
|
|
width: 30rem;
|
||
|
|
margin-right: 0.7rem;
|
||
|
|
border-radius: 1.5rem;
|
||
|
|
/*float: right;
|
||
|
|
margin-left: 10px;*/
|
||
|
|
}
|
||
|
|
|
||
|
|
.content-wrapper {
|
||
|
|
padding: 0px;
|
||
|
|
padding-top: 5px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.mapboxgl-ctrl-top-right {
|
||
|
|
margin-right: 4.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mapboxgl-ctrl-bottom-right {
|
||
|
|
margin-right: 4.5rem;
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mapboxgl-ctrl-bottom-left,
|
||
|
|
.mapboxgl-ctrl-bottom-right,
|
||
|
|
.mapboxgl-ctrl-top-left,
|
||
|
|
.mapboxgl-ctrl-top-right {
|
||
|
|
z-index: 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 991px) {
|
||
|
|
#example_filter input[type=search] {
|
||
|
|
width: 14rem;
|
||
|
|
/*float: right;
|
||
|
|
margin-left: 10px;*/
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media only screen and (max-width:768px) {
|
||
|
|
.cate {
|
||
|
|
overflow-y: scroll;
|
||
|
|
}
|
||
|
|
|
||
|
|
.selected {
|
||
|
|
margin-top: -35px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.preview {
|
||
|
|
margin-left: 0px
|
||
|
|
}
|
||
|
|
|
||
|
|
.card {
|
||
|
|
width: 400px;
|
||
|
|
margin-left: 0px
|
||
|
|
}
|
||
|
|
|
||
|
|
.profile {
|
||
|
|
position: relative;
|
||
|
|
left: 550px;
|
||
|
|
top: -310px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card1 {
|
||
|
|
position: relative;
|
||
|
|
left: 100px;
|
||
|
|
width: 630px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.but {
|
||
|
|
width: 200px;
|
||
|
|
position: relative;
|
||
|
|
left: -5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.profile {
|
||
|
|
position: relative;
|
||
|
|
left: 550px;
|
||
|
|
top: -330px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.mapname {
|
||
|
|
width: 252px;
|
||
|
|
height: auto;
|
||
|
|
border-radius: 45px;
|
||
|
|
background: #ECE8F2 0% 0% no-repeat padding-box;
|
||
|
|
border-radius: 0px 35px 0px 0px;
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
|
||
|
|
.info-box1 {
|
||
|
|
position: absolute;
|
||
|
|
top: 7%;
|
||
|
|
left: 515px;
|
||
|
|
width: 250px;
|
||
|
|
height: 950px;
|
||
|
|
background: white 0% 0% no-repeat padding-box;
|
||
|
|
box-shadow: 3px 0px 6px #9169C22E;
|
||
|
|
border: 0.5px solid #ECE8F2;
|
||
|
|
border-radius: 45px 0px 0px 0px;
|
||
|
|
opacity: 0.6;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-trivia {
|
||
|
|
position: absolute;
|
||
|
|
top: -310px;
|
||
|
|
left: 260px;
|
||
|
|
width: 95px;
|
||
|
|
height: 33px;
|
||
|
|
background: transparent linear-gradient(180deg, #92BEFF 0%, #6313DC 100%) 0% 0% no-repeat padding-box;
|
||
|
|
box-shadow: 0px 3px 12px #848CF4C4;
|
||
|
|
border-radius: 21px;
|
||
|
|
border: none;
|
||
|
|
opacity: 1;
|
||
|
|
color: #FFFFFF;
|
||
|
|
font-size: 14px;
|
||
|
|
font-family: 'Heebo', sans-serif !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-Map {
|
||
|
|
position: absolute;
|
||
|
|
top: -310px;
|
||
|
|
left: 360px;
|
||
|
|
width: 95px;
|
||
|
|
height: 33px;
|
||
|
|
background: transparent linear-gradient(180deg, #92BEFF 0%, #6313DC 100%) 0% 0% no-repeat padding-box;
|
||
|
|
box-shadow: 0px 3px 12px #848CF4C4;
|
||
|
|
border-radius: 21px;
|
||
|
|
border: none;
|
||
|
|
opacity: 1;
|
||
|
|
color: #FFFFFF;
|
||
|
|
font-size: 14px;
|
||
|
|
font-family: 'Heebo', sans-serif !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-save {
|
||
|
|
position: absolute;
|
||
|
|
top: -310px;
|
||
|
|
left: 460px;
|
||
|
|
width: 95px;
|
||
|
|
height: 33px;
|
||
|
|
background: transparent linear-gradient(180deg, #FF6959 0%, #FBAA7B 100%) 0% 0% no-repeat padding-box;
|
||
|
|
box-shadow: 0px 3px 12px #FBAA7B;
|
||
|
|
border: none;
|
||
|
|
border-radius: 21px;
|
||
|
|
opacity: 1;
|
||
|
|
color: #FFFFFF;
|
||
|
|
font-size: 14px;
|
||
|
|
font-family: 'Heebo', sans-serif !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
#poi {
|
||
|
|
margin: 0;
|
||
|
|
overflow-y: scroll;
|
||
|
|
|
||
|
|
width: 230px;
|
||
|
|
height: auto;
|
||
|
|
padding:0 30px 30px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.poi {
|
||
|
|
width: 210px;
|
||
|
|
text-align: left;
|
||
|
|
cursor: pointer;
|
||
|
|
min-width: 56px;
|
||
|
|
max-width: auto;
|
||
|
|
|
||
|
|
margin-top: 5px;
|
||
|
|
|
||
|
|
background: #EBE1FF 0% 0% no-repeat padding-box;
|
||
|
|
box-shadow: 0px 3px 6px #00000017;
|
||
|
|
border: 1px solid #6A40BF;
|
||
|
|
border-radius: 51px;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.delete-poi-icon{
|
||
|
|
width: 20px;
|
||
|
|
height: 18px;
|
||
|
|
padding: 0;
|
||
|
|
outline: none;
|
||
|
|
border: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
background-color: transparent;
|
||
|
|
cursor: pointer;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
.poi .delete-poi-icon{
|
||
|
|
visibility: hidden;
|
||
|
|
margin: 5px 0 0px 0;
|
||
|
|
position: absolute;
|
||
|
|
z-index: 999;
|
||
|
|
width: 18px;
|
||
|
|
}
|
||
|
|
.poi:hover .delete-poi-icon{
|
||
|
|
visibility: visible;
|
||
|
|
}
|
||
|
|
.addpoilist {
|
||
|
|
width: auto;
|
||
|
|
height: 40px;
|
||
|
|
background: transparent linear-gradient(180deg, #92BEFF 0%, #6313DC 100%) 0% 0% no-repeat padding-box;
|
||
|
|
box-shadow: 0px 3px 12px #848cf4c4;
|
||
|
|
border-radius: 21px;
|
||
|
|
opacity: 1;
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
font-size: 14px;
|
||
|
|
margin: 0;
|
||
|
|
padding: 4px 24px;
|
||
|
|
}
|
||
|
|
.way-text{
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.audio-tag{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 3px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
width: 97%;
|
||
|
|
}
|
||
|
|
#audiourl{
|
||
|
|
width: 100%;
|
||
|
|
height: 50px;
|
||
|
|
}
|
||
|
|
.poibutton{
|
||
|
|
height: auto !important;
|
||
|
|
margin-top: 7px;
|
||
|
|
padding: 9px 7px;
|
||
|
|
background: #EBE1FF 0% 0% no-repeat padding-box;
|
||
|
|
box-shadow: 0px 3px 6px #00000017;
|
||
|
|
border: 1px solid #6A40BF;
|
||
|
|
border-radius: 51px;
|
||
|
|
outline: 1px solid transparent;
|
||
|
|
}
|
||
|
|
.poi:hover {
|
||
|
|
border: 0;
|
||
|
|
box-shadow: none;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.poibutton:hover {
|
||
|
|
border: 1px solid #6A40BF;
|
||
|
|
box-shadow: 3px 3px 6px #00000017;
|
||
|
|
outline: 1px solid #6A40BF;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<style>
|
||
|
|
#pencet1 {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
#pencet1 span {
|
||
|
|
background-color: #52b56d;
|
||
|
|
width: 0.8em;
|
||
|
|
height: .1em;
|
||
|
|
margin: 0.15em 0;
|
||
|
|
display: block;
|
||
|
|
transition: all .4s ease;
|
||
|
|
transform-origin: 0 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
#pencet2 {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
#pencet2 span {
|
||
|
|
background-color: #52b56d;
|
||
|
|
width: 0.6em;
|
||
|
|
height: .08em;
|
||
|
|
margin: 0.12em 0;
|
||
|
|
display: block;
|
||
|
|
transition: all .4s ease;
|
||
|
|
transform-origin: 0 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.Diam span:nth-child(1) {
|
||
|
|
transform: rotate(45deg) translate(0px, -3px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.Diam span:nth-child(2) {
|
||
|
|
Transform: scaleX(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
.Diam span:nth-child(3) {
|
||
|
|
transform: rotate(-45deg) translate(1px, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
nav {
|
||
|
|
background-color: white;
|
||
|
|
width: 100%;
|
||
|
|
padding: 10px;
|
||
|
|
height: 70px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mapboxgl-ctrl-bottom-right,
|
||
|
|
.mapboxgl-ctrl-top-right {
|
||
|
|
margin-right: 1.0rem;
|
||
|
|
}
|
||
|
|
.input.preview1{
|
||
|
|
position: relative;
|
||
|
|
transition: width 2s;
|
||
|
|
}
|
||
|
|
.img-overlay{
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-color:rgb(0 0 0 / 75%);
|
||
|
|
border-radius: 10px;
|
||
|
|
display: none;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 14px;
|
||
|
|
padding: 5px;
|
||
|
|
z-index: 99;
|
||
|
|
transition: width 2s;
|
||
|
|
}
|
||
|
|
.thumbnail-sec:hover .img-overlay{
|
||
|
|
display: flex;
|
||
|
|
gap:5px;
|
||
|
|
}
|
||
|
|
.thumbnail-sec:hover .img-overlay .see{
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.input.preview1 img{
|
||
|
|
object-fit: cover;
|
||
|
|
}
|
||
|
|
.Slider-thumbnail{
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.Slider-thumbnail .remove {
|
||
|
|
width: 22px;
|
||
|
|
height: 22px;
|
||
|
|
padding: 0;
|
||
|
|
outline: none;
|
||
|
|
border: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
background-color: transparent;
|
||
|
|
cursor: pointer;
|
||
|
|
margin: 0;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
pointer-events: auto;
|
||
|
|
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzIgMzIiIGlkPSJHbHlwaCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik02LDEydjE1YzAsMS42NTQsMS4zNDYsMywzLDNoMTRjMS42NTQsMCwzLTEuMzQ2LDMtM1YxMkg2eiBNMTIsMjVjMCwwLjU1Mi0wLjQ0OCwxLTEsMXMtMS0wLjQ0OC0xLTF2LTkgIGMwLTAuNTUyLDAuNDQ4LTEsMS0xczEsMC40NDgsMSwxVjI1eiBNMTcsMjVjMCwwLjU1Mi0wLjQ0OCwxLTEsMXMtMS0wLjQ0OC0xLTF2LTljMC0wLjU1MiwwLjQ0OC0xLDEtMXMxLDAuNDQ4LDEsMVYyNXogTTIyLDI1ICBjMCwwLjU1Mi0wLjQ0OCwxLTEsMXMtMS0wLjQ0OC0xLTF2LTljMC0wLjU1MiwwLjQ0OC0xLDEtMXMxLDAuNDQ4LDEsMVYyNXoiIGlkPSJYTUxJRF8yMzdfIi8+PHBhdGggZD0iTTI3LDZoLTZWNWMwLTEuNjU0LTEuMzQ2LTMtMy0zaC00Yy0xLjY1NCwwLTMsMS4zNDYtMywzdjFINUMzLjg5Nyw2LDMsNi44OTcsMyw4djFjMCwwLjU1MiwwLjQ0OCwxLDEsMWgyNCAgYzAuNTUyLDAsMS0wLjQ0OCwxLTFWOEMyOSw2Ljg5NywyOC4xMDMsNiwyNyw2eiBNMTMsNWMwLTAuNTUxLDAuNDQ5LTEsMS0xaDRjMC41NTEsMCwxLDAuNDQ5LDEsMXYxaC02VjV6IiBpZD0iWE1MSURfMjQzXyIvPjwvc3ZnPg==);
|
||
|
|
visibility: hidden;
|
||
|
|
margin: 5px 0 0px 0;
|
||
|
|
position: absolute;
|
||
|
|
z-index: 999;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
z-index: 999;
|
||
|
|
font-size: 0;
|
||
|
|
background-color: #ccc;
|
||
|
|
color: #0757d7;
|
||
|
|
padding: 5px;
|
||
|
|
border-radius: 100%;
|
||
|
|
background-size: 13px;
|
||
|
|
}
|
||
|
|
.Slider-thumbnail:hover .remove {
|
||
|
|
visibility: visible;
|
||
|
|
}
|
||
|
|
.form-main {
|
||
|
|
display: flex;
|
||
|
|
gap: 30px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script src='https://code.jquery.com/jquery-3.3.1.js'></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
|
||
|
|
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
|
||
|
|
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
|
||
|
|
<script src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
|
||
|
|
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.bootstrap4.min.js"></script>
|
||
|
|
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.print.min.js"></script>
|
||
|
|
<script src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
|
||
|
|
<script
|
||
|
|
src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
|
||
|
|
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>
|
||
|
|
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.print.min.js"></script>
|
||
|
|
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.colVis.min.js"></script>
|
||
|
|
<script src="//cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.js"></script>
|
||
|
|
<script src="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js"></script>
|
||
|
|
<link href="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css" rel="stylesheet" />
|
||
|
|
<script
|
||
|
|
src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.min.js"></script>
|
||
|
|
<link rel="stylesheet"
|
||
|
|
href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.css"
|
||
|
|
type="text/css" />
|
||
|
|
<link rel="stylesheet" href="css/main.css" type="text/css" />
|
||
|
|
<!-- Promise polyfill script required to use Mapbox GL Geocoder in IE 11 -->
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
|
||
|
|
<script src="https://npmcdn.com/@turf/turf@5.1.6/turf.min.js"></script>
|
||
|
|
<script>
|
||
|
|
$(document).ready(function () {
|
||
|
|
|
||
|
|
/*$.ajax({
|
||
|
|
method: "POST",
|
||
|
|
url: "/api/newOrganisationStructure1",
|
||
|
|
data: {
|
||
|
|
orgId:"ensotest"
|
||
|
|
},
|
||
|
|
success:(data) => {
|
||
|
|
console.log(data);
|
||
|
|
},
|
||
|
|
error: (data) => {
|
||
|
|
console.log(data);
|
||
|
|
}
|
||
|
|
});*/
|
||
|
|
|
||
|
|
/* $.ajax({
|
||
|
|
type: "POST",
|
||
|
|
url: "/api/getallprocesses",
|
||
|
|
data: {
|
||
|
|
orgId : "btftest"
|
||
|
|
},
|
||
|
|
success:(data) => {
|
||
|
|
console.log(data);
|
||
|
|
},
|
||
|
|
error: (data) => {
|
||
|
|
console.log(data);
|
||
|
|
}
|
||
|
|
});*/
|
||
|
|
|
||
|
|
/*$.ajax({
|
||
|
|
type: "POST",
|
||
|
|
url: "/api/getallmanagerprocesses",
|
||
|
|
data: {
|
||
|
|
orgId : "ensotest"
|
||
|
|
},
|
||
|
|
success:(data) => {
|
||
|
|
console.log(data);
|
||
|
|
},
|
||
|
|
error: (data) => {
|
||
|
|
console.log(data);
|
||
|
|
}
|
||
|
|
});*/
|
||
|
|
|
||
|
|
});
|
||
|
|
setTimeout(function () {
|
||
|
|
if (window.location.hash != '#r') {
|
||
|
|
window.location.hash = 'r';
|
||
|
|
window.location.reload(1);
|
||
|
|
}
|
||
|
|
}, 100);
|
||
|
|
</script>
|
||
|
|
<script>
|
||
|
|
$(document).ready(function () {
|
||
|
|
const clickx1 = document.getElementById('pencet1');
|
||
|
|
const clickx2 = document.getElementById('pencet2');
|
||
|
|
clickx1.addEventListener('click', function () {
|
||
|
|
clickx1.classList.toggle('Diam');
|
||
|
|
});
|
||
|
|
clickx2.addEventListener('click', function () {
|
||
|
|
clickx2.classList.toggle('Diam');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div class="container-scroller">
|
||
|
|
<nav class="navbar navbar-expand-lg ">
|
||
|
|
<div class="container-fluid">
|
||
|
|
<a class="navbar-brand" href="/walklist"><img src="images/LogoFulldark.png" height="50px" width="50px"
|
||
|
|
style="margin-left: 10px;" /></a>
|
||
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText"
|
||
|
|
aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
|
||
|
|
<span class="navbar-toggler-icon"></span>
|
||
|
|
</button>
|
||
|
|
<div class="collapse navbar-collapse" id="navbarText">
|
||
|
|
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||
|
|
<li class="nav-item">
|
||
|
|
|
||
|
|
<div class="d-flex align-items-center">
|
||
|
|
<div>
|
||
|
|
<a href="/walklist"><button class="btn-home"><img src="images/home-alt.svg" /></button></a>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<button class="btn-trivia" onclick="trivia()">Edit Trivia</button>
|
||
|
|
</div>
|
||
|
|
{{!-- <div class="col-md-1"></div> --}}
|
||
|
|
<div>
|
||
|
|
<button class="btn-Map " onclick="add_button()">Edit Map Details</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{{!-- <div class="col-md-1"></div> --}}
|
||
|
|
<div>
|
||
|
|
<button class="btn-Map " id="addpolyform" style="display:none">Add Polygon</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<span class="navbar-text">
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<ul class="navbar-nav ul">
|
||
|
|
|
||
|
|
<li class="nav-item dropdown profile">
|
||
|
|
|
||
|
|
<a class="nav-link arrow " id="userdetailsDropdown" href="#" data-toggle="dropdown">
|
||
|
|
<img src="images/Polygon 1.svg" width="16px" height="10px" />
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<h4 class="h4">{{loggedusername}}
|
||
|
|
|
||
|
|
</h4>
|
||
|
|
<div class="pic">
|
||
|
|
<img src="#" id="profile" height="40px" width="40px"
|
||
|
|
style="border-radius:50%;position:relative;top:-12px;left:-1px" />
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
var login = localStorage.getItem("login");
|
||
|
|
$('#profile').attr('src', `${login}`);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list"
|
||
|
|
aria-labelledby="userdetailsDropdown" style="position: relative;top:-20px">
|
||
|
|
<h6 style="background:#f6f6f6" class="p-3 mb-0">Account Details</h6>
|
||
|
|
<div class="dropdown-divider"></div>
|
||
|
|
<a class="dropdown-item preview-item">
|
||
|
|
<div class="preview-item-content">
|
||
|
|
<h6 class="preview-subject mb-1">Name: <span
|
||
|
|
style="color: #5E48B9;font-weight:normal;">{{loggedusername}} </span></h6>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<div class="dropdown-divider"></div>
|
||
|
|
<a class="dropdown-item preview-item" href="/banner">
|
||
|
|
<div class="preview-item-content">
|
||
|
|
<i class="mdi mdi-google-photos menu-icon"></i>
|
||
|
|
<span class="preview-subject mb-1" style="font-weight:bold;">Banner</span>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<div class="dropdown-divider"></div>
|
||
|
|
<a class="dropdown-item preview-item" href="/userlist">
|
||
|
|
<div class="preview-item-content">
|
||
|
|
<i class="mdi mdi-google-photos menu-icon"></i>
|
||
|
|
<span class="preview-subject mb-1" style="font-weight:bold;">User List</span>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<div class="dropdown-divider"></div>
|
||
|
|
<a class="dropdown-item preview-item" href="/feedback">
|
||
|
|
<div class="preview-item-content">
|
||
|
|
<i class="mdi mdi-google-photos menu-icon"></i>
|
||
|
|
<span class="preview-subject mb-1" style="font-weight:bold;">Feedback</span>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<div class="dropdown-divider"></div>
|
||
|
|
<a class="dropdown-item preview-item" id="logoutButton">
|
||
|
|
<div class="preview-item-content">
|
||
|
|
<i class="mdi mdi-logout menu-icon"></i>
|
||
|
|
<span class="preview-subject mb-1" style="font-weight:bold;">Logout</span>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<div class="content-wrapper">
|
||
|
|
|
||
|
|
|
||
|
|
<div class="confirmlogout">
|
||
|
|
<div style="background: none;">
|
||
|
|
<div class="card trivia">
|
||
|
|
<div class="card-body" style="margin:30px">
|
||
|
|
<form class="forms-sample">
|
||
|
|
<div class="form-group">
|
||
|
|
<div class="row">
|
||
|
|
|
||
|
|
<div class="col-md-8" style="text-align: center;">
|
||
|
|
<div id="confirmtriviaMessage" class="h3styl">Trivia</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-md-3"></div>
|
||
|
|
<div class="col-md-1">
|
||
|
|
<img src="images/close.svg" height="50px" width="50px" id="confirmNotrivia" class="close" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="form-group" id="triviadetail">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group" style="text-align: center;">
|
||
|
|
<button type="submit" class="addtrivia" id="confirmYestrivia">Save Trivia</button>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="confirm">
|
||
|
|
<div style="background: none; display: flex; justify-content: center; width: 100%;">
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="card map">
|
||
|
|
<div class="card-body" style="margin:30px">
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<form class="forms-sample">
|
||
|
|
<div class="form-group">
|
||
|
|
<div class="row" style="margin-top:-20px">
|
||
|
|
<div class="col-md-5">
|
||
|
|
<div id="confirmMessage" class="h3sty" style="color: #FFFFFF;">Organisation</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-5">
|
||
|
|
<label style="color: #9691D9;">MAP ID</label>
|
||
|
|
<p style="font: normal normal bold 15px/18px Raleway;letter-spacing: 1.84px;color: #FFFFFF;opacity: 1;"
|
||
|
|
id="mapid1">dfdsdfsfdsds</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-md-2">
|
||
|
|
<img src="images/close.svg" height="50px" width="50px" id="confirmNo" class="close" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="form-main">
|
||
|
|
<div>
|
||
|
|
<div class="row" style="margin-top: -30px;;">
|
||
|
|
|
||
|
|
<div class="col-md-9">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="exampleInputMapname1"
|
||
|
|
style="color:#FFFFFF;font-size:13px;text-transform: uppercase;">Map Name</label>
|
||
|
|
<br>
|
||
|
|
<input type="text" class="input" id="exampleInputMapname1" placeholder="Enter Map Name"
|
||
|
|
style="width: 100%">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-3" style="text-align: center;">
|
||
|
|
<div class="form-group">
|
||
|
|
|
||
|
|
<label for="exampleInputMapthumbnail1"
|
||
|
|
style="color:#FFFFFF;font-size:13px;text-transform: uppercase;">Add Map Icon</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-9">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="exampleInputMapdescription1"
|
||
|
|
style="color:#FFFFFF;font-size:13px;text-transform: uppercase;">Map Description</label>
|
||
|
|
<br>
|
||
|
|
<input type="text" class="input" id="exampleInputMapdescription1"
|
||
|
|
placeholder="Enter Map Description" style="width: 100%;">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-md-3" style="text-align: center;margin-top:-80px;margin-bottom:30px;">
|
||
|
|
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<input type='file' id="mapthumbnail" name="mapthumbnail" style="visibility: hidden;" />
|
||
|
|
<p type="button" class="input preview"
|
||
|
|
onclick="document.getElementById('mapthumbnail').click()"><img id="mapthum"
|
||
|
|
src="images/plus.svg" alt="your image" width="100%" height="100%"
|
||
|
|
style="pointer:cursor;" /></p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function readURL4(input) {
|
||
|
|
if (input.files && input.files[0]) {
|
||
|
|
var reader = new FileReader();
|
||
|
|
|
||
|
|
reader.onload = function (e) {
|
||
|
|
|
||
|
|
$('#mapthum').attr('src', e.target.result);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
reader.readAsDataURL(input.files[0]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
$("#mapthumbnail").change(function () {
|
||
|
|
readURL4(this);
|
||
|
|
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="col-md-5" style="margin-top: -45px;height:200px">
|
||
|
|
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="exampleInputMapcategory1"
|
||
|
|
style="color:#FFFFFF;font-size:13px;text-transform: uppercase;">Map Category</label>
|
||
|
|
<br>
|
||
|
|
<select class="input" id="exampleInputMapcategory1" name="exampleInputMapcategory1"
|
||
|
|
style="width:100%;height:200px;overflow:hidden;text-align:justify;padding:20px;cursor:pointer"
|
||
|
|
onclick="category()" multiple>
|
||
|
|
<option value="History">History</option>
|
||
|
|
<option value="Arts and Culture">Arts and Culture</option>
|
||
|
|
<option value="Architecture">Architecture</option>
|
||
|
|
<option value="Pop Culture">Pop Culture</option>
|
||
|
|
<option value="UNESCO World Heritage Sites">UNESCO World Heritage Sites</option>
|
||
|
|
</select>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-4 selected">
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="listcategory"
|
||
|
|
style="color:#FFFFFF;font-size:13px;text-transform: uppercase;">Selected Category</label>
|
||
|
|
<br>
|
||
|
|
|
||
|
|
<div class="input cate" style="height:200px;width:100%;text-align:left;padding-top:5px;">
|
||
|
|
<ul id="listcategory" style="list-style-type: none;overflow:hidden"> No Selected Categories
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
function getSelectValues(select) {
|
||
|
|
var result = [];
|
||
|
|
var options = select && select.options;
|
||
|
|
var opt;
|
||
|
|
|
||
|
|
for (var i = 0, iLen = options.length; i < iLen; i++) {
|
||
|
|
opt = options[i];
|
||
|
|
|
||
|
|
if (opt.selected) {
|
||
|
|
result.push(opt.value || opt.text);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return result;
|
||
|
|
}
|
||
|
|
function category() {
|
||
|
|
|
||
|
|
var el = document.getElementsByTagName('select')[0];
|
||
|
|
var listcategory = getSelectValues(el)
|
||
|
|
document.getElementById('listcategory').innerHTML = listcategory.map(value => `<li>${value}</li>`).join('');
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="col-md-3" style="text-align: center;margin-top:-40px">
|
||
|
|
|
||
|
|
<div class="form-group" style="margin-bottom:10px">
|
||
|
|
<label for="exampleInputMapPoi1"
|
||
|
|
style="color:#FFFFFF;font-size:13px;text-transform: uppercase;text-align:center">Total
|
||
|
|
Poi</label>
|
||
|
|
<input type="text" class="input" id="exampleInputMapPoi1" placeholder="Enter Value"
|
||
|
|
style="width: 120px;">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group" style="margin-bottom:10px">
|
||
|
|
<label for="exampleInputMapTrivia1"
|
||
|
|
style="color:#FFFFFF;font-size:13px;text-transform: uppercase;text-align:center">Total
|
||
|
|
Trivia</label>
|
||
|
|
<input type="text" class="input" id="exampleInputMapTrivia1" placeholder="Enter Value"
|
||
|
|
style="width: 120px;">
|
||
|
|
</div>
|
||
|
|
<div class="form-group" style="margin-bottom:10px">
|
||
|
|
<label for="exampleInputeditSortno1"
|
||
|
|
style="color:#FFFFFF;font-size:13px;text-transform: uppercase;text-align:center">Sort No
|
||
|
|
</label>
|
||
|
|
<input type="text" class="input" id="exampleInputeditSortno1" placeholder="Enter Value"
|
||
|
|
style="width: 120px;">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row" style="margin-top: 60px;margin-bottom:-70px">
|
||
|
|
<br>
|
||
|
|
<div class="col-md-4" style="text-align: center; margin-top:-20px">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="exampleInputMapLat1"
|
||
|
|
style="color:#FFFFFF;font-size:14px;text-transform: uppercase;text-align:center">Latitude</label>
|
||
|
|
<input type="number" step="any" class="input" id="exampleInputMapLat1" placeholder="LATITUDE">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-1"></div>
|
||
|
|
<div class="col-md-4" style="text-align: center;margin-top:-20px">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="exampleInputMapLong1"
|
||
|
|
style="color:#FFFFFF;font-size:14px;text-transform: uppercase;text-align:center">Longitude</label>
|
||
|
|
<input type="number" step="any" class="input" id="exampleInputMapLong1" placeholder="LONGITUDE">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="col-md-3" style="text-align:center;margin-top:-50px">
|
||
|
|
<button class="button" id="confirmYes" type="button"
|
||
|
|
style="height: 112px;width:130px;font-size:14px"><img class="image"
|
||
|
|
src="images/amblecreate.svg" /><br>UPDATE WALK </button>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style="width: 540px">
|
||
|
|
<div class="select-field">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="walkType" style="color:#FFFFFF;font-size:14px;text-transform: uppercase;">
|
||
|
|
Walk type</label>
|
||
|
|
<div class="form-check">
|
||
|
|
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2"
|
||
|
|
checked>
|
||
|
|
<label class="form-check-label" for="flexRadioDefault2"
|
||
|
|
style="color:#FFFFFF;font-size:14px;text-transform: uppercase;">
|
||
|
|
Self-Paced Walk
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="form-check">
|
||
|
|
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
|
||
|
|
<label class="form-check-label" for="flexRadioDefault1"
|
||
|
|
style="color:#FFFFFF;font-size:14px;text-transform: uppercase;">
|
||
|
|
Guided Walk
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="collapse-main">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="amountperperson"
|
||
|
|
style="color:#FFFFFF;font-size:14px;text-transform: uppercase;">
|
||
|
|
Amount per person </label>
|
||
|
|
<br>
|
||
|
|
<input type="text" class="input" id="amountperperson" placeholder="Amount per person"
|
||
|
|
style="width: 100%">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="maximumpersonallowed"
|
||
|
|
style="color:#FFFFFF;font-size:14px;text-transform: uppercase;">
|
||
|
|
Maximum person allowed </label>
|
||
|
|
<br>
|
||
|
|
<input type="text" class="input" id="maximumpersonallowed"
|
||
|
|
placeholder="Maximum person allowed" style="width: 100%">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="durationofwalk"
|
||
|
|
style="color:#FFFFFF;font-size:14px;text-transform: uppercase;">
|
||
|
|
Duration of Walk</label>
|
||
|
|
<br>
|
||
|
|
<input type="text" class="input" id="durationofwalk"
|
||
|
|
placeholder="Duration of Walk" style="width: 100%">
|
||
|
|
</div>
|
||
|
|
<div class="col-md-3" style="text-align:center;margin-top:0px">
|
||
|
|
<button class="button" id="confirmYes2" type="button"
|
||
|
|
style="height: 95px;width:125px;font-size:14px"><img class="image"
|
||
|
|
src="images/amblecreate.svg" /><br>UPDATE & NEXT </button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="confirm-guided">
|
||
|
|
<div style="background: none; width: 100%">
|
||
|
|
<div class="card map">
|
||
|
|
<div class="card-body create-new-walk-popup" style="margin:20px">
|
||
|
|
<form class="forms-sample ">
|
||
|
|
<div class="form-group">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-5">
|
||
|
|
<div id="confirmMessage1" class="h3sty" style="color: #FFFFFF;">Map Details</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-5">
|
||
|
|
<label style="color: #9691D9;">MAP ID</label>
|
||
|
|
<p style="font: normal normal bold 15px/18px Raleway;letter-spacing: 1.84px;color: #FFFFFF;opacity: 1;" id="mapid">1694956680</p>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-2">
|
||
|
|
<img src="images/close.svg" height="50px" width="50px" id="confirmNo2" class="close" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-main form-scroll-center">
|
||
|
|
<div class="form-group">
|
||
|
|
<br>
|
||
|
|
<input type="date" class="input" id="datePicker" placeholder="">
|
||
|
|
<input type="hidden" name="" id="finalvalue" >
|
||
|
|
<div class="selectedDatesContainer" id="selectedDatesContainer"></div>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
var today = new Date();
|
||
|
|
var dd = today.getDate();
|
||
|
|
var mm = today.getMonth() + 1; // January is 0
|
||
|
|
var yyyy = today.getFullYear();
|
||
|
|
|
||
|
|
if (dd < 10) {
|
||
|
|
dd = '0' + dd;
|
||
|
|
}
|
||
|
|
if (mm < 10) {
|
||
|
|
mm = '0' + mm;
|
||
|
|
}
|
||
|
|
today = yyyy + '-' + mm + '-' + dd;
|
||
|
|
|
||
|
|
// Set min attribute to today's date
|
||
|
|
document.getElementById('datePicker').setAttribute('min', today);
|
||
|
|
|
||
|
|
|
||
|
|
var datePicker = document.getElementById('datePicker');
|
||
|
|
var selectedDatesContainer = document.getElementById('selectedDatesContainer');
|
||
|
|
|
||
|
|
// Function to format the selected date in "dd-mm-yyyy" format
|
||
|
|
function formatDate(dateString) {
|
||
|
|
var dateParts = dateString.split('-');
|
||
|
|
var day = dateParts[2];
|
||
|
|
var month = dateParts[1];
|
||
|
|
var year = dateParts[0];
|
||
|
|
return day + '-' + month + '-' + year;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Function to format time in 12-hour format with AM or PM
|
||
|
|
function formatTime12Hours(timeString) {
|
||
|
|
var timeParts = timeString.split(':');
|
||
|
|
var hours = parseInt(timeParts[0]);
|
||
|
|
var minutes = timeParts[1];
|
||
|
|
var period = hours >= 12 ? 'PM' : 'AM';
|
||
|
|
hours = hours % 12 || 12; // Convert hours to 12-hour format
|
||
|
|
return hours + ':' + minutes + ' ' + period;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Function to create and append a new label for the selected date
|
||
|
|
function addSelectedDateGroup(selectedDate) {
|
||
|
|
|
||
|
|
let dateFormatted = formatDate(selectedDate);
|
||
|
|
let dateGroup = {
|
||
|
|
"date": [dateFormatted],
|
||
|
|
"time_slots": []
|
||
|
|
};
|
||
|
|
|
||
|
|
var count = 0;
|
||
|
|
|
||
|
|
var dateGroupElement = document.createElement('div');
|
||
|
|
dateGroupElement.className = 'dateGroup';
|
||
|
|
|
||
|
|
var label = document.createElement('label');
|
||
|
|
label.className = 'datewalk';
|
||
|
|
label.textContent = dateFormatted;
|
||
|
|
dateGroupElement.appendChild(label);
|
||
|
|
|
||
|
|
var deleteButton = document.createElement('button');
|
||
|
|
deleteButton.textContent = '❌';
|
||
|
|
deleteButton.className = 'deleteButton';
|
||
|
|
deleteButton.onclick = function($event) {
|
||
|
|
selectedDates.delete(selectedDate)
|
||
|
|
dateGroupElement.remove();
|
||
|
|
};
|
||
|
|
|
||
|
|
dateGroupElement.appendChild(deleteButton);
|
||
|
|
|
||
|
|
var timePicker = document.createElement('input');
|
||
|
|
timePicker.type = 'time';
|
||
|
|
timePicker.className = 'timePicker';
|
||
|
|
timePicker.placeholder = 'Select Time';
|
||
|
|
|
||
|
|
timePicker.addEventListener('change', function() {
|
||
|
|
|
||
|
|
// Add the selected time to the time_slots array
|
||
|
|
dateGroup.time_slots.push(formatTime12Hours(timePicker.value));
|
||
|
|
|
||
|
|
var chip = document.createElement('div');
|
||
|
|
chip.className = 'chip'; // Adding chip class
|
||
|
|
|
||
|
|
var chipLabel = document.createElement('label');
|
||
|
|
chipLabel.className = 'timeslot'; // Adding timeslot class
|
||
|
|
chipLabel.textContent = formatTime12Hours(timePicker.value);
|
||
|
|
|
||
|
|
chip.appendChild(chipLabel);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// Create a delete button for the chip element
|
||
|
|
var chipDeleteButton = document.createElement('button');
|
||
|
|
chipDeleteButton.textContent = '❌';
|
||
|
|
chipDeleteButton.onclick = function() {
|
||
|
|
// Remove the chip element
|
||
|
|
chip.remove();
|
||
|
|
// Remove the selected time from the time_slots array
|
||
|
|
var index = dateGroup.time_slots.indexOf(chip.textContent);
|
||
|
|
if (index !== -1) {
|
||
|
|
dateGroup.time_slots.splice(index, 1);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// Append the delete button to the chip element
|
||
|
|
chip.appendChild(chipDeleteButton);
|
||
|
|
|
||
|
|
// Find or create the time-section element for grouping chips
|
||
|
|
var timeSection = dateGroupElement.querySelector('.time-section');
|
||
|
|
if (!timeSection) {
|
||
|
|
timeSection = document.createElement('div');
|
||
|
|
timeSection.className = 'time-section';
|
||
|
|
dateGroupElement.appendChild(timeSection);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Append the chip element to the time section
|
||
|
|
timeSection.appendChild(chip);
|
||
|
|
|
||
|
|
console.log("dateGroup", dateGroup);
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
// Append elements to the date group container
|
||
|
|
dateGroupElement.appendChild(label);
|
||
|
|
dateGroupElement.appendChild(timePicker);
|
||
|
|
|
||
|
|
// Append the date group container to the selected dates container
|
||
|
|
selectedDatesContainer.appendChild(dateGroupElement);
|
||
|
|
|
||
|
|
// Increment count for the next date group
|
||
|
|
count++;
|
||
|
|
|
||
|
|
// Return the constructed date group object
|
||
|
|
|
||
|
|
return dateGroup;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Event listener to detect changes in date picker value
|
||
|
|
datePicker.addEventListener('change', function() {
|
||
|
|
|
||
|
|
var selectedDate = datePicker.value;
|
||
|
|
console.log("datePicker",datePicker)
|
||
|
|
console.log("selectedDate",selectedDate)
|
||
|
|
|
||
|
|
if (selectedDate) { // Check if the date is not already selected
|
||
|
|
var selectedDatesContainer = document.getElementById('selectedDatesContainer');
|
||
|
|
var datewalkElements = selectedDatesContainer.querySelectorAll('.datewalk');
|
||
|
|
|
||
|
|
// Initialize an array to store the values
|
||
|
|
|
||
|
|
// Iterate over each "datewalk" element and push its value to the array
|
||
|
|
datewalkElements.forEach(function(element) {
|
||
|
|
|
||
|
|
selectedDates.add(formatDate(element.textContent));
|
||
|
|
});
|
||
|
|
console.log(selectedDates)
|
||
|
|
if (!selectedDates.has(selectedDate)) {
|
||
|
|
// Check if the date is not already selected
|
||
|
|
selectedDates.add(selectedDate); // Add the selected date to the Set
|
||
|
|
addSelectedDateGroup(selectedDate);
|
||
|
|
} else {
|
||
|
|
alert('This date has already been selected.');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
datePicker.value = '';
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="create-walk-btn">
|
||
|
|
<button class="button newwalk-button" type="button"
|
||
|
|
style="height: 95px;width:125px;font-size:14px"><img class="image"
|
||
|
|
src="images/amblecreate.svg" /><br>UPDATE WALK </button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-3 vh-100">
|
||
|
|
<div class='info-box'>
|
||
|
|
|
||
|
|
<div class="mapname">
|
||
|
|
<h2 class="h2sty" id="mapname"> Map Name</h2>
|
||
|
|
</div>
|
||
|
|
<form id="addwalkform">
|
||
|
|
<h3 class="h3" id="waypointdesc">Add WayPoint From the Bottom of the screen</h3>
|
||
|
|
<div id="poidetail">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-6">
|
||
|
|
|
||
|
|
<label class="h3" for="mapid" style="color:#674AB9">MAP ID:</label>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6">
|
||
|
|
<p class="h3" id="mapid">dfdsdfsfdsds</p>
|
||
|
|
<p class="h3" id="mapaudio" style="visibility: hidden;"></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row" style="margin-top:-20px">
|
||
|
|
<div class="col-md-6">
|
||
|
|
<label for="poiid" class="h3" style="color:#674AB9">POI ID:</label>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6">
|
||
|
|
<p class="h3" id="poiid"></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row thumbnail-sec">
|
||
|
|
<div class="col-md-5" style="margin-top:-25px">
|
||
|
|
{{!-- <input type="file" id="imageUpload" name="images[]" multiple accept="image/*"> --}}
|
||
|
|
|
||
|
|
{{!-- <input type='file' multiple="multiple" id="poithumbnail" name="poithumbnail"
|
||
|
|
style="visibility: hidden;"
|
||
|
|
accept="image/*"
|
||
|
|
value="http://localhost:83/Walks/Thumbnails/2019543124-POI1-poithumbnail.jpeg" /> --}}
|
||
|
|
|
||
|
|
|
||
|
|
<input type='file' multiple="multiple" id="poithumbnail" name="poithumbnail"
|
||
|
|
style="visibility: hidden;"
|
||
|
|
accept="image/*"
|
||
|
|
value="http://localhost:83/Walks/Thumbnails/2019543124-POI1-poithumbnail.jpeg"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<p type="button" class="input preview1" style="height: 120px;width:120px"
|
||
|
|
><img id="blah" onclick="document.getElementById('poithumbnail').click()" src="images/plus.svg"
|
||
|
|
alt="your image" width="100%" height="100%" style="pointer:cursor;border-radius:10px" />
|
||
|
|
<span class="img-overlay" id="imageOverlay" data-bs-toggle="modal" onclick="onClickThumbnail()" data-bs-target="#exampleModal">
|
||
|
|
<span class="see">See <span id="fileCount"> </span> more images</span></span>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="col-md-6" style="margin-top: 15px;">
|
||
|
|
<label for="poithumbnail" class="h3" style="color:#674AB9;text-transform:uppercase">Add POI
|
||
|
|
Icon</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
function readURL(input) {
|
||
|
|
if (input.files && input.files[0]) {
|
||
|
|
var reader = new FileReader();
|
||
|
|
reader.onload = function (e) {
|
||
|
|
$('#blah').attr('src', e.target.result);
|
||
|
|
$('.blah').attr('src', e.target.result);
|
||
|
|
}
|
||
|
|
reader.readAsDataURL(input.files[0]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
$("#poithumbnail").change(function () {
|
||
|
|
readURL(this);
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<!-- Modal -->
|
||
|
|
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||
|
|
<div class="modal-dialog modal-xl">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-body">
|
||
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
|
|
|
||
|
|
|
||
|
|
<section class="Slider">
|
||
|
|
<div>
|
||
|
|
<img id="featuredImage" class="Slider-featuredImage blah" src="" alt="your image" width="100%" height="100%"/>
|
||
|
|
</div>
|
||
|
|
<div class="Slider-thumbnails" id="imagePreview" ></div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{{!-- <section class="Slider">
|
||
|
|
<div>
|
||
|
|
<img id="featuredImage" class="Slider-featuredImage" src="https://source.unsplash.com/user/harrycresswell/likes/1600x900" alt="#">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="Slider-thumbnails">
|
||
|
|
|
||
|
|
<a href="https://source.unsplash.com/user/kristapsungurs/likes/1600x900" class="Slider-thumbnail active">
|
||
|
|
<img src="https://source.unsplash.com/user/kristapsungurs/likes/1600x900" alt="#">
|
||
|
|
</a>
|
||
|
|
<a href="https://source.unsplash.com/user/jeriden94/likes/1600x900" class="Slider-thumbnail">
|
||
|
|
<img src="https://source.unsplash.com/user/jeriden94/likes/1600x900" alt="#">
|
||
|
|
</a>
|
||
|
|
<a href="https://source.unsplash.com/user/harrycresswell/likes/1600x900" class="Slider-thumbnail">
|
||
|
|
<img src="https://source.unsplash.com/user/harrycresswell/likes/1600x900" alt="#">
|
||
|
|
</a>
|
||
|
|
<a href="https://source.unsplash.com/user/sunburned_surveyor/likes/1600x900" class="Slider-thumbnail">
|
||
|
|
<img src="https://source.unsplash.com/user/sunburned_surveyor/likes/1600x900" alt="#">
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</section> --}}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-12">
|
||
|
|
<label for="poiname" class="h3" style="color:#674AB9;text-transform:uppercase">POI Name</label>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-12">
|
||
|
|
<input class="input1" type="text" id="poiname" name="poiname" placeholder="Enter POI Name">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-4">
|
||
|
|
<label for="latitude" class="h3"
|
||
|
|
style="color:#674AB9;text-transform:uppercase;font-size:16px">Latitude</label>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-md-4">
|
||
|
|
<label for="longitude" class="h3"
|
||
|
|
style="color:#674AB9;text-transform:uppercase;font-size:16px">Longitude</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-4">
|
||
|
|
<input type="number" class="input1" step="any" id="latitude" name="latitude"
|
||
|
|
placeholder="Enter Latitude"><br>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-md-4">
|
||
|
|
<input type="number" class="input1" step="any" id="longitude" name="logitude"
|
||
|
|
placeholder="Enter Longitude"><br>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-4">
|
||
|
|
<button type="button" class="maplatlng" onclick="addlatlong()"><img
|
||
|
|
src="images/pin map.svg" /></button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-11">
|
||
|
|
<label for="poidesc" class="h3" style="color:#674AB9;text-transform:uppercase;font-size:16px">POI
|
||
|
|
Description</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-md-12">
|
||
|
|
<textarea type="text" wrap="hard" class="inputdesc" id="poidesc" name="poidesc"
|
||
|
|
placeholder="Enter POI Description">
|
||
|
|
</textarea>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-4" style="margin-top:-20px">
|
||
|
|
<input type='file' id="contenturl" onchange="onUploadingAudio()" name="contenturl" style="visibility: hidden; " value=""
|
||
|
|
accept="audio/mp3" />
|
||
|
|
<p type="button" class="input preview1" style="height:70px;width:70px"
|
||
|
|
onclick="document.getElementById('contenturl').click()">
|
||
|
|
<img id="audio" src="images/plus.svg" alt="your image" width="100%" height="100%"
|
||
|
|
style="pointer:cursor;border-radius:10px" />
|
||
|
|
</p>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="col-md-7" style="margin-top: 25px;margin-left:20px">
|
||
|
|
<label for="contenturl" class="h3" style="color:#674AB9;text-transform:uppercase">Add POI
|
||
|
|
Audio</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row" id="showAudiotag">
|
||
|
|
<div class="col-md-12 audio-tag">
|
||
|
|
|
||
|
|
<audio controls id="audiourl" src="">
|
||
|
|
</audio>
|
||
|
|
<h5 class='delete-poi-icon mapbox-gl-draw_line' onclick="onDeleteAudio()" title='Delete Audio'></h5>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
function readURL1(input) {
|
||
|
|
if (input.files && input.files[0]) {
|
||
|
|
var reader = new FileReader();
|
||
|
|
|
||
|
|
reader.onload = function (e) {
|
||
|
|
|
||
|
|
$('#audio').attr('src', "images/audio.png");
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
reader.readAsDataURL(input.files[0]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
$("#contenturl").change(function () {
|
||
|
|
readURL1(this);
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-12" style="display:none">
|
||
|
|
<label for="triggerarea" class="h3"
|
||
|
|
style="color:#674AB9;text-transform:uppercase;font-size:16px">Trigger Area:</label>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="col-md-5" style="display:none">
|
||
|
|
<input type="number" step="any" id="triggerarea" name="triggerarea" class="input1" value="1">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-12">
|
||
|
|
<button type="submit" class="addpoi" >ADD POI DETAILS</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row" style="display:none">
|
||
|
|
<div class="col-md-11">
|
||
|
|
<label for="poitype" class="h3" style="color:#674AB9;text-transform:uppercase;font-size:16px">POI
|
||
|
|
Type:</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-md-12">
|
||
|
|
<select id="poitype" name="poitype" class="input1">
|
||
|
|
<option value="Poi" selected>Poi</option>
|
||
|
|
<option value="Trigger">Trigger</option>
|
||
|
|
<option value="Route">Route</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row" style="display:none">
|
||
|
|
<div class="col-md-11">
|
||
|
|
<label for="poistatus" class="h3"
|
||
|
|
style="color:#674AB9;text-transform:uppercase;font-size:16px">Content Type Status</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-md-12">
|
||
|
|
<select id="poistatus" name="poistatus" class="input1">
|
||
|
|
<option value="Published" selected>Published</option>
|
||
|
|
<option value="Unpublished">Unpublished</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row" style="display:none">
|
||
|
|
<div class="col-md-11">
|
||
|
|
<label for="contenttype" class="h3"
|
||
|
|
style="color:#674AB9;text-transform:uppercase;font-size:16px">Content Type</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-md-12" style="display:none">
|
||
|
|
<select id="contenttype" name="contenttype" class="input1">
|
||
|
|
<option value="Audio" selected>Audio</option>
|
||
|
|
<option value="Image">Image</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6 vh-100">
|
||
|
|
<div id="map" class="contain"></div>
|
||
|
|
<form id="addtriviaform">
|
||
|
|
|
||
|
|
</form>
|
||
|
|
<br>
|
||
|
|
<form id="addtotalwalkform">
|
||
|
|
|
||
|
|
</form>
|
||
|
|
<br />
|
||
|
|
{{!-- <h1>Add Waypoint</h1> --}}
|
||
|
|
<form id="addpoiform">
|
||
|
|
<p id="waypointnumber" style="visibility: hidden;"></p>
|
||
|
|
|
||
|
|
</form>
|
||
|
|
{{!-- <h1>Add Polygon</h1>
|
||
|
|
<form id="addpolyform">
|
||
|
|
<label for="mapid1">Map ID:</label><br>
|
||
|
|
<input type="text" id="mapid1" name="mapid1" /><br>
|
||
|
|
<input type="button" value="Add Polygon" />
|
||
|
|
</form> --}}
|
||
|
|
{{!-- <label for="waypointprofile">Waypoint Profile:</label><br> --}}
|
||
|
|
<select id="waypointprofile" style="display: none;" name="waypointprofile">
|
||
|
|
<option value="walking" selected>Walking</option>
|
||
|
|
<option value="driving">Driving</option>
|
||
|
|
<option value="driving-traffic">Driving Traffic</option>
|
||
|
|
<option value="cycling">Cycling</option>
|
||
|
|
</select>
|
||
|
|
<select id="waypointprofile1" style="display: none;" name="waypointprofile1">
|
||
|
|
<option value="walking" selected>Walking</option>
|
||
|
|
<option value="driving">Driving</option>
|
||
|
|
<option value="driving-traffic">Driving Traffic</option>
|
||
|
|
<option value="cycling">Cycling</option>
|
||
|
|
</select>
|
||
|
|
<div id='calculated-line'></div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="col-md-3 vh-100">
|
||
|
|
<div class="info-box1">
|
||
|
|
<div class="waypoint">
|
||
|
|
<h3 class="way-text"> Poi List <button type="submit" class="addpoilist" onclick="onAddPoi()" title='Add POI'>ADD POI</button></h3>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div id="poi" class="droptrue">
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
{{!-- <div id="poi">
|
||
|
|
<div class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</div>
|
||
|
|
<div class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</div>
|
||
|
|
<div class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</div>
|
||
|
|
<div class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</div>
|
||
|
|
<div class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</div>
|
||
|
|
<div class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</div>
|
||
|
|
<div class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</div>
|
||
|
|
</div> --}}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<!-- content-wrapper ends -->
|
||
|
|
<!-- partial:partials/_footer.html -->
|
||
|
|
<footer class="footer" style="height:auto">
|
||
|
|
<div class="d-sm-flex justify-content-center justify-content-sm-between">
|
||
|
|
<span class="text-muted text-center text-sm-left d-block d-sm-inline-block">Copyright © <a href="#"
|
||
|
|
target="_blank">RPG</a> 2020-21. All rights reserved.</span>
|
||
|
|
<span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center" id="timestamp"></span>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
<!-- partial -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{{!-- <div class="main-panel">
|
||
|
|
|
||
|
|
</div> --}}
|
||
|
|
<!-- main-panel ends -->
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<!-- container-scroller -->
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
|
||
|
|
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
|
||
|
|
crossorigin="anonymous"></script>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
|
||
|
|
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
|
||
|
|
crossorigin="anonymous"></script>
|
||
|
|
{{!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
|
||
|
|
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
|
||
|
|
crossorigin="anonymous"></script> --}}
|
||
|
|
|
||
|
|
|
||
|
|
<!-- plugins:js -->
|
||
|
|
<script src="vendors/js/vendor.bundle.base.js"></script>
|
||
|
|
<script src="vendors/js/vendor.bundle.addons.js"></script>
|
||
|
|
<!-- endinject -->
|
||
|
|
|
||
|
|
{{!-- <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
|
||
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||
|
|
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/jquery-sortablejs@latest/jquery-sortable.js"></script>
|
||
|
|
--}}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<!-- Plugin js for this page-->
|
||
|
|
<!-- End plugin js for this page-->
|
||
|
|
<!-- inject:js -->
|
||
|
|
<script src="js/off-canvas.js"></script>
|
||
|
|
<script src="js/hoverable-collapse.js"></script>
|
||
|
|
<script src="js/template.js"></script>
|
||
|
|
<script src="js/settings.js"></script>
|
||
|
|
<script src="js/todolist.js"></script>
|
||
|
|
<!-- endinject -->
|
||
|
|
<!-- Custom js for this page-->
|
||
|
|
<script src="js/main.js"></script>
|
||
|
|
{{!-- <script type="module" src="js/alerts.js"></script> --}}
|
||
|
|
<script src="js/timestamp.js"></script>
|
||
|
|
<script src="js/toastDemo.js"></script>
|
||
|
|
<script src="js/notifcations.js"></script>
|
||
|
|
<script src="js/desktop-notification.js"></script>
|
||
|
|
{{!--
|
||
|
|
<script src="js/data-table.js"></script> --}}
|
||
|
|
<!-- End custom js for this page-->
|
||
|
|
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
|
||
|
|
|
||
|
|
|
||
|
|
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
|
||
|
|
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
|
||
|
|
<script>
|
||
|
|
$( function() {
|
||
|
|
$( "#poi" ).sortable({
|
||
|
|
stop:()=>{
|
||
|
|
let listValues=[]
|
||
|
|
let listElements = $( "#poi" ).children()
|
||
|
|
listElements.each(function(index) {
|
||
|
|
// 'this' refers to the current DOM element in the loop
|
||
|
|
let $currentDiv = $(this);
|
||
|
|
// Access specific elements within the current div
|
||
|
|
let poiId = $currentDiv.attr("id")
|
||
|
|
listValues.push(poiId)
|
||
|
|
})
|
||
|
|
console.log(listValues)
|
||
|
|
|
||
|
|
|
||
|
|
var params = new URLSearchParams(location.search);
|
||
|
|
|
||
|
|
fetch("/api/update-poinumber", {
|
||
|
|
method: 'PATCH',
|
||
|
|
headers: {
|
||
|
|
'Accept': 'application/json',
|
||
|
|
'Content-Type': 'application/json'
|
||
|
|
},
|
||
|
|
body: JSON.stringify({mapid:params.get('Map_ID'),poiid:listValues})
|
||
|
|
|
||
|
|
}).then((resp)=>{
|
||
|
|
return resp.json();
|
||
|
|
}).then((resp)=>{
|
||
|
|
console.log(resp)
|
||
|
|
location.reload();
|
||
|
|
|
||
|
|
})
|
||
|
|
}
|
||
|
|
} )
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<style>
|
||
|
|
img {
|
||
|
|
width: 100%;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.Slider {
|
||
|
|
max-width: 100vw;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.Slider-featuredImage {
|
||
|
|
padding: 4px;
|
||
|
|
height: 500px;
|
||
|
|
object-fit: cover;
|
||
|
|
}
|
||
|
|
|
||
|
|
.Slider-thumbnails {
|
||
|
|
display: flex;
|
||
|
|
width: 100%;
|
||
|
|
overflow: scroll;
|
||
|
|
margin-top: 4px;
|
||
|
|
padding: 4px;
|
||
|
|
margin-right: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.Slider-thumbnail {
|
||
|
|
opacity: 0.7;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.Slider-thumbnail img {
|
||
|
|
width: 100px;
|
||
|
|
height: 70px;
|
||
|
|
object-fit: cover;
|
||
|
|
}
|
||
|
|
.Slider-thumbnails::-webkit-scrollbar {
|
||
|
|
height: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.Slider-thumbnail .active {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.Slider-thumbnail:hover,
|
||
|
|
.Slider-thumbnail.active,
|
||
|
|
.Slider-thumbnail:focus {
|
||
|
|
opacity: 1;
|
||
|
|
outline: solid 2px #765AEA;
|
||
|
|
outline-offset: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.Slider-thumbnail:not(:first-of-type) {
|
||
|
|
margin-left: 10px;
|
||
|
|
}
|
||
|
|
.btn-close{
|
||
|
|
position: absolute;
|
||
|
|
right: 5px;
|
||
|
|
top: 5px;
|
||
|
|
background-color: #ccc;
|
||
|
|
border-radius: 100%;
|
||
|
|
padding: 8px;
|
||
|
|
}
|
||
|
|
.modal .modal-dialog .modal-content .modal-body {
|
||
|
|
padding: 25px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.previewImage {
|
||
|
|
width: 100px;
|
||
|
|
height: 100px;
|
||
|
|
object-fit: cover;
|
||
|
|
margin: 5px;
|
||
|
|
}
|
||
|
|
#fileCount{
|
||
|
|
min-width:10px;
|
||
|
|
}
|
||
|
|
.collapse-main {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
|
||
|
|
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
|
||
|
|
<script>
|
||
|
|
$(document).ready(function () {
|
||
|
|
$(document).on('change', '#flexRadioDefault1', function () {
|
||
|
|
$('.collapse-main').show();
|
||
|
|
$('#confirmYes').hide();
|
||
|
|
});
|
||
|
|
$(document).on('change', '#flexRadioDefault2', function () {
|
||
|
|
$('.collapse-main').hide();
|
||
|
|
$('#confirmYes').show();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
//document.getElementsByClassName('previewImage').addEventListener('click', function (event) {
|
||
|
|
// debugger
|
||
|
|
//})
|
||
|
|
// Get all elements with the class name 'previewImage'
|
||
|
|
var elements = document.getElementsByClassName('previewImage');
|
||
|
|
|
||
|
|
// Iterate over the collection and add event listeners to each element
|
||
|
|
for (var i = 0; i < elements.length; i++) {
|
||
|
|
elements[i].addEventListener('click', function(event) {
|
||
|
|
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
document.getElementById('poithumbnail').addEventListener('change', function (event) {
|
||
|
|
const fileCountElement = document.getElementById('fileCount');
|
||
|
|
const previewContainer = document.getElementById('imagePreview');
|
||
|
|
const featuredImage = document.getElementById('featuredImage');
|
||
|
|
const imageOverlay = document.getElementById('imageOverlay');
|
||
|
|
|
||
|
|
// Get the count of existing images
|
||
|
|
const existingImageCount = previewContainer.querySelectorAll('.Slider-thumbnail').length;
|
||
|
|
|
||
|
|
previewContainer.innerHTML = '';
|
||
|
|
|
||
|
|
const files = event.target.files;
|
||
|
|
|
||
|
|
fileCountElement.textContent = `${files.length + existingImageCount}`;
|
||
|
|
|
||
|
|
// Check if there is only a single image
|
||
|
|
if (files.length === 1) {
|
||
|
|
imageOverlay.style.visibility = 'hidden';
|
||
|
|
} else {
|
||
|
|
imageOverlay.style.visibility = 'visible';
|
||
|
|
}
|
||
|
|
|
||
|
|
for (const file of files) {
|
||
|
|
const reader = new FileReader();
|
||
|
|
|
||
|
|
reader.onload = function (e) {
|
||
|
|
const originalFormat = file.type.split('/')[1];
|
||
|
|
const blob = new Blob([file], { type: file.type });
|
||
|
|
|
||
|
|
const a = document.createElement('a');
|
||
|
|
a.href = URL.createObjectURL(blob);
|
||
|
|
a.classList.add('Slider-thumbnail');
|
||
|
|
|
||
|
|
const img = document.createElement('img');
|
||
|
|
img.src = a.href;
|
||
|
|
img.alt = 'kesav';
|
||
|
|
img.classList.add('previewImage');
|
||
|
|
|
||
|
|
|
||
|
|
// Create a delete button
|
||
|
|
const deleteButton = document.createElement('button');
|
||
|
|
deleteButton.textContent = 'Delete';
|
||
|
|
deleteButton.classList.add('remove');
|
||
|
|
|
||
|
|
// Add click event listener to delete button
|
||
|
|
deleteButton.addEventListener('click', function (event) {
|
||
|
|
event.preventDefault();
|
||
|
|
previewContainer.removeChild(a); // Remove the thumbnail and its associated delete button
|
||
|
|
|
||
|
|
// If the deleted thumbnail was active, set the first thumbnail as active
|
||
|
|
const activeThumbnail = previewContainer.querySelector('.Slider-thumbnail.active');
|
||
|
|
if (!activeThumbnail) {
|
||
|
|
const firstThumbnail = previewContainer.querySelector('.Slider-thumbnail');
|
||
|
|
if (firstThumbnail) {
|
||
|
|
firstThumbnail.classList.add('active');
|
||
|
|
featuredImage.src = firstThumbnail.href;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
a.addEventListener('click', function (event) {
|
||
|
|
event.preventDefault();
|
||
|
|
event.stopPropagation();
|
||
|
|
featuredImage.src = a.href;
|
||
|
|
|
||
|
|
const allThumbnails = document.querySelectorAll('.Slider-thumbnail');
|
||
|
|
allThumbnails.forEach(thumbnail => thumbnail.classList.remove('active'));
|
||
|
|
|
||
|
|
a.classList.add('active');
|
||
|
|
});
|
||
|
|
|
||
|
|
a.appendChild(img);
|
||
|
|
previewContainer.appendChild(a);
|
||
|
|
};
|
||
|
|
|
||
|
|
reader.readAsDataURL(file);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
let thumbnails = document.querySelectorAll('.Slider-thumbnail');
|
||
|
|
|
||
|
|
for (let i = 0; i < thumbnails.length; i++) {
|
||
|
|
let deleteButton = document.createElement('button');
|
||
|
|
deleteButton.textContent = 'Delete';
|
||
|
|
deleteButton.classList.add('remove');
|
||
|
|
|
||
|
|
deleteButton.addEventListener('click', function (event) {
|
||
|
|
event.preventDefault();
|
||
|
|
let thumbnailContainer = this.parentNode;
|
||
|
|
thumbnailContainer.parentNode.removeChild(thumbnailContainer);
|
||
|
|
|
||
|
|
// If the deleted thumbnail was active, set the first thumbnail as active
|
||
|
|
const activeThumbnail = document.querySelector('.Slider-thumbnail.active');
|
||
|
|
if (!activeThumbnail) {
|
||
|
|
const firstThumbnail = document.querySelector('.Slider-thumbnail');
|
||
|
|
if (firstThumbnail) {
|
||
|
|
firstThumbnail.classList.add('active');
|
||
|
|
document.getElementById('featuredImage').src = firstThumbnail.href;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
thumbnails[i].appendChild(deleteButton);
|
||
|
|
}
|
||
|
|
|
||
|
|
let activeImages = document.getElementsByClassName('active');
|
||
|
|
|
||
|
|
for (let i = 0; i < thumbnails.length; i++) {
|
||
|
|
thumbnails[i].addEventListener('click', function (e) {
|
||
|
|
e.preventDefault();
|
||
|
|
if (activeImages.length > 0) {
|
||
|
|
activeImages[0].classList.remove('active');
|
||
|
|
}
|
||
|
|
this.classList.add('active');
|
||
|
|
document.getElementById('featuredImage').src = this.href;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// Additional code for autoplay
|
||
|
|
let autoplayInterval;
|
||
|
|
|
||
|
|
function startAutoplay() {
|
||
|
|
autoplayInterval = setInterval(() => {
|
||
|
|
const activeThumbnail = document.querySelector('.Slider-thumbnail.active');
|
||
|
|
if (activeThumbnail) {
|
||
|
|
const nextThumbnail = activeThumbnail.nextElementSibling || document.querySelector('.Slider-thumbnail:first-child');
|
||
|
|
if (nextThumbnail) {
|
||
|
|
simulateThumbnailClick(nextThumbnail);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, 3000); // Adjust the interval (in milliseconds) as needed
|
||
|
|
}
|
||
|
|
|
||
|
|
function stopAutoplay() {
|
||
|
|
clearInterval(autoplayInterval);
|
||
|
|
}
|
||
|
|
|
||
|
|
function simulateThumbnailClick(thumbnail) {
|
||
|
|
const clickEvent = new Event('click');
|
||
|
|
thumbnail.dispatchEvent(clickEvent);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Start autoplay when the document is loaded
|
||
|
|
document.addEventListener('DOMContentLoaded', function () {
|
||
|
|
startAutoplay();
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|