Spaces:
Running
Running
File size: 10,370 Bytes
a7f24ff |
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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CodeCraft AI Studio</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-300">
<script src="components/navbar.js"></script>
<script src="components/sidebar.js"></script>
<custom-navbar></custom-navbar>
<div class="flex">
<custom-sidebar></custom-sidebar>
<main class="flex-1 p-8 ml-64 mt-16">
<div class="max-w-7xl mx-auto">
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 mb-8">
<h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">Welcome to CodeCraft AI Studio</h1>
<p class="text-gray-600 dark:text-gray-300 mb-6">Your AI-powered development environment for creating stunning web applications.</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Project Card 1 -->
<div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg p-6 text-white shadow-lg">
<div class="flex items-center mb-4">
<i data-feather="layout" class="mr-3"></i>
<h3 class="text-xl font-semibold">UI Templates</h3>
</div>
<p class="mb-4">Browse our collection of professionally designed UI templates.</p>
<a href="#" class="inline-flex items-center text-sm font-medium hover:underline">
Explore
<i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
</a>
</div>
<!-- Project Card 2 -->
<div class="bg-gradient-to-br from-purple-500 to-purple-600 rounded-lg p-6 text-white shadow-lg">
<div class="flex items-center mb-4">
<i data-feather="code" class="mr-3"></i>
<h3 class="text-xl font-semibold">Code Generator</h3>
</div>
<p class="mb-4">Generate production-ready code with our AI-powered tools.</p>
<a href="#" class="inline-flex items-center text-sm font-medium hover:underline">
Try Now
<i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
</a>
</div>
<!-- Project Card 3 -->
<div class="bg-gradient-to-br from-green-500 to-green-600 rounded-lg p-6 text-white shadow-lg">
<div class="flex items-center mb-4">
<i data-feather="zap" class="mr-3"></i>
<h3 class="text-xl font-semibold">AI Assistant</h3>
</div>
<p class="mb-4">Get instant help from our AI development assistant.</p>
<a href="#" class="inline-flex items-center text-sm font-medium hover:underline">
Chat Now
<i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
</a>
</div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Recent Projects -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
<div class="flex justify-between items-center mb-6">
<h2 class="text-xl font-bold text-gray-800 dark:text-white">Recent Projects</h2>
<a href="#" class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400">View All</a>
</div>
<div class="space-y-4">
<div class="flex items-start p-4 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg transition-colors">
<div class="bg-blue-100 dark:bg-blue-900 p-3 rounded-lg mr-4">
<i data-feather="shopping-cart" class="text-blue-500 dark:text-blue-300"></i>
</div>
<div>
<h3 class="font-medium text-gray-800 dark:text-white">E-commerce Dashboard</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Updated 2 hours ago</p>
</div>
</div>
<div class="flex items-start p-4 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg transition-colors">
<div class="bg-purple-100 dark:bg-purple-900 p-3 rounded-lg mr-4">
<i data-feather="users" class="text-purple-500 dark:text-purple-300"></i>
</div>
<div>
<h3 class="font-medium text-gray-800 dark:text-white">User Management System</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Updated yesterday</p>
</div>
</div>
<div class="flex items-start p-4 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg transition-colors">
<div class="bg-green-100 dark:bg-green-900 p-3 rounded-lg mr-4">
<i data-feather="bar-chart-2" class="text-green-500 dark:text-green-300"></i>
</div>
<div>
<h3 class="font-medium text-gray-800 dark:text-white">Analytics Dashboard</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Updated 3 days ago</p>
</div>
</div>
</div>
</div>
<!-- Quick Actions -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
<h2 class="text-xl font-bold text-gray-800 dark:text-white mb-6">Quick Actions</h2>
<div class="grid grid-cols-2 gap-4">
<a href="#" class="flex flex-col items-center justify-center p-6 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors">
<div class="bg-blue-100 dark:bg-blue-900 p-3 rounded-full mb-3">
<i data-feather="file-plus" class="text-blue-500 dark:text-blue-300"></i>
</div>
<span class="text-sm font-medium text-gray-700 dark:text-gray-200">New Project</span>
</a>
<a href="#" class="flex flex-col items-center justify-center p-6 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors">
<div class="bg-purple-100 dark:bg-purple-900 p-3 rounded-full mb-3">
<i data-feather="upload" class="text-purple-500 dark:text-purple-300"></i>
</div>
<span class="text-sm font-medium text-gray-700 dark:text-gray-200">Import</span>
</a>
<a href="#" class="flex flex-col items-center justify-center p-6 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors">
<div class="bg-green-100 dark:bg-green-900 p-3 rounded-full mb-3">
<i data-feather="settings" class="text-green-500 dark:text-green-300"></i>
</div>
<span class="text-sm font-medium text-gray-700 dark:text-gray-200">Settings</span>
</a>
<a href="#" class="flex flex-col items-center justify-center p-6 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors">
<div class="bg-yellow-100 dark:bg-yellow-900 p-3 rounded-full mb-3">
<i data-feather="help-circle" class="text-yellow-500 dark:text-yellow-300"></i>
</div>
<span class="text-sm font-medium text-gray-700 dark:text-gray-200">Help</span>
</a>
</div>
</div>
</div>
</div>
</main>
</div>
<script>
feather.replace();
// Dark mode toggle
const darkModeToggle = document.getElementById('darkModeToggle');
const html = document.documentElement;
if (localStorage.getItem('darkMode') === 'true') {
html.classList.add('dark');
}
darkModeToggle.addEventListener('click', () => {
html.classList.toggle('dark');
localStorage.setItem('darkMode', html.classList.contains('dark'));
});
</script>
<script src="script.js"></script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |