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: impact-stories.php

<!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: #f57c00;
      --muted: #556;
      --bg: #fff
    }

.hero-mag-card {
      text-align: center;
    }

.hero-img {
      width: 44%;
      min-height: 260px;
      background: url('/assets/images/impact-hero.jpg') center/cover;
      border-radius: 10px;
      box-shadow: 0 12px 36px rgba(11, 23, 35, 0.06)
    }

.hero-content {
      width: 56%
    }

.hero-content h1 {
      margin: 0;
      font-size: 34px
    }

.quote {
      font-size: 20px;
      font-weight: 600;
      color: #0d2540;
      margin-top: 12px
    }

.stories {
      max-width: 1100px;
      margin: 36px auto;
      padding: 0 18px
    }

.story {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 18px;
      margin-bottom: 28px;
      align-items: center
    }

.story-img {
      height: 180px;
      border-radius: 8px;
      background-size: cover;
      background-position: center
    }

.story-body h3 {
      margin: 0 0 6px
    }

.story-body p {
      margin: 0;
      color: var(--muted);
      line-height: 1.6
    }

.cta {
      display: flex;
      gap: 12px;
      margin-top: 10px
    }

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

.btn-read {
      background: linear-gradient(90deg, var(--accent), #ffb84d);
      color: #fff
    }

@media(max-width:900) {
      .hero {
        flex-direction: column
      }

.hero-img,
      .hero-content {
        width: 100%
      }

.story {
        grid-template-columns: 1fr
      }
    }
  </style>
  <style>
    /* STORIES LAYOUT (your same design stays) */
    .stories {
      display: grid;
      gap: 0px;
      margin-top: 40px;
    }

.story {
      display: flex;
      gap: 20px;
      background: #fff;
      border-radius: 12px;
      overflow: hidden;
      padding: 18px;
      border: 1px solid #e5e7eb;
    }

.story-img {
      width: 220px;
      height: 160px;
      background-size: cover;
      background-position: center;
      border-radius: 10px;
      flex-shrink: 0;
    }

.story-body h3 {
      margin: 0 0 8px;
      color: #0b2540;
    }

.story-body p {
      color: #475569;
    }

.cta {
      margin-top: 14px;
      display: flex;
      gap: 10px;
    }

.btn {
      padding: 8px 16px;
      border-radius: 6px;
      background: #0b2540;
      color: #fff;
      text-decoration: none;
      font-size: 14px;
      cursor: pointer;
    }

.btn-read {
      background: #FF7A00;
    }

/* POPUP BACKDROP */
    .popup {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.65);
      backdrop-filter: blur(6px);
      justify-content: center;
      align-items: center;
      z-index: 999999;
      animation: popupFade 0.3s ease;
    }

/* BACKDROP ANIMATION */
    @keyframes popupFade {
      0% {
        opacity: 0;
      }

100% {
        opacity: 1;
      }
    }

/* POPUP BOX */
    .popup-content {
      width: 92%;
      max-width: 850px;
      background: #ffffff;
      border-radius: 18px;
      padding: 28px 32px;
      position: relative;
      max-height: 90vh;
      overflow-y: auto;

/* 3D depth */
      box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);

/* pop animation */
      animation: popupIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

/* POPUP CARD ANIMATION */
    @keyframes popupIn {
      0% {
        opacity: 0;
        transform: translateY(35px) scale(0.95);
      }

100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

/* PREMIUM CLOSE BUTTON */
    .close {
      position: absolute;
      right: 18px;
      top: 14px;
      font-size: 30px;
      font-weight: 300;
      cursor: pointer;
      color: #0f172a;
      transition: 0.2s ease;
      padding: 3px 10px;
      border-radius: 8px;
    }

.close:hover {
      background: #f1f5f9;
      transform: rotate(90deg);
    }

/* POPUP CONTENT STYLING */
    #popupData h2 {
      color: #0b2540;
      margin-bottom: 12px;
      font-size: 26px;
      font-weight: 700;
    }

#popupData p {
      font-size: 16px;
      line-height: 1.65;
      color: #475569;
      margin-bottom: 10px;
    }

/* GALLERY GRID STYLE */
    .photo-grid {
      display: grid;
      gap: 18px;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

.photo-grid img {
      width: 100%;
      border-radius: 12px;
      box-shadow: 0 5px 18px rgba(0, 0, 0, 0.12);
      transition: transform .2s;
    }

.photo-grid img:hover {
      transform: scale(1.03);
    }

/* MOBILE FIX */
    @media (max-width: 600px) {
      .popup-content {
        padding: 20px;
        border-radius: 14px;
      }

#popupData h2 {
        font-size: 22px;
      }
    }

/* MOBILE FIX */
    @media(max-width:768px) {
      .story {
        flex-direction: column;
      }

.story-img {
        width: 100%;
        height: 220px;
      }
    }
  </style>
</head>

<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">Impact Stories</h2>
      <p class="inde wow animate__animated animate__fadeInRight">Home › Stories</p>
    </div>

<section class="hero-magazine">
    <div class="container">
      <div class="hero-mag-card pb-4">
        <h1 class="wow animate__animated animate__fadeInRight">Impact Stories</h1>
        <h4 class="mini-title wow animate__animated animate__fadeInLeft">Transforming Communities Through Sanitation
        </h4>

<p class="wow animate__animated animate__fadeInUp">
          Powerful journeys of households, workers and community members who experienced <br> life-changing benefits
          through FSMC interventions.
        </p>
      </div>
    </div>
  </section>

<div class="stories" id="impactStoriesList">

<?php
    include 'admin/config.php';
    $res_stories = $conn->query("SELECT * FROM impact_stories ORDER BY created_at DESC");
    $storyJSData = [];

if ($res_stories->num_rows > 0) {
      while ($story = $res_stories->fetch_assoc()) {
        $storyId = $story['id'];

// Fetch photos for this story
        $res_photos = $conn->query("SELECT image_path FROM impact_story_photos WHERE story_id = $storyId");
        $photosHtml = "<h2>" . htmlspecialchars($story['title']) . " - Photo Gallery</h2><div class='photo-grid'>";
        $hasPhotos = false;
        while ($photo = $res_photos->fetch_assoc()) {
          $photosHtml .= "<img src='" . htmlspecialchars($photo['image_path']) . "'>";
          $hasPhotos = true;
        }
        $photosHtml .= "</div>";
        if (!$hasPhotos) {
          $photosHtml = "<h2>" . htmlspecialchars($story['title']) . "</h2><p>No photos available for this story.</p>";
        }

// Build JS data
        $storyJSData["story" . $storyId] = [
          'story' => "<h2>" . htmlspecialchars($story['title']) . "</h2><p>" . nl2br(htmlspecialchars($story['description'])) . "</p>",
          'photos' => $photosHtml
        ];
        ?>
        
        <div class="story">
          <div class="story-img wow animate__animated animate__fadeInLeft"
            style="background-image:url('<?= htmlspecialchars($story['image_path']) ?>')"></div>
          <div class="story-body wow animate__animated animate__fadeInRight">
            <h3><?= htmlspecialchars($story['title']) ?></h3>
            <p><?= mb_strimwidth(htmlspecialchars($story['description']), 0, 150, "...") ?></p>
            <div class="cta">
              <a class="btn btn-read" onclick="openPopup('story<?= $storyId ?>','story')">Read Full Story</a>
              <a class="btn" style="background:#019ad3;color:#ffffff"
                onclick="openPopup('story<?= $storyId ?>','photos')">View Photos</a>
            </div>
          </div>
        </div>
        <?php
      }
    } else {
      echo "<div class='text-center py-5'><p>No impact stories found.</p></div>";
    }
    ?>

</div>

<div id="popup" class="popup">
    <div class="popup-content">
      <span class="close" onclick="closePopup()">&times;</span>
      <div id="popupData"></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>

/* ================= POPUP FUNCTIONS ================= */
    function openPopup(id, type) {
      document.getElementById("popup").style.display = "flex";
      document.getElementById("popupData").innerHTML = storyData[id][type];
    }

function closePopup() {
      document.getElementById("popup").style.display = "none";
    }
  </script>

</body>

</html>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: impact-stories.php

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation