OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	10/28/2024 10:38:34 AM	rwxr-xr-x
📄 .DS_Store	6 KB	10/26/2024 01:24:56 PM	rw-r--r--
📁 .ipynb_checkpoints	-	10/26/2024 01:24:58 PM	rwxr-xr-x
📁 .venv	-	10/26/2024 01:25:02 PM	rwxr-xr-x
📄 app.py	1008 bytes	10/26/2024 01:24:56 PM	rw-r--r--
📄 crop.py	1.5 KB	10/26/2024 01:24:56 PM	rw-r--r--
📄 crop.py.zip	913 bytes	10/26/2024 01:24:56 PM	rw-r--r--
📁 detected	-	10/28/2024 09:39:25 AM	rwxr-xr-x
📁 faces	-	10/26/2024 01:25:02 PM	rwxr-xr-x
📄 faces.sh	98 bytes	10/26/2024 01:24:56 PM	rw-r--r--
📄 find_faces.py	1.42 KB	10/28/2024 09:35:38 AM	rw-r--r--
📁 img	-	10/26/2024 01:24:59 PM	rwxr-xr-x
📄 index.html	1.12 KB	10/26/2024 01:24:56 PM	rw-r--r--
📄 index3.html	5.93 KB	10/26/2024 01:24:57 PM	rw-r--r--
📄 new.py	128 bytes	10/26/2024 01:24:57 PM	rw-r--r--
📄 newtest.php	1.34 KB	10/26/2024 01:24:57 PM	rw-r--r--
📄 people_with_phones.png	88.37 KB	10/26/2024 01:24:57 PM	rw-r--r--
📄 requirements.txt	33 bytes	10/26/2024 01:24:57 PM	rw-r--r--
📄 runpy.php	351 bytes	10/26/2024 01:24:57 PM	rw-r--r--
📄 straighten.py	1.38 KB	10/26/2024 01:24:57 PM	rw-r--r--
📄 test_faces_detected.jpg	2.98 MB	10/26/2024 01:24:58 PM	rw-r--r--
📄 testing.ipynb	6.74 KB	10/26/2024 01:24:57 PM	rw-r--r--
📄 upload.html	1.41 KB	10/28/2024 09:11:41 AM	rw-r--r--
📄 upload.php	4.48 KB	10/28/2024 09:41:43 AM	rw-r--r--
📁 uploads	-	10/28/2024 09:41:46 AM	rwxrwxrwx

Editing: index3.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Knobly Faces</title>
    
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.5.0/font/bootstrap-icons.min.css">
    <style>
        body {
            background-color: #f9f9f9;
            font-family: 'Roboto', sans-serif;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            overflow: hidden;
        }

.sidebar {
            background-color: #2c2f33;
            height: 100vh;
            padding-top: 20px;
            position: fixed;
            left: 0;
            top: 0;
            width: 200px;
            transition: width 0.3s;
            overflow-y: auto;
        }

.sidebar a {
            color: #ffffff;
            display: block;
            padding: 10px 15px;
            font-size: 16px;
            text-decoration: none;
        }

.sidebar a:hover {
            background-color: #4b4f56;
        }

.navbar {
            background-color: #343a40;
            padding: 20px;
            z-index: 1;
        }

.main-content {
            margin-left: 220px;
            flex: 1;
            background: #ffffff;
            border-radius: 8px;
            /* max-height: calc(100vh - 56px); */
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }

.footer {
            text-align: center;
            padding: 10px;
            background-color: #343a40;
            color: #ffffff;
            font-size: 0.9rem;
            margin-top: auto;
            /* Push footer to the bottom */
        }

.toggle-btn {
            color: #fff;
            cursor: pointer;
            font-size: 1.5rem;
        }

.upload-section {
            background-color: #fff6e6;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
        }

.upload-section:hover {
            transform: translateY(-2px);
        }

.upload-preview {
            margin-top: 20px;
            display: none;
        }

.upload-preview img {
            max-width: 50%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>

<body>
    <div id="sidebar" class="sidebar">
        <img src="https://via.placeholder.com/150x50?text=Logo" alt="Knobly Reader Logo">
        <a href="#">Newsroll</a>
        <a href="#">My Collections</a>
        <a href="#">Analytics</a>
    </div>

<div id="main-content" class="main-content">
        <nav id="navbar" class="navbar navbar-dark">
            <div class="container-fluid">
                <i class="bi bi-list toggle-btn" id="toggle-btn"></i>
                <a class="navbar-brand color-white" href="#">KNOBLY READER</a>
            </div>
        </nav>
        <div class="container-fluid flex-grow-1">
            <h4 class="mt-4">Upload and Preview Your Image</h4>
            <div class="upload-section flex gap-4">
                <label for="imageUpload" class="form-label">Upload an image from your computer</label>
                <input class="form-control" type="file" id="imageUpload">

<div class="upload-preview" id="uploadPreview">
                    <h5 class="mt-4">Image Preview:</h5>
                    <img id="previewImg" src="#" alt="Your uploaded image" style="display: none;">
                </div>

<button id="processButton" class="btn btn-primary flex mt-4" onclick="find_faces()">Process</button>
            </div>
        </div>
        <div class="footer">
            &copy; 2024, Knobly Consulting
        </div>
    </div>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>

$(document).ready(function () {
            const $toggleBtn = $('#toggle-btn');
            const $sidebar = $('#sidebar');
            const $mainContent = $('#main-content');
            const $imageUpload = $('#imageUpload');
            const $previewImg = $('#previewImg');
            const $uploadPreview = $('#uploadPreview');

let isSidebarVisible = true;

$toggleBtn.on('click', function () {
                isSidebarVisible = !isSidebarVisible;
                $sidebar.css('display', isSidebarVisible ? 'block' : 'none');
                $mainContent.css('margin-left', isSidebarVisible ? '220px' : '0');
            });

$imageUpload.on('change', function (event) {
                const file = event.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function (e) {
                        $previewImg.attr('src', e.target.result).show();
                        $uploadPreview.show();
                    };
                    reader.readAsDataURL(file);
                } else {
                    $uploadPreview.hide();
                }
            });
        });
    </script>

</body>

</html>