Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 5.14.0-503.34.1.el9_5.x86_64

PHP Version:

8.3.30

User:

u231988116

Directory:

/home/u231988116/domains/ominteriorstudio.in/public_html

Free Space:

7.42 TB

🔧 Quick Actions

✏️ Editing: index3 - Copy.php

<?php
	include 'ominterior_db.php';
    // Fetch the slider images.
    $slider_image = "SELECT id, slider_name, slider_images FROM slider_images";
    $result = $conn->query($slider_image );

// Fetch the Menu Option.
    $menu = "SELECT name, link FROM menu ORDER BY id ASC";
	$menu_result = $conn->query($menu);
?>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>OM Interior</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<style>
		html, body {
			margin: 0;
			padding: 0;
			height: 100%;
			width: 100%;
			overflow-x: hidden;
		}
		.carousel-item {
			height: 100vh;
		}
		.carousel-item img {
			height: 100vh;
			width: 100%;
			object-fit: cover;
		}
		.carousel-indicators {
			position: absolute;
			bottom: 3%;
			transform: translateX(-45%);
			flex-direction: row;
			margin: 0;
		}
		.carousel-indicators [data-bs-target] {
			width: 12px;
			height: 12px;
			border-radius: 50%;
			background-color: #fff;
			opacity: 0.6;
			margin-left: 15px;
		}
		.carousel-indicators .active {
			opacity: 1;
			background-color: #000;
		}

/* Slider count	*/
		.slide-counter {
		    position: absolute;
		    right: 2vw;
		    bottom: 1vh;
		    color: #fff;
		    padding: 6px 12px;
		    border-radius: 20px;
		    font-size: 35px;
		}

.slide-counter .active-count {
		    font-size: 40px;
		    font-weight: bold;
		}

.slide-counter .total-count {
		    font-size: 20px;
		    opacity: 0.8;
		}

.carousel-lines {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			pointer-events: none;
			z-index: 2;
		}
		.carousel-lines .line-left,
		.carousel-lines .line-right {
			position: absolute;
			top: 0;
			width: 1px;
			height: 100%;
			background-color: rgba(255, 255, 255, 0.5);
		}
		.carousel-lines .line-left {
			left: 20%;
		}
		.carousel-lines .line-right {
			right: 20%;
		}
		.carousel-lines .line-top {
			position: absolute;
			top: 15%;
			left: 0;
			width: 100%;
			height: 1px;
			background-color: rgba(255, 255, 255, 0.5);
		}

.logo-fixed {
			position: fixed;
			top: 2vh;
			left: 6.5vw;
			z-index: 1050; /* Above carousel and indicators */
			border-radius: 8px;
			padding: 6px 12px;
		}
		.logo-fixed img {
			object-fit: contain;
		}
		@media (max-width: 576px) {
			.logo-fixed {
				padding: 4px 8px;
			}
			.logo-fixed img {
				height: 24px !important;
			}
		}

.top-right-icons {
			position: fixed;
			top: 25px;
			right: 0px;
			z-index: 1055;
			border-radius: 8px;
			padding: 6px 10px;
			color: rgba(255, 255, 255, 0.20);
		}

.top-right-icons button {
			color: #fff;
			border: none;
			background: transparent;
		}

@media (max-width: 576px) {
			.top-right-icons {
				top: 10px;
				right: 10px;
				padding: 4px 8px;
			}
		}

.slider-text-overlay-fixed {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 10;
			text-align: center;
			pointer-events: none; /* Prevents interaction issues */
		}

.slider-text-overlay-fixed h2 {
			font-size: 6vw;
			font-weight: 600;
			line-height: 1.4;
			width: 100vw;
			margin: 0;
			font-family: "Sofia", Fantasy;
			color: rgba(255, 255, 255, 0.20);
		}

@media (max-width: 768px) {
			.slider-text-overlay-fixed h2 {
				font-size: 1.6rem;
			}
		}

@media (max-width: 576px) {
			.slider-text-overlay-fixed h2 {
				font-size: 1.2rem;
			}
		}

/* Custom Transparent Offcanvas */
		#offcanvasMenu {
			background-color: rgba(0, 0, 0, 0.4); /* Semi-transparent black */
			color: white;
			backdrop-filter: blur(10px); /* Optional: adds blur behind the menu */
			border-left: 1px solid rgba(255, 255, 255, 0.1); /* Optional border for glass look */
			width: 20vw;
		}

/* Offcanvas title styling */
		#offcanvasMenuLabel {
			color: white;
			font-weight: 600;
			font-size: 1.25rem;
		}

/* Remove dark background class if added */
		#offcanvasMenu.text-bg-dark {
			background-color: transparent !important;
		}

/* Nav link hover effect */
		#offcanvasMenu .nav-link:hover {
			color: #f0f0f0;
			text-decoration: underline;
		}

/* Style for close/back icon */
		#offcanvasMenu .offcanvas-header img {
			position: absolute;
			top: 2vh;
			width: 30px;
			transform: translateX(15vw);
			cursor: pointer;
			filter: brightness(0) invert(1); /* makes dark icons white-ish */
		}

/* HamburgerMenu opacity*/
		.icon-opacity-low {
   			 opacity: 0.8;
  		}

/* Social media button*/
  		.social-media-icons {
			position: fixed;
			top: 50vh;
			left: 4.5vw;
			transform: translateY(-50%);
			display: flex;
			flex-direction: column;
			gap: 15px;
			z-index: 1060;
		}

.social-media-icons a {
			color: white;
			font-size: 15px;
			background-color: rgba(255, 255, 255, 0.1);
			padding: 13px;
			border-radius: 50%;
			text-align: center;
			transition: all 0.3s ease;
		}

.social-media-icons a:hover {
			background-color: #fff;
			color: #000;
		}

</style>
</head>
<body>
	
		<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasMenu" aria-labelledby="offcanvasMenuLabel">
			<div class="offcanvas-header">
				<h5 class="offcanvas-title" id="offcanvasMenuLabel">Main Menu</h5>
				<img src="images/icons/Back Arrow.png" data-bs-dismiss="offcanvas" aria-label="Close" >
			</div>
			<div class="offcanvas-body">
				<ul class="nav flex-column">
					<?php if ($menu_result && $menu_result->num_rows > 0): ?>
						<?php while ($row = $menu_result->fetch_assoc()): ?>
							<li class="nav-item">
								<a class="nav-link text-white" href="<?= htmlspecialchars($row['link']) ?>">
									<?= htmlspecialchars($row['name']) ?>
								</a>
							</li>
						<?php endwhile; ?>
					<?php else: ?>
						<li class="nav-item">
							<a class="nav-link text-white" href="#">No menu items found</a>
						</li>
					<?php endif; ?>
				</ul>
			</div>
		</div>

<div class="container-fluid px-0">
	<?php
	if ($result->num_rows > 0):
		while($row = $result->fetch_assoc()):
			$sliderName = $row["slider_name"];
			$images = array_filter(array_map('trim', explode(',', $row["slider_images"])));
			$totalSlides = count($images);
			$carouselId = 'carousel_' . $row["id"];
	?>
	
	<div id="<?= $carouselId ?>" class="carousel slide position-relative" data-bs-ride="carousel">

<div class="carousel-indicators">
			<?php foreach (array_keys($images) as $i): ?>
				<button type="button" data-bs-target="#<?= $carouselId ?>" data-bs-slide-to="<?= $i ?>" <?= $i === 0 ? 'class="active"' : '' ?> aria-label="Slide <?= $i+1 ?>"></button>
			<?php endforeach; ?>
		</div>

<div class="carousel-inner">
			<?php
			$activeSet = false;
			foreach ($images as $index => $img):
				$safeImg = basename($img);
				$path = 'admin/uploads/sliders/' . $sliderName . '/' . $safeImg;
				if (file_exists($path)):
			?> 	
			<div class="carousel-item <?= !$activeSet ? 'active' : '' ?>">
				<div class="position-relative w-100 h-100">
					<img src="<?= htmlspecialchars($path) ?>" class="d-block w-100 img-fluid h-100 object-fit-cover" alt="<?= htmlspecialchars($sliderName) ?>">
				</div>
			</div>
			
			<div class="slider-text-overlay-fixed">
				<h2>Crafting Spaces. <br> Making It More Than A <br> Dream For Clients</h2>
			</div>

<div class="logo-fixed d-flex align-items-center p-2">
				<img src="images/icons/logo.jpg" alt="Logo" class="img-fluid me-2" style="height: 75px;">
			</div>
			<?php
				$activeSet = true;
				endif;
			endforeach;
			?>
		</div>

<div class="slide-counter" id="counter_<?= $carouselId ?>">
		    <span class="active-count">1</span>/<span class="total-count"><?= $totalSlides ?></span>
		</div>

</div>
	<?php
		endwhile;
	else:
		echo "<p class='text-center'>No sliders found.</p>";
	endif;
	?>

<div class="carousel-lines">
		<div class="line-left"></div>
		<div class="line-right"></div>
		<div class="line-top"></div>
	</div>

<div class="social-media-icons">
			<a href="https://facebook.com" target="_blank" title="Facebook"><i class="fab fa-facebook-f"></i></a>
			<a href="https://instagram.com" target="_blank" title="Instagram"><i class="fab fa-instagram"></i></a>
			<a href="https://linkedin.com" target="_blank" title="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
			<a href="https://pinterest.com" target="_blank" title="Pinterest"><i class="fab fa-pinterest-p"></i></a>
		</div>

</div>

offcanvas.addEventListener("show.bs.offcanvas", () => {
			hamburger.style.display = "none";
		});

offcanvas.addEventListener("hidden.bs.offcanvas", () => {
			hamburger.style.display = "flex";
		});
	});

document.addEventListener("DOMContentLoaded", () => {
	const carousels = document.querySelectorAll(".carousel");

carousels.forEach(carousel => {
		const counter = carousel.querySelector(".slide-counter");
		const items = carousel.querySelectorAll(".carousel-item");
		const total = items.length;

const updateCounter = () => {
			const activeIndex = [...items].findIndex(item => item.classList.contains("active")) + 1;
			const activeSpan = counter.querySelector(".active-count");
			if (activeSpan) activeSpan.textContent = activeIndex;
		};

carousel.addEventListener("slid.bs.carousel", updateCounter);
		});
	});

</script>
</body>
</html>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: index3 - Copy.php

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation