Hugging Face's logo

Spaces:
jsonet
/
metatrader-master-hub
Running

App Files Community
jsonet commited on
Commit
f630c72
·
verified ·
1 Parent(s): 8ae810a

Implementa el menu superior totalmente responsiva y hazlo desplegable con una pestaña que lo abra y que se pueda mantener cerrado cuando no se necesita usar para dar maxima responsividad a toda la interfaz

Browse files
Files changed (1) hide show
  1. index.html +62 -36
index.html CHANGED
@@ -108,15 +108,16 @@
108
  <body class="bg-secondary-900 text-secondary-100 min-h-screen overflow-x-hidden">
109
  <!-- Navigation -->
110
  <nav class="fixed top-0 w-full bg-secondary-800/90 glass border-b border-secondary-700 z-50">
111
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
112
  <div class="flex items-center justify-between h-16">
113
  <div class="flex items-center space-x-4">
114
  <div class="flex-shrink-0">
115
  <h1 class="text-xl font-bold text-primary-400">MT5 Master Hub</h1>
116
  </div>
117
- <div class="hidden md:block">
118
- <div class="ml-10 flex items-baseline space-x-4">
119
- <a href="#" onclick="showPage('dashboard')" class="nav-link px-3 py-2 rounded-md text-sm font-medium bg-primary-500 text-white" data-page="dashboard">
 
120
  <i data-feather="home" class="inline w-4 h-4 mr-2"></i>Dashboard
121
  </a>
122
  <a href="#" onclick="showPage('position-calculator')" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-secondary-200 hover:bg-secondary-700" data-page="position-calculator">
@@ -131,42 +132,48 @@
131
  <a href="#" onclick="showPage('ea-monitor')" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-secondary-200 hover:bg-secondary-700" data-page="ea-monitor">
132
  <i data-feather="cpu" class="inline w-4 h-4 mr-2"></i>EA Monitor
133
  </a>
134
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
135
  </div>
136
  </div>
137
- <div class="flex items-center space-x-4">
138
- <button class="p-2 rounded-md text-secondary-200 hover:text-white hover:bg-secondary-700">
139
- <i data-feather="bell" class="w-5 h-5"></i>
140
- </button>
141
- <button class="p-2 rounded-md text-secondary-200 hover:text-white hover:bg-secondary-700">
142
- <i data-feather="settings" class="w-5 h-5"></i>
143
- </button>
144
- </div>
145
  </div>
146
- </div>
147
- <!-- Mobile menu -->
148
- <div class="md:hidden">
149
- <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
150
- <a href="#" onclick="showPage('dashboard')" class="nav-link block px-3 py-2 rounded-md text-base font-medium text-secondary-200 hover:bg-secondary-700" data-page="dashboard">
151
- <i data-feather="home" class="inline w-4 h-4 mr-2"></i>Dashboard
152
- </a>
153
- <a href="#" onclick="showPage('position-calculator')" class="nav-link block px-3 py-2 rounded-md text-base font-medium text-secondary-200 hover:bg-secondary-700" data-page="position-calculator">
154
- <i data-feather="calculator" class="inline w-4 h-4 mr-2"></i>Position Calculator
155
- </a>
156
- <a href="#" onclick="showPage('trade-planner')" class="nav-link block px-3 py-2 rounded-md text-base font-medium text-secondary-200 hover:bg-secondary-700" data-page="trade-planner">
157
- <i data-feather="map" class="inline w-4 h-4 mr-2"></i>Trade Planner
158
- </a>
159
- <a href="#" onclick="showPage('protection-tools')" class="nav-link block px-3 py-2 rounded-md text-base font-medium text-secondary-200 hover:bg-secondary-700" data-page="protection-tools">
160
- <i data-feather="shield" class="inline w-4 h-4 mr-2"></i>Protection Tools
161
- </a>
162
- <a href="#" onclick="showPage('ea-monitor')" class="nav-link block px-3 py-2 rounded-md text-base font-medium text-secondary-200 hover:bg-secondary-700" data-page="ea-monitor">
163
- <i data-feather="cpu" class="inline w-4 h-4 mr-2"></i>EA Monitor
164
- </a>
165
  </div>
166
  </div>
167
- </nav>
168
-
169
- <!-- Main Content -->
170
  <main class="pt-16 pb-8">
171
  <!-- Dashboard Page -->
172
  <div id="dashboard-page" class="page-container fade-in">
@@ -961,6 +968,25 @@ tension: 0.4
961
 
962
  // Initialize feather icons
963
  feather.replace();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
964
 
965
  // Add slide animation to navigation
966
  anime({
@@ -980,7 +1006,7 @@ tension: 0.4
980
  duration: 800,
981
  easing: 'easeOutExpo'
982
  });
983
- });
984
 
985
  // Real-time updates simulation
986
  setInterval(() => {
 
108
  <body class="bg-secondary-900 text-secondary-100 min-h-screen overflow-x-hidden">
109
  <!-- Navigation -->
110
  <nav class="fixed top-0 w-full bg-secondary-800/90 glass border-b border-secondary-700 z-50">
111
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
112
  <div class="flex items-center justify-between h-16">
113
  <div class="flex items-center space-x-4">
114
  <div class="flex-shrink-0">
115
  <h1 class="text-xl font-bold text-primary-400">MT5 Master Hub</h1>
116
  </div>
117
+ <!-- Desktop Navigation -->
118
+ <div class="hidden md:block">
119
+ <div class="ml-10 flex items-baseline space-x-4">
120
+ <a href="#" onclick="showPage('dashboard')" class="nav-link px-3 py-2 rounded-md text-sm font-medium bg-primary-500 text-white" data-page="dashboard">
121
  <i data-feather="home" class="inline w-4 h-4 mr-2"></i>Dashboard
122
  </a>
123
  <a href="#" onclick="showPage('position-calculator')" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-secondary-200 hover:bg-secondary-700" data-page="position-calculator">
 
132
  <a href="#" onclick="showPage('ea-monitor')" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-secondary-200 hover:bg-secondary-700" data-page="ea-monitor">
133
  <i data-feather="cpu" class="inline w-4 h-4 mr-2"></i>EA Monitor
134
  </a>
135
+ </div>
136
+ </div>
137
+ <!-- Right side icons -->
138
+ <div class="flex items-center space-x-4">
139
+ <button class="p-2 rounded-md text-secondary-200 hover:text-white hover:bg-secondary-700">
140
+ <i data-feather="bell" class="w-5 h-5"></i>
141
+ </button>
142
+ <button class="p-2 rounded-md text-secondary-200 hover:text-white hover:bg-secondary-700">
143
+ <i data-feather="settings" class="w-5 h-5"></i>
144
+ </button>
145
+ <!-- Mobile menu button -->
146
+ <div class="md:hidden">
147
+ <button id="mobile-menu-button" class="p-2 rounded-md text-secondary-200 hover:text-white hover:bg-secondary-700">
148
+ <i data-feather="menu" class="w-5 h-5"></i>
149
+ </button>
150
+ </div>
151
  </div>
152
  </div>
 
 
 
 
 
 
 
 
153
  </div>
154
+ <!-- Mobile menu (hidden by default) -->
155
+ <div id="mobile-menu" class="md:hidden hidden">
156
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
157
+ <a href="#" onclick="showPage('dashboard'); closeMobileMenu();" class="nav-link block px-3 py-2 rounded-md text-base font-medium text-secondary-200 hover:bg-secondary-700" data-page="dashboard">
158
+ <i data-feather="home" class="inline w-4 h-4 mr-2"></i>Dashboard
159
+ </a>
160
+ <a href="#" onclick="showPage('position-calculator'); closeMobileMenu();" class="nav-link block px-3 py-2 rounded-md text-base font-medium text-secondary-200 hover:bg-secondary-700" data-page="position-calculator">
161
+ <i data-feather="calculator" class="inline w-4 h-4 mr-2"></i>Position Calculator
162
+ </a>
163
+ <a href="#" onclick="showPage('trade-planner'); closeMobileMenu();" class="nav-link block px-3 py-2 rounded-md text-base font-medium text-secondary-200 hover:bg-secondary-700" data-page="trade-planner">
164
+ <i data-feather="map" class="inline w-4 h-4 mr-2"></i>Trade Planner
165
+ </a>
166
+ <a href="#" onclick="showPage('protection-tools'); closeMobileMenu();" class="nav-link block px-3 py-2 rounded-md text-base font-medium text-secondary-200 hover:bg-secondary-700" data-page="protection-tools">
167
+ <i data-feather="shield" class="inline w-4 h-4 mr-2"></i>Protection Tools
168
+ </a>
169
+ <a href="#" onclick="showPage('ea-monitor'); closeMobileMenu();" class="nav-link block px-3 py-2 rounded-md text-base font-medium text-secondary-200 hover:bg-secondary-700" data-page="ea-monitor">
170
+ <i data-feather="cpu" class="inline w-4 h-4 mr-2"></i>EA Monitor
171
+ </a>
172
+ </div>
173
  </div>
174
  </div>
175
+ </nav>
176
+ <!-- Main Content -->
 
177
  <main class="pt-16 pb-8">
178
  <!-- Dashboard Page -->
179
  <div id="dashboard-page" class="page-container fade-in">
 
968
 
969
  // Initialize feather icons
970
  feather.replace();
971
+ // Initialize mobile menu button
972
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
973
+ if (mobileMenuButton) {
974
+ mobileMenuButton.addEventListener('click', toggleMobileMenu);
975
+ }
976
+
977
+ // Close mobile menu when clicking outside
978
+ document.addEventListener('click', function(event) {
979
+ const mobileMenu = document.getElementById('mobile-menu');
980
+ const menuButton = document.getElementById('mobile-menu-button');
981
+
982
+ if (mobileMenu && menuButton) {
983
+ const isClickInsideMenu = mobileMenu.contains(event.target);
984
+ const isClickOnButton = menuButton.contains(event.target);
985
+
986
+ if (!isClickInsideMenu && !isClickOnButton && !mobileMenu.classList.contains('hidden')) {
987
+ closeMobileMenu();
988
+ }
989
+ }
990
 
991
  // Add slide animation to navigation
992
  anime({
 
1006
  duration: 800,
1007
  easing: 'easeOutExpo'
1008
  });
1009
+ });
1010
 
1011
  // Real-time updates simulation
1012
  setInterval(() => {