From d2653178e98754358a9da92b0a55a51e1de64ede Mon Sep 17 00:00:00 2001 From: inubimambo Date: Thu, 3 Jul 2025 00:17:34 +0800 Subject: [PATCH] first commit --- app.js | 643 ++++++++++++++++++++++++++ index.html | 247 ++++++++++ style.css | 1297 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 2187 insertions(+) create mode 100644 app.js create mode 100644 index.html create mode 100644 style.css diff --git a/app.js b/app.js new file mode 100644 index 0000000..7659ceb --- /dev/null +++ b/app.js @@ -0,0 +1,643 @@ +// EduCat: AI Study Buddy - Main Application Logic + +class EduCatApp { + constructor() { + this.uploadedFiles = []; + this.studySessions = 0; + this.quizzesCompleted = 0; + this.generatedContent = []; + this.currentTab = 'dashboard'; + + this.init(); + } + + init() { + this.setupEventListeners(); + this.updateStats(); + this.updateFileSelects(); + this.showTab('dashboard'); + } + + setupEventListeners() { + // Tab navigation + document.querySelectorAll('.nav__item').forEach(button => { + button.addEventListener('click', (e) => { + const tab = e.target.dataset.tab || 'dashboard'; + this.showTab(tab); + }); + }); + + // File upload - Fixed implementation + const uploadArea = document.getElementById('upload-area'); + const fileInput = document.getElementById('file-input'); + + if (uploadArea && fileInput) { + uploadArea.addEventListener('click', (e) => { + e.preventDefault(); + fileInput.click(); + }); + + uploadArea.addEventListener('dragover', (e) => { + e.preventDefault(); + uploadArea.classList.add('drag-over'); + }); + + uploadArea.addEventListener('dragleave', (e) => { + e.preventDefault(); + uploadArea.classList.remove('drag-over'); + }); + + uploadArea.addEventListener('drop', (e) => { + e.preventDefault(); + uploadArea.classList.remove('drag-over'); + const files = Array.from(e.dataTransfer.files); + this.processFiles(files); + }); + + fileInput.addEventListener('change', (e) => { + const files = Array.from(e.target.files); + this.processFiles(files); + }); + } + + // AI feature buttons + document.querySelectorAll('.feature-card').forEach(card => { + const button = card.querySelector('.btn'); + if (button) { + button.addEventListener('click', (e) => { + e.preventDefault(); + const feature = card.dataset.feature; + this.generateContent(feature); + }); + } + }); + + // Quiz generation + const generateQuizBtn = document.getElementById('generate-quiz'); + if (generateQuizBtn) { + generateQuizBtn.addEventListener('click', (e) => { + e.preventDefault(); + this.generateQuiz(); + }); + } + + // Study planner interactions - Fixed implementation + this.setupPlannerEvents(); + } + + showTab(tabName) { + // Update navigation + document.querySelectorAll('.nav__item').forEach(item => { + item.classList.remove('active'); + if (item.dataset.tab === tabName || (tabName === 'dashboard' && !item.dataset.tab)) { + item.classList.add('active'); + } + }); + + // Update content + document.querySelectorAll('.tab-content').forEach(content => { + content.classList.remove('active'); + }); + + const targetTab = tabName === 'dashboard' ? 'dashboard' : tabName; + const targetContent = document.getElementById(targetTab); + if (targetContent) { + targetContent.classList.add('active'); + } + + this.currentTab = tabName; + + // Special handling for library tab + if (tabName === 'library') { + this.updateLibraryContent(); + } + } + + processFiles(files) { + if (!files || files.length === 0) { + alert('No files selected.'); + return; + } + + const validFiles = files.filter(file => this.isValidFile(file)); + + if (validFiles.length === 0) { + alert('Please select valid file types: PDF, DOCX, PPTX, TXT, or XLSX'); + return; + } + + if (validFiles.length !== files.length) { + alert('Some files were skipped due to invalid file types.'); + } + + this.uploadFiles(validFiles); + } + + isValidFile(file) { + const validExtensions = ['pdf', 'docx', 'pptx', 'txt', 'xlsx']; + const fileName = file.name.toLowerCase(); + return validExtensions.some(ext => fileName.endsWith('.' + ext)); + } + + uploadFiles(files) { + const progressBar = document.getElementById('upload-progress'); + const progressFill = document.getElementById('progress-fill'); + const progressText = document.getElementById('progress-text'); + + if (progressBar) { + progressBar.classList.remove('hidden'); + } + + let progress = 0; + const progressInterval = setInterval(() => { + progress += Math.random() * 20 + 5; + + if (progressFill) { + progressFill.style.width = `${Math.min(progress, 100)}%`; + } + if (progressText) { + progressText.textContent = `Uploading... ${Math.round(Math.min(progress, 100))}%`; + } + + if (progress >= 100) { + clearInterval(progressInterval); + this.completeUpload(files); + } + }, 300); + } + + completeUpload(files) { + setTimeout(() => { + files.forEach(file => { + const fileData = { + id: Date.now() + Math.random(), + name: file.name, + size: this.formatFileSize(file.size || 50000), // Default size for demo + type: this.getFileType(file.name), + uploadDate: new Date().toLocaleDateString(), + content: this.generateMockContent(file.name) + }; + this.uploadedFiles.push(fileData); + }); + + const progressBar = document.getElementById('upload-progress'); + if (progressBar) { + progressBar.classList.add('hidden'); + } + + this.updateFileDisplay(); + this.updateStats(); + this.updateFileSelects(); + this.addActivity(`Uploaded ${files.length} file(s)`); + + // Show success message + alert(`Successfully uploaded ${files.length} file(s)!`); + + // Clear file input + const fileInput = document.getElementById('file-input'); + if (fileInput) { + fileInput.value = ''; + } + }, 500); + } + + getFileType(filename) { + const extension = filename.split('.').pop().toUpperCase(); + return extension; + } + + 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]; + } + + generateMockContent(filename) { + const topics = ['Mathematics', 'Science', 'History', 'Literature', 'Computer Science']; + const randomTopic = topics[Math.floor(Math.random() * topics.length)]; + return { + topic: randomTopic, + keyPoints: [ + `Key concept from ${filename}`, + `Important theorem or principle`, + `Practical application example`, + `Historical context or background` + ] + }; + } + + updateFileDisplay() { + const container = document.getElementById('files-container'); + + if (!container) return; + + if (this.uploadedFiles.length === 0) { + container.innerHTML = '

No files uploaded yet. Upload your first file to get started!

'; + return; + } + + container.innerHTML = this.uploadedFiles.map(file => ` +
+
${file.type}
+
+
${file.name}
+
${file.size} • ${file.uploadDate}
+
+
+ `).join(''); + } + + updateStats() { + const filesCount = document.getElementById('files-count'); + const sessionsCount = document.getElementById('sessions-count'); + const quizzesCount = document.getElementById('quizzes-count'); + + if (filesCount) filesCount.textContent = this.uploadedFiles.length; + if (sessionsCount) sessionsCount.textContent = this.studySessions; + if (quizzesCount) quizzesCount.textContent = this.quizzesCompleted; + } + + updateFileSelects() { + const select = document.getElementById('quiz-file-select'); + if (!select) return; + + select.innerHTML = ''; + + this.uploadedFiles.forEach(file => { + const option = document.createElement('option'); + option.value = file.id; + option.textContent = file.name; + select.appendChild(option); + }); + } + + addActivity(activity) { + const activityList = document.getElementById('activity-list'); + if (!activityList) return; + + const timestamp = new Date().toLocaleTimeString(); + + // Remove empty state if it exists + const emptyState = activityList.querySelector('.empty-state'); + if (emptyState) { + emptyState.remove(); + } + + const activityItem = document.createElement('div'); + activityItem.className = 'activity-item'; + activityItem.innerHTML = ` + 📝 + ${activity} + ${timestamp} + `; + + activityList.insertBefore(activityItem, activityList.firstChild); + + // Keep only last 5 activities + const items = activityList.querySelectorAll('.activity-item'); + if (items.length > 5) { + items[items.length - 1].remove(); + } + } + + generateContent(feature) { + if (this.uploadedFiles.length === 0) { + alert('Please upload some files first before generating content.'); + return; + } + + this.showLoadingModal(`Generating ${feature.replace('-', ' ')}...`); + + setTimeout(() => { + const content = this.createMockContent(feature); + this.generatedContent.push(content); + this.hideLoadingModal(); + this.updateLibraryContent(); + this.addActivity(`Generated ${feature.replace('-', ' ')}`); + + // Switch to library tab to show the generated content + this.showTab('library'); + }, 2000 + Math.random() * 2000); + } + + createMockContent(feature) { + const randomFile = this.uploadedFiles[Math.floor(Math.random() * this.uploadedFiles.length)]; + const timestamp = new Date().toLocaleString(); + + const contentMap = { + 'study-guide': { + title: `Study Guide: ${randomFile.content.topic}`, + type: 'Study Guide', + content: ` +

Chapter Overview

+

This study guide covers the key concepts from ${randomFile.name}.

+ +

Key Topics

+ + +

Study Tips

+ + ` + }, + 'quiz': { + title: `Practice Quiz: ${randomFile.content.topic}`, + type: 'Quiz', + content: ` +
+
+
1. What is the main concept discussed in the uploaded material?
+
+ + +
+
+
+ ` + }, + 'summary': { + title: `Summary: ${randomFile.content.topic}`, + type: 'Summary', + content: ` +

Document: ${randomFile.name}

+

Topic: ${randomFile.content.topic}

+ +

Key Points Summary

+

The main concepts covered include:

+ + +

This material provides a comprehensive overview of ${randomFile.content.topic} with practical applications and theoretical foundations.

+ ` + }, + 'flashcards': { + title: `Flashcards: ${randomFile.content.topic}`, + type: 'Flashcards', + content: ` +
+ ${randomFile.content.keyPoints.map((point, index) => ` +
+
Card ${index + 1}: What is ${point.toLowerCase()}?
+
Answer: ${point}
+
+ `).join('')} +
+ ` + } + }; + + return { + id: Date.now() + Math.random(), + ...contentMap[feature], + sourceFile: randomFile.name, + createdAt: timestamp + }; + } + + updateLibraryContent() { + const container = document.getElementById('generated-content'); + if (!container) return; + + if (this.generatedContent.length === 0) { + container.style.display = 'none'; + return; + } + + container.style.display = 'block'; + container.innerHTML = ` +

Generated Study Materials

+ ${this.generatedContent.map(content => ` +
+
+ ${content.title} + ${content.type} +
+
+

Generated from: ${content.sourceFile} • ${content.createdAt}

+ ${content.content} +
+
+ `).join('')} + `; + } + + generateQuiz() { + const fileSelect = document.getElementById('quiz-file-select'); + const questionsSelect = document.getElementById('quiz-questions'); + + if (!fileSelect || !fileSelect.value) { + alert('Please select a file to generate quiz from.'); + return; + } + + const selectedFile = this.uploadedFiles.find(file => file.id == fileSelect.value); + const numQuestions = parseInt(questionsSelect.value) || 10; + + this.showLoadingModal('Generating quiz questions...'); + + setTimeout(() => { + const quiz = this.createQuizQuestions(selectedFile, numQuestions); + this.displayQuiz(quiz); + this.hideLoadingModal(); + this.addActivity(`Generated ${numQuestions}-question quiz`); + }, 1500 + Math.random() * 1500); + } + + createQuizQuestions(file, numQuestions) { + const questions = []; + const questionTypes = [ + 'What is the main concept of', + 'Which of the following best describes', + 'What is the key principle behind', + 'How does this concept apply to', + 'What is the relationship between' + ]; + + for (let i = 0; i < numQuestions; i++) { + const questionType = questionTypes[Math.floor(Math.random() * questionTypes.length)]; + const keyPoint = file.content.keyPoints[i % file.content.keyPoints.length]; + + questions.push({ + id: i + 1, + question: `${questionType} ${keyPoint.toLowerCase()}?`, + options: [ + keyPoint, + 'Alternative option A', + 'Alternative option B', + 'Alternative option C' + ].sort(() => Math.random() - 0.5), + correct: keyPoint + }); + } + + return { + title: `Quiz: ${file.content.topic}`, + source: file.name, + questions: questions + }; + } + + displayQuiz(quiz) { + const container = document.getElementById('quiz-container'); + if (!container) return; + + container.classList.remove('hidden'); + + container.innerHTML = ` +
+

${quiz.title}

+

Source: ${quiz.source}

+
+
+ ${quiz.questions.map(q => ` +
+
${q.id}. ${q.question}
+
+ ${q.options.map((option, index) => ` + + `).join('')} +
+
+ `).join('')} +
+ + `; + } + + submitQuiz() { + const questions = document.querySelectorAll('.quiz-question'); + let score = 0; + let total = questions.length; + + questions.forEach((question, index) => { + const selected = question.querySelector('input[type="radio"]:checked'); + if (selected) { + // For demo purposes, we'll give a random score + if (Math.random() > 0.3) score++; + } + }); + + this.quizzesCompleted++; + this.updateStats(); + this.addActivity(`Completed quiz - Score: ${score}/${total}`); + + alert(`Quiz completed! Your score: ${score}/${total} (${Math.round((score/total) * 100)}%)`); + } + + setupPlannerEvents() { + // Wait for DOM to be ready and then attach events + setTimeout(() => { + const plannerButtons = document.querySelectorAll('.planner-card .btn--secondary'); + plannerButtons.forEach((btn, index) => { + // Remove existing listeners to prevent duplication + btn.replaceWith(btn.cloneNode(true)); + const newBtn = document.querySelectorAll('.planner-card .btn--secondary')[index]; + + newBtn.addEventListener('click', (e) => { + e.preventDefault(); + e.stopPropagation(); + + if (index === 0) { + this.addStudySession(); + } else if (index === 1) { + this.addStudyGoal(); + } else if (index === 2) { + this.setReminder(); + } + }); + }); + + // Goal checkboxes + const goalCheckboxes = document.querySelectorAll('.goal-item input[type="checkbox"]'); + goalCheckboxes.forEach(checkbox => { + checkbox.addEventListener('change', () => { + if (checkbox.checked) { + this.studySessions++; + this.updateStats(); + this.addActivity('Completed study goal'); + } + }); + }); + }, 100); + } + + addStudySession() { + const time = prompt('Enter study time (e.g., 3:00 PM):'); + const subject = prompt('Enter subject:'); + + if (time && subject) { + this.studySessions++; + this.updateStats(); + this.addActivity(`Scheduled: ${subject} at ${time}`); + alert('Study session added to your schedule!'); + } + } + + addStudyGoal() { + const goal = prompt('Enter your study goal:'); + if (goal) { + this.addActivity(`New goal: ${goal}`); + alert('Study goal added!'); + } + } + + setReminder() { + const reminder = prompt('Enter reminder text:'); + if (reminder) { + this.addActivity(`Set reminder: ${reminder}`); + alert('Reminder set!'); + } + } + + showLoadingModal(title, text = 'Please wait while we analyze your content and generate study materials.') { + const modal = document.getElementById('loading-modal'); + const titleEl = document.getElementById('loading-title'); + const textEl = document.getElementById('loading-text'); + + if (modal) modal.classList.remove('hidden'); + if (titleEl) titleEl.textContent = title; + if (textEl) textEl.textContent = text; + } + + hideLoadingModal() { + const modal = document.getElementById('loading-modal'); + if (modal) modal.classList.add('hidden'); + } +} + +// Initialize the application +let app; + +document.addEventListener('DOMContentLoaded', () => { + app = new EduCatApp(); + + // Add some sample activity for demo + setTimeout(() => { + app.addActivity('Welcome to EduCat!'); + }, 1000); +}); + +// Handle modal click to close +document.addEventListener('click', (e) => { + if (e.target.id === 'loading-modal') { + if (app) app.hideLoadingModal(); + } +}); \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..589e393 --- /dev/null +++ b/index.html @@ -0,0 +1,247 @@ + + + + + + EduCat: AI Study Buddy + + + +
+
+
+ + +
+
+

Welcome to EduCat - Your AI Study Buddy!

+
+
+
+ +
+
+ +
+
+

Transform Your Study Materials with AI

+

Upload your notes, textbooks, and study materials. Let our AI create personalized study guides, quizzes, summaries, and flashcards to boost your learning efficiency.

+
+ +
+
+
📁
+
+ 0 + Files Uploaded +
+
+
+
📚
+
+ 0 + Study Sessions +
+
+
+
🧠
+
+ 0 + Quizzes Completed +
+
+
+ +
+

Recent Activity

+
+
+

No recent activity. Start by uploading your first file!

+
+
+
+
+ + +
+
+

Upload Your Study Materials

+
+
+
📤
+

Drag & Drop Files Here

+

or click to browse files

+ +
+
+ PDF + DOCX + PPTX + TXT + XLSX +
+
+ + + +
+

Uploaded Files

+
+
+

No files uploaded yet. Upload your first file to get started!

+
+
+
+
+
+ + +
+
+

My Study Library

+
+
+
📖
+

Study Guide Generator

+

Convert your files into structured study guides

+ +
+
+
❓
+

Quiz Creator

+

Generate practice questions from your content

+ +
+
+
📝
+

Summary Generator

+

Create concise summaries of long documents

+ +
+
+
🃏
+

Flashcard Maker

+

Extract key concepts into flashcards

+ +
+
+
+ +
+
+
+ + +
+
+

Quiz Generator

+
+
+ + +
+
+ + +
+ +
+ +
+
+ + +
+
+

Study Planner

+
+
+

📅 Study Schedule

+
+
+ 9:00 AM + Mathematics Review +
+
+ 2:00 PM + Science Quiz Practice +
+
+ 7:00 PM + History Flashcards +
+
+ +
+
+

🎯 Study Goals

+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+

⏰ Reminders

+
+
+ Math exam in 3 days + Pending +
+
+ Submit assignment + Overdue +
+
+ +
+
+
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..886e8d2 --- /dev/null +++ b/style.css @@ -0,0 +1,1297 @@ + +:root { + /* Colors */ + --color-background: rgba(252, 252, 249, 1); + --color-surface: rgba(255, 255, 253, 1); + --color-text: rgba(19, 52, 59, 1); + --color-text-secondary: rgba(98, 108, 113, 1); + --color-primary: rgba(33, 128, 141, 1); + --color-primary-hover: rgba(29, 116, 128, 1); + --color-primary-active: rgba(26, 104, 115, 1); + --color-secondary: rgba(94, 82, 64, 0.12); + --color-secondary-hover: rgba(94, 82, 64, 0.2); + --color-secondary-active: rgba(94, 82, 64, 0.25); + --color-border: rgba(94, 82, 64, 0.2); + --color-btn-primary-text: rgba(252, 252, 249, 1); + --color-card-border: rgba(94, 82, 64, 0.12); + --color-card-border-inner: rgba(94, 82, 64, 0.12); + --color-error: rgba(192, 21, 47, 1); + --color-success: rgba(33, 128, 141, 1); + --color-warning: rgba(168, 75, 47, 1); + --color-info: rgba(98, 108, 113, 1); + --color-focus-ring: rgba(33, 128, 141, 0.4); + --color-select-caret: rgba(19, 52, 59, 0.8); + + /* Common style patterns */ + --focus-ring: 0 0 0 3px var(--color-focus-ring); + --focus-outline: 2px solid var(--color-primary); + --status-bg-opacity: 0.15; + --status-border-opacity: 0.25; + --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + + /* RGB versions for opacity control */ + --color-success-rgb: 33, 128, 141; + --color-error-rgb: 192, 21, 47; + --color-warning-rgb: 168, 75, 47; + --color-info-rgb: 98, 108, 113; + + /* Typography */ + --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system, + BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo, + Monaco, Consolas, monospace; + --font-size-xs: 11px; + --font-size-sm: 12px; + --font-size-base: 14px; + --font-size-md: 14px; + --font-size-lg: 16px; + --font-size-xl: 18px; + --font-size-2xl: 20px; + --font-size-3xl: 24px; + --font-size-4xl: 30px; + --font-weight-normal: 400; + --font-weight-medium: 500; + --font-weight-semibold: 550; + --font-weight-bold: 600; + --line-height-tight: 1.2; + --line-height-normal: 1.5; + --letter-spacing-tight: -0.01em; + + /* Spacing */ + --space-0: 0; + --space-1: 1px; + --space-2: 2px; + --space-4: 4px; + --space-6: 6px; + --space-8: 8px; + --space-10: 10px; + --space-12: 12px; + --space-16: 16px; + --space-20: 20px; + --space-24: 24px; + --space-32: 32px; + + /* Border Radius */ + --radius-sm: 6px; + --radius-base: 8px; + --radius-md: 10px; + --radius-lg: 12px; + --radius-full: 9999px; + + /* Shadows */ + --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02); + --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02); + --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04), + 0 2px 4px -1px rgba(0, 0, 0, 0.02); + --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04), + 0 4px 6px -2px rgba(0, 0, 0, 0.02); + --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15), + inset 0 -1px 0 rgba(0, 0, 0, 0.03); + + /* Animation */ + --duration-fast: 150ms; + --duration-normal: 250ms; + --ease-standard: cubic-bezier(0.16, 1, 0.3, 1); + + /* Layout */ + --container-sm: 640px; + --container-md: 768px; + --container-lg: 1024px; + --container-xl: 1280px; +} + +/* Dark mode colors */ +@media (prefers-color-scheme: dark) { + :root { + --color-background: rgba(31, 33, 33, 1); + --color-surface: rgba(38, 40, 40, 1); + --color-text: rgba(245, 245, 245, 1); + --color-text-secondary: rgba(167, 169, 169, 0.7); + --color-primary: rgba(50, 184, 198, 1); + --color-primary-hover: rgba(45, 166, 178, 1); + --color-primary-active: rgba(41, 150, 161, 1); + --color-secondary: rgba(119, 124, 124, 0.15); + --color-secondary-hover: rgba(119, 124, 124, 0.25); + --color-secondary-active: rgba(119, 124, 124, 0.3); + --color-border: rgba(119, 124, 124, 0.3); + --color-error: rgba(255, 84, 89, 1); + --color-success: rgba(50, 184, 198, 1); + --color-warning: rgba(230, 129, 97, 1); + --color-info: rgba(167, 169, 169, 1); + --color-focus-ring: rgba(50, 184, 198, 0.4); + --color-btn-primary-text: rgba(19, 52, 59, 1); + --color-card-border: rgba(119, 124, 124, 0.2); + --color-card-border-inner: rgba(119, 124, 124, 0.15); + --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1), + inset 0 -1px 0 rgba(0, 0, 0, 0.15); + --button-border-secondary: rgba(119, 124, 124, 0.2); + --color-border-secondary: rgba(119, 124, 124, 0.2); + --color-select-caret: rgba(245, 245, 245, 0.8); + + /* Common style patterns - updated for dark mode */ + --focus-ring: 0 0 0 3px var(--color-focus-ring); + --focus-outline: 2px solid var(--color-primary); + --status-bg-opacity: 0.15; + --status-border-opacity: 0.25; + --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + + /* RGB versions for dark mode */ + --color-success-rgb: 50, 184, 198; + --color-error-rgb: 255, 84, 89; + --color-warning-rgb: 230, 129, 97; + --color-info-rgb: 167, 169, 169; + } +} + +/* Data attribute for manual theme switching */ +[data-color-scheme="dark"] { + --color-background: rgba(31, 33, 33, 1); + --color-surface: rgba(38, 40, 40, 1); + --color-text: rgba(245, 245, 245, 1); + --color-text-secondary: rgba(167, 169, 169, 0.7); + --color-primary: rgba(50, 184, 198, 1); + --color-primary-hover: rgba(45, 166, 178, 1); + --color-primary-active: rgba(41, 150, 161, 1); + --color-secondary: rgba(119, 124, 124, 0.15); + --color-secondary-hover: rgba(119, 124, 124, 0.25); + --color-secondary-active: rgba(119, 124, 124, 0.3); + --color-border: rgba(119, 124, 124, 0.3); + --color-error: rgba(255, 84, 89, 1); + --color-success: rgba(50, 184, 198, 1); + --color-warning: rgba(230, 129, 97, 1); + --color-info: rgba(167, 169, 169, 1); + --color-focus-ring: rgba(50, 184, 198, 0.4); + --color-btn-primary-text: rgba(19, 52, 59, 1); + --color-card-border: rgba(119, 124, 124, 0.15); + --color-card-border-inner: rgba(119, 124, 124, 0.15); + --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1), + inset 0 -1px 0 rgba(0, 0, 0, 0.15); + --color-border-secondary: rgba(119, 124, 124, 0.2); + --color-select-caret: rgba(245, 245, 245, 0.8); + + /* Common style patterns - updated for dark mode */ + --focus-ring: 0 0 0 3px var(--color-focus-ring); + --focus-outline: 2px solid var(--color-primary); + --status-bg-opacity: 0.15; + --status-border-opacity: 0.25; + --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + + /* RGB versions for dark mode */ + --color-success-rgb: 50, 184, 198; + --color-error-rgb: 255, 84, 89; + --color-warning-rgb: 230, 129, 97; + --color-info-rgb: 167, 169, 169; +} + +[data-color-scheme="light"] { + --color-background: rgba(252, 252, 249, 1); + --color-surface: rgba(255, 255, 253, 1); + --color-text: rgba(19, 52, 59, 1); + --color-text-secondary: rgba(98, 108, 113, 1); + --color-primary: rgba(33, 128, 141, 1); + --color-primary-hover: rgba(29, 116, 128, 1); + --color-primary-active: rgba(26, 104, 115, 1); + --color-secondary: rgba(94, 82, 64, 0.12); + --color-secondary-hover: rgba(94, 82, 64, 0.2); + --color-secondary-active: rgba(94, 82, 64, 0.25); + --color-border: rgba(94, 82, 64, 0.2); + --color-btn-primary-text: rgba(252, 252, 249, 1); + --color-card-border: rgba(94, 82, 64, 0.12); + --color-card-border-inner: rgba(94, 82, 64, 0.12); + --color-error: rgba(192, 21, 47, 1); + --color-success: rgba(33, 128, 141, 1); + --color-warning: rgba(168, 75, 47, 1); + --color-info: rgba(98, 108, 113, 1); + --color-focus-ring: rgba(33, 128, 141, 0.4); + + /* RGB versions for light mode */ + --color-success-rgb: 33, 128, 141; + --color-error-rgb: 192, 21, 47; + --color-warning-rgb: 168, 75, 47; + --color-info-rgb: 98, 108, 113; +} + +/* Base styles */ +html { + font-size: var(--font-size-base); + font-family: var(--font-family-base); + line-height: var(--line-height-normal); + color: var(--color-text); + background-color: var(--color-background); + -webkit-font-smoothing: antialiased; + box-sizing: border-box; +} + +body { + margin: 0; + padding: 0; +} + +*, +*::before, +*::after { + box-sizing: inherit; +} + +/* Typography */ +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0; + font-weight: var(--font-weight-semibold); + line-height: var(--line-height-tight); + color: var(--color-text); + letter-spacing: var(--letter-spacing-tight); +} + +h1 { + font-size: var(--font-size-4xl); +} +h2 { + font-size: var(--font-size-3xl); +} +h3 { + font-size: var(--font-size-2xl); +} +h4 { + font-size: var(--font-size-xl); +} +h5 { + font-size: var(--font-size-lg); +} +h6 { + font-size: var(--font-size-md); +} + +p { + margin: 0 0 var(--space-16) 0; +} + +a { + color: var(--color-primary); + text-decoration: none; + transition: color var(--duration-fast) var(--ease-standard); +} + +a:hover { + color: var(--color-primary-hover); +} + +code, +pre { + font-family: var(--font-family-mono); + font-size: calc(var(--font-size-base) * 0.95); + background-color: var(--color-secondary); + border-radius: var(--radius-sm); +} + +code { + padding: var(--space-1) var(--space-4); +} + +pre { + padding: var(--space-16); + margin: var(--space-16) 0; + overflow: auto; + border: 1px solid var(--color-border); +} + +pre code { + background: none; + padding: 0; +} + +/* Buttons */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + padding: var(--space-8) var(--space-16); + border-radius: var(--radius-base); + font-size: var(--font-size-base); + font-weight: 500; + line-height: 1.5; + cursor: pointer; + transition: all var(--duration-normal) var(--ease-standard); + border: none; + text-decoration: none; + position: relative; +} + +.btn:focus-visible { + outline: none; + box-shadow: var(--focus-ring); +} + +.btn--primary { + background: var(--color-primary); + color: var(--color-btn-primary-text); +} + +.btn--primary:hover { + background: var(--color-primary-hover); +} + +.btn--primary:active { + background: var(--color-primary-active); +} + +.btn--secondary { + background: var(--color-secondary); + color: var(--color-text); +} + +.btn--secondary:hover { + background: var(--color-secondary-hover); +} + +.btn--secondary:active { + background: var(--color-secondary-active); +} + +.btn--outline { + background: transparent; + border: 1px solid var(--color-border); + color: var(--color-text); +} + +.btn--outline:hover { + background: var(--color-secondary); +} + +.btn--sm { + padding: var(--space-4) var(--space-12); + font-size: var(--font-size-sm); + border-radius: var(--radius-sm); +} + +.btn--lg { + padding: var(--space-10) var(--space-20); + font-size: var(--font-size-lg); + border-radius: var(--radius-md); +} + +.btn--full-width { + width: 100%; +} + +.btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +/* Form elements */ +.form-control { + display: block; + width: 100%; + padding: var(--space-8) var(--space-12); + font-size: var(--font-size-md); + line-height: 1.5; + color: var(--color-text); + background-color: var(--color-surface); + border: 1px solid var(--color-border); + border-radius: var(--radius-base); + transition: border-color var(--duration-fast) var(--ease-standard), + box-shadow var(--duration-fast) var(--ease-standard); +} + +textarea.form-control { + font-family: var(--font-family-base); + font-size: var(--font-size-base); +} + +select.form-control { + padding: var(--space-8) var(--space-12); + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-image: var(--select-caret-light); + background-repeat: no-repeat; + background-position: right var(--space-12) center; + background-size: 16px; + padding-right: var(--space-32); +} + +/* Add a dark mode specific caret */ +@media (prefers-color-scheme: dark) { + select.form-control { + background-image: var(--select-caret-dark); + } +} + +/* Also handle data-color-scheme */ +[data-color-scheme="dark"] select.form-control { + background-image: var(--select-caret-dark); +} + +[data-color-scheme="light"] select.form-control { + background-image: var(--select-caret-light); +} + +.form-control:focus { + border-color: var(--color-primary); + outline: var(--focus-outline); +} + +.form-label { + display: block; + margin-bottom: var(--space-8); + font-weight: var(--font-weight-medium); + font-size: var(--font-size-sm); +} + +.form-group { + margin-bottom: var(--space-16); +} + +/* Card component */ +.card { + background-color: var(--color-surface); + border-radius: var(--radius-lg); + border: 1px solid var(--color-card-border); + box-shadow: var(--shadow-sm); + overflow: hidden; + transition: box-shadow var(--duration-normal) var(--ease-standard); +} + +.card:hover { + box-shadow: var(--shadow-md); +} + +.card__body { + padding: var(--space-16); +} + +.card__header, +.card__footer { + padding: var(--space-16); + border-bottom: 1px solid var(--color-card-border-inner); +} + +/* Status indicators - simplified with CSS variables */ +.status { + display: inline-flex; + align-items: center; + padding: var(--space-6) var(--space-12); + border-radius: var(--radius-full); + font-weight: var(--font-weight-medium); + font-size: var(--font-size-sm); +} + +.status--success { + background-color: rgba( + var(--color-success-rgb, 33, 128, 141), + var(--status-bg-opacity) + ); + color: var(--color-success); + border: 1px solid + rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity)); +} + +.status--error { + background-color: rgba( + var(--color-error-rgb, 192, 21, 47), + var(--status-bg-opacity) + ); + color: var(--color-error); + border: 1px solid + rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity)); +} + +.status--warning { + background-color: rgba( + var(--color-warning-rgb, 168, 75, 47), + var(--status-bg-opacity) + ); + color: var(--color-warning); + border: 1px solid + rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity)); +} + +.status--info { + background-color: rgba( + var(--color-info-rgb, 98, 108, 113), + var(--status-bg-opacity) + ); + color: var(--color-info); + border: 1px solid + rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity)); +} + +/* Container layout */ +.container { + width: 100%; + margin-right: auto; + margin-left: auto; + padding-right: var(--space-16); + padding-left: var(--space-16); +} + +@media (min-width: 640px) { + .container { + max-width: var(--container-sm); + } +} +@media (min-width: 768px) { + .container { + max-width: var(--container-md); + } +} +@media (min-width: 1024px) { + .container { + max-width: var(--container-lg); + } +} +@media (min-width: 1280px) { + .container { + max-width: var(--container-xl); + } +} + +/* Utility classes */ +.flex { + display: flex; +} +.flex-col { + flex-direction: column; +} +.items-center { + align-items: center; +} +.justify-center { + justify-content: center; +} +.justify-between { + justify-content: space-between; +} +.gap-4 { + gap: var(--space-4); +} +.gap-8 { + gap: var(--space-8); +} +.gap-16 { + gap: var(--space-16); +} + +.m-0 { + margin: 0; +} +.mt-8 { + margin-top: var(--space-8); +} +.mb-8 { + margin-bottom: var(--space-8); +} +.mx-8 { + margin-left: var(--space-8); + margin-right: var(--space-8); +} +.my-8 { + margin-top: var(--space-8); + margin-bottom: var(--space-8); +} + +.p-0 { + padding: 0; +} +.py-8 { + padding-top: var(--space-8); + padding-bottom: var(--space-8); +} +.px-8 { + padding-left: var(--space-8); + padding-right: var(--space-8); +} +.py-16 { + padding-top: var(--space-16); + padding-bottom: var(--space-16); +} +.px-16 { + padding-left: var(--space-16); + padding-right: var(--space-16); +} + +.block { + display: block; +} +.hidden { + display: none; +} + +/* Accessibility */ +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + +:focus-visible { + outline: var(--focus-outline); + outline-offset: 2px; +} + +/* Dark mode specifics */ +[data-color-scheme="dark"] .btn--outline { + border: 1px solid var(--color-border-secondary); +} + +@font-face { + font-family: 'FKGroteskNeue'; + src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2') + format('woff2'); +} + +/* Additional styles for EduCat application */ + +/* Header Styles */ +.header { + background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover)); + color: white; + padding: var(--space-16) 0; + box-shadow: var(--shadow-md); +} + +.header__content { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: var(--space-12); +} + +.logo { + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.logo__text { + font-size: var(--font-size-3xl); + font-weight: var(--font-weight-bold); + margin: 0; + color: white; +} + +.logo__subtitle { + font-size: var(--font-size-sm); + opacity: 0.9; + margin-top: var(--space-4); +} + +.nav { + display: flex; + gap: var(--space-8); +} + +.nav__item { + background: rgba(255, 255, 255, 0.15); + color: white; + border: none; + padding: var(--space-8) var(--space-16); + border-radius: var(--radius-base); + cursor: pointer; + transition: all var(--duration-normal) var(--ease-standard); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-medium); +} + +.nav__item:hover { + background: rgba(255, 255, 255, 0.25); +} + +.nav__item.active { + background: white; + color: var(--color-primary); +} + +.welcome-message { + text-align: center; + font-size: var(--font-size-lg); + opacity: 0.95; +} + +/* Main Content */ +.main { + padding: var(--space-32) 0; + min-height: calc(100vh - 200px); +} + +/* Tab Content */ +.tab-content { + display: none; +} + +.tab-content.active { + display: block; +} + +/* Hero Section */ +.hero { + text-align: center; + margin-bottom: var(--space-32); + padding: var(--space-24); + background: linear-gradient(135deg, rgba(33, 128, 141, 0.05), rgba(33, 128, 141, 0.02)); + border-radius: var(--radius-lg); + border: 1px solid var(--color-card-border); +} + +.hero h2 { + font-size: var(--font-size-3xl); + margin-bottom: var(--space-16); + color: var(--color-primary); +} + +.hero p { + font-size: var(--font-size-lg); + color: var(--color-text-secondary); + max-width: 600px; + margin: 0 auto; +} + +/* Stats Grid */ +.stats-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: var(--space-20); + margin-bottom: var(--space-32); +} + +.stat-card { + background: var(--color-surface); + border: 1px solid var(--color-card-border); + border-radius: var(--radius-lg); + padding: var(--space-20); + display: flex; + align-items: center; + gap: var(--space-16); + transition: all var(--duration-normal) var(--ease-standard); +} + +.stat-card:hover { + box-shadow: var(--shadow-md); + transform: translateY(-2px); +} + +.stat-card__icon { + font-size: var(--font-size-3xl); + width: 60px; + height: 60px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(33, 128, 141, 0.1); + border-radius: var(--radius-base); +} + +.stat-card__content { + display: flex; + flex-direction: column; +} + +.stat-card__number { + font-size: var(--font-size-2xl); + font-weight: var(--font-weight-bold); + color: var(--color-primary); +} + +.stat-card__label { + font-size: var(--font-size-sm); + color: var(--color-text-secondary); + margin-top: var(--space-4); +} + +/* Recent Activity */ +.recent-activity { + background: var(--color-surface); + border: 1px solid var(--color-card-border); + border-radius: var(--radius-lg); + padding: var(--space-24); +} + +.recent-activity h3 { + margin-bottom: var(--space-16); + color: var(--color-text); +} + +.activity-list { + display: flex; + flex-direction: column; + gap: var(--space-12); +} + +.activity-item { + display: flex; + align-items: center; + gap: var(--space-12); + padding: var(--space-12); + background: rgba(33, 128, 141, 0.05); + border-radius: var(--radius-base); + border-left: 4px solid var(--color-primary); +} + +.activity-item.empty-state { + justify-content: center; + color: var(--color-text-secondary); + font-style: italic; + border-left: none; +} + +/* Upload Area */ +.upload-section { + max-width: 800px; + margin: 0 auto; +} + +.upload-area { + border: 3px dashed var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-32); + text-align: center; + background: var(--color-surface); + transition: all var(--duration-normal) var(--ease-standard); + cursor: pointer; + position: relative; + margin-bottom: var(--space-24); +} + +.upload-area:hover, +.upload-area.drag-over { + border-color: var(--color-primary); + background: rgba(33, 128, 141, 0.05); +} + +.upload-area__content { + margin-bottom: var(--space-20); +} + +.upload-area__icon { + font-size: 4rem; + margin-bottom: var(--space-16); +} + +.upload-area h3 { + margin-bottom: var(--space-8); + color: var(--color-text); +} + +.upload-area p { + color: var(--color-text-secondary); + margin: 0; +} + +.upload-area input[type="file"] { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + cursor: pointer; +} + +.upload-area__formats { + display: flex; + justify-content: center; + gap: var(--space-8); + flex-wrap: wrap; +} + +.format-badge { + background: var(--color-primary); + color: white; + padding: var(--space-4) var(--space-8); + border-radius: var(--radius-sm); + font-size: var(--font-size-xs); + font-weight: var(--font-weight-medium); +} + +/* Upload Progress */ +.upload-progress { + margin-bottom: var(--space-24); + text-align: center; +} + +.progress-bar { + width: 100%; + height: 8px; + background: var(--color-secondary); + border-radius: var(--radius-full); + overflow: hidden; + margin-bottom: var(--space-8); +} + +.progress-fill { + height: 100%; + background: var(--color-primary); + transition: width var(--duration-normal) var(--ease-standard); + width: 0%; +} + +/* File List */ +.file-list h3 { + margin-bottom: var(--space-16); +} + +.files-container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: var(--space-16); +} + +.file-item { + background: var(--color-surface); + border: 1px solid var(--color-card-border); + border-radius: var(--radius-base); + padding: var(--space-16); + display: flex; + align-items: center; + gap: var(--space-12); + transition: all var(--duration-normal) var(--ease-standard); +} + +.file-item:hover { + box-shadow: var(--shadow-sm); +} + +.file-icon { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-primary); + color: white; + border-radius: var(--radius-base); + font-weight: var(--font-weight-bold); + font-size: var(--font-size-sm); +} + +.file-info { + flex: 1; +} + +.file-name { + font-weight: var(--font-weight-medium); + margin-bottom: var(--space-4); +} + +.file-meta { + font-size: var(--font-size-sm); + color: var(--color-text-secondary); +} + +/* AI Features */ +.ai-features { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: var(--space-20); + margin-bottom: var(--space-32); +} + +.feature-card { + background: var(--color-surface); + border: 1px solid var(--color-card-border); + border-radius: var(--radius-lg); + padding: var(--space-24); + text-align: center; + transition: all var(--duration-normal) var(--ease-standard); + cursor: pointer; +} + +.feature-card:hover { + box-shadow: var(--shadow-md); + transform: translateY(-4px); +} + +.feature-card__icon { + font-size: 3rem; + margin-bottom: var(--space-16); +} + +.feature-card h3 { + margin-bottom: var(--space-12); + color: var(--color-text); +} + +.feature-card p { + color: var(--color-text-secondary); + margin-bottom: var(--space-16); +} + +/* Generated Content */ +.generated-content { + background: var(--color-surface); + border: 1px solid var(--color-card-border); + border-radius: var(--radius-lg); + padding: var(--space-24); + margin-top: var(--space-24); +} + +.content-item { + margin-bottom: var(--space-24); + padding-bottom: var(--space-24); + border-bottom: 1px solid var(--color-card-border-inner); +} + +.content-item:last-child { + margin-bottom: 0; + padding-bottom: 0; + border-bottom: none; +} + +.content-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: var(--space-16); +} + +.content-title { + font-size: var(--font-size-xl); + font-weight: var(--font-weight-semibold); + color: var(--color-primary); +} + +.content-body { + line-height: var(--line-height-normal); +} + +/* Quiz Styles */ +.quiz-options { + background: var(--color-surface); + border: 1px solid var(--color-card-border); + border-radius: var(--radius-lg); + padding: var(--space-24); + margin-bottom: var(--space-24); +} + +.quiz-container { + background: var(--color-surface); + border: 1px solid var(--color-card-border); + border-radius: var(--radius-lg); + padding: var(--space-24); +} + +.quiz-question { + margin-bottom: var(--space-24); + padding: var(--space-20); + background: rgba(33, 128, 141, 0.05); + border-radius: var(--radius-base); + border-left: 4px solid var(--color-primary); +} + +.question-text { + font-weight: var(--font-weight-medium); + margin-bottom: var(--space-16); + font-size: var(--font-size-lg); +} + +.quiz-options-list { + display: flex; + flex-direction: column; + gap: var(--space-8); +} + +.quiz-option { + display: flex; + align-items: center; + gap: var(--space-8); + padding: var(--space-12); + background: var(--color-surface); + border: 1px solid var(--color-border); + border-radius: var(--radius-base); + cursor: pointer; + transition: all var(--duration-fast) var(--ease-standard); +} + +.quiz-option:hover { + background: var(--color-secondary); +} + +.quiz-option input[type="radio"] { + margin: 0; +} + +/* Planner Styles */ +.planner-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + gap: var(--space-24); +} + +.planner-card { + background: var(--color-surface); + border: 1px solid var(--color-card-border); + border-radius: var(--radius-lg); + padding: var(--space-24); +} + +.planner-card h3 { + margin-bottom: var(--space-20); + color: var(--color-text); + display: flex; + align-items: center; + gap: var(--space-8); +} + +.study-schedule, +.goals-list, +.reminders-list { + margin-bottom: var(--space-20); +} + +.schedule-item, +.goal-item, +.reminder-item { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-12); + margin-bottom: var(--space-8); + background: rgba(33, 128, 141, 0.05); + border-radius: var(--radius-base); +} + +.schedule-time { + font-weight: var(--font-weight-medium); + color: var(--color-primary); + font-size: var(--font-size-sm); +} + +.goal-item { + justify-content: flex-start; + gap: var(--space-12); +} + +.goal-item input[type="checkbox"] { + margin: 0; +} + +.reminder-text { + flex: 1; +} + +/* Modal Styles */ +.modal { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; +} + +.modal__content { + background: var(--color-surface); + border-radius: var(--radius-lg); + padding: var(--space-32); + text-align: center; + max-width: 400px; + margin: var(--space-16); +} + +.loading-spinner { + width: 40px; + height: 40px; + border: 4px solid var(--color-secondary); + border-top: 4px solid var(--color-primary); + border-radius: 50%; + animation: spin 1s linear infinite; + margin: 0 auto var(--space-16); +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +/* Utility Classes */ +.hidden { + display: none !important; +} + +.empty-state { + text-align: center; + color: var(--color-text-secondary); + font-style: italic; + padding: var(--space-24); +} + +/* Responsive Design */ +@media (max-width: 768px) { + .header__content { + flex-direction: column; + gap: var(--space-16); + } + + .nav { + flex-wrap: wrap; + justify-content: center; + } + + .nav__item { + font-size: var(--font-size-xs); + padding: var(--space-6) var(--space-12); + } + + .stats-grid { + grid-template-columns: 1fr; + } + + .ai-features { + grid-template-columns: 1fr; + } + + .planner-grid { + grid-template-columns: 1fr; + } + + .files-container { + grid-template-columns: 1fr; + } + + .hero { + padding: var(--space-16); + } + + .hero h2 { + font-size: var(--font-size-2xl); + } + + .upload-area { + padding: var(--space-20); + } +} + +@media (max-width: 480px) { + .format-badge { + font-size: var(--font-size-xs); + padding: var(--space-2) var(--space-6); + } + + .file-item { + flex-direction: column; + text-align: center; + } + + .stat-card { + flex-direction: column; + text-align: center; + } +} \ No newline at end of file