Redesign admin panel as half-height bottom sheet overlay

- Replaced admin tab content with modern bottom sheet overlay (50vh)
- Added smooth slide-up animation from bottom
- Included backdrop blur effect for better visual hierarchy
- Added close button with proper event handling
- Maintains authentication check before showing panel
- Better mobile-friendly design with improved touch targets

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

index.html

@@ -691,6 +691,69 @@
             z-index: 998;
         }
 
+        /* Admin Panel Overlay - Half-Height Bottom Sheet */
+        .admin-panel-overlay {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 50vh;
+            background: rgba(30, 30, 30, 0.95);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            transform: translateY(100%);
+            transition: transform 0.3s ease;
+            z-index: 1002;
+            border-radius: 20px 20px 0 0;
+            box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
+            display: flex;
+            flex-direction: column;
+        }
+
+        .admin-panel-overlay.active {
+            transform: translateY(0);
+        }
+
+        .admin-panel-header {
+            padding: 20px;
+            border-bottom: 1px solid #444;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-shrink: 0;
+        }
+
+        .admin-panel-header h2 {
+            color: #FFA726;
+            margin: 0;
+            font-size: 20px;
+        }
+
+        .admin-panel-close {
+            background: none;
+            border: none;
+            color: #aaa;
+            font-size: 28px;
+            cursor: pointer;
+            padding: 0;
+            width: 32px;
+            height: 32px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .admin-panel-close:hover {
+            color: white;
+        }
+
+        .admin-panel-content {
+            padding: 20px;
+            overflow-y: auto;
+            flex: 1;
+            -webkit-overflow-scrolling: touch;
+        }
+
         /* Admin Panel Styles - Simple and Working */
         .admin-setting-group {
             padding: 15px;
@@ -3761,8 +3824,12 @@
                     return;
                 }
 
+                // Show admin overlay instead of tab content
                 adminTab.classList.add('active');
-                adminContent.classList.add('active');
+                const adminOverlay = document.querySelector('.admin-panel-overlay');
+                if (adminOverlay) {
+                    adminOverlay.classList.add('active');
+                }
                 navMode = false;
 
                 // In admin mode, disable auto-center
@@ -5836,6 +5903,21 @@
         document.getElementById('navTab').addEventListener('click', () => switchTab('navigate'));
         document.getElementById('adminTab').addEventListener('click', () => switchTab('admin'));
 
+        // Admin overlay close button
+        const adminCloseBtn = document.querySelector('.admin-panel-overlay .close-btn');
+        if (adminCloseBtn) {
+            adminCloseBtn.addEventListener('click', () => {
+                const adminOverlay = document.querySelector('.admin-panel-overlay');
+                if (adminOverlay) {
+                    adminOverlay.classList.remove('active');
+                }
+                // Remove active class from admin tab
+                document.getElementById('adminTab').classList.remove('active');
+                // Switch back to edit tab
+                switchTab('edit');
+            });
+        }
+
         // Password dialog
         document.getElementById('passwordSubmit').addEventListener('click', checkPassword);
         document.getElementById('passwordCancel').addEventListener('click', hidePasswordDialog);
@@ -6245,5 +6327,109 @@
         }
 
     </script>
+
+    <!-- Admin Panel Overlay -->
+    <div class="admin-panel-overlay" id="adminOverlay">
+        <div class="admin-panel-header">
+            <h2>⚙️ Admin Settings</h2>
+            <button class="admin-panel-close" id="adminCloseBtn">×</button>
+        </div>
+        <div class="admin-panel-content" id="adminContent">
+            <div class="section collapsible" data-section="geocache">
+                <div class="section-title">Geocache Settings</div>
+                <div class="section-content">
+                    <div class="admin-setting-group">
+                        <div class="admin-input-row">
+                            <label for="geocacheRange">Interaction Range:</label>
+                            <div class="admin-input-container">
+                                <input type="number" id="geocacheRange" min="1" max="50" value="5">
+                                <span class="unit">meters</span>
+                            </div>
+                        </div>
+                        <div class="admin-input-row">
+                            <label for="geocacheAlertRange">Alert Distance:</label>
+                            <div class="admin-input-container">
+                                <input type="number" id="geocacheAlertRange" min="1" max="50" value="5">
+                                <span class="unit">meters</span>
+                            </div>
+                        </div>
+                        <div class="admin-checkbox-row">
+                            <input type="checkbox" id="geocacheSoundEnabled" checked>
+                            <label for="geocacheSoundEnabled">Enable alert sound</label>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="section">
+                    <div class="section-title">Navigation Settings</div>
+                    <div class="admin-setting-group">
+                        <div class="admin-input-row">
+                            <label>Track Proximity:</label>
+                            <input type="number" id="trackProximity" min="10" max="200" value="50">
+                            <span class="unit">meters</span>
+                        </div>
+                        <div class="admin-input-row">
+                            <label>Intersection Threshold:</label>
+                            <input type="number" id="intersectionThreshold" min="5" max="30" value="15">
+                            <span class="unit">meters</span>
+                        </div>
+                        <div class="admin-input-row">
+                            <label>On-Trail Threshold:</label>
+                            <input type="number" id="onTrailThreshold" min="20" max="200" value="100">
+                            <span class="unit">meters</span>
+                        </div>
+                        <div class="admin-input-row">
+                            <label>Node Spacing:</label>
+                            <input type="number" id="nodeSpacing" min="10" max="100" value="50">
+                            <span class="unit">meters</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="section">
+                    <div class="section-title">Performance Settings</div>
+                    <div class="admin-setting-group">
+                        <div class="admin-input-row">
+                            <label>GPS Poll Interval:</label>
+                            <input type="number" id="gpsPollInterval" min="1000" max="10000" value="3000" step="500">
+                            <span class="unit">ms</span>
+                        </div>
+                        <div class="admin-input-row">
+                            <label>Proximity Check Interval:</label>
+                            <input type="number" id="proximityCheckInterval" min="1000" max="10000" value="3000" step="500">
+                            <span class="unit">ms</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="section">
+                    <div class="section-title">Push Notifications</div>
+                    <div class="admin-setting-group">
+                        <div id="notificationStatus" style="margin-bottom: 10px; color: #666;">
+                            Status: <span id="notificationStatusText">Not configured</span>
+                        </div>
+                        <button class="action-btn" id="enableNotifications" onclick="setupPushNotifications()">
+                            Enable Push Notifications
+                        </button>
+                        <button class="action-btn secondary" id="disableNotifications" onclick="disablePushNotifications()" style="display:none;">
+                            Disable Notifications
+                        </button>
+                        <button class="action-btn" id="testNotification" onclick="sendTestNotification()" style="display:none; margin-top: 10px; background: #9c27b0;">
+                            📨 Send Test Notification to All Users
+                        </button>
+                    </div>
+                </div>
+
+                <div class="section">
+                    <div class="admin-button-group">
+                        <button class="action-btn" onclick="resetAdminSettings()">Reset to Defaults</button>
+                        <button class="action-btn" onclick="exportAdminSettings()">Export Settings</button>
+                        <button class="action-btn" onclick="importAdminSettings()">Import Settings</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
 </body>
 </html>