OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	11/28/2024 11:03:35 AM	rwxrwxr-x
📄 about.html	3.05 KB	09/04/2024 10:58:07 AM	rw-r--r--
📄 activate.php	2.56 KB	09/04/2024 10:58:07 AM	rw-r--r--
📁 admin	-	09/04/2024 10:58:10 AM	rwxr-xr-x
📄 article.php	16.58 KB	09/04/2024 10:58:07 AM	rw-r--r--
📁 audio	-	09/04/2024 10:58:34 AM	rwxr-xr-x
📄 backend.php	11.94 KB	09/04/2024 10:58:07 AM	rw-r--r--
📄 colortest.php	24.1 KB	09/04/2024 10:58:07 AM	rw-r--r--
📄 contact.html	2.79 KB	09/04/2024 10:58:07 AM	rw-r--r--
📄 dashboard.php	12.75 KB	09/04/2024 10:58:07 AM	rw-r--r--
📁 eyecandy	-	09/04/2024 10:58:35 AM	rwxr-xr-x
📄 geo_location.php	3.55 KB	09/04/2024 10:58:07 AM	rw-r--r--
📁 grfx	-	09/04/2024 10:58:35 AM	rwxr-xr-x
📁 inc	-	09/04/2024 10:58:36 AM	rwxr-xr-x
📄 index.html	11.81 KB	09/04/2024 10:58:07 AM	rw-r--r--
📄 info.php	14 bytes	09/04/2024 10:58:07 AM	rw-r--r--
📄 new.php	879 bytes	09/04/2024 10:58:07 AM	rw-r--r--
📁 newReader	-	09/04/2024 10:59:59 AM	rwxr-xr-x
📄 phonedashboard.php	24.05 KB	09/04/2024 10:58:07 AM	rw-r--r--
📄 privacy.html	9.99 KB	09/04/2024 10:58:07 AM	rw-r--r--
📁 process	-	09/04/2024 11:00:15 AM	rwxr-xr-x
📄 refund.html	7.34 KB	09/04/2024 10:58:07 AM	rw-r--r--
📄 reset.html	3.01 KB	09/04/2024 10:58:07 AM	rw-r--r--
📄 signup.html	8.08 KB	09/04/2024 10:58:07 AM	rw-r--r--
📄 splash.html	1.11 KB	09/04/2024 10:58:07 AM	rw-r--r--
📄 testing.php	4.29 KB	09/04/2024 10:58:07 AM	rw-r--r--
📁 texttovoice	-	09/04/2024 11:00:16 AM	rwxr-xr-x
📁 thumbsUp	-	09/04/2024 11:00:16 AM	rwxr-xr-x
📄 usage.html	30.88 KB	09/04/2024 10:58:07 AM	rw-r--r--
📄 zzzdashboard.php	11.95 KB	09/04/2024 10:58:07 AM	rw-r--r--

Editing: colortest.php

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landing Page and Sidebar</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

<style>
        body {
            font-size: .875rem;
        }

.main {
            display: flex;
        }

.sidebar {
            height: 100vh;
            position: fixed;
            left: -100%;
            transition: left 0.3s;
            background-color: #021d38;
            color: white;
            /* White text color */
            z-index: 1000;
            /* Ensure the sidebar is above the content */
        }

.sidebar.show {
            left: 0;
        }

.profile-picture {
            width: 80px;
            height: 80px;
            background-color: gray;
            border-radius: 50%;
            margin: 10px 0;
            overflow: hidden;
            /* Hide any overflow */
            position: relative;
            background-image: url('default-profile.png');
            /* Default image if no upload */
            background-size: cover;
            background-position: center;
        }

.profile-picture img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* Ensure image covers the circle */
            border-radius: 50%;
        }

.pro-status {
            font-size: 1.2em;
            font-weight: bold;
            color: #28a745;
            /* Green color for Pro User text */
        }

.rating {
            color: gold;
            font-size: 20px;
        }

.content {
            margin-left: 250px;
            transition: margin-left 0.3s;
            background-color: #ffffff;
            /* Background color for content */
            z-index: 1;
            /* Ensure content is below the sidebar */
            position: relative;
            /* Ensure z-index works */
        }

.content.shifted {
            margin-left: 0;
        }

@media (max-width: 768px) {
            .content {
                margin-left: 0;
            }
        }

.heading {
            color: #333;
            /* Neutral color for the heading */
        }

/* Style for buttons with icons */
        .btn-icon {
            background: none;
            border: none;
            color: #007bff;
            /* Icon color */
            font-size: 1.25rem;
            padding: 0.5rem;
            margin-right: 0.5rem;
            cursor: pointer;
        }

.btn-icon {
            background: none;
            border: none;
            color: #007bff;
            /* Icon color */
            font-size: 1.25rem;
            padding: 0.5rem;
            margin-right: 0.5rem;
            cursor: pointer;
            transition: color 0.3s;
        }

.btn-icon:hover,
        .btn-icon:focus {
            color: #0056b3;
            /* Darker color on hover/focus */
            outline: none;
            /* Remove default focus outline */
        }

.btn-close {
            position: absolute;
            top: 10px;
            right: 10px;
            background: none;
            border: none;
            color: #ffffff;
            font-size: 1.5rem;
            cursor: pointer;
            transition: color 0.3s;
        }

.btn-close:hover,
        .btn-close:focus {
            color: #ff6666;
            /* Color change on hover/focus */
        }

.btn-icon {
            background: none;
            border: none;
            color: #3a3a3a;
            font-size: 1rem;
            padding: 0;
            margin-right: 0.5rem;
            cursor: pointer;
        }

.btn-toolbar {
            display: flex;
            align-items: center;
        }

.ml-auto {
            margin-left: auto;
        }

.bg-dark {
            background-color: #dddede !important;
        }

.btn-light {
            color: #404241;
            background-color: rgba(0, 0, 0, 0.7);
            border-color: rgba(0, 0, 0, 0.7);
        }

.fixed-bottom-icons button:hover {
            color: #b8bec3;
            background-color: transparent;
            border: none;
        }

.fixed-bottom-icons button:active {
            color: #b8bec3;
            background-color: transparent;
            border: none;
        }

.btn-light.focus,
        .btn-light:focus {
            color: #212529;
            background-color: transparent;
            border-color: none !important;
            box-shadow: none !important;
        }

.fixed-bottom-icons button {
            background-color: transparent;
            border: none;
        }

.btn-primary {
            color: #fff;
            background-color: #ff6700;
            border-color: #ff6700;
            padding: 2px 6px;
        }

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

.truncated-paragraph {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            text-overflow: ellipsis;
            max-height: 4.5em;
            /* Roughly 3 lines of text */
        }

.card {
            position: relative;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: column;
            flex-direction: column;
            min-width: 0;
            word-wrap: break-word;
            background-color: transparent;
            background-clip: border-box;
            border: none;
            border-radius: none;
        }

.card-body {
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            min-height: 1px;
            padding: 0rem !important;
        }

.card-title {
            margin-bottom: .50rem;
        }

.header-navbar {
            width: 100%;
            position: fixed;
            background-color: white;
            z-index: 10000;
            padding: 0px;
            margin: 0px;

}

/* Basic styling for buttons inside .header-navbar */
        .header-navbar button {
            background: none;
            /* Remove background */
            border: none;
            /* Remove border */
            cursor: pointer;
            /* Remove any margin */
            display: inline-flex;
            /* Align contents properly */
            align-items: center;
            /* Center contents vertically */
            justify-content: center;
            /* Center contents horizontally */
            outline: none;
            /* Remove default outline */
            appearance: none;
        }

/* Remove any visual effects on click */
        .header-navbar button:focus,
        .header-navbar button:active {
            outline: none;
            box-shadow: none;
            color: black;
            background-color: transparent;
        }

.author-name h6{
            font-size:14px;
        }
        .author-name p{
            font-size:12px;
        }

</style>
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <nav id="sidebar" class="col-md-3 col-lg-2 d-md-block sidebar">
                <div class="sidebar-sticky">
                    <button id="closeSidebar" class="btn btn-icon btn-close">
                        <i class="fas fa-chevron-left"></i> 
                    </button>
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link active" href="#">
                                <h4 class="heading">Welcome <span class="pro-status">Pro User</span></h4>
                                <div class="profile-picture">
                                    <form action="upload.php" method="post" enctype="multipart/form-data">
                                        <input type="file" name="profile_image" id="profile_image" accept="image/*"
                                            style="display: none;"
                                            onchange="document.getElementById('upload_form').submit();">
                                        <label for="profile_image" class="btn btn-primary btn-sm">Upload Image</label>
                                        <input type="hidden" name="MAX_FILE_SIZE" value="5000000">
                                    </form>
                                    <?php
                                    // Display the uploaded image if it exists
                                    $imagePath = 'uploads/' . (isset($_FILES['profile_image']) ? basename($_FILES['profile_image']['name']) : 'default-profile.png');
                                    ?>
                                    <img src="<?php echo $imagePath; ?>" alt="Profile Picture">
                                </div>
                                <div class="rating">
                                    ★★★★★
                                </div>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Home</a>
                        </li>
                    </ul>
                </div>
            </nav>
            <div class=" header-navbar d-flex flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                <button class="btn border-0 btn-outline-secondary d-md-none" type="button" id="sidebarToggle">
                    <i class="fas fa-bars"></i>
                </button>
                <h1 class="h2">KnoblyReader</h1>
                <div class="btn-toolbar mb-md-0 ml-auto"> 
                    <div class="btn-group">
                        <button type="button" class="btn-icon">
                            <i class="fas fa-search"></i> 
                        </button>
                        <button type="button" class="btn-icon">
                            <i class="fas fa-bell"></i> 
                        </button>
                    </div>
                </div>
            </div>

<div class="container mt-3 mb-3 pt-3 pl-3 pr-3 pb-0  bg-dark  rounded"
                    style="position: relative;">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="d-flex align-items-center">
                            <img src="https://wallpapers.com/images/hd/shah-rukh-khan-classy-suit-xpxcz257rb1ple9l.jpg" alt="icon" class="rounded-circle mr-3"
                                style="width: 30px; height: 30px;">
                            <div class="author-name">
                                <h6 class="m-0">Arvind Kumar</h6>
                                <p class="m-0 text-muted">3h • 429k views</p>
                            </div>
                        </div>
                        
                    </div>
                    <div class="mt-3">
                        <div class="media-container shadow-lg rounded"
                            style="max-width: 400px; height: auto; overflow: hidden; position: relative;">
                            
                            <img src="grfx/logo.png" alt="media" class="img-fluid"
                                style="width: 100%; height: 100%; object-fit: cover;">

</div>
                    </div>
                    <div class="custom-container mt-3">
                        <div class="row">
                            <div class="col-md-8 offset-md-2">
                                <div class="card">
                                    <div class="card-body">
                                        <h5 style="color: #404241;" class="card-title">Title of the Card</h5>
                                        <p class="card-text truncated-paragraph" style="color: #606161;">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
                                            non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="fixed-bottom-icons  d-flex justify-content-end align-items-center mt-1"
                        style="  bottom: 0px;">
                        <button class="btn btn-light" id="audioSpeaker" title="Audio">
                            <i class="fas fa-volume-up"></i>
                        </button>
                        <button class="btn btn-light" title="Bookmark">
                            <i class="bi bi-bookmark"></i>
                        </button>
                        <button class="btn btn-light" title="Share">
                            <i class="bi bi-share"></i>
                        </button>
                    </div>
                </div>
                <div class="container mt-3 mb-3 pt-3 pl-3 pr-3 pb-0   bg-dark  rounded"
                    style="position: relative;">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="d-flex align-items-center">
                            <img src="path/to/icon.png" alt="icon" class="rounded-circle mr-3"
                                style="width: 50px; height: 50px;">
                            <div class="author-name">
                                <h6 class="m-0">Arvind Kumar</h6>
                                <p class="m-0 text-muted">3h • 429k views</p>
                            </div>
                        </div>
                        
                    </div>
                    <div class="mt-3">
                        <div class="media-container shadow-lg  rounded"
                            style="max-width: 400px; height: auto; overflow: hidden; position: relative;">
                            
                            <img src="grfx/cream.screenshot.png" alt="media" class="img-fluid"
                                style="width: 100%; height: 100%; object-fit: cover;">

</div>
                    </div>
                    <div class="custom-container mt-3">
                        <div class="row">
                            <div class="col-md-8 offset-md-2">
                                <div class="card">
                                    <div class="card-body">
                                        <h5 style="color: #404241;" class="card-title">Title of the Card</h5>
                                        <p class="card-text truncated-paragraph" style="color: #606161;">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
                                            non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="fixed-bottom-icons  d-flex justify-content-end align-items-center mt-1"
                        style="  bottom: 0px;">
                        <button class="btn btn-light" id="audioSpeaker" title="Audio">
                            <i class="fas fa-volume-up"></i>
                        </button>
                        <button class="btn btn-light" title="Bookmark">
                            <i class="bi bi-bookmark"></i>
                        </button>
                        <button class="btn btn-light" title="Share">
                            <i class="bi bi-share"></i>
                        </button>
                    </div>
                </div>
                <div class="container mt-3 mb-3 pt-3 pl-3 pr-3 pb-0  bg-dark text-dark rounded"
                    style="position: relative;">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="d-flex align-items-center">
                            <img src="path/to/icon.png" alt="icon" class="rounded-circle mr-3"
                                style="width: 50px; height: 50px;">
                            <div class="author-name">
                                <h6 class="m-0">Arvind Kumar</h6>
                                <p class="m-0 text-muted">3h • 429k views</p>
                            </div>
                        </div>
                        
                    </div>
                    <div class="mt-3">
                        <div class="media-container  shadow-lg  rounded"
                            style="max-width: 400px; height: auto; overflow: hidden; position: relative;">
                            
                            <img src="https://wallpapers.com/images/hd/shah-rukh-khan-classy-suit-xpxcz257rb1ple9l.jpg" alt="media" class="img-fluid"
                                style="width: 100%; height: 100%; object-fit: cover;">

</main>

</div>
    </div>

document.getElementById('closeSidebar').addEventListener('click', function () {
            var sidebar = document.getElementById('sidebar');
            var content = document.querySelector('.content');
            sidebar.classList.remove('show');
            content.classList.remove('shifted');
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const toggleIcons = document.querySelectorAll('#audioSpeaker'); // Assuming you have multiple elements with this class
            const icons = ['fa-volume-up', 'fa-volume-mute'];

toggleIcons.forEach(toggleIcon => {
                let currentIndex = 0;

toggleIcon.addEventListener('click', () => {
                    // Update the icon class
                    currentIndex = (currentIndex + 1) % icons.length;
                    const newIconClass = `fas ${icons[currentIndex]}`;
                    toggleIcon.querySelector('i').className = newIconClass;
                });
            });
        });
    </script>

</body>

</html>