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="requestLocation()" 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 requestLocation() {
  31.             if (navigator.geolocation) {
  32.                 navigator.geolocation.getCurrentPosition(function (position) {
  33.                     const latitude = position.coords.latitude;
  34.                     const longitude = position.coords.longitude;
  35.  
  36.                     // عرض الإحداثيات في حال تم السماح
  37.                     document.getElementById('loading').style.display = 'none';
  38.                     document.getElementById('location').innerText = `Latitude: ${latitude}, Longitude: ${longitude}`;
  39.  
  40.                     // إرسال الموقع إلى الخادم باستخدام Fetch API
  41.                     fetch('save_location.php', {
  42.                         method: 'POST',
  43.                         headers: {
  44.                             'Content-Type': 'application/json',
  45.                         },
  46.                         body: JSON.stringify({ latitude, longitude })
  47.                     })
  48.                     .then(response => response.json())
  49.                     .then(data => {
  50.                         console.log('Location saved:', data);
  51.                     })
  52.                     .catch(error => {
  53.                         console.error('Error saving location:', error);
  54.                     });
  55.  
  56.                     // إظهار زر التسوق إذا تم السماح بالموقع
  57.                     document.getElementById('shopButtonContainer').style.display = 'block';
  58.                     document.getElementById('retryButtonContainer').style.display = 'none'; // إخفاء زر إعادة الطلب
  59.                 }, function (error) {
  60.                     document.getElementById('loading').style.display = 'none';
  61.                     let message = '';
  62.                     switch (error.code) {
  63.                         case error.PERMISSION_DENIED:
  64.                             message = 'You denied the request for Geolocation.';
  65.                             document.getElementById('retryButtonContainer').style.display = 'block'; // عرض زر إعادة الطلب
  66.                             break;
  67.                         case error.POSITION_UNAVAILABLE:
  68.                             message = 'Location information is unavailable.';
  69.                             break;
  70.                         case error.TIMEOUT:
  71.                             message = 'The request to get user location timed out.';
  72.                             break;
  73.                         default:
  74.                             message = 'An unknown error occurred.';
  75.                     }
  76.                     document.getElementById('location').innerText = message;
  77.  
  78.                     // عدم إظهار زر التسوق إذا لم يتم السماح بالموقع
  79.                     document.getElementById('shopButtonContainer').style.display = 'none';
  80.                 });
  81.             } else {
  82.                 document.getElementById('loading').style.display = 'none';
  83.                 document.getElementById('location').innerText = 'Geolocation is not supported by this browser.';
  84.                 // عدم إظهار زر التسوق إذا كان المتصفح لا يدعم الموقع الجغرافي
  85.                 document.getElementById('shopButtonContainer').style.display = 'none';
  86.                 document.getElementById('retryButtonContainer').style.display = 'none'; // إخفاء زر إعادة الطلب
  87.             }
  88.         }
  89.  
  90.         // عند تحميل الصفحة
  91.         window.onload = function () {
  92.             document.getElementById('retryButtonContainer').style.display = 'none'; // إخفاء زر إعادة الطلب في البداية
  93.             requestLocation();
  94.         };
  95.     </script>
  96. </body>
  97.  
  98. </html>
  99.  
Success #stdin #stdout 0.03s 25876KB
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/Epl6Pj
Gg
language:
PHP (php 7.3.5)
created:
352 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!