Spaces:

tommytracx
/

devopipeline

Running

App Files Files Community

devopipeline / index.html

tommytracx

Add 3 files

ed7e064 verified 5 months ago

raw

history blame contribute delete

22.6 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>AI Web Development Pipeline</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, #a777e3);
	}
	.agent-message {
	animation: fadeIn 0.3s ease-in-out;
	}
	@keyframes fadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
	}
	.pipeline-step {
	transition: all 0.3s ease;
	}
	.pipeline-step:hover {
	transform: scale(1.05);
	box-shadow: 0 10px 25px rgba(0,0,0,0.1);
	}
	.pipeline-step.active {
	border-left: 4px solid;
	transform: scale(1.02);
	}
	.pipeline-step.completed {
	opacity: 0.8;
	}
	.pipeline-step.completed .flex-shrink-0 {
	background-color: #10b981 !important;
	}
	.custom-scrollbar::-webkit-scrollbar {
	width: 6px;
	}
	.custom-scrollbar::-webkit-scrollbar-track {
	background: #f1f1f1;
	}
	.custom-scrollbar::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 3px;
	}
	.custom-scrollbar::-webkit-scrollbar-thumb:hover {
	background: #555;
	}
	.thinking-indicator {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: #a777e3;
	animation: pulse 1.5s infinite ease-in-out;
	}
	@keyframes pulse {
	0%, 100% { transform: scale(0.8); opacity: 0.5; }
	50% { transform: scale(1.2); opacity: 1; }
	}
	#chatMessages {
	min-height: 400px;
	}
	#sendBtn:disabled {
	background-color: #cbd5e0;
	cursor: not-allowed;
	}
	</style>
	</head>
	<body class="bg-gray-50 min-h-screen">
	<div class="container mx-auto px-4 py-8">
	<!-- Header -->
	<header class="gradient-bg text-white rounded-xl p-6 mb-8 shadow-lg">
	<div class="flex flex-col md:flex-row justify-between items-center">
	<div>
	<h1 class="text-3xl font-bold">AI Web Development Pipeline</h1>
	<p class="mt-2">Describe your website idea and let our AI agents handle the rest</p>
	</div>
	<div class="mt-4 md:mt-0 flex space-x-4">
	<button id="newProjectBtn" class="bg-white text-purple-700 px-4 py-2 rounded-lg font-medium hover:bg-gray-100 transition">
	<i class="fas fa-plus mr-2"></i>New Project
	</button>
	<button id="manageSitesBtn" class="bg-purple-800 text-white px-4 py-2 rounded-lg font-medium hover:bg-purple-900 transition">
	<i class="fas fa-cog mr-2"></i>Manage Sites
	</button>
	</div>
	</div>
	</header>

	<!-- Main Content -->
	<div class="flex flex-col lg:flex-row gap-8">
	<!-- Left Panel - Chat Interface -->
	<div class="lg:w-2/3 bg-white rounded-xl shadow-md overflow-hidden">
	<div class="p-4 border-b border-gray-200 bg-gray-50">
	<h2 class="text-xl font-semibold text-gray-800">Project Development Chat</h2>
	<div class="flex mt-2 space-x-2">
	<span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">AI Architect</span>
	<span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">UI Designer</span>
	<span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">Developer</span>
	<span class="px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full">DevOps</span>
	</div>
	</div>

	<!-- Chat Messages -->
	<div id="chatMessages" class="h-96 overflow-y-auto p-4 custom-scrollbar space-y-4">
	<div class="agent-message bg-gray-100 p-4 rounded-lg">
	<div class="flex items-start">
	<div class="flex-shrink-0 h-8 w-8 rounded-full bg-purple-500 flex items-center justify-center text-white">
	<i class="fas fa-robot"></i>
	</div>
	<div class="ml-3">
	<p class="font-medium text-purple-700">AI Architect</p>
	<p class="mt-1 text-gray-700">Hello! I'm your AI architect. Describe your website or web app idea and I'll coordinate with the other agents to make it happen.</p>
	</div>
	</div>
	</div>
	</div>

	<!-- Input Area -->
	<div class="p-4 border-t border-gray-200 bg-gray-50">
	<div class="flex">
	<input id="userInput" type="text" placeholder="Describe your website idea..."
	class="flex-grow px-4 py-2 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
	<button id="sendBtn" class="bg-purple-600 text-white px-4 py-2 rounded-r-lg hover:bg-purple-700 transition disabled:bg-gray-400 disabled:cursor-not-allowed">
	<i class="fas fa-paper-plane"></i>
	</button>
	</div>
	<div class="mt-2 flex justify-between text-xs text-gray-500">
	<span>Press Enter to send</span>
	<span>AI Services: OpenAI, Grok-3, DeepSeek</span>
	</div>
	</div>
	</div>

	<!-- Right Panel - Pipeline Visualization -->
	<div class="lg:w-1/3 space-y-6">
	<!-- Pipeline Steps -->
	<div class="bg-white rounded-xl shadow-md overflow-hidden">
	<div class="p-4 border-b border-gray-200 bg-gray-50">
	<h2 class="text-xl font-semibold text-gray-800">Development Pipeline</h2>
	</div>
	<div class="p-4 space-y-4">
	<div id="step1" class="pipeline-step bg-blue-50 border border-blue-200 rounded-lg p-4 active">
	<div class="flex items-center">
	<div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white">
	<i class="fas fa-lightbulb"></i>
	</div>
	<div class="ml-3">
	<h3 class="font-medium text-blue-800">1. Idea Conceptualization</h3>
	<p class="text-sm text-gray-600">Describe your website idea</p>
	</div>
	</div>
	</div>

	<div id="step2" class="pipeline-step bg-purple-50 border border-purple-200 rounded-lg p-4">
	<div class="flex items-center">
	<div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-500 flex items-center justify-center text-white">
	<i class="fas fa-drafting-compass"></i>
	</div>
	<div class="ml-3">
	<h3 class="font-medium text-purple-800">2. Architecture Design</h3>
	<p class="text-sm text-gray-600">AI architect creates the blueprint</p>
	</div>
	</div>
	</div>

	<div id="step3" class="pipeline-step bg-yellow-50 border border-yellow-200 rounded-lg p-4">
	<div class="flex items-center">
	<div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-500 flex items-center justify-center text-white">
	<i class="fas fa-paint-brush"></i>
	</div>
	<div class="ml-3">
	<h3 class="font-medium text-yellow-800">3. UI/UX Design</h3>
	<p class="text-sm text-gray-600">Designer creates mockups</p>
	</div>
	</div>
	</div>

	<div id="step4" class="pipeline-step bg-green-50 border border-green-200 rounded-lg p-4">
	<div class="flex items-center">
	<div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-500 flex items-center justify-center text-white">
	<i class="fas fa-code"></i>
	</div>
	<div class="ml-3">
	<h3 class="font-medium text-green-800">4. Development</h3>
	<p class="text-sm text-gray-600">Developer writes the code</p>
	</div>
	</div>
	</div>

	<div id="step5" class="pipeline-step bg-red-50 border border-red-200 rounded-lg p-4">
	<div class="flex items-center">
	<div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-500 flex items-center justify-center text-white">
	<i class="fas fa-server"></i>
	</div>
	<div class="ml-3">
	<h3 class="font-medium text-red-800">5. Deployment</h3>
	<p class="text-sm text-gray-600">DevOps deploys to production</p>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Status Panel -->
	<div class="bg-white rounded-xl shadow-md overflow-hidden">
	<div class="p-4 border-b border-gray-200 bg-gray-50">
	<h2 class="text-xl font-semibold text-gray-800">Project Status</h2>
	</div>
	<div class="p-4">
	<div class="mb-4">
	<h3 class="font-medium text-gray-700 mb-2">Current Project</h3>
	<div class="bg-gray-100 p-3 rounded-lg">
	<p id="currentProject" class="text-gray-800 italic">No active project</p>
	</div>
	</div>

	<div class="mb-4">
	<h3 class="font-medium text-gray-700 mb-2">Database Status</h3>
	<div class="bg-gray-100 p-3 rounded-lg">
	<div class="flex items-center">
	<div class="h-3 w-3 rounded-full bg-green-500 mr-2"></div>
	<span>Connected to PostgreSQL</span>
	</div>
	<div class="mt-2 text-sm text-gray-600">
	<p>Data stores: User Data, Content, Analytics</p>
	</div>
	</div>
	</div>

	<div>
	<h3 class="font-medium text-gray-700 mb-2">Deployment Server</h3>
	<div class="bg-gray-100 p-3 rounded-lg">
	<div class="flex items-center">
	<div class="h-3 w-3 rounded-full bg-green-500 mr-2"></div>
	<span>Multi-site server ready</span>
	</div>
	<div class="mt-2 text-sm text-gray-600">
	<p>Custom domains available</p>
	<p>SSL certificates managed</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Site Management Modal (hidden by default) -->
	<div id="siteManagementModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
	<div class="bg-white rounded-xl shadow-xl w-full max-w-4xl max-h-[90vh] overflow-y-auto">
	<div class="p-6 border-b border-gray-200 flex justify-between items-center">
	<h2 class="text-2xl font-bold text-gray-800">Website Management</h2>
	<button id="closeModalBtn" class="text-gray-500 hover:text-gray-700">
	<i class="fas fa-times"></i>
	</button>
	</div>

	<div class="p-6">
	<div class="mb-6">
	<h3 class="text-lg font-semibold mb-4">Your Websites</h3>
	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-50">
	<tr>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Domain</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
	</tr>
	</thead>
	<tbody id="sitesTableBody" class="bg-white divide-y divide-gray-200">
	<!-- Sites will be added here dynamically -->
	<tr>
	<td colspan="4" class="px-6 py-4 text-center text-gray-500">No websites yet</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>

	<div>
	<h3 class="text-lg font-semibold mb-4">Add New Domain</h3>
	<div class="flex">
	<input type="text" id="newDomainInput" placeholder="example.com" class="flex-grow px-4 py-2 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
	<button id="addDomainBtn" class="bg-purple-600 text-white px-4 py-2 rounded-r-lg hover:bg-purple-700 transition">
	Add Domain
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<script>
	document.addEventListener('DOMContentLoaded', function() {
	// DOM Elements
	const chatMessages = document.getElementById('chatMessages');
	const userInput = document.getElementById('userInput');
	const sendBtn = document.getElementById('sendBtn');
	const currentProject = document.getElementById('currentProject');
	const siteManagementModal = document.getElementById('siteManagementModal');
	const manageSitesBtn = document.getElementById('manageSitesBtn');
	const closeModalBtn = document.getElementById('closeModalBtn');
	const newProjectBtn = document.getElementById('newProjectBtn');
	const pipelineSteps = document.querySelectorAll('.pipeline-step');

	// Sample project names
	const projectNames = [
	"E-commerce Platform",
	"Portfolio Website",
	"Blog System",
	"Social Network",
	"Task Management App",
	"Learning Platform",
	"Restaurant Website",
	"Event Booking System"
	];

	// Current project state
	let currentProjectName = "";
	let currentStep = 1;

	// Initialize send button state
	updateSendButtonState();

	// Event Listeners
	userInput.addEventListener('input', updateSendButtonState);
	userInput.addEventListener('keypress', function(e) {
	if (e.key === 'Enter' && !sendBtn.disabled) {
	sendMessage();
	}
	});

	sendBtn.addEventListener('click', sendMessage);
	manageSitesBtn.addEventListener('click', () => siteManagementModal.classList.remove('hidden'));
	closeModalBtn.addEventListener('click', () => siteManagementModal.classList.add('hidden'));

	newProjectBtn.addEventListener('click', () => {
	// Reset chat
	chatMessages.innerHTML = `
	<div class="agent-message bg-gray-100 p-4 rounded-lg">
	<div class="flex items-start">
	<div class="flex-shrink-0 h-8 w-8 rounded-full bg-purple-500 flex items-center justify-center text-white">
	<i class="fas fa-robot"></i>
	</div>
	<div class="ml-3">
	<p class="font-medium text-purple-700">AI Architect</p>
	<p class="mt-1 text-gray-700">Hello! I'm your AI architect. Describe your website or web app idea and I'll coordinate with the other agents to make it happen.</p>
	</div>
	</div>
	</div>
	`;

	// Reset pipeline
	pipelineSteps.forEach(step => {
	step.classList.remove('completed');
	step.classList.remove('active');
	const icon = step.querySelector('.flex-shrink-0');
	if (icon) {
	icon.classList.remove('bg-green-500');
	}
	});

	// Activate first step
	document.getElementById('step1').classList.add('active');
	currentStep = 1;

	// Generate new project name
	currentProjectName = projectNames[Math.floor(Math.random() * projectNames.length)];
	currentProject.textContent = currentProjectName;

	// Clear input
	userInput.value = '';
	updateSendButtonState();
	});

	// Functions
	function updateSendButtonState() {
	sendBtn.disabled = userInput.value.trim() === '';
	}

	function sendMessage() {
	const message = userInput.value.trim();
	if (message === '') return;

	// Add user message to chat
	addMessageToChat('user', message);

	// Clear input
	userInput.value = '';
	updateSendButtonState();

	// Show thinking indicator
	const thinkingId = showThinkingIndicator();

	// Simulate AI response after a delay
	setTimeout(() => {
	// Remove thinking indicator
	removeThinkingIndicator(thinkingId);

	// Process the message and generate response
	processUserMessage(message);

	// Advance pipeline step if needed
	if (currentStep < 5) {
	advancePipelineStep();
	}
	}, 1500);
	}

	function addMessageToChat(sender, message) {
	const isUser = sender === 'user';
	const agentColors = {
	'AI Architect': 'purple',
	'UI Designer': 'blue',
	'Developer': 'yellow',
	'DevOps': 'red'
	};

	const agent = isUser ? 'You' :
	currentStep === 1 ? 'AI Architect' :
	currentStep === 2 ? 'AI Architect' :
	currentStep === 3 ? 'UI Designer' :
	currentStep === 4 ? 'Developer' : 'DevOps';

	const color = isUser ? 'gray' : agentColors[agent] \|\| 'purple';

	const messageDiv = document.createElement('div');
	messageDiv.className = `agent-message bg-${isUser ? 'white' : color}-50 p-4 rounded-lg border border-${isUser ? 'gray' : color}-200`;

	messageDiv.innerHTML = `
	<div class="flex items-start">
	<div class="flex-shrink-0 h-8 w-8 rounded-full bg-${isUser ? 'gray' : color}-500 flex items-center justify-center text-white">
	<i class="fas ${isUser ? 'fa
	</html>