Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Physics Nexus - Comprehensive Physics Learning Platform</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 src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1e3a8a 0%, #0ea5e9 100%); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .floating { | |
| animation: floating 6s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .wave-shape { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| overflow: hidden; | |
| line-height: 0; | |
| } | |
| .wave-shape svg { | |
| position: relative; | |
| display: block; | |
| width: calc(100% + 1.3px); | |
| height: 150px; | |
| } | |
| .wave-shape .shape-fill { | |
| fill: #FFFFFF; | |
| } | |
| .subject-card { | |
| transition: all 0.3s ease; | |
| background-size: 200% auto; | |
| } | |
| .subject-card:hover { | |
| background-position: right center; | |
| } | |
| .search-container { | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .resource-card { | |
| transition: all 0.3s ease; | |
| } | |
| .resource-card:hover { | |
| transform: scale(1.03); | |
| } | |
| .floating-btn { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); } | |
| 70% { box-shadow: 0 0 0 15px rgba(59, 130, 246, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-lg"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-atom text-blue-600 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-gray-900">Physics Nexus</span> | |
| </div> | |
| <div class="hidden md:ml-10 md:flex md:space-x-8"> | |
| <a href="#" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Resources</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Community</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Simulations</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">About</a> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out">Sign In</button> | |
| </div> | |
| <div class="-mr-2 flex items-center md:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button"> | |
| <span class="sr-only">Open main menu</span> | |
| <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="hidden md:hidden" id="mobile-menu"> | |
| <div class="pt-2 pb-3 space-y-1"> | |
| <a href="#" class="bg-blue-50 border-blue-500 text-blue-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Resources</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Community</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Simulations</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">About</a> | |
| <div class="mt-4 pl-3 pr-4"> | |
| <button class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-base font-medium transition duration-150 ease-in-out">Sign In</button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="relative gradient-bg overflow-hidden"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="relative z-10 pb-8 sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32"> | |
| <main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28"> | |
| <div class="sm:text-center lg:text-left"> | |
| <h1 class="text-4xl tracking-tight font-extrabold text-white sm:text-5xl md:text-6xl"> | |
| <span class="block">Master Physics with</span> | |
| <span class="block text-blue-200">Comprehensive Resources</span> | |
| </h1> | |
| <p class="mt-3 text-base text-blue-100 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"> | |
| Access lecture notes, lab reports, simulations, MATLAB codes, previous exams, and join a vibrant community of physics students and researchers. | |
| </p> | |
| <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start"> | |
| <div class="rounded-md shadow"> | |
| <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"> | |
| Explore Resources | |
| </a> | |
| </div> | |
| <div class="mt-3 sm:mt-0 sm:ml-3"> | |
| <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-500 bg-opacity-60 hover:bg-opacity-70 md:py-4 md:text-lg md:px-10"> | |
| Join Community | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2"> | |
| <div class="h-56 w-full sm:h-72 md:h-96 lg:w-full lg:h-full relative"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="relative w-64 h-64 sm:w-80 sm:h-80 md:w-96 md:h-96"> | |
| <div class="absolute inset-0 bg-blue-400 rounded-full opacity-20 blur-xl"></div> | |
| <div class="relative w-full h-full flex items-center justify-center"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/2103/2103633.png" alt="Physics illustration" class="w-3/4 h-3/4 object-contain floating"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="wave-shape"> | |
| <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"> | |
| <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08L1200,120V0Z" opacity=".25" class="shape-fill"></path> | |
| <path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8V0Z" opacity=".5" class="shape-fill"></path> | |
| <path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84-23.61,127.61-34.34C657.93,77.22,726.34,91,783.24,91.1,841.05,91.22,908.34,58.08,944,0Z" class="shape-fill"></path> | |
| </svg> | |
| </div> | |
| </div> | |
| <!-- Search Section --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-12 relative z-20"> | |
| <div class="bg-white rounded-lg shadow-xl p-6 search-container"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between"> | |
| <div class="flex-1"> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-search text-gray-400"></i> | |
| </div> | |
| <input type="text" id="search-input" class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Search for lecture notes, exams, simulations..."> | |
| </div> | |
| </div> | |
| <div class="mt-4 md:mt-0 md:ml-4"> | |
| <select id="resource-type" class="block w-full pl-3 pr-10 py-3 text-base border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"> | |
| <option value="all">All Resource Types</option> | |
| <option value="notes">Lecture Notes</option> | |
| <option value="exams">Previous Exams</option> | |
| <option value="labs">Lab Reports</option> | |
| <option value="simulations">Simulations</option> | |
| <option value="codes">MATLAB Codes</option> | |
| <option value="books">Textbooks</option> | |
| <option value="projects">Projects</option> | |
| </select> | |
| </div> | |
| <div class="mt-4 md:mt-0 md:ml-4"> | |
| <select id="subject" class="block w-full pl-3 pr-10 py-3 text-base border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"> | |
| <option value="all">All Subjects</option> | |
| <option value="classical">Classical Mechanics</option> | |
| <option value="quantum">Quantum Mechanics</option> | |
| <option value="electromagnetism">Electromagnetism</option> | |
| <option value="thermodynamics">Thermodynamics</option> | |
| <option value="optics">Optics</option> | |
| <option value="solid-state">Solid State Physics</option> | |
| <option value="astrophysics">Astrophysics</option> | |
| <option value="particle">Particle Physics</option> | |
| </select> | |
| </div> | |
| <div class="mt-4 md:mt-0 md:ml-4"> | |
| <button id="search-button" class="inline-flex items-center px-4 py-3 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| Search | |
| </button> | |
| </div> | |
| </div> | |
| <div id="search-results" class="mt-6 hidden"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">Search Results</h3> | |
| <div class="space-y-4"> | |
| <!-- Results will be populated here by JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <!-- Subjects Grid --> | |
| <div class="mb-12"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 mb-6">Explore by Subject</h2> | |
| <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Classical Mechanics --> | |
| <div class="subject-card bg-gradient-to-r from-blue-500 to-blue-700 rounded-lg shadow-md overflow-hidden card-hover"> | |
| <div class="p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-white bg-opacity-20 p-3 rounded-full"> | |
| <i class="fas fa-satellite-dish text-white text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-white">Classical Mechanics</h3> | |
| <p class="mt-1 text-blue-100">Lagrangian, Hamiltonian, Newtonian physics</p> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-blue-700 bg-white hover:bg-gray-50"> | |
| Explore Resources | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quantum Mechanics --> | |
| <div class="subject-card bg-gradient-to-r from-purple-500 to-purple-700 rounded-lg shadow-md overflow-hidden card-hover"> | |
| <div class="p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-white bg-opacity-20 p-3 rounded-full"> | |
| <i class="fas fa-atom text-white text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-white">Quantum Mechanics</h3> | |
| <p class="mt-1 text-purple-100">Wave functions, Schrödinger equation, QFT</p> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-purple-700 bg-white hover:bg-gray-50"> | |
| Explore Resources | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Electromagnetism --> | |
| <div class="subject-card bg-gradient-to-r from-red-500 to-red-700 rounded-lg shadow-md overflow-hidden card-hover"> | |
| <div class="p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-white bg-opacity-20 p-3 rounded-full"> | |
| <i class="fas fa-bolt text-white text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-white">Electromagnetism</h3> | |
| <p class="mt-1 text-red-100">Maxwell's equations, EM waves, circuits</p> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-red-700 bg-white hover:bg-gray-50"> | |
| Explore Resources | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Thermodynamics --> | |
| <div class="subject-card bg-gradient-to-r from-yellow-500 to-yellow-700 rounded-lg shadow-md overflow-hidden card-hover"> | |
| <div class="p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-white bg-opacity-20 p-3 rounded-full"> | |
| <i class="fas fa-temperature-high text-white text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-white">Thermodynamics</h3> | |
| <p class="mt-1 text-yellow-100">Laws of thermodynamics, statistical mechanics</p> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-yellow-700 bg-white hover:bg-gray-50"> | |
| Explore Resources | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Optics --> | |
| <div class="subject-card bg-gradient-to-r from-green-500 to-green-700 rounded-lg shadow-md overflow-hidden card-hover"> | |
| <div class="p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-white bg-opacity-20 p-3 rounded-full"> | |
| <i class="fas fa-lightbulb text-white text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-white">Optics</h3> | |
| <p class="mt-1 text-green-100">Geometric optics, wave optics, lasers</p> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-green-700 bg-white hover:bg-gray-50"> | |
| Explore Resources | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Solid State Physics --> | |
| <div class="subject-card bg-gradient-to-r from-indigo-500 to-indigo-700 rounded-lg shadow-md overflow-hidden card-hover"> | |
| <div class="p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-white bg-opacity-20 p-3 rounded-full"> | |
| <i class="fas fa-cubes text-white text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-white">Solid State Physics</h3> | |
| <p class="mt-1 text-indigo-100">Crystal structure, semiconductors, superconductors</p> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-indigo-700 bg-white hover:bg-gray-50"> | |
| Explore Resources | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Resource Types Tabs --> | |
| <div class="mb-12"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 mb-6">Resource Types</h2> | |
| <div class="border-b border-gray-200"> | |
| <nav class="-mb-px flex space-x-8 overflow-x-auto" id="resource-tabs"> | |
| <button class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm border-blue-500 text-blue-600" data-tab="lecture-notes"> | |
| <i class="fas fa-book-open mr-2"></i>Lecture Notes | |
| </button> | |
| <button class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="exams"> | |
| <i class="fas fa-file-alt mr-2"></i>Previous Exams | |
| </button> | |
| <button class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="labs"> | |
| <i class="fas fa-flask mr-2"></i>Lab Reports | |
| </button> | |
| <button class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="simulations"> | |
| <i class="fas fa-laptop-code mr-2"></i>Simulations | |
| </button> | |
| <button class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="codes"> | |
| <i class="fas fa-code mr-2"></i>MATLAB Codes | |
| </button> | |
| <button class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="books"> | |
| <i class="fas fa-book mr-2"></i>Textbooks | |
| </button> | |
| </nav> | |
| </div> | |
| <!-- Tab Contents --> | |
| <div class="mt-6"> | |
| <!-- Lecture Notes Tab --> | |
| <div id="lecture-notes" class="tab-content active"> | |
| <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"> | |
| <div class="resource-card bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-blue-500 rounded-md p-3"> | |
| <i class="fas fa-book-open text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900">Quantum Mechanics I</h3> | |
| <p class="mt-1 text-sm text-gray-500">Prof. Smith - Fall 2022</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between items-center"> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-blue-100 text-blue-800"> | |
| <i class="fas fa-university mr-1"></i> MIT | |
| </span> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-green-100 text-green-800"> | |
| <i class="fas fa-download mr-1"></i> 245 | |
| </span> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-purple-100 text-purple-800"> | |
| <i class="fas fa-star mr-1"></i> 4.8 | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-4 sm:px-6 flex justify-between"> | |
| <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">View Details</a> | |
| <a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-500"><i class="fas fa-download mr-1"></i> Download</a> | |
| </div> | |
| </div> | |
| <div class="resource-card bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-purple-500 rounded-md p-3"> | |
| <i class="fas fa-book-open text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900">Electromagnetic Theory</h3> | |
| <p class="mt-1 text-sm text-gray-500">Prof. Johnson - Spring 2023</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between items-center"> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-purple-100 text-purple-800"> | |
| <i class="fas fa-university mr-1"></i> Stanford | |
| </span> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-green-100 text-green-800"> | |
| <i class="fas fa-download mr-1"></i> 189 | |
| </span> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-purple-100 text-purple-800"> | |
| <i class="fas fa-star mr-1"></i> 4.6 | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-4 sm:px-6 flex justify-between"> | |
| <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">View Details</a> | |
| <a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-500"><i class="fas fa-download mr-1"></i> Download</a> | |
| </div> | |
| </div> | |
| <div class="resource-card bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-red-500 rounded-md p-3"> | |
| <i class="fas fa-book-open text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900">Statistical Mechanics</h3> | |
| <p class="mt-1 text-sm text-gray-500">Prof. Williams - Winter 2023</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between items-center"> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-red-100 text-red-800"> | |
| <i class="fas fa-university mr-1"></i> Caltech | |
| </span> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-green-100 text-green-800"> | |
| <i class="fas fa-download mr-1"></i> 312 | |
| </span> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-purple-100 text-purple-800"> | |
| <i class="fas fa-star mr-1"></i> 4.9 | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-4 sm:px-6 flex justify-between"> | |
| <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">View Details</a> | |
| <a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-500"><i class="fas fa-download mr-1"></i> Download</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 text-center"> | |
| <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700"> | |
| View All Lecture Notes | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Exams Tab --> | |
| <div id="exams" class="tab-content"> | |
| <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"> | |
| <div class="resource-card bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-yellow-500 rounded-md p-3"> | |
| <i class="fas fa-file-alt text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900">Quantum Physics Final</h3> | |
| <p class="mt-1 text-sm text-gray-500">2022 with solutions</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between items-center"> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-yellow-100 text-yellow-800"> | |
| <i class="fas fa-university mr-1"></i> Harvard | |
| </span> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-green-100 text-green-800"> | |
| <i class="fas fa-download mr-1"></i> 421 | |
| </span> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-purple-100 text-purple-800"> | |
| <i class="fas fa-star mr-1"></i> 4.7 | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-4 sm:px-6 flex justify-between"> | |
| <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">View Details</a> | |
| <a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-500"><i class="fas fa-download mr-1"></i> Download</a> | |
| </div> | |
| </div> | |
| <div class="resource-card bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-green-500 rounded-md p-3"> | |
| <i class="fas fa-file-alt text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900">EM Theory Midterm</h3> | |
| <p class="mt-1 text-sm text-gray-500">2021 with solutions</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between items-center"> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-green-100 text-green-800"> | |
| <i class="fas fa-university mr-1"></i> Princeton | |
| </span> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-green-100 text-green-800"> | |
| <i class="fas fa-download mr-1"></i> 387 | |
| </span> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-purple-100 text-purple-800"> | |
| <i class="fas fa-star mr-1"></i> 4.5 | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-4 sm:px-6 flex justify-between"> | |
| <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">View Details</a> | |
| <a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-500"><i class="fas fa-download mr-1"></i> Download</a> | |
| </div> | |
| </div> | |
| <div class="resource-card bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3"> | |
| <i class="fas fa-file-alt text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900">Classical Mech Final</h3> | |
| <p class="mt-1 text-sm text-gray-500">2020 with solutions</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between items-center"> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-indigo-100 text-indigo-800"> | |
| <i class="fas fa-university mr-1"></i> UC Berkeley | |
| </span> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-green-100 text-green-800"> | |
| <i class="fas fa-download mr-1"></i> 512 | |
| </span> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-purple-100 text-purple-800"> | |
| <i class="fas fa-star mr-1"></i> 4.8 | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-4 sm:px-6 flex justify-between"> | |
| <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">View Details</a> | |
| <a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-500"><i class="fas fa-download mr-1"></i> Download</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 text-center"> | |
| <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700"> | |
| View All Previous Exams | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Labs Tab --> | |
| <div id="labs" class="tab-content"> | |
| <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"> | |
| <div class="resource-card bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-blue-500 rounded-md p-3"> | |
| <i class="fas fa-flask text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900">Quantum Tunneling</h3> | |
| <p class="mt-1 text-sm text-gray-500">Advanced Lab - Spring 2023</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between items-center"> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-blue-100 text-blue-800"> | |
| <i class="fas fa-university mr-1"></i> MIT | |
| </span> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-green-100 text-green-800"> | |
| <i class="fas fa-download mr-1"></i> 156 | |
| </span> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-purple-100 text-purple-800"> | |
| <i class="fas fa-star mr-1"></i> 4.6 | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-4 sm:px-6 flex justify-between"> | |
| <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">View Details</a> | |
| <a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-500"><i class="fas fa-download mr-1"></i> Download</a> | |
| </div> | |
| </div> | |
| <div class="resource-card bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-purple-500 rounded-md p-3"> | |
| <i class="fas fa-flask text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900">Franck-Hertz Experiment</h3> | |
| <p class="mt-1 text-sm text-gray-500">Modern Physics Lab - Fall 2022</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between items-center"> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-purple-100 text-purple-800"> | |
| <i class="fas fa-university mr-1"></i> Stanford | |
| </span> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-green-100 text-green-800"> | |
| <i class="fas fa-download mr-1"></i> 198 | |
| </span> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-purple-100 text-purple-800"> | |
| <i class="fas fa-star mr-1"></i> 4.8 | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-4 sm:px-6 flex justify-between"> | |
| <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">View Details</a> | |
| <a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-500"><i class="fas fa-download mr-1"></i> Download</a> | |
| </div> | |
| </div> | |
| <div class="resource-card bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-red-500 rounded-md p-3"> | |
| <i class="fas fa-flask text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900">Millikan Oil Drop</h3> | |
| <p class="mt-1 text-sm text-gray-500">Advanced Lab - Winter 2023</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between items-center"> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-red-100 text-red-800"> | |
| <i class="fas fa-university mr-1"></i> Caltech | |
| </span> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-green-100 text-green-800"> | |
| <i class="fas fa-download mr-1"></i> 231 | |
| </span> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-purple-100 text-purple-800"> | |
| <i class="fas fa-star mr-1"></i> 4.9 | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-4 sm:px-6 flex justify-between"> | |
| <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">View Details</a> | |
| <a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-500"><i class="fas fa-download mr-1"></i> Download</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 text-center"> | |
| <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700"> | |
| View All Lab Reports | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Simulations Tab --> | |
| <div id="simulations" class="tab-content"> | |
| <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"> | |
| <div class="resource-card bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-green-500 rounded-md p-3"> | |
| <i class="fas fa-laptop-code text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900">Double Slit Experiment</h3> | |
| <p class="mt-1 text-sm text-gray-500">Interactive wave-particle duality</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between items-center"> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-green-100 text-green-800"> | |
| <i class="fas fa-globe mr-1"></i> WebGL | |
| </span> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-green-100 text-green-800"> | |
| <i class="fas fa-eye mr-1"></i> 2.1K | |
| </span> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-purple-100 text-purple-800"> | |
| <i class="fas fa-star mr-1"></i> 4.9 | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-4 sm:px-6 flex justify-between"> | |
| <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">View Details</a> | |
| <a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-500"><i class="fas fa-external-link-alt mr-1"></i> Run</a> | |
| </div> | |
| </div> | |
| <div class="resource-card bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3"> | |
| <i class="fas fa-laptop-code text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900">Planetary Orbits</h3> | |
| <p class="mt-1 text-sm text-gray-500">N-body gravitational simulation</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between items-center"> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-indigo-100 text-indigo-800"> | |
| <i class="fas fa-globe mr-1"></i> JavaScript | |
| </span> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-green-100 text-green-800"> | |
| <i class="fas fa-eye mr-1"></i> 3.4K | |
| </span> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-purple-100 text-purple-800"> | |
| <i class="fas fa-star mr-1"></i> 4.7 | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-4 sm:px-6 flex justify-between"> | |
| <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">View Details</a> | |
| <a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-500"><i class="fas fa-external-link-alt mr-1"></i> Run</a> | |
| </div> | |
| </div> | |
| <div class="resource-card bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-red-500 rounded-md p-3"> | |
| <i class="fas fa-laptop-code text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900">Quantum Harmonic Oscillator</h3> | |
| <p class="mt-1 text-sm text-gray-500">Wavefunction visualization</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between items-center"> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-red-100 text-red-800"> | |
| <i class="fas fa-globe mr-1"></i> Python | |
| </span> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-green-100 text-green-800"> | |
| <i class="fas fa-eye mr-1"></i> 1.8K | |
| </span> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-purple-100 text-purple-800"> | |
| <i class="fas fa-star mr-1"></i> 4.8 | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-4 sm:px-6 flex justify-between"> | |
| <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">View Details</a> | |
| <a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-500"><i class="fas fa-external-link-alt mr-1"></i> Run</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 text-center"> | |
| <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700"> | |
| View All Simulations | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- MATLAB Codes Tab --> | |
| <div id="codes" class="tab-content"> | |
| <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"> | |
| <div class="resource-card bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-orange-500 rounded-md p-3"> | |
| <i class="fas fa-code text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900">Fourier Transform</h3> | |
| <p class="mt-1 text-sm text-gray-500">Signal processing toolkit</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between items-center"> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-orange-100 text-orange-800"> | |
| <i class="fab fa-matlab mr-1"></i> MATLAB | |
| </span> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-green-100 text-green-800"> | |
| <i class="fas fa-download mr-1"></i> 342 | |
| </span> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-purple-100 text-purple-800"> | |
| <i class="fas fa-star mr-1"></i> 4.7 | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-4 sm:px-6 flex justify-between"> | |
| <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">View Details</a> | |
| <a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-500"><i class="fas fa-download mr-1"></i> Download</a> | |
| </div> | |
| </div> | |
| <div class="resource-card bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-blue-500 rounded-md p-3"> | |
| <i class="fas fa-code text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900">Monte Carlo Simulation</h3> | |
| <p class="mt-1 text-sm text-gray-500">Statistical physics applications</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between items-center"> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-blue-100 text-blue-800"> | |
| <i class="fab fa-matlab mr-1"></i> MATLAB | |
| </span> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-green-100 text-green-800"> | |
| <i class="fas fa-download mr-1"></i> 289 | |
| </span> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-purple-100 text-purple-800"> | |
| <i class="fas fa-star mr-1"></i> 4.9 | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-4 sm:px-6 flex justify-between"> | |
| <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">View Details</a> | |
| <a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-500"><i class="fas fa-download mr-1"></i> Download</a> | |
| </div> | |
| </div> | |
| <div class="resource-card bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-purple-500 rounded-md p-3"> | |
| <i class="fas fa-code text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900">PDE Solver</h3> | |
| <p class="mt-1 text-sm text-gray-500">Heat equation, wave equation</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between items-center"> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-purple-100 text-purple-800"> | |
| <i class="fab fa-matlab mr-1"></i> MATLAB | |
| </span> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-green-100 text-green-800"> | |
| <i class="fas fa-download mr-1"></i> 412 | |
| </span> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-purple-100 text-purple-800"> | |
| <i class="fas fa-star mr-1"></i> 4.8 | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-4 sm:px-6 flex justify-between"> | |
| <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">View Details</a> | |
| <a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-500"><i class="fas fa-download mr-1"></i> Download</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 text-center"> | |
| <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700"> | |
| View All MATLAB Codes | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Textbooks Tab --> | |
| <div id="books" class="tab-content"> | |
| <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"> | |
| <div class="resource-card bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-yellow-500 rounded-md p-3"> | |
| <i class="fas fa-book text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900">Introduction to Electrodynamics</h3> | |
| <p class="mt-1 text-sm text-gray-500">David J. Griffiths - 4th Edition</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between items-center"> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-yellow-100 text-yellow-800"> | |
| <i class="fas fa-book-open mr-1"></i> Electromagnetism | |
| </span> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-green-100 text-green-800"> | |
| <i class="fas fa-download mr-1"></i> 1.2K | |
| </span> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-purple-100 text-purple-800"> | |
| <i class="fas fa-star mr-1"></i> 4.9 | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-4 sm:px-6 flex justify-between"> | |
| <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">View Details</a> | |
| <a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-500"><i class="fas fa-download mr-1"></i> Download</a> | |
| </div> | |
| </div> | |
| <div class="resource-card bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-blue-500 rounded-md p-3"> | |
| <i class="fas fa-book text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900">Quantum Mechanics</h3> | |
| <p class="mt-1 text-sm text-gray-500">Claude Cohen-Tannoudji - 2 Volumes</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between items-center"> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-blue-100 text-blue-800"> | |
| <i class="fas fa-book-open mr-1"></i> Quantum Physics | |
| </span> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-green-100 text-green-800"> | |
| <i class="fas fa-download mr-1"></i> 987 | |
| </span> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-purple-100 text-purple-800"> | |
| <i class="fas fa-star mr-1"></i> 4.8 | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-4 sm:px-6 flex justify-between"> | |
| <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">View Details</a> | |
| <a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-500"><i class="fas fa-download mr-1"></i> Download</a> | |
| </div> | |
| </div> | |
| <div class="resource-card bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-red-500 rounded-md p-3"> | |
| <i class="fas fa-book text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900">Classical Mechanics</h3> | |
| <p class="mt-1 text-sm text-gray-500">Herbert Goldstein - 3rd Edition</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between items-center"> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-red-100 text-red-800"> | |
| <i class="fas fa-book-open mr-1"></i> Mechanics | |
| </span> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-green-100 text-green-800"> | |
| <i class="fas fa-download mr-1"></i> 876 | |
| </span> | |
| <span class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full bg-purple-100 text-purple-800"> | |
| <i class="fas fa-star mr-1"></i> 4.7 | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-4 sm:px-6 flex justify-between"> | |
| <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">View Details</a> | |
| <a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-500"><i class="fas fa-download mr-1"></i> Download</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 text-center"> | |
| <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700"> | |
| View All Textbooks | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Community Section --> | |
| <div class="mb-12"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 mb-6">Join Our Community</h2> | |
| <div class="bg-white shadow rounded-lg overflow-hidden"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4"> | |
| <div class="bg-blue-50 rounded-lg p-6 text-center"> | |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 text-blue-600"> | |
| <i class="fas fa-users text-xl"></i> | |
| </div> | |
| <h3 class="mt-5 text-lg font-medium text-gray-900">Discussion Forums</h3> | |
| <p class="mt-2 text-sm text-gray-500">Ask questions and help others with physics problems.</p> | |
| <div class="mt-6"> | |
| <a href="#" class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-full shadow-sm text-white bg-blue-600 hover:bg-blue-700"> | |
| Join Now | |
| </a> | |
| </div> | |
| </div> | |
| <div class="bg-purple-50 rounded-lg p-6 text-center"> | |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-purple-100 text-purple-600"> | |
| <i class="fas fa-chalkboard-teacher text-xl"></i> | |
| </div> | |
| <h3 class="mt-5 text-lg font-medium text-gray-900">Study Groups</h3> | |
| <p class="mt-2 text-sm text-gray-500">Collaborate with peers on coursework and research.</p> | |
| <div class="mt-6"> | |
| <a href="#" class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-full shadow-sm text-white bg-purple-600 hover:bg-purple-700"> | |
| Find Groups | |
| </a> | |
| </div> | |
| </div> | |
| <div class="bg-green-50 rounded-lg p-6 text-center"> | |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 text-green-600"> | |
| <i class="fas fa-user-graduate text-xl"></i> | |
| </div> | |
| <h3 class="mt-5 text-lg font-medium text-gray-900">Mentorship</h3> | |
| <p class="mt-2 text-sm text-gray-500">Connect with senior students and researchers.</p> | |
| <div class="mt-6"> | |
| <a href="#" class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-full shadow-sm text-white bg-green-600 hover:bg-green-700"> | |
| Get Mentored | |
| </a> | |
| </div> | |
| </div> | |
| <div class="bg-indigo-50 rounded-lg p-6 text-center"> | |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 text-indigo-600"> | |
| <i class="fas fa-project-diagram text-xl"></i> | |
| </div> | |
| <h3 class="mt-5 text-lg font-medium text-gray-900">Research Projects</h3> | |
| <p class="mt-2 text-sm text-gray-500">Collaborate on open research projects.</p> | |
| <div class="mt-6"> | |
| <a href="#" class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-full shadow-sm text-white bg-indigo-600 hover:bg-indigo-700"> | |
| Explore Projects | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Statistics Section --> | |
| <div class="mb-12"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 mb-6">Our Impact</h2> | |
| <div class="bg-white shadow rounded-lg overflow-hidden"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4"> | |
| <div class="text-center"> | |
| <p class="text-5xl font-extrabold text-blue-600">10K+</p> | |
| <p class="mt-2 text-sm font-medium text-gray-900">Active Users</p> | |
| <p class="mt-1 text-sm text-gray-500">Physics students worldwide</p> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-5xl font-extrabold text-purple-600">25K+</p> | |
| <p class="mt-2 text-sm font-medium text-gray-900">Resources</p> | |
| <p class="mt-1 text-sm text-gray-500">Lecture notes, exams, labs</p> | |
| </div> | |
| <div class=" | |
| </html> |