Spaces:

fernando-bold
/

codewhisper-ide-companion

Running

Com base nas quatro imagens fornecidas, identifiquei três produtos distintos. Aqui está uma captura dos parâmetros de design, UX/UI e produto para cada um deles.

0477c6d verified 6 months ago

raw

history blame contribute delete

9.25 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>CodeWhisper IDE Companion</title>
	<link rel="stylesheet" href="style.css">
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
	<script src="https://unpkg.com/feather-icons"></script>
	</head>
	<body class="bg-gray-900 text-gray-100 h-screen overflow-hidden">
	<div class="flex h-full">
	<!-- Activity Bar -->
	<div class="w-16 bg-gray-800 flex flex-col items-center py-4 space-y-6">
	<div class="p-2 rounded-md bg-gray-700">
	<i data-feather="code" class="text-blue-400"></i>
	</div>
	<div class="p-2 rounded-md hover:bg-gray-700 cursor-pointer">
	<i data-feather="file-text"></i>
	</div>
	<div class="p-2 rounded-md hover:bg-gray-700 cursor-pointer">
	<i data-feather="search"></i>
	</div>
	<div class="p-2 rounded-md hover:bg-gray-700 cursor-pointer">
	<i data-feather="git-branch"></i>
	</div>
	<div class="p-2 rounded-md hover:bg-gray-700 cursor-pointer">
	<i data-feather="cpu"></i>
	</div>
	<div class="mt-auto p-2 rounded-md hover:bg-gray-700 cursor-pointer">
	<i data-feather="settings"></i>
	</div>
	</div>

	<!-- Sidebar -->
	<div class="w-64 bg-gray-800 border-r border-gray-700 flex flex-col">
	<div class="p-4 border-b border-gray-700">
	<h2 class="font-semibold text-sm uppercase tracking-wider text-gray-400">Explorer</h2>
	</div>
	<div class="flex-1 overflow-y-auto">
	<div class="py-2 px-4 text-sm text-gray-400 hover:bg-gray-700 cursor-pointer flex items-center">
	<i data-feather="folder" class="mr-2"></i> project-name
	</div>
	<div class="pl-8">
	<div class="py-1 px-4 text-sm hover:bg-gray-700 cursor-pointer flex items-center">
	<i data-feather="file-text" class="mr-2 text-blue-400"></i> index.html
	</div>
	<div class="py-1 px-4 text-sm hover:bg-gray-700 cursor-pointer flex items-center">
	<i data-feather="file-text" class="mr-2 text-green-400"></i> style.css
	</div>
	<div class="py-1 px-4 text-sm hover:bg-gray-700 cursor-pointer flex items-center">
	<i data-feather="file-text" class="mr-2 text-yellow-400"></i> script.js
	</div>
	</div>
	</div>
	</div>

	<!-- Main Content -->
	<div class="flex-1 flex flex-col">
	<!-- Editor Tabs -->
	<div class="bg-gray-800 border-b border-gray-700 flex">
	<div class="px-4 py-2 text-sm border-r border-gray-700 flex items-center">
	<i data-feather="file-text" class="mr-2 text-blue-400"></i> index.html
	</div>
	<div class="px-4 py-2 text-sm text-gray-400 flex items-center">
	<i data-feather="file-text" class="mr-2"></i> style.css
	</div>
	</div>

	<!-- Editor Area -->
	<div class="flex-1 flex overflow-hidden">
	<!-- Code Editor -->
	<div class="flex-1 overflow-auto">
	<div class="p-4 font-mono text-sm">
	<div class="text-gray-500">1</div>
	<div class="text-gray-500">2</div>
	<div class="text-gray-500">3</div>
	<div class="text-blue-400">4 <!DOCTYPE html></div>
	<div class="text-blue-400">5 <html lang="en"></div>
	<div class="text-blue-400">6 <head></div>
	<div class="text-blue-400">7 <meta charset="UTF-8"></div>
	<div class="text-blue-400">8 <meta name="viewport" content="width=device-width, initial-scale=1.0"></div>
	<div class="text-blue-400">9 <title>CodeWhisper IDE Companion</title></div>
	<div class="text-blue-400">10 </head></div>
	<div class="text-blue-400">11 <body></div>
	<div class="text-blue-400">12 <h1>Hello World</h1></div>
	<div class="text-blue-400">13 </body></div>
	<div class="text-blue-400">14 </html></div>
	</div>
	</div>

	<!-- AI Assistant Panel -->
	<div class="w-80 bg-gray-800 border-l border-gray-700 flex flex-col">
	<div class="p-4 border-b border-gray-700">
	<h2 class="font-semibold text-sm uppercase tracking-wider text-gray-400">AI Assistant</h2>
	</div>
	<div class="flex-1 overflow-y-auto p-4 space-y-4">
	<div class="bg-gray-700 rounded-lg p-3">
	<div class="text-sm text-gray-300">How can I help you with your code today?</div>
	</div>
	<div class="bg-blue-900 rounded-lg p-3">
	<div class="text-sm">Can you add a responsive navbar to this HTML?</div>
	</div>
	<div class="bg-gray-700 rounded-lg p-3">
	<div class="text-sm text-gray-300">Sure! Here's a responsive navbar using TailwindCSS:</div>
	<div class="mt-2 p-2 bg-gray-800 rounded text-xs font-mono">
	<nav class="bg-gray-800 p-4"><br>
	<div class="container mx-auto flex justify-between items-center"><br>
	<a href="#" class="text-white font-bold">Logo</a><br>
	<div class="hidden md:flex space-x-4"><br>
	<a href="#" class="text-gray-300 hover:text-white">Home</a><br>
	<a href="#" class="text-gray-300 hover:text-white">About</a><br>
	</div><br>
	</div><br>
	</nav>
	</div>
	<div class="mt-2 flex space-x-2">
	<button class="text-xs bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded">Insert</button>
	<button class="text-xs bg-gray-600 hover:bg-gray-700 px-2 py-1 rounded">Explain</button>
	</div>
	</div>
	</div>
	<div class="p-4 border-t border-gray-700">
	<div class="relative">
	<input type="text" placeholder="Ask the AI assistant..." class="w-full bg-gray-700 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
	<button class="absolute right-3 top-2 text-gray-400 hover:text-white">
	<i data-feather="send"></i>
	</button>
	</div>
	</div>
	</div>
	</div>

	<!-- Terminal -->
	<div class="h-40 bg-gray-800 border-t border-gray-700 flex flex-col">
	<div class="p-2 border-b border-gray-700 flex items-center">
	<i data-feather="terminal" class="mr-2 text-green-400"></i>
	<span class="text-sm">Terminal</span>
	</div>
	<div class="flex-1 overflow-auto p-2 font-mono text-sm">
	<div class="text-green-400">user@codewhisper:~$ npm start</div>
	<div class="text-gray-300">> codewhisper@1.0.0 start</div>
	<div class="text-gray-300">> vite</div>
	<div class="text-gray-300"></div>
	<div class="text-gray-300"> VITE v4.4.9 ready in 320 ms</div>
	<div class="text-gray-300"></div>
	<div class="text-gray-300"> ➜ Local: http://localhost:5173/</div>
	<div class="text-gray-300"> ➜ Network: use --host to expose</div>
	<div class="text-gray-300"> ➜ press h to show help</div>
	<div class="text-green-400">user@codewhisper:~$</div>
	</div>
	</div>
	</div>
	</div>

	<script src="script.js"></script>
	<script>feather.replace();</script>
	<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
	</body>
	</html>