Apppublic
TotalWarModder/beloozero-banner-forge

sourceHugging Faceupdated 8mo agoView on Hugging Face
0likes
ai-assistant.html73 linesDownload Raw Back to root
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>Omni AI Assistant</title>7    <link rel="stylesheet" href="style.css">8    <script src="https://cdn.tailwindcss.com"></script>9    <script src="components/navbar.js"></script>10    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>11</head>12<body class="bg-gray-100 min-h-screen">13    <custom-navbar></custom-navbar>14    15    <main class="container mx-auto px-4 py-8">16        <section class="text-center mb-8">17            <h1 class="text-4xl font-bold text-gray-800 mb-2">Omni AI Assistant</h1>18            <p class="text-lg text-gray-600">Your universal problem solver for tech, gaming, and creative tasks</p>19        </section>20 21        <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden">22            <div id="chat-container" class="h-96 overflow-y-auto p-4 space-y-4">23                <div class="bg-indigo-50 p-4 rounded-lg max-w-3xl">24                    <p class="text-indigo-800">Hello! I'm your Omni AI Assistant. I can help with:</p>25                    <ul class="list-disc pl-5 mt-2 text-indigo-700">26                        <li>Tech support and troubleshooting</li>27                        <li>Game modding and optimization</li>28                        <li>Creative tasks and content generation</li>29                        <li>Performance improvements</li>30                        <li>And much more!</li>31                    </ul>32                    <p class="mt-2 text-indigo-800">What would you like help with today?</p>33                </div>34            </div>35 36            <div class="border-t border-gray-200 p-4">37                <form id="ai-form" class="flex space-x-2">38                    <input 39                        type="text" 40                        id="user-input" 41                        placeholder="Ask me anything (e.g., 'How to fix slow game performance?')" 42                        class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"43                        required44                    >45                    <button 46                        type="submit" 47                        class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500"48                    >49                        Send50                    </button>51                </form>52            </div>53        </div>54 55        <section class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">56            <div class="bg-white p-4 rounded-lg shadow">57                <h3 class="font-bold text-lg mb-2">Tech Support</h3>58                <p class="text-gray-600">Fix computer issues, optimize performance, troubleshoot errors</p>59            </div>60            <div class="bg-white p-4 rounded-lg shadow">61                <h3 class="font-bold text-lg mb-2">Game Modding</h3>62                <p class="text-gray-600">Create mods for Medieval 2 Total War and other games</p>63            </div>64            <div class="bg-white p-4 rounded-lg shadow">65                <h3 class="font-bold text-lg mb-2">Creative Tasks</h3>66                <p class="text-gray-600">Generate content, brainstorm ideas, solve complex problems</p>67            </div>68        </section>69    </main>70 71    <script src="script.js"></script>72</body>73</html>