Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SyncopatedX - Arch Linux Automation</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"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #0f172a; | |
| color: #e2e8f0; | |
| } | |
| .code-font { | |
| font-family: 'Fira Code', monospace; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #38bdf8, #818cf8, #c084fc); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .terminal-window { | |
| background: linear-gradient(145deg, #1e293b, #0f172a); | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); | |
| border-radius: 0.5rem; | |
| border: 1px solid #334155; | |
| } | |
| .terminal-header { | |
| background-color: #1e293b; | |
| border-top-left-radius: 0.5rem; | |
| border-top-right-radius: 0.5rem; | |
| border-bottom: 1px solid #334155; | |
| } | |
| .terminal-body { | |
| background-color: rgba(15, 23, 42, 0.8); | |
| } | |
| .agent-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3); | |
| } | |
| .glow { | |
| box-shadow: 0 0 15px rgba(56, 189, 248, 0.3); | |
| } | |
| .feature-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .feature-card:hover .feature-icon { | |
| transform: scale(1.1); | |
| } | |
| .animate-float { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .workflow-step { | |
| position: relative; | |
| } | |
| .workflow-step:not(:last-child):after { | |
| content: ''; | |
| position: absolute; | |
| left: 50%; | |
| bottom: -30px; | |
| height: 30px; | |
| width: 2px; | |
| background: linear-gradient(to bottom, #38bdf8, #818cf8); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="bg-slate-900/80 backdrop-blur-md border-b border-slate-800 fixed w-full z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <span class="text-2xl font-bold gradient-text">SyncopatedX</span> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="#features" class="text-slate-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Features</a> | |
| <a href="#agents" class="text-slate-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Agents</a> | |
| <a href="#workflow" class="text-slate-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Workflow</a> | |
| <a href="#get-started" class="text-slate-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Get Started</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-4 flex items-center md:ml-6"> | |
| <a href="https://github.com/SyncopatedX" target="_blank" class="text-slate-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium"> | |
| <i class="fab fa-github mr-1"></i> GitHub | |
| </a> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium ml-4"> | |
| <i class="fas fa-download mr-1"></i> Download | |
| </button> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex md:hidden"> | |
| <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-slate-400 hover:text-white hover:bg-slate-700 focus:outline-none"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="hidden md:hidden" id="mobile-menu"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#features" class="text-slate-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Features</a> | |
| <a href="#agents" class="text-slate-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Agents</a> | |
| <a href="#workflow" class="text-slate-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Workflow</a> | |
| <a href="#get-started" class="text-slate-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Get Started</a> | |
| <a href="https://github.com/SyncopatedX" target="_blank" class="text-slate-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium"> | |
| <i class="fab fa-github mr-1"></i> GitHub | |
| </a> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white block w-full text-left px-3 py-2 rounded-md text-base font-medium mt-2"> | |
| <i class="fas fa-download mr-1"></i> Download | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="relative pt-24 pb-20 px-4 sm:px-6 lg:pt-32 lg:pb-28 lg:px-8"> | |
| <div class="absolute inset-0"> | |
| <div class="absolute inset-y-0 left-0 w-1/2 bg-slate-800/50"></div> | |
| </div> | |
| <div class="relative max-w-7xl mx-auto"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight mb-6"> | |
| <span class="block gradient-text">Automate Your</span> | |
| <span class="block text-white">Arch Linux Setup</span> | |
| </h1> | |
| <p class="mt-5 text-lg text-slate-300 max-w-3xl"> | |
| SyncopatedX is a cutting-edge collection of tools and configurations designed to streamline the creation and setup of tailored Arch Linux environments for development, content creation, and virtualization. | |
| </p> | |
| <div class="mt-8 flex flex-col sm:flex-row gap-4"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md text-sm font-medium flex items-center justify-center"> | |
| <i class="fas fa-play mr-2"></i> Quick Start | |
| </button> | |
| <button class="bg-slate-700 hover:bg-slate-600 text-white px-6 py-3 rounded-md text-sm font-medium flex items-center justify-center"> | |
| <i class="fas fa-book mr-2"></i> Documentation | |
| </button> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="terminal-window overflow-hidden animate-float"> | |
| <div class="terminal-header px-4 py-2 flex items-center"> | |
| <div class="flex space-x-2"> | |
| <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-slate-300 text-xs mx-auto code-font">syncopatedx ~/ansible-workstation-arch</div> | |
| </div> | |
| <div class="terminal-body p-4 code-font text-sm"> | |
| <div class="text-green-400">$ ansible-playbook main.yml</div> | |
| <div class="text-blue-400 mt-2">PLAY [Configure Arch Linux Workstation] *****************</div> | |
| <div class="text-blue-400">TASK [Gathering Facts] *************************************</div> | |
| <div class="text-green-400">ok: [localhost]</div> | |
| <div class="text-blue-400">TASK [base-system : Install base packages] ***************</div> | |
| <div class="text-green-400">changed: [localhost] => (item=zsh kitty ranger)</div> | |
| <div class="text-blue-400">TASK [dev-tools : Install Ruby/RVM] **********************</div> | |
| <div class="text-green-400">changed: [localhost]</div> | |
| <div class="text-blue-400">TASK [containerization : Setup Docker] *****************</div> | |
| <div class="text-green-400">changed: [localhost]</div> | |
| <div class="text-blue-400 mt-2">PLAY RECAP *******************************************</div> | |
| <div class="text-green-400">localhost : ok=4 changed=3 unreachable=0 failed=0</div> | |
| <div class="text-green-400 mt-2">$ <span class="blink">_</span></div> | |
| </div> | |
| </div> | |
| <div class="absolute -bottom-6 -right-6 w-32 h-32 rounded-full bg-blue-600/20 blur-xl"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <div id="features" class="py-16 bg-slate-900/50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-extrabold text-white sm:text-4xl"> | |
| <span class="gradient-text">Key Features</span> | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-slate-300 mx-auto"> | |
| Everything you need to automate your perfect Arch Linux setup | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="feature-card bg-slate-800/50 rounded-xl p-6 border border-slate-700 hover:border-blue-500 transition-all duration-300"> | |
| <div class="feature-icon w-12 h-12 rounded-lg bg-blue-600/20 flex items-center justify-center text-blue-400 mb-4"> | |
| <i class="fas fa-cogs text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-white mb-2">Ansible Automation</h3> | |
| <p class="text-slate-300"> | |
| Comprehensive Ansible collection to automatically configure a development-focused workstation with roles for base system, user environment, containerization, and more. | |
| </p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="feature-card bg-slate-800/50 rounded-xl p-6 border border-slate-700 hover:border-purple-500 transition-all duration-300"> | |
| <div class="feature-icon w-12 h-12 rounded-lg bg-purple-600/20 flex items-center justify-center text-purple-400 mb-4"> | |
| <i class="fas fa-cube text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-white mb-2">Custom ISO Building</h3> | |
| <p class="text-slate-300"> | |
| Create personalized Arch Linux ISO images with automated package resolution, airootfs customization, and theme integration. | |
| </p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="feature-card bg-slate-800/50 rounded-xl p-6 border border-slate-700 hover:border-indigo-500 transition-all duration-300"> | |
| <div class="feature-icon w-12 h-12 rounded-lg bg-indigo-600/20 flex items-center justify-center text-indigo-400 mb-4"> | |
| <i class="fas fa-robot text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-white mb-2">AI Agent Crew</h3> | |
| <p class="text-slate-300"> | |
| Specialized AI agents handle each aspect of the ISO creation process, from requirement analysis to final testing and documentation. | |
| </p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="feature-card bg-slate-800/50 rounded-xl p-6 border border-slate-700 hover:border-green-500 transition-all duration-300"> | |
| <div class="feature-icon w-12 h-12 rounded-lg bg-green-600/20 flex items-center justify-center text-green-400 mb-4"> | |
| <i class="fas fa-code text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-white mb-2">Development Tools</h3> | |
| <p class="text-slate-300"> | |
| Pre-configured with all essential development tools including Ruby/RVM, Docker, Libvirt/KVM, and various utilities. | |
| </p> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="feature-card bg-slate-800/50 rounded-xl p-6 border border-slate-700 hover:border-pink-500 transition-all duration-300"> | |
| <div class="feature-icon w-12 h-12 rounded-lg bg-pink-600/20 flex items-center justify-center text-pink-400 mb-4"> | |
| <i class="fas fa-palette text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-white mb-2">UI/Theme Customization</h3> | |
| <p class="text-slate-300"> | |
| Design a dynamic and user-friendly interface for your ISO with custom themes and dashboards. | |
| </p> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="feature-card bg-slate-800/50 rounded-xl p-6 border border-slate-700 hover:border-yellow-500 transition-all duration-300"> | |
| <div class="feature-icon w-12 h-12 rounded-lg bg-yellow-600/20 flex items-center justify-center text-yellow-400 mb-4"> | |
| <i class="fas fa-brain text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-white mb-2">GenAI Integration</h3> | |
| <p class="text-slate-300"> | |
| Built-in GenAI assistant for interactive support and monitoring agent for real-time system health reports. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Agents Section --> | |
| <div id="agents" class="py-16 bg-slate-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-extrabold text-white sm:text-4xl"> | |
| <span class="gradient-text">Specialized AI Agents</span> | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-slate-300 mx-auto"> | |
| Meet the crew that powers your automated Arch Linux setup | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> | |
| <!-- Agent 1 --> | |
| <div class="agent-card bg-slate-800 rounded-lg overflow-hidden shadow-lg border border-slate-700 hover:border-blue-500 transition-all duration-300"> | |
| <div class="bg-blue-900/30 px-4 py-3 border-b border-slate-700"> | |
| <h3 class="text-lg font-semibold text-white flex items-center"> | |
| <i class="fas fa-chess-queen mr-2 text-blue-400"></i> Orchestrator | |
| </h3> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-slate-300 text-sm"> | |
| Manages the end-to-end workflow and aggregates outputs from all agents to ensure a seamless ISO creation process. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Agent 2 --> | |
| <div class="agent-card bg-slate-800 rounded-lg overflow-hidden shadow-lg border border-slate-700 hover:border-purple-500 transition-all duration-300"> | |
| <div class="bg-purple-900/30 px-4 py-3 border-b border-slate-700"> | |
| <h3 class="text-lg font-semibold text-white flex items-center"> | |
| <i class="fas fa-search mr-2 text-purple-400"></i> Requirement Analysis | |
| </h3> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-slate-300 text-sm"> | |
| Parses user requirements and creates a structured configuration for the ISO building process. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Agent 3 --> | |
| <div class="agent-card bg-slate-800 rounded-lg overflow-hidden shadow-lg border border-slate-700 hover:border-green-500 transition-all duration-300"> | |
| <div class="bg-green-900/30 px-4 py-3 border-b border-slate-700"> | |
| <h3 class="text-lg font-semibold text-white flex items-center"> | |
| <i class="fas fa-boxes mr-2 text-green-400"></i> Package Specialist | |
| </h3> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-slate-300 text-sm"> | |
| Determines the optimal package list and generates core Archiso configuration files. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Agent 4 --> | |
| <div class="agent-card bg-slate-800 rounded-lg overflow-hidden shadow-lg border border-slate-700 hover:border-yellow-500 transition-all duration-300"> | |
| <div class="bg-yellow-900/30 px-4 py-3 border-b border-slate-700"> | |
| <h3 class="text-lg font-semibold text-white flex items-center"> | |
| <i class="fas fa-file-code mr-2 text-yellow-400"></i> Airootfs Specialist | |
| </h3> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-slate-300 text-sm"> | |
| Integrates custom files into the Airootfs overlay and creates tailored bootstrapping scripts. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Agent 5 --> | |
| <div class="agent-card bg-slate-800 rounded-lg overflow-hidden shadow-lg border border-slate-700 hover:border-red-500 transition-all duration-300"> | |
| <div class="bg-red-900/30 px-4 py-3 border-b border-slate-700"> | |
| <h3 class="text-lg font-semibold text-white flex items-center"> | |
| <i class="fas fa-hammer mr-2 text-red-400"></i> Build Execution | |
| </h3> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-slate-300 text-sm"> | |
| Executes the mkarchiso build process and runs automated tests to ensure ISO quality. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Agent 6 --> | |
| <div class="agent-card bg-slate-800 rounded-lg overflow-hidden shadow-lg border border-slate-700 hover:border-pink-500 transition-all duration-300"> | |
| <div class="bg-pink-900/30 px-4 py-3 border-b border-slate-700"> | |
| <h3 class="text-lg font-semibold text-white flex items-center"> | |
| <i class="fas fa-paint-brush mr-2 text-pink-400"></i> UI/Theme Design | |
| </h3> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-slate-300 text-sm"> | |
| Designs and customizes the UI/dashboard for a polished user experience. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Agent 7 --> | |
| <div class="agent-card bg-slate-800 rounded-lg overflow-hidden shadow-lg border border-slate-700 hover:border-indigo-500 transition-all duration-300"> | |
| <div class="bg-indigo-900/30 px-4 py-3 border-b border-slate-700"> | |
| <h3 class="text-lg font-semibold text-white flex items-center"> | |
| <i class="fas fa-code mr-2 text-indigo-400"></i> Ansible Developer | |
| </h3> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-slate-300 text-sm"> | |
| Develops custom Ansible collections for post-deployment automation tasks. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Agent 8 --> | |
| <div class="agent-card bg-slate-800 rounded-lg overflow-hidden shadow-lg border border-slate-700 hover:border-teal-500 transition-all duration-300"> | |
| <div class="bg-teal-900/30 px-4 py-3 border-b border-slate-700"> | |
| <h3 class="text-lg font-semibold text-white flex items-center"> | |
| <i class="fas fa-book mr-2 text-teal-400"></i> Documentation Creator | |
| </h3> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-slate-300 text-sm"> | |
| Generates comprehensive documentation for the ISO and its components. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <button class="bg-slate-800 hover:bg-slate-700 text-white px-6 py-3 rounded-md text-sm font-medium border border-slate-700 flex items-center mx-auto"> | |
| <i class="fas fa-users mr-2"></i> Meet the Full Crew | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Workflow Section --> | |
| <div id="workflow" class="py-16 bg-slate-900/50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-extrabold text-white sm:text-4xl"> | |
| <span class="gradient-text">Automated Workflow</span> | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-slate-300 mx-auto"> | |
| How SyncopatedX transforms requirements into a custom Arch Linux ISO | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> | |
| <!-- Step 1 --> | |
| <div class="workflow-step bg-slate-800/50 rounded-xl p-6 border border-blue-500/30 glow"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-blue-600/20 flex items-center justify-center text-blue-400 mr-4"> | |
| <span class="font-bold">1</span> | |
| </div> | |
| <h3 class="text-lg font-semibold text-white">Requirement Analysis</h3> | |
| </div> | |
| <p class="text-slate-300 text-sm"> | |
| The Requirement Analysis Specialist parses user requirements and creates a structured configuration. | |
| </p> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="workflow-step bg-slate-800/50 rounded-xl p-6 border border-purple-500/30 glow"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-purple-600/20 flex items-center justify-center text-purple-400 mr-4"> | |
| <span class="font-bold">2</span> | |
| </div> | |
| <h3 class="text-lg font-semibold text-white">Package Resolution</h3> | |
| </div> | |
| <p class="text-slate-300 text-sm"> | |
| The Package Specialist determines the optimal package list and generates core Archiso configuration files. | |
| </p> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="workflow-step bg-slate-800/50 rounded-xl p-6 border border-green-500/30 glow"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-green-600/20 flex items-center justify-center text-green-400 mr-4"> | |
| <span class="font-bold">3</span> | |
| </div> | |
| <h3 class="text-lg font-semibold text-white">Airootfs Customization</h3> | |
| </div> | |
| <p class="text-slate-300 text-sm"> | |
| The Airootfs Specialist integrates custom files and creates tailored bootstrapping scripts. | |
| </p> | |
| </div> | |
| <!-- Step 4 --> | |
| <div class="workflow-step bg-slate-800/50 rounded-xl p-6 border border-yellow-500/30 glow"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-yellow-600/20 flex items-center justify-center text-yellow-400 mr-4"> | |
| <span class="font-bold">4</span> | |
| </div> | |
| <h3 class="text-lg font-semibold text-white">ISO Build & Testing</h3> | |
| </div> | |
| <p class="text-slate-300 text-sm"> | |
| The Build Specialist executes mkarchiso and runs automated tests. | |
| </p> | |
| </div> | |
| <!-- Step 5 --> | |
| <div class="workflow-step bg-slate-800/50 rounded-xl p-6 border border-pink-500/30 glow"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-pink-600/20 flex items-center justify-center text-pink-400 mr-4"> | |
| <span class="font-bold">5</span> | |
| </div> | |
| <h3 class="text-lg font-semibold text-white">UI/Theme Customization</h3> | |
| </div> | |
| <p class="text-slate-300 text-sm"> | |
| The UI Designer creates a dynamic and user-friendly interface. | |
| </p> | |
| </div> | |
| <!-- Step 6 --> | |
| <div class="workflow-step bg-slate-800/50 rounded-xl p-6 border border-indigo-500/30 glow"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-600/20 flex items-center justify-center text-indigo-400 mr-4"> | |
| <span class="font-bold">6</span> | |
| </div> | |
| <h3 class="text-lg font-semibold text-white">Ansible Development</h3> | |
| </div> | |
| <p class="text-slate-300 text-sm"> | |
| The Ansible Developer creates collections for post-deployment tasks. | |
| </p> | |
| </div> | |
| <!-- Step 7 --> | |
| <div class="workflow-step bg-slate-800/50 rounded-xl p-6 border border-teal-500/30 glow"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-teal-600/20 flex items-center justify-center text-teal-400 mr-4"> | |
| <span class="font-bold">7</span> | |
| </div> | |
| <h3 class="text-lg font-semibold text-white">Documentation</h3> | |
| </div> | |
| <p class="text-slate-300 text-sm"> | |
| The Documentation Creator generates comprehensive guides. | |
| </p> | |
| </div> | |
| <!-- Step 8 --> | |
| <div class="workflow-step bg-slate-800/50 rounded-xl p-6 border border-red-500/30 glow"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-red-600/20 flex items-center justify-center text-red-400 mr-4"> | |
| <span class="font-bold">8</span> | |
| </div> | |
| <h3 class="text-lg font-semibold text-white">Final Orchestration</h3> | |
| </div> | |
| <p class="text-slate-300 text-sm"> | |
| The Orchestrator aggregates all outputs and generates the final report. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Get Started Section --> | |
| <div id="get-started" class="py-16 bg-slate-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-extrabold text-white sm:text-4xl"> | |
| <span class="gradient-text">Get Started</span> | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-slate-300 mx-auto"> | |
| Begin your automated Arch Linux journey today | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <div class="terminal-window"> | |
| <div class="terminal-header px-4 py-2 flex items-center"> | |
| <div class="flex space-x-2"> | |
| <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-slate-300 text-xs mx-auto code-font">terminal ~/syncopatedx</div> | |
| </div> | |
| <div class="terminal-body p-4 code-font text-sm"> | |
| <div class="text-green-400"># Clone the repository</div> | |
| <div class="text-white">$ git clone https://github.com/SyncopatedX/ansible-workstation-arch.git</div> | |
| <div class="text-green-400 mt-4"># Navigate to the directory</div> | |
| <div class="text-white">$ cd ansible-workstation-arch</div> | |
| <div class="text-green-400 mt-4"># Install dependencies</div> | |
| <div class="text-white">$ python -m pip install -r requirements.txt</div> | |
| <div class="text-green-400 mt-4"># Run the playbook</div> | |
| <div class="text-white">$ ansible-playbook main.yml</div> | |
| <div class="text-slate-500 mt-4"># For custom ISO building:</div> | |
| <div class="text-white">$ ./syncopated-crew --init</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white mb-6">Choose Your Path</h3> | |
| <div class="space-y-4"> | |
| <div class="bg-slate-800/50 rounded-lg p-5 border border-slate-700 hover:border-blue-500 transition-all duration-300"> | |
| <h4 class="text-lg font-semibold text-white mb-2 flex items-center"> | |
| <i class="fas fa-laptop-code mr-3 text-blue-400"></i> Workstation Setup | |
| </h4> | |
| <p class="text-slate-300 text-sm mb-3"> | |
| Automatically configure a development-focused Arch Linux workstation with all essential tools. | |
| </p> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm font-medium"> | |
| <i class="fas fa-download mr-1"></i> Download Playbook | |
| </button> | |
| </div> | |
| <div class="bg-slate-800/50 rounded-lg p-5 border border-slate-700 hover:border-purple-500 transition-all duration-300"> | |
| <h4 class="text-lg font-semibold text-white mb-2 flex items-center"> | |
| <i class="fas fa-compact-disc mr-3 text-purple-400"></i> Custom ISO Builder | |
| </h4> | |
| <p class="text-slate-300 text-sm mb-3"> | |
| Create your own tailored Arch Linux ISO with the SyncopatedCrew AI agents. | |
| </p> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded text-sm font-medium"> | |
| <i class="fas fa-cogs mr-1"></i> Launch Builder | |
| </button> | |
| </div> | |
| <div class="bg-slate-800/50 rounded-lg p-5 border border-slate-700 hover:border-green-500 transition-all duration-300"> | |
| <h4 class="text-lg font-semibold text-white mb-2 flex items-center"> | |
| <i class="fas fa-book mr-3 text-green-400"></i> Documentation | |
| </h4> | |
| <p class="text-slate-300 text-sm mb-3"> | |
| Learn how to customize and extend SyncopatedX for your specific needs. | |
| </p> | |
| <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded text-sm font-medium"> | |
| <i class="fas fa-external-link-alt mr-1"></i> Read Docs | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Community Section --> | |
| <div class="py-16 bg-slate-900/50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-extrabold text-white sm:text-4xl"> | |
| <span class="gradient-text">Join Our Community</span> | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-slate-300 mx-auto"> | |
| Connect with other SyncopatedX users and contributors | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-slate-800/50 rounded-xl p-6 text-center border border-slate-700 hover:border-blue-500 transition-all duration-300"> | |
| <div class="w-16 h-16 rounded-full bg-blue-600/20 flex items-center justify-center text-blue-400 mx-auto mb-4"> | |
| <i class="fab fa-discord text-3xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-white mb-2">Discord</h3> | |
| <p class="text-slate-300 text-sm mb-4"> | |
| Chat with the community, get help, and share your creations. | |
| </p> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm font-medium"> | |
| Join Server | |
| </button> | |
| </div> | |
| <div class="bg-slate-800/50 rounded-xl p-6 text-center border border-slate-700 hover:border-purple-500 transition-all duration-300"> | |
| <div class="w-16 h-16 rounded-full bg-purple-600/20 flex items-center justify-center text-purple-400 mx-auto mb-4"> | |
| <i class="fab fa-github text-3xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-white mb-2">GitHub</h3> | |
| <p class="text-slate-300 text-sm mb-4"> | |
| Contribute to the project, report issues, or fork the code. | |
| </p> | |
| <button class="bg-slate-700 hover:bg-slate-600 text-white px-4 py-2 rounded text-sm font-medium"> | |
| View Repository | |
| </button> | |
| </div> | |
| <div class="bg-slate-800/50 rounded-xl p-6 text-center border border-slate-700 hover:border-red-500 transition-all duration-300"> | |
| <div class="w-16 h-16 rounded-full bg-red-600/20 flex items-center justify-center text-red-400 mx-auto mb-4"> | |
| <i class="fab fa-youtube text-3xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-white mb-2">YouTube</h3> | |
| <p class="text-slate-300 text-sm mb-4"> | |
| Watch tutorials, demos, and community showcases. | |
| </p> | |
| <button class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded text-sm font-medium"> | |
| Subscribe | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-slate-900 border-t border-slate-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-white mb-4">SyncopatedX</h3> | |
| <p class="text-slate-300 text-sm"> | |
| Automating Arch Linux setup for development, content creation, and virtualization. | |
| </p> | |
| <div class="flex space-x-4 mt-4"> | |
| <a href="#" class="text-slate-400 hover:text-white"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-slate-400 hover:text-white"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| <a href="#" class="text-slate-400 hover:text-white"> | |
| <i class="fab fa-discord"></i> | |
| </a> | |
| <a href="#" class="text-slate-400 hover:text-white"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-white mb-4">Resources</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-slate-300 hover:text-white text-sm">Documentation</a></li> | |
| <li><a href="#" class="text-slate-300 hover:text-white text-sm">Tutorials</a></li> | |
| <li><a href="#" class="text-slate-300 hover:text-white text-sm">Examples</a></li> | |
| <li><a href="#" class="text-slate-300 hover:text-white text-sm">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-white mb-4">Community</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-slate-300 hover:text-white text-sm">Discord</a></li> | |
| <li><a href="#" class="text-slate-300 hover:text-white text-sm">Forum</a></li> | |
| <li><a href="#" class="text-slate-300 hover:text-white text-sm">Contributing</a></li> | |
| <li><a href="#" class="text-slate-300 hover:text-white text-sm">Code of Conduct</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-white mb-4">Legal</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-slate-300 hover:text-white text-sm">Privacy Policy</a></li> | |
| <li><a href="#" class="text-slate-300 hover:text-white text-sm">Terms of Service</a></li> | |
| <li><a href="#" class="text-slate-300 hover:text-white text-sm">License</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-slate-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-slate-400 text-sm mb-4 md:mb-0"> | |
| © 2023 SyncopatedX. All rights reserved. | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-slate-400 hover:text-white text-sm">Status</a> | |
| <a href="#" class="text-slate-400 hover:text-white text-sm">Contact</a> | |
| <a href="#" class="text-slate-400 hover:text-white text-sm">Donate</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Terminal cursor blink animation | |
| function blinkCursor() { | |
| const cursor = document.querySelector('.blink'); | |
| if (cursor) { | |
| setInterval(() => { | |
| cursor.style.visibility = (cursor.style.visibility === 'hidden' ? '' : 'hidden'); | |
| }, 500); | |
| } | |
| } | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| // Initialize when DOM is loaded | |
| document.addEventListener('DOMContentLoaded', function() { | |
| blinkCursor(); | |
| }); | |
| </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/syncopatedx-workstation" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |