naman_panwar_gnpl/Gyannetra_website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Major mobile navigation system implementation

Browse Source 
- Added comprehensive mobile navigation system with hamburger menu
- Created new mobile nav files: gn-mobile-nav.css and gn-mobile-nav.js
- Integrated mobile navigation across all 25+ HTML pages
- Updated all Services and Industries pages with mobile nav
- Enhanced responsive design and mobile-first approach
- Added FOUC prevention and improved loading experience
- Updated theme colors and styling consistency
- Added comprehensive documentation (MOBILE_NAV_README.md)
- Fixed relative paths for subdirectory pages
- Improved accessibility features for mobile navigation
This commit is contained in:
ectasy663
2025-06-06 01:07:36 +05:30
parent 274c5c30f2
commit 885bacdf4a
25 changed files with 4384 additions and 616 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
Services/data-analysis.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
@@ -24,8 +24,7 @@
overflow-x: hidden;
line-height: 1.6;
}
/* Critical layout styles to prevent shifts */
/* Critical layout styles to prevent shifts */
.site-header {
background: rgba(15, 15, 30, 0.95);
backdrop-filter: blur(20px);
@@ -57,11 +56,44 @@
padding: 0 2rem;
}
/* Preloader styles */
#page-preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #0a0a1a;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.5s ease;
}
.loader-text {
color: #52eef5;
font-size: 1.5rem;
font-family: var(--font-mono);
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
body.loaded {
opacity: 1;
visibility: visible;
}
body.loaded #page-preloader {
opacity: 0;
pointer-events: none;
display: none;
}
html.loaded {
visibility: visible;
}
@@ -75,20 +107,26 @@
<!-- Preload secondary resources -->
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"></noscript>
<!-- Load fonts synchronously for immediate rendering -->
<!-- Load fonts synchronously for immediate rendering -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- GN Mobile Navigation Styles -->
<link rel="stylesheet" href="../css/gn-mobile-nav.css">
<!-- Optimized Page Loading Script -->
<script>
// Immediate page stabilization
(function() {
'use strict';
// Fast loading detection
// Fast loading detection
function showPage() {
document.documentElement.classList.add('loaded');
document.body.classList.add('loaded');
// Hide preloader immediately
const preloader = document.getElementById('page-preloader');
if (preloader) {
preloader.style.display = 'none';
}
}
// Show page as soon as possible
@@ -104,6 +142,11 @@
</script>
</head>
<body class="gn-mobile-no-overflow">
<!-- Preloader -->
<div id="page-preloader">
<div class="loader-text">Loading Service...</div>
</div>
<div class="atmospheric-bg">
<div class="light-effect-top"></div>
<div class="light-effect-bottom"></div>
@@ -115,14 +158,13 @@
<header class="site-header">
<nav class="navbar">
<a href="../index.html" class="logo">
<img src="../assets/Company Icons/GN logo with banner.svg" alt="Gyannetra Logo" class="logo-img" class="gn-responsive-image">
</a>
<img src="../assets/Company Icons/GN logo with banner.svg" alt="Gyannetra Logo" class="logo-img" class="gn-responsive-image"> </a>
<!-- Hamburger menu button for mobile -->
<button class="hamburger-menu" aria-label="Toggle menu" onclick="toggleMobileMenu(event)">
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
<!-- GN Mobile Hamburger Menu Button -->
<button class="gn-mobile-hamburger__button" aria-label="Toggle mobile menu" type="button">
<span class="gn-mobile-hamburger__line"></span>
<span class="gn-mobile-hamburger__line"></span>
<span class="gn-mobile-hamburger__line"></span>
</button>
<ul class="nav-links">
@@ -338,51 +380,76 @@
</div>
<div class="footer-bottom">
<p>&copy; 2025 Gyannetra. All rights reserved. | <a href="../privacy-policy.html">Privacy Policy</a> | <a href="../terms-of-service.html">Terms and Conditions</a></p>
</div> </div> </footer>
<!-- GN Mobile Navigation Overlay -->
<div class="gn-mobile-nav__overlay">
<div class="gn-mobile-nav__container">
<div class="gn-mobile-nav__header">
<img src="../assets/Company Icons/GN logo with banner.svg" alt="Gyannetra Logo" class="gn-mobile-nav__logo">
<button class="gn-mobile-nav__close" aria-label="Close mobile menu" type="button">
<span class="gn-mobile-nav__close-line"></span>
<span class="gn-mobile-nav__close-line"></span>
</button>
</div>
</div> </footer>
<nav class="gn-mobile-nav__menu">
<ul class="gn-mobile-nav__list">
<li class="gn-mobile-nav__item gn-mobile-nav__item--dropdown">
<button class="gn-mobile-nav__link gn-mobile-nav__dropdown-toggle" type="button">
Services
<span class="gn-mobile-nav__arrow">▾</span>
</button>
<ul class="gn-mobile-nav__submenu">
<li><a href="machine-learning.html" class="gn-mobile-nav__sublink">Machine Learning</a></li>
<li><a href="data-analysis.html" class="gn-mobile-nav__sublink">Data Analytics</a></li>
<li><a href="generative-ai.html" class="gn-mobile-nav__sublink">Generative AI</a></li>
<li><a href="agentic-ai.html" class="gn-mobile-nav__sublink">Agentic AI</a></li>
<li><a href="automation-flows.html" class="gn-mobile-nav__sublink">Automation Flows</a></li>
</ul>
</li>
<li class="gn-mobile-nav__item gn-mobile-nav__item--dropdown">
<button class="gn-mobile-nav__link gn-mobile-nav__dropdown-toggle" type="button">
Industries
<span class="gn-mobile-nav__arrow">▾</span>
</button>
<ul class="gn-mobile-nav__submenu">
<li><a href="../Industries/finance.html" class="gn-mobile-nav__sublink">Finance</a></li>
<li><a href="../Industries/healthcare.html" class="gn-mobile-nav__sublink">Healthcare</a></li>
<li><a href="../Industries/manufacturing.html" class="gn-mobile-nav__sublink">Manufacturing</a></li>
<li><a href="../Industries/marketing.html" class="gn-mobile-nav__sublink">Marketing</a></li>
<li><a href="../Industries/media-entertainment.html" class="gn-mobile-nav__sublink">Media & Entertainment</a></li>
<li><a href="../Industries/travel.html" class="gn-mobile-nav__sublink">Travel</a></li>
<li><a href="../Industries/retail.html" class="gn-mobile-nav__sublink">Retail</a></li>
<li><a href="../Industries/case-studies.html" class="gn-mobile-nav__sublink">Case Studies</a></li>
</ul>
</li>
<li class="gn-mobile-nav__item gn-mobile-nav__item--dropdown">
<button class="gn-mobile-nav__link gn-mobile-nav__dropdown-toggle" type="button">
Education
<span class="gn-mobile-nav__arrow">▾</span>
</button>
<ul class="gn-mobile-nav__submenu">
<li><a href="../Education/workshops.html" class="gn-mobile-nav__sublink">Workshops</a></li>
<li><a href="../Education/individual-trainings.html" class="gn-mobile-nav__sublink">Individual Trainings</a></li>
<li><a href="../Education/corporate-trainings.html" class="gn-mobile-nav__sublink">Corporate Trainings</a></li>
</ul>
</li>
<li class="gn-mobile-nav__item">
<a href="../about.html" class="gn-mobile-nav__link">About Us</a>
</li>
<li class="gn-mobile-nav__item">
<a href="../contact.html" class="gn-mobile-nav__link">Contact Us</a>
</li>
</ul>
</nav>
</div>
</div>
<script src="../js/main.js" defer></script>
<script src="../js/menu-dropdown.js" defer></script>
<script src="../js/tech-marquee.js" defer></script>
</html>
<script>
document.addEventListener('DOMContentLoaded', function() {
const header = document.querySelector('.site-header');
function handleScroll() {
const currentScrollY = window.scrollY;
if (currentScrollY > 30) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
}
// Throttle scroll events for better performance
let ticking = false;
function onScroll() {
if (!ticking) {
requestAnimationFrame(function() {
handleScroll();
ticking = false;
});
ticking = true;
}
}
window.addEventListener('scroll', onScroll, { passive: true });
// Initial check
handleScroll();
});
</script>
<script src="../js/mobile-enhancements.js" defer></script>
<!-- GN Mobile Navigation Script -->
<script src="../js/gn-mobile-nav.js" defer></script>
</body>
</html>
</html>