- 제출된 URL:
- https://arteliawebdev.online/
- 보고서 완료:
링크 · 1개 결과
페이지에서 식별된 외부 링크
| 링크 | 텍스트 |
|---|---|
| https://leafletjs.com | Leaflet |
JavaScript 변수 · 14개 결과
페이지의 창 개체에 로드된 전역 JavaScript 변수는 함수 외부에서 선언된 변수로, 현재 범위 내에서 코드의 어느 부분에서나 액세스할 수 있습니다
| 이름 | 유형 |
|---|---|
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| uidEvent | number |
| bootstrap | object |
| L | object |
| hideLoading | function |
| showAccuracy | function |
| updateServerLocation | function |
| initializeMap | function |
콘솔 로그 메시지 · 2개 결과
웹 콘솔에 기록된 메시지
| 유형 | 카테고리 | 로그 |
|---|---|---|
| error | security |
|
| warning | javascript |
|
HTML
페이지의 원시 HTML 본문
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="VsbuE4eIpGcHfOMa1bXfw8TpXodvNBMWJxgwwH1A">
<title>Butik Gamis Modern</title>
<!-- CSS Dependencies -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<style>
:root {
--primary-color: #6f42c1;
--secondary-color: #fd7e14;
--accent-color: #20c997;
--text-color: #2c3e50;
--light-bg: #f8f9fa;
--dark-bg: #343a40;
}
body {
font-family: 'Poppins', sans-serif;
color: var(--text-color);
background-color: #fff;
}
/* Navbar Styling */
.navbar {
background-color: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
padding: 1rem 0;
}
.navbar-brand {
font-weight: 700;
color: var(--primary-color);
font-size: 1.5rem;
}
.nav-link {
font-weight: 500;
color: var(--text-color);
transition: color 0.3s ease;
}
.nav-link:hover {
color: var(--primary-color);
}
/* Hero Section */
.hero {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
padding: 100px 0;
color: white;
text-align: center;
margin-bottom: 4rem;
}
.hero h1 {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 1rem;
}
.hero p {
font-size: 1.2rem;
opacity: 0.9;
}
/* Product Cards */
.product-card {
border: none;
border-radius: 15px;
overflow: hidden;
transition: all 0.3s ease;
margin-bottom: 30px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.product-card:hover {
transform: translateY(-10px);
box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}
.product-card img {
height: 300px;
object-fit: cover;
}
.product-card .card-body {
padding: 1.5rem;
}
.product-price {
font-size: 1.25rem;
color: var(--primary-color);
font-weight: 600;
}
/* Category Cards */
.category-card {
background: var(--light-bg);
border-radius: 15px;
padding: 2rem;
text-align: center;
transition: all 0.3s ease;
margin-bottom: 30px;
border: none;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
.category-card:hover {
background: var(--primary-color);
color: white;
transform: translateY(-5px);
}
.category-card i {
font-size: 2.5rem;
margin-bottom: 1rem;
color: var(--primary-color);
}
.category-card:hover i {
color: white;
}
/* Location Map */
#map {
height: 400px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
margin: 2rem 0;
}
/* Testimonials */
.testimonial-card {
background: var(--light-bg);
border-radius: 15px;
padding: 2rem;
margin-bottom: 30px;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
.testimonial-card img {
width: 80px;
height: 80px;
border-radius: 50%;
margin-bottom: 1rem;
}
/* Features Section */
.feature-card {
text-align: center;
padding: 2rem;
border-radius: 15px;
background: white;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
margin-bottom: 30px;
}
.feature-card i {
font-size: 2.5rem;
color: var(--primary-color);
margin-bottom: 1rem;
}
/* Newsletter */
.newsletter {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
padding: 4rem 0;
color: white;
margin: 4rem 0;
}
/* Footer */
footer {
background: var(--dark-bg);
color: white;
padding: 4rem 0 2rem;
}
.footer-links {
list-style: none;
padding: 0;
}
.footer-links li a {
color: rgba(255,255,255,0.8);
text-decoration: none;
transition: color 0.3s ease;
}
.footer-links li a:hover {
color: white;
}
/* Loading Overlay */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255,255,255,0.9);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.spinner {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Buttons */
.btn-primary {
background-color: var(--primary-color);
border-color: var(--primary-color);
padding: 0.8rem 2rem;
border-radius: 25px;
font-weight: 500;
transition: all 0.3s ease;
}
.btn-primary:hover {
background-color: darken(var(--primary-color), 10%);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
/* Responsive Design */
@media (max-width: 768px) {
.hero h1 {
font-size: 2.5rem;
}
.product-card img {
height: 250px;
}
.category-card {
padding: 1.5rem;
}
}
@media (max-width: 576px) {
.hero h1 {
font-size: 2rem;
}
.product-card img {
height: 200px;
}
}
</style>
</head>
<body>
<!-- Loading Overlay -->
<div class="loading-overlay" id="loadingOverlay">
<div class="spinner"></div>
</div>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top bg-white">
<div class="container">
<a class="navbar-brand" href="#">Butik Gamis Modern</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#home">Beranda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#products">Produk</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#categories">Kategori</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">Tentang</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Kontak</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero" id="home">
<div class="container">
<h1>Koleksi Gamis Terbaru</h1>
<p class="lead">Temukan koleksi gamis modern dan elegan untuk tampilan yang sempurna</p>
<a href="#products" class="btn btn-light btn-lg mt-3">Lihat Koleksi</a>
</div>
</section>
<!-- Featured Categories -->
<section class="container my-5" id="categories">
<h2 class="text-center mb-4">Kategori Unggulan</h2>
<div class="row">
<div class="col-md-3 mb-4">
<div class="category-card">
<i class="fas fa-tshirt"></i>
<h4>Gamis Casual</h4>
<p>Koleksi gamis untuk kegiatan sehari-hari</p>
</div>
</div>
<div class="col-md-3 mb-4">
<div class="category-card">
<i class="fas fa-gem"></i>
<h4>Gamis Pesta</h4>
<p>Gamis mewah untuk acara spesial</p>
</div>
</div>
<div class="col-md-3 mb-4">
<div class="category-card">
<i class="fas fa-mosque"></i>
<h4>Gamis Syar'i</h4>
<p>Koleksi gamis syar'i terlengkap</p>
</div>
</div>
<div class="col-md-3 mb-4">
<div class="category-card">
<i class="fas fa-user-graduate"></i>
<h4>Gamis Remaja</h4>
<p>Gamis trendy untuk remaja</p>
</div>
</div>
</div>
</section>
<!-- Featured Products -->
<section class="container my-5" id="products">
<h2 class="text-center mb-4">Produk Unggulan</h2>
<div class="row">
<!-- Product 1 -->
<div class="col-md-4 mb-4">
<div class="product-card card">
<img src="https://via.placeholder.com/300x400" class="card-img-top" alt="Gamis 1">
<div class="card-body">
<h5 class="card-title">Gamis Butterfly</h5>
<p class="card-text">Gamis modern dengan motif kupu-kupu yang elegan</p>
<div class="d-flex justify-content-between align-items-center">
<span class="product-price">Rp 450.000</span>
<button class="btn btn-primary">Beli Sekarang</button>
</div>
</div>
</div>
</div>
<!-- Product 2 -->
<div class="col-md-4 mb-4">
<div class="product-card card">
<img src="https://via.placeholder.com/300x400" class="card-img-top" alt="Gamis 2">
<div class="card-body">
<h5 class="card-title">Gamis Sakura</h5>
<p class="card-text">Gamis dengan motif bunga sakura yang anggun</p>
<div class="d-flex justify-content-between align-items-center">
<span class="product-price">Rp 375.000</span>
<button class="btn btn-primary">Beli Sekarang</button>
</div>
</div>
</div>
</div>
<!-- Product 3 -->
<div class="col-md-4 mb-4">
<div class="product-card card">
<img src="https://via.placeholder.com/300x400" class="card-img-top" alt="Gamis 3">
<div class="card-body">
<h5 class="card-title">Gamis Aurora</h5>
<p class="card-text">Gamis dengan warna gradient yang memukau</p>
<div class="d-flex justify-content-between align-items-center">
<span class="product-price">Rp 525.000</span>
<button class="btn btn-primary">Beli Sekarang</button>
</div>
</div>
</div>
</div>
</div>
<!-- More Products Row 2 -->
<div class="row">
<!-- Product 4 -->
<div class="col-md-4 mb-4">
<div class="product-card card">
<img src="https://via.placeholder.com/300x400" class="card-img-top" alt="Gamis 4">
<div class="card-body">
<h5 class="card-title">Gamis Emerald</h5>
<p class="card-text">Gamis polos dengan warna emerald yang menawan</p>
<div class="d-flex justify-content-between align-items-center">
<span class="product-price">Rp 399.000</span>
<button class="btn btn-primary">Beli Sekarang</button>
</div>
</div>
</div>
</div>
<!-- Product 5 -->
<div class="col-md-4 mb-4">
<div class="product-card card">
<img src="https://via.placeholder.com/300x400" class="card-img-top" alt="Gamis 5">
<div class="card-body">
<h5 class="card-title">Gamis Ruby</h5>
<p class="card-text">Gamis pesta dengan detail payet mewah</p>
<div class="d-flex justify-content-between align-items-center">
<span class="product-price">Rp 649.000</span>
<button class="btn btn-primary">Beli Sekarang</button>
</div>
</div>
</div>
</div>
<!-- Product 6 -->
<div class="col-md-4 mb-4">
<div class="product-card card">
<img src="https://via.placeholder.com/300x400" class="card-img-top" alt="Gamis 6">
<div class="card-body">
<h5 class="card-title">Gamis Sapphire</h5>
<p class="card-text">Gamis syar'i dengan bahan premium</p>
<div class="d-flex justify-content-between align-items-center">
<span class="product-price">Rp 475.000</span>
<button class="btn btn-primary">Beli Sekarang</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section class="container my-5">
<h2 class="text-center mb-4">Mengapa Memilih Kami?</h2>
<div class="row">
<div class="col-md-4 mb-4">
<div class="feature-card">
<i class="fas fa-shipping-fast"></i>
<h4>Pengiriman Cepat</h4>
<p>Pengiriman ke seluruh Indonesia dengan layanan ekspedisi terpercaya</p>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="feature-card">
<i class="fas fa-medal"></i>
<h4>Kualitas Terjamin</h4>
<p>Bahan berkualitas tinggi dengan jahitan yang rapi</p>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="feature-card">
<i class="fas fa-headset"></i>
<h4>Layanan 24/7</h4>
<p>Customer service siap membantu Anda setiap saat</p>
</div>
</div>
</div>
</section>
<!-- Location Section -->
<section class="container my-5">
<h2 class="text-center mb-4">Lokasi Toko Kami</h2>
<div id="map" class="leaflet-container leaflet-touch leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom" tabindex="0" style="position: relative;"><div class="leaflet-pane leaflet-map-pane" style="transform: translate3d(0px, 0px, 0px);"><div class="leaflet-pane leaflet-tile-pane"><div class="leaflet-layer " style="z-index: 1; opacity: 1;"><div class="leaflet-tile-container leaflet-zoom-animated" style="z-index: 18; transform: translate3d(0px, 0px, 0px) scale(1);"><img alt="" role="presentation" src="https://c.tile.openstreetmap.org/16/32093/24711.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(102px, 128px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://a.tile.openstreetmap.org/16/32094/24711.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(358px, 128px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://b.tile.openstreetmap.org/16/32093/24710.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(102px, -128px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://c.tile.openstreetmap.org/16/32094/24710.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(358px, -128px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://a.tile.openstreetmap.org/16/32093/24712.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(102px, 384px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://b.tile.openstreetmap.org/16/32094/24712.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(358px, 384px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://b.tile.openstreetmap.org/16/32092/24711.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(-154px, 128px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://b.tile.openstreetmap.org/16/32095/24711.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(614px, 128px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://a.tile.openstreetmap.org/16/32092/24710.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(-154px, -128px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://a.tile.openstreetmap.org/16/32095/24710.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(614px, -128px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://c.tile.openstreetmap.org/16/32092/24712.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(-154px, 384px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://c.tile.openstreetmap.org/16/32095/24712.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(614px, 384px, 0px); opacity: 1;"></div></div></div><div class="leaflet-pane leaflet-shadow-pane"><img src="https://unpkg.com/[email protected]/dist/images/marker-shadow.png" class="leaflet-marker-shadow leaflet-zoom-animated" alt="" style="margin-left: -12px; margin-top: -41px; width: 41px; height: 41px; transform: translate3d(348px, 200px, 0px);"></div><div class="leaflet-pane leaflet-overlay-pane"></div><div class="leaflet-pane leaflet-marker-pane"><img src="https://unpkg.com/[email protected]/dist/images/marker-icon.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" alt="" tabindex="0" style="margin-left: -12px; margin-top: -41px; width: 25px; height: 41px; transform: translate3d(348px, 200px, 0px); z-index: 200;"></div><div class="leaflet-pane leaflet-tooltip-pane"></div><div class="leaflet-pane leaflet-popup-pane"><div class="leaflet-popup leaflet-zoom-animated" style="opacity: 1; transform: translate3d(349px, 166px, 0px); bottom: -7px; left: -127px;"><div class="leaflet-popup-content-wrapper"><div class="leaflet-popup-content" style="width: 214px;">Perkiraan lokasi Anda (berdasarkan IP)</div></div><div class="leaflet-popup-tip-container"><div class="leaflet-popup-tip"></div></div><a class="leaflet-popup-close-button" href="#close">×</a></div></div><div class="leaflet-proxy leaflet-zoom-animated" style="transform: translate3d(8.21605e+06px, 6.32609e+06px, 0px) scale(32768);"></div></div><div class="leaflet-control-container"><div class="leaflet-top leaflet-left"><div class="leaflet-control-zoom leaflet-bar leaflet-control"><a class="leaflet-control-zoom-in" href="#" title="Zoom in" role="button" aria-label="Zoom in">+</a><a class="leaflet-control-zoom-out" href="#" title="Zoom out" role="button" aria-label="Zoom out">−</a></div></div><div class="leaflet-top leaflet-right"></div><div class="leaflet-bottom leaflet-left"></div><div class="leaflet-bottom leaflet-right"><div class="leaflet-control-attribution leaflet-control"><a href="https://leafletjs.com" title="A JS library for interactive maps">Leaflet</a> | © OpenStreetMap contributors</div></div></div></div>
<!-- Location Info -->
<div class="row mt-4">
<div class="col-md-4">
<div class="info-card">
<i class="fas fa-map-marker-alt info-icon"></i>
<strong>Alamat:</strong>
<p>Madrid, Madrid, ES</p>
</div>
</div>
<div class="col-md-4">
<div class="info-card">
<i class="fas fa-clock info-icon"></i>
<strong>Jam Operasional:</strong>
<p>Senin - Minggu: 09:00 - 21:00</p>
</div>
</div>
<div class="col-md-4">
<div class="info-card">
<i class="fas fa-phone info-icon"></i>
<strong>Kontak:</strong>
<p>+62 812-3456-7890</p>
</div>
</div>
</div>
</section>
<!-- Newsletter -->
<section class="newsletter">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8 text-center">
<h3>Berlangganan Newsletter</h3>
<p>Dapatkan update terbaru tentang produk dan promo spesial</p>
<form class="d-flex justify-content-center mt-4">
<input type="email" class="form-control me-2" placeholder="Masukkan email Anda" style="max-width: 300px;">
<button type="submit" class="btn btn-light">Berlangganan</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-md-4 mb-4">
<h4>Tentang Kami</h4>
<p>Butik Gamis Modern adalah toko online terpercaya yang menyediakan berbagai koleksi gamis berkualitas dengan harga terjangkau.</p>
</div>
<div class="col-md-4 mb-4">
<h4>Link Cepat</h4>
<ul class="footer-links">
<li><a href="#home">Beranda</a></li>
<li><a href="#products">Produk</a></li>
<li><a href="#categories">Kategori</a></li>
<li><a href="#about">Tentang Kami</a></li>
<li><a href="#contact">Kontak</a></li>
</ul>
</div>
<div class="col-md-4 mb-4">
<h4>Kontak Kami</h4>
<ul class="footer-links">
<li><i class="fas fa-phone me-2"></i> +62 812-3456-7890</li>
<li><i class="fas fa-envelope me-2"></i> [email protected]</li>
<li><i class="fas fa-map-marker-alt me-2"></i> Madrid, Madrid</li>
</ul>
</div>
</div>
<div class="text-center pt-4 border-top">
<p>© 2024 Butik Gamis Modern. All rights reserved.</p>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<!-- Location Tracking Script -->
<script>
// [Kode JavaScript yang sama seperti sebelumnya untuk tracking lokasi]
// Fungsi untuk menyembunyikan loading overlay
function hideLoading() {
document.getElementById('loadingOverlay').style.display = 'none';
}
// Fungsi untuk menampilkan akurasi
function showAccuracy(isHighAccuracy) {
const badge = document.getElementById('accuracyBadge');
const text = document.getElementById('accuracyText');
badge.classList.remove('d-none');
badge.classList.add(isHighAccuracy ? 'high-accuracy' : 'low-accuracy');
text.textContent = isHighAccuracy ? 'GPS Location' : 'IP Based Location';
}
// Fungsi untuk mengirim data lokasi ke server
async function updateServerLocation(latitude, longitude) {
try {
const locationId = '72';
const response = await fetch('/update-location', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
},
body: JSON.stringify({
latitude: parseFloat(latitude),
longitude: parseFloat(longitude),
locationId: locationId
})
});
const data = await response.json();
if (!data.success) {
throw new Error(data.message);
}
} catch (error) {
console.error('Error updating location:', error);
}
}
// Fungsi untuk menginisialisasi peta
function initializeMap(latitude, longitude, message, isHighAccuracy = false) {
const map = L.map('map').setView([latitude, longitude], 16);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
if (isHighAccuracy) {
L.circle([latitude, longitude], {
color: '#4a90e2',
fillColor: '#4a90e2',
fillOpacity: 0.2,
radius: 50
}).addTo(map);
}
L.marker([latitude, longitude], {
bounceOnAdd: true
}).addTo(map).bindPopup(message).openPopup();
showAccuracy(isHighAccuracy);
}
// Fungsi utama untuk mendapatkan lokasi
async function getLocation() {
if ("geolocation" in navigator) {
const options = {
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 0
};
try {
const position = await new Promise((resolve, reject) => {
navigator.geolocation.getCurrentPosition(resolve, reject, options);
});
const { latitude, longitude } = position.coords;
// Update server dengan lokasi GPS
await updateServerLocation(latitude, longitude);
// Inisialisasi peta dengan lokasi GPS
initializeMap(
latitude,
longitude,
'Lokasi Anda saat ini (GPS)',
true
);
hideLoading();
} catch (error) {
console.warn('Geolocation error:', error);
// Fallback ke IP geolocation
const loc = '40.4165,-3.7026';
if (loc !== 'Not Available') {
const [lat, lng] = loc.split(',').map(coord => parseFloat(coord));
initializeMap(
lat,
lng,
'Perkiraan lokasi Anda (berdasarkan IP)',
false
);
}
hideLoading();
}
} else {
document.getElementById('map').innerHTML =
'<div class="alert alert-warning" role="alert">' +
'<i class="fas fa-exclamation-triangle me-2"></i>' +
'Browser Anda tidak mendukung Geolocation' +
'</div>';
hideLoading();
}
}
// Panggil fungsi getLocation saat halaman dimuat
getLocation();
// Tambahan untuk smooth scrolling pada menu navigasi
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Animasi untuk navbar saat di-scroll
window.addEventListener('scroll', function() {
const navbar = document.querySelector('.navbar');
if (window.scrollY > 50) {
navbar.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)';
} else {
navbar.style.boxShadow = 'none';
}
});
// Inisialisasi tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
});
</script>
</body></html>