File manager

File manager - Edit - /home/asiatechinc/public_html/asiatech-websites/mayergramprsfarm.in/admin/edit-gallery.php

Back
<?php session_start(); if(!isset($_SESSION['admin'])){ header("Location: login.php"); exit; } $file = "../data/gallery.json"; // Load existing data $data = json_decode(file_get_contents($file), true); // Handle form submission if($_SERVER['REQUEST_METHOD'] === 'POST'){ // Subheader section $data['subheader']['title'] = $_POST['subheader_title']; $data['subheader']['breadcrumb_text'] = $_POST['subheader_breadcrumb']; // Categories $categories = []; $categoryNames = $_POST['category_name'] ?? []; $categoryFilters = $_POST['category_filter'] ?? []; for($i = 0; $i < count($categoryNames); $i++){ if(!empty(trim($categoryNames[$i]))){ $categories[] = [ 'name' => trim($categoryNames[$i]), 'filter' => trim($categoryFilters[$i]) ]; } } $data['categories'] = $categories; // Images $images = []; $imageSrcs = $_POST['image_src'] ?? []; $imageAlts = $_POST['image_alt'] ?? []; $imageCategories = $_POST['image_category'] ?? []; $imageTitles = $_POST['image_title'] ?? []; for($i = 0; $i < count($imageSrcs); $i++){ if(!empty(trim($imageSrcs[$i]))){ $images[] = [ 'src' => trim($imageSrcs[$i]), 'alt' => trim($imageAlts[$i]), 'category' => trim($imageCategories[$i]), 'title' => trim($imageTitles[$i]) ]; } } $data['images'] = $images; // Save to file file_put_contents($file, json_encode($data, JSON_PRETTY_PRINT)); // Redirect to prevent form resubmission header("Location: edit-gallery.php?success=1"); exit; } ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Edit Gallery \| Mayer Gram Admin</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <style> :root { --primary-color: #2c3e50; --secondary-color: #3498db; --accent-color: #2ecc71; --light-color: #f8f9fa; --dark-color: #34495e; --sidebar-width: 250px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; } .editor-container { display: flex; min-height: 100vh; } /* Sidebar Styles / .sidebar { width: var(--sidebar-width); background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); padding: 30px 0; box-shadow: 5px 0 25px rgba(0, 0, 0, 0.1); position: fixed; height: 100vh; overflow-y: auto; z-index: 1000; } .sidebar-header { text-align: center; padding: 0 20px 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); margin-bottom: 20px; } .logo { width: 60px; height: 60px; background: linear-gradient(45deg, #3498db, #2ecc71); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px; box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3); } .logo i { font-size: 28px; color: white; } .sidebar-header h3 { font-weight: 600; color: var(--primary-color); font-size: 18px; } / Navigation / .sidebar-nav ul { list-style: none; padding: 0; } .sidebar-nav li { margin: 5px 15px; } .sidebar-nav a { display: flex; align-items: center; padding: 12px 15px; color: var(--dark-color); text-decoration: none; border-radius: 10px; transition: all 0.3s ease; font-weight: 500; } .sidebar-nav a:hover { background: linear-gradient(45deg, #3498db, #2ecc71); color: white; transform: translateX(5px); box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3); } .sidebar-nav a.active { background: linear-gradient(45deg, #3498db, #2ecc71); color: white; box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3); } .sidebar-nav i { width: 25px; font-size: 16px; margin-right: 10px; } / Main Content / .main-content { flex: 1; margin-left: var(--sidebar-width); padding: 30px; } .content-wrapper { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-radius: 20px; padding: 30px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); min-height: calc(100vh - 60px); } / Header / .content-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .page-title { color: var(--primary-color); font-weight: 700; font-size: 28px; } .page-title i { color: var(--secondary-color); margin-right: 10px; } .action-buttons { display: flex; gap: 10px; } / Success Alert / .success-alert { position: fixed; top: 20px; right: 20px; z-index: 9999; background: linear-gradient(45deg, #2ecc71, #27ae60); color: white; border: none; border-radius: 10px; padding: 15px 25px; box-shadow: 0 10px 25px rgba(46, 204, 113, 0.3); animation: slideInRight 0.5s ease-out; } @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } / Section Cards / .section-card { background: white; border-radius: 15px; padding: 25px; margin-bottom: 25px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); border-left: 5px solid var(--secondary-color); transition: transform 0.3s ease, box-shadow 0.3s ease; } .section-card:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #f1f2f6; } .section-title { color: var(--primary-color); font-weight: 600; font-size: 20px; margin: 0; } .section-title i { color: var(--secondary-color); margin-right: 10px; } / Form Styles / .form-label { font-weight: 500; color: var(--dark-color); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } .form-label i { color: var(--secondary-color); } .form-control, .form-select, textarea.form-control { border: 2px solid #e0e6ed; border-radius: 10px; padding: 12px 15px; font-size: 14px; transition: all 0.3s ease; background: #f8fafc; } .form-control:focus, .form-select:focus, textarea.form-control:focus { border-color: var(--secondary-color); box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2); background: white; outline: none; } / Item Cards / .item-card { background: #f8fafc; border-radius: 12px; padding: 20px; margin-bottom: 15px; border: 1px solid #e0e6ed; transition: all 0.3s ease; } .item-card:hover { border-color: var(--secondary-color); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); } .item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .item-title { font-weight: 600; color: var(--primary-color); font-size: 16px; } / Image Preview / .image-preview-container { margin-bottom: 15px; text-align: center; } .image-preview { max-width: 100%; max-height: 200px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); border: 3px solid white; } / Image Upload / .image-upload-container { margin-bottom: 15px; } .image-input-group { position: relative; } .btn-image-select { position: absolute; right: 5px; top: 5px; background: linear-gradient(45deg, #3498db, #2ecc71); color: white; border: none; border-radius: 8px; padding: 8px 15px; cursor: pointer; transition: all 0.3s ease; } .btn-image-select:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3); } / Buttons / .btn { padding: 10px 20px; border-radius: 10px; font-weight: 500; transition: all 0.3s ease; border: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .btn-primary { background: linear-gradient(45deg, #3498db, #2ecc71); color: white; box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(52, 152, 219, 0.4); } .btn-secondary { background: #6c757d; color: white; } .btn-info { background: #17a2b8; color: white; } .btn-danger { background: linear-gradient(45deg, #e74c3c, #c0392b); color: white; box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3); } .btn-danger:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(231, 76, 60, 0.4); } .btn-add { background: linear-gradient(45deg, #3498db, #2ecc71); color: white; border: none; padding: 10px 20px; border-radius: 10px; font-weight: 500; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3); } .btn-add:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(52, 152, 219, 0.4); } / Responsive / @media (max-width: 992px) { .sidebar { width: 70px; padding: 20px 0; } .sidebar-header h3, .sidebar-nav span { display: none; } .sidebar-nav i { margin-right: 0; width: 100%; text-align: center; } .main-content { margin-left: 70px; padding: 20px; } .content-wrapper { padding: 20px; } } @media (max-width: 768px) { .editor-container { flex-direction: column; } .sidebar { width: 100%; height: auto; position: relative; padding: 15px; } .main-content { margin-left: 0; padding: 15px; } .content-header { flex-direction: column; gap: 15px; text-align: center; } } / Custom Scrollbar / ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } ::-webkit-scrollbar-thumb { background: linear-gradient(45deg, #3498db, #2ecc71); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(45deg, #2980b9, #27ae60); } / Animation / @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeIn 0.5s ease-out; } </style> </head> <body> <div class="editor-container"> <!-- Sidebar --> <aside class="sidebar"> <div class="sidebar-header"> <div class="logo"> <i class="fas fa-images"></i> </div> <h3>Gallery Editor</h3> </div> <nav class="sidebar-nav"> <ul> <li> <a href="dashboard.php"> <i class="fas fa-arrow-left"></i> <span>Back to Dashboard</span> </a> </li> <li> <a href="#header" onclick="switchTab('header')" class="active"> <i class="fas fa-heading"></i> <span>Page Header</span> </a> </li> <li> <a href="#categories" onclick="switchTab('categories')"> <i class="fas fa-tags"></i> <span>Categories</span> </a> </li> <li> <a href="#images" onclick="switchTab('images')"> <i class="fas fa-image"></i> <span>Gallery Images</span> </a> </li> </ul> </nav> </aside> <!-- Main Content --> <main class="main-content"> <div class="content-wrapper fade-in"> <!-- Header --> <div class="content-header"> <h1 class="page-title"><i class="fas fa-images"></i> Edit Gallery Page</h1> <div class="action-buttons"> <a href="gallery.php" target="_blank" class="btn btn-info"> <i class="fas fa-eye"></i> Preview </a> <a href="../data/gallery.json" target="_blank" class="btn btn-secondary"> <i class="fas fa-code"></i> View JSON </a> </div> </div> <?php if(isset($_GET['success'])): ?> <div class="alert alert-success success-alert alert-dismissible fade show" role="alert"> <i class="fas fa-check-circle"></i> Gallery updated successfully! <button type="button" class="btn-close" data-bs-dismiss="alert" onclick="this.parentElement.remove()"></button> </div> <?php endif; ?> <!-- Editor Form --> <form method="post" id="galleryForm"> <!-- Page Header Section --> <div id="header-section" class="section-card"> <div class="section-header"> <h4 class="section-title"><i class="fas fa-heading"></i> Page Header</h4> </div> <div class="mb-3"> <label class="form-label"><i class="fas fa-title"></i> Page Title</label> <input type="text" class="form-control" name="subheader_title" value="<?php echo htmlspecialchars($data['subheader']['title']); ?>" required> </div> <div class="mb-3"> <label class="form-label"><i class="fas fa-bread-slice"></i> Breadcrumb Text</label> <input type="text" class="form-control" name="subheader_breadcrumb" value="<?php echo htmlspecialchars($data['subheader']['breadcrumb_text']); ?>" required> </div> </div> <!-- Categories Section --> <div id="categories-section" class="section-card" style="display: none;"> <div class="section-header"> <h4 class="section-title"><i class="fas fa-tags"></i> Gallery Categories</h4> </div> <div id="categories-container"> <?php foreach($data['categories'] as $index => $category): ?> <div class="item-card category-card"> <div class="item-header"> <h6 class="item-title">Category <?php echo $index + 1; ?></h6> <button type="button" class="btn btn-danger btn-sm" onclick="removeCategory(this)"> <i class="fas fa-trash"></i> Remove </button> </div> <div class="row"> <div class="col-md-6"> <div class="mb-3"> <label class="form-label"><i class="fas fa-tag"></i> Category Name</label> <input type="text" class="form-control" name="category_name[]" value="<?php echo htmlspecialchars($category['name']); ?>" required> </div> </div> <div class="col-md-6"> <div class="mb-3"> <label class="form-label"><i class="fas fa-filter"></i> Filter Class</label> <input type="text" class="form-control" name="category_filter[]" value="<?php echo htmlspecialchars($category['filter']); ?>" required> <small class="text-muted">Use CSS class (e.g., .accommodation)</small> </div> </div> </div> </div> <?php endforeach; ?> </div> <button type="button" class="btn btn-add w-100" onclick="addCategory()"> <i class="fas fa-plus"></i> Add New Category </button> </div> <!-- Images Section --> <div id="images-section" class="section-card" style="display: none;"> <div class="section-header"> <h4 class="section-title"><i class="fas fa-image"></i> Gallery Images</h4> </div> <div id="images-container"> <?php foreach($data['images'] as $index => $image): ?> <div class="item-card image-card"> <div class="item-header"> <h6 class="item-title">Image <?php echo $index + 1; ?></h6> <button type="button" class="btn btn-danger btn-sm" onclick="removeImage(this)"> <i class="fas fa-trash"></i> Remove </button> </div> <div class="image-preview-container"> <img src="../<?php echo htmlspecialchars($image['src']); ?>" alt="Preview" class="image-preview" onerror="this.style.display='none'"> </div> <div class="row"> <div class="col-md-6"> <div class="mb-3"> <label class="form-label"><i class="fas fa-image"></i> Image Path</label> <div class="image-input-group"> <input type="text" class="form-control image-path" name="image_src[]" value="<?php echo htmlspecialchars($image['src']); ?>" placeholder="Select or enter image path" onchange="updateImagePreview(this)"> <button type="button" class="btn btn-image-select" onclick="openImagePicker(this)"> <i class="fas fa-folder-open"></i> </button> </div> </div> <div class="mb-3"> <label class="form-label"><i class="fas fa-heading"></i> Image Title</label> <input type="text" class="form-control" name="image_title[]" value="<?php echo htmlspecialchars($image['title']); ?>" required> </div> </div> <div class="col-md-6"> <div class="mb-3"> <label class="form-label"><i class="fas fa-alt"></i> Alt Text</label> <input type="text" class="form-control" name="image_alt[]" value="<?php echo htmlspecialchars($image['alt']); ?>" required> </div> <div class="mb-3"> <label class="form-label"><i class="fas fa-tag"></i> Category</label> <select class="form-control" name="image_category[]" required> <option value="">Select Category</option> <?php foreach($data['categories'] as $category): ?> <?php if($category['filter'] !== ''): ?> <?php $filterClass = str_replace('.', '', $category['filter']); ?> <option value="<?php echo htmlspecialchars($filterClass); ?>" <?php echo ($image['category'] === $filterClass) ? 'selected' : ''; ?>> <?php echo htmlspecialchars($category['name']); ?> </option> <?php endif; ?> <?php endforeach; ?> </select> </div> </div> </div> </div> <?php endforeach; ?> </div> <button type="button" class="btn btn-add w-100" onclick="addImage()"> <i class="fas fa-plus"></i> Add New Image </button> </div> <!-- Submit Button --> <div class="text-center mt-4"> <button type="submit" class="btn btn-primary btn-lg"> <i class="fas fa-save"></i> Save All Changes </button> </div> </form> </div> </main> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <script> // Tab switching function switchTab(tabId) { // Hide all sections document.getElementById('header-section').style.display = 'none'; document.getElementById('categories-section').style.display = 'none'; document.getElementById('images-section').style.display = 'none'; // Show selected section document.getElementById(tabId + '-section').style.display = 'block'; // Update sidebar active state document.querySelectorAll('.sidebar-nav a').forEach(link => { link.classList.remove('active'); }); document.querySelector(`.sidebar-nav a[href="#${tabId}"]`).classList.add('active'); } // Initialize with header section document.addEventListener('DOMContentLoaded', function() { switchTab('header'); }); // Category Functions function addCategory() { const container = document.getElementById('categories-container'); const index = container.children.length + 1; const div = document.createElement('div'); div.className = 'item-card category-card'; div.innerHTML = ` <div class="item-header"> <h6 class="item-title">Category ${index}</h6> <button type="button" class="btn btn-danger btn-sm" onclick="removeCategory(this)"> <i class="fas fa-trash"></i> Remove </button> </div> <div class="row"> <div class="col-md-6"> <div class="mb-3"> <label class="form-label"><i class="fas fa-tag"></i> Category Name</label> <input type="text" class="form-control" name="category_name[]" required> </div> </div> <div class="col-md-6"> <div class="mb-3"> <label class="form-label"><i class="fas fa-filter"></i> Filter Class</label> <input type="text" class="form-control" name="category_filter[]" required> <small class="text-muted">Use CSS class (e.g., .accommodation)</small> </div> </div> </div> `; container.appendChild(div); } function removeCategory(button) { if(confirm('Are you sure you want to remove this category? All images in this category will need to be reassigned.')) { button.closest('.category-card').remove(); } } // Image Functions function addImage() { const container = document.getElementById('images-container'); const index = container.children.length + 1; const div = document.createElement('div'); div.className = 'item-card image-card'; div.innerHTML = ` <div class="item-header"> <h6 class="item-title">Image ${index}</h6> <button type="button" class="btn btn-danger btn-sm" onclick="removeImage(this)"> <i class="fas fa-trash"></i> Remove </button> </div> <div class="image-preview-container"> <!-- Preview will be added here when image is selected --> </div> <div class="row"> <div class="col-md-6"> <div class="mb-3"> <label class="form-label"><i class="fas fa-image"></i> Image Path</label> <div class="image-input-group"> <input type="text" class="form-control image-path" name="image_src[]" placeholder="Select or enter image path" onchange="updateImagePreview(this)"> <button type="button" class="btn btn-image-select" onclick="openImagePicker(this)"> <i class="fas fa-folder-open"></i> </button> </div> </div> <div class="mb-3"> <label class="form-label"><i class="fas fa-heading"></i> Image Title</label> <input type="text" class="form-control" name="image_title[]" required> </div> </div> <div class="col-md-6"> <div class="mb-3"> <label class="form-label"><i class="fas fa-alt"></i> Alt Text</label> <input type="text" class="form-control" name="image_alt[]" required> </div> <div class="mb-3"> <label class="form-label"><i class="fas fa-tag"></i> Category</label> <select class="form-control" name="image_category[]" required> <option value="">Select Category</option> <?php foreach($data['categories'] as $category): ?> <?php if($category['filter'] !== '*'): ?> <?php $filterClass = str_replace('.', '', $category['filter']); ?> <option value="<?php echo htmlspecialchars($filterClass); ?>"> <?php echo htmlspecialchars($category['name']); ?> </option> <?php endif; ?> <?php endforeach; ?> </select> </div> </div> </div> `; container.appendChild(div); } function removeImage(button) { if(confirm('Are you sure you want to remove this image?')) { button.closest('.image-card').remove(); } } // Image Preview Update function updateImagePreview(input) { const previewContainer = input.closest('.image-card').querySelector('.image-preview-container'); const src = input.value; if(src) { previewContainer.innerHTML = `<img src="../${src}" alt="Preview" class="image-preview" onerror="this.style.display='none'">`; } else { previewContainer.innerHTML = ''; } } // Image Picker (simplified - can be enhanced with actual file picker) function openImagePicker(button) { const imageInput = button.previousElementSibling; const imagePath = prompt('Enter image path (relative to root, e.g., uploads/gallery/image.jpg) or select from uploaded images:'); if(imagePath) { imageInput.value = imagePath; updateImagePreview(imageInput); } } // Auto-hide success message after 5 seconds setTimeout(() => { const alert = document.querySelector('.success-alert'); if(alert) { const bsAlert = new bootstrap.Alert(alert); bsAlert.close(); } }, 5000); </script> </body> </html>

| ver. 1.4 | Github | . | PHP 7.4.33 | Generation time: 0.02 | proxy | phpinfo | Settings