OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	06/17/2025 10:17:24 AM	rwxrwxr-x
📄 account.php	48.19 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 analytics.php	35.05 KB	05/19/2025 10:07:13 AM	rw-r--r--
📁 assets	-	03/06/2025 05:37:05 AM	rwxr-xr-x
📄 channel.php	35.98 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 create.php	44.27 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 dashboard.php	55.6 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 featured_channels.php	32.57 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 featured_topics.php	26.63 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 follow_dash.php	33.51 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 footer.php	1.14 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 index.php	9.56 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 main.css	1.3 KB	03/05/2025 07:59:27 AM	rw-r--r--
📄 my_collection.php	152.65 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 navbar_menu.php	1.8 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 newCompaign.php	16.1 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 newsletter.php	24.66 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 request_article.php	23.34 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 saved.php	33.64 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 search_bar.php	18.97 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 settings.php	81.52 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 sidebar.php	19.1 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 social_navbar.php	25.03 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 stream.css	13.53 KB	03/06/2025 05:19:46 AM	rw-r--r--
📄 stream.php	66.21 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 styles.css	7.59 KB	03/06/2025 05:45:03 AM	rw-r--r--
📁 updated_files	-	05/19/2025 10:07:13 AM	rwxr-xr-x

Editing: search_bar.php

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

// Get the search query from the request (if it's an AJAX request)
$searchQuery = isset($_GET['query']) ? $_GET['query'] : '';

$userResults = [];
$postResults = [];
$channelResults = [];

if (!empty($searchQuery)) {
    // SEARCH USERS
    $sqlUser = "SELECT id, full_name, profile_pic FROM user WHERE full_name LIKE ? OR email LIKE ? LIMIT 10";
    $stmtUser = $creamdb->prepare($sqlUser);
    $searchQueryLike =  $searchQuery . '%';
    $stmtUser->bind_param('ss', $searchQueryLike, $searchQueryLike);
    $stmtUser->execute();
    $resultUser = $stmtUser->get_result();

while ($row = $resultUser->fetch_assoc()) {
        $profileUrl = isset($row['profile_pic']) ? "https://knoblycream.com/data/profilePic/" . $row['profile_pic'] : "https://knoblycream.com/data/profilePic/default.png";
        $userResults[] = [
            'type' => 'user',
            'full_name' => $row['full_name'],
            'img' => $profileUrl,
            'user_id' => $row['id'],
            'url' => "/profile.php?userId=" . $row['id']
        ];
    }

// SEARCH POSTS
    $sqlPost = "SELECT id, chat, userId FROM reader_stream WHERE chat LIKE ?  LIMIT 10";
    $stmtPost = $readerdb->prepare($sqlPost);
    $searchQueryPost = '%' . $searchQuery . '%';
    $stmtPost->bind_param('s', $searchQueryPost);
    $stmtPost->execute();
    $resultPost = $stmtPost->get_result();

while ($row = $resultPost->fetch_assoc()) {
        $postResults[] = [
            'type' => 'post',
            'title' => $row['chat'],
            'user_id' => $row['userId'],
            'url' => "/post-details.php?id=" . $row['id']
        ];
    }

// SEARCH CHANNELS
    $sqlChannel = "SELECT id, name, created_by, profilePic FROM channels WHERE name LIKE ? LIMIT 10";
    $stmtChannel = $readerdb->prepare($sqlChannel);
    $stmtChannel->bind_param('s', $searchQueryLike);
    $stmtChannel->execute();
    $resultChannel = $stmtChannel->get_result();

while ($row = $resultChannel->fetch_assoc()) {
        $profileUrl = isset($row['profilePic']) ? "https://knoblycream.com/data/channelPic/" . $row['profilePic'] : "https://knoblycream.com/data/profilePic/default.png";
        $channelResults[] = [
            'type' => 'channel',
            'img' => $profileUrl,
            'channel_name' => $row['name'],
            'user_id' => $row['created_by'],
            'url' => "/channel.php?channelId=" . $row['id'] . "&channelName=" . $row['name']
        ];
    }
}

// Combine all results
$response = [
    'users' => $userResults,
    'posts' => $postResults,
    'channels' => $channelResults
];

// Return JSON response for AJAX requests
if (isset($_GET['query'])) {
    header('Content-Type: application/json');
    echo json_encode($response);
    exit;
}
?>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search Page</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="assets/css/styles.css">
    <link rel="stylesheet" href="assets/css/stream.css">

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<link rel="stylesheet" href="assets/css/styles.css" />
    <link rel="stylesheet" href="assets/old/genai_style.css" />

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>
    
    <script src="https://cdn.tiny.cloud/1/gg63dftxs904yq8t5rs5qyu8xo1wnzpfo1rflntk3u6ic37t/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>
    <script src="assets/js/common.js"></script>
    <script src="assets/js/genai_func.js"></script>

</head>
<style>
    /* General Styles */

/* Search Bar */
    body.dark-mode .search-container {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
        background-color: #141414;
        /* width: 100%; */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        position: sticky;
        top: 0;
        z-index: 10;
    }

body.light-mode .search-container {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
        background-color: #dfe3ee;
        /* width: 100%; */
        /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
        position: sticky;
        top: 0;
        z-index: 10;
    }

.search-bar {
        width: 80%;
        max-width: 600px;
        display: flex;
        justify-content: space-between;
        background-color: #f0f0f0;
        border-radius: 5px;
        padding: 1px 3px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

.search-bar input {
        border: none;
        background: transparent;
        outline: none;
        width: 85%;
        font-size: 16px;
        padding: 8px;
        border-radius: 20px;
    }

body.light-mode .search-bar button {
        border: none;
        border-color: none;
        outline: none;
        color: #444;
        font-size: 16px;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    }

.search-bar button:hover {
        background-color: #007acb;
    }

/* Suggestions List */
    body.dark-mode #suggestionsList {
        left: 30%;
        display: none;
        width: 100%;
        max-width: 600px;
        /* margin-top: 130px; */
        background-color: #333;
        color: white !important;
        /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); */
        /* border-radius: 5px; */
        padding: 10px 0px 40px 0px;
        position: absolute;
        z-index: 10;
    }

body.light-mode #suggestionsList {
        left: 30%;
        display: none;
        width: 100%;
        max-width: 600px;
        /* margin-top: 130px; */
        background-color: white;
        color: #444;
        /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); */
        /* border-radius: 5px; */
        padding: 10px;
        position: absolute;
        z-index: 10;
    }

#searchButton {
        border: none;
        outline: none;
    }

.suggestion-item {
        display: flex;
        align-items: center;
        justify-content: left;
        padding: 10px;
        border-bottom: 0.5px solid #ddd;
    }

body.dark-mode .suggestion-item a {
        display: flex;
        align-items: center;
        gap: 10px;
        color: white;
    }

body.light-mode .suggestion-item a {
        display: flex;
        align-items: center;
        gap: 10px;
        color: black;
    }

.suggestion-item img {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        margin-right: 10px;
    }

.suggestion-item .user-info {
        display: flex;
        flex-direction: column;
    }

.suggestion-item .full_name {
        font-weight: medium;
    }

/* Results Section */
    .results {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* width: 100%; */
        padding: 20px;
        margin-top: 20px;
    }

.result-item {
        display: flex;
        align-items: center;
        width: 80%;
        padding: 10px;
        margin: 10px 0;
        background-color: white;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
    }

.result-item img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 15px;
    }

.result-item .user-info {
        display: flex;
        flex-direction: column;
    }

.result-item .full_name {
        font-weight: 600;
        font-size: 16px;
        color: #333;
    }

.result-item .name {
        font-size: 14px;
        color: #555;
    }

/* Loading Placeholder */
    #loadingText {
        margin-top: 50px;
        font-size: 18px;
        color: #999;
    }

@media screen and (max-width:540px) {
        #suggestionsList {
            left: 0%;
            display: none;
            width: 94%;
            max-width: 600px;
            /* margin-top: 130px; */
            background-color: white;
            /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); */
            /* border-radius: 5px; */
            padding: 10px;
            position: absolute;
            z-index: 10;
        }

body.dark-mode #suggestionsList {
            left: 0%;
            display: none;
            width: 94%;
            max-width: 600px;
            /* margin-top: 130px; */
            background-color: #333;
            color: white !important;
            /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); */
            /* border-radius: 5px; */
            padding: 10px;
            position: absolute;
            z-index: 10;
        }

body.light-mode #suggestionsList {
            left: 0%;
            display: none;
            width: 94%;
            max-width: 600px;
            /* margin-top: 130px; */
            background-color: white;
            color: #444;
            /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); */
            /* border-radius: 5px; */
            padding: 10px;
            position: absolute;
            z-index: 10;
        }

}
</style>
<style>
    .sideWithMainContainer {
        display: flex;
        flex-direction: row;
        gap: 10px;
        overflow-x: hidden;

}

.sideMaincontent {
        height: 100vh;
        overflow-y: scroll;
        padding: 30px 0;
    }

@media (min-width: 768px) {
        .col-md-2 {
            padding: 0px !important;
        }

}

@media (max-width: 768px) {
        .col-md-2 {
            display: none !important;
        }

}
</style>

</div>

$searchInput.on('input', function() {
                const searchQuery = $searchInput.val().trim().toLowerCase();

if (!searchQuery) {
                    $suggestionsList.hide();
                    return;
                }

$.ajax({
                    url: '',
                    type: 'GET',
                    data: {
                        query: searchQuery
                    },
                    success: function(data) {
                        let displayedResults = '';

// Handle Users
                        if (data.users.length > 0) {
                            displayedResults += '<h>Users</h>';
                            let displayedUsers = data.users.slice(0, 3).map(user => `
                <div class="suggestion-item">
                    <a href="${user.url}">
                        <img src="${user.img}" alt="${user.full_name}">
                        <div class="user-info">
                            <div class="full_name">${user.full_name}</div>
                        </div>
                    </a>
                </div>
            `).join('');

// Add "More options" button if there are more than 3 users
                            if (data.users.length > 3) {
                                displayedUsers += `
                <div class="suggestion-item more-options">
                    <a href="javascript:void(0);" class="showMore" data-type="users">More</a>
                </div>
                `;
                            }

displayedResults += `<div id="usersList">${displayedUsers}</div>`;
                        }

// Handle Posts
                        if (data.posts.length > 0) {
                            displayedResults += '<h3>Posts</h3>';
                            let displayedPosts = data.posts.slice(0, 3).map(post => `
                <div class="suggestion-item">
                    <a href="${post.url}">
                        <div class="user-info">
                            <div class="full_name">${post.title}</div>
                        </div>
                    </a>
                </div>
            `).join('');

// Add "More options" button if there are more than 3 posts
                            if (data.posts.length > 3) {
                                displayedPosts += `
                <div class="suggestion-item more-options">
                    <a href="javascript:void(0);" class="showMore" data-type="posts">More </a>
                </div>
                `;
                            }

displayedResults += `<div id="postsList">${displayedPosts}</div>`;
                        }

// Handle Channels
                        if (data.channels.length > 0) {
                            displayedResults += '<h3>Channels</h3>';
                            let displayedChannels = data.channels.slice(0, 3).map(channel => `
                <div class="suggestion-item">
                    <a href="${channel.url}">
                        <img src="${channel.img}" alt="${channel.channel_name}">
                        <div class="user-info">
                            <div class="full_name">${channel.channel_name}</div>
                        </div>
                    </a>
                </div>
            `).join('');

// Add "More options" button if there are more than 3 channels
                            if (data.channels.length > 3) {
                                displayedChannels += `
                <div class="suggestion-item more-options">
                    <a href="javascript:void(0);" class="showMore" data-type="channels">More </a>
                </div>
                `;
                            }

displayedResults += `<div id="channelsList">${displayedChannels}</div>`;
                        }

// Display the results or hide if empty
                        if (displayedResults) {
                            $suggestionsList.html(displayedResults).show();
                        } else {
                            $suggestionsList.hide();
                        }

// Show all results when "More options" is clicked
                        $('.showMore').on('click', function() {
                            let type = $(this).data('type'); // Get type (users, posts, channels)
                            let allResults = '';

if (type === 'users') {
                                allResults = data.users.map(user => `
                    <div class="suggestion-item">
                        <a href="${user.url}">
                            <img src="${user.img}" alt="${user.full_name}">
                            <div class="user-info">
                                <div class="full_name">${user.full_name}</div>
                            </div>
                        </a>
                    </div>
                `).join('');
                                $('#usersList').html(allResults);
                            }

if (type === 'posts') {
                                allResults = data.posts.map(post => `
                    <div class="suggestion-item">
                        <a href="${post.url}">
                            <div class="user-info">
                                <div class="full_name">${post.title}</div>
                            </div>
                        </a>
                    </div>
                `).join('');
                                $('#postsList').html(allResults);
                            }

if (type === 'channels') {
                                allResults = data.channels.map(channel => `
                    <div class="suggestion-item">
                        <a href="${channel.url}">
                            <div class="user-info">
                                <div class="full_name">${channel.channel_name}</div>
                            </div>
                        </a>
                    </div>
                `).join('');
                                $('#channelsList').html(allResults);
                            }
                        });
                    },
                    error: function() {
                        console.log("Error fetching results");
                    }
                });

});
        });
    </script>

<?php include 'assets/php/bottom_navbar.php'; ?>
</body>

</html>