Dhanesh1/codegenius-your-ai-code-wizard

1<!DOCTYPE html>2<html lang="en">3<head>4    <meta charset="UTF-8">5    <meta name="viewport" content="width=device-width, initial-scale=1.0">6    <title>CodeGenius - AI Code Generator</title>7    <link rel="stylesheet" href="style.css">8    <script src="https://cdn.tailwindcss.com"></script>9    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10    <script src="https://unpkg.com/feather-icons"></script>11    <script src="components/navbar.js"></script>12    <script src="components/chat-bubble.js"></script>13</head>14<body class="bg-gray-100 min-h-screen">15    <custom-navbar></custom-navbar>16    17    <main class="container mx-auto px-4 py-8">18        <div class="max-w-4xl mx-auto">19            <div class="text-center mb-12">20                <h1 class="text-4xl font-bold text-gray-800 mb-4">CodeGenius</h1>21                <p class="text-xl text-gray-600">Your AI-powered code wizard for Java, C, and Python</p>22            </div>23 24            <div class="bg-white rounded-xl shadow-lg overflow-hidden">25                <div class="p-6 border-b border-gray-200">26                    <div class="flex items-center">27                        <div class="w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center text-white">28                            <i data-feather="cpu"></i>29                        </div>30                        <div class="ml-4">31                            <h3 class="font-medium text-gray-800">CodeGenius</h3>32                            <p class="text-sm text-gray-500">Ask me to generate code in Java, C, or Python</p>33                        </div>34                    </div>35                </div>36 37                <div id="chat-container" class="h-96 overflow-y-auto p-6 space-y-4">38                    <custom-chat-bubble type="bot">39                        Hello! I'm CodeGenius 🧙‍♂️ I can generate code for you in Java, C, or Python. What would you like me to create?40                    </custom-chat-bubble>41                </div>42 43                <div class="p-6 border-t border-gray-200 bg-gray-50">44                    <div class="flex">45                        <select id="language-select" class="bg-white border border-gray-300 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">46                            <option value="java">Java</option>47                            <option value="c">C</option>48                            <option value="python">Python</option>49                        </select>50                        <input id="user-input" type="text" placeholder="Ask for code (e.g., 'binary search in Java')" class="flex-1 border-t border-b border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">51                        <button id="send-btn" class="bg-indigo-600 text-white px-6 py-2 rounded-r-lg hover:bg-indigo-700 transition-colors flex items-center">52                            <i data-feather="send" class="mr-2"></i> Send53                        </button>54                    </div>55                </div>56            </div>57 58            <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">59                <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">60                    <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600 mb-4">61                        <i data-feather="code"></i>62                    </div>63                    <h3 class="font-medium text-lg mb-2">Java Code</h3>64                    <p class="text-gray-600">Generate efficient Java code for any algorithm or functionality.</p>65                </div>66                <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">67                    <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mb-4">68                        <i data-feather="terminal"></i>69                    </div>70                    <h3 class="font-medium text-lg mb-2">C Code</h3>71                    <p class="text-gray-600">Get optimized C code for system programming and algorithms.</p>72                </div>73                <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">74                    <div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 mb-4">75                        <i data-feather="zap"></i>76                    </div>77                    <h3 class="font-medium text-lg mb-2">Python Code</h3>78                    <p class="text-gray-600">Quick Python scripts for data science, automation, and more.</p>79                </div>80            </div>81        </div>82    </main>83 84    <footer class="bg-gray-800 text-white py-8 mt-12">85        <div class="container mx-auto px-4">86            <div class="flex flex-col md:flex-row justify-between items-center">87                <div class="mb-4 md:mb-0">88                    <h2 class="text-2xl font-bold">CodeGenius</h2>89                    <p class="text-gray-400">Your AI Code Wizard</p>90                </div>91                <div class="flex space-x-6">92                    <a href="#" class="hover:text-indigo-400 transition-colors">93                        <i data-feather="github"></i>94                    </a>95                    <a href="#" class="hover:text-indigo-400 transition-colors">96                        <i data-feather="twitter"></i>97                    </a>98                    <a href="#" class="hover:text-indigo-400 transition-colors">99                        <i data-feather="linkedin"></i>100                    </a>101                </div>102            </div>103            <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400">104                <p>© 2023 CodeGenius. All rights reserved.</p>105            </div>106        </div>107    </footer>108 109    <script src="script.js"></script>110    <script>111        feather.replace();112    </script>113<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>114</body>115</html>