Indexx.html
Anonymous
259 x views • 5 years ago
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Aplikasi Perkiraan Cuaca</title>
<meta content="" name="descriptison">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Dosis:300,400,500,,600,700,700i|Lato:300,300i,400,400i,700,700i" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/icofont/icofont.min.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/venobox/venobox.css" rel="stylesheet">
<link href="assets/vendor/line-awesome/css/line-awesome.min.css" rel="stylesheet">
<link href="assets/vendor/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
<!-- =======================================================
* Template Name: Butterfly - v2.0.0
* Template URL: https://bootstrapmade.com/butterfly-free-bootstrap-theme/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
======================================================== -->
</head>
<body>
<!-- ======= Header ======= -->
<header id="header" class="fixed-top">
<div class="container d-flex align-items-center">
<a href="/cuaca2/" class="logo mr-auto">Aplikasi Perkiraan Cuaca</a>
<!-- Uncomment below if you prefer to use text as a logo -->
<!-- <h1 class="logo mr-auto"><a href="index.html">Butterfly</a></h1> -->
<nav class="nav-menu d-none d-lg-block">
<ul>
<li class="active"><a href="/cuaca2/">Beranda</a></li>
<li><a href="#services">Info Cuaca</a></li>
<li><a href="#Galery">Berita</a></li>
<li><a href="#team">Team</a></li>
</ul>
</nav><!-- .nav-menu -->
</div>
</header><!-- End Header -->
<!-- ======= Hero Section ======= -->
<section id="hero" class="d-flex align-items-center">
<div class="container">
<div class="row">
<div class="col-lg-6 pt-4 pt-lg-0 order-2 order-lg-1 d-flex flex-column justify-content-center">
<h1>Aplikasi Informasi Cuaca Harian Jogjakarta</h1>
<h2>Dapatkan info dan berita cuaca teraktual dan terupdate di sini</h2> </div>
<div class="col-lg-6 order-1 order-lg-2 hero-img">
<img src="assets/img/hero-img.png" class="img-fluid" alt="">
</div>
</div>
</div>
</section><!-- End Hero -->
<main id="main">
<!-- ======= Services Section ======= -->
<section id="services" class="services section-bg">
<div class="container">
<div class="section-title">
<hr>
<h4 id="judulCuaca"></h4>
<div class="card-columns" id="cuaca">
</div>
</div>
<div class="row">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
var lat = -6.3730914;
var lon = 106.7116703;
function getWilayah() {
$.getJSON('https://ibnux.github.io/BMKG-importer/cuaca/wilayah.json', function (data) {
var items = [];
var jml = data.length;
//hitung jarak
for (n = 0; n < jml; n++) {
data[n].jarak = distance(lat, lon, data[n].lat, data[n].lon, 'K');
}
//urutkan berdasarkan jarak
data.sort(urutkanJarak);
//setelah dapat jarak, ambil 5 terdekat
$('#judulTerdekat').html("Jarak terdekat dari " + lat + "," + lon);
$('#wilayahTerdekat').html(items.join(""));
$('#judulCuaca').html(data[0].propinsi +
', ' + data[0].kota + ', ' + data[0].kecamatan + ' ' + data[0].jarak.toFixed(2)+" km");
getCuaca(data[0].id);
});
}
function getCuaca(idWilayah) {
$.getJSON('https://ibnux.github.io/BMKG-importer/cuaca/'+idWilayah+'.json', function (data) {
var items = [];
var jml = data.length;
//setelah dapat jarak, ambil 5 terdekat
for (n = 0; n < jml; n++) {
items.push(' <div class="icon-box"><div class="col-lg-10">'+
'<img src="https://ibnux.github.io/BMKG-importer/icon/'+
data[n].kodeCuaca+
'.png" class="img-responsive">'+
'<div class="card-body"><h5 class="card-title">'+
data[n].cuaca+
'</h5><p class="card-text">'+
data[n].jamCuaca+
'</p><p class="card-text">'+data[n].tempC+'℃</p></div></div></div>');
if (n > 4) break
};
$('#cuaca').html(items.join(""));
});
}
// https://www.htmlgoodies.com/beyond/javascript/calculate-the-distance-between-two-points-in-your-web-apps.html
function distance(lat1, lon1, lat2, lon2) {
var radlat1 = Math.PI * lat1 / 180
var radlat2 = Math.PI * lat2 / 180
var theta = lon1 - lon2
var radtheta = Math.PI * theta / 180
var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
dist = Math.acos(dist)
dist = dist * 180 / Math.PI
dist = dist * 60 * 1.1515
return Math.round((dist * 1.609344) * 1000) / 1000;
}
function urutkanJarak(a, b) {
if (a['jarak'] === b['jarak']) {
return 0;
}
else {
return (a['jarak'] < b['jarak']) ? -1 : 1;
}
}
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, onErrorGPS);
} else {
//ga bisa dapat GPS, pake default aja
getWilayah();
}
}
function showPosition(position) {
lat = position.coords.latitude;
lon = position.coords.longitude;
getWilayah();
}
function onErrorGPS(error) {
//ake default aja
getWilayah();
}
getLocation();
</script>
</div>
</div>
</section><!-- End Services Section -->
<!-- ======= Gallery Section ======= -->
<section id="gallery" class="gallery">
<div class="container">
<div class="section-title">
<h2>Berita</h2>
<p>Under Proses.</p>
</div>
<div class="row no-gutters">
<div class="col-lg-3 col-md-4">
<div class="gallery-item">
<a href="assets/img/gallery/gallery-1.jpg" class="venobox" data-gall="gallery-item">
<img src="assets/img/gallery/gallery-1.jpg" alt="" class="img-fluid">
</a>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="gallery-item">
<a href="assets/img/gallery/gallery-2.jpg" class="venobox" data-gall="gallery-item">
<img src="assets/img/gallery/gallery-2.jpg" alt="" class="img-fluid">
</a>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="gallery-item">
<a href="assets/img/gallery/gallery-3.jpg" class="venobox" data-gall="gallery-item">
<img src="assets/img/gallery/gallery-3.jpg" alt="" class="img-fluid">
</a>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="gallery-item">
<a href="assets/img/gallery/gallery-4.jpg" class="venobox" data-gall="gallery-item">
<img src="assets/img/gallery/gallery-4.jpg" alt="" class="img-fluid">
</a>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="gallery-item">
<a href="assets/img/gallery/gallery-5.jpg" class="venobox" data-gall="gallery-item">
<img src="assets/img/gallery/gallery-5.jpg" alt="" class="img-fluid">
</a>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="gallery-item">
<a href="assets/img/gallery/gallery-6.jpg" class="venobox" data-gall="gallery-item">
<img src="assets/img/gallery/gallery-6.jpg" alt="" class="img-fluid">
</a>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="gallery-item">
<a href="assets/img/gallery/gallery-7.jpg" class="venobox" data-gall="gallery-item">
<img src="assets/img/gallery/gallery-7.jpg" alt="" class="img-fluid">
</a>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="gallery-item">
<a href="assets/img/gallery/gallery-8.jpg" class="venobox" data-gall="gallery-item">
<img src="assets/img/gallery/gallery-8.jpg" alt="" class="img-fluid">
</a>
</div>
</div>
</div>
</div>
</section><!-- End Gallery Section -->
<!-- ======= Team Section ======= -->
<section id="team" class="team section-bg">
<div class="container">
<div class="section-title">
<h2>Team</h2>
<p>Orang dibalik pembuatan aplikasi perkiraan cuaca .</p>
</div>
<div class="row">
<div class="col-lg-3 col-md-6 d-flex align-items-stretch">
<div class="member">
<div class="member-img">
<img src="assets/img/team/aditahay.png" class="img-fluid" alt="">
</div>
<div class="member-info">
<h4>Aditya Wijo Kongko</h4>
<span>Ketua</span>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 d-flex align-items-stretch">
<div class="member">
<div class="member-img">
<img src="assets/img/team/fachressasub.jpg" class="img-fluid" alt="">
</div>
<div class="member-info">
<h4>Fachressa Aditya Firmansyah</h4>
<span>Support</span>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 d-flex align-items-stretch">
<div class="member">
<div class="member-img">
<img src="assets/img/team/kevinsub.jpg" class="img-fluid" alt="">
</div>
<div class="member-info">
<h4>Kevin julian Firmansyah</h4>
<span>Support</span>
</div>
</div>
</div>
</div>
</div>
</section><!-- End Team Section -->
</main><!-- End #main -->
<!-- ======= Footer ======= -->
<footer id="footer">
<div class="footer-top">
</div>
<div class="container py-4">
<div class="copyright">
© Copyright <strong><span>Butterfly</span></strong>. All Rights Reserved
</div>
<div class="credits">
<!-- All the links in the footer should remain intact. -->
<!-- You can delete the links only if you purchased the pro version. -->
<!-- Licensing information: https://bootstrapmade.com/license/ -->
<!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/butterfly-free-bootstrap-theme/ -->
Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
</div>
</div>
</footer><!-- End Footer -->
<a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>
<!-- Vendor JS Files -->
<script src="assets/vendor/jquery/jquery.min.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/jquery.easing/jquery.easing.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<script src="assets/vendor/venobox/venobox.min.js"></script>
<script src="assets/vendor/waypoints/jquery.waypoints.min.js"></script>
<script src="assets/vendor/counterup/counterup.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/owl.carousel/owl.carousel.min.js"></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Aplikasi Perkiraan Cuaca</title>
<meta content="" name="descriptison">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Dosis:300,400,500,,600,700,700i|Lato:300,300i,400,400i,700,700i" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/icofont/icofont.min.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/venobox/venobox.css" rel="stylesheet">
<link href="assets/vendor/line-awesome/css/line-awesome.min.css" rel="stylesheet">
<link href="assets/vendor/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
<!-- =======================================================
* Template Name: Butterfly - v2.0.0
* Template URL: https://bootstrapmade.com/butterfly-free-bootstrap-theme/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
======================================================== -->
</head>
<body>
<!-- ======= Header ======= -->
<header id="header" class="fixed-top">
<div class="container d-flex align-items-center">
<a href="/cuaca2/" class="logo mr-auto">Aplikasi Perkiraan Cuaca</a>
<!-- Uncomment below if you prefer to use text as a logo -->
<!-- <h1 class="logo mr-auto"><a href="index.html">Butterfly</a></h1> -->
<nav class="nav-menu d-none d-lg-block">
<ul>
<li class="active"><a href="/cuaca2/">Beranda</a></li>
<li><a href="#services">Info Cuaca</a></li>
<li><a href="#Galery">Berita</a></li>
<li><a href="#team">Team</a></li>
</ul>
</nav><!-- .nav-menu -->
</div>
</header><!-- End Header -->
<!-- ======= Hero Section ======= -->
<section id="hero" class="d-flex align-items-center">
<div class="container">
<div class="row">
<div class="col-lg-6 pt-4 pt-lg-0 order-2 order-lg-1 d-flex flex-column justify-content-center">
<h1>Aplikasi Informasi Cuaca Harian Jogjakarta</h1>
<h2>Dapatkan info dan berita cuaca teraktual dan terupdate di sini</h2> </div>
<div class="col-lg-6 order-1 order-lg-2 hero-img">
<img src="assets/img/hero-img.png" class="img-fluid" alt="">
</div>
</div>
</div>
</section><!-- End Hero -->
<main id="main">
<!-- ======= Services Section ======= -->
<section id="services" class="services section-bg">
<div class="container">
<div class="section-title">
<hr>
<h4 id="judulCuaca"></h4>
<div class="card-columns" id="cuaca">
</div>
</div>
<div class="row">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
var lat = -6.3730914;
var lon = 106.7116703;
function getWilayah() {
$.getJSON('https://ibnux.github.io/BMKG-importer/cuaca/wilayah.json', function (data) {
var items = [];
var jml = data.length;
//hitung jarak
for (n = 0; n < jml; n++) {
data[n].jarak = distance(lat, lon, data[n].lat, data[n].lon, 'K');
}
//urutkan berdasarkan jarak
data.sort(urutkanJarak);
//setelah dapat jarak, ambil 5 terdekat
$('#judulTerdekat').html("Jarak terdekat dari " + lat + "," + lon);
$('#wilayahTerdekat').html(items.join(""));
$('#judulCuaca').html(data[0].propinsi +
', ' + data[0].kota + ', ' + data[0].kecamatan + ' ' + data[0].jarak.toFixed(2)+" km");
getCuaca(data[0].id);
});
}
function getCuaca(idWilayah) {
$.getJSON('https://ibnux.github.io/BMKG-importer/cuaca/'+idWilayah+'.json', function (data) {
var items = [];
var jml = data.length;
//setelah dapat jarak, ambil 5 terdekat
for (n = 0; n < jml; n++) {
items.push(' <div class="icon-box"><div class="col-lg-10">'+
'<img src="https://ibnux.github.io/BMKG-importer/icon/'+
data[n].kodeCuaca+
'.png" class="img-responsive">'+
'<div class="card-body"><h5 class="card-title">'+
data[n].cuaca+
'</h5><p class="card-text">'+
data[n].jamCuaca+
'</p><p class="card-text">'+data[n].tempC+'℃</p></div></div></div>');
if (n > 4) break
};
$('#cuaca').html(items.join(""));
});
}
// https://www.htmlgoodies.com/beyond/javascript/calculate-the-distance-between-two-points-in-your-web-apps.html
function distance(lat1, lon1, lat2, lon2) {
var radlat1 = Math.PI * lat1 / 180
var radlat2 = Math.PI * lat2 / 180
var theta = lon1 - lon2
var radtheta = Math.PI * theta / 180
var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
dist = Math.acos(dist)
dist = dist * 180 / Math.PI
dist = dist * 60 * 1.1515
return Math.round((dist * 1.609344) * 1000) / 1000;
}
function urutkanJarak(a, b) {
if (a['jarak'] === b['jarak']) {
return 0;
}
else {
return (a['jarak'] < b['jarak']) ? -1 : 1;
}
}
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, onErrorGPS);
} else {
//ga bisa dapat GPS, pake default aja
getWilayah();
}
}
function showPosition(position) {
lat = position.coords.latitude;
lon = position.coords.longitude;
getWilayah();
}
function onErrorGPS(error) {
//ake default aja
getWilayah();
}
getLocation();
</script>
</div>
</div>
</section><!-- End Services Section -->
<!-- ======= Gallery Section ======= -->
<section id="gallery" class="gallery">
<div class="container">
<div class="section-title">
<h2>Berita</h2>
<p>Under Proses.</p>
</div>
<div class="row no-gutters">
<div class="col-lg-3 col-md-4">
<div class="gallery-item">
<a href="assets/img/gallery/gallery-1.jpg" class="venobox" data-gall="gallery-item">
<img src="assets/img/gallery/gallery-1.jpg" alt="" class="img-fluid">
</a>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="gallery-item">
<a href="assets/img/gallery/gallery-2.jpg" class="venobox" data-gall="gallery-item">
<img src="assets/img/gallery/gallery-2.jpg" alt="" class="img-fluid">
</a>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="gallery-item">
<a href="assets/img/gallery/gallery-3.jpg" class="venobox" data-gall="gallery-item">
<img src="assets/img/gallery/gallery-3.jpg" alt="" class="img-fluid">
</a>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="gallery-item">
<a href="assets/img/gallery/gallery-4.jpg" class="venobox" data-gall="gallery-item">
<img src="assets/img/gallery/gallery-4.jpg" alt="" class="img-fluid">
</a>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="gallery-item">
<a href="assets/img/gallery/gallery-5.jpg" class="venobox" data-gall="gallery-item">
<img src="assets/img/gallery/gallery-5.jpg" alt="" class="img-fluid">
</a>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="gallery-item">
<a href="assets/img/gallery/gallery-6.jpg" class="venobox" data-gall="gallery-item">
<img src="assets/img/gallery/gallery-6.jpg" alt="" class="img-fluid">
</a>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="gallery-item">
<a href="assets/img/gallery/gallery-7.jpg" class="venobox" data-gall="gallery-item">
<img src="assets/img/gallery/gallery-7.jpg" alt="" class="img-fluid">
</a>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="gallery-item">
<a href="assets/img/gallery/gallery-8.jpg" class="venobox" data-gall="gallery-item">
<img src="assets/img/gallery/gallery-8.jpg" alt="" class="img-fluid">
</a>
</div>
</div>
</div>
</div>
</section><!-- End Gallery Section -->
<!-- ======= Team Section ======= -->
<section id="team" class="team section-bg">
<div class="container">
<div class="section-title">
<h2>Team</h2>
<p>Orang dibalik pembuatan aplikasi perkiraan cuaca .</p>
</div>
<div class="row">
<div class="col-lg-3 col-md-6 d-flex align-items-stretch">
<div class="member">
<div class="member-img">
<img src="assets/img/team/aditahay.png" class="img-fluid" alt="">
</div>
<div class="member-info">
<h4>Aditya Wijo Kongko</h4>
<span>Ketua</span>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 d-flex align-items-stretch">
<div class="member">
<div class="member-img">
<img src="assets/img/team/fachressasub.jpg" class="img-fluid" alt="">
</div>
<div class="member-info">
<h4>Fachressa Aditya Firmansyah</h4>
<span>Support</span>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 d-flex align-items-stretch">
<div class="member">
<div class="member-img">
<img src="assets/img/team/kevinsub.jpg" class="img-fluid" alt="">
</div>
<div class="member-info">
<h4>Kevin julian Firmansyah</h4>
<span>Support</span>
</div>
</div>
</div>
</div>
</div>
</section><!-- End Team Section -->
</main><!-- End #main -->
<!-- ======= Footer ======= -->
<footer id="footer">
<div class="footer-top">
</div>
<div class="container py-4">
<div class="copyright">
© Copyright <strong><span>Butterfly</span></strong>. All Rights Reserved
</div>
<div class="credits">
<!-- All the links in the footer should remain intact. -->
<!-- You can delete the links only if you purchased the pro version. -->
<!-- Licensing information: https://bootstrapmade.com/license/ -->
<!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/butterfly-free-bootstrap-theme/ -->
Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
</div>
</div>
</footer><!-- End Footer -->
<a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>
<!-- Vendor JS Files -->
<script src="assets/vendor/jquery/jquery.min.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/jquery.easing/jquery.easing.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<script src="assets/vendor/venobox/venobox.min.js"></script>
<script src="assets/vendor/waypoints/jquery.waypoints.min.js"></script>
<script src="assets/vendor/counterup/counterup.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/owl.carousel/owl.carousel.min.js"></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>
