Hugging Face's logo

Spaces:
erkinalp
/
codewiz-ai-studio
Running

App Files Community
codewiz-ai-studio / index.html
erkinalp's picture
erkinalp
now add the deepwiki and ask devin features
9e61e06 verified
raw
history blame contribute delete
16.8 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DevinAI Clone - AI Code Assistant</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>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Inter', sans-serif;
}
.code-font {
font-family: 'JetBrains Mono', monospace;
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<custom-navbar></custom-navbar>
<custom-sidebar></custom-sidebar>
<main class="ml-0 md:ml-64 pt-16 px-4 md:px-8 pb-8">
<div class="max-w-7xl mx-auto">
<!-- Header Section -->
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 mt-6">
<div>
<h1 class="text-3xl md:text-4xl font-bold text-gray-900">Welcome back, <span class="text-blue-600">Alex</span></h1>
<p class="text-gray-600 mt-2">Your AI coding assistant is ready to help you build amazing things</p>
</div>
<div class="mt-4 md:mt-0">
<div class="flex gap-3">
<button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold flex items-center shadow-lg hover:shadow-xl transition-all duration-300">
<i data-feather="plus" class="w-5 h-5 mr-2"></i>
New Project
</button>
<a href="deepwiki.html" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-semibold flex items-center shadow-lg hover:shadow-xl transition-all duration-300">
<i data-feather="book" class="w-5 h-5 mr-2"></i>
DeepWiki
</a>
</div>
</div>
</div>
<!-- Stats Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div class="bg-white p-6 rounded-xl shadow-md border border-gray-200">
<div class="flex items-center">
<div class="p-3 bg-blue-100 rounded-lg">
<i data-feather="code" class="w-6 h-6 text-blue-600"></i>
</div>
<div class="ml-4">
<p class="text-gray-500 text-sm">Active Projects</p>
<p class="text-2xl font-bold text-gray-900">12</p>
</div>
</div>
</div>
<div class="bg-white p-6 rounded-xl shadow-md border border-gray-200">
<div class="flex items-center">
<div class="p-3 bg-green-100 rounded-lg">
<i data-feather="check-circle" class="w-6 h-6 text-green-600"></i>
</div>
<div class="ml-4">
<p class="text-gray-500 text-sm">Tasks Completed</p>
<p class="text-2xl font-bold text-gray-900">347</p>
</div>
</div>
</div>
<div class="bg-white p-6 rounded-xl shadow-md border border-gray-200">
<div class="flex items-center">
<div class="p-3 bg-purple-100 rounded-lg">
<i data-feather="cpu" class="w-6 h-6 text-purple-600"></i>
</div>
<div class="ml-4">
<p class="text-gray-500 text-sm">AI Agents</p>
<p class="text-2xl font-bold text-gray-900">5</p>
</div>
</div>
</div>
</div>
<!-- Main Content Area -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Recent Projects -->
<div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden">
<div class="px-6 py-4 border-b border-gray-200">
<h2 class="text-xl font-bold text-gray-900 flex items-center">
<i data-feather="folder" class="w-5 h-5 mr-2 text-blue-600"></i>
Recent Projects
</h2>
</div>
<div class="p-6">
<div class="space-y-4">
<div class="flex items-center justify-between p-4 hover:bg-gray-50 rounded-lg transition-colors">
<div class="flex items-center">
<div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg flex items-center justify-center">
<i data-feather="box" class="w-5 h-5 text-white"></i>
</div>
<div class="ml-4">
<h3 class="font-semibold text-gray-900">E-commerce Platform</h3>
<p class="text-sm text-gray-500">Updated 2 hours ago</p>
</div>
</div>
<a href="projects.html" class="text-blue-600 hover:text-blue-800 font-medium">View →</a>
</div>
<div class="flex items-center justify-between p-4 hover:bg-gray-50 rounded-lg transition-colors">
<div class="flex items-center">
<div class="w-10 h-10 bg-gradient-to-r from-green-500 to-teal-500 rounded-lg flex items-center justify-center">
<i data-feather="smartphone" class="w-5 h-5 text-white"></i>
</div>
<div class="ml-4">
<h3 class="font-semibold text-gray-900">Mobile App UI</h3>
<p class="text-sm text-gray-500">Updated yesterday</p>
</div>
</div>
<a href="projects.html" class="text-blue-600 hover:text-blue-800 font-medium">View →</a>
</div>
<div class="flex items-center justify-between p-4 hover:bg-gray-50 rounded-lg transition-colors">
<div class="flex items-center">
<div class="w-10 h-10 bg-gradient-to-r from-orange-500 to-red-500 rounded-lg flex items-center justify-center">
<i data-feather="database" class="w-5 h-5 text-white"></i>
</div>
<div class="ml-4">
<h3 class="font-semibold text-gray-900">Data Analytics Dashboard</h3>
<p class="text-sm text-gray-500">Updated 3 days ago</p>
</div>
</div>
<a href="projects.html" class="text-blue-600 hover:text-blue-800 font-medium">View →</a>
</div>
</div>
<div class="mt-6 text-center">
<div class="flex justify-center space-x-4">
<a href="projects.html" class="text-blue-600 hover:text-blue-800 font-medium inline-flex items-center">
See all projects
<i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
</a>
<a href="ask-devin.html" class="text-purple-600 hover:text-purple-800 font-medium inline-flex items-center">
Ask Devin AI
<i data-feather="message-square" class="w-4 h-4 ml-1"></i>
</a>
</div>
</div>
</div>
</div>
<!-- AI Code Assistant -->
<div class="bg-gradient-to-br from-gray-900 to-black rounded-xl shadow-2xl overflow-hidden">
<div class="px-6 py-4 border-b border-gray-800">
<h2 class="text-xl font-bold text-white flex items-center">
<i data-feather="cpu" class="w-5 h-5 mr-2 text-blue-400"></i>
AI Code Assistant
</h2>
</div>
<div class="p-6">
<div class="bg-gray-800 rounded-lg p-4 mb-6">
<div class="flex items-center mb-3">
<div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
<i data-feather="user" class="w-4 h-4 text-white"></i>
</div>
<span class="ml-3 text-white font-medium">User Request</span>
</div>
<p class="text-gray-300 code-font text-sm">// Create a responsive navbar component with Tailwind CSS</p>
</div>
<div class="bg-gray-900 rounded-lg p-4 border border-gray-700">
<div class="flex items-center mb-3">
<div class="w-8 h-8 bg-purple-500 rounded-full flex items-center justify-center">
<i data-feather="cpu" class="w-4 h-4 text-white"></i>
</div>
<span class="ml-3 text-white font-medium">DevinAI Response</span>
</div>
<pre class="text-gray-300 code-font text-sm overflow-x-auto">
&lt;nav class="bg-white shadow-lg"&gt;
&lt;div class="max-w-7xl mx-auto px-4"&gt;
&lt;div class="flex justify-between h-16"&gt;
&lt;div class="flex items-center"&gt;
&lt;h1 class="text-xl font-bold"&gt;Logo&lt;/h1&gt;
&lt;/div&gt;
&lt;div class="hidden md:flex items-center space-x-8"&gt;
&lt;a href="#" class="text-gray-700 hover:text-blue-600"&gt;Home&lt;/a&gt;
&lt;a href="#" class="text-gray-700 hover:text-blue-600"&gt;Projects&lt;/a&gt;
&lt;a href="#" class="text-gray-700 hover:text-blue-600"&gt;Settings&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/nav&gt;</pre>
</div>
<div class="mt-6">
<div class="flex items-center">
<input type="text" placeholder="Ask DevinAI to write code..." class="flex-1 bg-gray-800 text-white border border-gray-700 rounded-l-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500">
<button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-r-lg font-medium flex items-center">
<i data-feather="send" class="w-5 h-5 mr-2"></i>
Send
</button>
</div>
</div>
</div>
</div>
<!-- Activity Feed -->
<div class="lg:col-span-2 bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden mt-0">
<div class="px-6 py-4 border-b border-gray-200">
<h2 class="text-xl font-bold text-gray-900 flex items-center">
<i data-feather="activity" class="w-5 h-5 mr-2 text-green-600"></i>
Recent Activity
</h2>
</div>
<div class="p-6">
<div class="space-y-6">
<div class="flex items-start">
<div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
<i data-feather="git-commit" class="w-5 h-5 text-blue-600"></i>
</div>
<div class="ml-4 flex-1">
<div class="flex justify-between">
<h3 class="font-semibold text-gray-900">Code commit to main branch</h3>
<span class="text-sm text-gray-500">10:42 AM</span>
</div>
<p class="text-gray-600 mt-1">Fixed responsive layout issues in dashboard component</p>
<div class="mt-2 text-sm text-gray-500 code-font">git commit -m "fix: responsive dashboard layout"</div>
</div>
</div>
<div class="flex items-start">
<div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
<i data-feather="check-circle" class="w-5 h-5 text-green-600"></i>
</div>
<div class="ml-4 flex-1">
<div class="flex justify-between">
<h3 class="font-semibold text-gray-900">Build completed successfully</h3>
<span class="text-sm text-gray-500">09:15 AM</span>
</div>
<p class="text-gray-600 mt-1">Project "E-commerce Platform" built without errors</p>
<div class="mt-2 text-sm text-gray-500">Build time: 2m 34s • Size: 1.2MB</div>
</div>
</div>
<div class="flex items-start">
<div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
<i data-feather="zap" class="w-5 h-5 text-purple-600"></i>
</div>
<div class="ml-4 flex-1">
<div class="flex justify-between">
<h3 class="font-semibold text-gray-900">AI Agent deployed</h3>
<span class="text-sm text-gray-500">Yesterday</span>
</div>
<p class="text-gray-600 mt-1">Code review agent deployed to production environment</p>
<div class="mt-2 text-sm text-gray-500">Agent ID: CR-2024-001 • Status: Active</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/sidebar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>
feather.replace();
// Mobile sidebar toggle
document.addEventListener('DOMContentLoaded', function() {
const sidebarToggle = document.querySelector('[data-sidebar-toggle]');
const sidebar = document.querySelector('custom-sidebar');
if (sidebarToggle && sidebar) {
sidebarToggle.addEventListener('click', function() {
sidebar.classList.toggle('hidden');
sidebar.classList.toggle('translate-x-0');
});
}
});
</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>