Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NubiaTech - AI Assistant for Students</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"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #0f172a; | |
| color: #e2e8f0; | |
| background-image: url('https://www.transparenttextures.com/patterns/carbon-fibre.png'); | |
| } | |
| .cherry-blossom { | |
| position: absolute; | |
| width: 20px; | |
| height: 20px; | |
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23ec4899" d="M12 2C13.1 2 14 2.9 14 4S13.1 6 12 6 10 5.1 10 4 10.9 2 12 2m3.5 6.5c.3-.7.5-1.4.5-2.2 0-2.1-1.8-3.8-4-3.8S8 4.2 8 6.3c0 .8.2 1.5.5 2.2C6.3 9.5 5 11.4 5 13.6 5 16.4 7.1 18 10 18h4c2.9 0 5-1.6 5-4.4 0-2.2-1.3-4.1-3.5-5.1z"/></svg>'); | |
| background-size: contain; | |
| opacity: 0.6; | |
| animation: fall linear infinite; | |
| z-index: 0; | |
| } | |
| @keyframes fall { | |
| to { | |
| transform: translateY(100vh) rotate(360deg); | |
| } | |
| } | |
| .neon-pink { | |
| color: #ec4899; | |
| text-shadow: 0 0 5px #ec4899, 0 0 10px #ec4899; | |
| } | |
| .neon-pink-bg { | |
| background-color: #ec4899; | |
| box-shadow: 0 0 10px #ec4899, 0 0 20px rgba(236, 72, 153, 0.5); | |
| } | |
| .neon-pink-border { | |
| border-color: #ec4899; | |
| box-shadow: 0 0 10px #ec4899; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #ec4899, #f472b6); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .file-upload:hover { | |
| transform: scale(1.02); | |
| transition: all 0.3s ease; | |
| } | |
| .tool-card:hover { | |
| transform: translateY(-5px); | |
| transition: all 0.3s ease; | |
| box-shadow: 0 10px 20px rgba(236, 72, 153, 0.3); | |
| } | |
| .sidebar { | |
| scrollbar-width: thin; | |
| scrollbar-color: #ec4899 #1e293b; | |
| } | |
| .sidebar::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .sidebar::-webkit-scrollbar-track { | |
| background: #1e293b; | |
| } | |
| .sidebar::-webkit-scrollbar-thumb { | |
| background-color: #ec4899; | |
| border-radius: 6px; | |
| } | |
| .chat-bubble-ai { | |
| background-color: #1e293b; | |
| border-top-left-radius: 0; | |
| } | |
| .chat-bubble-user { | |
| background-color: #1e40af; | |
| border-top-right-radius: 0; | |
| } | |
| </style> | |
| </head> | |
| <body class="relative overflow-x-hidden"> | |
| <!-- Cherry Blossom Animation --> | |
| <div id="blossoms-container"></div> | |
| <!-- Main Layout --> | |
| <div class="flex h-screen"> | |
| <!-- Sidebar --> | |
| <div class="w-64 bg-slate-800 border-r border-slate-700 flex flex-col sidebar overflow-y-auto"> | |
| <div class="p-4 border-b border-slate-700 flex items-center space-x-2"> | |
| <i class="fas fa-robot text-2xl neon-pink"></i> | |
| <h1 class="text-xl font-bold gradient-text">NubiaTech</h1> | |
| </div> | |
| <div class="p-4 space-y-4"> | |
| <!-- User Profile --> | |
| <div class="flex items-center space-x-3 p-2 bg-slate-700 rounded-lg"> | |
| <div class="w-10 h-10 rounded-full bg-slate-600 flex items-center justify-center"> | |
| <i class="fas fa-user text-slate-300"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Student User</p> | |
| <p class="text-xs text-slate-400">Free Plan</p> | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div class="space-y-2"> | |
| <button class="w-full flex items-center space-x-2 p-2 hover:bg-slate-700 rounded-lg transition"> | |
| <i class="fas fa-plus-circle neon-pink"></i> | |
| <span>New Chat</span> | |
| </button> | |
| <button class="w-full flex items-center space-x-2 p-2 hover:bg-slate-700 rounded-lg transition"> | |
| <i class="fas fa-history neon-pink"></i> | |
| <span>History</span> | |
| </button> | |
| <button class="w-full flex items-center space-x-2 p-2 hover:bg-slate-700 rounded-lg transition"> | |
| <i class="fas fa-book neon-pink"></i> | |
| <span>Study Materials</span> | |
| </button> | |
| </div> | |
| <!-- Tools Section --> | |
| <div class="pt-4"> | |
| <h3 class="text-sm font-semibold text-slate-400 uppercase tracking-wider mb-2">AI Tools</h3> | |
| <div class="space-y-1"> | |
| <button class="w-full flex items-center space-x-2 p-2 hover:bg-slate-700 rounded-lg transition"> | |
| <i class="fas fa-file-pdf neon-pink"></i> | |
| <span>PDF Reader</span> | |
| </button> | |
| <button class="w-full flex items-center space-x-2 p-2 hover:bg-slate-700 rounded-lg transition"> | |
| <i class="fas fa-image neon-pink"></i> | |
| <span>Image Analysis</span> | |
| </button> | |
| <button class="w-full flex items-center space-x-2 p-2 hover:bg-slate-700 rounded-lg transition"> | |
| <i class="fas fa-check-circle neon-pink"></i> | |
| <span>Plagiarism Checker</span> | |
| </button> | |
| <button class="w-full flex items-center space-x-2 p-2 hover:bg-slate-700 rounded-lg transition"> | |
| <i class="fas fa-user-shield neon-pink"></i> | |
| <span>AI Detector</span> | |
| </button> | |
| <button class="w-full flex items-center space-x-2 p-2 hover:bg-slate-700 rounded-lg transition"> | |
| <i class="fas fa-music neon-pink"></i> | |
| <span>Music Player</span> | |
| </button> | |
| <button class="w-full flex items-center space-x-2 p-2 hover:bg-slate-700 rounded-lg transition"> | |
| <i class="fas fa-video neon-pink"></i> | |
| <span>YouTube</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- LMS Integration --> | |
| <div class="pt-4"> | |
| <h3 class="text-sm font-semibold text-slate-400 uppercase tracking-wider mb-2">LMS Integration</h3> | |
| <div class="space-y-1"> | |
| <button class="w-full flex items-center space-x-2 p-2 hover:bg-slate-700 rounded-lg transition"> | |
| <i class="fas fa-chalkboard neon-pink"></i> | |
| <span>Blackboard</span> | |
| </button> | |
| <button class="w-full flex items-center space-x-2 p-2 hover:bg-slate-700 rounded-lg transition"> | |
| <i class="fas fa-calendar-alt neon-pink"></i> | |
| <span>Assignments</span> | |
| </button> | |
| <button class="w-full flex items-center space-x-2 p-2 hover:bg-slate-700 rounded-lg transition"> | |
| <i class="fas fa-graduation-cap neon-pink"></i> | |
| <span>Grades</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Settings --> | |
| <div class="pt-4 mt-auto"> | |
| <button class="w-full flex items-center space-x-2 p-2 hover:bg-slate-700 rounded-lg transition"> | |
| <i class="fas fa-cog neon-pink"></i> | |
| <span>Settings</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top Navigation --> | |
| <div class="bg-slate-800 border-b border-slate-700 p-4 flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <h2 class="text-lg font-semibold">PDF Analysis</h2> | |
| <div class="relative"> | |
| <select class="bg-slate-700 border border-slate-600 rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-pink-500"> | |
| <option>Select Model</option> | |
| <option>LLaMA 2</option> | |
| <option>Falcon 7B</option> | |
| <option>Mistral 7B</option> | |
| <option>GPT-J</option> | |
| <option>BLOOM</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <button class="p-2 hover:bg-slate-700 rounded-full transition"> | |
| <i class="fas fa-bell text-slate-300"></i> | |
| </button> | |
| <button class="p-2 hover:bg-slate-700 rounded-full transition"> | |
| <i class="fas fa-question-circle text-slate-300"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main Workspace --> | |
| <div class="flex-1 overflow-y-auto p-6 bg-slate-900"> | |
| <div class="max-w-4xl mx-auto"> | |
| <!-- File Upload Section --> | |
| <div class="bg-slate-800 rounded-xl p-6 mb-6 border border-slate-700 file-upload transition"> | |
| <div class="text-center"> | |
| <div class="mx-auto w-16 h-16 flex items-center justify-center bg-slate-700 rounded-full mb-4 neon-pink-bg"> | |
| <i class="fas fa-cloud-upload-alt text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium mb-2">Upload Your Documents</h3> | |
| <p class="text-slate-400 mb-4">Supports PDF, JPG, PNG files. Drag & drop or click to browse.</p> | |
| <label class="cursor-pointer"> | |
| <input type="file" class="hidden" accept=".pdf,.jpg,.png"> | |
| <div class="border-2 border-dashed border-slate-600 rounded-lg p-8 hover:border-pink-500 transition"> | |
| <p class="text-slate-400">Click to select files</p> | |
| </div> | |
| </label> | |
| <div class="mt-4 flex justify-center space-x-3"> | |
| <button class="px-4 py-2 bg-slate-700 rounded-lg hover:bg-slate-600 transition"> | |
| <i class="fas fa-file-pdf mr-2"></i> PDF | |
| </button> | |
| <button class="px-4 py-2 bg-slate-700 rounded-lg hover:bg-slate-600 transition"> | |
| <i class="fas fa-image mr-2"></i> Image | |
| </button> | |
| <button class="px-4 py-2 bg-slate-700 rounded-lg hover:bg-slate-600 transition"> | |
| <i class="fas fa-link mr-2"></i> URL | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Files --> | |
| <div class="mb-8"> | |
| <h3 class="text-lg font-medium mb-4 flex items-center"> | |
| <i class="fas fa-clock mr-2 neon-pink"></i> Recent Files | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="bg-slate-800 rounded-lg p-4 border border-slate-700 hover:border-pink-500 transition cursor-pointer"> | |
| <div class="flex items-start space-x-3"> | |
| <div class="bg-slate-700 p-2 rounded-lg"> | |
| <i class="fas fa-file-pdf neon-pink"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium truncate">Research_Paper.pdf</h4> | |
| <p class="text-xs text-slate-400">Uploaded 2 hours ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-slate-800 rounded-lg p-4 border border-slate-700 hover:border-pink-500 transition cursor-pointer"> | |
| <div class="flex items-start space-x-3"> | |
| <div class="bg-slate-700 p-2 rounded-lg"> | |
| <i class="fas fa-image neon-pink"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium truncate">Lecture_Notes.jpg</h4> | |
| <p class="text-xs text-slate-400">Uploaded yesterday</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-slate-800 rounded-lg p-4 border border-slate-700 hover:border-pink-500 transition cursor-pointer"> | |
| <div class="flex items-start space-x-3"> | |
| <div class="bg-slate-700 p-2 rounded-lg"> | |
| <i class="fas fa-file-pdf neon-pink"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium truncate">Assignment.pdf</h4> | |
| <p class="text-xs text-slate-400">Uploaded 3 days ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Tools Section --> | |
| <div> | |
| <h3 class="text-lg font-medium mb-4 flex items-center"> | |
| <i class="fas fa-magic mr-2 neon-pink"></i> AI Tools | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> | |
| <!-- PDF Tools --> | |
| <div class="bg-slate-800 rounded-xl p-5 border border-slate-700 tool-card transition cursor-pointer"> | |
| <div class="flex items-center space-x-3 mb-3"> | |
| <div class="bg-slate-700 p-3 rounded-full"> | |
| <i class="fas fa-file-pdf neon-pink text-xl"></i> | |
| </div> | |
| <h4 class="font-medium">PDF Analysis</h4> | |
| </div> | |
| <p class="text-sm text-slate-400 mb-3">Extract text, summarize, and analyze PDF documents with AI.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="text-xs bg-slate-700 px-2 py-1 rounded">Summarize</span> | |
| <span class="text-xs bg-slate-700 px-2 py-1 rounded">Q&A</span> | |
| <span class="text-xs bg-slate-700 px-2 py-1 rounded">OCR</span> | |
| </div> | |
| </div> | |
| <!-- Plagiarism Checker --> | |
| <div class="bg-slate-800 rounded-xl p-5 border border-slate-700 tool-card transition cursor-pointer"> | |
| <div class="flex items-center space-x-3 mb-3"> | |
| <div class="bg-slate-700 p-3 rounded-full"> | |
| <i class="fas fa-check-circle neon-pink text-xl"></i> | |
| </div> | |
| <h4 class="font-medium">Plagiarism Checker</h4> | |
| </div> | |
| <p class="text-sm text-slate-400 mb-3">Check your documents for plagiarism against billions of sources.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="text-xs bg-slate-700 px-2 py-1 rounded">AI Detection</span> | |
| <span class="text-xs bg-slate-700 px-2 py-1 rounded">Sources</span> | |
| <span class="text-xs bg-slate-700 px-2 py-1 rounded">Similarity</span> | |
| </div> | |
| </div> | |
| <!-- AI Humanizer --> | |
| <div class="bg-slate-800 rounded-xl p-5 border border-slate-700 tool-card transition cursor-pointer"> | |
| <div class="flex items-center space-x-3 mb-3"> | |
| <div class="bg-slate-700 p-3 rounded-full"> | |
| <i class="fas fa-user-edit neon-pink text-xl"></i> | |
| </div> | |
| <h4 class="font-medium">AI Humanizer</h4> | |
| </div> | |
| <p class="text-sm text-slate-400 mb-3">Make AI-generated text sound more natural and human-like.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="text-xs bg-slate-700 px-2 py-1 rounded">Rewrite</span> | |
| <span class="text-xs bg-slate-700 px-2 py-1 rounded">Tone Adjust</span> | |
| <span class="text-xs bg-slate-700 px-2 py-1 rounded">Style</span> | |
| </div> | |
| </div> | |
| <!-- Study Assistant --> | |
| <div class="bg-slate-800 rounded-xl p-5 border border-slate-700 tool-card transition cursor-pointer"> | |
| <div class="flex items-center space-x-3 mb-3"> | |
| <div class="bg-slate-700 p-3 rounded-full"> | |
| <i class="fas fa-graduation-cap neon-pink text-xl"></i> | |
| </div> | |
| <h4 class="font-medium">Study Assistant</h4> | |
| </div> | |
| <p class="text-sm text-slate-400 mb-3">Get help with your homework, generate flashcards, and more.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="text-xs bg-slate-700 px-2 py-1 rounded">Flashcards</span> | |
| <span class="text-xs bg-slate-700 px-2 py-1 rounded">Quizzes</span> | |
| <span class="text-xs bg-slate-700 px-2 py-1 rounded">Explain</span> | |
| </div> | |
| </div> | |
| <!-- Media Player --> | |
| <div class="bg-slate-800 rounded-xl p-5 border border-slate-700 tool-card transition cursor-pointer"> | |
| <div class="flex items-center space-x-3 mb-3"> | |
| <div class="bg-slate-700 p-3 rounded-full"> | |
| <i class="fas fa-play-circle neon-pink text-xl"></i> | |
| </div> | |
| <h4 class="font-medium">Media Player</h4> | |
| </div> | |
| <p class="text-sm text-slate-400 mb-3">Play YouTube videos, music, and educational content.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="text-xs bg-slate-700 px-2 py-1 rounded">YouTube</span> | |
| <span class="text-xs bg-slate-700 px-2 py-1 rounded">Music</span> | |
| <span class="text-xs bg-slate-700 px-2 py-1 rounded">Playlists</span> | |
| </div> | |
| </div> | |
| <!-- Blackboard Integration --> | |
| <div class="bg-slate-800 rounded-xl p-5 border border-slate-700 tool-card transition cursor-pointer"> | |
| <div class="flex items-center space-x-3 mb-3"> | |
| <div class="bg-slate-700 p-3 rounded-full"> | |
| <i class="fas fa-chalkboard neon-pink text-xl"></i> | |
| </div> | |
| <h4 class="font-medium">Blackboard Sync</h4> | |
| </div> | |
| <p class="text-sm text-slate-400 mb-3">Connect to your Blackboard account for assignments and grades.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="text-xs bg-slate-700 px-2 py-1 rounded">Assignments</span> | |
| <span class="text-xs bg-slate-700 px-2 py-1 rounded">Grades</span> | |
| <span class="text-xs bg-slate-700 px-2 py-1 rounded">Calendar</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chat Interface --> | |
| <div class="mt-8 bg-slate-800 rounded-xl p-5 border border-slate-700"> | |
| <h3 class="text-lg font-medium mb-4 flex items-center"> | |
| <i class="fas fa-comments mr-2 neon-pink"></i> AI Assistant | |
| </h3> | |
| <div class="space-y-4 mb-4 max-h-96 overflow-y-auto"> | |
| <!-- AI Message --> | |
| <div class="flex space-x-3"> | |
| <div class="flex-shrink-0 w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center"> | |
| <i class="fas fa-robot neon-pink"></i> | |
| </div> | |
| <div class="bg-slate-700 p-3 rounded-lg chat-bubble-ai max-w-3xl"> | |
| <p>Hello! I'm your NubiaTech AI assistant. How can I help you with your studies today? You can ask me to summarize documents, explain concepts, or even help with assignments.</p> | |
| </div> | |
| </div> | |
| <!-- User Message --> | |
| <div class="flex space-x-3 justify-end"> | |
| <div class="bg-blue-700 p-3 rounded-lg chat-bubble-user max-w-3xl"> | |
| <p>Can you summarize this PDF about machine learning basics?</p> | |
| </div> | |
| <div class="flex-shrink-0 w-8 h-8 rounded-full bg-blue-700 flex items-center justify-center"> | |
| <i class="fas fa-user text-white"></i> | |
| </div> | |
| </div> | |
| <!-- AI Response --> | |
| <div class="flex space-x-3"> | |
| <div class="flex-shrink-0 w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center"> | |
| <i class="fas fa-robot neon-pink"></i> | |
| </div> | |
| <div class="bg-slate-700 p-3 rounded-lg chat-bubble-ai max-w-3xl"> | |
| <p>Certainly! Here's a summary of the key points from your document:</p> | |
| <ul class="list-disc pl-5 mt-2 space-y-1"> | |
| <li>Machine learning is a subset of AI that enables systems to learn from data</li> | |
| <li>Three main types: supervised, unsupervised, and reinforcement learning</li> | |
| <li>Common algorithms include linear regression, decision trees, and neural networks</li> | |
| <li>Model evaluation uses metrics like accuracy, precision, and recall</li> | |
| </ul> | |
| <p class="mt-2 text-sm text-slate-300">Would you like me to elaborate on any of these points?</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <textarea | |
| class="w-full bg-slate-700 border border-slate-600 rounded-lg p-3 pr-12 focus | |
| </html> |