OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	05/09/2025 11:18:49 AM	rwxr-xr-x
📄 about.html	3.05 KB	06/15/2021 04:56:35 AM	rw-r--r--
📄 activate.php	2.56 KB	01/10/2021 11:01:39 AM	rw-r--r--
📁 admin	-	11/06/2024 11:06:02 AM	rwxr-xr-x
📄 analytics.php	39.84 KB	11/07/2024 08:38:42 AM	rw-r--r--
📄 article.php	16.58 KB	07/22/2024 11:38:48 AM	rw-r--r--
📁 audio	-	11/05/2024 05:01:58 AM	rwxrwxrwx
📄 backend.php	11.94 KB	08/02/2024 11:50:27 AM	rw-r--r--
📄 colortest.php	24.1 KB	07/31/2024 11:46:52 AM	rw-r--r--
📄 contact.html	2.79 KB	06/15/2021 04:53:32 AM	rw-r--r--
📄 copytest.html	3.9 KB	11/05/2024 09:57:47 AM	rw-r--r--
📄 dashboard.php	12.45 KB	08/26/2024 06:33:48 AM	rw-r--r--
📁 eyecandy	-	07/28/2024 06:12:57 AM	rwxrwxrwx
📄 geo_location.php	3.55 KB	08/07/2024 10:36:18 AM	rw-r--r--
📁 grfx	-	08/15/2024 05:29:48 AM	rwxr-xr-x
📁 inc	-	08/02/2024 11:49:22 AM	rwxr-xr-x
📄 index.html	11.81 KB	07/28/2024 04:53:52 PM	rw-r--r--
📄 info.php	14 bytes	10/02/2020 04:48:53 AM	rw-r--r--
📁 newReader	-	08/13/2024 01:41:05 PM	rwxr-xr-x
📄 phonedashboard.php	24.05 KB	07/31/2024 09:31:45 AM	rw-r--r--
📄 privacy.html	9.99 KB	06/15/2021 04:53:16 AM	rw-r--r--
📁 process	-	09/12/2024 12:29:57 PM	rwxr-xr-x
📄 reader.zip	37.35 MB	10/31/2024 02:49:40 AM	rw-r--r--
📄 refund.html	7.34 KB	06/15/2021 04:53:16 AM	rw-r--r--
📄 reset.html	3.01 KB	06/15/2021 04:53:17 AM	rw-r--r--
📄 signup.html	8.08 KB	07/05/2021 07:28:05 AM	rw-r--r--
📄 splash.html	1.11 KB	01/10/2021 12:49:20 PM	rw-r--r--
📁 texttovoice	-	08/02/2024 11:50:23 AM	rwxr-xr-x
📁 thumbsUp	-	08/27/2024 07:48:23 AM	rwxr-xr-x
📄 usage.html	30.88 KB	06/15/2021 04:53:17 AM	rw-r--r--
📄 zzzdashboard.php	11.95 KB	07/28/2024 02:55: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>