Feature- Rich Component - Copy this Html, Tailwind Component to your project
Me ajude a melhorar meu frontend: HTML: <!DOCTYPE html> <html lang="pt br"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>Gerenciamento Profissional da IA</title> <link rel="stylesheet" href="styles.css"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet"> </head> <body> <div class="container"> <header> <h1>Gerenciamento da IA</h1> </header> <nav> <ul class="tabs"> <li class="tab button active" id="control tab">Controle da IA</li> <li class="tab button" id="prompt tab">Editar Prompt</li> </ul> </nav> <main> <! Página de Controle da IA > <section class="tab content active" id="control page"> <div class="control panel"> <button class="button start" id="start ia">Iniciar IA</button> <button class="button stop" id="stop ia">Parar IA</button> </div> <div class="console section"> <h2>Logs da IA</h2> <pre id="log output"></pre> </div> </section> <! Página de edição do Prompt > <section class="tab content hidden" id="prompt page"> <div class="prompt section"> <h2>Editar Prompt da IA</h2> <textarea id="prompt" rows="15" placeholder="Digite o prompt da IA aqui..."></textarea> <button class="button update" id="update prompt">Atualizar Prompt</button> </div> </section> </main> <footer> <p>© 2024 Pietro Amoretti Todos os direitos reservados</p> </footer> </div> <script src="script.js"></script> </body> </html> css: * { margin: 0; padding: 0; box sizing: border box; font family: 'Roboto', sans serif; } body { background color: #f0f2f5; display: flex; justify content: center; align items: center; height: 100vh; color: #333; } .container { background color: white; width: 90%; max width: 1200px; border radius: 8px; box shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); overflow: hidden; display: flex; flex direction: column; } header { background color: #00264d; color: white; padding: 20px; text align: center; } h1 { font size: 30px; font weight: 700; } nav { background color: #e9ecef; padding: 10px 20px; } .tabs { display: flex; list style: none; justify content: center; } .tab button { padding: 12px 24px; cursor: pointer; background color: transparent; border: none; color: #555; font size: 18px; transition: color 0.3s, border bottom 0.3s; margin right: 10px; } .tab button.active { color: #00264d; border bottom: 3px solid #00264d; } main { padding: 20px; display: flex; flex direction: column; justify content: center; align items: center; } .tab content { display: none; width: 100%; } .tab content.active { display: block; } .control panel { display: flex; justify content: center; gap: 30px; margin bottom: 40px; } .button { padding: 15px 40px; border radius: 5px; font size: 18px; cursor: pointer; transition: background color 0.3s ease; } .button.start { background color: #007bff; color: white; border: none; } .button.start:hover { background color: #0056b3; } .button.stop { background color: #dc3545; color: white; border: none; } .button.stop:hover { background color: #c82333; } .button.update { background color: #28a745; color: white; border: none; } .button.update:hover { background color: #218838; } .console section { width: 100%; } .console section h2 { margin bottom: 15px; color: #333; font size: 24px; text align: center; } pre { background color: #f7f7f9; border radius: 6px; padding: 20px; height: 250px; overflow y: auto; color: #444; font size: 16px; border: 1px solid #ddd; } .prompt section { width: 100%; display: flex; flex direction: column; align items: center; } textarea { width: 100%; max width: 900px; padding: 20px; border: 1px solid #ccc; border radius: 6px; font size: 16px; resize: vertical; margin bottom: 20px; min height: 350px; background color: #f7f7f9; } footer { background color: #e9ecef; padding: 15px; text align: center; color: #777; margin top: auto; }
