it shouldn't be a hacker terminal make it look like I'm coding and creating a basic AI tool
cb4f2a4 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Development Terminal</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| blue: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-900 text-blue-400 font-mono overflow-hidden"> | |
| <div class="container mx-auto px-4 h-screen flex flex-col"> | |
| <!-- IDE Header --> | |
| <div class="flex items-center justify-between bg-gray-800 p-2 rounded-t-lg border-b border-gray-700"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="text-sm">dev@ai-tool:~/project</div> | |
| <div class="flex space-x-4 text-xs"> | |
| <span>main.py</span> | |
| <span>app.py</span> | |
| <span>README.md</span> | |
| </div> | |
| </div> | |
| <!-- IDE Body --> | |
| <div class="flex-grow bg-gray-950 p-4 overflow-y-auto terminal-content"> | |
| <div class="typing-animation"> | |
| <p class="text-blue-300 mb-4">$ git init</p> | |
| <p class="text-blue-300 mb-4">Initialized empty Git repository</p> | |
| <p class="text-blue-300 mb-4">$ pip install numpy pandas tensorflow</p> | |
| <p class="text-blue-300 mb-4">Installing dependencies...</p> | |
| <p class="text-blue-300 mb-4">$ python main.py --train-model</p> | |
| <p class="text-blue-300 mb-4">Loading training data...</p> | |
| <p class="text-blue-300 mb-4">Preprocessing 10,000 samples...</p> | |
| <p class="text-blue-300 mb-4">Training neural network (epoch 1/10)...</p> | |
| <p class="text-blue-300 mb-4">Accuracy: 92.4%</p> | |
| <p class="text-blue-300 mb-4">$ python app.py</p> | |
| <p class="text-blue-300 mb-4">Starting AI service on http://localhost:5000</p> | |
| <p class="text-blue-300 mb-4">API endpoints ready:</p> | |
| <p class="text-blue-300 mb-4">POST /predict - Accepts JSON input</p> | |
| <p class="text-blue-300 mb-4">$ <span class="cursor-blink">█</span></p> | |
| </div> | |
| </div> | |
| <!-- Status Bar --> | |
| <div class="bg-gray-800 p-2 text-xs flex justify-between items-center rounded-b-lg"> | |
| <div class="flex space-x-4"> | |
| <span>Python 3.9.7</span> | |
| <span>TensorFlow 2.8.0</span> | |
| <span>Git: main</span> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <span>CPU: 45%</span> | |
| <span>GPU: NVIDIA RTX 3090</span> | |
| <span>PORT: 5000</span> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |