<body>

    <!-- Header -->
    <header>
        <img src="Image/Logo-BMKG.png" alt="Logo BMKG" class="bmkg-logo">
        <h1>Stasiun Meteorologi Kelas III Frans Sales Lega</h1>
        <div class="hamburger" onclick="toggleMenu()">
            <i class="fas fa-bars"></i>
        </div>
    </header>

    <!-- Navigation -->
    <nav id="navbar">
        <ul class="nav-list">
        <li><a href="index.php" class="home-icon" title="Home">
                <i class="fas fa-home fa-2x"></i>
            </a></li>
            <li>
                <a href="#">Profil</a>
                <ul class="dropdown-content">
                    <li><a href="Beranda/sejarah.php">Sejarah</a></li>
                    <li><a href="Beranda/visi dan misi.php">Visi dan Misi</a></li>
                    <li><a href="Beranda/tugas dan fungsi.php">Tugas dan Fungsi</a></li>
                    <li><a href="Beranda/profil stasiun.php">Profil Stasiun</a></li>
                    <li><a href="Beranda/lokasi stasiun.php">Lokasi Stasiun</a></li>
                </ul>
            </li>
            <li><a href="#">Prakiraan</a>
                <ul class="dropdown-content">
                <li><a href="Prakiraan/prakiraan cuaca harian.php">Prakiraan Cuaca Harian</a></li>
                    <li><a href="Prakiraan/informasi cuaca wisata.php">Prakiraan Cuaca Wisata</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Pengamatan</a>
                <ul class="dropdown-content">
                    <li><a href="Pengamatan/citra satelit.php">Citra satelit</a></li>
                    <li><a href="Pengamatan/CEWS.php">CEWS</a></li>
                    <li><a href="Pengamatan/siklon tropis.php">Siklon Tropis</a></li>
                    <li><a href="Pengamatan/ina siam.php">INA SIAM</a></li>
                    <li><a href="Pengamatan/Ocean Forecast System.php">Ocean Forecast System</a></li>
                    <li><a href="Pengamatan/cuaca khusus.php">Informasi Cuaca Khusus</a></li>
                </ul>
            </li>
            <li><a href="gempa bumi.php">Gempa Bumi</a></li>
            <li><a href="buletin.html">Buletin</a></li>
            <li>
                <a href="#">Layanan Publik</a>
                <ul class="dropdown-content">
                <li><a href="layanan publik/index.php">Pelayanan Data Daring</a></li>
                    <li><a href="layanan publik/jenis layanan & tarif.html">Jenis Layanan & Tarif</a></li>
                    <li><a href="layanan publik/prosedur layanan data.html">Prosedur Permohonan Data</a></li>
                </ul>
            <li>
                <a href="#">Galeri</a>
                <ul class="dropdown-content">
                    <li><a href="#">Foto</a></li>
                    <li><a href="video.html">Video</a></li>
                </ul>
            </li>
        </ul>
    </nav>

    <main>
    <h3>Photo Galleri</h3>
        <div class="container">
        <figure>
            <img src="Image/anemometer.jpg" alt="Anemometer" onclick="showDescription(this)">
            <figcaption>Anemometer</figcaption>
            <p class="description" style="display: none;">Anemometer merupakan alat yang digunakan untuk mengetahui arah dan kecepatan angin. Alat ini diletakkan pada sebuah tiang setinggi 10 meter.</p>
        </figure>
        <figure>
            <img src="Image/Penakar Hujan Obs.jpg" alt="Penakar Hujan Obs" onclick="showDescription(this)">
            <figcaption>Penakar Hujan Obs</figcaption>
            <p class="description" style="display: none;">Penakar hujan Observatorium (OBS) adalah alat ukur hujan manual yang digunakan untuk mengukur jumlah curah hujan yang jatuh dalam periode waktu 24 jam. Penakar hujan OBS juga dikenal dengan nama penakar hujan manual, dan di kalangan pertanian dan pengairan disebut ombrometer.</p>
        </figure>
        <figure>
            <img src="Image/Evaporimeter.jpg" alt="Evaporimeter" onclick="showDescription(this)">
            <figcaption>Evaporimeter</figcaption>
            <p class="description" style="display: none;">Open Pan Evaporimeter / Panci Penguapan. Berfungsi untuk mengukur evaporasi/penguapan pada periode waktu tertentu. Alat ini berupa sebuah panci bundar besar terbuat dari besi yang dilapisi bahan anti karat dengan garis tengah/diameter 122 cm dan tinggi 25.4 cm.</p>
        </figure>
        <figure>
            <img src="Image/taman alat.jpg" alt="taman alat" onclick="showDescription(this)">
            <figcaption>Taman Alat</figcaption>
            <p class="description" style="display: none;">Taman alat adalah sebidang tanah datar pada dataran terbuka yang merupakan tempat untuk menempatkan alat-alat meteorologi/ klimatologi dengan luas 40 x 60 m.</p>
        </figure>
        <figure>
            <img src="Image/sangkar meteorologi.jpg" alt="sangkar meteorologi" onclick="showDescription(this)">
            <figcaption>Sangkar Meteorologi</figcaption>
            <p class="description" style="display: none;">Sangkar Meteorologi (Sangkar Meteo) / Sangkar Cuaca merupakan bangunan berbentuk rumah yang terbuat dari kayu yang berfungsi untuk menyimpan alat termohygrograph, Thermometer bola kering dan Thermometer bola basah.</p>
        </figure>
        <figure>
            <img src="Image/Hellman.jpg" alt="Hellman" onclick="showDescription(this)">
            <figcaption>Hellman</figcaption>
            <p class="description" style="display: none;"> Penakar hujan Hellman adalah alat yang digunakan untuk mengukur jumlah intensitas curah hujan  yang jatuh ke permukaan bumi dimana air mengalir ke tabung pelampung melalui selang dan mengangkat pelampung Pena yang terhubung ke pelampung sehingga dapat merekam data ke kertas pias. Kemudian kertas pias berputar seirama dengan gerakan jam (clock drum). Bilamana intensitas/jumlah curah hujan jatuh yang tertampung mencapai 10 mm maka air tersebut akan tumpah melalui pipa hevel dan mereset pena keposisi nol. Demikian proses ini akan terjadi berulang.</p>
        </figure>
        <figure>
            <img src="Image/AWOS.jpg" alt="AWOS" onclick="showDescription(this)">
            <figcaption>AWOS</figcaption>
            <p class="description" style="display: none;">AWOS merupakan sebuah sistem pemantau cuaca di bandara milik BMKG yang terkomputerisasi yang secara otomatis mengukur parameter cuaca untuk keperluan layanan informasi cuaca penerbangan.</p>
        </figure>
        <figure>
            <img src="Image/Campbell Stokes.jpg" alt="Campbell Stokes" onclick="showDescription(this)">
            <figcaption>Campbell Stokes</figcaption>
            <p class="description" style="display: none;">Campbell stock berupa bola kaca yang digunakan untuk menghitung lama penyinaran matahari selama satu hari. Bola kaca ini bertujuan untuk mengumpulkan cahaya matahari menjadi satu titik fokus, sehingga mampu memberi bekas kepada pias yang dipasang pada campbell stokes.</p>
        </figure>
        <figure>
            <img src="Image/barometer digital.jpg" alt="barometer digital" onclick="showDescription(this)">
            <figcaption>Barometer Digital</figcaption>
            <p class="description" style="display: none;">Barometer digital merupakan alat yang digunakan untuk mengukur tekanan udara / tekanan atmosfer secara otomatis.</p>
        </figure>
        </div>
    </main>

    <!-- Footer -->
    <div class="footer">
        <div class="social-media">
            <a href="https://www.facebook.com/BMKGRuteng" target="_blank">
                <i class="fab fa-facebook fa-2x"></i>
            </a>
            <a href="https://www.instagram.com/bmkgmanggarai" target="_blank">
                <i class="fab fa-instagram fa-2x"></i>
            </a>
            <a href="#" target="_blank">
                <i class="fab fa-youtube fa-2x"></i>
            </a>
        </div>
        <div class="divider"></div>
        <div class="footer-info">
            <p><i class="fas fa-map-marker-alt"></i> Alamat: Jl. Satar Tacik, Ruteng, Kab. Manggarai, Nusa Tenggara Timur</p>
            <p><i class="fas fa-phone"></i> Telp/Fax: (0385) 21264</p>
            <p><i class="fas fa-envelope"></i> Email: stamet.franssaleslega@bmkg.go.id</p>
        </div>
        <div class="divider"></div>
        <div class="asn-logo">
            <img src="Image/Berakhlak.png" alt="Logo ASN Berakhlak">
        </div>
    </div>

    <!-- JavaScript -->
    <script>
        function toggleMenu() {
            var navbar = document.getElementById("navbar");
            if (navbar.style.display === "block") {
                navbar.style.display = "none";
            } else {
                navbar.style.display = "block";
            }}
        function showDescription(img) {
    const description = img.nextElementSibling.nextElementSibling; // Get the description paragraph
    description.style.display = description.style.display === "none" ? "block" : "none"; // Toggle visibility
    }

        // Close modal when clicking outside of modal content
        window.onclick = function(event) {
            const modal = document.getElementById("myModal");
            if (event.target === modal) {
                closeModal();
            }
        }
    </script>
</body>