Ray1mo/codegenius-ai-assistant-bot

1<!DOCTYPE html>2<html lang="en" class="light">3<head>4    <meta charset="UTF-8">5    <meta name="viewport" content="width=device-width, initial-scale=1.0">6    <title>CodeGenius AI Assistant</title>7    <link rel="stylesheet" href="style.css">8    <script src="https://cdn.tailwindcss.com"></script>9    <script src="https://unpkg.com/feather-icons"></script>10    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>12</head>13<body class="bg-gray-50 min-h-screen flex flex-col">14    <custom-navbar></custom-navbar>15 16    <main class="flex-grow container mx-auto px-4 py-8">17        <div class="max-w-4xl mx-auto">18            <div class="text-center mb-12">19                <h1 class="text-4xl font-bold text-gray-800 mb-4">SwiftCoder AI ⚡</h1>20                <p class="text-lg text-gray-600">Lightning-fast code generation with zero fluff</p>21</div>22 23            <div class="bg-white rounded-xl shadow-lg overflow-hidden">24                <div class="chat-container p-6">25                    <div id="chat-messages" class="mb-6 space-y-4 max-h-96 overflow-y-auto">26                        <div class="bot-message bg-blue-50 p-4 rounded-lg">27                            <div class="flex items-start gap-3">28                                <div class="bg-blue-100 p-2 rounded-full">29                                    <i data-feather="cpu" class="text-blue-500"></i>30                                </div>31                                <div>32                            <p class="text-gray-800">SwiftCoder here. What code do you need?</p>33</div>34                            </div>35                        </div>36                    </div>37 38                    <div class="flex gap-3">39                        <input 40                            type="text" 41                            id="user-input" 42                            placeholder="Ask me to write some code..." 43                            class="flex-grow px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none"44                        >45                        <button 46                            id="send-btn"47                            class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg flex items-center gap-2 transition-colors"48                        >49                            <i data-feather="send" class="w-5 h-5"></i>50                            <span>Send</span>51                        </button>52                    </div>53                </div>54            </div>55 56            <div class="mt-12 grid md:grid-cols-3 gap-6">57                <div class="bg-white p-6 rounded-xl shadow">58                    <div class="flex items-center gap-3 mb-4">59                        <div class="bg-purple-100 p-3 rounded-full">60                            <i data-feather="code" class="text-purple-600"></i>61                        </div>62                        <h3 class="text-xl font-semibold text-gray-800">Multi-Language</h3>63                    </div>64                    <p class="text-gray-600">Generate code in Python, JavaScript, Java, C++, Rust, Go, and 50+ other languages.</p>65                </div>66 67                <div class="bg-white p-6 rounded-xl shadow">68                    <div class="flex items-center gap-3 mb-4">69                        <div class="bg-green-100 p-3 rounded-full">70                            <i data-feather="book-open" class="text-green-600"></i>71                        </div>72                        <h3 class="text-xl font-semibold text-gray-800">Well-Documented</h3>73                    </div>74                    <p class="text-gray-600">Get clean, efficient code with comprehensive comments and documentation.</p>75                </div>76 77                <div class="bg-white p-6 rounded-xl shadow">78                    <div class="flex items-center gap-3 mb-4">79                        <div class="bg-yellow-100 p-3 rounded-full">80                            <i data-feather="globe" class="text-yellow-600"></i>81                        </div>82                        <h3 class="text-xl font-semibold text-gray-800">Multi-Lingual</h3>83                    </div>84                    <p class="text-gray-600">Understands and responds in English, Spanish, French, Chinese, and more.</p>85                </div>86            </div>87        </div>88    </main>89 90    <custom-footer></custom-footer>91 92    <script src="components/navbar.js"></script>93    <script src="components/footer.js"></script>94    <script src="script.js"></script>95    <script>96        feather.replace();97    </script>98<script src="https://deepsite.hf.co/deepsite-badge.js"></script>99</body>100</html>