File manager

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

Back
<?php session_start(); if(!isset($_SESSION['admin'])){ header("Location: login.php"); exit; } $file = "../data/index.json"; // Load existing data $data = json_decode(file_get_contents($file), true); // Handle form submission if($_SERVER['REQUEST_METHOD'] === 'POST'){ // Handle image updates function updateImageField(&$array, $fieldName, $oldValue, $newValue) { // If new value starts with "uploads/", keep it // If it's an old path that doesn't start with "uploads/", assume it's from previous system and keep it if (!empty($newValue) && $newValue !== $oldValue) { $array[$fieldName] = $newValue; } else if (empty($newValue) && !empty($oldValue)) { // Keep old value if new is empty $array[$fieldName] = $oldValue; } } // Banner Slides $slides = []; $slideImages = $_POST['slide_image'] ?? []; $slideTitles = $_POST['slide_title'] ?? []; $slideDescriptions = $_POST['slide_description'] ?? []; $slideButtonTexts = $_POST['slide_button_text'] ?? []; $slideButtonLinks = $_POST['slide_button_link'] ?? []; for($i = 0; $i < count($slideImages); $i++){ if(!empty(trim($slideTitles[$i]))){ $slide = [ 'title' => trim($slideTitles[$i]), 'description' => trim($slideDescriptions[$i]), 'button_text' => trim($slideButtonTexts[$i]), 'button_link' => trim($slideButtonLinks[$i]) ]; // Handle image - keep old if new is empty $image = trim($slideImages[$i]); if (!empty($image)) { $slide['image'] = $image; } else if (isset($data['banner']['slides'][$i]['image'])) { $slide['image'] = $data['banner']['slides'][$i]['image']; } $slides[] = $slide; } } $data['banner']['slides'] = $slides; // Booking Section $data['booking_section']['title'] = $_POST['booking_title']; // About Section $data['about_section']['title'] = $_POST['about_title']; $data['about_section']['subtitle'] = $_POST['about_subtitle']; $data['about_section']['description'] = $_POST['about_description']; $data['about_section']['button_text'] = $_POST['about_button_text']; $data['about_section']['button_link'] = $_POST['about_button_link']; // Handle about image if (!empty($_POST['about_image'])) { $data['about_section']['image'] = $_POST['about_image']; } // Accommodation $data['accommodation']['title'] = $_POST['accommodation_title']; $rooms = []; $roomTitles = $_POST['room_title'] ?? []; $roomImages = $_POST['room_image'] ?? []; $roomPrices = $_POST['room_price'] ?? []; $roomDescriptions = $_POST['room_description'] ?? []; $roomLinks = $_POST['room_link'] ?? []; $roomFeatures = $_POST['room_features'] ?? []; for($i = 0; $i < count($roomTitles); $i++){ if(!empty(trim($roomTitles[$i]))){ // Parse features (comma separated) $features = []; if(!empty($roomFeatures[$i])){ $featureList = explode(',', $roomFeatures[$i]); foreach($featureList as $feature){ $trimmed = trim($feature); if(!empty($trimmed)){ $features[] = $trimmed; } } } $room = [ 'title' => trim($roomTitles[$i]), 'price' => trim($roomPrices[$i]), 'description' => trim($roomDescriptions[$i]), 'features' => $features, 'link' => trim($roomLinks[$i]) ]; // Handle room image - keep old if new is empty $image = trim($roomImages[$i]); if (!empty($image)) { $room['image'] = $image; } else if (isset($data['accommodation']['rooms'][$i]['image'])) { $room['image'] = $data['accommodation']['rooms'][$i]['image']; } $rooms[] = $room; } } $data['accommodation']['rooms'] = $rooms; // Testimonials $data['testimonials']['title'] = $_POST['testimonials_title']; $testimonials = []; $testimonialTexts = $_POST['testimonial_text'] ?? []; $testimonialNames = $_POST['testimonial_name'] ?? []; $testimonialImages = $_POST['testimonial_image'] ?? []; for($i = 0; $i < count($testimonialTexts); $i++){ if(!empty(trim($testimonialTexts[$i]))){ $testimonial = [ 'text' => trim($testimonialTexts[$i]), 'name' => trim($testimonialNames[$i]) ]; // Handle testimonial image - keep old if new is empty $image = trim($testimonialImages[$i]); if (!empty($image)) { $testimonial['image'] = $image; } else if (isset($data['testimonials']['items'][$i]['image'])) { $testimonial['image'] = $data['testimonials']['items'][$i]['image']; } $testimonials[] = $testimonial; } } $data['testimonials']['items'] = $testimonials; // Who Is This For $data['who_is_this_for']['title'] = $_POST['who_title']; $categories = []; $categoryTitles = $_POST['category_title'] ?? []; $categoryImages = $_POST['category_image'] ?? []; $categoryDescriptions = $_POST['category_description'] ?? []; for($i = 0; $i < count($categoryTitles); $i++){ if(!empty(trim($categoryTitles[$i]))){ $category = [ 'title' => trim($categoryTitles[$i]), 'description' => trim($categoryDescriptions[$i]) ]; // Handle category image - keep old if new is empty $image = trim($categoryImages[$i]); if (!empty($image)) { $category['image'] = $image; } else if (isset($data['who_is_this_for']['categories'][$i]['image'])) { $category['image'] = $data['who_is_this_for']['categories'][$i]['image']; } $categories[] = $category; } } $data['who_is_this_for']['categories'] = $categories; // Save to file file_put_contents($file, json_encode($data, JSON_PRETTY_PRINT)); // Redirect to prevent form resubmission header("Location: edit-index.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 Home Page \| 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; } / Tabs Navigation / .editor-tabs { margin-bottom: 30px; border-bottom: 2px solid #f1f2f6; } .editor-tabs .nav-link { padding: 12px 25px; color: var(--dark-color); font-weight: 500; border: none; border-radius: 10px 10px 0 0; margin-right: 5px; transition: all 0.3s ease; } .editor-tabs .nav-link:hover { background: rgba(52, 152, 219, 0.1); color: var(--secondary-color); } .editor-tabs .nav-link.active { background: linear-gradient(45deg, #3498db, #2ecc71); color: white; box-shadow: 0 5px 15px rgba(52, 152, 219, 0.2); } / Tab Content / .tab-content { padding: 20px 0; } / 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; } / Image Upload Styles / .image-upload-container { position: relative; margin-bottom: 15px; } .current-image { margin-bottom: 15px; text-align: center; } .current-image img { 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-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); } / 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; } / 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); } / 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; } } / Image Gallery Modal / .modal-content { border-radius: 15px; border: none; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); } .modal-header { background: linear-gradient(45deg, #3498db, #2ecc71); color: white; border-radius: 15px 15px 0 0; padding: 20px; border: none; } .modal-title { font-weight: 600; } .modal-body { padding: 25px; } .modal-footer { border-top: 1px solid #f1f2f6; padding: 20px; border-radius: 0 0 15px 15px; } / Gallery Images / .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 15px; max-height: 400px; overflow-y: auto; padding: 10px; } .gallery-image { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 3px solid transparent; transition: all 0.3s ease; } .gallery-image:hover { transform: scale(1.05); border-color: var(--secondary-color); box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3); } .gallery-image.selected { border-color: var(--accent-color); transform: scale(1.05); box-shadow: 0 5px 15px rgba(46, 204, 113, 0.3); } / 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; } .editor-tabs .nav-link { padding: 10px 15px; font-size: 14px; } } / 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-home"></i> </div> <h3>Home Page 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="#banner" onclick="switchTab('banner')" class="active"> <i class="fas fa-images"></i> <span>Banner Slider</span> </a> </li> <li> <a href="#about" onclick="switchTab('about')"> <i class="fas fa-info-circle"></i> <span>About Section</span> </a> </li> <li> <a href="#rooms" onclick="switchTab('rooms')"> <i class="fas fa-bed"></i> <span>Accommodation</span> </a> </li> <li> <a href="#testimonials" onclick="switchTab('testimonials')"> <i class="fas fa-comments"></i> <span>Testimonials</span> </a> </li> <li> <a href="#categories" onclick="switchTab('categories')"> <i class="fas fa-users"></i> <span>Who Is This For</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-edit"></i> Edit Home Page Content</h1> <div class="action-buttons"> <a href="http://mayergramprsfarm.in/index.php" target="_blank" class="btn btn-info"> <i class="fas fa-eye"></i> Preview </a> <!--<a href="../data/index.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> Content updated successfully! <button type="button" class="btn-close" data-bs-dismiss="alert" onclick="this.parentElement.remove()"></button> </div> <?php endif; ?> <!-- Image Gallery Modal --> <div class="modal fade" id="imageGalleryModal" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title"><i class="fas fa-images"></i> Select Image</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <!-- Upload New Image --> <div class="section-card mb-4"> <h6 class="mb-3"><i class="fas fa-upload"></i> Upload New Image</h6> <div class="input-group"> <input type="file" class="form-control" id="newImageUpload" accept="image/"> <button class="btn btn-primary" type="button" onclick="uploadNewImage()"> <i class="fas fa-upload"></i> Upload </button> </div> <div class="progress mt-3 d-none" id="uploadProgress"> <div class="progress-bar" role="progressbar" style="width: 0%"></div> </div> <div id="uploadMessage" class="mt-3"></div> </div> <!-- Image Gallery --> <div class="section-card"> <h6 class="mb-3"><i class="fas fa-folder-open"></i> Select from Uploaded Images</h6> <div id="imageGallery" class="gallery-grid"></div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> <i class="fas fa-times"></i> Cancel </button> <button type="button" class="btn btn-primary" onclick="selectImage()"> <i class="fas fa-check"></i> Select Image </button> </div> </div> </div> </div> <!-- Editor Form --> <form method="post" id="homePageForm"> <!-- Tabs Navigation --> <ul class="nav nav-tabs editor-tabs" id="editorTabs" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="banner-tab" data-bs-toggle="tab" data-bs-target="#banner-pane" type="button"> <i class="fas fa-images"></i> Banner Slider </button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="about-tab" data-bs-toggle="tab" data-bs-target="#about-pane" type="button"> <i class="fas fa-info-circle"></i> About Section </button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="rooms-tab" data-bs-toggle="tab" data-bs-target="#rooms-pane" type="button"> <i class="fas fa-bed"></i> Accommodation </button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="testimonials-tab" data-bs-toggle="tab" data-bs-target="#testimonials-pane" type="button"> <i class="fas fa-comments"></i> Testimonials </button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="categories-tab" data-bs-toggle="tab" data-bs-target="#categories-pane" type="button"> <i class="fas fa-users"></i> Who Is This For </button> </li> </ul> <!-- Tabs Content --> <div class="tab-content" id="editorTabsContent"> <!-- Banner Slider Tab --> <div class="tab-pane fade show active" id="banner-pane" role="tabpanel"> <div class="section-card"> <div class="section-header"> <h4 class="section-title"><i class="fas fa-image"></i> Booking Section Title</h4> </div> <div class="mb-3"> <label class="form-label"><i class="fas fa-heading"></i> Title Text</label> <input type="text" class="form-control" name="booking_title" value="<?php echo htmlspecialchars($data['booking_section']['title']); ?>" required> </div> </div> <div class="section-card"> <div class="section-header"> <h4 class="section-title"><i class="fas fa-sliders-h"></i> Banner Slides</h4> </div> <div id="slides-container"> <?php foreach($data['banner']['slides'] as $index => $slide): ?> <div class="item-card slide-card"> <div class="item-header"> <h6 class="item-title">Slide <?php echo $index + 1; ?></h6> <button type="button" class="btn btn-danger btn-sm" onclick="removeSlide(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-image"></i> Slide Image</label> <div class="image-upload-container"> <?php if(!empty($slide['image'])): ?> <div class="current-image"> <img src="../<?php echo htmlspecialchars($slide['image']); ?>" alt="Current Slide Image"> </div> <?php endif; ?> <div class="image-input-group"> <input type="text" class="form-control image-path" name="slide_image[]" value="<?php echo htmlspecialchars($slide['image'] ?? ''); ?>" placeholder="Select or enter image path"> <button type="button" class="btn btn-image-select" onclick="openImageGallery(this)"> <i class="fas fa-folder-open"></i> </button> </div> </div> </div> <div class="mb-3"> <label class="form-label"><i class="fas fa-heading"></i> Slide Title</label> <input type="text" class="form-control" name="slide_title[]" value="<?php echo htmlspecialchars($slide['title']); ?>" required> </div> <div class="mb-3"> <label class="form-label"><i class="fas fa-align-left"></i> Description</label> <textarea class="form-control" name="slide_description[]" rows="3" required><?php echo htmlspecialchars($slide['description']); ?></textarea> </div> </div> <div class="col-md-6"> <div class="mb-3"> <label class="form-label"><i class="fas fa-button"></i> Button Text</label> <input type="text" class="form-control" name="slide_button_text[]" value="<?php echo htmlspecialchars($slide['button_text']); ?>" required> </div> <div class="mb-3"> <label class="form-label"><i class="fas fa-link"></i> Button Link</label> <input type="text" class="form-control" name="slide_button_link[]" value="<?php echo htmlspecialchars($slide['button_link']); ?>" required> </div> </div> </div> </div> <?php endforeach; ?> </div> <button type="button" class="btn btn-add w-100" onclick="addSlide()"> <i class="fas fa-plus"></i> Add New Slide </button> </div> </div> <!-- About Section Tab --> <div class="tab-pane fade" id="about-pane" role="tabpanel"> <div class="section-card"> <div class="section-header"> <h4 class="section-title"><i class="fas fa-info-circle"></i> About Section</h4> </div> <div class="mb-3"> <label class="form-label"><i class="fas fa-heading"></i> Section Title</label> <input type="text" class="form-control" name="about_title" value="<?php echo htmlspecialchars($data['about_section']['title']); ?>" required> <small class="text-muted">Use <span>tags</span> for colored text</small> </div> <div class="mb-3"> <label class="form-label"><i class="fas fa-image"></i> About Image</label> <div class="image-upload-container"> <?php if(!empty($data['about_section']['image'])): ?> <div class="current-image"> <img src="../<?php echo htmlspecialchars($data['about_section']['image']); ?>" alt="Current About Image"> </div> <?php endif; ?> <div class="image-input-group"> <input type="text" class="form-control image-path" name="about_image" id="about_image" value="<?php echo htmlspecialchars($data['about_section']['image'] ?? ''); ?>" placeholder="Select or enter image path"> <button type="button" class="btn btn-image-select" onclick="openImageGallery(this)"> <i class="fas fa-folder-open"></i> </button> </div> </div> </div> <div class="mb-3"> <label class="form-label"><i class="fas fa-subscript"></i> Subtitle</label> <input type="text" class="form-control" name="about_subtitle" value="<?php echo htmlspecialchars($data['about_section']['subtitle']); ?>" required> </div> <div class="mb-3"> <label class="form-label"><i class="fas fa-align-left"></i> Description</label> <textarea class="form-control" name="about_description" rows="5" required><?php echo htmlspecialchars($data['about_section']['description']); ?></textarea> </div> <div class="row"> <div class="col-md-6"> <div class="mb-3"> <label class="form-label"><i class="fas fa-button"></i> Button Text</label> <input type="text" class="form-control" name="about_button_text" value="<?php echo htmlspecialchars($data['about_section']['button_text']); ?>" required> </div> </div> <div class="col-md-6"> <div class="mb-3"> <label class="form-label"><i class="fas fa-link"></i> Button Link</label> <input type="text" class="form-control" name="about_button_link" value="<?php echo htmlspecialchars($data['about_section']['button_link']); ?>" required> </div> </div> </div> </div> </div> <!-- Accommodation Tab --> <div class="tab-pane fade" id="rooms-pane" role="tabpanel"> <div class="section-card"> <div class="section-header"> <h4 class="section-title"><i class="fas fa-bed"></i> Accommodation Section</h4> </div> <div class="mb-3"> <label class="form-label"><i class="fas fa-heading"></i> Section Title</label> <input type="text" class="form-control" name="accommodation_title" value="<?php echo htmlspecialchars($data['accommodation']['title']); ?>" required> </div> </div> <div class="section-card"> <div class="section-header"> <h4 class="section-title"><i class="fas fa-home"></i> Rooms & Accommodation</h4> </div> <div id="rooms-container"> <?php foreach($data['accommodation']['rooms'] as $index => $room): ?> <div class="item-card room-card"> <div class="item-header"> <h6 class="item-title">Room <?php echo $index + 1; ?></h6> <button type="button" class="btn btn-danger btn-sm" onclick="removeRoom(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-image"></i> Room Image</label> <div class="image-upload-container"> <?php if(!empty($room['image'])): ?> <div class="current-image"> <img src="../<?php echo htmlspecialchars($room['image']); ?>" alt="Current Room Image"> </div> <?php endif; ?> <div class="image-input-group"> <input type="text" class="form-control image-path" name="room_image[]" value="<?php echo htmlspecialchars($room['image'] ?? ''); ?>" placeholder="Select or enter image path"> <button type="button" class="btn btn-image-select" onclick="openImageGallery(this)"> <i class="fas fa-folder-open"></i> </button> </div> </div> </div> <div class="mb-3"> <label class="form-label"><i class="fas fa-heading"></i> Room Title</label> <input type="text" class="form-control" name="room_title[]" value="<?php echo htmlspecialchars($room['title']); ?>" required> </div> <div class="mb-3"> <label class="form-label"><i class="fas fa-tag"></i> Price</label> <input type="text" class="form-control" name="room_price[]" value="<?php echo htmlspecialchars($room['price']); ?>" required> </div> </div> <div class="col-md-6"> <div class="mb-3"> <label class="form-label"><i class="fas fa-align-left"></i> Description</label> <textarea class="form-control" name="room_description[]" rows="3" required><?php echo htmlspecialchars($room['description']); ?></textarea> </div> <div class="mb-3"> <label class="form-label"><i class="fas fa-list-check"></i> Features</label> <textarea class="form-control" name="room_features[]" rows="3" placeholder="Enter features separated by commas"><?php echo htmlspecialchars(implode(', ', $room['features'])); ?></textarea> <small class="text-muted">Separate features with commas</small> </div> <div class="mb-3"> <label class="form-label"><i class="fas fa-link"></i> Page Link</label> <input type="text" class="form-control" name="room_link[]" value="<?php echo htmlspecialchars($room['link']); ?>" required> </div> </div> </div> </div> <?php endforeach; ?> </div> <button type="button" class="btn btn-add w-100" onclick="addRoom()"> <i class="fas fa-plus"></i> Add New Room </button> </div> </div> <!-- Testimonials Tab --> <div class="tab-pane fade" id="testimonials-pane" role="tabpanel"> <div class="section-card"> <div class="section-header"> <h4 class="section-title"><i class="fas fa-comments"></i> Testimonials Section</h4> </div> <div class="mb-3"> <label class="form-label"><i class="fas fa-heading"></i> Section Title</label> <input type="text" class="form-control" name="testimonials_title" value="<?php echo htmlspecialchars($data['testimonials']['title']); ?>" required> <small class="text-muted">Use <span>tags</span> for colored text</small> </div> </div> <div class="section-card"> <div class="section-header"> <h4 class="section-title"><i class="fas fa-star"></i> Customer Testimonials</h4> </div> <div id="testimonials-container"> <?php foreach($data['testimonials']['items'] as $index => $testimonial): ?> <div class="item-card testimonial-card"> <div class="item-header"> <h6 class="item-title">Testimonial <?php echo $index + 1; ?></h6> <button type="button" class="btn btn-danger btn-sm" onclick="removeTestimonial(this)"> <i class="fas fa-trash"></i> Remove </button> </div> <div class="row"> <div class="col-md-8"> <div class="mb-3"> <label class="form-label"><i class="fas fa-comment"></i> Testimonial Text</label> <textarea class="form-control" name="testimonial_text[]" rows="4" required><?php echo htmlspecialchars($testimonial['text']); ?></textarea> </div> </div> <div class="col-md-4"> <div class="mb-3"> <label class="form-label"><i class="fas fa-user-circle"></i> Profile Image</label> <div class="image-upload-container"> <?php if(!empty($testimonial['image'])): ?> <div class="current-image"> <img src="../<?php echo htmlspecialchars($testimonial['image']); ?>" alt="Current Profile Image"> </div> <?php endif; ?> <div class="image-input-group"> <input type="text" class="form-control image-path" name="testimonial_image[]" value="<?php echo htmlspecialchars($testimonial['image'] ?? ''); ?>" placeholder="Select or enter image path"> <button type="button" class="btn btn-image-select" onclick="openImageGallery(this)"> <i class="fas fa-folder-open"></i> </button> </div> </div> </div> <div class="mb-3"> <label class="form-label"><i class="fas fa-user"></i> Customer Name</label> <input type="text" class="form-control" name="testimonial_name[]" value="<?php echo htmlspecialchars($testimonial['name']); ?>" required> </div> </div> </div> </div> <?php endforeach; ?> </div> <button type="button" class="btn btn-add w-100" onclick="addTestimonial()"> <i class="fas fa-plus"></i> Add New Testimonial </button> </div> </div> <!-- Who Is This For Tab --> <div class="tab-pane fade" id="categories-pane" role="tabpanel"> <div class="section-card"> <div class="section-header"> <h4 class="section-title"><i class="fas fa-users"></i> "Who Is This For" Section</h4> </div> <div class="mb-3"> <label class="form-label"><i class="fas fa-heading"></i> Section Title</label> <input type="text" class="form-control" name="who_title" value="<?php echo htmlspecialchars($data['who_is_this_for']['title']); ?>" required> <small class="text-muted">Use <span>tags</span> for colored text</small> </div> </div> <div class="section-card"> <div class="section-header"> <h4 class="section-title"><i class="fas fa-th-large"></i> Target Categories</h4> </div> <div id="categories-container"> <?php foreach($data['who_is_this_for']['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-4"> <div class="mb-3"> <label class="form-label"><i class="fas fa-heading"></i> Category Title</label> <input type="text" class="form-control" name="category_title[]" value="<?php echo htmlspecialchars($category['title']); ?>" required> <small class="text-muted">Include emojis if needed</small> </div> </div> <div class="col-md-4"> <div class="mb-3"> <label class="form-label"><i class="fas fa-image"></i> Category Image</label> <div class="image-upload-container"> <?php if(!empty($category['image'])): ?> <div class="current-image"> <img src="../<?php echo htmlspecialchars($category['image']); ?>" alt="Current Category Image"> </div> <?php endif; ?> <div class="image-input-group"> <input type="text" class="form-control image-path" name="category_image[]" value="<?php echo htmlspecialchars($category['image'] ?? ''); ?>" placeholder="Select or enter image path"> <button type="button" class="btn btn-image-select" onclick="openImageGallery(this)"> <i class="fas fa-folder-open"></i> </button> </div> </div> </div> </div> <div class="col-md-4"> <div class="mb-3"> <label class="form-label"><i class="fas fa-align-left"></i> Description</label> <input type="text" class="form-control" name="category_description[]" value="<?php echo htmlspecialchars($category['description']); ?>" required> </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> </div> </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> // Global variables for image gallery let imageGalleryModal = null; let currentImageInput = null; let selectedGalleryImage = null; // Initialize modal document.addEventListener('DOMContentLoaded', function() { imageGalleryModal = new bootstrap.Modal(document.getElementById('imageGalleryModal')); loadImageGallery(); // Initialize Bootstrap tabs const triggerTabList = [].slice.call(document.querySelectorAll('#editorTabs button')); triggerTabList.forEach(function (triggerEl) { const tabTrigger = new bootstrap.Tab(triggerEl); triggerEl.addEventListener('click', function (event) { event.preventDefault(); tabTrigger.show(); // Update sidebar active state const tabId = this.getAttribute('data-bs-target').replace('#', ''); switchTab(tabId); }); }); }); // Sidebar navigation function switchTab(tabId) { // Remove active class from all sidebar links document.querySelectorAll('.sidebar-nav a').forEach(link => { link.classList.remove('active'); }); // Add active class to clicked tab const activeLink = document.querySelector(`.sidebar-nav a[href="#${tabId}"]`); if (activeLink) { activeLink.classList.add('active'); } // Switch Bootstrap tab const tab = document.getElementById(`${tabId}-tab`); if (tab) { new bootstrap.Tab(tab).show(); } } // Image Gallery Functions function openImageGallery(button) { currentImageInput = button.closest('.image-input-group').querySelector('.image-path'); loadImageGallery(); imageGalleryModal.show(); } function loadImageGallery() { const gallery = document.getElementById('imageGallery'); gallery.innerHTML = '<div class="text-center py-5"><i class="fas fa-spinner fa-spin fa-2x"></i><p class="mt-3">Loading images...</p></div>'; fetch('upload.php?action=list') .then(response => response.json()) .then(images => { gallery.innerHTML = ''; if (images.length === 0) { gallery.innerHTML = '<div class="text-center text-muted py-5"><i class="fas fa-image fa-3x mb-3"></i><p>No images uploaded yet.</p></div>'; return; } images.forEach(image => { const imgContainer = document.createElement('div'); imgContainer.className = 'image-container'; imgContainer.innerHTML = ` <img src="../${image.path}" alt="${image.name}" class="gallery-image" data-path="${image.path}"> <div class="image-name">${image.name}</div> `; const img = imgContainer.querySelector('img'); img.onclick = function() { // Remove selection from all images document.querySelectorAll('.gallery-image').forEach(img => { img.classList.remove('selected'); }); // Select this image this.classList.add('selected'); selectedGalleryImage = image.path; }; gallery.appendChild(imgContainer); }); }) .catch(error => { gallery.innerHTML = '<div class="text-center text-danger py-5"><i class="fas fa-exclamation-triangle fa-2x"></i><p class="mt-3">Error loading images.</p></div>'; console.error('Error:', error); }); } function uploadNewImage() { const fileInput = document.getElementById('newImageUpload'); const progressBar = document.getElementById('uploadProgress'); const progressFill = progressBar.querySelector('.progress-bar'); const messageDiv = document.getElementById('uploadMessage'); if (!fileInput.files[0]) { showMessage('Please select a file first.', 'warning'); return; } const formData = new FormData(); formData.append('image', fileInput.files[0]); // Show progress bar progressBar.classList.remove('d-none'); progressFill.style.width = '0%'; progressFill.textContent = '0%'; const xhr = new XMLHttpRequest(); xhr.open('POST', 'upload.php', true); xhr.upload.onprogress = function(e) { if (e.lengthComputable) { const percent = (e.loaded / e.total) * 100; progressFill.style.width = percent + '%'; progressFill.textContent = Math.round(percent) + '%'; } }; xhr.onload = function() { progressBar.classList.add('d-none'); try { const response = JSON.parse(xhr.responseText); if (response.success) { showMessage(response.message, 'success'); // Add new image to gallery loadImageGallery(); // Clear file input fileInput.value = ''; } else { showMessage(response.message, 'danger'); } } catch (e) { showMessage('Upload failed.', 'danger'); } }; xhr.onerror = function() { progressBar.classList.add('d-none'); showMessage('Upload failed.', 'danger'); }; xhr.send(formData); } function showMessage(text, type) { const messageDiv = document.getElementById('uploadMessage'); const alertClass = type === 'success' ? 'alert-success' : 'alert-danger'; messageDiv.innerHTML = ` <div class="alert ${alertClass} alert-dismissible fade show" role="alert"> ${text} <button type="button" class="btn-close" data-bs-dismiss="alert"></button> </div> `; } function selectImage() { if (selectedGalleryImage && currentImageInput) { currentImageInput.value = selectedGalleryImage; // Update preview const container = currentImageInput.closest('.image-upload-container'); let preview = container.querySelector('.current-image'); if (!preview) { preview = document.createElement('div'); preview.className = 'current-image'; container.insertBefore(preview, currentImageInput.closest('.image-input-group')); } preview.innerHTML = `<img src="../${selectedGalleryImage}" alt="Selected Image">`; } imageGalleryModal.hide(); selectedGalleryImage = null; currentImageInput = null; } // Slide Functions function addSlide() { const container = document.getElementById('slides-container'); const index = container.children.length + 1; const slideCard = document.createElement('div'); slideCard.className = 'item-card slide-card'; slideCard.innerHTML = ` <div class="item-header"> <h6 class="item-title">Slide ${index}</h6> <button type="button" class="btn btn-danger btn-sm" onclick="removeSlide(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-image"></i> Slide Image</label> <div class="image-upload-container"> <div class="image-input-group"> <input type="text" class="form-control image-path" name="slide_image[]" placeholder="Select or enter image path"> <button type="button" class="btn btn-image-select" onclick="openImageGallery(this)"> <i class="fas fa-folder-open"></i> </button> </div> </div> </div> <div class="mb-3"> <label class="form-label"><i class="fas fa-heading"></i> Slide Title</label> <input type="text" class="form-control" name="slide_title[]" required> </div> <div class="mb-3"> <label class="form-label"><i class="fas fa-align-left"></i> Description</label> <textarea class="form-control" name="slide_description[]" rows="3" required></textarea> </div> </div> <div class="col-md-6"> <div class="mb-3"> <label class="form-label"><i class="fas fa-button"></i> Button Text</label> <input type="text" class="form-control" name="slide_button_text[]" required> </div> <div class="mb-3"> <label class="form-label"><i class="fas fa-link"></i> Button Link</label> <input type="text" class="form-control" name="slide_button_link[]" required> </div> </div> </div> `; container.appendChild(slideCard); } function removeSlide(button) { if(document.querySelectorAll('.slide-card').length > 2) { button.closest('.slide-card').remove(); } else { alert('Minimum 2 slides are required'); } } // Room Functions function addRoom() { const container = document.getElementById('rooms-container'); const index = container.children.length + 1; const roomCard = document.createElement('div'); roomCard.className = 'item-card room-card'; roomCard.innerHTML = ` <div class="item-header"> <h6 class="item-title">Room ${index}</h6> <button type="button" class="btn btn-danger btn-sm" onclick="removeRoom(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-image"></i> Room Image</label> <div class="image-upload-container"> <div class="image-input-group"> <input type="text" class="form-control image-path" name="room_image[]" placeholder="Select or enter image path"> <button type="button" class="btn btn-image-select" onclick="openImageGallery(this)"> <i class="fas fa-folder-open"></i> </button> </div> </div> </div> <div class="mb-3"> <label class="form-label"><i class="fas fa-heading"></i> Room Title</label> <input type="text" class="form-control" name="room_title[]" required> </div> <div class="mb-3"> <label class="form-label"><i class="fas fa-tag"></i> Price</label> <input type="text" class="form-control" name="room_price[]" required> </div> </div> <div class="col-md-6"> <div class="mb-3"> <label class="form-label"><i class="fas fa-align-left"></i> Description</label> <textarea class="form-control" name="room_description[]" rows="3" required></textarea> </div> <div class="mb-3"> <label class="form-label"><i class="fas fa-list-check"></i> Features</label> <textarea class="form-control" name="room_features[]" rows="3" placeholder="Enter features separated by commas"></textarea> <small class="text-muted">Separate features with commas</small> </div> <div class="mb-3"> <label class="form-label"><i class="fas fa-link"></i> Page Link</label> <input type="text" class="form-control" name="room_link[]" required> </div> </div> </div> `; container.appendChild(roomCard); } function removeRoom(button) { button.closest('.room-card').remove(); } // Testimonial Functions function addTestimonial() { const container = document.getElementById('testimonials-container'); const index = container.children.length + 1; const testimonialCard = document.createElement('div'); testimonialCard.className = 'item-card testimonial-card'; testimonialCard.innerHTML = ` <div class="item-header"> <h6 class="item-title">Testimonial ${index}</h6> <button type="button" class="btn btn-danger btn-sm" onclick="removeTestimonial(this)"> <i class="fas fa-trash"></i> Remove </button> </div> <div class="row"> <div class="col-md-8"> <div class="mb-3"> <label class="form-label"><i class="fas fa-comment"></i> Testimonial Text</label> <textarea class="form-control" name="testimonial_text[]" rows="4" required></textarea> </div> </div> <div class="col-md-4"> <div class="mb-3"> <label class="form-label"><i class="fas fa-user-circle"></i> Profile Image</label> <div class="image-upload-container"> <div class="image-input-group"> <input type="text" class="form-control image-path" name="testimonial_image[]" placeholder="Select or enter image path"> <button type="button" class="btn btn-image-select" onclick="openImageGallery(this)"> <i class="fas fa-folder-open"></i> </button> </div> </div> </div> <div class="mb-3"> <label class="form-label"><i class="fas fa-user"></i> Customer Name</label> <input type="text" class="form-control" name="testimonial_name[]" required> </div> </div> </div> `; container.appendChild(testimonialCard); } function removeTestimonial(button) { button.closest('.testimonial-card').remove(); } // Category Functions function addCategory() { const container = document.getElementById('categories-container'); const index = container.children.length + 1; const categoryCard = document.createElement('div'); categoryCard.className = 'item-card category-card'; categoryCard.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-4"> <div class="mb-3"> <label class="form-label"><i class="fas fa-heading"></i> Category Title</label> <input type="text" class="form-control" name="category_title[]" required> <small class="text-muted">Include emojis if needed</small> </div> </div> <div class="col-md-4"> <div class="mb-3"> <label class="form-label"><i class="fas fa-image"></i> Category Image</label> <div class="image-upload-container"> <div class="image-input-group"> <input type="text" class="form-control image-path" name="category_image[]" placeholder="Select or enter image path"> <button type="button" class="btn btn-image-select" onclick="openImageGallery(this)"> <i class="fas fa-folder-open"></i> </button> </div> </div> </div> </div> <div class="col-md-4"> <div class="mb-3"> <label class="form-label"><i class="fas fa-align-left"></i> Description</label> <input type="text" class="form-control" name="category_description[]" required> </div> </div> </div> `; container.appendChild(categoryCard); } function removeCategory(button) { button.closest('.category-card').remove(); } // 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); // Add CSS for image name const style = document.createElement('style'); style.textContent = ` .image-container { text-align: center; } .image-name { font-size: 12px; margin-top: 5px; color: #666; word-break: break-all; } `; document.head.appendChild(style); </script> </body> </html>

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