JHKKK
JHKKK
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Collaboration Platform</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.3/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?
family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body class="bg-gray-100 text-gray-900">
<header class="bg-navy-900 text-white p-4">
<div class="container mx-auto flex justify-between items-center">
<h1 class="text-2xl font-bold">StudyHub</h1>
<nav>
<ul class="flex space-x-4">
<li><a href="#" class="hover:text-purple-500">Home</a></li>
<li><a href="#" class="hover:text-purple-500">Schedule</a></li>
<li><a href="#" class="hover:text-purple-500">Notes</a></li>
<li><a href="#" class="hover:text-purple-500">Projects</a></li>
<li><a href="#"
class="hover:text-purple-500">Documents</a></li>
<li><a href="#"
class="hover:text-purple-500">Collaboration</a></li>
</ul>
</nav>
</div>
</header>
<section class="mb-8">
<h2 class="text-xl font-bold mb-4">Note-Taking System</h2>
<div class="bg-white p-6 rounded-lg shadow-md">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-semibold">My Notes</h3>
<button class="bg-purple-500 text-white px-4 py-2 rounded
hover:bg-purple-600">Add Note</button>
</div>
<ul>
<li class="py-2 border-b">
<h4 class="font-semibold">Biology Chapter 3</h4>
<p class="text-sm text-gray-600">Notes on cell structure
and function...</p>
</li>
<li class="py-2 border-b">
<h4 class="font-semibold">History of Ancient Rome</h4>
<p class="text-sm text-gray-600">Summary of key events and
figures...</p>
</li>
<li class="py-2">
<h4 class="font-semibold">Calculus Integration
Techniques</h4>
<p class="text-sm text-gray-600">Detailed steps and
examples...</p>
</li>
</ul>
</div>
</section>
<section class="mb-8">
<h2 class="text-xl font-bold mb-4">Collaborative Project Workspace</h2>
<div class="bg-white p-6 rounded-lg shadow-md">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-semibold">Group Projects</h3>
<button class="bg-purple-500 text-white px-4 py-2 rounded
hover:bg-purple-600">Create Project</button>
</div>
<ul>
<li class="py-2 border-b">
<h4 class="font-semibold">Physics Experiment</h4>
<p class="text-sm text-gray-600">Group members: Alice, Bob,
Charlie...</p>
</li>
<li class="py-2 border-b">
<h4 class="font-semibold">History Presentation</h4>
<p class="text-sm text-gray-600">Group members: Dave, Eve,
Frank...</p>
</li>
<li class="py-2">
<h4 class="font-semibold">Math Research Paper</h4>
<p class="text-sm text-gray-600">Group members: Grace,
Heidi, Ivan...</p>
</li>
</ul>
</div>
</section>
<section class="mb-8">
<h2 class="text-xl font-bold mb-4">Document Repository</h2>
<div class="bg-white p-6 rounded-lg shadow-md">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-semibold">Uploaded Documents</h3>
<button class="bg-purple-500 text-white px-4 py-2 rounded
hover:bg-purple-600">Upload Document</button>
</div>
<ul>
<li class="py-2 border-b">
<h4 class="font-semibold">Math_Study_Guide.pdf</h4>
<p class="text-sm text-gray-600">Uploaded by Alice</p>
</li>
<li class="py-2 border-b">
<h4 class="font-semibold">Physics_Lab_Manual.pdf</h4>
<p class="text-sm text-gray-600">Uploaded by Bob</p>
</li>
<li class="py-2">
<h4 class="font-semibold">History_Essay_Topics.docx</h4>
<p class="text-sm text-gray-600">Uploaded by Charlie</p>
</li>
</ul>
</div>
</section>
<section class="mb-8">
<h2 class="text-xl font-bold mb-4">Real-Time Collaboration Tools</h2>
<div class="bg-white p-6 rounded-lg shadow-md">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-semibold">Active Collaborations</h3>
<button class="bg-purple-500 text-white px-4 py-2 rounded
hover:bg-purple-600">Start Collaboration</button>
</div>
<ul>
<li class="py-2 border-b">
<h4 class="font-semibold">Physics Experiment</h4>
<p class="text-sm text-gray-600">Collaborating with Alice,
Bob, Charlie...</p>
</li>
<li class="py-2 border-b">
<h4 class="font-semibold">History Presentation</h4>
<p class="text-sm text-gray-600">Collaborating with Dave,
Eve, Frank...</p>
</li>
<li class="py-2">
<h4 class="font-semibold">Math Research Paper</h4>
<p class="text-sm text-gray-600">Collaborating with Grace,
Heidi, Ivan...</p>
</li>
</ul>
</div>
</section>
<section class="mb-8">
<h2 class="text-xl font-bold mb-4">File Sharing System</h2>
<div class="bg-white p-6 rounded-lg shadow-md">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-semibold">Shared Files</h3>
<button class="bg-purple-500 text-white px-4 py-2 rounded
hover:bg-purple-600">Share File</button>
</div>
<ul>
<li class="py-2 border-b">
<h4 class="font-semibold">Math_Study_Guide.pdf</h4>
<p class="text-sm text-gray-600">Shared by Alice</p>
</li>
<li class="py-2 border-b">
<h4 class="font-semibold">Physics_Lab_Manual.pdf</h4>
<p class="text-sm text-gray-600">Shared by Bob</p>
</li>
<li class="py-2">
<h4 class="font-semibold">History_Essay_Topics.docx</h4>
<p class="text-sm text-gray-600">Shared by Charlie</p>
</li>
</ul>
</div>
</section>
</main>