add MDify Pro GitHub Pages onepage

.github/workflows/deploy-pages.yml

@@ -0,0 +1,37 @@
+name: Deploy MDify Pro OnePage to GitHub Pages
+
+on:
+  push:
+    branches: ["main"]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Configure GitHub Pages
+        uses: actions/configure-pages@v5
+
+      - name: Upload static site
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: "."
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /

script.js

@@ -0,0 +1,163 @@
+(() => {
+  const root = document.documentElement;
+  const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const themeToggle = document.getElementById('themeToggle');
+  const scrollProgress = document.getElementById('scrollProgress');
+  const cursorGlow = document.getElementById('cursorGlow');
+  const glassNav = document.querySelector('.glass-nav');
+  const mobileDock = document.getElementById('mobileDock');
+  const mobileLens = document.getElementById('mobileLens');
+  const mobileItems = mobileDock ? [...mobileDock.querySelectorAll('.mobile-item[data-mobile-section]')] : [];
+  const observedSections = [...document.querySelectorAll('[data-section]')];
+
+  const savedTheme = localStorage.getItem('mdify-onepage-theme');
+  if (savedTheme === 'light') root.dataset.theme = 'light';
+
+  themeToggle?.addEventListener('click', () => {
+    const isLight = root.dataset.theme === 'light';
+    if (isLight) {
+      delete root.dataset.theme;
+      localStorage.setItem('mdify-onepage-theme', 'dark');
+    } else {
+      root.dataset.theme = 'light';
+      localStorage.setItem('mdify-onepage-theme', 'light');
+    }
+  });
+
+  const updateProgress = () => {
+    const max = document.documentElement.scrollHeight - innerHeight;
+    const pct = max > 0 ? Math.min(100, Math.max(0, (scrollY / max) * 100)) : 0;
+    if (scrollProgress) scrollProgress.style.width = `${pct}%`;
+  };
+
+  addEventListener('scroll', updateProgress, { passive: true });
+  addEventListener('resize', updateProgress, { passive: true });
+  updateProgress();
+
+  if (matchMedia('(hover:hover) and (pointer:fine)').matches) {
+    addEventListener('pointermove', (event) => {
+      if (cursorGlow) {
+        cursorGlow.style.left = `${event.clientX}px`;
+        cursorGlow.style.top = `${event.clientY}px`;
+        cursorGlow.style.opacity = '1';
+      }
+      if (glassNav) {
+        const rect = glassNav.getBoundingClientRect();
+        const x = Math.max(0, Math.min(rect.width, event.clientX - rect.left));
+        glassNav.style.setProperty('--nav-x', `${x}px`);
+      }
+    }, { passive: true });
+  }
+
+  const revealObserver = new IntersectionObserver((entries) => {
+    for (const entry of entries) {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('in-view');
+        revealObserver.unobserve(entry.target);
+      }
+    }
+  }, { threshold: 0.12, rootMargin: '0px 0px -5% 0px' });
+
+  document.querySelectorAll('.reveal, .token-compare').forEach((el) => revealObserver.observe(el));
+
+  const countUp = (el) => {
+    const target = Number(el.dataset.count || 0);
+    const suffix = el.dataset.suffix || '';
+    if (!target || prefersReduced) {
+      el.textContent = `${target}${suffix}`;
+      return;
+    }
+    const duration = 1100;
+    const start = performance.now();
+    const tick = (now) => {
+      const t = Math.min(1, (now - start) / duration);
+      const eased = 1 - Math.pow(1 - t, 3);
+      el.textContent = `${Math.round(target * eased)}${suffix}`;
+      if (t < 1) requestAnimationFrame(tick);
+    };
+    requestAnimationFrame(tick);
+  };
+
+  const countObserver = new IntersectionObserver((entries) => {
+    for (const entry of entries) {
+      if (entry.isIntersecting) {
+        countUp(entry.target);
+        countObserver.unobserve(entry.target);
+      }
+    }
+  }, { threshold: 0.8 });
+  document.querySelectorAll('[data-count]').forEach((el) => countObserver.observe(el));
+
+  function positionMobileLens(item, immediate = false) {
+    if (!mobileDock || !mobileLens || !item) return;
+    const dockRect = mobileDock.getBoundingClientRect();
+    const itemRect = item.getBoundingClientRect();
+    if (immediate) mobileLens.style.transition = 'none';
+    mobileDock.style.setProperty('--lens-x', `${itemRect.left - dockRect.left}px`);
+    mobileDock.style.setProperty('--lens-w', `${itemRect.width}px`);
+    if (immediate) {
+      mobileLens.getBoundingClientRect();
+      mobileLens.style.transition = '';
+    }
+  }
+
+  function activateMobile(sectionName) {
+    const target = mobileItems.find((item) => item.dataset.mobileSection === sectionName);
+    if (!target) return;
+    mobileItems.forEach((item) => item.classList.toggle('is-active', item === target));
+    positionMobileLens(target);
+  }
+
+  mobileItems.forEach((item) => {
+    item.addEventListener('click', () => {
+      activateMobile(item.dataset.mobileSection);
+      navigator.vibrate?.(5);
+    });
+  });
+
+  const sectionObserver = new IntersectionObserver((entries) => {
+    const visible = entries
+      .filter((entry) => entry.isIntersecting)
+      .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
+    if (visible) activateMobile(visible.target.dataset.section);
+  }, { threshold: [0.15, 0.35, 0.55], rootMargin: '-20% 0px -58% 0px' });
+  observedSections.forEach((section) => sectionObserver.observe(section));
+
+  let lastY = scrollY;
+  let compact = false;
+  const setCompact = (next) => {
+    if (!mobileDock || next === compact) return;
+    compact = next;
+    mobileDock.classList.toggle('compact', compact);
+    requestAnimationFrame(() => {
+      const active = mobileItems.find((item) => item.classList.contains('is-active'));
+      positionMobileLens(active);
+    });
+  };
+
+  addEventListener('scroll', () => {
+    const y = scrollY;
+    const delta = y - lastY;
+    if (Math.abs(delta) > 4) {
+      if (delta > 0 && y > 140) setCompact(true);
+      if (delta < 0) setCompact(false);
+    }
+    lastY = y;
+  }, { passive: true });
+
+  mobileDock?.addEventListener('pointermove', (event) => {
+    const rect = mobileDock.getBoundingClientRect();
+    const x = Math.max(0, Math.min(rect.width, event.clientX - rect.left));
+    mobileDock.style.setProperty('--dock-x', `${x}px`);
+  }, { passive: true });
+
+  addEventListener('resize', () => {
+    const active = mobileItems.find((item) => item.classList.contains('is-active')) || mobileItems[0];
+    positionMobileLens(active, true);
+  }, { passive: true });
+
+  requestAnimationFrame(() => {
+    const active = mobileItems.find((item) => item.classList.contains('is-active')) || mobileItems[0];
+    positionMobileLens(active, true);
+  });
+})();