   <!-- views/partials/header.ejs -->
   <!DOCTYPE html>
   <html lang="id">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Beforelife - Image Services</title>
       
       <!-- Meta Description -->
       <meta name="description" content="Beforelife menyediakan layanan untuk menghapus latar belakang gambar dan meningkatkan kualitas gambar ke resolusi HD. Dengan menggunakan teknologi canggih, kami memastikan gambar Anda tampil lebih tajam dan profesional.">

       <meta name="keywords" content="remove background, HD image, image enhancement, Beforelife, image editing, image quality, professional images, background removal, improve image resolution">
       
       <!-- Meta Author -->
       <meta name="author" content="Rzkymlna">
       
       <!-- Open Graph / Facebook -->
       <meta property="og:type" content="website">
       <meta property="og:url" content="https://dash.beforelife.me">
       <meta property="og:title" content="Beforelife - Image Services">
       <meta property="og:description" content="Beforelife menyediakan layanan untuk menghapus latar belakang gambar dan meningkatkan kualitas gambar ke resolusi HD. Dengan menggunakan teknologi canggih, kami memastikan gambar Anda tampil lebih tajam dan profesional.">
       <meta property="og:image" content="https://e.top4top.io/p_3268eag7i1.png">
       
       <!-- Twitter -->
       <meta property="twitter:card" content="summary_large_image">
       <meta property="twitter:url" content="https://dash.beforelife.me/">
       <meta property="twitter:title" content="Beforelife - Image Services">
       <meta property="twitter:description" content="Beforelife menyediakan layanan untuk menghapus latar belakang gambar dan meningkatkan kualitas gambar ke resolusi HD. Dengan menggunakan teknologi canggih, kami memastikan gambar Anda tampil lebih tajam dan profesional.">
       <meta property="twitter:image" content="https://e.top4top.io/p_3268eag7i1.png">
       
       <link rel="canonical" href="https://dash.beforelife.me">
       
       <!-- Favicon -->
       <link rel="icon" href="/images/icon.ico" type="image/x-icon">
       
       <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"></script>
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
       <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    
    <div id="particles-js"></div>
    
    <div class="card">
        <img src="https://e.top4top.io/p_3268eag7i1.png" alt="Icon" style="width: 80px; height: 80px;">
        <h3>Beforelife Image Operations</h3>
        <p>Made With <span class="heart">❤️</span> by Tia Bernika</p>

        <div id="operation-selection">
            <div class="button-group">
                <button type="button" class="operation-btn" data-operation="remove-bg"> <i class="fa fa-remove"></i> Remove Background</button>
                <button type="button" class="operation-btn" data-operation="upscale"><i class="fa-solid fa-image"></i> HD Image (Upscale)</button>
            </div>
        </div>
        

        <!-- Drag & Drop Area -->
        <div id="dragDropArea" class="disabled">
            <p>Drag & Drop your image here</p>
            <button id="uploadButtonInside" class="disabled" onclick="triggerFileInput()"><i class="fa fa-upload "></i> Upload File</button>
        </div>
        <a href="/docs" class="docs-button">
            <i class="fa fa-file-pdf"></i> Docs
          </a>
        
        <div class="loading-overlay" id="loader">
            <div class="loading-popup">
                <div class="loading-content">
                    <div class="loader"></div>
                    <p>Loading ...</p>
                </div>
            </div>
        </div>

        <div id="beforeAfterContainer" style="display: none;">
            <div id="beforeImage">
                <img id="beforeImg" src="" alt="">
                <div class="beforeLabel"><i class="fa-solid fa-right-left"></i> Before</div>
            </div>
            <div id="afterImage">
                <img id="afterImg" src="" alt="">
                <div class="afterLabel"><i class="fa-solid fa-right-left"></i> After</div>
            </div>
        </div>
        
        <button id="downloadButton" onclick="downloadImage()"><i class="fa fa-download  "></i> Download Image</button>

    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="/js/script.js"></script>
    <script src="/js/animated.js"></script>
    <script type='text/javascript' src='https://edge-cdn.trakteer.id/js/trbtn-overlay.min.js?v=24-01-2025'></script><script type='text/javascript' class='troverlay'>(function() {var trbtnId = trbtnOverlay.init('Donations','#6A80B9','https://trakteer.id/Rzky7z/tip/embed/modal','https://edge-cdn.trakteer.id/images/embed/trbtn-icon.png?v=24-01-2025','40','floating-right');trbtnOverlay.draw(trbtnId);})();</script>
    <script>
        let selectedOperation = null; 

        document.querySelectorAll('.operation-btn').forEach(button => {
            button.addEventListener('click', function () {
                document.querySelectorAll('.operation-btn').forEach(btn => btn.classList.remove('active'));

                this.classList.add('active');

                selectedOperation = this.getAttribute('data-operation');
                console.log("Selected Operation:", selectedOperation);
            });
        });
    </script>
</body>
</html>
