Download index.html from rahuln99/learning: direct link, hf CLI and curl.
- Browser
- Download file 37.5 kB
-
https://huggingface.co/spaces/rahuln99/learning/resolve/main/index.html
- Command line
-
hf download hf://spaces/rahuln99/learning/index.html
-
curl -L -o index.html https://huggingface.co/spaces/rahuln99/learning/resolve/main/index.html
37.5 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Academic Content Assistant</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> | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .content-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .chat-message { | |
| max-width: 80%; | |
| } | |
| .typing-indicator::after { | |
| content: '...'; | |
| animation: typing 1.5s infinite; | |
| display: inline-block; | |
| width: 0; | |
| } | |
| @keyframes typing { | |
| 0% { width: 0; } | |
| 50% { width: 0.5em; } | |
| 100% { width: 0; } | |
| } | |
| .progress-ring__circle { | |
| transition: stroke-dashoffset 0.35s; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-indigo-800 text-white w-64 flex-shrink-0 flex flex-col"> | |
| <div class="p-4 border-b border-indigo-700 flex items-center"> | |
| <i class="fas fa-graduation-cap text-2xl mr-3"></i> | |
| <h1 class="text-xl font-bold">Academic Assistant</h1> | |
| </div> | |
| <div class="p-4 border-b border-indigo-700"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Student</p> | |
| <p class="text-xs text-indigo-300">University of Example</p> | |
| </div> | |
| </div> | |
| <button class="w-full bg-indigo-600 hover:bg-indigo-500 text-white py-2 px-4 rounded-md text-sm flex items-center justify-center"> | |
| <i class="fas fa-sync-alt mr-2"></i> Sync Content | |
| </button> | |
| </div> | |
| <div class="flex-1 overflow-y-auto"> | |
| <div class="p-4"> | |
| <h2 class="text-sm uppercase font-bold text-indigo-300 mb-3">My Modules</h2> | |
| <ul> | |
| <li class="mb-2"> | |
| <a href="#" class="flex items-center p-2 rounded-md hover:bg-indigo-700 bg-indigo-700"> | |
| <i class="fas fa-book mr-3"></i> | |
| <span>Computer Science 101</span> | |
| </a> | |
| </li> | |
| <li class="mb-2"> | |
| <a href="#" class="flex items-center p-2 rounded-md hover:bg-indigo-700"> | |
| <i class="fas fa-flask mr-3"></i> | |
| <span>Data Structures</span> | |
| </a> | |
| </li> | |
| <li class="mb-2"> | |
| <a href="#" class="flex items-center p-2 rounded-md hover:bg-indigo-700"> | |
| <i class="fas fa-code mr-3"></i> | |
| <span>Algorithms</span> | |
| </a> | |
| </li> | |
| <li class="mb-2"> | |
| <a href="#" class="flex items-center p-2 rounded-md hover:bg-indigo-700"> | |
| <i class="fas fa-database mr-3"></i> | |
| <span>Database Systems</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="p-4 border-t border-indigo-700"> | |
| <h2 class="text-sm uppercase font-bold text-indigo-300 mb-3">Quick Actions</h2> | |
| <ul> | |
| <li class="mb-2"> | |
| <a href="#" class="flex items-center p-2 rounded-md hover:bg-indigo-700"> | |
| <i class="fas fa-sticky-note mr-3"></i> | |
| <span>Create Revision Notes</span> | |
| </a> | |
| </li> | |
| <li class="mb-2"> | |
| <a href="#" class="flex items-center p-2 rounded-md hover:bg-indigo-700"> | |
| <i class="fas fa-question-circle mr-3"></i> | |
| <span>Generate Practice Questions</span> | |
| </a> | |
| </li> | |
| <li class="mb-2"> | |
| <a href="#" class="flex items-center p-2 rounded-md hover:bg-indigo-700"> | |
| <i class="fas fa-calendar-alt mr-3"></i> | |
| <span>Upcoming Deadlines</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-indigo-700"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center mr-2"> | |
| <i class="fas fa-cog"></i> | |
| </div> | |
| <span>Settings</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top Navigation --> | |
| <div class="bg-white border-b border-gray-200 p-4 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <h2 class="text-xl font-semibold">Computer Science 101</h2> | |
| <span class="ml-4 bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Week 5</span> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search module content..." class="pl-10 pr-4 py-2 border rounded-md w-64 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-bell text-gray-600"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Content Area --> | |
| <div class="flex-1 overflow-hidden flex"> | |
| <!-- Module Content --> | |
| <div class="w-1/2 border-r border-gray-200 overflow-y-auto p-6"> | |
| <div class="mb-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold">Module Content</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-gray-100 rounded-md text-sm flex items-center"> | |
| <i class="fas fa-filter mr-1"></i> Filter | |
| </button> | |
| <button class="px-3 py-1 bg-gray-100 rounded-md text-sm flex items-center"> | |
| <i class="fas fa-sort mr-1"></i> Sort | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 gap-4"> | |
| <!-- Lecture Slides --> | |
| <div class="content-card bg-white rounded-lg shadow p-4 border border-gray-100 cursor-pointer transition-all duration-300"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-file-powerpoint text-blue-600 text-xl"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">Lecture 5: Object-Oriented Programming</h4> | |
| <p class="text-sm text-gray-500 mt-1">Uploaded: 2 days ago</p> | |
| <div class="flex mt-3 space-x-2"> | |
| <button class="text-xs bg-blue-50 text-blue-600 px-2 py-1 rounded flex items-center"> | |
| <i class="fas fa-eye mr-1"></i> View | |
| </button> | |
| <button class="text-xs bg-green-50 text-green-600 px-2 py-1 rounded flex items-center"> | |
| <i class="fas fa-question mr-1"></i> Quiz Me | |
| </button> | |
| <button class="text-xs bg-purple-50 text-purple-600 px-2 py-1 rounded flex items-center"> | |
| <i class="fas fa-sticky-note mr-1"></i> Notes | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Reading Material --> | |
| <div class="content-card bg-white rounded-lg shadow p-4 border border-gray-100 cursor-pointer transition-all duration-300"> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-book text-purple-600 text-xl"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">Reading: Design Patterns</h4> | |
| <p class="text-sm text-gray-500 mt-1">From Talis | 15 pages</p> | |
| <div class="flex mt-3 space-x-2"> | |
| <button class="text-xs bg-blue-50 text-blue-600 px-2 py-1 rounded flex items-center"> | |
| <i class="fas fa-eye mr-1"></i> View | |
| </button> | |
| <button class="text-xs bg-yellow-50 text-yellow-600 px-2 py-1 rounded flex items-center"> | |
| <i class="fas fa-highlighter mr-1"></i> Highlight | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Lecture Video --> | |
| <div class="content-card bg-white rounded-lg shadow p-4 border border-gray-100 cursor-pointer transition-all duration-300"> | |
| <div class="flex items-start"> | |
| <div class="bg-red-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-video text-red-600 text-xl"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">Lecture Capture: Week 5</h4> | |
| <p class="text-sm text-gray-500 mt-1">1h 22m | Viewed 65%</p> | |
| <div class="mt-3"> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-red-500 h-2 rounded-full" style="width: 65%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-500 mt-1"> | |
| <span>43:12 watched</span> | |
| <span>39:00 remaining</span> | |
| </div> | |
| </div> | |
| <div class="flex mt-3 space-x-2"> | |
| <button class="text-xs bg-blue-50 text-blue-600 px-2 py-1 rounded flex items-center"> | |
| <i class="fas fa-play mr-1"></i> Continue | |
| </button> | |
| <button class="text-xs bg-gray-50 text-gray-600 px-2 py-1 rounded flex items-center"> | |
| <i class="fas fa-clipboard mr-1"></i> Transcript | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Assignment --> | |
| <div class="content-card bg-white rounded-lg shadow p-4 border border-gray-100 cursor-pointer transition-all duration-300"> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-tasks text-green-600 text-xl"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">Assignment 2: OOP Implementation</h4> | |
| <p class="text-sm text-gray-500 mt-1">Due in 5 days | 30% of grade</p> | |
| <div class="flex items-center mt-2"> | |
| <div class="w-6 h-6 mr-2"> | |
| <svg viewBox="0 0 36 36" class="circular-chart"> | |
| <path class="progress-ring__circle" | |
| stroke-dasharray="75, 100" | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| stroke="#3B82F6" | |
| stroke-width="3" | |
| fill="none"/> | |
| </svg> | |
| </div> | |
| <span class="text-xs text-gray-600">75% completed</span> | |
| </div> | |
| <div class="flex mt-3 space-x-2"> | |
| <button class="text-xs bg-blue-50 text-blue-600 px-2 py-1 rounded flex items-center"> | |
| <i class="fas fa-edit mr-1"></i> Continue | |
| </button> | |
| <button class="text-xs bg-gray-50 text-gray-600 px-2 py-1 rounded flex items-center"> | |
| <i class="fas fa-info-circle mr-1"></i> Requirements | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Generated Resources</h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="bg-white rounded-lg shadow p-4 border border-gray-100"> | |
| <div class="bg-indigo-50 p-3 rounded-lg mb-3"> | |
| <i class="fas fa-sticky-note text-indigo-600 text-xl"></i> | |
| </div> | |
| <h4 class="font-medium text-sm mb-1">OOP Summary Notes</h4> | |
| <p class="text-xs text-gray-500">Generated from Lecture 5</p> | |
| <button class="w-full mt-3 text-xs bg-indigo-50 text-indigo-600 px-2 py-1 rounded flex items-center justify-center"> | |
| <i class="fas fa-download mr-1"></i> Download | |
| </button> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-4 border border-gray-100"> | |
| <div class="bg-yellow-50 p-3 rounded-lg mb-3"> | |
| <i class="fas fa-question-circle text-yellow-600 text-xl"></i> | |
| </div> | |
| <h4 class="font-medium text-sm mb-1">Practice Questions</h4> | |
| <p class="text-xs text-gray-500">10 questions on Inheritance</p> | |
| <button class="w-full mt-3 text-xs bg-yellow-50 text-yellow-600 px-2 py-1 rounded flex items-center justify-center"> | |
| <i class="fas fa-play mr-1"></i> Start Quiz | |
| </button> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-4 border border-gray-100"> | |
| <div class="bg-green-50 p-3 rounded-lg mb-3"> | |
| <i class="fas fa-brain text-green-600 text-xl"></i> | |
| </div> | |
| <h4 class="font-medium text-sm mb-1">Flashcards</h4> | |
| <p class="text-xs text-gray-500">15 key terms</p> | |
| <button class="w-full mt-3 text-xs bg-green-50 text-green-600 px-2 py-1 rounded flex items-center justify-center"> | |
| <i class="fas fa-layer-group mr-1"></i> Review | |
| </button> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-4 border border-gray-100"> | |
| <div class="bg-red-50 p-3 rounded-lg mb-3"> | |
| <i class="fas fa-chart-line text-red-600 text-xl"></i> | |
| </div> | |
| <h4 class="font-medium text-sm mb-1">Knowledge Graph</h4> | |
| <p class="text-xs text-gray-500">Module concepts visualized</p> | |
| <button class="w-full mt-3 text-xs bg-red-50 text-red-600 px-2 py-1 rounded flex items-center justify-center"> | |
| <i class="fas fa-expand mr-1"></i> View | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chat Assistant --> | |
| <div class="w-1/2 flex flex-col"> | |
| <div class="p-4 border-b border-gray-200 flex items-center justify-between bg-white"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">Study Assistant</h3> | |
| <p class="text-xs text-gray-500">Ask me anything about the module</p> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-ellipsis-v text-gray-500"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex-1 overflow-y-auto p-4 bg-gray-50" id="chat-container"> | |
| <!-- Chat messages will appear here --> | |
| <div class="chat-message mb-4"> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot text-indigo-600"></i> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg shadow-sm max-w-xs"> | |
| <p>Hello! I'm your study assistant. I've analyzed your Computer Science 101 module content. How can I help you today?</p> | |
| <p class="text-xs text-gray-500 mt-2">Here are some things I can do:</p> | |
| <ul class="text-xs list-disc pl-5 mt-1 space-y-1"> | |
| <li>Explain concepts from your lectures</li> | |
| <li>Create revision notes from your materials</li> | |
| <li>Generate practice questions</li> | |
| <li>Help with assignments</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="chat-message mb-4 flex justify-end"> | |
| <div class="bg-indigo-100 p-3 rounded-lg shadow-sm max-w-xs"> | |
| <p>Can you explain polymorphism from Lecture 5?</p> | |
| </div> | |
| </div> | |
| <div class="chat-message mb-4"> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot text-indigo-600"></i> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg shadow-sm"> | |
| <p>Certainly! Based on Lecture 5 (slides 12-15) and the recorded lecture at 23:45, polymorphism is a fundamental concept in object-oriented programming where:</p> | |
| <ol class="list-decimal pl-5 mt-2 space-y-1 text-sm"> | |
| <li><strong>Definition:</strong> A single interface can represent different underlying forms (data types).</li> | |
| <li><strong>Types:</strong> | |
| <ul class="list-disc pl-5 mt-1"> | |
| <li><strong>Compile-time:</strong> Method overloading</li> | |
| <li><strong>Run-time:</strong> Method overriding</li> | |
| </ul> | |
| </li> | |
| <li><strong>Example:</strong> An <code>Animal</code> class with a <code>makeSound()</code> method that behaves differently for <code>Dog</code> and <code>Cat</code> subclasses.</li> | |
| </ol> | |
| <div class="mt-3 p-2 bg-blue-50 rounded border border-blue-100 text-sm"> | |
| <p class="font-medium text-blue-800"><i class="fas fa-lightbulb mr-1"></i> Key Insight</p> | |
| <p>Polymorphism allows you to write more flexible and reusable code by treating objects of different classes the same way.</p> | |
| </div> | |
| <div class="mt-3 flex space-x-2"> | |
| <button class="text-xs bg-blue-50 text-blue-600 px-2 py-1 rounded flex items-center"> | |
| <i class="fas fa-code mr-1"></i> Show Example | |
| </button> | |
| <button class="text-xs bg-purple-50 text-purple-600 px-2 py-1 rounded flex items-center"> | |
| <i class="fas fa-question mr-1"></i> Quiz Me | |
| </button> | |
| <button class="text-xs bg-gray-50 text-gray-600 px-2 py-1 rounded flex items-center"> | |
| <i class="fas fa-bookmark mr-1"></i> Save | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="chat-message mb-4 flex justify-end"> | |
| <div class="bg-indigo-100 p-3 rounded-lg shadow-sm max-w-xs"> | |
| <p>Can you create a summary of inheritance vs composition?</p> | |
| </div> | |
| </div> | |
| <div class="chat-message mb-4"> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot text-indigo-600"></i> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg shadow-sm"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <p class="font-medium">Inheritance vs Composition</p> | |
| <button class="text-xs bg-gray-100 px-2 py-1 rounded flex items-center"> | |
| <i class="fas fa-download mr-1"></i> PDF | |
| </button> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full text-sm border"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-3 py-2 text-left border-b">Aspect</th> | |
| <th class="px-3 py-2 text-left border-b">Inheritance</th> | |
| <th class="px-3 py-2 text-left border-b">Composition</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td class="px-3 py-2 border-b">Relationship</td> | |
| <td class="px-3 py-2 border-b">"is-a"</td> | |
| <td class="px-3 py-2 border-b">"has-a"</td> | |
| </tr> | |
| <tr class="bg-gray-50"> | |
| <td class="px-3 py-2 border-b">Flexibility</td> | |
| <td class="px-3 py-2 border-b">Less flexible (compile-time)</td> | |
| <td class="px-3 py-2 border-b">More flexible (run-time)</td> | |
| </tr> | |
| <tr> | |
| <td class="px-3 py-2 border-b">Code Reuse</td> | |
| <td class="px-3 py-2 border-b">White-box reuse</td> | |
| <td class="px-3 py-2 border-b">Black-box reuse</td> | |
| </tr> | |
| <tr class="bg-gray-50"> | |
| <td class="px-3 py-2 border-b">When to Use</td> | |
| <td class="px-3 py-2 border-b">True hierarchical relationships</td> | |
| <td class="px-3 py-2 border-b">Sharing functionality without hierarchy</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="mt-3 p-2 bg-yellow-50 rounded border border-yellow-100 text-sm"> | |
| <p class="font-medium text-yellow-800"><i class="fas fa-exclamation-triangle mr-1"></i> Common Mistake</p> | |
| <p>Students often overuse inheritance when composition would be more appropriate, leading to fragile class hierarchies.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-200 bg-white"> | |
| <div class="flex items-center"> | |
| <button class="p-2 rounded-full hover:bg-gray-100 mr-2"> | |
| <i class="fas fa-paperclip text-gray-500"></i> | |
| </button> | |
| <div class="flex-1 relative"> | |
| <input type="text" placeholder="Ask about the module content..." class="w-full pl-4 pr-10 py-3 border rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <button class="absolute right-3 top-3 text-blue-500"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <button class="p-2 rounded-full hover:bg-gray-100 ml-2"> | |
| <i class="fas fa-microphone text-gray-500"></i> | |
| </button> | |
| </div> | |
| <div class="flex justify-between mt-2 text-xs text-gray-500"> | |
| <div class="flex space-x-2"> | |
| <button class="px-2 py-1 bg-gray-100 rounded-full flex items-center"> | |
| <i class="fas fa-magic mr-1"></i> Summarize | |
| </button> | |
| <button class="px-2 py-1 bg-gray-100 rounded-full flex items-center"> | |
| <i class="fas fa-question mr-1"></i> Quiz Me | |
| </button> | |
| </div> | |
| <div> | |
| <span>Powered by AI</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Simulate chat functionality | |
| document.querySelector('.fa-paper-plane').addEventListener('click', function() { | |
| const input = document.querySelector('input[type="text"]'); | |
| const message = input.value.trim(); | |
| if (message) { | |
| // Add user message | |
| const chatContainer = document.getElementById('chat-container'); | |
| const userMessage = document.createElement('div'); | |
| userMessage.className = 'chat-message mb-4 flex justify-end'; | |
| userMessage.innerHTML = ` | |
| <div class="bg-indigo-100 p-3 rounded-lg shadow-sm max-w-xs"> | |
| <p>${message}</p> | |
| </div> | |
| `; | |
| chatContainer.appendChild(userMessage); | |
| // Clear input | |
| input.value = ''; | |
| // Add typing indicator | |
| const typingIndicator = document.createElement('div'); | |
| typingIndicator.className = 'chat-message mb-4'; | |
| typingIndicator.innerHTML = ` | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot text-indigo-600"></i> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg shadow-sm max-w-xs"> | |
| <p class="typing-indicator">Assistant is typing</p> | |
| </div> | |
| </div> | |
| `; | |
| chatContainer.appendChild(typingIndicator); | |
| // Scroll to bottom | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| // Simulate response after delay | |
| setTimeout(() => { | |
| // Remove typing indicator | |
| chatContainer.removeChild(typingIndicator); | |
| // Add response | |
| const response = document.createElement('div'); | |
| response.className = 'chat-message mb-4'; | |
| response.innerHTML = ` | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot text-indigo-600"></i> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg shadow-sm"> | |
| <p>I've analyzed your question about "${message}". Here's what I found in your module materials:</p> | |
| <ul class="list-disc pl-5 mt-2 text-sm"> | |
| <li>Relevant content in Lecture 5, slides 8-12</li> | |
| <li>Mentioned in the Week 5 reading materials</li> | |
| <li>Covered in lecture video at 15:30</li> | |
| </ul> | |
| <div class="mt-3 flex space-x-2"> | |
| <button class="text-xs bg-blue-50 text-blue-600 px-2 py-1 rounded flex items-center"> | |
| <i class="fas fa-book-open mr-1"></i> Show Details | |
| </button> | |
| <button class="text-xs bg-purple-50 text-purple-600 px-2 py-1 rounded flex items-center"> | |
| <i class="fas fa-sticky-note mr-1"></i> Make Notes | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| chatContainer.appendChild(response); | |
| // Scroll to bottom | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| }, 1500); | |
| } | |
| }); | |
| // Allow pressing Enter to send message | |
| document.querySelector('input[type="text"]').addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| document.querySelector('.fa-paper-plane').click(); | |
| } | |
| }); | |
| // Make content cards clickable | |
| document.querySelectorAll('.content-card').forEach(card => { | |
| card.addEventListener('click', function() { | |
| // In a real app, this would open the content | |
| alert('Opening content: ' + this.querySelector('h4').textContent); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=rahuln99/learning" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |