OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	04/17/2025 09:15:05 AM	rwxrwxr-x
📄 25_11_24stream.js	16.73 KB	11/21/2024 12:24:11 PM	rw-r--r--
📄 bbcommon.js	46.36 KB	01/08/2025 07:45:55 AM	rw-r--r--
📄 bcommon.js	46.88 KB	11/13/2024 02:39:46 PM	rw-r--r--
📄 common.js	59.76 KB	06/17/2025 08:40:01 AM	rw-r--r--
📄 genai_func.js	13.81 KB	11/15/2024 01:01:34 PM	rw-rw-r--
📄 magnific-popup.min.js	19.74 KB	11/13/2024 02:39:40 PM	rw-r--r--
📄 main.js	4.98 KB	01/04/2025 11:02:19 AM	rw-r--r--
📄 new_social_script.js	11.82 KB	04/17/2025 09:15:27 AM	rw-r--r--
📄 scripts.js	1.49 KB	11/22/2024 07:32:22 AM	rw-rw-r--
📄 stream.js	16.86 KB	03/28/2025 05:41:53 AM	rw-r--r--

Editing: new_social_script.js

// Add this to your existing JavaScript at the bottom of the page
document.addEventListener('DOMContentLoaded', function () {
    const fabButton = document.getElementById('create-post-fab');
    const postModal = document.getElementById('post-modal');
    const closeModal = document.getElementById('close-modal');
    const submitPost = document.getElementById('submit-post');
    const postTextarea = document.getElementById('post-textarea');
    const privacyDropdownBtn = document.getElementById('privacy-dropdown-btn');
    const privacyDropdownContent = document.getElementById('privacy-dropdown-content');
    const privacyDropdownItems = document.querySelectorAll('.dropdown-item');

// Open modal when FAB is clicked
    fabButton.addEventListener('click', function () {
        postModal.classList.add('active');
    });

// Close modal when close button is clicked
    closeModal.addEventListener('click', function () {
        postModal.classList.remove('active');
    });

// Close modal when clicking outside of it
    postModal.addEventListener('click', function (e) {
        if (e.target === postModal) {
            postModal.classList.remove('active');
        }
    });

// Toggle privacy dropdown
    privacyDropdownBtn.addEventListener('click', function () {
        privacyDropdownContent.classList.toggle('active');
        event.stopPropagation();
    });

// Close dropdown when clicking elsewhere
    document.addEventListener('click', function () {
        privacyDropdownContent.classList.remove('active');
    });

// Prevent dropdown from closing when clicking inside it
    privacyDropdownContent.addEventListener('click', function (e) {
        e.stopPropagation();
    });

// Handle privacy selection
    privacyDropdownItems.forEach(item => {
        item.addEventListener('click', function () {
            // Remove active class from all items
            privacyDropdownItems.forEach(i => i.classList.remove('active'));

// Add active class to clicked item
            this.classList.add('active');

// Update button text and icon
            const icon = this.querySelector('i').cloneNode(true);
            const text = this.querySelector('span').textContent;

privacyDropdownBtn.innerHTML = '';
            privacyDropdownBtn.appendChild(icon);

const span = document.createElement('span');
            span.textContent = text;
            privacyDropdownBtn.appendChild(span);

const caretIcon = document.createElement('i');
            caretIcon.className = 'fas fa-caret-down';
            privacyDropdownBtn.appendChild(caretIcon);

// Close dropdown
            privacyDropdownContent.classList.remove('active');
        });
    });

// Submit post functionality
    submitPost.addEventListener('click', function () {
        const postText = postTextarea.value.trim();
        if (postText !== '') {
            createNewPost(postText);
            postTextarea.value = '';
            postModal.classList.remove('active');
        }
    });

// Create new post function (reuse your existing function)
    function createNewPost(text) {
        const postsFeed = document.querySelector('.posts-feed');
        const newPost = document.createElement('div');
        newPost.className = 'post-card';

const timeString = 'Just now';

newPost.innerHTML = `
            <div class="post-header">
                <div class="user-avatar">J</div>
                <div class="post-info">
                    <div class="post-author">You</div>
                    <div class="post-meta">@yourhandle · ${timeString}</div>
                </div>
                <div class="post-menu">
                    <i class="fas fa-ellipsis-h"></i>
                </div>
            </div>
            <div class="post-content">
                <div class="post-text">${text}</div>
            </div>
            <div class="post-stats">
                <div>0 comments</div>
                <div>0 shares</div>
            </div>
            <div class="post-actions-bar">
                <div class="action-button">
                    <i class="far fa-heart"></i>
                    <span>Like</span>
                </div>
                <div class="action-button">
                    <i class="far fa-comment"></i>
                    <span>Comment</span>
                </div>
                <div class="action-button">
                    <i class="far fa-bookmark"></i>
                    <span>Bookmark</span>
                </div>
                <div class="action-button">
                    <i class="far fa-share-square"></i>
                    <span>Share</span>
                </div>
            </div>
        `;

// Insert the new post at the top of the feed
        postsFeed.insertBefore(newPost, postsFeed.firstChild);

// Add event listeners to the new post's action buttons
        const newActionButtons = newPost.querySelectorAll('.action-button');
        newActionButtons.forEach(button => {
            button.addEventListener('click', function () {
                if (this.querySelector('.fa-heart')) {
                    this.classList.toggle('liked');
                    const icon = this.querySelector('.fa-heart');
                    if (this.classList.contains('liked')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                    }
                }
            });
        });
    }
});

// Mobile Footer Navigation
document.addEventListener('DOMContentLoaded', function () {
    const footerItems = document.querySelectorAll('.footer-item');

footerItems.forEach(item => {
        item.addEventListener('click', function () {
            // Remove active class from all items
            footerItems.forEach(i => i.classList.remove('active'));

// Add active class to clicked item
            this.classList.add('active');

// Add your navigation logic here
            // For example, if the plus icon is clicked, open the post modal
            if (this.querySelector('.fa-plus-circle')) {
                document.getElementById('post-modal').classList.add('active');
            }
        });
    });
});

// Dark mode functionality
document.addEventListener('DOMContentLoaded', function () {
    const themeToggle = document.getElementById('theme-toggle');
    const themeIcon = themeToggle.querySelector('i');

// Check for saved theme preference or respect OS preference
    const savedTheme = localStorage.getItem('theme');
    const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

// Apply theme based on saved preference or OS preference
    if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
        document.documentElement.setAttribute('data-theme', 'dark');
        themeIcon.classList.remove('fa-moon');
        themeIcon.classList.add('fa-sun');
    }

// Theme toggle click handler
    themeToggle.addEventListener('click', function () {
        const currentTheme = document.documentElement.getAttribute('data-theme');
        let newTheme;

if (currentTheme === 'dark') {
            newTheme = '';
            themeIcon.classList.remove('fa-sun');
            themeIcon.classList.add('fa-moon');
        } else {
            newTheme = 'dark';
            themeIcon.classList.remove('fa-moon');
            themeIcon.classList.add('fa-sun');
        }

document.documentElement.setAttribute('data-theme', newTheme);
        localStorage.setItem('theme', newTheme);
    });

// Simple like functionality
    const actionButtons = document.querySelectorAll('.action-button');

actionButtons.forEach(button => {
        button.addEventListener('click', function () {
            if (this.querySelector('.fa-heart')) {
                this.classList.toggle('liked');
                const icon = this.querySelector('.fa-heart');
                if (this.classList.contains('liked')) {
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                } else {
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                }
            }
        });
    });

// Create post functionality
    const postButton = document.querySelector('.post-button');
    const postTextarea = document.querySelector('.post-input textarea');

postButton.addEventListener('click', function () {
        const postText = postTextarea.value.trim();
        if (postText !== '') {
            createNewPost(postText);
            postTextarea.value = '';
        }
    });

function createNewPost(text) {
        const postsFeed = document.querySelector('.posts-feed');
        const newPost = document.createElement('div');
        newPost.className = 'post-card';

const currentDate = new Date();
        const timeString = 'Just now';

newPost.innerHTML = `
                <div class="post-header">
                <div class="user-avatar">J</div>
                <div class="post-info">
                      <div class="post-author">You</div>
                      <div class="post-meta">@yourhandle · ${timeString}</div>
                    </div>
                    <div class="post-menu">
                      <i class="fas fa-ellipsis-h"></i>
                    </div>
                  </div>
                  <div class="post-content">
                    <div class="post-text">${text}</div>
                  </div>
                  <div class="post-stats">
                    <div>0 comments</div>
                    <div>0 shares</div>
                  </div>
                  <div class="post-actions-bar">
                    <div class="action-button">
                    <i class="far fa-comment"></i>
                    <span>Comment</span>
                        </div>
                        <div class="action-button">
                    <i class="far fa-bookmark"></i>
                    <span>Bookmark</span>
                    </div>
                    <div class="action-button">
                    <i class="far fa-heart"></i>
                    <span>Like</span>
                    </div>
                    <div class="action-button">
                    <i class="far fa-share-square"></i>
                    <span>Share</span>
                    </div>
                </div>
                        `;

// Insert the new post at the top of the feed, after the create-post element
        const createPostElement = document.querySelector('.create-post');
        postsFeed.insertBefore(newPost, createPostElement.nextSibling);

// follow and following