<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Info Pengunjung</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css"> <!-- CSS lo yang tadi -->
</head>
<body>
<!-- Splash Screen -->
<div id="splash">
<h1>Memuat...</h1>
</div>
<!-- Navbar -->
<nav class="navbar">
<div class="nav-container">
<h2>Info Pengunjung</h2>
<div id="hamburger" class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
<ul id="nav-menu" class="nav-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Tentang</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</div>
</nav>
<!-- Hero -->
<section class="hero">
<h1>Selamat Datang</h1>
<p>Informasi Pengunjung & Statistik</p>
</section>
<!-- Cards -->
<div class="cards-container">
<div class="card">
<div class="card-header">
<i class="fas fa-map-marker-alt fa-2x"></i>
<h3>Lokasi</h3>
</div>
<div class="meta">
<div class="pill"><strong>Kota</strong><span id="city">-</span></div>
<div class="pill"><strong>Negara</strong><span id="country">-</span></div>
</div>
</div>
<div class="card">
<div class="card-header">
<i class="fas fa-wifi fa-2x"></i>
<h3>Jaringan</h3>
</div>
<div class="meta">
<div class="pill"><strong>IP</strong><span id="ip">-</span></div>
<div class="pill"><strong>ISP</strong><span id="isp">-</span></div>
</div>
</div>
<div class="card">
<div class="card-header">
<i class="fas fa-clock fa-2x"></i>
<h3>Waktu Lokal</h3>
</div>
<div class="meta">
<div class="pill"><strong>Zona</strong><span id="timezone">-</span></div>
<div class="pill"><strong>Jam</strong><span id="time">-</span></div>
</div>
</div>
</div>
<!-- Footer -->
<footer>
© 2025 Info Pengunjung. Semua Hak Dilindungi.
</footer>
<script src="script.js"></script> <!-- JS lo yang tadi -->
</body>
</html>