| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>EduMaster LMS</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-item:hover .sidebar-icon { |
| | transform: translateX(5px); |
| | } |
| | |
| | .course-card: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); |
| | } |
| | |
| | .progress-ring__circle { |
| | transition: stroke-dashoffset 0.5s; |
| | transform: rotate(-90deg); |
| | transform-origin: 50% 50%; |
| | } |
| | |
| | .chapter-accordion { |
| | transition: all 0.3s ease; |
| | } |
| | |
| | @keyframes fadeIn { |
| | from { opacity: 0; } |
| | to { opacity: 1; } |
| | } |
| | |
| | .fade-in { |
| | animation: fadeIn 0.5s ease-in; |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-gray-50 font-sans"> |
| | |
| | <header class="bg-indigo-700 text-white shadow-lg"> |
| | <div class="container mx-auto px-4 py-4 flex justify-between items-center"> |
| | <div class="flex items-center space-x-2"> |
| | <i class="fas fa-graduation-cap text-3xl"></i> |
| | <h1 class="text-2xl font-bold">EduMaster LMS</h1> |
| | </div> |
| | <div class="flex items-center space-x-6"> |
| | <div class="relative"> |
| | <input type="text" placeholder="Search courses..." class="py-2 px-4 pr-10 rounded-full bg-indigo-600 text-white placeholder-indigo-300 focus:outline-none focus:ring-2 focus:ring-indigo-400"> |
| | <i class="fas fa-search absolute right-3 top-3 text-indigo-300"></i> |
| | </div> |
| | <div class="flex items-center space-x-2 cursor-pointer"> |
| | <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-10 h-10 rounded-full border-2 border-indigo-400"> |
| | <span class="font-medium">Sarah K.</span> |
| | </div> |
| | </div> |
| | </div> |
| | </header> |
| |
|
| | <div class="flex"> |
| | |
| | <aside class="w-64 bg-white shadow-md h-screen sticky top-0"> |
| | <nav class="p-4"> |
| | <ul class="space-y-2"> |
| | <li> |
| | <a href="#" class="sidebar-item flex items-center py-3 px-4 rounded-lg bg-indigo-50 text-indigo-700 font-medium"> |
| | <i class="sidebar-icon fas fa-home mr-3 text-indigo-600 transition-transform"></i> |
| | Dashboard |
| | </a> |
| | </li> |
| | <li> |
| | <a href="#" class="sidebar-item flex items-center py-3 px-4 rounded-lg hover:bg-indigo-50 text-gray-700 hover:text-indigo-700"> |
| | <i class="sidebar-icon fas fa-book mr-3 text-gray-500 transition-transform"></i> |
| | My Courses |
| | </a> |
| | </li> |
| | <li> |
| | <a href="#" class="sidebar-item flex items-center py-3 px-4 rounded-lg hover:bg-indigo-50 text-gray-700 hover:text-indigo-700"> |
| | <i class="sidebar-icon fas fa-calendar-alt mr-3 text-gray-500 transition-transform"></i> |
| | Schedule |
| | </a> |
| | </li> |
| | <li> |
| | <a href="#" class="sidebar-item flex items-center py-3 px-4 rounded-lg hover:bg-indigo-50 text-gray-700 hover:text-indigo-700"> |
| | <i class="sidebar-icon fas fa-chart-bar mr-3 text-gray-500 transition-transform"></i> |
| | Progress |
| | </a> |
| | </li> |
| | <li> |
| | <a href="#" class="sidebar-item flex items-center py-3 px-4 rounded-lg hover:bg-indigo-50 text-gray-700 hover:text-indigo-700"> |
| | <i class="sidebar-icon fas fa-comments mr-3 text-gray-500 transition-transform"></i> |
| | Discussions |
| | </a> |
| | </li> |
| | </ul> |
| | |
| | <div class="mt-8 pt-4 border-t border-gray-200"> |
| | <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 px-4">COURSES</h3> |
| | <ul class="space-y-1"> |
| | <li> |
| | <a href="#" class="sidebar-item flex items-center py-2 px-4 rounded-lg hover:bg-indigo-50 text-gray-700 hover:text-indigo-700"> |
| | <i class="sidebar-icon fas fa-laptop-code mr-3 text-gray-500 transition-transform"></i> |
| | Web Development |
| | </a> |
| | </li> |
| | <li> |
| | <a href="#" class="sidebar-item flex items-center py-2 px-4 rounded-lg hover:bg-indigo-50 text-gray-700 hover:text-indigo-700"> |
| | <i class="sidebar-icon fas fa-mobile-alt mr-3 text-gray-500 transition-transform"></i> |
| | Mobile Apps |
| | </a> |
| | </li> |
| | <li> |
| | <a href="#" class="sidebar-item flex items-center py-2 px-4 rounded-lg hover:bg-indigo-50 text-gray-700 hover:text-indigo-700"> |
| | <i class="sidebar-icon fas fa-chart-line mr-3 text-gray-500 transition-transform"></i> |
| | Data Science |
| | </a> |
| | </li> |
| | <li> |
| | <a href="#" class="sidebar-item flex items-center py-2 px-4 rounded-lg hover:bg-indigo-50 text-gray-700 hover:text-indigo-700"> |
| | <i class="sidebar-icon fas fa-paint-brush mr-3 text-gray-500 transition-transform"></i> |
| | Design |
| | </a> |
| | </li> |
| | </ul> |
| | </div> |
| | </nav> |
| | </aside> |
| |
|
| | |
| | <main class="flex-1 p-8"> |
| | <div class="flex justify-between items-center mb-8"> |
| | <h2 class="text-3xl font-bold text-gray-800">Web Development Fundamentals</h2> |
| | <div class="flex space-x-4"> |
| | <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center"> |
| | <i class="fas fa-share-alt mr-2"></i> Share |
| | </button> |
| | <button class="border border-indigo-600 text-indigo-600 hover:bg-indigo-50 px-4 py-2 rounded-lg flex items-center"> |
| | <i class="fas fa-download mr-2"></i> Resources |
| | </button> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="bg-white rounded-xl shadow-md p-6 mb-8"> |
| | <div class="flex items-center justify-between"> |
| | <div> |
| | <h3 class="text-lg font-semibold text-gray-800">Your Progress</h3> |
| | <p class="text-gray-600">Complete lessons to unlock your certificate</p> |
| | </div> |
| | <div class="relative w-20 h-20"> |
| | <svg class="w-full h-full" viewBox="0 0 100 100"> |
| | <circle class="text-gray-200" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" /> |
| | <circle class="text-indigo-600 progress-ring__circle" stroke-width="8" stroke-linecap="round" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" stroke-dasharray="251.2" stroke-dashoffset="100.48" /> |
| | </svg> |
| | <div class="absolute inset-0 flex items-center justify-center"> |
| | <span class="text-xl font-bold text-indigo-600">60%</span> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="mt-4 w-full bg-gray-200 rounded-full h-2.5"> |
| | <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 60%"></div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
| | |
| | <div class="lg:col-span-1"> |
| | <div class="bg-white rounded-xl shadow-md overflow-hidden"> |
| | <div class="bg-indigo-700 text-white px-6 py-4"> |
| | <h3 class="text-lg font-semibold">Course Content</h3> |
| | <p class="text-indigo-200 text-sm">5 Chapters • 23 Lessons</p> |
| | </div> |
| | <div class="p-4"> |
| | |
| | <div class="mb-4"> |
| | <div class="chapter-accordion flex justify-between items-center bg-gray-50 px-4 py-3 rounded-lg cursor-pointer" onclick="toggleChapter(1)"> |
| | <div class="flex items-center"> |
| | <span class="bg-indigo-100 text-indigo-800 text-xs font-medium mr-3 px-2.5 py-0.5 rounded-full">1</span> |
| | <h4 class="font-medium text-gray-800">HTML Basics</h4> |
| | </div> |
| | <i class="fas fa-chevron-down text-gray-500 text-sm transition-transform transform" id="chapter-icon-1"></i> |
| | </div> |
| | <div class="chapter-content mt-2 pl-11 hidden" id="chapter-content-1"> |
| | <ul class="space-y-2"> |
| | <li class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-50 cursor-pointer"> |
| | <i class="fas fa-play-circle text-indigo-500 mr-3"></i> |
| | <span class="text-gray-700">Introduction to HTML</span> |
| | <span class="ml-auto text-xs bg-green-100 text-green-800 px-2 py-0.5 rounded-full">Completed</span> |
| | </li> |
| | <li class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-50 cursor-pointer"> |
| | <i class="fas fa-play-circle text-indigo-500 mr-3"></i> |
| | <span class="text-gray-700">HTML Document Structure</span> |
| | <span class="ml-auto text-xs bg-green-100 text-green-800 px-2 py-0.5 rounded-full">Completed</span> |
| | </li> |
| | <li class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-50 cursor-pointer"> |
| | <i class="fas fa-play-circle text-indigo-500 mr-3"></i> |
| | <span class="text-gray-700">HTML Elements and Tags</span> |
| | <span class="ml-auto text-xs bg-yellow-100 text-yellow-800 px-2 py-0.5 rounded-full">In Progress</span> |
| | </li> |
| | <li class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-50 cursor-pointer"> |
| | <i class="fas fa-play-circle text-gray-400 mr-3"></i> |
| | <span class="text-gray-500">HTML Attributes</span> |
| | </li> |
| | </ul> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="mb-4"> |
| | <div class="chapter-accordion flex justify-between items-center bg-gray-50 px-4 py-3 rounded-lg cursor-pointer" onclick="toggleChapter(2)"> |
| | <div class="flex items-center"> |
| | <span class="bg-indigo-100 text-indigo-800 text-xs font-medium mr-3 px-2.5 py-0.5 rounded-full">2</span> |
| | <h4 class="font-medium text-gray-800">CSS Fundamentals</h4> |
| | </div> |
| | <i class="fas fa-chevron-down text-gray-500 text-sm transition-transform transform" id="chapter-icon-2"></i> |
| | </div> |
| | <div class="chapter-content mt-2 pl-11 hidden" id="chapter-content-2"> |
| | <ul class="space-y-2"> |
| | <li class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-50 cursor-pointer"> |
| | <i class="fas fa-play-circle text-gray-400 mr-3"></i> |
| | <span class="text-gray-500">Introduction to CSS</span> |
| | </li> |
| | <li class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-50 cursor-pointer"> |
| | <i class="fas fa-play-circle text-gray-400 mr-3"></i> |
| | <span class="text-gray-500">CSS Selectors</span> |
| | </li> |
| | <li class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-50 cursor-pointer"> |
| | <i class="fas fa-play-circle text-gray-400 mr-3"></i> |
| | <span class="text-gray-500">Box Model</span> |
| | </li> |
| | <li class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-50 cursor-pointer"> |
| | <i class="fas fa-play-circle text-gray-400 mr-3"></i> |
| | <span class="text-gray-500">Flexbox Layout</span> |
| | </li> |
| | </ul> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="mb-4"> |
| | <div class="chapter-accordion flex justify-between items-center bg-gray-50 px-4 py-3 rounded-lg cursor-pointer" onclick="toggleChapter(3)"> |
| | <div class="flex items-center"> |
| | <span class="bg-indigo-100 text-indigo-800 text-xs font-medium mr-3 px-2.5 py-0.5 rounded-full">3</span> |
| | <h4 class="font-medium text-gray-800">JavaScript Essentials</h4> |
| | </div> |
| | <i class="fas fa-chevron-down text-gray-500 text-sm transition-transform transform" id="chapter-icon-3"></i> |
| | </div> |
| | <div class="chapter-content mt-2 pl-11 hidden" id="chapter-content-3"> |
| | <ul class="space-y-2"> |
| | <li class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-50 cursor-pointer"> |
| | <i class="fas fa-play-circle text-gray-400 mr-3"></i> |
| | <span class="text-gray-500">JavaScript Basics</span> |
| | </li> |
| | <li class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-50 cursor-pointer"> |
| | <i class="fas fa-play-circle text-gray-400 mr-3"></i> |
| | <span class="text-gray-500">DOM Manipulation</span> |
| | </li> |
| | <li class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-50 cursor-pointer"> |
| | <i class="fas fa-play-circle text-gray-400 mr-3"></i> |
| | <span class="text-gray-500">Events</span> |
| | </li> |
| | </ul> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="mb-4"> |
| | <div class="chapter-accordion flex justify-between items-center bg-gray-50 px-4 py-3 rounded-lg cursor-pointer" onclick="toggleChapter(4)"> |
| | <div class="flex items-center"> |
| | <span class="bg-indigo-100 text-indigo-800 text-xs font-medium mr-3 px-2.5 py-0.5 rounded-full">4</span> |
| | <h4 class="font-medium text-gray-800">Responsive Design</h4> |
| | </div> |
| | <i class="fas fa-chevron-down text-gray-500 text-sm transition-transform transform" id="chapter-icon-4"></i> |
| | </div> |
| | <div class="chapter-content mt-2 pl-11 hidden" id="chapter-content-4"> |
| | <ul class="space-y-2"> |
| | <li class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-50 cursor-pointer"> |
| | <i class="fas fa-play-circle text-gray-400 mr-3"></i> |
| | <span class="text-gray-500">Media Queries</span> |
| | </li> |
| | <li class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-50 cursor-pointer"> |
| | <i class="fas fa-play-circle text-gray-400 mr-3"></i> |
| | <span class="text-gray-500">Responsive Images</span> |
| | </li> |
| | <li class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-50 cursor-pointer"> |
| | <i class="fas fa-play-circle text-gray-400 mr-3"></i> |
| | <span class="text-gray-500">Mobile-First Approach</span> |
| | </li> |
| | </ul> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="mb-4"> |
| | <div class="chapter-accordion flex justify-between items-center bg-gray-50 px-4 py-3 rounded-lg cursor-pointer" onclick="toggleChapter(5)"> |
| | <div class="flex items-center"> |
| | <span class="bg-indigo-100 text-indigo-800 text-xs font-medium mr-3 px-2.5 py-0.5 rounded-full">5</span> |
| | <h4 class="font-medium text-gray-800">Final Project</h4> |
| | </div> |
| | <i class="fas fa-chevron-down text-gray-500 text-sm transition-transform transform" id="chapter-icon-5"></i> |
| | </div> |
| | <div class="chapter-content mt-2 pl-11 hidden" id="chapter-content-5"> |
| | <ul class="space-y-2"> |
| | <li class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-50 cursor-pointer"> |
| | <i class="fas fa-play-circle text-gray-400 mr-3"></i> |
| | <span class="text-gray-500">Project Planning</span> |
| | </li> |
| | <li class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-50 cursor-pointer"> |
| | <i class="fas fa-play-circle text-gray-400 mr-3"></i> |
| | <span class="text-gray-500">Implementation</span> |
| | </li> |
| | <li class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-50 cursor-pointer"> |
| | <i class="fas fa-play-circle text-gray-400 mr-3"></i> |
| | <span class="text-gray-500">Testing & Debugging</span> |
| | </li> |
| | <li class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-50 cursor-pointer"> |
| | <i class="fas fa-play-circle text-gray-400 mr-3"></i> |
| | <span class="text-gray-500">Deployment</span> |
| | </li> |
| | </ul> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="lg:col-span-2"> |
| | <div class="bg-white rounded-xl shadow-md overflow-hidden fade-in"> |
| | <div class="p-6 border-b border-gray-200"> |
| | <div class="flex justify-between items-center mb-4"> |
| | <div> |
| | <span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded-full">Lesson 3</span> |
| | <h3 class="text-2xl font-bold text-gray-800 mt-2">HTML Elements and Tags</h3> |
| | </div> |
| | <div class="flex space-x-2"> |
| | <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200"> |
| | <i class="fas fa-bookmark"></i> |
| | </button> |
| | <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200"> |
| | <i class="fas fa-ellipsis-v"></i> |
| | </button> |
| | </div> |
| | </div> |
| | <div class="flex items-center text-sm text-gray-500 space-x-4"> |
| | <span><i class="fas fa-clock mr-1"></i> 25 min</span> |
| | <span><i class="fas fa-chart-line mr-1"></i> Intermediate</span> |
| | <span><i class="fas fa-calendar-alt mr-1"></i> Last updated: June 15, 2023</span> |
| | </div> |
| | </div> |
| | |
| | <div class="p-6"> |
| | <div class="prose max-w-none"> |
| | <h4 class="text-lg font-semibold mb-3">Understanding HTML Elements</h4> |
| | <p class="mb-4 text-gray-700">HTML elements are the building blocks of any webpage. They consist of tags that define the structure and content of your document.</p> |
| | |
| | <div class="bg-gray-50 p-4 rounded-lg mb-6"> |
| | <pre class="text-sm text-gray-800"><code><!DOCTYPE html> |
| | <html> |
| | <head> |
| | <title>My Page</title> |
| | </head> |
| | <body> |
| | <h1>This is a Heading</h1> |
| | <p>This is a paragraph.</p> |
| | </body> |
| | </html></code></pre> |
| | </div> |
| | |
| | <h4 class="text-lg font-semibold mb-3">Common HTML Elements</h4> |
| | <ul class="list-disc pl-5 mb-6 space-y-2 text-gray-700"> |
| | <li><code><h1></code> to <code><h6></code>: Heading elements</li> |
| | <li><code><p></code>: Paragraph element</li> |
| | <li><code><a></code>: Anchor element for links</li> |
| | <li><code><img></code>: Image element</li> |
| | <li><code><div></code>: Division or section element</li> |
| | <li><code><span></code>: Inline container element</li> |
| | </ul> |
| | |
| | <div class="bg-indigo-50 border-l-4 border-indigo-500 p-4 mb-6"> |
| | <div class="flex"> |
| | <div class="flex-shrink-0"> |
| | <i class="fas fa-lightbulb text-indigo-600"></i> |
| | </div> |
| | <div class="ml-3"> |
| | <h5 class="text-sm font-medium text-indigo-800">Pro Tip</h5> |
| | <p class="text-sm text-indigo-700">Always close your HTML tags properly to avoid rendering issues. Some tags like <code><img></code> are self-closing.</p> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <h4 class="text-lg font-semibold mb-3">Nesting Elements</h4> |
| | <p class="mb-4 text-gray-700">HTML elements can be nested inside other elements to create more complex structures.</p> |
| | |
| | <div class="bg-gray-50 p-4 rounded-lg mb-6"> |
| | <pre class="text-sm text-gray-800"><code><div class="container"> |
| | <h1>Welcome</h1> |
| | <p>This is a <span class="highlight">highlighted</span> text.</p> |
| | <a href="#"><img src="image.jpg" alt="Example"></a> |
| | </div></code></pre> |
| | </div> |
| | </div> |
| | |
| | <div class="mt-8 pt-6 border-t border-gray-200"> |
| | <div class="flex justify-between"> |
| | <button class="flex items-center px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50"> |
| | <i class="fas fa-arrow-left mr-2"></i> Previous Lesson |
| | </button> |
| | <button class="flex items-center px-4 py-2 bg-indigo-600 rounded-lg text-white hover:bg-indigo-700"> |
| | Next Lesson <i class="fas fa-arrow-right ml-2"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="mt-6 bg-white rounded-xl shadow-md overflow-hidden fade-in"> |
| | <div class="p-6 border-b border-gray-200"> |
| | <h3 class="text-lg font-semibold text-gray-800">Lesson Resources</h3> |
| | <p class="text-sm text-gray-600 mt-1">Download these files to follow along with the lesson</p> |
| | </div> |
| | <div class="p-6"> |
| | <div class="space-y-3"> |
| | <div class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer"> |
| | <div class="p-2 rounded-lg bg-indigo-100 text-indigo-600 mr-3"> |
| | <i class="fas fa-file-code"></i> |
| | </div> |
| | <div class="flex-1"> |
| | <h4 class="font-medium text-gray-800">starter-code.zip</h4> |
| | <p class="text-xs text-gray-500">HTML • 12 KB</p> |
| | </div> |
| | <button class="p-2 text-gray-500 hover:text-indigo-600"> |
| | <i class="fas fa-download"></i> |
| | </button> |
| | </div> |
| | |
| | <div class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer"> |
| | <div class="p-2 rounded-lg bg-blue-100 text-blue-600 mr-3"> |
| | <i class="fas fa-file-pdf"></i> |
| | </div> |
| | <div class="flex-1"> |
| | <h4 class="font-medium text-gray-800">html-cheatsheet.pdf</h4> |
| | <p class="text-xs text-gray-500">PDF • 1.2 MB</p> |
| | </div> |
| | <button class="p-2 text-gray-500 hover:text-blue-600"> |
| | <i class="fas fa-download"></i> |
| | </button> |
| | </div> |
| | |
| | <div class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer"> |
| | <div class="p-2 rounded-lg bg-green-100 text-green-600 mr-3"> |
| | <i class="fas fa-link"></i> |
| | </div> |
| | <div class="flex-1"> |
| | <h4 class="font-medium text-gray-800">Additional References</h4> |
| | <p class="text-xs text-gray-500">External Links</p> |
| | </div> |
| | <button class="p-2 text-gray-500 hover:text-green-600"> |
| | <i class="fas fa-external-link-alt"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </main> |
| | </div> |
| |
|
| | <script> |
| | |
| | function toggleChapter(chapterNumber) { |
| | const content = document.getElementById(`chapter-content-${chapterNumber}`); |
| | const icon = document.getElementById(`chapter-icon-${chapterNumber}`); |
| | |
| | content.classList.toggle('hidden'); |
| | icon.classList.toggle('rotate-180'); |
| | } |
| | |
| | |
| | document.addEventListener('DOMContentLoaded', function() { |
| | toggleChapter(1); |
| | |
| | |
| | const elements = document.querySelectorAll('.fade-in'); |
| | elements.forEach((el, index) => { |
| | setTimeout(() => { |
| | el.style.opacity = '1'; |
| | }, index * 100); |
| | }); |
| | }); |
| | </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=Maddyr237/lms" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| | </html> |
