snow-flow 3.4.35 → 3.4.39

package/website/components/navigation/Navigation.css

@@ -0,0 +1,383 @@
+/* Navigation Component - Black/White Minimalist Design */
+
+.sf-nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.sf-nav--scrolled {
+  background: rgba(255, 255, 255, 0.98);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.sf-nav__container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 70px;
+}
+
+/* Brand */
+.sf-nav__brand {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  cursor: pointer;
+  text-decoration: none;
+  color: inherit;
+}
+
+.sf-nav__logo {
+  font-size: 1.75rem;
+  background: linear-gradient(135deg, #000000 0%, #333333 50%, #000000 100%);
+  background-size: 200% 200%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  animation: sf-gradient-shift 3s ease-in-out infinite;
+  transition: transform 0.3s ease;
+}
+
+.sf-nav__brand:hover .sf-nav__logo {
+  transform: scale(1.1);
+}
+
+.sf-nav__brand-name {
+  font-size: 1.5rem;
+  font-weight: 700;
+  background: linear-gradient(135deg, #000000 0%, #666666 50%, #000000 100%);
+  background-size: 200% 200%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  animation: sf-gradient-shift 3s ease-in-out infinite reverse;
+}
+
+@keyframes sf-gradient-shift {
+  0%, 100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+/* Navigation Menu */
+.sf-nav__menu {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  align-items: center;
+  gap: 2rem;
+}
+
+.sf-nav__item {
+  position: relative;
+}
+
+.sf-nav__link {
+  position: relative;
+  text-decoration: none;
+  color: #333333;
+  font-weight: 500;
+  font-size: 0.95rem;
+  padding: 0.75rem 0;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+}
+
+.sf-nav__link::before {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background: linear-gradient(90deg, #000000, #666666);
+  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.sf-nav__link:hover {
+  color: #000000;
+}
+
+.sf-nav__link:hover::before,
+.sf-nav__link--active::before {
+  width: 100%;
+}
+
+.sf-nav__link--active {
+  color: #000000;
+  font-weight: 600;
+}
+
+.sf-nav__link-indicator {
+  position: absolute;
+  top: 50%;
+  right: -12px;
+  transform: translateY(-50%) scale(0);
+  width: 4px;
+  height: 4px;
+  background: #000000;
+  border-radius: 50%;
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.sf-nav__link--active .sf-nav__link-indicator {
+  transform: translateY(-50%) scale(1);
+}
+
+/* CTA Button */
+.sf-nav__cta {
+  background: linear-gradient(135deg, #000000 0%, #333333 100%);
+  color: white;
+  padding: 0.75rem 1.5rem;
+  border-radius: 50px;
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 0.9rem;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.sf-nav__cta::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+  transition: left 0.5s ease;
+}
+
+.sf-nav__cta:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
+}
+
+.sf-nav__cta:hover::before {
+  left: 100%;
+}
+
+.sf-nav__cta:active {
+  transform: translateY(0);
+}
+
+/* Mobile Hamburger */
+.sf-nav__hamburger {
+  display: none;
+  flex-direction: column;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.5rem;
+  width: 30px;
+  height: 24px;
+  position: relative;
+}
+
+.sf-nav__hamburger span {
+  width: 100%;
+  height: 2px;
+  background: #333333;
+  border-radius: 2px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transform-origin: center;
+}
+
+.sf-nav__hamburger span:nth-child(1) {
+  position: absolute;
+  top: 6px;
+}
+
+.sf-nav__hamburger span:nth-child(2) {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.sf-nav__hamburger span:nth-child(3) {
+  position: absolute;
+  bottom: 6px;
+}
+
+/* Hamburger Animation */
+.sf-nav__hamburger--open span:nth-child(1) {
+  transform: rotate(45deg) translate(5px, 5px);
+}
+
+.sf-nav__hamburger--open span:nth-child(2) {
+  opacity: 0;
+  transform: translateY(-50%) scale(0);
+}
+
+.sf-nav__hamburger--open span:nth-child(3) {
+  transform: rotate(-45deg) translate(7px, -6px);
+}
+
+/* Progress Indicator */
+.sf-nav__progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.sf-nav__progress-bar {
+  height: 100%;
+  background: linear-gradient(90deg, #000000, #666666, #000000);
+  background-size: 200% 100%;
+  animation: sf-progress-flow 2s linear infinite;
+  transition: width 0.1s ease-out;
+  border-radius: 0 3px 3px 0;
+}
+
+@keyframes sf-progress-flow {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* Mobile Styles */
+@media (max-width: 768px) {
+  .sf-nav__container {
+    padding: 0 1rem;
+    height: 60px;
+  }
+
+  .sf-nav__hamburger {
+    display: flex;
+  }
+
+  .sf-nav__menu {
+    position: fixed;
+    top: 60px;
+    left: 0;
+    right: 0;
+    background: rgba(255, 255, 255, 0.98);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    flex-direction: column;
+    padding: 2rem 0;
+    gap: 0;
+    transform: translateX(-100%);
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  }
+
+  .sf-nav__menu--open {
+    transform: translateX(0);
+  }
+
+  .sf-nav__item {
+    width: 100%;
+    text-align: center;
+  }
+
+  .sf-nav__link {
+    padding: 1rem;
+    justify-content: center;
+    font-size: 1.1rem;
+  }
+
+  .sf-nav__link::before {
+    bottom: 0.5rem;
+  }
+
+  .sf-nav__link-indicator {
+    display: none;
+  }
+
+  .sf-nav__cta {
+    margin-top: 1rem;
+    display: inline-block;
+  }
+
+  .sf-nav__brand {
+    gap: 0.5rem;
+  }
+
+  .sf-nav__logo {
+    font-size: 1.5rem;
+  }
+
+  .sf-nav__brand-name {
+    font-size: 1.25rem;
+  }
+}
+
+/* Touch Device Optimizations */
+@media (hover: none) {
+  .sf-nav__link:hover::before {
+    width: 0;
+  }
+  
+  .sf-nav__link--active::before {
+    width: 100%;
+  }
+  
+  .sf-nav__cta:hover {
+    transform: none;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
+  }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  .sf-nav,
+  .sf-nav__logo,
+  .sf-nav__brand-name,
+  .sf-nav__link,
+  .sf-nav__link::before,
+  .sf-nav__link-indicator,
+  .sf-nav__cta,
+  .sf-nav__hamburger span,
+  .sf-nav__menu,
+  .sf-nav__progress-bar {
+    animation: none;
+    transition: none;
+  }
+}
+
+/* High Contrast Mode */
+@media (prefers-contrast: high) {
+  .sf-nav {
+    background: white;
+    border-bottom: 2px solid black;
+  }
+  
+  .sf-nav__logo,
+  .sf-nav__brand-name {
+    -webkit-text-fill-color: black;
+  }
+  
+  .sf-nav__link {
+    color: black;
+  }
+  
+  .sf-nav__cta {
+    background: black;
+    color: white;
+  }
+}

package/website/components/navigation/Navigation.html

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Snow-Flow Navigation Component</title>
+    <link rel="stylesheet" href="Navigation.css">
+</head>
+<body>
+    <!-- Navigation Component -->
+    <nav class="sf-nav" id="sf-navigation">
+        <div class="sf-nav__container">
+            <!-- Logo and Brand -->
+            <div class="sf-nav__brand" id="sf-nav-brand">
+                <span class="sf-nav__logo">⚡</span>
+                <span class="sf-nav__brand-name">Snow-Flow</span>
+            </div>
+
+            <!-- Desktop Navigation -->
+            <ul class="sf-nav__menu" id="sf-nav-menu">
+                <li class="sf-nav__item">
+                    <a href="#home" class="sf-nav__link sf-nav__link--active" data-section="home">
+                        Home
+                        <span class="sf-nav__link-indicator"></span>
+                    </a>
+                </li>
+                <li class="sf-nav__item">
+                    <a href="#features" class="sf-nav__link" data-section="features">
+                        Features
+                        <span class="sf-nav__link-indicator"></span>
+                    </a>
+                </li>
+                <li class="sf-nav__item">
+                    <a href="#about" class="sf-nav__link" data-section="about">
+                        About
+                        <span class="sf-nav__link-indicator"></span>
+                    </a>
+                </li>
+                <li class="sf-nav__item">
+                    <a href="#contact" class="sf-nav__link" data-section="contact">
+                        Contact
+                        <span class="sf-nav__link-indicator"></span>
+                    </a>
+                </li>
+                
+                <!-- CTA Button -->
+                <li class="sf-nav__item">
+                    <a href="#get-started" class="sf-nav__cta">Get Started</a>
+                </li>
+            </ul>
+
+            <!-- Mobile Hamburger -->
+            <button class="sf-nav__hamburger" id="sf-nav-hamburger" aria-label="Toggle navigation menu">
+                <span></span>
+                <span></span>
+                <span></span>
+            </button>
+        </div>
+
+        <!-- Scroll Progress Indicator -->
+        <div class="sf-nav__progress">
+            <div class="sf-nav__progress-bar" id="sf-progress-bar"></div>
+        </div>
+    </nav>
+
+    <!-- Demo Sections -->
+    <section id="home" style="height: 100vh; background: linear-gradient(135deg, #f5f5f5, #e0e0e0); display: flex; align-items: center; justify-content: center;">
+        <h1>Home Section</h1>
+    </section>
+    
+    <section id="features" style="height: 100vh; background: linear-gradient(135deg, #e0e0e0, #d0d0d0); display: flex; align-items: center; justify-content: center;">
+        <h1>Features Section</h1>
+    </section>
+    
+    <section id="about" style="height: 100vh; background: linear-gradient(135deg, #d0d0d0, #c0c0c0); display: flex; align-items: center; justify-content: center;">
+        <h1>About Section</h1>
+    </section>
+    
+    <section id="contact" style="height: 100vh; background: linear-gradient(135deg, #c0c0c0, #b0b0b0); display: flex; align-items: center; justify-content: center;">
+        <h1>Contact Section</h1>
+    </section>
+    
+    <section id="get-started" style="height: 100vh; background: linear-gradient(135deg, #b0b0b0, #a0a0a0); display: flex; align-items: center; justify-content: center;">
+        <h1>Get Started Section</h1>
+    </section>
+
+    <script src="Navigation.js"></script>
+</body>
+</html>

package/website/components/navigation/Navigation.js

@@ -0,0 +1,248 @@
+// Snow-Flow Navigation Component JavaScript
+
+class SnowFlowNavigation {
+    constructor(options = {}) {
+        this.nav = document.getElementById(options.navId || 'sf-navigation');
+        this.menu = document.getElementById(options.menuId || 'sf-nav-menu');
+        this.hamburger = document.getElementById(options.hamburgerId || 'sf-nav-hamburger');
+        this.progressBar = document.getElementById(options.progressId || 'sf-progress-bar');
+        this.brand = document.getElementById(options.brandId || 'sf-nav-brand');
+        
+        this.isOpen = false;
+        this.activeSection = 'home';
+        this.scrollThreshold = options.scrollThreshold || 50;
+        
+        this.init();
+    }
+
+    init() {
+        this.bindEvents();
+        this.updateActiveSection();
+        this.updateProgressBar();
+    }
+
+    bindEvents() {
+        // Mobile menu toggle
+        if (this.hamburger) {
+            this.hamburger.addEventListener('click', () => this.toggleMobileMenu());
+        }
+
+        // Navigation link clicks
+        const navLinks = this.nav.querySelectorAll('.sf-nav__link');
+        navLinks.forEach(link => {
+            link.addEventListener('click', (e) => this.handleNavClick(e, link));
+        });
+
+        // Brand click
+        if (this.brand) {
+            this.brand.addEventListener('click', (e) => this.handleNavClick(e, this.brand, '#home'));
+        }
+
+        // Scroll events
+        window.addEventListener('scroll', () => {
+            this.handleScroll();
+        });
+
+        // Resize events
+        window.addEventListener('resize', () => {
+            if (window.innerWidth > 768 && this.isOpen) {
+                this.closeMobileMenu();
+            }
+        });
+
+        // Close mobile menu on outside click
+        document.addEventListener('click', (e) => {
+            if (this.isOpen && !this.nav.contains(e.target)) {
+                this.closeMobileMenu();
+            }
+        });
+
+        // Handle escape key
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape' && this.isOpen) {
+                this.closeMobileMenu();
+            }
+        });
+    }
+
+    toggleMobileMenu() {
+        if (this.isOpen) {
+            this.closeMobileMenu();
+        } else {
+            this.openMobileMenu();
+        }
+    }
+
+    openMobileMenu() {
+        this.isOpen = true;
+        this.menu.classList.add('sf-nav__menu--open');
+        this.hamburger.classList.add('sf-nav__hamburger--open');
+        this.hamburger.setAttribute('aria-expanded', 'true');
+        
+        // Prevent body scroll
+        document.body.style.overflow = 'hidden';
+        
+        // Focus management for accessibility
+        setTimeout(() => {
+            const firstLink = this.menu.querySelector('.sf-nav__link');
+            if (firstLink) firstLink.focus();
+        }, 300);
+    }
+
+    closeMobileMenu() {
+        this.isOpen = false;
+        this.menu.classList.remove('sf-nav__menu--open');
+        this.hamburger.classList.remove('sf-nav__hamburger--open');
+        this.hamburger.setAttribute('aria-expanded', 'false');
+        
+        // Restore body scroll
+        document.body.style.overflow = '';
+    }
+
+    handleNavClick(e, element, customHref = null) {
+        e.preventDefault();
+        
+        const href = customHref || element.getAttribute('href');
+        this.closeMobileMenu();
+        
+        if (href && href.startsWith('#')) {
+            this.smoothScrollTo(href);
+        }
+    }
+
+    smoothScrollTo(target) {
+        const element = document.querySelector(target);
+        if (element) {
+            const offset = 80; // Account for fixed navbar
+            const targetPosition = element.offsetTop - offset;
+            
+            window.scrollTo({
+                top: targetPosition,
+                behavior: 'smooth'
+            });
+        }
+    }
+
+    handleScroll() {
+        const scrollTop = window.pageYOffset;
+        
+        // Update navbar appearance on scroll
+        if (scrollTop > this.scrollThreshold) {
+            this.nav.classList.add('sf-nav--scrolled');
+        } else {
+            this.nav.classList.remove('sf-nav--scrolled');
+        }
+        
+        // Update active section
+        this.updateActiveSection();
+        
+        // Update progress bar
+        this.updateProgressBar();
+    }
+
+    updateActiveSection() {
+        const sections = document.querySelectorAll('section[id]');
+        const scrollTop = window.pageYOffset;
+        let current = 'home';
+        
+        sections.forEach(section => {
+            const sectionTop = section.offsetTop;
+            const sectionHeight = section.offsetHeight;
+            
+            if (scrollTop >= sectionTop - 100 && scrollTop < sectionTop + sectionHeight - 100) {
+                current = section.getAttribute('id');
+            }
+        });
+        
+        if (current !== this.activeSection) {
+            this.activeSection = current;
+            this.updateActiveNavLink();
+        }
+    }
+
+    updateActiveNavLink() {
+        const navLinks = this.nav.querySelectorAll('.sf-nav__link');
+        
+        navLinks.forEach(link => {
+            const linkSection = link.getAttribute('data-section') || 
+                               link.getAttribute('href')?.replace('#', '');
+            
+            if (linkSection === this.activeSection) {
+                link.classList.add('sf-nav__link--active');
+            } else {
+                link.classList.remove('sf-nav__link--active');
+            }
+        });
+    }
+
+    updateProgressBar() {
+        if (!this.progressBar) return;
+        
+        const scrollTop = window.pageYOffset;
+        const documentHeight = document.documentElement.scrollHeight;
+        const windowHeight = window.innerHeight;
+        const progress = Math.min(100, (scrollTop / (documentHeight - windowHeight)) * 100);
+        
+        this.progressBar.style.width = `${progress}%`;
+    }
+
+    // Public API methods
+    setActiveSection(sectionId) {
+        this.activeSection = sectionId;
+        this.updateActiveNavLink();
+    }
+
+    scrollToSection(sectionId) {
+        this.smoothScrollTo(`#${sectionId}`);
+    }
+
+    updateNavItems(newItems) {
+        // Method to dynamically update navigation items
+        const menuHTML = newItems.map((item, index) => `
+            <li class="sf-nav__item">
+                <a href="${item.href}" class="sf-nav__link" data-section="${item.href.replace('#', '')}">
+                    ${item.label}
+                    <span class="sf-nav__link-indicator"></span>
+                </a>
+            </li>
+        `).join('');
+        
+        // Add CTA button
+        const ctaHTML = `
+            <li class="sf-nav__item">
+                <a href="#get-started" class="sf-nav__cta">Get Started</a>
+            </li>
+        `;
+        
+        this.menu.innerHTML = menuHTML + ctaHTML;
+        
+        // Rebind events for new links
+        const navLinks = this.nav.querySelectorAll('.sf-nav__link');
+        navLinks.forEach(link => {
+            link.addEventListener('click', (e) => this.handleNavClick(e, link));
+        });
+    }
+
+    destroy() {
+        // Cleanup method
+        this.closeMobileMenu();
+        // Remove event listeners if needed
+    }
+}
+
+// Auto-initialize on DOM content loaded
+document.addEventListener('DOMContentLoaded', () => {
+    // Check if navigation exists before initializing
+    const navElement = document.getElementById('sf-navigation');
+    if (navElement) {
+        window.snowFlowNav = new SnowFlowNavigation();
+    }
+});
+
+// Export for module usage
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = SnowFlowNavigation;
+}
+
+// Global access
+window.SnowFlowNavigation = SnowFlowNavigation;