Spaces:
Running
Running
Download index.html from Lolec1/prepmaster: direct link, hf CLI and curl.
- Browser
- Download file 39.8 kB
-
https://huggingface.co/spaces/Lolec1/prepmaster/resolve/main/index.html
- Command line
-
hf download hf://spaces/Lolec1/prepmaster/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Lolec1/prepmaster/resolve/main/index.html
39.8 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PrepMaster - Your Ultimate Test Preparation 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> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#4F46E5', | |
| secondary: '#10B981', | |
| dark: '#1F2937', | |
| light: '#F9FAFB' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #4F46E5 0%, #10B981 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); | |
| } | |
| .upload-area { | |
| border: 2px dashed #D1D5DB; | |
| transition: all 0.3s ease; | |
| } | |
| .upload-area:hover { | |
| border-color: #4F46E5; | |
| background-color: #F5F3FF; | |
| } | |
| .upload-area.dragover { | |
| border-color: #4F46E5; | |
| background-color: #EDE9FE; | |
| } | |
| .quiz-container { | |
| max-height: 80vh; | |
| overflow-y: auto; | |
| } | |
| .quiz-question { | |
| transition: all 0.3s ease; | |
| } | |
| .quiz-question.correct { | |
| background-color: #d1fae5; | |
| border-color: #10B981; | |
| } | |
| .quiz-question.incorrect { | |
| background-color: #fee2e2; | |
| border-color: #ef4444; | |
| } | |
| .flashcard { | |
| perspective: 1000px; | |
| cursor: pointer; | |
| } | |
| .flashcard-inner { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| transition: transform 0.6s; | |
| transform-style: preserve-3d; | |
| } | |
| .flashcard.flipped .flashcard-inner { | |
| transform: rotateY(180deg); | |
| } | |
| .flashcard-front, .flashcard-back { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| backface-visibility: hidden; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 20px; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .flashcard-front { | |
| background-color: #f3f4f6; | |
| } | |
| .flashcard-back { | |
| background-color: #e5e7eb; | |
| transform: rotateY(180deg); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm sticky top-0 z-50"> | |
| <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-book-open text-primary text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-dark">PrepMaster</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> | |
| <a href="#features" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium">Features</a> | |
| <a href="#tests" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium">Tests</a> | |
| <a href="#upload" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium">Upload Notes</a> | |
| <a href="#pricing" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium">Pricing</a> | |
| <button class="bg-primary text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 transition">Sign In</button> | |
| </div> | |
| <div class="-mr-2 flex items-center md:hidden"> | |
| <button type="button" id="mobile-menu-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"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#features" class="text-gray-700 hover:text-primary block px-3 py-2 text-base font-medium">Features</a> | |
| <a href="#tests" class="text-gray-700 hover:text-primary block px-3 py-2 text-base font-medium">Tests</a> | |
| <a href="#upload" class="text-gray-700 hover:text-primary block px-3 py-2 text-base font-medium">Upload Notes</a> | |
| <a href="#pricing" class="text-gray-700 hover:text-primary block px-3 py-2 text-base font-medium">Pricing</a> | |
| <button class="w-full bg-primary text-white px-4 py-2 rounded-md text-base font-medium hover:bg-indigo-700 transition">Sign In</button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20"> | |
| <div class="md:flex md:items-center md:justify-between"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Master Your Tests with Confidence</h1> | |
| <p class="text-xl mb-8">PrepMaster helps you ace standardized tests like SAT, ACT, or create personalized study plans from your own notes.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-white text-primary px-6 py-3 rounded-md font-medium hover:bg-gray-100 transition">Get Started</button> | |
| <button class="border-2 border-white text-white px-6 py-3 rounded-md font-medium hover:bg-white hover:text-primary transition">How It Works</button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://images.unsplash.com/photo-1509062522246-3755977927d7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Student studying" class="rounded-lg shadow-2xl max-w-full h-auto"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-dark mb-4">Why Choose PrepMaster?</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Our platform combines expert test preparation with AI-powered personalized learning from your own materials.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-light p-8 rounded-lg shadow-md transition duration-300 card-hover"> | |
| <div class="w-16 h-16 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-brain text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-dark mb-3">AI-Powered Study</h3> | |
| <p class="text-gray-600">Our smart algorithms analyze your notes to create customized quizzes and study plans tailored to your learning style.</p> | |
| </div> | |
| <div class="bg-light p-8 rounded-lg shadow-md transition duration-300 card-hover"> | |
| <div class="w-16 h-16 bg-secondary bg-opacity-10 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-chart-line text-secondary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-dark mb-3">Progress Tracking</h3> | |
| <p class="text-gray-600">Monitor your improvement with detailed analytics and performance reports to focus on weak areas.</p> | |
| </div> | |
| <div class="bg-light p-8 rounded-lg shadow-md transition duration-300 card-hover"> | |
| <div class="w-16 h-16 bg-indigo-500 bg-opacity-10 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-file-upload text-indigo-500 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-dark mb-3">Note Integration</h3> | |
| <p class="text-gray-600">Upload your class notes, textbooks, or any study materials to create personalized practice tests instantly.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Quiz Section (Hidden by default) --> | |
| <section id="quiz-section" class="py-20 bg-white hidden"> | |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-3xl font-bold text-dark">Practice Quiz</h2> | |
| <div class="flex items-center"> | |
| <span class="text-lg font-semibold mr-4">Score: <span id="quiz-score">0</span>/<span id="quiz-total">0</span></span> | |
| <button id="finish-quiz" class="bg-primary text-white px-4 py-2 rounded-md font-medium hover:bg-indigo-700 transition">Finish Quiz</button> | |
| </div> | |
| </div> | |
| <div id="quiz-container" class="quiz-container"> | |
| <!-- Quiz questions will be dynamically inserted here --> | |
| </div> | |
| <div class="mt-8 text-center"> | |
| <button id="next-question" class="bg-primary text-white px-6 py-3 rounded-md font-medium hover:bg-indigo-700 transition">Next Question</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Flashcards Section (Hidden by default) --> | |
| <section id="flashcards-section" class="py-20 bg-gray-50 hidden"> | |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-bold text-dark mb-8 text-center">Study Flashcards</h2> | |
| <div class="flex justify-center mb-8"> | |
| <div class="flex space-x-4"> | |
| <button id="prev-card" class="bg-primary text-white px-4 py-2 rounded-md font-medium hover:bg-indigo-700 transition"><i class="fas fa-arrow-left"></i> Previous</button> | |
| <button id="next-card" class="bg-primary text-white px-4 py-2 rounded-md font-medium hover:bg-indigo-700 transition">Next <i class="fas fa-arrow-right"></i></button> | |
| </div> | |
| </div> | |
| <div class="flex justify-center"> | |
| <div id="flashcard-container" class="w-full max-w-2xl h-64"> | |
| <!-- Flashcards will be dynamically inserted here --> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Mock Test Section (Hidden by default) --> | |
| <section id="mock-test-section" class="py-20 bg-white hidden"> | |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-3xl font-bold text-dark">Mock Test</h2> | |
| <div class="flex items-center"> | |
| <span class="text-lg font-semibold mr-4">Time: <span id="test-timer">60:00</span></span> | |
| <button id="submit-test" class="bg-primary text-white px-4 py-2 rounded-md font-medium hover:bg-indigo-700 transition">Submit Test</button> | |
| </div> | |
| </div> | |
| <div id="test-container" class="quiz-container"> | |
| <!-- Mock test questions will be dynamically inserted here --> | |
| </div> | |
| <div class="mt-8 text-center"> | |
| <button id="submit-test-final" class="bg-primary text-white px-6 py-3 rounded-md font-medium hover:bg-indigo-700 transition">Submit Test</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Test Preparation Section --> | |
| <section id="tests" class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-dark mb-4">Comprehensive Test Preparation</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">We cover all major standardized tests with up-to-date content and practice materials.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="bg-white p-6 rounded-lg shadow-md transition duration-300 card-hover"> | |
| <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-pencil-alt text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-dark mb-3">SAT Preparation</h3> | |
| <p class="text-gray-600 mb-4">Full-length practice tests, math drills, reading comprehension, and essay writing practice.</p> | |
| <button class="text-primary font-medium hover:underline">Explore SAT Prep</button> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md transition duration-300 card-hover"> | |
| <div class="bg-green-100 w-12 h-12 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-flask text-green-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-dark mb-3">ACT Preparation</h3> | |
| <p class="text-gray-600 mb-4">Science reasoning practice, English grammar exercises, and math problem-solving strategies.</p> | |
| <button class="text-primary font-medium hover:underline">Explore ACT Prep</button> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md transition duration-300 card-hover"> | |
| <div class="bg-purple-100 w-12 h-12 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-graduation-cap text-purple-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-dark mb-3">AP Exam Prep</h3> | |
| <p class="text-gray-600 mb-4">Subject-specific study guides, practice questions, and scoring rubrics for all AP courses.</p> | |
| <button class="text-primary font-medium hover:underline">Explore AP Prep</button> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md transition duration-300 card-hover"> | |
| <div class="bg-yellow-100 w-12 h-12 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-language text-yellow-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-dark mb-3">TOEFL/IELTS</h3> | |
| <p class="text-gray-600 mb-4">Listening comprehension, speaking practice, and writing exercises for English proficiency tests.</p> | |
| <button class="text-primary font-medium hover:underline">Explore Language Prep</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Upload Notes Section --> | |
| <section id="upload" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="md:flex md:items-center md:space-x-12"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h2 class="text-3xl font-bold text-dark mb-6">Transform Your Notes into Practice Tests</h2> | |
| <p class="text-gray-600 mb-8">Upload your class notes, textbooks, or any study materials, and our AI will generate personalized quizzes, flashcards, and study guides tailored to your content.</p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-6 h-6 rounded-full bg-primary flex items-center justify-center"> | |
| <i class="fas fa-check text-white text-xs"></i> | |
| </div> | |
| </div> | |
| <p class="ml-3 text-gray-700">Supports PDFs, Word documents, images, and even handwritten notes</p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-6 h-6 rounded-full bg-primary flex items-center justify-center"> | |
| <i class="fas fa-check text-white text-xs"></i> | |
| </div> | |
| </div> | |
| <p class="ml-3 text-gray-700">Automatically identifies key concepts and creates relevant questions</p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-6 h-6 rounded-full bg-primary flex items-center justify-center"> | |
| <i class="fas fa-check text-white text-xs"></i> | |
| </div> | |
| </div> | |
| <p class="ml-3 text-gray-700">Organizes your materials into structured study sessions</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div id="upload-container" class="upload-area rounded-lg p-8 text-center cursor-pointer"> | |
| <div class="mb-4"> | |
| <i class="fas fa-cloud-upload-alt text-4xl text-gray-400"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-700 mb-2">Drag & drop your files here</h3> | |
| <p class="text-gray-500 mb-4">or</p> | |
| <button id="file-select" class="bg-primary text-white px-4 py-2 rounded-md font-medium hover:bg-indigo-700 transition">Select Files</button> | |
| <p class="text-gray-500 text-sm mt-4">Supports PDF, DOCX, JPG, PNG (Max 50MB)</p> | |
| <input type="file" id="file-input" class="hidden" multiple> | |
| </div> | |
| <div id="file-list" class="mt-4 hidden"> | |
| <h4 class="font-medium text-gray-700 mb-2">Uploaded Files:</h4> | |
| <ul id="file-items" class="space-y-2"></ul> | |
| </div> | |
| <div id="processing-indicator" class="mt-4 hidden"> | |
| <div class="flex items-center justify-center"> | |
| <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div> | |
| <span class="ml-2">Processing your files...</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-dark mb-4">What Students Say</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Thousands of students have improved their test scores with PrepMaster</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-dark">Sarah J.</h4> | |
| <p class="text-gray-500 text-sm">SAT Student</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"PrepMaster helped me increase my SAT score by 280 points! The personalized quizzes from my notes were a game-changer."</p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-green-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-dark">Michael T.</h4> | |
| <p class="text-gray-500 text-sm">ACT Student</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"I was struggling with ACT Science until I uploaded my class notes. The generated practice tests targeted exactly what I needed."</p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-dark">Emily R.</h4> | |
| <p class="text-gray-500 text-sm">AP Biology Student</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"The note upload feature saved me so much time. It created perfect flashcards from my messy biology notes and helped me get a 5 on the AP exam!"</p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section id="pricing" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-dark mb-4">Simple, Transparent Pricing</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Choose the plan that fits your needs. All plans include access to our AI-powered note processing.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <div class="bg-light p-8 rounded-lg border border-gray-200"> | |
| <h3 class="text-xl font-semibold text-dark mb-4">Basic</h3> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold text-dark">$9</span> | |
| <span class="text-gray-500">/month</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-primary mr-2"></i> | |
| <span>Access to 1 standardized test prep</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-primary mr-2"></i> | |
| <span>Upload up to 10 notes per month</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-primary mr-2"></i> | |
| <span>Basic progress tracking</span> | |
| </li> | |
| </ul> | |
| <button class="w-full bg-gray-200 text-dark px-4 py-3 rounded-md font-medium hover:bg-gray-300 transition">Get Started</button> | |
| </div> | |
| <div class="bg-primary text-white p-8 rounded-lg shadow-lg transform scale-105"> | |
| <div class="absolute top-0 right-0 bg-secondary text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">POPULAR</div> | |
| <h3 class="text-xl font-semibold mb-4">Pro</h3> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">$19</span> | |
| <span class="opacity-80">/month</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-white mr-2"></i> | |
| <span>Access to all standardized test preps</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-white mr-2"></i> | |
| <span>Unlimited note uploads</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-white mr-2"></i> | |
| <span>Advanced analytics & reports</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-white mr-2"></i> | |
| <span>Priority support</span> | |
| </li> | |
| </ul> | |
| <button class="w-full bg-white text-primary px-4 py-3 rounded-md font-medium hover:bg-gray-100 transition">Get Started</button> | |
| </div> | |
| <div class="bg-light p-8 rounded-lg border border-gray-200"> | |
| <h3 class="text-xl font-semibold text-dark mb-4">Annual Pro</h3> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold text-dark">$15</span> | |
| <span class="text-gray-500">/month</span> | |
| <div class="text-sm text-gray-500">billed annually ($180)</div> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-primary mr-2"></i> | |
| <span>All Pro features</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-primary mr-2"></i> | |
| <span>Save 20% vs monthly</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-primary mr-2"></i> | |
| <span>Exclusive study resources</span> | |
| </li> | |
| </ul> | |
| <button class="w-full bg-gray-200 text-dark px-4 py-3 rounded-md font-medium hover:bg-gray-300 transition">Get Started</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 bg-primary text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Ready to Transform Your Test Preparation?</h2> | |
| <p class="text-xl mb-8 max-w-3xl mx-auto">Join thousands of students who are acing their exams with PrepMaster's unique combination of expert test prep and personalized AI-powered study tools.</p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-white text-primary px-8 py-3 rounded-md font-medium hover:bg-gray-100 transition">Start Free Trial</button> | |
| <button class="border-2 border-white text-white px-8 py-3 rounded-md font-medium hover:bg-white hover:text-primary transition">Schedule Demo</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-dark text-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">PrepMaster</h3> | |
| <p class="text-gray-400">Your ultimate test preparation platform combining expert content with AI-powered personalized learning.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Quick Links</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Home</a></li> | |
| <li><a href="#features" class="text-gray-400 hover:text-white">Features</a></li> | |
| <li><a href="#tests" class="text-gray-400 hover:text-white">Test Prep</a></li> | |
| <li><a href="#upload" class="text-gray-400 hover:text-white">Upload Notes</a></li> | |
| <li><a href="#pricing" class="text-gray-400 hover:text-white">Pricing</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Support</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Help Center</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Connect With Us</h3> | |
| <div class="flex space-x-4 mb-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a> | |
| </div> | |
| <p class="text-gray-400">Subscribe to our newsletter for study tips and updates.</p> | |
| <div class="mt-4 flex"> | |
| <input type="email" placeholder="Your email" class="px-3 py-2 bg-gray-800 text-white rounded-l-md focus:outline-none focus:ring-1 focus:ring-primary w-full"> | |
| <button class="bg-primary px-4 py-2 rounded-r-md hover:bg-indigo-700 transition"><i class="fas fa-paper-plane"></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> | |
| <p>© 2023 PrepMaster. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Close mobile menu when clicking on a link | |
| document.querySelectorAll('#mobile-menu a').forEach(link => { | |
| link.addEventListener('click', function() { | |
| document.getElementById('mobile-menu').classList.add('hidden'); | |
| }); | |
| }); | |
| // File upload functionality | |
| const uploadArea = document.getElementById('upload-container'); | |
| const fileInput = document.getElementById('file-input'); | |
| const fileSelect = document.getElementById('file-select'); | |
| const fileList = document.getElementById('file-list'); | |
| const fileItems = document.getElementById('file-items'); | |
| // Highlight upload area when dragging files over | |
| ['dragenter', 'dragover'].forEach(eventName => { | |
| uploadArea.addEventListener(eventName, highlight, false); | |
| }); | |
| ['dragleave', 'drop'].forEach(eventName => { | |
| uploadArea.addEventListener(eventName, unhighlight, false); | |
| }); | |
| function highlight(e) { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| uploadArea.classList.add('dragover'); | |
| } | |
| function unhighlight(e) { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| uploadArea.classList.remove('dragover'); | |
| } | |
| // Handle dropped files | |
| uploadArea.addEventListener('drop', handleDrop, false); | |
| fileSelect.addEventListener('click', () => fileInput.click()); | |
| fileInput.addEventListener('change', handleFiles); | |
| function handleDrop(e) { | |
| const dt = e.dataTransfer; | |
| const files = dt.files; | |
| handleFiles({ target: { files } }); | |
| } | |
| function handleFiles(e) { | |
| const files = e.target.files; | |
| if (files.length > 0) { | |
| fileList.classList.remove('hidden'); | |
| fileItems.innerHTML = ''; | |
| for (let i = 0; i < files.length; i++) { | |
| const file = files[i]; | |
| const listItem = document.createElement('li'); | |
| listItem.className = 'flex items-center justify-between bg-gray-100 p-2 rounded'; | |
| const fileInfo = document.createElement('div'); | |
| fileInfo.className = 'flex items-center'; | |
| const icon = document.createElement('i'); | |
| icon.className = getFileIcon(file) + ' mr-2'; | |
| const fileName = document.createElement('span'); | |
| fileName.textContent = file.name; | |
| fileInfo.appendChild(icon); | |
| fileInfo.appendChild(fileName); | |
| const fileSize = document.createElement('span'); | |
| fileSize.className = 'text-gray-500 text-sm'; | |
| fileSize.textContent = formatFileSize(file.size); | |
| listItem.appendChild(fileInfo); | |
| listItem.appendChild(fileSize); | |
| fileItems.appendChild(listItem); | |
| } | |
| // In a real app, you would upload files to server here | |
| // For demo, we just show the file list | |
| } | |
| } | |
| function getFileIcon(file) { | |
| const type = file.type; | |
| if (type.includes('pdf')) return 'fas fa-file-pdf text-red-500'; | |
| if (type.includes('word') || type.includes('document')) return 'fas fa-file-word text-blue-500'; | |
| if (type.includes('image')) return 'fas fa-file-image text-green-500'; | |
| if (type.includes('text')) return 'fas fa-file-alt text-gray-500'; | |
| return 'fas fa-file text-gray-400'; | |
| } | |
| function formatFileSize(bytes) { | |
| if (bytes === 0) return '0 Bytes'; | |
| const k = 1024; | |
| const sizes = ['Bytes', 'KB', 'MB', 'GB']; | |
| const i = Math.floor(Math.log(bytes) / Math.log(k)); | |
| return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; | |
| } | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| // Sign In button functionality | |
| document.querySelectorAll('button.bg-primary.text-white, .text-primary.font-medium').forEach(button => { | |
| if (button.textContent.includes('Sign In') || button.textContent.includes('Get Started')) { | |
| button.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| alert('In a real application, this would open a sign-in modal or redirect to a login page.'); | |
| }); | |
| } | |
| }); | |
| // Get Started buttons functionality | |
| document.querySelectorAll('button').forEach(button => { | |
| if (button.textContent.includes('Get Started') || | |
| (button.classList.contains('bg-white') && button.classList.contains('text-primary')) || | |
| (button.classList.contains('bg-primary') && button.classList.contains('text-white'))) { | |
| button.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| alert('Thank you for your interest! In a real application, this would start the sign-up process.'); | |
| }); | |
| } | |
| }); | |
| </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=Lolec1/prepmaster" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |