devsync-automator / index.html
Frakkin
Create the highest stand automation vehicle that utilizes Jira and GitHub integration, and synchronizes development across tools and uses automation to remove manual steps and shorten delivery time. Software that showcases various Model Context Protocol (MCP) servers that demonstrate the protocol’s capabilities and versatility - Initial Deployment
b192050 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DevSync Automator - Next-Gen Development Integration</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>
.gradient-bg {
background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.integration-icon {
transition: all 0.3s ease;
}
.integration-icon:hover {
transform: scale(1.1);
}
.mcp-server-card {
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
}
.mcp-server-card:hover {
background: rgba(255, 255, 255, 0.2);
}
.automation-pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(167, 119, 227, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(167, 119, 227, 0); }
100% { box-shadow: 0 0 0 0 rgba(167, 119, 227, 0); }
}
</style>
</head>
<body class="bg-gray-100 font-sans">
<!-- Header -->
<header class="gradient-bg text-white">
<div class="container mx-auto px-6 py-16">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0">
<h1 class="text-4xl md:text-6xl font-bold mb-4">DevSync Automator</h1>
<h2 class="text-xl md:text-2xl mb-6">The Ultimate Jira-GitHub Integration Platform</h2>
<p class="text-lg mb-8">Seamlessly synchronize your development workflow across tools with our Model Context Protocol (MCP) powered automation engine.</p>
<div class="flex space-x-4">
<button class="bg-white text-purple-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition duration-300">Get Started</button>
<button class="border border-white text-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-purple-600 transition duration-300">Live Demo</button>
</div>
</div>
<div class="md:w-1/2 relative">
<div class="bg-white rounded-xl p-6 shadow-2xl automation-pulse">
<div class="flex justify-between items-center mb-4">
<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-sm text-gray-600">DevSync Automator v2.0</div>
</div>
<div class="bg-gray-800 rounded-lg p-4 text-green-400 font-mono h-64 overflow-y-auto">
<p class="mb-2">$ automator sync --jira --github</p>
<p class="text-white">Initializing MCP servers...</p>
<p class="text-green-300">✓ Connected to Jira Cloud</p>
<p class="text-green-300">✓ Connected to GitHub Enterprise</p>
<p class="text-white">Analyzing 23 open PRs...</p>
<p class="text-green-300">✓ Created 15 Jira tickets from PRs</p>
<p class="text-green-300">✓ Updated 8 existing tickets</p>
<p class="text-white">Processing CI/CD pipeline...</p>
<p class="text-green-300">✓ Triggered builds for 5 pending deployments</p>
<p class="text-white">Synchronization complete!</p>
<p class="text-purple-300">Time saved: 4.7 hours</p>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Integration Showcase -->
<section class="py-16 bg-white">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-12">Powerful Integration Ecosystem</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Jira Integration -->
<div class="bg-gray-50 rounded-xl p-8 text-center card-hover">
<div class="bg-blue-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fab fa-jira text-blue-600 text-4xl integration-icon"></i>
</div>
<h3 class="text-xl font-semibold mb-4">Jira Automation</h3>
<p class="text-gray-600 mb-4">Automatically create, update, and transition Jira tickets based on GitHub activity.</p>
<ul class="text-left text-gray-600 space-y-2">
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> PR → Ticket sync</li>
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Commit → Worklog</li>
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Automated status updates</li>
</ul>
</div>
<!-- GitHub Integration -->
<div class="bg-gray-50 rounded-xl p-8 text-center card-hover">
<div class="bg-gray-800 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fab fa-github text-white text-4xl integration-icon"></i>
</div>
<h3 class="text-xl font-semibold mb-4">GitHub Intelligence</h3>
<p class="text-gray-600 mb-4">Enhance your GitHub workflow with Jira context and automated actions.</p>
<ul class="text-left text-gray-600 space-y-2">
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Ticket → Branch naming</li>
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> PR template generation</li>
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Automated label assignment</li>
</ul>
</div>
<!-- MCP Engine -->
<div class="bg-gray-50 rounded-xl p-8 text-center card-hover">
<div class="bg-purple-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fas fa-brain text-purple-600 text-4xl integration-icon"></i>
</div>
<h3 class="text-xl font-semibold mb-4">MCP Protocol</h3>
<p class="text-gray-600 mb-4">Model Context Protocol provides intelligent synchronization between tools.</p>
<ul class="text-left text-gray-600 space-y-2">
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Context-aware mapping</li>
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Conflict resolution</li>
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Custom workflow modeling</li>
</ul>
</div>
</div>
</div>
</section>
<!-- MCP Server Showcase -->
<section class="py-16 gradient-bg text-white">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-4">Model Context Protocol Servers</h2>
<p class="text-center text-xl mb-12 max-w-2xl mx-auto">Explore the versatility of our MCP implementation through these specialized servers</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- MCP Server 1 -->
<div class="mcp-server-card rounded-xl p-6 border border-white border-opacity-20 card-hover">
<div class="flex items-center mb-4">
<div class="bg-blue-500 rounded-full w-10 h-10 flex items-center justify-center mr-4">
<i class="fas fa-sync-alt"></i>
</div>
<h3 class="text-xl font-semibold">Sync Engine</h3>
</div>
<p class="text-white text-opacity-80 mb-4">Real-time bidirectional synchronization between Jira and GitHub with conflict resolution.</p>
<div class="flex flex-wrap gap-2">
<span class="bg-blue-500 bg-opacity-30 px-3 py-1 rounded-full text-sm">Webhooks</span>
<span class="bg-blue-500 bg-opacity-30 px-3 py-1 rounded-full text-sm">GraphQL</span>
<span class="bg-blue-500 bg-opacity-30 px-3 py-1 rounded-full text-sm">REST API</span>
</div>
</div>
<!-- MCP Server 2 -->
<div class="mcp-server-card rounded-xl p-6 border border-white border-opacity-20 card-hover">
<div class="flex items-center mb-4">
<div class="bg-green-500 rounded-full w-10 h-10 flex items-center justify-center mr-4">
<i class="fas fa-robot"></i>
</div>
<h3 class="text-xl font-semibold">Automation Hub</h3>
</div>
<p class="text-white text-opacity-80 mb-4">Centralized automation rules engine with customizable triggers and actions.</p>
<div class="flex flex-wrap gap-2">
<span class="bg-green-500 bg-opacity-30 px-3 py-1 rounded-full text-sm">YAML Config</span>
<span class="bg-green-500 bg-opacity-30 px-3 py-1 rounded-full text-sm">JavaScript</span>
<span class="bg-green-500 bg-opacity-30 px-3 py-1 rounded-full text-sm">Webhooks</span>
</div>
</div>
<!-- MCP Server 3 -->
<div class="mcp-server-card rounded-xl p-6 border border-white border-opacity-20 card-hover">
<div class="flex items-center mb-4">
<div class="bg-purple-500 rounded-full w-10 h-10 flex items-center justify-center mr-4">
<i class="fas fa-project-diagram"></i>
</div>
<h3 class="text-xl font-semibold">Context Mapper</h3>
</div>
<p class="text-white text-opacity-80 mb-4">Intelligent mapping between different project management models and contexts.</p>
<div class="flex flex-wrap gap-2">
<span class="bg-purple-500 bg-opacity-30 px-3 py-1 rounded-full text-sm">AI/ML</span>
<span class="bg-purple-500 bg-opacity-30 px-3 py-1 rounded-full text-sm">Ontology</span>
<span class="bg-purple-500 bg-opacity-30 px-3 py-1 rounded-full text-sm">Taxonomy</span>
</div>
</div>
<!-- MCP Server 4 -->
<div class="mcp-server-card rounded-xl p-6 border border-white border-opacity-20 card-hover">
<div class="flex items-center mb-4">
<div class="bg-yellow-500 rounded-full w-10 h-10 flex items-center justify-center mr-4">
<i class="fas fa-tachometer-alt"></i>
</div>
<h3 class="text-xl font-semibold">Metrics Analyzer</h3>
</div>
<p class="text-white text-opacity-80 mb-4">Cross-platform metrics collection and visualization with actionable insights.</p>
<div class="flex flex-wrap gap-2">
<span class="bg-yellow-500 bg-opacity-30 px-3 py-1 rounded-full text-sm">Prometheus</span>
<span class="bg-yellow-500 bg-opacity-30 px-3 py-1 rounded-full text-sm">Grafana</span>
<span class="bg-yellow-500 bg-opacity-30 px-3 py-1 rounded-full text-sm">ELK</span>
</div>
</div>
<!-- MCP Server 5 -->
<div class="mcp-server-card rounded-xl p-6 border border-white border-opacity-20 card-hover">
<div class="flex items-center mb-4">
<div class="bg-red-500 rounded-full w-10 h-10 flex items-center justify-center mr-4">
<i class="fas fa-shield-alt"></i>
</div>
<h3 class="text-xl font-semibold">Security Gateway</h3>
</div>
<p class="text-white text-opacity-80 mb-4">Enterprise-grade security layer with fine-grained access control and audit logging.</p>
<div class="flex flex-wrap gap-2">
<span class="bg-red-500 bg-opacity-30 px-3 py-1 rounded-full text-sm">OAuth2</span>
<span class="bg-red-500 bg-opacity-30 px-3 py-1 rounded-full text-sm">SAML</span>
<span class="bg-red-500 bg-opacity-30 px-3 py-1 rounded-full text-sm">RBAC</span>
</div>
</div>
<!-- MCP Server 6 -->
<div class="mcp-server-card rounded-xl p-6 border border-white border-opacity-20 card-hover">
<div class="flex items-center mb-4">
<div class="bg-pink-500 rounded-full w-10 h-10 flex items-center justify-center mr-4">
<i class="fas fa-comments"></i>
</div>
<h3 class="text-xl font-semibold">Collaboration Bridge</h3>
</div>
<p class="text-white text-opacity-80 mb-4">Unified communication layer connecting Slack, Teams, and other collaboration tools.</p>
<div class="flex flex-wrap gap-2">
<span class="bg-pink-500 bg-opacity-30 px-3 py-1 rounded-full text-sm">Slack</span>
<span class="bg-pink-500 bg-opacity-30 px-3 py-1 rounded-full text-sm">Teams</span>
<span class="bg-pink-500 bg-opacity-30 px-3 py-1 rounded-full text-sm">Discord</span>
</div>
</div>
</div>
</div>
</section>
<!-- Workflow Automation -->
<section class="py-16 bg-white">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-12">Automated Workflow Timeline</h2>
<div class="relative">
<!-- Timeline line -->
<div class="hidden md:block absolute left-1/2 h-full w-1 bg-purple-200 transform -translate-x-1/2"></div>
<!-- Timeline items -->
<div class="space-y-12">
<!-- Item 1 -->
<div class="relative flex flex-col md:flex-row items-center">
<div class="md:w-1/2 md:pr-12 mb-6 md:mb-0 md:text-right">
<h3 class="text-xl font-semibold mb-2">1. Ticket Creation</h3>
<p class="text-gray-600">Jira tickets automatically created from GitHub issues with proper categorization.</p>
</div>
<div class="hidden md:block absolute left-1/2 w-6 h-6 bg-purple-600 rounded-full transform -translate-x-1/2"></div>
<div class="md:w-1/2 md:pl-12">
<div class="bg-gray-50 p-4 rounded-lg">
<div class="flex items-center mb-2">
<i class="fab fa-jira text-blue-600 mr-2"></i>
<span class="font-medium">DEV-123</span>
<span class="ml-auto text-sm text-gray-500">2 min ago</span>
</div>
<p class="text-gray-700">Implement user authentication module</p>
<div class="flex mt-2">
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Backend</span>
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded ml-2">Medium</span>
</div>
</div>
</div>
</div>
<!-- Item 2 -->
<div class="relative flex flex-col md:flex-row items-center">
<div class="md:w-1/2 md:pr-12 order-2 md:order-1 mb-6 md:mb-0">
<div class="bg-gray-50 p-4 rounded-lg">
<div class="flex items-center mb-2">
<i class="fab fa-github text-gray-800 mr-2"></i>
<span class="font-medium">feature/auth-module</span>
<span class="ml-auto text-sm text-gray-500">5 min ago</span>
</div>
<p class="text-gray-700">Branch created from Jira ticket DEV-123</p>
<div class="flex mt-2">
<span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Active</span>
</div>
</div>
</div>
<div class="hidden md:block absolute left-1/2 w-6 h-6 bg-purple-600 rounded-full transform -translate-x-1/2"></div>
<div class="md:w-1/2 md:pl-12 order-1 md:order-2 md:text-left">
<h3 class="text-xl font-semibold mb-2">2. Branch Creation</h3>
<p class="text-gray-600">Standardized branches automatically created with Jira ticket reference.</p>
</div>
</div>
<!-- Item 3 -->
<div class="relative flex flex-col md:flex-row items-center">
<div class="md:w-1/2 md:pr-12 mb-6 md:mb-0 md:text-right">
<h3 class="text-xl font-semibold mb-2">3. PR Generation</h3>
<p class="text-gray-600">Pull requests automatically populated with context from linked Jira ticket.</p>
</div>
<div class="hidden md:block absolute left-1/2 w-6 h-6 bg-purple-600 rounded-full transform -translate-x-1/2"></div>
<div class="md:w-1/2 md:pl-12">
<div class="bg-gray-50 p-4 rounded-lg">
<div class="flex items-center mb-2">
<i class="fab fa-github text-gray-800 mr-2"></i>
<span class="font-medium">PR #42</span>
<span class="ml-auto text-sm text-gray-500">15 min ago</span>
</div>
<p class="text-gray-700">Implement user authentication module</p>
<div class="flex mt-2">
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">DEV-123</span>
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded ml-2">2 reviewers</span>
</div>
</div>
</div>
</div>
<!-- Item 4 -->
<div class="relative flex flex-col md:flex-row items-center">
<div class="md:w-1/2 md:pr-12 order-2 md:order-1 mb-6 md:mb-0">
<div class="bg-gray-50 p-4 rounded-lg">
<div class="flex items-center mb-2">
<i class="fab fa-jira text-blue-600 mr-2"></i>
<span class="font-medium">DEV-123</span>
<span class="ml-auto text-sm text-gray-500">20 min ago</span>
</div>
<p class="text-gray-700">Status updated to "In Review"</p>
<div class="flex mt-2">
<span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">In Review</span>
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded ml-2">PR #42</span>
</div>
</div>
</div>
<div class="hidden md:block absolute left-1/2 w-6 h-6 bg-purple-600 rounded-full transform -translate-x-1/2"></div>
<div class="md:w-1/2 md:pl-12 order-1 md:order-2 md:text-left">
<h3 class="text-xl font-semibold mb-2">4. Status Synchronization</h3>
<p class="text-gray-600">Jira status automatically updated based on GitHub PR state.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-16 gradient-bg text-white">
<div class="container mx-auto px-6 text-center">
<h2 class="text-3xl font-bold mb-6">Ready to Transform Your Development Workflow?</h2>
<p class="text-xl mb-8 max-w-2xl mx-auto">Join thousands of teams who have accelerated their delivery cycles with DevSync Automator.</p>
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
<button class="bg-white text-purple-600 px-8 py-4 rounded-lg font-semibold text-lg hover:bg-gray-100 transition duration-300">Start Free Trial</button>
<button class="border-2 border-white text-white px-8 py-4 rounded-lg font-semibold text-lg hover:bg-white hover:text-purple-600 transition duration-300">Schedule Demo</button>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">
<div class="container mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-semibold mb-4">DevSync Automator</h3>
<p class="text-gray-400">The ultimate Jira-GitHub integration platform powered by Model Context Protocol.</p>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Product</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Features</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Integrations</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Roadmap</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Resources</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">API Reference</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Community</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Company</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Legal</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 mb-4 md:mb-0">© 2023 DevSync Automator. All rights reserved.</p>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter text-xl"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin text-xl"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-github text-xl"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube text-xl"></i></a>
</div>
</div>
</div>
</footer>
<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://deepsite.hf.co/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://deepsite.hf.co" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://deepsite.hf.co?remix=Gauis/devsync-automator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>