File size: 6,613 Bytes
d5033c9 | 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 | <!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Code Wizardry Box</title>
<link rel="stylesheet" href="style.css">
<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>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: {
500: '#6366f1',
},
secondary: {
500: '#10b981',
}
}
}
}
}
</script>
</head>
<body class="bg-gray-900 text-gray-100 min-h-screen">
<custom-navbar></custom-navbar>
<main class="container mx-auto px-4 py-8">
<section class="max-w-4xl mx-auto">
<div class="text-center mb-12">
<h1 class="text-4xl font-bold mb-4 text-primary-500">AI Code Wizardry Box</h1>
<p class="text-xl text-gray-400">Describe your dream app and watch our AI wizards conjure it into reality</p>
</div>
<div class="bg-gray-800 rounded-xl p-6 shadow-lg mb-8">
<div class="flex items-center mb-4">
<i data-feather="edit-3" class="mr-2 text-secondary-500"></i>
<h2 class="text-2xl font-semibold">Your App Vision</h2>
</div>
<textarea
class="w-full h-48 p-4 bg-gray-700 rounded-lg border border-gray-600 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 text-gray-100 placeholder-gray-400"
placeholder="Describe the app you want to create (e.g. 'A todo list with user authentication, dark mode, and cloud sync')"></textarea>
<button class="mt-4 px-6 py-3 bg-primary-500 hover:bg-primary-600 text-white font-medium rounded-lg transition duration-200 flex items-center mx-auto">
<i data-feather="wand" class="mr-2"></i>
Conjure My App
</button>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-gray-800 rounded-xl p-6 shadow-lg">
<div class="flex items-center mb-4">
<i data-feather="cpu" class="mr-2 text-secondary-500"></i>
<h2 class="text-2xl font-semibold">AI Agents</h2>
</div>
<div class="space-y-4">
<div class="flex items-start">
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-700 flex items-center justify-center mr-3">
<i data-feather="compass" class="text-primary-500"></i>
</div>
<div>
<h3 class="font-medium">Planner</h3>
<p class="text-sm text-gray-400">Architects your app structure</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-700 flex items-center justify-center mr-3">
<i data-feather="code" class="text-primary-500"></i>
</div>
<div>
<h3 class="font-medium">Code Genie</h3>
<p class="text-sm text-gray-400">Writes the actual code</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-700 flex items-center justify-center mr-3">
<i data-feather="shield" class="text-primary-500"></i>
</div>
<div>
<h3 class="font-medium">Quality Guardian</h3>
<p class="text-sm text-gray-400">Tests everything works</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-700 flex items-center justify-center mr-3">
<i data-feather="cloud" class="text-primary-500"></i>
</div>
<div>
<h3 class="font-medium">Deploy Wizard</h3>
<p class="text-sm text-gray-400">Makes it live instantly</p>
</div>
</div>
</div>
</div>
<div class="bg-gray-800 rounded-xl p-6 shadow-lg">
<div class="flex items-center mb-4">
<i data-feather="activity" class="mr-2 text-secondary-500"></i>
<h2 class="text-2xl font-semibold">Recent Creations</h2>
</div>
<div class="space-y-3">
<div class="bg-gray-700 p-3 rounded-lg">
<h3 class="font-medium">E-commerce Store</h3>
<p class="text-sm text-gray-400">Built 2 hours ago</p>
</div>
<div class="bg-gray-700 p-3 rounded-lg">
<h3 class="font-medium">Fitness Tracker</h3>
<p class="text-sm text-gray-400">Built yesterday</p>
</div>
<div class="bg-gray-700 p-3 rounded-lg">
<h3 class="font-medium">Recipe Manager</h3>
<p class="text-sm text-gray-400">Built 3 days ago</p>
</div>
</div>
</div>
</div>
</section>
</main>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>feather.replace();</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |