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

191
Services/machine-learning.html
View File

@@ -1,10 +1,8 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Machine Learning - Gyannetra</title>
<!-- CRITICAL CSS - Prevent FOUC -->
<style>
/* Immediate FOUC prevention */
@@ -57,28 +55,57 @@
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.3s ease;
}
.loader-text {
color: #52eef5;
font-size: 1.5rem;
font-family: 'Inter', sans-serif;
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;
}
html.loaded {
visibility: visible;
}
</style>
<!-- CRITICAL: Load main CSS synchronously to prevent FOUC --> <!-- Consolidated CSS files for optimal performance -->
</style> <!-- Consolidated CSS files for optimal performance -->
<link rel="stylesheet" href="../css/core.css">
<link rel="stylesheet" href="../css/components.css">
<link rel="stylesheet" href="../css/pages.css">
<link rel="stylesheet" href="../css/responsive.css">
<!-- Preload secondary resources -->
<link rel="stylesheet" href="../css/responsive.css"> <!-- 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 -->
<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">
<link rel="stylesheet" href="../css/gn-mobile-nav.css">
<!-- Optimized Page Loading Script -->
<script>
// Immediate page stabilization
@@ -89,6 +116,12 @@
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
@@ -97,13 +130,17 @@
} else {
showPage();
}
// Fallback timeout
// Fallback timeout
setTimeout(showPage, 50);
})();
</script>
</head>
<body class="gn-mobile-no-overflow">
<!-- Page 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>
@@ -112,19 +149,18 @@
<div class="overlay"></div>
<div class="noise"></div>
</div>
<!-- NAVBAR -->
<header class="site-header">
<nav class="navbar">
<a href="../index.html" class="logo">
<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>
<!-- 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>
</button>
<ul class="nav-links">
<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">
<li class="dropdown"><a href="#" class="nav-link">Services ▾</a> <ul class="dropdown-menu services-dropdown">
<li><a href="machine-learning.html"><div class="dropdown-item-content"><img src="../assets/mlng.png" alt="Machine Learning Icon" class="dropdown-icon" class="gn-responsive-image"><div class="text-content"><span class="item-title">Machine Learning</span><span class="item-description">We build intelligent systems that learn from data to predict outcomes and automate decisions.</span></div></div></a></li>
<li><a href="data-analysis.html"><div class="dropdown-item-content"><img src="../assets/data analytics.png" alt="Data Analysis Icon" class="dropdown-icon" class="gn-responsive-image"><div class="text-content"><span class="item-title">Data Analytics</span><span class="item-description">We transform raw data into actionable insights, helping you understand trends and optimize performance.</span></div></div></a></li>
@@ -296,13 +332,13 @@
<!-- FOOTER -->
<footer class="site-footer">
<div class="container gn-responsive-container">
<div class="footer-content"> <div class="footer-col footer-col-logo">
<div class="footer-content">
<div class="footer-col footer-col-logo">
<a href="../index.html" class="logo">
<img src="../assets/Company Icons/company logo square.svg" alt="Gyannetra Logo" class="footer-logo-img" class="gn-responsive-image">
</a>
<img src="../assets/Company Icons/company logo square.svg" alt="Gyannetra Logo" class="footer-logo-img gn-responsive-image">
</a>
<p>Empowering businesses with intelligent AI solutions to drive innovation, efficiency, and growth in a data-centric world.</p>
</div>
<div class="footer-col">
</div> <div class="footer-col">
<h3>Quick Links</h3>
<ul>
<li><a href="../index.html">Home</a></li>
@@ -313,17 +349,18 @@
<li><a href="automation-flows.html">Automation Flows</a></li>
<li><a href="../about.html">About Us</a></li>
<li><a href="../contact.html">Contact Us</a></li>
</ul> </div>
</ul>
</div>
<div class="footer-col">
<h3>Follow Us</h3>
<p>Stay updated with our latest insights and news.</p> <div class="social-links">
<p>Stay updated with our latest insights and news.</p>
<div class="social-links">
<a href="mailto:info@gyannetra.com" aria-label="Email"><i class="fas fa-envelope"></i></a>
<a href="https://wa.me/918949135299" aria-label="WhatsApp" target="_blank"><i class="fab fa-whatsapp"></i></a>
<a href="https://www.linkedin.com/company/gyannetra-pvt-ltd/" aria-label="LinkedIn" target="_blank"><i class="fab fa-linkedin-in"></i></a>
<a href="https://www.youtube.com/@Gyannetra-o3y" aria-label="YouTube" target="_blank"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="footer-col">
<h3>Contact Us</h3>
<ul>
@@ -336,9 +373,81 @@
<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> <script src="../js/main.js" defer></script>
</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>
<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">Webinars</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>
<script src="../js/mobile-enhancements.js" defer></script>
<!-- GN Mobile Navigation Script -->
<script src="../js/gn-mobile-nav.js" defer></script>
</body>
</html>
@@ -346,3 +455,25 @@