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/goldartsdpi.in/public_html

Free Space:

10.3 TB

🔧 Quick Actions

✏️ Editing: shopping-cart.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rutzo | Grocery Store - Shopping Cart</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        :root {
            --primary-color: #f55266;
            --secondary-color: #6c757d;
            --success-color: #33b36b;
            --warning-color: #fc9231;
            --danger-color: #f03d3d;
            --info-color: #2f6ed5;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f8f9fa;
        }
        
        .product-card {
            transition: transform 0.3s ease;
        }
        
        .product-card:hover {
            transform: translateY(-5px);
        }
        
        .count-input {
            display: flex;
            align-items: center;
            background-color: #f8f9fa;
            padding: 0.25rem;
            border-radius: 50px;
        }
        
        .count-input button {
            border: none;
            background: transparent;
            width: 2rem;
            height: 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }
        
        .count-input input {
            width: 2.5rem;
            text-align: center;
            border: none;
            background: transparent;
        }
        
        .cart-count-badge {
            font-size: 0.7rem;
            width: 1.2rem;
            height: 1.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: -5px;
            right: -5px;
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .btn-primary:hover {
            background-color: #e04457;
            border-color: #e04457;
        }
        
        .hover-effect-underline {
            position: relative;
            text-decoration: none;
            color: inherit;
        }
        
        .hover-effect-underline::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -2px;
            left: 0;
            background-color: currentColor;
            transition: width 0.3s ease;
        }
        
        .hover-effect-underline:hover::after {
            width: 100%;
        }
        
        .toast-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
        }
        
        .toast {
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
            border-radius: 0.5rem;
        }
        
        .animate-pulse {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .offcanvas {
            box-shadow: -5px 0 30px rgba(0, 0, 0, 0.1);
        }
        
        .cart-item {
            border-bottom: 1px solid #eee;
            padding-bottom: 1rem;
            margin-bottom: 1rem;
        }
        
        .cart-item:last-child {
            border-bottom: none;
        }
    </style>
</head>
<body>
    
    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm py-3">
        <div class="container">
            <a class="navbar-brand fw-bold text-primary" href="#">Rutzo</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Shop</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Categories</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Recipes</a>
                    </li>
                </ul>
                <div class="d-flex align-items-center">
                    <a href="#" class="text-dark me-3">
                        <i class="bi bi-search fs-5"></i>
                    </a>
                    <a href="#" class="text-dark me-3 position-relative">
                        <i class="bi bi-heart fs-5"></i>
                    </a>
                    <a href="#shoppingCart" class="text-dark position-relative" data-bs-toggle="offcanvas" role="button">
                        <i class="bi bi-cart3 fs-5"></i>
                        <span class="cart-count-badge badge bg-primary rounded-pill" id="cartCount">0</span>
                    </a>
                </div>
            </div>
        </div>
    </nav>

<main class="container my-5">
        <div class="row">
            <div class="col-md-8">
                <h2 class="mb-4">Popular Products</h2>
                <div class="row" id="productGrid">
                    
                </div>
            </div>
            <div class="col-md-4">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <h5 class="card-title">Special Offers</h5>
                        <div class="alert alert-info">
                            <i class="bi bi-truck me-2"></i> Free delivery on orders over $50
                        </div>
                        <div class="alert alert-warning">
                            <i class="bi bi-lightning me-2"></i> Flash sale: 20% off on fruits
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

<div class="offcanvas offcanvas-end" tabindex="-1" id="shoppingCart" aria-labelledby="shoppingCartLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="shoppingCartLabel">Shopping Cart</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <div id="cartItems">
                
            </div>
            <div class="mt-4 pt-3 border-top">
                <div class="d-flex justify-content-between mb-2">
                    <span>Subtotal:</span>
                    <span id="cartSubtotal">$0.00</span>
                </div>
                <div class="d-flex justify-content-between mb-3">
                    <span>Shipping:</span>
                    <span id="cartShipping">$0.00</span>
                </div>
                <div class="d-flex justify-content-between fw-bold fs-5">
                    <span>Total:</span>
                    <span id="cartTotal">$0.00</span>
                </div>
                <div class="alert alert-success mt-3 d-none" id="freeShippingAlert">
                    <i class="bi bi-check-circle me-2"></i> You've qualified for free shipping!
                </div>
                <div class="d-grid gap-2 mt-4">
                    <button class="btn btn-primary btn-lg rounded-pill">Checkout</button>
                    <button class="btn btn-outline-secondary rounded-pill">Continue Shopping</button>
                </div>
            </div>
        </div>
    </div>

<div class="toast-container"></div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Sample product data
        const products = [
            {
                id: 1,
                name: "Fresh Orange Klementina, Spain",
                price: 3.12,
                originalPrice: 4.05,
                image: "https://via.placeholder.com/150",
                weight: "1kg",
                category: "Fruits"
            },
            {
                id: 2,
                name: "Pesto Sauce Barilla with Basil, Italy",
                price: 3.95,
                image: "https://via.placeholder.com/150",
                weight: "200g",
                category: "Sauces"
            },
            {
                id: 3,
                name: "Steak Salmon Fillet with Rosemary",
                price: 27.00,
                image: "https://via.placeholder.com/150",
                weight: "500g",
                category: "Seafood"
            },
            {
                id: 4,
                name: "Sprite Soda Lemon Lime, Can",
                price: 0.80,
                image: "https://via.placeholder.com/150",
                weight: "330ml",
                category: "Beverages"
            },
            {
                id: 5,
                name: "Muesli Fitness Nutritious Energy, Gluten Free",
                price: 2.15,
                image: "https://via.placeholder.com/150",
                weight: "500g",
                category: "Cereals"
            },
            {
                id: 6,
                name: "Soft Creme Cheese with Greens Exquisa",
                price: 2.59,
                image: "https://via.placeholder.com/150",
                weight: "150g",
                category: "Dairy"
            }
        ];

// Cart functionality
        let cart = JSON.parse(localStorage.getItem('cart')) || [];

// Display products
        function renderProducts() {
            const productGrid = document.getElementById('productGrid');
            productGrid.innerHTML = '';
            
            products.forEach(product => {
                const isInCart = cart.some(item => item.id === product.id);
                const discountPercent = product.originalPrice ? 
                    Math.round(((product.originalPrice - product.price) / product.originalPrice) * 100) : 0;
                
                const productCard = document.createElement('div');
                productCard.className = 'col-md-6 col-lg-4 mb-4';
                productCard.innerHTML = `
                    <div class="card product-card h-100">
                        <div class="position-relative">
                            ${discountPercent > 0 ? 
                                `<span class="badge bg-danger position-absolute top-0 start-0 m-2">-${discountPercent}%</span>` : ''}
                            <img src="${product.image}" class="card-img-top" alt="${product.name}">
                            <button class="btn btn-sm btn-secondary position-absolute top-0 end-0 m-2 animate-pulse">
                                <i class="bi bi-heart"></i>
                            </button>
                        </div>
                        <div class="card-body">
                            <h5 class="card-title fs-6">${product.name}</h5>
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <div>
                                    <span class="fw-bold text-primary">$${product.price.toFixed(2)}</span>
                                    ${product.originalPrice ? 
                                        `<del class="text-muted small ms-1">$${product.originalPrice.toFixed(2)}</del>` : ''}
                                </div>
                                <span class="badge bg-light text-dark">${product.weight}</span>
                            </div>
                            <button class="btn btn-primary w-100 btn-add-to-cart" data-product-id="${product.id}">
                                <i class="bi bi-cart-plus me-1"></i> 
                                ${isInCart ? 'Added to Cart' : 'Add to Cart'}
                            </button>
                        </div>
                    </div>
                `;
                productGrid.appendChild(productCard);
            });
            
            // Add event listeners to Add to Cart buttons
            document.querySelectorAll('.btn-add-to-cart').forEach(button => {
                button.addEventListener('click', function() {
                    const productId = parseInt(this.getAttribute('data-product-id'));
                    addToCart(productId);
                });
            });
        }

// Add product to cart
        function addToCart(productId) {
            const product = products.find(p => p.id === productId);
            if (!product) return;
            
            const existingItem = cart.find(item => item.id === productId);
            
            if (existingItem) {
                existingItem.quantity += 1;
            } else {
                cart.push({
                    id: product.id,
                    name: product.name,
                    price: product.price,
                    image: product.image,
                    weight: product.weight,
                    quantity: 1
                });
            }
            
            // Save to localStorage
            localStorage.setItem('cart', JSON.stringify(cart));
            
            // Update UI
            updateCartUI();
            
            // Show success message
            showToast(`${product.name} added to cart!`, 'success');
            
            // Update button text
            const addButton = document.querySelector(`.btn-add-to-cart[data-product-id="${productId}"]`);
            if (addButton) {
                addButton.innerHTML = '<i class="bi bi-cart-check me-1"></i> Added to Cart';
                addButton.classList.add('btn-success');
                setTimeout(() => {
                    addButton.innerHTML = '<i class="bi bi-cart-plus me-1"></i> Add to Cart';
                    addButton.classList.remove('btn-success');
                }, 2000);
            }
        }

// Remove product from cart
        function removeFromCart(productId) {
            cart = cart.filter(item => item.id !== productId);
            localStorage.setItem('cart', JSON.stringify(cart));
            updateCartUI();
            
            const product = products.find(p => p.id === productId);
            if (product) {
                showToast(`${product.name} removed from cart`, 'info');
            }
        }

// Update cart quantity
        function updateQuantity(productId, change) {
            const item = cart.find(item => item.id === productId);
            if (item) {
                item.quantity += change;
                
                if (item.quantity <= 0) {
                    removeFromCart(productId);
                } else {
                    localStorage.setItem('cart', JSON.stringify(cart));
                    updateCartUI();
                }
            }
        }

// Update cart UI
        function updateCartUI() {
            const cartItems = document.getElementById('cartItems');
            const cartCount = document.getElementById('cartCount');
            const cartSubtotal = document.getElementById('cartSubtotal');
            const cartShipping = document.getElementById('cartShipping');
            const cartTotal = document.getElementById('cartTotal');
            const freeShippingAlert = document.getElementById('freeShippingAlert');
            
            // Update cart count
            const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
            cartCount.textContent = totalItems;
            
            // Calculate totals
            const subtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
            const shipping = subtotal > 50 ? 0 : 5;
            const total = subtotal + shipping;
            
            cartSubtotal.textContent = `$${subtotal.toFixed(2)}`;
            cartShipping.textContent = shipping === 0 ? 'FREE' : `$${shipping.toFixed(2)}`;
            cartTotal.textContent = `$${total.toFixed(2)}`;
            
            // Show/hide free shipping alert
            if (subtotal > 50) {
                freeShippingAlert.classList.remove('d-none');
            } else {
                freeShippingAlert.classList.add('d-none');
            }
            
            // Render cart items
            if (cart.length === 0) {
                cartItems.innerHTML = `
                    <div class="text-center py-4">
                        <i class="bi bi-cart-x text-muted" style="font-size: 3rem;"></i>
                        <p class="text-muted mt-3">Your cart is empty</p>
                        <button class="btn btn-primary rounded-pill mt-2" data-bs-dismiss="offcanvas">Start Shopping</button>
                    </div>
                `;
                return;
            }
            
            cartItems.innerHTML = '';
            cart.forEach(item => {
                const cartItem = document.createElement('div');
                cartItem.className = 'cart-item';
                cartItem.innerHTML = `
                    <div class="d-flex align-items-center">
                        <img src="${item.image}" alt="${item.name}" width="60" height="60" class="rounded">
                        <div class="ms-3 flex-grow-1">
                            <h6 class="mb-0">${item.name}</h6>
                            <div class="d-flex align-items-center justify-content-between mt-1">
                                <span class="text-primary fw-bold">$${item.price.toFixed(2)}</span>
                                <span class="badge bg-light text-dark">${item.weight}</span>
                            </div>
                            <div class="d-flex align-items-center justify-content-between mt-2">
                                <div class="count-input">
                                    <button type="button" class="btn btn-sm" onclick="updateQuantity(${item.id}, -1)">
                                        <i class="bi bi-dash"></i>
                                    </button>
                                    <input type="number" value="${item.quantity}" min="1" readonly>
                                    <button type="button" class="btn btn-sm" onclick="updateQuantity(${item.id}, 1)">
                                        <i class="bi bi-plus"></i>
                                    </button>
                                </div>
                                <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeFromCart(${item.id})">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                `;
                cartItems.appendChild(cartItem);
            });
        }

// Show toast notification
        function showToast(message, type = 'info') {
            const toastContainer = document.querySelector('.toast-container');
            const toastId = 'toast-' + Date.now();
            
            const toast = document.createElement('div');
            toast.className = `toast align-items-center text-white bg-${type} border-0`;
            toast.id = toastId;
            toast.setAttribute('role', 'alert');
            toast.setAttribute('aria-live', 'assertive');
            toast.setAttribute('aria-atomic', 'true');
            
            toast.innerHTML = `
                <div class="d-flex">
                    <div class="toast-body">
                        <i class="bi ${type === 'success' ? 'bi-check-circle' : 'bi-info-circle'} me-2"></i>
                        ${message}
                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
                </div>
            `;
            
            toastContainer.appendChild(toast);
            
            const bsToast = new bootstrap.Toast(toast, {
                autohide: true,
                delay: 3000
            });
            
            bsToast.show();
            
            // Remove toast from DOM after it's hidden
            toast.addEventListener('hidden.bs.toast', function() {
                toast.remove();
            });
        }

// Initialize the page
        document.addEventListener('DOMContentLoaded', function() {
            renderProducts();
            updateCartUI();
            
            // Show cart if URL has #shoppingCart
            if (window.location.hash === '#shoppingCart') {
                const cartOffcanvas = new bootstrap.Offcanvas(document.getElementById('shoppingCart'));
                cartOffcanvas.show();
            }
        });

// Make functions available globally for onclick attributes
        window.addToCart = addToCart;
        window.removeFromCart = removeFromCart;
        window.updateQuantity = updateQuantity;
    </script>
</body>
</html>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: shopping-cart.html

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation