<?php
$servername = "localhost";
$database = "u645251767_stiesp";
$username = "u645251767_stiesp";
$password = "Stiesp@2025";

// Koneksi
$conn = mysqli_connect($servername, $username, $password, $database);
if (!$conn) {
    die("Koneksi gagal: " . mysqli_connect_error());
}

// Ambil data biaya formulir
$formulirQuery = "SELECT * FROM setting WHERE jenis_set = 'biaya formulir'";
$formulirResult = mysqli_query($conn, $formulirQuery);
$formulir = [];
while ($row = mysqli_fetch_assoc($formulirResult)) {
    $key = strtoupper(trim($row['nama_set']));
    $formulir[$key] = $row['nilai_set'];
}

// Mapping kategori ke kode formulir
$kategori_to_formulir = [
    'Diploma' => 'D3',
    'Sarjana' => 'S1',
    'Magister' => 'S2'
];

// Ambil data biaya
$query = "SELECT * FROM biaya ORDER BY biaya_awal ASC";
$result = mysqli_query($conn, $query);
$groups = [];
while ($row = mysqli_fetch_assoc($result)) {
    $key = $row['biaya_awal'] . '-' . $row['biaya_spp'];
    if (!isset($groups[$key])) {
        $groups[$key] = [
            'kategori' => $row['kategori'],
            'biaya_awal' => $row['biaya_awal'],
            'biaya_spp' => $row['biaya_spp'],
            'jurusan' => []
        ];
    }
    $groups[$key]['jurusan'][] = $row['jurusan'];
}

// Ambil data nama kampus
$kampusQuery = "SELECT * FROM setting WHERE jenis_set = 'kampus'";
$kampusResult = mysqli_query($conn, $kampusQuery);
$kampusData = [];
while ($row = mysqli_fetch_assoc($kampusResult)) {
    $kampusData[$row['nama_set']] = $row['nilai_set'];
}
$namaKampus = $kampusData['nama kampus'] ?? 'Nama Kampus Tidak Ditemukan';

// Ambil data sosial media
$sosmedQuery = "SELECT * FROM setting WHERE jenis_set IN ('fb', 'ig')";
$sosmedResult = mysqli_query($conn, $sosmedQuery);
$sosmedLinks = [];
while ($row = mysqli_fetch_assoc($sosmedResult)) {
    $sosmedLinks[strtolower($row['nama_set'])] = $row['nilai_set'];
}

// Waktu
date_default_timezone_set('Asia/Jakarta');
$tgl_time = date("Y-m-d h:i:sa");
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Meta tags -->
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Kelas karyawan, Kuliah karyawan, sties purwakarta, biaya kuliah kampus di purwakarta, kampus kelas karyawan purwakarta, kelas karyawan purwakarta, kelas fleksibel sties, kampus murah, S1 Ekonomi Syariah dan S1 Perbankan Syariah, kelas karyawan fleksibel, pendaftaran online, kampus syariah di purwakarta" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="STIES Indonesia salah satu Perguruan Tinggi Swasta Terbaik dan rekomendasi kampus murah di Kota Purwakarta, tersedia kelas karyawan dan elearning atau kelas jarak jauh/online dengan biaya murah dan terjangkau cukup Rp 600.000/Bulan dengan jurusan s1 Ekonomi Syariah dan s1 Perbankan Syariah." />
    
    <title>STIES Indonesia Purwakarta (Kelas Karyawan)</title>
    <meta property="og:title" content="STIES Indonesia (Kelas Karyawan)">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://sties-purwakarta.info">
    <meta property="og:image" content="https://sties-purwakarta.info/images/fb-ogimage.png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:description" content="STIES Indonesia salah satu Perguruan Tinggi Swasta Terbaik dan rekomendasi kampus murah di Kota Purwakarta, tersedia kelas karyawan dan elearning atau kelas jarak jauh/online dengan biaya murah dan terjangkau cukup Rp 600.000/Bulan dengan jurusan s1 Ekonomi Syariah dan s1 Perbankan Syariah.">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:creator" content="@_kuliahkaryawan">
    <meta name="twitter:site" content="@_kuliahkaryawan">
    <meta name="twitter:title" content="STIES Indonesia (Kelas Karyawan)">
    <meta name="twitter:description" content="STIES Indonesia salah satu Perguruan Tinggi Swasta Terbaik dan rekomendasi kampus murah di Kota Purwakarta, tersedia kelas karyawan dan elearning atau kelas jarak jauh/online dengan biaya murah dan terjangkau cukup Rp 600.000/Bulan dengan jurusan s1 Ekonomi Syariah dan s1 Perbankan Syariah.">
    <meta name="twitter:domain" content="https://sties-purwakarta.info">
    <meta name="twitter:image:src" content="https://sties-purwakarta.info/images/twitter-og.png">
    <meta name="author" content="Kuliah Karyawan Team" />
    <meta http-equiv="cache-control" content="public" />
    <meta name="application-name" content="STIES Purwakarta| Kuliah Karyawan K2" />
    <meta name="msapplication-TileColor" content="#9800CB" />
    <meta name="msapplication-TileImage" content="https://sties-purwakarta.info/assets/favicons/mstile-144x144.png" />
    <meta name="msapplication-square70x70logo" content="https://sties-purwakarta.info/assets/favicons/mstile-70x70.png" />
    <meta name="msapplication-square150x150logo" content="https://sties-purwakarta.info/assets/favicons/mstile-150x150.png" />
    <meta name="msapplication-wide310x150logo" content="https://sties-purwakarta.info/assets/favicons/mstile-310x150.png" />
    <meta name="msapplication-square310x310logo" content="https://sties-purwakarta.info/assets/favicons/mstile-310x310.png" />
    <meta name="theme-color" content="#9800CB" />

    <link rel="apple-touch-icon" sizes="57x57" href="https://sties-purwakarta.info//images/favicons/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="https://sties-purwakarta.info//images/favicons/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="https://sties-purwakarta.info//images/favicons/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="https://sties-purwakarta.info//images/favicons/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="https://sties-purwakarta.info//images/favicons/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="https://sties-purwakarta.info//images/favicons/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="https://sties-purwakarta.info//images/favicons/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="https://sties-purwakarta.info//images/favicons/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="https://sties-purwakarta.info//images/favicons/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="https://sties-purwakarta.info//images/favicons/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="https://sties-purwakarta.info//images/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="https://sties-purwakarta.info//images/favicons/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="https://sties-purwakarta.info//images/favicons/favicon-16x16.png">
    <link rel="manifest" href="https://sties-purwakarta.info//images/favicons/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="https://sties-purwakarta.info//images/favicons/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">

    <!-- 
    - custom css link
  -->
    <link rel="stylesheet" href="./assets/css/style.css">

    <!-- 
    - google font link
  -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700;800&ampdisplay=swap"
        rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

    <!-- 
    - preload images
  -->
    <link rel="preload" as="image" href="./assets/images/hero-banner.png">
    <link rel="preload" as="image" href="./assets/images/hero-abs-1.png" media="min-width(768px)">
    <link rel="preload" as="image" href="./assets/images/hero-abs-2.png" media="min-width(768px)">
    <style>
        .li-countdown {
            display: inline-block;
            font-size: 1.5em;
            list-style-type: none;
            padding: 1em;
            text-transform: uppercase;
        }

        .li-span {
            display: block;
            font-size: 4.5rem;
        }
        
        

    </style>
</head>

<body id="top">

    <!--- #HEADER-->

    <header class="header" data-header>
        <div class="container">

            <h1>
                <a href="#" class="logo" style="color:black ;"><?= !empty($namaKampus) ? htmlspecialchars($namaKampus) : 'Data tidak tersedia' ?><br />Kelas Karyawan K2</a>
            </h1>

            <nav class="navbar" data-navbar>

                <div class="navbar-top">
                    <a href="https://pendaftaran.sties-purwakarta.info/" target="_blank" class="logo"
                        style="color:black ;"><?= !empty($namaKampus) ? htmlspecialchars($namaKampus) : 'Data tidak tersedia' ?><br />
                        <p>Kelas Karyawan K2</p>
                    </a>
                    <button class="nav-close-btn" aria-label="Close menu" data-nav-toggler>
                        <ion-icon name="close-outline"></ion-icon>
                    </button>
                </div>

                <ul class="navbar-list">
                    <li class="navbar-item">
                        <a href="#beranda" class="navbar-link" data-nav-toggler>Beranda</a>
                    </li>
                    <li class="navbar-item">
                        <a href="#tentang-<?= !empty($namaKampus) ? htmlspecialchars($namaKampus) : 'Data tidak tersedia' ?>-kelas-karyawan" class="navbar-link" data-nav-toggler>Tentang</a>
                    </li>
                    <li class="navbar-item">
                        <a href="#jurusan-<?= !empty($namaKampus) ? htmlspecialchars($namaKampus) : 'Data tidak tersedia' ?>-kelas-karyawan" class="navbar-link" data-nav-toggler>Jurusan</a>
                    </li>
                    <li class="navbar-item">
                        <a href="#biaya-kuliah-<?= !empty($namaKampus) ? htmlspecialchars($namaKampus) : 'Data tidak tersedia' ?>-kelas-karyawan" class="navbar-link" data-nav-toggler>Biaya
                            Kuliah</a>
                    </li>
                    <li class="navbar-item">
                        <a href="https://kontak.kuliahkaryawan.net/?jurusan.sties-purwakarta.info" class="navbar-link" data-nav-toggler>Kontak</a>
                    </li>
                </ul>
            </nav>

            <div class="header-actions">

                <a target="_blank" href="https://pendaftaran.sties-purwakarta.info/" class="header-action-btn login-btn">
                    <ion-icon name="person-outline" aria-hidden="true"></ion-icon>

                    <span class="span">Pendaftaran Online</span>
                </a>

                <button class="header-action-btn nav-open-btn" aria-label="Open menu" data-nav-toggler> 
                    <ion-icon name="menu-outline"></ion-icon>
                </button>
            </div>

            <div class="overlay" data-nav-toggler data-overlay></div>

        </div>
    </header>

    <!--- #SEARCH BOX-->

    <div class="search-container" data-search-box>
        <div class="container">

            <button class="search-close-btn" aria-label="Close search" data-search-toggler>
                <ion-icon name="close-outline"></ion-icon>
            </button>

            <div class="search-wrapper">
                <input type="search" name="search" placeholder="Search Here..." aria-label="Search"
                    class="search-field">

                <button class="search-submit" aria-label="Submit" data-search-toggler>
                    <ion-icon name="search-outline"></ion-icon>
                </button>
            </div>

        </div>
    </div>

    <main>
        <article>

            <!--- #BERANDA / HOME-->

            <section class="hero" id="beranda" aria-label="hero"
                style="background-image: url('./assets/images/hero-bg.jpg')">
                <div class="container">

                    <div class="hero-content">

                        <p class="section-subtitle" style="color:black ;">Kuliah Fleksibel ? Dengan Akreditasi baik ?
                            Biaya Terjangkau
                            ?</p>

                        <h2 class="h1 hero-title"><?= !empty($namaKampus) ? htmlspecialchars($namaKampus) : 'Data tidak tersedia' ?><p
                                style="color:black ;">SOLUSINYA !</p>

                        </h2>

                        <p class="hero-text" style="color:black ;">
                            Dengan jam kuliah fleksibel, mempunyai akreditasi , dan biaya kuliah yang terjangkau.
                        </p>

                        <a href="https://sties-purwakarta.info/pendaftaran" target="_blank" class="btn btn-warning">
                            <span class="span">Daftar Sekarang Juga <br> Kuota Terbatas</span>

                            <ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>
                        </a>

                    </div>

                    <figure class="hero-banner">
                        <img src="https://sties-purwakarta.info/storage/galleryFoto/jFr3IgLqFyVKs3SNOHhPy6EKTcSbPWhzc1muyud2.jpg" style="border-radius: 12px;" width="500" height="500" loading="lazy"
                            alt="jurusan <?= !empty($namaKampus) ? htmlspecialchars($namaKampus) : 'Data tidak tersedia' ?> kelas karyawan" class="w-100">

                        <!--<img src="https://sties-purwakarta.info/images/logo/logo2.png" style="width: 300px;" height="352" loading="lazy"-->
                        <!--    aria-hidden="true" alt="jurusan <?= !empty($namaKampus) ? htmlspecialchars($namaKampus) : 'Data tidak tersedia' ?> kelas karyawan"-->
                        <!--    class="abs-img abs-img-1">-->
                    </figure>
                </div>
            </section>
            
            <!--- #JURUSAN PROGRAM STUDI -->
            <section class="section category" id="jurusan-<?= !empty($namaKampus) ? htmlspecialchars($namaKampus) : 'Data tidak tersedia' ?>-kelas-karyawan" aria-label="category">
                <div class="container">
                    <p class="section-subtitle">PROGRAM STUDI / JURUSAN</p>

                    <h2 class="h2 section-title" style="color:black ;"><?= !empty($namaKampus) ? htmlspecialchars($namaKampus) : 'Data tidak tersedia' ?></h2>
                    <ul class="flex-list" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; padding: 0; margin: 0;">
                        <?php foreach ($groups as $group): ?>
                      <li>
                        <div class="category-card" style="justify-content: center; display: flex; flex-direction: column; align-items: center; padding: 20px; border: 1px solid #ddd; border-radius: 10px;">
                    
                          <div class="card-icon">
                            <ion-icon style="color:black; font-size: 30px;" name="cash-outline"></ion-icon>
                          </div>
                    
                          <div>
                            <h3 class="h3 card-title" style="text-align: center; font-size: 16px;">
                              <a href="#" style="color: #333; text-decoration: none;">Kelas Karyawan</a>
                            </h3>
                            <span class="card-meta" style="text-align: center; color: #777;"><?php foreach ($group['jurusan'] as $jur): ?>
                <?= htmlspecialchars($jur) ?><br>
            <?php endforeach; ?></span>
                          </div>
                    
                        </div>
                      </li>
                      <?php endforeach; ?>

                    </ul>
                </div>
            </section>

            <!--- #TENTANG ABOUT-->
            <section class="section about" id="tentang-<?= !empty($namaKampus) ? htmlspecialchars($namaKampus) : 'Data tidak tersedia' ?>-kelas-karyawan" aria-label="about">
                <div class="container">

                        <img src="https://sties-purwakarta.info/images/logo/logo1.png" loading="lazy"
                            alt="tentang <?= !empty($namaKampus) ? htmlspecialchars($namaKampus) : 'Data tidak tersedia' ?> kelas karyawan" class="w-100 about-img">
                            
                    <div class="about-content">
    
                            <p class="section-subtitle">Tentang <?= !empty($namaKampus) ? htmlspecialchars($namaKampus) : 'Data tidak tersedia' ?></p>
    
                            <ul class="about-list">
    
                                <li class="about-item">
    
                                    
    
                                    <div>
                                        <div>
                                            <div class="item-icon item-icon-1" style="width:60px;">
                                                <img src="./assets/images/about-icon-1.png" width="30" height="30" loading="lazy"
                                                    aria-hidden="true"
                                                    alt="jurusan manajemen <?= !empty($namaKampus) ? htmlspecialchars($namaKampus) : 'Data tidak tersedia' ?> kelas karyawan">
                                            </div>    
                                        <h3 class="h3 item-title">Sejarah Singkat </h3>
                                        </div>
    
                                        <p class="item-text" align="justify">
                                       Angka Partisipasi Kasar Provinsi Jawa Barat yang masih rendah di bandingkan dengan Provinsi DKI Jakarta dan sekitarnya , membuat <?= !empty($namaKampus) ? htmlspecialchars($namaKampus) : 'Data tidak tersedia' ?> menjadi salah satu Perguruan Tinggi dengan biaya terjangkau di Jawa Barat. hal ini dilakukan untuk memfasilitasi seluruh masyarakat Jawa Barat pada khususnya dan seluruh masyarakat provinsi Jawa Barat pada umumnya.
    
                                          <br>
                                               <a href="https://sties-purwakarta.info/visi-misi" target="_blank" class="btn btn-warning">
                                                    <span class="span">Lihat Selengkapnya </span>
                        
                                                    <ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>
                                                </a>
                                        </div>
    
                                </li>
    
                            </ul>
                    </div>

                </div>
            </section>
           
            <!--- #BIAYA PERKULIAHAN-->

           <section class="section course" id="biaya-kuliah-<?= !empty($namaKampus) ? htmlspecialchars($namaKampus) : 'Data tidak tersedia' ?>-kelas-karyawan" aria-label="course"
                style="background-image: url('./assets/images/course-bg.jpg')">
                <div class="container">

                    <p class="section-subtitle">Biaya Perkuliahan</p>

                    <h2 class="h2 section-title" style="color:black; margin-bottom:20px;"><?= !empty($namaKampus) ? htmlspecialchars($namaKampus) : 'Data tidak tersedia' ?></h2>

                    <ul class="flex-list">
                            <?php foreach ($groups as $group): ?>
    <?php
        $formulir_key = $kategori_to_formulir[$group['kategori']] ?? '';
        $biaya_formulir = $formulir[$formulir_key] ?? 'Rp 150.000';
    ?>
                        <li>
                            <div class="course-card">

                                <figure class="card-banner">
                                    <img src="https://sties-purwakarta.info/storage/galleryFoto/jFr3IgLqFyVKs3SNOHhPy6EKTcSbPWhzc1muyud2.jpg" width="370" height="270" loading="lazy"
                                        alt="jurusan <?= !empty($namaKampus) ? htmlspecialchars($namaKampus) : 'Data tidak tersedia' ?> kelas karyawan" class="img-cover">
                                </figure>

                                <div class="card-actions">
                                    <button class="whishlist-btn" aria-label="Add to whishlist" data-whish-btn>
                                        <ion-icon name="heart"></ion-icon>
                                    </button>
                                </div>
                                <div class="card-content">
                                    <ul class="card-meta-list">
                                        <li class="card-meta-item">
                                            <ion-icon name="reader-outline" aria-hidden="true"></ion-icon>
                                            <span class="card-meta-text">20 Kuota</span>
                                        </li>
                                        <li class="card-meta-item">
                                            <ion-icon name="time-outline" aria-hidden="true"></ion-icon>
                                        </li>
                                    </ul>
                                    <h3 class="h3">
                                        <a href="#" class="card-title">
                                            <p style="color:black ;">
                                               <?= implode(', ', $group['jurusan']) ?>
                                            </p>
                                        </a>
                                    </h3>
                                    <div class="rating-wrapper">
                                        <div class="rating">
                                            <ion-icon name="star"></ion-icon>
                                            <ion-icon name="star"></ion-icon>
                                            <ion-icon name="star"></ion-icon>
                                            <ion-icon name="star"></ion-icon>
                                            <ion-icon name="star"></ion-icon>
                                        </div>
                                    </div>
                                    <div class="card-footer">
                 
                                            
                                            <p>Kelas Reguler<br><br>
                                                  Biaya Pendaftaran : Rp. <b> <?= $biaya_formulir ?>
                                                      <!--<i class="biayaPendaftaranS1"></i>-->
                                                      </b><br/>
                                                  Biaya Awal : Rp. <b><?= number_format($group['biaya_awal'], 0, ',', '.') ?>
                                                      <!--<i class="biayaAwalS1"></i>-->
                                                      </b> (Sudah Termasuk Angs 1 UKT+ Biaya Almamater + KTM + PKKMB )<br/>
                                                  Biaya Bulanan : Rp. <b> <?= number_format($group['biaya_spp'], 0, ',', '.') ?>
                                                      <!--<i class="biayaBulananS1"></i>-->
                                                      </b>-/Bulan<br/>
                                                <br/>
                                            <br/>
                                            </p>
                                            
                                 
                                        <div class="card-meta-item">
                                            <ion-icon name="people-outline" aria-hidden="true"></ion-icon>
                                            <span class="card-meta-text">500 Mahasiswa</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <?php endforeach; ?>

                    </ul>
                    
                    <a href="https://pendaftaran.sties-purwakarta.info/" target="_blank" class="btn btn-primary" style="padding-inline: 20px;">
                        <span class="span" >Daftar Sekarang</span>

                        <ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>
                    </a>

                </div>
            </section>

            <!--- #CTA -->
            <section class="section cta" aria-label="workshop"
                style="background-image: url('./assets/images/cta-bg.png')">
                <div class="container">

                    
                    <div class="cta-content">

                        <p class="section-subtitle">Daftarkan Diri Anda Sekarang Juga Sebagai Mahasiswa <?= !empty($namaKampus) ? htmlspecialchars($namaKampus) : 'Data tidak tersedia' ?></p>

                        <h2 class="h2 section-title">Kuota Terbatas<br />
                        </h2>

                        <p class="section-text">
                            <ul>
                                <li class="li-countdown"><span class="li-span" id="days"></span>Hari</li>
                                <li class="li-countdown"><span class="li-span" id="hours"></span>Jam</li>
                                <li class="li-countdown"><span class="li-span" id="minutes"></span>Menit</li>
                                <li class="li-countdown"><span class="li-span" id="seconds"></span>Detik</li>
                            </ul>
                        </p>

                        <a href="https://pendaftaran.sties-purwakarta.info/" target="_blank" class="btn btn-secondary" style="padding-inline:10px;">
                            <span class="span">Daftar Sekarang !!!</span>

                            <ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>
                        </a>

                    </div>

                </div>
            </section>

            <!--- #NEWSLETTER-->
            <section class="section newsletter" aria-label="newsletter"
                style="background-image: url('./assets/images/newsletter-bg.jpg')">
                <div class="container">

                    <p class="section-subtitle">Subscribe Newsletter</p>

                    <h2 class="h2 section-title">Get Every Latest News</h2>

                    <form action="" class="newsletter-form">

                        <div class="input-wrapper">
                            <input type="email" name="email_address" aria-label="email"
                                placeholder="Enter your mail address" required class="email-field">

                            <ion-icon name="mail-open-outline" aria-hidden="true"></ion-icon>
                        </div>

                        <button type="submit" class="btn btn-primary" style="padding-inline: 10px;">
                            <span class="span">Subscribe</span>

                            <ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>
                        </button>

                    </form>

                </div>
            </section>

        </article>
    </main>





    <!--- #FOOTER -->
      <footer style="background-color: #a8a8a8; padding: 40px 0; color: white;">
        <div style="display: flex; justify-content: space-around; align-items: flex-start; max-width: 1200px; margin: 0 auto;">
            <!-- Logo Section -->
            <div style="flex: 1; text-align: center;">
                <img src="https://sties-purwakarta.info/images/logo/logo1.png" alt="Logo" style="width: 100px;">
            </div>
    
            <!-- Useful Links -->
            <div style="flex: 1;">
                <h3 style="color: #e7e7e7;">Tautan Berguna</h3>
                  <ul style="list-style-type: none; padding: 0; color: #e7e7e7;">
                    <li><a href="https://pendaftaran.sties-purwakarta.info/" style="color: #e7e7e7; text-decoration: none;">Pendaftaran Online</a></li>
                    <li><a href="https://kontak.kuliahkaryawan.net/?jurusan.sties-purwakarta.info" style="color: #e7e7e7; text-decoration: none;">Kontak</a></li>
                    <li><a href="#biaya-kuliah-<?= !empty($namaKampus) ? htmlspecialchars($namaKampus) : 'Data tidak tersedia' ?>-kelas-karyawan" style="color: #e7e7e7; text-decoration: none;">Biaya Kuliah</a></li>
                    <li><a href="#" style="color: #e7e7e7; text-decoration: none;">Galeri Foto</a></li>
                </ul>
            </div>
    
            <!-- Address Section -->
            <div style="flex: 1;">
                <h3 style="color: #e7e7e7;">Alamat</h3>
                <p style="color: #e7e7e7;">
                    Kampus 1: <?= htmlspecialchars($kampusData['alamat kampus'] ?? 'Alamat Kampus 1 Tidak Tersedia') ?><br><br>
                    Kampus 2: <?= htmlspecialchars($kampusData['alamat kampus 2'] ?? 'Alamat Kampus 2 Tidak Tersedia') ?>
                </p>
            </div>
    
            <!-- Social Media Section -->
            <div style="flex: 1;">
                <h3 style="color: #e7e7e7;">Follow Us</h3>
                <div style="display: flex; gap: 10px;">
                        <a href="https://kuliahkaryawan.net/"  target="_blank"><i class="fab fa-google"></i></a>
      	 				<a href="https://www.facebook.com/k2.stiesi.purwakarta/" target="_blank"><i class="fab fa-facebook-f"></i></a>
      	 				<a href="https://www.instagram.com/stiesindonesia_/" target="_blank"><i class="fab fa-instagram"></i></a>
      	 				<a href="https://x.com/_kuliahkaryawan?mx=2"  target="_blank"><i class="fab fa-twitter"></i></a>
                </div>
            </div>
        </div>
    </footer>


    <!--- #BACK TO TOP-->

    <a href="#top" class="back-top-btn" aria-label="Back to top" data-back-top-btn>
        <ion-icon name="arrow-up"></ion-icon>
    </a>





    <!--- custom js link-->
     <script src="https://code.jquery.com/jquery-1.6.4.js"></script>
     <!-- API Biaya-->
          <script>
            $.getJSON(
                "https://kuliahkaryawan.net/api/BiayaUpri/1",
                function (data) {
                    let biayaPendaftaranS1 = `${data.biaya_pendaftaran_s1}`;
                    $(".biayaPendaftaranS1").html(biayaPendaftaranS1);
                    
                    let biayaAwalS1 = `${data.biaya_awal_s1}`;
                    $(".biayaAwalS1").html(biayaAwalS1);
                    
        		    let biayaBulananS1 = `${data.biaya_bulanan_s1}`;
                    $(".biayaBulananS1").html(biayaBulananS1);
                    
                    
                }
            ); 
        </script>
    <script src="./assets/js/script.js" defer></script>

    <!-- 
    - ionicon link
  -->
    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
    <script>
        (function () {
            const second = 1000,
                minute = second * 60,
                hour = minute * 60,
                day = hour * 24;
    
            //I'm adding this section so I don't have to keep updating this pen every year :-)
            //remove this if you don't need it
            let today = new Date(),
                dd = String(today.getDate()).padStart(2, "0"),
                mm = String(today.getMonth() + 1).padStart(2, "0"),
                yyyy = today.getFullYear(),
                nextYear = yyyy + 1,
                dayMonth = "01/08/",
                birthday = dayMonth + yyyy;
    
            today = mm + "/" + dd + "/" + yyyy;
            if (today > birthday) {
                birthday = dayMonth + nextYear;
            }
            //end
    
            const countDown = new Date(birthday).getTime(),
                x = setInterval(function () {
    
                    const now = new Date().getTime(),
                        distance = countDown - now;
    
                    document.getElementById("days").innerText = Math.floor(distance / (day)),
                        document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
                        document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
                        document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second);
    
                    //do something later when date is reached
                    if (distance < 0) {
                        document.getElementById("headline").innerText = "It's my birthday!";
                        document.getElementById("countdown").style.display = "none";
                        document.getElementById("content").style.display = "block";
                        clearInterval(x);
                    }
                    //seconds
                }, 0)
        }());
    
    </script>
</body>


</html>
