OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	06/17/2025 10:17:24 AM	rwxrwxr-x
📁 assets	-	11/09/2024 12:47:39 PM	rwxrwxr-x
📄 dashboard.php	35.33 KB	05/19/2025 10:07:15 AM	rw-rw-r--
📄 navbar.php	4.77 KB	05/19/2025 10:07:15 AM	rw-rw-r--

Editing: dashboard.php

<?php
session_start();

?>
<!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;
      margin-right: 1rem;
      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;
      color: white;
    }

.modal-body {
      padding: 20px;
    }

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

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

}

/* 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">ಪತ್ರಿಕೆಗಳು </h2>
      <div class="scroll-row">
        
        <div class="card item-card">
          <img src="assets/img/VK.png" class="card-img-top" alt="TOI Logo">
          <div class="card-body">
            
            <a href="timeofindia.php" class="btn btn-primary">Read</a>
          </div>
        </div>
        <div class="card item-card">
          <img src="assets/img/pv.png" class="card-img-top" alt="Deccan Herald Logo">
          <div class="card-body">
            
            <a href="bbc.php" class="btn btn-primary">Read</a>
          </div>
        </div>
        <div class="card item-card">
          <img src="assets/img/vv.png" class="card-img-top" alt="The Hindu Logo">
          <div class="card-body">
            
            <a href="thehindu.php" class="btn btn-primary">Read</a>
          </div>
        </div>
        <div class="card item-card">
          <img src="assets/img/kp.png" class="card-img-top" alt="WSJ Logo">
          <div class="card-body">
            
            <a href="wsj.php" class="btn btn-primary">Read</a>
          </div>
        </div>
        <div class="card item-card">
          <img src="assets/img/uv.png" class="card-img-top" alt="Financial Times Logo" style="background-color: #fff;">
          <div class="card-body">
            
            <a href="financial_time.php" class="btn btn-primary">Read</a>
          </div>
        </div>
        <div class="card item-card">
          <img src="assets/img/vb.png" class="card-img-top" alt="Economist Logo"
            style="background-color: white;">
          <div class="card-body">
            
            <a href="theEconomist.php" class="btn btn-primary">Read</a>
          </div>
        </div>
        <div class="card item-card">
          <img src="assets/img/kv.png" class="card-img-top" alt="The Telegraph Logo">
          <div class="card-body">
            
            <a href="telegraphnew.php" class="btn btn-primary">Read</a>
          </div>
        </div>
        <div class="card item-card">
          <img src="assets/img/uk.png" class="card-img-top" alt="Business Standard Logo">
          <div class="card-body">
            
            <a href="Business_Standard.php" class="btn btn-primary">Read</a>
          </div>
        </div>
         
      </div>
    </div>

<div class="category">
      <h2 class="category-title"> ವಾಹಿನಿಗಳು</h2>
      <div class="scroll-row">
        
        <div class="card item-card">
          <img src="assets/img/tv9.png" class="card-img-top" alt="TOI Logo">
          <div class="card-body">
            
            <a href="timeofindia.php" class="btn btn-primary">Read</a>
          </div>
        </div>
        <div class="card item-card">
          <img src="assets/img/p_tv.png" class="card-img-top" alt="Deccan Herald Logo">
          <div class="card-body">
            
            <a href="bbc.php" class="btn btn-primary">Read</a>
          </div>
        </div>
        <div class="card item-card">
          <img src="assets/img/s.png" class="card-img-top" alt="The Hindu Logo">
          <div class="card-body">
            
            <a href="thehindu.php" class="btn btn-primary">Read</a>
          </div>
        </div>
        <div class="card item-card">
          <img src="assets/img/rk.png" class="card-img-top" alt="WSJ Logo">
          <div class="card-body">
            
            <a href="wsj.php" class="btn btn-primary">Read</a>
          </div>
        </div>
        <div class="card item-card">
          <img src="assets/img/tv_k.png" class="card-img-top" alt="Financial Times Logo" style="background-color: #fff;">
          <div class="card-body">
            
            <a href="financial_time.php" class="btn btn-primary">Read</a>
          </div>
        </div>
        <div class="card item-card">
          <img src="assets/img/nk.png" class="card-img-top" alt="Economist Logo"
            style="background-color: white;">
          <div class="card-body">
            
            <a href="theEconomist.php" class="btn btn-primary">Read</a>
          </div>
        </div>
        <div class="card item-card">
          <img src="assets/img/kn.png" class="card-img-top" alt="The Telegraph Logo">
          <div class="card-body">
            
            <a href="telegraphnew.php" class="btn btn-primary">Read</a>
          </div>
        </div>
        
      </div>
    </div>

<div class="category">
      <h2 class="category-title">ವಿಶೇಷ ಸಂಗತಿಗಳು</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="sportnews.php" 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="technology.php" 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="real_state.php" 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="education_learning.php" 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">Treading</h5>
            <a href="treading.php" 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="entertainment.php" 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="cultural_event.php" 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="political_development.php" 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="health_wellness.php" 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="environmental_issus.php" class="btn btn-primary">Read</a>
          </div>
        </div>

</div>
    </div>

<div class="category">
      <h2 class="category-title"> ಆಯ್ದ ಪ್ರಕಟಣೆಗಳು</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="sportnews.php" 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="technology.php" 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="real_state.php" 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="education_learning.php" 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">Treading</h5>
            <a href="treading.php" 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="entertainment.php" 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="cultural_event.php" 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="political_development.php" 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="health_wellness.php" 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="environmental_issus.php" class="btn btn-primary">Read</a>
          </div>
        </div>

</div>
    </div>

<div class="category">
      <h2 class="category-title"> ಅಂಕಣಕಾರರ ಅಂಕ</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>

<div class="category">
      <h2 class="category-title">ನನ್ನ ಅಂಕಣ</h2>
      <div class="scroll-row">
        
        <div class="card item-card">
          <img src="https://via.placeholder.com/200x120?text=My+Feed+1" class="card-img-top" alt="My Feed 1">
          <div class="card-body">
            <h5 class="card-title">My Feed 1</h5>
            <a href="#" class="btn btn-primary">View</a>
          </div>
        </div>
        <div class="card item-card">
          <img src="https://via.placeholder.com/200x120?text=My+Feed+2" class="card-img-top" alt="My Feed 2">
          <div class="card-body">
            <h5 class="card-title">My Feed 2</h5>
            <a href="#" class="btn btn-primary">View</a>
          </div>
        </div>
        <div class="card item-card">
          <img src="https://via.placeholder.com/200x120?text=My+Feed+3" class="card-img-top" alt="My Feed 3">
          <div class="card-body">
            <h5 class="card-title">My Feed 3</h5>
            <a href="#" class="btn btn-primary">View</a>
          </div>
        </div>
        <div class="card item-card">
          <img src="https://via.placeholder.com/200x120?text=My+Feed+4" class="card-img-top" alt="My Feed 4">
          <div class="card-body">
            <h5 class="card-title">My Feed 4</h5>
            <a href="#" class="btn btn-primary">View</a>
          </div>
        </div>
        <div class="card item-card">
          <img src="https://via.placeholder.com/200x120?text=My+Feed+5" class="card-img-top" alt="My Feed 5">
          <div class="card-body">
            <h5 class="card-title">My Feed 5</h5>
            <a href="#" class="btn btn-primary">View</a>
          </div>
        </div>
        <div class="card item-card">
          <img src="https://via.placeholder.com/200x120?text=My+Feed+6" class="card-img-top" alt="My Feed 6">
          <div class="card-body">
            <h5 class="card-title">My Feed 6</h5>
            <a href="#" class="btn btn-primary">View</a>
          </div>
        </div>
        <div class="card item-card">
          <img src="https://via.placeholder.com/200x120?text=My+Feed+7" class="card-img-top" alt="My Feed 7">
          <div class="card-body">
            <h5 class="card-title">My Feed 7</h5>
            <a href="#" class="btn btn-primary">View</a>
          </div>
        </div>
        <div class="card item-card">
          <img src="https://via.placeholder.com/200x120?text=My+Feed+8" class="card-img-top" alt="My Feed 8">
          <div class="card-body">
            <h5 class="card-title">My Feed 8</h5>
            <a href="#" class="btn btn-primary">View</a>
          </div>
        </div>
        <div class="card item-card">
          <img src="https://via.placeholder.com/200x120?text=My+Feed+9" class="card-img-top" alt="My Feed 9">
          <div class="card-body">
            <h5 class="card-title">My Feed 9</h5>
            <a href="#" class="btn btn-primary">View</a>
          </div>
        </div>
        <div class="card item-card">
          <img src="https://via.placeholder.com/200x120?text=My+Feed+10" class="card-img-top" alt="My Feed 10">
          <div class="card-body">
            <h5 class="card-title">My Feed 10</h5>
            <a href="#" class="btn btn-primary">View</a>
          </div>
        </div>
        
      </div>
    </div>

<div class="category">
      <h2 class="category-title">ಅಯ್ದ ಪತ್ರಿಕೆಗಳು</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>

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

readMoreButtons.forEach(button => {
        button.addEventListener('click', function(event) {
          event.preventDefault(); // Prevent default anchor behavior

const title = button.getAttribute('data-title');
          const description = button.getAttribute('data-description');
          const image = button.getAttribute('data-image');
          const url = button.getAttribute('data-url');

// Populate modal with data
          document.getElementById('newsModalLabel').innerText = title;
          document.getElementById('modal-description').innerText = description;
          document.getElementById('modal-image').src = image;
          document.getElementById('modal-url').href = url;

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

</body>

</html>