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>Marks Entry | 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> | |
| .mark-input { | |
| @apply w-full px-2 py-1 border border-light-gray rounded text-center focus:ring-2 focus:ring-accent-pink focus:border-transparent; | |
| } | |
| .table-header { | |
| @apply bg-pale-gray font-medium text-dark-gray text-center py-2; | |
| } | |
| .table-cell { | |
| @apply px-2 py-2 border-b border-light-gray text-center; | |
| } | |
| .even-row { | |
| @apply bg-white; | |
| } | |
| .odd-row { | |
| @apply bg-soft-pink; | |
| } | |
| .total-cell { | |
| @apply font-medium bg-white; | |
| } | |
| </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-6xl 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">Marks Entry</h1> | |
| </div> | |
| <div class="p-4 md:p-8 overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="table-header"> | |
| <th class="table-cell">Subject</th> | |
| <th class="table-cell">F1 (5)</th> | |
| <th class="table-cell">F2 (5)</th> | |
| <th class="table-cell">F3 (5)</th> | |
| <th class="table-cell">F4 (5)</th> | |
| <th class="table-cell">F5 (5)</th> | |
| <th class="table-cell">F6 (5)</th> | |
| <th class="table-cell">CC (20)</th> | |
| <th class="table-cell">SA (50)</th> | |
| <th class="table-cell">Total (100)</th> | |
| <th class="table-cell">Obtained</th> | |
| <th class="table-cell">Grade</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <!-- Mathematics --> | |
| <tr class="odd-row"> | |
| <td class="table-cell font-medium">Mathematics</td> | |
| <td class="table-cell"><input type="number" min="0" max="5" class="mark-input" value="0"></td> | |
| <td class="table-cell"><input type="number" min="0" max="5" class="mark-input" value="0"></td> | |
| <td class="table-cell"><input type="number" min="0" max="5" class="mark-input" value="0"></td> | |
| <td class="table-cell"><input type="number" min="0" max="5" class="mark-input" value="0"></td> | |
| <td class="table-cell"><input type="number" min="0" max="5" class="mark-input" value="0"></td> | |
| <td class="table-cell"><input type="number" min="0" max="5" class="mark-input" value="0"></td> | |
| <td class="table-cell"><input type="number" min="0" max="20" class="mark-input" value="0"></td> | |
| <td class="table-cell"><input type="number" min="0" max="50" class="mark-input" value="0"></td> | |
| <td class="table-cell total-cell">0</td> | |
| <td class="table-cell"><input type="number" min="0" class="mark-input" value="0"></td> | |
| <td class="table-cell total-cell">E</td> | |
| </tr> | |
| <!-- Repeat for other subjects --> | |
| <tr class="even-row"> | |
| <td class="table-cell font-medium">English</td> | |
| <td class="table-cell"><input type="number" min="0" max="5" class="mark-input" value="0"></td> | |
| <td class="table-cell"><input type="number" min="0" max="5" class="mark-input" value="0"></td> | |
| <td class="table-cell"><input type="number" min="0" max="5" class="mark-input" value="0"></td> | |
| <td class="table-cell"><input type="number" min="0" max="5" class="mark-input" value="0"></td> | |
| <td class="table-cell"><input type="number" min="0" max="5" class="mark-input" value="0"></td> | |
| <td class="table-cell"><input type="number" min="0" max="5" class="mark-input" value="0"></td> | |
| <td class="table-cell"><input type="number" min="0" max="20" class="mark-input" value="0"></td> | |
| <td class="table-cell"><input type="number" min="0" max="50" class="mark-input" value="0"></td> | |
| <td class="table-cell total-cell">0</td> | |
| <td class="table-cell"><input type="number" min="0" class="mark-input" value="0"></td> | |
| <td class="table-cell total-cell">E</td> | |
| </tr> | |
| <tr class="odd-row"> | |
| <td class="table-cell font-medium">Science</td> | |
| <td class="table-cell"><input type="number" min="0" max="5" class="mark-input" value="0"></td> | |
| <td class="table-cell"><input type="number" min="0" max="5" class="mark-input" value="0"></td> | |
| <td class="table-cell"><input type="number" min="0" max="5" class="mark-input" value="0"></td> | |
| <td class="table-cell"><input type="number" min="0" max="5" class="mark-input" value="0"></td> | |
| <td class="table-cell"><input type="number" min="0" max="5" class="mark-input" value="0"></td> | |
| <td class="table-cell"><input type="number" min="0" max="5" class="mark-input" value="0"></td> | |
| <td class="table-cell"><input type="number" min="0" max="20" class="mark-input" value="0"></td> | |
| <td class="table-cell"><input type="number" min="0" max="50" class="mark-input" value="0"></td> | |
| <td class="table-cell total-cell">0</td> | |
| <td class="table-cell"><input type="number" min="0" class="mark-input" value="0"></td> | |
| <td class="table-cell total-cell">E</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <div class="flex justify-between mt-8 no-print"> | |
| <button type="button" onclick="window.location.href='student-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> | |
| <button type="button" onclick="window.location.href='grade-card.html'" class="bg-accent-pink hover:bg-opacity-90 text-white font-poppins py-3 px-8 rounded-lg shadow-md transition duration-300"> | |
| Save & Generate Card <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Auto-calculation logic would be implemented here | |
| document.querySelectorAll('.mark-input').forEach(input => { | |
| input.addEventListener('input', function() { | |
| // Calculate totals and grade for each row | |
| const row = this.closest('tr'); | |
| const inputs = row.querySelectorAll('input[type="number"]'); | |
| // Calculate FA total (F1-F6) | |
| let faTotal = 0; | |
| for (let i = 0; i < 6; i++) { | |
| faTotal += parseInt(inputs[i].value) || 0; | |
| } | |
| // Get CC and SA values | |
| const cc = parseInt(inputs[6].value) || 0; | |
| const sa = parseInt(inputs[7].value) || 0; | |
| // Calculate total (FA + CC + SA) | |
| const total = faTotal + cc + sa; | |
| row.querySelector('td:nth-child(10)').textContent = total; | |
| // Get obtained marks | |
| const obtained = parseInt(inputs[8].value) || 0; | |
| // Calculate percentage and grade (simplified for demo) | |
| const percentage = (obtained / total) * 100; | |
| let grade = 'E'; | |
| if (percentage >= 91) grade = 'A1'; | |
| else if (percentage >= 81) grade = 'A2'; | |
| else if (percentage >= 71) grade = 'B1'; | |
| else if (percentage >= 61) grade = 'B2'; | |
| else if (percentage >= 51) grade = 'C1'; | |
| else if (percentage >= 41) grade = 'C2'; | |
| else if (percentage >= 33) grade = 'D'; | |
| row.querySelector('td:last-child').textContent = grade; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |