📄 File: common-end.php

Path: /home2/outerorb/public_html/inc/common-end.php

Size: 12.16 KB

Permissions: 0666

    <!-- ===== Floating WhatsApp + Callback Buttons ===== -->
    <div id="oot-floating-btns" style="position:fixed; bottom:90px; right:22px; z-index:9998; display:flex; flex-direction:column; align-items:flex-end; gap:10px;">
        <!-- WhatsApp -->
        <a href="https://wa.me/918002909777?text=Hi%2C%20I%20would%20like%20to%20know%20more%20about%20your%20BPO%20services."
           target="_blank" rel="noopener"
           title="Chat on WhatsApp"
           style="display:flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:50%; background:#25D366; color:#fff; font-size:26px; box-shadow:0 4px 16px rgba(37,211,102,0.5); text-decoration:none; transition:transform .2s;"
           onmouseover="this.style.transform='scale(1.12)'" onmouseout="this.style.transform='scale(1)'">
            <i class="fa-brands fa-whatsapp"></i>
        </a>
        <!-- Request Callback -->
        <button onclick="document.getElementById('oot-callback-modal').style.display='flex'"
           title="Request a Callback"
           style="display:flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:50%; background:#057aef; color:#fff; font-size:22px; box-shadow:0 4px 16px rgba(5,122,239,0.45); border:none; cursor:pointer; transition:transform .2s;"
           onmouseover="this.style.transform='scale(1.12)'" onmouseout="this.style.transform='scale(1)'">
            <i class="fa-solid fa-phone-volume"></i>
        </button>
    </div>

    <!-- Callback Modal -->
    <div id="oot-callback-modal"
         style="display:none; position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,0.55); align-items:center; justify-content:center; padding:16px;">
        <div style="background:#fff; border-radius:10px; max-width:420px; width:100%; padding:32px 28px; position:relative; box-shadow:0 8px 40px rgba(0,0,0,0.2);">
            <button onclick="document.getElementById('oot-callback-modal').style.display='none'"
                    style="position:absolute; top:14px; right:18px; background:none; border:none; font-size:22px; cursor:pointer; color:#888;">&#x2715;</button>
            <h4 style="margin:0 0 4px; font-size:20px; color:#1a2540;">Request a Callback</h4>
            <p style="color:#666; font-size:13px; margin:0 0 20px;">Our team will call you back within 2 hours during business hours.</p>
            <form id="callback-form" method="post" action="<?php echo $base_url; ?>mailer.php">
                <input type="hidden" name="csrf_token" value="<?php echo htmlspecialchars($csrf_token ?? '', ENT_QUOTES, 'UTF-8'); ?>">
                <input type="hidden" name="service" value="Callback Request">
                <!-- Honeypot -->
                <div style="display:none;" aria-hidden="true"><input type="text" name="fax" tabindex="-1" autocomplete="off" value=""></div>
                <div style="margin-bottom:12px;">
                    <input type="text" name="name" placeholder="Your Full Name *"
                        style="width:100%; padding:10px 14px; border:1px solid #ddd; border-radius:5px; font-size:14px; box-sizing:border-box; outline:none;">
                </div>
                <div style="margin-bottom:12px;">
                    <input type="tel" name="phone" placeholder="Phone Number *"
                        style="width:100%; padding:10px 14px; border:1px solid #ddd; border-radius:5px; font-size:14px; box-sizing:border-box; outline:none;">
                </div>
                <div style="margin-bottom:12px;">
                    <input type="email" name="email" placeholder="Email Address *"
                        style="width:100%; padding:10px 14px; border:1px solid #ddd; border-radius:5px; font-size:14px; box-sizing:border-box; outline:none;">
                </div>
                <div style="margin-bottom:16px;">
                    <select name="message" style="width:100%; padding:10px 14px; border:1px solid #ddd; border-radius:5px; font-size:14px; box-sizing:border-box; outline:none; background:#fff; color:#555;">
                        <option value="Best time to call: Any time">Best time to call: Any time</option>
                        <option value="Best time to call: Morning (9am-12pm)">Morning (9am–12pm)</option>
                        <option value="Best time to call: Afternoon (12pm-5pm)">Afternoon (12pm–5pm)</option>
                        <option value="Best time to call: Evening (5pm-7pm)">Evening (5pm–7pm)</option>
                    </select>
                </div>
                <div id="callback-msg" style="display:none; padding:8px 12px; border-radius:5px; font-size:13px; margin-bottom:10px;"></div>
                <button type="submit" id="callback-submit-btn"
                    style="width:100%; padding:13px; background:#057aef; color:#fff; border:none; border-radius:5px; font-size:15px; font-weight:700; cursor:pointer;">
                    Request Callback
                </button>
            </form>
        </div>
    </div>

    <script>
    (function(){
        var cbForm = document.getElementById('callback-form');
        var cbMsg  = document.getElementById('callback-msg');
        var cbBtn  = document.getElementById('callback-submit-btn');
        if (!cbForm) return;
        cbForm.addEventListener('submit', function(e){
            e.preventDefault();
            cbBtn.textContent = 'Sending…';
            cbBtn.disabled = true;
            cbMsg.style.display = 'none';
            var xhr = new XMLHttpRequest();
            xhr.open('POST', cbForm.getAttribute('action'));
            xhr.onload = function(){
                cbBtn.disabled = false;
                cbBtn.textContent = 'Request Callback';
                cbMsg.style.display = 'block';
                if (xhr.status === 200){
                    cbMsg.style.background = '#e6f9f0';
                    cbMsg.style.color = '#1a7c45';
                    cbMsg.textContent = '✓ ' + xhr.responseText;
                    cbForm.reset();
                    setTimeout(function(){ document.getElementById('oot-callback-modal').style.display='none'; }, 3000);
                } else {
                    cbMsg.style.background = '#fdecea';
                    cbMsg.style.color = '#b00020';
                    cbMsg.textContent = xhr.responseText || 'Something went wrong.';
                }
            };
            xhr.onerror = function(){
                cbBtn.disabled = false;
                cbBtn.textContent = 'Request Callback';
                cbMsg.style.display = 'block';
                cbMsg.style.background = '#fdecea';
                cbMsg.style.color = '#b00020';
                cbMsg.textContent = 'Network error. Please call us directly.';
            };
            xhr.send(new FormData(cbForm));
        });
        // Close modal on backdrop click
        document.getElementById('oot-callback-modal').addEventListener('click', function(e){
            if (e.target === this) this.style.display = 'none';
        });
    })();
    </script>
    <!-- ===== End Floating Buttons ===== -->

    <!-- offcanvase search -->
    <div class="search-input-area">
        <div class="container">
            <div class="search-input-inner">
                <div class="input-div">
                    <input class="search-input autocomplete" type="text" placeholder="Search by keyword or #">
                    <button><i class="far fa-search"></i></button>
                </div>
            </div>
        </div>
        <div id="close" class="search-close-icon"><i class="far fa-times"></i></div>
    </div>
    <div id="anywhere-home" class="">
    </div>

    <!-- progress area start -->
    <div class="progress-wrap">
        <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
            <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" style="transition: stroke-dashoffset 10ms linear 0s; stroke-dasharray: 307.919, 307.919; stroke-dashoffset: 307.919;">
            </path>
        </svg>
    </div>
    <!-- progress area end -->

    <div id="cookie-consent-banner" style="position:fixed;bottom:0;left:0;right:0;background:rgba(0,0,0,0.9);color:#fff;padding:16px 18px;display:none;z-index:9999;font-size:13px;">
        <div style="max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;">
            <span>We use cookies to improve your experience, provide analytics, and personalize content. By continuing, you consent to cookies. <a href="<?php echo $base_url; ?>privacy-policy.php" style="color:#74c0fc;text-decoration:underline;" target="_blank">Learn more</a>.</span>
            <div style="display:flex;gap:8px;">
                <button id="cookie-btn-accept" style="background:#057aef;color:#fff;border:0;padding:8px 12px;border-radius:5px;cursor:pointer;">Accept</button>
                <button id="cookie-btn-decline" style="background:#6b7280;color:#fff;border:0;padding:8px 12px;border-radius:5px;cursor:pointer;">Decline</button>
            </div>
        </div>
    </div>

    <script>
        (function(){
            var consent = localStorage.getItem('oot_cookie_consent');
            var banner = document.getElementById('cookie-consent-banner');

            if (!consent) {
                banner.style.display = 'block';
            }

            function setConsent(value){
                localStorage.setItem('oot_cookie_consent', value);
                banner.style.display = 'none';
            }

            document.getElementById('cookie-btn-accept').addEventListener('click', function(){
                setConsent('accepted');
            });

            document.getElementById('cookie-btn-decline').addEventListener('click', function(){
                setConsent('declined');
            });
        })();
    </script>

    <script src="<?php echo $asset_base; ?>/assets/js/plugins/jquery.js"></script>

    <script src="<?php echo $asset_base; ?>/assets/js/plugins/odometer.js"></script>
    <script src="<?php echo $asset_base; ?>/assets/js/plugins/jquery-appear.js"></script>


    <script src="<?php echo $asset_base; ?>/assets/js/plugins/gsap.js"></script>
    <script src="<?php echo $asset_base; ?>/assets/js/plugins/split-text.js"></script>
    <script src="<?php echo $asset_base; ?>/assets/js/plugins/scroll-trigger.js"></script>
    <script src="<?php echo $asset_base; ?>/assets/js/plugins/smooth-scroll.js"></script>
    <script src="<?php echo $asset_base; ?>/assets/js/plugins/metismenu.js"></script>
    <script src="<?php echo $asset_base; ?>/assets/js/plugins/popup.js"></script>

    <script src="<?php echo $asset_base; ?>/assets/js/vendor/bootstrap.min.js"></script>
    <script src="<?php echo $asset_base; ?>/assets/js/plugins/swiper.js"></script>
    <script src="<?php echo $asset_base; ?>/assets/js/plugins/contact.form.js"></script>

    <script src="<?php echo $asset_base; ?>/assets/js/main.js"></script>
    <script>
    (function(){
        function initMobileSubmenus(){
            var mobile = document.querySelector('.mobile-menu');
            if(!mobile) return;
            function collapseAll(){
                mobile.querySelectorAll('.submenu').forEach(function(s){ s.style.display='none'; s.parentElement.classList.remove('open'); });
            }
            collapseAll();
            mobile.addEventListener('click', function(e){
                var anchor = e.target.closest('.has-dropdown > a');
                if(!anchor) return;
                if(window.innerWidth > 991) return;
                e.preventDefault();
                var li = anchor.parentElement;
                var submenu = li.querySelector('.submenu');
                if(!submenu) return;
                var isOpen = li.classList.toggle('open');
                submenu.style.display = isOpen ? 'block' : 'none';
            });
            window.addEventListener('resize', function(){ if(window.innerWidth > 991) collapseAll(); });
        }
        if(document.readyState === 'loading') document.addEventListener('DOMContentLoaded', initMobileSubmenus); else initMobileSubmenus();
    })();
    </script>
</body>

</html>

← Back to Directory Edit File 🔒 Chmod