OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	06/17/2025 10:17:24 AM	rwxrwxr-x
📄 edit_post.php	2.23 KB	05/19/2025 10:07:19 AM	rw-r--r--
📄 getEditContent.php	874 bytes	05/19/2025 10:07:19 AM	rw-r--r--
📄 index.php	28.4 KB	05/19/2025 10:07:19 AM	rw-r--r--
📄 process_data.php	5.24 KB	05/19/2025 10:07:19 AM	rw-r--r--
📄 scribe.php	53.48 KB	05/19/2025 10:07:19 AM	rw-r--r--

Editing: index.php

<?
// Database connection
require_once '../assets/php/db_connect.php';
require_once '../assets/php/config.php';
require_once '../assets/php/db_config.php';
require_once '../assets/php/validate.logged.php';
require_once '../assets/php/function.php';
?>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Knobly Cream</title>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../assets/js/stream.js"></script>

function fetchGenAIContent() {
            const $textarea = $("#contentTextarea"); // Select the textarea element
            const $loadingIndicator = $("#loadingIndicator"); // Select the loading indicator

if ($textarea.length === 0) {
                console.error("Textarea with id 'contentTextarea' not found.");
                return;
            }

const textareaValue = $textarea.val().trim(); // Get the current value of the textarea and trim whitespace

// Check if the textarea is empty
            if (!textareaValue) {
                alert("Please enter something in the textarea.");
                console.warn("Textarea is empty. AJAX request not sent.");
                return;
            }

// Show the loading indicator
            $loadingIndicator.show();
            startBlinkingDots();

$.ajax({
                url: "../genai/process_genai.php", // Replace with the actual endpoint
                method: "POST",
                data: {
                    working_headline: textareaValue,
                    avatar: "#job",
                },
                success: function(response) {
                    // Populate the textarea with the response
                    $textarea.val(response);
                    adjustTextareaHeight($textarea[0]); // Adjust height after setting the response
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.error(
                        `Error fetching GenAI content: ${textStatus} - ${errorThrown}`
                    );
                },
                complete: function() {
                    // Hide the loading indicator when the AJAX call is complete
                    $loadingIndicator.hide();
                    stopBlinkingDots();
                },
            });
        }

$(document).on('input', '#contentTextarea', function() {
            adjustTextareaHeight(this);
        });

$(document).ready(function() {
            // Initialize the height on page load
            var $textarea = $('#contentTextarea');
            if ($textarea.length) {
                adjustTextareaHeight($textarea[0]);
            }

$(document).on('click', '.followButton', function() {
                const targetUserId = $(this).data('id'); // ID of the user to follow/unfollow
                toggleFollow(this, userId, targetUserId); // Pass `this` (the button element) as the first parameter
            });

$('#saveModalEditButton').on('click', function() {
                saveEditedContent();
            });

$(document).on('click', '.saveButton', function(e) {
                var id = $(this).data('id');
                toggleSave(this, id);
            });

// likedUsers
            $(document).on('click', '.likedUsers', function() {
                const postId = $(this).data('id'); // Get post ID from the button's data attribute

$.ajax({
                    url: '../fetch_liked_users.php',
                    type: 'POST',
                    data: {
                        postId: postId
                    },
                    success: function(response) {
                        const users = JSON.parse(response);

if (users.error) {
                            alert(users.error);
                        } else if (users.message) {
                            $('#likedUsersList').html('<li class="list-group-item text-center">' + users.message + '</li>');
                        } else {
                            const userList = users.map(user => `<li class="list-group-item">${user}</li>`).join('');
                            $('#likedUsersList').html(userList);
                        }

const likedUsersModal = new bootstrap.Modal(document.getElementById('likedUsersModal'));
                        likedUsersModal.show();
                    },
                    error: function() {
                        alert('Error fetching likes.');
                    }
                });
            });

// Handle like button clicks
            $(document).on('click', '.likeButton', function(e) {
                event.stopPropagation();
                // If the clicked element has the `likedUsers` class, do not toggle like/unlike                
                if ($(e.target).hasClass('likedUsers')) {
                    return; // Prevent triggering the like toggle
                }

// Proceed with like toggle functionality
                var feedId = $(this).data('id');
                toggleLike(this, feedId, userId);
            });

$('#contentTextarea').on('input', function() {
                var content = $('#contentTextarea').val().trim();

// Updated regular expression to match full URLs, including subdomains and paths
                // var url_pattern = /(?:https?|ftp):\/\/(?:[a-zA-Z0-9-]+\.)?(?:[a-zA-Z0-9-]+\.[a-zA-Z]{2,})(?:\/[^\s]*)?/g;
                var url_pattern = /(?:https?|ftp):\/\/(?:[a-zA-Z0-9-]+\.)?(?:[a-zA-Z0-9-]+\.[a-zA-Z]{2,})(?:\/[^\s\)]*)?/g;

var youtube_pattern = /(?:v=|youtu\.be\/|embed\/)([a-zA-Z0-9_-]+)/;

// Attempt to match all URLs within the content
                var matchedUrls = content.match(url_pattern);
                var youtubeUrl = content.match(youtube_pattern);

if (youtubeUrl) {
                    youtubeUrl.forEach(function(url) {
                        // console.log('Matched URL:', url); // Log each matched URL
                    });
                    if (tempUrl != youtubeUrl[0]) {
                        letUrl = true;
                        tempUrl = youtubeUrl[0];
                        removeMeta();
                        // Show the loading animation
                        $('#loadingIcon').show();
                        // $('#postedContent').html(''); // Clear any previous metadata
                        // Send the first matched URL to the server for metadata fetching
                        $.ajax({
                            url: '../link.php', // Submit to the same page
                            type: 'POST',
                            data: {
                                ytUrl: youtubeUrl[0]
                            }, // Send the first matched URL
                            success: function(response) {
                                // Hide the loading animation
                                $('#loadingIcon').hide();
                                if (response.iframe) {
                                    $('#ytPreview').html(response.iframe);
                                    $('#hiddenYTLink').val(response.iframe || '');
                                    $('#hiddenTitle').val(response.title || '');
                                    $('#ytPreview').show();
                                } else {
                                    return;
                                }
                            },
                            error: function() {
                                // Hide the loading animation on error
                                $('#loadingIcon').hide();
                                // console.log("Error fetching Youtube Link");
                            }
                        });
                    }
                } else if (matchedUrls) {
                    // Log all matched URLs to the console (for testing purposes)
                    matchedUrls.forEach(function(url) {
                        // console.log('Matched URL:', url); // Log each matched URL
                    });
                    if (tempUrl != matchedUrls[0]) {
                        letUrl = true;
                        tempUrl = matchedUrls[0];
                        removeYT();
                        // Show the loading animation
                        $('#loadingIcon').show();
                        // $('#postedContent').html(''); // Clear any previous metadata
                        // Send the first matched URL to the server for metadata fetching
                        $.ajax({
                            url: '../link.php', // Submit to the same page
                            type: 'POST',
                            data: {
                                url: matchedUrls[0]
                            }, // Send the first matched URL
                            success: function(response) {
                                // Hide the loading animation
                                $('#loadingIcon').hide();
                                $('#linkPreview').show();
                                if (response.url) {
                                    $('#linkPreview #linkHeading').html(response.title || ''); // Set heading text
                                    $('#linkPreview #linkDesc').html(response.description || ''); // Set description text
                                    $('#linkPreview #linkUrl').attr('href', response.url || ''); // Set link URL
                                    $('#linkPreview #linkUrl').html(response.domain || '');
                                    $('#hiddenTitle').val(response.title || '');
                                    $('#hiddenDesc').val(response.description || '');
                                    $('#hiddenUrl').val(response.url || '');
                                    $('#hiddenDomain').val(response.domain || '');
                                    if (response.image) {
                                        $('#linkPreview img').attr('src', response.image); // Set image source
                                        $('#hiddenImage').val(response.image);
                                    }
                                } else {
                                    return;
                                }
                            },
                            error: function() {
                                // Hide the loading animation on error
                                $('#loadingIcon').hide();
                                // console.log("Error fetching the metadata");
                            }
                        });
                    }
                } else {
                    // Clear content and hide the loading animation if no valid URL is found
                    $('#loadingIcon').hide();
                }
                if (tempUrl != youtubeUrl[0]) {
                    removeYT();
                }
                if (tempUrl != matchedUrls[0]) {
                    removeMeta()
                }
                if (youtubeUrl[0] == '') {
                    removeYT();
                }
                if (matchedUrls[0] == '') {
                    removeMeta();
                }
            });

$('.post-content').attr('tabindex', '0');

$(document).on('mouseenter', '.post-content', function() {
                if ($(this).data('thumbnail') === false && $(this).find('video').length > 0) {
                    generateVideoThumbnail($(this));
                    $(this).data('thumbnail', true);
                }
            });;

$("#reportReasonSelect").on("change", function() {
                const otherReasonContainer = $("#otherReasonContainer");
                if ($(this).val() === "Others") {
                    otherReasonContainer.show();
                } else {
                    otherReasonContainer.hide();
                }
            });

});

// The uploadPost function can now use myModal because it's in a broader scope
        function uploadPost() {
            // Collect the data from the inputs
            var content = $("#contentTextarea").val(); // Textarea content
            var fileInput = $("#fileInput")[0].files; // All selected files
            var hiddenTitle = $("#hiddenTitle").val();
            var hiddenDesc = $("#hiddenDesc").val();
            var hiddenUrl = $("#hiddenUrl").val();
            var hiddenImage = $("#hiddenImage").val();
            var hiddenDomain = $("#hiddenDomain").val();
            var hiddenYTLink = $("#hiddenYTLink").val();
            var visibility = $("#visibilitySelect").val();
            // Create a FormData object to send data (use FormData if sending files)
            var formData = new FormData();

// Conditionally append fields if they have values
            if (content) formData.append("content", content);

// Append each file to the FormData object
            if (fileInput.length > 0) {
                for (var i = 0; i < fileInput.length; i++) {
                    formData.append("media[]", fileInput[i]); // Use an array (media[]) to send multiple files
                }
            }

if (hiddenTitle) formData.append("hiddenTitle", hiddenTitle);
            if (hiddenDesc) formData.append("hiddenDesc", hiddenDesc);
            if (hiddenUrl) formData.append("hiddenUrl", hiddenUrl);
            if (hiddenImage) formData.append("hiddenImage", hiddenImage);
            if (hiddenDomain) formData.append("hiddenDomain", hiddenDomain);
            if (hiddenYTLink) formData.append("hiddenYTLink", hiddenYTLink);
            if (visibility) formData.append("visibility", visibility);
            // Show loading spinner
            $("#loadingIcon").show();

// Send the data to PHP via AJAX
            $.ajax({
                url: 'process_data.php', // The PHP page where you want to process the data
                type: 'POST',
                data: formData,
                processData: false, // Important for sending files
                contentType: false, // Important for sending files
                success: function(response) {
                    // Hide loading spinner after response
                    $("#loadingIcon").hide();

if (response.status === 'success') {
                        alert("Posted successfully!");
                        window.location.reload();
                    } else {
                        alert("Error: " + response.message);
                    }
                },
                error: function(xhr, status, error) {
                    $("#loadingIcon").hide();
                    alert("An error occurred: " + error);
                }
            });
        }
    </script>
    <style>
        /* Main styling for the upload section */
        .upload-section {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
            padding: 16px;
            margin-bottom: 20px;
        }

/* Textarea styling */
        #contentTextarea {
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 12px;
            font-size: 15px;
            color: #333;
            transition: border-color 0.3s ease;
        }

#contentTextarea:focus {
            border-color: #6c63ff;
            box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.2);
            outline: none;
        }

/* Media slider container */
        .slider-container {
            position: relative;
            width: 100%;
            margin-top: 10px;
            overflow: hidden;
            /* display: none; */
            /* Hidden by default, shown when media is added */
            border-radius: 8px;
            max-height: 300px;
        }

.slider-slides {
            display: flex;
            transition: transform 0.4s ease;
            height: 100%;
        }

.slider-slides img,
        .slider-slides video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
        }

/* Slider navigation buttons */
        .slideBtn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 2;
            opacity: 0.7;
            transition: opacity 0.3s;
        }

.slideBtn:hover {
            opacity: 1;
        }

.prev {
            left: 10px;
        }

.next {
            right: 10px;
        }

/* Link preview styling */
        #linkPreview {
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            overflow: hidden;
            transition: all 0.3s ease;
        }

#linkPreview:hover {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

.hyperlink {
            display: flex;
            background-color: #f9f9f9;
        }

.hyperlink img {
            width: 120px;
            height: 120px;
            object-fit: cover;
            margin-right: 12px;
        }

#linkHeading {
            font-weight: 600;
            color: #333;
            line-height: 1.4;
        }

#linkDesc {
            color: #666;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

#linkUrl {
            color: #6c63ff;
            font-size: 12px;
        }

#linkUrl:hover {
            text-decoration: underline;
        }

/* YouTube preview */
        #ytPreview {
            border-radius: 8px;
            overflow: hidden;
            background-color: #f9f9f9;
        }

#ytPreview iframe {
            width: 100%;
            height: 315px;
            border: none;
        }

/* Loading spinner */
        #loadingIcon {
            margin: 15px 0;
        }

.spinner-border {
            color: #6c63ff;
            width: 2rem;
            height: 2rem;
        }

/* Upload button and media options */
        .btn-upload {
            background-color: #6c63ff;
            color: white;
            border: none;
            border-radius: 50px;
            padding: 8px 16px;
            font-weight: 500;
            transition: background-color 0.3s;
        }

.btn-upload:hover {
            background-color: #5a52cc;
        }

/* Media selection button and visibility dropdown */
        .mediawithvisibility {
            display: flex;
            align-items: center;
            gap: 15px;
        }

#visibilitySelect {
            padding: 6px 12px;
            border-radius: 4px;
            border: 1px solid #e0e0e0;
            font-size: 14px;
            color: #333;
            background-color: #f9f9f9;
            width: auto;
        }

/* AI content generation button */
        button[onclick="fetchGenAIContent()"] {
            background-color: #f5f5f5;
            padding: 8px;
            transition: background-color 0.3s;
        }

button[onclick="fetchGenAIContent()"]:hover {
            background-color: #e0e0e0;
        }

/* Labels and form elements */
        label {
            font-size: 14px;
            color: #555;
            margin-bottom: 4px;
            display: block;
        }

.form-group {
            margin-bottom: 0;
        }

/* Loading indicator for AI generation */
        #loadingIndicator {
            margin-top: 8px;
            font-style: italic;
        }

@keyframes blink {

0%,
            100% {
                opacity: 1;
            }

50% {
                opacity: 0.5;
            }
        }

#dots {
            animation: blink 1.4s infinite;
        }

/* Responsive adjustments */
        @media (max-width: 768px) {
            .hyperlink {
                flex-direction: column;
            }

.hyperlink img {
                width: 100%;
                height: 180px;
                margin-right: 0;
                margin-bottom: 10px;
            }

#ytPreview iframe {
                height: 240px;
            }

.mediawithvisibility {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
        }
    </style>
</head>

<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 style="display: flex; align-items: center; gap: 10px;">
                    <textarea id="contentTextarea" class="form-control mb-2" placeholder="What would you like to share?"
                        style="flex: 1; overflow: hidden; resize: none; min-height:180px;" oninput="adjustTextareaHeight(this)"></textarea>
                </div>

<!-- <div class="form-group ">
                            <label for="visibilitySelect">Who can see this post?</label>
                            <select id="visibilitySelect" name="visibility" class="form-control">

<option value="public">Public</option>
                                <option value="private">People I follow</option>
                                <option value="">People I follow</option>

</select>
                        </div> -->
                    </div>
                    <div class="d-flex">
                        <button type="button" onclick="fetchGenAIContent()" style="text-decoration: none; border:none; border-radius:5px">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                <g fill="none" fill-rule="evenodd">
                                    <path d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z" />
                                    <path fill="currentColor" d="M19 19a1 1 0 0 1 .117 1.993L19 21h-7a1 1 0 0 1-.117-1.993L12 19zm.631-14.632a2.5 2.5 0 0 1 0 3.536L8.735 18.8a1.5 1.5 0 0 1-.44.305l-3.804 1.729c-.842.383-1.708-.484-1.325-1.326l1.73-3.804a1.5 1.5 0 0 1 .304-.44L16.096 4.368a2.5 2.5 0 0 1 3.535 0m-2.12 1.414L6.677 16.614l-.589 1.297l1.296-.59L18.217 6.49a.5.5 0 1 0-.707-.707M6 1a1 1 0 0 1 .946.677l.13.378a3 3 0 0 0 1.869 1.87l.378.129a1 1 0 0 1 0 1.892l-.378.13a3 3 0 0 0-1.87 1.869l-.129.378a1 1 0 0 1-1.892 0l-.13-.378a3 3 0 0 0-1.869-1.87l-.378-.129a1 1 0 0 1 0-1.892l.378-.13a3 3 0 0 0 1.87-1.869l.129-.378A1 1 0 0 1 6 1m0 3.196A5 5 0 0 1 5.196 5q.448.355.804.804q.355-.448.804-.804A5 5 0 0 1 6 4.196" />
                                </g>
                            </svg>
                        </button>
                        <button class="btn btn-upload ms-2" onclick="uploadPost()">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                <path fill="none" stroke="currentColor" d="m6.998 10.247l.435.76c.277.485.415.727.415.993s-.138.508-.415.992l-.435.761c-1.238 2.167-1.857 3.25-1.375 3.788c.483.537 1.627.037 3.913-.963l6.276-2.746c1.795-.785 2.693-1.178 2.693-1.832s-.898-1.047-2.693-1.832L9.536 7.422c-2.286-1-3.43-1.5-3.913-.963s.137 1.62 1.375 3.788Z" />
                            </svg>
                        </button>
                    </div>
                </div>

<div id="ytPreview" class="mt-3 ytprew"></div>
                <div id="loadingIcon" class="text-center" style="display:none;">
                    <div class="spinner-border" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>

</html>