Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 5.14.0-611.41.1.el9_7.x86_64

PHP Version:

8.3.30

User:

u838833262

Directory:

/home/u838833262/domains/fsmc.co.in/public_html

Free Space:

10.04 TB

🔧 Quick Actions

✏️ Editing: annual-reports.php

<?php
$servername = "localhost";
$username = "root";
$password = "";   
$dbname = "fsmc";
$conn = new mysqli($servername, $username, $password, $dbname);
$result = $conn->query("SELECT * FROM annual_reports ORDER BY year DESC");
$reports = [];
if ($result && $result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $reports[] = $row;
    }
}
$years = array_unique(array_column($reports, 'year'));
rsort($years);
?>
<!DOCTYPE html>
<html lang="zxx">

<link rel="stylesheet" href="assets/css/bootstrap.min.css">
  
  <link rel="stylesheet" href="assets/css/owl.theme.default.min.css">
  
  <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
  
  <link rel="stylesheet" href="assets/css/animate.min.css">
  
  <link rel="stylesheet" href="assets/css/boxicons.min.css">
  
  <link rel="stylesheet" href="assets/css/magnific-popup.min.css">
  
  <link rel="stylesheet" href="assets/css/flaticon.css">
  
  <link rel="stylesheet" href="assets/css/meanmenu.min.css">
  
  <link rel="stylesheet" href="assets/css/odometer.min.css">
  
  <link rel="stylesheet" href="assets/css/style.css">
  
  <link rel="stylesheet" href="assets/css/dark.css">
  
  <link rel="stylesheet" href="assets/css/responsive.css">

<link rel="icon" type="image/png" href="assets/img/favicon.png">
  
  <title>FSMC-Enriching Communities</title>
  <style>
    :root {
      --accent: #ff7b2f;
      --accent2: #ffb84d;
      --muted: #6b7280;
      --card: #ffffff;
      --shadow: rgba(0, 0, 0, 0.08);
    }

.resources-wrapper {
      padding: 20px;
      max-width: 1200px;
      margin: auto;
    }

.header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 25px;
    }

.kicker {

color: #ff7b2f;
      border-radius: 50px;
      font-weight: 700;
      font-size: 13px;
    }

.title {
      margin: 6px 0 0;
      font-size: 32px;
      color: #0d2540;
    }

.subtitle {
      margin: 4px 0 0;
      color: var(--muted);
    }

.hero {
      display: flex;
      gap: 28px;
      padding: 28px;
      background: #019ad33d;
      border-radius: 16px;
      box-shadow: 0 10px 30px var(--shadow);
      margin-bottom: 25px;
    }

.hero-left {
      flex: 1;
    }

.hero-right img {
        width: 40%;
    border-radius: 10px;
    }

.hero-title {
      font-size: 28px;
      margin-bottom: 6px;
      color: #0d2540;
    }

.hero-desc {
      margin: 0;
      color: var(--muted);
    }

.controls {
      display: flex;
      gap: 12px;
      margin-top: 15px;
      flex-wrap: wrap;
    }

.select,
    .search {
      padding: 10px 12px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      font-size: 14px;
    }

.grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 20px;
    }

.card {
      background: var(--card);
      padding: 20px;
      border-radius: 14px;
      box-shadow: 0 6px 20px var(--shadow);
      display: flex;
      flex-direction: column;
      gap: 12px;
      transition: transform .2s;
      border: 1px solid #FF7A00;
    }

.card:hover {
      transform: translateY(-4px);
    }

.meta {
      display: flex;
      justify-content: space-between;
      color: var(--muted);
      font-size: 13px;
    }

.card h3 {
      margin: 0;
    }

.card p {
      margin: 0;
      color: #374151;
    }

.actions {
      margin-top: auto;
      display: flex;
      gap: 10px;
    }

.btn {
      padding: 10px 14px;
      border-radius: 8px;
      border: 0;
      cursor: pointer;
      font-weight: 600;
    }

.btn-download {
      background: linear-gradient(90deg, #FF7A00, #FF7A00);
      color: #fff;
    }

.btn-preview {
      background: #009ad6;
      color: #ffffff;
    }

/* MODAL */
    .modal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.7);
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }

.modal-box {
      width: 90%;
      max-width: 1100px;
      height: 85%;
      background: #fff;
      border-radius: 12px;
      position: relative;
      overflow: hidden;
    }

.close-btn {
      position: absolute;
      right: 15px;
      top: 15px;
      background: #111;
      color: #fff;
      padding: 8px 12px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
    }

iframe {
      width: 100%;
      height: 100%;
      border: none;
    }

@media(max-width:760px) {
      .hero {
        flex-direction: column;
      }

.hero-right img {
        width: 100%;
      }
    }
  </style>
</head>

<body>

<header class="header-area">

<div class="navbar-area">
      <div class="mobile-nav">
        <div class="container">
          <div class="mobile-menu">
            <div class="logo">
              <a href="index.php">
                <img src="assets/img/logo.png" alt="logo">
              </a>
            </div>
          </div>
        </div>
      </div>

<div class="collapse navbar-collapse mean-menu">
              <ul class="navbar-nav m-auto">
                <li class="nav-item">
                  <a href="index.php" class="nav-link ">
                    Home
                  </a>
                </li>
                <li class="nav-item">
                  <a href="about-us.php" class="nav-link ">
                    About Us
                  </a>
                </li>
                <li class="nav-item">
                  <a href="#" class="nav-link">
                    Our Services
                    <i class="bx bx-chevron-down"></i>
                  </a>

<ul class="dropdown-menu">
                    <li class="nav-item">
                      <a href="faecal-sludge-&-septage-management.html" class="nav-link"> Faecal Sludge & Septage
                        Management (FSM)</a>
                    </li>
                    <li class="nav-item">
                      <a href="waste-to-resource-systems.html" class="nav-link">Waste-to-Resource Systems</a>
                    </li>
                    <li class="nav-item">
                      <a href="water-&-wastewater-management.html" class="nav-link"> Water & Wastewater Management</a>
                    </li>
                    <li class="nav-item">
                      <a href="community-sanitation-&-wash.html" class="nav-link"> Community Sanitation & WASH</a>
                    </li>
                    <li class="nav-item">
                      <a href="climate-resilience-&-municipal.html" class="nav-link">Climate Resilience & Municipal
                        Support</a>
                    </li>

</ul>
                </li>

<li class="nav-item">
                  <a href="#" class="nav-link active">
                    Resources
                    <i class="bx bx-chevron-down"></i>
                  </a>

<ul class="dropdown-menu ">
                    <li class="nav-item">
                      <a href="annual-reports.php" class="nav-link"> Annual Reports</a>
                    </li>
                    <li class="nav-item">
                      <a href="newsletters.php" class="nav-link">Newsletters</a>
                    </li>
                    <li class="nav-item">
                      <a href="blog.php" class="nav-link"> Blog</a>
                    </li>
                    <li class="nav-item">
                      <a href="publications.php" class="nav-link"> Publications</a>
                    </li>
                    <li class="nav-item">
                      <a href="impact-stories.php" class="nav-link">Impact Stories</a>
                    </li>
                    <li class="nav-item">
                      <a href="media.php" class="nav-link">Media </a>
                    </li>

</ul>
                </li>

<li class="nav-item">
                  <a href="#" class="nav-link">
                    Get Involved
                    <i class="bx bx-chevron-down"></i>
                  </a>

<ul class="dropdown-menu">
                    <li class="nav-item">
                      <a href="partner-with-us.php" class="nav-link">Partner With Us </a>
                    </li>
                    <li class="nav-item">
                      <a href="volunteer-with-us.php" class="nav-link">Volunteer With Us </a>
                    </li>
                    <li class="nav-item">
                      <a href="work-with-us.php" class="nav-link">Work With Us </a>
                    </li>
                  </ul>
                </li>

<li class="nav-item">
                  <a href="contact-us.php" class="nav-link"> Contact Us</a>
                </li>
              </ul>

<div class="others-option wow animate__animated animate__fadeInRight">
                <div class="get-quote">
                 <a href="admin/login.php" class="default-btn">
                    <span>Admin Login</span>
 </a>
                </div>
              </div>
            </div>
          </nav>
        </div>
      </div>

</div>
    
  </header>
  
  
  <div class="page-title-wave">
    <div class="container">
      <h2 class="wow animate__animated animate__fadeInLeft">Annual Reports</h2>
      <p class="inde wow animate__animated animate__fadeInRight">Home › Reports</p>
    </div>

<div class="header">
      <div class="">
        <div class="kicker wow animate__animated animate__fadeInLeft">Resources</div>
        <h2 class="title wow animate__animated animate__fadeInUp">Annual Reports</h2>
        <p class="subtitle wow animate__animated animate__fadeInDown">Transparent governance & impact — download reports
        </p>
      </div>

<div class="count-area wow animate__animated animate__fadeInRight">
        <small>Showing: <strong id="count">9</strong> reports</small>
      </div>
    </div>

<div class="hero">
      <div class="hero-left">
        <h1 class="hero-title wow animate__animated animate__fadeInUp">Annual Reports Archive</h1>
        <p class="hero-desc wow animate__animated animate__fadeInDown">Browse yearly financial & programmatic reports —
          download PDFs or preview online.</p>

<div class="controls wow animate__animated animate__fadeInLeft">
          <select id="filterYear" class="select" aria-label="Filter Year">
            <option value="all">All years</option>
            <?php foreach ($years as $year): ?>
              <option value="<?= htmlspecialchars($year) ?>"><?= htmlspecialchars($year) ?></option>
            <?php endforeach; ?>
          </select>

<div id="reportsGrid" class="grid">
      <?php if (count($reports) > 0): ?>
        <?php foreach ($reports as $row): ?>
          <div class="card wow animate__animated animate__fadeInRight" data-year="<?= htmlspecialchars($row['year']) ?>">
            <div class="meta"><span>Annual Report</span><span><?= htmlspecialchars($row['year']) ?></span></div>
            <h3><?= htmlspecialchars($row['title']) ?></h3>
            <p>Download or preview the annual report for <?= htmlspecialchars($row['year']) ?>.</p>

<div class="actions">
              <a class="btn btn-download" href="<?= htmlspecialchars($row['file_path']) ?>" target="_blank">Download PDF</a>
              <button class="btn btn-preview"
                onclick="previewPDF('<?= htmlspecialchars($row['file_path']) ?>')">Preview</button>
            </div>
          </div>
        <?php endforeach; ?>
      <?php else: ?>
        <p>No reports found.</p>
      <?php endif; ?>
    </div>

<div id="pdfModal" class="modal">
      <div class="modal-box">
        <button class="close-btn" onclick="closePDF()">Close</button>
        <iframe id="pdfFrame" src=""></iframe>
      </div>
    </div>

</div>

<section class="newsletter-unique">
    <div class="container">
      <div class="newsletter-box">
        <div class="row align-items-center">

<div class="col-lg-7">
            <h2>Stay Updated with FSMC</h2>
            <p>
              Subscribe to our newsletter and receive updates on sanitation,
              sustainability initiatives, and impact stories from across India.
            </p>
          </div>

<div class="col-lg-5">
            <form class="newsletter-form">
              <input type="email" class="newsletter-input" placeholder="Enter your email address" required>
              <button type="submit" class="newsletter-btn">
                Subscribe
              </button>
            </form>
          </div>

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

<footer class="footer-area bg-color pt-100 pb-70">
    <div class="container">
      <div class="row justify-content-center">

<div class="col-lg-4 col-sm-6">
          <div class="footer-widget">

<div class="footer-logo mb-3 ">
              <img src="assets/img/logo.png" alt="Logo" style="max-width:160px;">
            </div>

<p>
              FSMC Pvt. Ltd. is a social enterprise operating at the intersection of sanitation, environmental
              sustainability, and climate resilience across India.
            </p>

</div>
        </div>

<div class="col-lg-4 col-sm-6">
          <div class="footer-widget ">
            <h3>Address</h3>

<li class="location">
                <i class="bx bxs-building"></i>
                <strong>HEAD OFFICE:</strong><br>
                Flat No. - 05/06, A1 Block, HiTech Plaza,
                Sundarpada, Bhubaneshwar,
                Odisha - 751002.
              </li>

</ul>

</div>
        </div>

<div class="col-lg-2 col-sm-6">
          <div class="footer-widget ">
            <h3>Contact</h3>

</li>

<li>
                <i class="bx bxs-phone-call"></i>
                <a href="tel:+916200479520">+91 6200479520</a>
              </li>
            </ul>
          </div>
        </div>
        
        <div class="col-lg-2 col-sm-6">
          <div class="footer-widget">
            <h3>Social Media </h3>

</div>
    </div>
  </footer>

<div class="copyright-area py-3">
    <div class="container">
      <div class="d-flex flex-column flex-md-row justify-content-between align-items-center">

<div class="copyright-text mb-2 mb-md-0">
          <p class="m-0">
            © <span>FSMC Enriching Communities</span> | All Rights Reserved
          </p>
        </div>

<div class="powered-by">
          <p class="m-0">
            Developed by
            <a href="https://marvsoftwares.com/" target="_blank">
              Marv Softwares India Private Limited.
            </a>
          </p>
        </div>

</div>

</div>
  </div>

<div class="go-top">
    <i class="bx bx-chevrons-up"></i>
    <i class="bx bx-chevrons-up"></i>
  </div>

<script data-cfasync="false" src="../../cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
  <script src="assets/js/jquery.min.js"></script>
  
  <script src="assets/js/bootstrap.bundle.min.js"></script>
  
  <script src="assets/js/meanmenu.min.js"></script>
  
  <script src="assets/js/wow.min.js"></script>
  
  <script src="assets/js/owl.carousel.min.js"></script>

<script src="assets/js/magnific-popup.min.js"></script>
  
  <script src="assets/js/jarallax.min.js"></script>
  
  <script src="assets/js/appear.min.js"></script>
  
  <script src="assets/js/odometer.min.js"></script>
  
  <script src="assets/js/smoothscroll.min.js"></script>
  
  <script src="assets/js/form-validator.min.js"></script>
  
  <script src="assets/js/contact-form-script.js"></script>
  
  <script src="assets/js/ajaxchimp.min.js"></script>
  
  <script src="assets/js/custom.js"></script>
  <script>
    const filter = document.getElementById("filterYear");
    const search = document.getElementById("searchReports");
    const grid = document.getElementById("reportsGrid");
    const count = document.getElementById("count");

function updateGrid() {
      const y = filter.value;
      const q = search.value.toLowerCase();

const cards = grid.querySelectorAll(".card");
      let shown = 0;

cards.forEach(card => {
        const title = card.querySelector("h3").innerText.toLowerCase();
        const desc = card.querySelector("p").innerText.toLowerCase();
        const year = card.dataset.year;

const matchYear = (y === "all") || (year === y);
        const matchQuery = !q || title.includes(q) || desc.includes(q);

if (matchYear && matchQuery) {
          card.style.display = "flex";
          shown++;
        } else {
          card.style.display = "none";
        }
      });

count.innerText = shown;
    }
    filter.onchange = updateGrid;
    search.oninput = updateGrid;
    updateGrid();

/* PDF Preview Modal */
    function previewPDF(url) {
      document.getElementById("pdfFrame").src = url;
      document.getElementById("pdfModal").style.display = "flex";
    }
    function closePDF() {
      document.getElementById("pdfFrame").src = "";
      document.getElementById("pdfModal").style.display = "none";
    }
  </script>

</body>

</html>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: annual-reports.php

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation