Spaces:
Running
Running
| <html lang="en" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>BlueprintsCLI: Semantic Code Snippet Management</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| mono: ['Fira Code', 'monospace'], | |
| }, | |
| colors: { | |
| primary: { | |
| light: '#6366f1', | |
| dark: '#818cf8', | |
| }, | |
| dark: { | |
| 900: '#0f172a', | |
| 800: '#1e293b', | |
| 700: '#334155', | |
| 600: '#475569', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .code-block { | |
| font-family: 'Fira Code', monospace; | |
| } | |
| .workflow-step { | |
| transition: all 0.3s ease; | |
| } | |
| .workflow-step:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .gradient-text { | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| color: transparent; | |
| background-image: linear-gradient(90deg, #6366f1, #818cf8); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 dark:bg-dark-900 text-gray-800 dark:text-gray-200 min-h-screen"> | |
| <header class="sticky top-0 z-50 bg-white/80 dark:bg-dark-900/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-800"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 rounded-md bg-primary-light dark:bg-primary-dark flex items-center justify-center"> | |
| <i class="fas fa-code text-white"></i> | |
| </div> | |
| <span class="text-xl font-bold">Blueprints<span class="gradient-text">CLI</span></span> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#features" class="hover:text-primary-light dark:hover:text-primary-dark transition">Features</a> | |
| <a href="#workflow" class="hover:text-primary-light dark:hover:text-primary-dark transition">Workflow</a> | |
| <a href="#technology" class="hover:text-primary-light dark:hover:text-primary-dark transition">Technology</a> | |
| <a href="#commands" class="hover:text-primary-light dark:hover:text-primary-dark transition">Commands</a> | |
| </nav> | |
| <div> | |
| <a href="#installation" class="bg-primary-light dark:bg-primary-dark text-white px-4 py-2 rounded-md hover:opacity-90 transition font-medium">Get Started</a> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-12"> | |
| <!-- Hero Section --> | |
| <section class="text-center py-16"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6"> | |
| <span class="gradient-text">BlueprintsCLI</span> | |
| </h1> | |
| <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-8"> | |
| A command-line tool for storing and finding code snippets using semantic search | |
| </p> | |
| <div class="flex justify-center space-x-4 mb-12"> | |
| <a href="#installation" class="bg-primary-light dark:bg-primary-dark text-white px-6 py-3 rounded-md hover:opacity-90 transition font-medium text-lg"> | |
| Installation Guide | |
| </a> | |
| <button onclick="toggleDemo()" class="border border-primary-light dark:border-primary-dark text-primary-light dark:text-primary-dark px-6 py-3 rounded-md hover:bg-primary-light/10 transition font-medium text-lg"> | |
| Live Demo | |
| </button> | |
| </div> | |
| <div class="max-w-4xl mx-auto bg-dark-800 rounded-xl overflow-hidden shadow-xl"> | |
| <div class="flex items-center px-4 py-2 bg-dark-700 border-b border-dark-600"> | |
| <div class="flex space-x-2 mr-4"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="text-sm text-gray-400">terminal</div> | |
| </div> | |
| <div class="p-4 code-block"> | |
| <div class="text-green-400 mb-2">$ blueprintsCLI submit ./snippet.js --lang=javascript</div> | |
| <div class="text-gray-400 mb-2">Analyzing code snippet...</div> | |
| <div class="text-gray-400 mb-2">Generated metadata:</div> | |
| <div class="ml-4 mb-2"> | |
| <div class="text-gray-300">Name: <span class="text-white">"React useState Hook Example"</span></div> | |
| <div class="text-gray-300">Description: <span class="text-white">"Demonstrates basic usage of React's useState hook for state management"</span></div> | |
| <div class="text-gray-300">Categories: <span class="text-white">["react", "hooks", "state-management"]</span></div> | |
| </div> | |
| <div class="text-green-400">Snippet stored successfully with ID: 5f8d3a7b</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-16"> | |
| <h2 class="text-3xl font-bold mb-12 text-center">Core Features</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-white dark:bg-dark-800 p-6 rounded-xl shadow-md border border-gray-200 dark:border-dark-700"> | |
| <div class="w-12 h-12 rounded-full bg-primary-light/10 dark:bg-primary-dark/10 flex items-center justify-center mb-4"> | |
| <i class="fas fa-upload text-primary-light dark:text-primary-dark text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Submit Code</h3> | |
| <p class="text-gray-600 dark:text-gray-400">Store code snippets with automatically generated metadata including name, description, and categories.</p> | |
| </div> | |
| <div class="bg-white dark:bg-dark-800 p-6 rounded-xl shadow-md border border-gray-200 dark:border-dark-700"> | |
| <div class="w-12 h-12 rounded-full bg-primary-light/10 dark:bg-primary-dark/10 flex items-center justify-center mb-4"> | |
| <i class="fas fa-search text-primary-light dark:text-primary-dark text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Semantic Search</h3> | |
| <p class="text-gray-600 dark:text-gray-400">Find snippets using natural language queries that understand the meaning behind your code.</p> | |
| </div> | |
| <div class="bg-white dark:bg-dark-800 p-6 rounded-xl shadow-md border border-gray-200 dark:border-dark-700"> | |
| <div class="w-12 h-12 rounded-full bg-primary-light/10 dark:bg-primary-dark/10 flex items-center justify-center mb-4"> | |
| <i class="fas fa-list text-primary-light dark:text-primary-dark text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Organized Listings</h3> | |
| <p class="text-gray-600 dark:text-gray-400">Browse all your stored snippets with their metadata in a structured, easily navigable format.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Workflow Section --> | |
| <section id="workflow" class="py-16"> | |
| <h2 class="text-3xl font-bold mb-12 text-center">Visual Workflow</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="workflow-step bg-white dark:bg-dark-800 p-6 rounded-xl shadow-md border border-gray-200 dark:border-dark-700"> | |
| <div class="text-center mb-4"> | |
| <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary-light/10 dark:bg-primary-dark/10 text-primary-light dark:text-primary-dark text-2xl"> | |
| 1 | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold mb-4 text-center">Input Code</h3> | |
| <div class="code-block bg-dark-800 rounded-lg p-4 mb-4"> | |
| <div class="text-green-400">$ blueprintsCLI submit ./auth-middleware.js</div> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-400">Submit your code snippet or file through the command line interface.</p> | |
| </div> | |
| <div class="workflow-step bg-white dark:bg-dark-800 p-6 rounded-xl shadow-md border border-gray-200 dark:border-dark-700"> | |
| <div class="text-center mb-4"> | |
| <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary-light/10 dark:bg-primary-dark/10 text-primary-light dark:text-primary-dark text-2xl"> | |
| 2 | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold mb-4 text-center">Process Metadata</h3> | |
| <div class="code-block bg-dark-800 rounded-lg p-4 mb-4"> | |
| <div class="text-gray-400">Generating metadata...</div> | |
| <div class="text-white">Name: "JWT Authentication Middleware"</div> | |
| <div class="text-white">Description: "Express middleware for JWT authentication"</div> | |
| <div class="text-white">Tags: ["nodejs", "authentication", "express"]</div> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-400">The tool analyzes your code and generates descriptive metadata automatically.</p> | |
| </div> | |
| <div class="workflow-step bg-white dark:bg-dark-800 p-6 rounded-xl shadow-md border border-gray-200 dark:border-dark-700"> | |
| <div class="text-center mb-4"> | |
| <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary-light/10 dark:bg-primary-dark/10 text-primary-light dark:text-primary-dark text-2xl"> | |
| 3 | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold mb-4 text-center">Search & Retrieve</h3> | |
| <div class="code-block bg-dark-800 rounded-lg p-4 mb-4"> | |
| <div class="text-green-400">$ blueprintsCLI search "how to verify JWT token"</div> | |
| <div class="text-white">Found 3 matching blueprints:</div> | |
| <div class="text-yellow-400 ml-4">1. JWT Authentication Middleware (nodejs)</div> | |
| <div class="text-yellow-400 ml-4">2. JWT Verification Utility (javascript)</div> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-400">Find your code later using natural language queries that understand the context.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Technology Section --> | |
| <section id="technology" class="py-16"> | |
| <h2 class="text-3xl font-bold mb-12 text-center">Powered By</h2> | |
| <div class="grid md:grid-cols-4 gap-6"> | |
| <div class="bg-white dark:bg-dark-800 p-6 rounded-xl shadow-md border border-gray-200 dark:border-dark-700 flex flex-col items-center"> | |
| <div class="w-16 h-16 mb-4"> | |
| <img src="https://www.postgresql.org/media/img/about/press/elephant.png" alt="PostgreSQL" class="w-full h-full object-contain"> | |
| </div> | |
| <h3 class="text-lg font-bold">PostgreSQL</h3> | |
| <p class="text-sm text-gray-600 dark:text-gray-400 text-center">With pgvector extension for efficient similarity search</p> | |
| </div> | |
| <div class="bg-white dark:bg-dark-800 p-6 rounded-xl shadow-md border border-gray-200 dark:border-dark-700 flex flex-col items-center"> | |
| <div class="w-16 h-16 mb-4"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Google_G_Logo.svg/2048px-Google_G_Logo.svg.png" alt="Google" class="w-full h-full object-contain"> | |
| </div> | |
| <h3 class="text-lg font-bold">Google Embeddings</h3> | |
| <p class="text-sm text-gray-600 dark:text-gray-400 text-center">text-embedding-004 model for semantic understanding</p> | |
| </div> | |
| <div class="bg-white dark:bg-dark-800 p-6 rounded-xl shadow-md border border-gray-200 dark:border-dark-700 flex flex-col items-center"> | |
| <div class="w-16 h-16 mb-4"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/OpenAI_Logo.svg/2560px-OpenAI_Logo.svg.png" alt="OpenAI" class="w-full h-full object-contain opacity-90"> | |
| </div> | |
| <h3 class="text-lg font-bold">OpenAI/Gemini</h3> | |
| <p class="text-sm text-gray-600 dark:text-gray-400 text-center">For metadata generation and AI-powered features</p> | |
| </div> | |
| <div class="bg-white dark:bg-dark-800 p-6 rounded-xl shadow-md border border-gray-200 dark:border-dark-700 flex flex-col items-center"> | |
| <div class="w-16 h-16 mb-4"> | |
| <i class="fas fa-terminal text-4xl text-primary-light dark:text-primary-dark"></i> | |
| </div> | |
| <h3 class="text-lg font-bold">CLI First</h3> | |
| <p class="text-sm text-gray-600 dark:text-gray-400 text-center">Designed for developer workflows with minimal friction</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Commands Section --> | |
| <section id="commands" class="py-16"> | |
| <h2 class="text-3xl font-bold mb-12 text-center">Command Reference</h2> | |
| <div class="bg-white dark:bg-dark-800 rounded-xl shadow-md border border-gray-200 dark:border-dark-700 overflow-hidden"> | |
| <div class="grid md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-gray-200 dark:divide-dark-700"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-upload mr-2 text-primary-light dark:text-primary-dark"></i> | |
| Submit a Snippet | |
| </h3> | |
| <div class="code-block bg-dark-800 rounded-lg p-4 mb-4"> | |
| <div class="text-green-400">$ blueprintsCLI submit [file_path]</div> | |
| <div class="text-gray-400">Options:</div> | |
| <div class="text-gray-400 ml-4">--lang, -l: Specify language</div> | |
| <div class="text-gray-400 ml-4">--name, -n: Custom name</div> | |
| <div class="text-gray-400 ml-4">--desc, -d: Custom description</div> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-400">Submit a code file or snippet to be stored with automatically generated metadata.</p> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-search mr-2 text-primary-light dark:text-primary-dark"></i> | |
| Search Snippets | |
| </h3> | |
| <div class="code-block bg-dark-800 rounded-lg p-4 mb-4"> | |
| <div class="text-green-400">$ blueprintsCLI search "query"</div> | |
| <div class="text-gray-400">Options:</div> | |
| <div class="text-gray-400 ml-4">--limit, -l: Result limit</div> | |
| <div class="text-gray-400 ml-4">--lang, -l: Filter by language</div> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-400">Find code snippets using natural language queries that understand the context of your code.</p> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-gray-200 dark:divide-dark-700"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-list mr-2 text-primary-light dark:text-primary-dark"></i> | |
| List Snippets | |
| </h3> | |
| <div class="code-block bg-dark-800 rounded-lg p-4 mb-4"> | |
| <div class="text-green-400">$ blueprintsCLI list</div> | |
| <div class="text-gray-400">Options:</div> | |
| <div class="text-gray-400 ml-4">--limit, -l: Result limit</div> | |
| <div class="text-gray-400 ml-4">--offset, -o: Pagination offset</div> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-400">View all stored snippets with their metadata in a structured format.</p> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-eye mr-2 text-primary-light dark:text-primary-dark"></i> | |
| View Snippet | |
| </h3> | |
| <div class="code-block bg-dark-800 rounded-lg p-4 mb-4"> | |
| <div class="text-green-400">$ blueprintsCLI view [id]</div> | |
| <div class="text-gray-400">Options:</div> | |
| <div class="text-gray-400 ml-4">--raw: Output raw code</div> | |
| <div class="text-gray-400 ml-4">--meta: Only metadata</div> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-400">Display the full details of a specific snippet including code and metadata.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Installation Section --> | |
| <section id="installation" class="py-16"> | |
| <div class="bg-white dark:bg-dark-800 rounded-xl shadow-md border border-gray-200 dark:border-dark-700 p-8"> | |
| <h2 class="text-3xl font-bold mb-6 text-center">Get Started with BlueprintsCLI</h2> | |
| <div class="max-w-3xl mx-auto"> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-download mr-2 text-primary-light dark:text-primary-dark"></i> | |
| Installation | |
| </h3> | |
| <div class="code-block bg-dark-800 rounded-lg p-4 mb-6"> | |
| <div class="text-green-400"># Using npm</div> | |
| <div class="text-white">npm install -g blueprints-cli</div> | |
| <div class="text-green-400 mt-2"># Or with yarn</div> | |
| <div class="text-white">yarn global add blueprints-cli</div> | |
| </div> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-cog mr-2 text-primary-light dark:text-primary-dark"></i> | |
| Configuration | |
| </h3> | |
| <div class="code-block bg-dark-800 rounded-lg p-4 mb-6"> | |
| <div class="text-green-400"># Set up your API keys</div> | |
| <div class="text-white">export BLUEPRINTS_OPENAI_KEY=your_key_here</div> | |
| <div class="text-white">export BLUEPRINTS_GEMINI_KEY=your_key_here</div> | |
| <div class="text-white">export DATABASE_URL=postgres://user:pass@host:port/db</div> | |
| </div> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-rocket mr-2 text-primary-light dark:text-primary-dark"></i> | |
| First Command | |
| </h3> | |
| <div class="code-block bg-dark-800 rounded-lg p-4 mb-6"> | |
| <div class="text-green-400"># Submit your first snippet</div> | |
| <div class="text-white">blueprintsCLI submit ./example.js</div> | |
| </div> | |
| <div class="text-center mt-8"> | |
| <a href="#" class="bg-primary-light dark:bg-primary-dark text-white px-8 py-3 rounded-md hover:opacity-90 transition font-medium text-lg inline-block"> | |
| View Full Documentation | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Demo Modal --> | |
| <div id="demoModal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 hidden"> | |
| <div class="bg-white dark:bg-dark-800 rounded-xl shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-hidden"> | |
| <div class="flex justify-between items-center px-6 py-4 border-b border-gray-200 dark:border-dark-700"> | |
| <h3 class="text-xl font-bold">Interactive Demo</h3> | |
| <button onclick="toggleDemo()" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-6 overflow-auto" style="max-height: calc(90vh - 120px)"> | |
| <div class="mb-8"> | |
| <h4 class="text-lg font-bold mb-3">Submit a Code Snippet</h4> | |
| <div class="flex flex-col md:flex-row gap-4"> | |
| <div class="flex-1"> | |
| <label class="block text-sm font-medium mb-1">Code Input</label> | |
| <textarea id="demoCode" class="w-full code-block bg-dark-800 rounded-lg p-4 h-40" spellcheck="false">function greet(name) { | |
| return `Hello, ${name}!`; | |
| }</textarea> | |
| </div> | |
| <div class="flex-1"> | |
| <label class="block text-sm font-medium mb-1">Options</label> | |
| <div class="bg-dark-800 rounded-lg p-4 h-40"> | |
| <div class="mb-2"> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" class="rounded border-gray-300 text-primary-light dark:text-primary-dark" checked> | |
| <span class="ml-2 text-sm">Auto-generate metadata</span> | |
| </label> | |
| </div> | |
| <div class="mb-2"> | |
| <label class="block text-sm mb-1">Language</label> | |
| <select class="w-full bg-dark-700 border border-dark-600 rounded px-3 py-1 text-sm"> | |
| <option>JavaScript</option> | |
| <option>Python</option> | |
| <option>TypeScript</option> | |
| <option>Go</option> | |
| <option>Rust</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button onclick="submitDemo()" class="mt-4 bg-primary-light dark:bg-primary-dark text-white px-4 py-2 rounded hover:opacity-90 transition"> | |
| Submit Snippet | |
| </button> | |
| </div> | |
| <div id="demoResults" class="hidden"> | |
| <h4 class="text-lg font-bold mb-3">Generated Metadata</h4> | |
| <div class="bg-dark-800 rounded-lg p-4 mb-6"> | |
| <div class="grid grid-cols-3 gap-4"> | |
| <div> | |
| <div class="text-sm text-gray-400">Name</div> | |
| <div class="text-white" id="demoName">Simple Greeting Function</div> | |
| </div> | |
| <div> | |
| <div class="text-sm text-gray-400">Language</div> | |
| <div class="text-white">JavaScript</div> | |
| </div> | |
| <div> | |
| <div class="text-sm text-gray-400">ID</div> | |
| <div class="text-white">a1b2c3d4</div> | |
| </div> | |
| <div class="col-span-3"> | |
| <div class="text-sm text-gray-400">Description</div> | |
| <div class="text-white" id="demoDesc">A simple function that takes a name parameter and returns a greeting string</div> | |
| </div> | |
| <div class="col-span-3"> | |
| <div class="text-sm text-gray-400">Categories</div> | |
| <div class="text-white">["utility", "functions", "strings"]</div> | |
| </div> | |
| </div> | |
| </div> | |
| <h4 class="text-lg font-bold mb-3">Try Searching</h4> | |
| <div class="flex mb-4"> | |
| <input type="text" id="demoSearch" placeholder="Search with natural language..." class="flex-1 code-block bg-dark-800 rounded-l-lg px-4 py-2 border-r-0"> | |
| <button onclick="searchDemo()" class="bg-primary-light dark:bg-primary-dark text-white px-4 py-2 rounded-r hover:opacity-90 transition"> | |
| Search | |
| </button> | |
| </div> | |
| <div id="demoSearchResults" class="bg-dark-800 rounded-lg p-4 hidden"> | |
| <div class="text-white mb-2">Found 1 matching blueprint:</div> | |
| <div class="pl-4 border-l-2 border-primary-light dark:border-primary-dark"> | |
| <div class="text-yellow-400 font-medium">Simple Greeting Function</div> | |
| <div class="text-sm text-gray-400">JavaScript utility function for creating greetings</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="bg-white dark:bg-dark-800 border-t border-gray-200 dark:border-dark-700 py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center space-x-2 mb-4 md:mb-0"> | |
| <div class="w-8 h-8 rounded-md bg-primary-light dark:bg-primary-dark flex items-center justify-center"> | |
| <i class="fas fa-code text-white"></i> | |
| </div> | |
| <span class="text-lg font-bold">Blueprints<span class="gradient-text">CLI</span></span> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-primary-light dark:hover:text-primary-dark transition"> | |
| <i class="fab fa-github text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-primary-light dark:hover:text-primary-dark transition"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-primary-light dark:hover:text-primary-dark transition"> | |
| <i class="fab fa-discord text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-8 pt-8 border-t border-gray-200 dark:border-dark-700 text-center text-sm text-gray-600 dark:text-gray-400"> | |
| <p>BlueprintsCLI is open-source and available under the MIT License.</p> | |
| <p class="mt-2">© 2023 BlueprintsCLI Project. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Toggle dark mode | |
| function toggleDarkMode() { | |
| document.documentElement.classList.toggle('dark'); | |
| localStorage.setItem('darkMode', document.documentElement.classList.contains('dark')); | |
| } | |
| // Check for saved dark mode preference | |
| if (localStorage.getItem('darkMode') === 'true') { | |
| document.documentElement.classList.add('dark'); | |
| } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { | |
| document.documentElement.classList.add('dark'); | |
| localStorage.setItem('darkMode', true); | |
| } | |
| // Demo modal functions | |
| function toggleDemo() { | |
| document.getElementById('demoModal').classList.toggle('hidden'); | |
| document.body.classList.toggle('overflow-hidden'); | |
| } | |
| function submitDemo() { | |
| const code = document.getElementById('demoCode').value; | |
| if (code.trim() === '') { | |
| alert('Please enter some code to submit'); | |
| return; | |
| } | |
| // Simple analysis for demo purposes | |
| let name = "Code Snippet"; | |
| let desc = "A useful code snippet"; | |
| if (code.includes('function')) { | |
| name = "Function: " + (code.match(/function\s+(\w+)/)?.[1] || 'Anonymous'); | |
| desc = "A function that " + ( | |
| code.includes('return') ? "returns a value" : | |
| code.includes('console.log') ? "logs output" : | |
| "performs an operation" | |
| ); | |
| } else if (code.includes('class')) { | |
| name = "Class: " + (code.match(/class\s+(\w+)/)?.[1] || 'Anonymous'); | |
| desc = "A class definition"; | |
| } | |
| document.getElementById('demoName').textContent = name; | |
| document.getElementById('demoDesc').textContent = desc; | |
| document.getElementById('demoResults').classList.remove('hidden'); | |
| } | |
| function searchDemo() { | |
| const query = document.getElementById('demoSearch').value; | |
| if (query.trim() === '') { | |
| alert('Please enter a search query'); | |
| return; | |
| } | |
| document.getElementById('demoSearchResults').classList.remove('hidden'); | |
| } | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=b08x/blueprintscli" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |