Spaces:
Running
Running
File size: 9,989 Bytes
1fc5a9b | 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 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CodeCraft AI Wizard</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">
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: {
DEFAULT: '#8B5CF6',
500: '#8B5CF6',
},
secondary: {
DEFAULT: '#EC4899',
500: '#EC4899',
}
}
}
}
}
</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">
<div class="max-w-4xl mx-auto">
<!-- Hero Section -->
<section class="text-center mb-16">
<h1 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-primary-500 to-secondary-500 bg-clip-text text-transparent">
CodeCraft AI Wizard
</h1>
<p class="text-xl text-gray-400 mb-8">
Magically transform your ideas into functional code
</p>
<div class="flex justify-center gap-4">
<a href="#generator" class="bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 rounded-lg font-medium transition-all">
<i data-feather="zap" class="inline mr-2"></i> Try Generator
</a>
<a href="#examples" class="border border-secondary-500 text-secondary-500 hover:bg-secondary-500/10 px-6 py-3 rounded-lg font-medium transition-all">
<i data-feather="book-open" class="inline mr-2"></i> View Examples
</a>
</div>
</section>
<!-- Code Generator -->
<section id="generator" class="mb-16 bg-gray-800 rounded-xl p-6 shadow-lg">
<h2 class="text-2xl font-bold mb-6 text-primary-500">
<i data-feather="code" class="inline mr-2"></i> Code Generator
</h2>
<div class="mb-6">
<label for="description" class="block text-sm font-medium mb-2 text-gray-300">Describe what you need</label>
<textarea id="description" rows="4" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent text-gray-200 placeholder-gray-500" placeholder="Example: Create a Python function to calculate Fibonacci sequence..."></textarea>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div>
<label for="language" class="block text-sm font-medium mb-2 text-gray-300">Language</label>
<select id="language" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent text-gray-200">
<option value="python">Python</option>
<option value="javascript">JavaScript</option>
<option value="java">Java</option>
<option value="csharp">C#</option>
<option value="php">PHP</option>
</select>
</div>
<div>
<label for="style" class="block text-sm font-medium mb-2 text-gray-300">Code Style</label>
<select id="style" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent text-gray-200">
<option value="clean">Clean & Simple</option>
<option value="detailed">Detailed with Comments</option>
<option value="minimal">Minimalist</option>
</select>
</div>
</div>
<div class="flex items-center mb-6">
<input id="comments" type="checkbox" checked class="w-4 h-4 text-primary-500 bg-gray-700 border-gray-600 rounded focus:ring-primary-500">
<label for="comments" class="ml-2 text-sm font-medium text-gray-300">Include Comments</label>
</div>
<button id="generateBtn" class="w-full bg-gradient-to-r from-primary-500 to-secondary-500 hover:from-primary-600 hover:to-secondary-600 text-white font-bold py-3 px-4 rounded-lg transition-all flex items-center justify-center">
<i data-feather="wand" class="mr-2"></i> Generate Code
</button>
<div class="mt-8">
<div class="flex justify-between items-center mb-2">
<h3 class="text-lg font-medium text-gray-300">Generated Code</h3>
<button id="copyBtn" class="text-sm bg-gray-700 hover:bg-gray-600 text-gray-300 py-1 px-3 rounded">
<i data-feather="copy" class="inline mr-1 w-4 h-4"></i> Copy
</button>
</div>
<pre id="codeOutput" class="bg-gray-900 p-4 rounded-lg overflow-x-auto text-gray-300 border border-gray-700">
// Your generated code will appear here
// Describe what you need above and click "Generate Code"
</pre>
</div>
</section>
<!-- Examples Section -->
<section id="examples" class="mb-16">
<h2 class="text-2xl font-bold mb-6 text-secondary-500">
<i data-feather="book-open" class="inline mr-2"></i> Example Prompts
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-gray-800 p-4 rounded-lg border border-gray-700 hover:border-secondary-500 transition-all cursor-pointer" onclick="loadExample(1)">
<h3 class="font-medium text-gray-200 mb-2">Python Fibonacci</h3>
<p class="text-sm text-gray-400">Generate a Python function that calculates Fibonacci sequence up to n terms</p>
</div>
<div class="bg-gray-800 p-4 rounded-lg border border-gray-700 hover:border-secondary-500 transition-all cursor-pointer" onclick="loadExample(2)">
<h3 class="font-medium text-gray-200 mb-2">React Contact Form</h3>
<p class="text-sm text-gray-400">Create a React component for a contact form with validation</p>
</div>
<div class="bg-gray-800 p-4 rounded-lg border border-gray-700 hover:border-secondary-500 transition-all cursor-pointer" onclick="loadExample(3)">
<h3 class="font-medium text-gray-200 mb-2">JavaScript Event Handler</h3>
<p class="text-sm text-gray-400">Write a JavaScript class for a custom event handler</p>
</div>
<div class="bg-gray-800 p-4 rounded-lg border border-gray-700 hover:border-secondary-500 transition-all cursor-pointer" onclick="loadExample(4)">
<h3 class="font-medium text-gray-200 mb-2">SQL User Table</h3>
<p class="text-sm text-gray-400">Generate SQL to create a users table with relationships</p>
</div>
</div>
</section>
<!-- Features Section -->
<section class="mb-16">
<h2 class="text-2xl font-bold mb-6 text-primary-500">
<i data-feather="star" class="inline mr-2"></i> Why Choose CodeCraft?
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-gray-800 p-6 rounded-lg">
<div class="text-secondary-500 mb-4">
<i data-feather="zap" class="w-8 h-8"></i>
</div>
<h3 class="font-bold text-lg mb-2">Instant Generation</h3>
<p class="text-gray-400">Get production-ready code in seconds, not hours</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg">
<div class="text-secondary-500 mb-4">
<i data-feather="code" class="w-8 h-8"></i>
</div>
<h3 class="font-bold text-lg mb-2">20+ Languages</h3>
<p class="text-gray-400">Support for all major programming languages</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg">
<div class="text-secondary-500 mb-4">
<i data-feather="shield" class="w-8 h-8"></i>
</div>
<h3 class="font-bold text-lg mb-2">Secure & Private</h3>
<p class="text-gray-400">Your code never leaves your browser</p>
</div>
</div>
</section>
</div>
</main>
<custom-footer></custom-footer>
<script src="script.js"></script>
<script>
feather.replace();
</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |