TrxShell [ mangaberri.com ]

Name	Size	Permission
angels	[ DIR ]	drwxrwxrwx
berribo	[ DIR ]	drwxrwxrwx
cgi-bin	[ DIR ]	drwxrwxrwx
cherribo	[ DIR ]	drwxrwxrwx
css	[ DIR ]	drwxrwxrwx
font	[ DIR ]	drwxrwxrwx
images	[ DIR ]	drwxrwxrwx
js	[ DIR ]	drwxrwxrwx
pixbo	[ DIR ]	drwxrwxrwx
preview	[ DIR ]	drwxrwxrwx
thumbnail	[ DIR ]	drwxrwxrwx
wallpapers	[ DIR ]	drwxrwxrwx
.htaccess	425 B	-rw-r--r--
BingSiteAuth.xml	85 B	-rw-rw-r--
actions.php	2.17 KB	-rwxrwxrwx
berribo.zip	5.53 MB	-rw-rw-r--
berripix.zip	26.75 MB	-rwxrwxrwx
check.php	703 B	-rw-r--r--
check1.php	703 B	-rw-r--r--
cherribo.zip	5.54 MB	-rw-rw-r--
datasource.php	1.48 KB	-rw-r--r--
dbhelper.php	8.82 KB	-rwxrwxrwx
detail.php	81.81 KB	-rwxrwxrwx
index.php	48.23 KB	-rwxrwxrwx
index2.php	11.24 KB	-rwxrwxrwx
index4.php	67.43 KB	-rw-rw-r--
index5.php	4.36 KB	-rw-rw-r--
index_old.php	141.32 KB	-rw-rw-r--
log.txt	62.58 KB	-rwxrwxrwx
manifest.json	458 B	-rw-rw-r--
mass.php	703 B	-rw-r--r--
q.php	3 B	-rw-r--r--
q.txt	3 B	-rw-r--r--
robots.txt	69 B	-rw-rw-r--
robots.txt.php	1 B	-rw-r--r--
search.php	48.86 KB	-rw-rw-r--
sitemap.xml	84.67 KB	-rw-rw-r--
slugify.php	243 B	-rw-rw-r--
terms_of_service.php	71.54 KB	-rw-rw-r--
test.php	232 B	-rw-rw-r--
u.php	204 B	-rw-r--r--
up.php	289 B	-rw-r--r--
uploader.php	350 B	-rw-r--r--
wimage.php	1.12 KB	-rw-rw-r--

Code Editor : index2.php

<?php

require_once(__DIR__ . "/dbhelper.php");
$dbhelper = new DBHelper();
$categories = $dbhelper->getCategories();

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BerriPix - Free HD Wallpapers</title>
    <meta name="description" content="Download free HD wallpapers for phones & tablets.">
    <meta name="keywords" content="HD wallpaper, mobile wallpaper, 4k wallpaper, iphone wallpaper">
    <link rel="icon" href="images/favicon berripix.png" type="image/png">
    <link rel="stylesheet" href="css/toolkit.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
    <style>
        .image-error {
            opacity: 0.5;
            border: 2px dashed red;
        }

body {
            margin: 0;
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
        }

.main-container {
            display: flex;
            flex-direction: column;
        }

@media (min-width: 768px) {
            .main-container {
                flex-direction: row;
            }
        }

.sidebar {
            display: none;
            flex: 0 0 200px;
            padding: 20px;
            background: #f9f9f9;
            border-right: 1px solid #ddd;
        }

@media (min-width: 768px) {
            .sidebar {
                display: block;
            }
        }

.category-dropdown {
            display: block;
            padding: 10px;
            margin: 0;
            width: 100%;
            position: sticky;
            top: 0;
            background: white;
            z-index: 1000;
            border-bottom: 1px solid #ddd;
        }

@media (min-width: 768px) {
            .category-dropdown {
                display: none;
            }
        }

.category-filter {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

.category-filter button {
            padding: 8px;
            border: 1px solid #ccc;
            background: #f5f5f5;
            cursor: pointer;
            transition: background 0.3s ease;
        }

.category-filter button.active {
            background: #a01ef1;
            color: #fff;
        }

.gallery-grid {
            column-count: 1;
            column-gap: 0;
            max-width: 100%;
            margin: 0 auto;
            flex: 1;
        }

@media (min-width: 600px) {
            .gallery-grid {
                column-count: 2;
            }
        }

@media (min-width: 900px) {
            .gallery-grid {
                column-count: 3;
            }
        }

.gallery-card {
            display: inline-block;
            width: 100%;
            background: #f8f8f8;
            border: 1px solid #fff;
            box-sizing: border-box;
            margin-bottom: 0;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }

.gallery-card.visible {
            opacity: 1;
            transform: translateY(0);
        }

.gallery-card img {
            width: 100%;
            height: auto;
            display: block;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

.gallery-card:hover img {
            transform: scale(1.05);
        }

.loading-indicator {
            text-align: center;
            padding: 20px;
            font-size: 16px;
            display: none;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>

</div>
        </aside>

<main style="flex:1">
            <h1 style="text-align:center">Recent Wallpapers</h1>
            <div id="div_gallery" class="gallery-grid"></div>
            <div id="loading" class="loading-indicator">Loading...</div>
        </main>

function filterCategory(category) {
                selected_category = category;
                page = 1;
                noMoreResults = false;
                isLoading = false;
                $('#loading').show();
                $('#div_gallery').fadeOut(150, () => {
                    $('#div_gallery').html('').fadeIn(150);
                });
                $('.category-filter button').removeClass('active');
                $('.category-filter button').filter(function() {
                    return $(this).text().trim() === (category || 'All');
                }).addClass('active');

if (categoryCache[category] && categoryCache[category].length > 0) {
                    $('#div_gallery').html(categoryCache[category]);
                    observeVisibleCards();
                    $('#loading').hide();
                } else {
                    loadWallpapers(selected_category);
                }
            }

function generateWallpaperCard(val) {
                return `
        <div id="card_${val.id}" class="gallery-card" data-listing-id="${val.id}">
          <a href="detail?id=${val.id}" title="${val.title}">
            <img id="tb_${val.id}" src="" alt="${val.title}" loading="lazy" />
          </a>
        </div>`;
            }

function loadImageWithProgress(imageUrl, targetSelector, id) {
                const $target = $(targetSelector);
                const containerId = `progress-container-${id}`;
                const barId = `progress-bar-${id}`;

$(`#${containerId}`).remove();
                const $progressBar = $(`
        <div id="${containerId}" class="image-progress-bar">
          <div id="${barId}" class="image-progress-bar-fill"></div>
        </div>`);
                $target.before($progressBar);

const xhr = new XMLHttpRequest();
                xhr.open("GET", imageUrl, true);
                xhr.responseType = "blob";

xhr.onprogress = function(event) {
                    if (event.lengthComputable) {
                        const percent = Math.round((event.loaded / event.total) * 100);
                        $(`#${barId}`).css("width", percent + "%");
                    }
                };

xhr.onload = function() {
                    if (xhr.status === 200) {
                        const url = URL.createObjectURL(xhr.response);
                        $target.hide().attr("src", url).fadeIn();
                        $(`#${containerId}`).fadeOut(300, function() {
                            $(this).remove();
                        });
                    } else {
                        showLoadError();
                    }
                };

xhr.onerror = showLoadError;
                xhr.send();

function showLoadError() {
                    console.error("Failed to load image:", imageUrl);
                    $(`#${containerId}`)
                        .css("background", "#f44336")
                        .css("color", "#fff")
                        .text("Failed to load image");
                    $target.addClass("image-error");
                }
            }

document.querySelectorAll('.gallery-card:not(.visible)').forEach(card => {
                    observer.observe(card);
                });
            }

function loadWallpapers(category = '') {
                if (isLoading || noMoreResults) return;
                isLoading = true;
                $('#loading').show();

$.ajax({
                    url: 'actions',
                    type: 'POST',
                    dataType: 'json',
                    data: $.param({
                        category,
                        action: 'get_wallpapers',
                        page
                    }),
                    success: function(result) {
                        if (!result.success || !result.data || result.data.length === 0) {
                            noMoreResults = true;
                            $('#loading').hide();
                            return;
                        }

const rows = result.data;
                        const html = rows.map(val => generateWallpaperCard(val)).join('');
                        $('#div_gallery').append(html);
                        rows.forEach(val => {
                            loadImageWithProgress(val.thumbnail, `#tb_${val.id}`, val.id);
                        });

observeVisibleCards();
                        categoryCache[category] = $('#div_gallery').html(); // ✅ Cache here
                        page++;
                        isLoading = false;
                        $('#loading').hide();
                    },
                    error: function() {
                        console.error('Failed to load wallpapers.');
                        isLoading = false;
                        $('#loading').hide();
                    }
                });
            }

$(document).ready(() => {
                loadWallpapers();

$(window).on('scroll', function() {
                    const scrollTop = $(window).scrollTop();
                    const windowHeight = $(window).height();
                    const documentHeight = $(document).height();

const scrollPercentage = (scrollTop + windowHeight) / documentHeight;

if (scrollPercentage >= 0.75 && !isLoading && !noMoreResults) {
                        loadWallpapers(selected_category);
                    }
                });
            });
        </script>
</body>

</html>

${this.title}

Code Editor : index2.php