247 lines
12 KiB
HTML
247 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>EduCat: AI Study Buddy</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<header class="header">
|
|
<div class="container">
|
|
<div class="header__content">
|
|
<div class="logo">
|
|
<h1 class="logo__text">🐱 EduCat</h1>
|
|
<span class="logo__subtitle">AI Study Buddy</span>
|
|
</div>
|
|
<nav class="nav">
|
|
<button class="nav__item" data-tab="upload">Upload Files</button>
|
|
<button class="nav__item" data-tab="library">My Notes</button>
|
|
<button class="nav__item" data-tab="quiz">Quiz Generator</button>
|
|
<button class="nav__item" data-tab="planner">Study Planner</button>
|
|
</nav>
|
|
</div>
|
|
<div class="welcome-message">
|
|
<p>Welcome to EduCat - Your AI Study Buddy!</p>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="main">
|
|
<div class="container">
|
|
<!-- Dashboard Tab -->
|
|
<section id="dashboard" class="tab-content active">
|
|
<div class="hero">
|
|
<h2>Transform Your Study Materials with AI</h2>
|
|
<p>Upload your notes, textbooks, and study materials. Let our AI create personalized study guides, quizzes, summaries, and flashcards to boost your learning efficiency.</p>
|
|
</div>
|
|
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-card__icon">📁</div>
|
|
<div class="stat-card__content">
|
|
<span class="stat-card__number" id="files-count">0</span>
|
|
<span class="stat-card__label">Files Uploaded</span>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-card__icon">📚</div>
|
|
<div class="stat-card__content">
|
|
<span class="stat-card__number" id="sessions-count">0</span>
|
|
<span class="stat-card__label">Study Sessions</span>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-card__icon">🧠</div>
|
|
<div class="stat-card__content">
|
|
<span class="stat-card__number" id="quizzes-count">0</span>
|
|
<span class="stat-card__label">Quizzes Completed</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="recent-activity">
|
|
<h3>Recent Activity</h3>
|
|
<div id="activity-list" class="activity-list">
|
|
<div class="activity-item empty-state">
|
|
<p>No recent activity. Start by uploading your first file!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Upload Tab -->
|
|
<section id="upload" class="tab-content">
|
|
<div class="upload-section">
|
|
<h2>Upload Your Study Materials</h2>
|
|
<div class="upload-area" id="upload-area">
|
|
<div class="upload-area__content">
|
|
<div class="upload-area__icon">📤</div>
|
|
<h3>Drag & Drop Files Here</h3>
|
|
<p>or click to browse files</p>
|
|
<input type="file" id="file-input" multiple accept=".pdf,.docx,.pptx,.txt,.xlsx">
|
|
</div>
|
|
<div class="upload-area__formats">
|
|
<span class="format-badge">PDF</span>
|
|
<span class="format-badge">DOCX</span>
|
|
<span class="format-badge">PPTX</span>
|
|
<span class="format-badge">TXT</span>
|
|
<span class="format-badge">XLSX</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="upload-progress" class="upload-progress hidden">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="progress-fill"></div>
|
|
</div>
|
|
<span id="progress-text">Uploading...</span>
|
|
</div>
|
|
|
|
<div id="file-list" class="file-list">
|
|
<h3>Uploaded Files</h3>
|
|
<div id="files-container" class="files-container">
|
|
<div class="empty-state">
|
|
<p>No files uploaded yet. Upload your first file to get started!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Library Tab -->
|
|
<section id="library" class="tab-content">
|
|
<div class="library-section">
|
|
<h2>My Study Library</h2>
|
|
<div class="ai-features">
|
|
<div class="feature-card" data-feature="study-guide">
|
|
<div class="feature-card__icon">📖</div>
|
|
<h3>Study Guide Generator</h3>
|
|
<p>Convert your files into structured study guides</p>
|
|
<button class="btn btn--primary">Generate Study Guide</button>
|
|
</div>
|
|
<div class="feature-card" data-feature="quiz">
|
|
<div class="feature-card__icon">❓</div>
|
|
<h3>Quiz Creator</h3>
|
|
<p>Generate practice questions from your content</p>
|
|
<button class="btn btn--primary">Create Quiz</button>
|
|
</div>
|
|
<div class="feature-card" data-feature="summary">
|
|
<div class="feature-card__icon">📝</div>
|
|
<h3>Summary Generator</h3>
|
|
<p>Create concise summaries of long documents</p>
|
|
<button class="btn btn--primary">Generate Summary</button>
|
|
</div>
|
|
<div class="feature-card" data-feature="flashcards">
|
|
<div class="feature-card__icon">🃏</div>
|
|
<h3>Flashcard Maker</h3>
|
|
<p>Extract key concepts into flashcards</p>
|
|
<button class="btn btn--primary">Create Flashcards</button>
|
|
</div>
|
|
</div>
|
|
<div id="generated-content" class="generated-content">
|
|
<!-- Generated content will appear here -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Quiz Tab -->
|
|
<section id="quiz" class="tab-content">
|
|
<div class="quiz-section">
|
|
<h2>Quiz Generator</h2>
|
|
<div class="quiz-options">
|
|
<div class="form-group">
|
|
<label class="form-label">Select Study Material</label>
|
|
<select id="quiz-file-select" class="form-control">
|
|
<option value="">Select a file to create quiz from</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Number of Questions</label>
|
|
<select class="form-control" id="quiz-questions">
|
|
<option value="5">5 Questions</option>
|
|
<option value="10" selected>10 Questions</option>
|
|
<option value="15">15 Questions</option>
|
|
<option value="20">20 Questions</option>
|
|
</select>
|
|
</div>
|
|
<button class="btn btn--primary" id="generate-quiz">Generate Quiz</button>
|
|
</div>
|
|
<div id="quiz-container" class="quiz-container hidden">
|
|
<!-- Quiz questions will be generated here -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Planner Tab -->
|
|
<section id="planner" class="tab-content">
|
|
<div class="planner-section">
|
|
<h2>Study Planner</h2>
|
|
<div class="planner-grid">
|
|
<div class="planner-card">
|
|
<h3>📅 Study Schedule</h3>
|
|
<div class="study-schedule">
|
|
<div class="schedule-item">
|
|
<span class="schedule-time">9:00 AM</span>
|
|
<span class="schedule-subject">Mathematics Review</span>
|
|
</div>
|
|
<div class="schedule-item">
|
|
<span class="schedule-time">2:00 PM</span>
|
|
<span class="schedule-subject">Science Quiz Practice</span>
|
|
</div>
|
|
<div class="schedule-item">
|
|
<span class="schedule-time">7:00 PM</span>
|
|
<span class="schedule-subject">History Flashcards</span>
|
|
</div>
|
|
</div>
|
|
<button class="btn btn--secondary">Add Study Session</button>
|
|
</div>
|
|
<div class="planner-card">
|
|
<h3>🎯 Study Goals</h3>
|
|
<div class="goals-list">
|
|
<div class="goal-item">
|
|
<input type="checkbox" id="goal1">
|
|
<label for="goal1">Complete Math Chapter 5</label>
|
|
</div>
|
|
<div class="goal-item">
|
|
<input type="checkbox" id="goal2">
|
|
<label for="goal2">Review Science Notes</label>
|
|
</div>
|
|
<div class="goal-item">
|
|
<input type="checkbox" id="goal3">
|
|
<label for="goal3">Practice 20 Quiz Questions</label>
|
|
</div>
|
|
</div>
|
|
<button class="btn btn--secondary">Add Goal</button>
|
|
</div>
|
|
<div class="planner-card">
|
|
<h3>⏰ Reminders</h3>
|
|
<div class="reminders-list">
|
|
<div class="reminder-item">
|
|
<span class="reminder-text">Math exam in 3 days</span>
|
|
<span class="status status--warning">Pending</span>
|
|
</div>
|
|
<div class="reminder-item">
|
|
<span class="reminder-text">Submit assignment</span>
|
|
<span class="status status--error">Overdue</span>
|
|
</div>
|
|
</div>
|
|
<button class="btn btn--secondary">Set Reminder</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Loading Modal -->
|
|
<div id="loading-modal" class="modal hidden">
|
|
<div class="modal__content">
|
|
<div class="loading-spinner"></div>
|
|
<h3 id="loading-title">Processing with AI...</h3>
|
|
<p id="loading-text">Please wait while we analyze your content and generate study materials.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html> |