OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	06/17/2025 10:17:24 AM	rwxrwxr-x
📄 24-02-25index.php	42.37 KB	05/19/2025 10:07:19 AM	rw-r--r--
📄 28index.php	55.04 KB	05/19/2025 10:07:19 AM	rw-r--r--
📁 NW_images	-	02/28/2025 12:23:08 PM	rwxr-xr-x
📄 aditya_index.php	39.95 KB	05/19/2025 10:07:19 AM	rw-r--r--
📄 aditya_load_template.php	2.39 KB	05/19/2025 10:07:19 AM	rw-r--r--
📄 aditya_save-template.php	2.44 KB	05/19/2025 10:07:19 AM	rw-r--r--
📄 aditya_upload.php	851 bytes	05/19/2025 10:07:19 AM	rw-r--r--
📁 assets	-	03/13/2025 08:45:46 AM	rwxr-xr-x
📄 back_index.php	28.33 KB	05/19/2025 10:07:19 AM	rw-r--r--
📄 backup_index.php	25.17 KB	05/19/2025 10:07:19 AM	rw-r--r--
📄 db_gallery.php	292 bytes	05/19/2025 10:07:19 AM	rw-r--r--
📄 edit_template.php	658 bytes	05/19/2025 10:07:19 AM	rw-r--r--
📄 fetch_data.php	773 bytes	05/19/2025 10:07:19 AM	rw-r--r--
📄 fetch_titles.php	0 bytes	05/19/2025 10:07:19 AM	rw-r--r--
📄 form.js	7.64 KB	03/13/2025 08:45:38 AM	rw-r--r--
📁 images12	-	03/01/2025 05:00:09 AM	rwxr-xr-x
📁 images13	-	03/01/2025 05:00:09 AM	rwxr-xr-x
📁 images14	-	03/01/2025 05:00:10 AM	rwxr-xr-x
📁 images15	-	03/01/2025 05:00:10 AM	rwxr-xr-x
📁 images16	-	03/01/2025 05:00:11 AM	rwxr-xr-x
📁 images17	-	03/01/2025 05:00:11 AM	rwxr-xr-x
📁 images18	-	03/01/2025 05:00:11 AM	rwxr-xr-x
📁 images19	-	03/01/2025 05:00:12 AM	rwxr-xr-x
📁 images2	-	03/01/2025 05:00:12 AM	rwxr-xr-x
📁 images20	-	03/01/2025 05:00:13 AM	rwxr-xr-x
📁 images21	-	03/01/2025 05:00:13 AM	rwxr-xr-x
📁 images3	-	03/01/2025 05:00:14 AM	rwxr-xr-x
📁 images4	-	03/01/2025 05:00:14 AM	rwxr-xr-x
📁 images5	-	03/01/2025 05:00:15 AM	rwxr-xr-x
📁 images6	-	03/01/2025 05:00:15 AM	rwxr-xr-x
📁 images7	-	03/01/2025 05:00:16 AM	rwxr-xr-x
📁 images8	-	03/01/2025 05:00:16 AM	rwxr-xr-x
📁 images9	-	03/01/2025 05:00:17 AM	rwxr-xr-x
📄 index.php	9.53 KB	05/19/2025 10:07:19 AM	rw-r--r--
📄 load_template.php	2.21 KB	05/19/2025 10:07:19 AM	rw-r--r--
📁 newsletter	-	03/13/2025 05:29:35 AM	rwxr-xr-x
📄 newsletter.png	194.94 KB	03/13/2025 08:45:38 AM	rw-r--r--
📄 nleditor_navbar.php	22.6 KB	05/19/2025 10:07:19 AM	rw-r--r--
📁 pages	-	03/13/2025 05:29:39 AM	rwxr-xr-x
📁 pages_backup	-	03/13/2025 08:45:51 AM	rwxr-xr-x
📄 process.js	27.81 KB	03/13/2025 08:45:38 AM	rw-r--r--
📄 processb.js	31.21 KB	03/13/2025 08:45:38 AM	rw-r--r--
📄 save-template.php	2.5 KB	05/19/2025 10:07:19 AM	rw-r--r--
📄 script.js	34.02 KB	03/13/2025 08:45:38 AM	rw-r--r--
📄 styles.css	2.43 KB	03/13/2025 08:45:38 AM	rw-r--r--
📄 template1.jpg	0 bytes	03/13/2025 08:45:38 AM	rw-r--r--
📄 test.html	5.84 KB	03/13/2025 08:45:38 AM	rw-r--r--
📄 test.php	1.58 KB	05/19/2025 10:07:19 AM	rw-r--r--
📄 test_index.php	48.82 KB	05/19/2025 10:07:19 AM	rw-r--r--
📄 texts.txt	1.7 KB	03/13/2025 08:45:38 AM	rw-r--r--
📄 upload.php	858 bytes	05/19/2025 10:07:19 AM	rw-r--r--
📁 uploads	-	03/13/2025 08:45:46 AM	rwxr-xr-x

Editing: back_index.php

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Newsletter Template Editor</title>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.10.17/interact.min.js"></script>
</head>
<style>
    /* Main styles */
    :root {
        --primary-color: #db5919;
        --secondary-color: #f4d03f;
        --text-color: #333;
        --background-color: #f5f5f5;
    }

body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
        display: flex;
        height: 100vh;
        background-color: var(--background-color);
    }

/* Sidebar styles */
    .sidebar {
        width: 250px;
        background-color: white;
        padding: 20px;
        border-right: 1px solid #ddd;
        overflow-y: auto;
    }

.template-list,
    .elements-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 20px;
    }

.template,
    .element {
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

.template:hover,
    .element:hover {
        background-color: #f0f0f0;
        border-color: var(--primary-color);
    }

.template img {
        width: 100%;
        height: 120px;
        object-fit: cover;
        margin-bottom: 5px;
    }

/* Main content styles */
    .main-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 20px;
    }

.toolbar {
        background-color: white;
        padding: 10px;
        border-radius: 4px;
        margin-bottom: 20px;
        display: flex;
        gap: 10px;
        align-items: center;
    }

.text-controls {
        display: flex;
        gap: 10px;
        align-items: center;
    }

.canvas-area {
        flex: 1;
        background-color: white;
        border-radius: 4px;
        padding: 20px;
        overflow-y: auto;
        min-height: 800px;
        position: relative;
    }

/* Element styles */
    .draggable {
        position: absolute;
        padding: 10px;
        border: 1px solid transparent;
        cursor: move;
        user-select: none;
    }

.draggable:hover {
        border-color: var(--primary-color);
    }

.draggable.selected {
        border: 2px solid var(--primary-color);
    }

/* Button styles */
    button {
        padding: 8px 16px;
        background-color: var(--primary-color);
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

button:hover {
        background-color: #c24c15;
    }

/* Form controls */
    select,
    input[type="color"] {
        padding: 5px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

/* Responsive design */
    @media (max-width: 768px) {
        body {
            flex-direction: column;
        }

.sidebar {
            width: 100%;
            height: 200px;
        }
    }

.template {
        cursor: pointer;
        padding: 10px;
        border: 1px solid #ccc;
        margin: 5px;
        display: inline-block;
    }

#new-div-container {
        margin-top: 20px;
    }

.new-div {
        width: 150px;
        height: auto;
        overflow-y: scroll;
        padding: 0px;
        margin: 10px;
        border: 1px solid #000;
        background-color: #f0f0f0;
    }

.new-div img {
        width: -webkit-fill-available;
    }
</style>

<style>
    /* Existing styles */
    :root {
        --primary-color: #db5919;
        --secondary-color: #f4d03f;
        --text-color: #333;
        --background-color: #f5f5f5;
    }

body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
        display: flex;
        height: 100vh;
        background-color: var(--background-color);
    }

.sidebar {
        width: 250px;
        background-color: white;
        padding: 20px;
        border-right: 1px solid #ddd;
        overflow-y: auto;
    }

.main-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 20px;
    }

/* New text element styles */
    .text-element {
        position: absolute;
        min-width: 50px;
        min-height: 20px;
        padding: 5px;
        cursor: move;
        border: 1px solid transparent;
        transition: border 0.3s ease;
    }

.text-element:hover {
        border: 1px dashed var(--primary-color);
    }

.text-element.selected {
        border: 1px solid var(--primary-color);
    }

.text-element[contenteditable="true"] {
        outline: none;
        border: 1px solid var(--primary-color);
    }

/* Text controls styles */
    .text-controls {
        display: flex;
        gap: 10px;
        align-items: center;
        background-color: white;
        padding: 10px;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

.text-controls button {
        padding: 5px 10px;
        background-color: white;
        border: 1px solid #ddd;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

.text-controls button.active {
        background-color: var(--primary-color);
        color: white;
    }

.text-controls select,
    .text-controls input {
        padding: 5px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

/* Add text button style */
    .add-text-btn {
        margin-bottom: 20px;
        width: 100%;
        padding: 10px;
        background-color: var(--primary-color);
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

.add-text-btn:hover {
        background-color: #c24c15;
    }
</style>

<body>
    <div class="sidebar">
        <h2>Templates</h2>
        <div class="template-list">
            <div class="template" data-template="template_1" data-category="basic_newsletter">
                <span>Basic Newsletter</span>
            </div>
            <div class="template" data-template="template_2" data-category="modern_layout">
                <span>Modern Layout</span>
            </div>
            <div class="template" data-template="template_3" data-category="professional">
                <span>Professional</span>
            </div>
            <div class="template" data-template="template_4" data-category="minimal_desing">
                <span>Minimal Design</span>
            </div>
            <div class="template" data-template="template_5" data-category="creative_style">
                <span>Creative Style</span>
            </div>
        </div>

<div class="image-upload">
            <h2>Upload Image</h2>
            <input type="file" id="imageUpload" accept="image/*">
        </div>
    </div>
    <div id="new-div-container"></div>

<div class="main-content">
        <div class="text-controls">
            <select id="fontFamily">
                <option value="Arial">Arial</option>
                <option value="Times New Roman">Times New Roman</option>
                <option value="Helvetica">Helvetica</option>
                <option value="Georgia">Georgia</option>
                <option value="Verdana">Verdana</option>
            </select>
            <select id="fontSize">
                <option value="12">12px</option>
                <option value="14">14px</option>
                <option value="16">16px</option>
                <option value="18">18px</option>
                <option value="24">24px</option>
                <option value="32">32px</option>
                <option value="48">48px</option>
            </select>
            <button id="boldText" title="Bold"><strong style="color: #000;">B</strong></button>
            <button id="italicText" title="Italic"><em style="color: #000;">I</em></button>
            <button id="underlineText" title="Underline" style="color: #000;"><u>U</u></button>
            <input type="color" id="textColor" title="Text Color">
            <select id="textAlign">
                <option value="left">Left</option>
                <option value="center">Center</option>
                <option value="right">Right</option>
            </select>
        </div>

</div>
    </div>

// Create the URL of the PHP endpoint for category-based fetching
                    const templateUrl = `load_template.php?category=${category}`;

// Create a new div element for the template content
                    const newDiv = $('<div class="new-div"></div>');

// Show loading message while fetching
                    newDiv.html('<p>Loading templates...</p>');

// Append the new div to the new-div-container
                    $('#new-div-container').empty().append(newDiv); // Clear previous content before appending

// Fetch the template data from the server using the PHP endpoint
                    $.ajax({
                        url: templateUrl, // The PHP endpoint
                        method: 'GET', // HTTP method to use
                        success: function(response) {
                            // Check if response contains templates (using data-template-path)
                            if (response.includes('data-template-path')) {
                                // Parse the response and display the templates
                                const templatesContainer = $(response); // Assuming multiple templates are returned

// Insert each template into the new div
                                newDiv.html(templatesContainer);

// Add click event for each template
                                newDiv.find('.template').each(function() {
                                    $(this).on('click', function() {
                                        // Get the template's path and image details
                                        const templatePath = $(this).data('template-path');
                                        const imagePath = $(this).find('img').attr('src');

// Handle template selection: Update canvas area
                                        const canvasArea = $('#canvasArea');
                                        canvasArea.empty(); // Clear the current content

// Fetch and display the template content in the canvas area
                                        $.ajax({
                                            url: templatePath,
                                            method: 'GET',
                                            success: function(templateContent) {
                                                // Insert the template content into the canvas area
                                                canvasArea.html(templateContent);

// Make all text elements editable
                                                makeElementsEditable();

// Set up image uploads
                                                setupImageUploads();

// Add save button functionality
                                                addSaveButton(templatePath);
                                            },
                                            error: function(xhr, status, error) {
                                                canvasArea.html(`<p>Error loading template: ${error}</p>`);
                                            }
                                        });
                                    });
                                });
                            } else {
                                // Handle error if no templates are returned
                                newDiv.html('<p>No templates found for this category.</p>');
                            }
                        },
                        error: function(xhr, status, error) {
                            // If there's an error (e.g., file not found), show an error message
                            newDiv.html(`<p>Error: ${error}</p>`);
                        }
                    });
                });
            });
        });
    </script>

<script>
        document.addEventListener('DOMContentLoaded', function() {
            let selectedElement = null;
            let textCounter = 0;

// Function to create a new text element
            function createTextElement() {
                const textElement = document.createElement('div');
                textElement.className = 'text-element';
                textElement.setAttribute('data-text-id', `text-${++textCounter}`);
                textElement.innerHTML = 'Click to edit text';
                textElement.style.left = '50px';
                textElement.style.top = '50px';

return textElement;
            }

// Add text button click handler
            document.getElementById('addTextBtn').addEventListener('click', function() {
                const textElement = createTextElement();
                document.getElementById('canvasArea').appendChild(textElement);
                makeElementDraggable(textElement);
                selectElement(textElement);
            });

// Make elements draggable using interact.js
            function makeElementDraggable(element) {
                interact(element)
                    .draggable({
                        inertia: true,
                        modifiers: [
                            interact.modifiers.restrictRect({
                                restriction: 'parent',
                                endOnly: true
                            })
                        ],
                        listeners: {
                            move: dragMoveListener,
                            start: function(event) {
                                selectElement(event.target);
                            }
                        }
                    })
                    .resizable({
                        edges: {
                            left: true,
                            right: true,
                            bottom: true,
                            top: true
                        },
                        listeners: {
                            move: resizeMoveListener
                        }
                    });
            }

// Drag move listener
            function dragMoveListener(event) {
                const target = event.target;
                const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
                const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

target.style.transform = `translate(${x}px, ${y}px)`;
                target.setAttribute('data-x', x);
                target.setAttribute('data-y', y);
            }

// Resize move listener
            function resizeMoveListener(event) {
                const target = event.target;
                let x = (parseFloat(target.getAttribute('data-x')) || 0);
                let y = (parseFloat(target.getAttribute('data-y')) || 0);

Object.assign(target.style, {
                    width: `${event.rect.width}px`,
                    height: `${event.rect.height}px`,
                    transform: `translate(${x}px, ${y}px)`
                });
            }

// Select element function
            function selectElement(element) {
                if (selectedElement) {
                    selectedElement.classList.remove('selected');
                    selectedElement.setAttribute('contenteditable', 'false');
                }
                selectedElement = element;
                element.classList.add('selected');

// Update controls to match selected element's styles
                document.getElementById('fontFamily').value = element.style.fontFamily || 'Arial';
                document.getElementById('fontSize').value = parseInt(element.style.fontSize) || '16';
                document.getElementById('textColor').value = rgb2hex(element.style.color) || '#000000';
                document.getElementById('textAlign').value = element.style.textAlign || 'left';
            }

// Double click to edit
            document.getElementById('canvasArea').addEventListener('dblclick', function(e) {
                if (e.target.classList.contains('text-element')) {
                    e.target.setAttribute('contenteditable', 'true');
                    e.target.focus();
                }
            });

// Style controls event listeners
            document.getElementById('fontFamily').addEventListener('change', function(e) {
                if (selectedElement) {
                    selectedElement.style.fontFamily = e.target.value;
                }
            });

document.getElementById('fontSize').addEventListener('change', function(e) {
                if (selectedElement) {
                    selectedElement.style.fontSize = `${e.target.value}px`;
                }
            });

document.getElementById('textColor').addEventListener('input', function(e) {
                if (selectedElement) {
                    selectedElement.style.color = e.target.value;
                }
            });

document.getElementById('boldText').addEventListener('click', function() {
                if (selectedElement) {
                    const isBold = selectedElement.style.fontWeight === 'bold';
                    selectedElement.style.fontWeight = isBold ? 'normal' : 'bold';
                    this.classList.toggle('active');
                }
            });

document.getElementById('italicText').addEventListener('click', function() {
                if (selectedElement) {
                    const isItalic = selectedElement.style.fontStyle === 'italic';
                    selectedElement.style.fontStyle = isItalic ? 'normal' : 'italic';
                    this.classList.toggle('active');
                }
            });

document.getElementById('underlineText').addEventListener('click', function() {
                if (selectedElement) {
                    const isUnderlined = selectedElement.style.textDecoration === 'underline';
                    selectedElement.style.textDecoration = isUnderlined ? 'none' : 'underline';
                    this.classList.toggle('active');
                }
            });

document.getElementById('textAlign').addEventListener('change', function(e) {
                if (selectedElement) {
                    selectedElement.style.textAlign = e.target.value;
                }
            });

// Utility function to convert RGB to HEX
            function rgb2hex(rgb) {
                if (!rgb) return '#000000';
                if (rgb.search("rgb") == -1) return rgb;
                rgb = rgb.match(/^rgba?$(\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?$$/);

function hex(x) {
                    return ("0" + parseInt(x).toString(16)).slice(-2);
                }
                return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
            }

// Click outside to deselect
            document.addEventListener('click', function(e) {
                if (!e.target.classList.contains('text-element') && !e.target.closest('.text-controls')) {
                    if (selectedElement) {
                        selectedElement.classList.remove('selected');
                        selectedElement.setAttribute('contenteditable', 'false');
                        selectedElement = null;
                    }
                }
            });
        });
    </script>
    <script>
        function makeElementsEditable() {
            // Make various elements editable
            $('#canvasArea p, #canvasArea h1, #canvasArea h2, #canvasArea h3, #canvasArea h4, #canvasArea h5, #canvasArea h6, #canvasArea span, #canvasArea a, #canvasArea li, #canvasArea strong, #canvasArea em, #canvasArea b, #canvasArea i')
                .attr('contenteditable', 'true') // Make elements editable
                .addClass('editable-element') // Add a class to identify editable elements
                .css({
                    'border': '1px dashed transparent', // Default invisible border
                    'padding': '5px', // Add some padding for better interaction
                    'outline': 'none', // Remove default outline when focused
                    'cursor': 'text' // Set cursor to text when hovering over the element
                })
                .hover(
                    function() {
                        $(this).css('border-color', '#999'); // Show dashed border on hover
                    },
                    function() {
                        $(this).css('border-color', 'transparent'); // Hide the border when not hovering
                    }
                )
                .focus(function() {
                    // Show a solid border when the element is focused
                    $(this).css('border-color', '#007bff');
                })
                .blur(function() {
                    // Remove the border when the element loses focus
                    $(this).css('border-color', 'transparent');
                });
        }

function setupImageUploads() {
            // Add upload button next to each image
            $('#canvasArea img').each(function() {
                const img = $(this);
                const uploadBtn = $('<input type="file" accept="image/*" style="display: none;">')
                    .insertAfter(img);

const changeBtn = $('<button class="image-upload-btn">Change Image</button>')
                    .insertAfter(img)
                    .css({
                        'position': 'absolute',
                        'background': '#007bff',
                        'color': 'white',
                        'border': 'none',
                        'padding': '5px 10px',
                        'cursor': 'pointer',
                        'display': 'none'
                    });

// Show/hide upload button on hover
                img.parent()
                    .css('position', 'relative')
                    .hover(
                        function() {
                            changeBtn.show();
                        },
                        function() {
                            changeBtn.hide();
                        }
                    );

// Handle image upload
                changeBtn.click(function() {
                    uploadBtn.click();
                });

uploadBtn.change(function(e) {
                    const file = e.target.files[0];
                    if (file) {
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            img.attr('src', e.target.result);
                            // Store the file for later saving
                            img.data('newImage', file);
                        };
                        reader.readAsDataURL(file);
                    }
                });
            });
        }

function addSaveButton(templatePath) {
            // Add save button at the top
            const saveBtn = $('<button id="saveTemplate">Save Changes</button>')
                .prependTo('#canvasArea')
                .css({
                    'position': 'fixed',
                    'top': '20px',
                    'right': '20px',
                    'background': '#28a745',
                    'color': 'white',
                    'border': 'none',
                    'padding': '10px 20px',
                    'cursor': 'pointer',
                    'z-index': '1000'
                });

saveBtn.click(function() {
                saveTemplate(templatePath);
            });
        }

function saveTemplate(templatePath) {
            // Create FormData to handle both text content and images
            const formData = new FormData();

// Get the current state of the template
            const template = $('#canvasArea').clone();

// Remove editing-related elements and classes
            template.find('.image-upload-btn, input[type="file"]').remove();
            template.find('[contenteditable]').removeAttr('contenteditable');
            template.find('.editable-element').removeClass('editable-element');

// Add the template path and HTML content to FormData
            formData.append('templatePath', templatePath);
            formData.append('template', template.html());

// Get the template filename from the path
            const templateFileName = templatePath.split('/').pop();
            formData.append('templateFileName', templateFileName);

// Add any changed images to FormData
            let imageCount = 0;
            template.find('img').each(function(index) {
                const newImage = $(this).data('newImage');
                if (newImage) {
                    formData.append(`image_${imageCount}`, newImage);
                    formData.append(`image_${imageCount}_selector`, $(this).getPath());
                    imageCount++;
                }
            });

// Save the template
            $.ajax({
                url: 'save-template.php', // Update this path to match your server structure
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.success) {
                        alert('Template saved successfully!');
                    } else {
                        alert('Error saving template: ' + response.error);
                    }
                },
                error: function(xhr, status, error) {
                    alert('Error saving template: ' + error);
                    console.error('Save error details:', xhr.responseText);
                }
            });
        }

// Helper function to get unique selector for an element
        $.fn.getPath = function() {
            if (this.length != 1) return false;
            var path = this.prop('tagName').toLowerCase();
            if (this.attr('id')) {
                path += '#' + this.attr('id');
            } else if (this.attr('class')) {
                path += '.' + this.attr('class').replace(/\s+/g, '.');
            }
            return path;
        };
    </script>

</body>

</html>