Mr.Combet Webshell 🔥

Edit File Name : GalleryAlbum.cshtml

@model List<bnb.Models.GalleryAlbumViewModel>
@{
    ViewBag.Title = "GalleryAlbum";
    Layout = "~/Views/Shared/_Navbar.cshtml";
}

.overlay {
        position: absolute;
        bottom: 0;
        @*background: rgb(0, 0, 0);*@
        @*background: rgba(0, 0, 0, 0.5);*@ /* Black see-through */
        background: rgba(245, 130, 32, 0.8);
        color: #f1f1f1;
        width: 100%;
        transition: .5s ease;
        opacity: 0;
        color: white;
        font-size: 20px;
        padding: 20px;
        text-align: center;
        transform: translate(0px, -25px);
    }

.contain:hover .overlay {
        opacity: 1;
    }

.search-container {
        margin-bottom: 3%;
        margin-top: 3%;
    }

#search {
        border: none;
        background: none;
        //transform: translate(-50px, 1px);
        color: #8b8b7e;
    }

.search-container {
        height: 40px;
        @*margin-left: 80px;
        *@ border: 1px solid #e2e2df;
        border-radius: calc(0.5 * 40px);
        box-shadow: 0 1px 6px 0 #e2e2df;
    }

#search-input {
        border: none;
        width: 80%;
        background: transparent;
    }

#search-input:focus {
        border: none;
        @*outline: 0px;
        *@ outline: none;
    }

</style>
@*<div class="l-banner__inner hidden-xs d-flex">
</div>*@

<div class="l-breadcrumb pt-2 pb-2">
    <div class="container">
        <nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb" class="d-flex py-3">
            <ol class="mb-0 breadcrumb align-self-center">
                <li class="breadcrumb-item"><a href="@Url.Action("Index","HomeUI")">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">GalleryAlbums</li>
            </ol>
        </nav>
    </div>
</div>

<div class="container mb-5">
    <div class="d-flex justify-content-between align-items-center">
        <h1 class="content__title mb-0 align-self-center fw-bold mb-3" style="width: 66%">Gallery Album</h1>
        <div class="search-container d-flex justify-content-between pe-2">
            <input class="ps-3" type="text" placeholder="Search.." name="search" id="search-input">
            <button type="submit" id="search"><i class="fa fa-search"></i></button>
        </div>
    </div>
    @*<h1 class="content__title mb-0 align-self-center fw-bold mb-3">Gallery Albums</h1>
    <div class="search-container">
        <input type="text" placeholder="Search.." name="search" id="search-input">
        <button type="submit" id="search"><i class="fa fa-search"></i></button>
    </div>*@
    <div class="m-gallery mt-4 pt-4 lightbox clearfix">

@foreach (var item in Model)
            {
                <div class="gallery-col col-lg-4 mb-4 mb-lg-0">
                    <div class=" gallery__post">
                        <div class="contain">
                            <a class="d-block" href="@Url.Action("Gallery","HomeUI", new {id = item.Url })">
                                <img data-bs-target="#image-slider" data-bs-slide-to="4" src="~/Content/img/@item.AlbumImageURL" class="w-100 shadow-1-strong rounded mb-4" alt="#" style="max-height: 269px;" />
                            </a>
                            <div class="overlay">
                                <div class="text">@item.AlbumName </div>
                            </div>
                        </div>
                        <div><p>@item.AlbumDescription</p></div>
                    </div>
                </div>

}

</div>
    </div>
</div>
<script>
    const searchInput = document.getElementById('search-input');
    const sidenavOptions = document.querySelectorAll('.gallery-col');

searchInput.addEventListener('input', () => {
        console.log(searchInput.value);
        const filter = searchInput.value.toLowerCase();
        showSidenavOptions();
        const valueExist = !!filter.length;

if (valueExist) {
            sidenavOptions.forEach((el) => {
                const elText = el.textContent.trim().toLowerCase();
                const isIncluded = elText.includes(filter);
                if (!isIncluded) {
                    el.style.display = 'none';
                }
            });
        }
    });

const showSidenavOptions = () => {
        sidenavOptions.forEach((el) => {
            el.style.display = '';
        });
    };
</script>