<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
	<link rel="icon" href="<?php echo base_url('assets/img/favicon.ico'); ?>" type="image/x-icon">      
    <title>website CSIRT</title>  
    <!-- Bootstrap 4.6 CSS -->  
    <link rel="stylesheet" href="<?php echo base_url('assets/css/bootstrap.min.css'); ?>">
	<link rel="stylesheet" href="<?php echo base_url('assets/css/front-bootstrap.css'); ?>">  
    
</head>  
<body>  

<!-- Navigation Bar -->  
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">  
    <div class="container">  
        <a class="navbar-brand" href="#">  
            <img src="<?php echo base_url('assets/img/logo_web.png'); ?>" alt="Logo">  
        </a>  
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">  
            <span class="navbar-toggler-icon"></span>  
        </button>  
        <div class="collapse navbar-collapse" id="navbarNav">  
            <ul class="navbar-nav ml-auto">  
                <li class="nav-item active">  
                    <a class="nav-link" href="#home">Beranda <span class="sr-only">(current)</span></a>  
                </li>  
                <li class="nav-item">  
                    <a class="nav-link" href="#profile">Profil</a>  
                </li>  
                <li class="nav-item">  
                    <a class="nav-link" href="#articles">Artikel</a>  
                </li>  
                <li class="nav-item">  
                    <a class="nav-link" href="#rfc2350">RFC2350</a>  
                </li>  
                <li class="nav-item">  
                    <a class="nav-link" href="#services">Layanan</a>  
                </li>  
                <li class="nav-item">  
                    <a class="nav-link" href="#guides">Panduan</a>  
                </li>  
                <li class="nav-item">  
                    <a class="nav-link" href="#contact">Kontak</a>  
                </li>  
            </ul>  
        </div>  
    </div>  
</nav>  

<!-- Hero Section -->  
<section id="home" class="hero">  
    <div class="container">  
        <h1>Selamat Datang di Website Kami</h1>  
        <p>Temukan informasi terkini dan layanan terbaik di sini.</p>  
        <a href="#" class="btn btn-primary btn-lg">Pelajari Lebih Lanjut</a>  
    </div>  
</section>  

<!-- About Us Section -->  
<section id="profile" class="section about-us">  
    <div class="container">  
        <h2>Tentang Kami</h2>  
        <p>Kami adalah perusahaan yang berdedikasi untuk menyediakan solusi terbaik dalam bidang teknologi dan informasi. Kami berkomitmen untuk memberikan layanan terbaik kepada pelanggan kami.</p>  
    </div>  
</section>  

<!-- Artikel Section -->
<section id="articles" class="section">  
    <div class="container">  
        <h2>Artikel Terbaru</h2>  
        <div class="row" id="artikel-container">  
            <?php if (!empty($artikel)): ?>
                <?php $count = 0; ?>
                <?php foreach ($artikel as $artikel_item): ?>
                    <?php if ($artikel_item['artikel_status'] === 'publish' && $count < 3): ?>
                        <div class="col-md-4">  
                            <div class="card">  
                                <img src="<?php echo base_url('gambar/artikel/' . $artikel_item['artikel_sampul']); ?>" class="card-img-top" alt="<?php echo $artikel_item['artikel_judul']; ?>">  
                                <div class="card-body">  
                                    <h5 class="card-title"><?php echo $artikel_item['artikel_judul']; ?></h5>  
                                    <p class="card-text"><?php echo strip_tags(substr($artikel_item['artikel_konten'], 0, 100)) . '...'; ?></p>  
                                    <a href="<?php echo base_url('artikel/detail/' . $artikel_item['artikel_slug']); ?>" class="btn btn-primary">Baca Selengkapnya</a>
                                    </div>  
                            </div>  
                        </div>  
                        <?php $count++; ?>
                    <?php endif; ?>
                <?php endforeach; ?>
            <?php else: ?>
                <p>Tidak ada artikel.</p>
            <?php endif; ?>
        </div>  
    </div>  
</section>


<!-- RFC2350 Section -->  
<section id="rfc2350" class="section about-us">  
    <div class="container">  
        <h2>RFC2350</h2>  
        <p>RFC2350 adalah dokumen standar yang diterbitkan oleh Internet Engineering Task Force (IETF). Dokumen ini berisi spesifikasi teknis yang penting untuk berbagai aplikasi dan protokol jaringan.</p>  
    </div>  
</section>  

<!-- Services Section -->  
<section id="services" class="section">  
    <div class="container">  
        <h2>Layanan Kami</h2>  
        <div class="row">  
            <div class="col-md-4">  
                <div class="card">  
                    <div class="card-body">  
                        <h5 class="card-title">Layanan 1</h5>  
                        <p class="card-text">Deskripsi singkat layanan 1.</p>  
                    </div>  
                </div>  
            </div>  
            <div class="col-md-4">  
                <div class="card">  
                    <div class="card-body">  
                        <h5 class="card-title">Layanan 2</h5>  
                        <p class="card-text">Deskripsi singkat layanan 2.</p>  
                    </div>  
                </div>  
            </div>  
            <div class="col-md-4">  
                <div class="card">  
                    <div class="card-body">  
                        <h5 class="card-title">Layanan 3</h5>  
                        <p class="card-text">Deskripsi singkat layanan 3.</p>  
                    </div>  
                </div>  
            </div>  
        </div>  
    </div>  
</section>  

<!-- Guides Section -->  
<section id="guides" class="section bg-light">  
    <div class="container">  
        <h2>Panduan</h2>  
        <p>Berikut adalah panduan singkat untuk menggunakan layanan kami:</p>  
        <div class="row">  
            <div class="col-md-4">  
                <div class="card">  
                    <div class="card-body">  
                        <h5 class="card-title">Panduan 1</h5>  
                        <p class="card-text">Deskripsi singkat panduan 1.</p>  
                    </div>  
                </div>  
            </div>  
            <div class="col-md-4">  
                <div class="card">  
                    <div class="card-body">  
                        <h5 class="card-title">Panduan 2</h5>  
                        <p class="card-text">Deskripsi singkat panduan 2.</p>  
                    </div>  
                </div>  
            </div>  
            <div class="col-md-4">  
                <div class="card">  
                    <div class="card-body">  
                        <h5 class="card-title">Panduan 3</h5>  
                        <p class="card-text">Deskripsi singkat panduan 3.</p>  
                    </div>  
                </div>  
            </div>  
        </div>  
    </div>  
</section>  

<!-- Contact Section -->  
<section id="contact" class="section">  
    <div class="container">  
        <div class="contact-section">  
            <div class="contact-form">  
                <h2>Kontak Kami</h2>  
                <p>Jika Anda memiliki pertanyaan atau membutuhkan bantuan, silakan hubungi kami melalui formulir di bawah ini:</p>  
                <form>  
                    <div class="form-group">  
                        <label for="name">Nama</label>  
                        <input type="text" class="form-control" id="name" placeholder="Masukkan nama Anda" required>  
                    </div>  
                    <div class="form-group">  
                        <label for="email">Email</label>  
                        <input type="email" class="form-control" id="email" placeholder="Masukkan email Anda" required>  
                    </div>  
                    <div class="form-group">  
                        <label for="message">Pesan</label>  
                        <textarea class="form-control" id="message" rows="3" placeholder="Masukkan pesan Anda" required></textarea>  
                    </div>  
                    <button type="submit" class="btn btn-primary">Kirim</button>  
                </form>  
            </div>  
            <div class="contact-map">  
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.428559650357!2d106.8271833147732!3d-6.229743462818935!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f3e945e34b9d%3A0x5371bf91cc5d74b4!2sRadio%20Republik%20Indonesia%20HQ!5e0!3m2!1sid!2sid!4v1688992400000!5m2!1sid!2sid" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>  
            </div>  
        </div>  
    </div>  
</section>  

<!-- Footer -->  
<footer class="footer">  
    <div class="container">  
        <p> Hak Cipta Dilindungi&copy;2025 Direktorat Teknologi dan Media Baru LPP RRI.</p>  
    </div>  
</footer> 




 

<!-- Back to Top Button -->
<button class="back-to-top" onclick="scrollToTop()">&#8593;</button>

<!-- Bootstrap 4.6 JS and dependencies -->  
<script src="<?php echo base_url('assets/js/jquery.slim.min.js'); ?>"></script>
<script src="<?php echo base_url('assets/js/popper.min.js'); ?>"></script>
<script src="<?php echo base_url('assets/js/bootstrap.min.js'); ?>"></script>  


<!-- Script JS untuk Fetch API -->
<script>
document.addEventListener("DOMContentLoaded", function () {
    const baseUrl = "<?php echo base_url(); ?>";

    fetch(baseUrl + "api/artikel")
        .then(response => response.json())
        .then(data => {
            const container = document.getElementById("artikel-container");
            container.innerHTML = '';

            let count = 0;
            data.forEach(artikel => {
                if (artikel.artikel_status === 'publish' && count < 3) {
                    const artikelDiv = document.createElement("div");
                    artikelDiv.className = "col-md-4";
                    artikelDiv.innerHTML = `
                        <div class="card mb-3">
                            <img src="${baseUrl}gambar/artikel/${artikel.artikel_sampul}" class="card-img-top" alt="${artikel.artikel_judul}">
                            <div class="card-body">
                                <h5 class="card-title">${artikel.artikel_judul}</h5>
                                <p class="card-text">${artikel.artikel_konten.substring(0, 100)}...</p>
                                <a href="#" class="btn btn-primary">Baca Selengkapnya</a>
                            </div>
                        </div>
                    `;
                    container.appendChild(artikelDiv);
                    count++;
                }
            });

            if (count === 0) {
                container.innerHTML = "<p>Tidak ada artikel yang tersedia.</p>";
            }
        })
        .catch(error => {
            console.error("Error:", error);
            document.getElementById("artikel-container").innerHTML = "<p>Gagal memuat artikel. Silakan coba lagi nanti.</p>";
        });
});
</script>

</body>  
</html>