Spaces:
Running
Running
Build a **Lovable web app** called **HPC2020** to create **Student Grade Cards** for schools. The app must be fully responsive for desktop and mobile devices, with an intuitive, easy-to-use interface optimized for touch on mobile (e.g., large buttons, simple navigation, and collapsible sections). Ensure the final grade card preview is stable for printing and adjustable to fit perfectly on A4 paper size (portrait orientation, with automatic scaling, margins of 0.5 inches, and options to adjust font sizes or layout for print via CSS media queries or built-in print styling). Use a professional, CBSE-style design with soft pink themes where specified, official-looking tables with borders, and colors like deep pink (#e91e63) for accents, soft pink (#ffe6f0) for backgrounds, academic red (#c62828) for headers, pale gray (#f5f5f5) for table headers, dark gray (#333333) for text, and light gray (#cccccc) for borders. Fonts should include Poppins (bold for headings, 22-26px), Open Sans (body text, 14-16px), and Roboto (table text, 13-14px). Incorporate automatic calculations for totals, percentages, and grades, with validation to prevent invalid inputs (e.g., marks exceeding maximums). Use Lovable's data management for database-like storage, workflows for automation, and components for UI. For PDF export/print, integrate a suitable method (e.g., via Lovable's built-in export or a third-party integration like pdf-lib if supported). Match the look of a holistic progress card but with the specified updates.
a9f160f verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Class Selection | GradeGenie</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"> | |
| <style> | |
| .class-btn { | |
| @apply flex-1 min-w-[120px] bg-accent-pink hover:bg-opacity-90 text-white font-poppins py-6 px-4 rounded-lg shadow-md transition duration-300 transform hover:scale-105 text-center; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-opensans bg-soft-pink min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <div class="max-w-2xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="p-6 bg-academic-red"> | |
| <h1 class="text-2xl font-poppins text-white text-center">Select Class</h1> | |
| </div> | |
| <div class="p-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-4"> | |
| <button onclick="window.location.href='student-details.html'" class="class-btn">Class 1</button> | |
| <button onclick="window.location.href='student-details.html'" class="class-btn">Class 2</button> | |
| <button onclick="window.location.href='student-details.html'" class="class-btn">Class 3</button> | |
| <button onclick="window.location.href='student-details.html'" class="class-btn">Class 4</button> | |
| <button onclick="window.location.href='student-details.html'" class="class-btn">Class 5</button> | |
| <button onclick="window.location.href='student-details.html'" class="class-btn">Class 6</button> | |
| <button onclick="window.location.href='student-details.html'" class="class-btn">Class 7</button> | |
| <button onclick="window.location.href='student-details.html'" class="class-btn">Class 8</button> | |
| </div> | |
| <div class="flex justify-between mt-8 no-print"> | |
| <button onclick="window.location.href='school-details.html'" class="bg-pale-gray hover:bg-opacity-90 text-dark-gray font-poppins py-3 px-6 rounded-lg shadow-md transition duration-300"> | |
| <i class="fas fa-arrow-left mr-2"></i> Back | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |