show location of user

app.py

@@ -5,7 +5,8 @@ from flask import (
     request,
     url_for,
     send_from_directory,
-    flash
+    flash,
+    jsonify
 )
 from utils import redirect, dbload, dbsave, udbload, udbsave
 from werkzeug.exceptions import RequestEntityTooLarge
@@ -15,6 +16,7 @@ import os
 import random
 import threading
 import time
+import requests
 
 import logging
 import logging.handlers
@@ -32,6 +34,28 @@ logging.getLogger('werkzeug').addHandler(handler)
 app.logger.setLevel(logging.WARNING)
 app.logger.addHandler(handler)
 
+@app.route('/get-location')
+def get_location():
+    # Get IP (handling Docker/Proxy headers)
+    user_ip = request.headers.get('X-Forwarded-For', request.remote_addr)
+    if user_ip and ',' in user_ip:
+        user_ip = user_ip.split(',')[0].strip()
+
+    # Localhost testing fix
+    if user_ip in ['127.0.0.1', 'localhost', '::1']:
+        user_ip = '8.8.8.8' 
+
+    try:
+        # Use a fast, reliable API
+        response = requests.get(f'http://ip-api.com/json/{user_ip}', timeout=5)
+        return jsonify(response.json())
+    except:
+        return jsonify({"status": "fail"}), 500
+
+@app.route('/ping')
+def ping():
+    return jsonify({"status": "ok"})
+
 @app.route('/')
 def index():
     return redirect(url_for('upload'))

static/script.js

@@ -1,17 +1,4 @@
-if (localStorage.getItem("loaded")) {
-    document.getElementById("mirrorLogo").className = "fa-solid fa-circle-dot fa-2xs";
-    document.getElementById("mirrorText").textContent = "drive.fybe.dev";
-    document.getElementById("mirrorLogo").style.color = "#47cc00";
-} else {
-    setTimeout(() => {
-        document.getElementById("mirrorLogo").style.color = "#47cc00";
-        document.getElementById("mirrorText").textContent = "drive.fybe.dev";
-        setTimeout(() => {
-            document.getElementById("mirrorLogo").className = "fa-solid fa-circle-dot fa-2xs";
-            localStorage.setItem("loaded", true);
-        }, 3000);
-    }, 3000);
-}
+
 
 document.addEventListener('DOMContentLoaded', function() {
     const form = document.getElementById('uploadForm');

templates/upload.html

@@ -41,18 +41,18 @@
                 {% if loggedIn %}
                 <h1>ADrive File Sharing <span class="badge text-bg-primary">{{ username }}</span></h1>
                 {% else %}
-                <h1>ADrive File Sharing <span class="badge text-bg-primary">Guest</span></h1>
+                <h1>ADrive File Sharing <span class="badge text-bg-danger">Guest</span></h1>
                 {% endif %}
-                <span style="font-size: 20px;">
-                    <i class="fa-solid fa-server fa-xs"
+                <!-- <span style="font-size: 20px;">
+                    <i class="fa-solid fa-wifi fa-xs"
                         style="line-height: 25px; font-size: 15px; display: inline-block;"></i>
-                    <span id="mirrorText">Finding Nearby Mirror</span> <i
+                    <span id="mirrorText">Ping: <span id="ping-value">CONNECTING</span>ms</span> <i
                         class="fa-solid fa-circle-dot fa-beat-fade fa-2xs" style="color: #ff9500;" id="mirrorLogo"></i>
-                </span>
-                <span style="font-size: 20px;">
-                    <i class="fa-solid fa-server fa-xs"
+                </span> -->
+                <span style="font-size: 20px; padding-bottom: 7px;">
+                    <i class="fa-solid fa-location fa-xs"
                         style="line-height: 25px; font-size: 15px; display: inline-block;"></i>
-                    Location Not Found <i class="fa-solid fa-circle-dot fa-2xs" style="color: #c10101;"></i>
+                    <span id="location-display" class="loading">Locating...</span> <i class="fa-solid fa-circle-dot fa-2xs" id="mirrorLogo" style="color: #c10101;"></i> <span class="badge text-bg-primary"><span id="ping-value">..</span>ms</span></span>
                 </span>
                 <input type="file" name="file" id="fileUpload" class="form-control" required aria-required>
                 <input type="hidden" id="quotaGB" value="{{ quota_gb }}">
@@ -63,7 +63,7 @@
                     <div id="uploadProgressText" style="display:none;font-size:13px;margin-top:4px">0%</div>
                 <div class="input-group mb-3">
                     <div class="input-group-text">
-                        <input class="form-check-input mt-0" type="checkbox" value="" name="reusable"
+                        <input class="form-check-input mt-0" type="checkbox" value="" id="reusableCheck" name="reusable"
                             aria-label="Checkbox for following text input" style="border: 1px solid rgb(106, 106, 106);">
                         <label for="reusable" style="margin-left: 6px; margin-bottom: 0;">Reusable
                             Link</label>
@@ -177,6 +177,63 @@
         })();
     </script>
 
+    <script>
+        function measurePing() {
+            const start = Date.now();
+            
+            fetch('/ping')
+                .then(() => {
+                    const end = Date.now();
+                    const latency = end - start;
+                    document.getElementById('ping-value').innerText = latency;
+                })
+                .catch(err => {
+                    document.getElementById('ping-value').innerText = "Error";
+                });
+        }
+
+        document.getElementById("fileUpload").disabled = true;
+        document.getElementById("uploadBtn").disabled = true;
+        document.getElementById("codeInput").disabled = true;
+        document.getElementById("reusableCheck").disabled = true;
+        // Measure ping immediately on load
+        setTimeout(() => {
+            document.getElementById("mirrorLogo").classList.remove("fa-beat-fade");
+            document.getElementById("mirrorLogo").style.color = "green";
+            measurePing();
+            document.getElementById("fileUpload").disabled = false;
+            document.getElementById("codeInput").disabled = false;
+            document.getElementById("uploadBtn").disabled = false;
+            document.getElementById("reusableCheck").disabled = false;
+
+
+        }, 1000);
+
+
+        setInterval(() => {
+            measurePing();
+        }, 1000); // Update every 30 seconds
+    </script>
+    <script>
+        async function loadLocation() {
+            try {
+                const response = await fetch('/get-location');
+                const data = await response.json();
+                
+                if (data.status === 'success') {
+                    document.getElementById('location-display').innerHTML = 
+                        `${data.city}, ${data.country} <small>(${data.isp})</small>`;
+                    document.getElementById('location-display').classList.remove('loading');
+                } else {
+                    throw new Error();
+                }
+            } catch (err) {
+                document.getElementById('location-display').innerText = "Unknown Location";
+            }
+        }
+        loadLocation();
+    </script>
+
     <script src="{{ url_for('static', filename='script.js') }}"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
     integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"