fork(1) download
copy 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Get User Location</title>
  8.     <link href="https://c...content-available-to-author-only...r.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  9. </head>
  10.  
  11. <body class="bg-gray-100">
  12.     <div class="container mx-auto p-4">
  13.         <h1 class="text-3xl font-semibold mb-4">Get User Location</h1>
  14.         <div id="loading" class="text-blue-500">Fetching location...</div>
  15.         <div id="location" class="mt-4 text-lg"></div>
  16.  
  17.         <!-- زر التسوق الذي سيتم عرضه فقط عند السماح بمشاركة الموقع -->
  18.         <div id="shopButtonContainer" class="mt-4" style="display:none;">
  19.             <a href="shopping_page.html" class="bg-blue-500 text-white px-4 py-2 rounded">Go to Shopping Page</a>
  20.         </div>
  21.  
  22.         <!-- زر لإعادة طلب الموقع إذا رفض المستخدم -->
  23.         <div id="retryButtonContainer" class="mt-4" style="display:none;">
  24.             <button onclick="retryPermission()" class="bg-red-500 text-white px-4 py-2 rounded">Allow Location Again</button>
  25.         </div>
  26.     </div>
  27.  
  28.     <script>
  29.         // لحفظ حالة الإذن في الكوكيز
  30.         function setCookie(name, value, days) {
  31.             let d = new Date();
  32.             d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
  33.             let expires = "expires=" + d.toUTCString();
  34.             document.cookie = name + "=" + value + ";" + expires + ";path=/";
  35.         }
  36.  
  37.         // للحصول على قيمة الكوكيز
  38.         function getCookie(name) {
  39.             let decodedCookie = decodeURIComponent(document.cookie);
  40.             let ca = decodedCookie.split(';');
  41.             for (let i = 0; i < ca.length; i++) {
  42.                 let c = ca[i].trim();
  43.                 if (c.indexOf(name + "=") == 0) {
  44.                     return c.substring(name.length + 1, c.length);
  45.                 }
  46.             }
  47.             return "";
  48.         }
  49.  
  50.         // التحقق من حالة الإذن
  51.         function checkPermission() {
  52.             const permissionStatus = getCookie('locationPermission');
  53.             if (permissionStatus === 'granted') {
  54.                 requestLocation(); // إذا تم السماح من قبل، استعرض الموقع
  55.             } else if (permissionStatus === 'denied') {
  56.                 document.getElementById('loading').style.display = 'none';
  57.                 document.getElementById('location').innerText = 'You denied the request for Geolocation.';
  58.                 document.getElementById('retryButtonContainer').style.display = 'block'; // إظهار زر السماح مجددًا
  59.             } else {
  60.                 requestLocation(); // إذا لم يكن هناك حالة محددة، حاول مرة أخرى
  61.             }
  62.         }
  63.  
  64.         // طلب الموقع الجغرافي
  65.         function requestLocation() {
  66.             if (navigator.geolocation) {
  67.                 navigator.geolocation.getCurrentPosition(function (position) {
  68.                     const latitude = position.coords.latitude;
  69.                     const longitude = position.coords.longitude;
  70.  
  71.                     // عرض الإحداثيات في حال تم السماح
  72.                     document.getElementById('loading').style.display = 'none';
  73.                     document.getElementById('location').innerText = `Latitude: ${latitude}, Longitude: ${longitude}`;
  74.  
  75.                     // إرسال الموقع إلى الخادم
  76.                     fetch('save_location.php', {
  77.                         method: 'POST',
  78.                         headers: {
  79.                             'Content-Type': 'application/json',
  80.                         },
  81.                         body: JSON.stringify({ latitude, longitude })
  82.                     })
  83.                         .then(response => response.json())
  84.                         .then(data => {
  85.                             console.log('Location saved:', data);
  86.                         })
  87.                         .catch(error => {
  88.                             console.error('Error saving location:', error);
  89.                         });
  90.  
  91.                     // إظهار زر التسوق
  92.                     document.getElementById('shopButtonContainer').style.display = 'block';
  93.                     document.getElementById('retryButtonContainer').style.display = 'none'; // إخفاء زر إعادة الطلب
  94.  
  95.                     // حفظ حالة الإذن في الكوكيز
  96.                     setCookie('locationPermission', 'granted', 30); // صلاحية الكوكيز لمدة 30 يومًا
  97.                 }, function (error) {
  98.                     document.getElementById('loading').style.display = 'none';
  99.                     let message = '';
  100.                     switch (error.code) {
  101.                         case error.PERMISSION_DENIED:
  102.                             message = 'You denied the request for Geolocation.';
  103.                             // حفظ حالة الرفض في الكوكيز
  104.                             setCookie('locationPermission', 'denied', 30); // حفظ الرفض في الكوكيز لمدة 30 يومًا
  105.                             break;
  106.                         case error.POSITION_UNAVAILABLE:
  107.                             message = 'Location information is unavailable.';
  108.                             break;
  109.                         case error.TIMEOUT:
  110.                             message = 'The request to get user location timed out.';
  111.                             break;
  112.                         default:
  113.                             message = 'An unknown error occurred.';
  114.                     }
  115.                     document.getElementById('location').innerText = message;
  116.  
  117.                     // عدم إظهار زر التسوق إذا لم يتم السماح بالموقع
  118.                     document.getElementById('shopButtonContainer').style.display = 'none';
  119.                 });
  120.             } else {
  121.                 document.getElementById('loading').style.display = 'none';
  122.                 document.getElementById('location').innerText = 'Geolocation is not supported by this browser.';
  123.             }
  124.         }
  125.  
  126.         // محاولة إعادة طلب الإذن
  127.         function retryPermission() {
  128.             // إعادة تحميل الصفحة لمحاولة طلب الإذن مرة أخرى
  129.             location.reload();
  130.         }
  131.  
  132.         // عند تحميل الصفحة
  133.         window.onload = function () {
  134.             checkPermission(); // التحقق من حالة الإذن عند تحميل الصفحة
  135.         };
  136.     </script>
  137. </body>
  138.  
  139. </html>
  140.  
Success #stdin #stdout 0.04s 26044KB
comments (?)
stdin
copy 
H
stdout
copy 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get User Location</title>
    <link href="https://c...content-available-to-author-only...r.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>

<body class="bg-gray-100">
    <div class="container mx-auto p-4">
        <h1 class="text-3xl font-semibold mb-4">Get User Location</h1>
        <div id="loading" class="text-blue-500">Fetching location...</div>
        <div id="location" class="mt-4 text-lg"></div>

        <!-- زر التسوق الذي سيتم عرضه فقط عند السماح بمشاركة الموقع -->
        <div id="shopButtonContainer" class="mt-4" style="display:none;">
            <a href="shopping_page.html" class="bg-blue-500 text-white px-4 py-2 rounded">Go to Shopping Page</a>
        </div>

        <!-- زر لإعادة طلب الموقع إذا رفض المستخدم -->
        <div id="retryButtonContainer" class="mt-4" style="display:none;">
            <button onclick="requestLocation()" class="bg-red-500 text-white px-4 py-2 rounded">Allow Location Again</button>
        </div>
    </div>

    <script>
        // طلب الموقع الجغرافي
        function requestLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    const latitude = position.coords.latitude;
                    const longitude = position.coords.longitude;

                    // عرض الإحداثيات في حال تم السماح
                    document.getElementById('loading').style.display = 'none';
                    document.getElementById('location').innerText = `Latitude: ${latitude}, Longitude: ${longitude}`;

                    // إرسال الموقع إلى الخادم باستخدام Fetch API
                    fetch('save_location.php', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({ latitude, longitude })
                    })
                    .then(response => response.json())
                    .then(data => {
                        console.log('Location saved:', data);
                    })
                    .catch(error => {
                        console.error('Error saving location:', error);
                    });

                    // إظهار زر التسوق إذا تم السماح بالموقع
                    document.getElementById('shopButtonContainer').style.display = 'block';
                    document.getElementById('retryButtonContainer').style.display = 'none'; // إخفاء زر إعادة الطلب
                }, function (error) {
                    document.getElementById('loading').style.display = 'none';
                    let message = '';
                    switch (error.code) {
                        case error.PERMISSION_DENIED:
                            message = 'You denied the request for Geolocation.';
                            // عرض زر إعادة المحاولة إذا تم رفض الموقع
                            document.getElementById('retryButtonContainer').style.display = 'block'; 
                            break;
                        case error.POSITION_UNAVAILABLE:
                            message = 'Location information is unavailable.';
                            break;
                        case error.TIMEOUT:
                            message = 'The request to get user location timed out.';
                            break;
                        default:
                            message = 'An unknown error occurred.';
                    }
                    document.getElementById('location').innerText = message;

                    // عدم إظهار زر التسوق إذا لم يتم السماح بالموقع
                    document.getElementById('shopButtonContainer').style.display = 'none';
                });
            } else {
                document.getElementById('loading').style.display = 'none';
                document.getElementById('location').innerText = 'Geolocation is not supported by this browser.';
                // عدم إظهار زر التسوق إذا كان المتصفح لا يدعم الموقع الجغرافي
                document.getElementById('shopButtonContainer').style.display = 'none';
                document.getElementById('retryButtonContainer').style.display = 'none'; // إخفاء زر إعادة الطلب
            }
        }

        // عند تحميل الصفحة
        window.onload = function () {
            document.getElementById('retryButtonContainer').style.display = 'none'; // إخفاء زر إعادة الطلب في البداية
            requestLocation(); // استدعاء الدالة للحصول على الموقع
        };
    </script>
</body>

</html>
https://ideone.com/IwVp7c
Gg
language:
PHP (php 7.3.5)
created:
2 days ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!