diff --git a/.github/workflows/deploy-pages.yml b/.github/workflows/deploy-pages.yml new file mode 100644 index 0000000..d86b40f --- /dev/null +++ b/.github/workflows/deploy-pages.yml @@ -0,0 +1,53 @@ +name: Deploy to GitHub Pages + +on: + push: + branches: [ "main" ] + pull_request: + branches: [ "main" ] + workflow_dispatch: + +# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages +permissions: + contents: read + pages: write + id-token: write + +# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. +# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. +concurrency: + group: "pages" + cancel-in-progress: false + +jobs: + # Build job + build: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Setup Pages + uses: actions/configure-pages@v4 + + - name: Build with Jekyll + uses: actions/jekyll-build-pages@v1 + with: + source: ./docs + destination: ./_site + + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + + # Deployment job + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + needs: build + if: github.ref == 'refs/heads/main' + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 \ No newline at end of file diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 0000000..15af96c --- /dev/null +++ b/docs/README.md @@ -0,0 +1,100 @@ +# git-artifact SPA Showcase + +This directory contains the Single Page Application (SPA) showcase for git-artifact, designed to be hosted on GitHub Pages. + +## 🎯 Purpose + +The SPA provides an interactive demonstration of git-artifact's capabilities, making it easier for users to: +- Understand the library's functionality +- See real command examples +- Learn about use cases +- Get installation guidance +- Access complete API documentation + +## 🏗️ Structure + +``` +docs/ +├── index.html # Main SPA file with all content +├── styles.css # Responsive CSS styling +├── script.js # Interactive JavaScript functionality +├── _config.yml # Jekyll configuration for GitHub Pages +└── README.md # This file +``` + +## 🚀 Features + +### Interactive Demo +- Tabbed interface for different git-artifact commands +- Copy-to-clipboard functionality +- Real command examples with explanations + +### Responsive Design +- Mobile-first approach +- Touch-friendly navigation +- Adaptive layouts for all screen sizes + +### Content Sections +1. **Landing Page** - Overview and quick start +2. **Interactive Demo** - Try git-artifact commands +3. **Use Cases** - Real-world scenarios +4. **API Reference** - Complete command documentation +5. **Installation Guide** - Step-by-step setup + +## 🛠️ Development + +The SPA is built with vanilla HTML, CSS, and JavaScript for: +- ✅ No build dependencies +- ✅ Fast loading times +- ✅ Easy maintenance +- ✅ Direct GitHub Pages compatibility + +### Local Development + +```bash +# Serve locally for testing +cd docs/ +python3 -m http.server 8000 +# Visit http://localhost:8000 +``` + +## 🌐 Deployment + +The SPA automatically deploys to GitHub Pages via the workflow in `.github/workflows/deploy-pages.yml`. + +### Manual GitHub Pages Setup +1. Go to repository Settings > Pages +2. Set Source to "GitHub Actions" +3. The site will be available at: `https://praqma.github.io/git-artifact/` + +## 🎨 Design Principles + +- **Accessibility**: Semantic HTML, keyboard navigation, focus management +- **Performance**: Optimized images, minimal dependencies, efficient CSS +- **Mobile-First**: Responsive design tested on various screen sizes +- **User Experience**: Smooth animations, clear navigation, helpful feedback + +## 🔧 Customization + +The SPA can be easily customized by modifying: +- `index.html`: Content structure and sections +- `styles.css`: Visual styling and responsive breakpoints +- `script.js`: Interactive functionality and animations +- `_config.yml`: Jekyll and GitHub Pages settings + +## 📦 Dependencies + +- **Prism.js** (CDN): Syntax highlighting for code blocks +- **Modern Browser**: ES6+ features, CSS Grid, Flexbox + +## 🤝 Contributing + +When making changes to the showcase: +1. Test locally using the development server +2. Verify responsive design on multiple screen sizes +3. Check all interactive features work correctly +4. Ensure fast loading times and accessibility + +## 📄 License + +This showcase follows the same license as the git-artifact project. \ No newline at end of file diff --git a/docs/_config.yml b/docs/_config.yml new file mode 100644 index 0000000..0a1c9d6 --- /dev/null +++ b/docs/_config.yml @@ -0,0 +1,46 @@ +# Jekyll configuration for GitHub Pages +title: "git-artifact" +description: "Interactive showcase for git-artifact - Git-based artifact management tool" +url: "https://praqma.github.io" +baseurl: "/git-artifact" + +# Build settings +markdown: kramdown +highlighter: rouge +theme: null + +# Exclude files from processing +exclude: + - README.md + - Gemfile + - Gemfile.lock + - node_modules + - vendor + +# Include files that start with underscore +include: + - _headers + +# Plugin settings +plugins: + - jekyll-sitemap + - jekyll-feed + +# GitHub Pages safe mode +safe: true + +# Collections and defaults +defaults: + - scope: + path: "" + values: + layout: "default" + +# SEO and social +author: "Praqma" +twitter: + username: "praqma" + card: "summary_large_image" + +# Logo and favicon +logo: "/assets/images/logo.png" \ No newline at end of file diff --git a/docs/favicon.svg b/docs/favicon.svg new file mode 100644 index 0000000..6c720d3 --- /dev/null +++ b/docs/favicon.svg @@ -0,0 +1,8 @@ +# Favicon for the SPA + + + + + + + \ No newline at end of file diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..03e6444 --- /dev/null +++ b/docs/index.html @@ -0,0 +1,425 @@ + + + + + + git-artifact - Git-based Artifact Management + + + + + + + + + + + +
+ +
+
+
+

git-artifact

+

Store and manage artifacts using git repositories with horizontal commit history

+
+ Try Demo + Get Started +
+
+ +
+
+

🚀 Fast & Efficient

+

Only fetch what you need with git's optimized storage

+
+
+

🔄 CI/CD Ready

+

Trigger builds with standard git push/pull workflows

+
+
+

💰 Cost Effective

+

Use existing git infrastructure, no additional systems

+
+
+ +
+

Horizontal Git History Concept

+
+
+
init
+
main
+
+
+
1.0/bin
+
1.0/src
+
+
+
1.1/bin
+
+
+
1.2/bin
+
+
+
2.0/bin
+
2.0/src
+
2.0/test
+
+
+

Commits are stored "horizontally" using tags rather than stacked vertically

+
+
+
+ + +
+
+

Interactive Demo

+

Try git-artifact commands and see their effects

+ +
+
+ + + + +
+ +
+
+

Initialize Repository

+
+ 
git artifact init --url=<remote_url> --path my-artifacts
+ +
+
+

Creates a new git-artifact repository and initializes it for horizontal commit storage.

+
    +
  • --url: Remote repository URL
    • +
  • --path: Local directory path
    • +
+
+
+ +
+

Add and Push Artifact

+
+ 
cd my-artifacts
+cp -rf <build-dir>/my.lib /include .
+git artifact add-n-push -t v1.0
+ +
+
+

Copy your artifacts and commit them with a tag. The workspace is reset to the default branch after push.

+
    +
  • -t: Tag name for the artifact version
    • +
+
+
+ +
+

Fetch Latest Artifact

+
+ 
git artifact fetch-co-latest --regex 'v*.*'
+ +
+
+

Download and checkout the latest artifact matching the regex pattern.

+
    +
  • --regex: Pattern to match tag names
    • +
+
+
+ +
+

Find Available Artifacts

+
+ 
git artifact find-latest -r 'v*.*'
+ +
+
+

List available artifacts matching the pattern without downloading them.

+
    +
  • -r: Regex pattern for tag matching
    • +
+
+
+
+
+
+
+ + +
+
+

Use Cases

+
+
+

Library Distribution

+

Store compiled libraries with different versions, easily accessible by version tags.

+
+ 
# Store library artifacts
+git artifact add-n-push -t v1.2.3/release
+git artifact add-n-push -t v1.2.3/debug
+
+# Consumers fetch specific versions
+git artifact fetch-co -t v1.2.3/release
+
+
+ +
+

CI/CD Pipeline Artifacts

+

Store build artifacts, test reports, and deployment packages in your CI/CD pipeline.

+
+ 
# Pipeline stores artifacts by build number
+git artifact add-n-push -t build-${BUILD_NUMBER}/artifacts
+git artifact add-n-push -t build-${BUILD_NUMBER}/test-reports
+
+# Later stages fetch required artifacts
+git artifact fetch-co -t build-${BUILD_NUMBER}/artifacts
+
+
+ +
+

Embedded Development

+

Manage firmware images, toolchains, and development dependencies across teams.

+
+ 
# Store firmware for different targets
+git artifact add-n-push -t firmware-v2.1.0/arm
+git artifact add-n-push -t firmware-v2.1.0/x86
+
+# Developers fetch target-specific firmware
+git artifact fetch-co-latest --regex 'firmware-v*.*\/arm'
+
+
+ +
+

Source Code Dependencies

+

Add source code references to artifacts for debugging and traceability.

+
+ 
# Include source code with artifacts
+git submodule add <source-repo> src
+git artifact add-n-push -t v1.0/with-source
+
+# Full traceability and debugging capability
+git artifact fetch-co -t v1.0/with-source
+
+
+
+
+
+ + +
+
+

API Reference

+
+
+

Repository Management

+
+

init

+

Initialize a new artifact repository

+ 
git artifact init --url <remote_url> --path <local_path>
+
+ --url Remote repository URL
+ --path Local directory path
+ --branch Use branch mode (optional) +
+
+ +
+

clone

+

Clone an existing artifact repository

+ 
git artifact clone --url <remote_url> --path <local_path>
+
+ --url Remote repository URL
+ --path Local directory path +
+
+
+ +
+

Artifact Operations

+
+

add-n-push

+

Add files, commit, and push with tag

+ 
git artifact add-n-push -t <tag_name>
+
+ -t, --tag Tag name for the artifact
+ -b, --branch Use branch mode (optional) +
+
+ +
+

fetch-co

+

Fetch and checkout specific tag

+ 
git artifact fetch-co -t <tag_name>
+
+ -t, --tag Tag name to fetch and checkout +
+
+ +
+

fetch-co-latest

+

Fetch and checkout latest matching tag

+ 
git artifact fetch-co-latest --regex <pattern>
+
+ -r, --regex Regex pattern for tag matching +
+
+ +
+

find-latest

+

Find latest tag matching pattern

+ 
git artifact find-latest -r <pattern>
+
+ -r, --regex Regex pattern for tag matching +
+
+
+ +
+

Utility Commands

+
+

reset

+

Reset workspace and branches

+ 
git artifact reset
+
+ +
+

fetch-tags

+

Fetch all tags pointing to specific SHA1

+ 
git artifact fetch-tags -s <sha1>
+
+ -s, --sha1 SHA1 to get tags from +
+
+
+
+
+
+ + +
+
+

Installation

+
+
+
1
+
+

Download git-artifact

+

Clone the repository or download the script directly:

+ 
git clone https://github.com/Praqma/git-artifact.git
+cd git-artifact
+
+
+ +
+
2
+
+

Add to PATH

+

Make git-artifact available in your PATH:

+ 
# Option 1: Copy to system PATH
+sudo cp git-artifact /usr/local/bin/
+
+# Option 2: Add current directory to PATH
+export PATH=$PATH:$(pwd)
+
+
+ +
+
3
+
+

Verify Installation

+

Test that git-artifact is properly installed:

+ 
git artifact --help
+
+
+ +
+
4
+
+

Prerequisites

+

Ensure you have the required permissions:

+
    +
  • Git push rights to create tags
    • +
  • Git delete rights for tag cleanup (optional)
    • +
  • Bash version 4.3 or higher
    • +
+
+
+
+ +
+

Quick Start

+

Get started with your first artifact repository:

+ 
# Initialize a new artifact repository
+git artifact init --url=https://github.com/yourorg/my-artifacts.git --path ./my-artifacts
+
+# Add some files and create your first artifact
+cd my-artifacts
+echo "Hello World" > hello.txt
+git artifact add-n-push -t v1.0.0
+
+# Clone and fetch from another location
+git artifact clone --url=https://github.com/yourorg/my-artifacts.git --path ./consumer
+cd consumer
+git artifact fetch-co-latest --regex 'v*.*'
+
+
+
+
+ + + + + + + + \ No newline at end of file diff --git a/docs/manifest.json b/docs/manifest.json new file mode 100644 index 0000000..f698603 --- /dev/null +++ b/docs/manifest.json @@ -0,0 +1,20 @@ +{ + "name": "git-artifact Showcase", + "short_name": "git-artifact", + "description": "Interactive showcase for git-artifact - Git-based artifact management tool", + "start_url": "/git-artifact/", + "display": "standalone", + "background_color": "#667eea", + "theme_color": "#667eea", + "orientation": "portrait-primary", + "icons": [ + { + "src": "favicon.svg", + "sizes": "any", + "type": "image/svg+xml" + } + ], + "categories": ["developer", "tools", "utilities"], + "lang": "en", + "scope": "/git-artifact/" +} \ No newline at end of file diff --git a/docs/script.js b/docs/script.js new file mode 100644 index 0000000..ed20584 --- /dev/null +++ b/docs/script.js @@ -0,0 +1,288 @@ +// DOM Elements +const hamburger = document.querySelector('.hamburger'); +const navMenu = document.querySelector('.nav-menu'); +const navLinks = document.querySelectorAll('.nav-link'); +const tabBtns = document.querySelectorAll('.tab-btn'); +const tabPanels = document.querySelectorAll('.tab-panel'); +const copyBtns = document.querySelectorAll('.copy-btn'); + +// Mobile Navigation Toggle +hamburger?.addEventListener('click', () => { + hamburger.classList.toggle('active'); + navMenu.classList.toggle('active'); +}); + +// Close mobile menu when clicking on a link +navLinks.forEach(link => { + link.addEventListener('click', () => { + hamburger?.classList.remove('active'); + navMenu?.classList.remove('active'); + }); +}); + +// Smooth scrolling for navigation links +navLinks.forEach(link => { + link.addEventListener('click', (e) => { + e.preventDefault(); + const targetId = link.getAttribute('href'); + const targetSection = document.querySelector(targetId); + + if (targetSection) { + const navHeight = document.querySelector('.navbar').offsetHeight; + const targetPosition = targetSection.offsetTop - navHeight; + + window.scrollTo({ + top: targetPosition, + behavior: 'smooth' + }); + } + }); +}); + +// Tab functionality for demo section +tabBtns.forEach(btn => { + btn.addEventListener('click', () => { + const targetTab = btn.dataset.tab; + + // Remove active class from all tabs and panels + tabBtns.forEach(tab => tab.classList.remove('active')); + tabPanels.forEach(panel => panel.classList.remove('active')); + + // Add active class to clicked tab and corresponding panel + btn.classList.add('active'); + document.getElementById(`${targetTab}-tab`).classList.add('active'); + }); +}); + +// Copy to clipboard functionality +copyBtns.forEach(btn => { + btn.addEventListener('click', async () => { + const textToCopy = btn.dataset.copy; + + try { + await navigator.clipboard.writeText(textToCopy); + + // Visual feedback + const originalText = btn.textContent; + btn.textContent = 'Copied!'; + btn.classList.add('copy-success'); + + setTimeout(() => { + btn.textContent = originalText; + btn.classList.remove('copy-success'); + }, 1000); + } catch (err) { + // Fallback for older browsers + const textArea = document.createElement('textarea'); + textArea.value = textToCopy; + document.body.appendChild(textArea); + textArea.select(); + document.execCommand('copy'); + document.body.removeChild(textArea); + + // Visual feedback + const originalText = btn.textContent; + btn.textContent = 'Copied!'; + btn.classList.add('copy-success'); + + setTimeout(() => { + btn.textContent = originalText; + btn.classList.remove('copy-success'); + }, 1000); + } + }); +}); + +// Navbar scroll effect +let lastScrollTop = 0; +const navbar = document.querySelector('.navbar'); + +window.addEventListener('scroll', () => { + const scrollTop = window.pageYOffset || document.documentElement.scrollTop; + + // Add background blur when scrolling + if (scrollTop > 100) { + navbar.style.background = 'rgba(255, 255, 255, 0.95)'; + navbar.style.backdropFilter = 'blur(10px)'; + } else { + navbar.style.background = '#fff'; + navbar.style.backdropFilter = 'none'; + } + + lastScrollTop = scrollTop; +}); + +// Intersection Observer for fade-in animations +const observerOptions = { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' +}; + +const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('fade-in-up'); + } + }); +}, observerOptions); + +// Observe sections for animation +document.querySelectorAll('.section').forEach(section => { + observer.observe(section); +}); + +// Observe cards and other elements +document.querySelectorAll('.feature-card, .use-case-card, .command-group, .install-step').forEach(element => { + observer.observe(element); +}); + +// Active navigation highlighting based on scroll position +const sections = document.querySelectorAll('.section'); +const navItems = document.querySelectorAll('.nav-link'); + +window.addEventListener('scroll', () => { + let current = ''; + const scrollPos = window.pageYOffset + 200; + + sections.forEach(section => { + const sectionTop = section.offsetTop; + const sectionHeight = section.clientHeight; + + if (scrollPos >= sectionTop && scrollPos < sectionTop + sectionHeight) { + current = section.getAttribute('id'); + } + }); + + navItems.forEach(item => { + item.classList.remove('active'); + if (item.getAttribute('href') === `#${current}`) { + item.classList.add('active'); + } + }); +}); + +// Enhanced git graph animation +document.addEventListener('DOMContentLoaded', () => { + const commits = document.querySelectorAll('.commit'); + + commits.forEach((commit, index) => { + commit.style.animationDelay = `${index * 0.1}s`; + commit.classList.add('fade-in-up'); + }); +}); + +// Interactive command builder (future enhancement) +class CommandBuilder { + constructor() { + this.commands = { + init: { + base: 'git artifact init', + options: ['--url', '--path', '--branch'] + }, + clone: { + base: 'git artifact clone', + options: ['--url', '--path'] + }, + 'add-n-push': { + base: 'git artifact add-n-push', + options: ['-t', '-b'] + }, + 'fetch-co': { + base: 'git artifact fetch-co', + options: ['-t'] + }, + 'fetch-co-latest': { + base: 'git artifact fetch-co-latest', + options: ['--regex'] + }, + 'find-latest': { + base: 'git artifact find-latest', + options: ['-r'] + } + }; + } + + buildCommand(command, options = {}) { + if (!this.commands[command]) { + return null; + } + + let cmd = this.commands[command].base; + + Object.entries(options).forEach(([key, value]) => { + if (value && this.commands[command].options.includes(key)) { + cmd += ` ${key}=${value}`; + } + }); + + return cmd; + } +} + +// Initialize command builder +const commandBuilder = new CommandBuilder(); + +// Performance optimization: Debounce scroll events +function debounce(func, wait) { + let timeout; + return function executedFunction(...args) { + const later = () => { + clearTimeout(timeout); + func(...args); + }; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + }; +} + +// Apply debouncing to scroll events +const debouncedScrollHandler = debounce(() => { + // Scroll handling code here if needed +}, 16); // ~60fps + +// Keyboard navigation support +document.addEventListener('keydown', (e) => { + if (e.key === 'Escape') { + // Close mobile menu on Escape + hamburger?.classList.remove('active'); + navMenu?.classList.remove('active'); + } +}); + +// Focus management for accessibility +const focusableElements = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'; + +function trapFocus(element) { + const focusableContent = element.querySelectorAll(focusableElements); + const firstFocusableElement = focusableContent[0]; + const lastFocusableElement = focusableContent[focusableContent.length - 1]; + + document.addEventListener('keydown', function(e) { + if (e.key === 'Tab') { + if (e.shiftKey) { + if (document.activeElement === firstFocusableElement) { + lastFocusableElement.focus(); + e.preventDefault(); + } + } else { + if (document.activeElement === lastFocusableElement) { + firstFocusableElement.focus(); + e.preventDefault(); + } + } + } + }); +} + +// Initialize when DOM is loaded +document.addEventListener('DOMContentLoaded', () => { + // Add loading animation to page elements + document.body.classList.add('loaded'); + + // Initialize syntax highlighting if Prism is available + if (typeof Prism !== 'undefined') { + Prism.highlightAll(); + } + + console.log('git-artifact showcase loaded successfully!'); +}); \ No newline at end of file diff --git a/docs/styles.css b/docs/styles.css new file mode 100644 index 0000000..765ccf9 --- /dev/null +++ b/docs/styles.css @@ -0,0 +1,728 @@ +/* Reset and Base Styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif; + line-height: 1.6; + color: #333; + background-color: #f8f9fa; +} + +/* Navigation */ +.navbar { + background: #fff; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); + position: fixed; + top: 0; + width: 100%; + z-index: 1000; + transition: all 0.3s ease; +} + +.nav-container { + max-width: 1200px; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 1rem; + height: 70px; +} + +.nav-brand h1 { + color: #2c3e50; + font-size: 1.8rem; + font-weight: 700; +} + +.nav-subtitle { + color: #7f8c8d; + font-size: 0.9rem; + margin-left: 0.5rem; +} + +.nav-menu { + display: flex; + list-style: none; + gap: 2rem; +} + +.nav-link { + text-decoration: none; + color: #2c3e50; + font-weight: 500; + transition: color 0.3s ease; + padding: 0.5rem 0; + position: relative; +} + +.nav-link:hover { + color: #3498db; +} + +.nav-link::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 0; + height: 2px; + background: #3498db; + transition: width 0.3s ease; +} + +.nav-link:hover::after { + width: 100%; +} + +.hamburger { + display: none; + flex-direction: column; + cursor: pointer; +} + +.hamburger span { + width: 25px; + height: 3px; + background: #2c3e50; + margin: 3px 0; + transition: 0.3s; +} + +/* Layout */ +main { + margin-top: 70px; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 1rem; +} + +.section { + padding: 4rem 0; +} + +.section:nth-child(even) { + background: #fff; +} + +/* Hero Section */ +.hero { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + padding: 6rem 0; + text-align: center; +} + +.hero-content h1 { + font-size: 3.5rem; + font-weight: 700; + margin-bottom: 1rem; + text-shadow: 0 2px 4px rgba(0,0,0,0.3); +} + +.hero-subtitle { + font-size: 1.4rem; + margin-bottom: 3rem; + opacity: 0.9; + max-width: 600px; + margin-left: auto; + margin-right: auto; +} + +.hero-buttons { + display: flex; + gap: 1rem; + justify-content: center; + margin-bottom: 4rem; +} + +.btn { + display: inline-block; + padding: 1rem 2rem; + text-decoration: none; + border-radius: 50px; + font-weight: 600; + transition: all 0.3s ease; + border: 2px solid transparent; +} + +.btn-primary { + background: #3498db; + color: white; + border-color: #3498db; +} + +.btn-primary:hover { + background: transparent; + border-color: #3498db; + transform: translateY(-2px); + box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3); +} + +.btn-secondary { + background: transparent; + color: white; + border-color: white; +} + +.btn-secondary:hover { + background: white; + color: #667eea; + transform: translateY(-2px); + box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3); +} + +/* Feature Cards */ +.hero-features { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + margin-bottom: 4rem; +} + +.feature-card { + background: rgba(255, 255, 255, 0.1); + padding: 2rem; + border-radius: 10px; + backdrop-filter: blur(10px); + text-align: center; +} + +.feature-card h3 { + font-size: 1.2rem; + margin-bottom: 1rem; +} + +/* Concept Diagram */ +.concept-diagram { + background: rgba(255, 255, 255, 0.1); + padding: 2rem; + border-radius: 15px; + backdrop-filter: blur(10px); + margin-top: 3rem; +} + +.concept-diagram h3 { + text-align: center; + margin-bottom: 2rem; + font-size: 1.5rem; +} + +.git-graph { + display: flex; + flex-direction: column; + gap: 1rem; + max-width: 600px; + margin: 0 auto; +} + +.commit-row { + display: flex; + gap: 1rem; + justify-content: center; +} + +.commit { + background: rgba(255, 255, 255, 0.2); + border: 2px solid rgba(255, 255, 255, 0.3); + border-radius: 20px; + padding: 0.5rem 1rem; + font-size: 0.9rem; + font-weight: 500; + min-width: 80px; + text-align: center; +} + +.commit.init, .commit.highlight { + background: rgba(52, 152, 219, 0.3); + border-color: #3498db; +} + +.diagram-caption { + text-align: center; + margin-top: 1.5rem; + font-style: italic; + opacity: 0.8; +} + +/* Demo Section */ +.demo-container { + background: white; + border-radius: 15px; + box-shadow: 0 10px 30px rgba(0,0,0,0.1); + overflow: hidden; + margin-top: 2rem; +} + +.demo-tabs { + display: flex; + background: #f8f9fa; + border-bottom: 1px solid #dee2e6; +} + +.tab-btn { + flex: 1; + padding: 1rem; + border: none; + background: transparent; + cursor: pointer; + font-weight: 500; + transition: all 0.3s ease; + border-bottom: 3px solid transparent; +} + +.tab-btn:hover { + background: #e9ecef; +} + +.tab-btn.active { + background: white; + border-bottom-color: #3498db; + color: #3498db; +} + +.demo-content { + padding: 2rem; +} + +.tab-panel { + display: none; +} + +.tab-panel.active { + display: block; +} + +.command-example { + position: relative; + margin: 1.5rem 0; +} + +.command-example pre { + background: #2d3748; + color: #e2e8f0; + padding: 1.5rem; + border-radius: 8px; + overflow-x: auto; + margin: 0; +} + +.copy-btn { + position: absolute; + top: 10px; + right: 10px; + background: #3498db; + color: white; + border: none; + border-radius: 5px; + padding: 0.5rem 1rem; + cursor: pointer; + font-size: 0.8rem; + transition: background 0.3s ease; +} + +.copy-btn:hover { + background: #2980b9; +} + +.explanation { + background: #f8f9fa; + padding: 1.5rem; + border-radius: 8px; + border-left: 4px solid #3498db; +} + +.explanation ul { + margin-top: 1rem; + padding-left: 1.5rem; +} + +/* Use Cases Grid */ +.use-cases-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + margin-top: 2rem; +} + +.use-case-card { + background: white; + padding: 2rem; + border-radius: 15px; + box-shadow: 0 5px 20px rgba(0,0,0,0.1); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.use-case-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 30px rgba(0,0,0,0.15); +} + +.use-case-card h3 { + color: #2c3e50; + margin-bottom: 1rem; + font-size: 1.3rem; +} + +.use-case-card p { + color: #7f8c8d; + margin-bottom: 1.5rem; +} + +.use-case-card .example pre { + background: #f8f9fa; + color: #2c3e50; + border: 1px solid #dee2e6; + padding: 1rem; + border-radius: 5px; + font-size: 0.9rem; +} + +/* API Reference */ +.api-commands { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + gap: 2rem; + margin-top: 2rem; +} + +.command-group { + background: white; + border-radius: 15px; + padding: 2rem; + box-shadow: 0 5px 20px rgba(0,0,0,0.1); +} + +.command-group h3 { + color: #2c3e50; + border-bottom: 2px solid #3498db; + padding-bottom: 0.5rem; + margin-bottom: 1.5rem; +} + +.command-item { + margin-bottom: 2rem; + padding-bottom: 1.5rem; + border-bottom: 1px solid #eee; +} + +.command-item:last-child { + border-bottom: none; + margin-bottom: 0; +} + +.command-item h4 { + color: #3498db; + font-size: 1.2rem; + margin-bottom: 0.5rem; + font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; +} + +.command-item p { + color: #7f8c8d; + margin-bottom: 1rem; +} + +.command-item pre { + background: #f8f9fa; + border: 1px solid #dee2e6; + padding: 1rem; + border-radius: 5px; + margin-bottom: 1rem; +} + +.options { + font-size: 0.9rem; + line-height: 1.8; +} + +.option { + font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; + background: #e9ecef; + padding: 0.2rem 0.4rem; + border-radius: 3px; + font-weight: 600; + color: #495057; +} + +/* Installation Steps */ +.install-steps { + margin-top: 2rem; +} + +.install-step { + display: flex; + align-items: flex-start; + gap: 2rem; + margin-bottom: 3rem; + background: white; + padding: 2rem; + border-radius: 15px; + box-shadow: 0 5px 20px rgba(0,0,0,0.1); +} + +.step-number { + background: #3498db; + color: white; + width: 40px; + height: 40px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + font-size: 1.2rem; + flex-shrink: 0; +} + +.step-content h3 { + color: #2c3e50; + margin-bottom: 1rem; +} + +.step-content p { + color: #7f8c8d; + margin-bottom: 1rem; +} + +.step-content ul { + color: #7f8c8d; + padding-left: 1.5rem; +} + +.step-content pre { + background: #f8f9fa; + border: 1px solid #dee2e6; + padding: 1rem; + border-radius: 5px; + margin-top: 1rem; +} + +.quick-start { + background: #e8f4fd; + padding: 2rem; + border-radius: 15px; + border-left: 5px solid #3498db; + margin-top: 3rem; +} + +.quick-start h3 { + color: #2c3e50; + margin-bottom: 1rem; +} + +.quick-start p { + color: #7f8c8d; + margin-bottom: 1.5rem; +} + +.quick-start pre { + background: white; + border: 1px solid #bee5eb; + padding: 1.5rem; + border-radius: 8px; +} + +/* Footer */ +.footer { + background: #2c3e50; + color: white; + padding: 3rem 0 1rem; +} + +.footer-content { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + margin-bottom: 2rem; +} + +.footer-section h3, .footer-section h4 { + margin-bottom: 1rem; + color: #3498db; +} + +.footer-section p { + color: #bdc3c7; + line-height: 1.6; +} + +.footer-section ul { + list-style: none; +} + +.footer-section ul li { + margin-bottom: 0.5rem; +} + +.footer-section ul li a { + color: #bdc3c7; + text-decoration: none; + transition: color 0.3s ease; +} + +.footer-section ul li a:hover { + color: #3498db; +} + +.footer-bottom { + border-top: 1px solid #34495e; + padding-top: 1rem; + text-align: center; + color: #95a5a6; +} + +/* Responsive Design */ +@media (max-width: 768px) { + .hamburger { + display: flex; + } + + .nav-menu { + position: fixed; + left: -100%; + top: 70px; + flex-direction: column; + background-color: white; + width: 100%; + text-align: center; + transition: 0.3s; + box-shadow: 0 10px 27px rgba(0,0,0,0.05); + padding: 2rem 0; + } + + .nav-menu.active { + left: 0; + } + + .hero-content h1 { + font-size: 2.5rem; + } + + .hero-subtitle { + font-size: 1.2rem; + } + + .hero-buttons { + flex-direction: column; + align-items: center; + } + + .hero-features { + grid-template-columns: 1fr; + } + + .demo-tabs { + flex-direction: column; + } + + .use-cases-grid { + grid-template-columns: 1fr; + } + + .api-commands { + grid-template-columns: 1fr; + } + + .install-step { + flex-direction: column; + text-align: center; + } + + .step-number { + align-self: center; + } + + .commit-row { + flex-wrap: wrap; + } + + .git-graph { + padding: 0 1rem; + } +} + +@media (max-width: 480px) { + .hero-content h1 { + font-size: 2rem; + } + + .container { + padding: 0 0.5rem; + } + + .section { + padding: 2rem 0; + } + + .hero { + padding: 3rem 0; + } +} + +/* Smooth Scrolling */ +html { + scroll-behavior: smooth; +} + +/* Loading Animation */ +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.fade-in-up { + animation: fadeInUp 0.6s ease-out; +} + +/* Copy Success Animation */ +@keyframes copySuccess { + 0% { background: #27ae60; } + 100% { background: #3498db; } +} + +.copy-success { + animation: copySuccess 0.5s ease; +} + +/* Section Headings */ +.section h2 { + font-size: 2.5rem; + color: #2c3e50; + text-align: center; + margin-bottom: 1rem; + position: relative; +} + +.section h2::after { + content: ''; + display: block; + width: 60px; + height: 4px; + background: #3498db; + margin: 1rem auto; + border-radius: 2px; +} + +.section > .container > p { + text-align: center; + font-size: 1.2rem; + color: #7f8c8d; + margin-bottom: 2rem; + max-width: 600px; + margin-left: auto; + margin-right: auto; +} \ No newline at end of file