<?php
include 'koneksi.php';

function limit_words($text, $limit) {
    $words = explode(' ', $text);
    if (count($words) > $limit) {
        return implode(' ', array_slice($words, 0, $limit)) . '...';
    }
    return $text;
}
?>
<html lang="en">
<head><link rel="icon" href="upload/bn2.png" type="image/png">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Berita | Smk Budiniah 2</title>
    <style>
        body{
        margin: 0;
        font-family: Arial, sans-serif;
        }
        body a{
            cursor: pointer;
        }
        .hero-caption{
            font-weight: 200px;
            text-align: center;
            align-items: center;
            justify-content: center;
            margin-bottom: 10%;
            
        }
        .hero-caption h1{
            margin-top: 10%;
            font-size: 50px;
        }
        .cart-berita {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            padding: 20px 0;
            background: linear-gradient(
        to bottom,
        #131a33 25%,
        #131a33 75%,
        #ffffff 75%,
        #ffffff 100%
        );
        }
        .berita-item {
            display: grid;
            grid-template-columns: 1fr 1fr;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            background: white;
            width: 100%;
            max-width: 800px;
        }

        .berita-item img {
            width: 100%;
            height: auto;
            object-fit: cover;
            grid-column: 1;
        }

        .berita-item .content {
            padding: 15px;
            grid-column: 2;
        }
        
        .berita-item .content h3 {
            font-size: 18px;
            margin: 0 0 10px 0;
            color: #333;
        }
        
        .berita-item .content p {
            font-size: 14px;
            color: #666;
            margin: 0 0 10px 0;
            line-height: 1.4;
        }
        
        .berita-item .date {
            font-size: 12px;
            color: #999;
        }
        
        .berita-item .read-more {
            display: inline-block;
            margin-top: 10px;
            color: #0f62fe;
            text-decoration: none;
            font-size: 14px;
            font-weight: bold;
            transition: color 0.3s;
        }
        
        .berita-item .read-more:hover {
            color: #3f3ea5ff;
        }
        .content a:hover{
            color: #0f62fe;
        }

        /* Initial states for animations */
        .hero-caption {
            opacity: 0;
            transform: translateY(100px);
            transition: all 1s ease-out;
        }

        .hero-caption.slide-in-from-bottom {
            opacity: 1;
            transform: translateY(0);
        }

        .berita-item {
            opacity: 0;
            transition: all 1s ease-out;
        }

        .berita-item.slide-in-left {
            transform: translateX(-100px);
        }

        .berita-item.slide-in-left.animate {
            opacity: 1;
            transform: translateX(0);
        }

        .berita-item.slide-in-right {
            transform: translateX(100px);
        }

        .berita-item.slide-in-right.animate {
            opacity: 1;
            transform: translateX(0);
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .hero-caption h1 {
                font-size: 30px;
                margin-top: 15%;
            }
            .hero-caption p {
                font-size: 14px;
            }
            .cart-berita {
                padding: 10px 5%;
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 10px;
                justify-items: center;
            }
            .berita-item {
                display: flex;
                flex-direction: column;
                width: 100%;
                max-width: none;
                margin: 0;
                padding: 0;
                border-radius: 8px;
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .berita-item img {
                width: 100%;
                height: 150px;
                object-fit: cover;
            }
            .berita-item .content {
                padding: 10px;
            }
            .berita-item .content h3 {
                font-size: 14px;
                margin-bottom: 5px;
            }
            .berita-item .content p {
                font-size: 12px;
                margin-bottom: 5px;
            }
            .berita-item .date {
                font-size: 10px;
            }
            .berita-item .read-more {
                font-size: 12px;
                margin-top: 5px;
            }
        }

        @media (max-width: 480px) {
            .hero-caption h1 {
                font-size: 24px;
                margin-top: 20%;
            }
            .hero-caption p {
                font-size: 12px;
            }
            .cart-berita {
                padding: 10px 2%;
                grid-template-columns: repeat(2, 1fr);
                gap: 5px;
            }
            .berita-item {
                border-radius: 6px;
            }
            .berita-item img {
                height: 120px;
            }
            .berita-item .content {
                padding: 8px;
            }
            .berita-item .content h3 {
                font-size: 12px;
            }
            .berita-item .content p {
                font-size: 11px;
            }
            .berita-item .date {
                font-size: 9px;
            }
            .berita-item .read-more {
                font-size: 11px;
            }
        }
    </style>
</head>
<body>
    <?php require 'navbar.php' ?>
    <div class="hero-caption">
        <h1 style="text-transform: capitalize;">berita terbaru</h1>
        <p style="text-transform: capitalize;">Disini tempat dimana kami memosting berita seputar smk budiniah 2</p>
    </div>
    <div class="cart-berita">
            <?php
            $query = "SELECT * FROM tb_post WHERE kategori='berita' ORDER BY tanggal DESC";
            $result = mysqli_query($host, $query);
            if ($result && mysqli_num_rows($result) > 0) {
                while ($row = mysqli_fetch_assoc($result)) {
                    $imgSrc = !empty($row['gambar']) ? "upload/" . htmlspecialchars($row['gambar']) : "upload/default.jpg";
                    $judul = htmlspecialchars($row['judul_post']);
                    $deskripsi = htmlspecialchars($row['deskripsi']);
                    $tanggal = date('d M Y', strtotime($row['tanggal']));
                    echo '<div class="berita-item">';
                    if ($row['jenis'] === 'foto' && !empty($row['gambar'])) {
                        echo '<a href="detail_berita.php?id=' . $row['id_post'] . '"><img src="' . $imgSrc . '" alt="' . $judul . '" /></a>';
                    } elseif ($row['jenis'] === 'video' && !empty($row['iframe'])) {
                        echo '<a href="detail_berita.php?id=' . $row['id_post'] . '"><div class="video-container">' . $row['iframe'] . '</div></a>';
                    } else {
                        echo '<a href="detail_berita.php?id=' . $row['id_post'] . '"><img src="upload/default.jpg" alt="No Image" /></a>';
                    }
                    echo '<div class="content">';
                    echo '<a href="detail_berita.php?id=' . $row['id_post'] . '" style="text-decoration: none; color: inherit;"><h3>' . $judul . '</h3></a>';
                    echo '<a href="detail_berita.php?id=' . $row['id_post'] . '" style="text-decoration: none; color: inherit;"><p>' . limit_words($deskripsi, 20) . '</p></a>';
                    echo '<div class="date">' . $tanggal . ' - ' . htmlspecialchars($row['kategori']) . '</div>';
                    echo '<a href="detail_berita.php?id=' . $row['id_post'] . '" class="read-more">Baca Selengkapnya</a>';
                    echo '</div></div>';
                }
            } else {
                echo '<p>Belum ada berita tersedia.</p>';
            }
            ?>

    <script>
        // Intersection Observer for slide-in animations
        document.addEventListener('DOMContentLoaded', function() {
            const observerOptions = {
                threshold: 0.1,
                rootMargin: '0px 0px -50px 0px'
            };

            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        if (entry.target.classList.contains('hero-caption')) {
                            entry.target.classList.add('slide-in-from-bottom');
                        } else if (entry.target.classList.contains('berita-item')) {
                            // Add alternating animation for cards
                            const cards = document.querySelectorAll('.berita-item');
                            cards.forEach((card, index) => {
                                if (index % 2 === 0) {
                                    card.classList.add('slide-in-left');
                                } else {
                                    card.classList.add('slide-in-right');
                                }
                                setTimeout(() => {
                                    card.classList.add('animate');
                                }, index * 300); // 300ms delay between each card
                            });
                        }
                        observer.unobserve(entry.target);
                    }
                });
            }, observerOptions);

            // Observe the elements
            const heroCaption = document.querySelector('.hero-caption');
            const beritaItems = document.querySelectorAll('.berita-item');

            if (heroCaption) observer.observe(heroCaption);
            beritaItems.forEach(item => observer.observe(item));
        });
    </script>
    </div>
    <?php require 'footer.php' ?>
</body>
</html>

