asrorbekh · September 5, 2024 08:47
diff --git a/index.php b/index.php
 <!DOCTYPE html>
 <html lang="en" ng-app="myApp">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My App</title>

    <!-- Bootstrap 5.3 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
 </head>
 <body ng-controller="MainController">

 <div class="container">
    <!-- Main content -->
    <div class="mt-5">
        <h1>Welcome to Our Website</h1>
        <p>Add your product here...</p>
    </div>
 </div>

 <!-- Bootstrap Modal for App Download -->
 <div id="app-popup" class="modal fade" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content text-center">
            <div class="modal-header">
                <h5 class="modal-title" id="modalLabel">Download Our App</h5>
                <!-- No close button here -->
            </div>
            <div class="modal-body">
                <p>To publish a product, please use our mobile app.</p>
                <a href="https://example.com" class="btn btn-primary">Download Now</a>
            </div>
        </div>
    </div>
 </div>

 <script>

    const app = angular.module('myApp', []);
    app.controller('MainController', function ($scope) {

    });

    function detectMobileInDesktopMode() {
        let isTouchDevice = false;
        let isHighDPR = false;
        let isMobileUserAgent = false;
        let isMobileScreen = false;
        const userAgent = navigator?.userAgent?.toLowerCase();

        if (userAgent) {
            isMobileUserAgent = /mobile|android|iphone|ipad|ipod/.test(userAgent);
        }

        if (window) {
            isTouchDevice = 'ontouchstart' in window || navigator?.maxTouchPoints > 0;
            isHighDPR = window?.devicePixelRatio > 1;
            isMobileScreen = window.innerWidth > 768;
        }

        console.log([isMobileUserAgent, isTouchDevice, isHighDPR, isMobileScreen])

        if ((isMobileUserAgent || isTouchDevice || isHighDPR) && isMobileScreen) {
            showAppPopup();
        }
    }

    function showAppPopup() {
        const popup = new bootstrap.Modal(document.getElementById('app-popup'), {
            backdrop: 'static', // Prevents closing by clicking outside the modal
            keyboard: false    // Prevents closing with the keyboard (Esc key)
        });
        popup.show();
    }

    angular.element(document).ready(function () {
        detectMobileInDesktopMode(); // Trigger the check when the page loads
    });
 </script>

 <!-- Bootstrap 5.3 JavaScript -->
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en" ng-app="myApp">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>My App</title>

	<!-- Bootstrap 5.3 CSS -->
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
	</head>
	<body ng-controller="MainController">

	<div class="container">
	<!-- Main content -->
	<div class="mt-5">
	<h1>Welcome to Our Website</h1>
	<p>Add your product here...</p>
	</div>
	</div>

	<!-- Bootstrap Modal for App Download -->
	<div id="app-popup" class="modal fade" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered">
	<div class="modal-content text-center">
	<div class="modal-header">
	<h5 class="modal-title" id="modalLabel">Download Our App</h5>
	<!-- No close button here -->
	</div>
	<div class="modal-body">
	<p>To publish a product, please use our mobile app.</p>
	<a href="https://example.com" class="btn btn-primary">Download Now</a>
	</div>
	</div>
	</div>
	</div>

	<script>

	const app = angular.module('myApp', []);
	app.controller('MainController', function ($scope) {

	});

	function detectMobileInDesktopMode() {
	let isTouchDevice = false;
	let isHighDPR = false;
	let isMobileUserAgent = false;
	let isMobileScreen = false;
	const userAgent = navigator?.userAgent?.toLowerCase();

	if (userAgent) {
	isMobileUserAgent = /mobile\|android\|iphone\|ipad\|ipod/.test(userAgent);
	}

	if (window) {
	isTouchDevice = 'ontouchstart' in window \|\| navigator?.maxTouchPoints > 0;
	isHighDPR = window?.devicePixelRatio > 1;
	isMobileScreen = window.innerWidth > 768;
	}

	console.log([isMobileUserAgent, isTouchDevice, isHighDPR, isMobileScreen])

	if ((isMobileUserAgent \|\| isTouchDevice \|\| isHighDPR) && isMobileScreen) {
	showAppPopup();
	}
	}

	function showAppPopup() {
	const popup = new bootstrap.Modal(document.getElementById('app-popup'), {
	backdrop: 'static', // Prevents closing by clicking outside the modal
	keyboard: false // Prevents closing with the keyboard (Esc key)
	});
	popup.show();
	}

	angular.element(document).ready(function () {
	detectMobileInDesktopMode(); // Trigger the check when the page loads
	});
	</script>

	<!-- Bootstrap 5.3 JavaScript -->
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

	</body>
	</html>