ZEVPASTER – Free Online Text Sharing

New Paste Browse

<!DOCTYPE html>
<html>
    <head>
        <link rel="manifest" href="manifest.json" />
        <title>Website Falakiyah</title>
        <meta name="theme-color" content="#2c3e50" />
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=1024">
        <link rel="shortcut icon" href="https://falakmu.id/moon.png">  
		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link rel="amphtml" href="https://berita-terkini.id/falakmu/" />
		<script src="https://falakmu.id/astronomy.browser.js"></script>
		<script src="https://falakmu.id/astronomy.js"></script>
		<script src="https://falakmu.id/PrayTimes.js"></script>
		
		<script src="https://falakmu.id/mooncalc.js"></script>		
		<script src="https://falakmu.id/moment.min.js"></script>
		<script src="https://momentjs.com/downloads/moment.js"></script>
		<script src="https://momentjs.com/downloads/moment-with-locales.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/suncalc/1.8.0/suncalc.min.js"></script>
		<script src="https://raw.githubusercontent.com/mourner/suncalc/master/suncalc.js"></script>
		<script src="https://falakmu.id/rs.js"></script>
		<script src="https://falakmu.id/solar.js"></script>
		<script src="https://falakmu.id/locations.js"></script>
		<script src="https://falakmu.id/images.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>		
		<script src="https://code.highcharts.com/highcharts.js"></script>
		<script src="https://code.highcharts.com/modules/exporting.js"></script>
		<script src="https://code.highcharts.com/modules/series-label.js"></script>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
		<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
		<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
		<script src=" https://unpkg.com/@joergdietrich/leaflet.terminator@1.0.0/L.Terminator.js"></script>
		<script src="https://unpkg.com/@tabler/core@1.0.0-beta9/dist/js/tabler.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
        <link rel="stylesheet" href="https://falakmu.id/style.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
        
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-yHCUUp5VTL6/6nDwvzEZbD4zDHXGp+e6mujR6VtxZQmGy4IDZx7fVJX/6rNrzXn3ccIsleUJMo44rDA5OQ45Vg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

/* Add a border and padding to the table */
			table {
			  border-collapse: collapse;
			  padding: 5px;
			  font-size: 15px;
			  border: 1px solid #ccc;
			  text-align: center;
			}

/* Style the table headers */       
			th {
			  background-color: ;
			  color: #FFFFFF;
			  font-weight: bold;
			  padding: 5px;
			  font-size: 15px;
			  border: 1px solid #ccc;
			}

/* Style the table cells */
			td {
			  padding: 5px;
			  font-size: 15px;
			  border: 1px solid #ccc;
			  vertical-align: top;
			  text-align: center;
			}

/* Set the font for the page */
			body, input, select, textarea, h1, h2, td, iframe {
			  font-family: times, sans-serif;
			}

/* Style the input boxes */
			input[type="text"]{
			  border: 1px solid #CCCCCC;
			  padding: 5px;
			  border-radius: 5px;
			  font-weight: bold;
			}
						
			
			/* Style the input boxes */
			input [type="datetime"] {
			  border: 0px solid #ffffff;
			  padding: 5px;
			  border-radius: 5px;
			  font-weight: bold;
			  width: 200px;
			}
			
			/* Style the checkbox */
			input[type="checkbox"] {
			  margin-right: 5px;
			}

/* Center the table */
			#CalcTable {
			  margin: 0 auto;
			}
			
			.NumHeader {
				text-align: center;
				background-color: #ffefbf; 
				color: black;
				font-size: 15px;
				font-weight: bold;
				height: 30px;
				vertical-align: middle;
			}
			.NumHeader2 {
				text-align: left;
				color: black;
				font-size: 15px;
				font-weight: bold;
				height: 30px;
				vertical-align: middle;
			}
			.Numeric {
				font-family: Monospace;
				text-align: center;observer
				font-size: 15px;
				vertical-align: middle;
			}
			.Numeric2 {
				font-family: Monospace;
				background-color: #eeeeee;
				text-align: center;
				font-size: 15px;    
				vertical-align: middle;
			}
			.Numeric3 {
				font-family: Monospace;
				text-align: center;
				font-size: 15px;
				vertical-align: middle;
			}			
			input:invalid {
				border: 2px dashed red;
			}

input:valid {
				border: 1px solid white;
			}

label {
			  display: inline-block;
			  width: 70px;
			  text-align: left;
			  margin-right: 3px;
			  font-size: 17px;
			}
			
			label.tanggalwaktu {
			  display: inline-block;
			  width: 150px;
			  text-align: left;
			  margin-right: 3px;
			  font-size: 15px;
			}
			
			span {
			  font-size: 15px;
			}	
			.city {
			  font-size: 15px;
			  height: 20px;
			}			
			p {
			  font-size: 17px;
			}
			
        .item {
            width: 100%;
        }			
			
			input.time {
			  display: inline-block;
			  width: 130px;
			  margin-bottom: 5px;
			  margin-right: 20px;
			  font-size: 15px;
			}
			input.data {
			  display: inline-block;
			  width: 70px;
			  border: 1px solid #ddd;
			  margin-bottom: 5px;
			  margin-right: 20px;
			  font-size: 15px;
			}	
			input.gmt {
			  display: inline-block;
			  width: 20px;
			  border: 1px solid #ddd;
			  margin-bottom: 5px;
			  margin-right: 15px;
			  font-size: 15px;
			  background-color: #ffffff;
			}
			input.elevasi {
			  display: inline-block;
			  width: 50px;
			  border: 1px solid #ddd;
			  margin-bottom: 5px;
			  margin-right: 20px;
			  font-size: 15px;
			}
			input.nama {
			  display: inline-block;
			  width: 220px;
			  border: 0px;
			  font-size: 15px;
			  color: blue;
			}
			input.latlong {
			  display: inline-block;
			  width: 50px;
			  border: 0px;
			  font-size: 15px;
			  color: black;
			}			
			.radio {
			  display: inline-block;
			  width: 220px;
			  border: 0px;
			  font-size: 15px;
			  color: blue;
			}			
			span.informasi {
			  font-size: 15px;
			  color: red;
			}
		
		 
		  /* Style untuk div */
		  .left {
			float: left; /* Menempatkan div di sebelah kiri */
			width: 50%; /* Lebar div sebesar 50% */
			height: 310px; /* Tinggi div sebesar 300px */
			padding: 1%;
			background-color: #e3f1ff; /* Warna latar belakang div */
			vertical-align: top;
		  }
		  .center {  
			float: center;
			display: inline-block; /* Menempatkan div di tengah */
			width: 23%; /* Lebar div sebesar 30% */
			height: 310px; /* Tinggi div sebesar 300px */
			background-color: ; /* Warna latar belakang div */
		  }

.right {
			float: right; /* Menempatkan div di sebelah kanan */
			width: 25%; /* Lebar div sebesar 50% */
			height: 310px; /* Tinggi div sebesar 300px */             
			background-color: ; /* Warna latar belakang div */
			vertical-align: top;
		  }
		
		
			#myDiv {
				display: none;
			}
		
		
        .button-container {
            display: flex;
            flex-wrap: wrap; /* Tambahkan ini jika ingin tombol bisa berpindah baris saat lebar layar tidak cukup */
            gap: 5px; /* Atur jarak antar tombol */;
            float: right;
        }
        
        .button-container2 {
            display: flex;
            flex-wrap: wrap; /* Tambahkan ini jika ingin tombol bisa berpindah baris saat lebar layar tidak cukup */
            gap: 5px; /* Atur jarak antar tombol */;
            float: left;
        }        
        
        button {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 3px 6px;
            font-size: 14px;
            cursor: pointer;
            text-align: center;
            /* Tambahkan styling tambahan sesuai kebutuhan */
        }
        
        .button {
            align-items: center;
            justify-content: center;
            padding: 3px 6px;
            font-size: 14px;
            cursor: pointer;
            text-align: center;
            /* Tambahkan styling tambahan sesuai kebutuhan */
        }

/* saat dihover */
			button:hover {
			  color: red;
			  transition: color 0.3s ease;
			  transform: scale(1.1);
			}				
			
		
			/* Styling untuk dialog box */
			.dialog-box {
				position: fixed;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				padding: 20px;
				background-color: #efffbf;
				box-shadow: 0 0 10px rgba(0,0,0,0.3);
				z-index: 9999;
				display: none;
			}
			.dialog-box h3 {
				margin-top: 0;
			}
		
		
			/* Styling untuk dialog box */
			.konversi-box {
				position: fixed;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				padding: 20px;
				background-color: #efffbf;
				box-shadow: 0 0 10px rgba(0,0,0,0.3);
				z-index: 9999;
				display: none;
			}
			.konversi-box h3 {
				margin-top: 0;
			}
		
		
		
			/* Styling untuk dialog box */
			.hari-box {
				position: fixed;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				padding: 20px;
				background-color: #efffbf;
				box-shadow: 0 0 10px rgba(0,0,0,0.3);
				z-index: 9999;
				display: none;
			}
			.hari-box h3 {
				margin-top: 0;
			}
		
		
			/* Styling untuk dialog box */
			.info-box {
				position: fixed;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				padding: 20px;
				background-color: #efffbf;
				box-shadow: 0 0 10px rgba(0,0,0,0.3);
				z-index: 9999;
				display: none;
			}
			.info-box h3 {
				margin-top: 0;
			}
			/* Styling untuk ketanggal box */
			.ketanggal-box {
				position: fixed;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				padding: 20px;
				background-color: #efffbf;
				box-shadow: 0 0 10px rgba(0,0,0,0.3);
				z-index: 9999;
				display: none;
			}
			.ketanggal-box h3 {
				margin-top: 0;
			}

/* Styling untuk moonsun box */
			.moonsun-box {
				position: fixed;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				padding: 20px;
				background-color: #efffbf;
				box-shadow: 0 0 10px rgba(0,0,0,0.3);
				z-index: 9999;
				display: none;
				width: 100%; /* Menambahkan properti width dengan nilai 100% */
			}
			.moonsun-box h3 {
				margin-top: 0;
			}
				
		
			.tengah {
				text-align: center;
			}
			.kiri {
				text-align: left;
			}
			.kanan {
				text-align: right;
			}
			.vertikal-tengah {
				vertical-align: middle;
			}
			.vertikal-atas {
				vertical-align: top;
			}	
			.vertikal-bawah {
				vertical-align: bottom;
			}
			.font8 {
				font-size: 8px;
			}			
			.font10 {
				font-size: 10px;
			}
			.font11 {
				font-size: 11px;
			}			
			.font12 {
				font-size: 12px;
			}
			.font13 {
				font-size: 13px;
			}
			.font14 {
				font-size: 14px;
			}			
			.font15 {
				font-size: 15px;
			}
			.font18 {
				font-size: 18px;
			}			
			.font20 {
				font-size: 20px;
			}
			.font25 {
				font-size: 25px;
			}
			.font30 {
				font-size: 30px;
			}			
			.merah {
				color: red;
			}
			.coklat {
				color: brown;
			}			
			.hijau {
				color: green;
			}
			.hijautua {
				color: darkgreen;
			}
			.biru {
				color: blue;
			}
			.hitam {
				color: black;
			}
			.putih {
				color: white;
			}
			.kuning {
				color: yellow;
			}			
			.ccc {
				color: #cccccc;
			}
			.ddd {
				color: #dddddd;
			}			
			.tebal {
				font-weight: bold;
			}
			.miring {
				font-style: italic;
			}
		
		
			.menu {
				position: relative;
				display: inline-block;
				cursor: pointer;
			}

.dropdown {
				display: none;
				position: absolute;
				text-align: left;
				background-color: #f3ffff;
				min-width: 200px;
				box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
				z-index: 1;
			}

.menu:hover .dropdown {
				display: block;
			}

.dropdown a {
				color: black;
				padding: 5px 8px;
				text-decoration: none;
				display: block;
			}

.dropdown a:hover {
				background-color: #ffff73;
			}

.nol {
			  border: none;
			  background-color: ;
			  cursor: ;
			  text-decoration: ;
			}
			.pointer {
			  border: 1px solid #2693ff;
			  background-color: #ffefbf;
			  cursor: pointer;
			  text-decoration: ;
			  height: 30px;
			}
			.gambar {
				margin: 0;
				border: none;
				background-color: #000000;
				height: 30px;
				padding: 0;
				text-align: right;
			}
		
		
		#canvas-animation {
		  width: 30px; /* Lebar animasi */
		  height: 30px; /* Tinggi animasi */
		  margin: 0;
		  overflow: hidden;
		  background-color: #ffffff;
		}
		
        #map-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 600px;
        }

#map {
            width: 100%;
            height: 100%;
        }
        #search-form {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

#search-input {
            margin-right: 10px;
			font-size: 15px;
			font-weight: normal;
        }		
		
        
            footer {
              text-align: center;
              background-color: #333;
              padding: 20px 0;
            }
            
            .social-icons {
              font-size: 24px;
            }
            
            .social-icons a {
              color: #fff;
              text-decoration: none;
              margin: 0 10px;
            }
            
            .social-icons a:hover {
              color: #007bff;
            }
        
        
          @media print {
            .no-print {
              display: none !important;
            }
          }
        	
        
            footer {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px;
                background-color: #333;
                color: white;
                width: 100%;
                max-width: 100%;
            }
    
            .social-icons {
                display: flex;
            }
    
            .social-icons a {
                margin-right: 10px; /* Untuk memberikan jarak antara ikon sosial media */
                color: white;
                text-decoration: none;
                font-size: 20px;
            }
    
            .social-icons a:last-child {
                margin-right: 0; /* Hapus margin kanan pada elemen terakhir */
            }
    
            .copyright {
                font-size: 15px;
                text-align: right;
            }
            
            header {
                background-color: #333;
                color: #fff;
                padding: 10px 0;
            }
            
            #sticky-nav {
                position: -webkit-sticky;
                position: sticky;
                top: 0;
            }
            
            #sticky-nav ul {
                list-style: none;
                padding: 0;
                margin: 0;
                display: flex;
                justify-content: center;
            }
            
            #sticky-nav li {
                margin: 0 20px;
            }
            
            #sticky-nav a {
                color: #fff;
                text-decoration: none;
            }
            
            .content {
                padding: 20px;
            }

/* Aturan CSS untuk mode portrait */
            @media screen and (orientation: portrait) {
              /* Anda bisa menambahkan styling khusus untuk mode portrait di sini */
              body {
                /* Contoh: memperingatkan pengguna untuk memutar perangkatnya */
                background-color: #f5f5f5; /* Warna latar belakang untuk mode portrait */
              }
            
              .warning-landscape {
                display: none; /* Sembunyikan peringatan di mode portrait */
              }
            }
            
            /* Aturan CSS untuk mode landscape */
            @media screen and (orientation: landscape) { 
              body {
                /* Mengatur ulang beberapa properti untuk tampilan yang optimal di landscape */
                background-color: #ffffff; /* Contoh: mengubah warna latar belakang untuk landscape */
              }
            
              .warning-landscape {
                display: block; /* Menampilkan peringatan atau instruksi khusus di landscape */
                text-align: center;
                margin-top: 20px;
                font-size: 20px;
                color: red;
              }
            }
            </style>
            <style>
                table {
                    width: 100%;
                    border-collapse: collapse;
                }
                td {
                    border: 1px solid #e3f1ff;
                    background-color: #e3f1ff;
                    text-align: center;
                    vertical-align: top;
                }
                .inner-div {
                    text-align: left;
                    background-color: #ffffff;
                    padding: 5px;
                }
                .hidden-input {
                    text-align: left;
                    border: 0px;
                }
                .content-center {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                .content-center img {
                    width: 100%;
                }
                @media screen and (max-width: 768px) {
                    td {
                        display: block;
                        width: 100%;
                    }
                }
            </style> 
            
    <style>
        .menu {
            position: relative;
            display: inline-block;
            margin-top: 3px;
        }
    
        .pointer {
            cursor: pointer;
        }
    
        .dropdown {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 9999; /* Ensure dropdown is above other content */
            min-width: 200px;
        }
    
        .dropdown a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }
    
        .dropdown a:hover {
            background-color: #f1f1f1;
        }
    
        .menu:hover > .dropdown {
            display: block;
        }
    
        .menu button {
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            border: none;
            cursor: pointer;
            margin-right: 5px;
        }
    
        .menu button:hover {
            background-color: #3e8e41;
        }
    
        .dropdown .menu {
            position: relative;
        }
    
        .dropdown .menu .dropdown {
            top: 0;
            left: 100%;
            margin-left: 1px;
            z-index: 9999; /* Ensure sub-dropdown is above other content */
        }
    </style>
    <style>
        .responsive-container {
            /* Default styles */
            flex: 1;
            text-align: left;
        }

.responsive-img {
            vertical-align: middle;
            width: 130px;
            height: 40px;
        }
    </style>
    <style>
    .background-table {
        width: 100%;
        border-collapse: collapse;
        background-image: url('langit.jpg');
        background-size: cover; /* Mengubah ukuran gambar agar menutupi seluruh elemen tabel */
        background-position: center; /* Memposisikan gambar di tengah tabel */
        background-repeat: no-repeat; /* Agar gambar tidak diulang */
    }
    
    .background-table th,
    .background-table td {
        border: 1px solid #ddd;
        padding: 8px;
        background-color: rgba(255, 255, 255, 0.8); /* Latar belakang semi-transparan untuk teks tabel */
    }
    
    .background-table th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;
        background-color: rgba(0, 0, 0, 0.8); /* Latar belakang semi-transparan untuk header tabel */
        color: white;
    }
    .borderputih {
        border: 1px solid #ffffff;
    }
    
    /* Mengatur gaya untuk elemen dropdown */
    select {
        background-color: #f0f0f0; /* Warna latar belakang dropdown */
        border: 1px solid #ccc; /* Warna dan ketebalan border */
        padding: 10px; /* Jarak dalam (padding) di dalam dropdown */
        font-size: 20px; /* Ukuran font */
        border-radius: 5px; /* Membuat sudut dropdown menjadi melengkung */
        outline: none; /* Menghilangkan outline saat elemen di-klik */
        transition: all 0.3s ease; /* Efek transisi saat berubah */
    }
    
    /* Mengatur gaya saat dropdown di-hover atau di-fokuskan */
    select:hover, select:focus {
        border-color: #007BFF; /* Warna border saat di-hover atau fokus */
        background-color: #e9ecef; /* Warna latar belakang saat di-hover atau fokus */
    }
    
    /* Mengatur gaya untuk opsi di dalam dropdown */
    option {
        background-color: #ffffff; /* Warna latar belakang opsi */
        color: #333; /* Warna teks opsi */
        padding: 10px; /* Jarak dalam (padding) di dalam opsi */
    }
    
    /* Mengatur gaya untuk label atau teks di dekat dropdown */
    label {
        font-weight: bold; /* Membuat teks label lebih tebal */
        margin-right: 10px; /* Memberikan jarak antara label dan dropdown */
        color: #333; /* Warna teks label */
    }
    
    /* Mengatur gaya untuk keseluruhan container */
    .container {
        display: flex; /* Membuat elemen di dalam container berbaris secara horizontal */
        align-items: center; /* Menyelaraskan elemen secara vertikal di tengah */
        justify-content: space-between; /* Membuat jarak antara elemen di dalam container */
        padding: 5px; /* Jarak dalam (padding) untuk container */
        background-color: #f8f9fa; /* Warna latar belakang container */
        border: 1px solid #ddd; /* Warna dan ketebalan border container */
        border-radius: 5px; /* Membuat sudut container menjadi melengkung */
    }
    
    /* Tambahkan efek untuk elemen dropdown saat diklik */
    select:active {
        background-color: #ffffff; /* Warna latar belakang saat dropdown aktif */
        border-color: #0056b3; /* Warna border saat dropdown aktif */
    }
    </style>    
    
    <style>
        .flash-container {
            display: none; /* Initially hidden */
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 1, 0, 0.6);
            color: white;
            padding: 20px;
            width: 400px;
            border-radius: 10px;
            text-align: center;
            z-index: 1000;
        }

.flash-image {
            width: 200px;
            height: auto;
            margin-bottom: 10px;
        }

.flash-text {
            margin: 10px 0;
            font-size: 20px;
        }

.flash-video {
            width: 300px;
            height: 300px;
            border-radius: 10px;
        }

.close-btn {
            position: absolute;
            top: 5px;
            right: 10px;
            background: none;
            border: none;
            color: white;
            font-size: 16px;
            cursor: pointer;
        }
    </style>

function hitung_Hijriah(d, m, y, tambahan) {
			mPart = (m - 13) / 12;
			jd = intPart((1461 * (y + 4800 + intPart(mPart))) / 4) +
				intPart((367 * (m - 1 - 12 * (intPart(mPart)))) / 12) -
				intPart((3 * (intPart((y + 4900 + intPart(mPart)) / 100))) / 4) + d - 32075;
			l = jd - 1948440 + 10632;
			n = intPart((l - 1) / 10631);
			l = l - 10631 * n + 354;
			j = (intPart((10985 - l) / 5316)) * (intPart((50 * l) / 17719)) + (intPart(l / 5670)) * (intPart((43 * l) / 15238));
			l = l - (intPart((30 - j) / 15)) * (intPart((17719 * j) / 50)) - (intPart(j / 16)) * (intPart((15238 * j) / 43)) + 29;
			iBulanH = intPart((24 * l) / 709);
			iTanggalH = l - intPart((709 * iBulanH) / 24);
			iTahunH = 30 * n + j - 30;

iTanggalH = iTanggalH + tambahan;
			iBulanH -= 1;
            if (iTanggalH > 30) {
                iTanggalH = iTanggalH - 30
            	iBulanH = iBulanH + 1;
            }
            iTahunH = 30*n+j-30;
			/*
			if ((tambahan == 1) && (iTanggalH == 0)){
			    iBulanH = iBulanH + 1;
			} else {
			    iBulanH = iBulanH;
			}
			
			if ((tambahan == -1) && (iTanggalH == 0)){
			    iBulanH = iBulanH - 1;
			} else {
			    iBulanH = iBulanH;
			}
			if ((tambahan == -2) && (iTanggalH == 0)){
			    iBulanH = iBulanH - 1;
			} else {
			    iBulanH = iBulanH;
			}	
			
			if (iTanggalH > 30) {
				iTanggalH = 1;
				iBulanH = iBulanH + 1;
			}
			
			if (iBulanH > 12) {
			        iBulanH = 1;
			}; */
		}

function hitung_Tanggal(format, date, tambahan) {
			var namaBulanE = new Array(
				"January",
				"February",
				"March",
				"April",
				"May",
				"June",
				"July",
				"August",
				"September",
				"October",
				"November",
				"December"
			);
			var namaBulanH = new Array(
				"Muharram",
				"Safar",
				"Rabiul Awwal",
				"Rabiul Thani",
				"Jumadil Ula",
				"Jumadil Thani",
				"Rajab",
				"Shaban",
				"Ramadan",
				"Shawwal",
				"Dhul Qada",
				"Dhul Hijja"
			);
			var namaBulanI = new Array(
				"Januari",
				"Februari",
				"Maret",
				"April",
				"Mei",
				"Juni",
				"Juli",
				"Agustus",
				"September",
				"Oktober",
				"November",
				"Desember"
			);
			var namaBulanHI = new Array(
				"Muharram",
				"Safar",
				"Rabiul Awal",
				"Rabiul Akhir",
				"Jumadil Awal",
				"Jumadil Akhir",
				"Rajab",
				"Sya'ban",
				"Ramadhan",
				"Syawal",
				"Dzulqa'dah",
				"Dzulhijjah"
			);
			var namaBulanJ = new Array(
				"Suro",
				"Sapar",
				"Mulud",
				"Ba'da Mulud",
				"Jumadil Awal",
				"Jumadil Akhir",
				"Rejeb",
				"Ruwah",
				"Poso",
				"Syawal",
				"Dulkaidah",
				"Besar"
			);
			var namaHariE = new Array("Thursday", "Friday", "Saturday", "Sunday", "Monday", "Tuesday", "Wednesday");
			var namaHariH = new Array("Al-Hamis", "Al-Jum'a", "As-Sabt", "Al-Ahad", "Al-Itsnayna", "Ats-Tsalatsa'", "Al-Arba'a'");
			var namaHariI = new Array("Kamis", "Jumat", "Sabtu", "Ahad", "Senin", "Selasa", "Rabu");
			var namaHariJ = new Array("Wage", "Kliwon", "Legi", "Pahing", "Pon", "Wage", "Kliwon");

now = new Date(date);
			iTanggalM = now.getDate();
			iBulanM = now.getMonth();
			iTahunM = now.getYear();
			
			if (iTahunM < 1900) {
				iTahunM += 1900;
			} // Y2K
			
			hitung_Hijriah(iTanggalM, iBulanM, iTahunM, tambahan);
			hr = Date.UTC(iTahunM, iBulanM, iTanggalM, 0, 0, 0) / 1000 / 60 / 60 / 24;
			iTahunJ = iTahunH + 512;
			
    // Menghitung nama hari berdasarkan tanggal Hijriah (Arab/Indonesia/Jawa) bukan Masehi (Inggris/Indonesia)
	/*
    if (hr < 0) {
      hr = (hr % 7) + 7;
    }
	*/
			sHariE = namaHariE[hr % 7]; //string nama hari : Inggris
			sHariH = "Yaum " + namaHariH[hr % 7]; //string nama hari : Arab
			sHariI = namaHariI[hr % 7]; //string nama hari : Indonesia
			sHariJ = namaHariJ[hr % 5]; //string nama hari : Jawa (hari pasar)
			
			sBulanE = namaBulanE[iBulanM]; //string nama bulan : Masehi - Inggris
			sBulanH = namaBulanH[iBulanH]; //string nama bulan : Hijriah - Arab
			sBulanI = namaBulanI[iBulanM]; //string nama bulan : Masehi - Indonesia
			sBulanHI = namaBulanHI[iBulanH]; //string nama bulan : Hijriah - Indonesia
			sBulanJ = namaBulanJ[iBulanH]; //string nama bulan : Hijriah - Jawa

zTanggalM = iTanggalM < 10 ? "0" + iTanggalM : iTanggalM; //int tanggal Masehi (Inggris/Indonesia), + leading zero 
			if (iTanggalH == 0) {
			    iTanggalH = 30;
			}			
			zTanggalH = iTanggalH < 10 ? "0" + iTanggalH : iTanggalH; //int tanggal Hijriah (Arab/Indonesia/Jawa), + leading zero

iBulanM += 1; //int bulan Masehi (Inggris/Indonesia)
			iBulanH += 1; //int bulan Hijriah (Arab/Indonesia/Jawa)
			zBulanM = iBulanM < 10 ? "0" + iBulanM : iBulanM; //int bulan Masehi (Inggris/Indonesia), + leading zero
            iBulanH = 1;
			zBulanH = iBulanH < 10 ? "0" + iBulanH : iBulanH; //int bulan Hijriah (Arab/Indonesia/Jawa), + leading zero

switch (format) {
				case 1: {
					sDate = zTanggalH;
					break;
				}
				case 2: {
					sDate =
						sHariI +
						" " +
						sHariJ +
						", " +
						zTanggalM +
						" " +
						sBulanI +
						" " +
						iTahunM +
						" / " +
						zTanggalH +
						" " +
						sBulanHI +
						" " +
						iTahunH +
						" H";
						/*+
						zTanggalH +
						" " +
						sBulanJ +
						" " +
						iTahunJ +
						" J";
						*/
					break;
				}
				default: {
					sDate = sHariJ;
					break;
				}
			}
			return sDate;
		}
    
</script>

/* Style untuk dialog box */
        .dialog-box {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            position: relative;
            max-width: 400px;
            text-align: center;
        }

/* Tombol close */
        .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background: none;
            border: none;
            font-size: 20px;
            font-weight: bold;
            cursor: pointer;
        }

.content {
            padding: 20px;
            text-align: center;
        }
    </style>
    </head>
<body> 
    
    
    <script>
        let idleTimer;
        const idleTimeLimit = 60000; // 60 seconds
        let isFlashClosed = false;
    
        function showFlashMessage() {
            if (isFlashClosed) return; // Do not show if flash message has been closed by the user
            const flashMessage = document.getElementById("flashMessage");
            flashMessage.style.display = "block";
    
            setTimeout(function () {
                flashMessage.style.display = "none";
                resetIdleTimer(); // Restart the idle timer after the flash message hides
            }, 5000); // Display for 3 seconds
        }
    
        function closeFlashMessage() {
            const flashMessage = document.getElementById("flashMessage");
            flashMessage.style.display = "none";
            isFlashClosed = true; // Prevent future displays of the flash message
            document.removeEventListener('mousemove', resetIdleTimer);
            document.removeEventListener('keydown', resetIdleTimer);
            clearTimeout(idleTimer);
        }
    
        function resetIdleTimer() {
            clearTimeout(idleTimer);
            idleTimer = setTimeout(showFlashMessage, idleTimeLimit);
        }
    
        // Set up event listeners to detect user activity
        document.addEventListener('mousemove', resetIdleTimer);
        document.addEventListener('keydown', resetIdleTimer);
    
        // Show the flash message immediately on page load
        showFlashMessage();
    
        // Initialize the idle timer
        resetIdleTimer();
    </script>
    <script>
        // Menonaktifkan klik kanan
        window.addEventListener('contextmenu', function (e) {
            e.preventDefault();
        });

// Pesan peringatan saat mencoba melihat kode sumber
        document.onkeydown = function (e) {
            if (e.keyCode == 85 && e.ctrlKey) {
                alert('Tampilan kode sumber tidak diizinkan.');
                return false;
            }
        };
    </script> 		
    
    <script>
        function detectDevice() {
            var userAgent = navigator.userAgent || navigator.vendor || window.opera;

// Check for iOS devices
            if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
                return "iOS Device";
            }

// Check for Android devices
            if (/android/i.test(userAgent)) {
                return "Android Device";
            }

// Check for Windows devices
            if (/windows phone/i.test(userAgent)) {
                return "Windows Phone";
            }

// Check for other mobile devices
            if (/mobile/i.test(userAgent)) {
                return "Mobile Device";
            }

// Default to desktop if none of the above match
            return "Desktop Device";
        }

adjustWidthBasedOnDevice();
    </script>

// Secara otomatis sembunyikan dialog box setelah 5 detik
    setTimeout(() => {
        closeDialog();
    }, 5000);
</script>
		
<div id="imgMoonphase2" style="text-align: center;" >
		<center>    
			<table width="100%" style="text-align: center; border: 0px solid #fff; background-color: rgba(0,0,0,0.9);" >	
				<tr  >
				  <td style="background-color: #fff; text-align: center; border: 0px solid #fff; vertical-align: middle; width: 100%; height: 50px;" class="background-table">
					<div style="display: flex; align-items: center;" >
                        <div class="responsive-container" id="responsive-container">
                            <span style="vertical-align: middle;" id="canvas-animation"></span>
                            &nbsp;
                            <a href="https://falakmu.id/" title="Kembali ke MENU UTAMA" target="_top">
                                
                                <img src="https://falakmu.id/Falakmu_printline_shadow.png" class="responsive-img" id="responsive-img">
                                
                            </a>
                        </div>
                                <div class="menu">
                                    <a href="https://falakmu.id/blog/" target="_blank" title="Akses Blog Falakmu" style="text-decoration: none;"><button class="pointer"><i class="fas fa-globe"></i>&nbsp;Blog</button></a>
                                </div>                              
                                <div class="menu">
                                    <button title="Grafik versus waktu" class="pointer"><i class="fas fa-moon"></i>&nbsp;FalakMu&nbsp;<b>»</b></button>
                                    <div class="dropdown">
                                        <a href="https://falakmu.id/khgt/" target="_blank" title="Akses KHGT" style="text-decoration: none;" >KHGT 1446 s/d 1468 H</a>
                                        <a href="https://falakmu.id/khgt/dokumen/Kalender-Hijriyah-Global-Tunggal-Muhammadiyah-1446.pdf" target="_blank" title="Akses KHGT" style="text-decoration: none;" >KHGT SM Cetak</a>
                                        
                                        <a href="https://falakmu.id/hisab/" target="_blank" title="Penentuan awal bulan qomariyah" style="text-decoration: none;" >Hisab KHGT</a>
                                        <a href="https://falakmu.id/shalatmu/" target="_blank" title="Akses Jadwal Shalat" style="text-decoration: none;" >Jadwal Shalat</a>
                                        <a href="https://falakmu.id/visibilitas/" target="_blank">Peta Hilal</a>
                                        <a href="https://falakmu.id/rashdulkiblat/" target="_blank">Rashdul Kiblat</a>
                                        <a href="https://falakmu.id/ical/" target="_blank">Membuat Kalender</a>      
                                        <a href="https://falakmu.id/kiblat/" target="_blank" title="Data Kiblat/Masjid" style="text-decoration: none;">Masjid</a>
                                        <a href="https://falakmu.id/kompas/" target="_blank" title="Kompas Kiblat" style="text-decoration: none;">Kompas</a>
                                        <a href="https://falakmu.id/khgt/software/" target="_blank">Software Falak</a>
                                        <a href="https://falakmu.id/khgt/dokumen/" target="_blank">Ebook Falak</a>
                                    </div>
                                </div>
                                
                                <div class="menu">
                                    <button title="Grafik versus waktu" class="pointer"><i class="fas fa-ellipsis-v"></i>&nbsp;Menu&nbsp;<b>»</b></button>
                                    <div class="dropdown">
                                        <a href="https://falakmu.id/intro.html" target="_blank">Pengantar</a>
                                        
                                        <a href="https://falakmu.id/khgt/konversi/" target="_blank">Konversi Kalender</a>
                                        <a href="https://www.latlong.net/geo-tools" target="_blank" title="Mencari latitude dan longitude suatu kota">Geotools</a>
                                        <a href="https://falakmu.id/kiblat/" target="_blank">Data Masjid</a>
                                        <a href="https://falakmu.id/ephemeris.html" target="_blank">Data Ephemeris</a>
                                        <a href="https://falakmu.id/newmoon.html" target="_blank">New Moon</a>
                                        <a href="https://falakmu.id/eclipse.php" target="_blank">Gerhana</a>
                                        <a href="https://falakmu.id/FalakMu.apk" target="_blank">Unduh Android FalakMu</a>
                                        <a href="https://falakmu.id/" target="_top" id="printButton">Print Moonphase</a>
                                        <a href="https://falakmu.id/" target="_top" id="printButton2">Print Layar</a>
                                        <a href="https://falakmu.id/info.php" target="_blank">Referensi</a>
                                        <a href="https://falakmu.id/Kasmui.htm" target="_blank">Author</a>
                                    </div>
                                </div>
                                <div class="menu">
                                    <button title="Grafik versus waktu" class="pointer"><i class="fas fa-chart-bar"></i>&nbsp;Chart&nbsp;<b>»</b></button>
                                    <div class="dropdown">
                                        <a href="https://falakmu.id/chart_alt.html" target="_blank">Ketinggian</a>
                                        <a href="https://falakmu.id/chart_elong.html" target="_blank">Elongasi</a>
                                        <a href="https://falakmu.id/chart.html" target="_blank">Iluminasi 1</a>
                                        <a href="https://falakmu.id/chart_ilum.php" target="_blank">Iluminasi 2</a>
                                        <a href="https://falakmu.id/chart_altilum.html" target="_blank">Altitude-Iluminasi</a>
                                        <a href="https://falakmu.id/chart_ilumaltelong.html" target="_blank">3 Chart</a>
                                        <a href="https://falakmu.id/chart_dist.html" target="_blank">Jarak Bulan</a>
                                    </div>
                                </div>
                                <div class="menu">
                                    <a href="https://falakmu.id/" target="_top" title="Beranda" style="text-decoration: none;"><button class="pointer"><i class="fas fa-home"></i>&nbsp;Beranda</button></a>
                                </div>
                    </div>
				  </td>
				</tr>

<tr>
					<td width="100%" style="text-align: center; border: 0px solid #fff; vertical-align: middle; opacity: 0.9; background-color: rgba(0, 0, 0, 0.9);"> 
					    <div style="text-align: center; width: 98%;" >
    						<div  id="myDiv" style="padding: 5px;    height: 20px; display: flex; align-items: center; justify-content: center; width:100%; vertical-align: middle; text-align: center;">   
    							<span id="tulisTanggal" style="font-size:20px;  text-shadow:0px 1px 1px #444; font-family: Times; font-style: italic; color:#fff; text-align: center;">  
    								
    							</span>   
    						</div> 
    						<div  id="resultTgl" style="padding: 5px;  background-color: rgba(0, 0, 0, 0.5); height: 20px; display: flex; align-items: center; justify-content: center; width:100%; vertical-align: middle; font-size:20px; text-shadow:0px 1px 1px #444; font-family: Times; font-style: italic; color:#fff; text-align: center;">   
    						</div> 
						</div>
					</td>
				</tr>
   
				<tr style="text-align: center; display: flex; justify-content: space-between; background-color: ; padding: 5px; gap: 10px; width: 98%;">   
					<td width="100%" style="text-align: center; flex: 1; border: 1px; background-color: #e3f1ff;"> 
						<table width="100%" style="text-align: center; border: 1px; background-color: rgba(0, 0, 0, 0.5);">
							<tr> 
								<td width="55%" style="text-align: center; border: 1px; background-color: #e3f1ff;">
									<div style="text-align: left;">
										<div style="text-align: justify; border: 0px; background-color: #fff; padding: 5px;">
											<p class="tengah">
                                              <img src="https://falakmu.id/awal-bulan.png" width="80%" style="box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); border-radius: 8px;">
                                            </p>

<p style="text-align: center; color: darkblue; font-family: 'Bernard MT Condensed', sans-serif; font-size: 22px; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);">Website ini didukung oleh LazisMu KL Gunungpati 2 dan Kota Semarang</p>
											<p class="font15" style="color: black;"><b>Langkah ubah posisi observer:</b> 1) hilangkan "tanda centang" REALTIME, 2) ubah "Tanggal Waktu" dan Koordinat atau pilih kota: <span style="font-weight: bold; font-size: 15px; height: 20px;" id="container" class="city"></span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="font15 putih tebal"><b>Timezone:</b></span> <input type="hidden" id="EditGmt" pattern="[\-\+]?\d+(\.\d*)?" size="5" class="gmt" style="text-align: left; border: 0px;"> <span class="font15 putih tebal" title="Waktu lokal/setempat" id="waktuLokal"></span></p>
											<p class="font15" ><b>Langkah Penentuan awal bulan qomariyah:</b> 1) Hilangkan tanda centang, 2) Klik&nbsp;<img height="25px" src="https://falakmu.id/tempel.png"> pada fase bulan <b>"New Moon"</b> bulan yang dipilih, 3) Klik&nbsp;<img height="25px" src="https://falakmu.id/tempelsunset.png"></p>
										</div>
										<hr style="height:1px;border-width:0;color:white;background-color:white">
										<div style="text-align: left; border: 0px; background-color: #fff; padding: 5px;">
											<div style="display: flex; align-items: center;">
											  <input type="checkbox" id="AutoTimeCheckBox" onchange="OnToggleAutoTime()" style="display: inline-flex;">
											  <label for="AutoTimeCheckBox" title="Hilangkan tanda centang untuk mengubah posisi observer, lalu ubah value pada datetime, latitude, longitude dan ketinggian sesuai keperluan." style="display: inline-flex; flex-direction: row; align-items: center;">   
												<span style="font-weight: bold; color: red;">REALTIME</span>        
											  </label>      
											</div>

<label class="tanggalwaktu">Tanggal Waktu <b class="merah">(WIB)</b>:</label>  
											<input class="merah font15 time datetime" type="datetime" id="DateTimeBox" size="20" >&nbsp;&nbsp;
											<span class="tebal merah" id="statussunset"></span>&nbsp;&nbsp;
											<br/>

<div class="button-container2">
                                                <button id="buttonPlusOneYear" title="Tambah 1 tahun">+1T</button>
                                                <button id="buttonMinusOneYear" title="Kurangi 1 tahun">-1T</button>
                                                <button id="buttonPlusOneMonth" title="Tambah 1 bulan">+1B</button>
                                                <button id="buttonMinusOneMonth" title="Kurangi 1 bulan">-1B</button>
                                                <button id="buttonPlusOne" title="Tambah 1 hari">+1H</button>
                                                <button id="buttonMinusOne" title="Kurangi 1 hari">-1H</button>
                                                <button id="buttonPlusOneHour" title="Tambah 1 jam">+1J</button>
                                                <button id="buttonMinusOneHour" title="Kurangi 1 jam">-1J</button>
                                                <button id="buttonPlusOneMin" title="Tambah 1 menit">+1M</button>
                                                <button id="buttonMinusOneMin" title="Kurangi 1 menit">-1M</button>
                                                <button id="00" title="Seting ke Waktu 00:00:00"><span style="color: red; font-weight: bold;">00</span></button> 
                                            </div>
											
											<br/><br/>               
											<label for="EditLatitude">Latitude</label>
											<input type="number" step="0.001" id="EditLatitude" pattern="[\-\+]?\d+(\.\d*)?" size="20" class="data" value="51.482">      
											<label for="EditLongitude">Longitude</label>
											<input  type="number" step="0.001"  id="EditLongitude" pattern="[\-\+]?\d+(\.\d*)?" size="20" class="data" value="0.008">
											<label for="EditElevation">Elevasi</label>
											<input  type="number" step="0.001"  id="EditElevation" pattern="[\-\+]?\d+(\.\d*)?" size="20" class="elevasi" value="0">
										</div>
										<hr style="height:1px;border-width:0;color:white;background-color:white">
                                        
                                        <button id="informationButton" style="text-align: center; margin-bottom: 5px;">Information</button>
                                        <div id="informationContent" style="text-align: left; border: 0px; background-color: #ffffff; padding: 5px; display: none; margin-top: 5px;">
                                            <p class="font15" style="text-align:left; color: red;" id="">
                                                <b><span class="informasi font15">Informasi Cuaca Lokal, klik nama kota untuk membuka map Google: </span> 
                                                <input type="text" title="Klik nama kota untuk membuka map Google!" id="EditNama" style="text-align: left; cursor: pointer; border: 1px; background-color: #ffffff;" class="font15 nama"></b>
                                                <br/>
                                                <span class="font15" style="text-align:left; color: black;" id="cuaca"></span>
                                            </p>
                                            <p class="font15" style="text-align:left; color: red;" id="">
                                                <b><span class="informasi font15">Informasi Kiblat Lokal</span></b>
                                                <br/>
                                                <span style="text-align:left; color: black;" class="informasi font15" id="jarakkekabah"></span>, 
                                                <span class="informasi font15" style="text-align:left; color: black;" id="sudutkiblat"></span>&nbsp;&nbsp;
                                                <span class="informasi font15" style="text-align:left; color: black;" id="qiblaTime"></span> 
                                                <span class="informasi font15 tebal" style="text-align:left; color: blue;" id="rashdulkiblat"></span> 
                                                <span class="informasi font15" style="text-align:left; color: black;"></span>
                                            </p>
                                            <p class="font15" style="text-align:left; color: ;" id="praytimes-info">
                                                <span class="informasi font15 red" style="text-align:left; color: black;" id="praytimes"></span> 
                                                <span class="font15" id="subuhan"></span>
                                            </p>
                                            <p class="font15" style="text-align:left; color: red;" id="">
                                                <span class="informasi font15" style="text-align:left; color: black;" id="distanceEarthSun"></span>
                                            </p>
                                            <p class="font15" style="text-align:left; color: red;" id="">
                                                <!DOCTYPE html>
<html>
<head>
    <title>Eclipse Dates</title>
    <script src="https://falakmu.id/astronomy.browser.js"></script>
    <style>
        div {
            text-align: left;
        }
    </style>
</head>
<body>
    <div id="eclipseContainer"></div>
    
    <script>
        function Pad(s, w) {
            s = s.toFixed(0);
            while (s.length < w) {
                s = '0' + s;
            }
            return s;
        }

function FormatDate(t) {
            const wibOffset = 7 * 60 * 60 * 1000; // Offset WIB dalam milidetik (7 jam)
            const wibDate = new Date(t.date.getTime() + wibOffset);
        
            var year = Pad(wibDate.getUTCFullYear(), 4);
            var month = Pad(1 + wibDate.getUTCMonth(), 2);
            var day = Pad(wibDate.getUTCDate(), 2);
            
            return {
                year: year,
                month: month,
                day: day
            };
        }

function PrintEclipse(e) {
            const MINUTES_PER_DAY = 24 * 60;
            const container = document.getElementById('eclipseContainer');

Demo();
    </script>
    
</body>
</html>
                                            </p>
                                            <p class="font15" style="text-align:left; color: red;" id="">
                                                <span style="color: red; font-weight: bold;">Gerhana Matahari: </span>
                                                <a style="text-decoration: none;" target="_blank" href="https://falakmu.id/gerhanamatahari.php">Lihat Data</a>
                                            </p>
                                        </div>
                                        
                                        <script>
                                            // Event listener untuk klik pada input
                                            document.getElementById('EditNama').addEventListener('click', function() {
                                                var cityName = this.value.trim(); // Ambil nilai dari input
                                                if (cityName) {
                                                    // Jika ada nilai yang diinput, buka Google Maps dengan pencarian lokasi tersebut
                                                    var mapsUrl = "https://www.google.com/maps/search/?api=1&query=" + encodeURIComponent(cityName);
                                                    window.open(mapsUrl, '_blank');
                                                } else {
                                                    alert("Masukkan nama kota terlebih dahulu!");
                                                }
                                            });
                                        </script>                                        
                                    
                                        <script>
                                            document.getElementById('informationButton').addEventListener('click', function() {
                                                var infoContent = document.getElementById('informationContent');
                                                if (infoContent.style.display === 'none') {
                                                    infoContent.style.display = 'block';
                                                } else {
                                                    infoContent.style.display = 'none';
                                                }
                                            });
                                        </script>											
									</div> 		 							
								</td>
								
								<td  id="" width="44%" style="text-align: center; border: 1px solid white; background-color: #fff; ">
									<div id="imgMoonphase" style="text-align: center;">
										<table style="background-color: #ffffff; border: 1px solid #ffffff; text-align: center; padding: 0px; ">
											<tr>
												<td colspan=2 style="background-color: black; opacity: 1; text-align: center; width: 100%">
													<a  style="text-decoration: none;" href="https://falakmu.id/skylive.html" target="_blank" title="Akses ke https://theskylive.com/moon-info">
														<center>
														<div style="background-color: #000000; border: 0px solid #ffffff; text-align: center; padding: 1; width: 240px;" id="imageContainer"></div>	
														</center>
													</a>
													<span type="hidden" style="font-size: 0px; color: #000000;" id="CurrentDateTime" class=""></span>
												</td>
											</tr>
											<tr style="border: 1px solid #ffffff;">
												<td colspan=2 class="font13 tebal" style="background-color: #ffffff; text-align: center;">
													<span class="font13 merah tebal">WIB: </span><span class="font13 tebal" id="resultTgl2"></span> <br/><span class="font15 merah tebal">WL: </span><span class="font15 biru tebal" id="waktuLokal2"></span> 
												</td>
											</tr>
											<tr>
												<td style="padding: 5; border: 1px solid #ffffff;" class="kiri">
													<span><b>Location observer</b></span>
												</td>
												<td style="padding: 5; background-color: #ffffff; border: 1px solid #ffffff;" class="kiri">
													<input type="text" id="EditLokasi" style="text-align: left; border: 1px; background-color: #ffffff;" class="font15 nama">	
												</td>
											</tr>
												<td style="padding: 5; border: 1px solid #ffffff;" class="kiri">
													<span><b>Latitude/Longitude</b></span>
												</td>
												<td style="padding: 5; background-color: #ffffff; border: 1px solid #ffffff;" class="kiri">
													<span style="text-align: left; border: 1px; background-color: #ffffff;" class="font15 latlong" id="poslatitude"></span> / 
													<span style="text-align: left; border: 1px; background-color: #ffffff;" class="font15 latlong" id="poslongitude"></span>
												</td>
											</tr>											
											<tr>
												<td style="padding: 5; border: 1px solid #ffffff;" class="kiri">
													<span><b>Right Ascension/Azimuth</b></span>
												</td>
												<td style="padding: 5; background-color: #ffffff; border: 1px solid #ffffff;" class="kiri">
													<span id="moonra"></span> / <span id="moonaz"></span> <span id="arahbulan2"></span> 
												</td>
											</tr>
											<tr>
												<td style="padding: 5; border: 1px solid #ffffff;" class="kiri">
													<span><b>Illumination/Magnitude</b></span> 
												</td>
												<td style="padding: 5; background-color: #ffffff; border: 1px solid #ffffff;" class="kiri">
													<span id="illumination"></span> / <span id="magnitude"></span><span id="moondec"></span>
												</td>
											</tr>
											<tr>
												<td style="padding: 5; border: 1px solid #ffffff; class="kiri"><span><b>Moon phase</b></span></td>
												<td class="font15" style="padding: 5; background-color: #ffffff; border: 1px solid #ffffff;" class="kiri"><span id="MoonPhaseAngle"></span> (<span class="merah" id="moon_phase"></span>) </td>
											</tr>											
											<tr>
												<td style="padding: 5; border: 1px solid #ffffff;" class="kiri">
													<span><b>Sunset<br/> Moonset</b></span>
												</td>
												<td style="padding: 5; border: 1px solid #ffffff; background-color: #ffffff; border: 1px solid #ffffff;" class="kiri">
													<span id="Sunset2"></span> <span class="font15 merah">WIB</span><br/><span id="Moon_set"></span> <span class="font15 merah">WIB</span> 
												</td>
											</tr>
											<tr>
												<td style="padding: 5; border: 1px solid #ffffff;" class="kiri">
													<span title="jeda antara sunset dengan moonset"><b>Lag time</b></span></td>
												<td style="padding: 5; background-color: #ffffff; border: 1px solid #ffffff;" class="kiri"><span title="jeda antara sunset dengan moonset" id="Selisih" class="Numeric"></span>
												</td>
											</tr>											
											
											<tr>
												<td style="padding: 5; border: 1px solid #ffffff;" class="kiri"><span><b>New Moon, past & later</b></span>
												</td>
												<td class="font15" style="padding: 5; background-color: #ffffff; border: 1px solid #ffffff;" class="kiri"><span id="newmoonkemarin"></span> <span class="merah">WIB</span> & <br/><span id="newmoonbesok"></span> <span class="merah">WIB</span></td>
											</tr>

<tr>
  <td colspan="2" style="background-color: #ffffff; text-align: center; opacity: 1;">
    
    <div style="display: flex; justify-content: center; gap: 20px; padding: 20px;">
      
      <div style="text-align: center; width: 220px;">
        <a href="https://falakmu.id/map.html" target="_blank" title="Klik untuk membuka Peta Arah Kiblat">
          <canvas id="circleCanvas" width="220" height="220" style="display: none;"></canvas>
        </a>
        <span class="font15 hitam" id="arahKiblat" style="display: block; margin-top: 10px;">Qibla Direction</span>
      </div>

<div style="text-align: center; width: 220px;">
        <a href="https://stellarium-web.org/" target="_blank" title="Klik untuk membuka Web Stellarium">
          <canvas id="moonSunCanvas" width="220" height="220" style="display: none;"></canvas>
        </a>
        <span class="font15 hitam" id="posisiBulanMatahari" style="display: block; margin-top: 10px;">Moon and Sun Position</span>
      </div>
    </div>
  </td>
</tr>
											<tr>
												<td colspan=2 style="background-color: #fff; opacity: 1; text-align: left;">
												
										        <span id="statusHilal" style="text-align: left; color: black; background-color: white; font-weight: bold; font-size: 15;"></span>
												</td> 
											</tr>
											<tr>
												<td colspan=2 style="background-color: #fff; opacity: 1; text-align: left;">
												<span class="font15 biru">Copyleft (ɔ) Kasmui, https://falakmu.id/, 2023</span>												</td> 
											</tr>											
										</table> 
										<table  width="100%" style="text-align: center;">
										    <tr>
										        <td width="33%"></td
										        <td width="33%">
            										<div class="button-container2" style="text-align: center;">
            										    <button title="Melihat gambar posisi matahari-bulan & arah kiblat" style="margin-top: 10px;" class="pointer" id="kotak" onclick="toggleCanvas()"><i class="fas fa-image"></i>&nbsp;Show Images</button>&nbsp;
            										    <a href="https://falakmu.id/FalakMu.apk" target="_blank" style="text-decoration: none;"><button style="margin-top: 10px;" class="pointer"><i class="fab fa-android"></i>&nbsp;Unduh Android (apk)</button></a>
            										</div>										        
										        </td>
										        <td width="33%"></td>
										    </tr>
										</table>
									</div> 	
								</td>
							
							    
								</td-->
							</tr>
						</table>
					</td> 
				</tr>
				
			</table>
			<br/>
			
			<table width="100%" cellpadding="5" cellspacing="0" id="CalcTable" style="display: flex; justify-content: space-between; border: 1px solid #ffffff; background-color: #e3f1ff; padding: 10px; gap: 10px; width: 100%;">
				<tr>
				    <td colspan="9">
			            <div class="font15 kiri tebal hitam"><span class="merah">CATATAN:</span> Data berikut menggunakan pengaturan waktu <span class="merah">WIB</span>, kecuali disebutkan lain.</div>
				    </td>
				</tr>
				<tr style="padding: 5; border: 1px solid #ffffff;" class="kiri">
					<td class="NumHeader2 borderputih">Sky Object</td>  
					<td class="NumHeader2 borderputih">Right Ascension</td>
					<td class="NumHeader2 borderputih">Declination</td>
					<td class="NumHeader2 borderputih">Azimuth</td>								
					<td class="NumHeader2 borderputih">Altitude</td>
					<td class="NumHeader2 borderputih">Elongation</td>							
					<td class="NumHeader2 borderputih">Rise</td>
					<td class="NumHeader2 borderputih">Set</td>
					<td class="NumHeader2 borderputih">Transit</td>					
				</tr>   
				<tr>
					<td class="NumHeader2 borderputih">Sun</td> 
					<td class="Numeric2 borderputih"><span id="Sun_ra"></span><br/><span id="arahSunRA"></span></td>
					<td class="Numeric2 borderputih"><span id="Sun_dec" class="Numeric2"></span><br/><span id="utaraselatan" class="Numeric2"></span></td>
					<td class="Numeric2 borderputih"><span id="Sun_az" class="Numeric2"></span><br/><span id="arahmatahari" class="Numeric2"></span></td> 
					<td title="Ketinggian matahari di atas ufuk" id="Sun_alt" class="Numeric2 borderputih" style="font-weight:bold;"></td>	
					<td rowspan="2" title="Jarak antara matahari dengan bulan"  id="elongation" class="Numeric2 borderputih" style="font-weight:bold; background-color: #fff"></td>
					<td id="Sunrise" class="Numeric2 borderputih"></td>
					<td class="Numeric2 borderputih"><span class="merah" id="Sunset"></span><br/><img id="Simpan" class="pointer" title="Sebelum klik button Tempel, pastikan sudah menghilangkan tanda Centang pada Realtime agar input Date Time terisi." src="https://falakmu.id/tempelsunset.png"></td> 
					<td id="" class="Numeric2 borderputih"><span class="merah">WL:</span> <span title="Waktu lokal" id="sunKulminasiWL"></span></td>
				</tr>          
				<tr>
					<td class="NumHeader2 borderputih">Moon</td>
					<td class="Numeric2 borderputih"><span id="Moon_ra" ></span><br/><span id="arahMoonRA"></span></td>
					<td  class="Numeric2 borderputih"><span id="Moon_dec"></span><br/><span id="arahMoondec"></span></td>
					<td class="Numeric2 borderputih"><span id="Moon_az"></span><br/><span id="arahbulan"></span></td>
					<td title="Ketinggian bulan di atas ufuk"  id="Moon_alt" class="Numeric2 borderputih" style="font-weight:bold; background-color: #fff"></td>
					<td id="Moonrise" class="Numeric2 borderputih"></td>
					<td id="Moonset" class="Numeric2 borderputih"></td>
					<td id="Kulminasi" class="Numeric2 borderputih"></td>
				</tr>
			</table>
				
			<table width="100%" cellpadding="5" cellspacing="0" id="CalcTable" style="display: flex; justify-content: space-between; border: 1px; background-color: #e3f1ff; padding: 10px; gap: 10px; width: 100%;">
				<tr>
					<td class="kiri font15" colspan="11" style="background-color: white; flex: 1;"> 
					</td>					
				</tr>
				<tr style="justify-content: space-between; border: 1px; background-color: #e3f1ff; padding: 10px; gap: 10px; width: 100%;">
					<td colspan="6"  class="NumHeader2 borderputih"><a href="https://xorpheous.itch.io/lunar-phases-simulator" target="_blank">Moon phase #1</a></td>
					<td align="center " class="Numeric3 borderputih" ><span class="Numeric3" id="Kuarter1"></span>: <span id="TglJam1"></span><br/><button id="Tempel1" title="Sebelum klik button Tempel, pastikan sudah menghilangkan tanda Centang pada Realtime agar input Date Time terisi.">Tempel</button></td>
					<td align="center "class="Numeric3 borderputih" ><span class="Numeric3" id="Kuarter2"></span>: <span id="TglJam2"></span><br/><button id="Tempel2" title="Sebelum klik button Tempel, pastikan sudah menghilangkan tanda Centang pada Realtime agar input Date Time terisi.">Tempel</button></td>
					<td align="center "class="Numeric3 borderputih" ><span class="Numeric3" id="Kuarter3"></span>: <span id="TglJam3"></span><br/><button id="Tempel3" title="Sebelum klik button Tempel, pastikan sudah menghilangkan tanda Centang pada Realtime agar input Date Time terisi.">Tempel</button></td>
					<td align="center "class="Numeric3 borderputih" ><span class="Numeric3" id="Kuarter4"></span>: <span id="TglJam4"></span><br/><button id="Tempel4" title="Sebelum klik button Tempel, pastikan sudah menghilangkan tanda Centang pada Realtime agar input Date Time terisi.">Tempel</button></td>
					<td rowspan ="2" style ="text-align: left;" class="Numeric borderputih">
						<span title="Waktu Lokal" >Midnight <span class="merah">(WL)</span>: </span><span title="Waktu Lokal" id="midnight"></span><br/>
					<span id="daylength"></span><br/>
					<span title="jeda antara sunset dengan moonset" class="Numeric3"></span><span title="jeda antara sunset dengan moonset" id="Selisih" class="Numeric"></span><br/>
					<span class="Numeric3"></span><span id="Jarak" class="Numeric"></span><br/>
					<span class="Numeric" id="equationOfWaktu"></span>
					</td> 
				</tr>																		
				<tr>
					<td  colspan="6" class="NumHeader2 borderputih"><a href="https://contrib.pbslearningmedia.org/WGBH/buac19/buac19-int-moonphaseint/index.html" target="_blank">Moon phase #2</a></td>
					<td align="center "class="Numeric3 borderputih" ><span class="Numeric3" id="Quarter1"></span>: <span id="DateTime1"></span><br/><button id="Tempel11" title="Sebelum klik button Tempel, pastikan sudah menghilangkan tanda Centang pada Realtime agar input Date Time terisi.">Tempel</button></td>
					<td align="center "class="Numeric3 borderputih" ><span class="Numeric3" id="Quarter2"></span>: <span id="DateTime2"></span><br/><button id="Tempel22" title="Sebelum klik button Tempel, pastikan sudah menghilangkan tanda Centang pada Realtime agar input Date Time terisi.">Tempel</button></td>
					<td align="center "class="Numeric3 borderputih" ><span class="Numeric3" id="Quarter3"></span>: <span id="DateTime3"></span><br/><button id="Tempel33" title="Sebelum klik button Tempel, pastikan sudah menghilangkan tanda Centang pada Realtime agar input Date Time terisi.">Tempel</button></td>
					<td align="center "class="Numeric3 borderputih" ><span class="Numeric3" id="Quarter4"></span>: <span id="DateTime4"></span><br/><button id="Tempel44" title="Sebelum klik button Tempel, pastikan sudah menghilangkan tanda Centang pada Realtime agar input Date Time terisi.">Tempel</button></td>
					   
															
				</tr>	
				<tr>
					<td class="kanan font15" colspan="11" style="background-color: #ececfb;"> 
	
					</td>					
				</tr>				
				<tr>
					<td class="kiri font15" colspan="11" style="background-color: #ffffff;"> 
					<div id="solartime"></div><br/>
					</td>					
				</tr>
				
			
				
		</table>
        <div class="button-container" style="text-align: center; float: right;">
            <span style="margin-top: 5px; cursor: pointer; text-decoration: none;" id="printButton4"><button>Print Moonphase</button></span>&nbsp;
            <span style="margin-top: 5px; cursor: pointer; text-decoration: none;" id="printButton3"><button>Print Layar</button></span>&nbsp;
<style>
/* Style untuk tombol ShoutBox */
.shoutbox-button {
    padding: 5px 10px;
    background-color: #007bff;
    color: #fff;
    font-size: 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
    z-index: 9998;
}

.shoutbox-button:hover {
    background-color: #0056b3;
}

/* Style untuk modal ShoutBox */
.shoutbox-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
}

.shoutbox-modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 600px;
    max-height: 80vh; /* Membatasi tinggi modal hingga 80% dari tinggi viewport */
    border-radius: 8px;
    position: relative;
    overflow-y: auto; /* Menambahkan scroll jika konten melebihi tinggi modal */
}

.shoutbox-close {
    color: #aaa;
    position: absolute;
    right: 20px;
    top: 10px;
    color: red;
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10000;
}

.shoutbox-close:hover,
.shoutbox-close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.shoutbox-header {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
}

.shoutbox-messages {
    max-height: 50vh; /* Membatasi tinggi pesan hingga 50% dari tinggi viewport */
    overflow-y: auto; /* Menambahkan scroll jika pesan melebihi tinggi yang ditetapkan */
    margin-bottom: 20px; /* Memberikan sedikit ruang di bawah pesan */
}

.shoutbox-message {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    font-size: 20px;
    margin-bottom: 5px;
    border-radius: 5px;
}

.shoutbox-form {
    display: flex;
    flex-direction: column;
}

.shoutbox-form input[type="text"], 
.shoutbox-form textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 20px;
}

.shoutbox-form input[type="submit"] {
    padding: 10px;
    background-color: #28a745;
    border: none;
    color: #fff;
    font-size: 30px;
    border-radius: 5px;
    cursor: pointer;
}

.shoutbox-form input[type="submit"]:hover {
    background-color: #218838;
}
</style>

<span style="margin-top: 5px; cursor: pointer; text-decoration: none;" id="printButton3"><button style="background-color: yellow;" title="Silahkan kirim pesan di kotak pesan ini!" onclick="document.getElementById('shoutbox-modal').style.display='block'">ShoutBox</button></span>

<div id="shoutbox-modal" class="shoutbox-modal">
    <div class="shoutbox-modal-content">
        <span class="shoutbox-close" onclick="document.getElementById('shoutbox-modal').style.display='none'">&times;</span>
        <div class="shoutbox-header" >Shoutbox</div>
        <div class="shoutbox-messages">
            <div class='shoutbox-message'><strong>Kasmui:</strong> Assalamu alaikum ww. Silahkan sampaikan pesan dan informasi di ShoutBox ini!</div><div class='shoutbox-message'><strong>Cora McColl:</strong> Hello,
</div><div class='shoutbox-message'><strong>:</strong> </div><div class='shoutbox-message'><strong>:</strong> </div>        </div>
        <form method="post" class="shoutbox-form">
            <input type="text" name="nama" placeholder="Masukkan Nama Anda" required>
            <textarea name="pesan" placeholder="Tulis pesan Anda..." rows="3" required></textarea>
            <input type="submit" value="Kirim" onclick="event.stopPropagation();">
        </form>
        <p style="text-align: center;"><a href="https://falakmu.id" target="_blank" title="Akses website FalakMu."style="text-align: center; text-decoration: none;"><small>https://falakmu.id</small></a></p>
    </div>
    
</div>

</div>
        <br/><br/><br/>
		
				
			
			<script>
//===			
				function printImage() {
				  const element = document.getElementById('imgMoonphase');

html2canvas(element)
					.then(canvas => {
					  const imgData = canvas.toDataURL('image/png');
					  saveAs(imgData, 'gambar_moonphase.png'); 
					});
				}

const button = document.getElementById('printButton');
				button.addEventListener('click', printImage);
//===
				function printImage2() {
				  const element = document.getElementById('imgMoonphase2');

html2canvas(element)
					.then(canvas => {
					  const imgData = canvas.toDataURL('image/png');
					  saveAs(imgData, 'gambar_layar.png'); 
					});
				}

const button2 = document.getElementById('printButton2');
				button2.addEventListener('click', printImage2);
//===				
				function printImage3() {
				  const element = document.getElementById('imgMoonphase2');

html2canvas(element)
					.then(canvas => {
					  const imgData = canvas.toDataURL('image/png');
					  saveAs(imgData, 'gambar_layar.png'); 
					});
				}

const button3 = document.getElementById('printButton3');
				button3.addEventListener('click', printImage3);
//===				
				function printImage4() {
				  const element = document.getElementById('imgMoonphase');

html2canvas(element)
					.then(canvas => {
					  const imgData = canvas.toDataURL('image/png');
					  saveAs(imgData, 'gambar_moonphase.png'); 
					});
				}

const button4 = document.getElementById('printButton4');
				button4.addEventListener('click', printImage4);

// Mendeteksi jenis perangkat
			  function detectDevice() {
				var userAgent = navigator.userAgent || navigator.vendor || window.opera;

if (/android/i.test(userAgent)) {
				  return 'Android';
				}

if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
				  return 'iOS';
				}

return 'Desktop';
			  }

// Menampilkan tampilan berbeda berdasarkan jenis perangkat
			  function setDeviceSpecificStyles() {
				var device = detectDevice();
				var weatherInfoElement = document.getElementById('weather-info');
				var qiblaInfoElement = document.getElementById('qibla-info');
				var prayTimesInfoElement = document.getElementById('praytimes-info');		
				var jadwalInfoElement = document.getElementById('jadwal-info');
				//var infoFitur = document.getElementById('infoFitur');
				var infoMenu = document.getElementById('infoMenu');
				/*
				if (device !== 'Desktop') {
				  // Menghapus elemen ketika menggunakan perangkat selain desktop
				  weatherInfoElement.style.display = 'none';
				  qiblaInfoElement.style.display = 'none';
				  prayTimesInfoElement.style.display = 'none';
				  petaInfoElement.style.display = 'none';
				}
				*/
				if (device !== 'Desktop') {
				  // Menghapus elemen ketika menggunakan perangkat selain desktop
				  jadwalInfoElement.style.display = 'none';
				}	
				if (device == 'Desktop') {
				  // Menghapus elemen ketika menggunakan perangkat selain desktop
				  //infoFitur.style.display = 'none';
				  infoMenu.style.display = 'none';
				}				
			  }

// Memanggil fungsi setDeviceSpecificStyles saat halaman selesai dimuat
			  window.addEventListener('load', setDeviceSpecificStyles);

var scene = new THREE.Scene();
			var width = 35;
			var height = 35;
			var camera = new THREE.PerspectiveCamera(30, width / height, 0.1, 1000); /* Sesuaikan dengan lebar dan tinggi animasi */
			var renderer = new THREE.WebGLRenderer();
			renderer.setSize(width, height); /* Sesuaikan dengan lebar dan tinggi animasi */
			document.getElementById("canvas-animation").appendChild(renderer.domElement);
			var geometry = new THREE.SphereGeometry(2, 32, 32);
			var material = new THREE.MeshBasicMaterial({ color: 0xffffff }); 
			var earth = new THREE.Mesh(geometry, material);
			scene.add(earth);
			var geometry2 = new THREE.SphereGeometry(2, 32, 32);
			var material2 = new THREE.MeshBasicMaterial({ color: 0x000000 });
			var moon = new THREE.Mesh(geometry2, material2);
			scene.add(moon);

camera.position.z = 8;

function animate() {
			  requestAnimationFrame(animate);
			  moon.position.x = Math.sin(Date.now() * 0.001) * 2;
			  moon.position.z = Math.cos(Date.now() * 0.001) * 2;
			  renderer.render(scene, camera);
			}
			animate();

function convertToHMS(decimal) {
					  let hours = Math.floor(decimal);
					  let minutes = Math.floor((decimal - hours) * 60);
					  let seconds = Math.round(((decimal - hours - minutes / 60) * 3600) * 100) / 100;
					  return hours + " jam, " + minutes + " menit, " + seconds + " detik";
					}
					
					function convertToDHMS(decimal) { 
					  let days = Math.floor(decimal);
					  let hours = Math.floor((decimal - days) * 24);
					  let minutes = Math.floor(((decimal - days) * 24 - hours) * 60);
					  let seconds = Math.floor((((decimal - days) * 24 - hours) * 60 - minutes) * 60);

return days + " hari, " + hours + " jam, " + minutes + " menit, " + seconds + " detik";
					}
			
					
					function convertToDMS(decimal) {
					  let degrees = Math.floor(decimal);
					  
					  let minutes = Math.floor((decimal - degrees) * 60);
					  let seconds = ((decimal - degrees - minutes / 60) * 3600).toFixed(2);
					  
					  return degrees + "° " + minutes + "' " + seconds + '"';
					}

var dropdownLinks = document.querySelectorAll('.dropdown a');
				dropdownLinks.forEach(function(link) {
					link.addEventListener('click', function(event) {
						event.preventDefault();
						window.open(this.getAttribute('href'), '_blank');
					});
				});

var imageDir = "https://falakmu.id/kalender/images/moon/"; // Ubah sesuai dengan folder tempat gambar

// Fungsi untuk menampilkan gambar berdasarkan nomor
				function displayImage(number) {
				  // Membuat elemen <img>
				  var img = document.createElement("img");
				  // Mengatur sumber gambar
				  img.src = imageDir + images[number];
				  // Mengatur lebar gambar (opsional)
				  img.width = 125; // Ubah sesuai kebutuhan
				  
				  // Menghapus gambar sebelumnya (jika ada)
				  var container = document.getElementById("imageContainer");
				  container.innerHTML = "";
				  
				  // Menambahkan gambar ke dalam kontainer
				  container.appendChild(img);
				}

document.addEventListener("DOMContentLoaded", function() {
				// Mendapatkan elemen input
				var latitudeInput = document.getElementById("EditLatitude");
				var longitudeInput = document.getElementById("EditLongitude");
				var elevationInput = document.getElementById("EditElevation");
				var gmtInput = document.getElementById("EditGmt"); 
				var namaInput = document.getElementById("EditNama");
				var lokasiInput = document.getElementById("EditLokasi");

// Membuat elemen select   
				var select = document.createElement("select");

// Membuat dan menambahkan pilihan pada select
				for (var i = 0; i < pilihan.length; i++) {
				  var option = document.createElement("option");
				  option.value = i;
				  option.text = pilihan[i].nama;
				  select.appendChild(option);
				}

// Menambahkan event listener pada select untuk mengubah nilai input
				select.addEventListener("change", function() {
				  var selectedIndex = select.options[select.selectedIndex].value;
				  latitudeInput.value = pilihan[selectedIndex].latitude;
				  longitudeInput.value = pilihan[selectedIndex].longitude;
				  elevationInput.value = pilihan[selectedIndex].elevation;
				  gmtInput.value = pilihan[selectedIndex].gmt;
				  namaInput.value = pilihan[selectedIndex].nama;
				  lokasiInput.value = pilihan[selectedIndex].nama;
				});

// Menambahkan select ke dalam dokumen
				var container = document.getElementById("container"); // Ganti "container" dengan ID elemen yang sesuai
				container.appendChild(select);
			  });

function copyToClipboard(value) {
				  var dummy = document.createElement("textarea");
				  document.body.appendChild(dummy);
				  dummy.value = value;
				  dummy.select();
				  document.execCommand("copy");
				  document.body.removeChild(dummy); 
				}

// Mendapatkan elemen tombol "Simpan"
				var simpanButton = document.getElementById("Simpan");

// Menambahkan event listener pada tombol "Simpan"
				simpanButton.addEventListener("click", function() {
				  // Mendapatkan nilai dari elemen <td> dengan ID "Sunset"
				  var sunsetValue = document.getElementById("Sunset").textContent.trim();

// Menyimpan nilai ke dalam memori
				  copyToClipboard(sunsetValue);

// Menempelkan nilai ke dalam elemen input dengan ID "DateTimeBox"
				  var dateTimeInput = document.getElementById("DateTimeBox");
				  dateTimeInput.value = sunsetValue;
				  
				  var statussunset = "SUNSET"; 				  
				  document.getElementById("statussunset").innerHTML = statussunset;
				  
				});
							
				// Mendapatkan referensi ke elemen tombol Simpan
				var simpanButton = document.getElementById("Simpan");

// Mendapatkan referensi ke elemen span dengan ID Sunset
				var sunsetSpan = document.getElementById("Sunset");

// Mendefinisikan variabel statussunset
				var statussunset;

// Menambahkan event listener untuk klik pada tombol Simpan
				simpanButton.addEventListener("click", function() {
				  // Memberikan nilai "Sunset " pada variabel statussunset
				  statussunset = "SUNSET";
				  //document.getElementById("statussunset").innerHTML = statussunset;
				});

function kuarter1(value) {
				  var dummy = document.createElement("textarea");
				  document.body.appendChild(dummy);
				  dummy.value = value;
				  dummy.select();
				  document.execCommand("copy");
				  document.body.removeChild(dummy);
				}

// Mendapatkan elemen tombol "Tempel"
				var tempelButton = document.getElementById("Tempel1");

// Menambahkan event listener pada tombol "Tempel1"
				tempelButton.addEventListener("click", function() {
				  // Mendapatkan nilai dari elemen <td> dengan ID "Kuarter1"
				  var kuarter1Value = document.getElementById("TglJam1").textContent.trim();

// Menyimpan nilai ke dalam memori
				  kuarter1(kuarter1Value);

// Menempelkan nilai ke dalam elemen input dengan ID "DateTimeBox"
				  var dateTimeInput = document.getElementById("DateTimeBox");
				  dateTimeInput.value = kuarter1Value;
				  document.getElementById("statussunset").innerHTML = "";
				});

function kuarter2(value) {
				  var dummy = document.createElement("textarea");
				  document.body.appendChild(dummy);
				  dummy.value = value;  
				  dummy.select();
				  document.execCommand("copy");
				  document.body.removeChild(dummy);
				}

// Mendapatkan elemen tombol "Tempel"
				var tempelButton = document.getElementById("Tempel2");

// Menambahkan event listener pada tombol "Tempel1"
				tempelButton.addEventListener("click", function() {
				  // Mendapatkan nilai dari elemen <td> dengan ID "Kuarter1"
				  var kuarter2Value = document.getElementById("TglJam2").textContent.trim();

// Menyimpan nilai ke dalam memori
				  kuarter2(kuarter2Value);

// Menempelkan nilai ke dalam elemen input dengan ID "DateTimeBox"
				  var dateTimeInput = document.getElementById("DateTimeBox");
				  dateTimeInput.value = kuarter2Value;
				  document.getElementById("statussunset").innerHTML = "";
				});

function kuarter3(value) {
				  var dummy = document.createElement("textarea");
				  document.body.appendChild(dummy);
				  dummy.value = value;
				  dummy.select();
				  document.execCommand("copy");         
				  document.body.removeChild(dummy);
				}

// Mendapatkan elemen tombol "Tempel"
				var tempelButton = document.getElementById("Tempel3");

// Menambahkan event listener pada tombol "Tempel3"
				tempelButton.addEventListener("click", function() {
				  // Mendapatkan nilai dari elemen <td> dengan ID "Kuarter1"
				  var kuarter3Value = document.getElementById("TglJam3").textContent.trim();

// Menyimpan nilai ke dalam memori
				  kuarter3(kuarter3Value);

// Menempelkan nilai ke dalam elemen input dengan ID "DateTimeBox"
				  var dateTimeInput = document.getElementById("DateTimeBox");
				  dateTimeInput.value = kuarter3Value;
				  document.getElementById("statussunset").innerHTML = "";
				});

function kuarter4(value) {
				  var dummy = document.createElement("textarea");
				  document.body.appendChild(dummy);
				  dummy.value = value;
				  dummy.select();
				  document.execCommand("copy");
				  document.body.removeChild(dummy);
				}

// Mendapatkan elemen tombol "Tempel"
				var tempelButton = document.getElementById("Tempel4");

// Menambahkan event listener pada tombol "Tempel1"
				tempelButton.addEventListener("click", function() {
				  // Mendapatkan nilai dari elemen <td> dengan ID "Kuarter1"
				  var kuarter4Value = document.getElementById("TglJam4").textContent.trim();

// Menyimpan nilai ke dalam memori
				  kuarter4(kuarter4Value);

// Menempelkan nilai ke dalam elemen input dengan ID "DateTimeBox"
				  var dateTimeInput = document.getElementById("DateTimeBox");
				  dateTimeInput.value = kuarter4Value;
				  document.getElementById("statussunset").innerHTML = "";
				});

function quarter1(value) {
				  var dummy = document.createElement("textarea");
				  document.body.appendChild(dummy);
				  dummy.value = value;
				  dummy.select();
				  document.execCommand("copy");
				  document.body.removeChild(dummy);
				}

// Mendapatkan elemen tombol "Tempel"
				var tempelButton = document.getElementById("Tempel11");

// Menyimpan nilai ke dalam memori
				  quarter1(kuarter1Value);

function quarter2(value) {
				  var dummy = document.createElement("textarea");
				  document.body.appendChild(dummy);
				  dummy.value = value;
				  dummy.select();
				  document.execCommand("copy");
				  document.body.removeChild(dummy);
				}

// Mendapatkan elemen tombol "Tempel"
				var tempelButton = document.getElementById("Tempel22");

// Menambahkan event listener pada tombol "Tempel1"
				tempelButton.addEventListener("click", function() {
				  // Mendapatkan nilai dari elemen <td> dengan ID "Kuarter1"
				  var kuarter2Value = document.getElementById("DateTime2").textContent.trim();

// Menyimpan nilai ke dalam memori
				  quarter2(kuarter2Value);

function quarter3(value) {
				  var dummy = document.createElement("textarea");
				  document.body.appendChild(dummy);
				  dummy.value = value;
				  dummy.select();
				  document.execCommand("copy");
				  document.body.removeChild(dummy);
				}

// Mendapatkan elemen tombol "Tempel"
				var tempelButton = document.getElementById("Tempel33");

// Menyimpan nilai ke dalam memori
				  quarter3(kuarter3Value);

function quarter4(value) {
				  var dummy = document.createElement("textarea");
				  document.body.appendChild(dummy);
				  dummy.value = value;
				  dummy.select();
				  document.execCommand("copy");
				  document.body.removeChild(dummy);
				}

// Mendapatkan elemen tombol "Tempel"
				var tempelButton = document.getElementById("Tempel44");

// Menambahkan event listener pada tombol "Tempel1"
				tempelButton.addEventListener("click", function() {
				  // Mendapatkan nilai dari elemen <td> dengan ID "Kuarter1"
				  var kuarter4Value = document.getElementById("DateTime4").textContent.trim();

// Menyimpan nilai ke dalam memori
				  quarter4(kuarter4Value);

// Mendapatkan elemen input tanggal
				var dateTimeBox = document.getElementById("DateTimeBox");
				
				// Fungsi untuk menambah tahun
				function addYear() {
				  // Mendapatkan nilai tanggal dari elemen input
				  var selectedDate = new Date(dateTimeBox.value);

// Menambah 1 tahun
				  selectedDate.setFullYear(selectedDate.getFullYear() + 1);

// Mengubah nilai elemen input dengan tanggal yang telah diubah
				  var selectedDateString = selectedDate.toISOString().slice(0, 19).replace("T", " ");
				  dateTimeBox.value = selectedDateString;
				}

// Fungsi untuk mengurangi tahun
				function subtractYear() {
				  // Mendapatkan nilai tanggal dari elemen input
				  var selectedDate = new Date(dateTimeBox.value);

// Mengurangi 1 tahun
				  selectedDate.setFullYear(selectedDate.getFullYear() - 1);

// Mendapatkan tombol +1 dan -1
				var buttonPlusOneYear = document.getElementById("buttonPlusOneYear");
				var buttonMinusOneYear = document.getElementById("buttonMinusOneYear");

// Menambahkan event listener pada tombol +1 tahun
				buttonPlusOneYear.addEventListener("click", addYear);

// Menambahkan event listener pada tombol -1 tahun
				buttonMinusOneYear.addEventListener("click", subtractYear);
//==
				// Mendapatkan tombol +1 dan -1
				var buttonPlusOneMonth = document.getElementById("buttonPlusOneMonth");
				var buttonMinusOneMonth = document.getElementById("buttonMinusOneMonth");

// Fungsi untuk menambah bulan
				function addMonth() {
				  // Mendapatkan nilai tanggal dari elemen input
				  var selectedDate = new Date(dateTimeBox.value);

// Menambah 1 bulan
				  selectedDate.setMonth(selectedDate.getMonth() + 1);

// Fungsi untuk mengurangi bulan
				function subtractMonth() {
				  // Mendapatkan nilai tanggal dari elemen input
				  var selectedDate = new Date(dateTimeBox.value);

// Mengurangi 1 bulan
				  selectedDate.setMonth(selectedDate.getMonth() - 1);

// Menambahkan event listener pada tombol +1 bulan
				buttonPlusOneMonth.addEventListener("click", addMonth);

// Menambahkan event listener pada tombol -1 bulan
				buttonMinusOneMonth.addEventListener("click", subtractMonth);

//==
			  // Mendapatkan tombol +1 dan -1
			  var buttonPlusOne = document.getElementById("buttonPlusOne");
			  var buttonMinusOne = document.getElementById("buttonMinusOne");

// Fungsi untuk menambah tanggal
			  function addDate() {
				// Mendapatkan nilai tanggal dari elemen input
				var selectedDate = new Date(dateTimeBox.value);

// Menambah 1 hari
				selectedDate.setDate(selectedDate.getDate() + 1);

// Mengubah nilai elemen input dengan tanggal yang telah diubah
				var selectedDateString = selectedDate.toISOString().slice(0, 19).replace("T", " ");
				dateTimeBox.value = selectedDateString;
			  }

// Fungsi untuk mengurangi tanggal
			  function subtractDate() {
				// Mendapatkan nilai tanggal dari elemen input
				var selectedDate = new Date(dateTimeBox.value);

// Mengurangi 1 hari
				selectedDate.setDate(selectedDate.getDate() - 1);

// Mengubah nilai elemen input dengan tanggal yang telah diubah
				var selectedDateString = selectedDate.toISOString().slice(0, 19).replace("T", " ");
				dateTimeBox.value = selectedDateString;
			  }

// Menambahkan event listener pada tombol +1
			  buttonPlusOne.addEventListener("click", addDate); 
			  
			  // Menambahkan event listener pada tombol -1
			  buttonMinusOne.addEventListener("click", subtractDate);				  
//==

// Mendapatkan tombol +1H dan -1H
			var buttonPlusOneHour = document.getElementById("buttonPlusOneHour");
			var buttonMinusOneHour = document.getElementById("buttonMinusOneHour");

// Fungsi untuk menambah 1 jam
			function addOneHour() {
			  // Mendapatkan nilai tanggal dan waktu dari elemen input
			  var selectedDateTime = new Date(dateTimeBox.value);
			  
			  // Menambah 1 jam
			  selectedDateTime.setHours(selectedDateTime.getHours() + 1);
			  
			  // Mendapatkan komponen tahun, bulan, tanggal, jam, menit, dan detik
			  var year = selectedDateTime.getFullYear();
			  var month = String(selectedDateTime.getMonth() + 1).padStart(2, "0");
			  var day = String(selectedDateTime.getDate()).padStart(2, "0");
			  var hours = String(selectedDateTime.getHours()).padStart(2, "0");
			  var minutes = String(selectedDateTime.getMinutes()).padStart(2, "0");
			  var seconds = String(selectedDateTime.getSeconds()).padStart(2, "0");
			  
			  // Mengubah nilai elemen input dengan tanggal dan waktu yang telah diubah
			  dateTimeBox.value = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
			}

// Fungsi untuk mengurangi 1 jam
			function subtractOneHour() {
			  // Mendapatkan nilai tanggal dan waktu dari elemen input
			  var selectedDateTime = new Date(dateTimeBox.value);
			  
			  // Mengurangi 1 jam
			  selectedDateTime.setHours(selectedDateTime.getHours() - 1);
			  
			  // Mendapatkan komponen tahun, bulan, tanggal, jam, menit, dan detik
			  var year = selectedDateTime.getFullYear();
			  var month = String(selectedDateTime.getMonth() + 1).padStart(2, "0");
			  var day = String(selectedDateTime.getDate()).padStart(2, "0");
			  var hours = String(selectedDateTime.getHours()).padStart(2, "0");
			  var minutes = String(selectedDateTime.getMinutes()).padStart(2, "0");
			  var seconds = String(selectedDateTime.getSeconds()).padStart(2, "0");
			  
			  // Mengubah nilai elemen input dengan tanggal dan waktu yang telah diubah
			  dateTimeBox.value = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
			}

// Menambahkan event listener pada tombol +1H
			buttonPlusOneHour.addEventListener("click", addOneHour);

// Menambahkan event listener pada tombol -1H
			buttonMinusOneHour.addEventListener("click", subtractOneHour);
//==
			// Mendapatkan tombol +1H dan -1H
			var buttonPlusOneMin = document.getElementById("buttonPlusOneMin");
			var buttonMinusOneMin = document.getElementById("buttonMinusOneMin");

// Fungsi untuk menambah 1 jam
			function addOneMin() {
			  // Mendapatkan nilai tanggal dan waktu dari elemen input
			  var selectedDateTime = new Date(dateTimeBox.value);
			  
			  // Menambah 1 jam
			  selectedDateTime.setMinutes(selectedDateTime.getMinutes() + 1);
			  
			  // Mendapatkan komponen tahun, bulan, tanggal, jam, menit, dan detik
			  var year = selectedDateTime.getFullYear();
			  var month = String(selectedDateTime.getMonth() + 1).padStart(2, "0");
			  var day = String(selectedDateTime.getDate()).padStart(2, "0");
			  var hours = String(selectedDateTime.getHours()).padStart(2, "0");
			  var minutes = String(selectedDateTime.getMinutes()).padStart(2, "0");
			  var seconds = String(selectedDateTime.getSeconds()).padStart(2, "0");
			  
			  // Mengubah nilai elemen input dengan tanggal dan waktu yang telah diubah
			  dateTimeBox.value = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
			}

// Fungsi untuk mengurangi 1 jam
			function subtractOneMin() {
			  // Mendapatkan nilai tanggal dan waktu dari elemen input
			  var selectedDateTime = new Date(dateTimeBox.value);
			  
			  // Mengurangi 1 jam
			  selectedDateTime.setMinutes(selectedDateTime.getMinutes() - 1);
			  
			  // Mendapatkan komponen tahun, bulan, tanggal, jam, menit, dan detik
			  var year = selectedDateTime.getFullYear();
			  var month = String(selectedDateTime.getMonth() + 1).padStart(2, "0");
			  var day = String(selectedDateTime.getDate()).padStart(2, "0");
			  var hours = String(selectedDateTime.getHours()).padStart(2, "0");
			  var minutes = String(selectedDateTime.getMinutes()).padStart(2, "0");
			  var seconds = String(selectedDateTime.getSeconds()).padStart(2, "0");
			  
			  // Mengubah nilai elemen input dengan tanggal dan waktu yang telah diubah
			  dateTimeBox.value = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
			}

// Menambahkan event listener pada tombol +1H
			buttonPlusOneMin.addEventListener("click", addOneMin);

// Menambahkan event listener pada tombol -1H
			buttonMinusOneMin.addEventListener("click", subtractOneMin);
//==

// Mendapatkan referensi tombol dengan ID "00"
				var button00 = document.getElementById("00");

// Menambahkan event listener pada tombol "00"
				button00.addEventListener("click", function() {
				  // Mendapatkan nilai saat ini dari elemen DateTimeBox
				  var currentDateTime = dateTimeBox.value;
				  
				  // Memisahkan tanggal dan waktu
				  var dateTimeParts = currentDateTime.split(" ");
				  var currentDate = dateTimeParts[0];
				  
				  // Mengubah waktu menjadi "00:00:00"
				  var formattedDateTime = currentDate + " 00:00:00";
				  
				  // Mengubah nilai elemen DateTimeBox menjadi hasil yang diformat
				  dateTimeBox.value = formattedDateTime;
				});

// Fungsi untuk mengonversi sudut dalam derajat ke radian
			function toRadians(angle) {
			  return angle * (Math.PI / 180);
			}

// Fungsi untuk mengonversi waktu dalam menit menjadi format HH:mm:ss
			function formatTime(minutes) {
			  var hours = Math.floor(minutes / 60);
			  var remainingMinutes = minutes % 60;
			  remainingMinutes = remainingMinutes.toFixed(0);

var formattedTime = hours.toString().padStart(2, "0") + ":" + remainingMinutes.toString().padStart(2, "0") + ":00";

return formattedTime;
			}

// Menghitung umur bulan, fase bulan, dan konstelasi zodiak
    			function calculateMoonInformation(date) {
    			  var moonData = MoonCalc.datasForDay(date);
    			  var moonAge = moonData.age.toFixed(2);
    			  var moonPhase = moonData.phase;
    			  var zodiacConstellation = moonData.constellation;
    			  var trajectory = moonData.trajectory;
    
    			  return {
    				'Moon Age': moonAge + ' days',
    				'Moon Phase': moonPhase,
    				'Zodiac Constellation': zodiacConstellation,
    				'Trajectory': trajectory 
    			  };
    			}

function drawLine(diameter, angle, sundec, rashdulkiblat, sunaz) {
				  const canvas = document.getElementById('circleCanvas'); 
				  const context = canvas.getContext('2d');

context.clearRect(0, 0, canvas.width, canvas.height);
				  context.strokeStyle = 'black';
				  context.lineWidth = 1;

const centerX = canvas.width / 2;
				  const centerY = canvas.height / 2;
				  const radius = diameter / 2;

const radians = (angle - 90) * Math.PI / 180;

const endX = centerX + radius * Math.cos(radians);
				  const endY = centerY + radius * Math.sin(radians);
				  
				  const canvasWidth = canvas.width;
				  const canvasHeight = canvas.height;
				  
				  // Menggambar kotak bergaris
				  context.beginPath();
				  context.rect(0, 0, canvasWidth, canvasHeight);
				  context.strokeStyle = 'gray';
				  context.lineWidth = 1;
				  context.stroke();

context.beginPath();
				  context.moveTo(centerX, centerY);
				  context.lineTo(endX, endY);
				  context.stroke();
				  
				  context.beginPath();
				  context.arc(centerX, centerY, radius / 20, 0, 2 * Math.PI);
				  context.fillStyle = 'black';
				  context.fill();
				  
				  context.beginPath();
				  context.arc(centerX, centerY, radius, 0, 2 * Math.PI);
				  context.strokeStyle = 'gray';
				  context.lineWidth = 1;
				  context.stroke();	
				  
				  // Menggambar garis dari (centerX, centerY) ke titik paling atas lingkaran (titik sudut nol Utara)
				  context.beginPath();
				  context.moveTo(centerX, centerY);
				  context.lineTo(centerX, centerY - radius);
				  context.strokeStyle = 'red'; // Ubah warna garis menjadi merah (red)
				  context.lineWidth = 1;
				  context.stroke();
				  
				  context.font = '12px Arial';
				  context.fillStyle = 'black';
				  context.textAlign = 'center';
				  context.fillText(angle, centerX, centerY + 20);	
				  
				// Menampilkan harga sundex rashdulkiblat
				  context.font = '12px Arial';
				  context.fillStyle = 'blue';
				  context.textAlign = 'center';
				  context.fillText('SunDec.: '+sundec+ ', SunAz.: '+sunaz, canvasWidth / 2, canvasHeight - 10);
				  
				  context.font = '12px Arial';
				  context.fillStyle = 'red';
				  context.textAlign = 'center'; 
				  context.fillText(rashdulkiblat, canvasWidth / 2, 20);
				  
				  context.font = '12px Arial';
				  context.fillStyle = 'red';
				  context.textAlign = 'center';
				  //context.fillText(qiblaTime2 +'± 7 menit', canvasWidth / 2, 20)				  
				}

// Simulasi posisi bulan dan matahari			
				function drawMoonAndSun(positionMoon, positionSun, elongation, dekBulan, dekMatahari,selisih) {
				  const canvas = document.getElementById('moonSunCanvas');
				  const context = canvas.getContext('2d');

const canvasWidth = canvas.width;
				  const canvasHeight = canvas.height;

context.clearRect(0, 0, canvasWidth, canvasHeight);

// Menggambar kotak bergaris
				  context.beginPath();
				  context.rect(0, 0, canvasWidth, canvasHeight);
				  context.strokeStyle = 'gray';
				  context.lineWidth = 1;
				  context.stroke();

// Menggambar horizon (garis hitam)
				  context.beginPath();
				  context.moveTo(0, canvasHeight / 2);
				  context.lineTo(canvasWidth, canvasHeight / 2);
				  context.strokeStyle = 'lightblue';
				  context.lineWidth = 1;
				  context.stroke();

// Mengatur skala panjang
				  const scale = canvasHeight / 100;

// Mengatur posisi bulan dan matahari pada batas lebar kanvas
				  if (positionMoon < -canvasHeight / 2) positionMoon = -canvasHeight / 2;
				  else if (positionMoon > canvasHeight / 2) positionMoon = canvasHeight / 2;

if (positionSun < -canvasHeight / 2) positionSun = -canvasHeight / 2;
				  else if (positionSun > canvasHeight / 2) positionSun = canvasHeight / 2;

// Mengatur posisi kiri atau kanan Bulan terhadap Matahari berdasarkan deklinasi
				  let moonX, sunX;
				  if (dekBulan < dekMatahari) {
					moonX = canvasWidth / 2 + elongation / 2 / scale;
					sunX = canvasWidth / 2 - elongation / 2 / scale;
				  } else {
					moonX = canvasWidth / 2 - elongation / 2 / scale;
					sunX = canvasWidth / 2 + elongation / 2 / scale;
				  }

// Menggambar bulan
				  const moonRadius = 5;
				  const moonY = canvasHeight / 2 - positionMoon;
				  context.beginPath();
				  context.arc(moonX, moonY, moonRadius, 0, 2 * Math.PI);
				  context.fillStyle = 'black';
				  context.fill();

// Menampilkan harga positionMoon di samping lingkaran bulan
				  context.font = '12px Arial';
				  context.fillStyle = 'black';
				  context.textAlign = 'right';
				  context.fillText(positionMoon+'°', moonX - moonRadius - 5, moonY + 4);

// Menampilkan harga elongation
				  context.font = '12px Arial';
				  context.fillStyle = 'blue';
				  context.textAlign = 'center';
				  context.fillText('Elong = ' + elongation + '°, Lag T = ' + selisih, canvasWidth / 2, canvasHeight - 10);
				  
// Menggambar matahari
				  const sunRadius = 10;
				  const sunY = canvasHeight / 2 - positionSun;
				  context.beginPath();
				  context.arc(sunX, sunY, sunRadius, 0, 2 * Math.PI);
				  context.fillStyle = 'red';
				  context.fill();

// Menggambar garis antara lingkaran bulan dengan lingkaran matahari
				  context.beginPath();
				  context.moveTo(moonX, moonY);
				  context.lineTo(sunX, sunY);
				  context.strokeStyle = 'gray';
				  context.lineWidth = 1;
				  context.stroke();

// Menggambar garis dari tengah lingkaran bulan ke garis datar (garis ufuk)
				  context.beginPath();
				  context.moveTo(moonX, moonY);
				  context.lineTo(moonX, canvasHeight / 2);
				  context.strokeStyle = 'gray';
				  context.lineWidth = 1;
				  context.stroke();

// Menggambar garis dari tengah lingkaran matahari ke garis datar (garis ufuk)
				  context.beginPath();
				  context.moveTo(sunX, sunY);
				  context.lineTo(sunX, canvasHeight / 2);
				  context.strokeStyle = 'gray';
				  context.lineWidth = 1;
				  context.stroke();

// Menampilkan harga positionSun di samping lingkaran matahari
				  context.font = '12px Arial';
				  context.fillStyle = 'red';
				  context.textAlign = 'left';
				  context.fillText(positionSun+'°', sunX + sunRadius + 5, sunY + 4 + sunRadius/2);
				}

function toggleCanvas() {
				  var circleCanvas = document.getElementById("circleCanvas");
				  var moonSunCanvas = document.getElementById("moonSunCanvas");
				  var arahKiblat = document.getElementById("arahKiblat");
				  var posisiBulanMatahari = document.getElementById("posisiBulanMatahari");
				  var button = document.getElementById("kotak");

if (circleCanvas.style.display === "none") {
					circleCanvas.style.display = "block";
					arahKiblat.style.display = "block";
					button.textContent = "Hide Images";
				  } else {
					circleCanvas.style.display = "none";
					arahKiblat.style.display = "none";
					button.textContent = "Show Images";
				  }

if (moonSunCanvas.style.display === "none") {
					moonSunCanvas.style.display = "block";
					posisiBulanMatahari.style.display = "block";
					button.textContent = "Hide Images";
				  } else {
					moonSunCanvas.style.display = "none";
					posisiBulanMatahari.style.display = "none";
					button.textContent = "Show Images";
				  }
				}

function toggleCanvas2() {
				  var circleCanvas = document.getElementById("circleCanvas");
				  var moonSunCanvas = document.getElementById("moonSunCanvas");
				  var arahKiblat = document.getElementById("arahKiblat");
				  var posisiBulanMatahari = document.getElementById("posisiBulanMatahari");
				  var button = document.getElementById("kotak2");

function hitungWaktuKulminasiMatahari(date, latitude, longitude) {
				  var times = SunCalc.getTimes(date, latitude, longitude);
				  var waktuKulminasi = times.solarNoon;

return waktuKulminasi;
				}
 
				function subtractGMT(time, offset) {
				  // Memisahkan jam, menit, dan detik dari waktu
				  const [hours, minutes, seconds] = time.split(':').map(Number);

// Menghitung total detik dari waktu
				  const totalSeconds = hours * 3600 + minutes * 60 + seconds;

// Menghitung total detik setelah dikurangi offset GMT
				let adjustedSeconds = totalSeconds - ((7 - offset) * 3600);

// Menghindari waktu bernilai negatif
				  if (adjustedSeconds < 0) {
					adjustedSeconds += 24 * 3600; // Menambahkan 24 jam dalam detik
				  }

// Menghitung kembali jam, menit, dan detik baru
				  const adjustedHours = Math.floor(adjustedSeconds / 3600) % 24;
				  const adjustedMinutes = Math.floor((adjustedSeconds % 3600) / 60);
				  const adjustedSecondsRemainder = adjustedSeconds % 60;

// Mengatur format HH:mm:ss dengan leading zero jika diperlukan
				  const formattedTime = `${String(adjustedHours).padStart(2, '0')}:${String(adjustedMinutes).padStart(2, '0')}:${String(adjustedSecondsRemainder).padStart(2, '0')}`;

return formattedTime;
				}

// Mengambil data cuaca menggunakan Axios
				function getWeather(latitude, longitude, dateTime, apiKey) {
				  const unixTimestamp = Math.floor(dateTime / 1000); // Mengubah ke UNIX timestamp dalam detik
				  const apiUrl = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&dt=${unixTimestamp}&appid=${apiKey}`;

axios.get(apiUrl)
					.then(response => {
					  // Mengambil data cuaca dari respons
					  const weatherData = response.data.weather;
					  const temperatureCelsius = response.data.main.temp - 273.15; // Konversi dari Kelvin ke Celsius

// Menampilkan informasi cuaca
					  document.getElementById('cuaca').innerHTML = '<strong><span class="font15">Kondisi Cuaca: </strong>'+weatherData[0].description+', <strong>Temperatur: </strong>'+temperatureCelsius.toFixed(2)+' °C, <strong>Kelembaban: </strong>'+response.data.main.humidity+'%, <strong>Kecepatan Angin: </strong></span>'+response.data.wind.speed+' m/s';
					})
					.catch(error => {
					  console.error('Terjadi kesalahan:', error.message);
					});
				}
				
			  // Fungsi untuk menghitung sudut kiblat, rashdul kiblat, dan waktu bayangan
			  function calculateQiblaAngle(latitude, longitude) {
				// Koordinat Mekah
				var meccaLatitude = 21.4225;
				var meccaLongitude = 39.8262;

// Perbedaan antara koordinat Mekah dan koordinat pengguna
				var longitudeDifference = meccaLongitude - longitude;

// Menghitung sudut kiblat menggunakan rumus arctan
				var y = Math.sin(toRadians(longitudeDifference));
				var x =
				  Math.cos(toRadians(latitude)) * Math.tan(toRadians(meccaLatitude)) -
				  Math.sin(toRadians(latitude)) * Math.cos(toRadians(longitudeDifference));

var qiblaAngle = Math.atan2(y, x);
				qiblaAngle = toRadians(qiblaAngle * (180 / Math.PI));

// Menghitung rashdul kiblat (jarak ke Mekah) menggunakan rumus haversine
				var R = 6371; // Jari-jari Bumi dalam kilometer
				var φ1 = toRadians(latitude);
				var φ2 = toRadians(meccaLatitude);
				var Δφ = toRadians(meccaLatitude - latitude);
				var Δλ = toRadians(meccaLongitude - longitude);

var a =
				  Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +
				  Math.cos(φ1) *
					Math.cos(φ2) *
					Math.sin(Δλ / 2) *
					Math.sin(Δλ / 2);
				var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));

var jarakKibla = R * c;

// Mengubah sudut kiblat ke derajat
				var qiblaAngleDegrees = qiblaAngle * (180 / Math.PI);

return {
				  qiblaAngle: qiblaAngleDegrees,
				  jarakKibla: jarakKibla
				};
			  }
			
				// Fungsi untuk mengubah waktu menjadi detik
				function timeToSeconds(time) {
				let hours = time.getHours();
				  let minutes = time.getMinutes();
				  let seconds = time.getSeconds();
				  return hours * 3600 + minutes * 60 + seconds;
				}					
			
				// Fungsi untuk menentukan fase bulan
				function getMoonPhase(year, month, day, hour, minute, second) {
				  var c, e, jd, b;   
				  
				  if (month < 3) {
					year--;
					month += 12;
				  }
				  
				  ++month;
				  c = 365.25 * year;
				  e = 30.6 * month;
				  jd = c + e + day - 694039.09;

// Membuat konversi waktu ke dalam satuan desimal
				  var decTime = (hour - 12) / 24 + minute / 1440 + second / 86400;

// Menambahkan nilai desimal waktu ke dalam nilai Julian date
				  jd += decTime;
				  jd /= 29.53059;
				  b = parseInt(jd);
				  jd -= b;
				  b = Math.round(jd * 100);

if (b < 0) {
					b += 100;
				  }		  
				  return b;
				}
				
				function calculateMoonAge(date) {
				  const epoch = new Date(Date.UTC(1900, 0, 1, 12, 0, 0)); // Epoch is January 1, 1900 at 12:00:00 UT
				  const daysSinceEpoch = Math.floor((date.getTime() - epoch.getTime()) / (1000 * 60 * 60 * 24));
				  const phase = (daysSinceEpoch + 1.5) % 29.530588853; // 29.530588853 is the average length of a synodic month
				  //return phase + 1; // 29.5 is the average length of a lunar month
				  return phase;        
				}

function OnToggleAutoTime() {
					var myDiv = document.getElementById("myDiv");
					const checkbox = document.getElementById('AutoTimeCheckBox');
					const editbox = document.getElementById('DateTimeBox');
					const resultDiv = document.getElementById('resultTgl');

if (checkbox.checked) {
						editbox.setAttribute('readonly', true);
						myDiv.style.display = "block";
						resultDiv.style.display = "none";
						} else {
						editbox.removeAttribute('readonly');
						myDiv.style.display = "none";
						resultDiv.style.display = "block";
					}
				}

function konversiDetik(jumlahDetik) {
				  var detikPerHari = 86400; // 1 hari = 24 jam x 60 menit x 60 detik
				  var detikPerJam = 3600; // 1 jam = 60 menit x 60 detik
				  var detikPerMenit = 60; // 1 menit = 60 detik

var hari = Math.floor(jumlahDetik / detikPerHari);
				  var hariDesimal = jumlahDetik / detikPerHari;
				  var sisaDetik = jumlahDetik % detikPerHari;

var jam = Math.floor(sisaDetik / detikPerJam);
				  sisaDetik = sisaDetik % detikPerJam;

var menit = Math.floor(sisaDetik / detikPerMenit);
				  var detik = sisaDetik % detikPerMenit;
				  
				  var jmlHari = hariDesimal;

// Mengembalikan hasil dalam bentuk objek
				  return hariDesimal;
				}

function convertToDHMS(decimal) { 
					let days = Math.floor(decimal);
					let hours = Math.floor((decimal - days) * 24);
					let minutes = Math.floor(((decimal - days) * 24 - hours) * 60);
					let seconds = Math.floor((((decimal - days) * 24 - hours) * 60 - minutes) * 60);

return days + " days, " + hours + " hours, " + minutes + "', " + seconds + '"';
				}
// Gambar kemiringan bulan				
				// Mendapatkan elemen gambar dari HTML
				var imgElement = document.getElementById('gambar');

// Daftar nama file gambar
				var daftarGambar = ['https://falakmu.id/1curvetothebottomright.jpg', 'https://falakmu.id/2curvetothelowerleft.jpg', 'https://falakmu.id/3curvetothetopleft.jpg', 'https://falakmu.id/4curvetothetopright.jpg','https://falakmu.id/0.png'];

// Fungsi untuk memunculkan gambar berdasarkan nomor
				function tampilkanGambar(nomor) {
				  // Memastikan nomor berada dalam rentang yang valid
				  if (nomor >= 1 && nomor <= 5) {
					// Mengubah atribut src elemen gambar
					imgElement.src = daftarGambar[nomor - 1];
				  }
				}

function calculateDistance(latitude, longitude, date) {
            const dateTime = new Date(date);
            const year = dateTime.getUTCFullYear();
            const month = dateTime.getUTCMonth() + 1;
            const day = dateTime.getUTCDate();
            const hour = dateTime.getUTCHours();
            const minute = dateTime.getUTCMinutes();
            const second = dateTime.getUTCSeconds();

const julianDate = getJulianDate(year, month, day, hour, minute, second);
            const sunCoordinates = getSunCoordinates(julianDate);
            const observerCoordinates = getObserverCoordinates(latitude, longitude, julianDate);

const distance = calculateDistanceToSun(sunCoordinates, observerCoordinates);
			return distance;
        }

// Get Julian Date from calendar date and time
        function getJulianDate(year, month, day, hour, minute, second) {
            const a = Math.floor((14 - month) / 12);
            const y = year + 4800 - a;
            const m = month + 12 * a - 3;
            const jdn = day + Math.floor((153 * m + 2) / 5) + 365 * y + Math.floor(y / 4) - Math.floor(y / 100) + Math.floor(y / 400) - 32045;
            const jd = jdn + (hour - 12) / 24 + minute / 1440 + second / 86400;
            return jd;
        }

// Calculate Sun's coordinates (RA, Dec) at the given Julian Date
        function getSunCoordinates(julianDate) {
            const T = (julianDate - 2451545) / 36525;
            const L0 = 280.46646 + 36000.76983 * T + 0.0003032 * T * T;
            const M = 357.52911 + 35999.05029 * T - 0.0001537 * T * T;
            const e = 0.016708634 - 0.000042037 * T - 0.0000001267 * T * T;
            const C = (1.914602 - 0.004817 * T - 0.000014 * T * T) * Math.sin(degToRad(M))
                    + (0.019993 - 0.000101 * T) * Math.sin(degToRad(2 * M))
                    + 0.000289 * Math.sin(degToRad(3 * M));
            const trueLongitude = L0 + C;
            const epsilon = 23.439291 - 0.0130042 * T;
            const alpha = radToDeg(Math.atan2(Math.cos(degToRad(epsilon)) * Math.sin(degToRad(trueLongitude)), Math.cos(degToRad(trueLongitude))));
            const delta = radToDeg(Math.asin(Math.sin(degToRad(epsilon)) * Math.sin(degToRad(trueLongitude))));
            return { ra: alpha, dec: delta };
        }

// Convert degrees to radians
        function degToRad(degrees) {
            return degrees * (Math.PI / 180);
        }

// Convert radians to degrees
        function radToDeg(radians) {
            return radians * (180 / Math.PI);
        }

// Calculate observer's coordinates (RA, Dec) at the given latitude, longitude, and Julian Date
        function getObserverCoordinates(latitude, longitude, julianDate) {
            const gmst = getGMST(julianDate);
            const lst = gmst + longitude / 15;
            const ra = lst < 0 ? lst + 24 : lst >= 24 ? lst - 24 : lst;
            const dec = latitude;
            return { ra: ra, dec: dec };
        }

// Calculate Greenwich Mean Sidereal Time (GMST) at the given Julian Date
        function getGMST(julianDate) {
            const jd0 = Math.floor(julianDate - 0.5) + 0.5;
            const t = (jd0 - 2451545) / 36525;
            const gmstSeconds = (24110.54841 + 8640184.812866 * t + 0.093104 * t * t - 6.2e-6 * t * t * t) / 240;
            const gmst = gmstSeconds % 24;
            return gmst < 0 ? gmst + 24 : gmst;
        }

// Calculate distance to the Sun based on Sun's and observer's coordinates
        function calculateDistanceToSun(sunCoordinates, observerCoordinates) {
            const ra1 = degToRad(sunCoordinates.ra);
            const dec1 = degToRad(sunCoordinates.dec);
            const ra2 = degToRad(observerCoordinates.ra);
            const dec2 = degToRad(observerCoordinates.dec);
            const angle = Math.acos(Math.sin(dec1) * Math.sin(dec2) + Math.cos(dec1) * Math.cos(dec2) * Math.cos(ra1 - ra2));
            const distance = 149597870.7 / Math.sin(angle);
            return distance;
        }
        
        // Fungsi untuk mengubah waktu WIB menjadi GMT
        function convertWIBtoGMT(inputTimeWIB, gmtplus) {
            // Pisahkan tanggal dan waktu
            const [inputDate, inputTime] = inputTimeWIB.split(' ');

// Pisahkan tahun, bulan, hari, jam, menit, dan detik
            const [year, month, day, hour, minute, second] = inputDate.split('-').concat(inputTime.split(':'));

// Buat objek Date berdasarkan waktu dalam WIB
            const wibDate = new Date(year, month - 1, day, hour, minute, second); // month - 1 karena bulan dimulai dari 0

// Dapatkan offset waktu dari WIB ke GMT
            const offsetMinutes = -(gmtplus*60); // Offset untuk WIB ke GMT

// Buat objek Date baru dengan waktu dalam GMT
            const gmtDate = new Date(wibDate.getTime() + offsetMinutes * 60000);

// Format waktu GMT sesuai dengan input
            const gmtYear = gmtDate.getUTCFullYear();
            const gmtMonth = String(gmtDate.getUTCMonth() + 1).padStart(2, '0');
            const gmtDay = String(gmtDate.getUTCDate()).padStart(2, '0');
            const gmtHour = String(gmtDate.getUTCHours()).padStart(2, '0');
            const gmtMinute = String(gmtDate.getUTCMinutes()).padStart(2, '0');
            const gmtSecond = String(gmtDate.getUTCSeconds()).padStart(2, '0');
            const formattedGMT = `${gmtDay}/${gmtMonth}/${gmtYear}`; // Mengubah format GMT menjadi "tgl/bulan/tahun"

return formattedGMT;
        }

window.onload = function() {
					var QuarterName = ['New Moon', 'Quarter 1', 'Full Moon', 'Quarter 3'];
					const StorageKey = 'AstroDemo.Options';
					var Options;
					var status, status1, status2, status3, statusAwalbulan, statusWH, statusMabims, statusKIG;
					
					// Panggil fungsi untuk memaksa tampilan menjadi landscape
					forceLandscape();

function ParseDate(s) {
						return new Date((s || '').replace(' ', 'T'));   // Safari doesn't like the space character
					}

function IsValidNumber(s) {
						return typeof s === 'string' && /^[\-\+]?\d+(\.\d*)?$/.test(s);
					}
					
					function IsValidText(s) {
					  return typeof s === 'string';
					}

function IsValidDate(s) {
						const d = ParseDate(s);
						return Number.isFinite(d.getTime());
					}

function LoadOptions() {
						let options;
						try {
							options = JSON.parse(window.localStorage.getItem(StorageKey));
						} catch (e) {
						}

if (!options) options = {};
						if (!IsValidNumber(options.latitude))  options.latitude  = '51.482';  
						if (!IsValidNumber(options.longitude)) options.longitude = '0.008';
						if (!IsValidNumber(options.elevation)) options.elevation = '0';
						if (!IsValidNumber(options.gmt)) options.gmt = '0';
						if (!IsValidText(options.nama)) options.nama = 'Greenwich, UTC';
						if (typeof options.automatic !== 'boolean') options.automatic = true;
						if (!IsValidDate(options.date)) options.date = FormatDate(new Date());
						return options;
					}

function SaveOptions() {
						try {
							window.localStorage.setItem(StorageKey, JSON.stringify(Options));
						} catch (e) {
						}
					}

function Init() {
						let options = LoadOptions();
						document.getElementById('EditLatitude').value  = options.latitude;
						document.getElementById('EditLongitude').value = options.longitude;
						document.getElementById('EditElevation').value = options.elevation;

document.getElementById('EditGmt').value = options.gmt;
						document.getElementById('EditNama').value = options.nama;
						document.getElementById('EditLokasi').value = options.nama;
						document.getElementById('DateTimeBox').value = options.date;
						let checkbox = document.getElementById('AutoTimeCheckBox');
						checkbox.checked = options.automatic;
						OnToggleAutoTime();

return options;
					}
					
					function toRadians(degrees) {
					  return degrees * Math.PI / 180;
					}

function toDegrees(radians) {
					  return radians * (180 / Math.PI);
					}

function formatWaktu(time) {
					  var hours = Math.floor(time);
					  var minutes = Math.floor((time - hours) * 60);
					  var seconds = Math.floor(((time - hours) * 60 - minutes) * 60);

return padZero(hours) + ":" + padZero(minutes) + ":" + padZero(seconds) + " <b class='merah'>WIB</b>";
					}

function padZero(number) {
					  return number.toString().padStart(2, "0");
					}

function Pad(s, w) {
						s = s.toFixed(0);
						while (s.length < w) {
							s = '0' + s;
						}
						return s;
					}

return `${year}-${month}-${day}`;
					}					
					
					function FormatCoord(x) {  
						return x.toFixed(2);
					}
					
					const MOON_MEAN_RADIUS_KM = 1737.4;
					const MOON_MEAN_RADIUS_AU = MOON_MEAN_RADIUS_KM / Astronomy.KM_PER_AU;
					const C_AUDAY = 173.1446326846693;          // speed of light in AU/day
					const C_AUSEC = C_AUDAY / (24 * 3600);      // speed of light in AU/sec 		
				
					const BodyList = [
						'Sun', 'Moon'
					];
					
					function DisplayEvent(name, evt) {
						let text = evt ? FormatDate(evt.date) : '';
						document.getElementById(name).innerText = text;
					}

function UpdateScreen() {
						const autotime = document.getElementById('AutoTimeCheckBox').checked;
						const timebox = document.getElementById('DateTimeBox');
						let text_latitude = document.getElementById('EditLatitude').value;
						let text_longitude = document.getElementById('EditLongitude').value;
						let text_elevation = document.getElementById('EditElevation').value;
						let text_gmt = document.getElementById('EditGmt').value;
						let text_nama = document.getElementById('EditNama').value;
						let text_lokasi = document.getElementById('EditLokasi').value;
						let date;  
						
//pengaturan DATE						
						if (autotime) {
							// Automatically update the date/time every second, using the computer's clock.
							date = new Date();
							timebox.value = FormatDate(date);
						} else {
							// Try to parse a date/time from the user's input.
							date = ParseDate(timebox.value);
						}

if (!IsValidDate(timebox.value) || !IsValidNumber(text_latitude) || !IsValidNumber(text_longitude) || !IsValidNumber(text_elevation)|| !IsValidNumber(text_gmt) || !IsValidText(text_nama)) {
							// Bail out until user corrects problems in the observer coordinates.
							// Gray out the whole table so the user knows there is something wrong.
							document.getElementById('CalcTable').style.display = 'none';
						} else {
							document.getElementById('CalcTable').style.display = '';

let latitude = parseFloat(text_latitude);
							let longitude = parseFloat(text_longitude);
							let elevation = parseFloat(text_elevation);
							let gmt = parseFloat(text_gmt);
							let nama = parseFloat(text_nama);
							if (latitude !== Options.latitude || longitude !== Options.longitude || elevation !== Options.elevation || gmt !== Options.gmt || nama !== Options.nama || Options.automatic !== autotime) {
								Options = {
									latitude: text_latitude,
									longitude: text_longitude,
									elevation: text_elevation,
									gmt: text_gmt,									
									nama: text_nama,
									automatic: autotime,
									date: timebox.value
								};
								SaveOptions();    
							}
							
							//document.getElementById('lintang').innerHTML = latitude;
							//document.getElementById('bujur').innerHTML = longitude;
							
							// algoritma/formula menurut Astronomy engine browser
							let illum = Astronomy.Illumination(Astronomy.Body.Moon, date);
							let illumi = illum.phase_fraction; 
							let magnitude = illum.mag.toFixed(2);
							let illu = (illum.phase_fraction * 100).toFixed(4)+'%';							
							document.getElementById('illumination').innerHTML = illu;
							document.getElementById('magnitude').innerHTML = magnitude;
							
							/*
							// algoritma/formula menurut SunCalc
							const moonIllumination = SunCalc.getMoonIllumination(date);
							document.getElementById('illumination').innerText = (moonIllumination.fraction*100).toFixed(4)+'%';
							*/
							
							
let observer = new Astronomy.Observer(latitude, longitude, elevation);

var lat = 52.52; var lng = 13.405; var elev = 0;
let berlin = new Astronomy.Observer(lat, lng, elev);

var latgisborne = -38.6623; var longgisborne = 178.018; var elev2 = 0;
let gisborne = new Astronomy.Observer(latgisborne, longgisborne, elev2);

let latsabang = 5.893; let longsabang = 95.32;
let sabang = new Astronomy.Observer(5.893, 95.32, 0);

let latgreenwich = 51.482; let longgreenwich = 0.008;
let greenwich = new Astronomy.Observer(51.482, 0.008, 0);

let latwellington = -41.287; let longwellington = 174.776;
let wellington = new Astronomy.Observer(-41.287, 174.776, 0);

let latnewyork = 40.7128; let longnewyork = -74.006;
let newyork = new Astronomy.Observer(40.7128, -74.006, 0);

let latmakkah = 21.4225; let longmakkah = 39.8262;
let makkah = new Astronomy.Observer(21.4225, 39.8262, 0);

let latauckland = -36.8485; let longauckland = 174.7633;
let auckland = new Astronomy.Observer(-36.8485, 174.7633, 0);

let latcairo = 30.0444; let longcairo = 31.2357;
let cairo = new Astronomy.Observer(30.0444, 31.2357, 0);

let latsanfrancisco = 37.7749; let longsanfrancisco = -122.4194;
let sanfrancisco = new Astronomy.Observer(37.7749, -122.4194, 0);

let latmexicocity = 19.4326; let longmexicocity = -99.1332;
let mexicocity = new Astronomy.Observer(19.4326, -99.1332, 0);

let latmogadishu = 2.0469; let longmogadishu = 45.3182;
let mogadishu = new Astronomy.Observer(2.0469, 45.3182, 0);

document.getElementById('poslatitude').innerText = latitude;
document.getElementById('poslongitude').innerText = longitude;

for (let body of BodyList) {
    let equ_2000 = Astronomy.Equator(body, date, observer, false, true);
    let equ_ofdate = Astronomy.Equator(body, date, observer, true, true);
    let equSun = Astronomy.Equator(Astronomy.Body.Sun, date, observer, true, false);

let equ_date = Astronomy.Equator("Moon", date, berlin, true, true);
    let equ_date2 = Astronomy.Equator("Moon", date, gisborne, true, true);
    let equ_date3 = Astronomy.Equator("Moon", date, greenwich, true, true);
    let equ_date4 = Astronomy.Equator("Moon", date, wellington, true, true);
    let equ_date5 = Astronomy.Equator("Moon", date, newyork, true, true);
    let equ_date6 = Astronomy.Equator("Moon", date, sabang, true, true);
    let equ_date7 = Astronomy.Equator("Moon", date, makkah, true, true);
    let equ_date8 = Astronomy.Equator("Moon", date, auckland, true, true);
    let equ_date9 = Astronomy.Equator("Moon", date, cairo, true, true);
    let equ_date10 = Astronomy.Equator("Moon", date, sanfrancisco, true, true);
    let equ_date11 = Astronomy.Equator("Moon", date, mexicocity, true, true);
    let equ_date12 = Astronomy.Equator("Moon", date, mogadishu, true, true);

let equMoon = Astronomy.Equator("Moon", date, observer, true, true);
    let equiSun = Astronomy.Equator("Sun", date, berlin, false, true);
    let equiSun2 = Astronomy.Equator("Sun", date, gisborne, false, true);
    let equiSun3 = Astronomy.Equator("Sun", date, greenwich, false, true);

let hor = Astronomy.Horizon(date, observer, equ_ofdate.ra, equ_ofdate.dec, 'normal');
    let horSun = Astronomy.Horizon(date, observer, equSun.ra, equSun.dec, 'normal');
    let horiSun_berlin = Astronomy.Horizon(date, berlin, equiSun.ra, equiSun.dec, 'normal');
    let horiSun_greenwich = Astronomy.Horizon(date, greenwich, equiSun.ra, equiSun.dec, 'normal');
    let horiSun_gisborne = Astronomy.Horizon(date, gisborne, equiSun2.ra, equiSun2.dec, 'normal');

let hori_berlin = Astronomy.Horizon(date, berlin, equ_date.ra, equ_date.dec, 'normal');
    let hori_gisborne = Astronomy.Horizon(date, gisborne, equ_date2.ra, equ_date2.dec, 'normal');
    let hori_greenwich = Astronomy.Horizon(date, greenwich, equ_date3.ra, equ_date3.dec, 'normal');
    let hori_wellington = Astronomy.Horizon(date, wellington, equ_date4.ra, equ_date4.dec, 'normal');
    let hori_newyork = Astronomy.Horizon(date, newyork, equ_date5.ra, equ_date5.dec, 'normal');
    let hori_sabang = Astronomy.Horizon(date, sabang, equ_date6.ra, equ_date6.dec, 'normal');
    let hori_makkah = Astronomy.Horizon(date, makkah, equ_date7.ra, equ_date7.dec, 'normal');
    let hori_auckland = Astronomy.Horizon(date, auckland, equ_date8.ra, equ_date8.dec, 'normal');
    let hori_cairo = Astronomy.Horizon(date, cairo, equ_date9.ra, equ_date9.dec, 'normal');
    let hori_sanfrancisco = Astronomy.Horizon(date, sanfrancisco, equ_date10.ra, equ_date10.dec, 'normal');
    let hori_mexicocity = Astronomy.Horizon(date, mexicocity, equ_date11.ra, equ_date11.dec, 'normal');
    let hori_mogadishu = Astronomy.Horizon(date, mogadishu, equ_date12.ra, equ_date12.dec, 'normal');

var moon_alt = FormatCoord(hor.altitude);

var bulan_alt_berlin = FormatCoord(hori_berlin.altitude);
    var bulan_alt_gisborne = FormatCoord(hori_gisborne.altitude);
    var bulan_alt_greenwich = FormatCoord(hori_greenwich.altitude);
    var bulan_alt_wellington = FormatCoord(hori_wellington.altitude);
    var bulan_alt_newyork = FormatCoord(hori_newyork.altitude);
    var bulan_alt_sabang = FormatCoord(hori_sabang.altitude);
    var bulan_alt_makkah = FormatCoord(hori_makkah.altitude);
    var bulan_alt_auckland = FormatCoord(hori_auckland.altitude);
    var bulan_alt_cairo = FormatCoord(hori_cairo.altitude);
    var bulan_alt_sanfrancisco = FormatCoord(hori_sanfrancisco.altitude);
    var bulan_alt_mexicocity = FormatCoord(hori_mexicocity.altitude);
    var bulan_alt_mogadishu = FormatCoord(hori_mogadishu.altitude);

var sun_alt = FormatCoord(horSun.altitude);
    var matahari_alt_berlin = FormatCoord(horiSun_berlin.altitude);
    var matahari_alt_gisborne = FormatCoord(horiSun_gisborne.altitude);

var sun_az = FormatCoord(horSun.azimuth);
    var moon_az = FormatCoord(hor.azimuth);

var sun_dec = FormatCoord(equSun.dec);
    var Moon_declination = FormatCoord(equMoon.dec);
    var moon_dec = FormatCoord(equMoon.dec);

var sun_ra = FormatCoord(equSun.ra);
    var moon_ra = FormatCoord(equMoon.ra);

for (let body of BodyList) {
    let equSun = Astronomy.Equator(Astronomy.Body.Sun, date, observer, true, false);

let equSun_berlin = Astronomy.Equator(Astronomy.Body.Sun, date, berlin, false, true);
    let equSun_gisborne = Astronomy.Equator(Astronomy.Body.Sun, date, gisborne, false, true);
    let equSun_greenwich = Astronomy.Equator(Astronomy.Body.Sun, date, greenwich, false, true);
    let equSun_wellington = Astronomy.Equator(Astronomy.Body.Sun, date, wellington, false, true);
    let equSun_newyork = Astronomy.Equator(Astronomy.Body.Sun, date, newyork, false, true);
    let equSun_sabang = Astronomy.Equator(Astronomy.Body.Sun, date, sabang, false, true);
    let equSun_makkah = Astronomy.Equator(Astronomy.Body.Sun, date, makkah, false, true);
    let equSun_auckland = Astronomy.Equator(Astronomy.Body.Sun, date, auckland, false, true);
    let equSun_cairo = Astronomy.Equator(Astronomy.Body.Sun, date, cairo, false, true);
    let equSun_sanfrancisco = Astronomy.Equator(Astronomy.Body.Sun, date, sanfrancisco, false, true);
    let equSun_mexicocity = Astronomy.Equator(Astronomy.Body.Sun, date, mexicocity, false, true);
    let equSun_mogadishu = Astronomy.Equator(Astronomy.Body.Sun, date, mogadishu, false, true);

let horSun = Astronomy.Horizon(date, observer, equSun.ra, equSun.dec, 'normal');
    let horiSun_berlin = Astronomy.Horizon(date, berlin, equSun_berlin.ra, equSun_berlin.dec, 'normal');
    let horiSun_gisborne = Astronomy.Horizon(date, gisborne, equSun_gisborne.ra, equSun_gisborne.dec, 'normal');
    let horiSun_greenwich = Astronomy.Horizon(date, greenwich, equSun_greenwich.ra, equSun_greenwich.dec, 'normal');
    let horiSun_wellington = Astronomy.Horizon(date, wellington, equSun_wellington.ra, equSun_wellington.dec, 'normal');
    let horiSun_newyork = Astronomy.Horizon(date, newyork, equSun_newyork.ra, equSun_newyork.dec, 'normal');
    let horiSun_sabang = Astronomy.Horizon(date, sabang, equSun_sabang.ra, equSun_sabang.dec, 'normal');
    let horiSun_makkah = Astronomy.Horizon(date, makkah, equSun_makkah.ra, equSun_makkah.dec, 'normal');
    let horiSun_auckland = Astronomy.Horizon(date, auckland, equSun_auckland.ra, equSun_auckland.dec, 'normal');
    let horiSun_cairo = Astronomy.Horizon(date, cairo, equSun_cairo.ra, equSun_cairo.dec, 'normal');
    let horiSun_sanfrancisco = Astronomy.Horizon(date, sanfrancisco, equSun_sanfrancisco.ra, equSun_sanfrancisco.dec, 'normal');
    let horiSun_mexicocity = Astronomy.Horizon(date, mexicocity, equSun_mexicocity.ra, equSun_mexicocity.dec, 'normal');
    let horiSun_mogadishu = Astronomy.Horizon(date, mogadishu, equSun_mogadishu.ra, equSun_mogadishu.dec, 'normal');

var sun_alt = FormatCoord(horSun.altitude);
    var matahari_alt_berlin = FormatCoord(horiSun_berlin.altitude);
    var matahari_alt_gisborne = FormatCoord(horiSun_gisborne.altitude);
    var matahari_alt_greenwich = FormatCoord(horiSun_greenwich.altitude);
    var matahari_alt_wellington = FormatCoord(horiSun_wellington.altitude);
    var matahari_alt_newyork = FormatCoord(horiSun_newyork.altitude);
    var matahari_alt_sabang = FormatCoord(horiSun_sabang.altitude);
    var matahari_alt_makkah = FormatCoord(horiSun_makkah.altitude);
    var matahari_alt_auckland = FormatCoord(horiSun_auckland.altitude);
    var matahari_alt_cairo = FormatCoord(horiSun_cairo.altitude);
    var matahari_alt_sanfrancisco = FormatCoord(horiSun_sanfrancisco.altitude);
    var matahari_alt_mexicocity = FormatCoord(horiSun_mexicocity.altitude);
    var matahari_alt_mogadishu = FormatCoord(horiSun_mogadishu.altitude);
}

let sunrise  = Astronomy.SearchRiseSet('Sun',  observer, +1, date, 300);
							let sunset   = Astronomy.SearchRiseSet('Sun',  observer, -1, date, 300);
							let moonrise = Astronomy.SearchRiseSet('Moon', observer, +1, date, 300);
							let moonset  = Astronomy.SearchRiseSet('Moon', observer, -1, date, 300);
							let culmSun  = Astronomy.SearchHourAngle('Sun', observer, 0, date);

let moonsetwib = moonset+" <b class='merah'>WIB</b>";
							DisplayEvent('Sunrise',  sunrise);
							DisplayEvent('Sunset',   sunset);
							DisplayEvent('Sunset2',   sunset);
							DisplayEvent('Moonrise', moonrise);
							DisplayEvent('Moonset',  moonset);
							DisplayEvent('Moon_set',  moonset);
							//DisplayEvent('Sun_culm', culmSun);
											
							var moon_eqd = Astronomy.Equator(Astronomy.Body.Moon, date, observer, true, false);
							var dist_au = moon_eqd.vec.Length() - MOON_MEAN_RADIUS_AU;
							var dist_km = dist_au * 149598000;
							var jarakbulan = dist_km;   
							
							var statusjarak;       
							if (jarakbulan < 370400){
								statusjarak = "(<span style='color: red;'>Perigee</span>)";
							} else if (jarakbulan > 404000){     
									statusjarak = "(<span style='color: red;'>Apogee</span>)";
							} else statusjarak = "";      
								
							//document.getElementById("Jarak").innerHTML = dist_km.toFixed(3) + " km "+statusjarak;  
							//document.getElementById("moonDistance").innerHTML = dist_km.toFixed(3) + " km "+statusjarak;
							
							
							// Membuat objek Date untuk dua waktu yang berbeda
							var time =  new Date(date);
							var time1 = new Date(sunset);
							var time2 = new Date(moonset);
							var time3 = new Date(sunrise);
							var time4 = new Date(moonrise);
							
							var sunriseTime = time3.getTime();
							var sunsetTime = time1.getTime();
							var dateTime = time.getTime();
							
							// Menghitung selisih waktu dalam milidetik
							var difference = Math.abs(time2.getTime() - time1.getTime());

// Mengubah milidetik menjadi detik
							var differenceInSeconds = Math.ceil(difference / 1000);	
							
							if (differenceInSeconds < 60) {
								var selisih = differenceInSeconds.toFixed(2) + " sec.";
							}else {
								var selisih = differenceInSeconds / 60;
								selisih = selisih.toFixed(2) + " min.";    
							}
								
							if (differenceInSeconds > 3600) {
								var selisih = differenceInSeconds / 3600;
								selisih = selisih.toFixed(2) + " hours"; 
							}                    
									
							//DisplayEvent('Selisih',  differenceInSeconds);
							document.getElementById("Selisih").innerHTML = selisih;	   
							//document.getElementById("lagTime").innerHTML = selisih;
							
							const dayLength = ((sunsetTime - sunriseTime) / 1000); // Mengonversi dari milidetik menjadi detik
							const hours = Math.abs(Math.floor(dayLength / 3600));
							const minutes = Math.abs(Math.floor((dayLength % 3600) / 60));
							const seconds = Math.abs(Math.floor((dayLength % 3600) % 60));
							const dayLengthString = `${hours} hours, ${minutes}', ${seconds}"`;
							document.getElementById("daylength").innerHTML = `Day length <span class="merah">(WL)</span>: ${dayLengthString}`;

year = date.getFullYear();   
							month = date.getMonth()+1; // months are zero-indexed, so add 1
							day = date.getDate(); 
							
							var haribesok = date.getDate() + 1; 
							var harilusa = date.getDate() + 2; 
							
							hour = date.getHours();
							minute = date.getMinutes();
							second = date.getSeconds(); 
							
							var hms = hour+":"+minute+":"+second;
							var ymd = year+"-"+month+"-"+day;
							var ymdbesok = haribesok+"/"+month+"/"+year;
							var ymdlusa = harilusa+"/"+month+"/"+year;
       
							
							var ymdw;
							var tahunL;
							var waktuLokal = subtractGMT(hms,gmt);	
							var jamLokal = subtractGMT(hms,gmt);
							var hourWL = waktuLokal.split(":")[0];
							
							if (hour < hourWL && gmt <=7 ){
								day = day - 1;
								ymdw = year+"-"+month+"-"+day;
								tahunL = ymdw;
								waktuLokal = ymdw+" / "+waktuLokal;
							} else {
								waktuLokal = ymd+" / "+waktuLokal;
								tahunL = ymd;
							}	
							 
							tahunLokal = new Date(tahunL);
							tahunLokal = FormatDate(tahunLokal);
							
							/*
							var yearL = waktuLokal.getFullYear();   
							var monthL = waktuLokal.getMonth()+1; 
							var dayL = waktuLokal.getDate();
							*/
							
							var sunsetFormated = FormatDate2(time1);							
							
							//document.getElementById("ymdbesok").innerHTML = ymdbesok;
							//document.getElementById("ymdlusa").innerHTML = ymdlusa;
														
							//var saiki = new Date();
							var saiki = date; 
							var bulanini = new Date(saiki.getFullYear(), saiki.getMonth(), saiki.getDate());
							var wingi = new Date(saiki.getFullYear(), saiki.getMonth() - 1, saiki.getDate());

statusWH = "1) WH criteria (>0): "+ymdbesok;
									statusMabims = "2) Neo Mabims criteria (364): "+ymdbesok;
									statusKIG = "3) KIG criteria (58): "+ymdbesok;
									
								 } else	 
									if (moonalt >= 5 && elongasi >= 8 && sunalt < 0  && longitude === 0.008){
									status1 = "<span class='biru'>1) Wujudul Hilal criteria FULFILLED, </span>";
									status2 = "<span class='hijau'>2) Neo Mabims criteria FULFILLED in Greenwich (UTC), </span>";
									status3 = "<span class='merah'>3) KIG criteria FULFILLED </span><span class='hitam'>di Greenwich (UTC)</span>";
									
									status = status1+"<br/> "+status2+"<br/> "+status3;
									status = status +" <span class='hitam'><br/> At coordinates: "+latitude+", "+longitude+"</span>";
									
									statusWH = "1) WH criteria (>0): "+ymdbesok;
									statusMabims = "2) Neo Mabims criteria (364): "+ymdbesok;
									statusKIG = "3) KIG criteria (58): "+ymdbesok;									
									
								 } else	 
									if (moonalt >= 5 && elongasi >= 8 && sunalt < 0  && longitude === 39.8262){
									status1 = "<span class='biru'>1) Wujudul Hilal criteria FULFILLED, </span>";
									status2 = "<span class='hijau'>2) Neo Mabims criteria FULFILLED in Makkah (UTC+3), </span>";
									status3 = "<span class='merah'>3) KIG criteria FULFILLED </span><span class='hitam'>di Makkah (UTC+3)</span>";
									
									status = status1+"<br/> "+status2+"<br/> "+status3;
									status = status +" <span class='hitam'><br/> At coordinates: "+latitude+", "+longitude+"</span>";
									
									statusWH = "1) WH criteria (>0): "+ymdbesok;
									statusMabims = "2) Neo Mabims criteria (364): "+ymdbesok;
									statusKIG = "3) KIG criteria (58): "+ymdbesok;									
									
								 } else	  
									if (moonalt >= 5 && elongasi >= 8 && sunalt < 0  && longitude === 39.569){
									status1 = "<span class='biru'>1) Wujudul Hilal criteria FULFILLED, </span>";
									status2 = "<span class='hijau'>2) Neo Mabims criteria FULFILLED in Madinah (UTC+3), </span>";
									status3 = "<span class='merah'>3) KIG criteria FULFILLED </span><span class='hitam'>di Madinah (UTC+3).</span>";
									
									status = status1+"<br/> "+status2+"<br/> "+status3;
									status = status +" <span class='hitam'><br/> At coordinates: "+latitude+", "+longitude+"</span>";
									
									statusWH = "1) WH criteria (>0): "+ymdbesok;
									statusMabims = "2) Neo Mabims criteria (364): "+ymdbesok;
									statusKIG = "3) KIG criteria (58): "+ymdbesok;

} else	 
									if (moonalt >= 5 && elongasi >= 8 && sunalt < 0  && longitude === 178.018){
									status1 = "<span class='biru'>1) Wujudul Hilal criteria FULFILLED, </span>";
									status2 = "<span class='hijau'>2) Neo Mabims criteria FULFILLED in Gisborne (UTC+12), </span>";
									status3 = "<span class='merah'>3) KIG criteria FULFILLED </span><span class='hitam'>di Gisborne (UTC+12)</span>";
									
									status = status1+"<br/> "+status2+"<br/> "+status3;
									status = status +" <span class='hitam'><br/> At coordinates "+latitude+", "+longitude+"</span>";
									
									statusWH = "1) WH criteria (>0): "+ymdbesok;
									statusMabims = "2) Neo Mabims criteria (364): "+ymdbesok;
									statusKIG = "3) KIG criteria (58): "+ymdbesok;									
									
								 } else	 
									if (moonalt >= 5 && elongasi >= 8 && sunalt < 0  && longitude === -74.006){
									status1 = "<span class='biru'>1) Wujudul Hilal criteria FULFILLED, </span>";
									status2 = "<span class='hijau'>2) Neo Mabims criteria FULFILLED in New York (UTC-4), </span>";
									status3 = "<span class='merah'>3) KIG criteria FULFILLED </span><span class='hitam'>di New York (UTC-4) </span>";
									
									status = status1+"<br/> "+status2+"<br/> "+status3;
									status = status +" <span class='hitam'><br/> At coordinates: "+latitude+", "+longitude+"</span>";
									
									statusWH = "1) WH criteria (>0): "+ymdbesok;
									statusMabims = "2) Neo Mabims criteria (364): "+ymdbesok;
									statusKIG = "3) KIG criteria (58): "+ymdbesok;									
								
								 } else	 
									if (moonalt >= 5 && elongasi >= 8 && sunalt < 0  && longitude === -118.2437){
									status1 = "<span class='biru'>1) Wujudul Hilal criteria FULFILLED, </span>";
									status2 = "<span class='hijau'>2) Neo Mabims criteria FULFILLED in Los Angeles (UTC-7), </span>";
									status3 = "<span class='merah'>3) KIG criteria FULFILLED </span><span class='hitam'>di Los Angeles (UTC-7) </span>";
									
									status = status1+"<br/> "+status2+"<br/> "+status3;
									status = status +" <span class='hitam'><br/> At coordinates: "+latitude+", "+longitude+"</span>";
									
									statusWH = "1) WH criteria (>0): "+ymdbesok;
									statusMabims = "2) Neo Mabims criteria (364): "+ymdbesok;
									statusKIG = "3) KIG criteria (58): "+ymdbesok;									
									
								 } else	 
									if (moonalt >= 5 && elongasi >= 8 && sunalt < 0  && longitude === -58.3816){
									status1 = "<span class='biru'>1) Wujudul Hilal criteria FULFILLED, </span>";
									status2 = "<span class='hijau'>2) Neo Mabims criteria FULFILLED in Buenos Aires (UTC-3), </span>";
									status3 = "<span class='merah'>3) KIG criteria FULFILLED </span><span class='hitam'>in Buenos Aires (UTC-3) </span>";	
									
									status = status1+"<br/> "+status2+"<br/> "+status3;
									status = status +" <span class='hitam'><br/> At coordinates: "+latitude+", "+longitude+"</span>";
								
									statusWH = "1) WH criteria (>0): "+ymdbesok;
									statusMabims = "2) Neo Mabims criteria (364): "+ymdbesok;
									statusKIG = "3) KIG criteria (58): "+ymdbesok;								
									 
								} else 
									if (moonalt >= 5 && elongasi >= 8 && sunalt < 0 && longitude != 110.4 && longitude != 13.405 && longitude != 0.128  && longitude != 0.008  && longitude != 178.018  && longitude != -74.006  && longitude != -118.2437  && longitude != -58.3816){
								
									status1 = "<span class='biru'>1) Wujudul Hilal criteria FULFILLED, </span>";
									status2 = "<span class='hijau'>2) Neo Mabims criteria FULFILLED,</span>"; 
									status3 = "<span class='merah'>3) KIG criteria FULFILLED</span>"; 
									
									status = status1+"<br/> "+status2+"<br/> "+status3;
									status = status +" <span class='hitam'><br/> At coordinates: "+latitude+", "+longitude+"</span>";

statusWH = "1) WH criteria (>0): "+ymdbesok;
									statusMabims = "2) Neo Mabims criteria (364): "+ymdbesok;
									statusKIG = "3) KIG criteria (58): "+ymdbesok;
									
								} else	
									if (moonalt >= 5 && (elongasi < 8 && elongasi > 6.4) && sunalt < 0 ){
									status1 = "<span class='biru'>1) Wujudul Hilal criteria FULFILLED, </span>";
									status2 = "<span class='hijau'>2) Neo Mabims criteria FULFILLED, </span>";
									status3 = "<span class='merah'>3) KIG criteria NOT FULFILLED, but the crescent moon might be visible</span>";
									
									status = status1+"<br/> "+status2+"<br/> "+status3;
									status = status +" <span class='hitam'><br/> At coordinates: "+latitude+", "+longitude+"</span>";
									
									statusWH = "1) WH criteria (>0): "+ymdbesok;
									statusMabims = "2) Neo Mabims criteria (364): "+ymdbesok;
									statusKIG = "3) KIG criteria (58): "+ymdbesok;									
									
								 } else	
									if (longitude === 178.018 &&  hourWL < 24){
									status3 = "<span class='biru'>3) KIG criteria FULFILLED, because in Gisborne (NZ), the conjunction (ijtima') occurs before the date changes.</span>"; 	
									
									status = status3;
									status = status +" <span class='hitam'><br/> At coordinates: "+latitude+", "+longitude+"</span>";
									
									statusWH = "-";
									statusMabims = "-";
									statusKIG = "3) KIG criteria (58): "+ymdbesok;
									
								} else  
								if (moonalt >= 3 && elongasi >= 6.4 && sunalt < 0){
									status1 = "<span class='biru'>1) Wujudul Hilal criteria FULFILLED,</span>"; 
									status2 = "<span class='hijau'>2) Neo Mabims criteria FULFILLED, </span>";
									status3 = "<span class='merah'>3) KIG criteria NOT FULFILLED</span>";
																		
									status = status1+"<br/> "+status2+"<br/> "+status3;
									status = status +" <span class='hitam'><br/> At coordinates: "+latitude+", "+longitude+"</span>"; 
									
									statusWH = "1) WH criteria (>0): "+ymdbesok;
									statusMabims = "2) Neo Mabims criteria (364): "+ymdbesok;
									statusKIG = "3) KIG criteria (58): "+ymdlusa;									
								} else 
								if (moonalt >= 0 && elongasi >= 0 && sunalt < 0){
									status1 = "<span class='biru'>1) Wujudul Hilal criteria FULFILLED, </span>";
									status2 = "<span class='hijau'>2) Neo Mabims criteria NOT FULFILLED, </span>";
									status3 = "<span class='merah'>3) KIG criteria NOT FULFILLED</span>";	
									
									status = status1+"<br/> "+status2+"<br/> "+status3;
									status = status +" <span class='hitam'><br/> At coordinates: "+latitude+", "+longitude+"</span>";

statusWH = "1) WH criteria (>0): "+ymdbesok;
									statusMabims = "2) Neo Mabims criteria (364): "+ymdlusa;
									statusKIG = "3) KIG criteria (58): "+ymdlusa;
									
									
								} else 
								if (moonalt < 0 && elongasi >= 0 && sunalt < 0){
									status1 = "<span class='biru'>1) Wujudul Hilal criteria NOT FULFILLED, </span>";
									status2 = "<span class='hijau'>2) Neo Mabims criteria NOT FULFILLED, </span>";
									status3 = "<span class='merah'>3) KIG criteria NOT FULFILLED</span>";	
									
									status = status1+"<br/> "+status2+"<br/> "+status3;
									status = status +" <span class='hitam'><br/> At coordinates: "+latitude+", "+longitude+"</span>"; 
									
									statusWH = "1) WH criteria (>0): "+ymdlusa;
									statusMabims = "2) Neo Mabims criteria (364): "+ymdlusa;
									statusKIG = "3) KIG criteria (58): "+ymdlusa;									
								
								} else {
									status = "-";
									statusWH = "-";
									statusMabims = "-";
									statusKIG = "-";								
								}
							} else { 
								status = "-";
								statusWH = "-";
								statusMabims = "-";
								statusKIG = "-";
							}
							
							
							
							/*document.getElementById('status').innerHTML = status;*/
							status = '<span style="font-color: black;">CRITERIA AT SUNSET:</span><br/>'+status;
							document.getElementById('statusHilal').innerHTML = status;
							if ((status != "-") && (statusWH != "-") && (statusMabims != "-") && (statusKIG != "-") && (statussunset === "SUNSET") ){	
								/*document.getElementById('status').innerHTML = status;*/
								//document.getElementById("statusAwalbulan").innerHTML = "Beginning of the Hijri Month <b class='merah'>(WIB)</b>:<br/>"+statusWH+"<br/>"+statusMabims+"<br/>"+statusKIG;
								
							} else { 
								//document.getElementById("statusAwalbulan").innerHTML = "";
								/*document.getElementById('status').innerHTML = "";*/
								document.getElementById('statussunset').innerHTML = "";
							}
							
							document.getElementById('waktuLokal').innerHTML = waktuLokal;
							document.getElementById('waktuLokal2').innerHTML = waktuLokal;
																			
							var fase = Astronomy.MoonPhase(date);
							fase2 = Math.round(fase); 
							fase3 = fase/360;
							fase = fase.toFixed(3); 
							
							var umbul = (fase/360)*29.530588853; 
							
							umbul = umbul.toFixed(2)+" days ("+convertToDHMS(umbul)+")"; 
							moon_Age = moonAge+" days ("+convertToDHMS(moonAge)+")";

} else {document.getElementById('praytimes').innerHTML = "<span class='font15' style='color: red;'><strong>Jadwal Shalat Lokal <b class='merah'>(WIB)</b></strong></span> <br/>" +
								"<strong>Shubuh:</strong> "+ prayertimes[list[0].toLowerCase()] + ", " +
								"<strong>Dhuhur:</strong> "+ prayertimes[list[1].toLowerCase()] + ", " +
								"<strong>Ashar:</strong> "+ prayertimes[list[2].toLowerCase()] + ", " +
								"<strong>Maghrib:</strong> "+ prayertimes[list[3].toLowerCase()] + ", " +
								"<strong>Isya:</strong> "+ prayertimes[list[4].toLowerCase()] + ", ";}	
							
							// Calculate the round trip radar pulse time in seconds.
							//const round_trip_sec = (2 * dist_au) / C_AUSEC;
							//document.getElementById('Moon_trip').innerText = FormatCoord(round_trip_sec);         
							
							// Contoh penggunaan
							var positionMoon = moonalt; 
							var tinggiBulan = moonalt;
							var positionSun = sunalt; 
							var elongation = elongasi; 
							
							elongation = elongation.toFixed(2);
							//positionMoon = positionMoon.toFixed(2);
							//positionSun = positionSun.toFixed(2);
							positionMoon = positionMoon + 5;
							positionSun = positionSun + 10;
							
							
							//positionSun = positionSun.toFixed(2);
							
							drawMoonAndSun(positionMoon, positionSun, elongation, dekBulan, dekMatahari, selisih);
							
							var subuhan;
							//if (longitude >= 95 && longitude < 141) { 
							if (hourWL <= 6 && positionSun > -18 && positionSun < -1){
								subuhan = "Shubuh";									
							} else 
								if ((hourWL >= 7 && hourWL <= 11) && positionSun >=6 && positionSun < 55){
									subuhan = "Dhuha";
							} else 
								if (hourWL >= 12 && positionSun > 32){
									subuhan = "Dhuhur";
							} else 
								if (hourWL >= 15 && (positionSun > 5.0 && positionSun < 32)){
									subuhan = "Ashar";
							}else 
								if (hourWL >= 18 && positionSun <= -0.4 && positionSun > -18){
									subuhan = "Maghrib";
							} else 
								if (hourWL >= 19 && positionSun <= -18){
									subuhan = "Isya";
							} else 
								if (hourWL >= 1 && positionSun >= -90 && positionSun <= -20){
									subuhan = "Tahajjud";
								} else 
							{subuhan = "*";}	
							//} else { subuhan = "-"; }
							
							document.getElementById('subuhan').innerHTML = "<span class='merah tebal'>Waktu shalat: </span>"+subuhan;
							
							// Contoh penggunaan
							var waktuKulminasiMatahari = hitungWaktuKulminasiMatahari(date, latitude, longitude);
							
							var time5 = new Date(waktuKulminasiMatahari);
							var suntransitTime = time5.getTime();

// Format waktu menggunakan library 'moment.js'
							var waktuKulminasiMatahariFormatted = moment(waktuKulminasiMatahari).format('HH:mm:ss');

var wlMatahari = subtractGMT(waktuKulminasiMatahariFormatted,gmt);    
							
							//document.getElementById('sunKulminasi').innerHTML = waktuKulminasiMatahariFormatted; 
							document.getElementById('sunKulminasiWL').innerHTML = wlMatahari;

// Mengganti dengan kunci API OpenWeatherMap Anda
							const apiKey = 'dda5ff1a9b8bd6f4a71de5070ca2d493';
													  
							getWeather(latitude, longitude, date, apiKey);
							
							if (sundec > 0){
								var utaraselatan = "<span class='merah'>North</span>";
							}else {
								var utaraselatan = "<span class='merah'>South</span>";   
							}  
							
							if (sundec >= 21.42 && sundec <= 21.43) {
								var utaraselatan = "<span class='biru'>Rashdul Kiblat</span>";
							}
								
							document.getElementById('utaraselatan').innerHTML = utaraselatan;
							
							if (moondec > 0){
								var arahMoondec = "<span class='merah'>North</span>";
							} else {
								var arahMoondec = "<span class='merah'>South</span>";   
							}														
							//document.getElementById('moondec').innerHTML = moondec;
							document.getElementById('arahMoondec').innerHTML = arahMoondec;							
							//document.getElementById('arahMoondec2').innerHTML = arahMoondec;
							
							if (sun_ra < moon_ra){
								var arahSunRA = "<span class='merah'>More Western</span>";
							} else {
								var arahSunRA = "<span class='merah'>More East</span>";   
							}  
							document.getElementById('arahSunRA').innerHTML = arahSunRA;	
							
							if (moon_ra < sun_ra){
								var arahMoonRA = "<span class='merah'>More Western</span>";
							} else {
								var arahMoonRA = "<span class='merah'>More East</span>";   
							}  
							document.getElementById('arahMoonRA').innerHTML = arahMoonRA;

if (moon_az === 0){
								var arahbulan = "<span class='merah'>North</span>";
							} else 
							if (moon_az > 0 && moon_az < 90){
								var arahbulan = "<span class='merah'>NorthEast</span>";   
							} else 
							if (moon_az === 90){
								var arahbulan = "<span class='merah'>East</span>";   
							} else 
							if (moon_az > 90 && moon_az < 180){
								var arahbulan = "<span class='merah'>SouthEast</span>";   
							} else 
							if (moon_az === 180){
								var arahbulan = "<span class='merah'>South</span>";   
							} else 
							if (moon_az > 180 && moon_az < 270){
								var arahbulan = "<span class='merah'>SouthWest</span>";   
							} else 
							if (moon_az === 270){
								var arahbulan = "<span class='merah'>West</span>";   
							} else 
							if (moon_az > 270 && moon_az < 360){
								var arahbulan = "<span class='merah'>NorthWest</span>";   
							}       							
							document.getElementById('arahbulan').innerHTML = arahbulan;
							document.getElementById('arahbulan2').innerHTML = arahbulan;
														
							if (sun_az === 0){
								var arahmatahari = "<span class='merah'>North</span>";
							} else 
							if (sun_az > 0 && sun_az < 90){
								var arahmatahari = "<span class='merah'>NorthEast</span>";   
							} else 
							if (sun_az === 90){
								var arahmatahari = "<span class='merah'>East</span>";   
							} else 
							if (sun_az > 90 && sun_az < 180){
								var arahmatahari = "<span class='merah'>SouthEast</span>";   
							} else 
							if (sun_az === 180){
								var arahmatahari = "<span class='merah'>South</span>";   
							} else 
							if (sun_az > 180 && sun_az < 270){
								var arahmatahari = "<span class='merah'>SouthWest</span>";   
							} else 
							if (sun_az === 270){
								var arahmatahari = "<span class='merah'>West</span>";   
							} else 
							if (sun_az > 270 && sun_az < 360){
								var arahmatahari = "<span class='merah'>NorthWest</span>";   
							}       							
							document.getElementById('arahmatahari').innerHTML = arahmatahari;	
							
							var moonInformation = calculateMoonInformation(date);
							//var moon_age = moonInformation['Moon Age'];
							//moon_age = moon_age.toFixed(2)+" hari ("+convertToDHMS(moon_age)+")"; 
							var moon_phase = moonInformation['Moon Phase'];
							var zodiac = moonInformation['Zodiac Constellation'];
							var trajectory = moonInformation['Trajectory'];
							
							//document.getElementById('moon_age').innerText =  moon_age;
							document.getElementById('moon_phase').innerHTML = moon_phase;
							//document.getElementById('zodiac').innerText = zodiac;
							//document.getElementById('trajectory').innerHTML = trajectory;	
							
//kiblat lokal

var result = calculateQiblaAngle(latitude, longitude);
							var sudutkiblat = result.qiblaAngle;
							
							if (sudutkiblat < 0) {
							sudutkiblat = 360 + sudutkiblat;
							}
							
							var arahkiblat = sudutkiblat.toFixed(3);

document.getElementById("sudutkiblat").innerHTML = "<strong><span class='font15'>Sudut Kiblat:</strong> " + sudutkiblat.toFixed(3) + "° </span>";
							document.getElementById("jarakkekabah").innerHTML = "<strong><span class='font15'>Jarak ke Kabah:</strong> " + result.jarakKibla.toFixed(3) + " km</span>";

var diameter = 150;
							sundec = sundec + "°";
							drawLine(diameter, arahkiblat, sundec, rashdulkiblat, sunaz);		
							
							var durasiMoonage1 = newmoonTime; //juli
							var durasiMoonage2 = newmoonJam; //juni
							
							var newmoonkemarin = new Date(newmoonJam);							
							newmoonkemarin = FormatDate2(newmoonkemarin);							
							document.getElementById('newmoonkemarin').innerHTML = newmoonkemarin;
							
							var newmoonbesok = new Date(newmoonTime);
							newmoonbesok2 = FormatDate2(newmoonbesok);
							document.getElementById('newmoonbesok').innerHTML = newmoonbesok2;
							
							// Waktu yang diberikan
							var dateSekarang = new Date(); 
							dateSekarang = FormatTgl(dateSekarang); 
							
							var waktu1 = durasiMoonage2;
							var waktu2 = dateTime; 
							var waktu3 = durasiMoonage1;
                    
							// Konversi waktu menjadi objek Date
							var t1 = new Date(waktu1);
							t1 = t1.getTime();
							
							var t2 = waktu2;
							
							var t3 = new Date(waktu3);
							t3 = t3.getTime();

// Menghitung selisih waktu dalam milidetik
							if (autotime) {
							    var selisihDetik = Math.abs(t2-t1);
						    } else {
							    var selisihDetik = Math.abs(t2-t3);
						    }

var selisihDetik = selisihDetik/1000;

//equation of time + qibla time
							const J2000 = 2451545; // Julian Day pada 1 Januari 2000, 12:00:00 TUC
							//const T = (time.getTime() - J2000) / (36525 * 24 * 60 * 60 * 1000); // Julian Century 
							const T = (time - J2000) / (36525);

// Menghitung waktu (time) kiblat harian (dalam satuan jam)
							const equationOfTime = 0.000075 + 0.001868 * Math.cos(T) - 0.032077 * Math.sin(T) - 0.014615 * Math.cos(2 * T) - 0.040849 * Math.sin(2 * T);

var B = 90 - latitude; 
							var P = Math.atan(1 / (Math.cos(toRadians(B)) * Math.tan(toRadians(arahkiblat))));
							var Ca = Math.acos(Math.tan(toRadians(sun_dec)) * Math.tan(toRadians(B)) * Math.cos(P));
							  
							P = toDegrees(P);
							Ca = toDegrees(Ca);

var BQI = -((P - Ca) / 15) + (12 - equationOfTime) + (((gmt * 15) - longitude) / 15);
							var BQ2 = -((P + Ca) / 15) + (12 - equationOfTime) + (((gmt * 15) - longitude) / 15);
							var BQI2 = -((P - Ca) / 15) + (12 - equationOfTime) + (((gmt * 15) - longitude) / 15);

//document.getElementById('equationOfWaktu').innerHTML = 'Equation of time: '+equationOfTime.toFixed(4);
							document.getElementById("qiblaTime").innerHTML = "<span class='tebal'>Qibla time 1:</span> "+formatWaktu(BQI) +"  ± 5 menit";
							//document.getElementById("qiblaTime2").innerHTML = "<span class='tebal'>Qibla time 1:</span> "+formatWaktu(BQI2) +"± menit";
							
							
//Kulminasi bulan							
							const culm = Astronomy.SearchHourAngle("Moon", observer, 0, date);
							const waktuKulminasi = FormatDate(culm.time.date);
							document.getElementById('Kulminasi').innerHTML = waktuKulminasi;

//jarak bumi ke matahari
							const distance = calculateDistance(latitude, longitude, date);
							if (distance <= 147000000) {
								var jarakbumimatahari = "(Perihelion)"
							} else 
							if (distance >= 152000000) {
								var jarakbumimatahari = "(Aphelion)"
							} else { jarakbumimatahari = ""};
							
							const resultElement = document.getElementById('distanceEarthSun');
							resultElement.innerHTML = "<span class='tebal merah'>Jarak matahari - bumi:  </span>"+distance.toFixed(3)+" kilometers <span class='merah'>"+jarakbumimatahari+"</span>";
							
							tambahan = 0; 
							var sDate = hitung_Tanggal(2, new Date(date), tambahan);
							var sDate2 = hitung_Tanggal(2, new Date(date), tambahan);
							var sDate3 = hitung_Tanggal(2, new Date(date), tambahan);
							
							//document.getElementById('tulisTanggal').innerHTML = sDate+", "+jumlahHari+", "+selisihsDate;
							document.getElementById('tulisTanggal').innerHTML = sDate;
							document.getElementById("resultTgl").innerHTML = sDate2;
							document.getElementById("resultTgl2").innerHTML = sDate3;
							
                            const solarTime = "<span style='color: black; font-weight: bold;'>SUN & MOON ALTITUDE PADA </span>" + getFormattedDate(date) + " <span style='color: red;font-weight: bold;'>WIB:</span><br/>" +
                            "<span style='color: red;'>Kota Auckland, NZ: </span>" + matahari_alt_auckland + "°"+ "/" + bulan_alt_auckland + "°, " +
                            "<span style='color: red;'>Kota Wellington: </span>" + matahari_alt_wellington + "°"+ "/" + bulan_alt_wellington + "°, " +
                            "<span style='color: red;'>Kota San Francisco: </span>" + matahari_alt_sanfrancisco + "°"+ "/" + bulan_alt_sanfrancisco + "°, " +
                            "<span style='color: red;'>Kota Mexico City: </span>" + matahari_alt_mexicocity + "°"+ "/" + bulan_alt_mexicocity + "°, " +
                            "<span style='color: red;'>Kota Makkah: </span>" + matahari_alt_makkah + "°"+ "/" + bulan_alt_makkah + "°, " +
                            "<span style='color: red;'>Kota Cairo: </span>" + matahari_alt_cairo + "°"+ "/" + bulan_alt_cairo + "°, " +
                            "<span style='color: red;'>Kota Mogadishu: </span>" + matahari_alt_mogadishu + "°"+ "/" + bulan_alt_mogadishu + "°, " +
                            "<span style='color: red;'>Kota Greenwich: </span>" + matahari_alt_greenwich + "°"+ "/" + bulan_alt_greenwich + "°, " +
                            "<span style='color: red;'>Kota New York: </span>" + matahari_alt_newyork + "°"+ "/" + bulan_alt_newyork + "°<br/><br/> " +
                            
                            "<span style='color: red;'>Elongation: </span>" + elongation + "° / <span style='color: red;'>Illumination: </span>" + illu + "<span>. Secara lengkap dapat dilihat di link:</span> <a target='_blank' href='https://www.suncalc.org/sunmoontrack/'>https://www.suncalc.org/sunmoontrack/</a>";
                            
                            document.getElementById("solartime").innerHTML = solarTime;

//getSunsetTime(40.7128, -74.006, 0, date);
						}

setTimeout(UpdateScreen, 1000);       
					}

Options = Init();   
					UpdateScreen(); 
				}
				
			</script>
			
			<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAATj04FZVxMmpwYZm05sLxKzUd7YVb8Jw&sensor=false"></script>
			</center>
				
			<div class="dialog-box" id="dialog-box"> 
				<!DOCTYPE html>
<html>
<head>
	<title>Konversi Tanggal Masehi ke Hijriyah</title>
	<script>
		var fixd;

function isGregLeapYear(year)
		{
			return year%4 == 0 && year%100 != 0 || year%400 == 0;
		}

function gregToFixed(year, month, day)
		{
			var a = Math.floor((year - 1) / 4);
			var b = Math.floor((year - 1) / 100);
			var c = Math.floor((year - 1) / 400);
			var d = Math.floor((367 * month - 362) / 12);

if (month <= 2)
			e = 0;
			else if (month > 2 && isGregLeapYear(year))
			e = -1;
			else
			e = -2;

return 1 - 1 + 365 * (year - 1) + a - b + c + d + e + day;
		}

function Hijri(year, month, day)
		{
			this.year = year;
			this.month = month;
			this.day = day;
			this.toFixed = hijriToFixed;
			this.toString = hijriToString;
		}

function hijriToFixed()
		{
			return this.day + Math.ceil(29.5 * (this.month - 1)) + (this.year - 1) * 354 +
			Math.floor((3 + 11 * this.year) / 30) + 227015 - 1;
		}

function hijriToString()
		{
			var months = new Array("Muharram","Safar","Rabiul Awwal","Rabiul Akhir","Jumadil Awwal","Jumadil Akhir","Rajab","Sya\'ban","Ramadhan","Syawwal","Dzul Qa\'dah","Dzul Hijjah");
			return this.day + " " + months[this.month -1]+ " " + this.year;
		}

if (i2.year === 1513 && i2.month === 9 && i.day === 1) {
				i.day = 30; // ubah tanggal menjadi 1
				i2.month = 8; // ubah bulan menjadi Syawal
				i.month = 8; // ubah bulan menjadi Syawal
			} else {
				if (i2.month === 9) {
					i.day--;
				}
			}

if (i2.year === 1513 && i2.month === 10 && i.day === 3) {
				i.day = 1; // ubah tanggal menjadi 1
				i2.month = 10; // ubah bulan menjadi Syawal
				i.month = 10; // ubah bulan menjadi Syawal
			} else {
				if (i2.month === 10) {
					i.day--;
				}
			}
			
			var status;
			if (i2.month === 1 && i.day === 1) {
				status = "Peristiwa: Tahun Baru Islam";
			} else 
			if (i2.month === 1 && i.day === 13) {
				status = "Peristiwa: Yaumul Bidth";
			} else 
			if (i2.month === 1 && i.day === 14) {
				status = "Peristiwa: Yaumul Bidth";
			} else 
			if (i2.month === 1 && i.day === 15) {
				status = "Peristiwa: Yaumul Bidth";				
			} else 				
			if (i2.month === 1 && i.day === 10) {
				i2.status = "Peristiwa: Hari Asyuro";
			} else
			if (i2.month === 2 && i.day === 29) {
				status = "Peristiwa: New Moon";
			}  else
			if (i2.month === 2 && i.day === 13) {
				status = "Peristiwa: Yaumul Bidth";
			} else 
			if (i2.month === 2 && i.day === 14) {
				status = "Peristiwa: Yaumul Bidth";
			} else 
			if (i2.month === 2 && i.day === 15) {
				status = "Peristiwa: Yaumul Bidth";				
			} else 				
			if (i2.month === 3 && i.day === 12) {
				status = "Peristiwa: Hari Maulid Nabi";
			} else
			if (i2.month === 3 && i.day === 13) {
				status = "Peristiwa: Yaumul Bidth";
			} else 
			if (i2.month === 3 && i.day === 14) {
				status = "Peristiwa: Yaumul Bidth";
			} else 
			if (i2.month === 3 && i.day === 15) {
				status = "Peristiwa: Yaumul Bidth";				
			} else 				
			if (i2.month === 4 && i.day === 29) {
				status = "Peristiwa: New Moon";
			} else
			if (i2.month === 4 && i.day === 13) {
				status = "Peristiwa: Yaumul Bidth";
			} else 
			if (i2.month === 4 && i.day === 14) {
				status = "Peristiwa: Yaumul Bidth";
			} else 
			if (i2.month === 4 && i.day === 15) {
				status = "Peristiwa: Yaumul Bidth";				
			} else 
			if (i2.month === 5 && i.day === 13) {
				status = "Peristiwa: Yaumul Bidth";
			} else 
			if (i2.month === 5 && i.day === 14) {
				status = "Peristiwa: Yaumul Bidth";
			} else 
			if (i2.month === 5 && i.day === 15) {
				status = "Peristiwa: Yaumul Bidth";				
			} else 				
			if (i2.month === 5 && i.day === 29) {
				status = "Peristiwa: New Moon";
			}else	
			if (i2.month === 6 && i.day === 13) {
				status = "Peristiwa: Yaumul Bidth";
			} else 
			if (i2.month === 6 && i.day === 14) {
				status = "Peristiwa: Yaumul Bidth";
			} else 
			if (i2.month === 6 && i.day === 15) {
				status = "Peristiwa: Yaumul Bidth";				
			} else 				
			if (i2.month === 6 && i.day === 29) {
				status = "Peristiwa: New Moon";
			} else
			if (i2.month === 7 && i.day === 13) {
				status = "Peristiwa: Yaumul Bidth";
			} else 
			if (i2.month === 7 && i.day === 14) {
				status = "Peristiwa: Yaumul Bidth";
			} else 
			if (i2.month === 7 && i.day === 15) {
				status = "Peristiwa: Yaumul Bidth";				
			} else 				
			if (i2.month === 7 && i.day === 27) {
				status = "Peristiwa: Hari Isra Miraj";
			} else
			if (i2.month === 7 && i.day === 29) {
				status = "Peristiwa: New Moon";
			} else
			if (i2.month === 8 && i.day === 13) {
				status = "Peristiwa: Yaumul Bidth";
			} else 
			if (i2.month === 8 && i.day === 14) {
				status = "Peristiwa: Yaumul Bidth";
			} else  				
			if (i2.month === 8 && i.day === 15) {
				status = "Peristiwa: Hari Nisfu Syaban + Yaumul Bidth";
			} else
			if (i2.month === 9 && i.day === 1) {   
				status = "Peristiwa: Awal Puasa";
			} else
			if (i2.month === 9 && i.day === 17) {
				status = "Peristiwa: Hari Nuzulul Quran";
			} else
			if (i2.month === 9 && i.day === 29) {
				status = "Peristiwa: New Moon";
			} else
			if (i2.month === 10 && i.day === 1) {
				status = "Peristiwa: Idul Fitri";
			} else
			if (i2.month === 10 && i.day === 13) {
				status = "Peristiwa: Yaumul Bidth";
			} else 
			if (i2.month === 10 && i.day === 14) {
				status = "Peristiwa: Yaumul Bidth";
			} else 
			if (i2.month === 10 && i.day === 15) {
				status = "Peristiwa: Yaumul Bidth";				
			} else 				
			if (i2.month === 10 && i.day === 30) {
				status = "Peristiwa: New Moon";
			} else
			if (i2.month === 11 && i.day === 13) {
				status = "Peristiwa: Yaumul Bidth";
			} else 
			if (i2.month === 11 && i.day === 14) {
				status = "Peristiwa: Yaumul Bidth";
			} else 
			if (i2.month === 11 && i.day === 15) {
				status = "Peristiwa: Yaumul Bidth";				
			} else 				
			if (i2.month === 11 && i.day === 29) {
				status = "Peristiwa: New Moon";
			} else
			if (i2.month === 12 && i.day === 8) {
				status = "Peristiwa: Hari Tarwiyah";
			} else				
			if (i2.month === 12 && i.day === 9) {
				status = "Peristiwa: Hari Arafah";
			} else
			if (i2.month === 12 && i.day === 10) {
				status = "Peristiwa: Hari Idul Adha";
			} else				
			if (i2.month === 12 && i.day === 11) {
				status = "Peristiwa: Hari Tasyrik";	
			} else				
			if (i2.month === 12 && i.day === 12) {
				status = "Peristiwa: Hari Tasyrik";	
			} else				
			if (i2.month === 12 && i.day === 13) {  
				status = "Peristiwa: Hari Tasyrik";				
			} else 
			if (i2.month === 12 && i.day === 30) {  
				status = "Peristiwa: New Moon";				
			} else {			
			status = "";
			}			
			return {
				i : i, 
				status : status  
			};
		}

function showDate() {
			var dateInput = document.getElementById("date").value;
			var dateArray = dateInput.split("-");
			
			var y = parseInt(dateArray[0]);
			var m = parseInt(dateArray[1]) - 1;
			var d = parseInt(dateArray[2]);
			var day = new Date(y, m, d).getDay();   
			
			//var today = Date(y, m, d);			
			const pasaran = ["Pahing", "Pon", "Wage", "Kliwon", "Legi"];
			const jumlahHari = Math.floor((new Date(y, m, d) - new Date("1900-01-01")) / (1000 * 60 * 60 * 24));
			const sisaHari = jumlahHari % 35;
			const indeksPasaran = sisaHari % 5;

var weekday = new Array("Ahad","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu");
			var monthname = new Array("Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember");

var fixedDate = gregToFixed(y, m + 1, d);
			var hijriDate = fixedToHijri(fixedDate);
			var hijriDateString = hijriDate.i.toString();
			var statusBulan = hijriDate.status;
			var result = "<b>Hasil: "+weekday[day] +  " " + pasaran[indeksPasaran] +", "+d+" "+monthname[m] + " " + y ;
			
			document.getElementById("result").innerHTML = result+" / "+ hijriDateString +" H <br/><span style='color: brown;'>"+statusBulan+"</span></b>";
		}
	</script>
	<style>
		body {
			font-size: 20px; 
		}
		
	</style>
</head>
<body>
	<center>
	<h3 style="color: darkblue;">Konversi Tanggal Masehi ke Hijriyah</h3>
	<button title="Konversi tanggal Hijriyah ke Masehi" onclick="showKonversi()">Hijriyah ke Masehi</button>&nbsp;&nbsp;&nbsp;<button title="Hitung hari antar 2 tanggal" onclick="showHari()">Jumlah Hari</button>&nbsp;&nbsp;&nbsp;<button title="Mencari tanggal tertentu setelah ditambah sejumlah hari" onclick="showKetanggal()">Cari Tanggal</button>
	<p>Masukkan tanggal Masehi yang ingin dikonversi:</p>
	<hr/>    
	<input type="date" id="date">
	<button onclick="showDate()">Convert</button>
	<hr/>
	<p id="result" style="color: blue;">Hasil:</p>
	<hr/>
	</center>
</body>
</html>

<button onclick="hideDialog()">Tutup</button>
			</div>

<div class="konversi-box" id="konversi-box">
				<!DOCTYPE html>
<html>
<head>
	<title>Konversi Kalender Hijriyah ke Masehi</title>
	<style>
		body {
			font-size: 20px;    
		}
		input, td {
			font-size: 20px; 
		}	
	</style>	
</head>
<body>
	<h3  style="color: darkblue;">Konversi Kalender Hijriyah ke Masehi</h3>
	<center>
		<table>
			<tr>
				<td>Tanggal</td>
				<td>Bulan</td>
				<td>Tahun</td>
			</tr>
			<tr>
				<td><input type="numeric" size=5 id="tgl"></td>
				<td><input type="numeric" size=5 id="bln"></td>
				<td><input type="numeric" size=7 id="thn"></td>
			</tr>
			<tr>
				<td colspan="3"><button size=5 type="button" onclick="konversi()">Konversi</button><br/></td>
			</tr>			
		</table>
		</center>
	<hr/>
	<p id="masehi" style="color: blue; font-size: 20px;">Hasil:</p>
	<hr/>
	<script>
		function konversi() {   
			// Ambil nilai tanggal, bulan, dan tahun dari form
			var tgl = parseInt(document.getElementById('tgl').value);
			var bln = parseInt(document.getElementById('bln').value);
			var thn = parseInt(document.getElementById('thn').value);

// Hitung jumlah hari dari 1 Muharram 1 H
			var jd = Math.floor((11 * thn + 3) / 30) + 354 * thn + 30 * bln - Math.floor((bln - 1) / 2) + tgl + 1948440 - 385;

// Konversi dari jumlah hari ke tanggal Masehi
			var l = jd + 68569;
			var n = Math.floor((4 * l) / 146097);
			l = l - Math.floor((146097 * n + 3) / 4);
			var i = Math.floor((4000 * (l + 1)) / 1461001);
			l = l - Math.floor((1461 * i) / 4) + 31;
			var j = Math.floor((80 * l) / 2447);
			var k = l - Math.floor((2447 * j) / 80);
			l = Math.floor(j / 11);
			j = j + 2 - 12 * l;
			i = 100 * (n - 49) + i + l;

if ((thn === 1444 && bln === 9 && tgl === 30) || (thn === 1444 && bln === 10 && tgl === 1)){
				tgl = 1;
				bln = 10;
				thn = thn;
				
				k = 21;
				j = j;
			} else if (bln === 10){
				j = j;
				k = k-1;
				if (k === 0){
					k = 30;
					j = j - 1;     
				}
			}

if ((thn === 1444 && bln === 11 && tgl === 30) || (thn === 1444 && bln === 12 && tgl === 1)){
				tgl = 1;
				bln = 12;
				thn = thn;
				
				k = 19;
				j = j;
			} else if (bln === 12){
				j = j;
				k = k-1;
				if (k === 0){
					k = 30;
					j = j - 1;
				}				
			}
			
			if (thn === 1445 && bln === 10 && tgl === 1){
				tgl = 1;
				bln = 10;
				thn = thn;
				
				k = 10;
				j = j;
			} else if (bln === 10){
				j = j;
				k = k+1;
				if (k === 0){
					k = 30;
					j = j - 1;     
				}
			}	
			
			if (thn === 1445 && bln === 12 && tgl === 1){
				tgl = 1;
				bln = 12;
				thn = thn;
				
				k = 8;
				j = j;
			} else if (bln === 12){
				j = j;
				k = k+1;
				if (k === 0){
					k = 30;
					j = j - 1;     
				}
			}

if (thn === 1513 && bln === 9 && tgl === 1){
				tgl = 1;
				bln = 9;
				thn = thn;
				
				k = 3;
				j = j;
			} else if (bln === 9){
				j = j;
				k = k+1;
				if (k === 0){
					k = 30;
					j = j - 1;     
				}
			}	''
			var masehi = "Konversi Hijriyah ke Masehi: "+tgl+"/"+bln+"/"+thn+" H = "+ k + "/" + j + "/" + i +" M";
			document.getElementById('masehi').innerText = masehi;
		}
	</script>         
</body>
</html>
				<button onclick="hideKonversi()">Tutup</button>
			</div>

<div class="hari-box" id="hari-box">
				<head>
  <title>Hitung Jumlah Hari</title>  
  <script>
    function hitungSelisih() {
      // Ambil nilai dari input tanggal awal
      var tgl1 = document.getElementById("tgl1").value;
      var bln1 = document.getElementById("bln1").value;
      var thn1 = document.getElementById("thn1").value;

// Ambil nilai dari input tanggal akhir
      var tgl2 = document.getElementById("tgl2").value;
      var bln2 = document.getElementById("bln2").value;
      var thn2 = document.getElementById("thn2").value;

// Buat objek tanggal awal dan tanggal akhir
      var tanggal1 = new Date(thn1, bln1 - 1, tgl1);
      var tanggal2 = new Date(thn2, bln2 - 1, tgl2);

// Hitung selisih dalam milidetik
      var selisihMiliDetik = tanggal2.getTime() - tanggal1.getTime();

// Konversi milidetik menjadi hari
      var selisihHari = selisihMiliDetik / (1000 * 60 * 60 * 24);

// Tampilkan hasil selisih hari
      document.getElementById("hasil").innerHTML = "Selisih hari antara tanggal " + tanggal1.toLocaleDateString() + " dan " + tanggal2.toLocaleDateString() + " adalah " + selisihHari + " hari.";
    }

<div class="ketanggal-box" id="ketanggal-box">
				<!DOCTYPE html>
<html>
<head>
	<title>Menuju Tanggal Tertentu</title>
	<style>
		body {
			font-size: 20px;    
		}
		input, td {
			font-size: 20px; 
			text-align: left;
		}		
	</style>	
</head>
<body>

<center>
	<h3>Menuju Tanggal Tertentu</h3>
  <table>
    <tr>
      <td>Tanggal Awal:</td>
      <td><input type="date" id="start-date"></td>
    </tr>    
    <tr>
      <td>Tambahan Hari:</td>
      <td><input type="number" size="3" id="num-days"></td>
    </tr>
  </table>               
  <br>
  <button type="button" onclick="calculateDate()">Hitung Tanggal</button>

<hr/>
<p id="target-date"></p>
<hr/>
</center>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

// Membuat fungsi untuk menambahkan hari ke tanggal tertentu
    function addDays(date, days) {
      var result = moment(date);
      result.add(days, 'days');
      return result;
    }

// Menghitung tanggal target dengan memanggil fungsi addDays
    var targetDate = addDays(startDate, numDays);

// Format tanggal target menjadi format Indonesia
    var formattedDate = targetDate.format("DD MMMM YYYY");

// Menampilkan hasil perhitungan pada elemen dengan id "target-date"
    document.getElementById("target-date").innerHTML = "Tanggal target: " + formattedDate;
  }
</script>
</body>
</html>
				<button onclick="hideKetanggal()">Tutup</button>
			</div>

// Fungsi untuk menyembunyikan dialog box
				function hideDialog() {
					document.getElementById("dialog-box").style.display = "none";
				}

// Fungsi untuk menampilkan dialog box
				function showKonversi() {
					document.getElementById("konversi-box").style.display = "block";
				}

// Fungsi untuk menyembunyikan dialog box
				function hideKonversi() {
					document.getElementById("konversi-box").style.display = "none";
				}

// Fungsi untuk menampilkan dialog box
				function showHari() {
					document.getElementById("hari-box").style.display = "block";
				}

// Fungsi untuk menyembunyikan dialog box
				function hideHari() {
					document.getElementById("hari-box").style.display = "none";
				}

// Fungsi untuk menampilkan dialog box
				function showKetanggal() {
					document.getElementById("ketanggal-box").style.display = "block";
				}

// Fungsi untuk menyembunyikan dialog box
				function hideKetanggal() {
					document.getElementById("ketanggal-box").style.display = "none";
				}

// Memaksa tampilan menjadi landscape
    			function forceLandscape() {
    			  if (screen.orientation) {
    				screen.orientation.lock('landscape')
    				  .then(function() {
    					console.log('Tampilan berhasil diubah menjadi landscape!');
    				  })
    				  .catch(function(error) {
    					console.error('Gagal mengubah tampilan menjadi landscape:', error);
    				  });
    			  } else if (screen.mozLockOrientation) {
    				screen.mozLockOrientation('landscape');
    				console.log('Tampilan berhasil diubah menjadi landscape!');
    			  } else if (screen.msLockOrientation) {
    				screen.msLockOrientation('landscape');
    				console.log('Tampilan berhasil diubah menjadi landscape!');
    			  } else {
    				console.log('Perubahan tampilan tidak didukung oleh perangkat ini.');
    			  }
    			}		
    		</script>	
    <footer>
        <div class="social-icons">
            <a href="https://www.facebook.com/anaskasmui/"><i class="fab fa-facebook"></i></a>
            <a href="https://twitter.com/kasmui"><i class="fab fa-twitter"></i></a>
            <a href="https://www.instagram.com/kasmui_insta/"><i class="fab fa-instagram"></i></a>
            <a href="https://www.youtube.com/@kasmui/"><i class="fab fa-youtube"></i></a>
            <a href="https://wa.me/+62818294312"><i class="fab fa-whatsapp"></i></a>
            <a href="https://t.me/kasmui"><i class="fab fa-telegram"></i></a>
        </div>
        <span class="copyright">Copyleft (ɔ) Kasmui, ChatGPT, Copilot & Gemini, 2023. All Wrongs Reserved.</span>
    </footer>
    
    <center>                  
        <p style="text-align: center;">       
            <small>These web pages are best viewed on a screen of 1280 × 1024 pixels or larger - </small>
            <span style="color: black;"><small>Hit counts : 37578
 </small></span>
        </p>
    </center> 
        
    <script>
        // JavaScript code with error handling and necessary definitions

// Ensure all variables are defined
        var sun_az = 270; // Example value, replace with actual value
        var latitude = 0; // Example value, replace with actual value
        var longitude = 0; // Example value, replace with actual value

if (sun_az === 270) {
            var arahmatahari = "<span class='merah'>West</span>";
        } else if (sun_az > 270 && sun_az < 360) {
            arahmatahari = "<span class='merah'>NorthWest</span>";
        } else {
            arahmatahari = "<span class='merah'>Unknown</span>";
        }
        document.getElementById('arahmatahari').innerHTML = arahmatahari;

var moonInformation = calculateMoonInformation(new Date());
        var moon_phase = moonInformation['Moon Phase'];
        document.getElementById('moon_phase').innerHTML = moon_phase;

var result = calculateQiblaAngle(latitude, longitude);
        var sudutkiblat = result.qiblaAngle;

if (sudutkiblat < 0) {
            sudutkiblat = 360 + sudutkiblat;
        }

document.getElementById("sudutkiblat").innerHTML = "<strong><span class='font15'>Sudut Kiblat:</strong> " + sudutkiblat.toFixed(3) + "° </span>";
        document.getElementById("jarakkekabah").innerHTML = "<strong><span class='font15'>Jarak ke Kabah:</strong> " + result.jarakKibla.toFixed(3) + " km</span>";

// Ensure the drawLine function is defined
        var diameter = 150;
        var sundec = "Example"; // Replace with actual value
        drawLine(diameter, sudutkiblat, sundec);

if (screen.orientation && screen.orientation.lock) {
            screen.orientation.lock('landscape')
                .then(function() {
                    console.log('Tampilan berhasil diubah menjadi landscape!');
                })
                .catch(function(error) {
                    console.error('Gagal mengubah tampilan menjadi landscape:', error);
                });
        } else if (screen.mozLockOrientation) {
            screen.mozLockOrientation('landscape');
            console.log('Tampilan berhasil diubah menjadi landscape!');
        } else if (screen.msLockOrientation) {
            screen.msLockOrientation('landscape');
            console.log('Tampilan berhasil diubah menjadi landscape!');
        } else {
            console.log('Perubahan tampilan tidak didukung oleh perangkat ini.');
        }
    </script>
    <script>
// Inisialisasi peta dengan opsi yang tepat
map = L.map('map', {
    maxBounds: [[-90, -180], [90, 180]], // Set batas peta ke koordinat dunia nyata
    maxBoundsViscosity: 1.0 // Membatasi peta agar tidak bisa digeser di luar batas
}).setView([0, 0], 2);

// Atur layer tile peta
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 20,
    attribution: 'Desainer: @Kasmui, &copy; <a target="_blank" href="http://www.stargazing.net/mas/hayes/ephemeris.html">Peter Hayes</a> | ' + 
        'Map data &copy; <a  target="_blank" href="https://openstreetmap.org">OpenStreetMap</a> contributors, ' +
        '<a  target="_blank" href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
}).addTo(map);

// Fungsi untuk menambahkan marker sesuai dengan koordinat yang dipilih
function addMarker(latitude, longitude, placeName) {
    if (marker) { // Jika marker sudah ada, hapus marker sebelumnya
        map.removeLayer(marker);
    }
    marker = L.marker([latitude, longitude]).addTo(map);
    marker.bindPopup("Lokasi Pengamatan:<br>" + placeName).openPopup();
    map.setView([latitude, longitude], 10); // Zoom ke lokasi marker
}

// Event handler untuk pembaruan tempat
function updateplace() {
    var selectedPlace = document.table1.Place.value;
    var coordinates = selectedPlace.split(":"); // Asumsikan format "ID:latitude:longitude"
    
    var latitude = parseFloat(coordinates[1]);
    var longitude = parseFloat(coordinates[2]);
    var placeName = coordinates[0];
    
    addMarker(latitude, longitude, placeName);
}

// Menambahkan event listener ke dropdown tempat
document.table1.Place.addEventListener('change', updateplace);
        
</script>
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('sw.js').then(reg => {
          console.log('Service Worker registered.', reg);
        }).catch(err => console.warn('Service Worker failed:', err));
      });
    }
  </script>
</body>
</html>

Paste Settings

Paste Title : [Optional]

Paste Folder : [Optional]

Syntax Highlighting : [Optional]

Paste Expiration : [Optional]

Paste Status : [Optional]

Password : [Optional]

Description: [Optional]

Tags: [Optional]

Encrypt Paste (?)

You are currently not logged in, this means you can not edit or delete anything you paste. Sign Up or Login

Recent Pastes

Untitled
PHP | 1 | 44 minutes ago
Untitled
PHP | 5 | 2 hours ago
Untitled
PHP | 4 | 2 hours ago
Untitled
PHP | 5 | 2 hours ago
Untitled
PHP | 5 | 2 hours ago
Untitled
PHP | 11 | 5 hours ago
Untitled
PHP | 11 | 5 hours ago

Paste Settings

Site Languages