InaTEWS - BMKG (Indonesia Tsunami Early Warning System)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="icon" type="image/x-icon" href="https://inatews.bmkg.go.id//favicon.ico"> <link rel="stylesheet" href="https://inatews.bmkg.go.id/assets_inatews/css/all.css" /> <link rel="stylesheet" href="https://inatews.bmkg.go.id/assets_inatews/css/L.Icon.Pulse.css" /> <link rel="stylesheet" href="https://inatews.bmkg.go.id/assets_inatews/css/L.Control.Layers.Tree.css"/> <link rel="stylesheet" href="https://cdn.datatables.net/1.11.4/css/jquery.dataTables.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css" /> <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> <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css'> <link rel="stylesheet" href="https://inatews.bmkg.go.id/assets_inatews/css/Icon.Label.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <link rel="stylesheet" href="https://inatews.bmkg.go.id/assets_inatews/css/style.css" /> <script src="https://inatews.bmkg.go.id/assets_inatews/js/Icon.Label.js"></script> <script src="https://inatews.bmkg.go.id/assets_inatews/js/Icon.Label.Default.js"></script> <script src="https://inatews.bmkg.go.id/assets_inatews/js/leaflet-tilelayer-colorfilter.min.js"></script> <title>InaTEWS - BMKG (Indonesia Tsunami Early Warning System)</title> </head> <body > <div class="container"> <header id="main-header" class=""> <div class="d-flex flex-row "id="header_img_bg" style=" display:block; background-image: url('https://inatews.bmkg.go.id/assets_inatews/img/header2.jpg'); background-repeat:no-repeat; background-size: 100% auto; max-width: 100%; height:110px"> <div class="col-lg-2 p-0 bg-secondary" style="background-color:rgb(0,0,0,0)!important; position: absolute; z-index:100" > <a href="https://inatews.bmkg.go.id/"><div class="card card-body text-black py-2 px-1 border-0 d-none d-lg-block d-md-block col-sm-2" style=" background-color:rgb(0,0,0,0); background-image: url('https://inatews.bmkg.go.id/assets_inatews/img/gabunglogo.png')!important; background-repeat:no-repeat; background-size: contain; background-position: left; height:90px; display: block; max-width: 100%; max-height: 100%"> </div></a> </div> <div class="col-lg-12 col-md-12" style="float:left!important; "> <div id="box_judul" class="d-flex flex-column py-4 my-1 d-sm-block text-white" > <h4 id="judul_header" style="font-weight: bold;text-align:center!important; margin-bottom:0px;" >INDONESIA TSUNAMI EARLY WARNING SYSTEM</h4> </div> </div> </div> <div class="d-flex flex-row"> <div class="col-lg-12 col-md-12" style="padding:0px"> <nav class="navbar my-navbar navbar-expand-lg navbar-light bg-light"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav ml-auto" id="menu"> <li class="nav-item "> <a class="nav-link" href="https://inatews.bmkg.go.id/"><i class="fas fa-home"></i> Info Terkini <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="https://inatews.bmkg.go.id/web/m5"><i class="fab fa-creative-commons-sampling"></i> Gempabumi M>5</a> </li> <li class="nav-item"> <a class="nav-link" href="https://inatews.bmkg.go.id/web/felt"><i class="fas fa-globe-asia"></i> Gempabumi Dirasakan</a> </li> <li class="nav-item"> <a class="nav-link" href="https://inatews.bmkg.go.id/web/tsunami"><i class="fas fa-house-damage"></i> Tsunami</a> </li> <li class="nav-item"> <a class="nav-link" href="https://inatews.bmkg.go.id/web/realtime"><i class="fas fa-bolt"></i> Gempabumi Realtime</a> </li> <li class="nav-item"> <a class="nav-link" href="http://inatews2.bmkg.go.id" target="_blank"><i class="fas fa-bolt"></i> Versi Desktop</a> </li> <li class="nav-item"> <a class="nav-link" href="https://inatews.bmkg.go.id/eng"><i class="fas fa-language"></i> English Version</a> </li> </ul> </div> </nav> </div> </div> <script> document.onkeydown = function(e) { if(event.keyCode == 123) { return false; } if(e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)){ return false; } if(e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)){ return false; } if(e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)){ return false; } } </script> <div class="d-flex flex-row"> <div class="col-lg-12 p-0 bg-secondary" style="background-color:white!important" > <div class="col-lg-12 col-md-12" style="float:left!important; position: absolute; z-index:9999 "> </div> <div class="px-4 py-1 bg-dark text-left" id="map" style="height:400px;"> <div aria-live="polite" id="tos" aria-atomic="true" style="position: relative; max-height: 100px; display:none"> <div style="z-index:100000000!important;position: absolute; top: 90px; right: 0;background-color:rgb(0,0,0,0)"> <div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="true" style="" data-delay="20000" style="background-color:rgb(0,0,0,0)!important"> <div class="toast-header"> <svg width="20" height="20" class="mr-2" viewBox="0 0 24 24"> <path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z" fill="green"></path> </svg> <strong class="mr-auto">Mekanisme Sumber</strong> <small></small> <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="toast-body p-0" style="width:300px; background-color:rgb(0,0,0,0)!important"> <div class="row" style="background-color:rgb(0,0,0,0)!important"> <div class="col-12 mt-0" style="background-color:rgb(0,0,0,0)!important"> <div class="card" style="background-color:rgb(252,252,252,0)!important; margin:0"> <div class="row" style="background-color:rgb(252,252,252,0)!important"> <div class="col-5 mt-0" style=" background-color:rgb(252,252,252,0)!important"> <img class="" id="fm_img"src="" alt="Card image cap"> </div> <div class="col-7 mt-0" style="background-color:rgb(252,252,252,0)!important"> <p id="np1" class="mb-0 fokal">Nodal Plane 1</p> <p id="np2" class="mb-0 fokal">Nodal Plane 2</p> <p id="mw" class="mb-0 fokal">Mw : </p> <p id="fd" class="mb-0 fokal">Focal Depth : </p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div> <div class="d-flex flex-row text-black align-items-stretch text-center" style="max-height:120px!important"> <div class="col-lg-4 p-3 bg-secondary" style="background-color:#F0ECE3!important" > <span style='color: red;'><i class='fas fa-clock fa-2x'></i></span></br> <span class=" d-sm-block" id="ot_gempa" style="font-size:100%; font-weight:bold">--</span> </div> <div class="col-lg-4 p-3 bg-secondary" style="background-color:#F0ECE3!important" > <span style='color: orange;'><i class='fas fa-map-marked-alt fa-2x'></i></span></br> <span class=" d-sm-block" id="lokasi_gempa" style="font-size:100%; font-weight:bold"> --</span> </div> <div class="col-lg-4 p-3 bg-secondary" style="background-color:#F0ECE3!important; " > <span style='color: green;'><i class='fas fa-podcast fa-2x '></i></span></br> <span class=" d-sm-block" style="font-size:100%; font-weight:bold" id="kedalaman_gempa">---</span> </div> </div> <div class="py-2 px-3 bg-secondary text-center text-black" style="background-color:#FFA500!important"> <p class="lead" id="deskripsi" id="deskripsi_gempa" style="font-weight:500; font-size:120%;"> ----</p> </div> <div class="row no-gutters " style="max-height:800px!important; margin:0"> <div class="col-lg-6 col-md-12 col-sm-12 p-0 bg-secondary " id="a1" style="background-color:white!important" > <div class="d-flex flex-row text-black align-items-stretch text-center" > <div class="col-lg-3 col-sm-2 col-md-3 p-0 bg-secondary d-none d-md-block d-lg-bock" id="a1" style="background-color:white!important" > <div class="card card-body text-black py-2 px-1 border-0" style=" background-image: url('https://inatews.bmkg.go.id/assets_inatews/img/speaker.png')!important; background-repeat:no-repeat; background-size: contain; background-position: center; height:140px"> </div> </div> <div class="col-lg-6 col-sm-8 col-md-6 p-0 bg-secondary " id="a2" style="background-color:white!important"> <div class="card card-body bg-none text-black py-3 border-0" style="background-color:rgb(0, 0, 0,0)!important"> <h5>ARAHAN BMKG</h5> <p id="instruction">--</p> </div> </div> <div class="col-lg-3 col-sm-2 col-md-3 p-0 bg-secondary d-none d-md-block d-lg-bock" style="background-color:white!important" id="logo_eva" > <div class="card card-body text-black py-2 px-1 border-0" style=" background-image: url('https://inatews.bmkg.go.id/assets_inatews/img/rasa-m5.png')!important; background-repeat:no-repeat; background-size: contain; background-position: center; height:140%"> </div> </div> </div> </div> <div class="col-lg-2 p-0 bg-success " style="background-color:#9A0101!important" > <div class="card card-body bg-success text-black py-3 border-0 " style="background-color:#9A0101!important"> <p style="margin-bottom:0px; color:#FFA858; text-align:center"> Magnitudo</p> <h1 style=" text-align:center; font-size:450%; margin-top:-10px; color:#FFA858; font-weight:bold !important" id="mag_big">-</h1> </div> </div> <div class="col-lg-4 p-0 bg-success" id="mag_kotak2" style="background-color:#E40202!important " > <div class="card card-body bg-success text-black py-3 px-1 border-0 text-center" id="mag_kotak" style="background-color:#E40202!important"> <h1 id="warn1" style=" text-align:center; font-size:230%!important; color:white; font-weight:bold !important"> --- </h1> </div> </div> </div> <div class="d-flex flex-row text-black align-items-stretch text-center" id="tombols" style="max-height:100px!important"> <div class="col-md-4 col-sm-4 port-item p-2 bg-secondary active" id="tombol_1" style="background-color:#CCD1E4!important " data-toggle="collapse" data-target="#home"> <i class="fas fa-house-damage fa-2x d-block"></i> <span class="d-none d-sm-block">INFO DAMPAK</span> </div> <div class="col-md-4 col-sm-4 port-item p-2 bg-secondary" id="tombol_2" style="background-color:#CCD1E4!important" data-toggle="collapse" data-target="#resume"> <i class="fas fa-clipboard fa-2x d-block"></i> <span class="d-none d-sm-block">INFO NARASI</span> </div> <div class="col-md-4 col-sm-4 port-item p-2 bg-secondary" id="tombol_3" style="background-color:#CCD1E4!important" data-toggle="collapse" data-target="#work" onclick="mapclear()"> <i class="fas fa-history fa-2x d-block" ></i> <span class="d-none d-sm-block">GEMPABUMI MERUSAK</span> </div> </div> </header>  <div id="home" class="collapse show hover"> <div class="row no-gutters"> <div class="col-lg-6 col-md-6 bg-primary" id="div_tsu" style="background-color:#F8F9FA!important"> <div class="card card-body bg-primary text-black py-3 border-0" style="background-color:#F8F9FA!important"> <div id="no_threat"> <i class="fas fa-water fa-2x d-block" style=" float:left; font-size:130%!important; margin-right:10px;"></i> <h5>INFORMASI DAMPAK TSUNAMI</h5> <hr style="height:2px;border-width:0;color:gray;background-color:gray"> <p > Peta Perkiraan Tinggi Muka Laut Maximum :</p> <div id="report_tsunami"></div> <p id="subjudul_obs"></p>  <table id="div31" class="table table-bordered smalltab" width="100%" style="margin-top:0px;"></table> <p class="card-text border-0" style="font-size:100%; color:black; margin-bottom:0px; margin-top:10px;"> Daerah yang berpotensi tsunami berdasarkan pemodelan :</p> <div class="pane" id="style-5" style="max-height: 400px; overflow-y: scroll;"> <table id="div311" class="table table-bordered smalltab" style="margin-top:0px;"></table> </div> <p class="card-text border-0" style="font-size:100%; font-weight:500; color:black; margin-bottom:10px; margin-top:10px;"> Saran dan Arahan Status Peringatan :</p> <div class="py-1 px-4 bg-secondary text-left text-black" style="background-color:#FC3435!important"> <div class="row no-gutters"> <div class="col-lg-2 p-0 " > <div class="card card-body bg-primary text-red py-3 border-0 d-none d-md-block d-lg-block" style="background-color:rgb(0,0,0,0)!important"> <i class="fas fa-bullhorn fa-2x d-block"></i> </div> </div> <div class="col-lg-10 p-0 bg-secondary" style="background-color:rgb(0,0,0,0)!important" > <div class="card card-body bg-primary text-black py-2 px-1 border-0 text-left" style="background-color:rgb(0,0,0,0)!important"> <p class="lead" id="inst1" style="font-weight:400; font-size:100%;"> ----</p> </div> </div> </div> </div> <div class="py-1 px-4 bg-secondary text-left text-black" style="background-color:#FF7A00!important"> <div class="row no-gutters"> <div class="col-lg-2 p-0 " > <div class="card card-body bg-primary text-orange py-3 border-0 d-none d-md-block d-lg-block" style="background-color:rgb(0,0,0,0)!important"> <i class="fas fa-bullhorn fa-2x d-block"></i> </div> </div> <div class="col-lg-10 p-0 bg-secondary" style="background-color:rgb(0,0,0,0)!important" > <div class="card card-body bg-primary text-black py-2 px-1 border-0 text-left" style="background-color:rgb(0,0,0,0)!important"> <p class="lead" id="inst2" style="font-weight:400; font-size:100%;"> ----</p> </div> </div> </div> </div> <div class="py-1 px-4 bg-secondary text-left text-black" style="background-color:yellow!important"> <div class="row no-gutters"> <div class="col-lg-2 p-0 " > <div class="card card-body bg-primary text-yellow py-3 border-0 d-none d-md-block d-lg-block" style="background-color:rgb(0,0,0,0)!important"> <i class="fas fa-bullhorn fa-2x d-block"></i> </div> </div> <div class="col-lg-10 p-0 bg-secondary" style="background-color:rgb(0,0,0,0)!important" > <div class="card card-body bg-primary text-black py-2 px-1 border-0 text-left" style="background-color:rgb(0,0,0,0)!important"> <p class="lead" id="inst3" style="font-weight:400; font-size:100%;"> ----</p> </div> </div> </div> </div> </div> </div> </div> <div class="col-lg-6 col-md-6 bg-light border-0" id="dampak_div" style="background-color:#F8F9FA!important" > <div class="card card-body text-dark py-3 border-0" style="background-color:#F8F9FA!important"> <div id="no_threat2"> <i class="fas fa-house-damage fa-2x d-block" style="font-size:120%!important; float:left!important; margin-right:10px;"></i> <h5>INFORMASI DAMPAK GEMPABUMI</h5> <hr style="height:2px;border-width:0;color:gray;background-color:gray"> <p id="sh_model">Informasi dampak berdasarkan data observasi peralatan Acelerometer: </p> <div id="report_gempa"></div> <p>Informasi dampak berbasis kecamatan berdasarkan data observasi peralatan Acelerometer: </p> <div id="report_gempa2"></div> </div> </div> </div> <div class="col-lg-6 col-md-6 bg-light border-0" id="shake_div" style="display:none; background-color:#F8F9FA!important " > <div class="card card-body bg-light text-dark py-3 border-0" > <div id="no_threat2"> <i class="fas fa-house-damage fa-2x d-block" style="font-size:120%!important; float:left!important; margin-right:10px;"></i> <h5>HASIL PENGUKURAN ACCELEROMETER</h5> <hr style="height:2px;border-width:0;color:gray;background-color:gray"> <p>Sebaran peralatan Acelerometer yang digunakan: </p> <div class="" id="shakemap_sebaran"></div> <p>Hasil perhitungan PGA Max dan MMI berdasarkan data observasi peralatan Acelerometer: </p> <div class="" id="shakemap_list"></div> </div> </div> </div> <div class="col-lg-12 col-md-12 bg-dark border-1" id="pd4_div" style="background-color:white!important; display:none; " > <div class="d-flex flex-row card card-body text-black align-items-stretch text-left border-0" > <h4> :: APA YANG HARUS DILAKUKAN SESUDAH GEMPABUMI DAN TSUNAMI ::</h4> </div> <div class="d-flex flex-row text-black align-items-stretch text-left" > <div class="col-lg-2 col-sm-2 col-md-6 p-2 bg-secondary " id="a1" style="background-color:white!important" > <div class="card card-body text-black p-3 border-0"><img class=" bg-dark" style="border-radius: 50%;" width="100%"src="assets_inatews/img/antisipasi11.png" > </div> </div> <div class="col-lg-10 col-md-6 p-0 bg-secondary " id="a2" style="background-color:white!important"> <div class="card card-body bg-none text-black py-3 border-0" style="background-color:rgb(0, 0, 0,0)!important"> <h5>A. Jika Anda berada di dalam bangunan :</h5> <p id=""> Keluar dari bangunan tersebut dengan tertib; Jangan menggunakan tangga berjalan atau lift, gunakan tangga biasa; Periksa apa ada yang terluka, lakukan P3K; Telepon atau mintalah pertolongan apabila terjadi luka parah pada Anda atau sekitar Anda.</p> </div> </div> </div> <div class="d-flex flex-row text-black align-items-stretch text-left" > <div class="col-lg-2 col-sm-2 col-md-6 p-2 bg-secondary " id="a1" style="background-color:white!important" > <div class="card card-body text-black p-3 border-0"><img class=" bg-dark" style="border-radius: 50%;" width="100%"src="assets_inatews/img/antisipasi11.png" > </div> </div> <div class="col-lg-10 col-md-6 p-0 bg-secondary " id="a2" style="background-color:white!important"> <div class="card card-body bg-none text-black py-3 border-0" style="background-color:rgb(0, 0, 0,0)!important"> <h5>B. Periksa lingkungan sekitar Anda</h5> <p id=""> Periksa apabila terjadi kebakaran. Periksa apabila terjadi kebocoran gas. Periksa apabila terjadi hubungan arus pendek listrik. Periksa aliran dan pipa air. Periksa apabila ada hal-hal yang membahayakan (mematikan listrik, tidak menyalakan api dll)</p> </div> </div> </div> <div class="d-flex flex-row text-black align-items-stretch text-left" > <div class="col-lg-2 col-sm-2 col-md-6 p-2 bg-secondary " id="a1" style="background-color:white!important" > <div class="card card-body text-black p-3 border-0"><img class=" bg-dark" style="border-radius: 50%;" width="100%"src="assets_inatews/img/antisipasi13.png" > </div> </div> <div class="col-lg-10 col-md-6 p-0 bg-secondary " id="a2" style="background-color:white!important"> <div class="card card-body bg-none text-black py-3 border-0" style="background-color:rgb(0, 0, 0,0)!important"> <h5>C. Jangan mamasuki bangunan yang sudah terkena gempa</h5> <p id=""> Karena kemungkinan masih terdapat reruntuhan.</p> </div> </div> </div> <div class="d-flex flex-row text-black align-items-stretch text-left" > <div class="col-lg-2 col-sm-2 col-md-6 p-2 bg-secondary " id="a1" style="background-color:white!important" > <div class="card card-body text-black p-3 border-0"><img class=" bg-dark" style="border-radius: 50%;" width="100%"src="assets_inatews/img/antisipasi11.png" > </div> </div> <div class="col-lg-10 col-md-6 p-0 bg-secondary " id="a2" style="background-color:white!important"> <div class="card card-body bg-none text-black py-3 border-0" style="background-color:rgb(0, 0, 0,0)!important"> <h5>D. Jangan berjalan di daerah sekitar gempa</h5> <p id=""> Kemungkinan terjadi bahaya susulan masih ada.</p> </div> </div> </div> <div class="d-flex flex-row text-black align-items-stretch text-left" > <div class="col-lg-2 col-sm-2 col-md-6 p-2 bg-secondary " id="a1" style="background-color:white!important" > <div class="card card-body text-black p-3 border-0"><img class=" bg-dark" style="border-radius: 50%;" width="100%"src="assets_inatews/img/antisipasi15.png" > </div> </div> <div class="col-lg-10 col-md-6 p-0 bg-secondary " id="a2" style="background-color:white!important"> <div class="card card-body bg-none text-black py-3 border-0" style="background-color:rgb(0, 0, 0,0)!important"> <h5>E. Mendengarkan informasi.</h5> <p id=""> Dengarkan informasi mengenai gempabumi dari radio (apabila terjadi gempa susulan). Jangan mudah terpancing oleh isu atau berita yang tidak jelas sumbernya.</p> </div> </div> </div> </div> </div> </div>  <div id="resume" class="collapse"> <div class="card card-body bg-dark text-dark py-3 px-3" style="background-color:#EDEDEB!important" id="narasi"> </div> </div>  <div id="work" class="collapse"> <div class="card card-body bg-dark text-dark py-3 border-0 " style="background-color:#ededeb!important"> <h5>HISTORI GEMPABUMI MERUSAK DI SEKITAR EPISENTER</h5> <p> Berikut ini adalah sejarah gempabumi signifikan yang pernah terjadi di sekitar episenter (jarak < 250 km) </p> <div class="row no-gutters"> <div class="col-md-12" id="map2"></div> </div> </br> <div class="card card-body text-dark"> <p>List Gempabumi merusak di sekitar epicenter:</p> <table id="katalog_table" class="display" style="width:100%"></table> </div> </div> </div>  <div id="contact" class="collapse"> <div class="card card-body bg-default text-black py-3 border-0" style="background-color:#e0e0dc!important"> <h2 style="font-size:150%" class="text-center"><b>30 EVENT TERAKHIR</b></h2> <p class="text-center m-0">Merupakan 30 kejadian gempabumi terakhir yang didiseminasikan oleh InaTEWS BMKG</p> <section id="model_6"> <div class="tabs-container"> <ul class="nav nav-tabs container" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="home-tab" style=" color: black !important;" data-toggle="tab" href="#home5" role="tab" aria-controls="home" aria-selected="true"><i class="fab fa-creative-commons-sampling"></i> 30 Gempabumi (M>5) Terakhir</a> </li> <li class="nav-item"> <a class="nav-link" id="profile-tab" style=" color: black !important;" data-toggle="tab" href="#profile5" role="tab" aria-controls="profile" aria-selected="false"><i class="fab fa-creative-commons-sampling-plus"></i> 30 Gempabumi Dirasakan Terakhir</a> </li> <li class="nav-item"> <a class="nav-link text-black " style=" color: black !important;" id="contact-tab" data-toggle="tab" href="#contact5" role="tab" aria-controls="contact" aria-selected="false"><i class="fab fa-firefox"></i> 30 Gempabumi Tsunami Terakhir</a> </li> </ul> </div> <div class="tab-content container" id="myTabContent"> <div class="tab-pane fade show active" style="background-color:white!important" id="home5" role="tabpanel" aria-labelledby="home-tab"> </div> <div class="tab-pane fade" id="profile5" style="background-color:white!important" role="tabpanel" aria-labelledby="profile-tab"></div> <div class="tab-pane fade" id="contact5" style="background-color:white!important" role="tabpanel" aria-labelledby="contact-tab"></div> </div> </section> </div> </div> <div class="alert alert-success mb-1" style="margin:0!important; font-size:90%"role="alert"> <p id="note"></p> <p style="font-size:90%">Situs web berbasis cloud ini berisi informasi ringan dan terbatas untuk tujuan peringatan dini saja, untuk katalog gempa lengkap dapat diakses melalui http://repogempa.bmkg. go.id atau hubungi email bmkg info_inatews@bmkg.go.id untuk mengakses waveform gempa.</p> </div>  <footer id="main-footer" class="p-2 bg-light text-dark text-center"> <div class="row" style="margin-top:10px"> <div class="col text-black"> <a href="https://bmkg.go.id/" target="_blank"> <span style="color:black!important"> <i class="fas fa-user-circle"></i> BMKG Website </span> </a> </div> <div class="col text-black"> <a href="http://repogempa.bmkg.go.id/" target="_blank"> <span style="color:black!important"> <i class="fas fa-user-circle"></i> Repository </a> </span> </div> <div class="col text-black"> <a href="http://aeic.bmkg.go.id/" target="_blank"> <span style="color:black!important"> <i class="fas fa-user-circle"></i> AEIC-BMKG </a> </span> </div> </div> <div class="row text-center" style="margin-top:20px"> <div class="col" style="width:20%!important;"> <a href="https://inatews.bmkg.go.id/assets_inatews/img/blekok_innovator_team.png" data-toggle="lightbox"> <img src="https://inatews.bmkg.go.id/assets_inatews/img/blekok_innovator_team.png" alt="" width="15%" class="img-fluid "> </a></br> <span style="font-size:90%!important">©2022 Website InaTEWS</span> </div> </div> </footer> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"></script> <script src="https://inatews.bmkg.go.id/assets_inatews/js/leaflet-providers.js"></script> <script src="https://inatews.bmkg.go.id/assets_inatews/js/leaflet-realtime.js"></script> <script src="https://inatews.bmkg.go.id/assets_inatews/js/L.Icon.Pulse.js"></script> <script src="https://inatews.bmkg.go.id/assets_inatews/js/L.Control.Layers.Tree.js"></script> <script src="https://d3js.org/d3.v5.min.js"></script> <script src="https://inatews.bmkg.go.id/assets_inatews/js/jquery.cookie.js"></script> <script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script> <script src="https://inatews.bmkg.go.id/assets_inatews/js/chroma.min.js"></script> <script src="https://inatews.bmkg.go.id/assets_inatews/js/moment.min.js"></script> <script src="https://inatews.bmkg.go.id/assets_inatews/js/id.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/series-label.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/modules/export-data.js"></script> <script src="https://code.highcharts.com/modules/accessibility.js"></script> <script src="https://inatews.bmkg.go.id/assets_inatews/js/apps.js"></script> <script src="https://inatews.bmkg.go.id/assets_inatews/js/apps2.js"></script> <script> var current = location.href; var sub = document.getElementById("menu").getElementsByTagName("li"); var lis = document.querySelectorAll('nav ul li a'); for (let i = 0; i < lis.length; i++) { if(lis[i].href == current){ sub[i].classList.add("nav-active"); } } $(".port-item").click(function () { $(".collapse").collapse("hide"); }); $(document).on("click", '[data-toggle="lightbox"]', function (e) { e.preventDefault(); $(this).ekkoLightbox(); }); //map var chart = Highcharts.chart('container_hc', { chart: { backgroundColor: 'rgb(250, 250, 250,0.3)' }, title: { enabled: false, text: '' }, subtitle: { text: 'Frekuensi Gempabumi selama 3 Bulan radius 250 km dari episenter', style: { color: 'white' } }, xAxis: { tickInterval: 2, labels: { style: { color: 'white' } } }, legend: { enabled: false }, labels: { items: [{ //html: 'Total fruit consumption', style: { left: '50px', top: '18px', color: (// theme Highcharts.defaultOptions.title.style && Highcharts.defaultOptions.title.style.color) || 'white' } } ] }, yAxis: { title: { text: '' } }, series: [{ type: 'column', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] }, { type: 'spline', name: 'Jumlah', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], marker: { lineWidth: 2, lineColor: Highcharts.getOptions().colors[3], fillColor: 'white' } } ] }); </script> </body> </html>

CINXE.COM

InaTEWS - BMKG (Indonesia Tsunami Early Warning System)