OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	06/17/2025 10:17:24 AM	rwxrwxr-x
📁 assets	-	05/19/2025 10:07:13 AM	rwxr-xr-x
📄 checkSession.php	1.52 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 follow_action.php	1.7 KB	05/19/2025 10:07:13 AM	rw-r--r--
📁 genai	-	05/19/2025 10:07:13 AM	rwxr-xr-x
📁 inc	-	05/19/2025 10:07:13 AM	rwxr-xr-x
📄 index.php	54.5 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 logInCheck.php	4.41 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 logout.php	1.14 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 new-page-copy.php	10.89 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 new-page.php	10.63 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 new_my_collection.php	52.1 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 process_data.php	5.02 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 sign-in.php	34.79 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 signInProcess.php	14.06 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 stream.php	70.38 KB	05/19/2025 10:07:13 AM	rw-r--r--

Editing: new_my_collection.php

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Collections</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="assets/css/social.css">
    <style>
        :root {
            --cream-primary: #f26522;
            --cream-bg-light: #f5ede7;
            --cream-text-dark: #333;
        }

.container-fluid {
            width: 100%;
            padding-right: 15px;
            padding-left: 15px;
            margin-right: auto;
            margin-left: auto;
        }

.card {
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s ease-in-out;
            width: 100%;
        }

.card:hover {
            transform: translateY(-2px);
        }

.card h4 {
            font-weight: 600;
        }

.card a {
            text-decoration: none;
        }

.card a:hover {
            text-decoration: underline;
        }

.nav-tabs .nav-link {
            border: none;
            color: var(--cream-text-dark);
            padding: 10px 15px;
            font-weight: 500;
        }

.nav-tabs .nav-link.active {
            border-bottom: 3px solid var(--cream-primary);
            color: var(--cream-primary);
            background-color: transparent;
        }

.btn-cream {
            background-color: var(--cream-primary);
            color: white;
            border: none;
        }

.btn-cream:hover {
            background-color: #e05a1a;
            color: white;
        }

.btn-outline-cream {
            color: var(--cream-primary);
            border-color: var(--cream-primary);
        }

.btn-outline-cream:hover {
            background-color: var(--cream-primary);
            color: white;
        }

.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
            background-color: var(--cream-primary);
            border-color: var(--cream-primary);
        }

.action-dropdown {
            position: relative;
            display: inline-block;
        }

.action-dropdown-content {
            display: none;
            position: absolute;
            right: 0;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
            border-radius: 4px;
        }

.action-dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: left;
        }

.action-dropdown-content a:hover {
            background-color: #f1f1f1;
            border-radius: 4px;
        }

.action-dropdown:hover .action-dropdown-content {
            display: block;
        }

.action-dropdown .dots-icon {
            cursor: pointer;
            padding: 5px;
            font-size: 18px;
        }

.badge-cream {
            background-color: #ffebe0;
            color: var(--cream-primary);
            font-weight: 500;
        }

.badge-warning {
            background-color: #fff3cd;
            color: #856404;
            font-weight: 500;
        }

.panelFeeds {
            overflow-y: auto;
            width: 100%;
        }

.social-share-icons i {
            transition: transform 0.2s;
        }

.social-share-icons i:hover {
            transform: scale(1.1);
        }

.modal-content {
            border-radius: 12px;
        }

/* Custom scrollbar */
        .panelFeeds::-webkit-scrollbar {
            width: 6px;
        }

.panelFeeds::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

.panelFeeds::-webkit-scrollbar-thumb {
            background: #ddd;
            border-radius: 3px;
        }

.panelFeeds::-webkit-scrollbar-thumb:hover {
            background: #ccc;
        }

/* Share modal styles */
        .upload-section {
            padding: 15px;
        }

#contentTextarea {
            border-radius: 8px;
            min-height: 80px;
        }

.openModalButton {
            cursor: pointer;
            height: 32px;
            position: relative;
            top: 5px;
        }

/* Media preview */
        #mediaPreview {
            border-radius: 8px;
            background-color: #f8f9fa;
        }

/* For mobile */
        @media (max-width: 768px) {
            .sideWithMainContainer {
                flex-direction: column;
            }

.myCollectionSide {
                width: 100%;
                display: none;
                /* Hide sidebar on mobile by default */
            }

.card-body {
                padding: 15px;
            }
        }

.main-content-page {
            margin-left: 240px;
            margin-top: 60px;
            flex: 1;
            padding: 20px;
            /* display: grid
        ; */
            /* grid-template-columns: minmax(400px, 650px) 300px; */
            gap: 20px;
            justify-content: center;
            transition: all 0.3s ease;
        }
    </style>
</head>

<body>
    
    <div class="modal fade" id="responseModal" tabindex="-1" aria-labelledby="responseModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="responseModalLabel">Response</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Loading...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

<div class="modal fade" id="uploadModal" tabindex="-1" aria-labelledby="uploadModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="uploadModalLabel">Share</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="upload-section">
                        <div class="d-flex align-items-start">
                            <div class="w-100">
                                <div id="loadingIndicator" style="display: none; font-size: 14px; color: gray;">Generating<span id="dots">...</span></div>
                                <div class="d-flex align-items-center gap-2">
                                    <textarea id="contentTextarea" class="form-control mb-2" placeholder="What would you like to share?"
                                        style="flex: 1; overflow: hidden; resize: none;" oninput="adjustTextareaHeight(this)"></textarea>
                                </div>

<div id="ytPreview" class="mt-3"></div>
                                <div id="loadingIcon" class="text-center d-none">
                                    <div class="spinner-border" role="status">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                </div>

<?php include 'assets/php/new_social_sidebar.php' ?>

<div class="main-content-page">
            <div class="col-12">
                
                <div class="container-fluid sideMaincontent">
                    <div id="panelContent">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb py-3">
                                <li class="breadcrumb-item w-100 d-flex justify-content-between align-items-center">
                                    <h4 class="mb-0">My Collections</h4>
                                    <div>
                                        <button type="button" id="buttonAddNewsletter" class="btn btn-sm btn-success d-none" onclick="chkAddNewsletter()">
                                            Generate Newsletter
                                        </button>
                                        <button type="button" id="buttonAddCovid" class="btn btn-sm btn-success d-none" onclick="chkAddCovid()">
                                            Add to Covid page
                                        </button>
                                        <button type="button" id="buttonAddLanding" class="btn btn-sm btn-success d-none" onclick="chkAddLanding()">
                                            Add to Showcase
                                        </button>
                                    </div>
                                </li>
                            </ol>
                        </nav>

<ul class="nav nav-tabs mb-4">
                            <li class="nav-item">
                                <a class="nav-link active" data-bs-toggle="tab" href="#itemActive" role="tab" onclick="gActAfter='itemActive'">
                                    Active
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-bs-toggle="tab" href="#myShowcase" role="tab" onclick="gActAfter='myShowcase'">
                                    My Showcase
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-bs-toggle="tab" href="#itemSharedBy" role="tab" onclick="gActAfter='itemSharedBy'">
                                    Shared by me
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-bs-toggle="tab" href="#itemSharedWith" role="tab" onclick="gActAfter='itemSharedWith'">
                                    Shared with me
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-bs-toggle="tab" href="#itemArchived" role="tab" onclick="gActAfter='itemArchived'">
                                    Archived
                                </a>
                            </li>
                        </ul>

<div class="tab-content my-3">
                            
                            <div class="tab-pane fade show active" id="itemActive" role="tabpanel">
                                <div class="panelFeeds" style="max-height:calc(100vh - 245px)">
                                    
                                    
                                    <div class="card p-0 mb-3 border-0" style="background-color:#f5ede7">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-10 col-md-11">
                                                    <h4 class="mb-0">
                                                        <a href="https://www.knoblycream.com/view/123/example-article" target="_blank" style="color:#f26522">
                                                            Example Article Title
                                                        </a>
                                                    </h4>
                                                    <div style="color:#f26522" class="mb-3">Publisher: Knobly</div>
                                                </div>
                                                <div class="col-2 col-md-1 text-end">
                                                    <div class="action-dropdown">
                                                        <div class="dots-icon">
                                                            <i class="fas fa-ellipsis-vertical"></i>
                                                        </div>
                                                        <div class="action-dropdown-content">
                                                            <a href="#" title="Edit Item">
                                                                <i data-id="123" class="editRow fa-regular fa-edit fa-lg me-2"></i> Edit
                                                            </a>
                                                            <a href="#" title="Archive Item">
                                                                <i data-id="123" class="archiveRow fa-solid fa-download fa-lg me-2"></i> Archive
                                                            </a>
                                                            <a href="#" title="Delete Item">
                                                                <i data-id="123" class="delRow fa-regular fa-trash-can fa-lg me-2"></i> Delete
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row mt-2">
                                                <div class="col-12 col-md-5 text-center text-md-start">
                                                    <span id="panelShowcase_123">
                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input" type="checkbox" name="landingData"
                                                                data-feed-id="123" id="landingCheck123" onclick="addLanding()">
                                                            <label class="form-check-label text-danger" for="landingCheck123">
                                                                Select for Showcase
                                                            </label>
                                                        </div>
                                                    </span>
                                                </div>
                                                <div class="data col-12 col-md-7 text-center text-md-end mt-2 mt-md-0"
                                                    data-feed-id="123"
                                                    data-feed-title="Example Article Title"
                                                    data-feed-url="https://www.knoblycream.com/view/123/example-article"
                                                    data-feed-publisher="Knobly">

<div class="form-check form-check-inline">
                                                        <input class="form-check-input" type="checkbox" name="feedData"
                                                            id="newsletterCheck123" onclick="addNewsletter()">
                                                        <label class="form-check-label" for="newsletterCheck123">
                                                            Send to Newsletter
                                                        </label>
                                                    </div>

<button class="btn btn-sm btn-info px-2 py-1 buttonCreamShare"
                                                        data-id="123">Cream<i>Share</i></button>

</div>
                            </div>

<div class="tab-pane fade" id="myShowcase" role="tabpanel">
                                <div class="panelFeeds" style="max-height:calc(100vh - 245px)">
                                    
                                    <div class="card p-0 mb-3 border-0" style="background-color:#f5ede7">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-10 col-md-11">
                                                    <h4 class="mb-0">
                                                        <a href="https://www.knoblycream.com/view/456/showcase-article" target="_blank" style="color:#f26522">
                                                            Showcase Article Example
                                                        </a>
                                                    </h4>
                                                    <div style="color:#f26522" class="mb-3">Publisher: Cream</div>
                                                </div>
                                                <div class="col-2 col-md-1 text-end">
                                                    <div class="action-dropdown">
                                                        <div class="dots-icon">
                                                            <i class="fas fa-ellipsis-vertical"></i>
                                                        </div>
                                                        <div class="action-dropdown-content">
                                                            <a href="#" title="Archive Item">
                                                                <i data-id="456" class="archiveRow fa-solid fa-download fa-lg me-2"></i> Archive
                                                            </a>
                                                            <a href="#" title="Delete Item">
                                                                <i data-id="456" class="delRow fa-regular fa-trash-can fa-lg me-2"></i> Delete
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row mt-2">
                                                <div class="col-12 col-md-4 text-center text-md-start">
                                                    <span id="panelShowcase_456">
                                                        <div class="text-danger py-1" style="user-select:none">
                                                            <i class="fa-regular fa-square-check"></i>
                                                            Showcase (<a href="#" onclick="removeShowcase(456)">Remove</a>)
                                                        </div>
                                                    </span>
                                                </div>
                                                <div class="data col-12 col-md-8 text-center text-md-end mt-2 mt-md-0"
                                                    data-feed-id="456"
                                                    data-feed-title="Showcase Article Example"
                                                    data-feed-url="https://www.knoblycream.com/view/456/showcase-article"
                                                    data-feed-publisher="Cream">

<div class="form-check form-check-inline">
                                                        <input class="form-check-input" type="checkbox" name="feedData"
                                                            id="newsletterCheck456" onclick="addNewsletter()">
                                                        <label class="form-check-label" for="newsletterCheck456">
                                                            Send to Newsletter
                                                        </label>
                                                    </div>

<button class="btn btn-sm btn-info px-2 py-1 buttonCreamShare"
                                                        data-id="456">Cream<i>Share</i></button>

</div>
                            </div>

<div class="tab-pane fade" id="itemSharedBy" role="tabpanel">
                                <div class="panelFeeds" style="max-height:calc(100vh - 260px)">
                                    
                                    <div class="card p-0 mb-3 border-0" style="background-color:#f5ede7">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col">
                                                    <h4 class="mb-0">
                                                        <a href="/view/789/shared-article" target="_blank" style="color:#f26522">
                                                            Article I Shared
                                                        </a>
                                                    </h4>
                                                </div>
                                            </div>
                                            <div class="row mt-2">
                                                <div class="col-12 col-md-4 text-center text-md-start">
                                                    <div style="color:#f26522">Publisher: Cream</div>
                                                </div>
                                                <div class="col-12 col-md-8 text-center text-md-end my-2 my-md-0">
                                                    <span class="badge bg-warning text-dark px-3 py-2">
                                                        Shared with John Doe, Jane Smith
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

</div>
                            </div>

<div class="tab-pane fade" id="itemSharedWith" role="tabpanel">
                                <div class="panelFeeds" style="max-height:calc(100vh - 260px)">
                                    
                                    <div class="card p-0 mb-3 border-0" style="background-color:#f5ede7">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-12 col-md-10">
                                                    <h4 class="mb-0">
                                                        <a href="/view/101/shared-with-me" target="_blank" style="color:#f26522">
                                                            Article Shared With Me
                                                        </a>
                                                    </h4>
                                                    <div style="color:#f26522" class="mb-3">Publisher: Knobly</div>

<div class="col-12 col-md-2 text-center text-md-start mt-2 mt-md-0">
                                                        <span class="badge badge-cream px-3 py-2">
                                                            Shared by: Sarah Johnson
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

</div>
                            </div>

<div class="tab-pane fade" id="itemArchived" role="tabpanel">
                                <div class="panelFeeds" style="max-height:calc(100vh - 260px)">
                                    
                                    <div class="card p-0 mb-3 border-0" style="background-color:#f5ede7">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-10 col-md-11">
                                                    <h4 class="mb-0">
                                                        <a href="/view/202/archived-article" target="_blank" style="color:#f26522">
                                                            Archived Article Example
                                                        </a>
                                                    </h4>
                                                    <div style="color:#f26522" class="mb-3">Publisher: Cream</div>
                                                </div>
                                                <div class="col-2 col-md-1 text-end">
                                                    <div class="action-dropdown">
                                                        <div class="dots-icon">
                                                            <i class="fas fa-ellipsis-vertical"></i>
                                                        </div>
                                                        <div class="action-dropdown-content">
                                                            <a href="#" title="Restore Item">
                                                                <i data-id="202" class="restoreRow fa-solid fa-arrow-rotate-left fa-lg me-2"></i> Restore
                                                            </a>
                                                            <a href="#" title="Delete Item">
                                                                <i data-id="202" class="delRow fa-regular fa-trash-can fa-lg me-2"></i> Delete
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

// Function to adjust textarea height
        function adjustTextareaHeight(textarea) {
            textarea.style.height = "auto";
            textarea.style.height = (textarea.scrollHeight) + "px";
        }

// Preview uploaded media
        function previewMedia() {
            const fileInput = document.getElementById('fileInput');
            const preview = document.getElementById('mediaPreview');

if (fileInput.files && fileInput.files[0]) {
                const file = fileInput.files[0];
                const reader = new FileReader();

reader.onload = function(e) {
                    preview.innerHTML = '';

if (file.type.startsWith('image/')) {
                        const img = document.createElement('img');
                        img.src = e.target.result;
                        img.classList.add('img-fluid', 'rounded');
                        preview.appendChild(img);
                    } else if (file.type.startsWith('video/')) {
                        const video = document.createElement('video');
                        video.src = e.target.result;
                        video.classList.add('img-fluid', 'rounded');
                        video.controls = true;
                        preview.appendChild(video);
                    }
                }

reader.readAsDataURL(fileInput.files[0]);
            }
        }

// Function to fetch AI-generated content
        function fetchGenAIContent() {
            const loadingIndicator = document.getElementById('loadingIndicator');
            loadingIndicator.style.display = 'block';

// Simulating AI generation with a timeout
            let dotCount = 0;
            const dotsElement = document.getElementById('dots');

const dotInterval = setInterval(() => {
                dotsElement.textContent = '.'.repeat((dotCount % 3) + 1);
                dotCount++;
            }, 500);

// Simulate API call
            setTimeout(() => {
                clearInterval(dotInterval);
                loadingIndicator.style.display = 'none';

const textarea = document.getElementById('contentTextarea');
                const currentText = textarea.value;
                const aiSuggestion = "Check out this amazing article I found in my collection! It provides valuable insights about the topic. What do you think? #KnoblyCream #Share";

textarea.value = currentText ? currentText + " " + aiSuggestion : aiSuggestion;
                adjustTextareaHeight(textarea);
            }, 2000);
        }

// Function to upload post
        function uploadPost() {
            const content = document.getElementById('contentTextarea').value;
            const loadingIcon = document.getElementById('loadingIcon');

if (!content.trim()) {
                alert("Please enter some content to share");
                return;
            }

loadingIcon.classList.remove('d-none');

// Simulate posting to social media
            setTimeout(() => {
                loadingIcon.classList.add('d-none');
                $('#uploadModal').modal('hide');

// Show success message
                document.querySelector('#responseModal .modal-body').innerHTML =
                    '<div class="alert alert-success">Your content has been shared successfully!</div>';
                $('#responseModal').modal('show');

// Reset form
                document.getElementById('contentTextarea').value = '';
                document.getElementById('mediaPreview').innerHTML = '';
                document.getElementById('linkPreview').classList.add('d-none');
                document.getElementById('ytPreview').innerHTML = '';
                document.getElementById('fileInput').value = '';
            }, 1500);
        }

// Add to newsletter
        function addNewsletter() {
            const checkedBoxes = document.querySelectorAll('input[name="feedData"]:checked');
            document.getElementById('buttonAddNewsletter').classList.toggle('d-none', checkedBoxes.length === 0);
        }

// Add to showcase/landing
        function addLanding() {
            const checkedBoxes = document.querySelectorAll('input[name="landingData"]:checked');
            document.getElementById('buttonAddLanding').classList.toggle('d-none', checkedBoxes.length === 0);
        }

// Remove from showcase
        function removeShowcase(id) {
            if (confirm("Are you sure you want to remove this item from your showcase?")) {
                // Simulate API call to remove from showcase
                document.querySelector(`#panelShowcase_${id}`).innerHTML =
                    `<div class="form-check form-check-inline">
                        <input class="form-check-input" type="checkbox" name="landingData"
                            data-feed-id="${id}" id="landingCheck${id}" onclick="addLanding()">
                        <label class="form-check-label text-danger" for="landingCheck${id}">
                            Select for Showcase
                        </label>
                    </div>`;

alert("Item removed from showcase!");
            }
        }

// Generate newsletter
        function chkAddNewsletter() {
            const checkedBoxes = document.querySelectorAll('input[name="feedData"]:checked');
            const selectedItems = Array.from(checkedBoxes).map(checkbox => {
                const parentDiv = checkbox.closest('.data');
                return {
                    id: parentDiv.getAttribute('data-feed-id'),
                    title: parentDiv.getAttribute('data-feed-title'),
                    url: parentDiv.getAttribute('data-feed-url'),
                    publisher: parentDiv.getAttribute('data-feed-publisher')
                };
            });

// Show preview of selected items
            let message = "The following items will be added to your newsletter:<br><br>";
            selectedItems.forEach(item => {
                message += `- ${item.title} (${item.publisher})<br>`;
            });
            message += "<br>Do you want to continue?";

if (confirm(message.replace(/<br>/g, '\n'))) {
                // Simulate API call
                document.querySelector('#responseModal .modal-body').innerHTML =
                    '<div class="alert alert-success">Items added to newsletter successfully!</div>';
                $('#responseModal').modal('show');

// Uncheck all boxes
                checkedBoxes.forEach(box => box.checked = false);
                document.getElementById('buttonAddNewsletter').classList.add('d-none');
            }
        }

// Add to showcase/landing page
        function chkAddLanding() {
            const checkedBoxes = document.querySelectorAll('input[name="landingData"]:checked');
            const selectedItems = Array.from(checkedBoxes).map(checkbox => {
                return checkbox.getAttribute('data-feed-id');
            });

// Show confirmation
            if (confirm(`Add ${selectedItems.length} item(s) to showcase?`)) {
                // Simulate API call
                checkedBoxes.forEach(box => {
                    const id = box.getAttribute('data-feed-id');
                    const parentSpan = document.querySelector(`#panelShowcase_${id}`);

parentSpan.innerHTML =
                        `<div class="text-danger py-1" style="user-select:none">
                            <i class="fa-regular fa-square-check"></i>
                            Showcase (<a href="#" onclick="removeShowcase(${id})">Remove</a>)
                        </div>`;
                });

document.querySelector('#responseModal .modal-body').innerHTML =
                    '<div class="alert alert-success">Items added to showcase successfully!</div>';
                $('#responseModal').modal('show');

document.getElementById('buttonAddLanding').classList.add('d-none');
            }
        }

// Event listeners
        document.addEventListener('DOMContentLoaded', function() {
            // Show share modal when buttons are clicked
            document.querySelectorAll('.buttonCreamShare').forEach(button => {
                button.addEventListener('click', function() {
                    const id = this.getAttribute('data-id');
                    const parentDiv = document.querySelector(`.data[data-feed-id="${id}"]`);
                    const title = parentDiv.getAttribute('data-feed-title');
                    const url = parentDiv.getAttribute('data-feed-url');

document.getElementById('contentTextarea').value =
                        `Check out "${title}" from my KnoblyCream collection!\n${url}`;

adjustTextareaHeight(document.getElementById('contentTextarea'));
                    $('#uploadModal').modal('show');
                });
            });

// Handle social media share links
            document.querySelectorAll('.fb-share').forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    const title = this.getAttribute('data-feed-title');
                    const url = this.getAttribute('data-feed-url');
                    window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}&quote=${encodeURIComponent(title)}`,
                        'facebook-share', 'width=580,height=296');
                });
            });

// Open share modal when the logo is clicked
            document.querySelectorAll('.openModalButton').forEach(button => {
                button.addEventListener('click', function() {
                    const parentDiv = this.closest('.data');
                    const title = parentDiv.getAttribute('data-feed-title');
                    const url = parentDiv.getAttribute('data-feed-url');

document.getElementById('contentTextarea').value =
                        `Check out "${title}" from my KnoblyCream collection!\n${url}`;

adjustTextareaHeight(document.getElementById('contentTextarea'));
                    $('#uploadModal').modal('show');
                });
            });

// Email row handler
            document.querySelectorAll('.emailRow').forEach(icon => {
                icon.addEventListener('click', function(e) {
                    e.preventDefault();
                    const id = this.getAttribute('data-id');
                    const parentDiv = document.querySelector(`.data[data-feed-id="${id}"]`);
                    const title = parentDiv.getAttribute('data-feed-title');
                    const url = parentDiv.getAttribute('data-feed-url');

window.location.href = `mailto:?subject=${encodeURIComponent(title)}&body=${encodeURIComponent('Check out this article from my KnoblyCream collection: ' + url)}`;
                });
            });

// Delete row handler
            document.querySelectorAll('.delRow').forEach(icon => {
                icon.addEventListener('click', function(e) {
                    e.preventDefault();
                    const id = this.getAttribute('data-id');
                    if (confirm("Are you sure you want to delete this item?")) {
                        // Simulate API call
                        this.closest('.card').remove();

document.querySelector('#responseModal .modal-body').innerHTML =
                            '<div class="alert alert-success">Item deleted successfully!</div>';
                        $('#responseModal').modal('show');
                    }
                });
            });

// Archive row handler
            document.querySelectorAll('.archiveRow').forEach(icon => {
                icon.addEventListener('click', function(e) {
                    e.preventDefault();
                    const id = this.getAttribute('data-id');
                    if (confirm("Are you sure you want to archive this item?")) {
                        // Simulate API call
                        this.closest('.card').remove();

document.querySelector('#responseModal .modal-body').innerHTML =
                            '<div class="alert alert-success">Item archived successfully!</div>';
                        $('#responseModal').modal('show');
                    }
                });
            });

// Restore row handler
            document.querySelectorAll('.restoreRow').forEach(icon => {
                icon.addEventListener('click', function(e) {
                    e.preventDefault();
                    const id = this.getAttribute('data-id');
                    if (confirm("Are you sure you want to restore this item?")) {
                        // Simulate API call
                        this.closest('.card').remove();

document.querySelector('#responseModal .modal-body').innerHTML =
                            '<div class="alert alert-success">Item restored successfully!</div>';
                        $('#responseModal').modal('show');
                    }
                });
            });

// Edit row handler
            document.querySelectorAll('.editRow').forEach(icon => {
                icon.addEventListener('click', function(e) {
                    e.preventDefault();
                    const id = this.getAttribute('data-id');
                    alert(`Edit item ${id} - This functionality would open an edit form`);
                });
            });
        });
    </script>
</body>

</html>