Spaces:
Running
Running
Download index.html from Glainney/studygenius: direct link, hf CLI and curl.
- Browser
- Download file 47.3 kB
-
https://huggingface.co/spaces/Glainney/studygenius/resolve/main/index.html
- Command line
-
hf download hf://spaces/Glainney/studygenius/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Glainney/studygenius/resolve/main/index.html
47.3 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>StudyGenius | Free AI-Powered Learning Assistant</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> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 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); | |
| } | |
| .flashcard { | |
| perspective: 1000px; | |
| } | |
| .flashcard-inner { | |
| transition: transform 0.6s; | |
| transform-style: preserve-3d; | |
| } | |
| .flashcard.flipped .flashcard-inner { | |
| transform: rotateY(180deg); | |
| } | |
| .flashcard-front, .flashcard-back { | |
| backface-visibility: hidden; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .flashcard-back { | |
| transform: rotateY(180deg); | |
| } | |
| .typing-effect::after { | |
| content: "|"; | |
| animation: blink 1s infinite; | |
| } | |
| @keyframes blink { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0; } | |
| } | |
| .file-upload-container { | |
| border: 2px dashed #cbd5e0; | |
| transition: all 0.3s ease; | |
| } | |
| .file-upload-container:hover { | |
| border-color: #667eea; | |
| background-color: #f8fafc; | |
| } | |
| .progress-bar { | |
| transition: width 0.5s ease; | |
| } | |
| .tooltip { | |
| position: relative; | |
| } | |
| .tooltip-text { | |
| visibility: hidden; | |
| width: 200px; | |
| background-color: #4a5568; | |
| color: #fff; | |
| text-align: center; | |
| border-radius: 6px; | |
| padding: 5px; | |
| position: absolute; | |
| z-index: 1; | |
| bottom: 125%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .tooltip:hover .tooltip-text { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| .summary-highlight { | |
| background-color: #e9d8fd; | |
| padding: 2px 4px; | |
| border-radius: 4px; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="gradient-bg text-white shadow-lg sticky top-0 z-50"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <i class="fas fa-brain text-2xl"></i> | |
| <span class="font-bold text-xl">StudyGenius</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#features" class="hover:text-gray-200 transition">Features</a> | |
| <a href="#how-it-works" class="hover:text-gray-200 transition">How It Works</a> | |
| <a href="#demo" class="hover:text-gray-200 transition">Live Demo</a> | |
| <button onclick="showLoginModal()" class="bg-white text-purple-700 px-4 py-2 rounded-full font-medium hover:bg-gray-100 transition"> | |
| Get Started | |
| </button> | |
| </div> | |
| <button class="md:hidden focus:outline-none" onclick="toggleMobileMenu()"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobileMenu" class="hidden md:hidden mt-4"> | |
| <a href="#features" class="block py-2 hover:text-gray-200">Features</a> | |
| <a href="#how-it-works" class="block py-2 hover:text-gray-200">How It Works</a> | |
| <a href="#demo" class="block py-2 hover:text-gray-200">Live Demo</a> | |
| <button onclick="showLoginModal()" class="w-full bg-white text-purple-700 px-4 py-2 rounded-full font-medium hover:bg-gray-100 transition mt-2"> | |
| Get Started | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="gradient-bg text-white py-20"> | |
| <div class="container mx-auto px-6 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6"> | |
| Free AI Study Tools for <span class="typing-effect">Everyone</span> | |
| </h1> | |
| <p class="text-xl mb-8 text-gray-100"> | |
| Upload your study materials and instantly get summaries, flashcards, and practice questions - 100% free with no limitations. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button onclick="showLoginModal()" class="bg-white text-purple-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition flex items-center justify-center"> | |
| <i class="fas fa-rocket mr-2"></i> Start Learning Free | |
| </button> | |
| <button onclick="scrollToDemo()" class="bg-transparent border-2 border-white px-6 py-3 rounded-full font-medium hover:bg-white hover:text-purple-700 transition flex items-center justify-center"> | |
| <i class="fas fa-play-circle mr-2"></i> Try Live Demo | |
| </button> | |
| </div> | |
| <div class="mt-8 flex items-center"> | |
| <div class="flex -space-x-2"> | |
| <img src="https://randomuser.me/api/portraits/women/12.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="Student"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="Student"> | |
| <img src="https://randomuser.me/api/portraits/women/45.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="Student"> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm text-gray-100">Trusted by <span class="font-bold">10,000+</span> students</p> | |
| <div class="flex text-yellow-300"> | |
| <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> | |
| <span class="text-white ml-1">4.8/5</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative w-full max-w-md"> | |
| <div class="absolute -top-10 -left-10 w-32 h-32 bg-purple-300 rounded-full opacity-20"></div> | |
| <div class="absolute -bottom-10 -right-10 w-32 h-32 bg-pink-300 rounded-full opacity-20"></div> | |
| <div class="relative bg-white rounded-xl shadow-2xl overflow-hidden"> | |
| <div class="bg-gray-100 px-6 py-4 border-b flex items-center"> | |
| <div class="flex space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="ml-4 text-sm text-gray-600">StudyGenius AI</div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="bg-blue-50 rounded-lg p-4 mb-4"> | |
| <div class="text-sm text-blue-800"> | |
| <p>Uploaded: Biology_Chapter_4.pdf</p> | |
| <p class="mt-2 font-medium">Here's your AI-generated summary:</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 text-white rounded-lg p-4 text-sm"> | |
| <p class="mb-2">• <span class="summary-highlight">Photosynthesis</span> converts light energy to chemical energy</p> | |
| <p class="mb-2">• Occurs in <span class="summary-highlight">chloroplasts</span> (thylakoid membranes)</p> | |
| <p class="mb-2">• Light-dependent and light-independent reactions</p> | |
| <p>• <span class="summary-highlight">Calvin cycle</span> fixes carbon into organic molecules</p> | |
| </div> | |
| <div class="mt-4 flex space-x-2"> | |
| <button onclick="generateFlashcards()" class="bg-purple-600 text-white px-3 py-1 rounded text-xs hover:bg-purple-700 transition"> | |
| Generate Flashcards | |
| </button> | |
| <button onclick="generateQuiz()" class="bg-gray-200 text-gray-700 px-3 py-1 rounded text-xs hover:bg-gray-300 transition"> | |
| Create Quiz | |
| </button> | |
| <button onclick="showMoreOptions()" class="bg-gray-200 text-gray-700 px-3 py-1 rounded text-xs hover:bg-gray-300 transition"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Premium Features, Zero Cost</h2> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto"> | |
| Everything you need to study smarter, not harder - completely free with no hidden limitations. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-10"> | |
| <!-- Feature 1 --> | |
| <div class="bg-white rounded-xl shadow-lg p-8 card-hover transition duration-300"> | |
| <div class="text-purple-600 mb-6"> | |
| <i class="fas fa-file-alt text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Smart Summaries</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Upload any document and get concise, easy-to-understand summaries with key concepts highlighted. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mt-4"> | |
| <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">PDF</span> | |
| <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">PPT</span> | |
| <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">DOCX</span> | |
| <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">TXT</span> | |
| </div> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="bg-white rounded-xl shadow-lg p-8 card-hover transition duration-300"> | |
| <div class="text-blue-600 mb-6"> | |
| <i class="fas fa-layer-group text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Flashcard Generator</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Automatically create flashcards with spaced repetition scheduling for optimal retention. | |
| </p> | |
| <div class="mt-4"> | |
| <div class="flex items-center text-sm text-blue-600"> | |
| <i class="fas fa-sync-alt mr-2"></i> | |
| <span>Spaced repetition algorithm included</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="bg-white rounded-xl shadow-lg p-8 card-hover transition duration-300"> | |
| <div class="text-green-600 mb-6"> | |
| <i class="fas fa-question-circle text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Practice Questions</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Get customized quizzes with explanations to test your understanding of the material. | |
| </p> | |
| <div class="mt-4"> | |
| <div class="flex items-center text-sm text-green-600"> | |
| <i class="fas fa-chart-line mr-2"></i> | |
| <span>Performance tracking dashboard</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Additional Features --> | |
| <div class="grid md:grid-cols-3 gap-10 mt-10"> | |
| <!-- Feature 4 --> | |
| <div class="bg-white rounded-xl shadow-lg p-8 card-hover transition duration-300"> | |
| <div class="text-yellow-600 mb-6"> | |
| <i class="fas fa-infinity text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">No Limits</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Unlimited document uploads, flashcards, and quizzes - no paywalls, ever. | |
| </p> | |
| <div class="mt-4"> | |
| <div class="flex items-center text-sm text-yellow-600"> | |
| <i class="fas fa-unlock mr-2"></i> | |
| <span>100% free with no hidden costs</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="bg-white rounded-xl shadow-lg p-8 card-hover transition duration-300"> | |
| <div class="text-red-600 mb-6"> | |
| <i class="fas fa-mobile-alt text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Mobile Friendly</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Study on the go with our fully responsive design that works on any device. | |
| </p> | |
| <div class="mt-4"> | |
| <div class="flex items-center text-sm text-red-600"> | |
| <i class="fas fa-sync mr-2"></i> | |
| <span>Sync across all your devices</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="bg-white rounded-xl shadow-lg p-8 card-hover transition duration-300"> | |
| <div class="text-indigo-600 mb-6"> | |
| <i class="fas fa-share-alt text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Collaborate</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Share study materials with classmates and study together in real-time. | |
| </p> | |
| <div class="mt-4"> | |
| <div class="flex items-center text-sm text-indigo-600"> | |
| <i class="fas fa-users mr-2"></i> | |
| <span>Group study rooms available</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works Section --> | |
| <section id="how-it-works" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">How StudyGenius Works</h2> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto"> | |
| Three simple steps to transform your study materials into powerful learning tools. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Step 1 --> | |
| <div class="flex flex-col items-center text-center"> | |
| <div class="bg-purple-100 w-20 h-20 rounded-full flex items-center justify-center mb-6"> | |
| <span class="text-purple-600 font-bold text-2xl">1</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Upload Your Materials</h3> | |
| <p class="text-gray-600"> | |
| Drag and drop your PDFs, PowerPoints, Word docs, or even paste text directly. | |
| </p> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="flex flex-col items-center text-center"> | |
| <div class="bg-blue-100 w-20 h-20 rounded-full flex items-center justify-center mb-6"> | |
| <span class="text-blue-600 font-bold text-2xl">2</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">AI Processes Content</h3> | |
| <p class="text-gray-600"> | |
| Our advanced algorithms analyze and extract key information from your documents. | |
| </p> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="flex flex-col items-center text-center"> | |
| <div class="bg-green-100 w-20 h-20 rounded-full flex items-center justify-center mb-6"> | |
| <span class="text-green-600 font-bold text-2xl">3</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Get Learning Resources</h3> | |
| <p class="text-gray-600"> | |
| Instantly receive summaries, flashcards, and quizzes tailored to your material. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Live Demo Section --> | |
| <section id="demo" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Try It Yourself</h2> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto"> | |
| Experience the power of StudyGenius with our interactive demo. | |
| </p> | |
| </div> | |
| <div class="bg-gray-50 rounded-xl shadow-lg p-8 max-w-4xl mx-auto"> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <!-- File Upload --> | |
| <div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4">Upload Your Study Material</h3> | |
| <div id="uploadContainer" class="file-upload-container rounded-lg p-8 text-center cursor-pointer mb-4" onclick="document.getElementById('fileInput').click()"> | |
| <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-4"></i> | |
| <p class="text-gray-600 mb-2">Drag & drop files here or click to browse</p> | |
| <p class="text-xs text-gray-500">Supports PDF, DOCX, PPT, TXT (Max 50MB)</p> | |
| <input type="file" id="fileInput" class="hidden" accept=".pdf,.docx,.ppt,.pptx,.txt" onchange="handleFileUpload(event)"> | |
| </div> | |
| <div id="uploadProgress" class="hidden"> | |
| <div class="flex justify-between text-sm text-gray-600 mb-1"> | |
| <span id="fileName">Processing...</span> | |
| <span id="fileSize">0%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div id="progressBar" class="progress-bar bg-purple-600 h-2.5 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Demo Output --> | |
| <div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4">AI-Generated Results</h3> | |
| <div id="demoOutput" class="bg-white border rounded-lg p-4 h-64 overflow-y-auto"> | |
| <div class="flex flex-col items-center justify-center h-full text-gray-400"> | |
| <i class="fas fa-file-alt text-4xl mb-4"></i> | |
| <p>Upload a file to see AI-generated study materials</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex space-x-2"> | |
| <button id="summaryBtn" onclick="generateSummary()" class="bg-purple-600 text-white px-4 py-2 rounded text-sm hover:bg-purple-700 transition disabled:opacity-50" disabled> | |
| <i class="fas fa-file-alt mr-2"></i> Summary | |
| </button> | |
| <button id="flashcardsBtn" onclick="generateFlashcardsDemo()" class="bg-blue-600 text-white px-4 py-2 rounded text-sm hover:bg-blue-700 transition disabled:opacity-50" disabled> | |
| <i class="fas fa-layer-group mr-2"></i> Flashcards | |
| </button> | |
| <button id="quizBtn" onclick="generateQuizDemo()" class="bg-green-600 text-white px-4 py-2 rounded text-sm hover:bg-green-700 transition disabled:opacity-50" disabled> | |
| <i class="fas fa-question-circle mr-2"></i> Quiz | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Flashcard Demo --> | |
| <div id="flashcardDemo" class="hidden mt-12"> | |
| <h3 class="text-xl font-bold text-center text-gray-800 mb-6">Your Flashcards</h3> | |
| <div class="grid md:grid-cols-3 gap-4"> | |
| <div class="flashcard w-full h-48 cursor-pointer" onclick="this.classList.toggle('flipped')"> | |
| <div class="flashcard-inner w-full h-full"> | |
| <div class="flashcard-front bg-white border-2 border-purple-200 rounded-xl p-6 flex items-center justify-center"> | |
| <h4 class="text-xl font-bold text-gray-800 text-center">What is the powerhouse of the cell?</h4> | |
| </div> | |
| <div class="flashcard-back bg-purple-600 text-white rounded-xl p-6 flex items-center justify-center"> | |
| <h4 class="text-xl font-bold text-center">Mitochondria</h4> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flashcard w-full h-48 cursor-pointer" onclick="this.classList.toggle('flipped')"> | |
| <div class="flashcard-inner w-full h-full"> | |
| <div class="flashcard-front bg-white border-2 border-blue-200 rounded-xl p-6 flex items-center justify-center"> | |
| <h4 class="text-xl font-bold text-gray-800 text-center">What process converts light energy to chemical energy?</h4> | |
| </div> | |
| <div class="flashcard-back bg-blue-600 text-white rounded-xl p-6 flex items-center justify-center"> | |
| <h4 class="text-xl font-bold text-center">Photosynthesis</h4> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flashcard w-full h-48 cursor-pointer" onclick="this.classList.toggle('flipped')"> | |
| <div class="flashcard-inner w-full h-full"> | |
| <div class="flashcard-front bg-white border-2 border-green-200 rounded-xl p-6 flex items-center justify-center"> | |
| <h4 class="text-xl font-bold text-gray-800 text-center">Where does photosynthesis occur in plant cells?</h4> | |
| </div> | |
| <div class="flashcard-back bg-green-600 text-white rounded-xl p-6 flex items-center justify-center"> | |
| <h4 class="text-xl font-bold text-center">Chloroplasts</h4> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-6"> | |
| <button onclick="exportFlashcards()" class="bg-purple-600 text-white px-6 py-2 rounded-full hover:bg-purple-700 transition"> | |
| <i class="fas fa-download mr-2"></i> Export Flashcards | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Quiz Demo --> | |
| <div id="quizDemo" class="hidden mt-12"> | |
| <h3 class="text-xl font-bold text-center text-gray-800 mb-6">Practice Quiz</h3> | |
| <div class="bg-white border rounded-lg p-6 max-w-2xl mx-auto"> | |
| <div class="mb-6"> | |
| <p class="font-medium text-gray-800 mb-2">Question 1 of 5</p> | |
| <p class="text-lg mb-4">What is the primary function of the mitochondria?</p> | |
| <div class="space-y-3"> | |
| <div class="flex items-center"> | |
| <input type="radio" id="q1a" name="q1" class="mr-3"> | |
| <label for="q1a" class="cursor-pointer">Protein synthesis</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" id="q1b" name="q1" class="mr-3"> | |
| <label for="q1b" class="cursor-pointer">ATP production</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" id="q1c" name="q1" class="mr-3"> | |
| <label for="q1c" class="cursor-pointer">DNA replication</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" id="q1d" name="q1" class="mr-3"> | |
| <label for="q1d" class="cursor-pointer">Waste removal</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button class="text-purple-600 font-medium hover:text-purple-800"> | |
| <i class="fas fa-arrow-left mr-2"></i> Previous | |
| </button> | |
| <button onclick="showQuizResults()" class="bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700 transition"> | |
| Submit Answers | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section id="testimonials" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Trusted by Students Worldwide</h2> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto"> | |
| Join thousands of students who are studying smarter with StudyGenius. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white rounded-xl shadow-lg p-8"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/32.jpg" class="w-12 h-12 rounded-full" alt="Student"> | |
| <div class="ml-4"> | |
| <h4 class="font-bold">Sarah K.</h4> | |
| <p class="text-gray-500 text-sm">High School Senior</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-4"> | |
| "StudyGenius has completely transformed how I study. I went from C's to A's in biology thanks to the amazing flashcards and summaries!" | |
| </p> | |
| <div class="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> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white rounded-xl shadow-lg p-8"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/men/45.jpg" class="w-12 h-12 rounded-full" alt="Student"> | |
| <div class="ml-4"> | |
| <h4 class="font-bold">Michael T.</h4> | |
| <p class="text-gray-500 text-sm">College Junior</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-4"> | |
| "The AI summaries save me hours each week. I can review a 50-page chapter in minutes by focusing on the key points it identifies." | |
| </p> | |
| <div class="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> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-white rounded-xl shadow-lg p-8"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-12 h-12 rounded-full" alt="Student"> | |
| <div class="ml-4"> | |
| <h4 class="font-bold">Priya M.</h4> | |
| <p class="text-gray-500 text-sm">Medical Student</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-4"> | |
| "I've tried every study app out there, but none compare to StudyGenius. The quizzes are so accurate to what appears on exams." | |
| </p> | |
| <div class="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> | |
| <!-- CTA Section --> | |
| <section class="gradient-bg text-white py-16"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Study Habits?</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto text-gray-100"> | |
| Join thousands of students who are acing their classes with 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 onclick="showLoginModal()" class="bg-white text-purple-700 px-8 py-3 rounded-full font-medium hover:bg-gray-100 transition flex items-center justify-center mx-auto sm:mx-0"> | |
| <i class="fas fa-user-graduate mr-2"></i> Sign Up Free | |
| </button> | |
| <button onclick="scrollToDemo()" class="bg-transparent border-2 border-white px-8 py-3 rounded-full font-medium hover:bg-white hover:text-purple-700 transition flex items-center justify-center mx-auto sm:mx-0"> | |
| <i class="fas fa-book-open mr-2"></i> Try Demo First | |
| </button> | |
| </div> | |
| <p class="mt-6 text-gray-200 text-sm"> | |
| No credit card required • No hidden fees • Cancel anytime | |
| </p> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i class="fas fa-brain text-2xl text-purple-400"></i> | |
| <span class="font-bold text-xl">StudyGenius</span> | |
| </div> | |
| <p class="text-gray-400"> | |
| AI-powered study tools to help students learn more effectively. | |
| </p> | |
| <div class="flex space-x-4 mt-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-instagram text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-facebook text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-4">Features</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Smart Summaries</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Flashcard Generator</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Practice Questions</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Study Analytics</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Study Tips</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Tutorials</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> | |
| <p>© 2023 StudyGenius. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Login Modal --> | |
| <div id="loginModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-xl shadow-2xl p-8 w-full max-w-md"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-2xl font-bold text-gray-800">Get Started Free</h3> | |
| <button onclick="hideLoginModal()" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent" placeholder="your@email.com"> | |
| </div> | |
| <div> | |
| <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label> | |
| <input type="password" id="password" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent" placeholder="Create a password"> | |
| </div> | |
| <button onclick="signUp()" class="w-full bg-purple-600 text-white py-3 rounded-lg font-medium hover:bg-purple-700 transition"> | |
| Create Free Account | |
| </button> | |
| <div class="text-center text-sm text-gray-500"> | |
| Already have an account? <button onclick="showLoginForm()" class="text-purple-600 hover:text-purple-800">Log in</button> | |
| </div> | |
| <div class="text-center text-xs text-gray-400 mt-4"> | |
| By signing up, you agree to our <a href="#" class="text-purple-600 hover:text-purple-800">Terms</a> and <a href="#" class="text-purple-600 hover:text-purple-800">Privacy Policy</a>. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Simple typing effect for the hero section | |
| const words = ["Everyone", "Students", "Teachers", "You"]; | |
| let wordIndex = 0; | |
| let charIndex = 0; | |
| let isDeleting = false; | |
| const typingElement = document.querySelector('.typing-effect'); | |
| function typeEffect() { | |
| const currentWord = words[wordIndex]; | |
| const currentChar = currentWord.substring(0, charIndex); | |
| typingElement.innerHTML = currentWord.substring(0, charIndex) + '<span class="typing-cursor">|</span>'; | |
| if (!isDeleting && charIndex < currentWord.length) { | |
| charIndex++; | |
| setTimeout(typeEffect, 100); | |
| } else if (isDeleting && charIndex > 0) { | |
| charIndex--; | |
| setTimeout(typeEffect, 50); | |
| } else { | |
| isDeleting = !isDeleting; | |
| wordIndex = (!isDeleting) ? (wordIndex + 1) % words.length : wordIndex; | |
| setTimeout(typeEffect, 1000); | |
| } | |
| } | |
| // Modal functions | |
| function showLoginModal() { | |
| document.getElementById('loginModal').classList.remove('hidden'); | |
| } | |
| function hideLoginModal() { | |
| document.getElementById('loginModal').classList.add('hidden'); | |
| } | |
| function showLoginForm() { | |
| // Would switch to login form in a real implementation | |
| alert("Login form would appear here"); | |
| } | |
| function signUp() { | |
| // Would handle signup in a real implementation | |
| alert("Account creation would be processed here"); | |
| hideLoginModal(); | |
| } | |
| // Mobile menu toggle | |
| function toggleMobileMenu() { | |
| const menu = document.getElementById('mobileMenu'); | |
| menu.classList.toggle('hidden'); | |
| } | |
| // Scroll to demo section | |
| function scrollToDemo() { | |
| document.getElementById('demo').scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| } | |
| // File upload simulation | |
| function handleFileUpload(event) { | |
| const file = event.target.files[0]; | |
| if (!file) return; | |
| const uploadContainer = document.getElementById('uploadContainer'); | |
| const uploadProgress = document.getElementById('uploadProgress'); | |
| const fileName = document.getElementById('fileName'); | |
| const fileSize = document.getElementById('fileSize'); | |
| const progressBar = document.getElementById('progressBar'); | |
| uploadContainer.classList.add('hidden'); | |
| uploadProgress.classList.remove('hidden'); | |
| fileName.textContent = file.name; | |
| // Simulate upload progress | |
| let progress = 0; | |
| const interval = setInterval(() => { | |
| progress += Math.random() * 10; | |
| if (progress > 100) progress = 100; | |
| progressBar.style.width = `${progress}%`; | |
| fileSize.textContent = `${Math.round(progress)}%`; | |
| if (progress === 100) { | |
| clearInterval(interval); | |
| setTimeout(() => { | |
| fileProcessed(); | |
| }, 500); | |
| } | |
| }, 200); | |
| } | |
| function fileProcessed() { | |
| const demoOutput = document.getElementById('demoOutput'); | |
| const summaryBtn = document.getElementById('summaryBtn'); | |
| const flashcardsBtn = document.getElementById('flashcardsBtn'); | |
| const quizBtn = document.getElementById('quizBtn'); | |
| demoOutput.innerHTML = ` | |
| <div class="bg-blue-50 rounded-lg p-4 mb-4"> | |
| <div class="text-sm text-blue-800"> | |
| <p>Uploaded: Biology_Chapter_4.pdf</p> | |
| <p class="mt-2 font-medium">Document processed successfully!</p> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-700">Select an option below to generate study materials:</p> | |
| `; | |
| summaryBtn.disabled = false; | |
| flashcardsBtn.disabled = false; | |
| quizBtn.disabled = false; | |
| } | |
| function generateSummary() { | |
| const demoOutput = document.getElementById('demoOutput'); | |
| demoOutput.innerHTML = ` | |
| <div class="bg-blue-50 rounded-lg p-4 mb-4"> | |
| <div class="text-sm text-blue-800"> | |
| <p>AI-Generated Summary</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg p-4 text-sm"> | |
| <p class="mb-2"><span class="summary-highlight">Photosynthesis</span> is the process by which green plants and some other organisms use sunlight to synthesize foods from carbon dioxide and water.</p> | |
| <p class="mb-2">Key points:</p> | |
| <ul class="list-disc pl-5 space-y-1"> | |
| <li>Occurs in the <span class="summary-highlight">chloroplasts</span> of plant cells</li> | |
| <li>Two main stages: light-dependent and light-independent reactions</li> | |
| <li><span class="summary-highlight">Chlorophyll</span> is the primary pigment that absorbs light energy</li> | |
| <li>Produces oxygen as a byproduct</li> | |
| <li>The <span class="summary-highlight">Calvin cycle</span> fixes carbon into organic molecules</li> | |
| </ul> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <span class="text-xs text-gray-500">Generated just now</span> | |
| <button class="text-purple-600 text-sm font-medium hover:text-purple-800"> | |
| <i class="fas fa-download mr-1"></i> Save Summary | |
| </button> | |
| </div> | |
| `; | |
| } | |
| function generateFlashcardsDemo() { | |
| document.getElementById('demoOutput').classList.add('hidden'); | |
| document.getElementById('flashcardDemo').classList.remove('hidden'); | |
| document.getElementById('quizDemo').classList.add('hidden'); | |
| } | |
| function generateQuizDemo() { | |
| document.getElementById('demoOutput').classList.add('hidden'); | |
| document.getElementById('flashcardDemo').classList.add('hidden'); | |
| document.getElementById('quizDemo').classList.remove('hidden'); | |
| } | |
| function exportFlashcards() { | |
| alert("Flashcards would be exported in this full version"); | |
| } | |
| function showQuizResults() { | |
| alert("Quiz results would be shown in this full version"); | |
| } | |
| function showMoreOptions() { | |
| alert("Additional options would appear here"); | |
| } | |
| // Start the typing effect | |
| document.addEventListener('DOMContentLoaded', () => { | |
| setTimeout(typeEffect, 1000); | |
| // 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' | |
| }); | |
| }); | |
| }); | |
| }); | |
| </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=Glainney/studygenius" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |