Simple File Manage Design by index.php

��

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><?php echo $__env->yieldContent('title', 'Gallery - Dusty helmets'); ?></title>
    <meta content="Dusty Helmets" name="Dusty Helmets is a true Kenyan organization that has been created by a group of passionate Kenyans who want to share
  with you their passion and knowledge of the country where you will see wildlife like you have never seen before. Kenya
  has the No.1 world reputation for safaris that show you wildlife. Dusty Helmets takes this experience to a higher level by
  using a world-class enduro motorbike and following tracks that you cannot follow in a conventional tourist safari!">
    <meta content="Dusty Helmets" name="Dusty Helmets, bike riding">
    <link href="assets/images/favi.ico" rel="icon">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400|Nunito:600,700" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
    <link href="public/assets/lib/animate/animate.min.css" rel="stylesheet">
    <link href="public/assets/lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
    <link href="public/assets/lib/flaticon/font/flaticon.css" rel="stylesheet">
    <link href="public/assets/lib/tempusdominus/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet"/>
    <link href="public/assets/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    
    <link href="assets/lib/aos.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
          integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/venobox/1.9.3/venobox.min.css"
          integrity="sha512-e+0yqAgUQFoRrJ4pZigQXpOE0S7J9IGwmgH801h4H5ODqOCG8/GRfXHQ+9ab754NL79O7wDwdjwY3CcU8sEANg=="
          crossorigin="anonymous" referrerpolicy="no-referrer"/>
    <link href="public/assets/css/style.css" rel="stylesheet">
    <style>
        ul li ul.dropdown {
            min-width: 100%; /* Set width of the dropdown */
            background: #f2f2f2;
            display: none;
            position: absolute;
            z-index: 999;
            left: 0;
        }

ul li:hover ul.dropdown {
            display: block; /* Display the dropdown */

}

ul li ul.dropdown li {
            display: block;
            padding: .75rem 1.25rem;
            min-width: 150px;
            white-space: nowrap;
            border-bottom: 1px solid #603814;
            font-size: 15px;
        }

.imgx {
            -webkit-animation: mover 2s infinite alternate;
            animation: mover 2s infinite alternate;
        }

@-webkit-keyframes mover {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(-20px);
                transform: rotate(15deg);
            }
        }

@keyframes mover {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(-20px);
                transform: rotate(-15deg);
            }
        }

#img {
            background: #F1F1FA;
            width: 400px;
            height: 300px;
            display: block;
            margin: 10px auto;
            border: 0;
        }

#cl:hover {
            color: #603814 !important;
        }

.img-fluid {
            width: 350px !important;
            height: 221px !important;
        }

#newImg {
            border-radius: 3px;
            -moz-box-shadow: rgb(0, 0, 0) 0px 0px 3px;
            -webkit-box-shadow: rgb(0, 0, 0) 0px 0px 3px;
            box-shadow: rgb(0, 0, 0) 0px 0px 3px;
            padding: 3px;
            border: 1px solid #cccccc;
            filter: alpha(opacity=90);
            -moz-opacity: 0.9;
            -khtml-opacity: 0.9;
            opacity: 0.9;
        }

#newImg:hover {
            padding: 3px;
            border: 1px solid #000000;
            filter: alpha(opacity=99);
            -moz-opacity: 0.99;
            -khtml-opacity: 0.99;
            opacity: 0.99;
        }

/* Preload images */

body.lb-disable-scrolling {
            overflow: hidden;
        }

.lightboxOverlay {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 9999;
            background-color: black;
            filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
            opacity: 0.8;
            display: none;
        }

.lightbox {
            position: absolute;
            left: 0;
            width: 100%;
            z-index: 10000;
            text-align: center;
            line-height: 0;
            font-weight: normal;
        }

.lightbox .lb-image {
            display: block;
            height: auto;
            max-width: inherit;
            max-height: none;
            border-radius: 3px;

/* Image border */
            border: 4px solid white;
        }

.lightbox a img {
            border: none;
        }

.lb-outerContainer {
            position: relative;
            *zoom: 1;
            width: 250px;
            height: 250px;
            margin: 0 auto;
            border-radius: 4px;

/* Background color behind image.
               This is visible during transitions. */
            background-color: white;
        }

.lb-outerContainer:after {
            content: "";
            display: table;
            clear: both;
        }

.lb-loader {
            position: absolute;
            top: 43%;
            left: 0;
            height: 25%;
            width: 100%;
            text-align: center;
            line-height: 0;
        }

.lb-cancel {
            display: block;
            width: 32px;
            height: 32px;
            margin: 0 auto;
            background: url(../images/loading.gif) no-repeat;
        }

.lb-nav {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            z-index: 10;
        }

.lb-container > .nav {
            left: 0;
        }

.lb-nav a {
            outline: none;
            background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
        }

.lb-prev, .lb-next {
            height: 100%;
            cursor: pointer;
            display: block;
        }

.lb-nav a.lb-prev {
            width: 34%;
            left: 0;
            float: left;
            background: url(images/prev.png) left 48% no-repeat;
            filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
            opacity: 0;
            -webkit-transition: opacity 0.6s;
            -moz-transition: opacity 0.6s;
            -o-transition: opacity 0.6s;
            transition: opacity 0.6s;
        }

.lb-nav a.lb-prev:hover {
            filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
            opacity: 1;
        }

.lb-nav a.lb-next {
            width: 64%;
            right: 0;
            float: right;
            background: url(images/next.png) right 48% no-repeat;
            filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
            opacity: 0;
            -webkit-transition: opacity 0.6s;
            -moz-transition: opacity 0.6s;
            -o-transition: opacity 0.6s;
            transition: opacity 0.6s;
        }

.lb-nav a.lb-next:hover {
            filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
            opacity: 1;
        }

.lb-dataContainer {
            margin: 0 auto;
            padding-top: 5px;
            *zoom: 1;
            width: 100%;
            -moz-border-radius-bottomleft: 4px;
            -webkit-border-bottom-left-radius: 4px;
            border-bottom-left-radius: 4px;
            -moz-border-radius-bottomright: 4px;
            -webkit-border-bottom-right-radius: 4px;
            border-bottom-right-radius: 4px;
        }

.lb-dataContainer:after {
            content: "";
            display: table;
            clear: both;
        }

.lb-data {
            padding: 0 4px;
            color: #ccc;
        }

.lb-data .lb-details {
            width: 85%;
            float: left;
            text-align: left;
            line-height: 1.1em;
        }

.lb-data .lb-caption {
            font-size: 13px;
            font-weight: bold;
            line-height: 1em;
        }

.lb-data .lb-caption a {
            color: #4ae;
        }

.lb-data .lb-number {
            display: block;
            clear: left;
            padding-bottom: 1em;
            font-size: 12px;
            color: #999999;
        }

.lb-data .lb-close {
            display: block;
            float: right;
            width: 30px;
            height: 30px;
            background: url(../images/close.png) top right no-repeat;
            text-align: right;
            outline: none;
            filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
            opacity: 0.7;
            -webkit-transition: opacity 0.2s;
            -moz-transition: opacity 0.2s;
            -o-transition: opacity 0.2s;
            transition: opacity 0.2s;
        }

.lb-data .lb-close:hover {
            cursor: pointer;
            filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
            opacity: 1;
        }
    </style>
</head>
<body>
<?php echo $__env->make('includes.header', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
<div class="mb-0 page-header"
     style="background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url(public/assets/P6/pic2.jpg);background-position: center; background-repeat: no-repeat; background-size: cover;">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h2>Gallery</h2>
            </div>
            <div class="col-12">
                <a href="<?php echo e(url('/')); ?>">Home</a>
                <a href="<?php echo e(url('/mission')); ?>">Gallery</a>
            </div>
        </div>
    </div>
</div>
<div class="about">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-12">
                <div class="about-content">
                    <div class="section-header" style="margin-bottom: 10px !important;">
                        <p>Gallery</p>
                    </div>
                    <div class="about-text">
                        <p>
                            Click on any thumbnail to show larger image
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <section id="portfolio" class="portfolio">
            <div class="container">
                <div id="landscape">
                    <div class="row portfolio-container">
                        <?php $__currentLoopData = $galleries1; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $gallery): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="col-lg-4 col-md-6 portfolio-item filter-landscape">
                                <a class="example-image-link" href="#"
                                   data-lightbox="example-set"
                                   data-title="Click the right half of the image to move forward, left half to move to previous and outside the image to close.">
                                    <img class="example-image img-responsive img-fluid"
                                         src="<?php echo e(asset('')); ?>public/storage/<?php echo e($gallery->image); ?>" id="newImg"/>
                                </a>
                                <div class="portfolio-info">
                                    <h4><?php echo e($gallery->captions); ?></h4>
                                    
                                    <a class="venobox preview-link" data-gall="portfolioGallery"
                                       href="<?php echo e(url('')); ?>/public/storage/<?php echo e($gallery->image); ?>">
                                        <i class="fa fa-sm fa-plus"></i>
                                    </a>
                                </div>
                            </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        <?php $__currentLoopData = $galleries2; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $gallery): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="col-lg-4 col-md-6 portfolio-item filter-landscape">
                                <a class="example-image-link" href="#"
                                   data-lightbox="example-set"
                                   data-title="Click the right half of the image to move forward, left half to move to previous and outside the image to close.">
                                    <img class="example-image img-responsive img-fluid lazy"
                                         data-src="<?php echo e(asset('')); ?>public/storage/<?php echo e($gallery->image); ?>" id="newImg"/>
                                </a>
                                <div class="portfolio-info">
                                    <h4><?php echo e($gallery->captions); ?></h4>
                                    <a href="<?php echo e(asset('')); ?>/public/storage/<?php echo e($gallery->image); ?>" data-gall="portfolioGallery"
                                       class="venobox preview-link" title="">
                                        <i class="fa fa-sm fa-plus"></i>
                                    </a>
                                </div>
                            </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>
<?php echo $__env->make('includes.footer', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        var lazyloadImages = document.querySelectorAll("img.lazy");
        var lazyloadThrottleTimeout;

function lazyload() {
            if (lazyloadThrottleTimeout) {
                clearTimeout(lazyloadThrottleTimeout);
            }

lazyloadThrottleTimeout = setTimeout(function () {
                var scrollTop = window.pageYOffset;
                lazyloadImages.forEach(function (img) {
                    if (img.offsetTop < (window.innerHeight + scrollTop)) {
                        img.src = img.dataset.src;
                        img.classList.remove('lazy');
                    }
                });
                if (lazyloadImages.length === 0) {
                    document.removeEventListener("scroll", lazyload);
                    window.removeEventListener("resize", lazyload);
                    window.removeEventListener("orientationChange", lazyload);
                }
            }, 20);
        }

document.addEventListener("scroll", lazyload);
        window.addEventListener("resize", lazyload);
        window.addEventListener("orientationChange", lazyload);
    });
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/venobox/1.9.3/venobox.min.js"
        integrity="sha512-zBTnX97k269iewUwROiWwO82A6uXO4lcjq0Z4xnvO+qAblC/RMQRUu8fQVKtSFhPNKD5Xzh9PMoZG7+LnmH1Hg=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    $(document).ready(function () {
        /* default settings */
        $('.venobox').venobox();
        /* open content with custom settings */

// $('.venobox_custom').venobox({

//     framewidth: '300px',

//     frameheight: '250px',

//     border: '6px',

//     bordercolor: '#ba7c36',

//     numeratio: true
// });
        /* auto-open #firstlink on page load */

$("#firstlink").venobox().trigger('click');
    });
</script>

<a href="#" class="back-to-top"><i class="fa fa-chevron-up"></i></a>

<script>// src="mail/jqBootstrapValidation.min.js"></script>
<script>// src="mail/contact.js"></script>

<script src="public/assets/js/main.js"></script>
</body>
</html>

<?php /**PATH /home/dustyhe2/public_html/resources/views/gallery1.blade.php ENDPATH**/ ?>