|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Full-Stack App Builder</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); |
|
|
} |
|
|
.backend-node { |
|
|
background: linear-gradient(135deg, #f093fb, #f5576c); |
|
|
} |
|
|
.frontend-node { |
|
|
background: linear-gradient(135deg, #4facfe, #00f2fe); |
|
|
} |
|
|
.database-node { |
|
|
background: linear-gradient(135deg, #43e97b, #38f9d7); |
|
|
} |
|
|
.flow-line { |
|
|
position: absolute; |
|
|
height: 2px; |
|
|
background: rgba(255,255,255,0.3); |
|
|
transform-origin: left center; |
|
|
} |
|
|
.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); |
|
|
} |
|
|
@keyframes pulse { |
|
|
0%, 100% { opacity: 1; } |
|
|
50% { opacity: 0.5; } |
|
|
} |
|
|
.animate-pulse { |
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 font-sans"> |
|
|
<div class="min-h-screen flex flex-col"> |
|
|
|
|
|
<header class="gradient-bg text-white shadow-lg"> |
|
|
<div class="container mx-auto px-4 py-6 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-code text-2xl"></i> |
|
|
<h1 class="text-2xl font-bold">FullStack Builder</h1> |
|
|
</div> |
|
|
<div class="flex space-x-4"> |
|
|
<button class="px-4 py-2 bg-white text-purple-600 rounded-lg font-semibold hover:bg-gray-100 transition"> |
|
|
<i class="fas fa-play mr-2"></i>Run Project |
|
|
</button> |
|
|
<button class="px-4 py-2 bg-purple-700 text-white rounded-lg font-semibold hover:bg-purple-800 transition"> |
|
|
<i class="fas fa-cloud-upload-alt mr-2"></i>Deploy |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-1 container mx-auto px-4 py-8"> |
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="lg:col-span-1 bg-white rounded-xl shadow-md p-6"> |
|
|
<h2 class="text-xl font-bold mb-6 text-gray-800 flex items-center"> |
|
|
<i class="fas fa-cubes mr-2 text-purple-500"></i> Components |
|
|
</h2> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="p-4 border border-gray-200 rounded-lg hover:border-purple-300 transition cursor-pointer"> |
|
|
<h3 class="font-semibold text-gray-700 flex items-center"> |
|
|
<i class="fas fa-server mr-2 text-pink-500"></i> Backend Services |
|
|
</h3> |
|
|
<div class="mt-2 grid grid-cols-2 gap-2"> |
|
|
<span class="text-xs bg-pink-100 text-pink-800 px-2 py-1 rounded">API Routes</span> |
|
|
<span class="text-xs bg-pink-100 text-pink-800 px-2 py-1 rounded">Authentication</span> |
|
|
<span class="text-xs bg-pink-100 text-pink-800 px-2 py-1 rounded">Database</span> |
|
|
<span class="text-xs bg-pink-100 text-pink-800 px-2 py-1 rounded">Middleware</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 border border-gray-200 rounded-lg hover:border-blue-300 transition cursor-pointer"> |
|
|
<h3 class="font-semibold text-gray-700 flex items-center"> |
|
|
<i class="fas fa-desktop mr-2 text-blue-500"></i> Frontend Elements |
|
|
</h3> |
|
|
<div class="mt-2 grid grid-cols-2 gap-2"> |
|
|
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">Pages</span> |
|
|
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">Components</span> |
|
|
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">Forms</span> |
|
|
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">Navigation</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 border border-gray-200 rounded-lg hover:border-green-300 transition cursor-pointer"> |
|
|
<h3 class="font-semibold text-gray-700 flex items-center"> |
|
|
<i class="fas fa-database mr-2 text-green-500"></i> Database Models |
|
|
</h3> |
|
|
<div class="mt-2 grid grid-cols-2 gap-2"> |
|
|
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Users</span> |
|
|
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Products</span> |
|
|
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Orders</span> |
|
|
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Settings</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:col-span-2"> |
|
|
<div class="bg-white rounded-xl shadow-md p-6 h-full"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-xl font-bold text-gray-800 flex items-center"> |
|
|
<i class="fas fa-project-diagram mr-2 text-purple-500"></i> App Architecture |
|
|
</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="p-2 bg-gray-100 rounded-lg hover:bg-gray-200"> |
|
|
<i class="fas fa-redo text-gray-600"></i> |
|
|
</button> |
|
|
<button class="p-2 bg-gray-100 rounded-lg hover:bg-gray-200"> |
|
|
<i class="fas fa-undo text-gray-600"></i> |
|
|
</button> |
|
|
<button class="p-2 bg-purple-100 text-purple-600 rounded-lg hover:bg-purple-200"> |
|
|
<i class="fas fa-save"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="relative h-96 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300 overflow-hidden"> |
|
|
|
|
|
<div class="flow-line" style="width: 100px; top: 120px; left: 120px; transform: rotate(0deg);"></div> |
|
|
<div class="flow-line" style="width: 100px; top: 120px; left: 320px; transform: rotate(0deg);"></div> |
|
|
|
|
|
|
|
|
<div class="absolute backend-node w-24 h-24 rounded-full shadow-lg flex flex-col items-center justify-center text-white cursor-move top-20 left-20 card-hover transition"> |
|
|
<i class="fas fa-server text-2xl"></i> |
|
|
<span class="text-xs mt-1 font-semibold">Backend</span> |
|
|
<div class="absolute -bottom-2 bg-pink-500 text-white text-xs px-2 py-1 rounded-full"> |
|
|
Node.js |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="absolute frontend-node w-24 h-24 rounded-full shadow-lg flex flex-col items-center justify-center text-white cursor-move top-20 left-80 card-hover transition"> |
|
|
<i class="fas fa-desktop text-2xl"></i> |
|
|
<span class="text-xs mt-1 font-semibold">Frontend</span> |
|
|
<div class="absolute -bottom-2 bg-blue-500 text-white text-xs px-2 py-1 rounded-full"> |
|
|
React |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="absolute database-node w-24 h-24 rounded-full shadow-lg flex flex-col items-center justify-center text-white cursor-move top-60 left-48 card-hover transition"> |
|
|
<i class="fas fa-database text-2xl"></i> |
|
|
<span class="text-xs mt-1 font-semibold">Database</span> |
|
|
<div class="absolute -bottom-2 bg-green-500 text-white text-xs px-2 py-1 rounded-full"> |
|
|
MongoDB |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="absolute flex items-center justify-center top-40 left-72"> |
|
|
<div class="relative"> |
|
|
<div class="w-16 h-8 bg-purple-100 rounded-full flex items-center justify-center"> |
|
|
<span class="text-xs font-bold text-purple-800">API</span> |
|
|
</div> |
|
|
<div class="absolute inset-0 rounded-full bg-purple-200 animate-pulse"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 grid grid-cols-3 gap-4"> |
|
|
<div class="bg-blue-50 p-4 rounded-lg border border-blue-100"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-blue-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-code text-blue-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold text-gray-700">Frontend</h4> |
|
|
<p class="text-xs text-gray-500">React, TailwindCSS</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-pink-50 p-4 rounded-lg border border-pink-100"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-pink-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-server text-pink-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold text-gray-700">Backend</h4> |
|
|
<p class="text-xs text-gray-500">Node.js, Express</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-green-50 p-4 rounded-lg border border-green-100"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-green-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-database text-green-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold text-gray-700">Database</h4> |
|
|
<p class="text-xs text-gray-500">MongoDB Atlas</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-8 bg-gray-800 rounded-xl shadow-lg overflow-hidden"> |
|
|
<div class="bg-gray-900 px-4 py-2 flex items-center"> |
|
|
<div class="flex space-x-2 mr-4"> |
|
|
<div class="w-3 h-3 rounded-full bg-red-500"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-yellow-500"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-green-500"></div> |
|
|
</div> |
|
|
<span class="text-gray-300 text-sm font-mono">Terminal - Server Logs</span> |
|
|
</div> |
|
|
<div class="p-4 font-mono text-sm text-green-400 h-40 overflow-y-auto"> |
|
|
<div class="mb-2"> |
|
|
<span class="text-purple-400">$</span> npm start |
|
|
</div> |
|
|
<div class="mb-1 text-gray-400">Starting development server...</div> |
|
|
<div class="mb-1">Backend server running on <span class="text-blue-400">http://localhost:3000</span></div> |
|
|
<div class="mb-1">Connected to MongoDB Atlas cluster</div> |
|
|
<div class="mb-1">Webpack compiled successfully</div> |
|
|
<div class="mb-1">Frontend running on <span class="text-blue-400">http://localhost:3001</span></div> |
|
|
<div class="text |
|
|
</html> |
