Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NeuralDepth - AI-Powered Deep Analysis</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| neon: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| }, | |
| cyber: { | |
| primary: '#00ff9d', | |
| secondary: '#00b8ff', | |
| accent: '#ff00aa', | |
| dark: '#0a0a12', | |
| darker: '#050508', | |
| light: '#e6f1ff', | |
| purple: '#bd00ff' | |
| } | |
| }, | |
| fontFamily: { | |
| sans: ['"Rajdhani"', 'sans-serif'], | |
| mono: ['"Major Mono Display"', 'monospace'] | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Rajdhani:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| background-color: #050508; | |
| color: #e6f1ff; | |
| font-family: 'Rajdhani', sans-serif; | |
| } | |
| .cyber-border { | |
| border: 1px solid #00ff9d; | |
| box-shadow: 0 0 10px #00ff9d33; | |
| } | |
| .cyber-button { | |
| background: linear-gradient(45deg, #00ff9d, #00b8ff); | |
| color: #050508; | |
| border: none; | |
| font-weight: 600; | |
| transition: all 0.3s ease; | |
| } | |
| .cyber-button:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px #00ff9d66; | |
| } | |
| .cyber-button-secondary { | |
| background: transparent; | |
| border: 1px solid #00ff9d; | |
| color: #00ff9d; | |
| } | |
| .cyber-button-secondary:hover { | |
| background: #00ff9d22; | |
| } | |
| .cyber-text-accent { | |
| color: #ff00aa; | |
| } | |
| .cyber-link { | |
| color: #00b8ff; | |
| transition: all 0.2s ease; | |
| } | |
| .cyber-link:hover { | |
| color: #00ff9d; | |
| text-shadow: 0 0 5px #00ff9d66; | |
| } | |
| .glow-text { | |
| text-shadow: 0 0 10px #00ff9d, 0 0 20px #00ff9d33; | |
| } | |
| .textarea-cyber { | |
| background-color: #0a0a12; | |
| border: 1px solid #00ff9d; | |
| color: #e6f1ff; | |
| padding: 1rem; | |
| border-radius: 0.5rem; | |
| resize: none; | |
| transition: all 0.3s ease; | |
| } | |
| .textarea-cyber:focus { | |
| outline: none; | |
| box-shadow: 0 0 15px #00ff9d44; | |
| } | |
| .loading-dots:after { | |
| content: '.'; | |
| animation: dots 1s steps(5, end) infinite; | |
| } | |
| @keyframes dots { | |
| 0%, 20% { content: '.'; } | |
| 40% { content: '..'; } | |
| 60% { content: '...'; } | |
| 80%, 100% { content: ''; } | |
| } | |
| .nav-item { | |
| position: relative; | |
| } | |
| .nav-item:after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -5px; | |
| left: 0; | |
| background-color: #00ff9d; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-item:hover:after { | |
| width: 100%; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| .slide-up { | |
| animation: slideUp 0.5s ease-out forwards; | |
| } | |
| @keyframes slideUp { | |
| from { transform: translateY(20px); opacity: 0; } | |
| to { transform: translateY(0); opacity: 1; } | |
| } | |
| /* Chat bubbles */ | |
| .ai-bubble { | |
| background: #0a1226; | |
| border-left: 3px solid #00b8ff; | |
| } | |
| .user-bubble { | |
| background: #0a1812; | |
| border-left: 3px solid #00ff9d; | |
| } | |
| /* Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #0a0a12; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #00ff9d; | |
| border-radius: 3px; | |
| } | |
| /* Tool grid animation */ | |
| .tool-card { | |
| transition: all 0.3s ease; | |
| transform: perspective(500px) rotateX(0deg); | |
| } | |
| .tool-card:hover { | |
| transform: perspective(500px) rotateX(5deg); | |
| box-shadow: 0 10px 25px #00ff9d33; | |
| } | |
| /* Tabs */ | |
| .tab-active { | |
| color: #00ff9d; | |
| border-bottom: 2px solid #00ff9d; | |
| } | |
| /* Page transitions */ | |
| .page { | |
| display: none; | |
| } | |
| .page-active { | |
| display: block; | |
| animation: fadeIn 0.5s ease-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex flex-col"> | |
| <!-- Navigation --> | |
| <nav class="bg-cyber-darker border-b border-cyber-primary/20 py-4 px-6"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-brain text-cyber-primary text-2xl"></i> | |
| <span class="text-xl font-bold text-cyber-primary font-mono">NEURALDEPTH</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#home" class="nav-item text-cyber-light hover:text-cyber-primary page-link">Home</a> | |
| <a href="#playground" class="nav-item text-cyber-light hover:text-cyber-primary page-link">Playground</a> | |
| <a href="#tools" class="nav-item text-cyber-light hover:text-cyber-primary page-link">AI Tools</a> | |
| <a href="#features" class="nav-item text-cyber-light hover:text-cyber-primary page-link">Features</a> | |
| <a href="#pricing" class="nav-item text-cyber-light hover:text-cyber-primary page-link">Pricing</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="cyber-button-secondary px-4 py-2 rounded-md text-sm" id="login-btn">Login</button> | |
| <button class="cyber-button px-4 py-2 rounded-md text-sm" id="signup-btn">Sign Up Free</button> | |
| <button class="md:hidden text-cyber-light" id="mobile-menu-btn"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile menu (hidden by default) --> | |
| <div class="md:hidden hidden bg-cyber-darker py-4 px-6" id="mobile-menu"> | |
| <div class="flex flex-col space-y-4"> | |
| <a href="#home" class="text-cyber-light hover:text-cyber-primary page-link">Home</a> | |
| <a href="#playground" class="text-cyber-light hover:text-cyber-primary page-link">Playground</a> | |
| <a href="#tools" class="text-cyber-light hover:text-cyber-primary page-link">AI Tools</a> | |
| <a href="#features" class="text-cyber-light hover:text-cyber-primary page-link">Features</a> | |
| <a href="#pricing" class="text-cyber-light hover:text-cyber-primary page-link">Pricing</a> | |
| <div class="pt-4 border-t border-cyber-primary/20"> | |
| <button class="cyber-button-secondary w-full py-2 rounded-md text-sm mb-2">Login</button> | |
| <button class="cyber-button w-full py-2 rounded-md text-sm">Sign Up Free</button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content Area --> | |
| <div class="flex-1"> | |
| <!-- Home Page --> | |
| <div id="home" class="page page-active"> | |
| <!-- Hero Section --> | |
| <section class="relative overflow-hidden"> | |
| <div class="absolute inset-0"> | |
| <div class="absolute inset-0 bg-[radial-gradient(circle_at_center,#00ff9d10_0%,transparent_70%)]"></div> | |
| <div class="absolute top-0 right-0 w-1/2 h-1/2 bg-cyber-accent/10 rounded-full blur-3xl"></div> | |
| <div class="absolute bottom-0 left-0 w-1/3 h-1/3 bg-cyber-secondary/10 rounded-full blur-3xl"></div> | |
| </div> | |
| <div class="relative container mx-auto py-20 px-6"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <h1 class="text-5xl md:text-6xl font-bold text-cyber-light mb-6 font-mono glow-text"> | |
| Deep <span class="text-cyber-primary">AI</span> Analysis | |
| </h1> | |
| <p class="text-xl text-cyber-light/80 mb-10 leading-relaxed"> | |
| Unlock the full potential of AI with our deep learning tools. Analyze, generate, | |
| and transform content with unparalleled computational intelligence. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <button class="cyber-button px-8 py-3 rounded-md font-semibold" onclick="navigateTo('#playground')"> | |
| Try Playground <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| <button class="cyber-button-secondary px-8 py-3 rounded-md font-semibold" onclick="navigateTo('#pricing')"> | |
| View Pricing <i class="fas fa-tag ml-2"></i> | |
| </button> | |
| </div> | |
| <p class="mt-8 text-cyber-light/60 text-sm"> | |
| No credit card required. Try all features for 7 days. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="container mx-auto px-6 py-12"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> | |
| <div class="cyber-border p-6 rounded-lg"> | |
| <div class="text-4xl font-bold text-cyber-primary mb-2">10M+</div> | |
| <div class="text-cyber-light/70 text-sm">Queries Analyzed</div> | |
| </div> | |
| <div class="cyber-border p-6 rounded-lg"> | |
| <div class="text-4xl font-bold text-cyber-secondary mb-2">50+</div> | |
| <div class="text-cyber-light/70 text-sm">AI Models</div> | |
| </div> | |
| <div class="cyber-border p-6 rounded-lg"> | |
| <div class="text-4xl font-bold text-cyber-accent mb-2">100K+</div> | |
| <div class="text-cyber-light/70 text-sm">Active Users</div> | |
| </div> | |
| <div class="cyber-border p-6 rounded-lg"> | |
| <div class="text-4xl font-bold text-cyber-purple mb-2">24/7</div> | |
| <div class="text-cyber-light/70 text-sm">Support</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="container mx-auto px-6 py-16"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-cyber-light mb-4"> | |
| Trusted by <span class="text-cyber-primary">Innovators</span> | |
| </h2> | |
| <p class="text-cyber-light/70 max-w-2xl mx-auto"> | |
| Industry leaders rely on NeuralDepth to push boundaries with AI. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-cyber-dark cyber-border rounded-xl p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-cyber-primary/10 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user-tie text-cyber-primary"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium text-cyber-light">Alex Rivera</div> | |
| <div class="text-xs text-cyber-light/50">CTO, TechNova</div> | |
| </div> | |
| </div> | |
| <p class="text-cyber-light/80 italic"> | |
| "NeuralDepth transformed how our engineering team approaches complex problems. The code analysis tools save us hours each week." | |
| </p> | |
| </div> | |
| <div class="bg-cyber-dark cyber-border rounded-xl p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-cyber-secondary/10 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user-edit text-cyber-secondary"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium text-cyber-light">Priya Patel</div> | |
| <div class="text-xs text-cyber-light/50">Content Director, LexiMedia</div> | |
| </div> | |
| </div> | |
| <p class="text-cyber-light/80 italic"> | |
| "Our content output increased by 300% without sacrificing quality. The AI-generated drafts are remarkably coherent." | |
| </p> | |
| </div> | |
| <div class="bg-cyber-dark cyber-border rounded-xl p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-cyber-accent/10 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user-graduate text-cyber-accent"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium text-cyber-light">Dr. James Chen</div> | |
| <div class="text-xs text-cyber-light/50">Lead Researcher, MIT AI Lab</div> | |
| </div> | |
| </div> | |
| <p class="text-cyber-light/80 italic"> | |
| "For academic research, the literature summarization capabilities are unparalleled. Saves months of manual analysis." | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- AI Playground Page --> | |
| <div id="playground" class="page"> | |
| <section class="container mx-auto px-6 py-16"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-cyber-light mb-4"> | |
| AI <span class="text-cyber-primary">Playground</span> | |
| </h2> | |
| <p class="text-cyber-light/70 max-w-2xl mx-auto"> | |
| Experiment with our most powerful AI models in real-time. | |
| Generate content, analyze data, or ask complex questions. | |
| </p> | |
| </div> | |
| <div class="bg-cyber-dark rounded-xl cyber-border overflow-hidden"> | |
| <!-- Model selection tabs --> | |
| <div class="flex border-b border-cyber-primary/20"> | |
| <button class="px-6 py-3 text-sm font-medium tab-active model-tab" data-model="deepai"> | |
| <i class="fas fa-robot mr-2"></i> DeepAI | |
| </button> | |
| <button class="px-6 py-3 text-sm font-medium text-cyber-light/70 hover:text-cyber-primary model-tab" data-model="neuralnet"> | |
| <i class="fas fa-brain mr-2"></i> NeuralNet | |
| </button> | |
| <button class="px-6 py-3 text-sm font-medium text-cyber-light/70 hover:text-cyber-primary model-tab" data-model="graphmind"> | |
| <i class="fas fa-project-diagram mr-2"></i> GraphMind | |
| </button> | |
| <div class="flex-1 flex justify-end items-center pr-4"> | |
| <button class="text-xs px-3 py-1 rounded-full bg-cyber-dark/50 text-cyber-light hover:bg-cyber-primary/10" id="new-chat-btn"> | |
| <i class="fas fa-plus mr-1"></i> New Chat | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex flex-col lg:flex-row"> | |
| <!-- Chat history sidebar --> | |
| <div class="w-full lg:w-1/4 border-r border-cyber-primary/20 bg-cyber-darker p-4 lg:block" id="chat-sidebar"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-medium text-cyber-light">Conversations</h3> | |
| <button class="text-cyber-primary hover:text-cyber-secondary" id="new-conversation-btn"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-2 max-h-[600px] overflow-y-auto" id="conversation-list"> | |
| <div class="bg-cyber-dark/50 cyber-border rounded p-3 cursor-pointer conversation-item active-chat" data-chat-id="1"> | |
| <p class="text-sm text-cyber-light">Marketing strategy for startup</p> | |
| <p class="text-xs text-cyber-light/50">2 hours ago</p> | |
| </div> | |
| <div class="bg-cyber-dark rounded p-3 hover:bg-cyber-dark/60 cursor-pointer conversation-item" data-chat-id="2"> | |
| <p class="text-sm text-cyber-light">Technical documentation</p> | |
| <p class="text-xs text-cyber-light/50">Yesterday</p> | |
| </div> | |
| <div class="bg-cyber-dark rounded p-3 hover:bg-cyber-dark/60 cursor-pointer conversation-item" data-chat-id="3"> | |
| <p class="text-sm text-cyber-light">Code review assistance</p> | |
| <p class="text-xs text-cyber-light/50">3 days ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main chat area --> | |
| <div class="flex-1 flex flex-col" style="min-height: 600px;"> | |
| <div class="flex-1 p-[3px] bg-gradient-to-br from-cyber-primary/10 to-cyber-secondary/10"> | |
| <div class="h-full bg-cyber-dark overflow-y-auto"> | |
| <div class="p-6 space-y-6" id="chat-messages"> | |
| <div class="flex items-start space-x-4"> | |
| <div class="flex-shrink-0 w-8 h-8 rounded-full bg-cyber-primary/20 flex items-center justify-center"> | |
| <i class="fas fa-robot text-cyber-primary"></i> | |
| </div> | |
| <div class="ai-bubble flex-1 p-4 rounded-lg"> | |
| <p class="text-cyber-light"> | |
| Hello! I'm DeepAI, your advanced AI assistant. I can help with research, content generation, | |
| code analysis, and much more. What would you like to explore today? | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-4"> | |
| <div class="flex-shrink-0 w-8 h-8 rounded-full bg-cyber-primary/70 flex items-center justify-center text-cyber-darker"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <div class="user-bubble flex-1 p-4 rounded-lg"> | |
| <p class="text-cyber-light"> | |
| Can you help me analyze this complex technical documentation? | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-4"> | |
| <div class="flex-shrink-0 w-8 h-8 rounded-full bg-cyber-primary/20 flex items-center justify-center"> | |
| <i class="fas fa-robot text-cyber-primary"></i> | |
| </div> | |
| <div class="ai-bubble flex-1 p-4 rounded-lg"> | |
| <p class="text-cyber-light"> | |
| Of course! I specialize in analyzing and simplifying complex technical content. | |
| You can either paste the documentation here or upload the file, and I'll provide: | |
| </p> | |
| <ul class="list-disc pl-5 mt-2 space-y-1 text-cyber-light/80"> | |
| <li>Key concepts explanation</li> | |
| <li>Summary of main points</li> | |
| <li>Technical implications</li> | |
| <li>Actionable recommendations</li> | |
| </ul> | |
| <div class="mt-4 flex flex-wrap gap-2"> | |
| <button class="px-3 py-1 bg-cyber-primary/10 text-cyber-primary rounded-full text-xs hover:bg-cyber-primary/20"> | |
| <i class="fas fa-file-upload mr-1"></i> Upload File | |
| </button> | |
| <button class="px-3 py-1 bg-cyber-primary/10 text-cyber-primary rounded-full text-xs hover:bg-cyber-primary/20"> | |
| <i class="fas fa-paste mr-1"></i> Paste Text | |
| </button> | |
| <button class="px-3 py-1 bg-cyber-primary/10 text-cyber-primary rounded-full text-xs hover:bg-cyber-primary/20"> | |
| <i class="fas fa-link mr-1"></i> Share URL | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Input area --> | |
| <div class="p-4 border-t border-cyber-primary/20"> | |
| <div class="flex items-end space-x-2"> | |
| <textarea | |
| class="textarea-cyber flex-1 min-h-[100px]" | |
| placeholder="Ask DeepAI anything... (Shift+Enter for new line, Enter to send)" | |
| id="chat-input" | |
| ></textarea> | |
| <button class="cyber-button h-12 w-12 rounded-md flex items-center justify-center" id="send-message-btn"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <div class="mt-2 flex flex-wrap gap-2"> | |
| <button class="px-3 py-1 text-xs bg-cyber-dark/60 text-cyber-light rounded-full hover:bg-cyber-dark quick-prompt-btn" data-prompt="Improve this writing: "> | |
| <i class="fas fa-magic mr-1"></i> Improve writing | |
| </button> | |
| <button class="px-3 py-1 text-xs bg-cyber-dark/60 text-cyber-light rounded-full hover:bg-cyber-dark quick-prompt-btn" data-prompt="Explain this code: "> | |
| <i class="fas fa-code mr-1"></i> Explain code | |
| </button> | |
| <button class="px-3 py-1 text-xs bg-cyber-dark/60 text-cyber-light rounded-full hover:bg-cyber-dark quick-prompt-btn" data-prompt="Analyze this data: "> | |
| <i class="fas fa-chart-line mr-1"></i> Analyze data | |
| </button> | |
| <button class="px-3 py-1 text-xs bg-cyber-dark/60 text-cyber-light rounded-full hover:bg-cyber-dark quick-prompt-btn" data-prompt="Generate ideas about: "> | |
| <i class="fas fa-lightbulb mr-1"></i> Generate ideas | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- AI Tools Page --> | |
| <div id="tools" class="page"> | |
| <section class="container mx-auto px-6 py-16 bg-gradient-to-b from-cyber-darker to-cyber-darker/0"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-cyber-light mb-4"> | |
| Advanced <span class="text-cyber-primary">AI Tools</span> | |
| </h2> | |
| <p class="text-cyber-light/70 max-w-2xl mx-auto"> | |
| Discover our suite of specialized AI tools designed to handle | |
| any professional challenge with computational intelligence. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Tool Card 1 --> | |
| <div class="tool-card bg-cyber-dark cyber-border rounded-xl p-6 hover:border-cyber-primary transform transition-all duration-300"> | |
| <div class="w-12 h-12 rounded-full bg-cyber-purple/20 flex items-center justify-center mb-4"> | |
| <i class="fas fa-robot text-cyber-purple text-xl"></i> | |
| </div> | |
| </html> |