|
|
<!DOCTYPE html> |
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex flex-col overflow-hidden"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="flex-1 overflow-hidden flex"> |
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
document.querySelector('.fa-paper-plane').addEventListener('click', function() { |
|
|
const input = document.querySelector('input[type="text"]'); |
|
|
const message = input.value.trim(); |
|
|
|
|
|
if (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); |
|
|
|
|
|
|
|
|
input.value = ''; |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
chatContainer.scrollTop = chatContainer.scrollHeight; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
chatContainer.removeChild(typingIndicator); |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
chatContainer.scrollTop = chatContainer.scrollHeight; |
|
|
}, 1500); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelector('input[type="text"]').addEventListener('keypress', function(e) { |
|
|
if (e.key === 'Enter') { |
|
|
document.querySelector('.fa-paper-plane').click(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.content-card').forEach(card => { |
|
|
card.addEventListener('click', function() { |
|
|
|
|
|
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> |
