Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Agentic RAG Course Creator</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> | |
| .pdf-preview { | |
| height: 500px; | |
| overflow-y: auto; | |
| border: 2px dashed #e5e7eb; | |
| } | |
| .progress-bar { | |
| transition: width 0.3s ease; | |
| } | |
| .module-card { | |
| transition: all 0.2s ease; | |
| } | |
| .module-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .lesson-item { | |
| transition: all 0.2s ease; | |
| } | |
| .lesson-item:hover { | |
| background-color: #f9fafb; | |
| } | |
| .slide-fade-enter-active, .slide-fade-leave-active { | |
| transition: all 0.3s ease; | |
| } | |
| .slide-fade-enter-from, .slide-fade-leave-to { | |
| opacity: 0; | |
| transform: translateX(10px); | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| } | |
| } | |
| .animate-pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="mb-10 text-center"> | |
| <h1 class="text-4xl font-bold text-indigo-700 mb-2">Agentic RAG Course Creator</h1> | |
| <p class="text-lg text-gray-600">Transform textbooks into comprehensive courses with AI-powered analysis</p> | |
| </header> | |
| <!-- Main Workflow --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-10"> | |
| <!-- Progress Steps --> | |
| <div class="flex items-center justify-between px-8 py-4 bg-gray-100"> | |
| <div class="step flex flex-col items-center relative" data-step="1"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-600 text-white flex items-center justify-center font-bold mb-1 z-10">1</div> | |
| <span class="text-sm font-medium text-gray-700">Upload PDF</span> | |
| <div class="absolute top-5 left-1/2 h-1 bg-gray-300 w-full -z-1"></div> | |
| </div> | |
| <div class="step flex flex-col items-center relative" data-step="2"> | |
| <div class="w-10 h-10 rounded-full bg-gray-300 text-gray-600 flex items-center justify-center font-bold mb-1 z-10">2</div> | |
| <span class="text-sm font-medium text-gray-500">Analyze Content</span> | |
| <div class="absolute top-5 left-1/2 h-1 bg-gray-300 w-full -z-1"></div> | |
| </div> | |
| <div class="step flex flex-col items-center relative" data-step="3"> | |
| <div class="w-10 h-10 rounded-full bg-gray-300 text-gray-600 flex items-center justify-center font-bold mb-1 z-10">3</div> | |
| <span class="text-sm font-medium text-gray-500">Course Outline</span> | |
| <div class="absolute top-5 left-1/2 h-1 bg-gray-300 w-full -z-1"></div> | |
| </div> | |
| <div class="step flex flex-col items-center relative" data-step="4"> | |
| <div class="w-10 h-10 rounded-full bg-gray-300 text-gray-600 flex items-center justify-center font-bold mb-1 z-10">4</div> | |
| <span class="text-sm font-medium text-gray-500">Generate Lessons</span> | |
| <div class="absolute top-5 left-1/2 h-1 bg-gray-300 w-full -z-1"></div> | |
| </div> | |
| <div class="step flex flex-col items-center" data-step="5"> | |
| <div class="w-10 h-10 rounded-full bg-gray-300 text-gray-600 flex items-center justify-center font-bold mb-1">5</div> | |
| <span class="text-sm font-medium text-gray-500">Create MCQs</span> | |
| </div> | |
| </div> | |
| <!-- Step Content --> | |
| <div class="p-8"> | |
| <!-- Step 1: Upload PDF --> | |
| <div id="step-1" class="step-content active"> | |
| <div class="mb-6"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-2">Upload Your Textbook</h2> | |
| <p class="text-gray-600">Select a PDF file containing the textbook material you want to transform into a course.</p> | |
| </div> | |
| <div class="flex flex-col md:flex-row gap-8"> | |
| <div class="flex-1"> | |
| <div class="pdf-upload-container border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer hover:border-indigo-500 transition-colors duration-200" id="dropzone"> | |
| <input type="file" id="pdf-upload" accept=".pdf" class="hidden"> | |
| <div class="flex flex-col items-center justify-center py-12"> | |
| <i class="fas fa-file-pdf text-5xl text-red-500 mb-4"></i> | |
| <p class="text-lg font-medium text-gray-700 mb-2">Drag & drop your PDF here</p> | |
| <p class="text-gray-500 mb-4">or</p> | |
| <button id="browse-btn" class="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 transition-colors duration-200"> | |
| Browse Files | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center justify-between"> | |
| <div class="text-sm text-gray-500">Supported format: PDF</div> | |
| <div class="text-sm text-gray-500">Max size: 50MB</div> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-4">PDF Preview</h3> | |
| <div class="pdf-preview rounded-lg bg-gray-50 p-4 flex items-center justify-center"> | |
| <div class="text-center text-gray-500"> | |
| <i class="fas fa-file-alt text-4xl mb-3"></i> | |
| <p>No PDF selected</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 flex justify-end"> | |
| <button id="next-step-1" class="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 transition-colors duration-200 opacity-50 cursor-not-allowed" disabled> | |
| Analyze PDF <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Step 2: Analyze Content --> | |
| <div id="step-2" class="step-content hidden"> | |
| <div class="mb-6"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-2">Analyzing Textbook Content</h2> | |
| <p class="text-gray-600">Our AI is processing your PDF to extract key concepts and structure.</p> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg p-6 mb-8"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div> | |
| <h3 class="font-medium text-gray-800">Analysis Progress</h3> | |
| <p class="text-sm text-gray-500">This may take a few minutes depending on the file size</p> | |
| </div> | |
| <div class="text-indigo-600 font-medium" id="progress-percent">0%</div> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div id="progress-bar" class="progress-bar bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div> | |
| </div> | |
| <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="bg-white p-4 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-book"></i> | |
| </div> | |
| <h4 class="font-medium">Pages Analyzed</h4> | |
| </div> | |
| <div class="text-2xl font-bold text-gray-800 pl-11" id="pages-analyzed">0</div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-lightbulb"></i> | |
| </div> | |
| <h4 class="font-medium">Key Concepts</h4> | |
| </div> | |
| <div class="text-2xl font-bold text-gray-800 pl-11" id="key-concepts">0</div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-sitemap"></i> | |
| </div> | |
| <h4 class="font-medium">Topics Identified</h4> | |
| </div> | |
| <div class="text-2xl font-bold text-gray-800 pl-11" id="topics-identified">0</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-6 mb-8"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-4">Extracted Textbook Structure</h3> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Chapter</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Title</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Key Topics</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pages</th> | |
| </tr> | |
| </thead> | |
| <tbody id="textbook-structure" class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td colspan="4" class="px-6 py-4 text-center text-gray-500">Analysis in progress...</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="mt-8 flex justify-between"> | |
| <button class="text-gray-600 px-6 py-2 rounded-lg border border-gray-300 hover:bg-gray-50 transition-colors duration-200" id="prev-step-2"> | |
| <i class="fas fa-arrow-left mr-2"></i> Back | |
| </button> | |
| <button class="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 transition-colors duration-200" id="next-step-2"> | |
| Generate Course <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Step 3: Course Outline --> | |
| <div id="step-3" class="step-content hidden"> | |
| <div class="mb-6"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-2">Course Outline</h2> | |
| <p class="text-gray-600">Review and customize the generated course structure based on your textbook.</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-white border border-gray-200 rounded-lg p-6 mb-6"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-4">Course Information</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label for="course-title" class="block text-sm font-medium text-gray-700 mb-1">Course Title</label> | |
| <input type="text" id="course-title" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500" value="Introduction to Computer Science"> | |
| </div> | |
| <div> | |
| <label for="course-description" class="block text-sm font-medium text-gray-700 mb-1">Course Description</label> | |
| <textarea id="course-description" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500">This course provides a comprehensive introduction to the fundamental concepts of computer science, including algorithms, data structures, programming paradigms, and computational thinking.</textarea> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="include-exercises" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" checked> | |
| <label for="include-exercises" class="ml-2 block text-sm text-gray-700">Include practice exercises in lessons</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="include-quizzes" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" checked> | |
| <label for="include-quizzes" class="ml-2 block text-sm text-gray-700">Include quizzes at the end of each module</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-medium text-gray-800">Course Modules</h3> | |
| <button id="add-module" class="text-sm text-indigo-600 hover:text-indigo-800 flex items-center"> | |
| <i class="fas fa-plus-circle mr-1"></i> Add Module | |
| </button> | |
| </div> | |
| <div id="modules-container" class="space-y-4"> | |
| <!-- Module cards will be added here --> | |
| <div class="module-card bg-gray-50 border border-gray-200 rounded-lg p-4"> | |
| <div class="flex items-start justify-between"> | |
| <div class="flex-1"> | |
| <input type="text" class="w-full font-medium text-gray-800 bg-transparent border-b border-transparent focus:border-gray-300 focus:outline-none mb-2" value="Module 1: Introduction to Computing"> | |
| <textarea class="w-full text-sm text-gray-600 bg-transparent border-b border-transparent focus:border-gray-300 focus:outline-none" rows="2">This module covers the basic concepts of computing, history of computers, and fundamental terminology.</textarea> | |
| </div> | |
| <button class="text-gray-400 hover:text-red-500 ml-2"> | |
| <i class="fas fa-trash-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="module-card bg-gray-50 border border-gray-200 rounded-lg p-4"> | |
| <div class="flex items-start justify-between"> | |
| <div class="flex-1"> | |
| <input type="text" class="w-full font-medium text-gray-800 bg-transparent border-b border-transparent focus:border-gray-300 focus:outline-none mb-2" value="Module 2: Programming Fundamentals"> | |
| <textarea class="w-full text-sm text-gray-600 bg-transparent border-b border-transparent focus:border-gray-300 focus:outline-none" rows="2">Learn the basics of programming including variables, control structures, and simple algorithms.</textarea> | |
| </div> | |
| <button class="text-gray-400 hover:text-red-500 ml-2"> | |
| <i class="fas fa-trash-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="module-card bg-gray-50 border border-gray-200 rounded-lg p-4"> | |
| <div class="flex items-start justify-between"> | |
| <div class="flex-1"> | |
| <input type="text" class="w-full font-medium text-gray-800 bg-transparent border-b border-transparent focus:border-gray-300 focus:outline-none mb-2" value="Module 3: Data Structures"> | |
| <textarea class="w-full text-sm text-gray-600 bg-transparent border-b border-transparent focus:border-gray-300 focus:outline-none" rows="2">Introduction to basic data structures like arrays, linked lists, stacks, and queues.</textarea> | |
| </div> | |
| <button class="text-gray-400 hover:text-red-500 ml-2"> | |
| <i class="fas fa-trash-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:col-span-1"> | |
| <div class="bg-white border border-gray-200 rounded-lg p-6 sticky top-4"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-4">Course Preview</h3> | |
| <div class="space-y-4"> | |
| <div class="p-4 bg-indigo-50 rounded-lg"> | |
| <h4 class="font-medium text-indigo-800 mb-1" id="preview-course-title">Introduction to Computer Science</h4> | |
| <p class="text-sm text-indigo-600" id="preview-course-description">This course provides a comprehensive introduction to the fundamental concepts of computer science...</p> | |
| </div> | |
| <div class="border-l-2 border-indigo-200 pl-4"> | |
| <h4 class="text-sm font-medium text-gray-500 uppercase mb-2">Modules</h4> | |
| <ul class="space-y-3" id="preview-modules-list"> | |
| <li class="flex items-start"> | |
| <span class="flex items-center justify-center w-6 h-6 bg-indigo-100 text-indigo-800 rounded-full text-xs font-medium mr-2 mt-0.5">1</span> | |
| <span>Introduction to Computing</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="flex items-center justify-center w-6 h-6 bg-indigo-100 text-indigo-800 rounded-full text-xs font-medium mr-2 mt-0.5">2</span> | |
| <span>Programming Fundamentals</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="flex items-center justify-center w-6 h-6 bg-indigo-100 text-indigo-800 rounded-full text-xs font-medium mr-2 mt-0.5">3</span> | |
| <span>Data Structures</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="pt-4 border-t border-gray-200"> | |
| <h4 class="text-sm font-medium text-gray-500 uppercase mb-2">Estimated Metrics</h4> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <p class="text-xs text-gray-500">Total Lessons</p> | |
| <p class="font-medium">9</p> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-500">Total Quizzes</p> | |
| <p class="font-medium">3</p> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-500">Duration</p> | |
| <p class="font-medium">6 weeks</p> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-500">Difficulty</p> | |
| <p class="font-medium">Beginner</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 flex justify-between"> | |
| <button class="text-gray-600 px-6 py-2 rounded-lg border border-gray-300 hover:bg-gray-50 transition-colors duration-200" id="prev-step-3"> | |
| <i class="fas fa-arrow-left mr-2"></i> Back | |
| </button> | |
| <button class="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 transition-colors duration-200" id="next-step-3"> | |
| Generate Lessons <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Step 4: Generate Lessons --> | |
| <div id="step-4" class="step-content hidden"> | |
| <div class="mb-6"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-2">Lesson Generation</h2> | |
| <p class="text-gray-600">AI-generated lessons for each module based on your textbook content.</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="lg:col-span-1"> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4 sticky top-4"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-4">Modules</h3> | |
| <ul class="space-y-2" id="modules-sidebar"> | |
| <li class="module-tab active px-3 py-2 rounded-lg bg-indigo-50 text-indigo-700 font-medium cursor-pointer" data-module="1"> | |
| Module 1: Introduction to Computing | |
| </li> | |
| <li class="module-tab px-3 py-2 rounded-lg hover:bg-gray-100 cursor-pointer" data-module="2"> | |
| Module 2: Programming Fundamentals | |
| </li> | |
| <li class="module-tab px-3 py-2 rounded-lg hover:bg-gray-100 cursor-pointer" data-module="3"> | |
| Module 3: Data Structures | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="lg:col-span-3"> | |
| <div class="module-content active" data-module="1"> | |
| <div class="bg-white border border-gray-200 rounded-lg p-6 mb-6"> | |
| <h3 class="text-xl font-medium text-gray-800 mb-2">Module 1: Introduction to Computing</h3> | |
| <p class="text-gray-600 mb-4">This module covers the basic concepts of computing, history of computers, and fundamental terminology.</p> | |
| <div class="space-y-4"> | |
| <div class="lesson-item bg-gray-50 border border-gray-200 rounded-lg p-4"> | |
| <div class="flex items-start justify-between"> | |
| <div class="flex-1"> | |
| <h4 class="font-medium text-gray-800 mb-1">Lesson 1: History of Computing</h4> | |
| <p class="text-sm text-gray-600">Explore the evolution of computing devices from early mechanical calculators to modern computers.</p> | |
| </div> | |
| <div class="flex items-center ml-4"> | |
| <button class="text-gray-400 hover:text-indigo-600 mr-2"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-red-500"> | |
| <i class="fas fa-trash-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lesson-item bg-gray-50 border border-gray-200 rounded-lg p-4"> | |
| <div class="flex items-start justify-between"> | |
| <div class="flex-1"> | |
| <h4 class="font-medium text-gray-800 mb-1">Lesson 2: Computer Hardware Basics</h4> | |
| <p class="text-sm text-gray-600">Learn about the fundamental components of a computer system and how they work together.</p> | |
| </div> | |
| <div class="flex items-center ml-4"> | |
| <button class="text-gray-400 hover:text-indigo-600 mr-2"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-red-500"> | |
| <i class="fas fa-trash-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lesson-item bg-gray-50 border border-gray-200 rounded-lg p-4"> | |
| <div class="flex items-start justify-between"> | |
| <div class="flex-1"> | |
| <h4 class="font-medium text-gray-800 mb-1">Lesson 3: Software and Operating Systems</h4> | |
| <p class="text-sm text-gray-600">Understand the role of software and operating systems in making hardware usable.</p> | |
| </div> | |
| <div class="flex items-center ml-4"> | |
| <button class="text-gray-400 hover:text-indigo-600 mr-2"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-red-500"> | |
| <i class="fas fa-trash-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-4 text-sm text-indigo-600 hover:text-indigo-800 flex items-center"> | |
| <i class="fas fa-plus-circle mr-1"></i> Add Lesson | |
| </button> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-6"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-4">Module Quiz</h3> | |
| <div class="flex items-center mb-4"> | |
| <input id="include-module-quiz-1" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" checked> | |
| <label for="include-module-quiz-1" class="ml-2 block text-sm text-gray-700">Include quiz for this module</label> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="quiz-question bg-gray-50 border border-gray-200 rounded-lg p-4"> | |
| <div class="flex items-start justify-between mb-2"> | |
| <h4 class="font-medium text-gray-800">Question 1</h4> | |
| <div class="flex items-center"> | |
| <button class="text-gray-400 hover:text-indigo-600 mr-2"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-red-500"> | |
| <i class="fas fa-trash-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-700 mb-3">Which of these was the first general-purpose electronic computer?</p> | |
| <div class="space-y-2 ml-4"> | |
| <div class="flex items-center"> | |
| <input type="radio" name="q1" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300"> | |
| <label class="ml-2 block text-sm text-gray-700">ENIAC</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" name="q1" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300"> | |
| <label class="ml-2 block text-sm text-gray-700">UNIVAC</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" name="q1" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300"> | |
| <label class="ml-2 block text-sm text-gray-700">IBM 701</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" name="q1" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300"> | |
| <label class="ml-2 block text-sm text-gray-700">Apple I</label> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-2 text-sm text-indigo-600 hover:text-indigo-800 flex items-center"> | |
| <i class="fas fa-plus-circle mr-1"></i> Add Question | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="module-content hidden" data-module="2"> | |
| <!-- Module 2 content would go here --> | |
| <div class="text-center py-12 text-gray-500"> | |
| <i class="fas fa-spinner animate-spin text-3xl mb-3"></i> | |
| <p>Generating content for Module 2...</p> | |
| </div> | |
| </div> | |
| <div class="module-content hidden" data-module="3"> | |
| <!-- Module 3 content would go here --> | |
| <div class="text-center py-12 text-gray-500"> | |
| <i class="fas fa-spinner animate-spin text-3xl mb-3"></i> | |
| <p>Generating content for Module 3...</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 flex justify-between"> | |
| <button class="text-gray-600 px-6 py-2 rounded-lg border border-gray-300 hover:bg-gray-50 transition-colors duration-200" id="prev-step-4"> | |
| <i class="fas fa-arrow-left mr-2"></i> Back | |
| </button> | |
| <button class="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 transition-colors duration-200" id="next-step-4"> | |
| Finalize Course <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Step 5: Finalize Course --> | |
| <div id="step-5" class="step-content hidden"> | |
| <div class="mb-6"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-2">Course Finalization</h2> | |
| <p class="text-gray-600">Review and export your completed course materials.</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-white border border-gray-200 rounded-lg p-6 mb-6"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-4">Course Summary</h3> | |
| <div class="space-y-6"> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-2">Course Title</h4> | |
| <p class="text-gray-800" id="final-course-title">Introduction to Computer Science</p> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-2">Course Description</h4> | |
| <p class="text-gray-800" id="final-course-description">This course provides a comprehensive introduction to the fundamental concepts of computer science, including algorithms, data structures, programming paradigms, and computational thinking.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-2">Course Structure</h4> | |
| <div class="space-y-4"> | |
| <div class="module-summary bg-gray-50 border border-gray-200 rounded-lg p-4"> | |
| <h5 class="font-medium text-gray-800 mb-1">Module 1: Introduction to Computing</h5> | |
| <p class="text-sm text-gray-600 mb-2">3 lessons, 1 quiz</p> | |
| <ul class="text-sm text-gray-700 space-y-1 ml-4"> | |
| <li class="flex items-start"> | |
| <span class="text-indigo-600 mr-2">•</span> | |
| <span>Lesson 1: History of Computing</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="text-indigo-600 mr-2">•</span> | |
| <span>Lesson 2: Computer Hardware Basics</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="text-indigo-600 mr-2">•</span> | |
| <span>Lesson 3: Software and Operating Systems</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="module-summary bg-gray-50 border border-gray-200 rounded-lg p-4"> | |
| <h5 class="font-medium text-gray-800 mb-1">Module 2: Programming Fundamentals</h5> | |
| <p class="text-sm text-gray-600 mb-2">3 lessons, 1 quiz</p> | |
| <ul class="text-sm text-gray-700 space-y-1 ml-4"> | |
| <li class="flex items-start"> | |
| <span class="text-indigo-600 mr-2">•</span> | |
| <span>Lesson 1: Variables and Data Types</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="text-indigo-600 mr-2">•</span> | |
| <span>Lesson 2: Control Structures</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="text-indigo-600 mr-2">•</span> | |
| <span>Lesson 3: Functions and Modularity</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="module-summary bg-gray-50 border border-gray-200 rounded-lg p-4"> | |
| <h5 class="font-medium text-gray-800 mb-1">Module 3: Data Structures</h5> | |
| <p class="text-sm text-gray-600 mb-2">3 lessons, 1 quiz</p> | |
| <ul class="text-sm text-gray-700 space-y-1 ml-4"> | |
| <li class="flex items-start"> | |
| <span class="text-indigo-600 mr-2">•</span> | |
| <span>Lesson 1: Arrays and Linked Lists</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="text-indigo-600 mr-2">•</span> | |
| <span>Lesson 2: Stacks and Queues</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="text-indigo-600 mr-2">•</span> | |
| <span>Lesson 3: Trees and Graphs</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-2">Assessment Summary</h4> | |
| <div class="grid grid-cols-3 gap-4"> | |
| <div class="bg-gray-50 p-3 rounded-lg"> | |
| <p class="text-xs text-gray-500">Total Questions</p> | |
| <p class="font-medium">15</p> | |
| </div> | |
| <div class="bg-gray-50 p-3 rounded-lg"> | |
| <p class="text-xs text-gray-500">Multiple Choice</p> | |
| <p class="font-medium">12</p> | |
| </div> | |
| <div class="bg-gray-50 p-3 rounded-lg"> | |
| <p class="text-xs text-gray-500">Short Answer</p> | |
| <p class="font-medium">3</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-6"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-4">Export Options</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <button class="export-option flex flex-col items-center justify-center p-4 border-2 border-gray-200 rounded-lg hover:border-indigo-500 hover:bg-indigo-50 transition-colors duration-200"> | |
| <i class="fas fa-file-word text-3xl text-blue-600 mb-2"></i> | |
| <span class="font-medium">Word Document</span> | |
| <span class="text-xs text-gray-500">.docx format</span> | |
| </button> | |
| <button class="export-option flex flex-col items-center justify-center p-4 border-2 border-gray-200 rounded-lg hover:border-indigo-500 hover:bg-indigo-50 transition-colors duration-200"> | |
| <i class="fas fa-file-pdf text-3xl text-red-600 mb-2"></i> | |
| <span class="font-medium">PDF</span> | |
| <span class="text-xs text-gray-500">Portable format</span> | |
| </button> | |
| <button class="export-option flex flex-col items-center justify-center p-4 border-2 border-gray-200 rounded-lg hover:border-indigo-500 hover:bg-indigo-50 transition-colors duration-200"> | |
| <i class="fas fa-file-csv text-3xl text-green-600 mb-2"></i> | |
| <span class="font-medium">CSV Package</span> | |
| <span class="text-xs text-gray-500">For LMS import</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:col-span-1"> | |
| <div class="bg-white border border-gray-200 rounded-lg p-6 sticky top-4"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-4">Final Checks</h3> | |
| <div class="space-y-4 mb-6"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-6 w-6 rounded-full bg-green-100"> | |
| <i class="fas fa-check text-green-600 text-xs"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-700">Course title and description</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-6 w-6 rounded-full bg-green-100"> | |
| <i class="fas fa-check text-green-600 text-xs"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-700">Module structure</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-6 w-6 rounded-full bg-green-100"> | |
| <i class="fas fa-check text-green-600 text-xs"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-700">Lesson content</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-6 w-6 rounded-full bg-indigo-100 animate-pulse"> | |
| <i class="fas fa-spinner text-indigo-600 text-xs"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-700">Assessment questions</p> | |
| <p class="text-xs text-gray-500">Generating final questions...</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-4 border-t border-gray-200"> | |
| <h4 class="text-sm font-medium text-gray-700 mb-2">Course Settings</h4> | |
| <div class="space-y-3"> | |
| <div class="flex items-center"> | |
| <input id="include-answer-key" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" checked> | |
| <label for="include-answer-key" class="ml-2 block text-sm text-gray-700">Include answer key</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="include-references" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" checked> | |
| <label for="include-references" class="ml-2 block text-sm text-gray-700">Include textbook references</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="include-learning-objectives" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" checked> | |
| <label for="include-learning-objectives" class="ml-2 block text-sm text-gray-700">Include learning objectives</label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 flex justify-between"> | |
| <button class="text-gray-600 px-6 py-2 rounded-lg border border-gray-300 hover:bg-gray-50 transition-colors duration-200" id="prev-step-5"> | |
| <i class="fas fa-arrow-left mr-2"></i> Back | |
| </button> | |
| <button class="bg-green-600 text-white px-6 py-2 rounded-lg hover:bg-green-700 transition-colors duration-200 flex items-center" id="finish-course"> | |
| <i class="fas fa-check-circle mr-2"></i> Complete Course Creation | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="text-center text-gray-500 text-sm mt-12"> | |
| <p>Agentic RAG Course Creator - Transform textbooks into engaging courses with AI</p> | |
| <p class="mt-1">© 2023 All Rights Reserved</p> | |
| </footer> | |
| </div> | |
| <script> | |
| // DOM Elements | |
| const stepContents = document.querySelectorAll('.step-content'); | |
| const steps = document.querySelectorAll('.step'); | |
| const nextButtons = { | |
| step1: document.getElementById('next-step-1'), | |
| step2: document.getElementById('next-step-2'), | |
| step3: document.getElementById('next-step-3'), | |
| step4: document.getElementById('next-step-4') | |
| }; | |
| const prevButtons = { | |
| step2: document.getElementById('prev-step-2'), | |
| step3: document.getElementById('prev-step-3'), | |
| step4: document.getElementById('prev-step-4'), | |
| step5: document.getElementById('prev-step-5') | |
| }; | |
| const pdfUpload = document.getElementById('pdf-upload'); | |
| const browseBtn = document.getElementById('browse-btn'); | |
| const dropzone = document.getElementById('dropzone'); | |
| const pdfPreview = document.querySelector('.pdf-preview'); | |
| const progressBar = document.getElementById('progress-bar'); | |
| const progressPercent = document.getElementById('progress-percent'); | |
| const pagesAnalyzed = document.getElementById('pages-analyzed'); | |
| const keyConcepts = document.getElementById('key-concepts'); | |
| const topicsIdentified = document.getElementById('topics-identified'); | |
| const textbookStructure = document.getElementById('textbook-structure'); | |
| const courseTitle = document.getElementById('course-title'); | |
| const courseDescription = document.getElementById('course-description'); | |
| const previewCourseTitle = document.getElementById('preview-course-title'); | |
| const previewCourseDescription = document.getElementById('preview-course-description'); | |
| const modulesContainer = document.getElementById('modules-container'); | |
| const addModuleBtn = document.getElementById('add-module'); | |
| const previewModulesList = document.getElementById('preview-modules-list'); | |
| const moduleTabs = document.querySelectorAll('.module-tab'); | |
| const moduleContents = document.querySelectorAll('.module-content'); | |
| const finishCourseBtn = document.getElementById('finish-course'); | |
| // Current step | |
| let currentStep = 1; | |
| // Event Listeners | |
| browseBtn.addEventListener('click', () => pdfUpload.click()); | |
| pdfUpload.addEventListener('change', handleFileUpload); | |
| // Drag and drop for PDF | |
| dropzone.addEventListener('dragover', (e) => { | |
| e.preventDefault(); | |
| dropzone.classList.add('border-indigo-500', 'bg-indigo-50'); | |
| }); | |
| dropzone.addEventListener('dragleave', () => { | |
| dropzone.classList.remove('border-indigo-500', 'bg-indigo-50'); | |
| }); | |
| dropzone.addEventListener('drop', (e) => { | |
| e.preventDefault(); | |
| dropzone.classList.remove('border-indigo-500', 'bg-indigo-50'); | |
| if (e.dataTransfer.files.length) { | |
| pdfUpload.files = e.dataTransfer.files; | |
| handleFileUpload({ target: pdfUpload }); | |
| } | |
| }); | |
| // Next step buttons | |
| nextButtons.step1.addEventListener('click', () => navigateToStep(2)); | |
| nextButtons.step2.addEventListener('click', () => navigateToStep(3)); | |
| nextButtons.step3.addEventListener('click', () => navigateToStep(4)); | |
| nextButtons.step4.addEventListener('click', () => navigateToStep(5)); | |
| // Previous step buttons | |
| prevButtons.step2.addEventListener('click', () => navigateToStep(1)); | |
| prevButtons.step3.addEventListener('click', () => navigateToStep(2)); | |
| prevButtons.step4.addEventListener('click', () => navigateToStep(3)); | |
| prevButtons.step5.addEventListener('click', () => navigateToStep(4)); | |
| // Module tabs | |
| moduleTabs.forEach(tab => { | |
| tab.addEventListener('click', () => { | |
| const moduleId = tab.getAttribute('data-module'); | |
| // Update active tab | |
| moduleTabs.forEach(t => t.classList.remove('active', 'bg-indigo-50', 'text-indigo-700')); | |
| tab.classList.add('active', 'bg-indigo-50', 'text-indigo-700'); | |
| // Show corresponding content | |
| moduleContents.forEach(content => { | |
| content.classList.add('hidden'); | |
| if (content.getAttribute('data-module') === moduleId) { | |
| content.classList.remove('hidden'); | |
| } | |
| }); | |
| }); | |
| }); | |
| // Add module button | |
| addModuleBtn.addEventListener('click', () => { | |
| const moduleCount = modulesContainer.children.length + 1; | |
| const newModule = document.createElement('div'); | |
| newModule.className = 'module-card bg-gray-50 border border-gray-200 rounded-lg p-4'; | |
| newModule.innerHTML = ` | |
| <div class="flex items-start justify-between"> | |
| <div class="flex-1"> | |
| <input type="text" class="w-full font-medium text-gray-800 bg-transparent border-b border-transparent focus:border-gray-300 focus:outline-none mb-2" value="Module ${moduleCount}: New Module"> | |
| <textarea class="w-full text-sm text-gray-600 bg-transparent border-b border-transparent focus:border-gray-300 focus:outline-none" rows="2" placeholder="Module description..."></textarea> | |
| </div> | |
| <button class="text-gray-400 hover:text-red-500 ml-2 delete-module"> | |
| <i class="fas fa-trash-alt"></i> | |
| </button> | |
| </div> | |
| `; | |
| modulesContainer.appendChild(newModule); | |
| // Add to preview | |
| const newPreviewItem = document.createElement('li'); | |
| newPreviewItem.className = 'flex items-start'; | |
| newPreviewItem.innerHTML = ` | |
| <span class="flex items-center justify-center w-6 h-6 bg-indigo-100 text-indigo-800 rounded-full text-xs font-medium mr-2 mt-0.5">${moduleCount}</span> | |
| <span>New Module</span> | |
| `; | |
| previewModulesList.appendChild(newPreviewItem); | |
| // Add delete event listener | |
| newModule.querySelector('.delete-module').addEventListener('click', () => { | |
| newModule.remove(); | |
| newPreviewItem.remove(); | |
| // Would need to renumber remaining modules in a real implementation | |
| }); | |
| }); | |
| // Course title/description updates | |
| courseTitle.addEventListener('input', () => { | |
| previewCourseTitle.textContent = courseTitle.value || 'Untitled Course'; | |
| }); | |
| courseDescription.addEventListener('input', () => { | |
| previewCourseDescription.textContent = courseDescription.value || 'No description provided'; | |
| }); | |
| // Finish course button | |
| finishCourseBtn.addEventListener('click', () => { | |
| // In a real app, this would trigger the export/download process | |
| alert('Course creation complete! Your materials are ready for export.'); | |
| }); | |
| // Functions | |
| function handleFileUpload(e) { | |
| const file = e.target.files[0]; | |
| if (file && file.type === 'application/pdf') { | |
| // Simulate PDF preview (in a real app, you'd use a PDF viewer library) | |
| pdfPreview.innerHTML = ` | |
| <div class="text-center"> | |
| <i class="fas fa-file-pdf text-4xl text-red-500 mb-3"></i> | |
| <p class="font-medium">${file.name}</p> | |
| <p class="text-sm text-gray-500 mt-1">${(file.size / (1024 * 1024)).toFixed(2)} MB</p> | |
| </div> | |
| `; | |
| // Enable next button | |
| nextButtons.step1.disabled = false; | |
| nextButtons.step1.classList.remove('opacity-50', 'cursor-not-allowed'); | |
| // Simulate analysis after a delay | |
| setTimeout(() => { | |
| simulateAnalysis(); | |
| }, 1000); | |
| } else { | |
| alert('Please upload a valid PDF file.'); | |
| } | |
| } | |
| function simulateAnalysis() { | |
| let progress = 0; | |
| const analysisInterval = setInterval(() => { | |
| progress += Math.random() * 5; | |
| if (progress > 100) progress = 100; | |
| progressBar.style.width = `${progress}%`; | |
| progressPercent.textContent = `${Math.floor(progress)}%`; | |
| // Update other metrics | |
| pagesAnalyzed.textContent = Math.floor(progress * 2.5); | |
| keyConcepts.textContent = Math.floor(progress * 1.8); | |
| topicsIdentified.textContent = Math.floor(progress * 0.8); | |
| // Populate textbook structure (simulated) | |
| if (progress > 30 && textbookStructure.children.length === 1) { | |
| textbookStructure.innerHTML = ` | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">1</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Introduction to Computing</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">History, Hardware, Software</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1-25</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">2</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Programming Fundamentals</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Variables, Control Structures, Functions</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">26-58</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">3</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Data Structures</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Arrays, Linked Lists, Trees</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">59-92</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">4</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Algorithms</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sorting, Searching, Complexity</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">93-132</td> | |
| </tr> | |
| `; | |
| } | |
| if (progress >= 100) { | |
| clearInterval(analysisInterval); | |
| } | |
| }, 200); | |
| } | |
| function navigateToStep(step) { | |
| // Hide current step | |
| document.querySelector(`#step-${currentStep}`).classList.add('hidden'); | |
| document.querySelector(`.step[data-step="${currentStep}"] div`).classList.remove('bg-indigo-600', 'text-white'); | |
| document.querySelector(`.step[data-step="${currentStep}"] div`).classList.add('bg-gray-300', 'text-gray-600'); | |
| document.querySelector(`.step[data-step="${currentStep}"] span`).classList.remove('text-gray-700'); | |
| document.querySelector(`.step[data-step="${currentStep}"] span`).classList.add('text-gray-500'); | |
| // Update current step | |
| currentStep = step; | |
| // Show new step | |
| document.querySelector(`#step-${currentStep}`).classList.remove('hidden'); | |
| document.querySelector(`.step[data-step="${currentStep}"] div`).classList.remove('bg-gray-300', 'text-gray-600'); | |
| document.querySelector(`.step[data-step="${currentStep}"] div`).classList.add('bg-indigo-600', 'text-white'); | |
| document.querySelector(`.step[data-step="${currentStep}"] span`).classList.remove('text-gray-500'); | |
| document.querySelector(`.step[data-step="${currentStep}"] span`).classList.add('text-gray-700'); | |
| // Update progress line | |
| if (currentStep > 1) { | |
| for (let i = 1; i < currentStep; i++) { | |
| const line = document.querySelector(`.step[data-step="${i}"] div:last-child`); | |
| if (line) line.classList.remove('bg-gray-300'); | |
| if (line) line.classList.add('bg-indigo-600'); | |
| } | |
| } | |
| // Scroll to top | |
| window.scrollTo(0, 0); | |
| } | |
| </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=MrEzzat/course-creator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |