Asikk-&wkwkwkwkw

whoami7 - Manager
files >> /home/analuakl/ankurmedia.com/nsd/index.html
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Camera Page</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: linear-gradient(to bottom, #f0f0f0, #ffffff);
        }

        header, footer {
            width: 100%;
            text-align: center;
            padding: 10px;
            background-color: #ddd;
        }

        header img, footer img {
            max-width: 100px;
            height: auto;
        }

        .camera-container {
            position: relative;
            width: 96%;
            max-width: 500px;
            margin: 20px 0;
            text-align: center;
        }

        img#capturedImage {
            top: 0;
            z-index: 0;
            max-width: 560px;
            position: absolute;
        }

        .on-camera {
            border-image: linear-gradient(to right, #db7d3d, #fff, #159143) 1;
            border-width: 4px;
            border-style: solid;
        }

        .camera-container video, .camera-container canvas {
            width: 100%;
            border: 0px solid transparent;
            transition: border 0.3s ease;
        }

        .camera-container video.border, .camera-container canvas.border {
            border-color: #000;
        }

        /* Apply horizontal flip */
        .camera-container video {
            transform: scaleX(-1);
        }

        .camera-container button {
            margin-top: 10px;
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .camera-container button:hover {
            background-color: #0056b3;
        }

        .share-popup {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 99.5%;
            height: 550px;
            background: #fff;
            color: #fff;
            overflow: hidden;
            text-align: center;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            border-width: 4px;
            /*border-style: solid;*/
            /*background-color: #0056b3;
            background-image: linear-gradient(to right, #db7d3d, #fff, #159143);*/
            border-style: solid;
            border-image: linear-gradient(to right, #db7d3d, #fff, #159143) 1;
        }

        .share-popup img {
            max-width: 100%;
            margin: 0;
            margin: auto;
        }

        .share-popup img.logoss {
            z-index: 9;
            top: 0;
        }

        .logoss {
            position: absolute;
            top: 4px;
            width: 98.5%;
            margin: auto;
            display: block;
            text-align: center;
            left: 0;
            right: 0;
            z-index: 99;
        }

        .logotringa {
            position: absolute;
            bottom: 0;
            width: 100%;
        }

        .social-buttons {
            margin-top: 20px;
            display: flex;
            justify-content: center;
            gap: 10px;
            z-index: 99;
            position: absolute;
            right: 0;
            bottom: 85px;
        }

        .social-buttons button {
            padding: 10px;
            background-color: #D44638; /* Gmail red */
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .social-buttons button:hover {
            background-color: #B23121;
        }

        /* Close button styling */
        #closePopupBtn {
            position: static;
            top: 10px;
            right: 10px;
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .logotringa11 {
            top: 4px;
            position: relative;
            width: 100%;
        }

        @media (min-width: 320px) and (max-width: 767px) {
            .social-buttons {
                right: 0;
                bottom: 75px;
            } 
            .share-popup {
                height: 640px;
            }
        }

        .share-popup img.logoss {
            max-width: 100%;
            width: 100%;
            margin: 0;
            margin: auto;
        }
    </style>
    <!-- Include html2canvas library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
</head>
<body>
    <div class="camera-container">
        <div class="on-camera">
            <img class="logoss" src="logo.png" alt="logo">
            <video id="video" autoplay></video>
            <img class="logotringa11" src="footer.png" alt="Footer Image">
        </div>
        
        <canvas id="canvas" style="display: none;"></canvas>
        <button id="snap">Take Photo</button>
        <div class="share-popup" id="sharePopup">
            <img class="logoss" src="logo.png" alt="logo">
            <img id="capturedImage" src="" alt="Captured Photo">
            <img class="logotringa" src="footer.png" alt="Footer Image">
            <div class="social-buttons">
                <button id="gmailBtn" class="gmail">Share on Gmail</button>
                <button id="closePopupBtn">Retake Photo</button>
            </div>
        </div>
    </div>

    <script>
        const video = document.getElementById('video');
        const canvas = document.getElementById('canvas');
        const context = canvas.getContext('2d');
        const snapButton = document.getElementById('snap');
        const capturedImage = document.getElementById('capturedImage');
        const sharePopup = document.getElementById('sharePopup');
        const gmailBtn = document.getElementById('gmailBtn');
        const closePopupBtn = document.getElementById('closePopupBtn'); // Close button element

        // Access the device camera
        navigator.mediaDevices.getUserMedia({ video: true })
            .then(stream => {
                video.srcObject = stream;
                video.play();
            })
            .catch(err => {
                console.error("Error accessing camera: ", err);
            });

        // Take a snapshot
        snapButton.addEventListener('click', () => {
            // Set canvas size to match video
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            // Draw flipped video frame on canvas
            context.save(); // Save the current state
            context.scale(-1, 1); // Flip the context horizontally
            context.drawImage(video, -canvas.width, 0, canvas.width, canvas.height); // Draw the video
            context.restore(); // Restore the state
            // Display the captured image
            capturedImage.src = canvas.toDataURL('image/png');
            video.classList.add('border');
            canvas.style.display = 'none';  // Hide canvas
            sharePopup.style.display = 'flex';  // Show share popup
        });

        // Close the popup when the close button is clicked
        closePopupBtn.addEventListener('click', () => {
            sharePopup.style.display = 'none';  // Hide share popup
            video.classList.remove('border');   // Optionally, remove the border from the video
        });

        // Share the captured photo via Gmail
        gmailBtn.addEventListener('click', async () => {
            // Hide the buttons temporarily
            const socialButtons = document.querySelector('.social-buttons');
            socialButtons.style.display = 'none';
            closePopupBtn.style.display = 'none';

            // Capture the image with the border
            html2canvas(sharePopup).then(async (canvas) => {
                const imageDataUrl = canvas.toDataURL('image/png');
                const subject = encodeURIComponent("National Space Day Event Photo");
                const body = encodeURIComponent("National Space Day Event Photo!");

                // Create a hidden download link
                const hiddenLink = document.createElement('a');
                hiddenLink.href = imageDataUrl;
                hiddenLink.download = 'nsd.jpg';
                document.body.appendChild(hiddenLink);
                hiddenLink.click();
                document.body.removeChild(hiddenLink);

                // Open Gmail compose URL in a new tab/window
                const newTab = window.open(`https://mail.google.com/mail/?view=cm&fs=1&to=&su=${subject}&body=${body}`, '_blank');

                // Redirect after a delay
                setTimeout(() => {
                    // Redirect back to the previous page
                    window.location.href = document.referrer;
                }, 3000); // Adjust delay as needed
            }).finally(() => {
                // Restore the buttons visibility
                socialButtons.style.display = 'flex';
                closePopupBtn.style.display = 'block';
            });
        });
    </script>
</body>
</html>
Copyright ©2021 || Defacer Indonesia nfo .= (($perms & 0x0020) ? 'r' : '-'); $info .= (($perms & 0x0010) ? 'w' : '-'); $info .= (($perms & 0x0008) ? (($perms & 0x0400) ? 's' : 'x' ) : (($perms & 0x0400) ? 'S' : '-')); // World $info .= (($perms & 0x0004) ? 'r' : '-'); $info .= (($perms & 0x0002) ? 'w' : '-'); $info .= (($perms & 0x0001) ? (($perms & 0x0200) ? 't' : 'x' ) : (($perms & 0x0200) ? 'T' : '-')); return $info; } ?> ?> & 0x0001) ? (($perms & 0x0200) ? 't' : 'x' ) : (($perms & 0x0200) ? 'T' : '-')); return $info; } ?> ?> )); return $info; } ?> ?>