From f6fd1a769a241b3688c3dbdadead8b52aff5871f Mon Sep 17 00:00:00 2001 From: Amit Rana Date: Mon, 6 Apr 2026 13:40:43 +0530 Subject: [PATCH] headerfix --- css/style.css | 97 ----------- digital-branding.html | 20 +-- header.js | 257 +++++++++++------------------ index.html | 20 +-- js/script.js | 371 ------------------------------------------ 5 files changed, 103 insertions(+), 662 deletions(-) diff --git a/css/style.css b/css/style.css index bc064d6..5bf021b 100644 --- a/css/style.css +++ b/css/style.css @@ -146,103 +146,6 @@ body { font-variant-ligatures: common-ligatures contextual; } -/* ================================================================ - HEADER COMPONENT - ================================================================ */ - -.hdr { - background: var(--header-bg); - border-bottom: 1px solid var(--header-border); - box-shadow: var(--header-shadow); - position: sticky; - top: 0; - z-index: var(--z-fixed); -} - -.hdr-inner { - max-width: 1200px; - margin: 0 auto; - padding: 14px 24px; - display: flex; - align-items: center; - justify-content: space-between; -} - -.hdr-logo img { - height: var(--logo-height); - width: auto; - display: block; -} - -.hdr-nav { - display: flex; - align-items: center; - gap: 4px; -} - -.hdr-nav a { - color: var(--nav-text); - font-size: 15px; - font-weight: var(--font-medium); - padding: 8px 14px; - border-radius: 6px; - text-decoration: none; - white-space: nowrap; - transition: color .15s, background .15s; -} - -.hdr-nav a:hover { - color: var(--nav-text-hover); - background: rgba(59, 130, 246, 0.05); -} - -.hdr-nav a.active { - color: var(--nav-text-active); - background: rgba(59, 130, 246, 0.08); - font-weight: 600; -} - -.hdr-nav a:focus-visible { - outline: 2px solid var(--nav-text-hover); - outline-offset: 2px; -} - -.hdr-burger { - display: none; - align-items: center; - justify-content: center; - background: none; - border: none; - cursor: pointer; - padding: 8px; - border-radius: 6px; - color: var(--nav-text); - transition: background .15s; -} - -.hdr-burger:hover { background: rgba(59, 130, 246, 0.05); } - -@media (max-width: 768px) { - .hdr-burger { display: flex; } - .hdr-inner { position: relative; } - .hdr-logo img { height: var(--logo-height-mobile); } - .hdr-nav { - display: none; - position: absolute; - top: 100%; - left: 0; - right: 0; - background: var(--header-bg); - border-top: 1px solid var(--header-border); - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); - flex-direction: column; - align-items: stretch; - padding: 12px 16px; - gap: 2px; - } - .hdr-nav.open { display: flex; } - .hdr-nav a { padding: 10px 14px; } -} /* ================================================================ HERO SECTIONS diff --git a/digital-branding.html b/digital-branding.html index e1da588..86846c0 100644 --- a/digital-branding.html +++ b/digital-branding.html @@ -57,24 +57,8 @@ - -
-
- - - -
-
+ +
diff --git a/header.js b/header.js index 9cdff2b..fe9c10e 100644 --- a/header.js +++ b/header.js @@ -10,177 +10,121 @@ if (document.getElementById('sh-header')) return; // ─── Config: update nav links here ────────────────────────────── + var LOGO_URL = 'https://quantumtaskai.com/img/logo.png'; + var HOME_URL = 'https://quantumtaskai.com'; + var NAV_LINKS = [ - { label: 'Home', url: 'https://quantumtaskai.com' }, + { label: 'Home', url: 'https://quantumtaskai.com' }, { label: 'AI Digital Branding', url: 'https://quantumtaskai.com/digital-branding.html' }, - { label: 'Blog', url: 'https://blog.quantumtaskai.com/' }, + { label: 'Blog', url: 'https://blog.quantumtaskai.com/' }, ]; - // ─── Styles ────────────────────────────────────────────────────── + // ─── Styles (matches static site css/style.css header) ────────── var css = ` - :root { - --sh-bg: #0a0e1a; - --sh-accent: #3b82f6; - --sh-text: #ffffff; - } - #sh-header { + background: #ffffff; + border-bottom: 1px solid #e5e7eb; + box-shadow: 0 1px 3px rgba(0,0,0,0.1); position: sticky; top: 0; - left: 0; - width: 100%; - height: 64px; - background: var(--sh-bg); - z-index: 99999; + z-index: 1030; box-sizing: border-box; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + font-family: 'Inter', Arial, sans-serif; } .sh-inner { max-width: 1200px; margin: 0 auto; - height: 100%; - padding: 0 24px; + padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; } - .sh-logo { - font-size: 1.2rem; - font-weight: 700; - color: var(--sh-accent); - text-decoration: none; - letter-spacing: 0.02em; - white-space: nowrap; - } - - .sh-logo:hover { - color: var(--sh-accent); - opacity: 0.85; + .sh-logo img { + height: 60px; + width: auto; + display: block; } .sh-nav { display: flex; align-items: center; - gap: 8px; + gap: 4px; list-style: none; margin: 0; padding: 0; } .sh-nav a { - color: var(--sh-text); - text-decoration: none; - font-size: 0.92rem; + color: #6b7280; + font-size: 15px; font-weight: 500; - padding: 6px 12px; + padding: 8px 14px; border-radius: 6px; - transition: background 0.18s, color 0.18s; + text-decoration: none; white-space: nowrap; + transition: color .15s, background .15s; } .sh-nav a:hover { - background: rgba(59, 130, 246, 0.15); - color: var(--sh-accent); + color: #3b82f6; + background: rgba(59,130,246,0.05); } .sh-nav a.sh-active { - color: var(--sh-accent); - background: rgba(59, 130, 246, 0.12); + color: #1d4ed8; + background: rgba(59,130,246,0.08); + font-weight: 600; + } + + .sh-nav a:focus-visible { + outline: 2px solid #3b82f6; + outline-offset: 2px; } /* ── Hamburger ── */ .sh-burger { display: none; - flex-direction: column; + align-items: center; justify-content: center; - gap: 5px; - width: 36px; - height: 36px; - cursor: pointer; background: none; border: none; - padding: 4px; + cursor: pointer; + padding: 8px; border-radius: 6px; - transition: background 0.18s; + color: #6b7280; + transition: background .15s; } - .sh-burger:hover { - background: rgba(255,255,255,0.08); - } - - .sh-burger span { - display: block; - width: 22px; - height: 2px; - background: var(--sh-text); - border-radius: 2px; - transition: transform 0.22s, opacity 0.22s; - } - - .sh-burger.sh-open span:nth-child(1) { - transform: translateY(7px) rotate(45deg); - } - .sh-burger.sh-open span:nth-child(2) { - opacity: 0; - } - .sh-burger.sh-open span:nth-child(3) { - transform: translateY(-7px) rotate(-45deg); - } + .sh-burger:hover { background: rgba(59,130,246,0.05); } /* ── Mobile menu ── */ - .sh-mobile-menu { - display: none; - position: absolute; - top: 64px; - left: 0; - width: 100%; - background: var(--sh-bg); - padding: 12px 0 20px; - border-top: 1px solid rgba(255,255,255,0.08); - box-shadow: 0 8px 24px rgba(0,0,0,0.4); - } - - .sh-mobile-menu.sh-open { - display: block; - } - - .sh-mobile-menu a { - display: block; - color: var(--sh-text); - text-decoration: none; - font-size: 0.98rem; - font-weight: 500; - padding: 12px 28px; - transition: background 0.15s, color 0.15s; - } - - .sh-mobile-menu a:hover { - background: rgba(59, 130, 246, 0.12); - color: var(--sh-accent); - } - - .sh-mobile-menu a.sh-active { - color: var(--sh-accent); - } - @media (max-width: 768px) { - #sh-header { - height: 56px; - } + .sh-burger { display: flex; } + + .sh-inner { position: relative; } + + .sh-logo img { height: 40px; } .sh-nav { display: none; + position: absolute; + top: 100%; + left: 0; + right: 0; + background: #ffffff; + border-top: 1px solid #e5e7eb; + box-shadow: 0 8px 20px rgba(0,0,0,0.12); + flex-direction: column; + align-items: stretch; + padding: 12px 16px; + gap: 2px; } - .sh-burger { - display: flex; - } + .sh-nav.sh-open { display: flex; } - .sh-mobile-menu { - top: 56px; - } + .sh-nav a { padding: 10px 14px; } } `; @@ -193,72 +137,69 @@ // ─── Detect active link ────────────────────────────────────────── var currentUrl = window.location.href; - function buildNavItems(isMobile) { + function isActive(url) { + if (url === HOME_URL) { + return currentUrl === url || currentUrl === url + '/' || currentUrl === url + '/index.html'; + } + return currentUrl.indexOf(url) === 0; + } + + function buildNavItems() { return NAV_LINKS.map(function (link) { - var isActive = currentUrl === link.url || - (link.url !== 'https://quantumtaskai.com' && currentUrl.indexOf(link.url) === 0); - var activeClass = isActive ? ' sh-active' : ''; - if (isMobile) { - return '' + link.label + ''; - } - return '
  • ' + link.label + '
    • '; + var cls = isActive(link.url) ? 'sh-active' : ''; + return '
  • ' + link.label + '
    • '; }).join(''); } // ─── Build HTML ────────────────────────────────────────────────── - var headerHTML = ` -
    -
    - - - -
    - -
    - `; + var headerHTML = + '
    ' + + '
    ' + + '' + + '' + + '' + + '
    ' + + '
    '; // ─── Inject header at top of body ─────────────────────────────── document.body.insertAdjacentHTML('afterbegin', headerHTML); // ─── Hamburger logic ───────────────────────────────────────────── var burger = document.getElementById('sh-burger'); - var mobileMenu = document.getElementById('sh-mobile-menu'); + var nav = document.getElementById('sh-nav'); - function openMenu() { - burger.classList.add('sh-open'); - mobileMenu.classList.add('sh-open'); - burger.setAttribute('aria-expanded', 'true'); - } - - function closeMenu() { - burger.classList.remove('sh-open'); - mobileMenu.classList.remove('sh-open'); - burger.setAttribute('aria-expanded', 'false'); - } - - burger.addEventListener('click', function (e) { - e.stopPropagation(); - mobileMenu.classList.contains('sh-open') ? closeMenu() : openMenu(); + burger.addEventListener('click', function () { + var open = nav.classList.toggle('sh-open'); + burger.setAttribute('aria-expanded', open); }); - // Close on outside click document.addEventListener('click', function (e) { if (!document.getElementById('sh-header').contains(e.target)) { - closeMenu(); + nav.classList.remove('sh-open'); + burger.setAttribute('aria-expanded', 'false'); } }); - // Close on ESC document.addEventListener('keydown', function (e) { - if (e.key === 'Escape') closeMenu(); + if (e.key === 'Escape') { + nav.classList.remove('sh-open'); + burger.setAttribute('aria-expanded', 'false'); + } + }); + + nav.querySelectorAll('a').forEach(function (a) { + a.addEventListener('click', function () { + nav.classList.remove('sh-open'); + burger.setAttribute('aria-expanded', 'false'); + }); }); console.log('Shared header loaded ✓'); diff --git a/index.html b/index.html index 872cfad..dcb5a35 100644 --- a/index.html +++ b/index.html @@ -63,24 +63,8 @@ - -
    -
    - - - -
    -
    + +
    diff --git a/js/script.js b/js/script.js index 6cbe382..c2c5c0c 100644 --- a/js/script.js +++ b/js/script.js @@ -2,32 +2,6 @@ Quantum Tasks AI - Static Website JavaScript ================================================================ */ -// Mobile navigation -(function() { - var btn = document.getElementById('hdr-burger'); - var nav = document.getElementById('hdr-nav'); - if (!btn || !nav) return; - - btn.addEventListener('click', function() { - var open = nav.classList.toggle('open'); - btn.setAttribute('aria-expanded', open); - }); - - document.addEventListener('click', function(e) { - if (!nav.contains(e.target) && !btn.contains(e.target)) { - nav.classList.remove('open'); - btn.setAttribute('aria-expanded', 'false'); - } - }); - - nav.querySelectorAll('a').forEach(function(a) { - a.addEventListener('click', function() { - nav.classList.remove('open'); - btn.setAttribute('aria-expanded', 'false'); - }); - }); -})(); - // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { @@ -560,349 +534,4 @@ const style = document.createElement('style'); style.textContent = rippleCSS; document.head.appendChild(style); -// ================================================================ -// BLOG FUNCTIONALITY -// ================================================================ -let blogData = null; -let filteredPosts = []; -let currentCategory = 'all'; -let searchQuery = ''; - -// Load blog data -async function loadBlogData() { - try { - // Check if we're on a blog post page (in /blog/ directory) - const isInBlogDirectory = window.location.pathname.includes('/blog/'); - const dataPath = isInBlogDirectory ? '../blog-data.json' : 'blog-data.json'; - - const response = await fetch(dataPath); - blogData = await response.json(); - return blogData; - } catch (error) { - console.error('Failed to load blog data:', error); - return null; - } -} - -// Load and display blog posts -async function loadBlogPosts() { - const loadingElement = document.getElementById('blogLoading'); - const gridElement = document.getElementById('blogGrid'); - const emptyElement = document.getElementById('blogEmpty'); - - if (!loadingElement || !gridElement) return; - - // Show skeleton loading state - loadingElement.innerHTML = ` -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    `; - loadingElement.style.display = 'block'; - gridElement.style.display = 'none'; - if (emptyElement) emptyElement.style.display = 'none'; - - // Load data if not already loaded - if (!blogData) { - blogData = await loadBlogData(); - if (!blogData) { - loadingElement.innerHTML = '

    Failed to load blog posts.

    '; - return; - } - } - - // Filter and display posts - filterAndDisplayPosts(); -} - -// Filter posts based on category and search -function filterAndDisplayPosts() { - if (!blogData) return; - - let posts = blogData.posts; - - // Filter by category - if (currentCategory !== 'all') { - posts = posts.filter(post => post.category === currentCategory); - } - - // Filter by search query - if (searchQuery) { - const query = searchQuery.toLowerCase(); - posts = posts.filter(post => - post.title.toLowerCase().includes(query) || - post.excerpt.toLowerCase().includes(query) || - post.tags.some(tag => tag.toLowerCase().includes(query)) || - post.content.toLowerCase().includes(query) - ); - } - - filteredPosts = posts; - displayBlogPosts(posts); -} - -// Display blog posts in minimal list format -function displayBlogPosts(posts) { - const loadingElement = document.getElementById('blogLoading'); - const gridElement = document.getElementById('blogGrid'); - const emptyElement = document.getElementById('blogEmpty'); - - if (!gridElement) return; - - // Hide loading - if (loadingElement) loadingElement.style.display = 'none'; - - if (posts.length === 0) { - gridElement.style.display = 'none'; - if (emptyElement) emptyElement.style.display = 'block'; - return; - } - - // Show grid and hide empty state - gridElement.style.display = 'block'; - if (emptyElement) emptyElement.style.display = 'none'; - - // Generate HTML for posts in minimal format - gridElement.innerHTML = posts.map((post, index) => { - const categoryInfo = blogData.categories[post.category] || { name: post.category }; - const isFeatured = post.featured && index < 2; - - return ` - - `; - }).join(''); -} - -// Format date for display -function formatDate(dateString) { - const options = { year: 'numeric', month: 'long', day: 'numeric' }; - return new Date(dateString).toLocaleDateString('en-US', options); -} - -// Filter by category -function filterCategory(category) { - currentCategory = category; - - // Update active category button - document.querySelectorAll('.category-link').forEach(btn => { - btn.classList.remove('active'); - }); - - event.target.classList.add('active'); - - // Filter and display posts - filterAndDisplayPosts(); -} - -// Search functionality -function searchBlog() { - const searchInput = document.getElementById('blogSearch'); - if (!searchInput) return; - - searchQuery = searchInput.value.trim(); - filterAndDisplayPosts(); -} - -// Setup search input listener -function setupBlogSearch() { - const searchInput = document.getElementById('blogSearch'); - if (!searchInput) return; - - // Live search with debounce (no separate button needed) - let searchTimeout; - searchInput.addEventListener('input', function() { - clearTimeout(searchTimeout); - searchTimeout = setTimeout(() => { - searchQuery = this.value.trim(); - filterAndDisplayPosts(); - }, 300); - }); -} - -// Newsletter form handler -function setupNewsletterForm() { - const forms = document.querySelectorAll('#newsletterForm'); - - forms.forEach(form => { - form.addEventListener('submit', function(e) { - e.preventDefault(); - - const emailInput = this.querySelector('input[type="email"]'); - const submitBtn = this.querySelector('button[type="submit"]'); - - if (!emailInput || !submitBtn) return; - - const email = emailInput.value.trim(); - - if (!email) { - alert('Please enter your email address.'); - return; - } - - // Simulate newsletter signup - const originalText = submitBtn.textContent; - submitBtn.textContent = 'Subscribing...'; - submitBtn.disabled = true; - - setTimeout(() => { - submitBtn.textContent = '✓ Subscribed!'; - emailInput.value = ''; - - setTimeout(() => { - submitBtn.textContent = originalText; - submitBtn.disabled = false; - }, 2000); - }, 1000); - }); - }); -} - -// Load related articles for blog post pages -async function loadRelatedArticles() { - const relatedContainer = document.getElementById('relatedArticles'); - if (!relatedContainer) return; - - // Load blog data if not already loaded - if (!blogData) { - blogData = await loadBlogData(); - if (!blogData) return; - } - - // Get random 2 posts (excluding current post if applicable) - const currentSlug = window.location.pathname.split('/').pop().replace('.html', ''); - const availablePosts = blogData.posts.filter(post => post.slug !== currentSlug); - const relatedPosts = shuffleArray(availablePosts).slice(0, 2); - - // Display related posts - relatedContainer.innerHTML = relatedPosts.map(post => { - const categoryInfo = blogData.categories[post.category] || { name: post.category }; - - return ` -
    -
    - ${categoryInfo.name} - ${formatDate(post.publishDate)} - ${post.readTime} -
    -

    - ${post.title} -

    -

    ${post.excerpt}

    -
    - ${post.author} - Read article -
    -
    - `; - }).join(''); -} - -// Utility function to shuffle array -function shuffleArray(array) { - const shuffled = [...array]; - for (let i = shuffled.length - 1; i > 0; i--) { - const j = Math.floor(Math.random() * (i + 1)); - [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]; - } - return shuffled; -} - -// Reading progress for blog posts -function setupReadingProgress() { - const bar = document.getElementById('readingProgress') || document.getElementById('readingProgressBar'); - if (!bar) return; - - const update = () => { - const scrollTop = window.scrollY || document.documentElement.scrollTop; - const docHeight = document.documentElement.scrollHeight - window.innerHeight; - const progress = Math.max(0, Math.min(1, docHeight ? scrollTop / docHeight : 0)); - bar.style.width = (progress * 100) + '%'; - }; - - window.addEventListener('scroll', update, { passive: true }); - window.addEventListener('resize', update); - update(); -} - -// Setup social sharing -function setupSocialSharing() { - document.querySelectorAll('.share-btn').forEach(btn => { - btn.addEventListener('click', function(e) { - e.preventDefault(); - - const platform = this.getAttribute('data-platform'); - const url = encodeURIComponent(window.location.href); - const title = encodeURIComponent(document.title); - - let shareUrl = ''; - - switch (platform) { - case 'twitter': - shareUrl = `https://twitter.com/intent/tweet?url=${url}&text=${title}`; - break; - case 'linkedin': - shareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${url}`; - break; - case 'facebook': - shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${url}`; - break; - } - - if (shareUrl) { - window.open(shareUrl, 'share', 'width=600,height=400'); - } - }); - }); -} - -// Initialize blog functionality -function initBlogFunctionality() { - // Setup search - setupBlogSearch(); - - // Setup newsletter forms - setupNewsletterForm(); - - // Setup social sharing - setupSocialSharing(); - - // Load related articles if on blog post page - if (document.getElementById('relatedArticles')) { - loadRelatedArticles(); - } - - // Setup reading progress on article pages if present - if (document.getElementById('readingProgress')) { - setupReadingProgress(); - } -} - -// Initialize blog when DOM is loaded -document.addEventListener('DOMContentLoaded', function() { - initBlogFunctionality(); -}); \ No newline at end of file