File size: 14,067 Bytes
1162541 6032013 1162541 6032013 1162541 6032013 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 |
<!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 -->
<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 Content -->
<main class="flex-1 container mx-auto px-4 py-8">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Left Panel - Components -->
<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>
<!-- Center Panel - Builder Canvas -->
<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">
<!-- Flow lines -->
<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>
<!-- Backend Node -->
<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>
<!-- Frontend Node -->
<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>
<!-- Database Node -->
<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>
<!-- API Connection Indicator -->
<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>
<!-- Terminal Section -->
<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> |