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.2.30

User:

u329947844

Directory:

/home/u329947844/domains/style29.in/public_html/admin/html

Free Space:

10.3 TB

🔧 Quick Actions

✏️ Editing: ui-lightbox.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Lightbox | Fonik - Responsive Bootstrap 5 Admin Dashboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
    <meta content="Themesbrand" name="author" />
    
    <link rel="shortcut icon" href="assets/images/favicon.ico">

<link href="assets/libs/magnific-popup/magnific-popup.css" rel="stylesheet" type="text/css" />

<link href="assets/css/bootstrap.min.css" id="bootstrap-style" rel="stylesheet" type="text/css" />

<link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
    
    <link href="assets/css/app.min.css" id="app-style" rel="stylesheet" type="text/css" />

</head>

<div id="preloader">
    <div id="status">
        <div class="spinner"></div>
    </div>
</div>

<div id="layout-wrapper">

<div class="d-none d-sm-block ms-2">
                    <h4 class="page-title font-size-18">Lightbox</h4>
                </div>

</div>

<div class="search-wrap" id="search-wrap">
                <div class="search-bar">
                    <input class="search-input form-control" placeholder="Search" />
                    <a href="#" class="close-search toggle-search" data-bs-target="#search-wrap">
                        <i class="mdi mdi-close-circle"></i>
                    </a>
                </div>
            </div>

<div class="dropdown d-none d-md-block ms-2">
                    <button type="button" class="btn header-item waves-effect" data-bs-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">
                        <img class="me-2" src="assets/images/flags/us_flag.jpg" alt="Header Language" height="16"> English
                        <span class="mdi mdi-chevron-down"></span>
                    </button>
                    <div class="dropdown-menu dropdown-menu-end">

<a href="javascript:void(0);" class="dropdown-item notify-item">
                            <img src="assets/images/flags/germany_flag.jpg" alt="user-image" class="me-1" height="12"> <span
                                class="align-middle"> German </span>
                        </a>

<a href="javascript:void(0);" class="dropdown-item notify-item">
                            <img src="assets/images/flags/italy_flag.jpg" alt="user-image" class="me-1" height="12"> <span
                                class="align-middle"> Italian </span>
                        </a>

<a href="javascript:void(0);" class="dropdown-item notify-item">
                            <img src="assets/images/flags/french_flag.jpg" alt="user-image" class="me-1" height="12"> <span
                                class="align-middle"> French </span>
                        </a>

<a href="javascript:void(0);" class="dropdown-item notify-item">
                            <img src="assets/images/flags/spain_flag.jpg" alt="user-image" class="me-1" height="12"> <span
                                class="align-middle"> Spanish </span>
                        </a>

<a href="javascript:void(0);" class="dropdown-item notify-item">
                            <img src="assets/images/flags/russia_flag.jpg" alt="user-image" class="me-1" height="12"> <span
                                class="align-middle"> Russian </span>
                        </a>
                    </div>
                </div>

<div class="dropdown d-inline-block ms-2">
                    <button type="button" class="btn header-item noti-icon waves-effect"
                        id="page-header-notifications-dropdown" data-bs-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="false">
                        <i class="ion ion-md-notifications"></i>
                        <span class="badge bg-danger rounded-pill">3</span>
                    </button>
                    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end p-0"
                        aria-labelledby="page-header-notifications-dropdown">
                        <div class="p-3">
                            <div class="row align-items-center">
                                <div class="col">
                                    <h5 class="m-0 font-size-16"> Notification (3) </h5>
                                </div>
                            </div>
                        </div>
                        <div data-simplebar style="max-height: 230px;">
                            <a href="" class="text-reset notification-item">
                                <div class="media d-flex">
                                    <div class="avatar-xs me-3">
                                        <span class="avatar-title bg-success rounded-circle font-size-16">
                                            <i class="mdi mdi-cart-outline"></i>
                                        </span>
                                    </div>
                                    <div class="flex-1">
                                        <h6 class="mt-0 font-size-15 mb-1">Your order is placed</h6>
                                        <div class="font-size-12 text-muted">
                                            <p class="mb-1">Dummy text of the printing and typesetting industry.</p>
                                        </div>
                                    </div>
                                </div>
                            </a>

<a href="" class="text-reset notification-item">
                                <div class="media d-flex">
                                    <div class="avatar-xs me-3">
                                        <span class="avatar-title bg-warning rounded-circle font-size-16">
                                            <i class="mdi mdi-message-text-outline"></i>
                                        </span>
                                    </div>
                                    <div class="flex-1">
                                        <h6 class="mt-0 font-size-15 mb-1">New Message received</h6>
                                        <div class="font-size-12 text-muted">
                                            <p class="mb-1">You have 87 unread messages</p>
                                        </div>
                                    </div>
                                </div>
                            </a>

<a href="" class="text-reset notification-item">
                                <div class="media d-flex">
                                    <div class="avatar-xs me-3">
                                        <span class="avatar-title bg-info rounded-circle font-size-16">
                                            <i class="mdi mdi-glass-cocktail"></i>
                                        </span>
                                    </div>
                                    <div class="flex-1">
                                        <h6 class="mt-0 font-size-15 mb-1">Your item is shipped</h6>
                                        <div class="font-size-12 text-muted">
                                            <p class="mb-1">It is a long established fact that a reader will</p>
                                        </div>
                                    </div>
                                </div>
                            </a>

</div>
                        <div class="p-2 border-top text-center">
                            <a class="btn btn-sm btn-link font-size-14 w-100" href="javascript:void(0)">
                                View all
                            </a>
                        </div>
                    </div>
                </div>

<div class="dropdown d-inline-block ms-2">
                    <button type="button" class="btn header-item waves-effect" id="page-header-user-dropdown"
                        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <img class="rounded-circle header-profile-user" src="assets/images/users/avatar-1.jpg"
                            alt="Header Avatar">
                    </button>
                    <div class="dropdown-menu dropdown-menu-end">
                        
                        <a class="dropdown-item" href="#"><i class="dripicons-user font-size-16 align-middle me-2"></i>
                            Profile</a>
                        <a class="dropdown-item" href="#"><i class="dripicons-wallet font-size-16 align-middle me-2"></i> My
                            Wallet</a>
                        <a class="dropdown-item d-block" href="#"><span class="badge bg-success float-end">5</span><i
                                class="dripicons-gear font-size-16 align-middle me-2"></i> Settings</a>
                        <a class="dropdown-item" href="#"><i class="dripicons-lock font-size-16 align-middle me-2"></i> Lock
                            screen</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#"><i class="dripicons-exit font-size-16 align-middle me-2"></i>
                            Logout</a>
                    </div>
                </div>

</div>
        </div>
    </header>

<div class="vertical-menu">

<div id="sidebar-menu">
                
                <ul class="metismenu list-unstyled" id="side-menu">
                    <li class="menu-title">Main</li>

<li>
                        <a href="index.html" class="waves-effect">
                            <i class="dripicons-device-desktop"></i>
                            <span>Dashboard</span>
                        </a>
                    </li>

<li>
                        <a href="javascript: void(0);" class="has-arrow waves-effect">
                            <i class="dripicons-suitcase"></i>
                            <span> User Interface </span>
                        </a>
                        <ul class="sub-menu" aria-expanded="false">
                            <li><a href="ui-buttons.html">Buttons</a></li>
                            <li><a href="ui-cards.html">Cards</a></li>
                            <li><a href="ui-tabs-accordions.html">Tabs &amp; Accordions</a></li>
                            <li><a href="ui-modals.html">Modals</a></li>
                            <li><a href="ui-images.html">Images</a></li>
                            <li><a href="ui-alerts.html">Alerts</a></li>
                            <li><a href="ui-progressbars.html">Progress Bars</a></li>
                            <li><a href="ui-dropdowns.html">Dropdowns</a></li>
                            <li><a href="ui-lightbox.html">Lightbox</a></li>
                            <li><a href="ui-navs.html">Navs</a></li>
                            <li><a href="ui-pagination.html">Pagination</a></li>
                            <li><a href="ui-popover-tooltips.html">Popover &amp; Tooltips</a></li>
                            <li><a href="ui-badge.html">Badge</a></li>
                            <li><a href="ui-carousel.html">Carousel</a></li>
                            <li><a href="ui-video.html">Video</a></li>
                            <li><a href="ui-typography.html">Typography</a></li>
                            <li><a href="ui-sweet-alert.html">Sweetalert</a></li>
                            <li><a href="ui-grid.html">Grid</a></li>
                        </ul>
                    </li>

<li>
                        <a href="javascript: void(0);" class="has-arrow waves-effect">
                            <i class="dripicons-mail"></i>
                            <span> Email </span>
                        </a>
                        <ul class="sub-menu" aria-expanded="false">
                            <li><a href="email-inbox.html">Inbox</a></li>
                            <li><a href="email-read.html">Email Read</a></li>
                            <li><a href="email-compose.html">Email Compose</a></li>
                        </ul>
                    </li>

<li>
                        <a href="calendar.html" class=" waves-effect">
                            <i class="dripicons-calendar"></i>
                            <span>Calendar</span>
                        </a>
                    </li>

<li>
                        <a href="javascript: void(0);" class="has-arrow waves-effect">
                            <i class="dripicons-card"></i>
                            <span> Contact</span>
                        </a>
                        <ul class="sub-menu" aria-expanded="false">
                            <li><a href="contacts-grid.html">Contact Grid</a></li>
                            <li><a href="contacts-list.html">Contact List</a></li>
                            <li><a href="contacts-profile.html">Profile</a></li>
                        </ul>
                    </li>

<li>
                        <a href="javascript: void(0);" class="waves-effect">
                            <i class="dripicons-blog"></i><span class="badge rounded-pill bg-success float-end">7</span>
                            <span> Forms </span>
                        </a>
                        <ul class="sub-menu" aria-expanded="false">
                            <li><a href="form-elements.html">Form Elements</a></li>
                            <li><a href="form-validation.html">Form Validation</a></li>
                            <li><a href="form-advanced.html">Form Advanced</a></li>
                            <li><a href="form-editors.html">Form Editor</a></li>
                            <li><a href="form-uploads.html">Form File Upload</a></li>
                            <li><a href="form-mask.html">Form Mask</a></li>
                            <li><a href="form-xeditable.html">Form Xeditable</a></li>
                        </ul>
                    </li>

<li>
                        <a href="javascript: void(0);" class="has-arrow waves-effect">
                            <i class="dripicons-box"></i>
                            <span> Icons </span>
                        </a>
                        <ul class="sub-menu" aria-expanded="false">
                            <li><a href="icons-material.html">Material Design</a></li>
                            <li><a href="icons-ion.html">Ion Icons</a></li>
                            <li><a href="icons-fontawesome.html">Font Awesome</a></li>
                            <li><a href="icons-themify.html">Themify Icons</a></li>
                            <li><a href="icons-dripicons.html">Dripicons</a></li>
                            <li><a href="icons-typicons.html">Typicons Icons</a></li>
                        </ul>
                    </li>

<li>
                        <a href="javascript: void(0);" class="has-arrow waves-effect">
                            <i class="dripicons-graph-line"></i>
                            <span> Charts </span>
                        </a>
                        <ul class="sub-menu" aria-expanded="false">
                            <li><a href="charts-morris.html">Morris Charts</a></li>
                            <li><a href="charts-chartist.html">Chartist Charts</a></li>
                            <li><a href="charts-chartjs.html">Chartjs Charts</a></li>
                            <li><a href="charts-flot.html">Flot Charts</a></li>
                            <li><a href="charts-c3.html">C3 Charts</a></li>
                            <li><a href="charts-other.html">Jquery Knob Charts</a></li>
                        </ul>
                    </li>

<li>
                        <a href="javascript: void(0);" class="has-arrow waves-effect">
                            <i class="dripicons-list"></i>
                            <span> Tables </span>
                        </a>
                        <ul class="sub-menu" aria-expanded="false">
                            <li><a href="tables-basic.html">Basic Tables</a></li>
                            <li><a href="tables-datatable.html">Data Tables</a></li>
                            <li><a href="tables-responsive.html">Responsive Table</a></li>
                            <li><a href="tables-editable.html">Editable Table</a></li>
                        </ul>
                    </li>

<li>
                        <a href="javascript: void(0);" class="waves-effect">
                            <i class="dripicons-map"></i><span class="badge rounded-pill bg-danger float-end">2</span>
                            <span> Maps </span>
                        </a>
                        <ul class="sub-menu" aria-expanded="false">
                            <li><a href="maps-google.html"> Google Maps</a></li>
                            <li><a href="maps-vector.html"> Vector Maps</a></li>
                        </ul>
                    </li>

<li class="menu-title">Extras</li>

<li>
                        <a href="javascript: void(0);" class="has-arrow waves-effect">
                            <i class="dripicons-inbox"></i>
                            <span> Layouts </span>
                        </a>
                        <ul class="sub-menu" aria-expanded="false">
                            <li>
                                <a href="javascript: void(0);" class="has-arrow waves-effect">
                                    <span>Vertical</span>
                                </a>
                                <ul>
                                    <li><a href="layout-light-sidebar.html">Light Sidebar</a></li>
                                    <li><a href="layout-collapsed-sidebar.html">Collapsed Sidebar</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="javascript: void(0);" class="has-arrow waves-effect">
                                    <span>Horizontal</span>
                                </a>
                                <ul>
                                    <li><a href="layouts-horizontal.html">Horizontal</a></li>
                                    <li><a href="layouts-hori-boxed-width.html">Boxed Width</a></li>
                                </ul>
                            </li>

</ul>
                    </li>

<li>
                        <a href="javascript: void(0);" class="has-arrow waves-effect">
                            <i class="dripicons-heart"></i>
                            <span> Advanced UI </span>
                        </a>
                        <ul class="sub-menu" aria-expanded="false">
                            <li><a href="advanced-animation.html">Animation</a></li>
                            <li><a href="advanced-highlight.html">Highlight</a></li>
                            <li><a href="advanced-rating.html">Ratings</a></li>
                            <li><a href="advanced-nestable.html">Nestable</a></li>
                            <li><a href="advanced-alertify.html">Alertify</a></li>
                            <li><a href="advanced-rangeslider.html">Range Slider</a></li>
                            <li><a href="advanced-sessiontimeout.html">Session Timeout</a></li>
                        </ul>
                    </li>

<li>
                        <a href="javascript: void(0);" class="has-arrow waves-effect">
                            <i class="dripicons-copy"></i>
                            <span> Pages </span>
                        </a>
                        <ul class="sub-menu" aria-expanded="false">
                            <li><a href="pages-timeline.html">Timeline</a></li>
                            <li><a href="pages-invoice.html">Invoice</a></li>
                            <li><a href="pages-directory.html">Directory</a></li>
                            <li><a href="pages-login.html">Login</a></li>
                            <li><a href="pages-register.html">Register</a></li>
                            <li><a href="pages-recoverpw.html">Recover Password</a></li>
                            <li><a href="pages-lock-screen.html">Lock Screen</a></li>
                            <li><a href="pages-starter.html">Starter Page</a></li>
                            <li><a href="pages-404.html">Error 404</a></li>
                            <li><a href="pages-500.html">Error 500</a></li>
                        </ul>
                    </li>

<li>
                        <a href="javascript: void(0);" class="has-arrow waves-effect">
                            <i class="dripicons-network-1"></i>
                            <span>Multi Level</span>
                        </a>
                        <ul class="sub-menu" aria-expanded="true">
                            <li><a href="javascript: void(0);">Level 1.1</a></li>
                            <li><a href="javascript: void(0);" class="has-arrow">Level 1.2</a>
                                <ul class="sub-menu" aria-expanded="true">
                                    <li><a href="javascript: void(0);">Level 2.1</a></li>
                                    <li><a href="javascript: void(0);">Level 2.2</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>

</ul>
            </div>
            
        </div>
    </div>

<div class="main-content">

<h4 class="card-title">Single image lightbox</h4>
                                <p class="card-title-desc">Three simple popups with different scaling settings.</p>

<div class="row">
                                    <div class="col-lg-6">
                                        <h5 class="mt-0 font-size-14 text-muted">Fits (Horz/Vert)</h5>
                                        <a class="image-popup-vertical-fit" href="assets/images/small/img-2.jpg"
                                            title="Caption. Can be aligned it to any side and contain any HTML.">
                                            <img class="img-responsive" alt="" src="assets/images/small/img-2.jpg"
                                                width="145">
                                        </a>
                                    </div>
                                    <div class="col-lg-6">
                                        <h5 class="font-size-14 text-muted mt-lg-0 mt-3">Effects</h5>
                                        <a class="image-popup-no-margins" href="assets/images/small/img-3.jpg">
                                            <img class="img-responsive" alt="" src="assets/images/small/img-3.jpg"
                                                width="75">
                                        </a>
                                        <p class="mt-2 mb-0 text-muted">No gaps, zoom animation, close icon in top-right
                                            corner.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

<h4 class="card-title">Lightbox gallery</h4>
                                <p class="card-title-desc">In this example lazy-loading of images is enabled for the
                                    next image based on move direction. </p>

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

<h4 class="card-title">Zoom Gallery</h4>
                                <p class="card-title-desc">Zoom effect works only with images.</p>

<h4 class="card-title">Popup with video or map</h4>
                                <p class="card-title-desc">In this example lazy-loading of images is enabled for the
                                    next image based on move direction. </p>

<div class="row">
                                    <div class="col-12">
                                        <div class="button-items">
                                            <a class="popup-youtube btn btn-secondary"
                                                href="http://www.youtube.com/watch?v=0O2aH4XLbto">Open YouTube Video</a>
                                            <a class="popup-vimeo btn btn-secondary"
                                                href="https://vimeo.com/45830194">Open Vimeo Video</a>
                                            <a class="popup-gmaps btn btn-secondary"
                                                href="https://maps.google.com/maps?q=221B+Baker+Street,+London,+United+Kingdom&amp;hl=en&amp;t=v&amp;hnear=221B+Baker+St,+London+NW1+6XE,+United+Kingdom">Open
                                                Google Map</a>
                                        </div>

</div>
                                </div>

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

</div>
            
        </div>

<footer class="footer">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        ©
                        <script>document.write(new Date().getFullYear())</script> Fonik<span class="d-none d-sm-inline-block"> -
                            Crafted with <i class="mdi mdi-heart text-danger"></i> by Themesbrand.</span>
                    </div>
                </div>
            </div>
        </footer>
    </div>

</div>

<div class="right-bar">
    <div data-simplebar class="h-100">
        <div class="rightbar-title px-3 py-4">
            <a href="javascript:void(0);" class="right-bar-toggle float-end">
                <i class="mdi mdi-close noti-icon"></i>
            </a>
            <h5 class="m-0">Settings</h5>
        </div>

<hr class="mt-0" />
        <h6 class="text-center mb-0">Choose Demo</h6>

<div class="p-4">
            <div class="mb-2">
                <img src="assets/images/layouts/layout-1.jpg" class="img-fluid img-thumbnail" alt="">
            </div>
            <div class="form-check form-switch mb-3">
                <input type="checkbox" class="form-check-input theme-choice" id="light-mode-switch" checked />
                <label class="form-check-label" for="light-mode-switch">Light Mode</label>
            </div>

<h6 class="mt-4">Select Custom Colors</h6>
            <div class="d-flex">
                
            <ul class="list-unstyled mb-0">
                <li class="form-check">
                    <input class="form-check-input theme-color" type="radio" name="theme-mode"
                    id="theme-default" value="default" onchange="document.documentElement.setAttribute('data-theme-mode', 'default')" checked>
                    <label class="form-check-label" for="theme-default">Default</label>
                </li>
                <li class="form-check">
                    <input class="form-check-input theme-color" type="radio" name="theme-mode"
                    id="theme-orange" value="orange" onchange="document.documentElement.setAttribute('data-theme-mode', 'orange')">
                    <label class="form-check-label" for="theme-orange">Orange</label>
                </li>
                <li class="form-check">
                    <input class="form-check-input theme-color" type="radio" name="theme-mode"
                    id="theme-teal" value="teal" onchange="document.documentElement.setAttribute('data-theme-mode', 'teal')">
                    <label class="form-check-label" for="theme-teal">Teal</label>
                </li>
            </ul>

<ul class="list-unstyled mb-0 ms-4">
                <li class="form-check">
                    <input class="form-check-input theme-color" type="radio" name="theme-mode"
                    id="theme-purple" value="purple" onchange="document.documentElement.setAttribute('data-theme-mode', 'purple')">
                    <label class="form-check-label" for="theme-purple">Purple</label>
                </li>
                <li class="form-check">
                    <input class="form-check-input theme-color" type="radio" name="theme-mode"
                    id="theme-green" value="green" onchange="document.documentElement.setAttribute('data-theme-mode', 'green')">
                    <label class="form-check-label" for="theme-green">Green</label>
                </li>
                <li class="form-check">
                    <input class="form-check-input theme-color" type="radio" name="theme-mode"
                    id="theme-red" value="red" onchange="document.documentElement.setAttribute('data-theme-mode', 'red')">
                    <label class="form-check-label" for="theme-red">Red</label>
                </li>
            </ul>

</div>

</div>

</div>
    
</div>

<div class="rightbar-overlay"></div>

<script src="assets/libs/jquery/jquery.min.js"></script>
<script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/libs/metismenu/metisMenu.min.js"></script>
<script src="assets/libs/simplebar/simplebar.min.js"></script>
<script src="assets/libs/node-waves/waves.min.js"></script>

<script src="assets/libs/magnific-popup/jquery.magnific-popup.min.js"></script>

<script src="assets/js/pages/lightbox.init.js"></script>

</body>

</html>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: ui-lightbox.html

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation