From 125234f3e9e2593fa0a416774a700e0f5fb2c51d Mon Sep 17 00:00:00 2001 From: HikeMap User Date: Wed, 31 Dec 2025 22:40:40 -0600 Subject: [PATCH] Redesign admin panel as half-height bottom sheet overlay MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- index.html | 188 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 187 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 7c58d5f..6279338 100644 --- a/index.html +++ b/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 @@ } + + +
+
+

⚙️ Admin Settings

+ +
+
+
+
Geocache Settings
+
+
+
+ +
+ + meters +
+
+
+ +
+ + meters +
+
+
+ + +
+
+
+ +
+
Navigation Settings
+
+
+ + + meters +
+
+ + + meters +
+
+ + + meters +
+
+ + + meters +
+
+
+ +
+
Performance Settings
+
+
+ + + ms +
+
+ + + ms +
+
+
+ +
+
Push Notifications
+
+
+ Status: Not configured +
+ + + +
+
+ +
+
+ + + +
+
+
+
+
+