Spaces:

xSerpicoxx
/

prdator

Running

App Files Files Community

prdator / index.html

xSerpicoxx

Eliminalo - Initial Deployment

b7f35f2 verified about 2 months ago

raw

history blame contribute delete

37.6 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Vibe Coding \| PRD & Blueprint Creator</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 = {
	theme: {
	extend: {
	colors: {
	'claude-primary': '#4e80ee'
	}
	}
	}
	}
	</script>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

	:root {
	--sidebar-width: 280px;
	--panel-height: 300px;
	}

	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	}

	body {
	background-color: #FAFAF9;
	height: 100vh;
	overflow: hidden;
	color: #000000;
	}

	.claude-shadow {
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);
	}

	.file-item {
	position: relative;
	cursor: pointer;
	transition: all 0.2s;
	border-left: 3px solid transparent;
	}

	.file-item:hover {
	background-color: #f3f4f6;
	}

	.file-item.active {
	background-color: #edf2ff;
	border-left: 3px solid #4e80ee;
	}

	.stage-progress {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	background-color: #4e80ee;
	}

	.draggable-panel {
	transition: height 0.3s ease;
	}

	.message-avatar {
	min-width: 30px;
	}

	.message-content pre {
	background-color: #f5f5f5;
	padding: 12px;
	border-radius: 6px;
	overflow-x: auto;
	margin: 10px 0;
	}

	.message-content code {
	background-color: #f5f5f5;
	padding: 2px 4px;
	border-radius: 3px;
	font-size: 90%;
	}

	.artifact-card {
	transition: all 0.3s;
	}

	.artifact-card:hover {
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	}

	.vscode-container {
	background-color: #1e1e1e;
	color: #d4d4d4;
	font-family: 'Fira Code', 'Consolas', monospace;
	}
	</style>
	</head>
	<body class="bg-claude-bg text-gray-800 flex flex-col h-full">
	<!-- Header -->
	<header class="sticky top-0 z-40 bg-white px-4 py-3 flex items-center justify-between claude-shadow">
	<div class="flex items-center space-x-4">
	<div class="flex items-center space-x-2">
	<div class="h-8 w-8 rounded-lg bg-claude-primary flex items-center justify-center">
	<i class="fas fa-lightbulb text-white"></i>
	</div>
	</div>

	<nav class="hidden md:flex space-x-4 text-sm font-medium">
	</nav>
	</div>

	<div class="flex items-center space-x-4">
	<div class="flex items-center space-x-1">
	<button class="p-2 hover:bg-gray-100 rounded-lg">
	<i class="fas fa-file-alt text-gray-600"></i>
	</button>
	<button class="p-2 hover:bg-gray-100 rounded-lg">
	<i class="fas fa-save text-gray-600"></i>
	</button>
	<button class="p-2 hover:bg-gray-100 rounded-lg">
	<i class="fas fa-folder-open text-gray-600"></i>
	</button>
	</div>

	<div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
	<i class="fas fa-user text-gray-600"></i>
	</div>
	</div>
	</header>

	<!-- Main Content -->
	<div class="flex flex-1 overflow-hidden">
	<!-- Sidebar -->
	<div class="w-[var(--sidebar-width)] border-r border-[#E5E7EB] bg-[#F5F3F0] overflow-y-auto">
	<div class="p-4 border-b border-claude-border">
	<div class="flex items-center justify-between">
	<h2 class="font-semibold text-lg">Workflow Stages</h2>
	<button class="text-sm text-claude-primary">Save</button>
	</div>

	<div class="mt-4 space-y-1">
	<div class="stage-item flex items-center space-x-3 px-3 py-2.5 bg-blue-50 rounded-lg text-claude-primary">
	<i class="fas fa-play-circle"></i>
	<span>Initial</span>
	</div>
	<div class="stage-item flex items-center space-x-3 px-3 py-2.5 hover:bg-gray-50 rounded-lg">
	<i class="fas fa-lightbulb text-gray-400"></i>
	<span>Conceptual</span>
	</div>
	<div class="stage-item flex items-center space-x-3 px-3 py-2.5 hover:bg-gray-50 rounded-lg">
	<i class="fas fa-list-check text-gray-400"></i>
	<span>Requirements</span>
	</div>
	<div class="stage-item flex items-center space-x-3 px-3 py-2.5 hover:bg-gray-50 rounded-lg">
	<i class="fas fa-users text-gray-400"></i>
	<span>User Experience</span>
	</div>
	<div class="stage-item flex items-center space-x-3 px-3 py-2.5 hover:bg-gray-50 rounded-lg">
	<i class="fas fa-directions text-gray-400"></i>
	<span>User Flow</span>
	</div>
	<div class="stage-item flex items-center space-x-3 px-3 py-2.5 hover:bg-gray-50 rounded-lg">
	<i class="fas fa-bolt text-gray-400"></i>
	<span>Optimization</span>
	</div>
	<div class="stage-item flex items-center space-x-3 px-3 py-2.5 hover:bg-gray-50 rounded-lg">
	<i class="fas fa-object-group text-gray-400"></i>
	<span>UI</span>
	</div>
	<div class="stage-item flex items-center space-x-3 px-3 py-2.5 hover:bg-gray-50 rounded-lg">
	<i class="fas fa-robot text-gray-400"></i>
	<span>Agents</span>
	</div>
	<div class="stage-item flex items-center space-x-3 px-3 py-2.5 hover:bg-gray-50 rounded-lg">
	<i class="fas fa-network-wired text-gray-400"></i>
	<span>Models</span>
	</div>
	<div class="stage-item flex items-center space-x-3 px-3 py-2.5 hover:bg-gray-50 rounded-lg">
	<i class="fas fa-clipboard-check text-gray-400"></i>
	<span>Final Review</span>
	</div>
	</div>
	</div>

	<div class="p-4">
	<div class="flex items-center justify-between">
	<h2 class="font-semibold text-lg">Project Files</h2>
	<button class="text-sm text-claude-primary">
	<i class="fas fa-plus"></i>
	</button>
	</div>

	<div class="mt-3 space-y-1">
	<div class="file-item active px-3 py-2 rounded-lg">
	<div class="flex items-center space-x-2">
	<i class="fas fa-file-lines text-blue-500"></i>
	<span>PRD - eCommerce App</span>
	</div>
	<div class="stage-progress" style="width: 40%"></div>
	</div>
	<div class="file-item px-3 py-2 rounded-lg">
	<div class="flex items-center space-x-2">
	<i class="fas fa-diagram-project text-purple-500"></i>
	<span>Architecture Blueprint</span>
	</div>
	<div class="stage-progress" style="width: 25%"></div>
	</div>
	<div class="file-item px-3 py-2 rounded-lg">
	<div class="flex items-center space-x-2">
	<i class="fas fa-code-branch text-green-500"></i>
	<span>API Specifications</span>
	</div>
	<div class="stage-progress" style="width: 70%"></div>
	</div>
	<div class="file-item px-3 py-2 rounded-lg">
	<div class="flex items-center space-x-2">
	<i class="fas fa-wand-magic-sparkles text-yellow-500"></i>
	<span>UX Design System</span>
	</div>
	<div class="stage-progress" style="width: 60%"></div>
	</div>
	</div>
	</div>

	<div class="p-4 border-t border-claude-border">
	<h3 class="font-medium text-gray-600 text-sm">AI Tools</h3>
	<div class="mt-2 flex flex-wrap gap-2">
	<button class="px-3 py-1 text-xs bg-claude-primary text-white rounded-full">Brainstorm</button>
	<button class="px-3 py-1 text-xs bg-purple-500 text-white rounded-full">Validate</button>
	<button class="px-3 py-1 text-xs bg-yellow-500 text-white rounded-full">Optimize</button>
	<button class="px-3 py-1 text-xs bg-green-500 text-white rounded-full">Generate</button>
	<button class="px-3 py-1 text-xs bg-pink-500 text-white rounded-full">Design</button>
	</div>
	</div>
	</div>

	<!-- Chat & Artifacts Area -->
	<div class="flex flex-col flex-1 overflow-hidden">
	<div class="flex flex-1 overflow-hidden">
	<!-- Chat Area -->
	<div class="w-3/4 border-r border-[#E5E7EB] bg-[#FAFAF9] flex flex-col">
	<div class="flex-1 overflow-y-auto p-4 space-y-6">
	<!-- AI Message -->
	<div class="flex space-x-4">
	<div class="message-avatar flex items-start">
	<div class="w-8 h-8 flex items-center justify-center rounded-lg bg-gray-200">
	<i class="fas fa-robot text-xl text-claude-primary"></i>
	</div>
	</div>
	<div class="message-content flex-1">
	<div class="bg-white p-4 rounded-2xl rounded-tl-none shadow-sm border border-[#E5E7EB]">
	<h3 class="font-semibold">Initial Concept for your PRD</h3>
	<p class="mt-2">Based on your description, I've outlined the core concept for the Vibe Coding PRD application. This will serve as the foundation we can refine throughout the workflow stages.</p>
	<div class="mt-3 bg-white p-3 rounded-lg claude-shadow">
	<h4 class="font-medium">Key Components:</h4>
	<ul class="list-disc pl-5 mt-2 space-y-1">
	<li>AI-powered chat interface for requirements elicitation</li>
	<li>Dynamic artifact canvas for collaborative visualization</li>
	<li>Structured workflow with 10 distinct stages</li>
	<li>Integrated development environments (VSCode)</li>
	<li>Real-time collaboration features</li>
	</ul>
	</div>
	<div class="mt-4 flex space-x-2">
	<button class="text-sm text-claude-primary hover:underline">Refine this concept</button>
	<button class="text-sm text-claude-primary hover:underline">Move to next stage</button>
	<button class="text-sm text-claude-primary hover:underline">Add artifact</button>
	</div>
	</div>
	</div>
	</div>

	<!-- User Message -->
	<div class="flex space-x-4">
	<div class="message-avatar flex items-start">
	<div class="w-8 h-8 flex items-center justify-center rounded-lg bg-claude-primary">
	<i class="fas fa-user text-white"></i>
	</div>
	</div>
	<div class="message-content flex-1">
	<div class="bg-claude-primary text-white p-4 rounded-2xl rounded-tl-none">
	<p>Thanks! I like the initial breakdown. Could we focus more on the artifact canvas system? I want to make sure we can integrate different file types and have collaborative annotation features.</p>
	</div>
	</div>
	</div>

	<!-- AI Message -->
	<div class="flex space-x-4">
	<div class="message-avatar flex items-start">
	<div class="w-8 h-8 flex items-center justify-center rounded-lg bg-gray-200">
	<i class="fas fa-robot text-xl text-claude-primary"></i>
	</div>
	</div>
	<div class="message-content flex-1">
	<div class="bg-gray-50 p-4 rounded-2xl rounded-tl-none">
	<p>Absolutely. Let me detail the Artifact Canvas system requirements:</p>

	<div class="mt-3 grid grid-cols-3 gap-3">
	<div class="artifact-card bg-white p-3 rounded-lg border border-gray-200">
	<div class="flex space-x-2">
	<i class="fas fa-file-image text-blue-400"></i>
	<span class="font-medium">Image Files</span>
	</div>
	<p class="text-xs mt-1 text-gray-500">Supports JPG, PNG, SVG formats</p>
	</div>
	<div class="artifact-card bg-white p-3 rounded-lg border border-gray-200">
	<div class="flex space-x-2">
	<i class="fas fa-file-code text-green-400"></i>
	<span class="font-medium">Code Snippets</span>
	</div>
	<p class="text-xs mt-1 text-gray-500">Syntax highlighting for all languages</p>
	</div>
	<div class="artifact-card bg-white p-3 rounded-lg border border-gray-200">
	<div class="flex space-x-2">
	<i class="fas fa-diagram-project text-purple-400"></i>
	<span class="font-medium">Flowcharts</span>
	</div>
	<p class="text-xs mt-1 text-gray-500">Interactive diagram creation</p>
	</div>
	</div>

	<div class="mt-4">
	<h4 class="font-medium mb-2">Collaboration Features:</h4>
	<pre class="bg-gray-100 p-3 rounded-lg text-xs">{
	"annotation": true,
	"versionControl": true,
	"realtimeCollab": true,
	"commentThreads": true
	}</pre>
	</div>

	<div class="mt-4 flex space-x-2">
	<button class="px-3 py-1.5 rounded bg-claude-primary text-white text-sm">Add to PRD</button>
	<button class="px-3 py-1.5 rounded border border-gray-300 text-sm">Refine requirements</button>
	</div>
	</div>
	</div>
	</div>
	</div>

	<div class="p-4 border-t border-[#E5E7EB] bg-white">
	<div class="flex space-x-3">
	<button class="p-2 rounded-lg border border-gray-300">
	<i class="fas fa-plus"></i>
	</button>
	<div class="flex-1 relative">
	<textarea
	class="w-full p-3 border border-gray-300 rounded-lg resize-none focus:outline-none focus:ring-1 focus:ring-claude-primary"
	placeholder="Send a message to Vibe Coding AI..."
	rows="1"
	></textarea>
	<div class="absolute right-2 bottom-2 flex space-x-1">
	<button class="p-1.5 rounded text-gray-500 hover:bg-gray-100">
	<i class="fas fa-paperclip"></i>
	</button>
	<button class="p-1.5 rounded text-gray-500 hover:bg-gray-100">
	<i class="fas fa-arrow-up"></i>
	</button>
	</div>
	</div>
	</div>
	<p class="text-xs text-center text-gray-500 mt-2">Vibe Coding AI can make mistakes. Verify important information.</p>
	</div>
	</div>

	<!-- Artifacts Area -->
	<div class="w-1/4 bg-[#F5F3F0] p-4 overflow-y-auto border-l border-[#E5E7EB]">
	<div class="flex items-center justify-between">
	<h2 class="font-semibold text-lg">Artifacts & Resources</h2>
	<div class="flex space-x-2">
	<button class="p-1.5 rounded-lg hover:bg-gray-100">
	<i class="fas fa-expand"></i>
	</button>
	<button class="p-1.5 rounded-lg hover:bg-gray-100">
	<i class="fas fa-sliders"></i>
	</button>
	</div>
	</div>

	<div class="mt-4 bg-gray-50 p-4 rounded-xl">
	<div class="flex items-center space-x-3">
	<i class="fas fa-lightbulb text-yellow-500 text-xl"></i>
	<div>
	<h3 class="font-medium">Tip from AI</h3>
	<p class="text-sm text-gray-600">Add visual artifacts to clarify complex ideas during the review stages</p>
	</div>
	</div>
	</div>

	<div class="mt-4">
	<div class="flex space-x-2 overflow-x-auto pb-2">
	<button class="px-3 py-1 bg-claude-primary text-white rounded-full text-sm whitespace-nowrap">All</button>
	<button class="px-3 py-1 bg-white border rounded-full text-sm whitespace-nowrap">Wireframes</button>
	<button class="px-3 py-1 bg-white border rounded-full text-sm whitespace-nowrap">Diagrams</button>
	<button class="px-3 py-1 bg-white border rounded-full text-sm whitespace-nowrap">Code Samples</button>
	<button class="px-3 py-1 bg-white border rounded-full text-sm whitespace-nowrap">References</button>
	<button class="px-3 py-1 bg-white border rounded-full text-sm whitespace-nowrap">MCP Assets</button>
	</div>
	</div>

	<div class="mt-4 space-y-3">
	<div class="bg-white border border-gray-200 rounded-xl overflow-hidden">
	<div class="bg-blue-50 p-3 font-medium text-sm flex items-center space-x-2">
	<i class="fas fa-window-maximize text-blue-500"></i>
	<span>PRD Conceptual Model</span>
	</div>
	<div class="p-3">
	<img src="https://via.placeholder.com/300x160.png?text=Conceptual+Diagram" alt="Conceptual Diagram" class="w-full rounded-lg border">
	<p class="text-sm mt-2 text-gray-600">High-level overview of the artifact management system</p>
	<div class="flex space-x-2 mt-2">
	<button class="text-xs text-gray-500 hover:text-claude-primary">
	<i class="fas fa-comment"></i> 3 comments
	</button>
	<button class="text-xs text-gray-500 hover:text-claude-primary">
	<i class="fas fa-pencil-alt"></i> Edit
	</button>
	</div>
	</div>
	</div>

	<div class="bg-white border border-gray-200 rounded-xl overflow-hidden">
	<div class="bg-purple-50 p-3 font-medium text-sm flex items-center space-x-2">
	<i class="fas fa-code text-purple-500"></i>
	<span>API Design Pattern</span>
	</div>
	<pre class="text-xs p-3 overflow-x-auto">interface ArtifactManager {
	uploadFile(file: File): Promise<Artifact>;
	createDiagram(options: DiagramOptions): Diagram;
	commentOnArtifact(artifactId: string, content: string): Comment;
	getArtifactHistory(artifactId: string): ArtifactVersion[];
	}</pre>
	<div class="px-3 pb-3 flex space-x-2">
	<button class="text-xs bg-gray-100 rounded px-2 py-1">
	Copy code
	</button>
	<button class="text-xs text-gray-500 hover:text-claude-primary">
	<i class="fas fa-thumbs-up"></i>
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Bottom Panel: Tabs for Web Browser and VSCode -->
	<div class="draggable-panel border-t border-[#E5E7EB] bg-white" style="height: 40px">
	<div class="flex h-full">
	<div class="flex h-full border-r border-claude-border">
	<button id="browser-tab" class="h-full px-4 text-sm font-medium bg-white border-t-2 border-t-claude-primary">Browser</button>
	<button id="vscode-tab" class="h-full px-4 text-sm font-medium text-gray-600 hover:bg-gray-100">VSCode</button>
	</div>
	<div class="flex-1 flex items-center justify-between px-4">
	<div class="flex space-x-3">
	<button class="text-gray-500 hover:text-gray-700">
	<i class="fas fa-expand"></i>
	</button>
	<div class="flex space-x-1 text-sm">
	<input type="text" class="text-xs px-2 py-1 border rounded w-64" placeholder="https://www.example-reference.com" value="https://docs.vibe-coding.ai/">
	<button class="bg-claude-primary text-white px-2 rounded text-sm">
	Go
	</button>
	</div>
	</div>
	<div class="flex space-x-2">
	<button class="text-gray-500 hover:text-gray-700">
	<i class="fas fa-window-restore"></i>
	</button>
	<button class="text-gray-500 hover:text-gray-700">
	<i class="fas fa-times"></i>
	</button>
	</div>
	</div>
	</div>

	<div id="panel-content" class="overflow-auto bg-white" style="height: 260px">
	<!-- Browser Preview Content -->
	<div class="h-full p-4">
	<div class="border rounded-lg overflow-hidden claude-shadow">
	<div class="h-7 bg-gray-200 flex items-center px-3 space-x-1.5">
	<div class="w-2.5 h-2.5 rounded-full bg-gray-400"></div>
	<div class="w-2.5 h-2.5 rounded-full bg-gray-400"></div>
	<div class="w-2.5 h-2.5 rounded-full bg-gray-400"></div>
	</div>
	<div class="px-4 py-6">
	<div class="flex justify-center mb-4">
	<div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
	</div>
	<h2 class="text-center text-lg font-semibold">Vibe Coding Documentation</h2>
	<p class="text-center mt-2 text-gray-600">PRD and Blueprint Development Guide</p>
	<div class="mt-6 grid grid-cols-3 gap-3 max-w-lg mx-auto">
	<div class="bg-gray-100 hover:bg-gray-200 py-2 px-3 rounded cursor-pointer text-center text-sm">
	Getting Started
	</div>
	<div class="bg-gray-100 hover:bg-gray-200 py-2 px-3 rounded cursor-pointer text-center text-sm">
	Workflow Guide
	</div>
	<div class="bg-gray-100 hover:bg-gray-200 py-2 px-3 rounded cursor-pointer text-center text-sm">
	API Reference
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<script>
	document.addEventListener('DOMContentLoaded', function() {
	// Tab switching functionality
	const browserTab = document.getElementById('browser-tab');
	const vscodeTab = document.getElementById('vscode-tab');
	const panelContent = document.getElementById('panel-content');

	// Handle file item clicks
	const fileItems = document.querySelectorAll('.file-item');
	fileItems.forEach(item => {
	item.addEventListener('click', () => {
	document.querySelector('.file-item.active').classList.remove('active');
	item.classList.add('active');
	});
	});

	// Handle stage item clicks
	const stageItems = document.querySelectorAll('.stage-item');
	stageItems.forEach(item => {
	item.addEventListener('click', () => {
	// Remove active from all except the first one
	stageItems.forEach(stage => stage.classList.remove('bg-blue-50', 'text-claude-primary'));
	stageItems.forEach(stage => {
	if (!stage.querySelector('.fa-play-circle')) {
	stage.querySelector('i').classList.remove('text-claude-primary');
	stage.querySelector('i').classList.add('text-gray-400');
	}
	});

	// Add to clicked item
	item.classList.add('bg-blue-50', 'text-claude-primary');
	const icon = item.querySelector('i');
	icon.classList.remove('text-gray-400');
	icon.classList.add('text-claude-primary');
	});
	});

	// VSCode tab functionality
	vscodeTab.addEventListener('click', () => {
	browserTab.classList.remove('bg-white', 'border-t-claude-primary');
	browserTab.classList.add('text-gray-600', 'hover:bg-gray-100');
	vscodeTab.classList.add('bg-white', 'border-t-claude-primary');
	vscodeTab.classList.remove('text-gray-600', 'hover:bg-gray-100');

	// Set VSCode content
	panelContent.innerHTML = `
	<div class="vscode-container h-full">
	<div class="h-8 bg-gray-900 text-gray-300 flex items-center px-3 justify-between">
	<div class="flex items-center space-x-3 text-sm">
	<span class="text-gray-400">WORKSPACE</span>
	<span class="text-gray-100">prd-ecommerce-app</span>
	</div>
	<div class="flex items-center space-x-3">
	<i class="fas fa-bell text-gray-400"></i>
	<i class="fas fa-ellipsis-h text-gray-400"></i>
	</div>
	</div>
	<div class="flex h-[calc(100%-2rem)]">
	<div class="w-64 bg-gray-900">
	<div class="px-4 py-2 text-xs text-gray-400">OPEN EDITORS</div>
	<div class="bg-gray-800 text-gray-100 text-sm">
	<div class="px-4 py-1.5 border-l-2 border-blue-500 flex items-center space-x-2">
	<i class="fas fa-file-code text-blue-400"></i>
	<span>requirements.md</span>
	</div>
	<div class="px-4 py-1.5 flex items-center space-x-2">
	<i class="fas fa-json text-yellow-500"></i>
	<span>architecture.json</span>
	</div>
	<div class="px-4 py-1.5 flex items-center space-x-2">
	<i class="fas fa-layer-group text-green-500"></i>
	<span>diagram-components.js</span>
	</div>
	</div>
	</div>
	<div class="flex-1 bg-gray-800">
	<div class="h-7 bg-gray-900 flex items-center px-3 text-xs text-gray-300">
	<span class="text-blue-400">requirements.md</span>
	<span class="mx-1">•</span>
	<span class="text-gray-500">PRD Document</span>
	</div>
	<div class="px-8 py-4 font-mono text-sm">
	<div class="text-blue-400"># eCommerce App Requirements Document</div>
	<div class="mt-4">
	<div class="text-green-400">## Core Features</div>
	<div class="ml-4 mt-1">
	<div>- <span class="text-gray-400">User Authentication System</span></div>
	<div>- <span class="text-gray-400">Product Catalog Management</span></div>
	<div>- <span class="text-gray-400">Shopping Cart & Checkout</span></div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	`;
	});

	// Browser tab functionality
	browserTab.addEventListener('click', () => {
	vscodeTab.classList.remove('bg-white', 'border-t-claude-primary');
	vscodeTab.classList.add('text-gray-600', 'hover:bg-gray-100');
	browserTab.classList.add('bg-white', 'border-t-claude-primary');
	browserTab.classList.remove('text-gray-600', 'hover:bg-gray-100');

	// Set Browser content
	panelContent.innerHTML = `
	<div class="h-full p-4">
	<div class="border rounded-lg overflow-hidden claude-shadow">
	<div class="h-7 bg-gray-200 flex items-center px-3 space-x-1.5">
	<div class="w-2.5 h-2.5 rounded-full bg-gray-400"></div>
	<div class="w-2.5 h-2.5 rounded-full bg-gray-400"></div>
	<div class="w-2.5 h-2.5 rounded-full bg-gray-400"></div>
	</div>
	<div class="px-4 py-6">
	<div class="flex justify-center mb-4">
	<div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
	</div>
	<h2 class="text-center text-lg font-semibold">Vibe Coding Documentation</h2>
	<p class="text-center mt-2 text-gray-600">PRD and Blueprint Development Guide</p>
	<div class="mt-6 grid grid-cols-3 gap-3 max-w-lg mx-auto">
	<div class="bg-gray-100 hover:bg-gray-200 py-2 px-3 rounded cursor-pointer text-center text-sm">
	Getting Started
	</div>
	<div class="bg-gray-100 hover:bg-gray-200 py-2 px-3 rounded cursor-pointer text-center text-sm">
	Workflow Guide
	</div>
	<div class="bg-gray-100 hover:bg-gray-200 py-2 px-3 rounded cursor-pointer text-center text-sm">
	API Reference
	</div>
	</div>
	</div>
	</div>
	</div>
	`;
	});
	});
	</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=xSerpicoxx/prdator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>