Files
EduCatWeb/views/index.ejs

225 lines
12 KiB
Plaintext

<%- include('partials/header') %>
<!-- Display flash messages -->
<% if (messages.error) { %>
<div class="alert alert-danger alert-dismissible fade show m-3" role="alert">
<i class="fas fa-exclamation-triangle me-2"></i>
<%= messages.error %>
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
<% } %>
<% if (messages.success) { %>
<div class="alert alert-success alert-dismissible fade show m-3" role="alert">
<i class="fas fa-check-circle me-2"></i>
<%= messages.success %>
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
<% } %>
<div class="hero-section bg-gradient-primary text-white py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<% if (user) { %>
<h1 class="display-4 fw-bold mb-4">Welcome back, <%= user.name %>!</h1>
<p class="lead mb-4">Ready to enhance your study experience? Upload notes, generate AI quizzes, get personalized revision, and chat with our intelligent assistant.</p>
<div class="d-flex gap-3 flex-wrap">
<a href="/upload" class="btn btn-light btn-lg">
<i class="fas fa-upload me-2"></i>Upload Notes
</a>
<a href="/quiz" class="btn btn-outline-light btn-lg">
<i class="fas fa-question-circle me-2"></i>Take Quiz
</a>
</div>
<% } else { %>
<h1 class="display-4 fw-bold mb-4">Welcome to EduCat</h1>
<p class="lead mb-4">Transform your study experience with AI-powered note revision, personalized quizzes, and intelligent tutoring. Upload your notes and let our smart system create the perfect study environment for you.</p>
<div class="d-flex gap-3 flex-wrap">
<a href="/login" class="btn btn-light btn-lg">
<i class="fas fa-sign-in-alt me-2"></i>Get Started
</a>
<a href="/register" class="btn btn-outline-light btn-lg">
<i class="fas fa-user-plus me-2"></i>Sign Up Free
</a>
</div>
<% } %>
</div>
<div class="col-lg-6 text-center">
<img src="/images/logo.png" alt="EduCat" class="img-fluid" style="max-height: 300px;">
</div>
</div>
</div>
</div>
<div class="container py-5">
<div class="row">
<div class="col-md-3 mb-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body text-center">
<div class="feature-icon bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
<i class="fas fa-upload fa-2x"></i>
</div>
<h5 class="card-title">Upload Your Notes</h5>
<p class="card-text">Simply upload your study notes in various formats (PDF, DOC, TXT) and let our AI analyze them.</p>
<% if (user) { %>
<a href="/upload" class="btn btn-primary">Get Started</a>
<% } else { %>
<a href="/login" class="btn btn-primary">Get Started</a>
<% } %>
</div>
</div>
</div>
<div class="col-md-3 mb-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body text-center">
<div class="feature-icon bg-success text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
<i class="fas fa-brain fa-2x"></i>
</div>
<h5 class="card-title">AI-Powered Revision</h5>
<p class="card-text">Our AI will summarize, improve, and generate study questions from your notes automatically.</p>
<% if (user) { %>
<a href="/dashboard" class="btn btn-success">View Dashboard</a>
<% } else { %>
<a href="/login" class="btn btn-success">View Dashboard</a>
<% } %>
</div>
</div>
</div>
<div class="col-md-3 mb-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body text-center">
<div class="feature-icon bg-warning text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
<i class="fas fa-question-circle fa-2x"></i>
</div>
<h5 class="card-title">AI Quiz Generator</h5>
<p class="card-text">Generate personalized quizzes on any topic with multiple question types and difficulty levels.</p>
<% if (user) { %>
<a href="/quiz" class="btn btn-warning">Take Quiz</a>
<% } else { %>
<a href="/login" class="btn btn-warning">Take Quiz</a>
<% } %>
</div>
</div>
</div>
<div class="col-md-3 mb-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body text-center">
<div class="feature-icon bg-info text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
<i class="fas fa-comments fa-2x"></i>
</div>
<h5 class="card-title">Interactive Chat</h5>
<p class="card-text">Ask questions about your notes and get instant, intelligent responses from our AI assistant.</p>
<% if (user) { %>
<a href="/chat" class="btn btn-info">Start Chatting</a>
<% } else { %>
<a href="/login" class="btn btn-info">Start Chatting</a>
<% } %>
</div>
</div>
</div>
</div>
</div>
<!-- Quiz Section -->
<div class="bg-gradient-warning py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<h2 class="display-5 fw-bold text-white mb-4">Test Your Knowledge</h2>
<p class="lead text-white mb-4">Generate personalized quizzes on any topic with our AI-powered quiz generator. Choose from multiple question types and difficulty levels to challenge yourself.</p>
<div class="quiz-features mb-4">
<div class="d-flex align-items-center text-white mb-2">
<i class="fas fa-check-circle me-3"></i>
<span>Multiple choice questions</span>
</div>
<div class="d-flex align-items-center text-white mb-2">
<i class="fas fa-check-circle me-3"></i>
<span>True/False questions</span>
</div>
<div class="d-flex align-items-center text-white mb-2">
<i class="fas fa-check-circle me-3"></i>
<span>Instant feedback and scoring</span>
</div>
<div class="d-flex align-items-center text-white mb-2">
<i class="fas fa-check-circle me-3"></i>
<span>Customizable difficulty levels</span>
</div>
</div>
<% if (user) { %>
<a href="/quiz" class="btn btn-light btn-lg">
<i class="fas fa-question-circle me-2"></i>Start Quiz
</a>
<% } else { %>
<a href="/login" class="btn btn-light btn-lg">
<i class="fas fa-sign-in-alt me-2"></i>Login to Start
</a>
<% } %>
</div>
<div class="col-lg-6 text-center">
<div class="quiz-preview bg-white rounded-3 shadow-lg p-4 mx-auto" style="max-width: 400px;">
<h6 class="text-primary mb-3">Sample Quiz Question</h6>
<div class="quiz-question mb-3">
<p class="fw-bold mb-3">What is the capital of France?</p>
<div class="quiz-options">
<div class="form-check text-start mb-2">
<input class="form-check-input" type="radio" name="sample" disabled>
<label class="form-check-label">London</label>
</div>
<div class="form-check text-start mb-2">
<input class="form-check-input" type="radio" name="sample" checked disabled>
<label class="form-check-label">Paris ✓</label>
</div>
<div class="form-check text-start mb-2">
<input class="form-check-input" type="radio" name="sample" disabled>
<label class="form-check-label">Berlin</label>
</div>
<div class="form-check text-start">
<input class="form-check-input" type="radio" name="sample" disabled>
<label class="form-check-label">Madrid</label>
</div>
</div>
</div>
<div class="text-success small">
<i class="fas fa-check me-1"></i>Correct! Great job.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-light py-5">
<div class="container">
<div class="row">
<div class="col-lg-10 mx-auto text-center">
<h2 class="mb-4">How EduCat Works</h2>
<div class="row">
<div class="col-md-3">
<div class="step-number bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 50px; height: 50px;">1</div>
<h6>Upload</h6>
<p class="text-muted">Upload your study notes in any supported format</p>
</div>
<div class="col-md-3">
<div class="step-number bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 50px; height: 50px;">2</div>
<h6>AI Analysis</h6>
<p class="text-muted">Our AI analyzes and processes your content</p>
</div>
<div class="col-md-3">
<div class="step-number bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 50px; height: 50px;">3</div>
<h6>Take Quizzes</h6>
<p class="text-muted">Generate personalized quizzes to test your knowledge</p>
</div>
<div class="col-md-3">
<div class="step-number bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 50px; height: 50px;">4</div>
<h6>Get Results</h6>
<p class="text-muted">Receive improved notes, summaries, and instant feedback</p>
</div>
</div>
</div>
</div>
</div>
</div>
<%- include('partials/footer') %>