Spaces:

DHEIVER
/

IA-Toolbox-Hub

Running

App Files Files Community

DHEIVER commited on Nov 22, 2024

Commit

2e19b45

verified ·

1 Parent(s): f1fcfa9

Update index.html

Browse files

Files changed (1) hide show

index.html +83 -204

index.html CHANGED Viewed

@@ -3,256 +3,135 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>IA Toolbox Hub - Dheiver Santos</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.8.2/alpine.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script>
     <style>
         :root {
-            --primary-color: #3B82F6;
-            --primary-dark: #2563EB;
-            --secondary-color: #1F2937;
-            --accent-color: #60A5FA;
-            --background-light: #F3F4F6;
-            --text-primary: #1F2937;
-            --text-secondary: #4B5563;
-            --transition-speed: 0.3s;
         }
         body {
-            font-family: 'Inter', system-ui, -apple-system, sans-serif;
             line-height: 1.5;
-            color: var(--text-primary);
-            background: linear-gradient(135deg, var(--background-light), #E0E7FF);
-            min-height: 100vh;
         }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(20px); }
-            to { opacity: 1; transform: translateY(0); }
         }
-        @keyframes pulseGlow {
-            0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5); }
-            70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
-            100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
-        }
-        .nav-link {
-            position: relative;
-            color: var(--text-secondary);
-            transition: color var(--transition-speed);
-        }
-        .nav-link::after {
-            content: '';
-            position: absolute;
-            width: 0;
-            height: 2px;
-            bottom: -2px;
-            left: 0;
-            background-color: var(--primary-color);
-            transition: width var(--transition-speed);
-        }
-        .nav-link:hover::after {
-            width: 100%;
-        }
-        .gradient-text {
-            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            animation: fadeIn 1s ease-out;
-        }
-        .feature-card {
-            transition: all var(--transition-speed);
-            background: rgba(255, 255, 255, 0.9);
-            backdrop-filter: blur(10px);
-        }
-        .feature-card:hover {
-            transform: translateY(-10px);
-            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
-                        0 10px 10px -5px rgba(0, 0, 0, 0.04);
-        }
-        .profile-image {
-            animation: pulseGlow 2s infinite;
-        }
-        .btn-primary {
-            background: var(--primary-color);
             color: white;
-            transition: all var(--transition-speed);
-            position: relative;
-            overflow: hidden;
         }
-        .btn-primary:hover {
             background: var(--primary-dark);
         }
-        .btn-primary::after {
-            content: '';
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            top: 0;
-            left: -100%;
-            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-            transition: left 0.5s;
         }
-        .btn-primary:hover::after {
-            left: 100%;
         }
-        .loading {
-            position: relative;
-            opacity: 0.7;
-        }
-        .loading::after {
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            width: 24px;
-            height: 24px;
-            margin: -12px 0 0 -12px;
-            border: 2px solid var(--primary-color);
-            border-top-color: transparent;
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-        }
-        @keyframes spin {
-            to { transform: rotate(360deg); }
         }
-        .glass-effect {
-            background: rgba(255, 255, 255, 0.7);
-            backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 255, 255, 0.2);
         }
     </style>
 </head>
-<body>
-    <nav class="fixed w-full z-50 glass-effect">
-        <div class="container mx-auto px-6 py-4">
-            <div class="flex items-center justify-between">
-                <div class="text-xl font-bold gradient-text">IA Toolbox Hub</div>
-                <div class="hidden md:flex space-x-8">
-                    <a href="#features" class="nav-link">Recursos</a>
-                    <a href="#about" class="nav-link">Sobre</a>
-                    <a href="#contact" class="nav-link">Contato</a>
-                    <button class="btn-primary px-4 py-2 rounded-lg">Iniciar</button>
-                </div>
-            </div>
         </div>
     </nav>
-    <main class="pt-20">
-        <div class="container mx-auto px-4 py-12">
-            <header class="text-center mb-16">
-                <h1 class="text-5xl font-bold gradient-text mb-4">IA Toolbox Hub</h1>
-                <p class="text-xl text-gray-600 max-w-2xl mx-auto">Revolucionando o processamento de linguagem natural</p>
-            </header>
-            <div x-data="{ activeTab: 'profile' }" class="glass-effect rounded-xl p-8 mb-16">
-                <div class="flex space-x-4 mb-8">
-                    <button @click="activeTab = 'profile'"
-                            :class="{ 'bg-blue-500 text-white': activeTab === 'profile' }"
-                            class="px-4 py-2 rounded-lg transition">
-                        Perfil
-                    </button>
-                    <button @click="activeTab = 'stats'"
-                            :class="{ 'bg-blue-500 text-white': activeTab === 'stats' }"
-                            class="px-4 py-2 rounded-lg transition">
-                        Estatísticas
-                    </button>
-                </div>
-                <div x-show="activeTab === 'profile'" class="flex flex-col md:flex-row items-center">
-                    <div class="md:w-1/3 mb-6 md:mb-0 relative">
-                        <img src="/api/placeholder/96/96" alt="Dheiver Santos"
-                             class="profile-image rounded-full mx-auto w-24 h-24 object-cover"/>
                     </div>
-                    <div class="md:w-2/3 md:pl-8">
-                        <h2 class="text-3xl font-bold mb-4">Dheiver Santos, PhD</h2>
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                            <div class="flex items-center space-x-2">
-                                <i class="fas fa-graduation-cap text-blue-500"></i>
-                                <span>Doutor em IA/AM</span>
-                            </div>
-                            <div class="flex items-center space-x-2">
-                                <i class="fas fa-star text-blue-500"></i>
-                                <span>Especialista em IA</span>
-                            </div>
                         </div>
-                    </div>
-                </div>
-                <div x-show="activeTab === 'stats'" class="grid grid-cols-1 md:grid-cols-3 gap-6">
-                    <div class="glass-effect p-6 rounded-lg text-center">
-                        <div class="text-4xl font-bold gradient-text mb-2">200+</div>
-                        <div class="text-gray-600">Artigos</div>
-                    </div>
-                    <div class="glass-effect p-6 rounded-lg text-center">
-                        <div class="text-4xl font-bold gradient-text mb-2">50k+</div>
-                        <div class="text-gray-600">Leitores</div>
-                    </div>
-                    <div class="glass-effect p-6 rounded-lg text-center">
-                        <div class="text-4xl font-bold gradient-text mb-2">300+</div>
-                        <div class="text-gray-600">Citações</div>
                     </div>
                 </div>
             </div>
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
-                <div class="feature-card rounded-xl p-6">
-                    <div class="text-blue-500 text-3xl mb-4">
-                        <i class="fas fa-microphone"></i>
                     </div>
-                    <h3 class="text-xl font-bold mb-4">Transcrição de Áudio</h3>
-                    <p class="text-gray-600 mb-4">Converta áudio em texto com alta precisão.</p>
-                    <button class="btn-primary w-full py-2 rounded-lg">Experimentar</button>
                 </div>
-                <div class="feature-card rounded-xl p-6">
-                    <div class="text-blue-500 text-3xl mb-4">
-                        <i class="fas fa-language"></i>
                     </div>
-                    <h3 class="text-xl font-bold mb-4">Tradução</h3>
-                    <p class="text-gray-600 mb-4">Traduções profissionais em tempo real.</p>
-                    <button class="btn-primary w-full py-2 rounded-lg">Experimentar</button>
                 </div>
-                <div class="feature-card rounded-xl p-6">
-                    <div class="text-blue-500 text-3xl mb-4">
-                        <i class="fas fa-file-alt"></i>
                     </div>
-                    <h3 class="text-xl font-bold mb-4">Resumo</h3>
-                    <p class="text-gray-600 mb-4">Gere resumos concisos e precisos.</p>
-                    <button class="btn-primary w-full py-2 rounded-lg">Experimentar</button>
                 </div>
             </div>
-            <footer class="glass-effect rounded-xl p-8 text-center">
-                <h3 class="text-2xl font-bold mb-4">Como Citar</h3>
-                <div class="bg-white/50 p-4 rounded-lg inline-block">
-                    <code class="text-sm">
-                        Santos, D. (2024). IA Toolbox Hub [Software]. Hugging Face Spaces.
-                    </code>
-                    <button class="ml-2 text-blue-500 hover:text-blue-600"
-                            onclick="navigator.clipboard.writeText('Santos, D. (2024). IA Toolbox Hub [Software]. Hugging Face Spaces.')">
-                        <i class="far fa-copy"></i>
-                    </button>
-                </div>
-            </footer>
         </div>
     </main>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>IA Toolbox Hub</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.8.2/alpine.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script>
     <style>
         :root {
+            --primary: #1DA1F2;
+            --primary-dark: #1A8CD8;
+            --background: #15202B;
+            --text: #FFFFFF;
+            --text-secondary: #8899A6;
+            --border: #38444D;
         }
         body {
+            font-family: -apple-system, system-ui, sans-serif;
+            background: var(--background);
+            color: var(--text);
+            margin: 0;
             line-height: 1.5;
         }
+        .nav-fixed {
+            background: rgba(21, 32, 43, 0.9);
+            backdrop-filter: blur(12px);
+            border-bottom: 1px solid var(--border);
         }
+        .btn-twitter {
+            background: var(--primary);
             color: white;
+            transition: background 0.2s;
+            font-weight: 600;
         }
+        .btn-twitter:hover {
             background: var(--primary-dark);
         }
+        .card {
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid var(--border);
+            transition: background 0.2s;
         }
+        .card:hover {
+            background: rgba(255, 255, 255, 0.08);
         }
+        .profile-image {
+            border: 4px solid var(--primary);
         }
+        .verified {
+            color: var(--primary);
         }
     </style>
 </head>
+<body class="min-h-screen">
+    <nav class="nav-fixed w-full z-50 py-3">
+        <div class="container mx-auto px-4 flex items-center justify-between">
+            <span class="text-2xl font-bold text-blue-400">IA Toolbox</span>
+            <button class="btn-twitter px-6 py-2 rounded-full">Conectar</button>
         </div>
     </nav>
+    <main class="container mx-auto px-4 pt-20 max-w-3xl">
+        <div class="card rounded-xl p-6 mb-8">
+            <div class="flex items-start space-x-4">
+                <img src="https://media.licdn.com/dms/image/v2/D4D03AQE-v0C-qPJakQ/profile-displayphoto-shrink_200_200/profile-displayphoto-shrink_200_200/0/1731926431165?e=1737590400&v=beta&t=rTBD9bV8vOPCkmR5AXGZgQdH-7mbogEXZzCyO4Hiwr0"
+                     alt="Dheiver Santos"
+                     class="profile-image w-20 h-20 rounded-full"/>
+                <div>
+                    <div class="flex items-center space-x-2">
+                        <h2 class="text-xl font-bold">Dheiver Santos, PhD</h2>
+                        <i class="fas fa-check-circle verified"></i>
                     </div>
+                    <p class="text-text-secondary">@IAToolbox</p>
+                    <div class="mt-2 space-y-1 text-sm text-text-secondary">
+                        <div class="flex items-center space-x-2">
+                            <i class="fas fa-graduation-cap"></i>
+                            <span>Doutor em IA/AM</span>
+                        </div>
+                        <div class="flex items-center space-x-2">
+                            <i class="fas fa-star"></i>
+                            <span>200+ Artigos • 50k+ Leitores • 300+ Citações</span>
                         </div>
                     </div>
                 </div>
             </div>
+        </div>
+        <div class="grid grid-cols-1 gap-4">
+            <div x-data="{ open: false }" class="card rounded-xl p-6 cursor-pointer" @click="open = !open">
+                <div class="flex items-center space-x-4">
+                    <i class="fas fa-microphone text-blue-400 text-2xl"></i>
+                    <div class="flex-1">
+                        <h3 class="font-bold">Transcrição de Áudio</h3>
+                        <p x-show="open" class="mt-2 text-text-secondary">Converta áudio em texto com alta precisão usando IA avançada.</p>
                     </div>
+                    <i class="fas fa-chevron-right text-text-secondary"></i>
                 </div>
+            </div>
+            <div x-data="{ open: false }" class="card rounded-xl p-6 cursor-pointer" @click="open = !open">
+                <div class="flex items-center space-x-4">
+                    <i class="fas fa-language text-blue-400 text-2xl"></i>
+                    <div class="flex-1">
+                        <h3 class="font-bold">Tradução Neural</h3>
+                        <p x-show="open" class="mt-2 text-text-secondary">Traduções precisas entre múltiplos idiomas em tempo real.</p>
                     </div>
+                    <i class="fas fa-chevron-right text-text-secondary"></i>
                 </div>
+            </div>
+            <div x-data="{ open: false }" class="card rounded-xl p-6 cursor-pointer" @click="open = !open">
+                <div class="flex items-center space-x-4">
+                    <i class="fas fa-robot text-blue-400 text-2xl"></i>
+                    <div class="flex-1">
+                        <h3 class="font-bold">Chat IA</h3>
+                        <p x-show="open" class="mt-2 text-text-secondary">Interaja com um assistente virtual avançado.</p>
                     </div>
+                    <i class="fas fa-chevron-right text-text-secondary"></i>
                 </div>
             </div>
         </div>
+        <footer class="mt-8 py-4 text-center text-sm text-text-secondary">
+            <p>© 2024 IA Toolbox Hub • Citação: Santos, D. (2024)</p>
+        </footer>
     </main>
 </body>
 </html>