[ Mini Kiebo ]

Server: Windows NT AKFAR_SERVER 10.0 build 26200 (Windows 10) AMD64 Path: D:/xampp/htdocs/campus/ [ Home ]
File: index.php
<?php
include 'config/koneksi.php';
    <!-- Header / Navbar -->
    <header id="header">
        <div class="container">
            <nav>
                <a href="#" class="logo">
                    <i class="fa-solid fa-graduation-cap"></i> AKADEMI FARMASI BUMI SILIWANGI
                </a>
                <div class="mobile-menu-btn" onclick="toggleMenu()">
                    <i class="fa-solid fa-bars"></i>
                </div>
                <ul class="nav-links" id="navLinks">
                    <li><a href="#beranda">Beranda</a></li>
                    <li><a href="#tentang">Tentang</a></li>
                    <li><a href="#akademik">Akademik</a></li>
                    <li><a href="#fasilitas">Fasilitas</a></li>
                    <li><a href="#berita">Berita</a></li>
                    <li><a href="#kontak">Kontak</a></li>
                    <li><a href="#" style="color: var(--secondary-color);">Pendaftaran <i class="fa-solid fa-arrow-right"></i></a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- Hero Section with Video Background -->
    <section id="beranda" class="hero">
        <!-- Video placeholder: Link video Pexels gratis (Campus atmosphere) -->
        <video autoplay muted loop playsinline>
            <source src="https://videos.pexels.com/video-files/3129671/3129671-uhd_2560_1440_30fps.mp4" type="video/mp4">
            Browser Anda tidak mendukung tag video.
        </video>
        <div class="hero-overlay"></div>
        <div class="hero-content">
            <h1 class="hero-title">Mencetak Generasi Unggul & Berdaya Saing Global</h1>
            <p class="hero-subtitle">Bergabunglah dengan Universitas Merdeka Wibawa, pusat keunggulan akademik dengan fasilitas modern dan kurikulum berbasis industri.</p>
            <a href="#akademik" class="btn btn-primary">Lihat Jurusan</a>
            <a href="#tentang" class="btn btn-outline" style="margin-left: 10px;">Tentang Kami</a>
        </div>
    </section>

    <!-- Sambutan Rektor -->
    <section id="tentang" class="section-padding sambutan">
        <div class="container">
            <div class="sambutan-wrapper">
                <div class="sambutan-img">
                    <img src="https://picsum.photos/seed/rektor/600/400" alt="Rektor Universitas">
                </div>
                <div class="sambutan-text">
                    <div class="section-title">
                        <h2>Sambutan Rektor</h2>
                    </div>
                    <p>Selamat datang di website resmi Universitas Merdeka Wibawa. Sebagai perguruan tinggi yang berkomitmen pada tri dharma perguruan tinggi, kami terus berinovasi dalam menciptakan lingkungan belajar yang kondusif.</p>
                    <br>
                    <p>Kami menyadari tantangan global yang semakin kompleks. Oleh karena itu, kampus kami telah dilengkapi dengan fasilitas modern dan tenaga pengajar profesional yang siap membimbing Anda menuju masa depan yang cemerlang.</p>
                    <br>
                    <span class="rektor-name">Dr. H. Budi Santoso, M.Si.</span>
                    <span style="font-size: 14px; color: #666;">Rektor Universitas</span>
                </div>
            </div>
        </div>
    </section>

<!-- BERITA & KEGIATAN (Dinamis) -->
<section id="berita" class="section-padding berita">
    <div class="container">
        <div class="text-center section-title">
            <h2>Berita & Kegiatan</h2>
        </div>
        
        <div class="grid-container">
            <?php
            // Ambil 3 berita terbaru dari database
            $query_berita = mysqli_query($conn, "SELECT * FROM berita ORDER BY id DESC LIMIT 3");
            while ($row_berita = mysqli_fetch_assoc($query_berita)) :
            ?>
            <article class="berita-card">
                <div class="card-img">
                    <!-- Cek jika ada gambar -->
                    <?php if($row_berita['gambar']): ?>
                        <img src="uploads/<?= $row_berita['gambar']; ?>" alt="<?= $row_berita['judul']; ?>" style="border-radius: 8px 8px 0 0;">
                    <?php else: ?>
                        <img src="https://picsum.photos/seed/news/400/300" alt="Default" style="border-radius: 8px 8px 0 0;">
                    <?php endif; ?>
                </div>
                <div style="padding: 15px;">
                    <span class="berita-date"><?= date('d F Y', strtotime($row_berita['tanggal'])); ?></span>
                    <h4><?= htmlspecialchars($row_berita['judul']); ?></h4>
                    <p class="berita-desc">
                        <!-- Potong teks jika terlalu panjang -->
                        <?= substr(strip_tags($row_berita['isi']), 0, 100) . '...'; ?>
                    </p>
                    <!-- Link ke detail berita (bisa dibuat file detail.php) -->
                    <a href="#" style="font-size: 13px; font-weight: 600; color: var(--primary-color); margin-top: 10px; display:block;">Baca Selengkapnya</a>
                </div>
            </article>
            <?php endwhile; ?>
        </div>
    </div>
</section>

<!-- Section Fasilitas Dinamis -->
<section id="fasilitas" class="section-padding" style="background-color: var(--light-bg);">
    <div class="container">
        <div class="text-center section-title">
            <h2>Fasilitas Kampus</h2>
        </div>

        <div class="grid-container">
            <?php
            $query_fasilitas = mysqli_query($conn, "SELECT * FROM fasilitas ORDER BY id DESC");
            while ($row_fasilitas = mysqli_fetch_assoc($query_fasilitas)) :
            ?>
            <div class="card" style="border:none; background: transparent; box-shadow: none; text-align: center;">
                <div style="width: 100px; height: 100px; border-radius: 50%; overflow: hidden; margin: 0 auto 20px; border: 4px solid var(--secondary-color);">
                    <?php if($row_fasilitas['gambar']): ?>
                        <img src="uploads/<?= $row_fasilitas['gambar']; ?>" alt="<?= $row_fasilitas['nama_fasilitas']; ?>" style="width: 100%; height: 100%; object-fit: cover;">
                    <?php else: ?>
                        <i class="fa-solid fa-building-columns" style="font-size: 40px; line-height: 100px; color: #ccc;"></i>
                    <?php endif; ?>
                </div>
                <h3 style="color: var(--primary-color);"><?= htmlspecialchars($row_fasilitas['nama_fasilitas']); ?></h3>
                <p style="font-size: 14px; color: #666;"><?= substr(htmlspecialchars($row_fasilitas['deskripsi']), 0, 80); ?>...</p>
            </div>
            <?php endwhile; ?>
        </div>
    </div>
</section>

<!-- ... Footer dan JS tetap sama ... -->
     <!-- Footer -->
    <footer id="kontak">
        <div class="container">
            <div class="footer-grid">
                <!-- Tentang -->
                <div class="footer-col">
                    <a href="#" class="footer-logo">UM WIBAWA</a>
                    <p style="font-size: 14px; line-height: 1.8; opacity: 0.8;">
                        Universitas Merdeka Wibawa adalah perguruan tinggi swasta yang berdedikasi untuk menciptakan pemimpin masa depan yang berkarakter dan inovatif.
                    </p>
                    <div class="social-links">
                        <a href="#"><i class="fa-brands fa-facebook-f"></i></a>
                        <a href="#"><i class="fa-brands fa-instagram"></i></a>
                        <a href="#"><i class="fa-brands fa-youtube"></i></a>
                        <a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
                    </div>
                </div>

                <!-- Tautan -->
                <div class="footer-col">
                    <h4>Tautan Cepat</h4>
                    <ul class="footer-links">
                        <li><a href="#beranda">Beranda</a></li>
                        <li><a href="#tentang">Profil Kampus</a></li>
                        <li><a href="#akademik">Program Studi</a></li>
                        <li><a href="#">Pendaftaran (PMB)</a></li>
                        <li><a href="#">E-Journal</a></li>
                        <li><a href="#">Karir Dosen</a></li>
                    </ul>
                </div>

                <!-- Fakultas -->
                <div class="footer-col">
                    <h4>Fakultas</h4>
                    <ul class="footer-links">
                        <li><a href="#">Fakultas Teknik & Informatika</a></li>
                        <li><a href="#">Fakultas Ekonomi</a></li>
                        <li><a href="#">Fakultas Hukum</a></li>
                        <li><a href="#">Fakultas Desain & Seni</a></li>
                        <li><a href="#">Fakultas Ilmu Komunikasi</a></li>
                    </ul>
                </div>

                <!-- Kontak -->
                <div class="footer-col">
                    <h4>Kontak Kami</h4>
                    <ul class="contact-info">
                        <li>
                            <i class="fa-solid fa-location-dot"></i>
                            <span>Jl. Pendidikan No. 123, Kota Bandung, Jawa Barat, Indonesia</span>
                        </li>
                        <li>
                            <i class="fa-solid fa-phone"></i>
                            <span>(022) 1234-5678</span>
                        </li>
                        <li>
                            <i class="fa-solid fa-envelope"></i>
                            <span>info@umwibawa.ac.id</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="copyright">
                &copy; 2024 Universitas Merdeka Wibawa. All Rights Reserved.
            </div>
        </div>
    </footer>

    <!-- JavaScript Script -->
    <script>
        // 1. Navbar Effect on Scroll
        // Mengubah background navbar menjadi putih saat di-scroll ke bawah
        const header = document.getElementById('header');
        
        window.addEventListener('scroll', () => {
            if (window.scrollY > 50) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });

        // 2. Mobile Menu Toggle
        // Membuka dan menutup menu di tampilan mobile
        const navLinks = document.getElementById('navLinks');

        function toggleMenu() {
            navLinks.classList.toggle('active');
        }

        // Menutup menu saat link diklik (UX mobile)
        document.querySelectorAll('.nav-links a').forEach(link => {
            link.addEventListener('click', () => {
                navLinks.classList.remove('active');
            });
        });

        // 3. Simple Animation on Scroll (Optional Polished Touch)
        // Menambahkan class fade-in sederhana saat elemen masuk ke viewport
        const observerOptions = {
            threshold: 0.1
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = "1";
                    entry.target.style.transform = "translateY(0)";
                }
            });
        }, observerOptions);

        // Pilih elemen untuk dianimasi
        document.querySelectorAll('.card, .berita-card').forEach(el => {
            el.style.opacity = "0";
            el.style.transform = "translateY(20px)";
            el.style.transition = "all 0.6s ease-out";
            observer.observe(el);
        });
    </script>
</body>
</html>