move.gl 0.0.1 → 0.0.2

package/src/jinja/partials/_code_block.html.jinja

@@ -0,0 +1,17 @@
+{# ============================================================================
+move.gl | Code Block Partial
+============================================================================
+Reusable code block component with syntax highlighting classes
+============================================================================ #}
+
+{%- macro code_block(code, language='javascript') -%}
+<div class="code-block" data-language="{{ language }}">
+    <code>{{ code | safe }}</code>
+</div>
+{%- endmacro -%}
+
+{%- macro keyword(text) -%}<span class="keyword">{{ text }}</span>{%- endmacro -%}
+{%- macro string(text) -%}<span class="string">{{ text }}</span>{%- endmacro -%}
+{%- macro number(text) -%}<span class="number">{{ text }}</span>{%- endmacro -%}
+{%- macro comment(text) -%}<span class="comment">{{ text }}</span>{%- endmacro -%}
+{%- macro func(text) -%}<span class="function">{{ text }}</span>{%- endmacro -%}

package/src/jinja/partials/_demo_links.html.jinja

@@ -0,0 +1,41 @@
+{# ============================================================================
+move.gl | Demo Links Partial
+============================================================================
+Navigation links to TypeScript demo pages
+============================================================================ #}
+
+<section class="section">
+    <h2 class="section__title">More TypeScript Demos</h2>
+    <div class="feature-grid">
+        {%- if current_demo != 'draggable' %}
+        <a href="demo_draggable.html" class="feature-card" style="text-decoration: none;">
+            <h4>🖱️ Draggable</h4>
+            <p>Make any element draggable with mouse and touch support.</p>
+        </a>
+        {%- endif %}
+        {%- if current_demo != 'gesture' %}
+        <a href="demo_gesture.html" class="feature-card" style="text-decoration: none;">
+            <h4>👆 Gesture Handler</h4>
+            <p>Touch gestures: tap, swipe, pinch, and rotate detection.</p>
+        </a>
+        {%- endif %}
+        {%- if current_demo != 'keyboard' %}
+        <a href="demo_keyboard.html" class="feature-card" style="text-decoration: none;">
+            <h4>⌨️ Virtual Keyboard</h4>
+            <p>Customizable on-screen keyboard with multiple layouts.</p>
+        </a>
+        {%- endif %}
+        {%- if current_demo != 'screensaver' %}
+        <a href="demo_screensaver.html" class="feature-card" style="text-decoration: none;">
+            <h4>🌙 Screensaver</h4>
+            <p>Inactivity-based screensaver with video and audio support.</p>
+        </a>
+        {%- endif %}
+        {%- if current_demo != 'video_overlay' %}
+        <a href="demo_video_overlay.html" class="feature-card" style="text-decoration: none;">
+            <h4>🎬 Video Overlay</h4>
+            <p>Transparent video overlay with fade effects.</p>
+        </a>
+        {%- endif %}
+    </div>
+</section>

package/src/jinja/partials/_feature_card.html.jinja

@@ -0,0 +1,20 @@
+{# ============================================================================
+move.gl | Feature Card Partial
+============================================================================
+Reusable feature card component
+============================================================================ #}
+
+{%- macro feature_card(icon, title, description, href=None) -%}
+{%- if href %}
+<a href="{{ href }}" class="feature-card" style="text-decoration: none;">
+    {%- else %}
+    <div class="feature-card">
+        {%- endif %}
+        <h4>{{ icon }} {{ title }}</h4>
+        <p>{{ description }}</p>
+        {%- if href %}
+</a>
+{%- else %}
+</div>
+{%- endif %}
+{%- endmacro -%}

package/src/jinja/partials/_footer.html.jinja

@@ -0,0 +1,22 @@
+{# ============================================================================
+move.gl | Footer Partial
+============================================================================
+Site footer with links and copyright
+============================================================================ #}
+
+<footer class="footer">
+    <div class="footer__content">
+        <div class="footer__left">
+            <span class="footer__brand">move.gl</span>
+            <span class="footer__tagline">Motion & Animation Library</span>
+        </div>
+        <div class="footer__right">
+            <div class="footer__links">
+                <a href="https://github.com/stylescape/move.gl" class="footer__link" target="_blank">GitHub</a>
+                <a href="https://www.npmjs.com/package/move.gl" class="footer__link" target="_blank">npm</a>
+                <a href="https://www.scape.agency" class="footer__link" target="_blank">Scape Agency</a>
+            </div>
+            <span class="footer__copyright">© 2024 Scape Agency. MIT License.</span>
+        </div>
+    </div>
+</footer>

package/src/jinja/partials/_head.html.jinja

@@ -0,0 +1,27 @@
+{# ============================================================================
+move.gl | Head Partial
+============================================================================
+Common
+
+<head> elements for all pages
+    ============================================================================ #}
+
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description"
+        content="{{ description | default('Motion and Animation Library — CSS animations, transitions, keyframes, and interactive motion effects.') }}" />
+    <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
+    <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)" />
+    <title>{{ title | default('move.gl') }}</title>
+
+    <!-- Library CSS -->
+    <link rel="stylesheet" href="/css/move.gl.css" />
+    <!-- Documentation CSS -->
+    <link rel="stylesheet" href="/css/move.gl.docs.css" />
+
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
+        rel="stylesheet">

package/src/jinja/partials/_nav.html.jinja

@@ -0,0 +1,79 @@
+{# ============================================================================
+move.gl | Navigation Partial
+============================================================================
+Main navigation component with dropdown menus
+============================================================================ #}
+
+<div class="nav-wrapper">
+    <nav class="nav">
+        <div class="nav__inner">
+            <a href="index.html" class="nav__logo">
+                <span class="nav__logo-text">move.gl</span>
+                <span class="nav__version">v0.0.1</span>
+            </a>
+            <div class="nav__right">
+                {%- include "partials/_theme_toggle.html.jinja" %}
+
+                <div class="nav__dropdown" id="nav-dropdown">
+                    <button type="button" class="nav__dropdown-toggle" aria-expanded="false" aria-haspopup="true">
+                        <span>Docs</span>
+                        <svg width="10" height="6" viewBox="0 0 10 6" fill="none" stroke="currentColor"
+                            stroke-width="1.5">
+                            <path d="M1 1l4 4 4-4" />
+                        </svg>
+                    </button>
+                    <div class="nav__dropdown-menu" role="menu">
+                        <div class="nav__dropdown-section">
+                            <span class="nav__dropdown-label">Learn</span>
+                            <a href="getting-started.html" role="menuitem">Getting Started</a>
+                            <a href="core-concepts.html" role="menuitem">Core Concepts</a>
+                        </div>
+                        <div class="nav__dropdown-section">
+                            <span class="nav__dropdown-label">Overview</span>
+                            <a href="test_overview.html" role="menuitem">All Animations</a>
+                        </div>
+                        <div class="nav__dropdown-section">
+                            <span class="nav__dropdown-label">Animations</span>
+                            <a href="test_fade.html" role="menuitem">Fade</a>
+                            <a href="test_slide.html" role="menuitem">Slide</a>
+                            <a href="test_bounce.html" role="menuitem">Bounce</a>
+                            <a href="test_zoom.html" role="menuitem">Zoom</a>
+                            <a href="test_flip.html" role="menuitem">Flip</a>
+                            <a href="test_scale.html" role="menuitem">Scale</a>
+                            <a href="test_spin.html" role="menuitem">Spin & Rotate</a>
+                            <a href="test_pulse.html" role="menuitem">Pulse</a>
+                            <a href="test_shake.html" role="menuitem">Shake & Wobble</a>
+                            <a href="test_attention.html" role="menuitem">Attention</a>
+                            <a href="test_special.html" role="menuitem">Special Effects</a>
+                        </div>
+                        <div class="nav__dropdown-section">
+                            <span class="nav__dropdown-label">Effects</span>
+                            <a href="test_loaders.html" role="menuitem">Loaders</a>
+                            <a href="test_transitions.html" role="menuitem">Transitions</a>
+                            <a href="test_transforms.html" role="menuitem">Transforms</a>
+                            <a href="test_effects.html" role="menuitem">Filter Effects</a>
+                            <a href="test_keyframes.html" role="menuitem">Keyframes</a>
+                            <a href="test_mouse.html" role="menuitem">Mouse Interactions</a>
+                        </div>
+                        <div class="nav__dropdown-section">
+                            <span class="nav__dropdown-label">TypeScript Demos</span>
+                            <a href="demo_draggable.html" role="menuitem">Draggable</a>
+                            <a href="demo_gesture.html" role="menuitem">Gesture Handler</a>
+                            <a href="demo_keyboard.html" role="menuitem">Virtual Keyboard</a>
+                            <a href="demo_screensaver.html" role="menuitem">Screensaver</a>
+                            <a href="demo_video_overlay.html" role="menuitem">Video Overlay</a>
+                        </div>
+                    </div>
+                </div>
+
+                <a href="https://github.com/stylescape/move.gl" class="nav__github" target="_blank"
+                    title="View on GitHub">
+                    <svg width="18" height="18" viewBox="0 0 16 16" fill="currentColor">
+                        <path
+                            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
+                    </svg>
+                </a>
+            </div>
+        </div>
+    </nav>
+</div>

package/src/jinja/partials/_theme_toggle.html.jinja

@@ -0,0 +1,15 @@
+{# ============================================================================
+move.gl | Theme Toggle Partial
+============================================================================
+Light/dark mode toggle button
+============================================================================ #}
+
+<button type="button" class="theme-toggle" data-toggle="theme" title="Toggle dark mode" aria-label="Toggle dark mode">
+    <svg class="theme-icon theme-icon--light" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+        <path
+            d="M8 12a4 4 0 100-8 4 4 0 000 8zM8 0a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0V.75A.75.75 0 018 0zm0 13a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 018 13zm7-5a.75.75 0 00-.75-.75h-1.5a.75.75 0 000 1.5h1.5A.75.75 0 0015 8zM3 8a.75.75 0 00-.75-.75H.75a.75.75 0 000 1.5h1.5A.75.75 0 003 8zm9.536-4.536a.75.75 0 00-1.06 0l-1.061 1.06a.75.75 0 001.06 1.061l1.061-1.06a.75.75 0 000-1.061zm-9.072 9.072a.75.75 0 00-1.06 0l-1.061 1.06a.75.75 0 101.06 1.061l1.061-1.06a.75.75 0 000-1.061zm9.072 0a.75.75 0 00-1.06 1.06l1.06 1.061a.75.75 0 101.061-1.06l-1.06-1.061zm-9.072-9.072a.75.75 0 00-1.06 1.06l1.06 1.061a.75.75 0 001.061-1.06l-1.06-1.061z" />
+    </svg>
+    <svg class="theme-icon theme-icon--dark" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+        <path d="M6.2 1A6.98 6.98 0 008 7a6.98 6.98 0 00-1.8 6A7 7 0 116.2 1z" />
+    </svg>
+</button>