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

Free Space:

10.3 TB

🔧 Quick Actions

✏️ Editing: crack.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Sivakasi Diwali Crackers - Light Up Your Festivities</title>
  
  
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
  
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  
  <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
  
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
  
  <style>
    /* Global Styles */
    body {
      font-family: 'Poppins', sans-serif;
      background: #FFF5E6;
      color: #333;
    }
    :root {
      --primary: #D32F2F;    /* Diwali Red */
      --secondary: #FFD700;  /* Gold */
      --light: #FFF5E6;
      --accent: #FF6F00;     /* Vibrant Orange */
    }

/* Header */
    header {
      background: linear-gradient(90deg, var(--primary), var(--accent));
      color: white;
    }
    .logo {
      font-weight: 600;
    }
    .header-tagline {
      font-size: 1rem;
      font-style: italic;
    }

/* Table Styles */
    .table thead {
      background-color: var(--secondary);
      color: #333;
      font-weight: bold;
      font-size: 1rem;
    }
    .table-hover tbody tr:hover {
      background-color: rgba(211, 47, 47, 0.1);
    }
    .product-img {
      width: 80px;
      height: 60px;
      object-fit: cover;
      border-radius: 4px;
      border: 2px solid var(--accent);
    }
    .quantity-input {
      width: 60px;
      text-align: center;
      font-size: 1rem;
    }

/* Striking the Actual Price */
    .strikethrough {
      text-decoration: line-through;
      color: #888;
    }

/* Buttons */
    .btn-primary {
      background-color: var(--primary);
      border-color: var(--primary);
      transition: background-color 0.3s, border-color 0.3s;
    }
    .btn-primary:hover {
      background-color: var(--accent);
      border-color: var(--accent);
    }

/* Footer */
    footer {
      background-color: #f8f9fa;
      padding: 1rem 0;
      text-align: center;
      margin-top: 2rem;
    }

/* Bill Section Styles */
    .bill-section {
      margin-top: 20px;
      padding: 15px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    }
    .bill-section .total-value {
      font-size: 1.5rem;
      font-weight: bold;
    }
    .bill-section .bill-header {
      font-size: 1.2rem;
      margin-bottom: 10px;
    }
    
    .category-header {
      background-color: #FFD700;
      font-weight: bold;
      font-size: 1.1rem;
      padding: 5px;
    }
  </style>
</head>
<body>
  
  <header class="sticky-top py-2 shadow-sm">
    <div class="container d-flex justify-content-between align-items-center">
      <div>
        <h1 class="m-0 animate__animated animate__fadeInLeft logo">Sivakasi Sparkle</h1>
        <p class="m-0 header-tagline">Celebrate Diwali with Premium Crackers from Sivakasi</p>
      </div>
    </div>
  </header>
  
  <main class="container my-5">
    
    <div class="table-responsive" data-aos="fade-up">
      <table class="table table-striped table-hover align-middle">
        <thead>
          <tr>
            <th>Image</th>
            <th>Cracker</th>
            <th>Normal Price</th>
            <th>Discount Price</th>
            <th>Quantity</th>
            <th>Total</th>
          </tr>
        </thead>
        <tbody id="productContainer">
          
        </tbody>
      </table>
    </div>
    <div class="text-center my-4">
      <button id="loadMore" class="btn btn-primary px-5" onclick="loadMore()">
        Load More <span class="spinner-border spinner-border-sm d-none"></span>
      </button>
    </div>

<div class="bill-section">
      <div class="bill-header">Total Bill</div>
      <div id="billProducts"></div>
      <div class="d-flex justify-content-between">
        <div>Total Value:</div>
        <div id="totalValue" class="total-value">₹0.00</div>
      </div>
    </div>
  </main>
  
  
  <footer>
    <div class="container">
      <p>&copy; 2025 Sivakasi Sparkle. All rights reserved.</p>
    </div>
  </footer>
  
  
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
  <script>
    AOS.init({ duration: 1000 });
    let cart = [];
    let visibleItems = 6;

// Updated product list with categories
    const products = [
      {
        id: 1,
        name: "Classic Anar",
        price: 120,
        discountPrice: 100,
        category: "Crackers",
        img: "https://images.pexels.com/photos/128321/pexels-photo-128321.jpeg?auto=compress&cs=tinysrgb&w=80&h=60"
      },
      {
        id: 2,
        name: "Chakri Spinner",
        price: 80,
        discountPrice: 60,
        category: "Crackers",
        img: "https://images.pexels.com/photos/277253/pexels-photo-277253.jpeg?auto=compress&cs=tinysrgb&w=80&h=60"
      },
      {
        id: 3,
        name: "Fuljhari Sparkler",
        price: 40,
        discountPrice: 35,
        category: "Sparklers",
        img: "https://images.pexels.com/photos/462353/pexels-photo-462353.jpeg?auto=compress&cs=tinysrgb&w=80&h=60"
      },
      {
        id: 6,
        name: "Sparklers Deluxe",
        price: 70,
        discountPrice: 60,
        category: "Sparklers",
        img: "https://images.pexels.com/photos/139149/pexels-photo-139149.jpeg?auto=compress&cs=tinysrgb&w=80&h=60"
      },
      {
        id: 8,
        name: "Dhamaal Bomb",
        price: 110,
        discountPrice: 90,
        category: "Crackers",
        img: "https://images.pexels.com/photos/414171/pexels-photo-414171.jpeg?auto=compress&cs=tinysrgb&w=80&h=60"
      },
      {
        id: 9,
        name: "Twinkling Takkar",
        price: 95,
        discountPrice: 85,
        category: "Sparklers",
        img: "https://images.pexels.com/photos/708587/pexels-photo-708587.jpeg?auto=compress&cs=tinysrgb&w=80&h=60"
      },
      {
        id: 10,
        name: "Firecracker Extravaganza",
        price: 180,
        discountPrice: 160,
        category: "Crackers",
        img: "https://images.pexels.com/photos/301920/pexels-photo-301920.jpeg?auto=compress&cs=tinysrgb&w=80&h=60"
      }
    ];

container.innerHTML = htmlContent;
    }

function adjustQuantity(button, delta) {
      const input = button.parentElement.querySelector('input');
      let current = parseInt(input.value);
      current = isNaN(current) ? 0 : current;
      current = current + delta < 0 ? 0 : current + delta;
      input.value = current;
      
      // Update total for this row
      updateRowTotal(input);
    }

function updateRowTotal(input) {
      let current = parseInt(input.value);
      if (isNaN(current) || current < 0) {
        current = 0;
        input.value = 0;
      }
      const row = input.closest('tr');
      const price = parseFloat(input.dataset.price);
      const totalCell = row.querySelector('.total-amount');
      totalCell.textContent = "₹" + (price * current).toFixed(2);
      
      // Update the total bill section
      updateBill();
    }

function updateBill() {
      const billProductsContainer = document.getElementById('billProducts');
      let totalValue = 0;
      billProductsContainer.innerHTML = '';
      
      products.forEach(product => {
        const quantity = document.querySelector(`input[data-price="${product.discountPrice}"]`).value;
        const productTotal = product.discountPrice * quantity;
        totalValue += productTotal;

if (quantity > 0) {
          billProductsContainer.innerHTML += `
            <div class="d-flex justify-content-between">
              <div>${product.name} (x${quantity})</div>
              <div>₹${productTotal.toFixed(2)}</div>
            </div>
          `;
        }
      });

document.getElementById('totalValue').textContent = `₹${totalValue.toFixed(2)}`;
    }

function loadMore() {
      visibleItems = Math.min(visibleItems + 4, products.length);
      renderProducts();
      if (visibleItems >= products.length) {
        document.getElementById('loadMore').disabled = true;
      }
    }

function toggleCart() {
      // Implementation for toggling the cart sidebar/modal can be added here.
      alert("Cart functionality is under development.");
    }

// Initial render of products
    renderProducts();
  </script>
</body>
</html>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: crack.html

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation