OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	06/17/2025 10:17:24 AM	rwxrwxr-x
📄 b_group.php	13.6 KB	05/19/2025 10:07:13 AM	rw-rw-r--
📄 b_index.php	25.61 KB	05/19/2025 10:07:13 AM	rw-rw-r--
📄 back_create_group.php	9.22 KB	05/19/2025 10:07:13 AM	rw-r--r--
📁 backup	-	05/19/2025 10:07:13 AM	rwxrwxr-x
📄 broadcast.php	22.48 KB	05/19/2025 10:07:13 AM	rw-rw-r--
📄 create_broadcast.php	19.39 KB	05/19/2025 10:07:13 AM	rw-rw-r--
📄 create_group.php	18.06 KB	05/19/2025 10:07:13 AM	rw-rw-r--
📁 dump	-	05/19/2025 10:07:13 AM	rwxrwxr-x
📄 group.php	21.38 KB	05/19/2025 10:07:13 AM	rw-rw-r--
📁 inc	-	05/19/2025 10:07:13 AM	rwxrwxr-x
📄 index.php	13.38 KB	05/19/2025 10:07:13 AM	rw-rw-r--
📄 join_now.php	7.77 KB	05/19/2025 10:07:13 AM	rw-rw-r--
📄 new2_index.php	17.63 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 new_index.php	17.11 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 sidebar.php	5.07 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 testing.php	3.32 KB	05/19/2025 10:07:13 AM	rw-rw-r--
📁 trash	-	05/19/2025 10:07:13 AM	rwxrwxr-x
📄 z_index.php	4.83 KB	05/19/2025 10:07:13 AM	rw-r--r--

Editing: new2_index.php

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

<?php
include '../assets/php/validate.logged.php';
include '../assets/php/function.php';
include '../inc/config.php';
include 'inc/db_connect.php';
include 'inc/function.php';

// Fetch user's groups and broadcasts
$broadcasts = display_broadcast($conn, $gUserId);
$groups = display_groups($conn, $gUserId);
?>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Group Chat &bull; Knobly Cream</title>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.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="../inc/fontawesome/css/all.min.css" />
    <link rel="stylesheet" href="../inc/style.css" />
    <link rel="stylesheet" href="inc/style.css">
    <link rel="icon" type="image/x-icon" href="/img/logo.ico">

a {
            text-decoration: none;
        }

.container {
            max-width: 1200px;
            margin: 0 auto;
        }

/* Main Content Area */
        .main-content {
            margin-top: 30px;
            padding: 30px;
        }

.btn-danger {
            color: #fff;
            background-color: #333333;
            border-color: #1e1e1e;
            border: none;
            outline: none;
            transition: none;
            /* Smooth transition */
        }

.btn-danger:hover {
            background-color: #444444;
            /* Slightly lighter background on hover */
            border-color: #333333;
            /* Adjust border color on hover */
        }

.btn-danger:focus,
        .btn-danger:active {
            box-shadow: none !important;
            color: #fff;
            background-color: #333333 !important;
            /* Keep background the same */
            border-color: #1e1e1e !important;
            /* Keep border the same */
            outline: #121212 !important;
            /* Remove outline */
            box-shadow: none;
            /* Remove shadow effect */
        }

.create-chat-card button,
        .create-broadcast-card button {
            background-color: #121212 !important;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

/* Optional: Removes the background color change on focus, if desired */
        .btn-danger:focus {
            background-color: #333333;
            /* Ensures focus state matches */
        }

.btn-danger:active {
            color: #fff;
            background-color: #333333;
            border-color: #1e1e1e;
            border: none;
        }

.btn-danger:hover {
            color: #fff;
            background-color: #333333;
            border-color: #1e1e1e;
        }

/* Card Style */
        .create-chat-card,
        .create-broadcast-card {
            background-color: #000000;
            width: 100%;
            /* padding: 30px; */
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            /* margin-top: 20px; */
            display: none;
        }

form {
            max-width: 600px;
            background-color: #1c1c1c;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

.create-chat-card h2,
        .create-broadcast-card h2 {
            color: #ffffff;
            font-size: 24px;
            margin-bottom: 20px;
        }

.create-chat-card input,
        .create-broadcast-card input {
            background-color: #333333;
            color: #e5e5e5;
            border: 1px solid #444444;
            padding: 10px;
            width: 100%;
            border-radius: 5px;
            margin-bottom: 20px;
        }

.create-chat-card button,
        .create-broadcast-card button {
            background-color: #e50914;
            /* Netflix red */
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

.create-chat-card button:hover,
        .create-broadcast-card button:hover {
            background-color: #f40612;
        }

/* Scrollable List */
        .scrollable-list {
            width: 100%;
            max-height: 400px;
            overflow-y: auto;
            margin-bottom: 20px;
        }

.scrollable-list-item {
            display: flex;
            align-items: center;
            background-color: #1c1c1c;
            border-radius: 5px;
            padding: 10px;
            margin-bottom: 10px;
            transition: all 0.3s ease;
        }

.scrollable-list-item:hover {
            background-color: #333333;
        }

.scrollable-list-item .avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 10px;
        }

.scrollable-list-item .avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.scrollable-list-item .member-info {
            flex: 1;
        }

.scrollable-list-item .member-name {
            color: #e5e5e5;
            font-weight: 500;
            font-size: 16px;
        }

/* List Groups */
        .list-group-item {
            background-color: #333333;
            color: #e5e5e5;
            border-radius: 5px;
            margin-bottom: 10px;
            padding: 10px;
            transition: background-color 0.3s ease;
        }

.list-group-item:hover {
            background-color: #444444;
        }

/* Responsive for smaller devices */
        @media (max-width: 768px) {

.create-chat-card,
            .create-broadcast-card {
                padding: 20px;
            }
        }
    </style>
</head>

<body>
    <div class="container main-content">
        
        <h1 class="text-center text-white mb-4">Create and Manage Chats</h1>

<div class="row">
            
            <div class="col-md-6">
                <button class="btn btn-danger btn-block" id="show-create-group-btn">
                    ✚ Create Group
                </button>
            </div>

<div class="col-md-6">
                <button class="btn btn-danger btn-block" id="show-create-broadcast-btn">
                    ✚ Create Broadcast
                </button>
            </div>
        </div>

<div class="row mt-4">
            
            <div class="col-md-12">
                <div class="create-chat-card" id="create-group-form-container">
                    <h2>Create a Group</h2>
                    <form id="create-group-form">
                        
                        <div class="form-group">
                            <input type="text" id="group-name" class="form-control" placeholder="Enter group name...">
                        </div>
                        
                        <div class="form-group">
                            <input type="text" id="search-input" class="form-control" placeholder="Search for members...">
                        </div>
                        
                        <div class="scrollable-list">
                            <div class="scrollable-list-item">
                                <a href="#" class="member-link" data-user_name="John Doe">
                                    <div class="avatar">
                                        <img src="https://via.placeholder.com/50" alt="John's Avatar" class="img-fluid">
                                    </div>
                                    <div class="member-info">
                                        <span class="member-name">John Doe</span>
                                    </div>
                                </a>
                            </div>
                            <div class="scrollable-list-item">
                                <a href="#" class="member-link" data-user_name="Jane Smith">
                                    <div class="avatar">
                                        <img src="https://via.placeholder.com/50" alt="Jane's Avatar" class="img-fluid">
                                    </div>
                                    <div class="member-info">
                                        <span class="member-name">Jane Smith</span>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary btn-block">Create Group</button>
                    </form>
                </div>
            </div>

<div class="col-md-12">
                <div class="create-broadcast-card" id="create-broadcast-form-container">
                    <h2>Create a Broadcast</h2>
                    <form id="create-broadcast-form">
                        
                        <div class="form-group">
                            <input type="text" id="broadcast-name" class="form-control" placeholder="Enter broadcast name...">
                        </div>
                        
                        <div class="form-group">
                            <input type="text" id="search-input-broadcast" class="form-control" placeholder="Search for members...">
                        </div>
                        
                        <div class="scrollable-list">
                            <div class="scrollable-list-item">
                                <a href="#" class="member-link" data-user_name="John Doe">
                                    
                                </a>
                            </div>
                            <div class="scrollable-list-item">
                                <a href="#" class="member-link" data-user_name="Jane Smith">
                                    
                                </a>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary btn-block">Create Broadcast</button>
                    </form>
                </div>
            </div>
        </div>

<div class="groupwithbroadcast" style="display: flex; width:100%; gap:10px">
            
            <div class="row mt-5">
                <div class="col-md-12">
                    <h3 class="text-white">My Groups</h3>
                    <div class="list-group">
                        <?php if ($groups) {
                            foreach ($groups as $group) : ?>
                                <a href="#" class="list-group-item" id="group-btn-<?= $group['group_id']; ?>">
                                    <?= htmlspecialchars($group['group_name']); ?>
                                </a>
                            <?php endforeach;
                        } else { ?>
                            <div class="alert alert-dark">No Groups available</div>
                        <?php } ?>
                    </div>
                </div>
            </div>

<div class="row mt-5">
                <div class="col-md-12">
                    <h3 class="text-white">My Broadcasts</h3>
                    <div class="list-group">
                        <?php if ($broadcasts) {
                            foreach ($broadcasts as $broadcast) : ?>
                                <a href="#" class="list-group-item" id="broadcast-btn-<?= $broadcast['broadcast_id']; ?>">
                                    <?= htmlspecialchars($broadcast['broadcast_name']); ?>
                                </a>
                            <?php endforeach;
                        } else { ?>
                            <div class="alert alert-dark">No Broadcasts available</div>
                        <?php } ?>
                    </div>
                </div>
            </div>
        </div>
    </div>

// Toggle Create Broadcast Form
            $('#show-create-broadcast-btn').click(function() {
                $('#create-broadcast-form-container').toggle();
            });
        });
    </script>

// Handle Create Broadcast form submission
            $('#create-broadcast-form').submit(function(event) {
                event.preventDefault();
                var broadcastName = $('#broadcast-name').val();
                console.log('Creating broadcast:', broadcastName);
                // Handle your broadcast creation logic here (AJAX, form submission, etc.)
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            $('.group-item .group-link').contextmenu(function(e) {
                // Prevent default right-click context menu
                e.preventDefault();

// Hide any previous context menus
                $('.context-menu').hide();

// Show context menu at mouse position
                var contextMenu = $('#group-context-menu');
                contextMenu.css({
                    display: 'block',
                    left: e.pageX,
                    top: e.pageY
                });

// Store the group item ID
                contextMenu.data('group-id', $(this).parent().attr('id'));
            });

$('.broadcast-item .broadcast-link').contextmenu(function(e) {
                // Prevent default right-click context menu
                e.preventDefault();

// Hide any previous context menus
                $('.context-menu').hide();

// Show context menu at mouse position
                var contextMenu = $('#broadcast-context-menu');
                contextMenu.css({
                    display: 'block',
                    left: e.pageX,
                    top: e.pageY
                });

// Store the group item ID
                contextMenu.data('broadcast-id', $(this).parent().attr('id'));
            });

// Click handler for context menu items
            $('#group-context-menu').on('click', '.delete-group', function(e) {
                e.preventDefault(); // Prevent the default link behavior
                var groupId = $('#group-context-menu').data('group-id').replace('group_', '');
                deleteGroup('group', groupId);
            });

$('#group-context-menu').on('click', '.exit-group', function(e) {
                e.preventDefault(); // Prevent the default link behavior
                var userid = <?= $gUserId ?>;
                var groupId = $('#group-context-menu').data('group-id').replace('group_', '');
                exitgroup('group', userid, groupId);
            });

$('#broadcast-context-menu').on('click', '.delete-broadcast', function(e) {
                e.preventDefault(); // Prevent the default link behavior
                var broadcastId = $('#broadcast-context-menu').data('broadcast-id').replace('broadcast_', '');
                deleteGroup('broadcast', broadcastId);
            });

$('#broadcast-context-menu').on('click', '.exit-broadcast', function(e) {
                e.preventDefault(); // Prevent the default link behavior
                var userid = <?= $gUserId ?>;
                var groupId = $('#broadcast-context-menu').data('broadcast-id').replace('broadcast_', '');
                exitgroup('broadcast', userid, groupId);
            });

// Click handler to hide context menu on document click
            $(document).on('click', function() {
                $('.context-menu').hide();
            });
        });
    </script>
</body>

</html>