OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	06/17/2025 10:17:24 AM	rwxrwxr-x
📁 assets	-	02/24/2025 12:08:08 PM	rwxr-xr-x
📄 back2_index.php	20.45 KB	05/19/2025 10:07:15 AM	rw-r--r--
📄 getAnalyticsData.php	1.45 KB	05/19/2025 10:07:15 AM	rw-r--r--
📄 index.php	18.97 KB	05/19/2025 10:07:15 AM	rw-r--r--
📄 index_before_analytics.php	11.83 KB	05/19/2025 10:07:15 AM	rw-r--r--
📄 index_old.php	5.81 KB	05/19/2025 10:07:15 AM	rw-r--r--
📄 lastb_index.php	27.85 KB	05/19/2025 10:07:15 AM	rw-r--r--
📁 pages	-	02/28/2025 05:33:15 AM	rwxrwxrwx
📁 process	-	05/19/2025 10:07:15 AM	rwxr-xr-x
📄 script.js	19.15 KB	02/24/2025 12:20:58 PM	rw-r--r--
📄 style.css	11.13 KB	02/24/2025 12:20:58 PM	rw-r--r--
📄 template1.php	8.37 KB	05/19/2025 10:07:15 AM	rw-r--r--
📁 template2	-	02/24/2025 12:08:09 PM	rwxr-xr-x

Editing: back2_index.php

<?
include '../assets/php/validate.logged.php';
include '../assets/php/db_config.php';
include '../assets/php/function.php';

function getSavedLandingPages($userId)
{
    global $creamdb;

$query = "SELECT id, title, url, created_at FROM user_landing_page WHERE user_id = ? AND deleteFlag='N' ORDER BY created_at DESC";
    $stmt = $creamdb->prepare($query);
    $stmt->bind_param("i", $userId);
    $stmt->execute();
    $result = $stmt->get_result();

$pages = [];
    while ($row = $result->fetch_assoc()) {
        $pages[] = $row;
    }

return $pages;
}

// Get saved pages
$savedPages = getSavedLandingPages($gUserId);
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landing Page Template Editor</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.10.17/interact.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="icon" type="image/x-icon" href="/img/logo.ico">
</head>

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

/* Sidebar styles */
    .sidebar {
        width: 300px;
        background-color: white;
        padding: 20px;
        border-right: 1px solid #ddd;
        overflow-y: auto;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
    }

.sidebar h2 {
        margin-top: 0;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--primary-color);
    }

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

.template-item {
        cursor: pointer;
        transition: all 0.3s ease;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

.template-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

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

.template-item h3 {
        margin: 0;
        padding: 10px;
        font-size: 14px;
        background-color: white;
        color: var(--text-color);
    }

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

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

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

/* Template Preview Area */
    .template-preview {
        width: 100%;
        height: 100%;
    }

/* Template frame */
    .template-frame {
        width: 100%;
        height: 600px;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

.template-details {
        width: 100%;
        max-width: 800px;
        text-align: center;
        margin-top: 20px;
    }

.template-details h2 {
        color: var(--text-color);
        margin-bottom: 15px;
    }

.template-details p {
        color: #666;
        margin-bottom: 25px;
        line-height: 1.6;
    }

/* 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;
    }

a.view-btn {
        padding: 8px 16px;
        background-color: var(--primary-color);
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        text-decoration: none;
        display: inline-block;
    }

a.view-btn:hover {
        background-color: #c24c15;
    }

.use-template-btn {
        padding: 12px 24px;
        font-size: 16px;
        border-radius: 6px;
    }

/* Saved pages section */
    .saved-pages-section {
        margin-top: 30px;
    }

.saved-pages-section h2 {
        color: var(--text-color);
        border-bottom: 2px solid var(--primary-color);
        padding-bottom: 10px;
        margin-bottom: 20px;
    }

.saved-pages-list {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

.saved-page-card {
        background-color: white;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

.saved-page-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    }

.saved-page-content {
        padding: 15px;
    }

.saved-page-content h3 {
        margin: 0 0 10px 0;
        color: var(--text-color);
        font-size: 14px;
    }

.saved-page-content p {
        color: #666;
        margin: 0 0 15px 0;
        font-size: 12px;
    }

.action-buttons {
        display: flex;
        gap: 10px;
    }

.view-btn,
    .edit-btn {
        background-color: var(--primary-color);
    }

.delete-btn {
        background-color: #dc3545;
    }

.no-pages {
        text-align: center;
        padding: 20px;
        background-color: white;
        border-radius: 8px;
        border: 2px dashed #ddd;
    }

.no-pages i {
        font-size: 24px;
        color: #ddd;
        margin-bottom: 10px;
    }

.no-template-selected {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: #888;
        text-align: center;
        padding: 40px;
    }

.no-template-selected i {
        font-size: 64px;
        margin-bottom: 20px;
        color: #ddd;
    }

/* Modal styles */
    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.4);
    }

.modal-content {
        background-color: #fefefe;
        margin: 15% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 50%;
        position: relative;
        border-radius: 8px;
    }

.close {
        color: #aaa;
        font-size: 28px;
        font-weight: bold;
        position: absolute;
        right: 15px;
        top: 5px;
    }

.close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

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

.sidebar {
            width: 100%;
            height: auto;
            max-height: 300px;
            border-right: none;
            border-bottom: 1px solid #ddd;
        }

.template-list {
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
        }

.template-item {
            width: calc(33.333% - 10px);
        }
        
        .saved-pages-list {
            flex-direction: row;
            flex-wrap: wrap;
        }
        
        .saved-page-card {
            width: calc(33.333% - 10px);
        }
    }

@media (max-width: 768px) {
        .template-item {
            width: calc(50% - 10px);
        }
        
        .saved-page-card {
            width: calc(50% - 10px);
        }

.action-buttons {
            flex-direction: column;
        }

.modal-content {
            width: 80%;
        }
    }

@media (max-width: 480px) {
        .template-item {
            width: 100%;
        }
        
        .saved-page-card {
            width: 100%;
        }

.main-content {
            padding: 10px;
        }
    }
</style>

<div class="sidebar">
        <h2>Template Gallery</h2>
        <div class="template-list">
            
            <div class="template-item" data-template="basic_landing_1">
                <img src="assets/basic_landing_1.jpg" alt="Basic Landing Page 1" onerror="this.src='assets/image.png'">
            </div>
            <div class="template-item" data-template="basic_landing_2">
                <img src="assets/basic_landing_2.jpg" alt="Basic Landing Page 2" onerror="this.src='assets/image1.png'">
            </div>
        </div>
        
        
        <div class="saved-pages-section">
            <h2>My Saved Pages</h2>
            
            <?php if (count($savedPages) > 0): ?>
                <div class="saved-pages-list">
                    <?php foreach ($savedPages as $page): ?>
                        <div class="saved-page-card">
                            <div class="saved-page-content">
                                <h3><?= htmlspecialchars($page['title']) ?></h3>
                                <p>Created: <?= date('M d, Y', strtotime($page['created_at'])) ?></p>
                                <div class="action-buttons">
                                    <a href="https://www.knoblycream.com/pages/landingPage.php?id=<?= $page['id'] ?>" class="view-btn" target="_blank">
                                        <i class="fas fa-external-link-alt"></i> View
                                    </a>
                                    
                                    <button class="delete-btn delete-page" data-id="<?= $page['id'] ?>">
                                        <i class="fas fa-trash"></i> Delete
                                    </button>
                                </div>  
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            <?php else: ?>
                <div class="no-pages">
                    <i class="fas fa-folder-open"></i>
                    <p>No saved landing pages yet.</p>
                </div>
            <?php endif; ?>
        </div>
    </div>

<div class="main-content">
        <div class="canvas-area" id="canvasArea">
            
            <div class="no-template-selected" id="noTemplateSelected">
                <i class="fas fa-hand-point-left"></i>
                <h2>Select a Template</h2>
                <p>Choose a template from the sidebar to preview and customize your landing page.</p>
            </div>

<div class="template-preview" id="templatePreview" style="display: none;">
                
                <iframe id="templateFrame" class="template-frame" frameborder="0"></iframe>
            </div>
        </div>
    </div>

<div id="myModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>Confirmation</h2>
            <div id="modalContent">
                
            </div>
        </div>
    </div>

// Template item selection
            $('.template-item').on('click', function() {
                const templateId = $(this).data('template');
                const templateTitle = $(this).find('h3').text();
                const templateDesc = templateDescriptions[templateId] || 'A professional landing page template to showcase your business or product.';
                const templateHtmlPath = templateHtmlPaths[templateId] || 'templates/default.html';

// Update iframe with actual HTML content
                $('#templateFrame').attr('src', templateHtmlPath);
                
                // Update template details
                $('#templateName').text(templateTitle);
                $('#templateDescription').text(templateDesc);

// Show preview, hide "no template" message
                $('#noTemplateSelected').hide();
                $('#templatePreview').show();

// Update the use template button with the template ID
                $('#useTemplateBtn').data('template', templateId);
            });

// Use template button
            $('#useTemplateBtn').on('click', function() {
                const templateId = $(this).data('template');

// Extract category and template number
                const parts = templateId.split('_');
                let category = parts[0];

if (parts.length > 2) {
                    category = parts[0] + '_' + parts[1];
                }

// Redirect based on template type
                if (category === 'basic_landing') {
                    window.location.href = `template_editor.php?template=${templateId}`;
                } else if (category === 'modern_layout') {
                    window.location.href = `modern_template_editor.php?template=${templateId}`;
                } else if (category === 'professional') {
                    window.location.href = `professional_template_editor.php?template=${templateId}`;
                } else if (category === 'minimal_design') {
                    window.location.href = `minimal_template_editor.php?template=${templateId}`;
                } else if (category === 'creative_style') {
                    window.location.href = `creative_template_editor.php?template=${templateId}`;
                } else {
                    window.location.href = `template_editor.php?template=${templateId}`;
                }
            });

// Delete landing page functionality
            $('.delete-page').click(function(e) {
                e.preventDefault();
                const pageId = $(this).data('id');

// Open modal for confirmation
                $('#modalContent').html(`
                    <p>Are you sure you want to delete this landing page?</p>
                    <div class="action-buttons">
                        <button id="confirmDelete" data-id="${pageId}">Yes, Delete</button>
                        <button id="cancelDelete">Cancel</button>
                    </div>
                `);

$('#myModal').css('display', 'block');

// Confirm delete
                $('#confirmDelete').on('click', function() {
                    const deleteId = $(this).data('id');

// AJAX delete request
                    $.ajax({
                        url: 'process/delete_landing_page.php',
                        type: 'POST',
                        data: {
                            id: deleteId
                        },
                        success: function(response) {
                            // Close modal
                            $('#myModal').css('display', 'none');

// Remove the card from UI
                            $(`.delete-page[data-id="${deleteId}"]`).closest('.saved-page-card').fadeOut(300, function() {
                                $(this).remove();

// Check if there are any remaining cards
                                if ($('.saved-page-card').length === 0) {
                                    $('.saved-pages-list').replaceWith(`
                                        <div class="no-pages">
                                            <i class="fas fa-folder-open"></i>
                                            <p>No saved landing pages yet.</p>
                                        </div>
                                    `);
                                }
                            });
                        },
                        error: function() {
                            alert('Error connecting to the server. Please try again.');
                        }
                    });
                });

// Cancel delete
                $('#cancelDelete').on('click', function() {
                    $('#myModal').css('display', 'none');
                });
            });

// Close modal when clicking on X
            $('.close').on('click', function() {
                $('#myModal').css('display', 'none');
            });

// Close modal when clicking outside of it
            $(window).on('click', function(event) {
                if ($(event.target).is('#myModal')) {
                    $('#myModal').css('display', 'none');
                }
            });
        });
    </script>
</body>

</html>