OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	01/21/2025 10:39:45 AM	rwxr-xr-x
📄 genai.php	18.3 KB	01/21/2025 10:39:29 AM	rw-r--r--
📄 genai_article_save.php	1.6 KB	01/21/2025 10:39:29 AM	rw-r--r--
📄 genai_function.php	17.26 KB	01/21/2025 10:39:30 AM	rw-r--r--
📄 genai_save.php	2.13 KB	01/21/2025 10:39:30 AM	rw-r--r--
📄 genai_style.css	4.35 KB	01/21/2025 10:39:31 AM	rw-r--r--
📄 genaicreative.php	18.57 KB	01/21/2025 10:39:28 AM	rw-r--r--
📄 index.php	56.35 KB	01/21/2025 10:39:34 AM	rw-r--r--
📄 process_genai.php	2.02 KB	01/21/2025 10:39:32 AM	rw-r--r--

Editing: index.php

<?php
include '../inc/validate.logged.php';

function display_my_feeds($conn, $userId)
{
    // Prepare the query
    $stmt = $conn->prepare("SELECT rfa.id, rfu.rss_publisher, rfa.url, rfa.title, rfa.description, rfa.image, rfa.date 
  FROM rss_feeds_articles rfa 
  INNER JOIN rss_feeds_url rfu ON rfa.feed_id = rfu.rss_id 
  INNER JOIN reader_collection rc ON rfa.id=rc.feed_id
  WHERE rc.user_id = ? 
  ORDER BY rfa.date DESC");

$stmt->bind_param("i", $userId);
    $stmt->execute();
    $result = $stmt->get_result();
    if ($result->num_rows > 0) {
?>
        <div class="category">
            <h2 class="category-title">My Feeds</h2>
            <div class="scroll-row">
                <?
                // Output data of each row
                while ($row = $result->fetch_assoc()) {
                    $feedId = stripslashes($row['id']);
                    $title = htmlspecialchars(strip_tags(stripslashes($row['title'])));
                    $description = htmlspecialchars(strip_tags(stripslashes($row['description'])));
                    // $date = htmlspecialchars(strip_tags(stripslashes($row['date'])));
                    $image = is_null($row['image']) || $row['image'] === '' ? 'assets/img/toi.png' : $row['image'];
                    $date = htmlspecialchars(strip_tags(stripslashes($row['date'])));
                    echo '
              <div class="card item-card">
                  <img src="' . htmlspecialchars($image) . '" class="card-img-top" alt="' . $title . '">
                  <div class="card-body">
                      <h5 class="card-title">' . $title . '</h5>
                      <a href="#" 
                         class="btn btn-primary read-more" 
                         data-title="' . htmlspecialchars($row['title']) . '" 
                         data-description="' . $description . '" 
                         data-image="' . htmlspecialchars($image) . '" 
                         data-date="' . htmlspecialchars($date) . '"
                         data-url="' . htmlspecialchars($row['url']) . '">
              
                         Read
                      </a>
                  </div>
              </div>
          ';
                }
                ?>
            </div>
        </div>
<?
    }
    // Close the prepared statement and the database connection
    $stmt->close();
}

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Navbar with Bootstrap</title>

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="../assets/js/script.js">
    <link rel="stylesheet" href="../assets/css/styles.css">

<style>
        /* Navbar brand */
        .navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
            color: #e50914 !important;
            /* Netflix Red */
        }

/* Navbar links */
        .navbar-nav .nav-link {
            color: #bbb !important;
            transition: color 0.3s;
        }

.navbar-nav .nav-link:hover {
            color: #fff !important;
        }

.navbar {
            background-color: #141414;
        }

/* Container Padding */
        .container-fluid {

padding: 0 2%;
            max-width: 1400px;
            margin: 0 auto;

}

/* Category Section */
        .category {
            margin-bottom: 2rem;
        }

.category-title {
            margin-bottom: 2rem;
            font-size: 1.75rem;
            font-weight: 700;
            color: #fff;
            text-align: center;
        }

/* Scrollable Row */
        .scroll-row {
            display: flex;
            overflow-x: auto;
            padding-bottom: 1rem;
            scroll-behavior: smooth;
        }

.scroll-row::-webkit-scrollbar {
            height: 8px;
        }

.scroll-row::-webkit-scrollbar-thumb {
            background-color: #555;
            border-radius: 4px;
        }

.scroll-row::-webkit-scrollbar-track {
            background-color: #222;
        }

.scroll-row {
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            gap: 0px;
            padding-bottom: 10px;
        }

.item-card {
            flex: 0 0 auto;
            /* Prevent flex items from shrinking */
            max-width: 200px;
            min-width: 200px !important;
            margin-right: 0.5rem;
            background-color: #1c1c1c !important;
            border: none;
            border-radius: 8px;
            transition: transform 0.3s, box-shadow 0.3s;
            cursor: pointer;
        }

/* Card Styles */
        .item-card:last-child {
            margin-right: 0;
        }

.item-card:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
            z-index: 2;
        }

.item-card img {
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            height: 120px;
            object-fit: cover;
        }

.item-card .card-body {
            padding: 0.5rem 1rem;
        }

.item-card .card-title {
            font-size: 1rem;
            margin-bottom: 0.5rem;
            color: #fff;
            text-align: center;
        }

.card-para {
            color: #fff !important;
        }

.item-card .btn {
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
            border-radius: 4px;
            display: block;
            margin: 0 auto;
            width: 60%;
        }

/* Action Buttons Section */
        .actions-section {
            margin-top: 2rem;
            margin-bottom: 2rem;
        }

.action-card {
            background-color: #333 !important;

border: none;
            border-radius: 8px;
            transition: background-color 0.3s, transform 0.3s;
            cursor: pointer;
        }

.action-card:hover {
            background-color: #444 !important;
            transform: translateY(-5px);
        }

.action-card .card-body {
            text-align: center;
            padding: 2rem 1rem;
        }

.action-card .card-title {
            margin-bottom: 1rem;
            font-size: 1.25rem;
            font-weight: 700;
            color: #fff;
        }

.action-card .btn {
            margin-top: 1rem;
            padding: 0.5rem 1rem;
            font-size: 1rem;
            border-radius: 4px;
        }

.icon {
            color: white !important;
            /* White color for the icons */
            /* margin-right: 10px; */
            border: none;
        }

.navbar-toggler:focus {
            border-color: black !important;
            border: none !important;
            outline: none;
        }

.tooltip {
            position: relative;
            display: inline-block;
        }

.tooltiptext {
            visibility: hidden;
            width: 120px;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 5px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            /* Position above the icon */
            left: 50%;
            margin-left: -60px;
            /* Center the tooltip */
            opacity: 0;
            /* Hide tooltip initially */
            transition: opacity 0.3s;
        }

.tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
            /* Show tooltip on hover */
        }

.action-card {
            height: 220px;
            /* Set a fixed height */
            display: flex;
            /* Use flexbox for vertical centering */
            flex-direction: column;
            /* Align children vertically */
            justify-content: center;
            /* Center content vertically */
            text-align: center;
            /* Center text horizontally */
        }

.dropdown-menu {
            position: absolute;
            top: 100%;
            left: -100px;
            z-index: 1000;
            display: none;
            float: left;
            min-width: 10rem;
            padding: .5rem 0;
            margin: .125rem 0 0;
            font-size: 1rem;
            color: #212529;
            text-align: left;
            list-style: none;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid rgba(0, 0, 0, .15);
            border-radius: .25rem;
        }

.modal-content {
            background-color: #1c1c1c !important;
            color: white !important;
        }

.modal-body {
            padding: 20px;
        }

.morewithlike i {
            color: #a3a2a2 !important;
            border: none;
            padding: 0;
        }

.morewithlike button::after {
            border-color: pink;
            /* Ensure no outline when focused */
            border: none;
            outline: none;

}

.modal-title {
            max-width: 88%;
        }

/* Responsive Adjustments */
        @media (max-width: 992px) {
            .item-card {
                min-width: 180px;
            }

.category-title {
                font-size: 1.5rem;
            }
        }

@media (max-width: 768px) {
            .item-card {
                min-width: 160px;
            }

.category-title {
                font-size: 1.25rem;
            }

.action-card .card-title {
                font-size: 1.1rem;
            }

.action-card .btn {
                font-size: 0.95rem;
            }
        }

@media (max-width: 576px) {
            .navbar-brand {
                font-size: 1.25rem;
            }

.nav-link {
                margin-left: 0.5rem;
                font-size: 0.9rem;
                padding: .5rem 0rem;
            }

.item-card {
                max-width: 140px;
            }

.category-title {
                font-size: 1rem;
            }

.action-card .card-title {
                font-size: 1rem;
            }

.action-card .btn {
                font-size: 0.9rem;
            }
        }
    </style>
</head>

<body>

<?php
    include '../navbar.php'
    ?>

<div class="container-fluid" style="padding-top: 2rem; padding-bottom: 4rem;">
        
        <div class="category">
            <h2 class="category-title">Featured Channels</h2>
            <div class="scroll-row">
                
                <div class="card item-card">
                    <img src="../assets/img/toi.png" class="card-img-top" alt="TOI Logo">
                    <div class="card-body">
                        <h5 class="card-title">TOI</h5>
                        <a href="feed.php?rss_id=9" class="btn btn-primary">Read</a>
                    </div>
                </div>
                <div class="card item-card">
                    <img src="../assets/img/bbc.png" class="card-img-top" alt="Deccan Herald Logo">
                    <div class="card-body">
                        <h5 class="card-title">BBC news</h5>
                        <a href="feed.php?rss_id=38" class="btn btn-primary">Read</a>
                    </div>
                </div>
                <div class="card item-card">
                    <img src="assets/img/the hindu.png" class="card-img-top" alt="The Hindu Logo">
                    <div class="card-body">
                        <h5 class="card-title">The Hindu</h5>
                        <a href="feed.php?rss_id=33" class="btn btn-primary">Read</a>
                    </div>
                </div>
                <div class="card item-card">
                    <img src="assets/img/mint.png" class="card-img-top" alt="WSJ Logo">
                    <div class="card-body">
                        <h5 class="card-title">Mint</h5>
                        <a href="feed.php?rss_id=40" class="btn btn-primary">Read</a>
                    </div>
                </div>
                
                <div class="card item-card">
                    <img src="assets/img/economist.png" class="card-img-top" alt="Economist Logo"
                        style="background-color: white;">
                    <div class="card-body">
                        <h5 class="card-title">The Economist</h5>
                        <a href="feed.php?rss_id=19" class="btn btn-primary">Read</a>
                    </div>
                </div>
                <div class="card item-card">
                    <img src="assets/img/thetelegraph.png" class="card-img-top" alt="The Telegraph Logo">
                    <div class="card-body">
                        <h5 class="card-title">The Telegraph</h5>
                        <a href="feed.php?rss_id=1" class="btn btn-primary">Read</a>
                    </div>
                </div>
                <div class="card item-card">
                    <img src="assets/img/bs.png" class="card-img-top" alt="Business Standard Logo">
                    <div class="card-body">
                        <h5 class="card-title">Business Standard</h5>
                        <a href="feed.php?rss_id=3" class="btn btn-primary">Read</a>
                    </div>
                </div>
                <div class="card item-card">
                    <img src="assets/img/dna.png" class="card-img-top" alt="DNA Logo">
                    <div class="card-body">
                        <h5 class="card-title">DNA</h5>
                        <a href="feed.php?rss_id=24" class="btn btn-primary">Read</a>
                    </div>
                </div>
                <div class="card item-card">
                    <img src="assets/img/theguardian.png" class="card-img-top" alt="Business Gyan Logo">
                    <div class="card-body">
                        <h5 class="card-title">The Guardian</h5>
                        <a href="feed.php?rss_id=37" class="btn btn-primary">Read</a>
                    </div>
                </div>
            </div>
        </div>

<div class="category">
            <h2 class="category-title">Featured Topics</h2>
            <div class="scroll-row">
                
                <div class="card item-card" onclick="window.location.href='./card-news.html'">
                    <img src="assets/img/Sports.png" class="card-img-top" alt="Channel 1">
                    <div class="card-body">
                        <h5 class="card-title">Sports News</h5>
                        <a href="featured_topics.php?ft_id=21" class="btn btn-primary">Read</a>
                    </div>
                </div>
                <div class="card item-card">
                    <img src="assets/img/Technology.png" class="card-img-top" alt="Channel 10">
                    <div class="card-body">
                        <h5 class="card-title">Technology</h5>
                        <a href="featured_topics.php?ft_id=13" class="btn btn-primary">Read</a>
                    </div>
                </div>
                <div class="card item-card">
                    <img src="assets/img/Real Estate.png" class="card-img-top" alt="Channel 9">
                    <div class="card-body">
                        <h5 class="card-title">Real Estate</h5>
                        <a href="featured_topics.php?ft_id=10" class="btn btn-primary">Read</a>
                    </div>
                </div>
                <div class="card item-card">
                    <img src="assets/img/educations.png" class="card-img-top" alt="Channel 2">
                    <div class="card-body">
                        <h5 class="card-title">Education & Learning</h5>
                        <a href="featured_topics.php?ft_id=3" class="btn btn-primary">Read</a>
                    </div>
                </div>
                <div class="card item-card">
                    <img src="assets/img/stocks.png" class="card-img-top" alt="Channel 3">
                    <div class="card-body">
                        <h5 class="card-title">Trading</h5>
                        <a href="featured_topics.php?ft_id=10" class="btn btn-primary">Read</a>
                    </div>
                </div>
                <div class="card item-card">
                    <img src="assets/img/Entertainment.png" class="card-img-top" alt="Channel 4">
                    <div class="card-body">
                        <h5 class="card-title">Entertainment & Pop Culture</h5>
                        <a href="featured_topics.php?ft_id=16" class="btn btn-primary">Read</a>
                    </div>
                </div>
                <div class="card item-card">
                    <img src="assets/img/Cultural Events.png" class="card-img-top" alt="Channel 5">
                    <div class="card-body">
                        <h5 class="card-title">Cultural Events</h5>
                        <a href="featured_topics.php?ft_id=12" class="btn btn-primary">Read</a>
                    </div>
                </div>
                <div class="card item-card">
                    <img src="assets/img/Political Developments.png" class="card-img-top" alt="Channel 6">
                    <div class="card-body">
                        <h5 class="card-title">Political Developments</h5>
                        <a href="featured_topics.php?ft_id=18" class="btn btn-primary">Read</a>
                    </div>
                </div>
                <div class="card item-card">
                    <img src="assets/img/Health and Wellness.png" class="card-img-top" alt="Channel 7">
                    <div class="card-body">
                        <h5 class="card-title">Health and Wellness</h5>
                        <a href="featured_topics.php?ft_id=6" class="btn btn-primary">Read</a>
                    </div>
                </div>
                <div class="card item-card">
                    <img src="assets/img/Environmental Issues.png" class="card-img-top" alt="Channel 8">
                    <div class="card-body">
                        <h5 class="card-title">Environmental Issues</h5>
                        <a href="featured_topics.php?ft_id=9" class="btn btn-primary">Read</a>
                    </div>
                </div>

</div>
        </div>

<div class="category">
            <h2 class="category-title">
                Curated Feeds
                <i class="fas fa-info-circle info-icon" title="This is some information"></i>
            </h2>
            <div class="scroll-row">

<?php
                include 'db_connect.php';

$rss_id = 9;
                // Function to limit title to 10 words
                function limitWords($text, $wordLimit)
                {
                    $words = explode(' ', $text);
                    return implode(' ', array_slice($words, 0, $wordLimit));
                }

// Query to fetch news data
                $stmt = $conn->prepare("SELECT rfa.id, rfu.rss_publisher, rfa.url, rfa.title, rfa.description, rfa.image, rfa.date 
        FROM rss_feeds_articles rfa 
        INNER JOIN rss_feeds_url rfu ON rfa.feed_id = rfu.rss_id 
        WHERE rfu.rss_id = ? 
        ORDER BY rfa.date DESC");

$stmt->bind_param("i", $rss_id);
                $stmt->execute();
                $result = $stmt->get_result();

if ($result->num_rows > 0) {
                    // Output data of each row
                    while ($row = $result->fetch_assoc()) {
                        $feedId = stripslashes($row['id']);
                        $title = htmlspecialchars(strip_tags(stripslashes($row['title'])));
                        $description = htmlspecialchars(strip_tags(stripslashes($row['description'])));
                        // $date = htmlspecialchars(strip_tags(stripslashes($row['date'])));
                        $image = is_null($row['image']) || $row['image'] === '' ? 'assets/img/toi.png' : $row['image'];
                        $date = htmlspecialchars(strip_tags(stripslashes($row['date'])));
                        echo '
                    <div class="card item-card">
                        <img src="' . htmlspecialchars($image) . '" class="card-img-top" alt="' . $title . '">
                        <div class="card-body">
                            <h5 class="card-title">' . $title . '</h5>
                            <a href="#" 
                               class="btn btn-primary read-more" 
                               data-title="' . htmlspecialchars($row['title']) . '" 
                               data-description="' . $description . '" 
                               data-image="' . htmlspecialchars($image) . '" 
                               data-date="' . htmlspecialchars($date) . '"
                               data-url="' . htmlspecialchars($row['url']) . '">
                    
                               Read
                            </a>
                        </div>
                    </div>
                ';
                    }
                } else {
                    echo '<p>No articles found.</p>';
                }

// Close the prepared statement and the database connection
                $stmt->close();
                ?>
            </div>
        </div>

<div class="category">
            <h2 class="category-title">Influencers</h2>
            <div class="scroll-row">
                
                <div class="card item-card">
                    <img src="https://via.placeholder.com/200x120?text=Influencer+1" class="card-img-top" alt="Influencer 1">
                    <div class="card-body">
                        <h5 class="card-title">Influencer 1</h5>
                        <a href="#" class="btn btn-primary">Read</a>
                    </div>
                </div>
                <div class="card item-card">
                    <img src="https://via.placeholder.com/200x120?text=Influencer+2" class="card-img-top" alt="Influencer 2">
                    <div class="card-body">
                        <h5 class="card-title">Influencer 2</h5>
                        <a href="#" class="btn btn-primary">Read</a>
                    </div>
                </div>
                <div class="card item-card">
                    <img src="https://via.placeholder.com/200x120?text=Influencer+3" class="card-img-top" alt="Influencer 3">
                    <div class="card-body">
                        <h5 class="card-title">Influencer 3</h5>
                        <a href="#" class="btn btn-primary">Read</a>
                    </div>
                </div>
                <div class="card item-card">
                    <img src="https://via.placeholder.com/200x120?text=Influencer+4" class="card-img-top" alt="Influencer 4">
                    <div class="card-body">
                        <h5 class="card-title">Influencer 4</h5>
                        <a href="#" class="btn btn-primary">Read</a>
                    </div>
                </div>
                <div class="card item-card">
                    <img src="https://via.placeholder.com/200x120?text=Influencer+5" class="card-img-top" alt="Influencer 5">
                    <div class="card-body">
                        <h5 class="card-title">Influencer 5</h5>
                        <a href="#" class="btn btn-primary">Read</a>
                    </div>
                </div>

<div class="card item-card">
                    <img src="https://via.placeholder.com/200x120?text=Influencer+6" class="card-img-top" alt="Influencer 6">
                    <div class="card-body">
                        <h5 class="card-title">Influencer 6</h5>
                        <a href="#" class="btn btn-primary">Read</a>
                    </div>
                </div>
                <div class="card item-card">
                    <img src="https://via.placeholder.com/200x120?text=Influencer+7" class="card-img-top" alt="Influencer 7">
                    <div class="card-body">
                        <h5 class="card-title">Influencer 7</h5>
                        <a href="#" class="btn btn-primary">Read</a>
                    </div>
                </div>
                <div class="card item-card">
                    <img src="https://via.placeholder.com/200x120?text=Influencer+8" class="card-img-top" alt="Influencer 8">
                    <div class="card-body">
                        <h5 class="card-title">Influencer 8</h5>
                        <a href="#" class="btn btn-primary">Read</a>
                    </div>
                </div>
                <div class="card item-card">
                    <img src="https://via.placeholder.com/200x120?text=Influencer+9" class="card-img-top" alt="Influencer 9">
                    <div class="card-body">
                        <h5 class="card-title">Influencer 9</h5>
                        <a href="#" class="btn btn-primary">Read</a>
                    </div>
                </div>
                <div class="card item-card">
                    <img src="https://via.placeholder.com/200x120?text=Influencer+10" class="card-img-top" alt="Influencer 10">
                    <div class="card-body">
                        <h5 class="card-title">Influencer 10</h5>
                        <a href="#" class="btn btn-primary">Read</a>
                    </div>
                </div>
            </div>
        </div>

<?php display_my_feeds($conn, $gUserId) ?>

<div class="category">
            <h2 class="category-title">My Magazine</h2>
            <div class="scroll-row">
                
                <div class="card item-card">
                    <img src="https://via.placeholder.com/200x120?text=Magazine+1" class="card-img-top" alt="Magazine 1">
                    <div class="card-body">
                        <h5 class="card-title">Magazine 1</h5>
                        <a href="#" class="btn btn-primary">Read</a>
                    </div>
                </div>
                <div class="card item-card">
                    <img src="https://via.placeholder.com/200x120?text=Magazine+2" class="card-img-top" alt="Magazine 2">
                    <div class="card-body">
                        <h5 class="card-title">Magazine 2</h5>
                        <a href="#" class="btn btn-primary">Read</a>
                    </div>
                </div>
                <div class="card item-card">
                    <img src="https://via.placeholder.com/200x120?text=Magazine+3" class="card-img-top" alt="Magazine 3">
                    <div class="card-body">
                        <h5 class="card-title">Magazine 3</h5>
                        <a href="#" class="btn btn-primary">Read</a>
                    </div>
                </div>
                <div class="card item-card">
                    <img src="https://via.placeholder.com/200x120?text=Magazine+4" class="card-img-top" alt="Magazine 4">
                    <div class="card-body">
                        <h5 class="card-title">Magazine 4</h5>
                        <a href="#" class="btn btn-primary">Read</a>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="actions-section">
            <div class="row justify-content-center">

<div class="col-md-4 mb-4">
                    <div class="card action-card">
                        <div class="card-body">
                            <h5 class="card-title">Create Your Own Magazine</h5>
                            <p class="card-para">Craft and share your own messages with the community.</p>
                            <?php if (isset($_SESSION['user_logged_in']) && $_SESSION['user_logged_in']): ?>
                                <a href="magazine.php" class="btn btn-primary">Create Magazine</a>
                            <?php else: ?>
                                <a href="sign-in.php" class="btn btn-primary">Sign In to Create Magazine</a>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>

<div class="col-md-4 mb-4">
                    <div class="card action-card">
                        <div class="card-body">
                            <h5 class="card-title">Read</h5>
                            <p class="card-para">Access a wide range of articles and stories.</p>
                            <a href="readarticles.html" class="btn btn-primary">Start Reading</a>
                        </div>
                    </div>
                </div>

<div class="col-md-4 mb-4">
                    <div class="card action-card">
                        <div class="card-body">
                            <h5 class="card-title">Watch Video</h5>
                            <p class="card-para">Enjoy a variety of videos from different genres.</p>
                            <a href="#" class="btn btn-primary">Watch Videos</a>
                        </div>
                    </div>
                </div>

</div>
        </div>

</div>

<div class="footer">
        <p>&copy; 2024 MyMagazine. All rights reserved.</p>
    </div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

$('.read-more').on('click', function(event) {
                event.preventDefault(); // Prevent default anchor behavior

const title = $(this).data('title');
                const description = $(this).data('description');
                const image = $(this).data('image');
                const url = $(this).data('url');
                const date = $(this).data('date');
                console.log(date);

// Populate modal with data
                $('#newsModalLabel').text(title);
                $('#modal-description').text(description);
                $('#modal-image').attr('src', image);
                $('#modal-url').attr('href', url);
                $('#modal-date').text(date);

// Show the modal
                newsModal.show();
            });
        });
    </script>

$('#dataModal').attr('data-id', feed_id);
                $('#dataModal').attr('data-title', title);
                $('#newsModalLabel').text(title);
                $('#modal-description').text(description);
                $('#modal-image').attr('src', image);
                $('#modal-date').text(date);
                $('#modal-url').attr('href', url);

// loadLike(feed_id, userId);
                // likeCount(feed_id, userId);
                checkCollection(feed_id, userId)

var modal = new bootstrap.Modal($('#newsModal')[0]);

modal.show();
            });

$('.likeButton').on('click', function() {
                var feed_id = $('#dataModal').attr('data-id');
                toggleLike(feed_id, userId);
            });

$('.copyButton').on('click', function() {
                var feed_url = $('#modal-url').attr('href');
                // var feed_url = $('.news-item').data('url');
                copyToClipboard(feed_url); // Call the correct function with the correct variable
            });

$('#bookmarkIcon').on('click', function() {
                var feed_id = $('#dataModal').attr('data-id'); // Ensure this targets the correct item
                console.log(feed_id);

// Check the current state of the icon
                if ($(this).hasClass('far fa-bookmark')) {
                    addToCollection(feed_id, userId);
                } else {
                    removeFromCollection(feed_id, userId);
                }
            });

});

function likeCount(feedId, userId) {
            $.ajax({
                url: 'inc/handler.php',
                type: 'POST',
                contentType: 'application/json', // Specify that you're sending JSON
                data: JSON.stringify({
                    request: 'likeCount',
                    userId: userId,
                    feedId: feedId
                }),
                success: function(response) {
                    if (response.status === "success") {
                        console.log("Response:", response); // Access 'response' instead of 'data'
                        $('.likeButton #likeCount').html(response.count || ''); // Change to solid thumbs up

} else {
                        console.error("Error message:", response.message);
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.error("Error:", textStatus, errorThrown);
                }
            });
        }

function toggleLike(feedId, userId) {
            var thumbsUpIcon = $('.likeButton #thumbsUp');
            var isLiked = thumbsUpIcon.hasClass('fa-solid');

// Determine the request type based on the current like status
            var requestType = isLiked ? 'unlike' : 'like';

// Make the AJAX call to like/unlike the post
            $.ajax({
                url: 'inc/handler.php',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    request: requestType,
                    userId: userId,
                    feedId: feedId
                }),
                success: function(response) {
                    if (response.status === "success") {
                        // Toggle the icon based on the like status
                        if (requestType === 'like') {
                            thumbsUpIcon.removeClass('fa-regular').addClass('fa-solid');
                        } else {
                            thumbsUpIcon.removeClass('fa-solid').addClass('fa-regular');
                        }
                        likeCount(feedId, userId);
                    } else {
                        console.error("Error message:", response.message);
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.error("Error:", textStatus, errorThrown);
                }
            });
        }
    </script>

navigator.clipboard.writeText(feedUrl).then(function() {
                alert('Feed URL copied to clipboard: ' + feedUrl);
            }).catch(function(error) {
                console.error('Error copying text: ', error);
            });
        }
    </script>

$(document).ready(function() {

// Play button click handler
            $('.play-button').on('click', function() {
                var title = $('#dataModal').data('title');
                var desc = $('#dataModal').data('description');
                playAudio(title, desc, $(this));
            });

// Function to play audio
            function playAudio(title, desc, button) {
                var audio = new Audio();

if (isPlaying) {
                    console.log("Audio is already playing. Cannot start another instance.");
                    return;
                }

console.log("Starting audio playback...");

isPlaying = true; // Set flag to true to indicate audio playback has started

// Ajax call to get audio file URL
                $.ajax({
                    url: 'texttovoice/processvoice.php',
                    type: 'POST',
                    data: {
                        title: title,
                        description: desc
                    },
                    success: function(response) {
                        audio.src = response;
                        audio.play();

// Update button visibility
                        button.hide();
                        button.siblings('.pause-button').show();
                        button.siblings('.stop-button').show();

// Pause button click handler
                        button.siblings('.pause-button').on('click', function() {
                            audio.pause();
                            $(this).hide();
                            $(this).siblings('.resume-button').show();
                        });

// Resume button click handler
                        button.siblings('.resume-button').on('click', function() {
                            audio.play();
                            $(this).hide();
                            $(this).siblings('.pause-button').show();
                        });

button.siblings('.stop-button').on('click', function() {
                            audio.pause(); // Pause the audio (assuming this stops playback)
                            audio.currentTime = 0; // Reset audio playback to the beginning
                            button.siblings('.resume-button').hide(); // Hide resume button if shown
                            button.siblings('.stop-button').hide();
                            button.siblings('.pause-button').hide();
                            button.show();
                            isPlaying = false;
                        });

// Reset when audio ends
                        audio.onended = function() {
                            isPlaying = false;
                            button.show();
                            button.siblings('.pause-button').hide();
                            button.siblings('.resume-button').hide();
                            button.siblings('.stop-button').hide();
                        };
                    },
                    error: function(xhr, status, error) {
                        console.error("Error playing audio:", error);
                    }
                });
            }
        });

function broadcast(link) {

if (isPlaying) {
                console.log("Audio is already playing. Cannot start another instance.");
                return;
            }

console.log("Starting audio playback...");

isPlaying = true; // Set flag to true to indicate audio playback has started

var braudio = new Audio();
            console.log(link);
            braudio.src = link;
            braudio.play();

$('.broadcast-pause').show();
            $('.broadcast-stop').show();

$('.broadcast-pause').on('click', function() {
                braudio.pause();
                $('.broadcast-pause').hide();
                $('.broadcast-resume').show();
            });

$('.broadcast-resume').on('click', function() {
                braudio.play();
                $('.broadcast-resume').hide();
                $('.broadcast-pause').show();
            });

$('.broadcast-stop').on('click', function() {
                braudio.pause();
                braudio.currentTime = 0;
                $('.broadcast-pause').hide();
                $('.broadcast-resume').hide();
                $('.broadcast-stop').hide();
                isPlaying = false;

});

braudio.onended = function() {
                isPlaying = false;
                $('.broadcast-pause').hide();
                $('.broadcast-resume').hide();
                $('.broadcast-stop').hide();
            };
        }
    </script>

<!-- <script>
        async function toggleLike(feedId, userId) {
            const thumbsUpIcon = document.getElementById(`thumbsUp${feedId}`);
            const likeCountElement = document.getElementById(`likeCount${feedId}`);
            const isLiked = thumbsUpIcon.classList.contains('liked');

const action = isLiked ? 'removeLike' : 'addLike';

const response = await fetch('handler.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: new URLSearchParams({
                    articleId: feedId,
                    userId: userId,
                    action: action
                })
            });

if (response.ok) {
                const data = await response.json();
                console.log("hellowwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww")
                if (data.status === 'success') {
                    thumbsUpIcon.classList.toggle('liked', !isLiked);
                    likeCountElement.textContent = data.newLikeCount; // Update like count
                } else {
                    console.error(data.message);
                }
            } else {
                console.error('Failed to update like status.');
            }
        }
    </script> -->

<!-- <script>
        function addLike(articleId, callback) {
            $.ajax({
                url: 'thumbsUp/handler.php',
                type: 'POST',
                data: {
                    action: 'addLike',
                    articleId: articleId,
                    userId: <?= $gUserId ?>
                },
                success: function(response) {
                    if (response === "Ok") {
                        callback(true);
                    } else {
                        console.log("Failed to add like: " + response);
                        callback(false);
                    }
                },
                error: function(xhr, status, error) {
                    console.error('AJAX request failed: ' + error);
                    callback(false);
                }
            });
        }

$(document).ready(function() {
            // Select all elements with the class 'likeButtonContainer'
            $('.likeButtonContainer').each(function() {
                var likeCount = parseInt($(this).find('#likeCount').html(), 10);
                if (likeCount === 0) {
                    $(this).find('#likeCount').html('');
                }
            });
        });

$(document).on('click', '.likeButton', function() {
            // Preserve the original context
            var article_data = $(this).closest(".panelFeed").find('#attr-article');

var $this = $(this);
            var likeStatus = $this.find('#thumbsUp');
            // var articleId = $this.parents().eq(1).attr('class').data('article');
            var articleId = article_data.data('article_id');
            var likeCountHtml = $this.find('#likeCount').html();
            var likeCount = likeCountHtml == '' ? 0 : parseInt(likeCountHtml, 10);
            console.log("count before: " + likeCount);

if (likeStatus.hasClass("fa-solid fa-thumbs-up") && (likeCount > 0)) {
                removeLike(articleId, function(success) {
                    if (success) {
                        likeStatus.removeClass("fa-solid fa-thumbs-up").addClass("fa-regular fa-thumbs-up");
                        likeCount -= 1;
                        if (likeCount === 0) {
                            likeCount = '';
                        }
                        $this.find('#likeCount').html(likeCount);
                    }
                });
            } else if (likeStatus.hasClass("fa-regular fa-thumbs-up")) {
                addLike(articleId, function(success) {
                    if (success) {
                        likeStatus.removeClass("fa-regular fa-thumbs-up").addClass("fa-solid fa-thumbs-up");
                        likeCount += 1;
                        $this.find('#likeCount').html(likeCount);
                        console.log("count: " + likeCount);
                    }
                });
            }
        });
    </script> -->

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

</body>

</html>