OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	05/19/2025 10:07:15 AM	rwxrwxrwx
📁 assets	-	02/24/2025 12:08:11 PM	rwxr-xr-x
📁 forms	-	05/19/2025 10:07:15 AM	rwxr-xr-x
📄 index.html	10.85 KB	02/24/2025 12:20:59 PM	rw-r--r--
📄 script.js	16.98 KB	02/24/2025 12:20:59 PM	rw-r--r--
📄 style.css	11.13 KB	02/24/2025 12:20:59 PM	rw-r--r--

Editing: script.js

// Initialize content storage
const defaultContent = {
  'main-heading': 'Enter the primary heading',
  'hero-text': 'Enter the secondary heading.',
  'hero-image': 'assets/default4.jpg',
  'feature1-image': 'assets/default1.jpg',
  'feature1-text': 'Enter Feature One',
  'feature2-image': 'assets/default2.jpg',
  'feature2-text': 'Enter Feature Two',
  'feature3-image': 'assets/default3.jpg',
  'feature3-text': 'Enter Feature Three'
};

let currentImageId = null;

// Load saved content on page load
window.onload = function () {
  const savedContent = localStorage.getItem('pageContent');
  if (savedContent) {
    const content = JSON.parse(savedContent);
    Object.keys(content).forEach(id => {
      const element = document.getElementById(id);
      if (element) {
        if (element.tagName === 'IMG') {
          element.src = content[id];
        } else {
          element.innerText = content[id];
        }
      }
    });
  }
};

function editText(elementId) {
  const element = document.getElementById(elementId);
  const newText = prompt("Enter new text:", element.innerText);
  if (newText !== null) {
    element.innerText = newText;
  }
}

function openImageUpload(imageId) {
  currentImageId = imageId;
  const modal = document.getElementById('imageUploadModal');
  const input = document.getElementById('imageInput');
  input.value = ''; // Reset input
  modal.style.display = 'flex';
}

function closeImageUpload() {
  const modal = document.getElementById('imageUploadModal');
  modal.style.display = 'none';
  currentImageId = null;
}

function uploadImage() {
  const input = document.getElementById('imageInput');
  const file = input.files[0];

if (file && currentImageId) {
    const reader = new FileReader();
    reader.onload = function (e) {
      const img = document.getElementById(currentImageId);
      img.src = e.target.result;
      closeImageUpload();
    };
    reader.readAsDataURL(file);
  } else {
    alert('Please select an image file.');
  }
}

// function exportPage() {
//     const pageContent = document.documentElement.outerHTML;
//     const blob = new Blob([pageContent], {
//         type: 'text/html'
//     });
//     const url = URL.createObjectURL(blob);
//     const a = document.createElement('a');
//     a.href = url;
//     a.download = 'landing-page.html';
//     document.body.appendChild(a);
//     a.click();
//     document.body.removeChild(a);
//     URL.revokeObjectURL(url);
// }

const chkFilterEmail = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
// Update field templates to include proper IDs
const fieldTemplates = {
  name: `
    <div class="form-group form-field" data-field="name">
        <label for="Name">Name *</label>
        <input type="text" id="Name" name="Name" required>
    </div>
`,
  institute: `
    <div class="form-group form-field" data-field="institute">
        <label for="Company">Institute/Organization *</label>
        <input type="text" id="Company" name="Company" required>
    </div>
`,
  designation: `
    <div class="form-group form-field" data-field="designation">
        <label for="Designation">Designation *</label>
        <input type="text" id="Designation" name="Designation" required>
    </div>
`,
  email: `
    <div class="form-group form-field" data-field="email">
        <label for="Email">Email *</label>
        <input type="email" id="Email" name="Email" required>
    </div>
`,
  phone: `
    <div class="form-group form-field" data-field="phone">
        <label for="Mobile">Phone Number *</label>
        <input type="tel" id="Mobile" name="Mobile" required>
    </div>
`,
  query: `
    <div class="form-group form-field" data-field="query">
        <label for="Query">Your Query *</label>
        <textarea id="Query" name="Query" rows="4" required></textarea>
    </div>
`,
  state: `
    <div class="form-group form-field" data-field="state">
        <label for="state">State *</label>
        <input type="text " id="state" name="state" rows="4" required>
    </div>
`,
  city: `
    <div class="form-group form-field" data-field="city">
        <label for="State">City *</label>
        <input type="text " id="city" name="city" rows="4" required>
    </div>
`
};

// Function to update form fields based on checkbox selection
function updateFormFields() {
  const formFields = document.getElementById('formFields');
  formFields.innerHTML = '';

const selectedFields = Array.from(document.querySelectorAll('input[name="fieldSelect"]:checked'))
    .map(checkbox => checkbox.value);

selectedFields.forEach(field => {
    formFields.insertAdjacentHTML('beforeend', fieldTemplates[field]);
    // Trigger animation
    setTimeout(() => {
      const newField = formFields.querySelector(`[data-field="${field}"]`);
      newField.classList.add('visible');
    }, 50);
  });

// Save selected fields to localStorage
  localStorage.setItem('selectedFields', JSON.stringify(selectedFields));
}

// Initialize form fields on page load
window.addEventListener('load', function () {
  const savedFields = localStorage.getItem('selectedFields');
  if (savedFields) {
    const fields = JSON.parse(savedFields);
    fields.forEach(field => {
      const checkbox = document.querySelector(`input[value="${field}"]`);
      if (checkbox) checkbox.checked = true;
    });
    updateFormFields();
  }
});

// Add event listeners to checkboxes
document.querySelectorAll('input[name="fieldSelect"]').forEach(checkbox => {
  checkbox.addEventListener('change', updateFormFields);
});

function exportPage() {
  // Create a clone of the current document
  const exportDoc = document.documentElement.cloneNode(true);

// Add the exported class to the clone
  exportDoc.classList.add('exported');

// Remove all edit buttons from the clone
  const editControls = exportDoc.getElementsByClassName('edit-control');
  while (editControls.length > 0) {
    editControls[0].parentNode.removeChild(editControls[0]);
  }

// Remove the save bar
  const saveBar = exportDoc.querySelector('.save-bar');
  if (saveBar) {
    saveBar.parentNode.removeChild(saveBar);
  }

// Remove the field selection area but keep the form fields
  const fieldSelection = exportDoc.querySelector('.field-selection');
  if (fieldSelection) {
    fieldSelection.parentNode.removeChild(fieldSelection);
  }

// Remove the image upload modal
  const imageModal = exportDoc.querySelector('.image-upload-modal');
  if (imageModal) {
    imageModal.parentNode.removeChild(imageModal);
  }

// Generate cleaned HTML
  const cleanedHTML = `<!DOCTYPE html>
<html lang="en">
${exportDoc.innerHTML}
</html>`;

// Create and download the file
  const blob = new Blob([cleanedHTML], {
    type: 'text/html'
  });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'landing-page.html';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

// Add a function to check if we're in the exported version
function isExportedVersion() {
  return document.documentElement.classList.contains('exported');
}

// Modify the window.onload function to check for exported version
window.onload = function () {
  if (!isExportedVersion()) {
    // Only load editing functionality if not exported
    loadSavedContent();
    initializeFormFields();
  }
};
function togglePreview() {
  document.body.classList.add('preview-mode');
  document.getElementById('previewBar').classList.add('active');
  document.getElementById('previewNotice').classList.add('active');

// Hide the save bar and preview toggle
  const saveBar = document.querySelector('.save-bar');
  if (saveBar) saveBar.style.display = 'none';

// Scroll to top
  window.scrollTo(0, 0);
}

function exitPreview() {
  document.body.classList.remove('preview-mode');
  document.getElementById('previewBar').classList.remove('active');
  document.getElementById('previewNotice').classList.remove('active');

// Show the save bar again
  const saveBar = document.querySelector('.save-bar');
  if (saveBar) saveBar.style.display = 'block';
}

// Modify window.onload to include preview check
window.onload = function () {
  // Previous onload code remains the same

// Check URL for preview parameter
  const urlParams = new URLSearchParams(window.location.search);
  if (urlParams.get('preview') === 'true') {
    togglePreview();
  }
};

// Form validation and submission function
function chkLead() {
  const Name = $('#Name').val();
  const Email = $('#Email').val();
  const Mobile = $('#Mobile').val();
  const Company = $('#Company').val();
  const Designation = $('#Designation').val();
  const Query = $('#Query').val();
  const state = $('#state').val();
  const city = $('#city').val();

// Basic validation
  if (Name == '') {
    $('#panelStatus').html('<div class="text-danger animate__animated animate__flash">Error: Full Name not entered!</div>');
    return false;
  }

// Company validation (if field exists)

// Email validation (if field exists)
  if ($('#Email').length) {
    if (Email == '') {
      $('#panelStatus').html('<div class="text-danger animate__animated animate__flash">Error: Email not entered!</div>');
      return false;
    }
    if (!(chkFilterEmail.test(Email))) {
      $('#panelStatus').html('<div class="text-danger animate__animated animate__flash">Error: Email is not valid!</div>');
      return false;
    }
  }
  // Mobile validation (if field exists)
  if ($('#Mobile').length && Mobile == '') {
    $('#panelStatus').html('<div class="text-danger animate__animated animate__flash">Error: Mobile not entered!</div>');
    return false;
  }
  if ($('#Company').length && Company == '') {
    $('#panelStatus').html('<div class="text-danger animate__animated animate__flash">Error: Company not entered!</div>');
    return false;
  }
  if ($('#Designation').length && Designation == '') {
    $('#panelStatus').html('<div class="text-danger animate__animated animate__flash">Error: Designation not entered!</div>');
    return false;
  }
  if ($('#Query').length && Query == '') {
    $('#panelStatus').html('<div class="text-danger animate__animated animate__flash">Error: Query not entered!</div>');
    return false;
  }

// Clear status and show loader
  $('#panelStatus').html('');
  $('#btnSubmit').hide();
  $('#contentLoader').show();

// Submit form
  $.ajax({
    url: 'process/createLead.php',
    method: 'POST',
    data: $('#frmLead').serializeArray()
  })
    .done(function (res) {
      $('#contentLoader').hide();
      if (res == 'OK') {
        $('#panelStatus').html('<div class="text-success">Your information has been submitted</div>');
        // Optional: Clear form
        $('#frmLead')[0].reset();
      } else {
        $('#btnSubmit').show();
        $('#panelStatus').html('<div class="text-danger animate__animated animate__flash">Error: Information could not be submitted!</div>');
      }
    })
    .fail(function () {
      $('#contentLoader').hide();
      $('#btnSubmit').show();
      $('#panelStatus').html('<div class="text-danger animate__animated animate__flash">Error: Connection failed!</div>');
    });

return false;
}

// Add this to document ready or window.onload
$(document).ready(function () {
  // Initialize form fields
  updateFormFields();
});

// Function to show save modal
function showSaveModal() {
  document.getElementById('saveDetailsModal').style.display = 'flex';
}

// Function to close save modal
function closeSaveModal() {
  document.getElementById('saveDetailsModal').style.display = 'none';
  document.getElementById('saveStatus').innerHTML = '';
}

// Update the savePreview function
function savePreview() {
  showSaveModal();
}

function saveLandingPage() {
  const pageTitle = document.getElementById('pageTitle').value;
  const actionEmail = document.getElementById('actionEmail').value;

if (!pageTitle || !actionEmail) {
    document.getElementById('saveStatus').innerHTML =
      '<div class="text-danger">Please fill in all required fields!</div>';
    return;
  }

// Show loading state
  document.getElementById('saveStatus').innerHTML =
    '<div class="text-info">Saving page...</div>';

try {
    // Create a clone of the current document for saving
    const exportDoc = document.documentElement.cloneNode(true);
    exportDoc.classList.add('exported');

// Remove edit controls
    const editControls = exportDoc.getElementsByClassName('edit-control');
    while (editControls.length > 0) {
      editControls[0].parentNode.removeChild(editControls[0]);
    }

// Remove other unnecessary elements
    const elementsToRemove = [
      '.save-bar',
      '.field-selection',
      '.image-upload-modal',
      '#saveDetailsModal',
      '.preview-bar',
      '.preview-notice'
    ];

elementsToRemove.forEach(selector => {
      const element = exportDoc.querySelector(selector);
      if (element) element.parentNode.removeChild(element);
    });

// Generate cleaned HTML
    const cleanedHTML = `<!DOCTYPE html>
<html lang="en">
${exportDoc.innerHTML}
</html>`;

// Generate filename using title
    const timestamp = new Date().getTime();
    const titleSlug = pageTitle.toLowerCase()
      .replace(/[^a-z0-9]+/g, '-')
      .replace(/(^-|-$)/g, '');
    const filename = `${timestamp}-${titleSlug}.html`;

console.log('Saving file with name:', filename); // Debug log

// Save file using fetch
    fetch('../process/save_file.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        content: cleanedHTML,
        filename: filename
      })
    })
      .then(response => response.text())
      .then(text => {
        console.log('Raw file save response:', text); // Debug log
        const data = JSON.parse(text);
        if (data.success) {
          // If file is saved successfully, save the page details
          savePageDetails(filename, pageTitle, actionEmail);
        } else {
          throw new Error(data.message || 'Failed to save file');
        }
      })
      .catch(error => {
        console.error('File save error:', error); // Debug log
        document.getElementById('saveStatus').innerHTML =
          `<div class="text-danger">Error saving file: ${error.message}</div>`;
      });

} catch (error) {
    console.error('General error:', error); // Debug log
    document.getElementById('saveStatus').innerHTML =
      `<div class="text-danger">Error: ${error.message}</div>`;
  }
}

function savePageDetails(filename, pageTitle, actionEmail) {
  const formData = new FormData();
  formData.append('title', pageTitle);
  formData.append('action_email', actionEmail);
  formData.append('filename', filename);

fetch('../process/save_landing_page.php', {
    method: 'POST',
    body: formData
  })
    .then(response => {
      // Log the raw response for debugging
      response.text().then(text => {
        console.log('Raw response:', text);
        try {
          // Try to parse the response as JSON
          const data = JSON.parse(text);
          if (data.success) {
            document.getElementById('saveStatus').innerHTML =
              '<div class="text-success">Page saved successfully!</div>';
              setTimeout(closeSaveModal, 2000);
              window.location.href = '../index.php';
          } else {
            throw new Error(data.message || 'Failed to save page details');
          }
        } catch (e) {
          console.error('JSON parse error:', e);
          document.getElementById('saveStatus').innerHTML =
            `<div class="text-danger">Error: Invalid server response</div>`;
        }
      });
    })
    .catch(error => {
      console.error('Fetch error:', error);
      document.getElementById('saveStatus').innerHTML =
        `<div class="text-danger">Error saving page details: ${error.message}</div>`;
    });
}