PrepWise: Generate Your Perfect Study Plan
Hey guys! Let's dive into how you can generate a killer study plan using PrepWise. This guide will walk you through the HTML structure and the cool features of the "Generate Plan" page. Get ready to boost your study game!
HTML Structure
First off, let's break down the basic HTML structure. The page starts with the standard <!DOCTYPE html> declaration, followed by the <html> tag with the language set to English.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Generate Plan • PrepWise</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Page content here -->
</body>
</html>
Header Section
The <head> section includes meta tags for character set and viewport settings, the page title, and a link to the CSS stylesheet (style.css). These elements are crucial for ensuring the page displays correctly on different devices and browsers.
Body Section
The <body> section contains all the visible content of the page. It's divided into three main parts: the header, the main content, and the footer.
Header
The header section provides navigation and branding for the PrepWise app. It includes the logo, the brand name, and navigation links.
<header class="header">
<div class="container">
<div class="nav">
<a class="brand" href="homepage.html">
<img src="PrepWiseLogo.png" alt="PrepWise Logo" class="logo-img">
<span>PrepWise</span>
</a>
<nav>
<a href="homepage.html">Home</a>
<a href="#">Plan</a>
<a href="#">Pomodoro</a>
<a href="#">Achievements</a>
<a href="#">Profile</a>
</nav>
</div>
</div>
</header>
Key Components of the Header
- Logo and Brand: The
<a>tag with the classbrandlinks to the homepage and includes the PrepWise logo and brand name. This is important for maintaining brand consistency and easy navigation. - Navigation: The
<nav>element contains links to other sections of the app, such as Home, Plan, Pomodoro, Achievements, and Profile. These links help users quickly access different features.
Main Content
The main content section is where the study plan generation form resides. It's wrapped in a <main> element with classes container and add-page for styling purposes. Inside, there are two main divs: add-head and add-card.
<main class="container add-page">
<div class="add-head">
<h1>Generate Study Plan</h1>
<p class="helper">Fill in the subject and chapter difficulties (max 4). In the PHP phase this form will create tasks automatically.</p>
</div>
<section class="add-card">
<!-- Form content here -->
</section>
</main>
Add Head Section
The add-head section contains the main heading (<h1>) and a helper paragraph (<p>) that provides instructions to the user. This helps users understand the purpose of the page and how to use the form.
Add Card Section
The add-card section contains the form for generating the study plan. It includes fields for selecting the subject, number of chapters, and chapter difficulties.
<section class="add-card">
<form>
<div class="form-grid">
<!-- Form rows here -->
</div>
<div class="actions">
<a class="btn" href="#">Generate Plan</a>
<a class="btn ghost" href="homepage.html">Cancel</a>
</div>
</form>
</section>
Form Elements
The form is structured using a grid layout (form-grid). Each form row (form-row) contains a label and an input element, such as a <select> dropdown. The key form elements include:
-
Subject Selection: A
<select>element with the idsubjectallows the user to choose a subject from a predefined list (Database, Networks, Software Engineering, Security). In a real application, this list would be dynamically populated from a database using PHP.<div class="form-row"> <label for="subject">Subject</label> <select id="subject" class="select" name="subject"> <!-- In PHP: populate from DB --> <option>Database</option> <option>Networks</option> <option>Software Engineering</option> <option>Security</option> </select> <span class="helper">Choose the subject you want to generate tasks for.</span> </div> -
Number of Chapters: Another
<select>element with the idchapterslets the user select the number of chapters (up to 4). The selected value determines how many difficulty fields will be considered.<div class="form-row"> <label for="chapters">Number of Chapters (max 4)</label> <select id="chapters" class="select" name="chapters"> <option value="1">1 chapter</option> <option value="2">2 chapters</option> <option value="3">3 chapters</option> <option value="4" selected>4 chapters</option> </select> <span class="helper">We will only read the first N difficulty fields below.</span> </div> -
Chapter Difficulties: A
<fieldset>element with the classchoice-setcontains four<select>elements for specifying the difficulty of each chapter. Each<select>has options for Easy, Medium, and Hard.<fieldset class="choice-set"> <legend>Chapter Difficulties</legend> <div class="choice-grid"> <div class="choice-line"> <span>1</span> <select class="select" name="diff1"> <option value="easy">Easy</option> <option value="medium">Medium</option> <option value="hard">Hard</option> </select> </div> <!-- More difficulty selections --> </div> <p class="helper" style="margin-top:6px;"> Example: if chapters = 3, we’ll read <strong>diff1–diff3</strong> and ignore diff4. </p> </fieldset> -
Actions: The
actionsdiv contains two buttons: "Generate Plan" and "Cancel." The "Generate Plan" button would ideally trigger the form submission and plan generation (handled by PHP in a real application), while the "Cancel" button redirects the user back to the homepage.<div class="actions"> <a class="btn" href="#">Generate Plan</a> <a class="btn ghost" href="homepage.html">Cancel</a> </div>
Footer
The footer section contains copyright information, the PrepWise logo, social media links, and contact information. It's an important part of the page for providing additional information and branding.
<footer>
<div class="footer-container">
<div class="logo">
<div class="copyright">© 2025 PrepWise</div>
<img src="PrepWiseLogo.png" alt="PrepWise logo" />
<p class="textfooter">Smart study planner for students.</p>
</div>
<div class="social-media">
<h3>Follow us</h3>
<p><i>in</i> LinkedIn</p>
<p><i>t</i> Twitter/X</p>
<p><i>ig</i> Instagram</p>
</div>
<div class="contact-us">
<h3>Contact</h3>
<p><i>@</i> <a href="mailto:support@prepwise.app">support@prepwise.app</a></p>
<p><i>☎</i> +966-555-000-000</p>
</div>
</div>
</footer>
Key Components of the Footer
- Logo and Copyright: The
logodiv contains the PrepWise logo and copyright information. - Social Media: The
social-mediadiv includes links to PrepWise's social media profiles. - Contact Information: The
contact-usdiv provides the email address and phone number for contacting PrepWise.
Styling (style.css)
The CSS file (style.css) is responsible for the visual presentation of the page. It defines the layout, colors, fonts, and other styling properties. While the specific CSS code isn't included here, it's essential for making the page look professional and user-friendly.
PHP Integration (Future Phase)
The HTML structure is set up to work with PHP for dynamic content generation and form submission. Here’s how PHP would enhance the functionality:
- Populating Subjects from Database: Instead of hardcoding the subject options in the
<select>element, PHP would query a database to retrieve a list of subjects and dynamically generate the<option>elements. - Handling Form Submission: When the user clicks the "Generate Plan" button, the form data would be submitted to a PHP script (
generate_plan.php). This script would process the data, create the study plan, and potentially store it in a database. - Dynamic Difficulty Levels: Based on user preferences or historical data, PHP could adjust the difficulty levels for each chapter to create a personalized study plan.
Conclusion
So there you have it! The HTML structure for the "Generate Plan" page in PrepWise is designed to be user-friendly and flexible. With the addition of PHP, this page can become a powerful tool for creating personalized study plans. Keep studying smart, guys!